MISP/SkillAegis
MISP/SkillAegis
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new: [front:scores] Automatically resize score table if large amount of users

Browse source
This commit is contained in:
Sami Mokaddem 2024-07-12 09:15:10 +02:00
parent 9af5572346
commit a00770c8a9
3 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/TheDahboard.vue
View file

@ -19,6 +19,8 @@ onMounted(() => {
</script>
<template>
<TheScores></TheScores>
<TheLiveLogs></TheLiveLogs>
<div class="mb-3">
<TheScores></TheScores>
<TheLiveLogs></TheLiveLogs>
</div>
</template>

8
src/components/LiveLogsUserActivityGraph.vue
View file

@ -3,7 +3,7 @@
import { userActivity, userActivityConfig } from "@/socket";
import { darkModeEnabled } from "@/settings.js"
const props = defineProps(['user_id'])
const props = defineProps(['user_id', 'compact_view'])
const theChart = ref(null)
const bufferSize = computed(() => userActivityConfig.value.activity_buffer_size)
@ -54,14 +54,14 @@
<template>
<span
class="h-3 w-56"
:class="`w-56 ${props.compact_view ? 'h-1 inline-flex' : 'h-3'}`"
:title="`Activity over ${bufferSizeMin}min`"
>
<span
v-for="(value, i) in chartSeries"
:key="i"
:class="[`inline-block h-3 rounded-[1px] mr-px`, `bg-${palleteColor}-${getPalleteIndexFromValue(value)}`]"
:style="`width: ${parseInt((224 - chartSeries.length) / chartSeries.length)}px`"
:class="[`inline-block rounded-[1px] mr-px`, props.compact_view ? 'h-1' : 'h-3', `bg-${palleteColor}-${getPalleteIndexFromValue(value)}`]"
:style="`width: ${((224 - chartSeries.length) / chartSeries.length).toFixed(1)}px`"
></span>
</span>
</template>

10
src/components/TheScores.vue
View file

@ -1,6 +1,6 @@
<script setup>
import { ref, computed } from "vue";
import { active_exercises as exercises, progresses, setCompletedState } from "@/socket";
import { active_exercises as exercises, progresses, userCount, setCompletedState } from "@/socket";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faCheck, faTimes, faGraduationCap, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
@ -20,6 +20,7 @@
}
}
const compactTable = computed(() => { return userCount.value > 20 })
const hasExercises = computed(() => exercises.value.length > 0)
const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
@ -102,13 +103,16 @@
<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"></LiveLogsUserActivityGraph>
<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 p-2"
: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"