new: [front:scores] Added support of ultra-compact view in fullscreen mode
This commit is contained in:
parent
179cdc9bd7
commit
a0fbd7aa9b
2 changed files with 15 additions and 10 deletions
|
@ -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>
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue