SafeExamBrowser · NadimETH · Sep 18, 2023 · Aug 16, 2023 · Aug 22, 2023 · Aug 22, 2023
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
@@ -20,7 +20,8 @@ module.exports = {
       {'ts-ignore': 'allow-with-description'},
     ],  
     'no-useless-catch': 'off',
-    'no-undef': 'off'
+    'no-undef': 'off',
+    "@typescript-eslint/no-inferrable-types": "off"
   },
   overrides: [
     {

diff --git a/client/index.html b/client/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/img/seb-logo-no-border.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="/env.js"></script>
     <title>SEB Screen Proctoring</title>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -8,35 +8,38 @@
     "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@mdi/font": "7.0.96",
-    "@tailwindcss/forms": "^0.5.4",
-    "axios": "^1.4.0",
+    "@intlify/unplugin-vue-i18n": "^1.0.1",
+    "@mdi/font": "7.2.96",
+    "@tailwindcss/forms": "^0.5.6",
+    "@vuepic/vue-datepicker": "^6.0.3",
+    "axios": "^1.5.0",
     "install": "^0.13.0",
-    "npm": "^9.8.1",
-    "pinia": "^2.0.23",
+    "npm": "^10.0.0",
+    "pinia": "^2.1.6",
     "roboto-fontface": "*",
-    "vue": "^3.2.0",
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.3.0",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "^4.0.0",
-    "vuetify": "^3.0.0",
-    "webfontloader": "^1.0.0"
+    "vue-router": "^4.2.4",
+    "vuetify": "^v3.3.15",
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/types": "^7.21.4",
-    "@types/node": "^18.15.0",
+    "@babel/types": "^7.22.15",
+    "@types/node": "^20.5.9",
     "@types/webfontloader": "^1.6.35",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.0.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "postcss": "^8.4.26",
-    "sass": "^1.63.6",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "autoprefixer": "^10.4.15",
+    "eslint": "^8.48.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "postcss": "^8.4.29",
+    "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.0",
-    "vite": "^4.2.0",
-    "vite-plugin-vuetify": "^1.0.0",
-    "vue-tsc": "^1.2.0"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-vuetify": "^1.0.2",
+    "vue-tsc": "^1.8.10"
   }
 }
diff --git a/client/public/img/seb-logo-border.png b/client/public/img/seb-logo-border.png
diff --git a/client/public/img/seb-logo-no-border.png b/client/public/img/seb-logo-no-border.png
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <v-app>
-    <!-- <loading 
+    <loading 
       color="#215CAF"
       :width=100
-      :active="loadingStore.isLoading" /> -->
+      :active="loadingStore.isLoading" />
     <router-view />
   </v-app>
 </template>

diff --git a/client/src/assets/css/_focus-follow.scss b/client/src/assets/css/_focus-follow.scss
@@ -1,25 +1,25 @@
-[tabindex]:not([tabindex="-1"]),
-a,
-button,
-input,
-select,
-textarea {
-  outline-width: 2px !important;
-  outline-style: dotted !important;
-  outline-color: transparent !important;
-  outline-offset: 4px;
-  transition: outline-offset 0.1s ease;
-}
+// [tabindex]:not([tabindex="-1"]),
+// a,
+// button,
+// input,
+// select,
+// textarea {
+//   outline-width: 2px !important;
+//   outline-style: dotted !important;
+//   outline-color: transparent !important;
+//   outline-offset: 4px;
+//   transition: outline-offset 0.1s ease;
+// }
 
-*:focus {
-  outline-color: theme('colors.gray.800') !important;
-  outline-offset: 1px;
-}
+// *:focus {
+//   outline-color: theme('colors.gray.800') !important;
+//   outline-offset: 1px;
+// }
 
 input:focus {
   box-shadow: none !important;
 }
 
-[tabindex="-1"] {
-  outline: 0 !important;
-}
+// [tabindex="-1"] {
+//   outline: 0 !important;
+// }
diff --git a/client/src/components/layout/ContainerLayout.vue b/client/src/components/layout/ContainerLayout.vue
@@ -2,14 +2,14 @@
 
     <v-navigation-drawer v-model="drawer" class="d-none d-sm-flex">
         <v-sheet class="pa-4">
-            <v-img class="mx-auto h-12 w-auto" src="/img/logo.svg" alt="Logo ETH Zürich"></v-img>
-            <div class="app-title">SEB Screen Proctoring</div>
+            <v-img max-height="100" src="/img/seb-logo-no-border.png" alt="Logo ETH Zürich"></v-img>
+            <div class="app-title text-h6">{{ $t("navigation.title") }}</div>
         </v-sheet>
 
         <v-sheet color="grey-lighten-4" class="pa-4">
-            <div>sebserver-admin</div>
+            <div>{{ $t("navigation.current-user") }}</div>
             <div class="text-decoration-underline text-blue">
-                <router-link @click="signOut()" to="/">Sign out</router-link>
+                <router-link @click="signOut()" to="/">{{ $t("navigation.sign-out") }}</router-link>
             </div>
         </v-sheet>
 
@@ -28,24 +28,58 @@
         </v-app-bar-nav-icon>
         <v-app-bar-title>{{ appBarStore.title }}</v-app-bar-title>
 
-        <template v-if="useRoute().name == 'GalleryViewPage'" v-slot:append>
-            <v-menu>
-                <template v-slot:activator="{ props }">
-                    <v-btn v-bind="props" rounded="sm" color="primary" variant="flat">
-                        <v-icon start icon="mdi-chevron-down" size="x-large"></v-icon>
-                        Grid Size: {{ appBarStore.galleryGridSize.title }}
-                    </v-btn>
-                </template>
-                <v-list>
-                    <v-list-item class="d-flex justify-center align-center" v-for="(gridSize, index) in gridSizes" :key="index" :value="index" @click="changeGridSize(gridSize)">
-                        <v-list-item-title>{{ gridSize.title }}</v-list-item-title>
-                    </v-list-item>
-                </v-list>
-            </v-menu>
-            <div class="switch-container">
-                <v-switch class="mx-auto" label="Show Name" color="primary" v-model="appBarStore.isNameEnabled"></v-switch>
-            </div>
+        <template v-slot:append>
+            <template v-if="useRoute().name == 'GalleryViewPage'">
+
+                <div>
+                    <v-chip class="session-info-item">
+                        Number of Sessions: {{ appBarStore.gallerNumberOfSessions }}
+                    </v-chip>
+                    <v-chip class="session-info-item">
+                        Description: {{ appBarStore.galleryDescription }}
+                    </v-chip>
+                </div>
+
+                <div class="grid-size-container">
+                    <v-menu>
+                        <template v-slot:activator="{ props }">
+                            <v-btn v-bind="props" rounded="sm" color="primary" variant="flat">
+                                <v-icon start icon="mdi-chevron-down" size="x-large"></v-icon>
+                                Grid Size: {{ appBarStore.galleryGridSize.title }}
+                            </v-btn>
+                        </template>
+                        <v-list>
+                            <v-list-item class="d-flex justify-center align-center" v-for="(gridSize, index) in gridSizes" :key="index" :value="index" @click="changeGridSize(gridSize)">
+                                <v-list-item-title>{{ gridSize.title }}</v-list-item-title>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </div>
+
+                <div class="switch-container">
+                    <v-switch class="mx-auto" label="Show Name" color="primary" v-model="appBarStore.galleryIsNameEnabled"></v-switch>
+                </div>
+
+            </template>
+            <!-- <div class="switch-container">
+                <v-switch class="mx-auto" label="theme test" color="primary" v-model="useLigtTheme"></v-switch>
+            </div> -->
+            <!-- <div class="profile-icon-container">
+                <v-menu>
+                    <template v-slot:activator="{ props }">
+                        <v-btn v-bind="props" color="primary" icon="mdi-account-circle" size="x-large"></v-btn>
+                    </template>
+                    <v-list>
+                        <v-list-item class="d-flex justify-center align-center" v-for="(gridSize, index) in gridSizes" :key="index" :value="index" @click="changeGridSize(gridSize)">
+                            <v-list-item-title>{{ gridSize.title }}</v-list-item-title>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+            </div> -->
         </template>
+
+
+
     </v-app-bar>
 
     <v-main>
@@ -57,16 +91,20 @@
 </template>
 
 <script setup lang="ts">
-    import { ref } from "vue"
+    import { ref, watch } from "vue"
     import { useAppBarStore } from "@/store/app";
     import { useRoute } from "vue-router";
+    import { useTheme } from 'vuetify'
 
     const drawer = ref();
+    const useLigtTheme = ref<boolean>(true);
 
     const appBarStore = useAppBarStore();
+    const theme = useTheme();
 
     const links = [
         ["SEB Groups Proctoring", "/start"],
+        ["Search", "/search"],
         ["Example Page", "/example"],
     ];
 
@@ -78,6 +116,14 @@
         // {title: "6x6", value: 6},
     ];
 
+
+
+    watch(useLigtTheme, () => {
+        theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+    });
+
+
+
     function signOut(){
         localStorage.clear();
     }
@@ -88,17 +134,26 @@
 
 </script>
 
-<style>
+<style scoped>
+
     .app-title{
         text-align: center;
     }
 
+    .session-info-item{
+        margin-right: 10px;
+    }
+
+    .grid-size-container{
+        margin-right: 10px;
+    }
+
     .switch-container{
         display: flex;
         align-items: center;
         justify-content: center;
         margin-top: 20px;
-        margin-left: 10px;
+        margin-right: 10px;
     }
 
 </style>