Merge branch 'main' of github.com:SafeExamBrowser/seb-screen-proctori…

…ng-gui into language-toggle

.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

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>
 

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>

client/src/components/views/LoginPage.vue

@@ -106,6 +106,7 @@
 
     async function signIn(){
 
+        loadingStore.isLoading = true;
         loginError.value = false;
 
         try{
@@ -116,6 +117,8 @@
             loginError.value = true;
         }
 
+        loadingStore.isLoading = false;
+
     }
 
     //todo: extract this function into a global file

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,16 +74,17 @@
 </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";
 
 
     //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>

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>

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',
                 }">

client/src/components/views/proctoring/ProctoringViewPage.vue

@@ -45,7 +45,7 @@
                         </v-btn>
                     </template>
                     <!-------------------------->
-
+                    
                     <!-----------time---------->
                     <template v-slot:append>
                         <v-menu>
@@ -96,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">
@@ -277,8 +273,10 @@
             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);
             }
+
+            assignScreenshotDataByTimestamp(sliderTime.value.toString());
         }
     });
 
@@ -301,8 +299,6 @@
         if(currentScreenshot.value) {
             liveSessionTime.value = timeUtils.toTimeString(currentScreenshot.value?.endTime - currentScreenshot.value?.startTime);
             isLive.value = currentScreenshot.value.active;
-
-            if(!isLive.value) pause();
         }
     });
 
@@ -479,17 +475,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 +570,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);
         }
 

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 = "";