tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

New "about" section on PreferencesPage, add new exercise descriptions/steps

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-11-01 03:56:38 +01:00
parent b6205f374b
commit 9052c59254
10 changed files with 209 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
software/src/components/basics/cardView.vue
View File

@@ -29,8 +29,8 @@ defineProps({
style="background-color: transparent"
>
<div>
<div class="pl-2 py-1">
<v-icon :icon="icon" v-if="icon" /> &nbsp;{{ title }}
<div class="pl-2 py-1 d-flex justify-center">
<v-icon :icon="icon" v-if="icon" />&nbsp;{{ title }}
</div>
<div>
<v-card-subtitle >{{ subtitle }}</v-card-subtitle>
@@ -40,9 +40,9 @@ defineProps({
</v-sheet>
</v-card-title>
<slot name="borderless"></slot>
<slot name="borderless" v-if="$slots.borderless"></slot>
<v-container>
<v-container v-if="$slots.default">
<v-row>
<v-col>
<slot></slot>

7
software/src/components/basics/confirmDialog.vue
View File

@@ -8,12 +8,12 @@ const showDialog: ModelRef<boolean> = defineModel()
const props = defineProps({
title: String,
description: String,
onConfirm: Function
onConfirm: Function,
loading: Boolean
})
function confirmPressed() {
props.onConfirm()
showDialog.value = false
}
</script>
@@ -22,6 +22,7 @@ function confirmPressed() {
:title="title"
max-width="400"
v-model="showDialog"
persistent
>
{{ description }}
@@ -30,6 +31,7 @@ function confirmPressed() {
@click="showDialog = false"
prepend-icon="mdi-close"
color="orange"
:loading="loading"
>
{{ $t("misc.actions.cancel") }}
</outlined-button>
@@ -38,6 +40,7 @@ function confirmPressed() {
@click="confirmPressed"
prepend-icon="mdi-check"
color="red"
:loading="loading"
>
{{ $t("misc.actions.confirm") }}
</outlined-button>

3
software/src/locales/de.json
View File

@@ -143,7 +143,8 @@
"title": "Übungsfortschritt zurücksetzen?",
"description": "Soll der Bearbeitungsfortschritt der Übungen wirklich zurückgesetzt werden? Dies kann nicht rückgänig gemacht werden!"
}
}
},
"aboutProject": "Über das Projekt"
},
"help": {
"scoreBoard": {

3
software/src/locales/en.json
View File

@@ -143,7 +143,8 @@
"title": "Reset exercise progress?",
"description": "Do you really want to reset the exercise progress? This is permanent!"
}
}
},
"aboutProject": "About the project"
},
"help": {
"scoreBoard": {

42
software/src/pages/misc/preferencesPage/aboutSection.vue Normal file
View File

@@ -0,0 +1,42 @@
<script setup lang="ts">
import cardView from '@/components/basics/cardView.vue';
import packageJson from './../../../../package.json'
</script>
<template>
<card-view
:title="$t('preferences.aboutProject')"
icon="mdi-information"
>
<template #borderless>
<v-list>
<v-list-item
title="Software Version"
:subtitle="packageJson.version"
prepend-icon="mdi-counter"
/>
<v-list-item
title="Lizenz"
subtitle="MIT"
prepend-icon="mdi-license"
/>
<v-list-item
title="Entwickler"
subtitle="Tobias Zoghaib"
prepend-icon="mdi-account"
/>
<v-list-item
title="Entwickelt im Auftrag"
subtitle="Uni Hannover, Institut für IT-Sicherheit, Fachgebiet Usable Security and Privacy"
prepend-icon="mdi-school"
/>
<v-list-item
title="Copyright"
subtitle="2024"
prepend-icon="mdi-copyright"
/>
</v-list>
</template>
</card-view>
</template>

7
software/src/pages/misc/preferencesPage/index.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import pageSetup from './pageSetup.vue';
import systemSetup from './systemSetup.vue';
import aboutSection from './aboutSection.vue';
</script>
<template>
@@ -16,5 +17,11 @@ import systemSetup from './systemSetup.vue';
<system-setup />
</v-col>
</v-row>
<v-row>
<v-col>
<about-section />
</v-col>
</v-row>
</v-container>
</template>

2
software/src/pages/misc/preferencesPage/pageSetup.vue
View File

@@ -30,6 +30,7 @@ function changeLanguage() {
:items="themeEnums"
:label="$t('preferences.selectedTheme')"
@update:model-value="changeTheme"
variant="outlined"
hide-details
/>
</v-col>
@@ -42,6 +43,7 @@ function changeLanguage() {
:items="$i18n.availableLocales"
:label="$t('preferences.language')"
@update:model-value="changeLanguage"
variant="outlined"
hide-details
/>
</v-col>

82
software/src/pages/misc/preferencesPage/systemSetup.vue
View File

@@ -1,59 +1,13 @@
<script setup lang="ts">
import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
import { useFeedbackStore } from '@/stores/feedback.store';
import cardView from '@/components/basics/cardView.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { ref } from 'vue';
import confirmDialog from '@/components/basics/confirmDialog.vue';
import { fetchServerState, resetDatabase, resetExerciseProgress } from '@/data/api/mainApi';
import { ServerStateEnum } from '@/data/enums/serverStateEnum';
import packageJson from './../../../../package.json'
import { usePreferencesStore } from '@/stores/preferences.store';
const feedbackStore = useFeedbackStore()
const showConfirmDeleteDbDialog = ref(false)
const showConfirmDeleteExerciseProgressDialog = ref(false)
const serverOnline = ref(ServerStateEnum.PENDING)
fetchServerState()
.then(result => {
if (result.status == 200) {
serverOnline.value = ServerStateEnum.ONLINE
} else {
serverOnline.value = ServerStateEnum.OFFLINE
}
})
.catch(error => {
serverOnline.value = ServerStateEnum.OFFLINE
})
async function resetDb() {
serverOnline.value = ServerStateEnum.PENDING
await resetDatabase()
.then(result => {
if (result.status == 200) {
feedbackStore.changeBanner(BannerStateEnum.DATABASERESETSUCCESSFUL)
serverOnline.value = ServerStateEnum.ONLINE
}
showConfirmDeleteDbDialog.value = false
})
}
async function resetExerciseProg() {
serverOnline.value = ServerStateEnum.PENDING
await resetExerciseProgress()
.then(result => {
if (result.status == 200) {
feedbackStore.changeBanner(BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL)
serverOnline.value = ServerStateEnum.ONLINE
}
showConfirmDeleteExerciseProgressDialog.value = false
})
}
const preferenceStore = usePreferencesStore()
preferenceStore.getServerState()
</script>
<template>
@@ -64,36 +18,32 @@ async function resetExerciseProg() {
<v-row>
<v-col>
{{ $t('preferences.serverState') }}:
<span v-if="serverOnline == ServerStateEnum.ONLINE" class="text-green">
<span v-if="preferenceStore.serverState == ServerStateEnum.ONLINE" class="text-green">
<v-icon icon="mdi-check" />
Online
</span>
<span v-else-if="serverOnline == ServerStateEnum.OFFLINE" class="text-red">
<span v-else-if="preferenceStore.serverState == ServerStateEnum.OFFLINE" class="text-red">
<v-icon icon="mdi-alert-circle" />
Offline
</span>
<span v-else-if="serverOnline == ServerStateEnum.PENDING" class="text-orange">
<span v-else-if="preferenceStore.serverState == ServerStateEnum.PENDING" class="text-orange">
<v-icon icon="mdi-clock" />
Pending...
</span>
</v-col>
</v-row>
<v-row>
<v-col>
Software Version: {{ packageJson.version }}
</v-col>
</v-row>
<v-row>
<v-col class="d-flex justify-center align-center">
<outlined-button
@click="showConfirmDeleteDbDialog = true"
@click="preferenceStore.showDeleteDbDialog = true"
prepend-icon="mdi-database-refresh"
color="red"
:disabled="serverOnline != ServerStateEnum.ONLINE"
:disabled="preferenceStore.serverState != ServerStateEnum.ONLINE"
>
{{ $t('preferences.resetDatabase.resetDatabase') }}
</outlined-button>
@@ -103,10 +53,10 @@ async function resetExerciseProg() {
<v-row>
<v-col class="d-flex justify-center align-center">
<outlined-button
@click="showConfirmDeleteExerciseProgressDialog = true"
@click="preferenceStore.showDeleteExerciseDialog = true"
prepend-icon="mdi-progress-close"
color="red"
:disabled="serverOnline != ServerStateEnum.ONLINE"
:disabled="preferenceStore.serverState != ServerStateEnum.ONLINE"
>
{{ $t('preferences.resetExerciseProgress.resetExerciseProgress') }}
</outlined-button>
@@ -118,15 +68,17 @@ async function resetExerciseProg() {
<confirm-dialog
:title="$t('preferences.resetDatabase.dialog.title')"
:description="$t('preferences.resetDatabase.dialog.description')"
v-model="showConfirmDeleteDbDialog"
:onConfirm="resetDb"
v-model="preferenceStore.showDeleteDbDialog"
:onConfirm="preferenceStore.resetDb"
:loading="preferenceStore.fetchInProgress"
/>
<!-- Confirm delete exercise progress -->
<confirm-dialog
:title="$t('preferences.resetExerciseProgress.dialog.title')"
:description="$t('preferences.resetExerciseProgress.dialog.description')"
v-model="showConfirmDeleteExerciseProgressDialog"
:onConfirm="resetExerciseProg"
v-model="preferenceStore.showDeleteExerciseDialog"
:onConfirm="preferenceStore.resetExerciseProg"
:loading="preferenceStore.fetchInProgress"
/>
</template>

79
software/src/stores/preferences.store.ts
View File

@@ -3,6 +3,10 @@ import { useLocalStorage } from "@vueuse/core";
import { ThemeEnum } from "../data/enums/themeEnums";
import { LanguageEnum } from "../data/enums/languageEnum";
import { ref } from "vue";
import { fetchServerState, resetDatabase, resetExerciseProgress } from "@/data/api/mainApi";
import { ServerStateEnum } from "@/data/enums/serverStateEnum";
import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
import { useFeedbackStore } from "./feedback.store";
export const usePreferencesStore = defineStore('preferencesStore', {
state: () => ({
@@ -13,6 +17,79 @@ export const usePreferencesStore = defineStore('preferencesStore', {
language: useLocalStorage<LanguageEnum>("hackmycart/preferencesStore/language", LanguageEnum.GERMAN),
/** Request to server sent, waiting for data response */
fetchInProgress: ref(false)
fetchInProgress: ref(false),
/** State of the server */
serverState: ref<ServerStateEnum>(ServerStateEnum.PENDING),
/** Show the "Delete DB?" confirm dialog */
showDeleteDbDialog: ref(false),
/** Show the "Delete Exercise progress?" confirm dialog */
showDeleteExerciseDialog: ref(false)
}),
actions: {
/**
* Request the state of the backend server
*/
async getServerState() {
this.fetchInProgress = true
fetchServerState()
.then(result => {
if (result.status == 200) {
this.serverState = ServerStateEnum.ONLINE
} else {
this.serverState = ServerStateEnum.OFFLINE
}
this.fetchInProgress = false
})
.catch(error => {
this.serverState = ServerStateEnum.OFFLINE
this.fetchInProgress = false
})
},
/**
* Resets the database (without exercise tables)
*/
async resetDb() {
const feedbackStore = useFeedbackStore()
this.serverState = ServerStateEnum.PENDING
this.fetchInProgress = true
await resetDatabase()
.then(result => {
if (result.status == 200) {
feedbackStore.changeBanner(BannerStateEnum.DATABASERESETSUCCESSFUL)
this.serverState = ServerStateEnum.ONLINE
}
this.fetchInProgress = false
this.showDeleteDbDialog = false
})
},
/**
* Resets the exercise progress
*/
async resetExerciseProg() {
const feedbackStore = useFeedbackStore()
this.serverState = ServerStateEnum.PENDING
this.fetchInProgress = true
await resetExerciseProgress()
.then(result => {
if (result.status == 200) {
feedbackStore.changeBanner(BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL)
this.serverState = ServerStateEnum.ONLINE
}
this.fetchInProgress = false
this.showDeleteExerciseDialog = false
})
}
}
})