Compare commits
No commits in common. "scenario-designer" and "main" have entirely different histories.
scenario-d
...
main
32 changed files with 990 additions and 1855 deletions
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"hash": "d30f2833",
|
||||
"configHash": "e49d25ea",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "f22e7dd7",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"type": "module"
|
||||
}
|
||||
47
package-lock.json
generated
47
package-lock.json
generated
|
|
@ -23,6 +23,7 @@
|
|||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"daisyui": "^4.12.10",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"postcss": "^8.4.38",
|
||||
|
|
@ -1443,6 +1444,16 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/css-selector-tokenizer": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
|
||||
"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"fastparse": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
|
|
@ -1460,6 +1471,34 @@
|
|||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
},
|
||||
"node_modules/culori": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
|
||||
"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/daisyui": {
|
||||
"version": "4.12.10",
|
||||
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz",
|
||||
"integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"css-selector-tokenizer": "^0.8",
|
||||
"culori": "^3",
|
||||
"picocolors": "^1",
|
||||
"postcss-js": "^4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.9.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/daisyui"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
|
||||
|
|
@ -1880,6 +1919,12 @@
|
|||
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fastparse": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
|
||||
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fastq": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
|
||||
|
|
@ -3831,4 +3876,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"daisyui": "^4.12.10",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"postcss": "^8.4.38",
|
||||
|
|
@ -34,4 +35,4 @@
|
|||
"tailwindcss": "^3.4.4",
|
||||
"vite": "^5.3.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/App.vue
11
src/App.vue
|
|
@ -4,15 +4,16 @@ import TheThemeButton from './components/TheThemeButton.vue'
|
|||
import TheAdminPanel from './components/TheAdminPanel.vue'
|
||||
import TheSocketConnectionState from './components/TheSocketConnectionState.vue'
|
||||
import TheDahboard from './TheDahboard.vue'
|
||||
import Toaster from '@/components/elements/Toaster.vue'
|
||||
import { socketConnected } from '@/socket'
|
||||
import { darkModeEnabled } from '@/settings.js'
|
||||
import { socketConnected } from "@/socket";
|
||||
import { darkModeEnabled } from "@/settings.js"
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
if (darkModeEnabled.value) {
|
||||
document.getElementsByTagName('body')[0].classList.add('dark')
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -33,7 +34,6 @@ onMounted(() => {
|
|||
<div class="mt-12">
|
||||
<TheDahboard></TheDahboard>
|
||||
</div>
|
||||
<Toaster></Toaster>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
@ -63,4 +63,5 @@ body {
|
|||
/* cyan-400 */
|
||||
/* filter: invert(71%) sepia(97%) saturate(1333%) hue-rotate(147deg) brightness(95%) contrast(96%); */
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
|
|
@ -2,8 +2,9 @@
|
|||
import { onMounted, watch } from 'vue'
|
||||
import TheLiveLogs from './components/TheLiveLogs.vue'
|
||||
import TheScores from './components/TheScores.vue'
|
||||
import { resetState, fullReload, socketConnected } from '@/socket'
|
||||
import { fullscreenModeOn } from '@/settings.js'
|
||||
import { resetState, fullReload, socketConnected } from "@/socket";
|
||||
import { fullscreenModeOn } from "@/settings.js"
|
||||
|
||||
|
||||
watch(socketConnected, (isConnected) => {
|
||||
if (isConnected) {
|
||||
|
|
@ -15,6 +16,7 @@ watch(socketConnected, (isConnected) => {
|
|||
onMounted(() => {
|
||||
fullReload()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
@import './styled-components/toggle.css';
|
||||
@import './styled-components/button.css';
|
||||
@import './styled-components/transitions.css';
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
|
|
@ -1,82 +0,0 @@
|
|||
.btn {
|
||||
@apply px-2 py-1 font-semibold rounded border text-nowrap select-none;
|
||||
@apply transition-all duration-75;
|
||||
@apply border-slate-300;
|
||||
|
||||
&.btn-sm {
|
||||
@apply px-1 py-0;
|
||||
}
|
||||
|
||||
&.btn-xs {
|
||||
@apply px-0.5 py-0;
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
@apply px-3 py-1;
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
&.btn:not(:disabled) {
|
||||
@apply hover:bg-slate-200 hover:border-slate-300;
|
||||
@apply active:scale-90;
|
||||
}
|
||||
|
||||
&.btn:disabled {
|
||||
@apply cursor-not-allowed opacity-60;
|
||||
}
|
||||
&.btn-primary:not(:disabled) {
|
||||
@apply border-none;
|
||||
@apply bg-blue-600 text-white hover:bg-blue-700;
|
||||
}
|
||||
|
||||
&.btn-info:not(:disabled) {
|
||||
@apply border-none;
|
||||
@apply bg-blue-500 text-white hover:bg-blue-600;
|
||||
}
|
||||
|
||||
&.btn-danger:not(:disabled) {
|
||||
@apply border-none;
|
||||
@apply bg-red-600 text-white hover:bg-red-700;
|
||||
}
|
||||
|
||||
&.btn-success:not(:disabled) {
|
||||
@apply border-none;
|
||||
@apply bg-green-600 text-white hover:bg-green-700;
|
||||
}
|
||||
|
||||
&.btn-warning:not(:disabled) {
|
||||
@apply border-none;
|
||||
@apply bg-amber-600 text-white hover:bg-amber-700;
|
||||
}
|
||||
|
||||
&.btn-outline-primary:not(:disabled) {
|
||||
@apply hover:bg-blue-600 hover:border-blue-700 hover:text-white;
|
||||
@apply border-blue-700 hover:border-blue-800;
|
||||
}
|
||||
|
||||
&.btn-outline-info:not(:disabled) {
|
||||
@apply hover:bg-blue-500 hover:border-blue-700 hover:text-white;
|
||||
@apply border-blue-700 hover:border-blue-800;
|
||||
}
|
||||
|
||||
&.btn-outline-danger:not(:disabled) {
|
||||
@apply hover:bg-red-500 hover:border-red-700 hover:text-white;
|
||||
@apply border-red-700 hover:border-red-800;
|
||||
}
|
||||
|
||||
&.btn-outline-success:not(:disabled) {
|
||||
@apply hover:bg-green-500 hover:border-green-700 hover:text-white;
|
||||
@apply border-green-700 hover:border-green-800;
|
||||
}
|
||||
|
||||
&.btn-outline-warning:not(:disabled) {
|
||||
@apply hover:bg-amber-500 hover:border-amber-700 hover:text-white;
|
||||
@apply border-amber-700 hover:border-amber-800;
|
||||
}
|
||||
|
||||
&.btn-link:not(:disabled) {
|
||||
@apply border-none;
|
||||
@apply hover:bg-transparent hover:border-transparent hover:text-inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
.toggle:where(.dark, .dark *) {
|
||||
--tglbg: theme(colors.slate.800) !important;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
--tglbg: theme(colors.slate.200);
|
||||
--animation-input: 0.2s;
|
||||
--handleoffset: 1.5rem;
|
||||
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
|
||||
--togglehandleborder: 0 0;
|
||||
@apply h-6 w-12 rounded-3xl cursor-pointer appearance-none border border-current bg-current;
|
||||
transition:
|
||||
background,
|
||||
box-shadow var(--animation-input, 0.2s) ease-out;
|
||||
box-shadow:
|
||||
var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
|
||||
0 0 0 2px var(--tglbg) inset,
|
||||
var(--togglehandleborder);
|
||||
@apply text-slate-500;
|
||||
|
||||
&:focus-visible {
|
||||
@apply outline outline-2 outline-offset-2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply bg-current;
|
||||
}
|
||||
|
||||
&:checked,
|
||||
&[aria-checked='true'] {
|
||||
background-image: none;
|
||||
--handleoffsetcalculator: var(--handleoffset);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
box-shadow:
|
||||
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;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@apply cursor-not-allowed bg-transparent opacity-30;
|
||||
--togglehandleborder: 0 0 0 3px #000 inset, var(--handleoffsetcalculator) 0 0 3px #000 inset;
|
||||
}
|
||||
|
||||
&.toggle-success {
|
||||
&:focus-visible {
|
||||
@apply outline-green-400;
|
||||
}
|
||||
|
||||
&:checked,
|
||||
&[aria-checked='true'] {
|
||||
@apply border-green-500 bg-green-400 text-slate-900 border-opacity-10;
|
||||
}
|
||||
}
|
||||
|
||||
&.toggle-warning {
|
||||
&:focus-visible {
|
||||
@apply outline-amber-400;
|
||||
}
|
||||
|
||||
&:checked,
|
||||
&[aria-checked='true'] {
|
||||
@apply border-amber-500 bg-amber-400 text-slate-900 border-opacity-10;
|
||||
}
|
||||
}
|
||||
|
||||
&.toggle-info {
|
||||
&:focus-visible {
|
||||
@apply outline-blue-400;
|
||||
}
|
||||
|
||||
&:checked,
|
||||
&[aria-checked='true'] {
|
||||
@apply border-blue-500 bg-blue-400 text-slate-900 border-opacity-10;
|
||||
}
|
||||
}
|
||||
|
||||
&.toggle-danger {
|
||||
&:focus-visible {
|
||||
@apply outline-red-400;
|
||||
}
|
||||
|
||||
&:checked,
|
||||
&[aria-checked='true'] {
|
||||
@apply border-red-500 bg-red-400 text-slate-900 border-opacity-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.slide-fade-enter-active {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-fade-reverse-enter-active {
|
||||
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
|
||||
.slide-fade-reverse-leave-active {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-reverse-enter-from,
|
||||
.slide-fade-reverse-leave-to {
|
||||
transform: translateX(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -1,43 +1,55 @@
|
|||
<script setup>
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { userActivity, userActivityConfig } from '@/socket'
|
||||
import { darkModeEnabled } from '@/settings.js'
|
||||
import { ref, watch, computed } from "vue"
|
||||
import { userActivity, userActivityConfig } from "@/socket";
|
||||
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 bufferSize = computed(() => userActivityConfig.value.activity_buffer_size)
|
||||
const bufferSizeMin = computed(() => userActivityConfig.value.timestamp_min)
|
||||
const chartInitSeries = computed(() => Array.from(Array(bufferSize.value)).map(() => 0))
|
||||
const theChart = ref(null)
|
||||
const bufferSize = computed(() => userActivityConfig.value.activity_buffer_size)
|
||||
const bufferSizeMin = computed(() => userActivityConfig.value.timestamp_min)
|
||||
const chartInitSeries = computed(() => Array.from(Array(bufferSize.value)).map(() => 0))
|
||||
|
||||
const hasActivity = computed(() => userActivity.value.length != 0)
|
||||
const chartSeries = computed(() => {
|
||||
return !hasActivity.value ? chartInitSeries.value : activitySeries.value
|
||||
})
|
||||
const hasActivity = computed(() => userActivity.value.length != 0)
|
||||
const chartSeries = computed(() => {
|
||||
return !hasActivity.value ? chartInitSeries.value : activitySeries.value
|
||||
})
|
||||
|
||||
const activitySeries = computed(() => {
|
||||
const data =
|
||||
userActivity.value[props.user_id] === undefined
|
||||
? chartInitSeries.value
|
||||
: userActivity.value[props.user_id]
|
||||
return data
|
||||
})
|
||||
const activitySeries = computed(() => {
|
||||
const data = userActivity.value[props.user_id] === undefined ? chartInitSeries.value : userActivity.value[props.user_id]
|
||||
return data
|
||||
})
|
||||
|
||||
const colorRanges = [0, 1, 2, 3, 4, 5, 1000]
|
||||
const palleteColor = 'blue'
|
||||
const colorPalleteIndexDark = ['900', '700', '600', '500', '400', '300', '200']
|
||||
const colorPalleteIndexLight = ['50', '100', '300', '400', '500', '600', '700']
|
||||
const colorRanges = [0, 1, 2, 3, 4, 5, 1000]
|
||||
const palleteColor = 'blue'
|
||||
const colorPalleteIndexDark = [
|
||||
'900',
|
||||
'700',
|
||||
'600',
|
||||
'500',
|
||||
'400',
|
||||
'300',
|
||||
'200',
|
||||
]
|
||||
const colorPalleteIndexLight = [
|
||||
'50',
|
||||
'100',
|
||||
'300',
|
||||
'400',
|
||||
'500',
|
||||
'600',
|
||||
'700',
|
||||
]
|
||||
|
||||
function getPalleteIndexFromValue(value) {
|
||||
for (let palleteIndex = 0; palleteIndex < colorRanges.length; palleteIndex++) {
|
||||
const colorRangeValue = colorRanges[palleteIndex]
|
||||
if (value <= colorRangeValue) {
|
||||
return darkModeEnabled.value
|
||||
? colorPalleteIndexDark[palleteIndex]
|
||||
: colorPalleteIndexLight[palleteIndex]
|
||||
function getPalleteIndexFromValue(value) {
|
||||
for (let palleteIndex = 0; palleteIndex < colorRanges.length; palleteIndex++) {
|
||||
const colorRangeValue = colorRanges[palleteIndex];
|
||||
if (value <= colorRangeValue) {
|
||||
return darkModeEnabled.value ? colorPalleteIndexDark[palleteIndex] : colorPalleteIndexLight[palleteIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -48,12 +60,8 @@ function getPalleteIndexFromValue(value) {
|
|||
<span
|
||||
v-for="(value, i) in chartSeries"
|
||||
: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`"
|
||||
></span>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -1,238 +1,205 @@
|
|||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import {
|
||||
exercises,
|
||||
selected_exercises,
|
||||
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'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { exercises, selected_exercises, diagnostic, fullReload, resetAllExerciseProgress, resetAll, resetLiveLogs, changeExerciseSelection, debouncedGetDiangostic, remediateSetting } from "@/socket";
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faScrewdriverWrench, faTrash, faSuitcaseMedical, faGraduationCap, faBan, faRotate, faHammer, faCheck } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
const admin_modal = ref(null)
|
||||
const clickedButtons = ref([])
|
||||
const admin_modal = ref(null)
|
||||
const clickedButtons = ref([])
|
||||
|
||||
const diagnosticLoading = computed(() => Object.keys(diagnostic.value).length == 0)
|
||||
const isMISPOnline = computed(() => diagnostic.value.version?.version !== undefined)
|
||||
const isZMQActive = computed(() => diagnostic.value.zmq_message_count > 0)
|
||||
const ZMQMessageCount = computed(() => diagnostic.value.zmq_message_count)
|
||||
const diagnosticLoading = computed(() => Object.keys(diagnostic.value).length == 0)
|
||||
const isMISPOnline = computed(() => diagnostic.value.version?.version !== undefined)
|
||||
const isZMQActive = computed(() => diagnostic.value.zmq_message_count > 0)
|
||||
const ZMQMessageCount = computed(() => diagnostic.value.zmq_message_count)
|
||||
|
||||
function changeSelectionState(state_enabled, exec_uuid) {
|
||||
changeExerciseSelection(exec_uuid, state_enabled)
|
||||
}
|
||||
function changeSelectionState(state_enabled, exec_uuid) {
|
||||
changeExerciseSelection(exec_uuid, state_enabled);
|
||||
}
|
||||
|
||||
function settingHandler(setting) {
|
||||
remediateSetting(setting)
|
||||
}
|
||||
function settingHandler(setting) {
|
||||
remediateSetting(setting)
|
||||
}
|
||||
|
||||
function showTheModal() {
|
||||
admin_modal.value.showModal()
|
||||
clickedButtons.value = []
|
||||
debouncedGetDiangostic()
|
||||
}
|
||||
|
||||
const showModal = ref(false)
|
||||
function showTheModal() {
|
||||
showModal.value = true
|
||||
clickedButtons.value = []
|
||||
debouncedGetDiangostic()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="showTheModal()" class="btn btn-primary">
|
||||
<button
|
||||
@click="showTheModal()"
|
||||
class="px-2 py-1 rounded-md focus-outline font-semibold bg-blue-600 text-slate-200 hover:bg-blue-700"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faScrewdriverWrench" class="mr-1"></FontAwesomeIcon>
|
||||
Admin panel
|
||||
</button>
|
||||
|
||||
<Modal :showModal="showModal" @modal-close="showModal = false">
|
||||
<template #header>
|
||||
<h2 class="text-2xl font-bold">
|
||||
<FontAwesomeIcon :icon="faScrewdriverWrench" class=""></FontAwesomeIcon>
|
||||
Admin panel
|
||||
</h2>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="dark:text-slate-700 text-slate-700">
|
||||
<div class="flex mb-5 gap-2">
|
||||
<button @click="fullReload()" class="h-10 min-h-10 font-semibold btn-info btn gap-1">
|
||||
<FontAwesomeIcon :icon="faRotate" size="lg" fixed-width></FontAwesomeIcon>
|
||||
Full refresh
|
||||
</button>
|
||||
<button
|
||||
@click="resetAllExerciseProgress()"
|
||||
class="h-10 min-h-10 font-semibold btn-danger btn gap-1"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
|
||||
Reset All Exercises
|
||||
</button>
|
||||
<button @click="resetAll()" class="h-10 min-h-10 font-semibold btn-danger btn gap-1">
|
||||
<FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
|
||||
Reset All
|
||||
</button>
|
||||
<button
|
||||
@click="resetLiveLogs()"
|
||||
class="h-10 min-h-10 font-semibold btn-warning btn gap-1"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faBan" size="lg"> fixed-width</FontAwesomeIcon>
|
||||
Clear Live Logs
|
||||
</button>
|
||||
<dialog ref="admin_modal" class="modal">
|
||||
<div class="modal-box w-11/12 max-w-6xl top-24 absolute bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200">
|
||||
<h2 class="text-2xl font-bold">
|
||||
<FontAwesomeIcon :icon="faScrewdriverWrench" class=""></FontAwesomeIcon>
|
||||
Admin panel
|
||||
</h2>
|
||||
<div class="modal-action">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<h3 class="text-lg font-semibold">
|
||||
<FontAwesomeIcon :icon="faGraduationCap" class="mr-1"></FontAwesomeIcon>
|
||||
Selected Exercises
|
||||
</h3>
|
||||
<div v-for="exercise in exercises" :key="exercise.name" class="form-control pl-3">
|
||||
<label class="label cursor-pointer justify-start">
|
||||
<input
|
||||
@change="changeSelectionState($event.target.checked, exercise.uuid)"
|
||||
type="checkbox"
|
||||
:checked="selected_exercises.includes(exercise.uuid)"
|
||||
:value="exercise.uuid"
|
||||
: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>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-semibold mt-4">
|
||||
<FontAwesomeIcon :icon="faSuitcaseMedical" class="mr-1"></FontAwesomeIcon>
|
||||
Diagnostic
|
||||
</h3>
|
||||
<h4 class="font-semibold ml-1 my-3">
|
||||
<strong>MISP Status:</strong>
|
||||
<span class="ml-2">
|
||||
<span
|
||||
:class="{
|
||||
'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-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
|
||||
}"
|
||||
<div class="flex mb-5 gap-2">
|
||||
<button
|
||||
@click="fullReload()"
|
||||
class="h-10 min-h-10 px-2 py-1 font-semibold bg-blue-600 text-slate-200 hover:bg-blue-700 btn btn-sm gap-1"
|
||||
>
|
||||
<Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading>
|
||||
<span v-else class="font-bold">
|
||||
{{ !isMISPOnline ? 'Unreachable' : `Online (${diagnostic['version']['version']})` }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</h4>
|
||||
<h4 class="font-semibold ml-1 my-3">
|
||||
<strong>ZMQ Status:</strong>
|
||||
<span class="ml-2">
|
||||
<span
|
||||
:class="{
|
||||
'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-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
|
||||
}"
|
||||
<FontAwesomeIcon :icon="faRotate" size="lg" fixed-width></FontAwesomeIcon>
|
||||
Full refresh
|
||||
</button>
|
||||
<button
|
||||
@click="resetAllExerciseProgress()"
|
||||
class="h-10 min-h-10 px-2 py-1 font-semibold bg-red-600 text-slate-200 hover:bg-red-700 btn btn-sm gap-1"
|
||||
>
|
||||
<Loading v-if="diagnosticLoading" class="inline-block text-xl"></Loading>
|
||||
<span v-else class="font-bold">
|
||||
{{
|
||||
!isZMQActive
|
||||
? 'No message received yet'
|
||||
: `ZMQ Active (${ZMQMessageCount} messages)`
|
||||
}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<template v-if="diagnosticLoading || isMISPOnline">
|
||||
<h4 class="font-semibold ml-1"><strong>MISP Settings:</strong></h4>
|
||||
<div class="ml-3">
|
||||
<div v-if="diagnosticLoading" class="flex justify-center">
|
||||
<Loading class="text-3xl"></Loading>
|
||||
</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"
|
||||
<FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
|
||||
Reset All Exercises
|
||||
</button>
|
||||
<button
|
||||
@click="resetAll()"
|
||||
class="h-10 min-h-10 px-2 py-1 font-semibold bg-red-600 text-slate-200 hover:bg-red-700 btn btn-sm gap-1"
|
||||
>
|
||||
<thead>
|
||||
<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">
|
||||
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>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr 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 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
|
||||
>
|
||||
{{ settingValues.value }}
|
||||
</td>
|
||||
<td class="font-mono text-base tracking-tight px-2">
|
||||
{{ settingValues.expected_value }}
|
||||
</td>
|
||||
<td class="px-2 text-center">
|
||||
<span v-if="settingValues.error === true" class="text-red-600 dark:text-red-600"
|
||||
>Error: {{ settingValues.errorMessage }}</span
|
||||
>
|
||||
<button
|
||||
v-else-if="settingValues.expected_value != settingValues.value"
|
||||
@click="clickedButtons.push(setting) && settingHandler(setting)"
|
||||
:disabled="clickedButtons.includes(setting)"
|
||||
class="h-8 min-h-8 px-2 font-semibold bg-green-600 text-slate-200 hover:bg-green-700 btn gap-1"
|
||||
>
|
||||
<template v-if="!clickedButtons.includes(setting)">
|
||||
<FontAwesomeIcon :icon="faHammer" size="sm" fixed-width></FontAwesomeIcon>
|
||||
Remediate
|
||||
</template>
|
||||
<template v-else>
|
||||
<Loading class="text-xl"></Loading>
|
||||
</template>
|
||||
</button>
|
||||
<span v-else class="text-base font-bold text-green-600 dark:text-green-600">
|
||||
<FontAwesomeIcon :icon="faCheck" class=""></FontAwesomeIcon>
|
||||
OK
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<FontAwesomeIcon :icon="faTrash" size="lg" fixed-width></FontAwesomeIcon>
|
||||
Reset All
|
||||
</button>
|
||||
<button
|
||||
@click="resetLiveLogs()"
|
||||
class="h-10 min-h-10 px-2 py-1 font-semibold bg-amber-600 text-slate-200 hover:bg-amber-700 btn btn-sm gap-1"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faBan" size="lg"> fixed-width</FontAwesomeIcon>
|
||||
Clear Live Logs
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<h3 class="text-lg font-semibold">
|
||||
<FontAwesomeIcon :icon="faGraduationCap" class="mr-1"></FontAwesomeIcon>
|
||||
Selected Exercises
|
||||
</h3>
|
||||
<div
|
||||
v-for="(exercise) in exercises"
|
||||
:key="exercise.name"
|
||||
class="form-control pl-3"
|
||||
>
|
||||
<label class="label cursor-pointer justify-start">
|
||||
<input
|
||||
@change="changeSelectionState($event.target.checked, exercise.uuid)"
|
||||
type="checkbox"
|
||||
:checked="selected_exercises.includes(exercise.uuid)"
|
||||
:value="exercise.uuid"
|
||||
: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>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-semibold mt-4">
|
||||
<FontAwesomeIcon :icon="faSuitcaseMedical" class="mr-1"></FontAwesomeIcon>
|
||||
Diagnostic
|
||||
</h3>
|
||||
<h4 class="font-semibold ml-1 my-3">
|
||||
<strong>MISP Status:</strong>
|
||||
<span class="ml-2">
|
||||
<span :class="{
|
||||
'rounded-lg py-1 px-2': true,
|
||||
'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200': diagnosticLoading,
|
||||
'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,
|
||||
}">
|
||||
<span v-if="diagnosticLoading" class="loading loading-dots loading-sm h-4 inline-block align-middle"></span>
|
||||
<span v-else class="font-bold">
|
||||
{{ !isMISPOnline ? 'Unreachable' : `Online (${diagnostic['version']['version']})` }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</h4>
|
||||
<h4 class="font-semibold ml-1 my-3">
|
||||
<strong>ZMQ Status:</strong>
|
||||
<span class="ml-2">
|
||||
<span :class="{
|
||||
'rounded-lg py-1 px-2': true,
|
||||
'dark:bg-neutral-800 bg-neutral-400 text-slate-800 dark:text-slate-200': diagnosticLoading,
|
||||
'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,
|
||||
}">
|
||||
<span v-if="diagnosticLoading" class="loading loading-dots loading-sm h-4 inline-block align-middle"></span>
|
||||
<span v-else class="font-bold">
|
||||
{{ !isZMQActive ? 'No message received yet' : `ZMQ Active (${ZMQMessageCount} messages)` }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<template v-if="diagnosticLoading || isMISPOnline">
|
||||
<h4 class="font-semibold ml-1"><strong>MISP Settings:</strong></h4>
|
||||
<div class="ml-3">
|
||||
<div v-if="diagnosticLoading" class="flex justify-center">
|
||||
<span class="loading loading-dots loading-lg"></span>
|
||||
</div>
|
||||
<table v-else class="bg-white dark:bg-slate-700 rounded-lg shadow-xl w-full mt-2">
|
||||
<thead>
|
||||
<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">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>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
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 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>
|
||||
{{ settingValues.value }}
|
||||
</td>
|
||||
<td class="font-mono text-base tracking-tight px-2">{{ settingValues.expected_value }}</td>
|
||||
<td class="px-2 text-center">
|
||||
<span v-if="settingValues.error === true"
|
||||
class="text-red-600 dark:text-red-600"
|
||||
>Error: {{ settingValues.errorMessage }}</span>
|
||||
<button
|
||||
v-else-if="settingValues.expected_value != settingValues.value"
|
||||
@click="clickedButtons.push(setting) && settingHandler(setting)"
|
||||
:disabled="clickedButtons.includes(setting)"
|
||||
class="h-8 min-h-8 px-2 font-semibold bg-green-600 text-slate-200 hover:bg-green-700 btn gap-1"
|
||||
>
|
||||
<template v-if="!clickedButtons.includes(setting)">
|
||||
<FontAwesomeIcon :icon="faHammer" size="sm" fixed-width></FontAwesomeIcon>
|
||||
Remediate
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="loading loading-dots loading-sm"></span>
|
||||
</template>
|
||||
</button>
|
||||
<span v-else class="text-base font-bold text-green-600 dark:text-green-600">
|
||||
<FontAwesomeIcon :icon="faCheck" class=""></FontAwesomeIcon>
|
||||
OK
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
<form method="dialog" class="modal-backdrop backdrop-blur">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,113 +1,81 @@
|
|||
<script setup>
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import {
|
||||
notifications,
|
||||
userCount,
|
||||
notificationCounter,
|
||||
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'
|
||||
import { ref, watch, computed } from "vue"
|
||||
import { notifications, userCount, notificationCounter, notificationAPICounter, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faSignal, faCloud, faCog, faUsers, faCircle } from '@fortawesome/free-solid-svg-icons'
|
||||
import TheLiveLogsActivityGraphVue from "./TheLiveLogsActivityGraph.vue";
|
||||
|
||||
const verbose = ref(false)
|
||||
const api_query = ref(false)
|
||||
|
||||
watch(verbose, (newValue) => {
|
||||
toggleVerboseMode(newValue == true)
|
||||
})
|
||||
const verbose = ref(false)
|
||||
const api_query = ref(false)
|
||||
|
||||
watch(api_query, (newValue) => {
|
||||
toggleApiQueryMode(newValue == true)
|
||||
})
|
||||
watch(verbose, (newValue) => {
|
||||
toggleVerboseMode(newValue == true)
|
||||
})
|
||||
|
||||
function getClassFromResponseCode(response_code) {
|
||||
if (String(response_code).startsWith('2') || response_code == 302) {
|
||||
return 'text-green-500'
|
||||
} else if (String(response_code).startsWith('5')) {
|
||||
return 'text-red-600'
|
||||
} else {
|
||||
return 'text-amber-600'
|
||||
watch(api_query, (newValue) => {
|
||||
toggleApiQueryMode(newValue == true)
|
||||
})
|
||||
|
||||
function getClassFromResponseCode(response_code) {
|
||||
if (String(response_code).startsWith('2') || response_code == 302) {
|
||||
return 'text-green-500'
|
||||
} else if (String(response_code).startsWith('5')) {
|
||||
return 'text-red-600'
|
||||
} else {
|
||||
return 'text-amber-600'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
|
||||
<FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon>
|
||||
Live logs
|
||||
</h3>
|
||||
<div>
|
||||
<h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400">
|
||||
<FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon>
|
||||
Live logs
|
||||
</h3>
|
||||
|
||||
<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="mr-1">
|
||||
<FontAwesomeIcon :icon="faUsers" size="sm"></FontAwesomeIcon>
|
||||
Players:
|
||||
</span>
|
||||
<span class="font-bold">{{ userCount }}</span>
|
||||
<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="mr-1">
|
||||
<FontAwesomeIcon :icon="faUsers" size="sm"></FontAwesomeIcon>
|
||||
Players:
|
||||
</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="mr-1">
|
||||
<FontAwesomeIcon :icon="faSignal" size="sm"></FontAwesomeIcon>
|
||||
Total Queries:
|
||||
</span>
|
||||
<span class="font-bold">{{ notificationCounter }}</span>
|
||||
<span class="font-bold">{{ userCount }}</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="mr-1">
|
||||
<FontAwesomeIcon :icon="faSignal" size="sm"></FontAwesomeIcon>
|
||||
Total Queries:
|
||||
</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="mr-1">
|
||||
<FontAwesomeIcon
|
||||
:icon="faCog"
|
||||
size="sm"
|
||||
:mask="faCloud"
|
||||
transform="shrink-7 left-1"
|
||||
></FontAwesomeIcon>
|
||||
Total API Queries:
|
||||
</span>
|
||||
<span class="font-bold">{{ notificationAPICounter }}</span>
|
||||
<span class="font-bold">{{ notificationCounter }}</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="mr-1">
|
||||
<FontAwesomeIcon :icon="faCog" size="sm" :mask="faCloud" transform="shrink-7 left-1"></FontAwesomeIcon>
|
||||
Total API Queries:
|
||||
</span>
|
||||
<span class="flex items-center">
|
||||
<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"
|
||||
/>
|
||||
Verbose
|
||||
</label>
|
||||
</span>
|
||||
<span class="flex items-center">
|
||||
<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"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
:icon="faCog"
|
||||
size="sm"
|
||||
:mask="faCloud"
|
||||
transform="shrink-7 left-1"
|
||||
class="mr-1"
|
||||
></FontAwesomeIcon>
|
||||
API Queries
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<span class="font-bold">{{ notificationAPICounter }}</span>
|
||||
</span>
|
||||
<span class="flex items-center">
|
||||
<label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300">
|
||||
<input type="checkbox" class="toggle toggle-warning [--fallback-su:#22c55e] mr-1" :checked="verbose" @change="verbose = !verbose"/>
|
||||
Verbose
|
||||
</label>
|
||||
</span>
|
||||
<span class="flex items-center">
|
||||
<label class="mr-1 flex items-center cursor-pointer text-slate-700 dark:text-slate-300">
|
||||
<input type="checkbox" class="toggle toggle-success [--fallback-su:#22c55e] 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
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<TheLiveLogsActivityGraphVue></TheLiveLogsActivityGraphVue>
|
||||
<TheLiveLogsActivityGraphVue></TheLiveLogsActivityGraphVue>
|
||||
|
||||
<table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full">
|
||||
<table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full">
|
||||
<thead>
|
||||
<tr class="font-medium dark:text-slate-200 text-slate-600">
|
||||
<th class="border-b border-slate-100 dark:border-slate-700 p-3 pl-6 text-left"></th>
|
||||
|
|
@ -131,9 +99,7 @@ function getClassFromResponseCode(response_code) {
|
|||
<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"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:icon="faCircle"
|
||||
size="xs"
|
||||
<FontAwesomeIcon :icon="faCircle" size="xs"
|
||||
:class="getClassFromResponseCode(notification.response_code)"
|
||||
></FontAwesomeIcon>
|
||||
<pre class="inline ml-1">{{ notification.response_code }}</pre>
|
||||
|
|
@ -145,58 +111,45 @@ function getClassFromResponseCode(response_code) {
|
|||
<span class="text-lg font-bold font-mono">{{ notification.user.split('@')[0] }}</span>
|
||||
<span class="text-xs font-mono">@{{ notification.user.split('@')[1] }}</span>
|
||||
</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
|
||||
class="border-b border-slate-100 dark:border-slate-700 text-sky-600 dark:text-sky-400 p-1"
|
||||
>
|
||||
<td 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">
|
||||
<span
|
||||
v-if="notification.http_method == 'POST'"
|
||||
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
|
||||
>
|
||||
<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 dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100"
|
||||
>PUT</span
|
||||
>
|
||||
<span
|
||||
v-else-if="notification.http_method == 'DELETE'"
|
||||
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"
|
||||
>DEL</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
|
||||
>
|
||||
<span v-if="notification.http_method == 'POST'"
|
||||
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>
|
||||
<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
|
||||
dark:bg-amber-600 dark:text-neutral-100 bg-amber-600 text-neutral-100"
|
||||
>PUT</span>
|
||||
<span v-else-if="notification.http_method == 'DELETE'"
|
||||
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"
|
||||
>DEL</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
|
||||
v-if="notification.is_api_request"
|
||||
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>
|
||||
<pre class="text-sm inline">{{ notification.url }}</pre>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
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'"
|
||||
<td 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"
|
||||
>
|
||||
<pre class="p-1 text-xs">{{ JSON.stringify(notification.payload, null, 2) }}</pre>
|
||||
<pre
|
||||
class="p-1 text-xs"
|
||||
>{{ JSON.stringify(notification.payload, null, 2) }}</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,92 +1,84 @@
|
|||
<script setup>
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { notificationHistory, notificationHistoryConfig } from '@/socket'
|
||||
import { darkModeEnabled } from '@/settings.js'
|
||||
import { ref, watch, computed } from "vue"
|
||||
import { notificationHistory, notificationHistoryConfig } from "@/socket";
|
||||
import { darkModeEnabled } from "@/settings.js"
|
||||
|
||||
const theChart = ref(null)
|
||||
const chartInitSeries = [{ data: Array.from(Array(12 * 20)).map(() => 0) }]
|
||||
const hasActivity = computed(() => notificationHistory.value.length > 0)
|
||||
const chartSeries = computed(() => {
|
||||
return notificationHistory.value ? notificationHistorySeries.value : chartInitSeries.value
|
||||
})
|
||||
const theChart = ref(null)
|
||||
const chartInitSeries = [
|
||||
{data: Array.from(Array(12*20)).map(()=> 0)}
|
||||
]
|
||||
const hasActivity = computed(() => notificationHistory.value.length > 0)
|
||||
const chartSeries = computed(() => {
|
||||
return notificationHistory.value ? notificationHistorySeries.value : chartInitSeries.value
|
||||
})
|
||||
|
||||
const notificationHistorySeries = computed(() => {
|
||||
return [{ data: Array.from(notificationHistory.value) }]
|
||||
})
|
||||
const notificationHistorySeries = computed(() => {
|
||||
return [{data: Array.from(notificationHistory.value)}]
|
||||
})
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
width: '100%',
|
||||
height: 32,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
width: '100%',
|
||||
height: 32,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
enabledOnSeries: undefined,
|
||||
top: 2,
|
||||
left: 1,
|
||||
blur: 2,
|
||||
color: '#000',
|
||||
opacity: darkModeEnabled.value ? 0.35 : 0.15
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
easing: 'easeinout',
|
||||
speed: 200,
|
||||
},
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
enabledOnSeries: undefined,
|
||||
top: 2,
|
||||
left: 1,
|
||||
blur: 2,
|
||||
color: '#000',
|
||||
opacity: darkModeEnabled.value ? 0.35 : 0.15
|
||||
colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '80%'
|
||||
}
|
||||
},
|
||||
animations: {
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 20,
|
||||
labels: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
easing: 'easeinout',
|
||||
speed: 200
|
||||
}
|
||||
},
|
||||
colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '80%'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 20,
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<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="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
|
||||
>
|
||||
<div class="text-xxs 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-lg">–</span>
|
||||
<span class="-rotate-90 w-8 text-xs">–</span>
|
||||
<span class="-rotate-90 w-8 -mr-1.5">- 0min</span>
|
||||
</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 -
|
||||
</i>
|
||||
<apexchart
|
||||
ref="theChart"
|
||||
:class="hasActivity ? 'block' : 'absolute h-8 w-full'"
|
||||
height="32"
|
||||
width="100%"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
ref="theChart" :class="hasActivity ? 'block' : 'absolute h-8 w-full'" height="32" width="100%"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
></apexchart>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -1,60 +1,58 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { progresses, userCount } from '@/socket'
|
||||
import { faUsers } from '@fortawesome/free-solid-svg-icons'
|
||||
import { darkModeEnabled } from '@/settings.js'
|
||||
import LiveLogsUserActivityGraph from './LiveLogsUserActivityGraph.vue'
|
||||
import { ref, computed } from "vue";
|
||||
import { progresses, userCount } from "@/socket";
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faUsers } from '@fortawesome/free-solid-svg-icons'
|
||||
import { darkModeEnabled } from "@/settings.js"
|
||||
import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
|
||||
|
||||
const compactGrid = computed(() => {
|
||||
return userCount.value > 70
|
||||
})
|
||||
const sortedProgress = computed(() =>
|
||||
Object.values(progresses.value).sort((a, b) => {
|
||||
|
||||
const compactGrid = computed(() => { return userCount.value > 70 })
|
||||
const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
|
||||
if (a.email < b.email) {
|
||||
return -1
|
||||
return -1;
|
||||
}
|
||||
if (a.email > b.email) {
|
||||
return 1
|
||||
return 1;
|
||||
}
|
||||
return 0
|
||||
})
|
||||
)
|
||||
return 0;
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
|
||||
<FontAwesomeIcon :icon="faUsers"></FontAwesomeIcon>
|
||||
Active Players
|
||||
</h4>
|
||||
<div 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
|
||||
">
|
||||
|
||||
<div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
|
||||
<span
|
||||
v-for="progress in sortedProgress"
|
||||
:key="progress.user_id"
|
||||
class="bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg border-slate-700"
|
||||
>
|
||||
<span class="flex p-2 mb-1 text-slate-600 dark:text-slate-400">
|
||||
<span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'}`">
|
||||
<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 :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`"
|
||||
>@{{ progress.email.split('@')[1] }}</span
|
||||
>
|
||||
</span>
|
||||
<LiveLogsUserActivityGraph
|
||||
:user_id="progress.user_id"
|
||||
:compact_view="compactGrid"
|
||||
:ultra_compact_view="false"
|
||||
></LiveLogsUserActivityGraph>
|
||||
<h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400">
|
||||
<FontAwesomeIcon :icon="faUsers"></FontAwesomeIcon>
|
||||
Active Players
|
||||
</h4>
|
||||
|
||||
<div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
|
||||
<span
|
||||
v-for="(progress) in sortedProgress"
|
||||
:key="progress.user_id"
|
||||
class="bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg border-slate-700"
|
||||
>
|
||||
<span class="
|
||||
flex p-2 mb-1
|
||||
text-slate-600 dark:text-slate-400
|
||||
">
|
||||
<span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'}`">
|
||||
<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 :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`">@{{ progress.email.split('@')[1] }}</span>
|
||||
</span>
|
||||
<LiveLogsUserActivityGraph
|
||||
:user_id="progress.user_id"
|
||||
:compact_view="compactGrid"
|
||||
:ultra_compact_view="false"
|
||||
></LiveLogsUserActivityGraph>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,54 +1,58 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { active_exercises as exercises } from '@/socket'
|
||||
import {
|
||||
faGraduationCap,
|
||||
faUpRightAndDownLeftFromCenter,
|
||||
faDownLeftAndUpRightToCenter,
|
||||
faWarning
|
||||
} 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'
|
||||
import { ref, computed } from "vue";
|
||||
import { active_exercises as exercises } from "@/socket";
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter, faWarning } 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 fullscreen_panel = ref(false)
|
||||
const hasExercises = computed(() => exercises.value.length > 0)
|
||||
const fullscreen_panel = ref(false)
|
||||
|
||||
function toggleFullScreen(exercise_index) {
|
||||
if (fullscreen_panel.value === exercise_index) {
|
||||
fullscreen_panel.value = false
|
||||
fullscreenModeOn.value = false
|
||||
} else {
|
||||
fullscreen_panel.value = exercise_index
|
||||
fullscreenModeOn.value = true
|
||||
function toggleFullScreen(exercise_index) {
|
||||
if (fullscreen_panel.value === exercise_index) {
|
||||
fullscreen_panel.value = false
|
||||
fullscreenModeOn.value = false
|
||||
} else {
|
||||
fullscreen_panel.value = exercise_index
|
||||
fullscreenModeOn.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<FontAwesomeIcon :icon="faGraduationCap"></FontAwesomeIcon>
|
||||
Active Exercises
|
||||
</h3>
|
||||
|
||||
<div v-if="!hasExercises" class="text-slate-600 dark:text-slate-400 p-3 pl-6">
|
||||
<Alert variant="warning">
|
||||
<div
|
||||
v-if="!hasExercises"
|
||||
class="text-slate-600 dark:text-slate-400 p-3 pl-6"
|
||||
>
|
||||
<div class="
|
||||
p-2 border-l-4 text-left rounded
|
||||
dark:bg-yellow-300 dark:text-slate-900 dark:border-yellow-700
|
||||
bg-yellow-200 text-slate-900 border-yellow-700
|
||||
">
|
||||
<FontAwesomeIcon :icon="faWarning" class="text-yellow-700 text-lg mx-3"></FontAwesomeIcon>
|
||||
<strong class="">No Exercise available.</strong>
|
||||
<span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span>
|
||||
</Alert>
|
||||
</div>
|
||||
|
||||
<ThePlayerGrid></ThePlayerGrid>
|
||||
</div>
|
||||
|
||||
<template v-for="(exercise, exercise_index) in exercises" :key="exercise.name">
|
||||
<template
|
||||
v-for="(exercise, exercise_index) in exercises"
|
||||
:key="exercise.name"
|
||||
>
|
||||
<div :class="fullscreen_panel === false ? 'relative min-w-fit' : ''">
|
||||
<span
|
||||
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
|
||||
@click="toggleFullScreen(exercise_index)"
|
||||
|
|
@ -59,14 +63,7 @@ function toggleFullScreen(exercise_index) {
|
|||
${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>
|
||||
</span>
|
||||
<KeepAlive>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,46 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { socketConnected, zmqLastTime } from '@/socket'
|
||||
import { ref, onMounted } from "vue"
|
||||
import { socketConnected, zmqLastTime } from "@/socket";
|
||||
|
||||
const zmqLastTimeSecond = ref('?')
|
||||
const zmqLastTimeSecond = ref('?')
|
||||
|
||||
function refreshLastTime() {
|
||||
if (zmqLastTime.value !== false) {
|
||||
zmqLastTimeSecond.value = parseInt((new Date().getTime() - zmqLastTime.value * 1000) / 1000)
|
||||
} else {
|
||||
zmqLastTimeSecond.value = '?'
|
||||
function refreshLastTime() {
|
||||
if (zmqLastTime.value !== false) {
|
||||
zmqLastTimeSecond.value = parseInt(((new Date()).getTime() - zmqLastTime.value * 1000) / 1000)
|
||||
} else {
|
||||
zmqLastTimeSecond.value = '?'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
refreshLastTime()
|
||||
}, 1000)
|
||||
})
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
refreshLastTime()
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="flex flex-col justify-center mt-1">
|
||||
<span
|
||||
:class="{
|
||||
'px-2 rounded-md inline-block w-48 leading-4': true,
|
||||
'text-slate-900 dark:text-slate-400': socketConnected,
|
||||
'text-slate-50 bg-red-600 px-2 py-1': !socketConnected
|
||||
}"
|
||||
>
|
||||
<span :class="{
|
||||
'px-2 rounded-md inline-block w-48 leading-4': true,
|
||||
'text-slate-900 dark:text-slate-400': socketConnected,
|
||||
'text-slate-50 bg-red-600 px-2 py-1': !socketConnected,
|
||||
}">
|
||||
<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>
|
||||
<span v-if="socketConnected" class="text-xs font-thin leading-3 inline-block text-center">
|
||||
<template v-if="zmqLastTimeSecond == 0"> online </template>
|
||||
<template v-else> Last keep-alive: {{ zmqLastTimeSecond }}s ago </template>
|
||||
<span
|
||||
v-if="socketConnected"
|
||||
class="text-xs font-thin leading-3 inline-block text-center"
|
||||
>
|
||||
<template v-if="zmqLastTimeSecond == 0">
|
||||
online
|
||||
</template>
|
||||
<template v-else>
|
||||
Last keep-alive: {{ zmqLastTimeSecond }}s ago
|
||||
</template>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -1,18 +1,19 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
|
||||
import { darkModeOn } from '@/settings.js'
|
||||
import { ref, watch } from 'vue'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
|
||||
import { darkModeOn } from "@/settings.js"
|
||||
|
||||
const darkMode = ref(darkModeOn.value)
|
||||
const darkMode = ref(darkModeOn.value)
|
||||
|
||||
watch(darkMode, (newValue) => {
|
||||
darkModeOn.value = newValue
|
||||
if (newValue) {
|
||||
document.getElementsByTagName('body')[0].classList.add('dark')
|
||||
} else {
|
||||
document.getElementsByTagName('body')[0].classList.remove('dark')
|
||||
}
|
||||
})
|
||||
watch(darkMode, (newValue) => {
|
||||
darkModeOn.value = newValue
|
||||
if (newValue) {
|
||||
document.getElementsByTagName('body')[0].classList.add('dark')
|
||||
} else {
|
||||
document.getElementsByTagName('body')[0].classList.remove('dark')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -22,10 +23,9 @@ watch(darkMode, (newValue) => {
|
|||
type="checkbox"
|
||||
@click="darkMode = !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-400 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0]" />
|
||||
<svg
|
||||
class="stroke-slate-800 dark:stroke-slate-100 fill-slate-800 dark:fill-slate-100 col-start-1 row-start-1"
|
||||
class="stroke-base-100 fill-base-100 col-start-1 row-start-1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
|
|
@ -34,15 +34,13 @@ watch(darkMode, (newValue) => {
|
|||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<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
|
||||
class="dark:stroke-slate-800 stroke-slate-700 dark:fill-slate-800 fill-slate-700 col-start-2 row-start-1"
|
||||
class="stroke-base-100 fill-base-100 col-start-2 row-start-1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
|
|
@ -51,48 +49,9 @@ watch(darkMode, (newValue) => {
|
|||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
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>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toggle {
|
||||
--animation-input: 0.2s;
|
||||
--handleoffset: 1.5rem;
|
||||
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
|
||||
--togglehandleborder: 0 0;
|
||||
@apply h-6 w-12 rounded-3xl cursor-pointer appearance-none border border-current bg-current;
|
||||
transition:
|
||||
background,
|
||||
box-shadow var(--animation-input, 0.2s) ease-out;
|
||||
box-shadow:
|
||||
var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
|
||||
0 0 0 2px var(--tglbg) inset,
|
||||
var(--togglehandleborder);
|
||||
&:focus-visible {
|
||||
@apply outline outline-2 outline-offset-2;
|
||||
}
|
||||
&:hover {
|
||||
@apply bg-current;
|
||||
}
|
||||
&:checked,
|
||||
&[aria-checked='true'] {
|
||||
background-image: none;
|
||||
--handleoffsetcalculator: var(--handleoffset);
|
||||
}
|
||||
&:indeterminate {
|
||||
box-shadow:
|
||||
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;
|
||||
}
|
||||
&:disabled {
|
||||
@apply cursor-not-allowed bg-transparent opacity-30;
|
||||
--togglehandleborder: 0 0 0 3px #000 inset, var(--handleoffsetcalculator) 0 0 3px #000 inset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<script setup>
|
||||
import {
|
||||
faCircleCheck,
|
||||
faCircleExclamation,
|
||||
faCircleInfo,
|
||||
faTriangleExclamation
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
message: [Array, String],
|
||||
variant: {
|
||||
type: String,
|
||||
validator(value, props) {
|
||||
return ['success', 'warning', 'danger', 'info'].includes(value)
|
||||
},
|
||||
default: 'info'
|
||||
}
|
||||
})
|
||||
|
||||
const icon = computed(() => {
|
||||
if (props.variant == 'success') {
|
||||
return faCircleCheck
|
||||
} else if (props.variant == 'warning') {
|
||||
return faCircleExclamation
|
||||
} else if (props.variant == 'danger') {
|
||||
return faTriangleExclamation
|
||||
}
|
||||
return faCircleInfo
|
||||
})
|
||||
|
||||
const variantClass = computed(() => {
|
||||
if (props.variant == 'success') {
|
||||
return 'green'
|
||||
} else if (props.variant == 'warning') {
|
||||
return 'amber'
|
||||
} else if (props.variant == 'danger') {
|
||||
return 'red'
|
||||
}
|
||||
return 'blue'
|
||||
})
|
||||
|
||||
const messages = computed(() => {
|
||||
return Array.isArray(props.message)
|
||||
? props.message
|
||||
: props.message !== undefined
|
||||
? [props.message]
|
||||
: []
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="`mb-2 p-2 border-l-4 text-left rounded dark:bg-${variantClass}-300 dark:text-slate-900 dark:border-${variantClass}-700 bg-${variantClass}-200 text-slate-900 border-${variantClass}-700`"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:icon="icon"
|
||||
:class="`text-${variantClass}-700 text-lg mx-3`"
|
||||
></FontAwesomeIcon>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<script setup>
|
||||
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FontAwesomeIcon :icon="faSpinner" class="fa-spin" fixed-width></FontAwesomeIcon>
|
||||
</template>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { faTimes } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
const props = defineProps({
|
||||
showModal: Boolean
|
||||
})
|
||||
|
||||
const dialog = ref(null)
|
||||
|
||||
const emit = defineEmits(['modal-close'])
|
||||
|
||||
function closeModal() {
|
||||
emit('modal-close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div>
|
||||
<Transition>
|
||||
<div
|
||||
v-if="props.showModal"
|
||||
class="fixed w-4/6 top-20 left-2/4 -translate-x-1/2 rounded-lg border border-slate-800 shadow-lg z-50"
|
||||
>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
@click.stop="closeModal()"
|
||||
class="bg-white/30 backdrop-blur-sm fixed top-0 bottom-0 left-0 right-0 z-40 cursor-pointer"
|
||||
></div>
|
||||
</Teleport>
|
||||
<div class="flex px-4 py-3 bg-slate-700 rounded-t-lg border-b border-slate-800">
|
||||
<h2 class="text-white font-semibold text-lg">
|
||||
<slot name="header"></slot>
|
||||
</h2>
|
||||
<span class="ml-auto text-xl">
|
||||
<button
|
||||
@click.stop="closeModal()"
|
||||
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>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-slate-100">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-slate-100 rounded-b-lg">
|
||||
<slot name="footer">
|
||||
<div class="flex flex-row-reverse">
|
||||
<button class="btn btn-primary btn-lg" @click.stop="closeModal()">Ok</button>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.v-enter-active {
|
||||
@apply transition duration-150 ease-out;
|
||||
}
|
||||
.v-leave-active {
|
||||
@apply transition duration-150 ease-in;
|
||||
}
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
@apply scale-90;
|
||||
@apply opacity-0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { removeToast } from '@/utils.js'
|
||||
import {
|
||||
faCancel,
|
||||
faCheck,
|
||||
faCircleCheck,
|
||||
faCircleExclamation,
|
||||
faCircleInfo,
|
||||
faClose,
|
||||
faTriangleExclamation
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const props = defineProps({
|
||||
id: Number,
|
||||
title: String,
|
||||
message: String,
|
||||
variant: {
|
||||
type: String,
|
||||
validator(value, props) {
|
||||
return ['success', 'warning', 'danger', 'info'].includes(value)
|
||||
},
|
||||
default: 'info'
|
||||
},
|
||||
confirm: Boolean,
|
||||
confirmCb: Function
|
||||
})
|
||||
|
||||
const duration = 7000
|
||||
|
||||
const icon = computed(() => {
|
||||
if (props.variant == 'success') {
|
||||
return faCircleCheck
|
||||
} else if (props.variant == 'warning') {
|
||||
return faCircleExclamation
|
||||
} else if (props.variant == 'danger') {
|
||||
return faTriangleExclamation
|
||||
}
|
||||
return faCircleInfo
|
||||
})
|
||||
|
||||
const variantClass = computed(() => {
|
||||
if (props.variant == 'success') {
|
||||
return 'green'
|
||||
} else if (props.variant == 'warning') {
|
||||
return 'amber'
|
||||
} else if (props.variant == 'danger') {
|
||||
return 'red'
|
||||
}
|
||||
return 'blue'
|
||||
})
|
||||
|
||||
function close() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function callConfirmCb() {
|
||||
props.confirmCb()
|
||||
close()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
removeToast(props.id)
|
||||
}, duration)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`flex flex-col min-w-72 py-2 px-3 rounded bg-${variantClass}-100`">
|
||||
<div :class="`text-${variantClass}-800 flex items-center`">
|
||||
<FontAwesomeIcon :icon="icon" class="mr-2"></FontAwesomeIcon>
|
||||
<span class="font-semibold">{{ props.title }}</span>
|
||||
<button class="ml-auto w-6 btn btn-link !p-0">
|
||||
<FontAwesomeIcon
|
||||
:icon="faClose"
|
||||
class="text-gray-500 hover:text-gray-700"
|
||||
fixed-width
|
||||
@click="close()"
|
||||
></FontAwesomeIcon>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="text-slate-600 p-1 font-light"
|
||||
v-if="props.message !== undefined && props.message.length > 0"
|
||||
>
|
||||
{{ props.message }}
|
||||
</div>
|
||||
<div v-if="props.confirm" class="flex gap-1">
|
||||
<button class="btn btn-info" @click="callConfirmCb()">
|
||||
<FontAwesomeIcon :icon="faCheck" class="fa-fw"></FontAwesomeIcon> Confirm
|
||||
</button>
|
||||
<button class="btn" @click="close()">
|
||||
<FontAwesomeIcon :icon="faCancel" class="fa-fw"></FontAwesomeIcon> Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { allToasts, removeToast } from '@/utils.js'
|
||||
import Toast from '@/components/elements/Toast.vue'
|
||||
|
||||
const container = ref()
|
||||
const toasts = computed(() => allToasts.value)
|
||||
|
||||
function remove(toast_id) {
|
||||
removeToast(toast_id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div ref="container" class="fixed m-3 top-0 right-0">
|
||||
<transition-group name="list" tag="div" class="flex flex-col-reverse gap-2">
|
||||
<Toast
|
||||
v-for="toast of toasts"
|
||||
:key="toast.id"
|
||||
:id="toast.id"
|
||||
:title="toast.title"
|
||||
:message="toast.message"
|
||||
:variant="toast.variant"
|
||||
:confirm="toast.confirm"
|
||||
:confirmCb="toast.confirmCb"
|
||||
@close="remove(toast.id)"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.list-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<label class="grid cursor-pointer place-items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toggle {
|
||||
--animation-input: 0.2s;
|
||||
--handleoffset: 1.5rem;
|
||||
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
|
||||
--togglehandleborder: 0 0;
|
||||
@apply h-6 w-12 rounded-3xl cursor-pointer appearance-none border border-current bg-current;
|
||||
transition:
|
||||
background,
|
||||
box-shadow var(--animation-input, 0.2s) ease-out;
|
||||
box-shadow:
|
||||
var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
|
||||
0 0 0 2px var(--tglbg) inset,
|
||||
var(--togglehandleborder);
|
||||
&:focus-visible {
|
||||
@apply outline outline-2 outline-offset-2;
|
||||
}
|
||||
&:hover {
|
||||
@apply bg-current;
|
||||
}
|
||||
&:checked,
|
||||
&[aria-checked='true'] {
|
||||
background-image: none;
|
||||
--handleoffsetcalculator: var(--handleoffset);
|
||||
}
|
||||
&:indeterminate {
|
||||
box-shadow:
|
||||
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;
|
||||
}
|
||||
&:disabled {
|
||||
@apply cursor-not-allowed bg-transparent opacity-30;
|
||||
--togglehandleborder: 0 0 0 3px #000 inset, var(--handleoffsetcalculator) 0 0 3px #000 inset;
|
||||
}
|
||||
|
||||
&-success {
|
||||
}
|
||||
}
|
||||
|
||||
/* backward compatibility */
|
||||
.toggle-mark {
|
||||
@apply hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,291 +1,251 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { active_exercises as exercises, progresses, userCount, setCompletedState } from '@/socket'
|
||||
import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
|
||||
import { darkModeEnabled } from '@/settings.js'
|
||||
import LiveLogsUserActivityGraph from '../LiveLogsUserActivityGraph.vue'
|
||||
import { ref, computed } from "vue";
|
||||
import { active_exercises as exercises, progresses, userCount, setCompletedState } from "@/socket";
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
|
||||
import { darkModeEnabled } from "@/settings.js"
|
||||
import LiveLogsUserActivityGraph from "../LiveLogsUserActivityGraph.vue"
|
||||
|
||||
const props = defineProps(['exercise', 'exercise_index'])
|
||||
const collapsed_panels = ref([])
|
||||
const props = defineProps(['exercise', 'exercise_index'])
|
||||
const collapsed_panels = ref([])
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
height: 120,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
height: 120,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
easing: 'easeinout',
|
||||
speed: 200,
|
||||
},
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
easing: 'easeinout',
|
||||
speed: 200
|
||||
}
|
||||
},
|
||||
colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -110,
|
||||
endAngle: 110,
|
||||
hollow: {
|
||||
margin: 0,
|
||||
size: '30%',
|
||||
background: '#64748b',
|
||||
position: 'front',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 3,
|
||||
left: 0,
|
||||
blur: 4,
|
||||
opacity: 0.24
|
||||
}
|
||||
},
|
||||
track: {
|
||||
background: '#475569',
|
||||
strokeWidth: '97%',
|
||||
margin: 0,
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 3,
|
||||
left: 0,
|
||||
blur: 3,
|
||||
opacity: 0.35
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: false
|
||||
colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -110,
|
||||
endAngle: 110,
|
||||
hollow: {
|
||||
margin: 0,
|
||||
size: '30%',
|
||||
background: '#64748b',
|
||||
position: 'front',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 3,
|
||||
left: 0,
|
||||
blur: 4,
|
||||
opacity: 0.24
|
||||
}
|
||||
},
|
||||
value: {
|
||||
formatter: function (val) {
|
||||
return parseInt((val * userCount.value) / 100)
|
||||
track: {
|
||||
background: '#475569',
|
||||
strokeWidth: '97%',
|
||||
margin: 0,
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 3,
|
||||
left: 0,
|
||||
blur: 3,
|
||||
opacity: 0.35
|
||||
}
|
||||
},
|
||||
offsetY: 7,
|
||||
color: darkModeEnabled.value ? '#cbd5e1' : '#f1f5f9',
|
||||
fontSize: '1.25rem',
|
||||
show: true
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
formatter: function(val) {
|
||||
return parseInt(val*userCount.value / 100);
|
||||
},
|
||||
offsetY: 7,
|
||||
color: darkModeEnabled.value ? '#cbd5e1' : '#f1f5f9',
|
||||
fontSize: '1.25rem',
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'smooth'
|
||||
},
|
||||
colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
|
||||
labels: ['Progress'],
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'smooth'
|
||||
},
|
||||
colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
|
||||
labels: ['Progress'],
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
|
||||
setCompletedState(completed, user_id, exec_uuid, task_uuid)
|
||||
}
|
||||
|
||||
function collapse(exercise_index) {
|
||||
const index = collapsed_panels.value.indexOf(exercise_index)
|
||||
if (index >= 0) {
|
||||
collapsed_panels.value.splice(index, 1)
|
||||
} else {
|
||||
collapsed_panels.value.push(exercise_index)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
|
||||
setCompletedState(completed, user_id, exec_uuid, task_uuid)
|
||||
}
|
||||
|
||||
function collapse(exercise_index) {
|
||||
const index = collapsed_panels.value.indexOf(exercise_index)
|
||||
if (index >= 0) {
|
||||
collapsed_panels.value.splice(index, 1)
|
||||
} else {
|
||||
collapsed_panels.value.push(exercise_index)
|
||||
}
|
||||
}
|
||||
|
||||
const compactGrid = computed(() => {
|
||||
return userCount.value > 70
|
||||
})
|
||||
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) => {
|
||||
const compactGrid = computed(() => { return userCount.value > 70 })
|
||||
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) {
|
||||
return -1
|
||||
return -1;
|
||||
}
|
||||
if (a.email > b.email) {
|
||||
return 1
|
||||
return 1;
|
||||
}
|
||||
return 0
|
||||
})
|
||||
)
|
||||
return 0;
|
||||
}))
|
||||
|
||||
const taskCompletionPercentages = computed(() => {
|
||||
const completions = {}
|
||||
Object.values(props.exercise.tasks).forEach((task) => {
|
||||
completions[task.uuid] = 0
|
||||
})
|
||||
const taskCompletionPercentages = computed(() => {
|
||||
const completions = {}
|
||||
Object.values(props.exercise.tasks).forEach(task => {
|
||||
completions[task.uuid] = 0
|
||||
})
|
||||
|
||||
sortedProgress.value.forEach((progress) => {
|
||||
for (const [taskUuid, taskCompletion] of Object.entries(
|
||||
progress.exercises[props.exercise.uuid].tasks_completion
|
||||
)) {
|
||||
if (taskCompletion !== false) {
|
||||
completions[taskUuid] += 1
|
||||
sortedProgress.value.forEach(progress => {
|
||||
for (const [taskUuid, taskCompletion] of Object.entries(progress.exercises[props.exercise.uuid].tasks_completion)) {
|
||||
if (taskCompletion !== false) {
|
||||
completions[taskUuid] += 1
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
|
||||
completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
|
||||
}
|
||||
return completions
|
||||
})
|
||||
|
||||
for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
|
||||
completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
|
||||
}
|
||||
return completions
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="fixed inset-2 z-40 h-100 overflow-x-hidden rounded-lg bg-slate-300 dark:bg-slate-800 border border-slate-400 dark:border-slate-800"
|
||||
>
|
||||
<div
|
||||
class="rounded-t-lg text-md p-3 pl-6 text-center dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100"
|
||||
>
|
||||
<!-- Modal header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-lg font-semibold">{{ exercise.name }}</span>
|
||||
<span class="mr-8">
|
||||
Level:
|
||||
<span
|
||||
:class="{
|
||||
<div class="
|
||||
fixed inset-2 z-40 h-100 overflow-x-hidden
|
||||
rounded-lg bg-slate-300 dark:bg-slate-800 border border-slate-400 dark:border-slate-800
|
||||
">
|
||||
|
||||
<div
|
||||
class="
|
||||
rounded-t-lg text-md p-3 pl-6 text-center
|
||||
dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100
|
||||
"
|
||||
>
|
||||
<!-- Modal header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-lg font-semibold">{{ exercise.name }}</span>
|
||||
<span class="mr-8">
|
||||
Level: <span :class="{
|
||||
'rounded-lg px-1 ml-2': true,
|
||||
'dark:bg-sky-400 bg-sky-400 text-neutral-950': exercise.level == 'beginner',
|
||||
'dark:bg-orange-400 bg-orange-400 text-neutral-950': exercise.level == 'advanced',
|
||||
'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert'
|
||||
}"
|
||||
>{{ exercise.level }}</span
|
||||
'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert',
|
||||
}">{{ exercise.level }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tasks name and pie charts -->
|
||||
<div class="p-2">
|
||||
<div class="flex justify-between mb-3">
|
||||
<span
|
||||
v-for="(task, task_index) in exercise.tasks"
|
||||
:key="task.name"
|
||||
class="p-1 inline-block"
|
||||
:title="task.description"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tasks name and pie charts -->
|
||||
<div class="p-2">
|
||||
<div class="flex justify-between mb-3">
|
||||
<span
|
||||
v-for="(task, task_index) in exercise.tasks"
|
||||
:key="task.name"
|
||||
class="p-1 inline-block"
|
||||
:title="task.description"
|
||||
>
|
||||
<span class="flex flex-col">
|
||||
<span
|
||||
class="text-center font-normal text-sm dark:text-blue-200 text-slate-800 text-nowrap"
|
||||
>Task {{ task_index + 1 }}</span
|
||||
>
|
||||
<i class="text-center leading-4 text-slate-600 dark:text-slate-400">{{ task.name }}</i>
|
||||
<span class="inline-block h-18 -mt-4 mx-auto">
|
||||
<apexchart
|
||||
ref="theChart"
|
||||
class=""
|
||||
height="120"
|
||||
width="100"
|
||||
:options="chartOptions"
|
||||
:series="[taskCompletionPercentages[task.uuid]]"
|
||||
></apexchart>
|
||||
<span class="flex flex-col">
|
||||
<span class="text-center font-normal text-sm dark:text-blue-200 text-slate-800 text-nowrap">Task {{ task_index + 1 }}</span>
|
||||
<i class="text-center leading-4 text-slate-600 dark:text-slate-400">{{ task.name }}</i>
|
||||
<span class="inline-block h-18 -mt-4 mx-auto">
|
||||
<apexchart
|
||||
ref="theChart" class="" height="120" width="100"
|
||||
:options="chartOptions"
|
||||
:series="[taskCompletionPercentages[task.uuid]]"
|
||||
></apexchart>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User grid -->
|
||||
<div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
|
||||
<span
|
||||
v-for="progress in sortedProgress"
|
||||
:key="progress.user_id"
|
||||
:class="[
|
||||
'bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg',
|
||||
progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score ==
|
||||
1
|
||||
? 'border-green-700'
|
||||
: 'border-slate-700'
|
||||
]"
|
||||
>
|
||||
<span class="flex p-2 mb-1 text-slate-600 dark:text-slate-400">
|
||||
<span
|
||||
:class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'} ${compactGrid ? '' : 'mb-1'}`"
|
||||
>
|
||||
<!-- User grid -->
|
||||
<div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
|
||||
<span
|
||||
v-for="(progress) in sortedProgress"
|
||||
:key="progress.user_id"
|
||||
:class="[
|
||||
'bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg',
|
||||
progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1 ? 'border-green-700' : 'border-slate-700',
|
||||
]"
|
||||
>
|
||||
<span class="
|
||||
flex p-2 mb-1
|
||||
text-slate-600 dark:text-slate-400
|
||||
">
|
||||
<span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'} ${compactGrid ? '' : 'mb-1'}`">
|
||||
<span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate mb-1">
|
||||
<FontAwesomeIcon
|
||||
v-if="progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1"
|
||||
:icon="faMedal" class="mr-1 text-amber-300"
|
||||
></FontAwesomeIcon>
|
||||
<span :class="`${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>
|
||||
<LiveLogsUserActivityGraph
|
||||
:user_id="progress.user_id"
|
||||
:compact_view="compactGrid"
|
||||
:ultra_compact_view="ultraCompactGrid"
|
||||
></LiveLogsUserActivityGraph>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="
|
||||
flex flex-row justify-between px-2
|
||||
text-slate-500 dark:text-slate-400
|
||||
">
|
||||
<span
|
||||
:title="progress.user_id"
|
||||
class="text-nowrap inline-block leading-5 truncate mb-1"
|
||||
v-for="(task, task_index) in exercise.tasks"
|
||||
:key="task_index"
|
||||
class="select-none cursor-pointer"
|
||||
@click="toggleCompleted(progress.exercises[exercise.uuid].tasks_completion[task.uuid], progress.user_id, exercise.uuid, task.uuid)"
|
||||
:title="task.name"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
v-if="
|
||||
progress.exercises[exercise.uuid].score /
|
||||
progress.exercises[exercise.uuid].max_score ==
|
||||
1
|
||||
"
|
||||
:icon="faMedal"
|
||||
class="mr-1 text-amber-300"
|
||||
></FontAwesomeIcon>
|
||||
<span
|
||||
:class="`${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>
|
||||
<LiveLogsUserActivityGraph
|
||||
:user_id="progress.user_id"
|
||||
:compact_view="compactGrid"
|
||||
:ultra_compact_view="ultraCompactGrid"
|
||||
></LiveLogsUserActivityGraph>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="flex flex-row justify-between px-2 text-slate-500 dark:text-slate-400">
|
||||
<span
|
||||
v-for="(task, task_index) in exercise.tasks"
|
||||
:key="task_index"
|
||||
class="select-none cursor-pointer"
|
||||
@click="
|
||||
toggleCompleted(
|
||||
progress.exercises[exercise.uuid].tasks_completion[task.uuid],
|
||||
progress.user_id,
|
||||
exercise.uuid,
|
||||
task.uuid
|
||||
)
|
||||
"
|
||||
:title="task.name"
|
||||
>
|
||||
<span class="text-nowrap">
|
||||
<FontAwesomeIcon
|
||||
v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]"
|
||||
:icon="
|
||||
progress.exercises[exercise.uuid].tasks_completion[task.uuid] &&
|
||||
progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion
|
||||
? faCircleCheck
|
||||
: faCheck
|
||||
"
|
||||
:class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-green-400 text-green-600`"
|
||||
fixed-width
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
v-else-if="
|
||||
task.requirements?.inject_uuid !== undefined &&
|
||||
!progress.exercises[exercise.uuid].tasks_completion[
|
||||
task.requirements.inject_uuid
|
||||
]
|
||||
"
|
||||
title="All requirements for that task haven't been fullfilled yet"
|
||||
:icon="faHourglassHalf"
|
||||
:class="`${compactGrid ? 'text-xs' : 'text-lg'} dark:text-slate-500 text-slate-400`"
|
||||
fixed-width
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
v-else
|
||||
:icon="faTimes"
|
||||
:class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-slate-500 text-slate-400`"
|
||||
fixed-width
|
||||
/>
|
||||
<span class="text-nowrap">
|
||||
<FontAwesomeIcon
|
||||
v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]"
|
||||
:icon="(progress.exercises[exercise.uuid].tasks_completion[task.uuid] && progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion) ? faCircleCheck : faCheck"
|
||||
:class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-green-400 text-green-600`"
|
||||
fixed-width
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
v-else-if="task.requirements?.inject_uuid !== undefined && !progress.exercises[exercise.uuid].tasks_completion[task.requirements.inject_uuid]"
|
||||
title="All requirements for that task haven't been fullfilled yet"
|
||||
:icon="faHourglassHalf"
|
||||
:class="`${compactGrid ? 'text-xs' : 'text-lg'} dark:text-slate-500 text-slate-400`"
|
||||
fixed-width
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
v-else
|
||||
:icon="faTimes"
|
||||
:class="`${compactGrid ? 'text-xs' : 'text-xl'} dark:text-slate-500 text-slate-400`"
|
||||
fixed-width
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -1,288 +1,186 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { active_exercises as exercises, progresses, userCount, setCompletedState } from '@/socket'
|
||||
import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
|
||||
import LiveLogsUserActivityGraph from '../LiveLogsUserActivityGraph.vue'
|
||||
import { ref, computed } from "vue";
|
||||
import { active_exercises as exercises, progresses, userCount, setCompletedState } from "@/socket";
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faCheck, faTimes, faMedal, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
|
||||
import LiveLogsUserActivityGraph from "../LiveLogsUserActivityGraph.vue"
|
||||
|
||||
const props = defineProps(['exercise', 'exercise_index'])
|
||||
const collapsed_panels = ref([])
|
||||
const props = defineProps(['exercise', 'exercise_index'])
|
||||
const collapsed_panels = ref([])
|
||||
|
||||
function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
|
||||
setCompletedState(completed, user_id, exec_uuid, task_uuid)
|
||||
}
|
||||
|
||||
function collapse(exercise_index) {
|
||||
const index = collapsed_panels.value.indexOf(exercise_index)
|
||||
if (index >= 0) {
|
||||
collapsed_panels.value.splice(index, 1)
|
||||
} else {
|
||||
collapsed_panels.value.push(exercise_index)
|
||||
function toggleCompleted(completed, user_id, exec_uuid, task_uuid) {
|
||||
setCompletedState(completed, user_id, exec_uuid, task_uuid)
|
||||
}
|
||||
}
|
||||
|
||||
const compactTable = computed(() => {
|
||||
return userCount.value > 20
|
||||
})
|
||||
const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
|
||||
const sortedProgress = computed(() =>
|
||||
Object.values(progresses.value).sort((a, b) => {
|
||||
function collapse(exercise_index) {
|
||||
const index = collapsed_panels.value.indexOf(exercise_index)
|
||||
if (index >= 0) {
|
||||
collapsed_panels.value.splice(index, 1)
|
||||
} else {
|
||||
collapsed_panels.value.push(exercise_index)
|
||||
}
|
||||
}
|
||||
|
||||
const compactTable = computed(() => { return userCount.value > 20 })
|
||||
const hasProgress = computed(() => Object.keys(progresses.value).length > 0)
|
||||
const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
|
||||
if (a.email < b.email) {
|
||||
return -1
|
||||
return -1;
|
||||
}
|
||||
if (a.email > b.email) {
|
||||
return 1
|
||||
return 1;
|
||||
}
|
||||
return 0
|
||||
})
|
||||
)
|
||||
return 0;
|
||||
}))
|
||||
|
||||
const taskCompletionPercentages = computed(() => {
|
||||
const completions = {}
|
||||
Object.values(props.exercise.tasks).forEach((task) => {
|
||||
completions[task.uuid] = 0
|
||||
})
|
||||
const taskCompletionPercentages = computed(() => {
|
||||
const completions = {}
|
||||
Object.values(props.exercise.tasks).forEach(task => {
|
||||
completions[task.uuid] = 0
|
||||
})
|
||||
|
||||
sortedProgress.value.forEach((progress) => {
|
||||
for (const [taskUuid, taskCompletion] of Object.entries(
|
||||
progress.exercises[props.exercise.uuid].tasks_completion
|
||||
)) {
|
||||
if (taskCompletion !== false) {
|
||||
completions[taskUuid] += 1
|
||||
sortedProgress.value.forEach(progress => {
|
||||
for (const [taskUuid, taskCompletion] of Object.entries(progress.exercises[props.exercise.uuid].tasks_completion)) {
|
||||
if (taskCompletion !== false) {
|
||||
completions[taskUuid] += 1
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
|
||||
completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
|
||||
}
|
||||
return completions
|
||||
})
|
||||
|
||||
for (const [taskUuid, taskCompletionSum] of Object.entries(completions)) {
|
||||
completions[taskUuid] = 100 * (taskCompletionSum / userCount.value)
|
||||
}
|
||||
return completions
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full mb-4">
|
||||
<thead>
|
||||
<tr @click="collapse(exercise_index)" class="cursor-pointer">
|
||||
<th
|
||||
:colspan="2 + exercise.tasks.length"
|
||||
class="rounded-tl-lg border-b border-slate-100 dark:border-slate-700 text-md p-3 pl-6 text-center dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100"
|
||||
>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="dark:text-blue-200 text-slate-200"># {{ exercise_index + 1 }}</span>
|
||||
<span class="text-lg">{{ exercise.name }}</span>
|
||||
<span class="">
|
||||
Level:
|
||||
<span
|
||||
:class="{
|
||||
<table
|
||||
class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full mb-4"
|
||||
>
|
||||
<thead>
|
||||
<tr @click="collapse(exercise_index)" class="cursor-pointer">
|
||||
<th :colspan="2 + exercise.tasks.length" class="rounded-tl-lg border-b border-slate-100 dark:border-slate-700 text-md p-3 pl-6 text-center dark:bg-blue-800 bg-blue-500 dark:text-slate-300 text-slate-100">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="dark:text-blue-200 text-slate-200 "># {{ exercise_index + 1 }}</span>
|
||||
<span class="text-lg">{{ exercise.name }}</span>
|
||||
<span class="">
|
||||
Level: <span :class="{
|
||||
'rounded-lg px-1 ml-2': true,
|
||||
'dark:bg-sky-400 bg-sky-400 text-neutral-950': exercise.level == 'beginner',
|
||||
'dark:bg-orange-400 bg-orange-400 text-neutral-950': exercise.level == 'advanced',
|
||||
'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert'
|
||||
}"
|
||||
>{{ exercise.level }}</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr
|
||||
:class="`font-medium text-slate-600 dark:text-slate-200 ${
|
||||
collapsed_panels.includes(exercise_index) ? 'hidden' : ''
|
||||
}`"
|
||||
>
|
||||
<th class="border-b border-slate-100 dark:border-slate-700 p-3 pl-6 text-left">User</th>
|
||||
<th
|
||||
v-for="(task, task_index) in exercise.tasks"
|
||||
:key="task.name"
|
||||
class="border-b border-slate-100 dark:border-slate-700 p-3 align-top"
|
||||
:title="task.description"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
class="text-center font-normal text-sm dark:text-blue-200 text-slate-500 text-nowrap"
|
||||
>Task {{ task_index + 1 }}</span
|
||||
>
|
||||
<i class="text-center">{{ task.name }}</i>
|
||||
<div
|
||||
role="progressbar"
|
||||
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"
|
||||
:title="`${taskCompletionPercentages[task.uuid].toFixed(0)}%`"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500 transition-width transition-slowest ease"
|
||||
:style="`width: ${taskCompletionPercentages[task.uuid]}%`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="border-b border-slate-100 dark:border-slate-700 p-3 text-left">Progress</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody :class="`${collapsed_panels.includes(exercise_index) ? 'hidden' : ''}`">
|
||||
<tr v-if="!hasProgress">
|
||||
<td
|
||||
:colspan="2 + exercise.tasks.length"
|
||||
class="text-center border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-3 pl-6"
|
||||
>
|
||||
<i>- No user yet -</i>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-else>
|
||||
<tr
|
||||
v-for="progress in sortedProgress"
|
||||
:key="progress.user_id"
|
||||
class="bg-slate-100 dark:bg-slate-900"
|
||||
>
|
||||
<td
|
||||
class="border-b border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-0 pl-2 relative"
|
||||
>
|
||||
<span class="flex flex-col max-w-60">
|
||||
<span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate">
|
||||
<FontAwesomeIcon
|
||||
v-if="
|
||||
progress.exercises[exercise.uuid].score /
|
||||
progress.exercises[exercise.uuid].max_score ==
|
||||
1
|
||||
"
|
||||
:icon="faMedal"
|
||||
class="mr-1 text-amber-300"
|
||||
></FontAwesomeIcon>
|
||||
<span class="text-lg font-bold font-mono leading-5 tracking-tight">{{
|
||||
progress.email.split('@')[0]
|
||||
}}</span>
|
||||
<span class="text-xs font-mono tracking-tight"
|
||||
>@{{ progress.email.split('@')[1] }}</span
|
||||
>
|
||||
'dark:bg-red-600 bg-red-600 text-neutral-950': exercise.level == 'expert',
|
||||
}">{{ exercise.level }}</span>
|
||||
</span>
|
||||
<LiveLogsUserActivityGraph
|
||||
:user_id="progress.user_id"
|
||||
:compact_view="compactTable"
|
||||
></LiveLogsUserActivityGraph>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr :class="`font-medium text-slate-600 dark:text-slate-200 ${collapsed_panels.includes(exercise_index) ? 'hidden' : ''}`">
|
||||
<th class="border-b border-slate-100 dark:border-slate-700 p-3 pl-6 text-left">User</th>
|
||||
<th
|
||||
v-for="(task, task_index) in exercise.tasks"
|
||||
:key="task_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'
|
||||
}`"
|
||||
:key="task.name"
|
||||
class="border-b border-slate-100 dark:border-slate-700 p-3 align-top"
|
||||
:title="task.description"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-center font-normal text-sm dark:text-blue-200 text-slate-500 text-nowrap">Task {{ task_index + 1 }}</span>
|
||||
<i class="text-center">{{ task.name }}</i>
|
||||
<div
|
||||
role="progressbar"
|
||||
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"
|
||||
:title="`${taskCompletionPercentages[task.uuid].toFixed(0)}%`"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500 transition-width transition-slowest ease"
|
||||
:style="`width: ${taskCompletionPercentages[task.uuid]}%`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="border-b border-slate-100 dark:border-slate-700 p-3 text-left">Progress</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody :class="`${collapsed_panels.includes(exercise_index) ? 'hidden' : ''}`">
|
||||
<tr v-if="!hasProgress">
|
||||
<td
|
||||
:colspan="2 + exercise.tasks.length"
|
||||
class="text-center border-b border-slate-100 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-3 pl-6"
|
||||
>
|
||||
<i>- No user yet -</i>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-else>
|
||||
<tr v-for="(progress) in sortedProgress" :key="progress.user_id" class="bg-slate-100 dark:bg-slate-900">
|
||||
<td class="border-b border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 p-0 pl-2 relative">
|
||||
<span class="flex flex-col max-w-60">
|
||||
<span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate">
|
||||
<FontAwesomeIcon v-if="progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score == 1" :icon="faMedal" class="mr-1 text-amber-300"></FontAwesomeIcon>
|
||||
<span class="text-lg font-bold font-mono leading-5 tracking-tight">{{ progress.email.split('@')[0] }}</span>
|
||||
<span class="text-xs font-mono tracking-tight">@{{ progress.email.split('@')[1] }}</span>
|
||||
</span>
|
||||
<LiveLogsUserActivityGraph
|
||||
:user_id="progress.user_id"
|
||||
:compact_view="compactTable"
|
||||
></LiveLogsUserActivityGraph>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
v-for="(task, task_index) in exercise.tasks"
|
||||
:key="task_index"
|
||||
:class="`text-center border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 ${compactTable ? 'p-0' : 'p-2'}`"
|
||||
>
|
||||
<span
|
||||
class="select-none cursor-pointer flex justify-center content-center flex-wrap h-9"
|
||||
@click="
|
||||
toggleCompleted(
|
||||
progress.exercises[exercise.uuid].tasks_completion[task.uuid],
|
||||
progress.user_id,
|
||||
exercise.uuid,
|
||||
task.uuid
|
||||
)
|
||||
"
|
||||
@click="toggleCompleted(progress.exercises[exercise.uuid].tasks_completion[task.uuid], progress.user_id, exercise.uuid, task.uuid)"
|
||||
>
|
||||
<span class="flex flex-col">
|
||||
<span class="text-nowrap">
|
||||
<FontAwesomeIcon
|
||||
v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid]"
|
||||
:icon="
|
||||
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="`
|
||||
${
|
||||
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
|
||||
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"
|
||||
: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
|
||||
v-else
|
||||
:icon="faTimes"
|
||||
:class="`text-xl ${
|
||||
progress.exercises[exercise.uuid].tasks_completion[task.uuid]
|
||||
? 'dark:text-green-400 text-green-600'
|
||||
: 'dark:text-slate-500 text-slate-400'
|
||||
}`"
|
||||
: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 :class="['leading-3', !compactTable ? 'text-sm' : 'text-xs']">
|
||||
<span
|
||||
v-if="progress.exercises[exercise.uuid].tasks_completion[task.uuid].timestamp"
|
||||
:class="
|
||||
progress.exercises[exercise.uuid].tasks_completion[task.uuid].first_completion
|
||||
? 'font-bold'
|
||||
: 'font-extralight'
|
||||
"
|
||||
: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>
|
||||
</td>
|
||||
<td
|
||||
class="border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-3"
|
||||
>
|
||||
<div
|
||||
class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600"
|
||||
role="progressbar"
|
||||
:aria-valuenow="progress.exercises[exercise.uuid].score"
|
||||
:aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col justify-center rounded-full overflow-hidden bg-green-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-green-500 transition-width transition-slowest ease"
|
||||
:style="`width: ${
|
||||
100 *
|
||||
(progress.exercises[exercise.uuid].score /
|
||||
progress.exercises[exercise.uuid].max_score)
|
||||
}%`"
|
||||
></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</td>
|
||||
<td class="border-b border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-3">
|
||||
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-600" role="progressbar" :aria-valuenow="progress.exercises[exercise.uuid].score" :aria-valuemin="0" aria-valuemax="100">
|
||||
<div
|
||||
class="flex flex-col justify-center rounded-full overflow-hidden bg-green-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-green-500 transition-width transition-slowest ease"
|
||||
:style="`width: ${100 * (progress.exercises[exercise.uuid].score / progress.exercises[exercise.uuid].max_score)}%`"
|
||||
></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
15
src/main.js
15
src/main.js
|
|
@ -1,19 +1,10 @@
|
|||
import './assets/main.css'
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
import VueApexCharts from "vue3-apexcharts";
|
||||
|
||||
import { createApp, ref } from 'vue'
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import Modal from '@/components/elements/Modal.vue'
|
||||
import Loading from '@/components/elements/Loading.vue'
|
||||
import Alert from '@/components/elements/Alert.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
app.component('FontAwesomeIcon', FontAwesomeIcon)
|
||||
app.component('Modal', Modal)
|
||||
app.component('Loading', Loading)
|
||||
app.component('Alert', Alert)
|
||||
app.use(VueApexCharts)
|
||||
|
||||
app.mount('#app')
|
||||
app.mount('#app')
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import { createWebHistory, createRouter } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{ 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/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({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
router.beforeEach(async (to, from) => {
|
||||
if (to.path === '/') {
|
||||
return { path: '/scenarios/index' }
|
||||
}
|
||||
if (!hasScenarios()) {
|
||||
fetchScenarios()
|
||||
}
|
||||
if (
|
||||
from.name == undefined &&
|
||||
['Scenario Overview', 'Scenario Designer'].includes(to.name) &&
|
||||
to?.params?.uuid !== undefined
|
||||
) {
|
||||
store.selected_scenario = to.params.uuid
|
||||
}
|
||||
if (to?.meta?.requiresScenarioSelection === true && store.selected_scenario === null) {
|
||||
return { path: '/scenarios/index' }
|
||||
}
|
||||
if (to.matched.length == 0) {
|
||||
return { path: '/scenarios/index' }
|
||||
}
|
||||
})
|
||||
|
|
@ -3,4 +3,4 @@ import { ref, computed } from 'vue'
|
|||
export const darkModeOn = ref(true)
|
||||
export const darkModeEnabled = computed(() => darkModeOn.value)
|
||||
|
||||
export const fullscreenModeOn = ref(false)
|
||||
export const fullscreenModeOn = ref(false)
|
||||
105
src/socket.js
105
src/socket.js
|
|
@ -1,9 +1,9 @@
|
|||
import { reactive, computed } from 'vue'
|
||||
import { io } from 'socket.io-client'
|
||||
import { reactive, computed } from "vue";
|
||||
import { io } from "socket.io-client";
|
||||
import debounce from 'lodash.debounce'
|
||||
|
||||
// "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 initial_state = {
|
||||
|
|
@ -17,27 +17,27 @@ const initial_state = {
|
|||
exercises: [],
|
||||
selected_exercises: [],
|
||||
progresses: {},
|
||||
diagnostic: {}
|
||||
diagnostic: {},
|
||||
}
|
||||
|
||||
const state = reactive({ ...initial_state })
|
||||
const connectionState = reactive({
|
||||
const state = reactive({ ...initial_state });
|
||||
const connectionState = reactive({
|
||||
connected: false,
|
||||
zmq_last_time: false
|
||||
zmq_last_time: false,
|
||||
})
|
||||
|
||||
|
||||
const socket = io(URL, {
|
||||
autoConnect: true
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
/* Public */
|
||||
/* ------ */
|
||||
|
||||
export const exercises = computed(() => state.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 notifications = computed(() => state.notificationEvents)
|
||||
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 function resetState() {
|
||||
Object.assign(state, initial_state)
|
||||
Object.assign(state, initial_state);
|
||||
}
|
||||
|
||||
export function fullReload() {
|
||||
|
|
@ -67,7 +67,7 @@ export function setCompletedState(completed, user_id, exec_uuid, task_uuid) {
|
|||
const payload = {
|
||||
user_id: user_id,
|
||||
exercise_uuid: exec_uuid,
|
||||
task_uuid: task_uuid
|
||||
task_uuid: task_uuid,
|
||||
}
|
||||
sendCompletedState(completed, payload)
|
||||
}
|
||||
|
|
@ -87,7 +87,7 @@ export function resetLiveLogs() {
|
|||
export function changeExerciseSelection(exec_uuid, state_enabled) {
|
||||
const payload = {
|
||||
exercise_uuid: exec_uuid,
|
||||
selected: state_enabled
|
||||
selected: state_enabled,
|
||||
}
|
||||
sendChangeExerciseSelection(payload)
|
||||
}
|
||||
|
|
@ -103,8 +103,7 @@ export function toggleApiQueryMode(enabled) {
|
|||
export function remediateSetting(setting) {
|
||||
sendRemediateSetting(setting, (result) => {
|
||||
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 {
|
||||
state.diagnostic['settings'][setting].error = true
|
||||
state.diagnostic['settings'][setting].errorMessage = result.message
|
||||
|
|
@ -112,77 +111,79 @@ export function remediateSetting(setting) {
|
|||
})
|
||||
}
|
||||
|
||||
export const debouncedGetProgress = debounce(getProgress, 200, { leading: true })
|
||||
export const debouncedGetDiangostic = debounce(getDiangostic, 1000, { leading: true })
|
||||
export const debouncedGetProgress = debounce(getProgress, 200, {leading: true})
|
||||
export const debouncedGetDiangostic = debounce(getDiangostic, 1000, {leading: true})
|
||||
|
||||
|
||||
/* Private */
|
||||
/* ------- */
|
||||
|
||||
function getExercises() {
|
||||
socket.emit('get_exercises', (all_exercises) => {
|
||||
socket.emit("get_exercises", (all_exercises) => {
|
||||
state.exercises = all_exercises
|
||||
})
|
||||
}
|
||||
|
||||
function getSelectedExercises() {
|
||||
socket.emit('get_selected_exercises', (all_selected_exercises) => {
|
||||
socket.emit("get_selected_exercises", (all_selected_exercises) => {
|
||||
state.selected_exercises = all_selected_exercises
|
||||
})
|
||||
}
|
||||
|
||||
function getNotifications() {
|
||||
socket.emit('get_notifications', (all_notifications) => {
|
||||
socket.emit("get_notifications", (all_notifications) => {
|
||||
state.notificationEvents = all_notifications
|
||||
})
|
||||
}
|
||||
|
||||
function getProgress() {
|
||||
socket.emit('get_progress', (all_progress) => {
|
||||
socket.emit("get_progress", (all_progress) => {
|
||||
state.progresses = all_progress
|
||||
})
|
||||
}
|
||||
|
||||
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.userActivityConfig = user_activity_bundle.config
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getDiangostic() {
|
||||
state.diagnostic = {}
|
||||
socket.emit('get_diagnostic', (diagnostic) => {
|
||||
socket.emit("get_diagnostic", (diagnostic) => {
|
||||
state.diagnostic = diagnostic
|
||||
})
|
||||
}
|
||||
|
||||
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, () => {
|
||||
getProgress()
|
||||
})
|
||||
}
|
||||
|
||||
function sendResetAllExerciseProgress() {
|
||||
socket.emit('reset_all_exercise_progress', () => {
|
||||
socket.emit("reset_all_exercise_progress", () => {
|
||||
getProgress()
|
||||
})
|
||||
}
|
||||
|
||||
function sendResetAll() {
|
||||
socket.emit('reset_all', () => {
|
||||
socket.emit("reset_all", () => {
|
||||
getProgress()
|
||||
})
|
||||
}
|
||||
|
||||
function sendResetLiveLogs() {
|
||||
socket.emit('reset_notifications', () => {
|
||||
socket.emit("reset_notifications", () => {
|
||||
getNotifications()
|
||||
})
|
||||
}
|
||||
|
||||
function sendChangeExerciseSelection(payload) {
|
||||
socket.emit('change_exercise_selection', payload, () => {
|
||||
socket.emit("change_exercise_selection", payload, () => {
|
||||
getSelectedExercises()
|
||||
})
|
||||
}
|
||||
|
|
@ -191,68 +192,68 @@ function sendToggleVerboseMode(enabled) {
|
|||
const payload = {
|
||||
verbose: enabled
|
||||
}
|
||||
socket.emit('toggle_verbose_mode', payload, () => {})
|
||||
socket.emit("toggle_verbose_mode", payload, () => {})
|
||||
}
|
||||
|
||||
function sendToggleApiQueryMode(enabled) {
|
||||
const payload = {
|
||||
apiquery: enabled
|
||||
}
|
||||
socket.emit('toggle_apiquery_mode', payload, () => {})
|
||||
socket.emit("toggle_apiquery_mode", payload, () => {})
|
||||
}
|
||||
|
||||
function sendRemediateSetting(setting, cb) {
|
||||
const payload = {
|
||||
name: setting
|
||||
}
|
||||
socket.emit('remediate_setting', payload, (result) => {
|
||||
socket.emit("remediate_setting", payload, (result) => {
|
||||
cb(result)
|
||||
})
|
||||
}
|
||||
|
||||
/* Event listener */
|
||||
|
||||
socket.on('connect', () => {
|
||||
connectionState.connected = true
|
||||
})
|
||||
socket.on("connect", () => {
|
||||
connectionState.connected = true;
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
connectionState.connected = false
|
||||
})
|
||||
socket.on("disconnect", () => {
|
||||
connectionState.connected = false;
|
||||
});
|
||||
|
||||
socket.on('notification', (message) => {
|
||||
socket.on("notification", (message) => {
|
||||
state.notificationCounter += 1
|
||||
if (message.is_api_request) {
|
||||
state.notificationAPICounter += 1
|
||||
}
|
||||
addLimited(state.notificationEvents, message, MAX_LIVE_LOG)
|
||||
})
|
||||
});
|
||||
|
||||
socket.on('new_user', (new_user) => {
|
||||
socket.on("new_user", (new_user) => {
|
||||
debouncedGetProgress()
|
||||
})
|
||||
});
|
||||
|
||||
socket.on('refresh_score', (new_user) => {
|
||||
socket.on("refresh_score", (new_user) => {
|
||||
debouncedGetProgress()
|
||||
})
|
||||
});
|
||||
|
||||
socket.on('keep_alive', (keep_alive) => {
|
||||
socket.on("keep_alive", (keep_alive) => {
|
||||
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.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.userActivityConfig = user_activity_bundle.config
|
||||
})
|
||||
});
|
||||
|
||||
function addLimited(target, message, maxCount) {
|
||||
target.unshift(message)
|
||||
if (target.length > maxCount) {
|
||||
target.length = maxCount
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/utils.js
20
src/utils.js
|
|
@ -1,20 +0,0 @@
|
|||
import { computed, ref } from 'vue'
|
||||
|
||||
let toastID = 0
|
||||
export const toastBuffer = ref([])
|
||||
export const allToasts = computed(() => toastBuffer.value)
|
||||
export function toast(toast) {
|
||||
toastID += 1
|
||||
toast.id = toastID
|
||||
toastBuffer.value.push(toast)
|
||||
}
|
||||
export function removeToast(id) {
|
||||
toastBuffer.value = toastBuffer.value.filter((toast) => toast.id != id)
|
||||
}
|
||||
export function ajaxFeedback(response) {
|
||||
toast({
|
||||
variant: response.success ? 'success' : 'danger',
|
||||
message: String(response.message),
|
||||
title: response.title
|
||||
})
|
||||
}
|
||||
|
|
@ -8,15 +8,6 @@ export default {
|
|||
{
|
||||
pattern: /bg-blue+/, // Includes bg of all colors and shades
|
||||
},
|
||||
{
|
||||
pattern: /bg-(red|green|blue|amber)-(100|200|300|800)/, // Includes bg of all colors and shades
|
||||
},
|
||||
{
|
||||
pattern: /text-(red|green|blue|amber)-(100|700|800)/, // Includes bg of all colors and shades
|
||||
},
|
||||
{
|
||||
pattern: /border-(red|green|blue|amber)-(700)/, // Includes bg of all colors and shades
|
||||
},
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
|
|
@ -27,16 +18,22 @@ export default {
|
|||
'3xl': '1800px',
|
||||
},
|
||||
fontSize: {
|
||||
'2xs': '0.66rem',
|
||||
'xxs': '0.6rem',
|
||||
},
|
||||
maxWidth: {
|
||||
'8xl': '88rem',
|
||||
'9xl': '96rem',
|
||||
'10xl': '104rem',
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('daisyui'),
|
||||
],
|
||||
darkMode: ['selector'],
|
||||
daisyui: {
|
||||
themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
||||
darkTheme: "dark", // name of one of the included themes for dark mode
|
||||
base: false, // applies background color and foreground color for root element by default
|
||||
styled: true, // include daisyUI colors and design decisions for all components
|
||||
utils: false, // adds responsive and modifier utility classes
|
||||
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
|
||||
logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
|
||||
themeRoot: ":root", // The element that receives theme color CSS variables
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue