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 { notifications, userCount, notificationCounter, notificationAPICounter, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
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";
@ -18,7 +18,7 @@
})
function getClassFromResponseCode(response_code) {
if (String(response_code).startsWith('2')) {
if (String(response_code).startsWith('2') || response_code == 302) {
return 'text-green-500'
} else if (String(response_code).startsWith('5')) {
return 'text-red-600'
@ -39,7 +39,7 @@
<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="faUser" size="sm"></FontAwesomeIcon>
<FontAwesomeIcon :icon="faUsers" size="sm"></FontAwesomeIcon>
Players:
</span>
<span class="font-bold">{{ userCount }}</span>

12
src/components/ThePlayerGrid.vue
View file

@ -2,6 +2,7 @@
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"
@ -19,6 +20,16 @@
</script>
<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'}`">
<span
v-for="(progress) in sortedProgress"
@ -43,4 +54,5 @@
</span>
</span>
</div>
</div>
</template>

12
src/components/TheScores.vue
View file

@ -2,7 +2,7 @@
import { ref, computed } from "vue";
import { active_exercises as exercises } from "@/socket";
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 TheFullScreenScoreGrid from "./scoreViews/TheFullScreenScoreGrid.vue"
import ThePlayerGrid from "./ThePlayerGrid.vue"
@ -42,18 +42,8 @@
<span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span>
</div>
<div class="
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>
<template
v-for="(exercise, exercise_index) in exercises"