chg: [front] Formatted all files

.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "d30f2833",
+  "configHash": "e49d25ea",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "f22e7dd7",
+  "optimized": {},
+  "chunks": {}
+}

.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

src/App.vue

@@ -5,16 +5,14 @@ import TheAdminPanel from './components/TheAdminPanel.vue'
 import TheSocketConnectionState from './components/TheSocketConnectionState.vue'
 import TheDahboard from './TheDahboard.vue'
 import Toaster from '@/components/elements/Toaster.vue'
-import { socketConnected } from "@/socket";
-import { darkModeEnabled } from "@/settings.js"
-
+import { socketConnected } from '@/socket'
+import { darkModeEnabled } from '@/settings.js'
 
 onMounted(() => {
   if (darkModeEnabled.value) {
     document.getElementsByTagName('body')[0].classList.add('dark')
   }
 })
-
 </script>
 
 <template>
@@ -65,5 +63,4 @@ body {
   /* cyan-400 */
   /* filter: invert(71%) sepia(97%) saturate(1333%) hue-rotate(147deg) brightness(95%) contrast(96%); */
 }
-
-</style>
+</style>

src/TheDahboard.vue

@@ -2,9 +2,8 @@
 import { onMounted, watch } from 'vue'
 import TheLiveLogs from './components/TheLiveLogs.vue'
 import TheScores from './components/TheScores.vue'
-import { resetState, fullReload, socketConnected } from "@/socket";
-import { fullscreenModeOn } from "@/settings.js"
-
+import { resetState, fullReload, socketConnected } from '@/socket'
+import { fullscreenModeOn } from '@/settings.js'
 
 watch(socketConnected, (isConnected) => {
   if (isConnected) {
@@ -16,7 +15,6 @@ watch(socketConnected, (isConnected) => {
 onMounted(() => {
   fullReload()
 })
-
 </script>
 
 <template>

src/assets/main.css

@@ -1,7 +1,7 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
-@import "./styled-components/toggle.css";
-@import "./styled-components/button.css";
-@import "./styled-components/transitions.css";
+@import './styled-components/toggle.css';
+@import './styled-components/button.css';
+@import './styled-components/transitions.css';

src/assets/styled-components/button.css

@@ -1,83 +1,82 @@
-
 .btn {
-    @apply px-2 py-1 font-semibold rounded border text-nowrap select-none;
-    @apply transition-all duration-75;
-    @apply border-slate-300;
+  @apply px-2 py-1 font-semibold rounded border text-nowrap select-none;
+  @apply transition-all duration-75;
+  @apply border-slate-300;
 
-    &.btn-sm {
-        @apply px-1 py-0;
-    }
+  &.btn-sm {
+    @apply px-1 py-0;
+  }
 
-    &.btn-xs {
-        @apply px-0.5 py-0;
-        @apply text-sm;
-    }
+  &.btn-xs {
+    @apply px-0.5 py-0;
+    @apply text-sm;
+  }
 
-    &.btn-lg {
-        @apply px-3 py-1;
-        @apply text-lg;
-    }
-    
-    &.btn:not(:disabled) {
-        @apply hover:bg-slate-200 hover:border-slate-300;
-        @apply active:scale-90
-    }
+  &.btn-lg {
+    @apply px-3 py-1;
+    @apply text-lg;
+  }
 
-    &.btn:disabled {
-        @apply cursor-not-allowed opacity-60;
-    }
-    &.btn-primary:not(:disabled) {
-        @apply border-none;
-        @apply bg-blue-600 text-white hover:bg-blue-700;
-    }
+  &.btn:not(:disabled) {
+    @apply hover:bg-slate-200 hover:border-slate-300;
+    @apply active:scale-90;
+  }
 
-    &.btn-info:not(:disabled) {
-        @apply border-none;
-        @apply bg-blue-500 text-white hover:bg-blue-600;
-    }
+  &.btn:disabled {
+    @apply cursor-not-allowed opacity-60;
+  }
+  &.btn-primary:not(:disabled) {
+    @apply border-none;
+    @apply bg-blue-600 text-white hover:bg-blue-700;
+  }
 
-    &.btn-danger:not(:disabled) {
-        @apply border-none;
-        @apply bg-red-600 text-white hover:bg-red-700;
-    }
-    
-    &.btn-success:not(:disabled) {
-        @apply border-none;
-        @apply bg-green-600 text-white hover:bg-green-700;
-    }
+  &.btn-info:not(:disabled) {
+    @apply border-none;
+    @apply bg-blue-500 text-white hover:bg-blue-600;
+  }
 
-    &.btn-warning:not(:disabled) {
-        @apply border-none;
-        @apply bg-amber-600 text-white hover:bg-amber-700;
-    }
+  &.btn-danger:not(:disabled) {
+    @apply border-none;
+    @apply bg-red-600 text-white hover:bg-red-700;
+  }
 
-    &.btn-outline-primary:not(:disabled) {
-        @apply hover:bg-blue-600 hover:border-blue-700 hover:text-white;
-        @apply border-blue-700 hover:border-blue-800
-    }
+  &.btn-success:not(:disabled) {
+    @apply border-none;
+    @apply bg-green-600 text-white hover:bg-green-700;
+  }
 
-    &.btn-outline-info:not(:disabled) {
-        @apply hover:bg-blue-500 hover:border-blue-700 hover:text-white;
-        @apply border-blue-700 hover:border-blue-800
-    }
+  &.btn-warning:not(:disabled) {
+    @apply border-none;
+    @apply bg-amber-600 text-white hover:bg-amber-700;
+  }
 
-    &.btn-outline-danger:not(:disabled) {
-        @apply hover:bg-red-500 hover:border-red-700 hover:text-white;
-        @apply border-red-700 hover:border-red-800
-    }
-    
-    &.btn-outline-success:not(:disabled) {
-        @apply hover:bg-green-500 hover:border-green-700 hover:text-white;
-        @apply border-green-700 hover:border-green-800
-    }
+  &.btn-outline-primary:not(:disabled) {
+    @apply hover:bg-blue-600 hover:border-blue-700 hover:text-white;
+    @apply border-blue-700 hover:border-blue-800;
+  }
 
-    &.btn-outline-warning:not(:disabled) {
-        @apply hover:bg-amber-500 hover:border-amber-700 hover:text-white;
-        @apply border-amber-700 hover:border-amber-800
-    }
+  &.btn-outline-info:not(:disabled) {
+    @apply hover:bg-blue-500 hover:border-blue-700 hover:text-white;
+    @apply border-blue-700 hover:border-blue-800;
+  }
 
-    &.btn-link:not(:disabled) {
-        @apply border-none;
-        @apply hover:bg-transparent hover:border-transparent hover:text-inherit;
-    }
+  &.btn-outline-danger:not(:disabled) {
+    @apply hover:bg-red-500 hover:border-red-700 hover:text-white;
+    @apply border-red-700 hover:border-red-800;
+  }
+
+  &.btn-outline-success:not(:disabled) {
+    @apply hover:bg-green-500 hover:border-green-700 hover:text-white;
+    @apply border-green-700 hover:border-green-800;
+  }
+
+  &.btn-outline-warning:not(:disabled) {
+    @apply hover:bg-amber-500 hover:border-amber-700 hover:text-white;
+    @apply border-amber-700 hover:border-amber-800;
+  }
+
+  &.btn-link:not(:disabled) {
+    @apply border-none;
+    @apply hover:bg-transparent hover:border-transparent hover:text-inherit;
+  }
 }

src/assets/styled-components/toggle.css

@@ -3,76 +3,88 @@
 }
 
 .toggle {
-    --tglbg: theme(colors.slate.200);
-    --animation-input: 0.2s;
-    --handleoffset: 1.5rem;
-    --handleoffsetcalculator: calc(var(--handleoffset) * -1);
-    --togglehandleborder: 0 0;
-    @apply h-6 w-12 rounded-3xl cursor-pointer appearance-none border border-current bg-current;
-    transition:
-      background,
-      box-shadow var(--animation-input, 0.2s) ease-out;
+  --tglbg: theme(colors.slate.200);
+  --animation-input: 0.2s;
+  --handleoffset: 1.5rem;
+  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
+  --togglehandleborder: 0 0;
+  @apply h-6 w-12 rounded-3xl cursor-pointer appearance-none border border-current bg-current;
+  transition:
+    background,
+    box-shadow var(--animation-input, 0.2s) ease-out;
+  box-shadow:
+    var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
+    0 0 0 2px var(--tglbg) inset,
+    var(--togglehandleborder);
+  @apply text-slate-500;
+
+  &:focus-visible {
+    @apply outline outline-2 outline-offset-2;
+  }
+
+  &:hover {
+    @apply bg-current;
+  }
+
+  &:checked,
+  &[aria-checked='true'] {
+    background-image: none;
+    --handleoffsetcalculator: var(--handleoffset);
+  }
+
+  &:indeterminate {
     box-shadow:
-      var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
-      0 0 0 2px var(--tglbg) inset,
-      var(--togglehandleborder);
-    @apply text-slate-500;
+      calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
+      calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
+      0 0 0 2px var(--tglbg) inset;
+  }
+
+  &:disabled {
+    @apply cursor-not-allowed bg-transparent opacity-30;
+    --togglehandleborder: 0 0 0 3px #000 inset, var(--handleoffsetcalculator) 0 0 3px #000 inset;
+  }
+
+  &.toggle-success {
     &:focus-visible {
-      @apply outline outline-2 outline-offset-2;
-    }
-    &:hover {
-      @apply bg-current;
+      @apply outline-green-400;
     }
+
     &:checked,
-    &[aria-checked="true"] {
-      background-image: none;
-      --handleoffsetcalculator: var(--handleoffset);
+    &[aria-checked='true'] {
+      @apply border-green-500 bg-green-400 text-slate-900 border-opacity-10;
     }
-    &:indeterminate {
-      box-shadow:
-        calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
-        calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
-        0 0 0 2px var(--tglbg) inset;
+  }
+
+  &.toggle-warning {
+    &:focus-visible {
+      @apply outline-amber-400;
     }
-    &:disabled {
-      @apply cursor-not-allowed bg-transparent opacity-30;
-      --togglehandleborder: 0 0 0 3px #000 inset,
-        var(--handleoffsetcalculator) 0 0 3px #000 inset;
+
+    &:checked,
+    &[aria-checked='true'] {
+      @apply border-amber-500 bg-amber-400 text-slate-900 border-opacity-10;
     }
-    &.toggle-success {
-        &:focus-visible {
-            @apply outline-green-400;
-        }
-        &:checked,
-        &[aria-checked="true"] {
-            @apply border-green-500 bg-green-400 text-slate-900 border-opacity-10;
-        }
+  }
+
+  &.toggle-info {
+    &:focus-visible {
+      @apply outline-blue-400;
     }
-    &.toggle-warning {
-        &:focus-visible {
-            @apply outline-amber-400;
-        }
-        &:checked,
-        &[aria-checked="true"] {
-            @apply border-amber-500 bg-amber-400 text-slate-900 border-opacity-10;
-        }
+
+    &:checked,
+    &[aria-checked='true'] {
+      @apply border-blue-500 bg-blue-400 text-slate-900 border-opacity-10;
     }
-    &.toggle-info {
-        &:focus-visible {
-            @apply outline-blue-400;
-        }
-        &:checked,
-        &[aria-checked="true"] {
-            @apply border-blue-500 bg-blue-400 text-slate-900 border-opacity-10;
-        }
+  }
+
+  &.toggle-danger {
+    &:focus-visible {
+      @apply outline-red-400;
     }
-    &.toggle-danger {
-        &:focus-visible {
-            @apply outline-red-400;
-        }
-        &:checked,
-        &[aria-checked="true"] {
-            @apply border-red-500 bg-red-400 text-slate-900 border-opacity-10;
-        }
+
+    &:checked,
+    &[aria-checked='true'] {
+      @apply border-red-500 bg-red-400 text-slate-900 border-opacity-10;
     }
-  }
+  }
+}

src/assets/styled-components/transitions.css

@@ -1,27 +1,27 @@
 .slide-fade-enter-active {
-    transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
 }
 
 .slide-fade-leave-active {
-    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
 }
 
 .slide-fade-enter-from,
 .slide-fade-leave-to {
-    transform: translateX(20px);
-    opacity: 0;
+  transform: translateX(20px);
+  opacity: 0;
 }
 
 .slide-fade-reverse-enter-active {
-    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
 }
 
 .slide-fade-reverse-leave-active {
-    transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
 }
 
 .slide-fade-reverse-enter-from,
 .slide-fade-reverse-leave-to {
-    transform: translateX(-20px);
-    opacity: 0;
+  transform: translateX(-20px);
+  opacity: 0;
 }

src/components/LiveLogsUserActivityGraph.vue

@@ -1,55 +1,43 @@
 <script setup>
-  import { ref, watch, computed } from "vue"
-  import { userActivity, userActivityConfig } from "@/socket";
-  import { darkModeEnabled } from "@/settings.js"
+import { ref, watch, computed } from 'vue'
+import { userActivity, userActivityConfig } from '@/socket'
+import { darkModeEnabled } from '@/settings.js'
 
-  const props = defineProps(['user_id', 'compact_view', 'ultra_compact_view'])
+const props = defineProps(['user_id', 'compact_view', 'ultra_compact_view'])
 
-  const theChart = ref(null)
-  const bufferSize = computed(() => userActivityConfig.value.activity_buffer_size)
-  const bufferSizeMin = computed(() => userActivityConfig.value.timestamp_min)
-  const chartInitSeries = computed(() => Array.from(Array(bufferSize.value)).map(() => 0))
+const theChart = ref(null)
+const bufferSize = computed(() => userActivityConfig.value.activity_buffer_size)
+const bufferSizeMin = computed(() => userActivityConfig.value.timestamp_min)
+const chartInitSeries = computed(() => Array.from(Array(bufferSize.value)).map(() => 0))
 
-  const hasActivity = computed(() => userActivity.value.length != 0)
-  const chartSeries = computed(() => {
-    return !hasActivity.value ? chartInitSeries.value : activitySeries.value
-  })
+const hasActivity = computed(() => userActivity.value.length != 0)
+const chartSeries = computed(() => {
+  return !hasActivity.value ? chartInitSeries.value : activitySeries.value
+})
 
-  const activitySeries = computed(() => {
-    const data = userActivity.value[props.user_id] === undefined ? chartInitSeries.value : userActivity.value[props.user_id]
-    return data
-  })
+const activitySeries = computed(() => {
+  const data =
+    userActivity.value[props.user_id] === undefined
+      ? chartInitSeries.value
+      : userActivity.value[props.user_id]
+  return data
+})
 
-  const colorRanges = [0, 1, 2, 3, 4, 5, 1000]
-  const palleteColor = 'blue'
-  const colorPalleteIndexDark = [
-    '900',
-    '700',
-    '600',
-    '500',
-    '400',
-    '300',
-    '200',
-  ]
-  const colorPalleteIndexLight = [
-    '50',
-    '100',
-    '300',
-    '400',
-    '500',
-    '600',
-    '700',
-  ]
+const colorRanges = [0, 1, 2, 3, 4, 5, 1000]
+const palleteColor = 'blue'
+const colorPalleteIndexDark = ['900', '700', '600', '500', '400', '300', '200']
+const colorPalleteIndexLight = ['50', '100', '300', '400', '500', '600', '700']
 
-  function getPalleteIndexFromValue(value) {
-    for (let palleteIndex = 0; palleteIndex < colorRanges.length; palleteIndex++) {
-      const colorRangeValue = colorRanges[palleteIndex];
-      if (value <= colorRangeValue) {
-        return darkModeEnabled.value ? colorPalleteIndexDark[palleteIndex] : colorPalleteIndexLight[palleteIndex]
-      }
+function getPalleteIndexFromValue(value) {
+  for (let palleteIndex = 0; palleteIndex < colorRanges.length; palleteIndex++) {
+    const colorRangeValue = colorRanges[palleteIndex]
+    if (value <= colorRangeValue) {
+      return darkModeEnabled.value
+        ? colorPalleteIndexDark[palleteIndex]
+        : colorPalleteIndexLight[palleteIndex]
     }
   }
-
+}
 </script>
 
 <template>
@@ -60,8 +48,12 @@
     <span
       v-for="(value, i) in chartSeries"
       :key="i"
-      :class="[`inline-block rounded-[1px] mr-px`, props.compact_view ? 'h-1.5' : 'h-3', `bg-${palleteColor}-${getPalleteIndexFromValue(value)}`]"
+      :class="[
+        `inline-block rounded-[1px] mr-px`,
+        props.compact_view ? 'h-1.5' : 'h-3',
+        `bg-${palleteColor}-${getPalleteIndexFromValue(value)}`
+      ]"
       :style="`width: ${(((props.ultra_compact_view ? 120 : 240) - chartSeries.length) / chartSeries.length).toFixed(1)}px`"
     ></span>
   </span>
-</template>
+</template>

src/components/TheAdminPanel.vue

@@ -1,43 +1,58 @@
 <script setup>
-  import { ref, computed, onMounted } from 'vue'
-  import { exercises, selected_exercises, diagnostic, fullReload, resetAllExerciseProgress, resetAll, resetLiveLogs, changeExerciseSelection, debouncedGetDiangostic, remediateSetting } from "@/socket";
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faScrewdriverWrench, faTrash, faSuitcaseMedical, faGraduationCap, faBan, faRotate, faHammer, faCheck } from '@fortawesome/free-solid-svg-icons'
-  import { toast } from '@/utils.js'
+import { ref, computed, onMounted } from 'vue'
+import {
+  exercises,
+  selected_exercises,
+  diagnostic,
+  fullReload,
+  resetAllExerciseProgress,
+  resetAll,
+  resetLiveLogs,
+  changeExerciseSelection,
+  debouncedGetDiangostic,
+  remediateSetting
+} from '@/socket'
+import {
+  faScrewdriverWrench,
+  faTrash,
+  faSuitcaseMedical,
+  faGraduationCap,
+  faBan,
+  faRotate,
+  faHammer,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
+import { toast } from '@/utils.js'
 
-  const admin_modal = ref(null)
-  const clickedButtons = ref([])
+const admin_modal = ref(null)
+const clickedButtons = ref([])
 
-  const diagnosticLoading = computed(() => Object.keys(diagnostic.value).length == 0)
-  const isMISPOnline = computed(() => diagnostic.value.version?.version !== undefined)
-  const isZMQActive = computed(() => diagnostic.value.zmq_message_count > 0)
-  const ZMQMessageCount = computed(() => diagnostic.value.zmq_message_count)
+const diagnosticLoading = computed(() => Object.keys(diagnostic.value).length == 0)
+const isMISPOnline = computed(() => diagnostic.value.version?.version !== undefined)
+const isZMQActive = computed(() => diagnostic.value.zmq_message_count > 0)
+const ZMQMessageCount = computed(() => diagnostic.value.zmq_message_count)
 
-  function changeSelectionState(state_enabled, exec_uuid) {
-    changeExerciseSelection(exec_uuid, state_enabled);
-  }
+function changeSelectionState(state_enabled, exec_uuid) {
+  changeExerciseSelection(exec_uuid, state_enabled)
+}
 
-  function settingHandler(setting) {
-    remediateSetting(setting)
-  }
-
-  const showModal = ref(false)
-  function showTheModal() {
-    showModal.value = true
-    clickedButtons.value = []
-    debouncedGetDiangostic()
-  }
+function settingHandler(setting) {
+  remediateSetting(setting)
+}
 
+const showModal = ref(false)
+function showTheModal() {
+  showModal.value = true
+  clickedButtons.value = []
+  debouncedGetDiangostic()
+}
 </script>
 
 <template>
-  <button
-  @click="showTheModal()"
-  class="btn btn-primary"
-  >
-  <FontAwesomeIcon :icon="faScrewdriverWrench" class="mr-1"></FontAwesomeIcon>
-  Admin panel
-</button>
+  <button @click="showTheModal()" class="btn btn-primary">
+    <FontAwesomeIcon :icon="faScrewdriverWrench" class="mr-1"></FontAwesomeIcon>
+    Admin panel
+  </button>
 
   <Modal :showModal="showModal" @modal-close="showModal = false">
     <template #header>
@@ -49,152 +64,175 @@
     <template #body>
       <div class="dark:text-slate-700 text-slate-700">
         <div class="flex mb-5 gap-2">
+          <button @click="fullReload()" class="h-10 min-h-10 font-semibold btn-info btn gap-1">
+            <FontAwesomeIcon :icon="faRotate" size="lg" fixed-width></FontAwesomeIcon>
+            Full refresh
+          </button>
           <button
-          @click="fullReload()"
-          class="h-10 min-h-10 font-semibold btn-info btn gap-1"
+            @click="resetAllExerciseProgress()"
+            class="h-10 min-h-10 font-semibold btn-danger btn gap-1"
           >
-          <FontAwesomeIcon :icon="faRotate" size="lg" fixed-width></FontAwesomeIcon>
-          Full refresh
-        </button>
-        <button
-        @click="resetAllExerciseProgress()"
-        class="h-10 min-h-10 font-semibold btn-danger btn gap-1"
-        >
-        <FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
-        Reset All Exercises
-      </button>
-      <button
-      @click="resetAll()"
-      class="h-10 min-h-10 font-semibold btn-danger btn gap-1"
-      >
-      <FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
-      Reset All
-    </button>
-    <button
-    @click="resetLiveLogs()"
-    class="h-10 min-h-10 font-semibold btn-warning btn gap-1"
-    >
-    <FontAwesomeIcon :icon="faBan" size="lg"> fixed-width</FontAwesomeIcon>
-    Clear Live Logs
-  </button>
-  </div>
+            <FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
+            Reset All Exercises
+          </button>
+          <button @click="resetAll()" class="h-10 min-h-10 font-semibold btn-danger btn gap-1">
+            <FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
+            Reset All
+          </button>
+          <button
+            @click="resetLiveLogs()"
+            class="h-10 min-h-10 font-semibold btn-warning btn gap-1"
+          >
+            <FontAwesomeIcon :icon="faBan" size="lg"> fixed-width</FontAwesomeIcon>
+            Clear Live Logs
+          </button>
+        </div>
 
-  <h3 class="text-lg font-semibold">
-    <FontAwesomeIcon :icon="faGraduationCap" class="mr-1"></FontAwesomeIcon>
-    Selected Exercises
-  </h3>
-  <div
-  v-for="(exercise) in exercises"
-  :key="exercise.name"
-  class="form-control pl-3"
-  >
-  <label class="label cursor-pointer justify-start">
-    <input
-    @change="changeSelectionState($event.target.checked, exercise.uuid)"
-    type="checkbox"
-    :checked="selected_exercises.includes(exercise.uuid)"
-    :value="exercise.uuid"
-    :class="`checkbox ${selected_exercises.includes(exercise.uuid) ? 'checkbox-success' : ''} [--fallback-bc:#94a3b8]`"
-    />
-    <span class="font-mono font-semibold text-base ml-3">{{ exercise.name }}</span>
-  </label>
-  </div>
+        <h3 class="text-lg font-semibold">
+          <FontAwesomeIcon :icon="faGraduationCap" class="mr-1"></FontAwesomeIcon>
+          Selected Exercises
+        </h3>
+        <div v-for="exercise in exercises" :key="exercise.name" class="form-control pl-3">
+          <label class="label cursor-pointer justify-start">
+            <input
+              @change="changeSelectionState($event.target.checked, exercise.uuid)"
+              type="checkbox"
+              :checked="selected_exercises.includes(exercise.uuid)"
+              :value="exercise.uuid"
+              :class="`checkbox ${
+                selected_exercises.includes(exercise.uuid) ? 'checkbox-success' : ''
+              } [--fallback-bc:#94a3b8]`"
+            />
+            <span class="font-mono font-semibold text-base ml-3">{{ exercise.name }}</span>
+          </label>
+        </div>
 
-  <h3 class="text-lg font-semibold mt-4">
-    <FontAwesomeIcon :icon="faSuitcaseMedical" class="mr-1"></FontAwesomeIcon>
-    Diagnostic
-  </h3>
-  <h4 class="font-semibold ml-1 my-3">
-    <strong>MISP Status:</strong>
-    <span class="ml-2">
-      <span :class="{
-        'rounded-lg py-1 px-2 inline-flex': true,
-        'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200': diagnosticLoading,
-        'dark:bg-green-700 bg-green-500 text-slate-800 dark:text-slate-200': !diagnosticLoading && isMISPOnline,
-        'dark:bg-red-700 bg-red-700 text-slate-200 dark:text-slate-200': !diagnosticLoading && !isMISPOnline,
-      }">
-      <Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading>
-      <span v-else class="font-bold">
-        {{ !isMISPOnline ? 'Unreachable' : `Online (${diagnostic['version']['version']})` }}
-      </span>
-    </span>
-  </span>
-  </h4>
-  <h4 class="font-semibold ml-1 my-3">
-    <strong>ZMQ Status:</strong>
-    <span class="ml-2">
-      <span :class="{
-        'rounded-lg py-1 px-2 inline-flex': true,
-        'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200': diagnosticLoading,
-        'dark:bg-green-700 bg-green-500 text-slate-800 dark:text-slate-200': !diagnosticLoading && isZMQActive,
-        'dark:bg-red-700 bg-red-700 text-slate-200 dark:text-slate-200': !diagnosticLoading && !isZMQActive,
-      }">
-      <Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading>
-      <span v-else class="font-bold">
-        {{ !isZMQActive ? 'No message received yet' : `ZMQ Active (${ZMQMessageCount} messages)` }}
-      </span>
-    </span>
-  </span>
-  </h4>
+        <h3 class="text-lg font-semibold mt-4">
+          <FontAwesomeIcon :icon="faSuitcaseMedical" class="mr-1"></FontAwesomeIcon>
+          Diagnostic
+        </h3>
+        <h4 class="font-semibold ml-1 my-3">
+          <strong>MISP Status:</strong>
+          <span class="ml-2">
+            <span
+              :class="{
+                'rounded-lg py-1 px-2 inline-flex': true,
+                'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200':
+                  diagnosticLoading,
+                'dark:bg-green-700 bg-green-500 text-slate-800 dark:text-slate-200':
+                  !diagnosticLoading && isMISPOnline,
+                'dark:bg-red-700 bg-red-700 text-slate-200 dark:text-slate-200':
+                  !diagnosticLoading && !isMISPOnline
+              }"
+            >
+              <Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading>
+              <span v-else class="font-bold">
+                {{ !isMISPOnline ? 'Unreachable' : `Online (${diagnostic['version']['version']})` }}
+              </span>
+            </span>
+          </span>
+        </h4>
+        <h4 class="font-semibold ml-1 my-3">
+          <strong>ZMQ Status:</strong>
+          <span class="ml-2">
+            <span
+              :class="{
+                'rounded-lg py-1 px-2 inline-flex': true,
+                'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200':
+                  diagnosticLoading,
+                'dark:bg-green-700 bg-green-500 text-slate-800 dark:text-slate-200':
+                  !diagnosticLoading && isZMQActive,
+                'dark:bg-red-700 bg-red-700 text-slate-200 dark:text-slate-200':
+                  !diagnosticLoading && !isZMQActive
+              }"
+            >
+              <Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading>
+              <span v-else class="font-bold">
+                {{
+                  !isZMQActive
+                    ? 'No message received yet'
+                    : `ZMQ Active (${ZMQMessageCount} messages)`
+                }}
+              </span>
+            </span>
+          </span>
+        </h4>
 
-  <template  v-if="diagnosticLoading || isMISPOnline">
-    <h4 class="font-semibold ml-1"><strong>MISP Settings:</strong></h4>
-    <div class="ml-3">
-      <div v-if="diagnosticLoading" class="flex justify-center">
-        <Loading class="text-3xl"></Loading>
+        <template v-if="diagnosticLoading || isMISPOnline">
+          <h4 class="font-semibold ml-1"><strong>MISP Settings:</strong></h4>
+          <div class="ml-3">
+            <div v-if="diagnosticLoading" class="flex justify-center">
+              <Loading class="text-3xl"></Loading>
+            </div>
+            <table
+              v-else
+              class="bg-white dark:bg-slate-700 dark:text-slate-100 text-slate-700 rounded-lg shadow-xl w-full mt-2"
+            >
+              <thead>
+                <tr>
+                  <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">
+                    Setting
+                  </th>
+                  <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">
+                    Value
+                  </th>
+                  <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">
+                    Expected Value
+                  </th>
+                  <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-center">
+                    Action
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(settingValues, setting) in diagnostic['settings']" :key="setting">
+                  <td class="font-mono font-semibold text-base px-2">{{ setting }}</td>
+                  <td
+                    :class="`font-mono text-base tracking-tight px-2 ${
+                      settingValues.expected_value != settingValues.value
+                        ? 'text-red-600 dark:text-red-600'
+                        : ''
+                    }`"
+                  >
+                    <i
+                      v-if="settingValues.value === undefined || settingValues.value === null"
+                      class="text-nowrap"
+                      >- none -</i
+                    >
+                    {{ settingValues.value }}
+                  </td>
+                  <td class="font-mono text-base tracking-tight px-2">
+                    {{ settingValues.expected_value }}
+                  </td>
+                  <td class="px-2 text-center">
+                    <span v-if="settingValues.error === true" class="text-red-600 dark:text-red-600"
+                      >Error: {{ settingValues.errorMessage }}</span
+                    >
+                    <button
+                      v-else-if="settingValues.expected_value != settingValues.value"
+                      @click="clickedButtons.push(setting) && settingHandler(setting)"
+                      :disabled="clickedButtons.includes(setting)"
+                      class="h-8 min-h-8 px-2 font-semibold bg-green-600 text-slate-200 hover:bg-green-700 btn gap-1"
+                    >
+                      <template v-if="!clickedButtons.includes(setting)">
+                        <FontAwesomeIcon :icon="faHammer" size="sm" fixed-width></FontAwesomeIcon>
+                        Remediate
+                      </template>
+                      <template v-else>
+                        <Loading class="text-xl"></Loading>
+                      </template>
+                    </button>
+                    <span v-else class="text-base font-bold text-green-600 dark:text-green-600">
+                      <FontAwesomeIcon :icon="faCheck" class=""></FontAwesomeIcon>
+                      OK
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </template>
       </div>
-      <table v-else class="bg-white dark:bg-slate-700 dark:text-slate-100 text-slate-700 rounded-lg shadow-xl w-full mt-2">
-        <thead>
-          <tr>
-            <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">Setting</th>
-            <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">Value</th>
-            <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">Expected Value</th>
-            <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-center">Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-          v-for="(settingValues, setting) in diagnostic['settings']"
-          :key="setting"
-          >
-          <td class="font-mono font-semibold text-base px-2">{{ setting }}</td>
-          <td
-          :class="`font-mono text-base tracking-tight px-2 ${settingValues.expected_value != settingValues.value ? 'text-red-600 dark:text-red-600' : ''}`"
-          >
-          <i v-if="settingValues.value === undefined || settingValues.value === null" class="text-nowrap">- none -</i>
-          {{ settingValues.value }}
-        </td>
-        <td class="font-mono text-base tracking-tight px-2">{{ settingValues.expected_value }}</td>
-        <td class="px-2 text-center">
-          <span v-if="settingValues.error === true"
-          class="text-red-600 dark:text-red-600"
-          >Error: {{ settingValues.errorMessage }}</span>
-          <button
-          v-else-if="settingValues.expected_value != settingValues.value"
-          @click="clickedButtons.push(setting) && settingHandler(setting)"
-          :disabled="clickedButtons.includes(setting)"
-          class="h-8 min-h-8 px-2 font-semibold bg-green-600 text-slate-200 hover:bg-green-700 btn gap-1"
-          >
-          <template v-if="!clickedButtons.includes(setting)">
-            <FontAwesomeIcon :icon="faHammer" size="sm" fixed-width></FontAwesomeIcon>
-            Remediate
-          </template>
-          <template v-else>
-            <Loading class="text-xl"></Loading>
-          </template>
-        </button>
-        <span v-else class="text-base font-bold text-green-600 dark:text-green-600">
-          <FontAwesomeIcon :icon="faCheck" class=""></FontAwesomeIcon>
-          OK
-        </span>
-      </td>
-    </tr>
-  </tbody>
-  </table>
-  </div>
-  </template>
-
-  </div>
-  </template>
+    </template>
   </Modal>
 </template>

src/components/TheLiveLogs.vue

@@ -1,82 +1,113 @@
 <script setup>
-  import { ref, watch, computed } from "vue"
-  import { notifications, userCount, notificationCounter, notificationAPICounter, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faSignal, faCloud, faCog, faUsers, faCircle } from '@fortawesome/free-solid-svg-icons'
-  import TheLiveLogsActivityGraphVue from "./TheLiveLogsActivityGraph.vue";
-  import ToggleSwitch from "@/components/elements/ToggleSwitch.vue"
+import { ref, watch, computed } from 'vue'
+import {
+  notifications,
+  userCount,
+  notificationCounter,
+  notificationAPICounter,
+  toggleVerboseMode,
+  toggleApiQueryMode
+} from '@/socket'
+import { faSignal, faCloud, faCog, faUsers, faCircle } from '@fortawesome/free-solid-svg-icons'
+import TheLiveLogsActivityGraphVue from './TheLiveLogsActivityGraph.vue'
+import ToggleSwitch from '@/components/elements/ToggleSwitch.vue'
 
+const verbose = ref(false)
+const api_query = ref(false)
 
-  const verbose = ref(false)
-  const api_query = ref(false)
+watch(verbose, (newValue) => {
+  toggleVerboseMode(newValue == true)
+})
 
-  watch(verbose, (newValue) => {
-    toggleVerboseMode(newValue == true)
-  })
+watch(api_query, (newValue) => {
+  toggleApiQueryMode(newValue == true)
+})
 
-  watch(api_query, (newValue) => {
-    toggleApiQueryMode(newValue == true)
-  })
-
-  function getClassFromResponseCode(response_code) {
-    if (String(response_code).startsWith('2') || response_code == 302) {
-      return 'text-green-500'
-    } else if (String(response_code).startsWith('5')) {
-      return 'text-red-600'
-    } else {
-      return 'text-amber-600'
-    }
+function getClassFromResponseCode(response_code) {
+  if (String(response_code).startsWith('2') || response_code == 302) {
+    return 'text-green-500'
+  } else if (String(response_code).startsWith('5')) {
+    return 'text-red-600'
+  } else {
+    return 'text-amber-600'
   }
-
+}
 </script>
 
 <template>
-<div>
-  <h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
-    <FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon>
-    Live logs
-  </h3>
+  <div>
+    <h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
+      <FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon>
+      Live logs
+    </h3>
 
-  <div class="mb-2 flex flex-wrap gap-x-3">
-    <span class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200">
-      <span class="mr-1">
-        <FontAwesomeIcon :icon="faUsers" size="sm"></FontAwesomeIcon>
-        Players:
+    <div class="mb-2 flex flex-wrap gap-x-3">
+      <span
+        class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"
+      >
+        <span class="mr-1">
+          <FontAwesomeIcon :icon="faUsers" size="sm"></FontAwesomeIcon>
+          Players:
+        </span>
+        <span class="font-bold">{{ userCount }}</span>
       </span>
-      <span class="font-bold">{{ userCount }}</span>
-    </span>
-    <span class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200">
-      <span class="mr-1">
-        <FontAwesomeIcon :icon="faSignal" size="sm"></FontAwesomeIcon>
-        Total Queries:
+      <span
+        class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"
+      >
+        <span class="mr-1">
+          <FontAwesomeIcon :icon="faSignal" size="sm"></FontAwesomeIcon>
+          Total Queries:
+        </span>
+        <span class="font-bold">{{ notificationCounter }}</span>
       </span>
-      <span class="font-bold">{{ notificationCounter }}</span>
-    </span>
-    <span class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200">
-      <span class="mr-1">
-        <FontAwesomeIcon :icon="faCog" size="sm" :mask="faCloud" transform="shrink-7 left-1"></FontAwesomeIcon>
-        Total API Queries:
+      <span
+        class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"
+      >
+        <span class="mr-1">
+          <FontAwesomeIcon
+            :icon="faCog"
+            size="sm"
+            :mask="faCloud"
+            transform="shrink-7 left-1"
+          ></FontAwesomeIcon>
+          Total API Queries:
+        </span>
+        <span class="font-bold">{{ notificationAPICounter }}</span>
       </span>
-      <span class="font-bold">{{ notificationAPICounter }}</span>
-    </span>
-    <span class="flex items-center">
-      <label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300">
-        <input type="checkbox" class="toggle toggle-warning mr-1" :checked="verbose" @change="verbose = !verbose"/>
-        Verbose
-      </label>
-    </span>
-    <span class="flex items-center">
-      <label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300">
-        <input type="checkbox" class="toggle toggle-success mr-1" :checked="api_query" @change="api_query = !api_query"/>
-        <FontAwesomeIcon :icon="faCog" size="sm" :mask="faCloud" transform="shrink-7 left-1" class="mr-1"></FontAwesomeIcon>
-        API Queries
-      </label>
-    </span>
-  </div>
+      <span class="flex items-center">
+        <label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300">
+          <input
+            type="checkbox"
+            class="toggle toggle-warning mr-1"
+            :checked="verbose"
+            @change="verbose = !verbose"
+          />
+          Verbose
+        </label>
+      </span>
+      <span class="flex items-center">
+        <label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300">
+          <input
+            type="checkbox"
+            class="toggle toggle-success mr-1"
+            :checked="api_query"
+            @change="api_query = !api_query"
+          />
+          <FontAwesomeIcon
+            :icon="faCog"
+            size="sm"
+            :mask="faCloud"
+            transform="shrink-7 left-1"
+            class="mr-1"
+          ></FontAwesomeIcon>
+          API Queries
+        </label>
+      </span>
+    </div>
 
-  <TheLiveLogsActivityGraphVue></TheLiveLogsActivityGraphVue>
+    <TheLiveLogsActivityGraphVue></TheLiveLogsActivityGraphVue>
 
-  <table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full">
+    <table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full">
       <thead>
         <tr class="font-medium dark:text-slate-200 text-slate-600">
           <th class="border-b border-slate-100 dark:border-slate-700 p-3 pl-6 text-left"></th>
@@ -100,7 +131,9 @@
             <td
               class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-1 pl-2 w-12 whitespace-nowrap"
             >
-              <FontAwesomeIcon :icon="faCircle" size="xs"
+              <FontAwesomeIcon
+                :icon="faCircle"
+                size="xs"
                 :class="getClassFromResponseCode(notification.response_code)"
               ></FontAwesomeIcon>
               <pre class="inline ml-1">{{ notification.response_code }}</pre>
@@ -112,45 +145,58 @@
               <span class="text-lg font-bold font-mono">{{ notification.user.split('@')[0] }}</span>
               <span class="text-xs font-mono">@{{ notification.user.split('@')[1] }}</span>
             </td>
-            <td class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-1">{{ notification.time }}</td>
-            <td class="border-b border-slate-100 dark:border-slate-700 text-sky-600 dark:text-sky-400 p-1">
+            <td
+              class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-1"
+            >
+              {{ notification.time }}
+            </td>
+            <td
+              class="border-b border-slate-100 dark:border-slate-700 text-sky-600 dark:text-sky-400 p-1"
+            >
               <div class="flex items-center">
-                <span v-if="notification.http_method == 'POST'"
-                  class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center 
-                         dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100"
-                >POST</span>
-                <span v-else-if="notification.http_method == 'PUT'"
-                  class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center 
-                         dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100"
-                >PUT</span>
-                <span v-else-if="notification.http_method == 'DELETE'"
-                  class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center 
-                         dark:bg-red-600 dark:text-neutral-100 bg-red-600 text-neutral-100"
-                >DEL</span>
-                <span v-else
-                  class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center 
-                         dark:bg-blue-600 dark:text-neutral-100 bg-blue-600 text-neutral-100"
-                >{{ notification.http_method }}</span>
+                <span
+                  v-if="notification.http_method == 'POST'"
+                  class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100"
+                  >POST</span
+                >
+                <span
+                  v-else-if="notification.http_method == 'PUT'"
+                  class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100"
+                  >PUT</span
+                >
+                <span
+                  v-else-if="notification.http_method == 'DELETE'"
+                  class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center dark:bg-red-600 dark:text-neutral-100 bg-red-600 text-neutral-100"
+                  >DEL</span
+                >
+                <span
+                  v-else
+                  class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center dark:bg-blue-600 dark:text-neutral-100 bg-blue-600 text-neutral-100"
+                  >{{ notification.http_method }}</span
+                >
                 <FontAwesomeIcon
                   v-if="notification.is_api_request"
                   class="text-slate-800 dark:text-slate-100 mr-1 inline-block"
-                  :icon="faCog" :mask="faCloud" transform="shrink-7 left-1"
+                  :icon="faCog"
+                  :mask="faCloud"
+                  transform="shrink-7 left-1"
                 ></FontAwesomeIcon>
                 <pre class="text-sm inline">{{ notification.url }}</pre>
               </div>
             </td>
-            <td class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-300 p-1">
-              <div v-if="notification.http_method == 'POST'"
+            <td
+              class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-300 p-1"
+            >
+              <div
+                v-if="notification.http_method == 'POST'"
                 class="border border-slate-200 dark:border-slate-600 bg-slate-100 dark:bg-slate-600 rounded-md"
               >
-                <pre
-                  class="p-1 text-xs"
-                >{{ JSON.stringify(notification.payload, null, 2) }}</pre>
+                <pre class="p-1 text-xs">{{ JSON.stringify(notification.payload, null, 2) }}</pre>
               </div>
             </td>
           </tr>
         </template>
       </tbody>
     </table>
-</div>
-</template>
+  </div>
+</template>

src/components/TheLiveLogsActivityGraph.vue

@@ -1,84 +1,92 @@
 <script setup>
-  import { ref, watch, computed } from "vue"
-  import { notificationHistory, notificationHistoryConfig } from "@/socket";
-  import { darkModeEnabled } from "@/settings.js"
+import { ref, watch, computed } from 'vue'
+import { notificationHistory, notificationHistoryConfig } from '@/socket'
+import { darkModeEnabled } from '@/settings.js'
 
-  const theChart = ref(null)
-  const chartInitSeries = [
-    {data: Array.from(Array(12*20)).map(()=> 0)}
-  ]
-  const hasActivity = computed(() => notificationHistory.value.length > 0)
-  const chartSeries = computed(() => {
-    return notificationHistory.value ? notificationHistorySeries.value : chartInitSeries.value
-  })
+const theChart = ref(null)
+const chartInitSeries = [{ data: Array.from(Array(12 * 20)).map(() => 0) }]
+const hasActivity = computed(() => notificationHistory.value.length > 0)
+const chartSeries = computed(() => {
+  return notificationHistory.value ? notificationHistorySeries.value : chartInitSeries.value
+})
 
-  const notificationHistorySeries = computed(() => {
-    return [{data: Array.from(notificationHistory.value)}]
-  })
+const notificationHistorySeries = computed(() => {
+  return [{ data: Array.from(notificationHistory.value) }]
+})
 
-  const chartOptions = computed(() => {
-    return {
-      chart: {
-        type: 'bar',
-        width: '100%',
-        height: 32,
-        sparkline: {
-          enabled: true
-        },
-        dropShadow: {
-            enabled: true,
-            enabledOnSeries: undefined,
-            top: 2,
-            left: 1,
-            blur: 2,
-            color: '#000',
-            opacity: darkModeEnabled.value ? 0.35 : 0.15
-        },
-        animations: {
-            enabled: false,
-            easing: 'easeinout',
-            speed: 200,
-        },
+const chartOptions = computed(() => {
+  return {
+    chart: {
+      type: 'bar',
+      width: '100%',
+      height: 32,
+      sparkline: {
+        enabled: true
       },
-      colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
-      plotOptions: {
-        bar: {
-          columnWidth: '80%'
-        }
+      dropShadow: {
+        enabled: true,
+        enabledOnSeries: undefined,
+        top: 2,
+        left: 1,
+        blur: 2,
+        color: '#000',
+        opacity: darkModeEnabled.value ? 0.35 : 0.15
       },
-      yaxis: {
-        min: 0,
-        max: 20,
-        labels: {
-          show: false,
-        }
-      },
-      tooltip: {
+      animations: {
         enabled: false,
-      },
+        easing: 'easeinout',
+        speed: 200
+      }
+    },
+    colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
+    plotOptions: {
+      bar: {
+        columnWidth: '80%'
+      }
+    },
+    yaxis: {
+      min: 0,
+      max: 20,
+      labels: {
+        show: false
+      }
+    },
+    tooltip: {
+      enabled: false
     }
-  })
-
+  }
+})
 </script>
 
 <template>
-  <div class="my-2 --ml-1 bg-slate-50 dark:bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col">
+  <div
+    class="my-2 --ml-1 bg-slate-50 dark:bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col"
+  >
     <div :class="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-30`">
-      <div class="text-2xs flex justify-between h-full items-center text-slate-500 dark:text-slate-300 select-none">
-        <span class="-rotate-90 w-8 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span>
+      <div
+        class="text-2xs flex justify-between h-full items-center text-slate-500 dark:text-slate-300 select-none"
+      >
+        <span class="-rotate-90 w-8 -ml-3"
+          >- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span
+        >
         <span class="-rotate-90 w-8 text-xs">–</span>
         <span class="-rotate-90 w-8 text-lg">–</span>
         <span class="-rotate-90 w-8 text-xs">–</span>
         <span class="-rotate-90 w-8 -mr-1.5">- 0min</span>
       </div>
     </div>
-    <i :class="['text-center text-slate-600 dark:text-slate-400', hasActivity ? 'hidden' : 'block']">
+    <i
+      :class="['text-center text-slate-600 dark:text-slate-400', hasActivity ? 'hidden' : 'block']"
+    >
       - No recorded activity -
     </i>
     <apexchart
-        ref="theChart" :class="hasActivity ? 'block' : 'absolute h-8 w-full'" height="32" width="100%"
-        :options="chartOptions"
-        :series="chartSeries"
+      ref="theChart"
+      :class="hasActivity ? 'block' : 'absolute h-8 w-full'"
+      height="32"
+      width="100%"
+      :options="chartOptions"
+      :series="chartSeries"
     ></apexchart>
   </div>
-</template>
+</template>

src/components/ThePlayerGrid.vue

@@ -1,58 +1,60 @@
 <script setup>
-  import { ref, computed } from "vue";
-  import { progresses, userCount } from "@/socket";
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faUsers } from '@fortawesome/free-solid-svg-icons'
-  import { darkModeEnabled } from "@/settings.js"
-  import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
+import { ref, computed } from 'vue'
+import { progresses, userCount } from '@/socket'
+import { faUsers } from '@fortawesome/free-solid-svg-icons'
+import { darkModeEnabled } from '@/settings.js'
+import LiveLogsUserActivityGraph from './LiveLogsUserActivityGraph.vue'
 
-
-  const compactGrid = computed(() => { return userCount.value > 70 })
-  const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
+const compactGrid = computed(() => {
+  return userCount.value > 70
+})
+const sortedProgress = computed(() =>
+  Object.values(progresses.value).sort((a, b) => {
     if (a.email < b.email) {
-      return -1;
+      return -1
     }
     if (a.email > b.email) {
-      return 1;
+      return 1
     }
-    return 0;
-  }))
+    return 0
+  })
+)
 </script>
 
 <template>
-<div class="
-  mt-2 px-2 pt-1 pb-2 rounded border
-  bg-slate-100 border-slate-300 dark:bg-slate-600 dark:border-slate-800
-">
+  <div
+    class="mt-2 px-2 pt-1 pb-2 rounded border bg-slate-100 border-slate-300 dark:bg-slate-600 dark:border-slate-800"
+  >
+    <h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
+      <FontAwesomeIcon :icon="faUsers"></FontAwesomeIcon>
+      Active Players
+    </h4>
 
-  <h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
-    <FontAwesomeIcon :icon="faUsers"></FontAwesomeIcon>
-    Active Players
-  </h4>
-
-  <div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
-    <span
-      v-for="(progress) in sortedProgress"
-      :key="progress.user_id"
-      class="bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg border-slate-700"
-    >
-      <span class="
-        flex p-2 mb-1
-        text-slate-600 dark:text-slate-400
-      ">
-        <span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'}`">
-          <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate">
-            <span :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`">{{ progress.email.split('@')[0] }}</span>
-            <span :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`">@{{ progress.email.split('@')[1] }}</span>
+    <div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
+      <span
+        v-for="progress in sortedProgress"
+        :key="progress.user_id"
+        class="bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg border-slate-700"
+      >
+        <span class="flex p-2 mb-1 text-slate-600 dark:text-slate-400">
+          <span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'}`">
+            <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate">
+              <span
+                :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`"
+                >{{ progress.email.split('@')[0] }}</span
+              >
+              <span :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`"
+                >@{{ progress.email.split('@')[1] }}</span
+              >
+            </span>
+            <LiveLogsUserActivityGraph
+              :user_id="progress.user_id"
+              :compact_view="compactGrid"
+              :ultra_compact_view="false"
+            ></LiveLogsUserActivityGraph>
           </span>
-          <LiveLogsUserActivityGraph
-            :user_id="progress.user_id"
-            :compact_view="compactGrid"
-            :ultra_compact_view="false"
-          ></LiveLogsUserActivityGraph>
         </span>
       </span>
-    </span>
+    </div>
   </div>
-</div>
-</template>
+</template>

src/components/TheScores.vue

@@ -1,25 +1,29 @@
 <script setup>
-  import { ref, computed } from "vue";
-  import { active_exercises as exercises } from "@/socket";
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter, faWarning } from '@fortawesome/free-solid-svg-icons'
-  import TheScoreTable from "./scoreViews/TheScoreTable.vue"
-  import TheFullScreenScoreGrid from "./scoreViews/TheFullScreenScoreGrid.vue"
-  import ThePlayerGrid from "./ThePlayerGrid.vue"
-  import { fullscreenModeOn } from "@/settings.js"
+import { ref, computed } from 'vue'
+import { active_exercises as exercises } from '@/socket'
+import {
+  faGraduationCap,
+  faUpRightAndDownLeftFromCenter,
+  faDownLeftAndUpRightToCenter,
+  faWarning
+} from '@fortawesome/free-solid-svg-icons'
+import TheScoreTable from './scoreViews/TheScoreTable.vue'
+import TheFullScreenScoreGrid from './scoreViews/TheFullScreenScoreGrid.vue'
+import ThePlayerGrid from './ThePlayerGrid.vue'
+import { fullscreenModeOn } from '@/settings.js'
 
-  const hasExercises = computed(() => exercises.value.length > 0)
-  const fullscreen_panel = ref(false)
+const hasExercises = computed(() => exercises.value.length > 0)
+const fullscreen_panel = ref(false)
 
-  function toggleFullScreen(exercise_index) {
-    if (fullscreen_panel.value === exercise_index) {
-      fullscreen_panel.value = false
-      fullscreenModeOn.value = false
-    } else {
-      fullscreen_panel.value = exercise_index
-      fullscreenModeOn.value = true
-    }
+function toggleFullScreen(exercise_index) {
+  if (fullscreen_panel.value === exercise_index) {
+    fullscreen_panel.value = false
+    fullscreenModeOn.value = false
+  } else {
+    fullscreen_panel.value = exercise_index
+    fullscreenModeOn.value = true
   }
+}
 </script>
 
 <template>
@@ -28,10 +32,7 @@
     Active Exercises
   </h3>
 
-  <div
-    v-if="!hasExercises"
-    class="text-slate-600 dark:text-slate-400 p-3 pl-6"
-  >
+  <div v-if="!hasExercises" class="text-slate-600 dark:text-slate-400 p-3 pl-6">
     <Alert variant="warning">
       <strong class="">No Exercise available.</strong>
       <span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span>
@@ -40,14 +41,14 @@
     <ThePlayerGrid></ThePlayerGrid>
   </div>
 
-  <template
-    v-for="(exercise, exercise_index) in exercises"
-    :key="exercise.name"
-  >
+  <template v-for="(exercise, exercise_index) in exercises" :key="exercise.name">
     <div :class="fullscreen_panel === false ? 'relative min-w-fit' : ''">
       <span
         v-show="fullscreen_panel === false || fullscreen_panel === exercise_index"
-        :class="['inline-block absolute shadow-lg z-50', fullscreen_panel === false ? 'top-0 -right-7' : 'top-2 right-2']"
+        :class="[
+          'inline-block absolute shadow-lg z-50',
+          fullscreen_panel === false ? 'top-0 -right-7' : 'top-2 right-2'
+        ]"
       >
         <button
           @click="toggleFullScreen(exercise_index)"
@@ -58,7 +59,14 @@
             ${fullscreen_panel === false ? 'rounded-r-md' : 'rounded-bl-md'}
           `"
         >
-          <FontAwesomeIcon :icon="fullscreen_panel !== exercise_index ? faUpRightAndDownLeftFromCenter : faDownLeftAndUpRightToCenter" fixed-width></FontAwesomeIcon>
+          <FontAwesomeIcon
+            :icon="
+              fullscreen_panel !== exercise_index
+                ? faUpRightAndDownLeftFromCenter
+                : faDownLeftAndUpRightToCenter
+            "
+            fixed-width
+          ></FontAwesomeIcon>
         </button>
       </span>
       <KeepAlive>

src/components/TheSocketConnectionState.vue

@@ -1,46 +1,42 @@
 <script setup>
-  import { ref, onMounted } from "vue"
-  import { socketConnected, zmqLastTime } from "@/socket";
+import { ref, onMounted } from 'vue'
+import { socketConnected, zmqLastTime } from '@/socket'
 
-  const zmqLastTimeSecond = ref('?')
+const zmqLastTimeSecond = ref('?')
 
-  function refreshLastTime() {
-    if (zmqLastTime.value !== false) {
-      zmqLastTimeSecond.value = parseInt(((new Date()).getTime() - zmqLastTime.value * 1000) / 1000)
-    } else {
-      zmqLastTimeSecond.value = '?'
-    }
+function refreshLastTime() {
+  if (zmqLastTime.value !== false) {
+    zmqLastTimeSecond.value = parseInt((new Date().getTime() - zmqLastTime.value * 1000) / 1000)
+  } else {
+    zmqLastTimeSecond.value = '?'
   }
+}
 
-  onMounted(() => {
-    setInterval(() => {
-      refreshLastTime()
-    }, 1000)
-  })
-
+onMounted(() => {
+  setInterval(() => {
+    refreshLastTime()
+  }, 1000)
+})
 </script>
 
 <template>
   <span class="flex flex-col justify-center mt-1">
-    <span :class="{
-      'px-2 rounded-md inline-block w-48 leading-4': true,
-      'text-slate-900 dark:text-slate-400': socketConnected,
-      'text-slate-50 bg-red-600 px-2 py-1': !socketConnected,
-    }">
+    <span
+      :class="{
+        'px-2 rounded-md inline-block w-48 leading-4': true,
+        'text-slate-900 dark:text-slate-400': socketConnected,
+        'text-slate-50 bg-red-600 px-2 py-1': !socketConnected
+      }"
+    >
       <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-green-600 dark:text-green-400"
+        >Connected</span
+      >
       <span v-show="!socketConnected" class="font-semibold text-slate-50">Disconnected</span>
     </span>
-    <span
-      v-if="socketConnected"
-      class="text-xs font-thin leading-3 inline-block text-center"
-    >
-      <template v-if="zmqLastTimeSecond == 0">
-        online
-      </template>
-      <template v-else>
-        Last keep-alive: {{ zmqLastTimeSecond }}s ago
-      </template>
+    <span v-if="socketConnected" class="text-xs font-thin leading-3 inline-block text-center">
+      <template v-if="zmqLastTimeSecond == 0"> online </template>
+      <template v-else> Last keep-alive: {{ zmqLastTimeSecond }}s ago </template>
     </span>
   </span>
-</template>
+</template>

src/components/TheThemeButton.vue

@@ -1,19 +1,18 @@
 <script setup>
-  import { ref, watch } from 'vue'
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
-  import { darkModeOn } from "@/settings.js"
+import { ref, watch } from 'vue'
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+import { darkModeOn } from '@/settings.js'
 
-  const darkMode = ref(darkModeOn.value)
+const darkMode = ref(darkModeOn.value)
 
-  watch(darkMode, (newValue) => {
-    darkModeOn.value = newValue
-    if (newValue) {
-      document.getElementsByTagName('body')[0].classList.add('dark')
-    } else {
-      document.getElementsByTagName('body')[0].classList.remove('dark')
-    }
-  })
+watch(darkMode, (newValue) => {
+  darkModeOn.value = newValue
+  if (newValue) {
+    document.getElementsByTagName('body')[0].classList.add('dark')
+  } else {
+    document.getElementsByTagName('body')[0].classList.remove('dark')
+  }
+})
 </script>
 
 <template>
@@ -23,7 +22,8 @@
         type="checkbox"
         @click="darkMode = !darkMode"
         :checked="darkMode"
-        class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]" />
+        class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]"
+      />
       <svg
         class="stroke-slate-800 dark:stroke-slate-100 fill-slate-800 dark:fill-slate-100 col-start-1 row-start-1"
         xmlns="http://www.w3.org/2000/svg"
@@ -34,10 +34,12 @@
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+      >
         <circle cx="12" cy="12" r="5" />
         <path
-          d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+          d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
+        />
       </svg>
       <svg
         class="dark:stroke-slate-800 stroke-slate-700 dark:fill-slate-800 fill-slate-700 col-start-2 row-start-1"
@@ -49,7 +51,8 @@
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+      >
         <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
       </svg>
     </label>
@@ -77,7 +80,7 @@
     @apply bg-current;
   }
   &:checked,
-  &[aria-checked="true"] {
+  &[aria-checked='true'] {
     background-image: none;
     --handleoffsetcalculator: var(--handleoffset);
   }
@@ -89,7 +92,7 @@
   }
   &:disabled {
     @apply cursor-not-allowed bg-transparent opacity-30;
-    --togglehandleborder: 0 0 0 3px #000 inset,
-      var(--handleoffsetcalculator) 0 0 3px #000 inset;
+    --togglehandleborder: 0 0 0 3px #000 inset, var(--handleoffsetcalculator) 0 0 3px #000 inset;
   }
-}</style>
+}
+</style>

src/components/elements/Alert.vue

@@ -45,8 +45,8 @@ const messages = computed(() => {
   return Array.isArray(props.message)
     ? props.message
     : props.message !== undefined
-    ? [props.message]
-    : []
+      ? [props.message]
+      : []
 })
 </script>
 
@@ -60,4 +60,4 @@ const messages = computed(() => {
     ></FontAwesomeIcon>
     <slot></slot>
   </div>
-</template>
+</template>

src/components/elements/Loading.vue

@@ -1,7 +1,7 @@
 <script setup>
-  import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 </script>
 
 <template>
-    <FontAwesomeIcon :icon="faSpinner" class="fa-spin" fixed-width></FontAwesomeIcon>
-</template>
+  <FontAwesomeIcon :icon="faSpinner" class="fa-spin" fixed-width></FontAwesomeIcon>
+</template>

src/components/elements/Modal.vue

@@ -1,23 +1,23 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch } from 'vue'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
 const props = defineProps({
-    showModal: Boolean,
-});
+  showModal: Boolean
+})
 
 const dialog = ref(null)
 
-const emit = defineEmits(["modal-close"]);
+const emit = defineEmits(['modal-close'])
 
 function closeModal() {
-    emit('modal-close')
+  emit('modal-close')
 }
 </script>
 
 <template>
-    <Teleport to="body">
-        <div>
+  <Teleport to="body">
+    <div>
       <Transition>
         <div
           v-if="props.showModal"
@@ -34,11 +34,12 @@ function closeModal() {
               <slot name="header"></slot>
             </h2>
             <span class="ml-auto text-xl">
-                <button @click.stop="closeModal()"
-                    class="hover:text-slate-200 hover:dark:text-slate-50 hover:bg-slate-200/20 rounded-full p-1"
-                >
-                    <FontAwesomeIcon :icon="faTimes" class="fa-fw"></FontAwesomeIcon>
-                </button>
+              <button
+                @click.stop="closeModal()"
+                class="hover:text-slate-200 hover:dark:text-slate-50 hover:bg-slate-200/20 rounded-full p-1"
+              >
+                <FontAwesomeIcon :icon="faTimes" class="fa-fw"></FontAwesomeIcon>
+              </button>
             </span>
           </div>
           <div class="px-4 py-3 bg-slate-100">
@@ -46,15 +47,15 @@ function closeModal() {
           </div>
           <div class="px-4 py-3 bg-slate-100 rounded-b-lg">
             <slot name="footer">
-                <div class="flex flex-row-reverse">
-                  <button class="btn btn-primary btn-lg" @click.stop="closeModal()">Ok</button>
-                </div>
+              <div class="flex flex-row-reverse">
+                <button class="btn btn-primary btn-lg" @click.stop="closeModal()">Ok</button>
+              </div>
             </slot>
           </div>
         </div>
       </Transition>
     </div>
-    </Teleport>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -69,4 +70,4 @@ function closeModal() {
   @apply scale-90;
   @apply opacity-0;
 }
-</style>
+</style>

src/components/elements/Toast.vue

@@ -82,7 +82,10 @@ onMounted(() => {
         ></FontAwesomeIcon>
       </button>
     </div>
-    <div class="text-slate-600 p-1 font-light" v-if="props.message !== undefined && props.message.length > 0">
+    <div
+      class="text-slate-600 p-1 font-light"
+      v-if="props.message !== undefined && props.message.length > 0"
+    >
       {{ props.message }}
     </div>
     <div v-if="props.confirm" class="flex gap-1">
@@ -94,4 +97,4 @@ onMounted(() => {
       </button>
     </div>
   </div>
-</template>
+</template>

src/components/elements/Toaster.vue

@@ -44,4 +44,4 @@ function remove(toast_id) {
   opacity: 0;
   transform: translateX(10px);
 }
-</style>
+</style>

src/components/elements/ToggleSwitch.vue

@@ -1,12 +1,12 @@
-<script setup>
-</script>
+<script setup></script>
 
 <template>
-     <label class="grid cursor-pointer place-items-center">
-      <input
-        type="checkbox"
-        class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]" />
-    </label>
+  <label class="grid cursor-pointer place-items-center">
+    <input
+      type="checkbox"
+      class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]"
+    />
+  </label>
 </template>
 
 <style scoped>
@@ -30,7 +30,7 @@
     @apply bg-current;
   }
   &:checked,
-  &[aria-checked="true"] {
+  &[aria-checked='true'] {
     background-image: none;
     --handleoffsetcalculator: var(--handleoffset);
   }
@@ -42,12 +42,10 @@
   }
   &:disabled {
     @apply cursor-not-allowed bg-transparent opacity-30;
-    --togglehandleborder: 0 0 0 3px #000 inset,
-      var(--handleoffsetcalculator) 0 0 3px #000 inset;
+    --togglehandleborder: 0 0 0 3px #000 inset, var(--handleoffsetcalculator) 0 0 3px #000 inset;
   }
 
   &-success {
-    
   }
 }
 
@@ -55,4 +53,4 @@
 .toggle-mark {
   @apply hidden;
 }
-</style>
+</style>

src/components/scoreViews/TheFullScreenScoreGrid.vue

@@ -1,251 +1,291 @@
 <script setup>
-  import { ref, computed } from "vue";
-  import { active_exercises as exercises, progresses, userCount, setCompletedState } from "@/socket";
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
-  import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
-  import { darkModeEnabled } from "@/settings.js"
-  import LiveLogsUserActivityGraph from "../LiveLogsUserActivityGraph.vue"
+import { ref, computed } from 'vue'
+import { active_exercises as exercises, progresses, userCount, setCompletedState } from '@/socket'
+import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
+import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
+import { darkModeEnabled } from '@/settings.js'
+import LiveLogsUserActivityGraph from '../LiveLogsUserActivityGraph.vue'
 
-  const props = defineProps(['exercise', 'exercise_index'])
-  const collapsed_panels = ref([])
+const props = defineProps(['exercise', 'exercise_index'])
+const collapsed_panels = ref([])
 
-  const chartOptions = computed(() => {
-    return {
-      chart: {
-        type: 'radialBar',
-        height: 120,
-        sparkline: {
-          enabled: true
-        },
-        animations: {
-            enabled: false,
-            easing: 'easeinout',
-            speed: 200,
-        },
+const chartOptions = computed(() => {
+  return {
+    chart: {
+      type: 'radialBar',
+      height: 120,
+      sparkline: {
+        enabled: true
       },
-      colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
-      plotOptions: {
-        radialBar: {
-          startAngle: -110,
-          endAngle: 110,
-          hollow: {
-            margin: 0,
-            size: '30%',
-            background: '#64748b',
-            position: 'front',
-            dropShadow: {
-              enabled: true,
-              top: 3,
-              left: 0,
-              blur: 4,
-              opacity: 0.24
-            }
+      animations: {
+        enabled: false,
+        easing: 'easeinout',
+        speed: 200
+      }
+    },
+    colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
+    plotOptions: {
+      radialBar: {
+        startAngle: -110,
+        endAngle: 110,
+        hollow: {
+          margin: 0,
+          size: '30%',
+          background: '#64748b',
+          position: 'front',
+          dropShadow: {
+            enabled: true,
+            top: 3,
+            left: 0,
+            blur: 4,
+            opacity: 0.24
+          }
+        },
+        track: {
+          background: '#475569',
+          strokeWidth: '97%',
+          margin: 0,
+          dropShadow: {
+            enabled: true,
+            top: 3,
+            left: 0,
+            blur: 3,
+            opacity: 0.35
+          }
+        },
+        dataLabels: {
+          show: true,
+          name: {
+            show: false
           },
-          track: {
-              background: '#475569',
-              strokeWidth: '97%',
-              margin: 0,
-              dropShadow: {
-                enabled: true,
-                top: 3,
-                left: 0,
-                blur: 3,
-                opacity: 0.35
-              }
+          value: {
+            formatter: function (val) {
+              return parseInt((val * userCount.value) / 100)
             },
-          dataLabels: {
-            show: true,
-            name: {
-              show: false,
-            },
-            value: {
-              formatter: function(val) {
-                return parseInt(val*userCount.value / 100);
-              },
-              offsetY: 7,
-              color: darkModeEnabled.value ? '#cbd5e1' : '#f1f5f9',
-              fontSize: '1.25rem',
-              show: true,
-            }
+            offsetY: 7,
+            color: darkModeEnabled.value ? '#cbd5e1' : '#f1f5f9',
+            fontSize: '1.25rem',
+            show: true
           }
         }
-      },
-      stroke: {
-        lineCap: 'smooth'
-      },
-      colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
-      labels: ['Progress'],
-      tooltip: {
-        enabled: false,
-      },
-    }
-  })
-
-  function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
-    setCompletedState(completed, user_id, exec_uuid, task_uuid)
-  }
-
-  function collapse(exercise_index) {
-    const index = collapsed_panels.value.indexOf(exercise_index)
-    if (index >= 0) {
-      collapsed_panels.value.splice(index, 1)
-    } else {
-      collapsed_panels.value.push(exercise_index)
+      }
+    },
+    stroke: {
+      lineCap: 'smooth'
+    },
+    colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
+    labels: ['Progress'],
+    tooltip: {
+      enabled: false
     }
   }
+})
 
-  const compactGrid = computed(() => { return userCount.value > 70 })
-  const ultraCompactGrid = computed(() => { return userCount.value > 100 })
-  const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
-  const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
+function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
+  setCompletedState(completed, user_id, exec_uuid, task_uuid)
+}
+
+function collapse(exercise_index) {
+  const index = collapsed_panels.value.indexOf(exercise_index)
+  if (index >= 0) {
+    collapsed_panels.value.splice(index, 1)
+  } else {
+    collapsed_panels.value.push(exercise_index)
+  }
+}
+
+const compactGrid = computed(() => {
+  return userCount.value > 70
+})
+const ultraCompactGrid = computed(() => {
+  return userCount.value > 100
+})
+const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
+const sortedProgress = computed(() =>
+  Object.values(progresses.value).sort((a, b) => {
     if (a.email < b.email) {
-      return -1;
+      return -1
     }
     if (a.email > b.email) {
-      return 1;
+      return 1
     }
-    return 0;
-  }))
+    return 0
+  })
+)
 
-  const taskCompletionPercentages = computed(() => {
-    const completions = {}
-    Object.values(props.exercise.tasks).forEach(task => {
-      completions[task.uuid] = 0
-    })
-
-    sortedProgress.value.forEach(progress => {
-      for (const [taskUuid, taskCompletion] of Object.entries(progress.exercises[props.exercise.uuid].tasks_completion)) {
-        if (taskCompletion !== false) {
-          completions[taskUuid] += 1
-        }
-      }
-    });
-  
-    for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
-      completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
-    }
-    return completions
+const taskCompletionPercentages = computed(() => {
+  const completions = {}
+  Object.values(props.exercise.tasks).forEach((task) => {
+    completions[task.uuid] = 0
   })
 
+  sortedProgress.value.forEach((progress) => {
+    for (const [taskUuid, taskCompletion] of Object.entries(
+      progress.exercises[props.exercise.uuid].tasks_completion
+    )) {
+      if (taskCompletion !== false) {
+        completions[taskUuid] += 1
+      }
+    }
+  })
+
+  for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
+    completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
+  }
+  return completions
+})
 </script>
 
 <template>
-    <div class="
-      fixed inset-2 z-40 h-100 overflow-x-hidden
-      rounded-lg bg-slate-300 dark:bg-slate-800 border border-slate-400 dark:border-slate-800
-    ">
-
-      <div
-        class="
-          rounded-t-lg text-md p-3 pl-6 text-center
-          dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100
-        "
-      >
-        <!-- Modal header -->
-        <div class="flex justify-between items-center">
-          <span class="text-lg font-semibold">{{ exercise.name }}</span>
-          <span class="mr-8">
-            Level: <span :class="{
+  <div
+    class="fixed inset-2 z-40 h-100 overflow-x-hidden rounded-lg bg-slate-300 dark:bg-slate-800 border border-slate-400 dark:border-slate-800"
+  >
+    <div
+      class="rounded-t-lg text-md p-3 pl-6 text-center dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100"
+    >
+      <!-- Modal header -->
+      <div class="flex justify-between items-center">
+        <span class="text-lg font-semibold">{{ exercise.name }}</span>
+        <span class="mr-8">
+          Level:
+          <span
+            :class="{
               'rounded-lg px-1 ml-2': true,
               'dark:bg-sky-400 bg-sky-400 text-neutral-950': exercise.level == 'beginner',
               'dark:bg-orange-400 bg-orange-400 text-neutral-950': exercise.level == 'advanced',
-              'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert',
-            }">{{ exercise.level }}</span>
-          </span>
-        </div>
-      </div>
-
-      <!-- Tasks name and pie charts -->
-      <div class="p-2">
-        <div class="flex justify-between mb-3">
-          <span
-            v-for="(task, task_index) in exercise.tasks"
-            :key="task.name"
-            class="p-1 inline-block"
-            :title="task.description"
+              'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert'
+            }"
+            >{{ exercise.level }}</span
           >
-            <span class="flex flex-col">
-              <span class="text-center font-normal text-sm dark:text-blue-200 text-slate-800 text-nowrap">Task {{ task_index + 1 }}</span>
-              <i class="text-center leading-4 text-slate-600 dark:text-slate-400">{{ task.name }}</i>
-              <span class="inline-block h-18 -mt-4 mx-auto">
-                <apexchart
-                    ref="theChart" class="" height="120" width="100"
-                    :options="chartOptions"
-                    :series="[taskCompletionPercentages[task.uuid]]"
-                ></apexchart>
-              </span>
-            </span>
-          </span>
-        </div>
-
-        <!-- User grid -->
-        <div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
-          <span
-            v-for="(progress) in sortedProgress"
-            :key="progress.user_id"
-            :class="[
-              'bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg',
-              progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1 ? 'border-green-700' : 'border-slate-700',
-            ]"
-          >
-            <span class="
-              flex p-2 mb-1
-              text-slate-600 dark:text-slate-400
-            ">
-              <span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'} ${compactGrid ? '' : 'mb-1'}`">
-                <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate mb-1">
-                  <FontAwesomeIcon
-                    v-if="progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1"
-                    :icon="faMedal" class="mr-1 text-amber-300"
-                  ></FontAwesomeIcon>
-                  <span :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`">{{ progress.email.split('@')[0] }}</span>
-                  <span :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`">@{{ progress.email.split('@')[1] }}</span>
-                </span>
-                <LiveLogsUserActivityGraph
-                  :user_id="progress.user_id"
-                  :compact_view="compactGrid"
-                  :ultra_compact_view="ultraCompactGrid"
-                ></LiveLogsUserActivityGraph>
-              </span>
-            </span>
-
-            <span class="
-              flex flex-row justify-between px-2
-              text-slate-500 dark:text-slate-400
-            ">
-              <span
-                v-for="(task, task_index) in exercise.tasks"
-                :key="task_index"
-                class="select-none cursor-pointer"
-                @click="toggleCompleted(progress.exercises[exercise.uuid].tasks_completion[task.uuid], progress.user_id, exercise.uuid, task.uuid)"
-                :title="task.name"
-              >
-                  <span class="text-nowrap">
-                    <FontAwesomeIcon
-                      v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]"
-                      :icon="(progress.exercises[exercise.uuid].tasks_completion[task.uuid] && progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion) ? faCircleCheck : faCheck"
-                      :class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-green-400 text-green-600`"
-                      fixed-width
-                    />
-                    <FontAwesomeIcon
-                      v-else-if="task.requirements?.inject_uuid !== undefined && !progress.exercises[exercise.uuid].tasks_completion[task.requirements.inject_uuid]"
-                      title="All requirements for that task haven't been fullfilled yet"
-                      :icon="faHourglassHalf"
-                      :class="`${compactGrid ? 'text-xs' : 'text-lg'} dark:text-slate-500 text-slate-400`"
-                      fixed-width
-                    />
-                    <FontAwesomeIcon
-                      v-else
-                      :icon="faTimes"
-                      :class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-slate-500 text-slate-400`"
-                      fixed-width
-                    />
-                  </span>
-              </span>
-            </span>
-          </span>
-        </div>
+        </span>
       </div>
     </div>
-</template>
+
+    <!-- Tasks name and pie charts -->
+    <div class="p-2">
+      <div class="flex justify-between mb-3">
+        <span
+          v-for="(task, task_index) in exercise.tasks"
+          :key="task.name"
+          class="p-1 inline-block"
+          :title="task.description"
+        >
+          <span class="flex flex-col">
+            <span
+              class="text-center font-normal text-sm dark:text-blue-200 text-slate-800 text-nowrap"
+              >Task {{ task_index + 1 }}</span
+            >
+            <i class="text-center leading-4 text-slate-600 dark:text-slate-400">{{ task.name }}</i>
+            <span class="inline-block h-18 -mt-4 mx-auto">
+              <apexchart
+                ref="theChart"
+                class=""
+                height="120"
+                width="100"
+                :options="chartOptions"
+                :series="[taskCompletionPercentages[task.uuid]]"
+              ></apexchart>
+            </span>
+          </span>
+        </span>
+      </div>
+
+      <!-- User grid -->
+      <div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
+        <span
+          v-for="progress in sortedProgress"
+          :key="progress.user_id"
+          :class="[
+            'bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg',
+            progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score ==
+            1
+              ? 'border-green-700'
+              : 'border-slate-700'
+          ]"
+        >
+          <span class="flex p-2 mb-1 text-slate-600 dark:text-slate-400">
+            <span
+              :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'} ${compactGrid ? '' : 'mb-1'}`"
+            >
+              <span
+                :title="progress.user_id"
+                class="text-nowrap inline-block leading-5 truncate mb-1"
+              >
+                <FontAwesomeIcon
+                  v-if="
+                    progress.exercises[exercise.uuid].score /
+                      progress.exercises[exercise.uuid].max_score ==
+                    1
+                  "
+                  :icon="faMedal"
+                  class="mr-1 text-amber-300"
+                ></FontAwesomeIcon>
+                <span
+                  :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`"
+                  >{{ progress.email.split('@')[0] }}</span
+                >
+                <span :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`"
+                  >@{{ progress.email.split('@')[1] }}</span
+                >
+              </span>
+              <LiveLogsUserActivityGraph
+                :user_id="progress.user_id"
+                :compact_view="compactGrid"
+                :ultra_compact_view="ultraCompactGrid"
+              ></LiveLogsUserActivityGraph>
+            </span>
+          </span>
+
+          <span class="flex flex-row justify-between px-2 text-slate-500 dark:text-slate-400">
+            <span
+              v-for="(task, task_index) in exercise.tasks"
+              :key="task_index"
+              class="select-none cursor-pointer"
+              @click="
+                toggleCompleted(
+                  progress.exercises[exercise.uuid].tasks_completion[task.uuid],
+                  progress.user_id,
+                  exercise.uuid,
+                  task.uuid
+                )
+              "
+              :title="task.name"
+            >
+              <span class="text-nowrap">
+                <FontAwesomeIcon
+                  v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]"
+                  :icon="
+                    progress.exercises[exercise.uuid].tasks_completion[task.uuid] &&
+                    progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion
+                      ? faCircleCheck
+                      : faCheck
+                  "
+                  :class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-green-400 text-green-600`"
+                  fixed-width
+                />
+                <FontAwesomeIcon
+                  v-else-if="
+                    task.requirements?.inject_uuid !== undefined &&
+                    !progress.exercises[exercise.uuid].tasks_completion[
+                      task.requirements.inject_uuid
+                    ]
+                  "
+                  title="All requirements for that task haven't been fullfilled yet"
+                  :icon="faHourglassHalf"
+                  :class="`${compactGrid ? 'text-xs' : 'text-lg'} dark:text-slate-500 text-slate-400`"
+                  fixed-width
+                />
+                <FontAwesomeIcon
+                  v-else
+                  :icon="faTimes"
+                  :class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-slate-500 text-slate-400`"
+                  fixed-width
+                />
+              </span>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

src/components/scoreViews/TheScoreTable.vue

@@ -1,186 +1,288 @@
 <script setup>
-  import { ref, computed } from "vue";
-  import { active_exercises as exercises, progresses, userCount, setCompletedState } from "@/socket";
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
-  import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
-  import LiveLogsUserActivityGraph from "../LiveLogsUserActivityGraph.vue"
+import { ref, computed } from 'vue'
+import { active_exercises as exercises, progresses, userCount, setCompletedState } from '@/socket'
+import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
+import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
+import LiveLogsUserActivityGraph from '../LiveLogsUserActivityGraph.vue'
 
-  const props = defineProps(['exercise', 'exercise_index'])
-  const collapsed_panels = ref([])
+const props = defineProps(['exercise', 'exercise_index'])
+const collapsed_panels = ref([])
 
-  function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
-    setCompletedState(completed, user_id, exec_uuid, task_uuid)
+function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
+  setCompletedState(completed, user_id, exec_uuid, task_uuid)
+}
+
+function collapse(exercise_index) {
+  const index = collapsed_panels.value.indexOf(exercise_index)
+  if (index >= 0) {
+    collapsed_panels.value.splice(index, 1)
+  } else {
+    collapsed_panels.value.push(exercise_index)
   }
+}
 
-  function collapse(exercise_index) {
-    const index = collapsed_panels.value.indexOf(exercise_index)
-    if (index >= 0) {
-      collapsed_panels.value.splice(index, 1)
-    } else {
-      collapsed_panels.value.push(exercise_index)
-    }
-  }
-
-  const compactTable = computed(() => { return userCount.value > 20 })
-  const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
-  const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
+const compactTable = computed(() => {
+  return userCount.value > 20
+})
+const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
+const sortedProgress = computed(() =>
+  Object.values(progresses.value).sort((a, b) => {
     if (a.email < b.email) {
-      return -1;
+      return -1
     }
     if (a.email > b.email) {
-      return 1;
+      return 1
     }
-    return 0;
-  }))
+    return 0
+  })
+)
 
-  const taskCompletionPercentages = computed(() => {
-    const completions = {}
-    Object.values(props.exercise.tasks).forEach(task => {
-      completions[task.uuid] = 0
-    })
-
-    sortedProgress.value.forEach(progress => {
-      for (const [taskUuid, taskCompletion] of Object.entries(progress.exercises[props.exercise.uuid].tasks_completion)) {
-        if (taskCompletion !== false) {
-          completions[taskUuid] += 1
-        }
-      }
-    });
-  
-    for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
-      completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
-    }
-    return completions
+const taskCompletionPercentages = computed(() => {
+  const completions = {}
+  Object.values(props.exercise.tasks).forEach((task) => {
+    completions[task.uuid] = 0
   })
 
+  sortedProgress.value.forEach((progress) => {
+    for (const [taskUuid, taskCompletion] of Object.entries(
+      progress.exercises[props.exercise.uuid].tasks_completion
+    )) {
+      if (taskCompletion !== false) {
+        completions[taskUuid] += 1
+      }
+    }
+  })
+
+  for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
+    completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
+  }
+  return completions
+})
 </script>
 
 <template>
-    <table
-      class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full mb-4"
-    >
-      <thead>
-        <tr @click="collapse(exercise_index)" class="cursor-pointer">
-          <th :colspan="2 + exercise.tasks.length" class="rounded-tl-lg border-b border-slate-100 dark:border-slate-700 text-md p-3 pl-6 text-center dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100">
-            <div class="flex justify-between items-center">
-              <span class="dark:text-blue-200 text-slate-200 "># {{ exercise_index + 1 }}</span>
-              <span class="text-lg">{{ exercise.name }}</span>
-              <span class="">
-                Level: <span :class="{
+  <table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full mb-4">
+    <thead>
+      <tr @click="collapse(exercise_index)" class="cursor-pointer">
+        <th
+          :colspan="2 + exercise.tasks.length"
+          class="rounded-tl-lg border-b border-slate-100 dark:border-slate-700 text-md p-3 pl-6 text-center dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100"
+        >
+          <div class="flex justify-between items-center">
+            <span class="dark:text-blue-200 text-slate-200"># {{ exercise_index + 1 }}</span>
+            <span class="text-lg">{{ exercise.name }}</span>
+            <span class="">
+              Level:
+              <span
+                :class="{
                   'rounded-lg px-1 ml-2': true,
                   'dark:bg-sky-400 bg-sky-400 text-neutral-950': exercise.level == 'beginner',
                   'dark:bg-orange-400 bg-orange-400 text-neutral-950': exercise.level == 'advanced',
-                  'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert',
-                }">{{ exercise.level }}</span>
-              </span>
-            </div>
-          </th>
-        </tr>
-        <tr :class="`font-medium text-slate-600 dark:text-slate-200 ${collapsed_panels.includes(exercise_index) ? 'hidden' : ''}`">
-          <th class="border-b border-slate-100 dark:border-slate-700 p-3 pl-6 text-left">User</th>
-          <th
-            v-for="(task, task_index) in exercise.tasks"
-            :key="task.name"
-            class="border-b border-slate-100 dark:border-slate-700 p-3 align-top"
-            :title="task.description"
-          >
-            <div class="flex flex-col">
-              <span class="text-center font-normal text-sm dark:text-blue-200 text-slate-500 text-nowrap">Task {{ task_index + 1 }}</span>
-              <i class="text-center">{{ task.name }}</i>
-              <div
-                role="progressbar"
-                class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600"
-                :aria-valuenow="taskCompletionPercentages[task.uuid]" :aria-valuemin="0" aria-valuemax="100"
-                :title="`${taskCompletionPercentages[task.uuid].toFixed(0)}%`"
+                  'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert'
+                }"
+                >{{ exercise.level }}</span
               >
-                <div
-                  class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500 transition-width transition-slowest ease"
-                  :style="`width: ${taskCompletionPercentages[task.uuid]}%`"
-                ></div>
-              </div>
-            </div>
-          </th>
-          <th class="border-b border-slate-100 dark:border-slate-700 p-3 text-left">Progress</th>
-        </tr>
-      </thead>
-      <tbody :class="`${collapsed_panels.includes(exercise_index) ? 'hidden' : ''}`">
-        <tr v-if="!hasProgress">
-          <td
-            :colspan="2 + exercise.tasks.length"
-            class="text-center border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-3 pl-6"
-          >
-            <i>- No user yet -</i>
-          </td>
-        </tr>
-        <template v-else>
-          <tr v-for="(progress) in sortedProgress" :key="progress.user_id" class="bg-slate-100 dark:bg-slate-900">
-            <td class="border-b border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-0 pl-2 relative">
-              <span class="flex flex-col max-w-60">
-                <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate">
-                  <FontAwesomeIcon v-if="progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1" :icon="faMedal" class="mr-1 text-amber-300"></FontAwesomeIcon>
-                  <span class="text-lg font-bold font-mono leading-5 tracking-tight">{{ progress.email.split('@')[0] }}</span>
-                  <span class="text-xs font-mono tracking-tight">@{{ progress.email.split('@')[1] }}</span>
-                </span>
-                <LiveLogsUserActivityGraph
-                  :user_id="progress.user_id"
-                  :compact_view="compactTable"
-                ></LiveLogsUserActivityGraph>
-              </span>
-            </td>
-            <td
-              v-for="(task, task_index) in exercise.tasks"
-              :key="task_index"
-              :class="`text-center border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 ${compactTable ? 'p-0' : 'p-2'}`"
+            </span>
+          </div>
+        </th>
+      </tr>
+      <tr
+        :class="`font-medium text-slate-600 dark:text-slate-200 ${
+          collapsed_panels.includes(exercise_index) ? 'hidden' : ''
+        }`"
+      >
+        <th class="border-b border-slate-100 dark:border-slate-700 p-3 pl-6 text-left">User</th>
+        <th
+          v-for="(task, task_index) in exercise.tasks"
+          :key="task.name"
+          class="border-b border-slate-100 dark:border-slate-700 p-3 align-top"
+          :title="task.description"
+        >
+          <div class="flex flex-col">
+            <span
+              class="text-center font-normal text-sm dark:text-blue-200 text-slate-500 text-nowrap"
+              >Task {{ task_index + 1 }}</span
             >
+            <i class="text-center">{{ task.name }}</i>
+            <div
+              role="progressbar"
+              class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600"
+              :aria-valuenow="taskCompletionPercentages[task.uuid]"
+              :aria-valuemin="0"
+              aria-valuemax="100"
+              :title="`${taskCompletionPercentages[task.uuid].toFixed(0)}%`"
+            >
+              <div
+                class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500 transition-width transition-slowest ease"
+                :style="`width: ${taskCompletionPercentages[task.uuid]}%`"
+              ></div>
+            </div>
+          </div>
+        </th>
+        <th class="border-b border-slate-100 dark:border-slate-700 p-3 text-left">Progress</th>
+      </tr>
+    </thead>
+    <tbody :class="`${collapsed_panels.includes(exercise_index) ? 'hidden' : ''}`">
+      <tr v-if="!hasProgress">
+        <td
+          :colspan="2 + exercise.tasks.length"
+          class="text-center border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-3 pl-6"
+        >
+          <i>- No user yet -</i>
+        </td>
+      </tr>
+      <template v-else>
+        <tr
+          v-for="progress in sortedProgress"
+          :key="progress.user_id"
+          class="bg-slate-100 dark:bg-slate-900"
+        >
+          <td
+            class="border-b border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-0 pl-2 relative"
+          >
+            <span class="flex flex-col max-w-60">
+              <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate">
+                <FontAwesomeIcon
+                  v-if="
+                    progress.exercises[exercise.uuid].score /
+                      progress.exercises[exercise.uuid].max_score ==
+                    1
+                  "
+                  :icon="faMedal"
+                  class="mr-1 text-amber-300"
+                ></FontAwesomeIcon>
+                <span class="text-lg font-bold font-mono leading-5 tracking-tight">{{
+                  progress.email.split('@')[0]
+                }}</span>
+                <span class="text-xs font-mono tracking-tight"
+                  >@{{ progress.email.split('@')[1] }}</span
+                >
+              </span>
+              <LiveLogsUserActivityGraph
+                :user_id="progress.user_id"
+                :compact_view="compactTable"
+              ></LiveLogsUserActivityGraph>
+            </span>
+          </td>
+          <td
+            v-for="(task, task_index) in exercise.tasks"
+            :key="task_index"
+            :class="`text-center border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 ${
+              compactTable ? 'p-0' : 'p-2'
+            }`"
+          >
             <span
               class="select-none cursor-pointer flex justify-center content-center flex-wrap h-9"
-              @click="toggleCompleted(progress.exercises[exercise.uuid].tasks_completion[task.uuid], progress.user_id, exercise.uuid, task.uuid)"
+              @click="
+                toggleCompleted(
+                  progress.exercises[exercise.uuid].tasks_completion[task.uuid],
+                  progress.user_id,
+                  exercise.uuid,
+                  task.uuid
+                )
+              "
             >
               <span class="flex flex-col">
                 <span class="text-nowrap">
                   <FontAwesomeIcon
                     v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]"
-                    :icon="progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion ? faCircleCheck : faCheck"
+                    :icon="
+                      progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion
+                        ? faCircleCheck
+                        : faCheck
+                    "
                     :class="`
-                      ${progress.exercises[exercise.uuid].tasks_completion[task.uuid] ? 'dark:text-green-400 text-green-600' : 'dark:text-slate-500 text-slate-400'}
-                      ${progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion ? 'text-lg' : 'text-xl'}
+                      ${
+                        progress.exercises[exercise.uuid].tasks_completion[task.uuid]
+                          ? 'dark:text-green-400 text-green-600'
+                          : 'dark:text-slate-500 text-slate-400'
+                      }
+                      ${
+                        progress.exercises[exercise.uuid].tasks_completion[task.uuid]
+                          .first_completion
+                          ? 'text-lg'
+                          : 'text-xl'
+                      }
                     `"
                   />
                   <FontAwesomeIcon
-                    v-else-if="task.requirements?.inject_uuid !== undefined && !progress.exercises[exercise.uuid].tasks_completion[task.requirements.inject_uuid]"
+                    v-else-if="
+                      task.requirements?.inject_uuid !== undefined &&
+                      !progress.exercises[exercise.uuid].tasks_completion[
+                        task.requirements.inject_uuid
+                      ]
+                    "
                     title="All requirements for that task haven't been fullfilled yet"
                     :icon="faHourglassHalf"
-                    :class="`text-lg ${progress.exercises[exercise.uuid].tasks_completion[task.uuid] ? 'dark:text-green-400 text-green-600' : 'dark:text-slate-500 text-slate-400'}`"
+                    :class="`text-lg ${
+                      progress.exercises[exercise.uuid].tasks_completion[task.uuid]
+                        ? 'dark:text-green-400 text-green-600'
+                        : 'dark:text-slate-500 text-slate-400'
+                    }`"
                   />
                   <FontAwesomeIcon
                     v-else
                     :icon="faTimes"
-                    :class="`text-xl ${progress.exercises[exercise.uuid].tasks_completion[task.uuid] ? 'dark:text-green-400 text-green-600' : 'dark:text-slate-500 text-slate-400'}`"
+                    :class="`text-xl ${
+                      progress.exercises[exercise.uuid].tasks_completion[task.uuid]
+                        ? 'dark:text-green-400 text-green-600'
+                        : 'dark:text-slate-500 text-slate-400'
+                    }`"
                   />
-                  <small :class="progress.exercises[exercise.uuid].tasks_completion[task.uuid] ? 'dark:text-green-400 text-green-600' : 'dark:text-slate-500 text-slate-400'"> (+{{ task.score }})</small>
+                  <small
+                    :class="
+                      progress.exercises[exercise.uuid].tasks_completion[task.uuid]
+                        ? 'dark:text-green-400 text-green-600'
+                        : 'dark:text-slate-500 text-slate-400'
+                    "
+                  >
+                    (+{{ task.score }})</small
+                  >
                 </span>
                 <span :class="['leading-3', !compactTable ? 'text-sm' : 'text-xs']">
                   <span
                     v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid].timestamp"
-                    :class="progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion ? 'font-bold' : 'font-extralight'"
+                    :class="
+                      progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion
+                        ? 'font-bold'
+                        : 'font-extralight'
+                    "
                   >
-                    {{ (new Date(progress.exercises[exercise.uuid].tasks_completion[task.uuid].timestamp * 1000)).toTimeString().split(' ', 1)[0] }}
+                    {{
+                      new Date(
+                        progress.exercises[exercise.uuid].tasks_completion[task.uuid].timestamp *
+                          1000
+                      )
+                        .toTimeString()
+                        .split(' ', 1)[0]
+                    }}
                   </span>
                 </span>
               </span>
             </span>
-            </td>
-            <td class="border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-3">
-              <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600" role="progressbar" :aria-valuenow="progress.exercises[exercise.uuid].score" :aria-valuemin="0" aria-valuemax="100">
-                <div
-                  class="flex flex-col justify-center rounded-full overflow-hidden bg-green-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-green-500 transition-width transition-slowest ease"
-                  :style="`width: ${100 * (progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score)}%`"
-                ></div>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-</template>
+          </td>
+          <td
+            class="border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-3"
+          >
+            <div
+              class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600"
+              role="progressbar"
+              :aria-valuenow="progress.exercises[exercise.uuid].score"
+              :aria-valuemin="0"
+              aria-valuemax="100"
+            >
+              <div
+                class="flex flex-col justify-center rounded-full overflow-hidden bg-green-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-green-500 transition-width transition-slowest ease"
+                :style="`width: ${
+                  100 *
+                  (progress.exercises[exercise.uuid].score /
+                    progress.exercises[exercise.uuid].max_score)
+                }%`"
+              ></div>
+            </div>
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>

src/main.js

@@ -1,13 +1,13 @@
 import './assets/main.css'
-import VueApexCharts from "vue3-apexcharts";
+import VueApexCharts from 'vue3-apexcharts'
 
 import { createApp, ref } from 'vue'
 import App from './App.vue'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import Modal from "@/components/elements/Modal.vue"
-import Loading from "@/components/elements/Loading.vue"
-import Alert from "@/components/elements/Alert.vue"
+import Modal from '@/components/elements/Modal.vue'
+import Loading from '@/components/elements/Loading.vue'
+import Alert from '@/components/elements/Alert.vue'
 
 const app = createApp(App)
 app.component('FontAwesomeIcon', FontAwesomeIcon)
@@ -16,4 +16,4 @@ app.component('Loading', Loading)
 app.component('Alert', Alert)
 app.use(VueApexCharts)
 
-app.mount('#app')
+app.mount('#app')

src/router.js

@@ -1,34 +1,59 @@
-
 import { createWebHistory, createRouter } from 'vue-router'
 
 const routes = [
-    { path: '/', component: ScenarioList },
-    { path: '/scenarios/index', name: 'Scenario Index', component: ScenarioList, meta: { requiresScenarioSelection: false }, },
-    { path: '/scenarios/add', name: 'New Scenario', component: ScenarioNew, meta: { requiresScenarioSelection: false }, },
-    { path: '/scenarios/overview/:uuid?', name: 'Scenario Overview', component: ScenarioOverview, meta: { requiresScenarioSelection: true }, props: true },
-    { path: '/scenarios/designer/:uuid?', name: 'Scenario Designer', component: ScenarioDesigner, meta: { requiresScenarioSelection: true }, props: true },
-    { path: '/injects/tester/:uuid?', name: 'Inject Tester', component: InjectTester, props: true },
+  { path: '/', component: ScenarioList },
+  {
+    path: '/scenarios/index',
+    name: 'Scenario Index',
+    component: ScenarioList,
+    meta: { requiresScenarioSelection: false }
+  },
+  {
+    path: '/scenarios/add',
+    name: 'New Scenario',
+    component: ScenarioNew,
+    meta: { requiresScenarioSelection: false }
+  },
+  {
+    path: '/scenarios/overview/:uuid?',
+    name: 'Scenario Overview',
+    component: ScenarioOverview,
+    meta: { requiresScenarioSelection: true },
+    props: true
+  },
+  {
+    path: '/scenarios/designer/:uuid?',
+    name: 'Scenario Designer',
+    component: ScenarioDesigner,
+    meta: { requiresScenarioSelection: true },
+    props: true
+  },
+  { path: '/injects/tester/:uuid?', name: 'Inject Tester', component: InjectTester, props: true }
 ]
 
 const router = createRouter({
-    history: createWebHistory(),
-    routes,
+  history: createWebHistory(),
+  routes
 })
 
 router.beforeEach(async (to, from) => {
-    if (to.path === '/') {
-        return { path: '/scenarios/index' }
-    }
-    if (!hasScenarios()) {
-        fetchScenarios()
-    }
-    if (from.name == undefined && ['Scenario Overview', 'Scenario Designer'].includes(to.name) && to?.params?.uuid !== undefined) {
-        store.selected_scenario = to.params.uuid
-    }
-    if (to?.meta?.requiresScenarioSelection === true && store.selected_scenario === null) {
-        return { path: '/scenarios/index' }
-    }
-    if (to.matched.length == 0) {
-        return { path: '/scenarios/index' }
-    }
-})
+  if (to.path === '/') {
+    return { path: '/scenarios/index' }
+  }
+  if (!hasScenarios()) {
+    fetchScenarios()
+  }
+  if (
+    from.name == undefined &&
+    ['Scenario Overview', 'Scenario Designer'].includes(to.name) &&
+    to?.params?.uuid !== undefined
+  ) {
+    store.selected_scenario = to.params.uuid
+  }
+  if (to?.meta?.requiresScenarioSelection === true && store.selected_scenario === null) {
+    return { path: '/scenarios/index' }
+  }
+  if (to.matched.length == 0) {
+    return { path: '/scenarios/index' }
+  }
+})

src/settings.js

@@ -3,4 +3,4 @@ import { ref, computed } from 'vue'
 export const darkModeOn = ref(true)
 export const darkModeEnabled = computed(() => darkModeOn.value)
 
-export const fullscreenModeOn = ref(false)
+export const fullscreenModeOn = ref(false)

src/socket.js

@@ -1,9 +1,9 @@
-import { reactive, computed } from "vue";
-import { io } from "socket.io-client";
+import { reactive, computed } from 'vue'
+import { io } from 'socket.io-client'
 import debounce from 'lodash.debounce'
 
 // "undefined" means the URL will be computed from the `window.location` object
-const URL = process.env.NODE_ENV === "production" ? undefined : "http://localhost:40001";
+const URL = process.env.NODE_ENV === 'production' ? undefined : 'http://localhost:40001'
 const MAX_LIVE_LOG = 30
 
 const initial_state = {
@@ -17,27 +17,27 @@ const initial_state = {
   exercises: [],
   selected_exercises: [],
   progresses: {},
-  diagnostic: {},
+  diagnostic: {}
 }
 
-const state = reactive({ ...initial_state });
-const connectionState = reactive({ 
+const state = reactive({ ...initial_state })
+const connectionState = reactive({
   connected: false,
-  zmq_last_time: false,
+  zmq_last_time: false
 })
 
-
 const socket = io(URL, {
   autoConnect: true
-});
-
+})
 
 /* Public */
 /* ------ */
 
 export const exercises = computed(() => state.exercises)
 export const selected_exercises = computed(() => state.selected_exercises)
-export const active_exercises = computed(() => state.exercises.filter((exercise) => state.selected_exercises.includes(exercise.uuid)))
+export const active_exercises = computed(() =>
+  state.exercises.filter((exercise) => state.selected_exercises.includes(exercise.uuid))
+)
 export const progresses = computed(() => state.progresses)
 export const notifications = computed(() => state.notificationEvents)
 export const notificationCounter = computed(() => state.notificationCounter)
@@ -52,7 +52,7 @@ export const socketConnected = computed(() => connectionState.connected)
 export const zmqLastTime = computed(() => connectionState.zmq_last_time)
 
 export function resetState() {
-  Object.assign(state, initial_state);
+  Object.assign(state, initial_state)
 }
 
 export function fullReload() {
@@ -67,7 +67,7 @@ export function setCompletedState(completed, user_id, exec_uuid, task_uuid) {
   const payload = {
     user_id: user_id,
     exercise_uuid: exec_uuid,
-    task_uuid: task_uuid,
+    task_uuid: task_uuid
   }
   sendCompletedState(completed, payload)
 }
@@ -87,7 +87,7 @@ export function resetLiveLogs() {
 export function changeExerciseSelection(exec_uuid, state_enabled) {
   const payload = {
     exercise_uuid: exec_uuid,
-    selected: state_enabled,
+    selected: state_enabled
   }
   sendChangeExerciseSelection(payload)
 }
@@ -103,7 +103,8 @@ export function toggleApiQueryMode(enabled) {
 export function remediateSetting(setting) {
   sendRemediateSetting(setting, (result) => {
     if (result.success) {
-      state.diagnostic['settings'][setting].value = state.diagnostic['settings'][setting].expected_value
+      state.diagnostic['settings'][setting].value =
+        state.diagnostic['settings'][setting].expected_value
     } else {
       state.diagnostic['settings'][setting].error = true
       state.diagnostic['settings'][setting].errorMessage = result.message
@@ -111,79 +112,77 @@ export function remediateSetting(setting) {
   })
 }
 
-export const debouncedGetProgress = debounce(getProgress, 200, {leading: true})
-export const debouncedGetDiangostic = debounce(getDiangostic, 1000, {leading: true})
-
+export const debouncedGetProgress = debounce(getProgress, 200, { leading: true })
+export const debouncedGetDiangostic = debounce(getDiangostic, 1000, { leading: true })
 
 /* Private */
 /* ------- */
 
 function getExercises() {
-  socket.emit("get_exercises", (all_exercises) => {
+  socket.emit('get_exercises', (all_exercises) => {
     state.exercises = all_exercises
   })
 }
 
 function getSelectedExercises() {
-  socket.emit("get_selected_exercises", (all_selected_exercises) => {
+  socket.emit('get_selected_exercises', (all_selected_exercises) => {
     state.selected_exercises = all_selected_exercises
   })
 }
 
 function getNotifications() {
-  socket.emit("get_notifications", (all_notifications) => {
+  socket.emit('get_notifications', (all_notifications) => {
     state.notificationEvents = all_notifications
   })
 }
 
 function getProgress() {
-  socket.emit("get_progress", (all_progress) => {
+  socket.emit('get_progress', (all_progress) => {
     state.progresses = all_progress
   })
 }
 
 function getUsersActivity() {
-  socket.emit("get_users_activity", (user_activity_bundle) => {
+  socket.emit('get_users_activity', (user_activity_bundle) => {
     state.userActivity = user_activity_bundle.activity
     state.userActivityConfig = user_activity_bundle.config
-  });
+  })
 }
 
-
 function getDiangostic() {
   state.diagnostic = {}
-  socket.emit("get_diagnostic", (diagnostic) => {
+  socket.emit('get_diagnostic', (diagnostic) => {
     state.diagnostic = diagnostic
   })
 }
 
 function sendCompletedState(completed, payload) {
-  const event_name = !completed ? "mark_task_completed": "mark_task_incomplete"
+  const event_name = !completed ? 'mark_task_completed' : 'mark_task_incomplete'
   socket.emit(event_name, payload, () => {
     getProgress()
   })
 }
 
 function sendResetAllExerciseProgress() {
-  socket.emit("reset_all_exercise_progress", () => {
+  socket.emit('reset_all_exercise_progress', () => {
     getProgress()
   })
 }
 
 function sendResetAll() {
-  socket.emit("reset_all", () => {
+  socket.emit('reset_all', () => {
     getProgress()
   })
 }
 
 function sendResetLiveLogs() {
-  socket.emit("reset_notifications", () => {
+  socket.emit('reset_notifications', () => {
     getNotifications()
   })
 }
 
 function sendChangeExerciseSelection(payload) {
-  socket.emit("change_exercise_selection", payload, () => {
+  socket.emit('change_exercise_selection', payload, () => {
     getSelectedExercises()
   })
 }
@@ -192,68 +191,68 @@ function sendToggleVerboseMode(enabled) {
   const payload = {
     verbose: enabled
   }
-  socket.emit("toggle_verbose_mode", payload, () => {})
+  socket.emit('toggle_verbose_mode', payload, () => {})
 }
 
 function sendToggleApiQueryMode(enabled) {
   const payload = {
     apiquery: enabled
   }
-  socket.emit("toggle_apiquery_mode", payload, () => {})
+  socket.emit('toggle_apiquery_mode', payload, () => {})
 }
 
 function sendRemediateSetting(setting, cb) {
   const payload = {
     name: setting
   }
-  socket.emit("remediate_setting", payload, (result) => {
+  socket.emit('remediate_setting', payload, (result) => {
     cb(result)
   })
 }
 
 /* Event listener */
 
-socket.on("connect", () => {
-  connectionState.connected = true;
-});
+socket.on('connect', () => {
+  connectionState.connected = true
+})
 
-socket.on("disconnect", () => {
-  connectionState.connected = false;
-});
+socket.on('disconnect', () => {
+  connectionState.connected = false
+})
 
-socket.on("notification", (message) => {
+socket.on('notification', (message) => {
   state.notificationCounter += 1
   if (message.is_api_request) {
     state.notificationAPICounter += 1
   }
   addLimited(state.notificationEvents, message, MAX_LIVE_LOG)
-});
+})
 
-socket.on("new_user", (new_user) => {
+socket.on('new_user', (new_user) => {
   debouncedGetProgress()
-});
+})
 
-socket.on("refresh_score", (new_user) => {
+socket.on('refresh_score', (new_user) => {
   debouncedGetProgress()
-});
+})
 
-socket.on("keep_alive", (keep_alive) => {
+socket.on('keep_alive', (keep_alive) => {
   connectionState.zmq_last_time = keep_alive['zmq_last_time']
-});
+})
 
-socket.on("update_notification_history", (notification_history_bundle) => {
+socket.on('update_notification_history', (notification_history_bundle) => {
   state.notificationHistory = notification_history_bundle.history
   state.notificationHistoryConfig = notification_history_bundle.config
-});
+})
 
-socket.on("update_users_activity", (user_activity_bundle) => {
+socket.on('update_users_activity', (user_activity_bundle) => {
   state.userActivity = user_activity_bundle.activity
   state.userActivityConfig = user_activity_bundle.config
-});
+})
 
 function addLimited(target, message, maxCount) {
   target.unshift(message)
   if (target.length > maxCount) {
     target.length = maxCount
   }
-}
+}

src/utils.js

@@ -1,20 +1,20 @@
-import { computed, ref } from "vue"
+import { computed, ref } from 'vue'
 
 let toastID = 0
 export const toastBuffer = ref([])
 export const allToasts = computed(() => toastBuffer.value)
 export function toast(toast) {
-    toastID += 1
-    toast.id = toastID
-    toastBuffer.value.push(toast)
+  toastID += 1
+  toast.id = toastID
+  toastBuffer.value.push(toast)
 }
 export function removeToast(id) {
-    toastBuffer.value = toastBuffer.value.filter((toast) => toast.id != id)
+  toastBuffer.value = toastBuffer.value.filter((toast) => toast.id != id)
 }
 export function ajaxFeedback(response) {
-    toast({
-        variant: response.success ? 'success' : 'danger',
-        message: String(response.message),
-        title: response.title,
-    })
-}
+  toast({
+    variant: response.success ? 'success' : 'danger',
+    message: String(response.message),
+    title: response.title
+  })
+}