Merge pull request #20 from SafeExamBrowser/proctoring-view-improvmeents

Proctoring view improvmeents

client/src/components/views/gallery/GalleryImage.vue

@@ -95,7 +95,7 @@
 
     //props
     const props = defineProps<{
-        screenshot: Screenshot | undefined,
+        screenshot: ScreenshotData | undefined,
         timestamp: number,
         groupUuid: string
     }>();

client/src/components/views/gallery/GalleryViewPage.vue

@@ -157,7 +157,7 @@
 
             if(appBarStore.galleryIsMetadataEnabled && group?.value?.screenshots != null){
                 for(let i = 0; i < group.value?.screenshots.length; i++){
-                    const screenshot: Screenshot | null = await galleryViewService.getLatestScreenshotData(group.value.screenshots[i].uuid, timestamp.value);
+                    const screenshot: ScreenshotData | null = await galleryViewService.getLatestScreenshotData(group.value.screenshots[i].uuid, timestamp.value);
                     const metaData: MetaData | undefined = screenshot?.metaData;
                     group.value.screenshots[i].metaData = metaData == null ? {} : metaData;
                 }

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

@@ -60,7 +60,7 @@
                     </v-row>
                 </v-card-text>
 
-                <v-card-title>Screenshot Metadata</v-card-title>
+                <v-card-title>ScreenshotData Metadata</v-card-title>
                 <v-card-text>
                     <v-row v-for="(value, key) in screenshotMetadata" :key="key">
                         <v-col>
@@ -107,8 +107,8 @@
 
     //reactive variables
     const isPlaying = ref<boolean>(false);
-    const session = ref<Screenshot>();
-    const currentScreenshot = ref<Screenshot>();
+    const session = ref<ScreenshotData>();
+    const currentScreenshot = ref<ScreenshotData>();
     const sliderTime = ref<number>();
     const firstScreenshotTime = ref<number>();
     const lastScreenshotTime = ref<number>();
@@ -160,7 +160,7 @@
     })
 
     async function getAndAssignSession(){
-        const sessionResponse: Screenshot | null = await proctoringViewService.getSessionBySessionId(sessionId);
+        const sessionResponse: ScreenshotData | null = await proctoringViewService.getScreenshotDataBySessionId(sessionId);
 
         if(sessionResponse == null){
             showError.value = true;
@@ -182,9 +182,9 @@
 
     //=============screenshot logic==================
     async function getFirstScreenshotTime(){
-        let specificSessionResponse: Screenshot | null = null;
+        let specificSessionResponse: ScreenshotData | null = null;
         if(session.value != null){
-            specificSessionResponse = await proctoringViewService.getSessionByTimestamp(sessionId, session.value?.startTime.toString());
+            specificSessionResponse = await proctoringViewService.getScreenshotDataByTimestamp(sessionId, session.value?.startTime.toString());
         }
 
         //error does not have to be shown here - if the slider moves too fast, some screenshots cannot be shown
@@ -195,7 +195,7 @@
     }
 
     async function getCurrentScreenshot(timestamp: string){
-        const specificSessionResponse: Screenshot | null = await proctoringViewService.getSessionByTimestamp(sessionId, timestamp);
+        const specificSessionResponse: ScreenshotData | null = await proctoringViewService.getScreenshotDataByTimestamp(sessionId, timestamp);
 
         //error does not have to be shown here - if the slider moves too fast, some screenshots cannot be shown
         if(specificSessionResponse == null) return;

client/src/models/session.ts

@@ -1,6 +1,6 @@
 //todo: change name
 
-type Screenshot = {
+type ScreenshotData = {
     startTime: number;
     timestamp: number;
     endTime: number;

client/src/router/index.ts

@@ -5,7 +5,7 @@ import RegisterPage from "@/components/views/RegisterPage.vue"
 import StartPage from "@/components/views/StartPage.vue"
 import SearchPage from "@/components/views/search/SearchPage.vue"
 import GalleryViewPage from "@/components/views/gallery/GalleryViewPage.vue"
-import ProctoringViewPage from "@/components/views/ProctoringViewPage.vue"
+import ProctoringViewPage from "@/components/views/proctoring/ProctoringViewPage.vue"
 import UserAccountPage from "@/components/views/user-account/UserAccountPage.vue"
 import UserInfo from "@/components/views/user-account/UserInfo.vue"
 import * as authenticationService from "@/services/api-services/authenticationService";

client/src/services/api-services/sessionService.ts → client/src/services/api-services/screenshotDataService.ts

@@ -1,10 +1,10 @@
 import axios, { AxiosResponse } from 'axios'
 import * as apiService from "@/services/api-services/apiService";
 
-export async function getSessionBySessionId(sessionId: string): Promise<Screenshot | any> {
+export async function getScreenshotDataBySessionId(sessionId: string): Promise<ScreenshotData | any> {
 
   try {
-    const url: string = "/session/" + sessionId;
+    const url: string = "/screenshot-data/" + sessionId;
     const {data, status}: AxiosResponse = await apiService.api.get(url, {headers: apiService.getHeaders()});
 
     if (status === 200) {
@@ -17,10 +17,10 @@ export async function getSessionBySessionId(sessionId: string): Promise<Screensh
   }
 }
 
-export async function getSessionByTimestamp(sessionId: string, timestamp: string): Promise<Screenshot | any> {
+export async function getScreenshotDataByTimestamp(sessionId: string, timestamp: string): Promise<ScreenshotData | any> {
 
   try {
-    const url: string = "/session/" + sessionId + "/" + timestamp;
+    const url: string = "/screenshot-data/" + sessionId + "/" + timestamp;
     const {data, status}: AxiosResponse = await apiService.api.get(url, {headers: apiService.getHeaders()});
 
     if (status === 200) {

client/src/services/component-services/galleryViewService.ts

@@ -1,5 +1,5 @@
 import * as groupService from "@/services/api-services/groupService";
-import * as sessionService from "@/services/api-services/sessionService";
+import * as screenshotDataService from "@/services/api-services/screenshotDataService";
 import { SortOrder } from "@/models/sortOrderEnum";
 import {navigateTo} from "@/router/navigation";
 import { useAuthStore } from "@/store/app";
@@ -23,9 +23,9 @@ export async function getGroup(groupUuid: string, currentWindow: number, pageSiz
     }
 }
 
-export async function getLatestScreenshotData(sessionUuid: string, timestamp: number): Promise<Screenshot | null>{
+export async function getLatestScreenshotData(sessionUuid: string, timestamp: number): Promise<ScreenshotData | null>{
     try{
-        return await sessionService.getSessionByTimestamp(sessionUuid, timestamp.toString());        
+        return await screenshotDataService.getScreenshotDataByTimestamp(sessionUuid, timestamp.toString());        
     }catch(error){
         console.error(error);
         return null;
@@ -39,7 +39,7 @@ export function calcIndex(i: number, n: number, gridSize: number): number {
     return ((i - 1) * gridSize + (n - 1));
 }
 
-export function currentIndexExists(screenshots: Screenshot[] | undefined, index: number): boolean {
+export function currentIndexExists(screenshots: ScreenshotData[] | undefined, index: number): boolean {
 
     if (screenshots != null && screenshots.length > index) {
         return true;
@@ -67,7 +67,7 @@ export function currentIndexExists(screenshots: Screenshot[] | undefined, index:
 //     return screenshotLink;
 // }
 
-export function createImageLinkWithToken(screenshot: Screenshot | undefined, timestamp: number): string {
+export function createImageLinkWithToken(screenshot: ScreenshotData | undefined, timestamp: number): string {
     const authStore = useAuthStore();
 
     if(screenshot == null){
@@ -90,7 +90,7 @@ export function createImageLinkWithToken(screenshot: Screenshot | undefined, tim
 //     }
 // }
 
-export function navigateToProctoringView(screenshot: Screenshot | undefined, groupUuid: string) {
+export function navigateToProctoringView(screenshot: ScreenshotData | undefined, groupUuid: string) {
     if (screenshot != null) {
         navigateTo("/recording/" + screenshot.uuid);
     }

client/src/services/component-services/proctoringViewService.ts

@@ -1,20 +1,20 @@
-import * as sessionService from "@/services/api-services/sessionService";
+import * as screenshotDataService from "@/services/api-services/screenshotDataService";
 import * as timeUtils from "@/utils/timeUtils";
 
 
 //=============api==================
-export async function getSessionBySessionId(sessionId: string): Promise<Screenshot | null>{
+export async function getScreenshotDataBySessionId(sessionId: string): Promise<ScreenshotData | null>{
     try{
-        return await sessionService.getSessionBySessionId(sessionId);        
+        return await screenshotDataService.getScreenshotDataBySessionId(sessionId);        
     }catch(error){
         console.error(error);
         return null;
     }
 }
 
-export async function getSessionByTimestamp(sessionId: string, timestamp: string): Promise<Screenshot | null>{
+export async function getScreenshotDataByTimestamp(sessionId: string, timestamp: string): Promise<ScreenshotData | null>{
     try{
-        return await sessionService.getSessionByTimestamp(sessionId, timestamp);        
+        return await screenshotDataService.getScreenshotDataByTimestamp(sessionId, timestamp);        
     }catch(error){
         console.error(error);
         return null;
@@ -34,7 +34,7 @@ export function getScreenshotMetadata(sliderTime: number, currentScreenshotMetad
     };
 }
 
-export function getSessionInfodata(session: Screenshot | null): object{
+export function getSessionInfodata(session: ScreenshotData | null): object{
     if(session == null){
         return {};
     }

client/src/store/proctoringStore.ts

@@ -0,0 +1,7 @@
+import { defineStore } from "pinia";
+import * as timeUtils from "@/utils/timeUtils";
+import { ref, computed } from "vue";
+
+
+export const useProctoringStore = defineStore("proctoring", () => {
+});

server/src/controllers/screenshot-data.controller.ts

@@ -0,0 +1,28 @@
+import {Request, Response} from 'express';
+import * as apiService from "../services/api.service";
+import * as screenshotDataService from '../services/screenshot-data.service';
+
+export async function getScreenshotDataBySessionId(req: Request, res: Response){
+
+    try{
+        const session: object = await screenshotDataService.getScreenshotDataBySessionId(req.headers.authorization, req.params.sessionId);
+
+        return res.status(200).json(session);
+
+    }catch(error){
+        apiService.handleGenericApiError(error, res);
+    }
+}
+
+
+export async function getScreenshotDataByTimestamp(req: Request, res: Response){
+
+    try{
+        const session: object = await screenshotDataService.getScreenshotDataByTimestamp(req.headers.authorization, req.params.sessionId, req.params.timestamp);
+
+        return res.status(200).json(session);
+
+    }catch(error){
+        apiService.handleGenericApiError(error, res);
+    }
+}

server/src/routes/routes.ts

@@ -1,6 +1,6 @@
 import express, {Router} from 'express';
 import * as groupController from '../controllers/group.controller';
-import * as sessionController from '../controllers/session.controller';
+import * as screenshotDataController from '../controllers/screenshot-data.controller';
 import * as searchController from '../controllers/search.controller';
 import * as userAccountController from '../controllers/user-account.controller';
 import * as settingsController from '../controllers/settings.controller';
@@ -13,8 +13,8 @@ router.get("/settings", settingsController.getSettings)
 router.get("/group", groupController.getGroups);
 router.get("/group/:uuid", groupController.getGroupByUuid);
 
-router.get("/session/:sessionId", sessionController.getSessionBySessionId);
-router.get("/session/:sessionId/:timestamp", sessionController.getSessionByTimestamp);
+router.get("/screenshot-data/:sessionId", screenshotDataController.getScreenshotDataBySessionId);
+router.get("/screenshot-data/:sessionId/:timestamp", screenshotDataController.getScreenshotDataByTimestamp);
 
 router.get("/search/sessions", searchController.searchSessions);
 router.get("/search/screenshots", searchController.searchScreenshots);

server/src/services/session.service.ts → server/src/services/screenshot-data.service.ts

@@ -1,17 +1,17 @@
 import axios from "axios";
 import * as apiService from "./api.service";
 
-const sessionUrl: string = "/proctoring/session/";
+const sessionUrl: string = "/proctoring/screenshot-data/";
 
-export async function getSessionBySessionId(token: string, sessionId: string): Promise<object>{
+export async function getScreenshotDataBySessionId(token: string, sessionId: string): Promise<object>{
     const url: string = sessionUrl + sessionId;
     const {data, status} = await apiService.api.get(url, {headers: apiService.getHeaders(token)});
 
     return data;
 }
 
 
-export async function getSessionByTimestamp(token: string, sessionId: string, timestamp: string): Promise<object>{
+export async function getScreenshotDataByTimestamp(token: string, sessionId: string, timestamp: string): Promise<object>{
     const url: string =  sessionUrl + sessionId + "/" + timestamp;
     const {data, status} = await apiService.api.get(url, {headers: apiService.getHeaders(token)});