feat(FE): show components and helper

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+import {WeekDaysData} from "@models/show/ShowRepetition.ts";
+import {ref} from "vue";
+
+const selectedDays = ref<number[]>([]);
+</script>
+
+<template>
+<v-card>
+  <v-row dense no-gutters>
+    <v-col v-for="day in WeekDaysData" :key="day.type"
+           cols="12" sm="6" md="4">
+      <v-checkbox
+          v-model="selectedDays"
+          :label="day.dayName"
+          :value="day.type"
+      />
+    </v-col>
+  </v-row>
+</v-card>
+</template>
+
+<style scoped>
+
+</style>

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>

resources/js/components/content/partials/show/ShowScheduleForm.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import {ref, type PropType, onMounted} from "vue";
+import {baseShowDays, type ShowDays} from "@models/show/showDays.ts";
+import {showDaysForm} from "@/composables/content/show/show_schedule_page.ts";
+
+const emits = defineEmits([
+  'toggleShowScheduleForm',
+  'saveShowSchedule'
+])
+
+// Data
+const showDays = defineModel<ShowDays>();
+const showDaysFields = ref({});
+
+// funcs
+onMounted(() => {
+      showDaysFields.value = showDaysForm(showDays);
+    }
+)
+
+const goBack = () => {
+  showDays = baseShowDays();
+  emits('toggleShowScheduleForm');
+}
+const saveShowSchedule = () => {
+  emits('saveShowSchedule');
+}
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>
+      <h3>Regole di programmazione</h3>
+    </v-card-title>
+    <v-form>
+      <v-card-text>
+        <v-row no-gutters>
+            <v-col v-for="(field, key) in showDaysFields" :key="key" cols="5" md="6" lg="4">
+              <v-card>
+              <Component
+                  :is="field.component"
+                  v-model="showDays[key]"
+                  :label="field.label"
+                  :title="field.title || ''"
+                  :disabled="field.disabled || false"
+                  :density="'compact'"
+                  :min="field.min"
+                  rows="2"
+                  item-title="type_name"
+                  hide-details="auto"
+                  class="mb-2"
+                  clearable
+                  :active="true"
+                  v-bind="field.props || {}"
+              />
+              </v-card>
+            </v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="accent" @click="goBack">Torna indietro</v-btn>
+        <v-btn color="accent" @click="saveShowSchedule">Salva</v-btn>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

resources/js/helpers/DateFormatter.ts

@@ -0,0 +1,3 @@
+export function dateFormatter(date: Date = new Date()): string {
+    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+}