From d883bd0d4be96685c266ade6c4a6a2cddd495b0d Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Mon, 19 Feb 2024 10:38:43 +0100
Subject: [PATCH 01/13] feat: add basic functionality

---
 client/src/components/views/StartPage.vue     |  3 +-
 .../src/services/api-services/apiService.ts   | 37 +++++++++++--------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/client/src/components/views/StartPage.vue b/client/src/components/views/StartPage.vue
index 692955e..dc9c6a7 100644
--- a/client/src/components/views/StartPage.vue
+++ b/client/src/components/views/StartPage.vue
@@ -47,7 +47,7 @@
 <script setup lang="ts">
     import { ref, onBeforeMount, onMounted } from "vue";
     import * as groupService from "@/services/api-services/groupService";
-    import { useAppBarStore } from "@/store/app";
+    import { useAppBarStore, useLoadingStore } from "@/store/app";
     import * as timeUtils from "@/utils/timeUtils";
     import * as tableUtils from "@/utils/table/tableUtils";
     import CustomTableHeader from "@/utils/table/CustomTableHeader.vue";
@@ -55,6 +55,7 @@
 
     //stores
     const appBarStore = useAppBarStore();
+    const loadingStore = useLoadingStore();
 
     //table
     const groups = ref<Group[]>();
diff --git a/client/src/services/api-services/apiService.ts b/client/src/services/api-services/apiService.ts
index a2d9873..69834d7 100644
--- a/client/src/services/api-services/apiService.ts
+++ b/client/src/services/api-services/apiService.ts
@@ -22,22 +22,27 @@ export function createApiInterceptor(){
     const loadingStore = useLoadingStore();
     let loadingTimeout: NodeJS.Timeout | null = null;
 
-    // api.interceptors.request.use(
-    //     (config) => {
-
-    //         //exclude calls
-    //         // console.log(config)
-    //         // console.log("url: " + config.url)
-
-    //         // if(!loadingStore.skipLoading){
-    //         //     loadingTimeout = setTimeout(() => {
-    //         //         // loadingStore.isLoading = true;
-    //         //     }, 1000);
-    //         // }
-
-    //         return config;
-    //     }
-    // )
+    api.interceptors.request.use(
+        async (config) => {
+            // exclude calls
+            console.log(config)
+            console.log("url: " + config.url)
+            if(config.url?.startsWith('/group') || config.url?.startsWith('/screenshot') || config.url?.startsWith('/search/timeline')){
+                return config;
+            }
+
+            // set loading spinner only after 500ms and if not explicitly skipped in component
+            if(!loadingStore.skipLoading){
+                loadingTimeout = setTimeout(() => {
+                    loadingStore.isLoading = true;
+                }, 200);
+            }
+
+            // fake delay
+            await new Promise(r => setTimeout(r, 1000));
+            return config;
+        }
+    )
 
 
     api.interceptors.response.use(response => {

From 668cf77db9e190c3ad5b3f9502b0b770d9d6b63a Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Mon, 26 Feb 2024 08:57:12 +0100
Subject: [PATCH 02/13] fix: correct timings / always setTimeout

---
 .../src/services/api-services/apiService.ts   | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/services/api-services/apiService.ts b/client/src/services/api-services/apiService.ts
index 69834d7..a1b3dc0 100644
--- a/client/src/services/api-services/apiService.ts
+++ b/client/src/services/api-services/apiService.ts
@@ -24,28 +24,26 @@ export function createApiInterceptor(){
 
     api.interceptors.request.use(
         async (config) => {
-            // exclude calls
-            console.log(config)
-            console.log("url: " + config.url)
-            if(config.url?.startsWith('/group') || config.url?.startsWith('/screenshot') || config.url?.startsWith('/search/timeline')){
-                return config;
-            }
-
-            // set loading spinner only after 500ms and if not explicitly skipped in component
             if(!loadingStore.skipLoading){
                 loadingTimeout = setTimeout(() => {
                     loadingStore.isLoading = true;
                 }, 200);
             }
 
-            // fake delay
-            await new Promise(r => setTimeout(r, 1000));
+            console.log("url: " + config.url)
+            if(config.url?.startsWith('/screenshot') || config.url?.startsWith('/search/timeline')){
+                if (loadingTimeout) clearTimeout(loadingTimeout); 
+                return config;
+            }
+
             return config;
         }
     )
 
 
-    api.interceptors.response.use(response => {
+    api.interceptors.response.use(async response => {
+        console.log("response")
+        // await new Promise(r => setTimeout(r, 600));
         if (loadingTimeout) clearTimeout(loadingTimeout); 
         loadingStore.isLoading = false;
         loadingStore.skipLoading = false;
@@ -53,6 +51,8 @@ export function createApiInterceptor(){
         return response;
 
     }, async error => {
+        console.log("error")
+        // await new Promise(r => setTimeout(r, 1000));
         if (loadingTimeout) clearTimeout(loadingTimeout); 
         loadingStore.isLoading = false;
         loadingStore.skipLoading = false;

From 7a2db9da866e4ce18fb9683b74c071a092029a81 Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Mon, 26 Feb 2024 08:59:27 +0100
Subject: [PATCH 03/13] cleanup: logs

---
 client/src/services/api-services/apiService.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/services/api-services/apiService.ts b/client/src/services/api-services/apiService.ts
index a1b3dc0..ac17077 100644
--- a/client/src/services/api-services/apiService.ts
+++ b/client/src/services/api-services/apiService.ts
@@ -30,7 +30,6 @@ export function createApiInterceptor(){
                 }, 200);
             }
 
-            console.log("url: " + config.url)
             if(config.url?.startsWith('/screenshot') || config.url?.startsWith('/search/timeline')){
                 if (loadingTimeout) clearTimeout(loadingTimeout); 
                 return config;

From bc81e373ee10b0f837d5c7a46953399eba5741de Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Mon, 26 Feb 2024 09:03:50 +0100
Subject: [PATCH 04/13] cleanup: remove logs

---
 client/src/services/api-services/apiService.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/services/api-services/apiService.ts b/client/src/services/api-services/apiService.ts
index ac17077..1e134ec 100644
--- a/client/src/services/api-services/apiService.ts
+++ b/client/src/services/api-services/apiService.ts
@@ -41,7 +41,6 @@ export function createApiInterceptor(){
 
 
     api.interceptors.response.use(async response => {
-        console.log("response")
         // await new Promise(r => setTimeout(r, 600));
         if (loadingTimeout) clearTimeout(loadingTimeout); 
         loadingStore.isLoading = false;
@@ -50,7 +49,6 @@ export function createApiInterceptor(){
         return response;
 
     }, async error => {
-        console.log("error")
         // await new Promise(r => setTimeout(r, 1000));
         if (loadingTimeout) clearTimeout(loadingTimeout); 
         loadingStore.isLoading = false;

From d4cea96b159f7feef8830a969649a23a24724cbf Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Thu, 29 Feb 2024 22:57:46 +0100
Subject: [PATCH 05/13] fix: login loading spinner, deactivate after 10secs

---
 client/src/services/api-services/apiService.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/services/api-services/apiService.ts b/client/src/services/api-services/apiService.ts
index 1e134ec..a25fa29 100644
--- a/client/src/services/api-services/apiService.ts
+++ b/client/src/services/api-services/apiService.ts
@@ -21,6 +21,7 @@ export function createApiInterceptor(){
     const authStore = useAuthStore();
     const loadingStore = useLoadingStore();
     let loadingTimeout: NodeJS.Timeout | null = null;
+    let loadingEndTimeout: NodeJS.Timeout | null = null;
 
     api.interceptors.request.use(
         async (config) => {
@@ -28,9 +29,13 @@ export function createApiInterceptor(){
                 loadingTimeout = setTimeout(() => {
                     loadingStore.isLoading = true;
                 }, 200);
+                loadingEndTimeout = setTimeout(() => {
+                    console.log("No response in 10 seconds. Most probably something went wrong.")
+                    loadingStore.isLoading = false;
+                }, 10000);
             }
 
-            if(config.url?.startsWith('/screenshot') || config.url?.startsWith('/search/timeline')){
+            if(config.url?.startsWith('/screenshot') || config.url?.startsWith('/search/timeline') || config.url?.startsWith('/useraccount/me')){
                 if (loadingTimeout) clearTimeout(loadingTimeout); 
                 return config;
             }
@@ -43,6 +48,7 @@ export function createApiInterceptor(){
     api.interceptors.response.use(async response => {
         // await new Promise(r => setTimeout(r, 600));
         if (loadingTimeout) clearTimeout(loadingTimeout); 
+        if (loadingEndTimeout) clearTimeout(loadingEndTimeout); 
         loadingStore.isLoading = false;
         loadingStore.skipLoading = false;
 

From 324b0cdd57ff118614de75ae857c5913e5d54742 Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Thu, 29 Feb 2024 22:58:34 +0100
Subject: [PATCH 06/13] fix: add semicolons, remove comments

---
 client/src/services/api-services/apiService.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/services/api-services/apiService.ts b/client/src/services/api-services/apiService.ts
index a25fa29..98d24b9 100644
--- a/client/src/services/api-services/apiService.ts
+++ b/client/src/services/api-services/apiService.ts
@@ -30,7 +30,7 @@ export function createApiInterceptor(){
                     loadingStore.isLoading = true;
                 }, 200);
                 loadingEndTimeout = setTimeout(() => {
-                    console.log("No response in 10 seconds. Most probably something went wrong.")
+                    console.log("No response in 10 seconds. Most probably something went wrong.");
                     loadingStore.isLoading = false;
                 }, 10000);
             }
@@ -46,7 +46,6 @@ export function createApiInterceptor(){
 
 
     api.interceptors.response.use(async response => {
-        // await new Promise(r => setTimeout(r, 600));
         if (loadingTimeout) clearTimeout(loadingTimeout); 
         if (loadingEndTimeout) clearTimeout(loadingEndTimeout); 
         loadingStore.isLoading = false;
@@ -55,7 +54,6 @@ export function createApiInterceptor(){
         return response;
 
     }, async error => {
-        // await new Promise(r => setTimeout(r, 1000));
         if (loadingTimeout) clearTimeout(loadingTimeout); 
         loadingStore.isLoading = false;
         loadingStore.skipLoading = false;

From 0b8b428e3c6595c23194a75f79a0476cd2421262 Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Mon, 4 Mar 2024 09:10:23 +0100
Subject: [PATCH 07/13] refactor: array logic

---
 client/src/services/api-services/apiService.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/services/api-services/apiService.ts b/client/src/services/api-services/apiService.ts
index 98d24b9..2689d41 100644
--- a/client/src/services/api-services/apiService.ts
+++ b/client/src/services/api-services/apiService.ts
@@ -9,8 +9,6 @@ import router from "@/router";
 export let api: AxiosInstance;
 
 export function createApi(){
-    const authStore = useAuthStore();
-
     api = axios.create({
         baseURL: ENV.SERVER_URL + ENV.SERVER_PORT,
         headers: getHeaders()
@@ -35,7 +33,8 @@ export function createApiInterceptor(){
                 }, 10000);
             }
 
-            if(config.url?.startsWith('/screenshot') || config.url?.startsWith('/search/timeline') || config.url?.startsWith('/useraccount/me')){
+            const ignoredRoutes: string[] = ["/screenshot", "/search/timeline", "/useraccount/me"];
+            if(config.url && ignoredRoutes.includes(config.url)){
                 if (loadingTimeout) clearTimeout(loadingTimeout); 
                 return config;
             }

From 7f602cf4318ae26c60f01d91e58173a172f0a993 Mon Sep 17 00:00:00 2001
From: NadimETH <138491408+NadimETH@users.noreply.github.com>
Date: Tue, 5 Mar 2024 11:14:43 +0100
Subject: [PATCH 08/13] SEBSERV-508 github action version update

---
 .github/workflows/docker-build-push.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docker-build-push.yml b/.github/workflows/docker-build-push.yml
index 3eb6c27..c77fcf5 100644
--- a/.github/workflows/docker-build-push.yml
+++ b/.github/workflows/docker-build-push.yml
@@ -21,16 +21,16 @@ jobs:
       run: echo "TAG_NAME=default_version" >> $GITHUB_ENV
     
     - name: Checkout code
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4.1.1
       
     - name: Login to DockerHub
-      uses: docker/login-action@v2.2.0
+      uses: docker/login-action@v3.0.0
       with:
           username: naritter
           password: ${{ secrets.DOCKERHUB_PASSWORD}}
     
     - name: Build and push Docker image
-      uses: docker/build-push-action@v4.1.1
+      uses: docker/build-push-action@v5.1.0
       with:
         context: .
         push: true

From 08e4d90ee87ff58a93977732f1a72ab151ab42eb Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Thu, 7 Mar 2024 13:51:56 +0100
Subject: [PATCH 09/13] SEBSP-105 display full name and ip in gallery view,
 hide metadata letters

---
 client/src/App.vue                            | 18 ++++-----
 .../src/components/layout/ContainerLayout.vue |  1 +
 .../components/views/gallery/GalleryImage.vue |  6 ++-
 .../views/gallery/GalleryViewPage.vue         |  3 +-
 .../views/proctoring/ProctoringViewPage.vue   | 31 +++++++-------
 .../views/search/SearchScreenshotsTable.vue   | 11 ++++-
 client/src/components/widgets/AlertMsg.vue    |  4 ++
 .../src/services/api-services/groupService.ts |  2 +-
 .../component-services/galleryViewService.ts  | 40 ++++++++-----------
 .../proctoringViewService.ts                  |  4 +-
 client/src/store/app.ts                       |  3 +-
 client/src/utils/metadataUtils.ts             | 15 +++++++
 12 files changed, 84 insertions(+), 54 deletions(-)
 create mode 100644 client/src/utils/metadataUtils.ts

diff --git a/client/src/App.vue b/client/src/App.vue
index 3834215..4e005d3 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -9,17 +9,17 @@
 </template>
 
 <script setup lang="ts">
-  import Loading from 'vue-loading-overlay';
-  import 'vue-loading-overlay/dist/css/index.css';
-  import { useLoadingStore, useSettingsStore } from "@/store/app";
-  import { onBeforeMount } from "vue";
+    import Loading from 'vue-loading-overlay';
+    import 'vue-loading-overlay/dist/css/index.css';
+    import { useLoadingStore, useSettingsStore } from "@/store/app";
+    import { onBeforeMount } from "vue";
 
-  const loadingStore = useLoadingStore();
-  const settingsStore = useSettingsStore();
+    const loadingStore = useLoadingStore();
+    const settingsStore = useSettingsStore();
 
-  onBeforeMount(async () => {
-    await settingsStore.setIsSebServerIntegratedMode();
-  });
+    onBeforeMount(async () => {
+        await settingsStore.setIsSebServerIntegratedMode();
+    });
 
 </script>
 
diff --git a/client/src/components/layout/ContainerLayout.vue b/client/src/components/layout/ContainerLayout.vue
index 77925a4..2aa3cb7 100644
--- a/client/src/components/layout/ContainerLayout.vue
+++ b/client/src/components/layout/ContainerLayout.vue
@@ -74,6 +74,7 @@
                         <v-list>
                             <v-list-item>
                                 <v-switch class="mx-auto" label="Show Name" color="primary" v-model="appBarStore.galleryIsNameEnabled" hide-details></v-switch>
+                                <v-switch class="mx-auto" label="Show IP" color="primary" v-model="appBarStore.galleryIsIpEnabled" hide-details></v-switch>
                                 <v-switch class="mx-auto" label="Show Metadata" color="primary" v-model="appBarStore.galleryIsMetadataEnabled" hide-details></v-switch>
                             </v-list-item>
                         </v-list>
diff --git a/client/src/components/views/gallery/GalleryImage.vue b/client/src/components/views/gallery/GalleryImage.vue
index 16c3779..8c88049 100644
--- a/client/src/components/views/gallery/GalleryImage.vue
+++ b/client/src/components/views/gallery/GalleryImage.vue
@@ -36,8 +36,10 @@
                 <v-row align="end">
                     <v-col>
                         <v-sheet class="d-flex pa-2 button-row">
-                            <div v-if="appBarStore.galleryIsNameEnabled" class="text-body-1 title-box">
-                                {{screenshot.clientName.substring(0, 8)}}
+                            <div class="text-body-1 title-box">
+                                <template v-if="appBarStore.galleryIsNameEnabled">{{screenshot.clientName}}</template>
+                                <template v-if="appBarStore.galleryIsNameEnabled && appBarStore.galleryIsIpEnabled"> / </template>
+                                <template v-if="appBarStore.galleryIsIpEnabled">{{screenshot.clientIp}}</template>
                             </div>
                             <v-spacer></v-spacer>
                             <span>
diff --git a/client/src/components/views/gallery/GalleryViewPage.vue b/client/src/components/views/gallery/GalleryViewPage.vue
index d6432de..7256059 100644
--- a/client/src/components/views/gallery/GalleryViewPage.vue
+++ b/client/src/components/views/gallery/GalleryViewPage.vue
@@ -1,7 +1,6 @@
 <template>
     <v-window v-model="currentWindow" @update:model-value="windowChange()" show-arrows>
         <v-window-item v-for="(w , index) in maxPages" :key="index">
-        <!-- <v-window-item> -->
 
             <template v-if="!noScreenshotData">
                 <v-row v-for="i in appBarStore.galleryGridSize.value" :key="i" align-strech no-gutters>
@@ -21,7 +20,7 @@
             <AlertMsg 
                 v-else 
                 :alertProps="{
-                    textKey: 'no-data',
+                    textKey: 'no-live-data',
                     color: 'warning',
                     type: 'alert',
                 }">
diff --git a/client/src/components/views/proctoring/ProctoringViewPage.vue b/client/src/components/views/proctoring/ProctoringViewPage.vue
index 691da5f..969c5d4 100644
--- a/client/src/components/views/proctoring/ProctoringViewPage.vue
+++ b/client/src/components/views/proctoring/ProctoringViewPage.vue
@@ -45,7 +45,6 @@
                         </v-btn>
                     </template>
                     <!-------------------------->
-
                     <!-----------time---------->
                     <template v-slot:append>
                         <v-menu>
@@ -277,8 +276,15 @@
             if(screenshotTimestampsFloored.value.includes(Math.floor(sliderTime.value/1000))){
                 timestampsIndex.value = screenshotTimestampsFloored.value.indexOf(Math.floor(sliderTime.value/1000));
             }else{
-                setTimestampsList(SortOrder.asc);
+                await setTimestampsList(SortOrder.asc);
             }
+
+            console.log("=====================")
+            console.log("sliderTime.value")
+            console.log(sliderTime.value)
+            console.log("=====================")
+
+            assignScreenshotDataByTimestamp(sliderTime.value.toString());
         }
     });
 
@@ -302,7 +308,10 @@
             liveSessionTime.value = timeUtils.toTimeString(currentScreenshot.value?.endTime - currentScreenshot.value?.startTime);
             isLive.value = currentScreenshot.value.active;
 
-            if(!isLive.value) pause();
+            // if(!isLive.value) {
+            //     console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&")
+            //     pause();
+            // }
         }
     });
 
@@ -479,17 +488,9 @@
         stopIntervalScreenshots();
         selectedSpeedId.value = id;
 
-        if(id == 0){
-            PLAYBACK_SPEED.value = SLOW_PLAYBACK_SPEED;
-        }
-
-        if(id == 1){
-            PLAYBACK_SPEED.value = DEFAULT_PLAYBACK_SPEED;
-        }
-
-        if(id == 2){
-            PLAYBACK_SPEED.value = FAST_PLAYBACK_SPEED;
-        }
+        if(id == 0) PLAYBACK_SPEED.value = SLOW_PLAYBACK_SPEED;
+        if(id == 1) PLAYBACK_SPEED.value = DEFAULT_PLAYBACK_SPEED;
+        if(id == 2) PLAYBACK_SPEED.value = FAST_PLAYBACK_SPEED;
 
         if(isPlaying.value){
             startIntervalScreenshots();
@@ -582,6 +583,8 @@
     //=============metadata==================
     const screenshotMetadata = computed<object>(() => {
         if(currentScreenshot.value){
+            console.log("it got here")
+            console.log(currentScreenshot.value)
             return proctoringViewService.getScreenshotMetadata(sliderTime.value || 0, currentScreenshot.value.metaData, additionalMetadataInfo.value, totalNumberOfScreenshots.value);
         }
 
diff --git a/client/src/components/views/search/SearchScreenshotsTable.vue b/client/src/components/views/search/SearchScreenshotsTable.vue
index a2dfe9f..ac7e3c6 100644
--- a/client/src/components/views/search/SearchScreenshotsTable.vue
+++ b/client/src/components/views/search/SearchScreenshotsTable.vue
@@ -41,6 +41,14 @@
             </td>
         </template>
 
+        <template v-slot:item.activityDetails="{item}">
+            <td>
+                <div>
+                    {{metadataUtils.filterOutLetters(item.timelineScreenshotDataList[0].metaData.screenProctoringMetadataUserAction)}}
+                </div>
+            </td>
+        </template>
+
         <template v-slot:item.proctoringViewLink="{internalItem}">
             <v-btn 
                 @click="searchViewService.openProctoringView(timelineSearchResult!.sessionUUID, internalItem.columns.timestamp)" 
@@ -76,7 +84,7 @@
                     </td>
 
                     <td>
-                        {{ screenshot.groupName }} ({{ screenshot.timelineScreenshotDataList.length }})
+                        {{ metadataUtils.filterOutLetters(screenshot.groupName + "(" + screenshot.timelineScreenshotDataList.length + ")") }}
                     </td>
 
                     <td>
@@ -107,6 +115,7 @@
     import * as searchViewService from "@/services/component-services/searchViewService";
     import * as groupingUtils from "@/utils/groupingUtils";
     import CustomTableHeader from "@/utils/table/CustomTableHeader.vue";
+    import * as metadataUtils from "@/utils/metadataUtils";
 
     const props = defineProps<{
         timelineSearchResult: SearchTimeline
diff --git a/client/src/components/widgets/AlertMsg.vue b/client/src/components/widgets/AlertMsg.vue
index e92af5e..e80cf22 100644
--- a/client/src/components/widgets/AlertMsg.vue
+++ b/client/src/components/widgets/AlertMsg.vue
@@ -34,6 +34,10 @@
             key: "no-data",
             value: "No data available"
         },
+        {
+            key: "no-live-data",
+            value: "No live sessions available"
+        },
         {
             key: "api-error",
             value: "Something went wrong, please try again"
diff --git a/client/src/services/api-services/groupService.ts b/client/src/services/api-services/groupService.ts
index 6980220..644351d 100644
--- a/client/src/services/api-services/groupService.ts
+++ b/client/src/services/api-services/groupService.ts
@@ -16,7 +16,7 @@ export async function getGroups(optionalParamters?: OptionalParGeneric): Promise
   }
 }
 
-export async function getGroupByUuid(uuid: string, optionalParamters?: OptionalParGroupByUuid): Promise<GroupUuid[] | any> {
+export async function getGroupByUuid(uuid: string, optionalParamters?: OptionalParGroupByUuid): Promise<GroupUuid | any> {
 
   try {
     const url: string = "/group/" + uuid;
diff --git a/client/src/services/component-services/galleryViewService.ts b/client/src/services/component-services/galleryViewService.ts
index f40087e..08d9c3b 100644
--- a/client/src/services/component-services/galleryViewService.ts
+++ b/client/src/services/component-services/galleryViewService.ts
@@ -3,11 +3,12 @@ import * as screenshotDataService from "@/services/api-services/screenshotDataSe
 import { SortOrder } from "@/models/sortOrderEnum";
 import {navigateTo} from "@/router/navigation";
 import { useAuthStore } from "@/store/app";
+import * as metadataUtils from "@/utils/metadataUtils";
 
 //=============api==============
 export async function getGroup(groupUuid: string, currentWindow: number, pageSize: number): Promise<GroupUuid | null>{
     try {
-        const groupUuidResponse = await groupService.getGroupByUuid(groupUuid, 
+        const groupUuidResponse: GroupUuid = await groupService.getGroupByUuid(groupUuid, 
             {   
                 sortOrder: SortOrder.desc,
                 pageNumber: currentWindow+=1, 
@@ -15,6 +16,8 @@ export async function getGroup(groupUuid: string, currentWindow: number, pageSiz
             }
         );
 
+        groupUuidResponse.screenshots = filterLiveSessions(groupUuidResponse.screenshots);
+
         return groupUuidResponse;
 
     } catch (error) {
@@ -31,8 +34,17 @@ export async function getLatestScreenshotData(sessionUuid: string, timestamp: nu
         return null;
     }
 }
-//==============================
 
+//===========filter=========
+export function filterLiveSessions(screenshotData: ScreenshotData[]): ScreenshotData[]{
+    const screenshotDataOnlyLive: ScreenshotData[] = screenshotData.filter((screenshot) => {
+        return screenshot.active;
+    }); 
+
+    console.log(screenshotDataOnlyLive);
+
+    return screenshotDataOnlyLive;
+}
 
 //=============index============
 export function calcIndex(i: number, n: number, gridSize: number): number {
@@ -47,38 +59,20 @@ export function currentIndexExists(screenshots: ScreenshotData[] | undefined, in
 
     return false;
 }
-//==============================
 
 //=============links============
-// export function getLatestImageLink(screenshot: ScreenshotData | undefined, timestamp: number): string {
-//     const authStore = useAuthStore();
-
-//     if(screenshot == null){
-//         return "";
-//     }
-
-//     const screenshotLink: string = screenshot.latestImageLink + "?access_token=" + authStore.getAccessToken();
-
-//     if(screenshot.active){
-//         return screenshotLink + '&t=' + timestamp;
-//     }
-
-//     return screenshotLink;
-// }
-
 export function navigateToProctoringView(screenshot: ScreenshotData | undefined, groupUuid: string) {
     if (screenshot != null) {
         navigateTo("/recording/" + screenshot.uuid);
     }
 }
-//==============================
 
 //=============metadata=========
 export function getScreenshotMetadata(currentScreenshotMetadata: MetaData | null | undefined): object{
     return {
         "Url:": currentScreenshotMetadata?.screenProctoringMetadataURL,
         "Window Title:": currentScreenshotMetadata?.screenProctoringMetadataWindowTitle,
-        "User-Action:": currentScreenshotMetadata?.screenProctoringMetadataUserAction,
+        //temp solution
+        "Activity Details:": metadataUtils.filterOutLetters(currentScreenshotMetadata?.screenProctoringMetadataUserAction)
     };
-}
-//==============================
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/client/src/services/component-services/proctoringViewService.ts b/client/src/services/component-services/proctoringViewService.ts
index 232900c..2abf17a 100644
--- a/client/src/services/component-services/proctoringViewService.ts
+++ b/client/src/services/component-services/proctoringViewService.ts
@@ -1,6 +1,7 @@
 import * as screenshotDataService from "@/services/api-services/screenshotDataService";
 import * as timeUtils from "@/utils/timeUtils";
 import { SortOrder } from "@/models/sortOrderEnum";
+import * as metadataUtils from "@/utils/metadataUtils";
 
 //=============api==================
 export async function getScreenshotDataBySessionId(sessionId: string): Promise<ScreenshotData | null>{
@@ -40,7 +41,8 @@ export function getScreenshotMetadata(sliderTime: number, currentScreenshotMetad
         "Time:": timeUtils.formatTimestmapToTime(sliderTime),
         "Url:": currentScreenshotMetadata?.screenProctoringMetadataURL,
         "Window Title:": currentScreenshotMetadata?.screenProctoringMetadataWindowTitle,
-        "User-Action:": currentScreenshotMetadata?.screenProctoringMetadataUserAction + " " + additionalMetadataInfo
+        //temp solution
+        "Activity Details:": metadataUtils.filterOutLetters(currentScreenshotMetadata?.screenProctoringMetadataUserAction + " " + additionalMetadataInfo)
     };
 }
 
diff --git a/client/src/store/app.ts b/client/src/store/app.ts
index 93ed7af..527b4dc 100644
--- a/client/src/store/app.ts
+++ b/client/src/store/app.ts
@@ -37,13 +37,14 @@ export const useAppBarStore = defineStore("appBar", () => {
     value: 3
   });
   const galleryIsNameEnabled = ref<boolean>(true);
+  const galleryIsIpEnabled = ref<boolean>(false);
   const galleryIsMetadataEnabled = ref<boolean>(false);
   const galleryCurrentPage = ref<number>(1);
   const galleryMaxPages = ref<number>(1);
   const gallerNumberOfSessions = ref<number>(0);
   const galleryDescription = ref<string>("");
 
-  return {title, galleryGridSize, galleryIsNameEnabled, galleryIsMetadataEnabled, galleryCurrentPage, galleryMaxPages, gallerNumberOfSessions, galleryDescription};
+  return {title, galleryGridSize, galleryIsNameEnabled, galleryIsIpEnabled, galleryIsMetadataEnabled, galleryCurrentPage, galleryMaxPages, gallerNumberOfSessions, galleryDescription};
 });
 //-------------------------------------------------//
 
diff --git a/client/src/utils/metadataUtils.ts b/client/src/utils/metadataUtils.ts
new file mode 100644
index 0000000..b881d02
--- /dev/null
+++ b/client/src/utils/metadataUtils.ts
@@ -0,0 +1,15 @@
+//temp solution
+export function filterOutLetters(activityDetail: string | undefined): string {
+    if(activityDetail == undefined){
+        return "-";
+    }
+
+    const trimmedInput = activityDetail.trim();
+
+    const letterPressedRegex = /^'[A-Za-z]' has been pressed\..*$/;
+    if (letterPressedRegex.test(trimmedInput)) {
+        return "-";
+    }
+
+    return activityDetail;
+}
\ No newline at end of file

From 2694d29d93d1cd23e9e1221fa3d533bf562e4b20 Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Mon, 11 Mar 2024 16:59:15 +0100
Subject: [PATCH 10/13] add exam list toggle, show ip in search table

---
 client/src/components/views/StartPage.vue     | 51 ++++++++++++-
 .../components/views/search/SearchPage.vue    | 24 +++++-
 .../views/search/SearchSessionTable.vue       | 26 ++++++-
 client/src/models/exam.ts                     |  5 +-
 client/src/store/app.ts                       | 21 ++++--
 client/src/utils/table/CustomTableHeader.vue  | 54 +++++++++++++-
 client/src/utils/table/tableUtils.ts          |  6 ++
 client/src/utils/timeUtils.ts                 | 74 +++++++++----------
 8 files changed, 209 insertions(+), 52 deletions(-)

diff --git a/client/src/components/views/StartPage.vue b/client/src/components/views/StartPage.vue
index 692955e..e2d0a41 100644
--- a/client/src/components/views/StartPage.vue
+++ b/client/src/components/views/StartPage.vue
@@ -12,6 +12,8 @@
 
                 <template v-slot:headers="{ columns, isSorted, getSortIcon, toggleSort }">
                     <CustomTableHeader
+                        @addAddtionalExamHeaders="addAddtionalExamHeaders"
+                        @removeAddtionalExamHeaders="removeAddtionalExamHeaders"
                         :columns="columns"
                         :is-sorted="isSorted"
                         :get-sort-icon="getSortIcon"
@@ -30,6 +32,33 @@
                         </div>
                     </td>
                 </template>
+
+                <template v-slot:item.exam.name="{item}">
+                    <td>
+                        <div v-if="item.exam.name != '' && item.exam.name != null">
+                            <v-chip :color="item.exam.isRunning ? 'green' : 'red'">
+                                {{ item.exam.name }}
+                            </v-chip>
+                        </div>
+                    </td>
+                </template>
+
+                <template v-slot:item.exam.startTime="{item}">
+                    <td>
+                        <div>
+                            {{timeUtils.formatTimestampToFullDate(item.exam.startTime)}}
+                        </div>
+                    </td>
+                </template>
+
+                <template v-slot:item.exam.endTime="{item}">
+                    <td>
+                        <div>
+                            {{timeUtils.formatTimestampToFullDate(item.exam.endTime)}}
+                        </div>
+                    </td>
+                </template>
+
                 <template v-slot:item.creationTime="{item}">
                     <td>
                         <div>
@@ -45,9 +74,9 @@
 </template>
 
 <script setup lang="ts">
-    import { ref, onBeforeMount, onMounted } from "vue";
+    import { ref, onBeforeMount, onUnmounted } from "vue";
     import * as groupService from "@/services/api-services/groupService";
-    import { useAppBarStore } from "@/store/app";
+    import { useAppBarStore, useTableStore } from "@/store/app";
     import * as timeUtils from "@/utils/timeUtils";
     import * as tableUtils from "@/utils/table/tableUtils";
     import CustomTableHeader from "@/utils/table/CustomTableHeader.vue";
@@ -55,6 +84,7 @@
 
     //stores
     const appBarStore = useAppBarStore();
+    const tableStore = useTableStore();
 
     //table
     const groups = ref<Group[]>();
@@ -71,6 +101,10 @@
         groups.value = await groupService.getGroups({pageSize: 500});
     });
 
+    onUnmounted(() => {
+        tableStore.isExamExpand = false;
+    });
+
     function getGalleryViewLink(index: number) {
         if(groups.value != null){
             return "/galleryView/" + groups.value[index].uuid;
@@ -79,6 +113,19 @@
         return "";
     }
 
+    function addAddtionalExamHeaders(){
+        tableStore.isExamExpand = true;
+
+        headers.value.splice(1, 0, {title: "Exam Start-Time", key: "exam.startTime"});
+        headers.value.splice(2, 0, {title: "Exam End-Time", key: "exam.endTime"});
+    }
+
+    function removeAddtionalExamHeaders(){
+        tableStore.isExamExpand = false;
+
+        headers.value.splice(1, 2);
+    }
+
 </script>
 
 <style scoped>
diff --git a/client/src/components/views/search/SearchPage.vue b/client/src/components/views/search/SearchPage.vue
index 42f1593..c337926 100644
--- a/client/src/components/views/search/SearchPage.vue
+++ b/client/src/components/views/search/SearchPage.vue
@@ -64,6 +64,7 @@
                             
                             <v-expansion-panel-text>
                                 <SearchSessionTable 
+                                    :day="session.day"
                                     :sessions="session.sessions" 
                                     :metaData="{
                                         screenProctoringMetadataWindowTitle: metadataSearchWindowTitle!, 
@@ -91,7 +92,7 @@
 
 <script setup lang="ts">
     import { ref, onBeforeMount, watch } from "vue";
-    import { useAppBarStore, useLoadingStore } from "@/store/app";
+    import { useAppBarStore, useLoadingStore, useTableStore } from "@/store/app";
     import * as searchViewService from "@/services/component-services/searchViewService";
     import SearchForm from "./SearchForm.vue";
     import SearchSessionTable from "./SearchSessionTable.vue";
@@ -123,6 +124,7 @@
 
     //store
     const loadingStore = useLoadingStore();
+    const tableStore = useTableStore();
 
 
     onBeforeMount(async () => {
@@ -221,9 +223,29 @@
         }
 
         sessionsGrouped.value = groupingUtils.groupSessionsByDay(sessionSearchResults.value);
+
+        loginNameIpToggleListFillUp();
+
         searchResultAvailable.value = true;
     }
 
+    function loginNameIpToggleListFillUp(){
+        if(sessionsGrouped.value == null){
+            return;
+        }
+
+        for(var i = 0; i < sessionsGrouped.value.content.length; i++){
+            tableStore.isIpDisplayList.push(
+                {
+                    day: sessionsGrouped.value.content[i].day,
+                    isIp: false
+                }
+            );
+        }
+
+        console.log(tableStore.isIpDisplayList)
+    }
+
     function closeAllPanels(){
         sessionPanels.value = [];
     }
diff --git a/client/src/components/views/search/SearchSessionTable.vue b/client/src/components/views/search/SearchSessionTable.vue
index c6a32ff..7cc9f13 100644
--- a/client/src/components/views/search/SearchSessionTable.vue
+++ b/client/src/components/views/search/SearchSessionTable.vue
@@ -15,7 +15,8 @@
                 :is-sorted="isSorted"
                 :get-sort-icon="getSortIcon"
                 :toggle-sort="toggleSort"
-                :header-refs-prop="sessionTableHeadersRef">
+                :header-refs-prop="sessionTableHeadersRef"
+                :day="props.day">
             </CustomTableHeader>
         </template>
 
@@ -27,6 +28,19 @@
             </td>
         </template>
 
+        <template v-slot:item.clientName="{item, index}">
+            <td>
+                <div>
+                    <template v-if="!tableStore.isIpDisplayList[tableUtils.getSessionListIndex(props.day)].isIp">
+                        {{ item.clientName }}
+                    </template>
+                    <template v-else>
+                        {{ item.clientIp }}
+                    </template>
+                </div>
+            </td>
+        </template>
+
         <template v-slot:item.proctoringViewLink="{item}">
             <v-btn @click="searchViewService.openProctoringView(item.sessionUUID)" variant="text" icon="mdi-video"></v-btn>
         </template>
@@ -56,15 +70,20 @@
 
 
 <script setup lang="ts">
-    import { ref } from "vue";
+    import { ref, onBeforeMount } from "vue";
     import * as timeUtils from "@/utils/timeUtils";
     import * as tableUtils from "@/utils/table/tableUtils"
     import SearchScreenshotsTable from "./SearchScreenshotsTable.vue";
     import * as searchViewService from "@/services/component-services/searchViewService";
     import CustomTableHeader from "@/utils/table/CustomTableHeader.vue";
+    import { useTableStore } from "@/store/app";
+
+    //store
+    const tableStore = useTableStore();
 
     //props
     const props = defineProps<{
+        day: string;
         sessions: Session[],
         metaData: MetaData
     }>();
@@ -76,7 +95,7 @@
     const sessionTableHeadersRef = ref<any[]>();
     const sessionTableHeaders = ref([
         {title: "Start-Time", key: "startTime", width: "10%"},
-        {title: "Login Name", key: "clientName", width: "30%"},
+        {title: "Login Name / IP", key: "clientName", width: "30%"},
         {title: "Machine Name", key: "clientMachineName", width: "20%"},
         {title: "Group Name", key: "groupName", width: "20%"},
         {title: "Exam Name", key: "exam.name", width: "20%"},
@@ -120,7 +139,6 @@
         }
 
         return false;
-
     }
 
 
diff --git a/client/src/models/exam.ts b/client/src/models/exam.ts
index bbc520b..b54f9d6 100644
--- a/client/src/models/exam.ts
+++ b/client/src/models/exam.ts
@@ -1,4 +1,7 @@
 type ExamView = {
     uuid: string,
-    name: string
+    name: string,
+    isRunning: boolean,
+    startTime: number,
+    endTime: number
 }
\ No newline at end of file
diff --git a/client/src/store/app.ts b/client/src/store/app.ts
index 527b4dc..cf656a0 100644
--- a/client/src/store/app.ts
+++ b/client/src/store/app.ts
@@ -6,6 +6,7 @@ import * as authenticationService from "@/services/api-services/authenticationSe
 import * as settingsService from "@/services/api-services/settingsService";
 
 
+//-------------------settings------------------------------//
 export const useSettingsStore = defineStore("settings", () => {
   const isSebServerIntegratedMode = ref<boolean>(false);
 
@@ -28,7 +29,7 @@ export const useSettingsStore = defineStore("settings", () => {
   return {isSebServerIntegratedMode, setIsSebServerIntegratedMode};
 });
 
-//-------------------------------------------------//
+//--------------------app bar-----------------------------//
 export const useAppBarStore = defineStore("appBar", () => {
   const title = ref<string>("Example Title");
 
@@ -49,7 +50,7 @@ export const useAppBarStore = defineStore("appBar", () => {
 //-------------------------------------------------//
 
 
-//-------------------------------------------------//
+//----------------------loading---------------------------//
 export const useLoadingStore = defineStore("loading", () => {
   const skipLoading = ref<boolean>(false);
   const isLoading = ref<boolean>(false);
@@ -59,7 +60,7 @@ export const useLoadingStore = defineStore("loading", () => {
 //-------------------------------------------------//
 
 
-//-------------------------------------------------//
+//----------------------authentication---------------------------//
 export const useAuthStore = defineStore("auth", () => {
   const redirectRoute: string = "";
 
@@ -120,7 +121,7 @@ export const useAuthStore = defineStore("auth", () => {
 //-------------------------------------------------//
 
 
-//-------------------------------------------------//
+//---------------------account----------------------------//
 export const useUserAccountStore = defineStore("account", () => {
   const userAccount = ref<UserAccount | null>();
   const isEditMode = ref<boolean>();
@@ -129,4 +130,14 @@ export const useUserAccountStore = defineStore("account", () => {
 
   return {userAccount, isEditMode, isAccountSelected, selectedAccountId};
 });
-//-------------------------------------------------//
\ No newline at end of file
+//-------------------------------------------------//
+
+//---------------------start page----------------------------//
+export const useTableStore = defineStore("table", () => {
+    const isExamExpand = ref<boolean>(false);
+    // const isIpDisplay = ref<boolean>(false);
+    const isIpDisplayList = ref<{day: string, isIp: boolean}[]>([]);
+  
+    return {isExamExpand, isIpDisplayList};
+  });
+  //-------------------------------------------------//
\ No newline at end of file
diff --git a/client/src/utils/table/CustomTableHeader.vue b/client/src/utils/table/CustomTableHeader.vue
index 5e01812..1872ddb 100644
--- a/client/src/utils/table/CustomTableHeader.vue
+++ b/client/src/utils/table/CustomTableHeader.vue
@@ -12,9 +12,32 @@
                 >
                     {{ column.title }}
                 </span>
+
                 <template v-if="props.isSorted(column)">
                     <v-icon :icon="props.getSortIcon(column)"></v-icon>
                 </template>
+
+                <!--todo: checking should not be done via title-->
+                <template v-if="column.title == 'Exam'">
+                    <v-btn 
+                        :icon="tableStore.isExamExpand ? 'mdi-arrow-expand-left' : 'mdi-arrow-expand-right'" 
+                        rounded="sm" 
+                        variant="flat" 
+                        size="small"
+                        @click="tableStore.isExamExpand ? emit('removeAddtionalExamHeaders') : emit('addAddtionalExamHeaders')"
+                        >
+                    </v-btn>
+                </template>
+
+                <template v-if="column.title == 'Login Name / IP'">
+                    <v-btn 
+                        :icon="tableStore.isIpDisplayList[tableUtils.getSessionListIndex(props.day!)].isIp ? 'mdi-toggle-switch-outline' : 'mdi-toggle-switch-off-outline'" 
+                        rounded="sm" 
+                        variant="flat" 
+                        @click="toggleNameIpSwitch()"
+                        >
+                    </v-btn>
+                </template>
             </td>
         </template>
     </tr>
@@ -23,10 +46,11 @@
 <script setup lang="ts">
     import { ref, onBeforeMount, onMounted } from "vue";
     import * as tableUtils from "@/utils/table/tableUtils";
-    import { useAppBarStore } from "@/store/app";
+    import { useAppBarStore, useTableStore } from "@/store/app";
 
     //stores
     const appBarStore = useAppBarStore();
+    const tableStore = useTableStore();
 
     //header reactivity
     const headerRefs = ref<any[]>();
@@ -37,7 +61,14 @@
         isSorted: (column: any) => boolean;
         getSortIcon: any
         toggleSort: (column: any) => void;
-        headerRefsProp: any
+        headerRefsProp: any;
+        day?: string;
+    }>();
+
+    //custom: start page
+    const emit = defineEmits<{
+        addAddtionalExamHeaders: any;
+        removeAddtionalExamHeaders: any;
     }>();
 
 
@@ -47,11 +78,30 @@
 
     onMounted(() => {
         //if page = start page --> sort by start-time desc
+        //todo: checking should not be done via title
         if(appBarStore.title == "Active SEB Groups"){
             tableUtils.sortTable(3, headerRefs);
             tableUtils.sortTable(3, headerRefs);
         }
     });
 
+    function toggleNameIpSwitch(){
+        const index: number = tableUtils.getSessionListIndex(props.day!);
+        console.log(index);
+        console.log(props.day)
+
+        if(tableStore.isIpDisplayList[index].isIp){
+            tableStore.isIpDisplayList[index].isIp = false;
+            return;
+        }
+
+        tableStore.isIpDisplayList[index].isIp = true;
+
+        // tableStore.isIpDisplayList[getSessionListIndex()] ? tableStore.isIpDisplayList[getSessionListIndex()].isIp=false : tableStore.isIpDisplayList[getSessionListIndex()].isIp=true
+    }
 
 </script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/client/src/utils/table/tableUtils.ts b/client/src/utils/table/tableUtils.ts
index dde785d..c08c211 100644
--- a/client/src/utils/table/tableUtils.ts
+++ b/client/src/utils/table/tableUtils.ts
@@ -1,4 +1,5 @@
 import {navigateTo} from "@/router/navigation";
+import {useTableStore} from "@/store/app";
 
 export function calcDefaultItemsPerPage(itemList: any): number {
     if (itemList == null || itemList.length == 0) {
@@ -71,4 +72,9 @@ export function sortTable(key: number, headerRefs: any){
     if(headerRefs != null){
         headerRefs[key].click();
     }
+}
+
+export function getSessionListIndex(day: string): number{
+    const tableStore = useTableStore();
+    return tableStore.isIpDisplayList.findIndex(i => i.day == day);
 }
\ No newline at end of file
diff --git a/client/src/utils/timeUtils.ts b/client/src/utils/timeUtils.ts
index bc273bc..23addbc 100644
--- a/client/src/utils/timeUtils.ts
+++ b/client/src/utils/timeUtils.ts
@@ -1,66 +1,66 @@
 export function formatTimestampToFullDate(timestamp: string | any): string{
-  if(timestamp == "0"){
-    return "";
-  }
+    if(timestamp == "0" || timestamp == null){
+        return "";
+    }
 
-  const date = new Date(timestamp);
+    const date = new Date(timestamp);
 
-  const day = ("0" + date.getDate()).slice(-2);
-  const month = ("0" + (date.getMonth() + 1)).slice(-2);
-  const year = date.getFullYear();
+    const day = ("0" + date.getDate()).slice(-2);
+    const month = ("0" + (date.getMonth() + 1)).slice(-2);
+    const year = date.getFullYear();
 
-  const hours = ("0" + date.getHours()).slice(-2);
-  const minutes = ("0" + date.getMinutes()).slice(-2);
-  const seconds = ("0" + date.getSeconds()).slice(-2);
+    const hours = ("0" + date.getHours()).slice(-2);
+    const minutes = ("0" + date.getMinutes()).slice(-2);
+    const seconds = ("0" + date.getSeconds()).slice(-2);
 
-  return day + "." + month + "." + year + " " + hours + ":" + minutes + ":" + seconds; 
+    return day + "." + month + "." + year + " " + hours + ":" + minutes + ":" + seconds; 
 }
 
 export function formatTimestmapToDate(timestamp: number): string{
-  if(timestamp == 0){
-    return "";
-  }
+    if(timestamp == 0){
+        return "";
+    }
 
-  const date = new Date(timestamp);
+    const date = new Date(timestamp);
 
-  const day = ("0" + date.getDate()).slice(-2);
-  const month = ("0" + (date.getMonth() + 1)).slice(-2);
-  const year = date.getFullYear();
+    const day = ("0" + date.getDate()).slice(-2);
+    const month = ("0" + (date.getMonth() + 1)).slice(-2);
+    const year = date.getFullYear();
 
-  return day + "." + month + "." + year; 
+    return day + "." + month + "." + year; 
 }
 
 export function formatTimestmapToTime(timestamp: number): string{
-  if(timestamp == 0){
-    return "";
-  }
+    if(timestamp == 0){
+        return "";
+    }
 
-  const date = new Date(timestamp);
+    const date = new Date(timestamp);
 
-  const hours = ("0" + date.getHours()).slice(-2);
-  const minutes = ("0" + date.getMinutes()).slice(-2);
-  const seconds = ("0" + date.getSeconds()).slice(-2);
+    const hours = ("0" + date.getHours()).slice(-2);
+    const minutes = ("0" + date.getMinutes()).slice(-2);
+    const seconds = ("0" + date.getSeconds()).slice(-2);
 
-  return hours + ":" + minutes + ":" + seconds; 
+    return hours + ":" + minutes + ":" + seconds; 
 }
 
 export function toTimeString(milliseconds: number): string {
-  let totalSeconds: number = Math.floor(milliseconds / 1000);
+    let totalSeconds: number = Math.floor(milliseconds / 1000);
 
-  const hours: number = Math.floor(totalSeconds / 3600);
-  totalSeconds %= 3600;
-  const minutes: number = Math.floor(totalSeconds / 60);
-  const seconds: number = totalSeconds % 60;
+    const hours: number = Math.floor(totalSeconds / 3600);
+    totalSeconds %= 3600;
+    const minutes: number = Math.floor(totalSeconds / 60);
+    const seconds: number = totalSeconds % 60;
 
-  const hoursString: string = hours.toString().padStart(2, '0');
-  const minutesString: string = minutes.toString().padStart(2, '0');
-  const secondsString: string = seconds.toString().padStart(2, '0');
+    const hoursString: string = hours.toString().padStart(2, '0');
+    const minutesString: string = minutes.toString().padStart(2, '0');
+    const secondsString: string = seconds.toString().padStart(2, '0');
 
-  return hoursString + ":" + minutesString + ":" + secondsString;
+    return hoursString + ":" + minutesString + ":" + secondsString;
 }
 
 export function toSeconds(milliseconds: number): number {
-  return Math.floor(milliseconds / 1000);
+    return Math.floor(milliseconds / 1000);
 }
 
 export function secondsToTimeString(seconds: number): string{

From bed81989d8144b4ba60b51c8e8aea764706f7587 Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Mon, 11 Mar 2024 17:26:55 +0100
Subject: [PATCH 11/13] add client ip to search

---
 .../components/views/search/SearchForm.vue    | 24 ++++++++++++++++---
 .../components/views/search/SearchPage.vue    |  7 +++---
 client/src/models/optionalParamters.ts        |  2 ++
 client/src/store/app.ts                       |  1 -
 client/src/utils/table/CustomTableHeader.vue  | 10 +-------
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/client/src/components/views/search/SearchForm.vue b/client/src/components/views/search/SearchForm.vue
index faf05c0..651ff6b 100644
--- a/client/src/components/views/search/SearchForm.vue
+++ b/client/src/components/views/search/SearchForm.vue
@@ -64,6 +64,23 @@
                                 </v-row>
                                 <!----------------------------------->
 
+                                <!------------IP-Address------------->
+                                <v-row align="center">
+                                    <v-col cols="4">
+                                        IP-Address:
+                                    </v-col>
+                                    <v-col cols="8">
+                                        <v-text-field
+                                            single-line
+                                            hide-details
+                                            density="compact"
+                                            variant="outlined"
+                                            v-model="ipAddressField">
+                                        </v-text-field>
+                                    </v-col>
+                                </v-row>
+                                <!----------------------------------->
+
                                 <!------------Machine Name------------->
                                 <v-row align="center">
                                     <v-col cols="4">
@@ -250,6 +267,7 @@
             examName: string,
             groupName: string, 
             loginName: string,
+            ipAddress: string,
             machineName: string,
             metadataUrl: string,
             metadataWindowTitle: string,
@@ -261,11 +279,11 @@
     }>();
 
     //form fields
-    // const groupNameField = ref<string>("new-test-group");
     const groupNameField = ref<string>("");
     const examNameField = ref<string>("");
 
     const loginNameField = ref<string>("");
+    const ipAddressField = ref<string>("");
     const machineNameField = ref<string>("");
 
     const metadataUrlField = ref<string>("");
@@ -285,12 +303,10 @@
     const timeSelectionRadio = ref<boolean>(true);
     const timeSelectionPicker = ref(null);
 
-
     onBeforeMount(async () => {
         searchSessions();
     });
 
-
     async function searchSessions(){
         let fromTime: string = "";
         let toTime: string = "";
@@ -302,6 +318,7 @@
             examNameField.value,
             groupNameField.value, 
             loginNameField.value, 
+            ipAddressField.value,
             machineNameField.value, 
             metadataUrlField.value, 
             metadataWindowTitleField.value, 
@@ -316,6 +333,7 @@
         examNameField.value = "";
         groupNameField.value = ""; 
         loginNameField.value = "";
+        ipAddressField.value = "";
         machineNameField.value = ""; 
         metadataUrlField.value = ""; 
         metadataWindowTitleField.value = "";
diff --git a/client/src/components/views/search/SearchPage.vue b/client/src/components/views/search/SearchPage.vue
index c337926..9ca9b2d 100644
--- a/client/src/components/views/search/SearchPage.vue
+++ b/client/src/components/views/search/SearchPage.vue
@@ -120,6 +120,7 @@
     let metadataSearchWindowTitle: string | null;
     let metadataSearchAction: string | null;
     let loginNameSearch: string | null;
+    let ipAddressSearch: string | null;
     let machineNameSearch: string | null;
 
     //store
@@ -152,6 +153,7 @@
         examName: string,
         groupName: string, 
         loginName: string, 
+        ipAddress: string,
         machineName: string, 
         metadataUrl: string, 
         metadataWindowTitle: string, 
@@ -167,16 +169,17 @@
         examNameSearch = examName == "" ? null : examName;
         groupNameSearch = groupName == "" ? null : groupName;
         metadataSearchUrl = metadataUrl == "" ? null : metadataUrl;
-        metadataSearchUrl = metadataUrl == "" ? null : metadataUrl;
         metadataSearchWindowTitle = metadataWindowTitle == "" ? null : metadataWindowTitle;
         metadataSearchAction = metadataUserAction == "" ? null : metadataUserAction;
         loginNameSearch = loginName == "" ? null : loginName;
+        ipAddressSearch = ipAddress == "" ? null : ipAddress;
         machineNameSearch = machineName == "" ? null : machineName;
 
         searchParameters.value = {   
             examName: examNameSearch,
             groupName: groupNameSearch,
             clientName: loginNameSearch,
+            clientIp: ipAddressSearch,
             clientMachineName: machineNameSearch,
             screenProctoringMetadataURL: metadataSearchUrl,
             screenProctoringMetadataWindowTitle: metadataSearchWindowTitle,
@@ -242,8 +245,6 @@
                 }
             );
         }
-
-        console.log(tableStore.isIpDisplayList)
     }
 
     function closeAllPanels(){
diff --git a/client/src/models/optionalParamters.ts b/client/src/models/optionalParamters.ts
index f593ff0..d0d735c 100644
--- a/client/src/models/optionalParamters.ts
+++ b/client/src/models/optionalParamters.ts
@@ -21,6 +21,7 @@ type OptionalParSearchSessions = {
     fromTime?: string,
     toTime?: string,
     clientName?: string | null,
+    clientIp?: string | null,
     clientMachineName?: string | null,
     clientOsName?: string,
     clientVersion?: string,
@@ -39,6 +40,7 @@ type OptionalParSearchScreenshots = {
     fromTime?: string,
     toTime?: string,
     clientName?: string,
+    clientIP?: string | null,
     clientMachineName?: string,
     clientOsName?: string,
     clientVersion?: string,
diff --git a/client/src/store/app.ts b/client/src/store/app.ts
index cf656a0..4f1576b 100644
--- a/client/src/store/app.ts
+++ b/client/src/store/app.ts
@@ -135,7 +135,6 @@ export const useUserAccountStore = defineStore("account", () => {
 //---------------------start page----------------------------//
 export const useTableStore = defineStore("table", () => {
     const isExamExpand = ref<boolean>(false);
-    // const isIpDisplay = ref<boolean>(false);
     const isIpDisplayList = ref<{day: string, isIp: boolean}[]>([]);
   
     return {isExamExpand, isIpDisplayList};
diff --git a/client/src/utils/table/CustomTableHeader.vue b/client/src/utils/table/CustomTableHeader.vue
index 1872ddb..36a7673 100644
--- a/client/src/utils/table/CustomTableHeader.vue
+++ b/client/src/utils/table/CustomTableHeader.vue
@@ -87,8 +87,6 @@
 
     function toggleNameIpSwitch(){
         const index: number = tableUtils.getSessionListIndex(props.day!);
-        console.log(index);
-        console.log(props.day)
 
         if(tableStore.isIpDisplayList[index].isIp){
             tableStore.isIpDisplayList[index].isIp = false;
@@ -96,12 +94,6 @@
         }
 
         tableStore.isIpDisplayList[index].isIp = true;
-
-        // tableStore.isIpDisplayList[getSessionListIndex()] ? tableStore.isIpDisplayList[getSessionListIndex()].isIp=false : tableStore.isIpDisplayList[getSessionListIndex()].isIp=true
     }
 
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file

From 7e5353d1067fb02713f1af940fc1743a1dffc763 Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Tue, 12 Mar 2024 10:32:04 +0100
Subject: [PATCH 12/13] SEBSP-82 minor code corrections

---
 client/src/components/views/LoginPage.vue     |  3 +
 client/src/components/views/StartPage.vue     |  5 +-
 .../src/services/api-services/apiService.ts   | 66 +++++++++++--------
 3 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/client/src/components/views/LoginPage.vue b/client/src/components/views/LoginPage.vue
index 72dc518..c19c2bc 100644
--- a/client/src/components/views/LoginPage.vue
+++ b/client/src/components/views/LoginPage.vue
@@ -107,6 +107,7 @@
 
     async function signIn(){
 
+        loadingStore.isLoading = true;
         loginError.value = false;
 
         try{
@@ -117,6 +118,8 @@
             loginError.value = true;
         }
 
+        loadingStore.isLoading = false;
+
     }
 
     //todo: extract this function into a global file
diff --git a/client/src/components/views/StartPage.vue b/client/src/components/views/StartPage.vue
index dc9c6a7..7e0d120 100644
--- a/client/src/components/views/StartPage.vue
+++ b/client/src/components/views/StartPage.vue
@@ -45,9 +45,9 @@
 </template>
 
 <script setup lang="ts">
-    import { ref, onBeforeMount, onMounted } from "vue";
+    import { ref, onBeforeMount } from "vue";
     import * as groupService from "@/services/api-services/groupService";
-    import { useAppBarStore, useLoadingStore } from "@/store/app";
+    import { useAppBarStore } from "@/store/app";
     import * as timeUtils from "@/utils/timeUtils";
     import * as tableUtils from "@/utils/table/tableUtils";
     import CustomTableHeader from "@/utils/table/CustomTableHeader.vue";
@@ -55,7 +55,6 @@
 
     //stores
     const appBarStore = useAppBarStore();
-    const loadingStore = useLoadingStore();
 
     //table
     const groups = ref<Group[]>();
diff --git a/client/src/services/api-services/apiService.ts b/client/src/services/api-services/apiService.ts
index 2689d41..150a30a 100644
--- a/client/src/services/api-services/apiService.ts
+++ b/client/src/services/api-services/apiService.ts
@@ -16,47 +16,42 @@ export function createApi(){
 }
 
 export function createApiInterceptor(){
+    const ignoredUrls: string[] = getIgnoredUrls();
+
     const authStore = useAuthStore();
     const loadingStore = useLoadingStore();
+
     let loadingTimeout: NodeJS.Timeout | null = null;
     let loadingEndTimeout: NodeJS.Timeout | null = null;
 
-    api.interceptors.request.use(
-        async (config) => {
-            if(!loadingStore.skipLoading){
-                loadingTimeout = setTimeout(() => {
-                    loadingStore.isLoading = true;
-                }, 200);
-                loadingEndTimeout = setTimeout(() => {
-                    console.log("No response in 10 seconds. Most probably something went wrong.");
-                    loadingStore.isLoading = false;
-                }, 10000);
-            }
+    api.interceptors.request.use(async (config) => {
+        //additional skip when url is used nmultiple times in differnet locations such as /group
+        if(!loadingStore.skipLoading){
+            loadingTimeout = setTimeout(() => {
+                loadingStore.isLoading = true;
+            }, 500);
 
-            const ignoredRoutes: string[] = ["/screenshot", "/search/timeline", "/useraccount/me"];
-            if(config.url && ignoredRoutes.includes(config.url)){
-                if (loadingTimeout) clearTimeout(loadingTimeout); 
-                return config;
-            }
+            loadingEndTimeout = setTimeout(() => {
+                loadingStore.isLoading = false;
+            }, 10000);
+        }
 
+        const isIgnoredUrl: boolean = ignoredUrls.some(url => config.url?.includes(url));
+        if(isIgnoredUrl){
+            if (loadingTimeout) clearTimeout(loadingTimeout); 
             return config;
         }
-    )
 
+        return config;
+    });
 
-    api.interceptors.response.use(async response => {
-        if (loadingTimeout) clearTimeout(loadingTimeout); 
-        if (loadingEndTimeout) clearTimeout(loadingEndTimeout); 
-        loadingStore.isLoading = false;
-        loadingStore.skipLoading = false;
 
+    api.interceptors.response.use(async response => {
+        resetLoadingState();
         return response;
 
     }, async error => {
-        if (loadingTimeout) clearTimeout(loadingTimeout); 
-        loadingStore.isLoading = false;
-        loadingStore.skipLoading = false;
-
+        resetLoadingState();
 
         const originalRequest = error.config;
 
@@ -82,6 +77,15 @@ export function createApiInterceptor(){
             
         }
     });
+
+
+    function resetLoadingState(){
+        if (loadingTimeout) clearTimeout(loadingTimeout); 
+        if (loadingEndTimeout) clearTimeout(loadingEndTimeout); 
+
+        loadingStore.isLoading = false;
+        loadingStore.skipLoading = false;
+    }
 }
 
 export function getHeaders(): object{
@@ -102,4 +106,14 @@ export function getPostHeaders(): object{
       "Authorization": "Bearer " + authStore.getAccessToken(),
       "Content-Type": "application/json"
     };
+}
+
+function getIgnoredUrls(): string[]{
+    return [
+        "/screenshot/", 
+        "/screenshot-data/", 
+        "/screenshot-timestamps/", 
+        "/search/timeline", 
+        "/useraccount/me"
+    ];
 }
\ No newline at end of file

From cf1dbfc398145d20540b8bdb8568accfaedb3bb4 Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Tue, 12 Mar 2024 10:45:10 +0100
Subject: [PATCH 13/13] SEBSP-105 code cleanup

---
 .../views/proctoring/ProctoringViewPage.vue       | 15 +--------------
 .../component-services/galleryViewService.ts      |  4 ----
 2 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/client/src/components/views/proctoring/ProctoringViewPage.vue b/client/src/components/views/proctoring/ProctoringViewPage.vue
index 969c5d4..6ec5ba0 100644
--- a/client/src/components/views/proctoring/ProctoringViewPage.vue
+++ b/client/src/components/views/proctoring/ProctoringViewPage.vue
@@ -45,6 +45,7 @@
                         </v-btn>
                     </template>
                     <!-------------------------->
+                    
                     <!-----------time---------->
                     <template v-slot:append>
                         <v-menu>
@@ -95,10 +96,6 @@
         <!-------------------------->
 
         <!-----------info box---------->
-        <!-- <v-col cols="3" v-if="isMetadataInfo">
-            placeholder
-        </v-col> -->
-
         <v-col cols="4" v-if="isMetadataInfo">
             <v-card
                 class="mx-auto">
@@ -279,11 +276,6 @@
                 await setTimestampsList(SortOrder.asc);
             }
 
-            console.log("=====================")
-            console.log("sliderTime.value")
-            console.log(sliderTime.value)
-            console.log("=====================")
-
             assignScreenshotDataByTimestamp(sliderTime.value.toString());
         }
     });
@@ -307,11 +299,6 @@
         if(currentScreenshot.value) {
             liveSessionTime.value = timeUtils.toTimeString(currentScreenshot.value?.endTime - currentScreenshot.value?.startTime);
             isLive.value = currentScreenshot.value.active;
-
-            // if(!isLive.value) {
-            //     console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&")
-            //     pause();
-            // }
         }
     });
 
diff --git a/client/src/services/component-services/galleryViewService.ts b/client/src/services/component-services/galleryViewService.ts
index 08d9c3b..8c5d644 100644
--- a/client/src/services/component-services/galleryViewService.ts
+++ b/client/src/services/component-services/galleryViewService.ts
@@ -2,7 +2,6 @@ import * as groupService from "@/services/api-services/groupService";
 import * as screenshotDataService from "@/services/api-services/screenshotDataService";
 import { SortOrder } from "@/models/sortOrderEnum";
 import {navigateTo} from "@/router/navigation";
-import { useAuthStore } from "@/store/app";
 import * as metadataUtils from "@/utils/metadataUtils";
 
 //=============api==============
@@ -41,8 +40,6 @@ export function filterLiveSessions(screenshotData: ScreenshotData[]): Screenshot
         return screenshot.active;
     }); 
 
-    console.log(screenshotDataOnlyLive);
-
     return screenshotDataOnlyLive;
 }
 
@@ -52,7 +49,6 @@ export function calcIndex(i: number, n: number, gridSize: number): number {
 }
 
 export function currentIndexExists(screenshots: ScreenshotData[] | undefined, index: number): boolean {
-
     if (screenshots != null && screenshots.length > index) {
         return true;
     }