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

chg: [front] Small UI improvements

Browse source
This commit is contained in:
Sami Mokaddem 2024-07-15 12:15:36 +02:00
parent 2e96f58cce
commit cd28a560cc
3 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/TheLiveLogs.vue
View file

@ -2,7 +2,7 @@
import { ref, watch, computed } from "vue" import { ref, watch, computed } from "vue"
import { notifications, userCount, notificationCounter, notificationAPICounter, toggleVerboseMode, toggleApiQueryMode } from "@/socket"; import { notifications, userCount, notificationCounter, notificationAPICounter, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSignal, faCloud, faCog, faUser, faCircle } from '@fortawesome/free-solid-svg-icons' import { faSignal, faCloud, faCog, faUsers, faCircle } from '@fortawesome/free-solid-svg-icons'
import TheLiveLogsActivityGraphVue from "./TheLiveLogsActivityGraph.vue"; import TheLiveLogsActivityGraphVue from "./TheLiveLogsActivityGraph.vue";
@ -18,7 +18,7 @@
}) })
function getClassFromResponseCode(response_code) { function getClassFromResponseCode(response_code) {
if (String(response_code).startsWith('2')) { if (String(response_code).startsWith('2') || response_code == 302) {
return 'text-green-500' return 'text-green-500'
} else if (String(response_code).startsWith('5')) { } else if (String(response_code).startsWith('5')) {
return 'text-red-600' return 'text-red-600'
@ -39,7 +39,7 @@
<div class="mb-2 flex flex-wrap gap-x-3"> <div class="mb-2 flex flex-wrap gap-x-3">
<span class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200"> <span class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200">
<span class="mr-1"> <span class="mr-1">
<FontAwesomeIcon :icon="faUser" size="sm"></FontAwesomeIcon> <FontAwesomeIcon :icon="faUsers" size="sm"></FontAwesomeIcon>
Players: Players:
</span> </span>
<span class="font-bold">{{ userCount }}</span> <span class="font-bold">{{ userCount }}</span>

12
src/components/ThePlayerGrid.vue
View file

@ -2,6 +2,7 @@
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { progresses, userCount } from "@/socket"; import { progresses, userCount } from "@/socket";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUsers } from '@fortawesome/free-solid-svg-icons'
import { darkModeEnabled } from "@/settings.js" import { darkModeEnabled } from "@/settings.js"
import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue" import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
@ -19,6 +20,16 @@
</script> </script>
<template> <template>
<div class="
mt-2 px-2 pt-1 pb-2 rounded border
bg-slate-600 border-slate-800
">
<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'}`"> <div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
<span <span
v-for="(progress) in sortedProgress" v-for="(progress) in sortedProgress"
@ -43,4 +54,5 @@
</span> </span>
</span> </span>
</div> </div>
</div>
</template> </template>

14
src/components/TheScores.vue
View file

@ -2,7 +2,7 @@
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { active_exercises as exercises } from "@/socket"; import { active_exercises as exercises } from "@/socket";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter, faWarning, faUser } from '@fortawesome/free-solid-svg-icons' import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter, faWarning } from '@fortawesome/free-solid-svg-icons'
import TheScoreTable from "./scoreViews/TheScoreTable.vue" import TheScoreTable from "./scoreViews/TheScoreTable.vue"
import TheFullScreenScoreGrid from "./scoreViews/TheFullScreenScoreGrid.vue" import TheFullScreenScoreGrid from "./scoreViews/TheFullScreenScoreGrid.vue"
import ThePlayerGrid from "./ThePlayerGrid.vue" import ThePlayerGrid from "./ThePlayerGrid.vue"
@ -42,17 +42,7 @@
<span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span> <span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span>
</div> </div>
<div class=" <ThePlayerGrid></ThePlayerGrid>
mt-2 px-2 py-1 rounded border
bg-slate-600 border-slate-800
">
<h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400">
<FontAwesomeIcon :icon="faUser"></FontAwesomeIcon>
Active Players
</h4>
<ThePlayerGrid></ThePlayerGrid>
</div>
</div> </div>
<template <template