lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix datetime picker. Closes #3143

Browse Source
This commit is contained in:
James Brooks
2018-06-29 20:59:13 +01:00
parent 8c623bc67d
commit d0b802d82f
13 changed files with 97 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -16,8 +16,8 @@
"bootstrap-sass": "^3.3.6",
"chart.js": "^2.7.0",
"cross-env": "^5.1",
"eonasdan-bootstrap-datetimepicker": "^4.17",
"es5-shim": "^4.5.9",
"flatpickr": "^4.5.0",
"github-markdown-css": "^2.3.0",
"gulp": "^3.9.1",
"ionicons": "~2.0",

12
resources/assets/js/app.js
View File

@@ -20,6 +20,11 @@ window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
};
/**
* Flatpickr.
*/
const Flatpickr = require('flatpickr');
((win, doc) => {
/**
* Next, we will create a fresh Vue application instance and attach it to
@@ -43,6 +48,13 @@ window.axios.defaults.headers.common = {
}
}
},
mounted () {
Flatpickr('.flatpickr');
Flatpickr('.flatpickr-time', {
enableTime: true
});
},
components: {
'setup': require('./components/Setup'),
'dashboard': require('./components/dashboard/Dashboard'),

46
resources/assets/js/cachet.js
View File

@@ -133,52 +133,6 @@ $(function () {
}
});
// Date picker.
$('input[rel=datepicker]').datetimepicker({
format: "DD/MM/YYYY HH:mm",
minDate: new Date(), // Don't allow dates before today.
sideBySide: true,
icons: {
time: 'ion-clock',
date: 'ion-android-calendar',
up: 'ion-ios-arrow-up',
down: 'ion-ios-arrow-down',
previous: 'ion-ios-arrow-left',
next: 'ion-ios-arrow-right',
today: 'ion-android-home',
clear: 'ion-trash-a',
}
});
$('input[rel=datepicker-any]').datetimepicker({
format: "DD/MM/YYYY HH:mm",
sideBySide: true,
icons: {
time: 'ion-clock',
date: 'ion-android-calendar',
up: 'ion-ios-arrow-up',
down: 'ion-ios-arrow-down',
previous: 'ion-ios-arrow-left',
next: 'ion-ios-arrow-right',
today: 'ion-android-home',
clear: 'ion-trash-a',
}
});
$('input[rel=datepicker-custom]').datetimepicker({
sideBySide: true,
icons: {
time: 'ion-clock',
date: 'ion-android-calendar',
up: 'ion-ios-arrow-up',
down: 'ion-ios-arrow-down',
previous: 'ion-ios-arrow-left',
next: 'ion-ios-arrow-right',
today: 'ion-android-home',
clear: 'ion-trash-a',
}
});
// Sortable models.
var orderableLists = document.querySelectorAll('[data-orderable-list]');

1
resources/assets/sass/_vendors.scss vendored
View File

@@ -4,6 +4,7 @@ $ionicons-font-path: "../../../fonts" !default;
@import "./node_modules/ionicons/scss/ionicons";
@import "modules/bootstrap";
@import "plugins/flatpickr";
html {
position: relative;

1
resources/assets/sass/dashboard.scss vendored
View File

@@ -19,6 +19,5 @@
@import "plugins/sweetalert";
@import "plugins/messenger";
@import "plugins/animate";
@import "plugins/bootstrap-datetimepicker/bootstrap-datetimepicker";
@import "plugins/password-strength";
@import "plugins/sortable";

61
resources/assets/sass/plugins/_flatpickr.scss vendored Normal file
View File

@@ -0,0 +1,61 @@
@import "./node_modules/flatpickr/dist/flatpickr";
.flatpickr-calendar {
width: auto;
min-width: 293.75px;
padding: rem-calc(10);
&.open {
z-index: 4 !important;
}
.flatpickr-month {
min-height: 30px;
}
.flatpickr-prev-month,
.flatpickr-current-month,
.flatpickr-next-month {
padding: 0;
display: flex !important;
justify-content: center;
align-items: center;
height: 100%;
}
.flatpickr-prev-month,
.flatpickr-next-month {
border-radius: 1rem;
padding: 0.5rem;
&:hover {
background-color: $cachet-gray-light;
svg {
color: rgba(0, 0, 0, 0.9);
fill: rgba(0, 0, 0, 0.9);
}
}
}
.flatpickr-current-month {
.cur-month {
margin-left: 1rem;
&:hover {
background: transparent;
}
}
}
.flatpickr-day {
line-height: 36px;
&:hover {
background-color: $cachet-gray-light;
border-color: $cachet-gray-light;
}
}
.numInputWrapper {
width: 4rem;
margin-left: 0.5rem;
.numInput {
padding: 0;
box-shadow: none;
}
}
}
.flatpickr-time {
text-align: left;
}

342
resources/assets/sass/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.scss vendored
View File

@@ -1,342 +0,0 @@
// Import boostrap variables including default color palette and fonts
@import "./node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables";
$bs-datetimepicker-timepicker-font-size: 1.2em !default;
$bs-datetimepicker-active-bg: $cachet-green !default;
$bs-datetimepicker-active-color: $btn-primary-color !default;
$bs-datetimepicker-border-radius: $border-radius-base !default;
$bs-datetimepicker-btn-hover-bg: $cachet-gray-light !default;
$bs-datetimepicker-disabled-color: $cachet-gray !default;
$bs-datetimepicker-alternate-color: $cachet-gray !default;
$bs-datetimepicker-secondary-border-color: #ccc !default;
$bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;
$bs-datetimepicker-primary-border-color: white !default;
$bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;
.bootstrap-datetimepicker-widget {
list-style: none;
&.dropdown-menu {
margin: 2px 0;
padding: 4px;
width: 19em;
&.timepicker-sbs {
@media (min-width: $screen-sm-min) {
width: 38em;
}
@media (min-width: $screen-md-min) {
width: 38em;
}
@media (min-width: $screen-lg-min) {
width: 38em;
}
}
&:before, &:after {
content: '';
display: inline-block;
position: absolute;
}
&.bottom {
&:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid $bs-datetimepicker-secondary-border-color;
border-bottom-color: $bs-datetimepicker-secondary-border-color-rgba;
top: -7px;
left: 7px;
}
&:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid $bs-datetimepicker-primary-border-color;
top: -6px;
left: 8px;
}
}
&.top {
&:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid $bs-datetimepicker-secondary-border-color;
border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
bottom: -7px;
left: 6px;
}
&:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid $bs-datetimepicker-primary-border-color;
bottom: -6px;
left: 7px;
}
}
&.pull-right {
&:before {
left: auto;
right: 6px;
}
&:after {
left: auto;
right: 7px;
}
}
}
.list-unstyled {
margin: 0;
}
a[data-action] {
padding: 6px 0;
}
a[data-action]:active {
box-shadow: none;
}
.timepicker-hour, .timepicker-minute, .timepicker-second {
width: 54px;
font-weight: bold;
font-size: $bs-datetimepicker-timepicker-font-size;
margin: 0;
}
button[data-action] {
padding: 6px;
}
.btn[data-action="incrementHours"]::after {
@extend .sr-only;
content: "Increment Hours";
}
.btn[data-action="incrementMinutes"]::after {
@extend .sr-only;
content: "Increment Minutes";
}
.btn[data-action="decrementHours"]::after {
@extend .sr-only;
content: "Decrement Hours";
}
.btn[data-action="decrementMinutes"]::after {
@extend .sr-only;
content: "Decrement Minutes";
}
.btn[data-action="showHours"]::after {
@extend .sr-only;
content: "Show Hours";
}
.btn[data-action="showMinutes"]::after {
@extend .sr-only;
content: "Show Minutes";
}
.btn[data-action="togglePeriod"]::after {
@extend .sr-only;
content: "Toggle AM/PM";
}
.btn[data-action="clear"]::after {
@extend .sr-only;
content: "Clear the picker";
}
.btn[data-action="today"]::after {
@extend .sr-only;
content: "Set the date to today";
}
.picker-switch {
text-align: center;
&::after {
@extend .sr-only;
content: "Toggle Date and Time Screens";
}
td {
padding: 0;
margin: 0;
height: auto;
width: auto;
line-height: inherit;
span {
line-height: 2.5;
height: 2.5em;
width: 100%;
}
}
}
table {
width: 100%;
margin: 0;
& td,
& th {
text-align: center;
border-radius: $bs-datetimepicker-border-radius;
}
& th {
height: 20px;
line-height: 20px;
width: 20px;
&.picker-switch {
width: 145px;
}
&.disabled,
&.disabled:hover {
background: none;
color: $bs-datetimepicker-disabled-color;
cursor: not-allowed;
}
&.prev::after {
@extend .sr-only;
content: "Previous Month";
}
&.next::after {
@extend .sr-only;
content: "Next Month";
}
}
& thead tr:first-child th {
cursor: pointer;
&:hover {
background: $bs-datetimepicker-btn-hover-bg;
}
}
& td {
height: 54px;
line-height: 54px;
width: 54px;
&.cw {
font-size: .8em;
height: 20px;
line-height: 20px;
color: $bs-datetimepicker-alternate-color;
}
&.day {
height: 20px;
line-height: 20px;
width: 20px;
}
&.day:hover,
&.hour:hover,
&.minute:hover,
&.second:hover {
background: $bs-datetimepicker-btn-hover-bg;
cursor: pointer;
}
&.old,
&.new {
color: $bs-datetimepicker-alternate-color;
}
&.today {
position: relative;
&:before {
content: '';
display: inline-block;
border: solid transparent;
border-width: 0 0 7px 7px;
border-bottom-color: $bs-datetimepicker-active-bg;
border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
position: absolute;
bottom: 4px;
right: 4px;
}
}
&.active,
&.active:hover {
background-color: $bs-datetimepicker-active-bg;
color: $bs-datetimepicker-active-color;
text-shadow: $bs-datetimepicker-text-shadow;
}
&.active.today:before {
border-bottom-color: #fff;
}
&.disabled,
&.disabled:hover {
background: none;
color: $bs-datetimepicker-disabled-color;
cursor: not-allowed;
}
span {
display: inline-block;
width: 54px;
height: 54px;
line-height: 54px;
margin: 2px 1.5px;
cursor: pointer;
border-radius: $bs-datetimepicker-border-radius;
&:hover {
background: $bs-datetimepicker-btn-hover-bg;
}
&.active {
background-color: $bs-datetimepicker-active-bg;
color: $bs-datetimepicker-active-color;
text-shadow: $bs-datetimepicker-text-shadow;
}
&.old {
color: $bs-datetimepicker-alternate-color;
}
&.disabled,
&.disabled:hover {
background: none;
color: $bs-datetimepicker-disabled-color;
cursor: not-allowed;
}
}
}
}
&.usetwentyfour {
td.hour {
height: 27px;
line-height: 27px;
}
}
}
.input-group.date {
& .input-group-addon {
cursor: pointer;
}
}

2
resources/views/dashboard/incidents/add.blade.php
View File

@@ -118,7 +118,7 @@
</div>
<div class="form-group">
<label>{{ trans('forms.incidents.occurred_at') }}</label> <small class="text-muted">{{ trans('forms.optional') }}</small>
<input type="text" name="occurred_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" placeholder="{{ trans('forms.optional') }}">
<input type="text" name="occurred_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" placeholder="{{ trans('forms.optional') }}">
</div>
@if($notificationsEnabled)
<input type="hidden" name="notify" value="0">

2
resources/views/dashboard/incidents/edit.blade.php
View File

@@ -109,7 +109,7 @@
</div>
<div class="form-group">
<label>{{ trans('forms.incidents.occurred_at') }}</label> <small class="text-muted">{{ trans('forms.optional') }}</small>
<input type="text" name="occurred_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" value="{{ $incident->occurred_at_datetimepicker }}" placeholder="{{ trans('forms.optional') }}">
<input type="text" name="occurred_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" value="{{ $incident->occurred_at_datetimepicker }}" placeholder="{{ trans('forms.optional') }}">
</div>
</fieldset>

4
resources/views/dashboard/maintenance/add.blade.php
View File

@@ -49,11 +49,11 @@
</div>
<div class="form-group">
<label>{{ trans('forms.schedules.scheduled_at') }}</label>
<input type="text" name="scheduled_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" required placeholder="{{ trans('forms.schedules.scheduled_at') }}">
<input type="text" name="scheduled_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" required placeholder="{{ trans('forms.schedules.scheduled_at') }}">
</div>
<div class="form-group">
<label>{{ trans('forms.schedules.completed_at') }}</label>
<input type="text" name="completed_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" placeholder="{{ trans('forms.schedules.completed_at') }}">
<input type="text" name="completed_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" placeholder="{{ trans('forms.schedules.completed_at') }}">
</div>
</fieldset>

4
resources/views/dashboard/maintenance/edit.blade.php
View File

@@ -50,11 +50,11 @@
</div>
<div class="form-group">
<label>{{ trans('forms.schedules.scheduled_at') }}</label>
<input type="text" name="scheduled_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" value="{{ $schedule->scheduled_at_datetimepicker }}" required placeholder="{{ trans('forms.schedules.scheduled_at') }}">
<input type="text" name="scheduled_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" value="{{ $schedule->scheduled_at_datetimepicker }}" required placeholder="{{ trans('forms.schedules.scheduled_at') }}">
</div>
<div class="form-group">
<label>{{ trans('forms.schedules.completed_at') }}</label>
<input type="text" name="completed_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" value="{{ $schedule->completed_at_datetimepicker }}" placeholder="{{ trans('forms.schedules.completed_at') }}">
<input type="text" name="completed_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" value="{{ $schedule->completed_at_datetimepicker }}" placeholder="{{ trans('forms.schedules.completed_at') }}">
</div>
</fieldset>

1
webpack.mix.js
View File

@@ -37,7 +37,6 @@ mix
'node_modules/jquery/dist/jquery.min.js',
'node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
'node_modules/moment/min/moment-with-locales.min.js',
'node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
'node_modules/lodash/lodash.min.js',
'node_modules/autosize/dist/autosize.min.js',
'node_modules/messenger/build/js/messenger.min.js',

40
yarn.lock
View File

@@ -1062,10 +1062,6 @@ bootstrap-sass@^3.3.6:
version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
bootstrap@^3.3:
version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
brace-expansion@^1.0.0, brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2280,13 +2276,20 @@ domhandler@^2.3.0:
dependencies:
domelementtype "1"
domutils@1.5.1, domutils@^1.5.1:
domutils@1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
dependencies:
dom-serializer "0"
domelementtype "1"
domutils@^1.5.1:
version "1.7.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
dependencies:
dom-serializer "0"
domelementtype "1"
dotenv-expand@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
@@ -2422,15 +2425,6 @@ entities@^1.1.1, entities@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
eonasdan-bootstrap-datetimepicker@^4.17:
version "4.17.47"
resolved "https://registry.yarnpkg.com/eonasdan-bootstrap-datetimepicker/-/eonasdan-bootstrap-datetimepicker-4.17.47.tgz#7a49970044065276e7965efd16f822735219e735"
dependencies:
bootstrap "^3.3"
jquery "^1.8.3 || ^2.0 || ^3.0"
moment "^2.10"
moment-timezone "^0.4.0"
errno@^0.1.3, errno@~0.1.7:
version "0.1.7"
resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -3000,6 +2994,10 @@ flagged-respawn@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-1.0.0.tgz#4e79ae9b2eb38bf86b3bb56bf3e0a56aa5fcabd7"
flatpickr@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.5.0.tgz#f72c7164a1c24e3ad419e3b2209d1a2d3604724a"
flatten@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
@@ -4334,7 +4332,7 @@ jquery-sparkline@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/jquery-sparkline/-/jquery-sparkline-2.4.0.tgz#1be8b7b704dd3857152708aefb1d4a4b3a69fb33"
"jquery@>= 1.7.x", "jquery@^1.8.3 || ^2.0 || ^3.0", jquery@^2.2.4:
"jquery@>= 1.7.x", jquery@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02"
@@ -5071,13 +5069,7 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
dependencies:
minimist "0.0.8"
moment-timezone@^0.4.0:
version "0.4.1"
resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.4.1.tgz#81f598c3ad5e22cdad796b67ecd8d88d0f5baa06"
dependencies:
moment ">= 2.6.0"
"moment@>= 2.6.0", moment@^2.10, moment@^2.10.2, moment@^2.17.1:
moment@^2.10.2, moment@^2.17.1:
version "2.22.2"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
@@ -6585,11 +6577,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
dependencies:
aproba "^1.1.1"
safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@~5.1.1:
safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0:
safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.1.0:
version "5.1.2"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"