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

chg: [front] Formatted all files

Browse source
This commit is contained in:
Sami Mokaddem 2024-07-25 11:33:58 +02:00
parent 76ce0607f7
commit 586a5585be
29 changed files with 1423 additions and 1145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
.vite/deps/_metadata.json Normal file
View file

@ -0,0 +1,8 @@
{
"hash": "d30f2833",
"configHash": "e49d25ea",
"lockfileHash": "e3b0c442",
"browserHash": "f22e7dd7",
"optimized": {},
"chunks": {}
}

3
.vite/deps/package.json Normal file
View file

@ -0,0 +1,3 @@
{
"type": "module"
}

7
src/App.vue
View file

@ -5,16 +5,14 @@ import TheAdminPanel from './components/TheAdminPanel.vue'
import TheSocketConnectionState from './components/TheSocketConnectionState.vue' import TheSocketConnectionState from './components/TheSocketConnectionState.vue'
import TheDahboard from './TheDahboard.vue' import TheDahboard from './TheDahboard.vue'
import Toaster from '@/components/elements/Toaster.vue' import Toaster from '@/components/elements/Toaster.vue'
import { socketConnected } from "@/socket"; import { socketConnected } from '@/socket'
import { darkModeEnabled } from "@/settings.js" import { darkModeEnabled } from '@/settings.js'
onMounted(() => { onMounted(() => {
if (darkModeEnabled.value) { if (darkModeEnabled.value) {
document.getElementsByTagName('body')[0].classList.add('dark') document.getElementsByTagName('body')[0].classList.add('dark')
} }
}) })
</script> </script>
<template> <template>
@ -65,5 +63,4 @@ body {
/* cyan-400 */ /* cyan-400 */
/* filter: invert(71%) sepia(97%) saturate(1333%) hue-rotate(147deg) brightness(95%) contrast(96%); */ /* filter: invert(71%) sepia(97%) saturate(1333%) hue-rotate(147deg) brightness(95%) contrast(96%); */
} }
</style> </style>

6
src/TheDahboard.vue
View file

@ -2,9 +2,8 @@
import { onMounted, watch } from 'vue' 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" import { fullscreenModeOn } from '@/settings.js'
watch(socketConnected, (isConnected) => { watch(socketConnected, (isConnected) => {
if (isConnected) { if (isConnected) {
@ -16,7 +15,6 @@ watch(socketConnected, (isConnected) => {
onMounted(() => { onMounted(() => {
fullReload() fullReload()
}) })
</script> </script>
<template> <template>

12
src/assets/main.css
View file

@ -1,7 +1,7 @@
@import "tailwindcss/base"; @import 'tailwindcss/base';
@import "tailwindcss/components"; @import 'tailwindcss/components';
@import "tailwindcss/utilities"; @import 'tailwindcss/utilities';
@import "./styled-components/toggle.css"; @import './styled-components/toggle.css';
@import "./styled-components/button.css"; @import './styled-components/button.css';
@import "./styled-components/transitions.css"; @import './styled-components/transitions.css';

13
src/assets/styled-components/button.css
View file

@ -1,4 +1,3 @@
.btn { .btn {
@apply px-2 py-1 font-semibold rounded border text-nowrap select-none; @apply px-2 py-1 font-semibold rounded border text-nowrap select-none;
@apply transition-all duration-75; @apply transition-all duration-75;
@ -20,7 +19,7 @@
&.btn:not(:disabled) { &.btn:not(:disabled) {
@apply hover:bg-slate-200 hover:border-slate-300; @apply hover:bg-slate-200 hover:border-slate-300;
@apply active:scale-90 @apply active:scale-90;
} }
&.btn:disabled { &.btn:disabled {
@ -53,27 +52,27 @@
&.btn-outline-primary:not(:disabled) { &.btn-outline-primary:not(:disabled) {
@apply hover:bg-blue-600 hover:border-blue-700 hover:text-white; @apply hover:bg-blue-600 hover:border-blue-700 hover:text-white;
@apply border-blue-700 hover:border-blue-800 @apply border-blue-700 hover:border-blue-800;
} }
&.btn-outline-info:not(:disabled) { &.btn-outline-info:not(:disabled) {
@apply hover:bg-blue-500 hover:border-blue-700 hover:text-white; @apply hover:bg-blue-500 hover:border-blue-700 hover:text-white;
@apply border-blue-700 hover:border-blue-800 @apply border-blue-700 hover:border-blue-800;
} }
&.btn-outline-danger:not(:disabled) { &.btn-outline-danger:not(:disabled) {
@apply hover:bg-red-500 hover:border-red-700 hover:text-white; @apply hover:bg-red-500 hover:border-red-700 hover:text-white;
@apply border-red-700 hover:border-red-800 @apply border-red-700 hover:border-red-800;
} }
&.btn-outline-success:not(:disabled) { &.btn-outline-success:not(:disabled) {
@apply hover:bg-green-500 hover:border-green-700 hover:text-white; @apply hover:bg-green-500 hover:border-green-700 hover:text-white;
@apply border-green-700 hover:border-green-800 @apply border-green-700 hover:border-green-800;
} }
&.btn-outline-warning:not(:disabled) { &.btn-outline-warning:not(:disabled) {
@apply hover:bg-amber-500 hover:border-amber-700 hover:text-white; @apply hover:bg-amber-500 hover:border-amber-700 hover:text-white;
@apply border-amber-700 hover:border-amber-800 @apply border-amber-700 hover:border-amber-800;
} }
&.btn-link:not(:disabled) { &.btn-link:not(:disabled) {

28
src/assets/styled-components/toggle.css
View file

@ -17,62 +17,74 @@
0 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset,
var(--togglehandleborder); var(--togglehandleborder);
@apply text-slate-500; @apply text-slate-500;
&:focus-visible { &:focus-visible {
@apply outline outline-2 outline-offset-2; @apply outline outline-2 outline-offset-2;
} }
&:hover { &:hover {
@apply bg-current; @apply bg-current;
} }
&:checked, &:checked,
&[aria-checked="true"] { &[aria-checked='true'] {
background-image: none; background-image: none;
--handleoffsetcalculator: var(--handleoffset); --handleoffsetcalculator: var(--handleoffset);
} }
&:indeterminate { &:indeterminate {
box-shadow: box-shadow:
calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset; 0 0 0 2px var(--tglbg) inset;
} }
&:disabled { &:disabled {
@apply cursor-not-allowed bg-transparent opacity-30; @apply cursor-not-allowed bg-transparent opacity-30;
--togglehandleborder: 0 0 0 3px #000 inset, --togglehandleborder: 0 0 0 3px #000 inset, var(--handleoffsetcalculator) 0 0 3px #000 inset;
var(--handleoffsetcalculator) 0 0 3px #000 inset;
} }
&.toggle-success { &.toggle-success {
&:focus-visible { &:focus-visible {
@apply outline-green-400; @apply outline-green-400;
} }
&:checked, &:checked,
&[aria-checked="true"] { &[aria-checked='true'] {
@apply border-green-500 bg-green-400 text-slate-900 border-opacity-10; @apply border-green-500 bg-green-400 text-slate-900 border-opacity-10;
} }
} }
&.toggle-warning { &.toggle-warning {
&:focus-visible { &:focus-visible {
@apply outline-amber-400; @apply outline-amber-400;
} }
&:checked, &:checked,
&[aria-checked="true"] { &[aria-checked='true'] {
@apply border-amber-500 bg-amber-400 text-slate-900 border-opacity-10; @apply border-amber-500 bg-amber-400 text-slate-900 border-opacity-10;
} }
} }
&.toggle-info { &.toggle-info {
&:focus-visible { &:focus-visible {
@apply outline-blue-400; @apply outline-blue-400;
} }
&:checked, &:checked,
&[aria-checked="true"] { &[aria-checked='true'] {
@apply border-blue-500 bg-blue-400 text-slate-900 border-opacity-10; @apply border-blue-500 bg-blue-400 text-slate-900 border-opacity-10;
} }
} }
&.toggle-danger { &.toggle-danger {
&:focus-visible { &:focus-visible {
@apply outline-red-400; @apply outline-red-400;
} }
&:checked, &:checked,
&[aria-checked="true"] { &[aria-checked='true'] {
@apply border-red-500 bg-red-400 text-slate-900 border-opacity-10; @apply border-red-500 bg-red-400 text-slate-900 border-opacity-10;
} }
} }
} }

72
src/components/LiveLogsUserActivityGraph.vue
View file

@ -1,55 +1,43 @@
<script setup> <script setup>
import { ref, watch, computed } from "vue" import { ref, watch, computed } from 'vue'
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', 'ultra_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)
const bufferSizeMin = computed(() => userActivityConfig.value.timestamp_min) const bufferSizeMin = computed(() => userActivityConfig.value.timestamp_min)
const chartInitSeries = computed(() => Array.from(Array(bufferSize.value)).map(() => 0)) const chartInitSeries = computed(() => Array.from(Array(bufferSize.value)).map(() => 0))
const hasActivity = computed(() => userActivity.value.length != 0) const hasActivity = computed(() => userActivity.value.length != 0)
const chartSeries = computed(() => { const chartSeries = computed(() => {
return !hasActivity.value ? chartInitSeries.value : activitySeries.value return !hasActivity.value ? chartInitSeries.value : activitySeries.value
}) })
const activitySeries = computed(() => { const activitySeries = computed(() => {
const data = userActivity.value[props.user_id] === undefined ? chartInitSeries.value : userActivity.value[props.user_id] const data =
userActivity.value[props.user_id] === undefined
? chartInitSeries.value
: userActivity.value[props.user_id]
return data return data
}) })
const colorRanges = [0, 1, 2, 3, 4, 5, 1000] const colorRanges = [0, 1, 2, 3, 4, 5, 1000]
const palleteColor = 'blue' const palleteColor = 'blue'
const colorPalleteIndexDark = [ const colorPalleteIndexDark = ['900', '700', '600', '500', '400', '300', '200']
'900', const colorPalleteIndexLight = ['50', '100', '300', '400', '500', '600', '700']
'700',
'600',
'500',
'400',
'300',
'200',
]
const colorPalleteIndexLight = [
'50',
'100',
'300',
'400',
'500',
'600',
'700',
]
function getPalleteIndexFromValue(value) { function getPalleteIndexFromValue(value) {
for (let palleteIndex = 0; palleteIndex < colorRanges.length; palleteIndex++) { for (let palleteIndex = 0; palleteIndex < colorRanges.length; palleteIndex++) {
const colorRangeValue = colorRanges[palleteIndex]; const colorRangeValue = colorRanges[palleteIndex]
if (value <= colorRangeValue) { if (value <= colorRangeValue) {
return darkModeEnabled.value ? colorPalleteIndexDark[palleteIndex] : colorPalleteIndexLight[palleteIndex] return darkModeEnabled.value
? colorPalleteIndexDark[palleteIndex]
: colorPalleteIndexLight[palleteIndex]
} }
} }
} }
</script> </script>
<template> <template>
@ -60,7 +48,11 @@
<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: ${(((props.ultra_compact_view ? 120 : 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>

170
src/components/TheAdminPanel.vue
View file

@ -1,43 +1,58 @@
<script setup> <script setup>
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { exercises, selected_exercises, diagnostic, fullReload, resetAllExerciseProgress, resetAll, resetLiveLogs, changeExerciseSelection, debouncedGetDiangostic, remediateSetting } from "@/socket"; import {
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' exercises,
import { faScrewdriverWrench, faTrash, faSuitcaseMedical, faGraduationCap, faBan, faRotate, faHammer, faCheck } from '@fortawesome/free-solid-svg-icons' selected_exercises,
import { toast } from '@/utils.js' diagnostic,
fullReload,
resetAllExerciseProgress,
resetAll,
resetLiveLogs,
changeExerciseSelection,
debouncedGetDiangostic,
remediateSetting
} from '@/socket'
import {
faScrewdriverWrench,
faTrash,
faSuitcaseMedical,
faGraduationCap,
faBan,
faRotate,
faHammer,
faCheck
} from '@fortawesome/free-solid-svg-icons'
import { toast } from '@/utils.js'
const admin_modal = ref(null) const admin_modal = ref(null)
const clickedButtons = ref([]) const clickedButtons = ref([])
const diagnosticLoading = computed(() => Object.keys(diagnostic.value).length == 0) const diagnosticLoading = computed(() => Object.keys(diagnostic.value).length == 0)
const isMISPOnline = computed(() => diagnostic.value.version?.version !== undefined) const isMISPOnline = computed(() => diagnostic.value.version?.version !== undefined)
const isZMQActive = computed(() => diagnostic.value.zmq_message_count > 0) const isZMQActive = computed(() => diagnostic.value.zmq_message_count > 0)
const ZMQMessageCount = computed(() => diagnostic.value.zmq_message_count) const ZMQMessageCount = computed(() => diagnostic.value.zmq_message_count)
function changeSelectionState(state_enabled, exec_uuid) { function changeSelectionState(state_enabled, exec_uuid) {
changeExerciseSelection(exec_uuid, state_enabled); changeExerciseSelection(exec_uuid, state_enabled)
} }
function settingHandler(setting) { function settingHandler(setting) {
remediateSetting(setting) remediateSetting(setting)
} }
const showModal = ref(false) const showModal = ref(false)
function showTheModal() { function showTheModal() {
showModal.value = true showModal.value = true
clickedButtons.value = [] clickedButtons.value = []
debouncedGetDiangostic() debouncedGetDiangostic()
} }
</script> </script>
<template> <template>
<button <button @click="showTheModal()" class="btn btn-primary">
@click="showTheModal()"
class="btn btn-primary"
>
<FontAwesomeIcon :icon="faScrewdriverWrench" class="mr-1"></FontAwesomeIcon> <FontAwesomeIcon :icon="faScrewdriverWrench" class="mr-1"></FontAwesomeIcon>
Admin panel Admin panel
</button> </button>
<Modal :showModal="showModal" @modal-close="showModal = false"> <Modal :showModal="showModal" @modal-close="showModal = false">
<template #header> <template #header>
@ -49,10 +64,7 @@
<template #body> <template #body>
<div class="dark:text-slate-700 text-slate-700"> <div class="dark:text-slate-700 text-slate-700">
<div class="flex mb-5 gap-2"> <div class="flex mb-5 gap-2">
<button <button @click="fullReload()" class="h-10 min-h-10 font-semibold btn-info btn gap-1">
@click="fullReload()"
class="h-10 min-h-10 font-semibold btn-info btn gap-1"
>
<FontAwesomeIcon :icon="faRotate" size="lg" fixed-width></FontAwesomeIcon> <FontAwesomeIcon :icon="faRotate" size="lg" fixed-width></FontAwesomeIcon>
Full refresh Full refresh
</button> </button>
@ -63,10 +75,7 @@
<FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon> <FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
Reset All Exercises Reset All Exercises
</button> </button>
<button <button @click="resetAll()" class="h-10 min-h-10 font-semibold btn-danger btn gap-1">
@click="resetAll()"
class="h-10 min-h-10 font-semibold btn-danger btn gap-1"
>
<FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon> <FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
Reset All Reset All
</button> </button>
@ -83,18 +92,16 @@
<FontAwesomeIcon :icon="faGraduationCap" class="mr-1"></FontAwesomeIcon> <FontAwesomeIcon :icon="faGraduationCap" class="mr-1"></FontAwesomeIcon>
Selected Exercises Selected Exercises
</h3> </h3>
<div <div v-for="exercise in exercises" :key="exercise.name" class="form-control pl-3">
v-for="(exercise) in exercises"
:key="exercise.name"
class="form-control pl-3"
>
<label class="label cursor-pointer justify-start"> <label class="label cursor-pointer justify-start">
<input <input
@change="changeSelectionState($event.target.checked, exercise.uuid)" @change="changeSelectionState($event.target.checked, exercise.uuid)"
type="checkbox" type="checkbox"
:checked="selected_exercises.includes(exercise.uuid)" :checked="selected_exercises.includes(exercise.uuid)"
:value="exercise.uuid" :value="exercise.uuid"
:class="`checkbox ${selected_exercises.includes(exercise.uuid) ? 'checkbox-success' : ''} [--fallback-bc:#94a3b8]`" :class="`checkbox ${
selected_exercises.includes(exercise.uuid) ? 'checkbox-success' : ''
} [--fallback-bc:#94a3b8]`"
/> />
<span class="font-mono font-semibold text-base ml-3">{{ exercise.name }}</span> <span class="font-mono font-semibold text-base ml-3">{{ exercise.name }}</span>
</label> </label>
@ -107,12 +114,17 @@
<h4 class="font-semibold ml-1 my-3"> <h4 class="font-semibold ml-1 my-3">
<strong>MISP Status:</strong> <strong>MISP Status:</strong>
<span class="ml-2"> <span class="ml-2">
<span :class="{ <span
:class="{
'rounded-lg py-1 px-2 inline-flex': true, 'rounded-lg py-1 px-2 inline-flex': true,
'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200': diagnosticLoading, 'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200':
'dark:bg-green-700 bg-green-500 text-slate-800 dark:text-slate-200': !diagnosticLoading && isMISPOnline, diagnosticLoading,
'dark:bg-red-700 bg-red-700 text-slate-200 dark:text-slate-200': !diagnosticLoading && !isMISPOnline, 'dark:bg-green-700 bg-green-500 text-slate-800 dark:text-slate-200':
}"> !diagnosticLoading && isMISPOnline,
'dark:bg-red-700 bg-red-700 text-slate-200 dark:text-slate-200':
!diagnosticLoading && !isMISPOnline
}"
>
<Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading> <Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading>
<span v-else class="font-bold"> <span v-else class="font-bold">
{{ !isMISPOnline ? 'Unreachable' : `Online (${diagnostic['version']['version']})` }} {{ !isMISPOnline ? 'Unreachable' : `Online (${diagnostic['version']['version']})` }}
@ -123,15 +135,24 @@
<h4 class="font-semibold ml-1 my-3"> <h4 class="font-semibold ml-1 my-3">
<strong>ZMQ Status:</strong> <strong>ZMQ Status:</strong>
<span class="ml-2"> <span class="ml-2">
<span :class="{ <span
:class="{
'rounded-lg py-1 px-2 inline-flex': true, 'rounded-lg py-1 px-2 inline-flex': true,
'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200': diagnosticLoading, 'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200':
'dark:bg-green-700 bg-green-500 text-slate-800 dark:text-slate-200': !diagnosticLoading && isZMQActive, diagnosticLoading,
'dark:bg-red-700 bg-red-700 text-slate-200 dark:text-slate-200': !diagnosticLoading && !isZMQActive, 'dark:bg-green-700 bg-green-500 text-slate-800 dark:text-slate-200':
}"> !diagnosticLoading && isZMQActive,
'dark:bg-red-700 bg-red-700 text-slate-200 dark:text-slate-200':
!diagnosticLoading && !isZMQActive
}"
>
<Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading> <Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading>
<span v-else class="font-bold"> <span v-else class="font-bold">
{{ !isZMQActive ? 'No message received yet' : `ZMQ Active (${ZMQMessageCount} messages)` }} {{
!isZMQActive
? 'No message received yet'
: `ZMQ Active (${ZMQMessageCount} messages)`
}}
</span> </span>
</span> </span>
</span> </span>
@ -143,32 +164,50 @@
<div v-if="diagnosticLoading" class="flex justify-center"> <div v-if="diagnosticLoading" class="flex justify-center">
<Loading class="text-3xl"></Loading> <Loading class="text-3xl"></Loading>
</div> </div>
<table v-else class="bg-white dark:bg-slate-700 dark:text-slate-100 text-slate-700 rounded-lg shadow-xl w-full mt-2"> <table
v-else
class="bg-white dark:bg-slate-700 dark:text-slate-100 text-slate-700 rounded-lg shadow-xl w-full mt-2"
>
<thead> <thead>
<tr> <tr>
<th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">Setting</th> <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">
<th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">Value</th> Setting
<th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">Expected Value</th> </th>
<th class="border-b border-slate-200 dark:border-slate-600 p-2 text-center">Action</th> <th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">
Value
</th>
<th class="border-b border-slate-200 dark:border-slate-600 p-2 text-left">
Expected Value
</th>
<th class="border-b border-slate-200 dark:border-slate-600 p-2 text-center">
Action
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr v-for="(settingValues, setting) in diagnostic['settings']" :key="setting">
v-for="(settingValues, setting) in diagnostic['settings']"
:key="setting"
>
<td class="font-mono font-semibold text-base px-2">{{ setting }}</td> <td class="font-mono font-semibold text-base px-2">{{ setting }}</td>
<td <td
:class="`font-mono text-base tracking-tight px-2 ${settingValues.expected_value != settingValues.value ? 'text-red-600 dark:text-red-600' : ''}`" :class="`font-mono text-base tracking-tight px-2 ${
settingValues.expected_value != settingValues.value
? 'text-red-600 dark:text-red-600'
: ''
}`"
>
<i
v-if="settingValues.value === undefined || settingValues.value === null"
class="text-nowrap"
>- none -</i
> >
<i v-if="settingValues.value === undefined || settingValues.value === null" class="text-nowrap">- none -</i>
{{ settingValues.value }} {{ settingValues.value }}
</td> </td>
<td class="font-mono text-base tracking-tight px-2">{{ settingValues.expected_value }}</td> <td class="font-mono text-base tracking-tight px-2">
{{ settingValues.expected_value }}
</td>
<td class="px-2 text-center"> <td class="px-2 text-center">
<span v-if="settingValues.error === true" <span v-if="settingValues.error === true" class="text-red-600 dark:text-red-600"
class="text-red-600 dark:text-red-600" >Error: {{ settingValues.errorMessage }}</span
>Error: {{ settingValues.errorMessage }}</span> >
<button <button
v-else-if="settingValues.expected_value != settingValues.value" v-else-if="settingValues.expected_value != settingValues.value"
@click="clickedButtons.push(setting) && settingHandler(setting)" @click="clickedButtons.push(setting) && settingHandler(setting)"
@ -193,7 +232,6 @@
</table> </table>
</div> </div>
</template> </template>
</div> </div>
</template> </template>
</Modal> </Modal>

146
src/components/TheLiveLogs.vue
View file

@ -1,24 +1,29 @@
<script setup> <script setup>
import { ref, watch, computed } from "vue" import { ref, watch, computed } from 'vue'
import { notifications, userCount, notificationCounter, notificationAPICounter, toggleVerboseMode, toggleApiQueryMode } from "@/socket"; import {
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' notifications,
import { faSignal, faCloud, faCog, faUsers, faCircle } from '@fortawesome/free-solid-svg-icons' userCount,
import TheLiveLogsActivityGraphVue from "./TheLiveLogsActivityGraph.vue"; notificationCounter,
import ToggleSwitch from "@/components/elements/ToggleSwitch.vue" notificationAPICounter,
toggleVerboseMode,
toggleApiQueryMode
} from '@/socket'
import { faSignal, faCloud, faCog, faUsers, faCircle } from '@fortawesome/free-solid-svg-icons'
import TheLiveLogsActivityGraphVue from './TheLiveLogsActivityGraph.vue'
import ToggleSwitch from '@/components/elements/ToggleSwitch.vue'
const verbose = ref(false)
const api_query = ref(false)
const verbose = ref(false) watch(verbose, (newValue) => {
const api_query = ref(false)
watch(verbose, (newValue) => {
toggleVerboseMode(newValue == true) toggleVerboseMode(newValue == true)
}) })
watch(api_query, (newValue) => { watch(api_query, (newValue) => {
toggleApiQueryMode(newValue == true) toggleApiQueryMode(newValue == true)
}) })
function getClassFromResponseCode(response_code) { function getClassFromResponseCode(response_code) {
if (String(response_code).startsWith('2') || response_code == 302) { if (String(response_code).startsWith('2') || response_code == 302) {
return 'text-green-500' return 'text-green-500'
} else if (String(response_code).startsWith('5')) { } else if (String(response_code).startsWith('5')) {
@ -26,49 +31,75 @@
} else { } else {
return 'text-amber-600' return 'text-amber-600'
} }
} }
</script> </script>
<template> <template>
<div> <div>
<h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase"> <h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
<FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon> <FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon>
Live logs Live logs
</h3> </h3>
<div class="mb-2 flex flex-wrap gap-x-3"> <div class="mb-2 flex flex-wrap gap-x-3">
<span class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"> <span
class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"
>
<span class="mr-1"> <span class="mr-1">
<FontAwesomeIcon :icon="faUsers" size="sm"></FontAwesomeIcon> <FontAwesomeIcon :icon="faUsers" size="sm"></FontAwesomeIcon>
Players: Players:
</span> </span>
<span class="font-bold">{{ userCount }}</span> <span class="font-bold">{{ userCount }}</span>
</span> </span>
<span class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"> <span
class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"
>
<span class="mr-1"> <span class="mr-1">
<FontAwesomeIcon :icon="faSignal" size="sm"></FontAwesomeIcon> <FontAwesomeIcon :icon="faSignal" size="sm"></FontAwesomeIcon>
Total Queries: Total Queries:
</span> </span>
<span class="font-bold">{{ notificationCounter }}</span> <span class="font-bold">{{ notificationCounter }}</span>
</span> </span>
<span class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"> <span
class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"
>
<span class="mr-1"> <span class="mr-1">
<FontAwesomeIcon :icon="faCog" size="sm" :mask="faCloud" transform="shrink-7 left-1"></FontAwesomeIcon> <FontAwesomeIcon
:icon="faCog"
size="sm"
:mask="faCloud"
transform="shrink-7 left-1"
></FontAwesomeIcon>
Total API Queries: Total API Queries:
</span> </span>
<span class="font-bold">{{ notificationAPICounter }}</span> <span class="font-bold">{{ notificationAPICounter }}</span>
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300"> <label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300">
<input type="checkbox" class="toggle toggle-warning mr-1" :checked="verbose" @change="verbose = !verbose"/> <input
type="checkbox"
class="toggle toggle-warning mr-1"
:checked="verbose"
@change="verbose = !verbose"
/>
Verbose Verbose
</label> </label>
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300"> <label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300">
<input type="checkbox" class="toggle toggle-success mr-1" :checked="api_query" @change="api_query = !api_query"/> <input
<FontAwesomeIcon :icon="faCog" size="sm" :mask="faCloud" transform="shrink-7 left-1" class="mr-1"></FontAwesomeIcon> type="checkbox"
class="toggle toggle-success mr-1"
:checked="api_query"
@change="api_query = !api_query"
/>
<FontAwesomeIcon
:icon="faCog"
size="sm"
:mask="faCloud"
transform="shrink-7 left-1"
class="mr-1"
></FontAwesomeIcon>
API Queries API Queries
</label> </label>
</span> </span>
@ -100,7 +131,9 @@
<td <td
class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-1 pl-2 w-12 whitespace-nowrap" class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-1 pl-2 w-12 whitespace-nowrap"
> >
<FontAwesomeIcon :icon="faCircle" size="xs" <FontAwesomeIcon
:icon="faCircle"
size="xs"
:class="getClassFromResponseCode(notification.response_code)" :class="getClassFromResponseCode(notification.response_code)"
></FontAwesomeIcon> ></FontAwesomeIcon>
<pre class="inline ml-1">{{ notification.response_code }}</pre> <pre class="inline ml-1">{{ notification.response_code }}</pre>
@ -112,45 +145,58 @@
<span class="text-lg font-bold font-mono">{{ notification.user.split('@')[0] }}</span> <span class="text-lg font-bold font-mono">{{ notification.user.split('@')[0] }}</span>
<span class="text-xs font-mono">@{{ notification.user.split('@')[1] }}</span> <span class="text-xs font-mono">@{{ notification.user.split('@')[1] }}</span>
</td> </td>
<td class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-1">{{ notification.time }}</td> <td
<td class="border-b border-slate-100 dark:border-slate-700 text-sky-600 dark:text-sky-400 p-1"> class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-1"
>
{{ notification.time }}
</td>
<td
class="border-b border-slate-100 dark:border-slate-700 text-sky-600 dark:text-sky-400 p-1"
>
<div class="flex items-center"> <div class="flex items-center">
<span v-if="notification.http_method == 'POST'" <span
class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center v-if="notification.http_method == 'POST'"
dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100" class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100"
>POST</span> >POST</span
<span v-else-if="notification.http_method == 'PUT'" >
class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center <span
dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100" v-else-if="notification.http_method == 'PUT'"
>PUT</span> class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100"
<span v-else-if="notification.http_method == 'DELETE'" >PUT</span
class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center >
dark:bg-red-600 dark:text-neutral-100 bg-red-600 text-neutral-100" <span
>DEL</span> v-else-if="notification.http_method == 'DELETE'"
<span v-else class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center dark:bg-red-600 dark:text-neutral-100 bg-red-600 text-neutral-100"
class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center >DEL</span
dark:bg-blue-600 dark:text-neutral-100 bg-blue-600 text-neutral-100" >
>{{ notification.http_method }}</span> <span
v-else
class="p-1 rounded-md font-bold text-xs mr-2 w-10 inline-block text-center dark:bg-blue-600 dark:text-neutral-100 bg-blue-600 text-neutral-100"
>{{ notification.http_method }}</span
>
<FontAwesomeIcon <FontAwesomeIcon
v-if="notification.is_api_request" v-if="notification.is_api_request"
class="text-slate-800 dark:text-slate-100 mr-1 inline-block" class="text-slate-800 dark:text-slate-100 mr-1 inline-block"
:icon="faCog" :mask="faCloud" transform="shrink-7 left-1" :icon="faCog"
:mask="faCloud"
transform="shrink-7 left-1"
></FontAwesomeIcon> ></FontAwesomeIcon>
<pre class="text-sm inline">{{ notification.url }}</pre> <pre class="text-sm inline">{{ notification.url }}</pre>
</div> </div>
</td> </td>
<td class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-300 p-1"> <td
<div v-if="notification.http_method == 'POST'" class="border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-300 p-1"
>
<div
v-if="notification.http_method == 'POST'"
class="border border-slate-200 dark:border-slate-600 bg-slate-100 dark:bg-slate-600 rounded-md" class="border border-slate-200 dark:border-slate-600 bg-slate-100 dark:bg-slate-600 rounded-md"
> >
<pre <pre class="p-1 text-xs">{{ JSON.stringify(notification.payload, null, 2) }}</pre>
class="p-1 text-xs"
>{{ JSON.stringify(notification.payload, null, 2) }}</pre>
</div> </div>
</td> </td>
</tr> </tr>
</template> </template>
</tbody> </tbody>
</table> </table>
</div> </div>
</template> </template>

60
src/components/TheLiveLogsActivityGraph.vue
View file

@ -1,22 +1,20 @@
<script setup> <script setup>
import { ref, watch, computed } from "vue" import { ref, watch, computed } from 'vue'
import { notificationHistory, notificationHistoryConfig } from "@/socket"; import { notificationHistory, notificationHistoryConfig } from '@/socket'
import { darkModeEnabled } from "@/settings.js" import { darkModeEnabled } from '@/settings.js'
const theChart = ref(null) const theChart = ref(null)
const chartInitSeries = [ const chartInitSeries = [{ data: Array.from(Array(12 * 20)).map(() => 0) }]
{data: Array.from(Array(12*20)).map(()=> 0)} const hasActivity = computed(() => notificationHistory.value.length > 0)
] const chartSeries = computed(() => {
const hasActivity = computed(() => notificationHistory.value.length > 0)
const chartSeries = computed(() => {
return notificationHistory.value ? notificationHistorySeries.value : chartInitSeries.value return notificationHistory.value ? notificationHistorySeries.value : chartInitSeries.value
}) })
const notificationHistorySeries = computed(() => { const notificationHistorySeries = computed(() => {
return [{data: Array.from(notificationHistory.value)}] return [{ data: Array.from(notificationHistory.value) }]
}) })
const chartOptions = computed(() => { const chartOptions = computed(() => {
return { return {
chart: { chart: {
type: 'bar', type: 'bar',
@ -37,8 +35,8 @@
animations: { animations: {
enabled: false, enabled: false,
easing: 'easeinout', easing: 'easeinout',
speed: 200, speed: 200
}, }
}, },
colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'], colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
plotOptions: { plotOptions: {
@ -50,33 +48,43 @@
min: 0, min: 0,
max: 20, max: 20,
labels: { labels: {
show: false, show: false
} }
}, },
tooltip: { tooltip: {
enabled: false, enabled: false
},
} }
}) }
})
</script> </script>
<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-30`"> <div :class="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-30`">
<div class="text-2xs flex justify-between h-full items-center text-slate-500 dark:text-slate-300 select-none"> <div
<span class="-rotate-90 w-8 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span> class="text-2xs flex justify-between h-full items-center text-slate-500 dark:text-slate-300 select-none"
>
<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>
<span class="-rotate-90 w-8 text-lg">–</span> <span class="-rotate-90 w-8 text-lg">–</span>
<span class="-rotate-90 w-8 text-xs">–</span> <span class="-rotate-90 w-8 text-xs">–</span>
<span class="-rotate-90 w-8 -mr-1.5">- 0min</span> <span class="-rotate-90 w-8 -mr-1.5">- 0min</span>
</div> </div>
</div> </div>
<i :class="['text-center text-slate-600 dark:text-slate-400', hasActivity ? 'hidden' : 'block']"> <i
:class="['text-center text-slate-600 dark:text-slate-400', hasActivity ? 'hidden' : 'block']"
>
- No recorded activity - - No recorded activity -
</i> </i>
<apexchart <apexchart
ref="theChart" :class="hasActivity ? 'block' : 'absolute h-8 w-full'" height="32" width="100%" ref="theChart"
:class="hasActivity ? 'block' : 'absolute h-8 w-full'"
height="32"
width="100%"
:options="chartOptions" :options="chartOptions"
:series="chartSeries" :series="chartSeries"
></apexchart> ></apexchart>

54
src/components/ThePlayerGrid.vue
View file

@ -1,30 +1,30 @@
<script setup> <script setup>
import { ref, computed } from "vue"; import { ref, computed } from 'vue'
import { progresses, userCount } from "@/socket"; import { progresses, userCount } from '@/socket'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faUsers } from '@fortawesome/free-solid-svg-icons'
import { faUsers } from '@fortawesome/free-solid-svg-icons' import { darkModeEnabled } from '@/settings.js'
import { darkModeEnabled } from "@/settings.js" import LiveLogsUserActivityGraph from './LiveLogsUserActivityGraph.vue'
import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
const compactGrid = computed(() => {
const compactGrid = computed(() => { return userCount.value > 70 }) return userCount.value > 70
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) {
return -1; return -1
} }
if (a.email > b.email) { if (a.email > b.email) {
return 1; return 1
} }
return 0; return 0
})) })
)
</script> </script>
<template> <template>
<div class=" <div
mt-2 px-2 pt-1 pb-2 rounded border class="mt-2 px-2 pt-1 pb-2 rounded border bg-slate-100 border-slate-300 dark:bg-slate-600 dark:border-slate-800"
bg-slate-100 border-slate-300 dark:bg-slate-600 dark:border-slate-800 >
">
<h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase"> <h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
<FontAwesomeIcon :icon="faUsers"></FontAwesomeIcon> <FontAwesomeIcon :icon="faUsers"></FontAwesomeIcon>
Active Players Active Players
@ -32,18 +32,20 @@
<div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`"> <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"
class="bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg border-slate-700" class="bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg border-slate-700"
> >
<span class=" <span class="flex p-2 mb-1 text-slate-600 dark:text-slate-400">
flex p-2 mb-1
text-slate-600 dark:text-slate-400
">
<span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : '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"> <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate">
<span :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`">{{ progress.email.split('@')[0] }}</span> <span
<span :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`">@{{ progress.email.split('@')[1] }}</span> :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`"
>{{ progress.email.split('@')[0] }}</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"
@ -54,5 +56,5 @@
</span> </span>
</span> </span>
</div> </div>
</div> </div>
</template> </template>

52
src/components/TheScores.vue
View file

@ -1,17 +1,21 @@
<script setup> <script setup>
import { ref, computed } from "vue"; import { ref, computed } from 'vue'
import { active_exercises as exercises } from "@/socket"; import { active_exercises as exercises } from '@/socket'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import {
import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter, faWarning } from '@fortawesome/free-solid-svg-icons' faGraduationCap,
import TheScoreTable from "./scoreViews/TheScoreTable.vue" faUpRightAndDownLeftFromCenter,
import TheFullScreenScoreGrid from "./scoreViews/TheFullScreenScoreGrid.vue" faDownLeftAndUpRightToCenter,
import ThePlayerGrid from "./ThePlayerGrid.vue" faWarning
import { fullscreenModeOn } from "@/settings.js" } from '@fortawesome/free-solid-svg-icons'
import TheScoreTable from './scoreViews/TheScoreTable.vue'
import TheFullScreenScoreGrid from './scoreViews/TheFullScreenScoreGrid.vue'
import ThePlayerGrid from './ThePlayerGrid.vue'
import { fullscreenModeOn } from '@/settings.js'
const hasExercises = computed(() => exercises.value.length > 0) const hasExercises = computed(() => exercises.value.length > 0)
const fullscreen_panel = ref(false) const fullscreen_panel = ref(false)
function toggleFullScreen(exercise_index) { function toggleFullScreen(exercise_index) {
if (fullscreen_panel.value === exercise_index) { if (fullscreen_panel.value === exercise_index) {
fullscreen_panel.value = false fullscreen_panel.value = false
fullscreenModeOn.value = false fullscreenModeOn.value = false
@ -19,7 +23,7 @@
fullscreen_panel.value = exercise_index fullscreen_panel.value = exercise_index
fullscreenModeOn.value = true fullscreenModeOn.value = true
} }
} }
</script> </script>
<template> <template>
@ -28,10 +32,7 @@
Active Exercises Active Exercises
</h3> </h3>
<div <div v-if="!hasExercises" class="text-slate-600 dark:text-slate-400 p-3 pl-6">
v-if="!hasExercises"
class="text-slate-600 dark:text-slate-400 p-3 pl-6"
>
<Alert variant="warning"> <Alert variant="warning">
<strong class="">No Exercise available.</strong> <strong class="">No Exercise available.</strong>
<span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span> <span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span>
@ -40,14 +41,14 @@
<ThePlayerGrid></ThePlayerGrid> <ThePlayerGrid></ThePlayerGrid>
</div> </div>
<template <template v-for="(exercise, exercise_index) in exercises" :key="exercise.name">
v-for="(exercise, exercise_index) in exercises"
:key="exercise.name"
>
<div :class="fullscreen_panel === false ? 'relative min-w-fit' : ''"> <div :class="fullscreen_panel === false ? 'relative min-w-fit' : ''">
<span <span
v-show="fullscreen_panel === false || fullscreen_panel === exercise_index" v-show="fullscreen_panel === false || fullscreen_panel === exercise_index"
:class="['inline-block absolute shadow-lg z-50', fullscreen_panel === false ? 'top-0 -right-7' : 'top-2 right-2']" :class="[
'inline-block absolute shadow-lg z-50',
fullscreen_panel === false ? 'top-0 -right-7' : 'top-2 right-2'
]"
> >
<button <button
@click="toggleFullScreen(exercise_index)" @click="toggleFullScreen(exercise_index)"
@ -58,7 +59,14 @@
${fullscreen_panel === false ? 'rounded-r-md' : 'rounded-bl-md'} ${fullscreen_panel === false ? 'rounded-r-md' : 'rounded-bl-md'}
`" `"
> >
<FontAwesomeIcon :icon="fullscreen_panel !== exercise_index ? faUpRightAndDownLeftFromCenter : faDownLeftAndUpRightToCenter" fixed-width></FontAwesomeIcon> <FontAwesomeIcon
:icon="
fullscreen_panel !== exercise_index
? faUpRightAndDownLeftFromCenter
: faDownLeftAndUpRightToCenter
"
fixed-width
></FontAwesomeIcon>
</button> </button>
</span> </span>
<KeepAlive> <KeepAlive>

42
src/components/TheSocketConnectionState.vue
View file

@ -1,46 +1,42 @@
<script setup> <script setup>
import { ref, onMounted } from "vue" import { ref, onMounted } from 'vue'
import { socketConnected, zmqLastTime } from "@/socket"; import { socketConnected, zmqLastTime } from '@/socket'
const zmqLastTimeSecond = ref('?') const zmqLastTimeSecond = ref('?')
function refreshLastTime() { function refreshLastTime() {
if (zmqLastTime.value !== false) { if (zmqLastTime.value !== false) {
zmqLastTimeSecond.value = parseInt(((new Date()).getTime() - zmqLastTime.value * 1000) / 1000) zmqLastTimeSecond.value = parseInt((new Date().getTime() - zmqLastTime.value * 1000) / 1000)
} else { } else {
zmqLastTimeSecond.value = '?' zmqLastTimeSecond.value = '?'
} }
} }
onMounted(() => { onMounted(() => {
setInterval(() => { setInterval(() => {
refreshLastTime() refreshLastTime()
}, 1000) }, 1000)
}) })
</script> </script>
<template> <template>
<span class="flex flex-col justify-center mt-1"> <span class="flex flex-col justify-center mt-1">
<span :class="{ <span
:class="{
'px-2 rounded-md inline-block w-48 leading-4': true, 'px-2 rounded-md inline-block w-48 leading-4': true,
'text-slate-900 dark:text-slate-400': socketConnected, 'text-slate-900 dark:text-slate-400': socketConnected,
'text-slate-50 bg-red-600 px-2 py-1': !socketConnected, 'text-slate-50 bg-red-600 px-2 py-1': !socketConnected
}"> }"
>
<span class="mr-1">Socket.IO:</span> <span class="mr-1">Socket.IO:</span>
<span v-show="socketConnected" class="font-semibold text-green-600 dark:text-green-400">Connected</span> <span v-show="socketConnected" class="font-semibold text-green-600 dark:text-green-400"
>Connected</span
>
<span v-show="!socketConnected" class="font-semibold text-slate-50">Disconnected</span> <span v-show="!socketConnected" class="font-semibold text-slate-50">Disconnected</span>
</span> </span>
<span <span v-if="socketConnected" class="text-xs font-thin leading-3 inline-block text-center">
v-if="socketConnected" <template v-if="zmqLastTimeSecond == 0"> online </template>
class="text-xs font-thin leading-3 inline-block text-center" <template v-else> Last keep-alive: {{ zmqLastTimeSecond }}s ago </template>
>
<template v-if="zmqLastTimeSecond == 0">
online
</template>
<template v-else>
Last keep-alive: {{ zmqLastTimeSecond }}s ago
</template>
</span> </span>
</span> </span>
</template> </template>

33
src/components/TheThemeButton.vue
View file

@ -1,19 +1,18 @@
<script setup> <script setup>
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons' import { darkModeOn } from '@/settings.js'
import { darkModeOn } from "@/settings.js"
const darkMode = ref(darkModeOn.value) const darkMode = ref(darkModeOn.value)
watch(darkMode, (newValue) => { watch(darkMode, (newValue) => {
darkModeOn.value = newValue darkModeOn.value = newValue
if (newValue) { if (newValue) {
document.getElementsByTagName('body')[0].classList.add('dark') document.getElementsByTagName('body')[0].classList.add('dark')
} else { } else {
document.getElementsByTagName('body')[0].classList.remove('dark') document.getElementsByTagName('body')[0].classList.remove('dark')
} }
}) })
</script> </script>
<template> <template>
@ -23,7 +22,8 @@
type="checkbox" type="checkbox"
@click="darkMode = !darkMode" @click="darkMode = !darkMode"
:checked="darkMode" :checked="darkMode"
class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]" /> class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]"
/>
<svg <svg
class="stroke-slate-800 dark:stroke-slate-100 fill-slate-800 dark:fill-slate-100 col-start-1 row-start-1" class="stroke-slate-800 dark:stroke-slate-100 fill-slate-800 dark:fill-slate-100 col-start-1 row-start-1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -34,10 +34,12 @@
stroke="currentColor" stroke="currentColor"
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round"
>
<circle cx="12" cy="12" r="5" /> <circle cx="12" cy="12" r="5" />
<path <path
d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" /> d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
/>
</svg> </svg>
<svg <svg
class="dark:stroke-slate-800 stroke-slate-700 dark:fill-slate-800 fill-slate-700 col-start-2 row-start-1" class="dark:stroke-slate-800 stroke-slate-700 dark:fill-slate-800 fill-slate-700 col-start-2 row-start-1"
@ -49,7 +51,8 @@
stroke="currentColor" stroke="currentColor"
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round"
>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg> </svg>
</label> </label>
@ -77,7 +80,7 @@
@apply bg-current; @apply bg-current;
} }
&:checked, &:checked,
&[aria-checked="true"] { &[aria-checked='true'] {
background-image: none; background-image: none;
--handleoffsetcalculator: var(--handleoffset); --handleoffsetcalculator: var(--handleoffset);
} }
@ -89,7 +92,7 @@
} }
&:disabled { &:disabled {
@apply cursor-not-allowed bg-transparent opacity-30; @apply cursor-not-allowed bg-transparent opacity-30;
--togglehandleborder: 0 0 0 3px #000 inset, --togglehandleborder: 0 0 0 3px #000 inset, var(--handleoffsetcalculator) 0 0 3px #000 inset;
var(--handleoffsetcalculator) 0 0 3px #000 inset;
} }
}</style> }
</style>

2
src/components/elements/Loading.vue
View file

@ -1,5 +1,5 @@
<script setup> <script setup>
import { faSpinner } from '@fortawesome/free-solid-svg-icons' import { faSpinner } from '@fortawesome/free-solid-svg-icons'
</script> </script>
<template> <template>

11
src/components/elements/Modal.vue
View file

@ -1,14 +1,14 @@
<script setup> <script setup>
import { ref, watch } from "vue"; import { ref, watch } from 'vue'
import { faTimes } from '@fortawesome/free-solid-svg-icons' import { faTimes } from '@fortawesome/free-solid-svg-icons'
const props = defineProps({ const props = defineProps({
showModal: Boolean, showModal: Boolean
}); })
const dialog = ref(null) const dialog = ref(null)
const emit = defineEmits(["modal-close"]); const emit = defineEmits(['modal-close'])
function closeModal() { function closeModal() {
emit('modal-close') emit('modal-close')
@ -34,7 +34,8 @@ function closeModal() {
<slot name="header"></slot> <slot name="header"></slot>
</h2> </h2>
<span class="ml-auto text-xl"> <span class="ml-auto text-xl">
<button @click.stop="closeModal()" <button
@click.stop="closeModal()"
class="hover:text-slate-200 hover:dark:text-slate-50 hover:bg-slate-200/20 rounded-full p-1" class="hover:text-slate-200 hover:dark:text-slate-50 hover:bg-slate-200/20 rounded-full p-1"
> >
<FontAwesomeIcon :icon="faTimes" class="fa-fw"></FontAwesomeIcon> <FontAwesomeIcon :icon="faTimes" class="fa-fw"></FontAwesomeIcon>

5
src/components/elements/Toast.vue
View file

@ -82,7 +82,10 @@ onMounted(() => {
></FontAwesomeIcon> ></FontAwesomeIcon>
</button> </button>
</div> </div>
<div class="text-slate-600 p-1 font-light" v-if="props.message !== undefined && props.message.length > 0"> <div
class="text-slate-600 p-1 font-light"
v-if="props.message !== undefined && props.message.length > 0"
>
{{ props.message }} {{ props.message }}
</div> </div>
<div v-if="props.confirm" class="flex gap-1"> <div v-if="props.confirm" class="flex gap-1">

12
src/components/elements/ToggleSwitch.vue
View file

@ -1,11 +1,11 @@
<script setup> <script setup></script>
</script>
<template> <template>
<label class="grid cursor-pointer place-items-center"> <label class="grid cursor-pointer place-items-center">
<input <input
type="checkbox" type="checkbox"
class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]" /> class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]"
/>
</label> </label>
</template> </template>
@ -30,7 +30,7 @@
@apply bg-current; @apply bg-current;
} }
&:checked, &:checked,
&[aria-checked="true"] { &[aria-checked='true'] {
background-image: none; background-image: none;
--handleoffsetcalculator: var(--handleoffset); --handleoffsetcalculator: var(--handleoffset);
} }
@ -42,12 +42,10 @@
} }
&:disabled { &:disabled {
@apply cursor-not-allowed bg-transparent opacity-30; @apply cursor-not-allowed bg-transparent opacity-30;
--togglehandleborder: 0 0 0 3px #000 inset, --togglehandleborder: 0 0 0 3px #000 inset, var(--handleoffsetcalculator) 0 0 3px #000 inset;
var(--handleoffsetcalculator) 0 0 3px #000 inset;
} }
&-success { &-success {
} }
} }

182
src/components/scoreViews/TheFullScreenScoreGrid.vue
View file

@ -1,16 +1,15 @@
<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, progresses, userCount, setCompletedState } from '@/socket'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons' import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
import { faCircleCheck } from '@fortawesome/free-regular-svg-icons' import { darkModeEnabled } from '@/settings.js'
import { darkModeEnabled } from "@/settings.js" import LiveLogsUserActivityGraph from '../LiveLogsUserActivityGraph.vue'
import LiveLogsUserActivityGraph from "../LiveLogsUserActivityGraph.vue"
const props = defineProps(['exercise', 'exercise_index']) const props = defineProps(['exercise', 'exercise_index'])
const collapsed_panels = ref([]) const collapsed_panels = ref([])
const chartOptions = computed(() => { const chartOptions = computed(() => {
return { return {
chart: { chart: {
type: 'radialBar', type: 'radialBar',
@ -21,8 +20,8 @@
animations: { animations: {
enabled: false, enabled: false,
easing: 'easeinout', easing: 'easeinout',
speed: 200, speed: 200
}, }
}, },
colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'], colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
plotOptions: { plotOptions: {
@ -57,16 +56,16 @@
dataLabels: { dataLabels: {
show: true, show: true,
name: { name: {
show: false, show: false
}, },
value: { value: {
formatter: function(val) { formatter: function (val) {
return parseInt(val*userCount.value / 100); return parseInt((val * userCount.value) / 100)
}, },
offsetY: 7, offsetY: 7,
color: darkModeEnabled.value ? '#cbd5e1' : '#f1f5f9', color: darkModeEnabled.value ? '#cbd5e1' : '#f1f5f9',
fontSize: '1.25rem', fontSize: '1.25rem',
show: true, show: true
} }
} }
} }
@ -77,81 +76,87 @@
colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'], colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
labels: ['Progress'], labels: ['Progress'],
tooltip: { tooltip: {
enabled: false, enabled: false
},
} }
}) }
})
function toggleCompleted(completed, user_id, exec_uuid, task_uuid) { function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
setCompletedState(completed, user_id, exec_uuid, task_uuid) setCompletedState(completed, user_id, exec_uuid, task_uuid)
} }
function collapse(exercise_index) { function collapse(exercise_index) {
const index = collapsed_panels.value.indexOf(exercise_index) const index = collapsed_panels.value.indexOf(exercise_index)
if (index >= 0) { if (index >= 0) {
collapsed_panels.value.splice(index, 1) collapsed_panels.value.splice(index, 1)
} else { } else {
collapsed_panels.value.push(exercise_index) collapsed_panels.value.push(exercise_index)
} }
} }
const compactGrid = computed(() => { return userCount.value > 70 }) const compactGrid = computed(() => {
const ultraCompactGrid = computed(() => { return userCount.value > 100 }) return userCount.value > 70
const hasProgress = computed(() => Object.keys(progresses.value).length > 0) })
const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => { const ultraCompactGrid = computed(() => {
return userCount.value > 100
})
const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
const sortedProgress = computed(() =>
Object.values(progresses.value).sort((a, b) => {
if (a.email < b.email) { if (a.email < b.email) {
return -1; return -1
} }
if (a.email > b.email) { if (a.email > b.email) {
return 1; return 1
} }
return 0; return 0
})) })
)
const taskCompletionPercentages = computed(() => { const taskCompletionPercentages = computed(() => {
const completions = {} const completions = {}
Object.values(props.exercise.tasks).forEach(task => { Object.values(props.exercise.tasks).forEach((task) => {
completions[task.uuid] = 0 completions[task.uuid] = 0
}) })
sortedProgress.value.forEach(progress => { sortedProgress.value.forEach((progress) => {
for (const [taskUuid, taskCompletion] of Object.entries(progress.exercises[props.exercise.uuid].tasks_completion)) { for (const [taskUuid, taskCompletion] of Object.entries(
progress.exercises[props.exercise.uuid].tasks_completion
)) {
if (taskCompletion !== false) { if (taskCompletion !== false) {
completions[taskUuid] += 1 completions[taskUuid] += 1
} }
} }
}); })
for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) { for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
completions[taskUuid] = 100 * (taskCompletionSum / userCount.value) completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
} }
return completions return completions
}) })
</script> </script>
<template> <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 <div
class=" 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"
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="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"
> >
<!-- Modal header --> <!-- 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">
Level: <span :class="{ Level:
<span
:class="{
'rounded-lg px-1 ml-2': true, 'rounded-lg px-1 ml-2': true,
'dark:bg-sky-400 bg-sky-400 text-neutral-950': exercise.level == 'beginner', '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-orange-400 bg-orange-400 text-neutral-950': exercise.level == 'advanced',
'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert', 'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert'
}">{{ exercise.level }}</span> }"
>{{ exercise.level }}</span
>
</span> </span>
</div> </div>
</div> </div>
@ -166,11 +171,17 @@
:title="task.description" :title="task.description"
> >
<span class="flex flex-col"> <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> <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> <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"> <span class="inline-block h-18 -mt-4 mx-auto">
<apexchart <apexchart
ref="theChart" class="" height="120" width="100" ref="theChart"
class=""
height="120"
width="100"
:options="chartOptions" :options="chartOptions"
:series="[taskCompletionPercentages[task.uuid]]" :series="[taskCompletionPercentages[task.uuid]]"
></apexchart> ></apexchart>
@ -182,25 +193,40 @@
<!-- User grid --> <!-- User grid -->
<div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`"> <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"
:class="[ :class="[
'bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg', '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', progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score ==
1
? 'border-green-700'
: 'border-slate-700'
]" ]"
> >
<span class=" <span class="flex p-2 mb-1 text-slate-600 dark:text-slate-400">
flex p-2 mb-1 <span
text-slate-600 dark:text-slate-400 :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'} ${compactGrid ? '' : 'mb-1'}`"
"> >
<span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'} ${compactGrid ? '' : 'mb-1'}`"> <span
<span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate mb-1"> :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="
:icon="faMedal" class="mr-1 text-amber-300" progress.exercises[exercise.uuid].score /
progress.exercises[exercise.uuid].max_score ==
1
"
:icon="faMedal"
class="mr-1 text-amber-300"
></FontAwesomeIcon> ></FontAwesomeIcon>
<span :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`">{{ progress.email.split('@')[0] }}</span> <span
<span :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`">@{{ progress.email.split('@')[1] }}</span> :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`"
>{{ progress.email.split('@')[0] }}</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"
@ -210,26 +236,40 @@
</span> </span>
</span> </span>
<span class=" <span class="flex flex-row justify-between px-2 text-slate-500 dark:text-slate-400">
flex flex-row justify-between px-2
text-slate-500 dark:text-slate-400
">
<span <span
v-for="(task, task_index) in exercise.tasks" v-for="(task, task_index) in exercise.tasks"
:key="task_index" :key="task_index"
class="select-none cursor-pointer" class="select-none cursor-pointer"
@click="toggleCompleted(progress.exercises[exercise.uuid].tasks_completion[task.uuid], progress.user_id, exercise.uuid, task.uuid)" @click="
toggleCompleted(
progress.exercises[exercise.uuid].tasks_completion[task.uuid],
progress.user_id,
exercise.uuid,
task.uuid
)
"
:title="task.name" :title="task.name"
> >
<span class="text-nowrap"> <span class="text-nowrap">
<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="`${compactGrid ? 'text-xs' : '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="`${compactGrid ? 'text-xs' : 'text-lg'} dark:text-slate-500 text-slate-400`" :class="`${compactGrid ? 'text-xs' : 'text-lg'} dark:text-slate-500 text-slate-400`"

214
src/components/scoreViews/TheScoreTable.vue
View file

@ -1,83 +1,96 @@
<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, progresses, userCount, setCompletedState } from '@/socket'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons' import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
import { faCircleCheck } from '@fortawesome/free-regular-svg-icons' import LiveLogsUserActivityGraph from '../LiveLogsUserActivityGraph.vue'
import LiveLogsUserActivityGraph from "../LiveLogsUserActivityGraph.vue"
const props = defineProps(['exercise', 'exercise_index']) const props = defineProps(['exercise', 'exercise_index'])
const collapsed_panels = ref([]) const collapsed_panels = ref([])
function toggleCompleted(completed, user_id, exec_uuid, task_uuid) { function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
setCompletedState(completed, user_id, exec_uuid, task_uuid) setCompletedState(completed, user_id, exec_uuid, task_uuid)
} }
function collapse(exercise_index) { function collapse(exercise_index) {
const index = collapsed_panels.value.indexOf(exercise_index) const index = collapsed_panels.value.indexOf(exercise_index)
if (index >= 0) { if (index >= 0) {
collapsed_panels.value.splice(index, 1) collapsed_panels.value.splice(index, 1)
} else { } else {
collapsed_panels.value.push(exercise_index) collapsed_panels.value.push(exercise_index)
} }
} }
const compactTable = computed(() => { return userCount.value > 20 }) const compactTable = computed(() => {
const hasProgress = computed(() => Object.keys(progresses.value).length > 0) return userCount.value > 20
const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => { })
const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
const sortedProgress = computed(() =>
Object.values(progresses.value).sort((a, b) => {
if (a.email < b.email) { if (a.email < b.email) {
return -1; return -1
} }
if (a.email > b.email) { if (a.email > b.email) {
return 1; return 1
} }
return 0; return 0
})) })
)
const taskCompletionPercentages = computed(() => { const taskCompletionPercentages = computed(() => {
const completions = {} const completions = {}
Object.values(props.exercise.tasks).forEach(task => { Object.values(props.exercise.tasks).forEach((task) => {
completions[task.uuid] = 0 completions[task.uuid] = 0
}) })
sortedProgress.value.forEach(progress => { sortedProgress.value.forEach((progress) => {
for (const [taskUuid, taskCompletion] of Object.entries(progress.exercises[props.exercise.uuid].tasks_completion)) { for (const [taskUuid, taskCompletion] of Object.entries(
progress.exercises[props.exercise.uuid].tasks_completion
)) {
if (taskCompletion !== false) { if (taskCompletion !== false) {
completions[taskUuid] += 1 completions[taskUuid] += 1
} }
} }
}); })
for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) { for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
completions[taskUuid] = 100 * (taskCompletionSum / userCount.value) completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
} }
return completions return completions
}) })
</script> </script>
<template> <template>
<table <table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full mb-4">
class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full mb-4"
>
<thead> <thead>
<tr @click="collapse(exercise_index)" class="cursor-pointer"> <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"> <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"> <div class="flex justify-between items-center">
<span class="dark:text-blue-200 text-slate-200 "># {{ exercise_index + 1 }}</span> <span class="dark:text-blue-200 text-slate-200"># {{ exercise_index + 1 }}</span>
<span class="text-lg">{{ exercise.name }}</span> <span class="text-lg">{{ exercise.name }}</span>
<span class=""> <span class="">
Level: <span :class="{ Level:
<span
:class="{
'rounded-lg px-1 ml-2': true, 'rounded-lg px-1 ml-2': true,
'dark:bg-sky-400 bg-sky-400 text-neutral-950': exercise.level == 'beginner', '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-orange-400 bg-orange-400 text-neutral-950': exercise.level == 'advanced',
'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert', 'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert'
}">{{ exercise.level }}</span> }"
>{{ exercise.level }}</span
>
</span> </span>
</div> </div>
</th> </th>
</tr> </tr>
<tr :class="`font-medium text-slate-600 dark:text-slate-200 ${collapsed_panels.includes(exercise_index) ? 'hidden' : ''}`"> <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 class="border-b border-slate-100 dark:border-slate-700 p-3 pl-6 text-left">User</th>
<th <th
v-for="(task, task_index) in exercise.tasks" v-for="(task, task_index) in exercise.tasks"
@ -86,12 +99,17 @@
:title="task.description" :title="task.description"
> >
<div class="flex flex-col"> <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> <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> <i class="text-center">{{ task.name }}</i>
<div <div
role="progressbar" role="progressbar"
class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600" class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600"
:aria-valuenow="taskCompletionPercentages[task.uuid]" :aria-valuemin="0" aria-valuemax="100" :aria-valuenow="taskCompletionPercentages[task.uuid]"
:aria-valuemin="0"
aria-valuemax="100"
:title="`${taskCompletionPercentages[task.uuid].toFixed(0)}%`" :title="`${taskCompletionPercentages[task.uuid].toFixed(0)}%`"
> >
<div <div
@ -114,13 +132,31 @@
</td> </td>
</tr> </tr>
<template v-else> <template v-else>
<tr v-for="(progress) in sortedProgress" :key="progress.user_id" class="bg-slate-100 dark:bg-slate-900"> <tr
<td class="border-b border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-0 pl-2 relative"> 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 class="flex flex-col max-w-60">
<span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate"> <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> <FontAwesomeIcon
<span class="text-lg font-bold font-mono leading-5 tracking-tight">{{ progress.email.split('@')[0] }}</span> v-if="
<span class="text-xs font-mono tracking-tight">@{{ progress.email.split('@')[1] }}</span> 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> </span>
<LiveLogsUserActivityGraph <LiveLogsUserActivityGraph
:user_id="progress.user_id" :user_id="progress.user_id"
@ -131,51 +167,117 @@
<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 ${compactTable ? 'p-0' : '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"
@click="toggleCompleted(progress.exercises[exercise.uuid].tasks_completion[task.uuid], progress.user_id, exercise.uuid, task.uuid)" @click="
toggleCompleted(
progress.exercises[exercise.uuid].tasks_completion[task.uuid],
progress.user_id,
exercise.uuid,
task.uuid
)
"
> >
<span class="flex flex-col"> <span class="flex flex-col">
<span class="text-nowrap"> <span class="text-nowrap">
<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].first_completion ? faCircleCheck : faCheck" :icon="
progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion
? faCircleCheck
: faCheck
"
:class="` :class="`
${progress.exercises[exercise.uuid].tasks_completion[task.uuid] ? 'dark:text-green-400 text-green-600' : 'dark:text-slate-500 text-slate-400'} ${
${progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion ? 'text-lg' : 'text-xl'} progress.exercises[exercise.uuid].tasks_completion[task.uuid]
? 'dark:text-green-400 text-green-600'
: 'dark:text-slate-500 text-slate-400'
}
${
progress.exercises[exercise.uuid].tasks_completion[task.uuid]
.first_completion
? 'text-lg'
: 'text-xl'
}
`" `"
/> />
<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 ${progress.exercises[exercise.uuid].tasks_completion[task.uuid] ? 'dark:text-green-400 text-green-600' : 'dark:text-slate-500 text-slate-400'}`" :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 <FontAwesomeIcon
v-else v-else
:icon="faTimes" :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'}`" :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> <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>
<span :class="['leading-3', !compactTable ? 'text-sm' : 'text-xs']"> <span :class="['leading-3', !compactTable ? 'text-sm' : 'text-xs']">
<span <span
v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid].timestamp" 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'" :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] }} {{
new Date(
progress.exercises[exercise.uuid].tasks_completion[task.uuid].timestamp *
1000
)
.toTimeString()
.split(' ', 1)[0]
}}
</span> </span>
</span> </span>
</span> </span>
</span> </span>
</td> </td>
<td class="border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-3"> <td
<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"> 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 <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" 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)}%`" :style="`width: ${
100 *
(progress.exercises[exercise.uuid].score /
progress.exercises[exercise.uuid].max_score)
}%`"
></div> ></div>
</div> </div>
</td> </td>

8
src/main.js
View file

@ -1,13 +1,13 @@
import './assets/main.css' import './assets/main.css'
import VueApexCharts from "vue3-apexcharts"; import VueApexCharts from 'vue3-apexcharts'
import { createApp, ref } from 'vue' import { createApp, ref } from 'vue'
import App from './App.vue' import App from './App.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import Modal from "@/components/elements/Modal.vue" import Modal from '@/components/elements/Modal.vue'
import Loading from "@/components/elements/Loading.vue" import Loading from '@/components/elements/Loading.vue'
import Alert from "@/components/elements/Alert.vue" import Alert from '@/components/elements/Alert.vue'
const app = createApp(App) const app = createApp(App)
app.component('FontAwesomeIcon', FontAwesomeIcon) app.component('FontAwesomeIcon', FontAwesomeIcon)

41
src/router.js
View file

@ -1,18 +1,39 @@
import { createWebHistory, createRouter } from 'vue-router' import { createWebHistory, createRouter } from 'vue-router'
const routes = [ const routes = [
{ path: '/', component: ScenarioList }, { path: '/', component: ScenarioList },
{ path: '/scenarios/index', name: 'Scenario Index', component: ScenarioList, meta: { requiresScenarioSelection: false }, }, {
{ path: '/scenarios/add', name: 'New Scenario', component: ScenarioNew, meta: { requiresScenarioSelection: false }, }, path: '/scenarios/index',
{ path: '/scenarios/overview/:uuid?', name: 'Scenario Overview', component: ScenarioOverview, meta: { requiresScenarioSelection: true }, props: true }, name: 'Scenario Index',
{ path: '/scenarios/designer/:uuid?', name: 'Scenario Designer', component: ScenarioDesigner, meta: { requiresScenarioSelection: true }, props: true }, component: ScenarioList,
{ path: '/injects/tester/:uuid?', name: 'Inject Tester', component: InjectTester, props: true }, meta: { requiresScenarioSelection: false }
},
{
path: '/scenarios/add',
name: 'New Scenario',
component: ScenarioNew,
meta: { requiresScenarioSelection: false }
},
{
path: '/scenarios/overview/:uuid?',
name: 'Scenario Overview',
component: ScenarioOverview,
meta: { requiresScenarioSelection: true },
props: true
},
{
path: '/scenarios/designer/:uuid?',
name: 'Scenario Designer',
component: ScenarioDesigner,
meta: { requiresScenarioSelection: true },
props: true
},
{ path: '/injects/tester/:uuid?', name: 'Inject Tester', component: InjectTester, props: true }
] ]
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes, routes
}) })
router.beforeEach(async (to, from) => { router.beforeEach(async (to, from) => {
@ -22,7 +43,11 @@ router.beforeEach(async (to, from) => {
if (!hasScenarios()) { if (!hasScenarios()) {
fetchScenarios() fetchScenarios()
} }
if (from.name == undefined && ['Scenario Overview', 'Scenario Designer'].includes(to.name) && to?.params?.uuid !== undefined) { if (
from.name == undefined &&
['Scenario Overview', 'Scenario Designer'].includes(to.name) &&
to?.params?.uuid !== undefined
) {
store.selected_scenario = to.params.uuid store.selected_scenario = to.params.uuid
} }
if (to?.meta?.requiresScenarioSelection === true && store.selected_scenario === null) { if (to?.meta?.requiresScenarioSelection === true && store.selected_scenario === null) {

101
src/socket.js
View file

@ -1,9 +1,9 @@
import { reactive, computed } from "vue"; import { reactive, computed } from 'vue'
import { io } from "socket.io-client"; import { io } from 'socket.io-client'
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
// "undefined" means the URL will be computed from the `window.location` object // "undefined" means the URL will be computed from the `window.location` object
const URL = process.env.NODE_ENV === "production" ? undefined : "http://localhost:40001"; const URL = process.env.NODE_ENV === 'production' ? undefined : 'http://localhost:40001'
const MAX_LIVE_LOG = 30 const MAX_LIVE_LOG = 30
const initial_state = { const initial_state = {
@ -17,27 +17,27 @@ const initial_state = {
exercises: [], exercises: [],
selected_exercises: [], selected_exercises: [],
progresses: {}, progresses: {},
diagnostic: {}, diagnostic: {}
} }
const state = reactive({ ...initial_state }); const state = reactive({ ...initial_state })
const connectionState = reactive({ const connectionState = reactive({
connected: false, connected: false,
zmq_last_time: false, zmq_last_time: false
}) })
const socket = io(URL, { const socket = io(URL, {
autoConnect: true autoConnect: true
}); })
/* Public */ /* Public */
/* ------ */ /* ------ */
export const exercises = computed(() => state.exercises) export const exercises = computed(() => state.exercises)
export const selected_exercises = computed(() => state.selected_exercises) export const selected_exercises = computed(() => state.selected_exercises)
export const active_exercises = computed(() => state.exercises.filter((exercise) => state.selected_exercises.includes(exercise.uuid))) export const active_exercises = computed(() =>
state.exercises.filter((exercise) => state.selected_exercises.includes(exercise.uuid))
)
export const progresses = computed(() => state.progresses) export const progresses = computed(() => state.progresses)
export const notifications = computed(() => state.notificationEvents) export const notifications = computed(() => state.notificationEvents)
export const notificationCounter = computed(() => state.notificationCounter) export const notificationCounter = computed(() => state.notificationCounter)
@ -52,7 +52,7 @@ export const socketConnected = computed(() => connectionState.connected)
export const zmqLastTime = computed(() => connectionState.zmq_last_time) export const zmqLastTime = computed(() => connectionState.zmq_last_time)
export function resetState() { export function resetState() {
Object.assign(state, initial_state); Object.assign(state, initial_state)
} }
export function fullReload() { export function fullReload() {
@ -67,7 +67,7 @@ export function setCompletedState(completed, user_id, exec_uuid, task_uuid) {
const payload = { const payload = {
user_id: user_id, user_id: user_id,
exercise_uuid: exec_uuid, exercise_uuid: exec_uuid,
task_uuid: task_uuid, task_uuid: task_uuid
} }
sendCompletedState(completed, payload) sendCompletedState(completed, payload)
} }
@ -87,7 +87,7 @@ export function resetLiveLogs() {
export function changeExerciseSelection(exec_uuid, state_enabled) { export function changeExerciseSelection(exec_uuid, state_enabled) {
const payload = { const payload = {
exercise_uuid: exec_uuid, exercise_uuid: exec_uuid,
selected: state_enabled, selected: state_enabled
} }
sendChangeExerciseSelection(payload) sendChangeExerciseSelection(payload)
} }
@ -103,7 +103,8 @@ export function toggleApiQueryMode(enabled) {
export function remediateSetting(setting) { export function remediateSetting(setting) {
sendRemediateSetting(setting, (result) => { sendRemediateSetting(setting, (result) => {
if (result.success) { if (result.success) {
state.diagnostic['settings'][setting].value = state.diagnostic['settings'][setting].expected_value state.diagnostic['settings'][setting].value =
state.diagnostic['settings'][setting].expected_value
} else { } else {
state.diagnostic['settings'][setting].error = true state.diagnostic['settings'][setting].error = true
state.diagnostic['settings'][setting].errorMessage = result.message state.diagnostic['settings'][setting].errorMessage = result.message
@ -111,79 +112,77 @@ export function remediateSetting(setting) {
}) })
} }
export const debouncedGetProgress = debounce(getProgress, 200, {leading: true}) export const debouncedGetProgress = debounce(getProgress, 200, { leading: true })
export const debouncedGetDiangostic = debounce(getDiangostic, 1000, {leading: true}) export const debouncedGetDiangostic = debounce(getDiangostic, 1000, { leading: true })
/* Private */ /* Private */
/* ------- */ /* ------- */
function getExercises() { function getExercises() {
socket.emit("get_exercises", (all_exercises) => { socket.emit('get_exercises', (all_exercises) => {
state.exercises = all_exercises state.exercises = all_exercises
}) })
} }
function getSelectedExercises() { function getSelectedExercises() {
socket.emit("get_selected_exercises", (all_selected_exercises) => { socket.emit('get_selected_exercises', (all_selected_exercises) => {
state.selected_exercises = all_selected_exercises state.selected_exercises = all_selected_exercises
}) })
} }
function getNotifications() { function getNotifications() {
socket.emit("get_notifications", (all_notifications) => { socket.emit('get_notifications', (all_notifications) => {
state.notificationEvents = all_notifications state.notificationEvents = all_notifications
}) })
} }
function getProgress() { function getProgress() {
socket.emit("get_progress", (all_progress) => { socket.emit('get_progress', (all_progress) => {
state.progresses = all_progress state.progresses = all_progress
}) })
} }
function getUsersActivity() { function getUsersActivity() {
socket.emit("get_users_activity", (user_activity_bundle) => { socket.emit('get_users_activity', (user_activity_bundle) => {
state.userActivity = user_activity_bundle.activity state.userActivity = user_activity_bundle.activity
state.userActivityConfig = user_activity_bundle.config state.userActivityConfig = user_activity_bundle.config
}); })
} }
function getDiangostic() { function getDiangostic() {
state.diagnostic = {} state.diagnostic = {}
socket.emit("get_diagnostic", (diagnostic) => { socket.emit('get_diagnostic', (diagnostic) => {
state.diagnostic = diagnostic state.diagnostic = diagnostic
}) })
} }
function sendCompletedState(completed, payload) { function sendCompletedState(completed, payload) {
const event_name = !completed ? "mark_task_completed": "mark_task_incomplete" const event_name = !completed ? 'mark_task_completed' : 'mark_task_incomplete'
socket.emit(event_name, payload, () => { socket.emit(event_name, payload, () => {
getProgress() getProgress()
}) })
} }
function sendResetAllExerciseProgress() { function sendResetAllExerciseProgress() {
socket.emit("reset_all_exercise_progress", () => { socket.emit('reset_all_exercise_progress', () => {
getProgress() getProgress()
}) })
} }
function sendResetAll() { function sendResetAll() {
socket.emit("reset_all", () => { socket.emit('reset_all', () => {
getProgress() getProgress()
}) })
} }
function sendResetLiveLogs() { function sendResetLiveLogs() {
socket.emit("reset_notifications", () => { socket.emit('reset_notifications', () => {
getNotifications() getNotifications()
}) })
} }
function sendChangeExerciseSelection(payload) { function sendChangeExerciseSelection(payload) {
socket.emit("change_exercise_selection", payload, () => { socket.emit('change_exercise_selection', payload, () => {
getSelectedExercises() getSelectedExercises()
}) })
} }
@ -192,64 +191,64 @@ function sendToggleVerboseMode(enabled) {
const payload = { const payload = {
verbose: enabled verbose: enabled
} }
socket.emit("toggle_verbose_mode", payload, () => {}) socket.emit('toggle_verbose_mode', payload, () => {})
} }
function sendToggleApiQueryMode(enabled) { function sendToggleApiQueryMode(enabled) {
const payload = { const payload = {
apiquery: enabled apiquery: enabled
} }
socket.emit("toggle_apiquery_mode", payload, () => {}) socket.emit('toggle_apiquery_mode', payload, () => {})
} }
function sendRemediateSetting(setting, cb) { function sendRemediateSetting(setting, cb) {
const payload = { const payload = {
name: setting name: setting
} }
socket.emit("remediate_setting", payload, (result) => { socket.emit('remediate_setting', payload, (result) => {
cb(result) cb(result)
}) })
} }
/* Event listener */ /* Event listener */
socket.on("connect", () => { socket.on('connect', () => {
connectionState.connected = true; connectionState.connected = true
}); })
socket.on("disconnect", () => { socket.on('disconnect', () => {
connectionState.connected = false; connectionState.connected = false
}); })
socket.on("notification", (message) => { socket.on('notification', (message) => {
state.notificationCounter += 1 state.notificationCounter += 1
if (message.is_api_request) { if (message.is_api_request) {
state.notificationAPICounter += 1 state.notificationAPICounter += 1
} }
addLimited(state.notificationEvents, message, MAX_LIVE_LOG) addLimited(state.notificationEvents, message, MAX_LIVE_LOG)
}); })
socket.on("new_user", (new_user) => { socket.on('new_user', (new_user) => {
debouncedGetProgress() debouncedGetProgress()
}); })
socket.on("refresh_score", (new_user) => { socket.on('refresh_score', (new_user) => {
debouncedGetProgress() debouncedGetProgress()
}); })
socket.on("keep_alive", (keep_alive) => { socket.on('keep_alive', (keep_alive) => {
connectionState.zmq_last_time = keep_alive['zmq_last_time'] connectionState.zmq_last_time = keep_alive['zmq_last_time']
}); })
socket.on("update_notification_history", (notification_history_bundle) => { socket.on('update_notification_history', (notification_history_bundle) => {
state.notificationHistory = notification_history_bundle.history state.notificationHistory = notification_history_bundle.history
state.notificationHistoryConfig = notification_history_bundle.config state.notificationHistoryConfig = notification_history_bundle.config
}); })
socket.on("update_users_activity", (user_activity_bundle) => { socket.on('update_users_activity', (user_activity_bundle) => {
state.userActivity = user_activity_bundle.activity state.userActivity = user_activity_bundle.activity
state.userActivityConfig = user_activity_bundle.config state.userActivityConfig = user_activity_bundle.config
}); })
function addLimited(target, message, maxCount) { function addLimited(target, message, maxCount) {
target.unshift(message) target.unshift(message)

4
src/utils.js
View file

@ -1,4 +1,4 @@
import { computed, ref } from "vue" import { computed, ref } from 'vue'
let toastID = 0 let toastID = 0
export const toastBuffer = ref([]) export const toastBuffer = ref([])
@ -15,6 +15,6 @@ export function ajaxFeedback(response) {
toast({ toast({
variant: response.success ? 'success' : 'danger', variant: response.success ? 'success' : 'danger',
message: String(response.message), message: String(response.message),
title: response.title, title: response.title
}) })
} }