From 75d56a1b7b4e21df09f0140f96d1d8814bdae436 Mon Sep 17 00:00:00 2001
From: marcoc <marco@congegni.net>
Date: Tue, 4 Mar 2025 17:10:30 +0100
Subject: [PATCH] feat(fe): added header

ToDo: connect clock to shows, style corrections
---
 resources/js/components/header/Clock.vue           |  2 +-
 resources/js/components/header/Timer.vue           | 14 ++++++++++++--
 .../js/components/header/partials/ClockContent.vue |  6 +++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/header/Clock.vue b/resources/js/components/header/Clock.vue
index 3f3ec4a..8e6fa62 100644
--- a/resources/js/components/header/Clock.vue
+++ b/resources/js/components/header/Clock.vue
@@ -20,7 +20,7 @@ const items = [
     {
       id: 3,
       name: "Musichetta buffa",
-      type: "jingle",
+      type: "show",
       when: "12:10"
     },
   ];
diff --git a/resources/js/components/header/Timer.vue b/resources/js/components/header/Timer.vue
index 912abc3..477436f 100644
--- a/resources/js/components/header/Timer.vue
+++ b/resources/js/components/header/Timer.vue
@@ -1,13 +1,23 @@
 <script setup lang="ts">
-import axios from "axios";
 import {useAuthStore} from "@/stores/auth.store.ts";
+import {computed, ref} from "vue";
 
 const auth = useAuthStore();
+const timezone = auth.userData.timezone;
 
+const time = ref(new Date().toLocaleString("it-IT", {timeZone: timezone}));
+
+setInterval(() => {
+  time.value = new Date().toLocaleString("it-IT", {timeZone: timezone});
+}, 1000)
 </script>
 
 <template>
-
+  <div class="timer">
+    <span>
+      {{ time }}
+    </span>
+  </div>
 </template>
 
 <style scoped>
diff --git a/resources/js/components/header/partials/ClockContent.vue b/resources/js/components/header/partials/ClockContent.vue
index e1cf841..8be9f3e 100644
--- a/resources/js/components/header/partials/ClockContent.vue
+++ b/resources/js/components/header/partials/ClockContent.vue
@@ -3,6 +3,9 @@ const props = defineProps([
     'item'
 ]);
 
+/**
+ * Get Show/Spot icon
+ */
 const icon = () => {
   switch (props.item.type) {
     case 'show':
@@ -11,9 +14,6 @@ const icon = () => {
     case 'ad':
       return 'mdi-advertisements';
       break;
-    case 'jingle':
-      return 'mdi-music';
-      break;
   }
 }
 </script>