2024-07-01 09:21:01 +00:00
|
|
|
<script setup>
|
2024-07-01 12:31:29 +00:00
|
|
|
import { ref, computed, onMounted } from 'vue'
|
2024-07-01 11:12:23 +00:00
|
|
|
import { exercises, selected_exercises, diagnostic, resetAllExerciseProgress, changeExerciseSelection, fetchDiagnostic } from "@/socket";
|
2024-07-01 09:21:01 +00:00
|
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
2024-07-01 11:12:23 +00:00
|
|
|
import { faScrewdriverWrench, faTrash, faSuitcaseMedical, faGraduationCap } from '@fortawesome/free-solid-svg-icons'
|
2024-07-01 09:21:01 +00:00
|
|
|
|
|
|
|
const admin_modal = ref(null)
|
|
|
|
|
2024-07-01 12:31:29 +00:00
|
|
|
const diagnosticLoading = computed(() => Object.keys(diagnostic.value).length == 0)
|
|
|
|
const isMISPOnline = computed(() => diagnostic.value.version?.version !== undefined)
|
|
|
|
|
2024-07-01 09:21:01 +00:00
|
|
|
function changeSelectionState(state_enabled, exec_uuid) {
|
|
|
|
changeExerciseSelection(exec_uuid, state_enabled);
|
|
|
|
}
|
|
|
|
|
2024-07-01 11:12:23 +00:00
|
|
|
function showTheModal() {
|
|
|
|
admin_modal.value.showModal()
|
|
|
|
fetchDiagnostic()
|
|
|
|
}
|
2024-07-01 09:21:01 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<button
|
2024-07-01 11:12:23 +00:00
|
|
|
@click="showTheModal()"
|
2024-07-01 09:21:01 +00:00
|
|
|
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>
|
|
|
|
|
|
|
|
<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="mr-1"></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>
|
|
|
|
|
|
|
|
<div class="flex mb-5">
|
|
|
|
<button
|
|
|
|
@click="resetAllExerciseProgress()"
|
2024-07-01 09:49:00 +00:00
|
|
|
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"
|
2024-07-01 09:21:01 +00:00
|
|
|
>
|
|
|
|
<FontAwesomeIcon :icon="faTrash" class="mr-1"></FontAwesomeIcon>
|
|
|
|
Reset All Exercises
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
2024-07-01 11:12:23 +00:00
|
|
|
<h3 class="text-lg font-semibold">
|
|
|
|
<FontAwesomeIcon :icon="faGraduationCap" class="mr-1"></FontAwesomeIcon>
|
|
|
|
Selected Exercises
|
|
|
|
</h3>
|
2024-07-01 09:21:01 +00:00
|
|
|
<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"
|
2024-07-01 12:31:29 +00:00
|
|
|
:class="`checkbox ${selected_exercises.includes(exercise.uuid) ? 'checkbox-success' : ''} [--fallback-bc:#94a3b8]`"
|
2024-07-01 09:21:01 +00:00
|
|
|
/>
|
|
|
|
<span class="font-mono font-semibold text-base ml-3">{{ exercise.name }}</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
2024-07-01 11:12:23 +00:00
|
|
|
<h3 class="text-lg font-semibold mt-4">
|
|
|
|
<FontAwesomeIcon :icon="faSuitcaseMedical" class="mr-1"></FontAwesomeIcon>
|
|
|
|
Diagnostic
|
|
|
|
</h3>
|
2024-07-01 12:31:29 +00:00
|
|
|
<h4 class="font-semibold ml-1 my-2">
|
|
|
|
<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>
|
|
|
|
|
2024-07-01 12:40:32 +00:00
|
|
|
<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>
|
|
|
|
<div
|
|
|
|
v-for="(value, setting) in diagnostic['settings']"
|
|
|
|
:key="setting"
|
|
|
|
>
|
|
|
|
<div>
|
|
|
|
<label class="label cursor-pointer justify-start p-0 pt-1">
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
:checked="value"
|
|
|
|
:value="setting"
|
|
|
|
:class="`checkbox ${value ? 'checkbox-success' : 'checkbox-danger'} [--fallback-bc:#cbd5e1]`"
|
|
|
|
disabled
|
|
|
|
/>
|
|
|
|
<span class="font-mono font-semibold text-base ml-3">{{ setting }}</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
2024-07-01 11:12:23 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-01 12:40:32 +00:00
|
|
|
</template>
|
2024-07-01 11:12:23 +00:00
|
|
|
|
2024-07-01 09:21:01 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<form method="dialog" class="modal-backdrop">
|
|
|
|
<button>close</button>
|
|
|
|
</form>
|
|
|
|
</dialog>
|
|
|
|
</template>
|