new: [font:dashboard] Added fullscreen mode for scores to support large amount of users
This commit is contained in:
Sami Mokaddem
parent
a00770c8a9
commit
179cdc9bd7
8 changed files with 456 additions and 148 deletions
|
|
@ -3,6 +3,7 @@ import { onMounted, watch } from 'vue'
|
||||||
import TheLiveLogs from './components/TheLiveLogs.vue'
|
import TheLiveLogs from './components/TheLiveLogs.vue'
|
||||||
import TheScores from './components/TheScores.vue'
|
import TheScores from './components/TheScores.vue'
|
||||||
import { resetState, fullReload, socketConnected } from "@/socket";
|
import { resetState, fullReload, socketConnected } from "@/socket";
|
||||||
|
import { fullscreenModeOn } from "@/settings.js"
|
||||||
|
|
||||||
|
|
||||||
watch(socketConnected, (isConnected) => {
|
watch(socketConnected, (isConnected) => {
|
||||||
|
|
@ -21,6 +22,6 @@ onMounted(() => {
|
||||||
<template>
|
<template>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<TheScores></TheScores>
|
<TheScores></TheScores>
|
||||||
<TheLiveLogs></TheLiveLogs>
|
<TheLiveLogs v-show="!fullscreenModeOn"></TheLiveLogs>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -54,14 +54,14 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<span
|
<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`"
|
: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' : '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>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -30,6 +30,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400">
|
<h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400">
|
||||||
<FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon>
|
<FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon>
|
||||||
Live logs
|
Live logs
|
||||||
|
|
@ -150,4 +151,5 @@
|
||||||
</template>
|
</template>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
|
|
||||||
<template>
|
<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="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">
|
<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 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span>
|
||||||
<span class="-rotate-90 w-8 text-xs">–</span>
|
<span class="-rotate-90 w-8 text-xs">–</span>
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,24 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from "vue";
|
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 { 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 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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -47,119 +33,41 @@
|
||||||
>
|
>
|
||||||
<i>- No Exercise available -</i>
|
<i>- No Exercise available -</i>
|
||||||
</div>
|
</div>
|
||||||
<table
|
|
||||||
|
<template
|
||||||
v-for="(exercise, exercise_index) in exercises"
|
v-for="(exercise, exercise_index) in exercises"
|
||||||
:key="exercise.name"
|
:key="exercise.name"
|
||||||
class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full mb-4"
|
|
||||||
>
|
>
|
||||||
<thead>
|
<div :class="fullscreen_panel === false ? 'relative' : ''">
|
||||||
<tr @click="collapse(exercise_index)" class="cursor-pointer">
|
<span
|
||||||
<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">
|
v-show="fullscreen_panel === false || fullscreen_panel === exercise_index"
|
||||||
<div class="flex justify-between items-center">
|
:class="['inline-block absolute shadow-lg z-50', fullscreen_panel === false ? 'top-0 -right-7' : 'top-2 right-2']"
|
||||||
<span class="dark:text-blue-200 text-slate-200 "># {{ exercise_index + 1 }}</span>
|
>
|
||||||
<span class="text-lg">{{ exercise.name }}</span>
|
<button
|
||||||
<span class="">
|
@click="toggleFullScreen(exercise_index)"
|
||||||
Level: <span :class="{
|
:class="`
|
||||||
'rounded-lg px-1 ml-2': true,
|
w-7 p-1 focus-outline font-semibold
|
||||||
'dark:bg-sky-400 bg-sky-400 text-neutral-950': exercise.level == 'beginner',
|
text-slate-800 bg-slate-100 hover:bg-slate-200 dark:text-slate-200 dark:bg-slate-800 dark:hover:bg-slate-900
|
||||||
'dark:bg-orange-400 bg-orange-400 text-neutral-950': exercise.level == 'advanced',
|
${fullscreen_panel === false ? 'rounded-r-md' : 'rounded-bl-md'}
|
||||||
'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert',
|
`"
|
||||||
}">{{ exercise.level }}</span>
|
>
|
||||||
</span>
|
<FontAwesomeIcon :icon="fullscreen_panel !== exercise_index ? faUpRightAndDownLeftFromCenter : faDownLeftAndUpRightToCenter" fixed-width></FontAwesomeIcon>
|
||||||
</div>
|
</button>
|
||||||
</th>
|
</span>
|
||||||
</tr>
|
<KeepAlive>
|
||||||
<tr :class="`font-medium text-slate-600 dark:text-slate-200 ${collapsed_panels.includes(exercise_index) ? 'hidden' : ''}`">
|
<TheScoreTable
|
||||||
<th class="border-b border-slate-100 dark:border-slate-700 p-3 pl-6 text-left">User</th>
|
v-show="fullscreen_panel === false"
|
||||||
<th
|
:exercise="exercise"
|
||||||
v-for="(task, task_index) in exercise.tasks"
|
:exercise_index="exercise_index"
|
||||||
:key="task.name"
|
></TheScoreTable>
|
||||||
class="border-b border-slate-100 dark:border-slate-700 p-3 align-top"
|
</KeepAlive>
|
||||||
:title="task.description"
|
<KeepAlive>
|
||||||
>
|
<TheFullScreenScoreGrid
|
||||||
<div class="flex flex-col">
|
v-if="fullscreen_panel !== false"
|
||||||
<span class="text-center font-normal text-sm dark:text-blue-200 text-slate-500 text-nowrap">Task {{ task_index + 1 }}</span>
|
:exercise="exercises[fullscreen_panel]"
|
||||||
<i class="text-center">{{ task.name }}</i>
|
:exercise_index="exercise_index"
|
||||||
</div>
|
></TheFullScreenScoreGrid>
|
||||||
</th>
|
</KeepAlive>
|
||||||
<th class="border-b border-slate-100 dark:border-slate-700 p-3 text-left">Progress</th>
|
</div>
|
||||||
</tr>
|
</template>
|
||||||
</thead>
|
</template>
|
||||||
<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="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] }}
|
|
||||||
</span>
|
|
||||||
<span v-else></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>
|
|
||||||
|
|
|
||||||
244
src/components/scoreViews/TheFullScreenScoreGrid.vue
Normal file
244
src/components/scoreViews/TheFullScreenScoreGrid.vue
Normal file
|
|
@ -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>
|
||||||
151
src/components/scoreViews/TheScoreTable.vue
Normal file
151
src/components/scoreViews/TheScoreTable.vue
Normal file
|
|
@ -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>
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
export const darkModeOn = ref(true)
|
export const darkModeOn = ref(true)
|
||||||
export const darkModeEnabled = computed(() => darkModeOn.value)
|
export const darkModeEnabled = computed(() => darkModeOn.value)
|
||||||
|
|
||||||
|
export const fullscreenModeOn = ref(false)
|
||||||
Loading…
Reference in a new issue