From e11b49d6debe23c235de1a3f0794d18466654327 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Sat, 19 Aug 2023 14:15:35 +0200
Subject: [PATCH] Video Section Admin Bugs (#1125)

- Resolves deletion of video sections broken #1123 (Allow the deletion of video sections for which no thumbnail exists)
- Resolves Input validation for video section timestamps not working on Firefox #1124 (Firefox still allows letters in <input type="number"> fields. Manual validation via regex necessary)
---
 api/stream.go                                 | 30 +++++++++----------
 api/stream_test.go                            | 29 ------------------
 web/router.go                                 |  1 -
 .../course/manage/edit-video-sections.gohtml  | 24 ++++++++-------
 web/ts/video-sections.ts                      | 14 ++++++++-
 5 files changed, 41 insertions(+), 57 deletions(-)

diff --git a/api/stream.go b/api/stream.go
index cac67f15b..74c2a43f9 100644
--- a/api/stream.go
+++ b/api/stream.go
@@ -571,35 +571,35 @@ func (r streamRoutes) deleteVideoSection(c *gin.Context) {
 		return
 	}
 
-	file, err := r.FileDao.GetFileById(fmt.Sprintf("%d", old.FileID))
+	err = r.VideoSectionDao.Delete(uint(id))
 	if err != nil {
-		log.WithError(err).Error("can not find file")
+		log.WithError(err).Error("can not delete video-section")
 		_ = c.Error(tools.RequestError{
-			Status:        http.StatusNotFound,
-			CustomMessage: "can not find file",
+			Status:        http.StatusInternalServerError,
+			CustomMessage: "can not delete video-section",
 			Err:           err,
 		})
 		return
 	}
 
-	err = r.VideoSectionDao.Delete(uint(id))
-	if err != nil {
-		log.WithError(err).Error("can not delete video-section")
+	file, err := r.FileDao.GetFileById(fmt.Sprintf("%d", old.FileID))
+	if err != nil && !errors.Is(err, gorm.ErrRecordNotFound) {
+		log.WithError(err).Error("can not get video section thumbnail file")
 		_ = c.Error(tools.RequestError{
 			Status:        http.StatusInternalServerError,
-			CustomMessage: "can not delete video-section",
+			CustomMessage: "can not get video section thumbnail file",
 			Err:           err,
 		})
 		return
+	} else {
+		go func() {
+			err := DeleteVideoSectionImage(r.DaoWrapper.WorkerDao, file.Path)
+			if err != nil {
+				log.WithError(err).Error("failed to generate video section images")
+			}
+		}()
 	}
 
-	go func() {
-		err := DeleteVideoSectionImage(r.DaoWrapper.WorkerDao, file.Path)
-		if err != nil {
-			log.WithError(err).Error("failed to generate video section images")
-		}
-	}()
-
 	c.Status(http.StatusAccepted)
 }
 
diff --git a/api/stream_test.go b/api/stream_test.go
index 3b8420715..db1b59da2 100644
--- a/api/stream_test.go
+++ b/api/stream_test.go
@@ -539,35 +539,6 @@ func TestStreamVideoSections(t *testing.T) {
 				Middlewares:  testutils.GetMiddlewares(tools.ErrorHandler, testutils.TUMLiveContext(testutils.TUMLiveContextAdmin)),
 				ExpectedCode: http.StatusBadRequest,
 			},
-			"GetFileById returns error": {
-				Router: func(r *gin.Engine) {
-					wrapper := dao.DaoWrapper{
-						StreamsDao: testutils.GetStreamMock(t),
-						CoursesDao: testutils.GetCoursesMock(t),
-						VideoSectionDao: func() dao.VideoSectionDao {
-							sectionMock := mock_dao.NewMockVideoSectionDao(gomock.NewController(t))
-							sectionMock.
-								EXPECT().
-								Get(section.ID).
-								Return(section, nil).
-								AnyTimes()
-							return sectionMock
-						}(),
-						FileDao: func() dao.FileDao {
-							fileMock := mock_dao.NewMockFileDao(gomock.NewController(t))
-							fileMock.
-								EXPECT().
-								GetFileById(fmt.Sprintf("%d", section.ID)).
-								Return(model.File{}, errors.New("")).
-								AnyTimes()
-							return fileMock
-						}(),
-					}
-					configGinStreamRestRouter(r, wrapper)
-				},
-				Middlewares:  testutils.GetMiddlewares(tools.ErrorHandler, testutils.TUMLiveContext(testutils.TUMLiveContextAdmin)),
-				ExpectedCode: http.StatusNotFound,
-			},
 			"Delete returns error": {
 				Router: func(r *gin.Engine) {
 					wrapper := dao.DaoWrapper{
diff --git a/web/router.go b/web/router.go
index ce4bd6c36..455726a51 100755
--- a/web/router.go
+++ b/web/router.go
@@ -33,7 +33,6 @@ var templatePaths = []string{
 	"template/partial/*.gohtml",
 	"template/partial/stream/*.gohtml",
 	"template/partial/course/manage/*.gohtml",
-	"template/partial/stream/chat/*.gohtml",
 	"template/partial/course/manage/*.gohtml",
 	"template/partial/course/manage/create-lecture-form-slides/*.gohtml",
 }
diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index c7992715f..71f1edf2f 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -1,8 +1,7 @@
 {{define "editvideosections"}}
-    <article
-            x-data="{ videoSectionController: new admin.VideoSectionsAdminController(lecture.lectureId), videoSections: [] }"
+    <article x-data="{ videoSectionController: new admin.VideoSectionsAdminController(lecture.lectureId) }"
             x-init="() => videoSectionController.init(`edit-video-sections-${lecture.lectureId}`, $el)"
-            @update="(e) => (videoSections = e.detail)" class="grid gap-y-3">
+            class="grid gap-y-3">
         <header class="flex justify-between items-center border-b dark:border-gray-600">
             <div class="flex items-center">
                 <h6 class="text-sm text-5 font-light">Video Sections</h6>
@@ -36,21 +35,24 @@
                 <span class="font-light">Unsaved Changes</span>
             </div>
         </header>
-        <form @submit.prevent="videoSectionController.publishNewSections()">
+        <form id = "new-section-form" @submit.prevent="videoSectionController.publishNewSections()">
             <div class="flex align-middle">
                 <input id="startHours"
+                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
                        x-model.number="videoSectionController.current.startHours"
                        type="number" min="0" max="23" step="1"
                        placeholder="0"
                        class="w-20 rounded px-4 py-3 tl-input">
                 <span class="px-2 my-auto font-semibold text-5">:</span>
                 <input id="startMinutes"
+                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
                        x-model.number="videoSectionController.current.startMinutes"
                        type="number" min="0" max="59" step="1"
                        placeholder="0"
                        class="w-20 rounded px-4 py-3 tl-input">
                 <span class="px-2 my-auto font-semibold text-5">:</span>
                 <input id="startSeconds"
+                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
                        x-model.number="videoSectionController.current.startSeconds"
                        type="number" min="0" max="59" step="1"
                        placeholder="0"
@@ -60,9 +62,9 @@
                        placeholder="Introduction"
                        class="mx-2 rounded px-4 py-3 tl-input">
                 <button type="button"
-                        class="w-fit bg-gray-100 text-center px-3 rounded w-full dark:bg-gray-600"
+                        class="w-fit bg-gray-100 text-center px-3 rounded dark:bg-gray-600"
                         @click="videoSectionController.pushNewSection()"
-                        :disabled="videoSectionController.current.description === ''">
+                        :disabled="!videoSectionController.currentIsValid()">
                     <i class="fa fa-plus text-3"></i>
                 </button>
             </div>
@@ -87,19 +89,19 @@
                         </template>
                     </article>
                     <div class="flex items-center justify-center grow py-2">
-                        <button class="rounded-lg text-center w-full py-2 font-semibold bg-blue-500 dark:bg-indigo-600"
-                                type="submit">
+                        <button type="submit" form="new-section-form" value="Submit"
+                                class="rounded-lg text-center w-full py-2 font-semibold bg-blue-500 dark:bg-indigo-600">
                             <span class="text-white text-sm">Save new sections</span>
                         </button>
                     </div>
                 </section>
             </template>
         </form>
-        <template x-if="videoSections.length > 0">
+        <template x-if="videoSectionController.existingSections.length > 0">
             <div class="">
                 <div class="grid gap-2">
-                    <template x-if="videoSections.length > 0">
-                        <template x-for="section in videoSections" :key="section.ID">
+                    <template x-if="videoSectionController.existingSections.length > 0">
+                        <template x-for="section in videoSectionController.existingSections" :key="section.ID">
                             <div x-data="{updater: {}}"
                                  x-init="updater = new admin.VideoSectionUpdater(lecture.lectureId, section);"
                                  class="flex align-middle items-stretch w-full border dark:border-gray-600 rounded">
diff --git a/web/ts/video-sections.ts b/web/ts/video-sections.ts
index 1bb6d74bb..d06d8045d 100644
--- a/web/ts/video-sections.ts
+++ b/web/ts/video-sections.ts
@@ -48,7 +48,6 @@ export class VideoSectionsAdminController {
 
     onUpdate(data: Section[]) {
         this.existingSections = data;
-        this.elem.dispatchEvent(new CustomEvent("update", { detail: this.existingSections }));
     }
 
     pushNewSection() {
@@ -75,6 +74,19 @@ export class VideoSectionsAdminController {
 
     async removeExistingSection(id: number) {
         await DataStore.videoSections.delete(this.streamId, id);
+        this.existingSections = this.existingSections.filter((s) => s.ID !== id);
+    }
+
+    currentIsValid(): boolean {
+        return (
+            this.current.description !== "" &&
+            this.current.startHours !== null &&
+            this.current.startMinutes < 32 &&
+            this.current.startMinutes !== null &&
+            this.current.startMinutes < 60 &&
+            this.current.startSeconds !== null &&
+            this.current.startSeconds < 60
+        );
     }
 
     private resetCurrent() {