feat:#5 add slider for time range selection

frontend/src/main.ts

@@ -14,6 +14,7 @@ import InputSwitch from "primevue/inputswitch";
 import Card from "primevue/card";
 import DataView from "primevue/dataview";
 import Dialog from "primevue/dialog";
+import Slider from 'primevue/slider';
 import ToggleButton from "primevue/togglebutton";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
@@ -58,6 +59,7 @@ app.component("InputText", InputText);
 app.component("InputSwitch", InputSwitch);
 app.component("Card", Card);
 app.component("DataView", DataView);
+app.component("Slider", Slider);
 app.component("ToggleButton", ToggleButton);
 app.component("SpeedDial", SpeedDial);
 app.component("TabView", TabView);

frontend/src/view/FreeRooms.vue

@@ -1,4 +1,5 @@
 <template>
+
   <DynamicPage
     :hide-content="availableRooms.length === 0"
     :headline="$t('freeRooms.freeRooms')"
@@ -22,28 +23,52 @@
             touchUI
           />
           <div class="break"/>
-            <Calendar
-              v-model="start"
-              type="time"
-              placeholder="start"
-              time-only
-              hour-format="24"
-              date-format="HH:mm"
-              :class="[{'p-invalid':isLater}, flexSpecs]"
-              panel-class="min-w-min"
-              touchUI
-            />
-            <Calendar
-              v-model="end"
-              type="time"
-              time-only
-              hour-format="24"
-              placeholder="end"
-              date-format="HH:mm"
-              :class="[{'p-invalid':isLater}, flexSpecs]"
-              panel-class="min-w-min"
-              touchUI
-            />
+          <Calendar
+            v-model="start"
+            v-if="mobilePage"
+            @update:model-value="() => {timeRange[0] = start.getHours() * 60 + start.getMinutes();}"
+            type="time"
+            placeholder="start"
+            time-only
+            hour-format="24"
+            date-format="HH:mm"
+            :class="[{'p-invalid':isLater}, flexSpecs]"
+            panel-class="min-w-min"
+            touchUI
+          />
+          <Calendar
+            v-model="end"
+            v-if="mobilePage"
+            @update:model-value="() => {timeRange[1] = end.getHours() * 60 + end.getMinutes();}"
+            type="time"
+            time-only
+            hour-format="24"
+            placeholder="end"
+            date-format="HH:mm"
+            :class="[{'p-invalid':isLater}, flexSpecs]"
+            panel-class="min-w-min"
+            touchUI
+          />
+          <div
+            class="flex-grow-1 relative mb-2"
+            :class="flexSpecs"
+            v-if="!mobilePage"
+          >
+            <Tag :value="formatTime(start)" class="opacity-0 pointer-events-none text-xl lg:text-base"/>
+            <Tag :value="formatTime(start)" class="absolute time-tag text-xl lg:text-base" :style="{left: timeToPercentString(timeRange[0])}" :class="startMoved.value? 'moved': ''" />
+            <Tag :value="formatTime(end)" class="absolute time-tag text-xl lg:text-base" :style="{left: timeToPercentString(timeRange[1])}" :class="endMoved.value? 'moved': ''" />
+          </div>
+          <div class="break"/>
+          <Slider
+            v-model="timeRange"
+            @change="updateTimeRange"
+            range
+            :class="flexSpecs"
+            :min="0"
+            :max="24*60"
+            :step="5"
+            v-if="!mobilePage"
+          />
     </template>
     <template #content>
       <DataTable v-model:filters="filters" :value="availableRooms" data-key="id" filter-display="row" paginator :rows="10" :global-filter-fields="['room']" >
@@ -58,18 +83,73 @@
 </template>
 
 <script setup lang="ts">
-import { computed, Ref, ref } from "vue";
+import { computed, inject, Ref, ref } from "vue";
 import DynamicPage from "@/view/DynamicPage.vue";
 import { requestFreeRooms } from "@/api/requestFreeRooms.ts";
 import { FilterMatchMode } from "primevue/api";
+import { padStart } from "@fullcalendar/core/internal";
 
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 const filters = ref({
   room: { value: null, matchMode: FilterMatchMode.CONTAINS },
 });
 
 const date: Ref<Date> = ref(new Date(Date.now()));
-const start: Ref<Date> = ref(new Date(Date.now()));
-const end: Ref<Date> = ref(new Date(Date.now() + 3600000));
+const start: Ref<Date> = ref(new Date(0));
+const end: Ref<Date> = ref(new Date(0));
+
+class Moved {
+  value: boolean = false;
+  timeout: NodeJS.Timeout | null = null;
+}
+
+const startMoved: Ref<Moved> = ref(new Moved());
+const endMoved: Ref<Moved> = ref(new Moved());
+
+start.value.setHours(new Date().getHours());
+end.value.setHours(Math.min(new Date().getHours() + 3, 23));
+if (end.value.getHours() === 23) {
+  start.value.setHours(22);
+  end.value.setMinutes(55);
+}
+
+const timeRange: Ref<number[]> = ref([
+  start.value.getHours() * 60 + start.value.getMinutes(),
+  end.value.getHours() * 60 + end.value.getMinutes()
+]);
+
+function buttonMovedTimeout(time: Number, timeDate: Date, moved: Ref<Moved>): void {
+  if (time !== timeDate.getHours() * 60 + timeDate.getMinutes()) {
+    if (moved.value.timeout !== null) {
+      clearTimeout(moved.value.timeout);
+    }
+    moved.value.value = true;
+    moved.value.timeout = setTimeout(() => {
+      moved.value.value = false;
+    }, 1000);
+  }
+}
+
+function updateTimeRange(): void {
+  buttonMovedTimeout(timeRange.value[0], start.value, startMoved);
+  buttonMovedTimeout(timeRange.value[1], end.value, endMoved);
+
+  if (timeRange.value[0] > timeRange.value[1]) {
+    timeRange.value[1] = timeRange.value[0];
+  }
+  start.value.setHours(Math.floor(timeRange.value[0] / 60));
+  start.value.setMinutes(timeRange.value[0] % 60);
+  end.value.setHours(Math.floor(timeRange.value[1] / 60));
+  end.value.setMinutes(timeRange.value[1] % 60);
+}
+
+function formatTime(time: Date): string {
+  return padStart(time.getHours().toString(), 2) + ":" + padStart(time.getMinutes().toString(), 2);
+}
+
+function timeToPercentString(time: Number): string {
+  return `${Number(time) * 100 / (24 * 60)}%`;
+}
 
 async function loadFreeRooms(): Promise<void> {
   availableRooms.value = [];
@@ -99,4 +179,31 @@ const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
   flex-basis: 100%;
   height: 0;
 }
-</style>
+
+.time-tag {
+  transform: translateX(-50%);
+  border: 2px solid var(--primary-color);
+  background-color: var(--primary-color);
+  opacity: 0.6;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.time-tag.moved {
+  opacity: 1;
+  z-index: 2;
+}
+
+.time-tag::before {
+  content: "";
+  position: absolute;
+  bottom: -0.8rem;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform: translateY(-100%);
+  border-style: solid;
+  border-width: 0.8rem 0.5rem 0 0.5rem;
+  border-color:var(--primary-color)  transparent transparent transparent;
+  transform: translateX(-50%);
+}
+</style>