Time zone click

components/Header.vue

@@ -1,57 +1,153 @@
 <template>
   <header>
-    <img
-      src="@/assets/img/305474881_500277108772915_4425958856109240367_n.jpg"
-      alt="twitch"
-    />
+    <img src="@/assets/img/305474881_500277108772915_4425958856109240367_n.jpg" alt="twitch" />
     <h1>Bienvenue sur le projet milestone !</h1>
 
-    <p>
+    <!--container for flags + time display-->
+    <p class="flag-container">
       <img class="flag" src="~/assets/img/flag-france.png" alt="french-flag" />
-      {{ frenchDate }}
-      <img
-        class="flag"
-        src="~/assets/img/flag-canada.png"
-        alt="canadian-flag"
-      />
-      {{ canadianDate }}
-    </p>
+      <!-- display time in france's timezone -->
+      {{ frenchTime }}
+
+      <!-- container for canadian flag + the dropdown menu -->
+    <div class="dropdown" @click="toggleCanadianDropdown">
+      <!-- dynamic image for displaying the selected flag -->
+      <img class="flag" :src="getFlagUrl(selectedTimeZone.flagUrl)" :alt="selectedTimeZone.label" />
+      <span class="dropdown-indicator">&#9660;</span>
+      <!-- display time in the selected timezone -->
+      {{ canadianTime }}
+
+      <!-- dropdown menu will appear when the flag is clicked -->
+      <client-only>
+        <ul v-show="canadianDropdownOpen" class="dropdown-menu">
+          <!-- loop over timezones for user to select -->
+          <li v-for="timezone in timezones" :key="timezone.label" @click="selectTimeZone(timezone)">
+            {{ timezone.label }}
+          </li>
+        </ul>
+      </client-only>
+    </div>
 
+
+    </p>
+    <!--conditional connect/disconnect buttons-->
     <div class="btns" v-if="!jwtStore.jwt">
       <a href="https://vu.fr/mGJw" target="_blank">
         <button @click="hideCreateButton">Create account</button>
       </a>
     </div>
 
     <div class="btns">
-      <button v-if="!jwtStore.jwt" @click="$emit('login'), hideCreateButton">Login</button>
-      <button v-if="jwtStore.jwt" @click="jwtStore.logout(), showCreateButton">Logout</button>
+      <button v-if="!jwtStore.jwt" @click="$emit('login')">Login</button>
+      <button v-if="jwtStore.jwt" @click="jwtStore.logout()">Logout</button>
     </div>
   </header>
 </template>
 
+<!-- script UX and timezone API -->
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { useJwtStore } from "~/stores/jwt";
 
-let now = new Date();
 
-let frenchDate = now.toLocaleString("fr-FR", {
-  hour: "2-digit",
-  minute: "2-digit",
-  hour12: false,
-  timeZone: "Europe/Paris",
+
+//define timezone interface
+interface Timezone {
+  label: string;
+  timezone: string;
+  flagUrl: string;
+}
+
+// using JWT store for authentification status
+const jwtStore = useJwtStore();
+// reactive reference for the current date and time
+const now = ref(new Date());
+// reference to the interval for updating the time
+let intervalId: number;
+
+// predefined list of timezones with their corresponding flags and labels
+const timezones: Timezone[] = [
+  { label: 'Canada', timezone: 'America/Toronto', flagUrl: "flag-canada.png" },
+  { label: 'USA Ouest', timezone: 'America/Los_Angeles', flagUrl: "flag-usa.png" },
+  { label: 'USA Centre', timezone: 'America/Chicago', flagUrl: "flag-usa.png" },
+  { label: 'United Kingdom', timezone: 'Europe/London', flagUrl: "flag-uk.png" },
+  { label: 'Russie', timezone: 'Europe/Moscow', flagUrl: "flag-russia.png" },
+  { label: 'Australie', timezone: 'Australia/Sydney', flagUrl: "flag-australia.png" },
+  { label: 'Guadeloupe', timezone: 'America/Guadeloupe', flagUrl: "flag-guadeloupe.png" },
+  { label: 'Martinique', timezone: 'America/Martinique', flagUrl: "flag-martinique.png" },
+  { label: 'Guyane', timezone: 'America/Cayenne', flagUrl: "flag-guyane.png" },
+  { label: 'La Réunion', timezone: 'Indian/Reunion', flagUrl: "flag-reunion.png" },
+];
+
+// reactive reference to the currently selected timezone, defaults to the first one
+const selectedTimeZone = ref<Timezone>(timezones[0]);
+// reactive boolean to control the dropdown menu's visibility
+const canadianDropdownOpen = ref(false);
+
+// function to select a timezone and update the flag and time
+const selectTimeZone = (timezone: Timezone) => {
+  selectedTimeZone.value = timezone; // this will change both the flag and the timezone
+  canadianDropdownOpen.value = false; // close the dropdown menu
+  now.value = new Date(); // update the current time
+};
+
+// function to convert flag URL path to a fully qualified URL
+const getFlagUrl = (path: string) => {
+  return new URL(`../assets/img/${path}`, import.meta.url).href;
+};
+
+// function to toggle the visibility of the dropdown menu
+const toggleCanadianDropdown = () => {
+  canadianDropdownOpen.value = !canadianDropdownOpen.value;
+};
+
+// Update to update the current time
+const updateDate = () => {
+  now.value = new Date();
+};
+
+// computed property to get the current time in the selected timezone
+const canadianTime = computed(() => {
+  return now.value.toLocaleTimeString("fr-FR", {
+    timeZone: selectedTimeZone.value.timezone,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  });
 });
-let canadianDate = now.toLocaleString("fr-FR", {
-  hour: "2-digit",
-  minute: "2-digit",
-  hour12: false,
-  timeZone: "America/Toronto",
+
+// computed property to get the current time in france's timezone
+const frenchTime = computed(() => {
+  return now.value.toLocaleTimeString("fr-FR", {
+    timeZone: 'Europe/Paris',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  });
 });
 
-const jwtStore = useJwtStore();
+//initialization of the store for JWT management
+// const jwtStore = useJwtStore();
+
+// let intervalId: number;
+
+// lifecycle hooks for creating and clearing the interval to update the time
+onMounted(() => {
+  intervalId = window.setInterval(updateDate, 1000); // Use window.setInterval to make TypeScript happy
+});
+
+onUnmounted(() => {
+  clearInterval(intervalId); // Clear the interval
+});
+
+// const jwtStore = useJwtStore();
 
 </script>
 
+
+
 <style scoped>
 header {
   height: 64px;
@@ -86,6 +182,26 @@ img {
   vertical-align: middle;
 }
 
+.hidden-select {
+  display: none;
+}
+
+.flag-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.hidden-select {
+  display: none;
+}
+
+.flag-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .flag {
   height: 36px;
   width: 36px;
@@ -94,7 +210,54 @@ img {
   margin-bottom: 6px;
 }
 
+.flag-label {
+  cursor: pointer;
+}
+
+.flag-emoji {
+  font-size: 1.2em;
+}
+
+.dropdown {
+  position: relative;
+  cursor: pointer;
+}
+
+.dropdown-indicator {
+  user-select: none;
+  margin-left: 5px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 16px);
+  left: 13px;
+  /*background-color: white;*/
+  background-color: rgb(102, 101, 210);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
+  /*box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);*/
+  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.13);
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.dropdown-menu[style*="display: none;"] {
+  display: none;
+}
+
+.dropdown-menu li {
+  padding: 5px 10px;
+}
+
+.dropdown-menu li:hover {
+  background-color: #ffffff24;
+}
+
 .add-btn {
   font-size: 1em;
 }
-</style>
+</style>