new: [font:dashboard] Added fullscreen mode for scores to support large amount of users

src/TheDahboard.vue

@@ -3,6 +3,7 @@ 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"
 
 
 watch(socketConnected, (isConnected) => {
@@ -21,6 +22,6 @@ onMounted(() => {
 <template>
   <div class="mb-3">
     <TheScores></TheScores>
-    <TheLiveLogs></TheLiveLogs>
+    <TheLiveLogs v-show="!fullscreenModeOn"></TheLiveLogs>
   </div>
 </template>

src/components/LiveLogsUserActivityGraph.vue

@@ -54,14 +54,14 @@
 
 <template>
   <span
-    :class="`w-56 ${props.compact_view ? 'h-1 inline-flex' : 'h-3'}`"
+    :class="`w-60 ${props.compact_view ? 'h-1.5 inline-flex' : 'h-3'}`"
     :title="`Activity over ${bufferSizeMin}min`"
   >
     <span
       v-for="(value, i) in chartSeries"
       :key="i"
-      :class="[`inline-block rounded-[1px] mr-px`, props.compact_view ? 'h-1' : '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: ${((224 - chartSeries.length) / chartSeries.length).toFixed(1)}px`"
+      :style="`width: ${((240 - chartSeries.length) / chartSeries.length).toFixed(1)}px`"
     ></span>
   </span>
 </template>

src/components/TheLiveLogs.vue

@@ -30,6 +30,7 @@
 </script>
 
 <template>
+<div>
   <h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400">
     <FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon>
     Live logs
@@ -150,4 +151,5 @@
         </template>
       </tbody>
     </table>
+</div>
 </template>

src/components/TheLiveLogsActivityGraph.vue

@@ -62,7 +62,7 @@
 
 <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="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-40`">
+    <div :class="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-30`">
       <div class="text-xxs flex justify-between h-full items-center text-slate-500 dark:text-slate-300">
         <span class="-rotate-90 w-8 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span>
         <span class="-rotate-90 w-8 text-xs">–</span>

src/components/TheScores.vue

@@ -1,38 +1,24 @@
 <script setup>
   import { ref, computed } from "vue";
-  import { active_exercises as exercises, progresses, userCount, setCompletedState } from "@/socket";
+  import { active_exercises as exercises } from "@/socket";
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faCheck, faTimes, faGraduationCap, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
+  import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter } from '@fortawesome/free-solid-svg-icons'
-  import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
+  import TheScoreTable from "./scoreViews/TheScoreTable.vue"
+  import TheFullScreenScoreGrid from "./scoreViews/TheFullScreenScoreGrid.vue"
+  import { fullscreenModeOn } from "@/settings.js"
 
-  const collapsed_panels = ref([])
-
-  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 compactTable = computed(() => { return userCount.value > 20 })
   const hasExercises = computed(() => exercises.value.length > 0)
-  const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
+  const fullscreen_panel = ref(false)
-  const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
-    if (a.email < b.email) {
-      return -1;
-    }
-    if (a.email > b.email) {
-      return 1;
-    }
-    return 0;
-  }))
 
+  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>
@@ -47,119 +33,41 @@
   >
     <i>- No Exercise available -</i>
   </div>
-  <table
+
+  <template
     v-for="(exercise, exercise_index) in exercises"
     :key="exercise.name"
-    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-t-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>
-          </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'}`"
   >
+    <div :class="fullscreen_panel === false ? 'relative' : ''">
       <span
-              class="select-none cursor-pointer flex justify-center content-center flex-wrap h-9"
+        v-show="fullscreen_panel === false || fullscreen_panel === exercise_index"
-              @click="toggleCompleted(progress.exercises[exercise.uuid].tasks_completion[task.uuid], progress.user_id, exercise.uuid, task.uuid)"
+        :class="['inline-block absolute shadow-lg z-50', fullscreen_panel === false ? 'top-0 -right-7' : 'top-2 right-2']"
       >
-              <span class="flex flex-col">
+        <button
-                <span class="text-nowrap">
+          @click="toggleFullScreen(exercise_index)"
-                  <FontAwesomeIcon
+          :class="`
-                    v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]"
+            w-7 p-1 focus-outline font-semibold
-                    :icon="faCheck"
+            text-slate-800 bg-slate-100  hover:bg-slate-200  dark:text-slate-200 dark:bg-slate-800  dark:hover:bg-slate-900
-                    :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'}`"
+            ${fullscreen_panel === false ? 'rounded-r-md' : 'rounded-bl-md'}
-                  />
+          `"
-                  <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="`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'}`"
-                  />
-                  <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="text-sm leading-3">
-                  <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'"
         >
-                    {{ (new Date(progress.exercises[exercise.uuid].tasks_completion[task.uuid].timestamp * 1000)).toTimeString().split(' ', 1)[0] }}
+          <FontAwesomeIcon :icon="fullscreen_panel !== exercise_index ? faUpRightAndDownLeftFromCenter : faDownLeftAndUpRightToCenter" fixed-width></FontAwesomeIcon>
+        </button>
       </span>
-                  <span v-else></span>
+      <KeepAlive>
-                </span>
+        <TheScoreTable
-              </span>
+          v-show="fullscreen_panel === false"
-            </span>
+          :exercise="exercise"
-            </td>
+          :exercise_index="exercise_index"
-            <td class="border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-3">
+        ></TheScoreTable>
-              <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">
+      </KeepAlive>
-                <div
+      <KeepAlive>
-                  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"
+        <TheFullScreenScoreGrid
-                  :style="`width: ${100 * (progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score)}%`"
+          v-if="fullscreen_panel !== false"
-                ></div>
+          :exercise="exercises[fullscreen_panel]"
+          :exercise_index="exercise_index"
+        ></TheFullScreenScoreGrid>
+      </KeepAlive>
     </div>
-            </td>
-          </tr>
   </template>
-      </tbody>
-    </table>
 </template>

src/components/scoreViews/TheFullScreenScoreGrid.vue

@@ -0,0 +1,244 @@
+<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"
+
+  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,
+        },
+      },
+      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,
+            },
+            value: {
+              formatter: function(val) {
+                return parseInt(val*userCount.value / 100);
+              },
+              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)
+    }
+  }
+
+  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;
+    }
+    if (a.email > b.email) {
+      return 1;
+    }
+    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
+  })
+
+</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
+        "
+      >
+        <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>
+
+      <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>
+
+        <div class="flex flex-wrap 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 w-60">
+                <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="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="true"
+                ></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)"
+              >
+                  <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="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="text-lg dark:text-slate-500 text-slate-400"
+                      fixed-width
+                    />
+                    <FontAwesomeIcon
+                      v-else
+                      :icon="faTimes"
+                      class="text-xl dark:text-slate-500 text-slate-400"
+                      fixed-width
+                    />
+                  </span>
+              </span>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+</template>

src/components/scoreViews/TheScoreTable.vue

@@ -0,0 +1,151 @@
+<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 LiveLogsUserActivityGraph from "../LiveLogsUserActivityGraph.vue"
+
+  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 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) => {
+    if (a.email < b.email) {
+      return -1;
+    }
+    if (a.email > b.email) {
+      return 1;
+    }
+    return 0;
+  }))
+
+</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="{
+                  '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>
+          </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)"
+            >
+              <span class="flex flex-col">
+                <span class="text-nowrap">
+                  <FontAwesomeIcon
+                    v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]"
+                    :icon="faCheck"
+                    :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'}`"
+                  />
+                  <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="`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'}`"
+                  />
+                  <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'"
+                  >
+                    {{ (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>

src/settings.js

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