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

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

View file

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

View file

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

View file

@ -1,6 +1,6 @@
<script setup> <script setup>
import { ref, computed } from "vue"; 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 { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faCheck, faTimes, faGraduationCap, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons' import { faCheck, faTimes, faGraduationCap, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue" import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
@ -20,6 +20,7 @@
} }
} }
const compactTable = computed(() => { return userCount.value > 20 })
const hasExercises = computed(() => exercises.value.length > 0) const hasExercises = computed(() => exercises.value.length > 0)
const hasProgress = computed(() => Object.keys(progresses.value).length > 0) const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => { 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-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 class="text-xs font-mono tracking-tight">@{{ progress.email.split('@')[1] }}</span>
</span> </span>
<LiveLogsUserActivityGraph :user_id="progress.user_id"></LiveLogsUserActivityGraph> <LiveLogsUserActivityGraph
:user_id="progress.user_id"
:compact_view="compactTable"
></LiveLogsUserActivityGraph>
</span> </span>
</td> </td>
<td <td
v-for="(task, task_index) in exercise.tasks" v-for="(task, task_index) in exercise.tasks"
:key="task_index" :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 <span
class="select-none cursor-pointer flex justify-center content-center flex-wrap h-9" class="select-none cursor-pointer flex justify-center content-center flex-wrap h-9"