Skip to content

Commit 9d91ff1

Browse files
daverovertsdaveroverts
committed
feat(admin): replace jquery-ui datepicker with flatpickr
jquery-ui has been removed, and flatpickr is now used as the date time picker for event form fix #122
1 parent ac732d8 commit 9d91ff1

File tree

11 files changed

+103
-152
lines changed

11 files changed

+103
-152
lines changed

‎app/Http/Controllers/Event/EventAdminController.php

+8-32
Original file line numberDiff line numberDiff line change
@@ -66,22 +66,10 @@ public function store(StoreEvent $request): RedirectResponse
6666
'description'
6767
));
6868
$event->fill([
69-
'startEvent' => Carbon::createFromFormat(
70-
'd-m-Y H:i',
71-
$request->dateEvent . ' ' . $request->timeBeginEvent
72-
),
73-
'endEvent' => Carbon::createFromFormat(
74-
'd-m-Y H:i',
75-
$request->dateEvent . ' ' . $request->timeEndEvent
76-
),
77-
'startBooking' => Carbon::createFromFormat(
78-
'd-m-Y H:i',
79-
$request->dateBeginBooking . ' ' . $request->timeBeginBooking
80-
),
81-
'endBooking' => Carbon::createFromFormat(
82-
'd-m-Y H:i',
83-
$request->dateEndBooking . ' ' . $request->timeEndBooking
84-
),
69+
'startEvent' => $request->date('startEvent'),
70+
'endEvent' => $request->date('endEvent'),
71+
'startBooking' => $request->date('startBooking'),
72+
'endBooking' => $request->date('endBooking'),
8573
])->save();
8674

8775
flashMessage('success', __('Done'), __('Event has been created!'));
@@ -121,22 +109,10 @@ public function update(UpdateEvent $request, Event $event): RedirectResponse
121109
'description'
122110
));
123111
$event->fill([
124-
'startEvent' => Carbon::createFromFormat(
125-
'd-m-Y H:i',
126-
$request->dateEvent . ' ' . $request->timeBeginEvent
127-
),
128-
'endEvent' => Carbon::createFromFormat(
129-
'd-m-Y H:i',
130-
$request->dateEvent . ' ' . $request->timeEndEvent
131-
),
132-
'startBooking' => Carbon::createFromFormat(
133-
'd-m-Y H:i',
134-
$request->dateBeginBooking . ' ' . $request->timeBeginBooking
135-
),
136-
'endBooking' => Carbon::createFromFormat(
137-
'd-m-Y H:i',
138-
$request->dateEndBooking . ' ' . $request->timeEndBooking
139-
),
112+
'startEvent' => $request->date('startEvent'),
113+
'endEvent' => $request->date('endEvent'),
114+
'startBooking' => $request->date('startBooking'),
115+
'endBooking' => $request->date('endBooking'),
140116
])->save();
141117
flashMessage('success', __('Done'), __('Event has been updated!'));
142118
return redirect(route('admin.events.index'));

‎app/Http/Requests/Event/Admin/StoreEvent.php

+8-14
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,10 @@ public function rules()
2424
'is_oceanic_event' => 'required|boolean',
2525
'dep' => 'exists:airports,id|required',
2626
'arr' => 'exists:airports,id|required',
27-
'dateEvent' => 'required|date',
28-
'timeBeginEvent' => 'required',
29-
'timeEndEvent' => 'required',
30-
'dateBeginBooking' => 'required|date',
31-
'timeBeginBooking' => 'required',
32-
'dateEndBooking' => 'required|date|after_or_equal:dateBeginBooking',
33-
'timeEndBooking' => 'required',
27+
'startEvent' => 'required|date',
28+
'endEvent' => 'required|date|after_or_equal:startEvent',
29+
'startBooking' => 'required|date',
30+
'endBooking' => 'required|date|after_or_equal:startBooking',
3431
'image_url' => 'nullable|url',
3532
'description' => 'required:string',
3633
];
@@ -54,13 +51,10 @@ public function attributes()
5451
'is_oceanic_event' => __('Oceanic event?'),
5552
'dep' => __('Departure airport'),
5653
'arr' => __('Arrival airport'),
57-
'dateEvent' => __('Event date'),
58-
'timeBeginEvent' => __('Event begin'),
59-
'timeEndEvent' => __('Event end'),
60-
'dateBeginBooking' => __('Start bookings date'),
61-
'timeBeginBooking' => __('Start bookings time'),
62-
'dateEndBooking' => __('End bookings date'),
63-
'timeEndBooking' => __('End bookings time'),
54+
'startEvent' => __('Start event'),
55+
'endEvent' => __('End event'),
56+
'startBooking' => __('Start booking'),
57+
'endBooking' => __('End booking'),
6458
'image_url' => __('Image URL'),
6559
'description' => __('Description'),
6660
];

‎app/Http/Requests/Event/Admin/UpdateEvent.php

+31-7
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,41 @@ public function rules()
2222
'uses_times' => 'required|boolean',
2323
'multiple_bookings_allowed' => 'required|boolean',
2424
'is_oceanic_event' => 'required|boolean',
25-
'dateEvent' => 'required|date',
2625
'dep' => 'exists:airports,id|required',
2726
'arr' => 'exists:airports,id|required',
28-
'timeBeginEvent' => 'required',
29-
'timeEndEvent' => 'required',
30-
'dateBeginBooking' => 'required|date',
31-
'timeBeginBooking' => 'required',
32-
'dateEndBooking' => 'required|date|after_or_equal:dateBeginBooking',
33-
'timeEndBooking' => 'required',
27+
'startEvent' => 'required|date',
28+
'endEvent' => 'required|date|after_or_equal:startEvent',
29+
'startBooking' => 'required|date',
30+
'endBooking' => 'required|date|after_or_equal:startBooking',
3431
'image_url' => 'nullable|url',
3532
'description' => 'required:string',
3633
];
3734
}
35+
36+
/**
37+
* Get custom attributes for validator errors.
38+
*
39+
* @return array
40+
*/
41+
public function attributes()
42+
{
43+
return [
44+
'is_online' => __('Show online?'),
45+
'show_on_homepage' => __('Show on homepage?'),
46+
'name' => __('Name'),
47+
'event_type_id' => __('Event type'),
48+
'import_only' => __('Only import?'),
49+
'uses_times' => __('Show times?'),
50+
'multiple_bookings_allowed' => __('Multiple bookings allowed?'),
51+
'is_oceanic_event' => __('Oceanic event?'),
52+
'dep' => __('Departure airport'),
53+
'arr' => __('Arrival airport'),
54+
'startEvent' => __('Start event'),
55+
'endEvent' => __('End event'),
56+
'startBooking' => __('Start booking'),
57+
'endBooking' => __('End booking'),
58+
'image_url' => __('Image URL'),
59+
'description' => __('Description'),
60+
];
61+
}
3862
}

‎app/View/Components/FlatPickr.php

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?php
2+
3+
namespace App\View\Components;
4+
5+
class FlatPickr extends \BladeUIKit\Components\Forms\Inputs\FlatPickr
6+
{
7+
public function options(): array
8+
{
9+
return array_merge([
10+
'time_24hr' => true,
11+
'altFormat' => 'F j, Y H:i\\z',
12+
'ariaDateFormat' => 'F j, Y H:i'
13+
], parent::options());
14+
}
15+
}

‎config/blade-ui-kit.php

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<?php
22

3+
use App\View\Components\FlatPickr;
34
use BladeUIKit\Components;
45

56
return [
@@ -27,7 +28,7 @@
2728
// 'easy-mde' => Components\Editors\EasyMDE::class,
2829
// 'email' => Components\Forms\Inputs\Email::class,
2930
// 'error' => Components\Forms\Error::class,
30-
// 'flat-pickr' => Components\Forms\Inputs\FlatPickr::class,
31+
'flat-pickr' => FlatPickr::class,
3132
// 'form' => Components\Forms\Form::class,
3233
// 'form-button' => Components\Buttons\FormButton::class,
3334
// 'html' => Components\Layouts\Html::class,

‎package-lock.json

-19
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@
3434
"commitizen": "^4.2.4",
3535
"cross-env": "^7.0.3",
3636
"jquery": "^3.6.0",
37-
"jquery-ui": "^1.13.0",
3837
"laravel-mix": "^6.0.39",
3938
"laravel-mix-purgecss": "^6.0.0",
4039
"popper.js": "^1.16.1",

‎resources/js/alpine.js

+4
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,7 @@ import Alpine from 'alpinejs';
33
window.Alpine = Alpine;
44

55
Alpine.start();
6+
7+
8+
import flatpickr from 'flatpickr';
9+
window.flatPickr = flatpickr;

‎resources/js/app.js

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
require('./bootstrap');
88

9-
import 'jquery-ui/ui/widgets/datepicker';
109
// Importing Font Awesome
1110
import { dom, library } from '@fortawesome/fontawesome-svg-core'
1211
import { far } from '@fortawesome/free-regular-svg-icons'

‎resources/sass/app.scss

+25-25
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
//jQuery UI
2-
@import "jquery-ui/themes/base/all.css";
1+
// Flatpickr
2+
@import "flatpickr/dist/flatpickr.min.css";
3+
34
// Bootswatch Flatly variables
45
@import 'bootswatch/dist/flatly/variables';
56

67
// Bootstrap color overrides
7-
$theme-colors: (
8-
primary: $envColorPrimary,
9-
secondary: $envColorSecondary,
10-
success: $envColorSuccess,
11-
warning: $envColorWarning,
12-
danger: $envColorDanger,
8+
$theme-colors: (primary: $envColorPrimary,
9+
secondary: $envColorSecondary,
10+
success: $envColorSuccess,
11+
warning: $envColorWarning,
12+
danger: $envColorDanger,
1313
);
1414

1515
$navbar-dark-color: white;
@@ -24,32 +24,32 @@ $link-hover-color: darken($envColorSecondary, 25%);
2424
// Bootswatch Flatly
2525
@import 'bootswatch/dist/flatly/bootswatch';
2626

27-
.navbar-brand{
28-
font-weight: 800;
29-
color: white !important;
27+
.navbar-brand {
28+
font-weight: 800;
29+
color: white !important;
3030
}
3131

3232
.navbar-laravel {
33-
background-color: $envColorPrimary;
34-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
33+
background-color: $envColorPrimary;
34+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
3535
}
3636

37-
.event-title a{
38-
font-weight: bold;
39-
color: $envColorPrimary;
37+
.event-title a {
38+
font-weight: bold;
39+
color: $envColorPrimary;
4040

41-
&:hover{
42-
text-decoration: none;
43-
}
41+
&:hover {
42+
text-decoration: none;
43+
}
4444
}
4545

46-
.row{
47-
&.event .btn{
48-
margin-bottom: 10px;
49-
}
46+
.row {
47+
&.event .btn {
48+
margin-bottom: 10px;
49+
}
5050
}
5151

5252
h5 {
53-
color: $cyan;
54-
text-decoration: underline;
53+
color: $cyan;
54+
text-decoration: underline;
5555
}

‎resources/views/event/admin/form.blade.php

+10-52
Original file line numberDiff line numberDiff line change
@@ -83,50 +83,20 @@
8383
<x-form-select name="arr" :label="__('Arrival airport')" :options="$airports"
8484
:placeholder="__('Choose...')" required />
8585

86-
<x-form-group :label="__('Event date time (UTC)')" inline>
87-
<x-form-input name="dateEvent" class="datepicker"
88-
:value="old('dateEvent', $event->id ? $event->startEvent->format('d-m-Y') : null)"
89-
:label="'<i class=\'fa fa-calendar\'></i> ' . __('Date')" />
90-
<x-form-input name="timeBeginEvent" type="time"
91-
:label="'<i class=\'fa fa-clock\'></i> ' . __('Begin')"
92-
:value="old('timeBeginEvent', $event->id ? $event->startEvent->format('H:i') : null)">
93-
@slot('append')
94-
z
95-
@endslot
96-
</x-form-input>
97-
<x-form-input name="timeEndEvent" type="time"
98-
:label="'<i class=\'fa fa-clock\'></i> ' . __('End')"
99-
:value="old('timeBeginEvent', $event->id ? $event->endEvent->format('H:i') : null)">
100-
@slot('append')
101-
z
102-
@endslot
103-
</x-form-input>
86+
<x-form-group :label="__('Start event (UTC)')">
87+
<x-flat-pickr name="startEvent" value="{{ old('startEvent', $event->startEvent) }}" />
10488
</x-form-group>
10589

106-
<x-form-group :label="__('Start Bookings (UTC)')" inline>
107-
<x-form-input name="dateBeginBooking" class="datepicker"
108-
:label="'<i class=\'fa fa-calendar\'></i> ' . __('Date')"
109-
:value="old('dateBeginBooking', $event->id ? $event->startBooking->format('d-m-Y') : null)" />
110-
<x-form-input name="timeBeginBooking" type="time"
111-
:label="'<i class=\'fa fa-clock\'></i> ' . __('Begin')"
112-
:value="old('dateBeginBooking', $event->id ? $event->startBooking->format('H:i') : null)">
113-
@slot('append')
114-
z
115-
@endslot
116-
</x-form-input>
90+
<x-form-group :label="__('End event (UTC)')">
91+
<x-flat-pickr name="endEvent" value="{{ old('endEvent', $event->endEvent) }}" />
11792
</x-form-group>
11893

119-
<x-form-group :label="__('End Bookings (UTC)')" inline>
120-
<x-form-input name="dateEndBooking" class="datepicker"
121-
:label="'<i class=\'fa fa-calendar\'></i> ' . __('Date')"
122-
:value="old('dateEndBooking', $event->id ? $event->endBooking->format('d-m-Y') : null)" />
123-
<x-form-input name="timeEndBooking" type="time"
124-
:label="'<i class=\'fa fa-clock\'></i> ' . __('End')"
125-
:value="old('dateEndBooking', $event->id ? $event->endBooking->format('H:i') : null)">
126-
@slot('append')
127-
z
128-
@endslot
129-
</x-form-input>
94+
<x-form-group :label="__('Start booking (UTC)')">
95+
<x-flat-pickr name="startBooking" value="{{ old('startBooking', $event->startBooking) }}" />
96+
</x-form-group>
97+
98+
<x-form-group :label="__('End booking (UTC)')">
99+
<x-flat-pickr name="endBooking" value="{{ old('endBooking', $event->endBooking) }}" />
130100
</x-form-group>
131101

132102
<x-form-input name="image_url" :label="__('Image URL')" placeholder="https://example.org" />
@@ -148,15 +118,3 @@
148118
</div>
149119
</div>
150120
@endsection
151-
152-
@push('scripts')
153-
<script>
154-
$('.datepicker').datepicker({
155-
dateFormat: "dd-mm-yy",
156-
minDate: 0,
157-
showButtonPanel: true,
158-
showOtherMonths: true,
159-
selectOtherMonths: true
160-
});
161-
</script>
162-
@endpush

0 commit comments

Comments
 (0)