feat(fe): started working on header

package.json

@@ -6,6 +6,7 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@mdi/font": "^7.4.47",
         "@tailwindcss/forms": "^0.5.2",
         "@vue/tsconfig": "^0.7.0",
         "autoprefixer": "^10.4.2",

resources/js/components/header/Clock.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import ClockHeader from "@/components/header/partials/ClockHeader.vue";
+import ClockContent from "@/components/header/partials/ClockContent.vue";
+
+
+//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: "jingle",
+      when: "12:10"
+    },
+  ];
+</script>
+
+<template>
+  <v-card>
+    <ClockHeader />
+    <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') }}
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+  .v-card {
+    min-width: 25vw;
+  }
+</style>

resources/js/components/header/OnAir.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+
+//ToDo:
+// add logic to check if something is scheduled or not
+// then switch between muted or error
+const color = "error";
+</script>
+
+<template>
+  <v-sheet
+      :width="100"
+      border
+      rounded
+      :color="color"
+  >
+    {{ $t('header.onair') }}
+  </v-sheet>
+</template>
+
+<style scoped>
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: .625rem;
+  }
+</style>

resources/js/components/header/Timer.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import axios from "axios";
+import {useAuthStore} from "@/stores/auth.store.ts";
+
+const auth = useAuthStore();
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

resources/js/components/header/UserInfo.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {useRouter} from "vue-router";
+import {useAuthStore} from "@/stores/auth.store.ts";
+const router = useRouter();
+const auth = useAuthStore();
+const userInfo = auth.userData;
+if (!userInfo) {
+  router.push('/login');
+}
+const userName = auth.userData.login;
+
+const logout = () => {
+  auth.logout();
+  router.push('/');
+}
+
+</script>
+
+<template>
+  <v-sheet
+      :width="150"
+  >
+    <v-btn color="info">{{ userName }} {{ $t('header.userinfo.info') }}</v-btn>
+    <v-btn color="" @click="logout">{{ $t('header.userinfo.logout') }}</v-btn>
+  </v-sheet>
+</template>
+
+<style scoped>
+  div button {
+    width: 100%;
+  }
+  div button:not(:first-child) {
+    margin-top: 2px;
+  }
+</style>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps([
+    'item'
+]);
+
+const icon = () => {
+  switch (props.item.type) {
+    case 'show':
+      return 'mdi-eye';
+      break;
+    case 'ad':
+      return 'mdi-advertisements';
+      break;
+    case 'jingle':
+      return 'mdi-music';
+      break;
+  }
+}
+</script>
+
+<template>
+  <div>
+    {{ item.when }}
+    <v-icon :icon="icon()" />
+    {{ item.name }}
+  </div>
+</template>
+
+<style scoped>
+  div {
+    display: flex;
+    padding: 2px;
+  }
+  i {
+    margin: 0 5px;
+  }
+</style>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const time = "12:00"
+</script>
+
+<template>
+  <v-card-item>
+    <v-card-title class="d-flex align-center justify-between">
+      <div class="clock-time">
+        <strong>{{ time }}</strong>
+      </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" />
+      </div>
+    </v-card-title>
+  </v-card-item>
+</template>
+
+<style scoped>
+  .v-card-item {
+    padding: 2px;
+  }
+</style>

resources/js/layouts/partials/Header.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import OnAir from "@/components/header/OnAir.vue";
+import Clock from "@/components/header/Clock.vue";
+import Timer from "@/components/header/Timer.vue";
+import UserInfo from "@/components/header/UserInfo.vue";
+</script>
+
+<template>
+  <header>
+    <OnAir />
+    <Clock />
+    <Timer />
+    <UserInfo />
+  </header>
+</template>
+
+<style scoped>
+  header {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+  }
+</style>

resources/js/pages/Backoffice.vue

@@ -1,30 +1,14 @@
 <script setup lang="ts">
-import axios from 'axios'
-import { ref } from 'vue'
+import {useAuthStore} from "@/stores/auth.store.ts";
+import Header from "@/layouts/partials/Header.vue";
 
-const userData = ref(null)
-const isLoading = ref(true)
+const auth = useAuthStore();
 
-const fetchUserData = async () => {
-  try {
-    // Replace http://127.0.0.1:8000 with Laravel domain
-    const response = await axios.get('http://127.0.0.1:9876/api/secured')
-    if (response.status === 200 && response.data.user) {
-      userData.value = response.data
-    }
-  } catch (error) {
-    // Handle errors appropriately (e.g., display an error message)
-    console.error(error)
-  }
-  isLoading.value = false
-}
-
-await fetchUserData()
 </script>
 
 <template>
   <div>
-    <h2>HOME</h2>
+    <Header />
     <router-link to="/login"> Take me to login page </router-link>
   </div>
 </template>