new: [front:scores] Added support of ultra-compact view in fullscreen mode

This commit is contained in:
Sami Mokaddem 2024-07-12 15:03:40 +02:00
parent 179cdc9bd7
commit a0fbd7aa9b
2 changed files with 15 additions and 10 deletions

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', 'compact_view']) const props = defineProps(['user_id', 'compact_view', 'ultra_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="`w-60 ${props.compact_view ? 'h-1.5 inline-flex' : 'h-3'}`" :class="`${props.ultra_compact_view ? 'w-[120px]' : 'w-60'} ${props.compact_view ? 'h-1.5 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 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: ${((240 - chartSeries.length) / chartSeries.length).toFixed(1)}px`" :style="`width: ${(((props.ultra_compact_view ? 120 : 240) - chartSeries.length) / chartSeries.length).toFixed(1)}px`"
></span> ></span>
</span> </span>
</template> </template>

View file

@ -95,6 +95,7 @@
} }
} }
const compactGrid = computed(() => { return userCount.value > 70 })
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) => {
if (a.email < b.email) { if (a.email < b.email) {
@ -140,6 +141,7 @@
dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100 dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100
" "
> >
<!-- Modal header -->
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<span class="text-lg font-semibold">{{ exercise.name }}</span> <span class="text-lg font-semibold">{{ exercise.name }}</span>
<span class="mr-8"> <span class="mr-8">
@ -153,6 +155,7 @@
</div> </div>
</div> </div>
<!-- Tasks name and pie charts -->
<div class="p-2"> <div class="p-2">
<div class="flex justify-between mb-3"> <div class="flex justify-between mb-3">
<span <span
@ -175,7 +178,8 @@
</span> </span>
</div> </div>
<div class="flex flex-wrap gap-2"> <!-- User grid -->
<div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
<span <span
v-for="(progress) in sortedProgress" v-for="(progress) in sortedProgress"
:key="progress.user_id" :key="progress.user_id"
@ -188,18 +192,19 @@
flex p-2 mb-1 flex p-2 mb-1
text-slate-600 dark:text-slate-400 text-slate-600 dark:text-slate-400
"> ">
<span class="flex flex-col w-60"> <span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'}`">
<span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate mb-1"> <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate mb-1">
<FontAwesomeIcon <FontAwesomeIcon
v-if="progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1" v-if="progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1"
:icon="faMedal" class="mr-1 text-amber-300" :icon="faMedal" class="mr-1 text-amber-300"
></FontAwesomeIcon> ></FontAwesomeIcon>
<span class="text-lg font-bold font-mono leading-5 tracking-tight">{{ progress.email.split('@')[0] }}</span> <span :class="`${compactGrid ? 'text-base' : '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="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`">@{{ progress.email.split('@')[1] }}</span>
</span> </span>
<LiveLogsUserActivityGraph <LiveLogsUserActivityGraph
:user_id="progress.user_id" :user_id="progress.user_id"
:compact_view="true" :compact_view="true"
:ultra_compact_view="true"
></LiveLogsUserActivityGraph> ></LiveLogsUserActivityGraph>
</span> </span>
</span> </span>
@ -218,20 +223,20 @@
<FontAwesomeIcon <FontAwesomeIcon
v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]" 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" :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" :class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-green-400 text-green-600`"
fixed-width fixed-width
/> />
<FontAwesomeIcon <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" title="All requirements for that task haven't been fullfilled yet"
:icon="faHourglassHalf" :icon="faHourglassHalf"
class="text-lg dark:text-slate-500 text-slate-400" :class="`${compactGrid ? 'text-xs' : 'text-lg'} dark:text-slate-500 text-slate-400`"
fixed-width fixed-width
/> />
<FontAwesomeIcon <FontAwesomeIcon
v-else v-else
:icon="faTimes" :icon="faTimes"
class="text-xl dark:text-slate-500 text-slate-400" :class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-slate-500 text-slate-400`"
fixed-width fixed-width
/> />
</span> </span>