+ {window.innerWidth < 768 && (
+
+
+ {t('ReservationInfo.selectionStartDirections')}
+
+
+ {t('ReservationInfo.selectionEditDirections')}
+
+
+ )
+ }
+
{/* Show reservation max period text */}
{resource.maxPeriod && (
diff --git a/src/common/calendar/TimePickerCalendar.js b/src/common/calendar/TimePickerCalendar.js
index 70159d2c1..9f77c0edc 100644
--- a/src/common/calendar/TimePickerCalendar.js
+++ b/src/common/calendar/TimePickerCalendar.js
@@ -84,17 +84,28 @@ class TimePickerCalendar extends Component {
onEventRender = (info) => {
// add cancel button for new selected event
+ let duration;
+
if (info.event.id === NEW_RESERVATION) {
const cancelBtn = document.createElement('span');
cancelBtn.classList.add('app-TimePickerCalendar__cancelEvent');
cancelBtn.addEventListener('click', () => this.onCancel(), { once: true });
info.el.append(cancelBtn);
+ duration = this.getDurationText(info.event);
+ } else if (info.event.id === '') {
+ duration = this.getDurationText(info.event);
}
- }
+
+ if (duration) {
+ const eventDuration = document.createElement('span');
+ eventDuration.textContent = duration;
+ eventDuration.classList.add('app-TimePickerCalendar__maxDuration');
+ info.el.append(eventDuration);
+ }
+ };
onSelect = (selectionInfo) => {
const { t } = this.props;
-
const calendarApi = this.calendarRef.current.getApi();
calendarApi.unselect();
// Clear FullCalendar select tooltip
@@ -116,7 +127,6 @@ class TimePickerCalendar extends Component {
onEventResize = (selectionInfo) => {
const { event } = selectionInfo;
const selectable = this.getSelectableTimeRange(event, selectionInfo);
-
this.onChange(selectable);
}
@@ -199,29 +209,21 @@ class TimePickerCalendar extends Component {
return selectable;
}
- getDurationText = () => {
- const { selected } = this.state;
+ getDurationText = (selected) => {
+ const { resource } = this.props;
const start = moment(selected.start);
const end = moment(selected.end);
const duration = moment.duration(end.diff(start));
- const days = duration.days();
- const hours = duration.hours();
- const minutes = duration.minutes();
- let text = '';
- if (days) {
- text = `${days}d`;
- }
-
- if (hours) {
- text += `${hours}h`;
- }
+ let maxDurationText = '';
- if (minutes) {
- text += `${minutes}min`;
+ if (resource.max_period) {
+ const maxDuration = get(resource, 'max_period', null);
+ const maxDurationSeconds = moment.duration(maxDuration).asSeconds();
+ maxDurationText = `(${maxDurationSeconds / 3600}h max)`;
}
- return text;
+ return `${duration / 3600000}h ${maxDurationText}`;
};
getSelectedDateText = () => {
@@ -321,7 +323,9 @@ class TimePickerCalendar extends Component {
meridiem: 'short'
},
unselectAuto: false,
- longPressDelay: '500',
+ longPressDelay: 250,
+ eventLongPressDelay: 20,
+ selectLongPressDelay: 200,
// Almost invoke click event on mobile immediatelly without any delay
};
};
@@ -334,10 +338,12 @@ class TimePickerCalendar extends Component {
const events = this.getReservedEvents();
if (selected) {
+ const webEventSelected = window.innerWidth > 768 ? 'fc-selected' : '';
events.push({
classNames: [
'app-TimePickerCalendar__event',
'app-TimePickerCalendar__newReservation',
+ webEventSelected
],
editable: true,
durationEditable: !calendarUtils.isTimeRangeOverMaxPeriod(
diff --git a/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap b/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap
index f333ced72..dab73ed53 100644
--- a/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap
+++ b/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap
@@ -81,6 +81,7 @@ exports[`TimePickerCalendar FullCalendar render normally 1`] = `
editable={true}
eventConstraint="businessHours"
eventDrop={[Function]}
+ eventLongPressDelay={20}
eventOverlap={false}
eventRender={[Function]}
eventResize={[Function]}
@@ -146,7 +147,7 @@ exports[`TimePickerCalendar FullCalendar render normally 1`] = `
},
]
}
- longPressDelay="500"
+ longPressDelay={250}
maxTime="17:00:00"
minTime="07:00:00"
nowIndicator={true}
@@ -270,6 +271,7 @@ exports[`TimePickerCalendar FullCalendar render normally 1`] = `
}
select={[Function]}
selectConstraint="businessHours"
+ selectLongPressDelay={200}
selectMirror={true}
selectOverlap={false}
selectable={true}
diff --git a/src/common/calendar/_timePickerCalendar.scss b/src/common/calendar/_timePickerCalendar.scss
index 9b2b0e1fb..e10685d51 100644
--- a/src/common/calendar/_timePickerCalendar.scss
+++ b/src/common/calendar/_timePickerCalendar.scss
@@ -1,9 +1,10 @@
.app-TimePickerCalendar {
&__event {
- color: $white !important;
+ color: $hel-coat !important;
border-radius: 0 !important;
&--reserved {
+ color: $white !important;
background-color: $red !important;
border-color: $red !important;
}
@@ -20,7 +21,7 @@
&__cancelEvent {
position: absolute;
right: 0.25em;
- top: 0;
+ bottom: 0;
z-index: 2;
&::after {
@@ -32,6 +33,47 @@
}
}
+ &__maxDuration {
+ font-size: 1.25rem;
+ }
+
+ .fc-event {
+ font-size: 1.75rem;
+ font-weight: bold;
+ background-color: #bddbf0;
+ border: 1px solid $hel-coat;
+ }
+
+ .fc-event.fc-selected:after {
+ opacity: 0.35;
+ background-color: $hel-coat;
+ }
+
+
+ .fc-time-grid-event.fc-selected {
+ .fc-resizer {
+ width: 12px;
+ height: 12px;
+ bottom: -7px;
+ left: 49%;
+ z-index: 50 !important;
+ border-radius: 50%;
+
+ &::before {
+ width: 80px;
+ height: 80px;
+ top: 0;
+ left: 0;
+ margin-left: -40px;
+ }
+
+ &::after {
+ color: #FFF !important;
+ }
+ }
+ }
+
+
.fc-header-toolbar {
.fc-left {
width: 30%;
@@ -49,7 +91,7 @@
.fc-myToday-button {
border: 1px solid $black;
border-radius: 0;
- padding: 0.2rem 0.3rem;
+ padding: 0.5rem 0.5rem;
color: $black;
background: $white;
font-weight: $font-weight-bold;
@@ -77,7 +119,7 @@
.fc-timeGridDay-button {
border: 1px solid $black;
border-radius: 0;
- padding: 0.3rem 0.3rem;
+ padding: 0.5rem 0.5rem;
background: $white;
color: $black;
@@ -87,6 +129,7 @@
}
}
+
.fc-myNext-button {
@include icon-angle-right($black);
}