File browser on admin page

software/backend/routes/api.routes.ts

@@ -1,5 +1,6 @@
 import { Request, Response, NextFunction, Router } from 'express'
 import { deleteAllTables, deleteExerciseProgressTables, prepopulateDatabase, prepopulateExerciseDatabase } from '../scripts/databaseHelper'
+import fs from "fs"
 
 export const api = Router()
 
@@ -24,4 +25,29 @@ api.get("/resetExerciseProgress", async (req: Request, res: Response, next: Next
   await prepopulateExerciseDatabase()
   
   res.status(200).send()
+})
+
+/**
+ * Get all uploaded file names
+ */
+api.get("/files", async (req: Request, res: Response) => {
+  let dirNames = fs.readdirSync("./backend/images")
+  let result = []
+
+  dirNames.forEach(dir => {
+    let fileNames = fs.readdirSync("./backend/images/" + dir)
+
+    result.push({
+      folder: dir,
+      files: fileNames.map(file => {
+        return {
+          name: file,
+          size: fs.statSync("./backend/images/" + dir + "/" + file).size,
+          url: "http://localhost:3000/static/" + dir + "/" + file
+        }
+      })
+    })
+  })
+
+  res.status(200).json(result)
 })

software/src/components/basics/actionDialog.vue

@@ -29,7 +29,7 @@ defineProps({
         <slot name="borderless"></slot>
       </template>
 
-      <template #actions>
+      <template #actions v-if="$slots.actions">
         <slot name="actions"></slot>
       </template>
     </card-view>

software/src/data/api/mainApi.ts

@@ -12,4 +12,8 @@ export function resetDatabase() {
 
 export function resetExerciseProgress() {
   return axios.get(BASE_URL + "/resetExerciseProgress")
+}
+
+export function fetchFileNames() {
+  return axios.get(BASE_URL + "/files")
 }

software/src/locales/de.json

@@ -204,6 +204,9 @@
       "tooMuchChars": "Zu viele Zeichen",
       "onlyDigitsAllowed": "Nur Zahlen erlaubt",
       "digitsAtStartNeeded": "Muss mit einer Zahl beginnen"
-    }
+    },
+    "file": "Datei | Dateien",
+    "folder": "Ordner | Ordner",
+    "uploadFile": "Datei hochladen"
   }
 }

software/src/locales/en.json

@@ -204,6 +204,9 @@
       "tooMuchChars": "Too much characters",
       "onlyDigitsAllowed": "Only numbers are allowed",
       "digitsAtStartNeeded": "Must start with a number"
-    }
+    },
+    "file": "File | Files",
+    "folder": "folder | folders",
+    "uploadFile": "Upload file"
   }
 }

software/src/pages/admin/categoriesAdminPage/index.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  Categories Admin Page
-</template>

software/src/pages/admin/dashboardPage/index.vue

@@ -9,6 +9,7 @@ import { useLocationStore } from '@/stores/location.store';
 import { ref } from 'vue';
 import { useExerciseStore } from '@/stores/exercise.store';
 import { useGenreStore } from '@/stores/genre.store';
+import { usePreferencesStore } from '@/stores/preferences.store';
 
 const router = useRouter()
 const concertStore = useConcertStore()
@@ -16,21 +17,17 @@ const bandStore = useBandStore()
 const accountStore = useAccountStore()
 const genreStore = useGenreStore()
 const locationStore = useLocationStore()
-const soldOutConcerts = ref(0)
 const exerciseStore = useExerciseStore()
+const preferencesStore = usePreferencesStore()
 
 exerciseStore.solveExercise(2, 1)
 
+preferencesStore.getStaticFiles()
 bandStore.getBands()
 locationStore.getLocations()
 genreStore.getGenres()
 accountStore.getAllAccounts()
 concertStore.getConcerts()
-  .then(result => {
-    for(let concert of concertStore.concerts) {
-      concert.inStock == 0 ? soldOutConcerts.value++ : ""
-    }
-  })
 </script>
 
 <template>
@@ -64,8 +61,14 @@ concertStore.getConcerts()
             {{ concertStore.concerts.length }} {{ $t('concert.concert', 2) }}
           </div>
 
-          <div class="text-disabled text-center">
-            {{ soldOutConcerts }} {{ $t('concert.concertSoldOut') }}
+          <div class="text-h6 text-disabled text-center">
+            {{ concertStore.concerts.reduce((counter, obj) => {
+              if (obj.inStock == 0) {
+                counter += 1
+              }
+
+              return counter
+            }, 0) }} {{ $t('concert.concertSoldOut') }}
           </div>
 
           <template #actions>
@@ -88,6 +91,18 @@ concertStore.getConcerts()
             {{ locationStore.locations.length }} {{ $t('location.location', 2) }}
           </div>
 
+          <div class="text-h6 text-disabled text-center">
+            {{ 
+              locationStore.locations.reduce((city, obj) => {
+                city[obj.city.name] = 
+                  city[obj.city.name] === undefined ? city.push(obj.city.name) : city[obj.city.name] += 1
+
+                return city
+              }, []).length 
+          }}
+            {{ $t('location.city', 2) }}
+          </div>
+
           <template #actions>
             <outlined-button
               @click="router.push('/admin/locations')"
@@ -139,7 +154,34 @@ concertStore.getConcerts()
           </template>
         </card-view>
       </v-col>
+
+      <v-col>
+        <card-view
+          :title="$t('misc.file', 2)"
+          icon="mdi-file"
+        >
+          <div class="text-h4 text-center">
+            {{ preferencesStore.staticFiles.reduce((counter, obj) => {
+              return counter += obj.files.length
+            }, 0) }} {{ $t('misc.file', 2) }}
+          </div>
+
+          <div class="text-h6 text-center text-disabled">
+            {{ preferencesStore.staticFiles.length }} {{ $t('misc.folder', 2) }}
+          </div>
+
+          <template #actions>
+            <outlined-button
+              @click="router.push('/admin/files')"
+            >
+              {{ $t('misc.actions.more') }}
+            </outlined-button>
+          </template>
+        </card-view>
+      </v-col>
     </v-row>
+
+    <!-- todo: Orders -->
       
   </v-container>
 </template>

software/src/pages/admin/filesAdminPage/filePreviewDialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+
+const showDialog = defineModel("showDialog")
+
+defineProps({
+  url: String
+})
+</script>
+
+<template>
+  <action-dialog v-model="showDialog" max-width="500">
+    <v-img :src="url" max-height="400" />
+  </action-dialog>
+</template>

software/src/pages/admin/filesAdminPage/index.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import { usePreferencesStore } from '@/stores/preferences.store';
+import filePreviewDialog from './filePreviewDialog.vue';
+import { ref } from 'vue';
+
+const preferencesStore = usePreferencesStore()
+const showDialog = ref(false)
+const previewFile = ref("")
+
+preferencesStore.getStaticFiles()
+</script>
+
+<template>
+  <admin-data-layout
+    :add-button-string="$t('misc.uploadFile')"
+    :fetch-in-progress="preferencesStore.fetchInProgress"
+    :on-add-click="() => { /** todo */ }"
+  >
+    <v-row>
+      <v-col
+        v-for="folder of preferencesStore.staticFiles"
+        cols="12"
+        md="3"
+        sm="6"
+      >
+        <v-list>
+          <v-list-subheader>{{ folder.folder }}/</v-list-subheader>
+          <v-list-item 
+            v-for="file of folder.files"
+            :title="file.name"
+            :subtitle="Math.round(file.size / 1024) + ' KB'"
+            @click="() => { previewFile = file.url; showDialog = true }"
+          />
+        </v-list>
+      </v-col>
+    </v-row>
+  </admin-data-layout>
+
+  <file-preview-dialog
+    v-model:show-dialog="showDialog"
+    :url="previewFile"
+  />
+</template>

software/src/router/admin.routes.ts

@@ -3,8 +3,8 @@ import ConcertsAdminPage from "@/pages/admin/concertsAdminPage/index.vue"
 import BandsAdminPage from "@/pages/admin/bandsAdminPage/index.vue"
 import AccountsAdminPage from "@/pages/admin/accountsAdminPage/index.vue"
 import GenresAdminPage from "@/pages/admin/genresAdminPage/index.vue"
-import CategoriesAdminPage from "@/pages/admin/categoriesAdminPage/index.vue"
 import LocationsAdminPage from "@/pages/admin/locationsAdminPage/index.vue"
+import FilesAdminPage from "@/pages/admin/filesAdminPage/index.vue"
 
 export const adminRoutes = [
   {
@@ -27,12 +27,12 @@ export const adminRoutes = [
     path: '/admin/genres',
     component: GenresAdminPage
   },
-  {
-    path: '/admin/categories',
-    component: CategoriesAdminPage
-  },
   {
     path: '/admin/locations',
     component: LocationsAdminPage
   },
+  {
+    path: '/admin/files',
+    component: FilesAdminPage
+  }
 ]

software/src/stores/preferences.store.ts

@@ -3,7 +3,7 @@ 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 { fetchFileNames, fetchServerState, resetDatabase, resetExerciseProgress } from "@/data/api/mainApi";
 import { ServerStateEnum } from "@/data/enums/serverStateEnum";
 import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
 import { useFeedbackStore } from "./feedback.store";
@@ -26,7 +26,9 @@ export const usePreferencesStore = defineStore('preferencesStore', {
     showDeleteDbDialog: ref(false),
 
     /** Show the "Delete Exercise progress?" confirm dialog */
-    showDeleteExerciseDialog: ref(false)
+    showDeleteExerciseDialog: ref(false),
+
+    staticFiles: ref([])
   }),
 
   actions: {
@@ -90,6 +92,16 @@ export const usePreferencesStore = defineStore('preferencesStore', {
           this.fetchInProgress = false
           this.showDeleteExerciseDialog = false
         })
+    },
+
+    async getStaticFiles() {
+      this.fetchInProgress = true
+
+      fetchFileNames()
+        .then(res => {
+          this.staticFiles = res.data
+          this.fetchInProgress = false
+        })
     }
   }
 })