feat(fe header): added clock component logic and fixed instance index method

app/Filters/FiltersType/MonthFilter.php

@@ -7,8 +7,8 @@ use Illuminate\Support\Carbon;
 class MonthFilter
 {
     function __invoke($query, $month, $value) {
-        $start = Carbon::parse($value)->startOfMonth();
-        $end = Carbon::parse($value)->endOfMonth();
+        $start = isset($value['start']) ? Carbon::parse($value['start']) : Carbon::now()->startOfMonth();
+        $end = isset($value['end']) ? Carbon::parse($value['end']) : Carbon::now()->endOfMonth();
 
         return $query->whereBetween('starts', [$start, $end]);
     }

app/Filters/Show/ShowInstancesFilters.php

@@ -12,6 +12,7 @@ class ShowInstancesFilters
     protected $filters = [
         'starts'             => MonthFilter::class,
         'ends'               => MonthFilter::class,
+        'date_range'         => MonthFilter::class,
         'show_id'            => IsFilter::class,
         'record'             => IsFilter::class,
         'rebroadcast'        => IsFilter::class,

app/Http/Controllers/ShowInstance/ShowInstancesController.php

@@ -23,7 +23,7 @@ class ShowInstancesController extends Controller
         if ($request->withShow) {
             $showInstanceFilter = $showInstanceFilter->with('show')->with('show.showDjs');
         }
-        $showInstances = $showInstanceFilter->get();
+        $showInstances = $showInstanceFilter->with('show')->get();
         return response()->json($showInstances->sortBy('starts')->values());
     }
 

resources/js/components/header/Clock.vue

@@ -1,34 +1,60 @@
 <script setup lang="ts">
 import ClockHeader from "@/components/header/partials/ClockHeader.vue";
 import ClockContent from "@/components/header/partials/ClockContent.vue";
+import axios, {type AxiosResponse} from "axios";
+import {DateTime} from "luxon";
+import {onMounted, reactive, ref} from "vue";
+import {useAuthStore} from "@/stores/auth.store.ts";
 
+const auth = useAuthStore();
 
-//ToDo: items must be called from backend
-const items = [
-    {
-      id: 1,
-      name: "Trasmissione 1",
-      type: "show",
-      when: "11:00"
-    },
-    {
-      id: 2,
-      name: "Spot antimilitarista",
-      type: "ad",
-      when: "12:00"
-    },
-    {
-      id: 3,
-      name: "Musichetta buffa",
-      type: "show",
-      when: "12:10"
-    },
-  ];
+const now = ref(DateTime.now());
+
+const clockHour = reactive({
+  start: now.value.set({minute: 0}).setZone(import.meta.env.VITE_APP_TIMEZONE),
+  end: now.value.set({minute: 0}).plus({hours: 1}).setZone(import.meta.env.VITE_APP_TIMEZONE)
+});
+
+const items = ref([]);
+
+const getItems = async (): void => {
+  return await axios.get('showInstances', {
+    params: {
+      date_range: {
+        start: clockHour.start.toISO(),
+        end: clockHour.end.toISO()
+      }
+    }
+  }).then((response): AxiosResponse => {
+    items.value = response.data
+  })
+}
+
+const changeHour = (value): void => {
+  switch (value) {
+    case 'prev':
+      clockHour.start = clockHour.start.minus({ hours: 1});
+      clockHour.end = clockHour.end.minus({ hours: 1});
+      break;
+    case 'next':
+      clockHour.start = clockHour.start.plus({ hours: 1});
+      clockHour.end = clockHour.end.plus({ hours: 1});
+      break;
+  }
+  getItems();
+}
+
+onMounted((): void => {
+  getItems();
+});
 </script>
 
 <template>
   <v-card>
-    <ClockHeader />
+    <ClockHeader
+        :time="clockHour.start.setZone(auth.timezone).toFormat('H:mm')"
+        @change-clock="changeHour"
+    />
     <ClockContent v-if="items.length > 0" v-for="item in items" :key="item.id" :item="item" />
     <v-card-text v-else>
       {{ $t('header.clock.nothingfound') }}

resources/js/components/header/OnAir.vue

@@ -2,13 +2,15 @@
 import {DateTime} from "luxon";
 import {useAuthStore} from "@/stores/auth.store.ts";
 import {ref} from "vue";
+import axios, {type AxiosResponse} from "axios";
 
 const auth = useAuthStore();
+const timezone = auth.userData.timezone;
 
 const color = ref("secondary");
 
-const isOnAir = async () => {
-  const now = DateTime.now().toISO();
+const isOnAir = async (): void => {
+  const now = DateTime.now().setZone(import.meta.env.VITE_APP_TIMEZONE).toISO();
   return await axios.get(`/api/v2/schedule`, {
     auth: {
       username: auth.userData.user.login,
@@ -18,7 +20,7 @@ const isOnAir = async () => {
       ends_after: now,
       starts_before: now,
     }
-  }).then((response) => {
+  }).then((response: AxiosResponse) => {
     if (typeof response.data === Array && response.data.length > 0) {
       color.value = 'error';
     }

resources/js/components/header/partials/ClockContent.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import {DateTime} from "luxon";
+
 const props = defineProps([
     'item'
 ]);
@@ -8,21 +10,22 @@ const props = defineProps([
  */
 const icon = () => {
   switch (props.item.type) {
-    case 'show':
-      return 'mdi-eye';
-      break;
     case 'ad':
       return 'mdi-advertisements';
       break;
+    default:
+      return 'mdi-eye';
+      break;
   }
 }
+
 </script>
 
 <template>
   <div>
-    {{ item.when }}
+    {{ DateTime.fromISO(item.starts).toFormat('H:mm') }}
     <v-icon :icon="icon()" />
-    {{ item.name }}
+    {{ item.show.name }}
   </div>
 </template>
 

resources/js/components/header/partials/ClockHeader.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
-const time = "12:00"
+const props = defineProps({
+  time: {
+    type: String,
+    required: true
+  }
+})
+// const time = "12:00"
 </script>
 
 <template>
@@ -10,8 +16,16 @@ const time = "12:00"
       </div>
       {{ $t('header.clock.title') }}
       <div class="clock-arrows">
-        <v-btn icon="mdi-arrow-left-thick" elevation="0" />
-        <v-btn icon="mdi-arrow-right-thick" elevation="0" />
+        <v-btn
+            icon="mdi-arrow-left-thick"
+            @click="$emit('changeClock', 'prev')"
+            elevation="0"
+        />
+        <v-btn
+            icon="mdi-arrow-right-thick"
+            @click="$emit('changeClock', 'next')"
+            elevation="0"
+        />
       </div>
     </v-card-title>
   </v-card-item>