feat(FE): show components and helper

resources/js/components/content/partials/fields/show/ShowStartEndTime.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import {onMounted, type PropType} from "vue";
+import { ref, watch } from 'vue';
+import {getShowInstances} from "@models/show/showInstance.ts";
+
+const props = defineProps({
+  title: {
+    default: 'Orari della trasmissione',
+    type: String
+  },
+  startTime: {
+    default: '',
+    type: String
+  },
+  startTimeLabel: {
+    default: "Orario d'inizio della trasmissione",
+    type: String
+  },
+  duration: {
+    default: '',
+    type: String
+  },
+  durationLabel: {
+    default: "Durata",
+    type: String
+  },
+  endTimeLabel: {
+    default: "Orario di fine della trasmissione",
+    type: String
+  },
+})
+
+const startTime = ref(props.startTime);
+const duration = ref(props.duration);
+const endTime = ref('');
+const startMenu = ref(false);
+const endMenu = ref(false);
+
+
+const getDuration = (startTime: Date, endTime: Date) => {
+  const diffInMilliseconds = Math.abs(startTime.getTime() - endTime.getTime());
+  const remainingHours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const remainingMinutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
+
+  return `${remainingHours}:${remainingMinutes}`;
+};
+
+const getHoursMinutes = (timeString: string) => {
+  const [ h, m ] = timeString.split(":");
+  const ms = new Date().setHours(h,m);
+  return new Date(ms)
+};
+
+const checkTime = () => {
+  if (startTime && endTime) {
+    const start = getHoursMinutes(startTime.value);
+    let end = getHoursMinutes(endTime.value);
+
+    if (end.getTime() <= start.getTime()) {
+      end = new Date(start);
+      end.setMinutes(start.getMinutes() + 1);
+      endTime.value = end.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });;
+    }
+    duration.value = getDuration(start, end);
+  }
+}
+
+onMounted(() => {
+  if(endTime.value == '') endTime.value=startTime.value
+  checkTime()
+});
+</script>
+
+<template>
+  <v-card class="pa-4">
+    <v-card-title>{{props.title}}</v-card-title>
+    <v-card-text>
+      <!-- Start Time Picker -->
+      <v-text-field
+          v-model="startTime"
+          :label=props.startTimeLabel
+          prepend-icon="mdi-clock-time-four-outline"
+          readonly
+          @click="startMenu = true"
+      >
+        <v-menu
+            v-model="startMenu"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-x
+        >
+          <v-time-picker
+              v-model="startTime"
+              format="ampm"
+              ampm-in-title
+              full-width
+              v-on:update:model-value=checkTime
+          ></v-time-picker>
+        </v-menu>
+      </v-text-field>
+
+      <v-text-field
+          v-model="endTime"
+          :label=props.endTimeLabel
+          prepend-icon="mdi-clock-time-four-outline"
+          readonly
+          @click="endMenu = true"
+      >
+        <v-menu
+            v-model="endMenu"
+            :close-on-content-click="false"
+            transition="scale-transition"
+        >
+          <v-time-picker
+              v-model="endTime"
+              format="ampm"
+              ampm-in-title
+              full-width
+              :min="startTime"
+              v-on:update:model-value=checkTime
+          ></v-time-picker>
+        </v-menu>
+      </v-text-field>
+      <v-label>{{`${props.durationLabel} - ${duration}`}}</v-label>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.pa-4 {
+  padding: 16px;
+}
+</style>