chg: [front] More separation of concernes with components

src/App.vue

@@ -1,45 +1,25 @@
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { onMounted } from 'vue'
 import TheDahboard from './TheDahboard.vue'
+import TheThemeButton from './components/TheThemeButton.vue'
+import TheSocketConnectionState from './components/TheSocketConnectionState.vue'
 import { socketConnected } from "@/socket";
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
 
-const darkMode = ref(true)
 
 onMounted(() => {
   document.getElementsByTagName('body')[0].classList.add('dark')
   document.getElementById('app').classList.add('w-5/6')
 })
 
-watch(darkMode, (newValue) => {
-  if (newValue) {
-      document.getElementsByTagName('body')[0].classList.add('dark')
-    } else {
-      document.getElementsByTagName('body')[0].classList.remove('dark')
-  }
-})
-
 </script>
 
 <template>
   <main>
     <div class="absolute top-1 right-1">
-      <button
-        @click="darkMode = !darkMode"
-        class="mr-3 px-2 py-1 rounded-md focus-outline font-semibold bg-blue-600 text-slate-200 hover:bg-blue-700"
-      >
-        <FontAwesomeIcon :icon="faSun" class="mr-1" v-show="!darkMode"></FontAwesomeIcon>
-        <FontAwesomeIcon :icon="faMoon" class="mr-1" v-show="darkMode"></FontAwesomeIcon>
-        {{ darkMode ? 'Dark' : 'Light'}}
-      </button>
-      <span class="text-slate-900 dark:text-slate-400 shadow-blue-500/50">
-        <span class="mr-1">Socket.IO:</span>
-        <span v-show="socketConnected" class="font-semibold text-green-600 dark:text-green-400">Connected</span>
-        <span v-show="!socketConnected" class="font-semibold text-red-500">Disconnected</span>
-      </span>
+      <TheThemeButton></TheThemeButton>
+      <TheSocketConnectionState></TheSocketConnectionState>
     </div>
-    <TheDahboard />
+    <TheDahboard></TheDahboard>
   </main>
 </template>
 

src/TheDahboard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { onMounted, watch } from 'vue'
 import TheLiveLogs from './components/TheLiveLogs.vue'
 import TheScores from './components/TheScores.vue'
 import { resetState, fullReload, socketConnected } from "@/socket";
@@ -20,9 +20,6 @@ onMounted(() => {
 
 <template>
   <h1 class="text-3xl font-bold text-center text-slate-600 dark:text-slate-300">MISP Exercise Dashboard</h1>
-  <TheScores
-  ></TheScores>
-
-  <TheLiveLogs
-  ></TheLiveLogs>
+  <TheScores></TheScores>
+  <TheLiveLogs></TheLiveLogs>
 </template>

src/components/TheLiveLogs.vue

@@ -1,5 +1,4 @@
 <script setup>
-  import { ref, computed, onMounted, watch } from 'vue'
   import { notifications, userCount, notificationCounter, notificationAPICounter } from "@/socket";
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   import { faSignal, faCloud, faCog, faUser, faCircle } from '@fortawesome/free-solid-svg-icons'

src/components/TheScores.vue

@@ -1,5 +1,4 @@
 <script setup>
-  import { ref, computed, onMounted, watch } from 'vue'
   import { exercises, progresses } from "@/socket";
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   import { faCheck, faTimes, faGraduationCap } from '@fortawesome/free-solid-svg-icons'

src/components/TheSocketConnectionState.vue

@@ -0,0 +1,14 @@
+<script setup>
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+  import { socketConnected } from "@/socket";
+
+</script>
+
+<template>
+  <span class="text-slate-900 dark:text-slate-400 shadow-blue-500/50">
+    <span class="mr-1">Socket.IO:</span>
+    <span v-show="socketConnected" class="font-semibold text-green-600 dark:text-green-400">Connected</span>
+    <span v-show="!socketConnected" class="font-semibold text-red-500">Disconnected</span>
+  </span>
+</template>

src/components/TheThemeButton.vue

@@ -0,0 +1,26 @@
+<script setup>
+  import { ref, watch } from 'vue'
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+
+  const darkMode = ref(true)
+
+  watch(darkMode, (newValue) => {
+    if (newValue) {
+        document.getElementsByTagName('body')[0].classList.add('dark')
+      } else {
+        document.getElementsByTagName('body')[0].classList.remove('dark')
+    }
+  })
+</script>
+
+<template>
+  <button
+    @click="darkMode = !darkMode"
+    class="mr-3 px-2 py-1 rounded-md focus-outline font-semibold bg-blue-600 text-slate-200 hover:bg-blue-700"
+  >
+    <FontAwesomeIcon :icon="faSun" class="mr-1" v-show="!darkMode"></FontAwesomeIcon>
+    <FontAwesomeIcon :icon="faMoon" class="mr-1" v-show="darkMode"></FontAwesomeIcon>
+    {{ darkMode ? 'Dark' : 'Light'}}
+  </button>
+</template>