From 84d18eea9877f527596f816dc428c26aff67da52 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Wed, 23 Aug 2023 11:35:57 +0200
Subject: [PATCH 01/77] started wit hrefactor of course management

---
 web/ts/api/admin-lecture-list.ts        | 97 +++++++++++++++++++++++++
 web/ts/data-store/admin-lecture-list.ts | 42 +++++++++++
 web/ts/edit-course.ts                   |  5 +-
 3 files changed, 142 insertions(+), 2 deletions(-)
 create mode 100644 web/ts/api/admin-lecture-list.ts
 create mode 100644 web/ts/data-store/admin-lecture-list.ts

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
new file mode 100644
index 000000000..66960adab
--- /dev/null
+++ b/web/ts/api/admin-lecture-list.ts
@@ -0,0 +1,97 @@
+import { del, get, post, put } from "../utilities/fetch-wrappers";
+import {StatusCodes} from "http-status-codes";
+import {patchData, postData} from "../global";
+
+export type UpdateLectureMetaRequest = {
+    name?: string;
+    description?: string;
+    lectureHallId?: number;
+    isChatEnabled?: boolean;
+}
+
+export type CreateNewLectureRequest = {
+    title: "",
+    lectureHallId: 0,
+    start: "",
+    end: "",
+    isChatEnabled: false,
+    duration: 0, // Duration in Minutes
+    formatedDuration: "", // Duration in Minutes
+    premiere: false,
+    vodup: false,
+    adHoc: false,
+    recurring: false,
+    recurringInterval: "weekly",
+    eventsCount: 10,
+    recurringDates: [],
+    combFile: [],
+    presFile: [],
+    camFile: [],
+}
+
+export type Lecture = {
+    ID?: number;
+    courseId: number;
+    courseSlug: string;
+    lectureId: number;
+    streamKey: string;
+    seriesIdentifier: string;
+    color: string;
+    vodViews: number;
+    start: Date;
+    end: Date;
+    isLiveNow: boolean;
+    isConverting: boolean;
+    isRecording: boolean;
+    isPast: boolean;
+    hasStats: boolean;
+    name: string;
+    description: string;
+    lectureHallId: string;
+    lectureHallName: string;
+    isChatEnabled: false;
+};
+
+/**
+ * REST API Wrapper for /api/stream/:id/sections
+ */
+export const AdminLectureList = {
+    get: async function (courseId: number): Promise<Lecture[]> {
+        return get(`/api/stream/${courseId}/sections`);
+    },
+
+    add: async function (courseId: number, request: object) {
+        return post(`/api/stream/${courseId}/sections`, request);
+    },
+
+    update: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
+        const promises = [];
+        if (request.name !== null) {
+            promises.push(postData("/api/course/" + courseId + "/renameLecture/" + lectureId, { name: request.name }));
+        }
+
+        if (request.description !== null) {
+            promises.push(postData("/api/course/" + courseId + "/updateDescription/" + lectureId, { name: request.description }));
+        }
+
+        if (request.lectureHallId !== null) {
+            promises.push(postData("/api/setLectureHall", { streamIds: [lectureId], lectureHall: request.lectureHallId }));
+        }
+
+        if (request.isChatEnabled !== null) {
+            promises.push(patchData("/api/stream/" + lectureId + "/chat/enabled", { lectureId, isChatEnabled: request.isChatEnabled }));
+        }
+
+        const errors = (await Promise.all(promises)).filter((res) => res.status !== StatusCodes.OK);
+        if (errors.length > 0) {
+            console.error(errors);
+            throw Error("Failed to update all data.");
+        }
+    },
+
+    delete: async function (courseId: number, lectureId: number): Promise<Response> {
+        return await postData(`/api/course/${courseId}/deleteLectures`, {
+            streamIDs: [lectureId],
+        });
+    },
+};
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
new file mode 100644
index 000000000..945cd7a64
--- /dev/null
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -0,0 +1,42 @@
+import { StreamableMapProvider } from "./provider";
+import {AdminLectureList, Lecture, UpdateLectureMetaRequest} from "../api/admin-lecture-list";
+
+export class AdminLectureListProvider extends StreamableMapProvider<number, Lecture[]> {
+    protected async fetcher(courseId: number): Promise<Lecture[]> {
+        const result = await AdminLectureList.get(courseId);
+        return result;
+    }
+
+    async add(courseId: number, lecture: Lecture): Promise<void> {
+        await AdminLectureList.add(courseId, lecture);
+        await this.fetch(courseId, true);
+        await this.triggerUpdate(courseId);
+    }
+
+    async delete(courseId: number, streamId: number) {
+        await AdminLectureList.delete(courseId, streamId);
+        this.data[courseId] = (await this.getData(courseId)).filter((s) => s.ID !== streamId);
+    }
+
+    async updateMeta(courseId: number, streamId: number, request: UpdateLectureMetaRequest) {
+        await AdminLectureList.update(courseId, streamId, request);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.ID === streamId) {
+                s = {
+                    ...s,
+                };
+
+                // Path updated keys in local data
+                for (const requestKey in request) {
+                    const val = request[requestKey];
+                    if (val !== null) {
+                        s[requestKey] = val;
+                    }
+                }
+            }
+            return s;
+        });
+        await this.triggerUpdate(streamId);
+    }
+}
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 0b1e65ab7..9606367a8 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -1077,10 +1077,11 @@ export function createLectureForm(args: { s: [] }) {
                 postData("/api/course/" + this.courseID + "/createLecture", payload)
                     .then(async (res) => {
                         const { ids } = await res.json();
-                        const url = new URL(window.location.href);
+                        /*const url = new URL(window.location.href);
                         url.hash = `lectures:${ids.join(",")}`;
                         window.location.assign(url);
-                        window.location.reload();
+                        window.location.reload();*/
+
                     })
                     .catch((e) => {
                         console.log(e);

From 429ad671bd309e025325bc98c23afc66433c6379 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 14:01:44 +0200
Subject: [PATCH 02/77] add dao & route

---
 api/courses.go                                | 22 +++++++++-
 dao/streams.go                                |  8 ++++
 mock_dao/streams.go                           | 15 +++++++
 .../manage/course-lecture-management.gohtml   |  5 +--
 web/ts/api/admin-lecture-list.ts              | 13 +++---
 web/ts/data-store/admin-lecture-list.ts       |  9 ++--
 web/ts/data-store/data-store.ts               |  4 ++
 web/ts/edit-course.ts                         | 41 +++++++++++--------
 8 files changed, 86 insertions(+), 31 deletions(-)

diff --git a/api/courses.go b/api/courses.go
index 2ae7e1ef7..998556872 100644
--- a/api/courses.go
+++ b/api/courses.go
@@ -6,12 +6,12 @@ import (
 	"errors"
 	"fmt"
 	"github.com/RBG-TUM/commons"
-	"github.com/getsentry/sentry-go"
-	"github.com/gin-gonic/gin"
 	"github.com/TUM-Dev/gocast/dao"
 	"github.com/TUM-Dev/gocast/model"
 	"github.com/TUM-Dev/gocast/tools"
 	"github.com/TUM-Dev/gocast/tools/tum"
+	"github.com/getsentry/sentry-go"
+	"github.com/gin-gonic/gin"
 	"github.com/meilisearch/meilisearch-go"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
@@ -61,6 +61,7 @@ func configGinCourseRouter(router *gin.Engine, daoWrapper dao.DaoWrapper) {
 			courses.Use(tools.InitCourse(daoWrapper))
 			courses.Use(tools.AdminOfCourse)
 			courses.DELETE("/", routes.deleteCourse)
+			courses.GET("/", routes.fetchLectures)
 			courses.POST("/createVOD", routes.createVOD)
 			courses.POST("/uploadVODMedia", routes.uploadVODMedia)
 			courses.POST("/copy", routes.copyCourse)
@@ -1038,6 +1039,23 @@ func (r coursesRoutes) renameLecture(c *gin.Context) {
 	}
 }
 
+func (r coursesRoutes) fetchLectures(c *gin.Context) {
+	tlctx := c.MustGet("TUMLiveContext").(tools.TUMLiveContext)
+	streams, err := r.StreamsDao.GetAllStreamsForCourse(tlctx.Course.ID)
+	if err != nil {
+		_ = c.Error(tools.RequestError{
+			Status:        http.StatusNotFound,
+			CustomMessage: "can not find streams",
+			Err:           err,
+		})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"streams": streams,
+	})
+}
+
 func (r coursesRoutes) updateLectureSeries(c *gin.Context) {
 	stream, err := r.StreamsDao.GetStreamByID(context.Background(), c.Param("streamID"))
 	if err != nil {
diff --git a/dao/streams.go b/dao/streams.go
index b6da68ba5..b70c003a7 100755
--- a/dao/streams.go
+++ b/dao/streams.go
@@ -26,6 +26,7 @@ type StreamsDao interface {
 	GetStreamByID(ctx context.Context, id string) (stream model.Stream, err error)
 	GetWorkersForStream(stream model.Stream) ([]model.Worker, error)
 	GetAllStreams() ([]model.Stream, error)
+	GetAllStreamsForCourse(courseID uint) ([]model.Stream, error)
 	ExecAllStreamsWithCoursesAndSubtitles(f func([]StreamWithCourseAndSubtitles))
 	GetCurrentLive(ctx context.Context) (currentLive []model.Stream, err error)
 	GetCurrentLiveNonHidden(ctx context.Context) (currentLive []model.Stream, err error)
@@ -210,6 +211,13 @@ func (d streamsDao) GetAllStreams() ([]model.Stream, error) {
 	return res, err
 }
 
+// GetAllStreamsForCourse returns all streams of a course
+func (d streamsDao) GetAllStreamsForCourse(courseID uint) ([]model.Stream, error) {
+	var res []model.Stream
+	err := DB.Where("course_id = ?", courseID).Find(&res).Error
+	return res, err
+}
+
 type StreamWithCourseAndSubtitles struct {
 	Name, Description, TeachingTerm, CourseName, Subtitles string
 	ID, CourseID                                           uint
diff --git a/mock_dao/streams.go b/mock_dao/streams.go
index f5b32c272..098f3cd4d 100644
--- a/mock_dao/streams.go
+++ b/mock_dao/streams.go
@@ -164,12 +164,27 @@ func (m *MockStreamsDao) GetAllStreams() ([]model.Stream, error) {
 	return ret0, ret1
 }
 
+// GetAllStreamsForCourse mocks base method.
+func (m MockStreamsDao) GetAllStreamsForCourse(courseID uint) ([]model.Stream, error) {
+	m.ctrl.T.Helper()
+	ret := m.ctrl.Call(m, "GetAllStreamsForCourse", courseID)
+	ret0, _ := ret[0].([]model.Stream)
+	ret1, _ := ret[1].(error)
+	return ret0, ret1
+}
+
 // GetAllStreams indicates an expected call of GetAllStreams.
 func (mr *MockStreamsDaoMockRecorder) GetAllStreams() *gomock.Call {
 	mr.mock.ctrl.T.Helper()
 	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "GetAllStreams", reflect.TypeOf((*MockStreamsDao)(nil).GetAllStreams))
 }
 
+// GetAllStreamsForCourse indicates an expected call of GetAllStreamsForCourse.
+func (mr *MockStreamsDaoMockRecorder) GetAllStreamsForCourse(courseID uint) *gomock.Call {
+	mr.mock.ctrl.T.Helper()
+	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "GetAllStreamsForCourse", reflect.TypeOf((*MockStreamsDao)(nil).GetAllStreamsForCourse), courseID)
+}
+
 // GetCurrentLive mocks base method.
 func (m *MockStreamsDao) GetCurrentLive(ctx context.Context) ([]model.Stream, error) {
 	m.ctrl.T.Helper()
diff --git a/web/template/partial/course/manage/course-lecture-management.gohtml b/web/template/partial/course/manage/course-lecture-management.gohtml
index 268dc1e33..1c0c38e1c 100644
--- a/web/template/partial/course/manage/course-lecture-management.gohtml
+++ b/web/template/partial/course/manage/course-lecture-management.gohtml
@@ -59,9 +59,8 @@
         </div>
 
         {{- /* streams: */ -}}
-        <div x-data="{ lectures: [], marked: [] }"
-             x-on:newlectures.window="e => {lectures = e.detail.lectures; marked = e.detail.markedIds; }"
-             x-init="$nextTick(() => admin.LectureList.init({{toJson ($course.AdminJson $lectureHalls)}}))">
+        <div x-data="{ lectureList: new admin.LectureList({{$course.Model.ID}}), lectures: [], marked: [] }"
+             x-on:newlectures.window="e => {lectures = e.detail.lectures; marked = e.detail.markedIds; }">
             <ul class="flex" :class="sortAsc ? 'flex-col' : 'flex-col-reverse'">
                 <template x-for="lecture in lectures" :key="lecture.lectureId">
                     {{template "lecture-management-card" .}}
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 66960adab..dd7fee4e9 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -64,21 +64,22 @@ export const AdminLectureList = {
         return post(`/api/stream/${courseId}/sections`, request);
     },
 
+    // TODO: make one unified endpoint
     update: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
         const promises = [];
-        if (request.name !== null) {
+        if (request.name !== undefined) {
             promises.push(postData("/api/course/" + courseId + "/renameLecture/" + lectureId, { name: request.name }));
         }
 
-        if (request.description !== null) {
+        if (request.description !== undefined) {
             promises.push(postData("/api/course/" + courseId + "/updateDescription/" + lectureId, { name: request.description }));
         }
 
-        if (request.lectureHallId !== null) {
+        if (request.lectureHallId !== undefined) {
             promises.push(postData("/api/setLectureHall", { streamIds: [lectureId], lectureHall: request.lectureHallId }));
         }
 
-        if (request.isChatEnabled !== null) {
+        if (request.isChatEnabled !== undefined) {
             promises.push(patchData("/api/stream/" + lectureId + "/chat/enabled", { lectureId, isChatEnabled: request.isChatEnabled }));
         }
 
@@ -89,9 +90,9 @@ export const AdminLectureList = {
         }
     },
 
-    delete: async function (courseId: number, lectureId: number): Promise<Response> {
+    delete: async function (courseId: number, lectureIds: number[]): Promise<Response> {
         return await postData(`/api/course/${courseId}/deleteLectures`, {
-            streamIDs: [lectureId],
+            streamIDs: lectureIds,
         });
     },
 };
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 945cd7a64..457223c7c 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -13,9 +13,10 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
-    async delete(courseId: number, streamId: number) {
-        await AdminLectureList.delete(courseId, streamId);
-        this.data[courseId] = (await this.getData(courseId)).filter((s) => s.ID !== streamId);
+    async delete(courseId: number, lectureIds: number[]) {
+        await AdminLectureList.delete(courseId, lectureIds);
+        this.data[courseId] = (await this.getData(courseId)).filter((s) => !lectureIds.includes(s.ID));
+        await this.triggerUpdate(courseId);
     }
 
     async updateMeta(courseId: number, streamId: number, request: UpdateLectureMetaRequest) {
@@ -30,7 +31,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
                 // Path updated keys in local data
                 for (const requestKey in request) {
                     const val = request[requestKey];
-                    if (val !== null) {
+                    if (val !== undefined) {
                         s[requestKey] = val;
                     }
                 }
diff --git a/web/ts/data-store/data-store.ts b/web/ts/data-store/data-store.ts
index 381f2efc4..99758d854 100644
--- a/web/ts/data-store/data-store.ts
+++ b/web/ts/data-store/data-store.ts
@@ -1,9 +1,13 @@
 import { VideoSectionProvider } from "./video-sections";
 import { BookmarksProvider } from "./bookmarks";
 import { StreamPlaylistProvider } from "./stream-playlist";
+import {AdminLectureListProvider} from "./admin-lecture-list";
 
 export abstract class DataStore {
     static bookmarks: BookmarksProvider = new BookmarksProvider();
     static videoSections: VideoSectionProvider = new VideoSectionProvider();
     static streamPlaylist: StreamPlaylistProvider = new StreamPlaylistProvider();
+
+    // Admin Data-Stores
+    static adminLectureList: AdminLectureListProvider = new AdminLectureListProvider();
 }
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 9606367a8..b026ed982 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -1,5 +1,7 @@
 import { Delete, patchData, postData, putData, sendFormData, showMessage } from "./global";
 import { StatusCodes } from "http-status-codes";
+import { DataStore } from "./data-store/data-store";
+import { Lecture } from "./api/admin-lecture-list";
 
 export enum UIEditMode {
     none,
@@ -18,16 +20,15 @@ export enum FileType {
 }
 
 export class LectureList {
-    static lectures: Lecture[] = [];
-    static markedIds: number[] = [];
-
-    static init(initialState: Lecture[]) {
-        if (initialState === null) {
-            initialState = [];
-        }
+    courseId: number;
+    lectures: Lecture[] = [];
+    markedIds: number[] = [];
 
+    LectureList(courseId: number) {
+        this.courseId = courseId;
         this.markedIds = this.parseUrlHash();
 
+        /*
         // load initial state into lecture objects
         for (const lecture of initialState) {
             let l = new Lecture();
@@ -35,19 +36,27 @@ export class LectureList {
             l.start = new Date(lecture.start);
             l.end = new Date(lecture.end);
             LectureList.lectures.push(l);
-        }
+        }*/
+        this.setup();
 
-        LectureList.triggerUpdate();
-        setTimeout(() => this.scrollSelectedLecturesIntoView(), 500);
+        //LectureList.triggerUpdate();
+        //setTimeout(() => this.scrollSelectedLecturesIntoView(), 500);
+    }
+
+    async setup() {
+        await DataStore.adminLectureList.subscribe(this.courseId, (lectures) => {
+            this.lectures = lectures;
+            this.triggerUpdateEvent();
+        });
     }
 
-    static scrollSelectedLecturesIntoView() {
+    scrollSelectedLecturesIntoView() {
         if (this.markedIds.length > 0) {
             document.querySelector(`#lecture-${this.markedIds[0]}`).scrollIntoView({ behavior: "smooth" });
         }
     }
 
-    static parseUrlHash(): number[] {
+    parseUrlHash(): number[] {
         if (!window.location.hash.startsWith("#lectures:")) {
             return [];
         }
@@ -57,17 +66,17 @@ export class LectureList {
             .map((s) => parseInt(s));
     }
 
-    static hasIndividualChatEnabledSettings(): boolean {
+    hasIndividualChatEnabledSettings(): boolean {
         const lectures = this.lectures;
         if (lectures.length < 2) return false;
         const first = lectures[0];
         return lectures.slice(1).some((lecture) => lecture.isChatEnabled !== first.isChatEnabled);
     }
 
-    static triggerUpdate() {
+    triggerUpdateEvent() {
         const event = new CustomEvent("newlectures", {
             detail: {
-                lectures: LectureList.lectures,
+                lectures: this.lectures,
                 markedIds: this.markedIds,
             },
         });
@@ -97,7 +106,7 @@ class TranscodingProgress {
     progress: number;
 }
 
-export class Lecture {
+export class LectureOLD {
     static dateFormatOptions: Intl.DateTimeFormatOptions = {
         weekday: "long",
         year: "numeric",

From d1ea05032d1ffa0b8b9c1f2995155dd5d040e5da Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 14:08:31 +0200
Subject: [PATCH 03/77] update route

---
 api/courses.go                   | 2 +-
 web/ts/api/admin-lecture-list.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/api/courses.go b/api/courses.go
index 998556872..9f1bf8ea5 100644
--- a/api/courses.go
+++ b/api/courses.go
@@ -61,7 +61,7 @@ func configGinCourseRouter(router *gin.Engine, daoWrapper dao.DaoWrapper) {
 			courses.Use(tools.InitCourse(daoWrapper))
 			courses.Use(tools.AdminOfCourse)
 			courses.DELETE("/", routes.deleteCourse)
-			courses.GET("/", routes.fetchLectures)
+			courses.GET("/lectures", routes.fetchLectures)
 			courses.POST("/createVOD", routes.createVOD)
 			courses.POST("/uploadVODMedia", routes.uploadVODMedia)
 			courses.POST("/copy", routes.copyCourse)
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index dd7fee4e9..11662cdc0 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -57,7 +57,7 @@ export type Lecture = {
  */
 export const AdminLectureList = {
     get: async function (courseId: number): Promise<Lecture[]> {
-        return get(`/api/stream/${courseId}/sections`);
+        return get(`/api/course/${courseId}/lectures`);
     },
 
     add: async function (courseId: number, request: object) {

From 8aa4d695b9b470c4bb246f6f35a36cbf00c97f2e Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 14:23:11 +0200
Subject: [PATCH 04/77] started wit hfetching

---
 web/ts/api/admin-lecture-list.ts | 63 +++++++++++++++++++++-----------
 web/ts/edit-course.ts            | 38 ++++++++++---------
 2 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 11662cdc0..d9b81e8bd 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -29,28 +29,47 @@ export type CreateNewLectureRequest = {
     camFile: [],
 }
 
-export type Lecture = {
-    ID?: number;
-    courseId: number;
-    courseSlug: string;
-    lectureId: number;
-    streamKey: string;
-    seriesIdentifier: string;
-    color: string;
-    vodViews: number;
-    start: Date;
-    end: Date;
-    isLiveNow: boolean;
-    isConverting: boolean;
-    isRecording: boolean;
-    isPast: boolean;
-    hasStats: boolean;
-    name: string;
-    description: string;
-    lectureHallId: string;
-    lectureHallName: string;
-    isChatEnabled: false;
-};
+export interface Lecture {
+    ID: number;
+    CreatedAt: string;
+    UpdatedAt: string;
+    DeletedAt: string;
+    Name: string;
+    Description: string;
+    CourseID: number;
+    Start: string;
+    End: string;
+    ChatEnabled: boolean;
+    RoomName: string;
+    RoomCode: string;
+    EventTypeName: string;
+    TUMOnlineEventID: number;
+    SeriesIdentifier: string;
+    StreamKey: string;
+    PlaylistUrl: string;
+    PlaylistUrlPRES: string;
+    PlaylistUrlCAM: string;
+    LiveNow: boolean;
+    LiveNowTimestamp: string;
+    Recording: boolean;
+    Premiere: boolean;
+    Ended: boolean;
+    VodViews: number;
+    StartOffset: number;
+    EndOffset: number;
+    LectureHallID: number;
+    ThumbInterval: number;
+    StreamName: string;
+    Duration: LectureDuration;
+    //VideoSections?: null;
+    Private: boolean;
+    Watched: boolean;
+}
+
+export interface LectureDuration {
+    Int32: number;
+    Valid: boolean;
+}
 
 /**
  * REST API Wrapper for /api/stream/:id/sections
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index b026ed982..0e2a078c7 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -24,7 +24,7 @@ export class LectureList {
     lectures: Lecture[] = [];
     markedIds: number[] = [];
 
-    LectureList(courseId: number) {
+    constructor(courseId: number) {
         this.courseId = courseId;
         this.markedIds = this.parseUrlHash();
 
@@ -45,6 +45,7 @@ export class LectureList {
 
     async setup() {
         await DataStore.adminLectureList.subscribe(this.courseId, (lectures) => {
+            console.log(lectures);
             this.lectures = lectures;
             this.triggerUpdateEvent();
         });
@@ -70,7 +71,7 @@ export class LectureList {
         const lectures = this.lectures;
         if (lectures.length < 2) return false;
         const first = lectures[0];
-        return lectures.slice(1).some((lecture) => lecture.isChatEnabled !== first.isChatEnabled);
+        return lectures.slice(1).some((lecture) => lecture.ChatEnabled !== first.ChatEnabled);
     }
 
     triggerUpdateEvent() {
@@ -155,23 +156,24 @@ export class LectureOLD {
     downloadableVods: DownloadableVod[];
 
     clone() {
-        return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
+        return null;
+        //return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
     }
 
     startDateFormatted() {
-        return this.start.toLocaleDateString("en-US", Lecture.dateFormatOptions);
+        return this.start.toLocaleDateString("en-US", LectureOLD.dateFormatOptions);
     }
 
     startTimeFormatted() {
-        return this.start.toLocaleTimeString("en-US", Lecture.timeFormatOptions);
+        return this.start.toLocaleTimeString("en-US", LectureOLD.timeFormatOptions);
     }
 
     endFormatted() {
-        return this.end.toLocaleDateString("en-US", Lecture.dateFormatOptions);
+        return this.end.toLocaleDateString("en-US", LectureOLD.dateFormatOptions);
     }
 
     endTimeFormatted() {
-        return this.end.toLocaleTimeString("en-US", Lecture.timeFormatOptions);
+        return this.end.toLocaleTimeString("en-US", LectureOLD.timeFormatOptions);
     }
 
     updateIsDirty() {
@@ -390,10 +392,10 @@ export class LectureOLD {
     async saveSeries() {
         const res = await postData("/api/course/" + this.courseId + "/updateLectureSeries/" + this.lectureId);
 
-        if (res.status == StatusCodes.OK) {
+        /*if (res.status == StatusCodes.OK) {
             LectureList.lectures = LectureList.lectures.map((lecture) => {
                 if (this.lectureId !== lecture.lectureId && lecture.seriesIdentifier === this.seriesIdentifier) {
-                    /* cloning, as otherwise alpine doesn't detect the changed object in the array ... */
+                    // cloning, as otherwise alpine doesn't detect the changed object in the array ...
                     lecture = lecture.clone();
                     lecture.name = this.name;
                     lecture.description = this.description;
@@ -403,7 +405,7 @@ export class LectureOLD {
                 return lecture;
             });
             LectureList.triggerUpdate();
-        }
+        }*/
 
         return res;
     }
@@ -419,13 +421,13 @@ export class LectureOLD {
                 return;
             }
 
-            LectureList.lectures = LectureList.lectures.filter((l) => l.lectureId !== this.lectureId);
-            LectureList.triggerUpdate();
+            /*LectureList.lectures = LectureList.lectures.filter((l) => l.lectureId !== this.lectureId);
+            LectureList.triggerUpdate();*/
         }
     }
 
     async deleteLectureSeries() {
-        const lectureCount = LectureList.lectures.filter((l) => l.seriesIdentifier === this.seriesIdentifier).length;
+        /*const lectureCount = LectureList.lectures.filter((l) => l.seriesIdentifier === this.seriesIdentifier).length;
         if (confirm("Confirm deleting " + lectureCount + " videos in the lecture series?")) {
             const res = await Delete("/api/course/" + this.courseId + "/deleteLectureSeries/" + this.lectureId);
 
@@ -435,7 +437,7 @@ export class LectureOLD {
             }
 
             return res;
-        }
+        }*/
     }
 
     getDownloads() {
@@ -523,8 +525,8 @@ export async function deleteLectures(cid: number, lids: number[]) {
             return;
         }
 
-        LectureList.lectures = LectureList.lectures.filter((l) => !lids.includes(l.lectureId));
-        LectureList.triggerUpdate();
+        //LectureList.lectures = LectureList.lectures.filter((l) => !lids.includes(l.lectureId));
+        //LectureList.triggerUpdate();
     }
 }
 
@@ -534,9 +536,9 @@ export function saveIsChatEnabled(streamId: number, isChatEnabled: boolean) {
 
 export async function saveIsChatEnabledForAllLectures(isChatEnabled: boolean) {
     const promises = [];
-    for (const lecture of LectureList.lectures) {
+    /*for (const lecture of LectureList.lectures) {
         promises.push(saveIsChatEnabled(lecture.lectureId, isChatEnabled));
-    }
+    }*/
     const errors = (await Promise.all(promises)).filter((res) => res.status !== StatusCodes.OK);
     return errors.length <= 0;
 }

From db3f3bb4d775c3c356dce2bb9df92b0255dcbd39 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 15:55:11 +0200
Subject: [PATCH 05/77] Add changeset abstraction

---
 .../manage/lecture-management-card.gohtml     |   4 +-
 web/ts/api/admin-lecture-list.ts              |  11 +-
 web/ts/change-set.ts                          |  66 +++++++
 web/ts/data-store/admin-lecture-list.ts       |  24 ++-
 web/ts/edit-course.ts                         | 164 +++++++-----------
 5 files changed, 163 insertions(+), 106 deletions(-)
 create mode 100644 web/ts/change-set.ts

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index c0b8a831a..a1f08de0f 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -6,9 +6,9 @@
     {{$ingestBase := .IngestBase}}
     {{$lectureHalls := .LectureHalls}}
 
-    <li :id="`lecture-${lecture.lectureId}`"
+    <li :id="`lecture-${lecture.ID}`"
         x-show="!filterPast || !lecture.isPast"
-        :key="lecture.lectureId"
+        :key="lecture.ID"
         class="w-full mb-4 relative bg-white dark:bg-gray-800 border dark:border-0 rounded shadow">
         <div class="border-t-2 flex justify-between mb-2 rounded-t" :class="'border-' + lecture.color">
             <div class="pt-2 px-2 w-full">
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index d9b81e8bd..56790d292 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -64,6 +64,14 @@ export interface Lecture {
     //VideoSections?: null;
     Private: boolean;
     Watched: boolean;
+
+    // Clientside computed fields
+    startDate: Date;
+    startDateFormatted: string;
+    startTimeFormatted: string;
+    endDate: Date;
+    endDateFormatted: string;
+    endTimeFormatted: string;
 }
 
 export interface LectureDuration {
@@ -76,7 +84,8 @@ export interface LectureDuration {
  */
 export const AdminLectureList = {
     get: async function (courseId: number): Promise<Lecture[]> {
-        return get(`/api/course/${courseId}/lectures`);
+        const result = await get(`/api/course/${courseId}/lectures`);
+        return result["streams"];
     },
 
     add: async function (courseId: number, request: object) {
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
new file mode 100644
index 000000000..fcd0e77a6
--- /dev/null
+++ b/web/ts/change-set.ts
@@ -0,0 +1,66 @@
+import {CacheOptions} from "./data-store/cache";
+
+
+
+export class ChangeSet<T> {
+    private state: T;
+    private changeState: T;
+    private readonly comparator?: (key: string, a: T, b: T) => boolean|null;
+
+    constructor(state: T, comparator?: (key: string, a: T, b: T) => boolean) {
+        this.state = state;
+        this.comparator = comparator;
+        this.reset();
+    }
+
+    get(): T {
+        return this.changeState;
+    }
+
+    set(val: T) {
+        this.changeState = {...val};
+    }
+
+    commit(): void {
+        this.state = {...this.changeState};
+    }
+
+    reset(): void {
+        this.changeState = {...this.state};
+    }
+
+    isDirty(): boolean {
+        for (const key of Object.keys(this.state)) {
+            if (this.keyChanged(key)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    changedKeys(): string[] {
+        const res = [];
+        for (const key of Object.keys(this.state)) {
+            if (this.keyChanged(key)) {
+                res.push(key);
+            }
+        }
+        return res;
+    }
+
+    keyChanged(key: string): boolean {
+        // Check with custom comparator if set
+        if (this.comparator !== undefined) {
+            const result = this.comparator(key, this.state, this.changeState);
+            if (result !== null) {
+                return result;
+            }
+        }
+
+        // Otherwise just check if equiv
+        if (this.state[key] !== this.changeState[key]) {
+            return true;
+        }
+        return false;
+    }
+}
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 457223c7c..829dfd098 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -1,10 +1,32 @@
 import { StreamableMapProvider } from "./provider";
 import {AdminLectureList, Lecture, UpdateLectureMetaRequest} from "../api/admin-lecture-list";
+import {Time} from "../utilities/time";
+
+const dateFormatOptions: Intl.DateTimeFormatOptions = {
+    weekday: "long",
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+};
+const timeFormatOptions: Intl.DateTimeFormatOptions = {
+    hour: "2-digit",
+    minute: "2-digit",
+};
 
 export class AdminLectureListProvider extends StreamableMapProvider<number, Lecture[]> {
     protected async fetcher(courseId: number): Promise<Lecture[]> {
         const result = await AdminLectureList.get(courseId);
-        return result;
+        return result.map((s) => {
+            s.startDate = new Date(s.Start);
+            s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
+            s.startTimeFormatted = s.startDate.toLocaleTimeString("en-US", timeFormatOptions);
+
+            s.endDate = new Date(s.End);
+            s.endDateFormatted = s.endDate.toLocaleDateString("en-US", dateFormatOptions);
+            s.endTimeFormatted = s.endDate.toLocaleTimeString("en-US", timeFormatOptions);
+
+            return s;
+        });
     }
 
     async add(courseId: number, lecture: Lecture): Promise<void> {
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 0e2a078c7..6959d1b17 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -2,6 +2,7 @@ import { Delete, patchData, postData, putData, sendFormData, showMessage } from
 import { StatusCodes } from "http-status-codes";
 import { DataStore } from "./data-store/data-store";
 import { Lecture } from "./api/admin-lecture-list";
+import {ChangeSet} from "./change-set";
 
 export enum UIEditMode {
     none,
@@ -21,7 +22,7 @@ export enum FileType {
 
 export class LectureList {
     courseId: number;
-    lectures: Lecture[] = [];
+    lectures: LectureEditor[] = [];
     markedIds: number[] = [];
 
     constructor(courseId: number) {
@@ -45,9 +46,9 @@ export class LectureList {
 
     async setup() {
         await DataStore.adminLectureList.subscribe(this.courseId, (lectures) => {
-            console.log(lectures);
-            this.lectures = lectures;
+            this.lectures = lectures.map((lecture) => new LectureEditor(lecture));
             this.triggerUpdateEvent();
+            console.log("testyyy", this.lectures);
         });
     }
 
@@ -71,7 +72,7 @@ export class LectureList {
         const lectures = this.lectures;
         if (lectures.length < 2) return false;
         const first = lectures[0];
-        return lectures.slice(1).some((lecture) => lecture.ChatEnabled !== first.ChatEnabled);
+        return lectures.slice(1).some((l) => l.data.ChatEnabled !== l.data.ChatEnabled);
     }
 
     triggerUpdateEvent() {
@@ -107,18 +108,15 @@ class TranscodingProgress {
     progress: number;
 }
 
-export class LectureOLD {
-    static dateFormatOptions: Intl.DateTimeFormatOptions = {
-        weekday: "long",
-        year: "numeric",
-        month: "short",
-        day: "2-digit",
-    };
-    static timeFormatOptions: Intl.DateTimeFormatOptions = {
-        hour: "2-digit",
-        minute: "2-digit",
-    };
-    readonly courseId: number;
+export class LectureEditor {
+    changes: ChangeSet<Lecture>;
+    uiEditMode: UIEditMode = UIEditMode.none;
+
+    get data() : Lecture {
+        return this.changes.get();
+    }
+
+    /*readonly courseId: number;
     readonly courseSlug: string;
     readonly lectureId: number;
     readonly streamKey: string;
@@ -131,9 +129,19 @@ export class LectureOLD {
     isConverting: boolean;
     readonly isRecording: boolean;
     readonly isPast: boolean;
-    readonly hasStats: boolean;
+    readonly hasStats: boolean;*/
+
+    constructor(lecture: Lecture) {
+        this.changes = new ChangeSet<Lecture>(lecture, this.lectureComparator);
+    }
+
+    lectureComparator(key: string, a: Lecture, b: Lecture): boolean|null {
+        // here we can set some custom comparisons
+
+        return null;
+    }
 
-    name: string;
+    /*name: string;
     description: string;
     lectureHallId: string;
     lectureHallName: string;
@@ -153,66 +161,22 @@ export class LectureOLD {
     transcodingProgresses: TranscodingProgress[];
     files: LectureFile[];
     private: boolean;
-    downloadableVods: DownloadableVod[];
-
-    clone() {
-        return null;
-        //return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
-    }
-
-    startDateFormatted() {
-        return this.start.toLocaleDateString("en-US", LectureOLD.dateFormatOptions);
-    }
-
-    startTimeFormatted() {
-        return this.start.toLocaleTimeString("en-US", LectureOLD.timeFormatOptions);
-    }
-
-    endFormatted() {
-        return this.end.toLocaleDateString("en-US", LectureOLD.dateFormatOptions);
-    }
-
-    endTimeFormatted() {
-        return this.end.toLocaleTimeString("en-US", LectureOLD.timeFormatOptions);
-    }
-
-    updateIsDirty() {
-        this.isDirty =
-            this.newName !== this.name ||
-            this.newDescription !== this.description ||
-            this.newLectureHallId !== this.lectureHallId ||
-            this.newIsChatEnabled !== this.isChatEnabled ||
-            this.newCombinedVideo !== null ||
-            this.newPresentationVideo !== null ||
-            this.newCameraVideo !== null;
-    }
-
-    resetNewFields() {
-        this.newName = this.name;
-        this.newDescription = this.description;
-        this.newLectureHallId = this.lectureHallId;
-        this.newIsChatEnabled = this.isChatEnabled;
-        this.isDirty = false;
-        this.lastErrors = [];
-        this.newCombinedVideo = null;
-        this.newPresentationVideo = null;
-        this.newCameraVideo = null;
-    }
+    downloadableVods: DownloadableVod[];*/
 
     startSeriesEdit() {
         if (this.uiEditMode !== UIEditMode.none) return;
-        this.resetNewFields();
+        this.changes.reset();
         this.uiEditMode = UIEditMode.series;
     }
 
     startSingleEdit() {
         if (this.uiEditMode !== UIEditMode.none) return;
-        this.resetNewFields();
+        this.changes.reset();
         this.uiEditMode = UIEditMode.single;
     }
 
     async toggleVisibility() {
-        fetch(`/api/stream/${this.lectureId}/visibility`, {
+        /*fetch(`/api/stream/${this.lectureId}/visibility`, {
             method: "PATCH",
             body: JSON.stringify({ private: !this.private }),
             headers: { "Content-Type": "application/json" },
@@ -225,11 +189,11 @@ export class LectureOLD {
                     this.color = "success";
                 }
             }
-        });
+        });*/
     }
 
     async keepProgressesUpdated() {
-        if (!this.isConverting) {
+        /*if (!this.isConverting) {
             return;
         }
         setTimeout(() => {
@@ -250,11 +214,11 @@ export class LectureOLD {
             }
             this.isConverting = this.transcodingProgresses.length > 0;
             this.keepProgressesUpdated();
-        }, 5000);
+        }, 5000);*/
     }
 
     async saveEdit() {
-        this.lastErrors = [];
+        /*this.lastErrors = [];
         if (this.uiEditMode === UIEditMode.none) return;
 
         this.isSaving = true;
@@ -303,7 +267,7 @@ export class LectureOLD {
 
         this.uiEditMode = UIEditMode.none;
         this.isSaving = false;
-        return true;
+        return true;*/
     }
 
     discardEdit() {
@@ -311,7 +275,7 @@ export class LectureOLD {
     }
 
     async saveNewLectureName() {
-        const res = await postData("/api/course/" + this.courseId + "/renameLecture/" + this.lectureId, {
+        /*const res = await postData("/api/course/" + this.courseId + "/renameLecture/" + this.lectureId, {
             name: this.newName,
         });
 
@@ -319,11 +283,11 @@ export class LectureOLD {
             this.name = this.newName;
         }
 
-        return res;
+        return res;*/
     }
 
     async saveNewLectureDescription() {
-        const res = await putData("/api/course/" + this.courseId + "/updateDescription/" + this.lectureId, {
+        /*const res = await putData("/api/course/" + this.courseId + "/updateDescription/" + this.lectureId, {
             name: this.newDescription,
         });
 
@@ -331,33 +295,33 @@ export class LectureOLD {
             this.description = this.newDescription;
         }
 
-        return res;
+        return res;*/
     }
 
     async saveNewLectureHall() {
-        const res = await saveLectureHall([this.lectureId], this.newLectureHallId);
+        /*const res = await saveLectureHall([this.lectureId], this.newLectureHallId);
 
         if (res.status == StatusCodes.OK) {
             this.lectureHallId = this.newLectureHallId;
             this.lectureHallName = "";
         }
 
-        return res;
+        return res;*/
     }
 
     async saveNewIsChatEnabled() {
-        const res = await saveIsChatEnabled(this.lectureId, this.newIsChatEnabled);
+        /*const res = await saveIsChatEnabled(this.lectureId, this.newIsChatEnabled);
 
         if (res.status == StatusCodes.OK) {
             this.isChatEnabled = this.newIsChatEnabled;
         } else {
             res.text().then((t) => showMessage(t));
         }
-        return res;
+        return res;*/
     }
 
     async saveNewVODMedia(): Promise<string[]> {
-        const errors = [];
+        /*const errors = [];
         const mediaInfo = [
             { key: "newCombinedVideo", type: "COMB" },
             { key: "newPresentationVideo", type: "PRES" },
@@ -386,11 +350,11 @@ export class LectureOLD {
                 errors.push(error);
             }
         }
-        return errors;
+        return errors;*/
     }
 
     async saveSeries() {
-        const res = await postData("/api/course/" + this.courseId + "/updateLectureSeries/" + this.lectureId);
+        //const res = await postData("/api/course/" + this.courseId + "/updateLectureSeries/" + this.lectureId);
 
         /*if (res.status == StatusCodes.OK) {
             LectureList.lectures = LectureList.lectures.map((lecture) => {
@@ -407,22 +371,17 @@ export class LectureOLD {
             LectureList.triggerUpdate();
         }*/
 
-        return res;
+        //return res;
     }
 
     async deleteLecture() {
         if (confirm("Confirm deleting video?")) {
-            const res = await postData("/api/course/" + this.courseId + "/deleteLectures", {
-                streamIDs: [this.lectureId.toString()],
-            });
-
-            if (res.status !== StatusCodes.OK) {
+            try {
+                await DataStore.adminLectureList.delete(this.data.CourseID, [this.data.ID]);
+            } catch (e) {
                 alert("An unknown error occurred during the deletion process!");
                 return;
             }
-
-            /*LectureList.lectures = LectureList.lectures.filter((l) => l.lectureId !== this.lectureId);
-            LectureList.triggerUpdate();*/
         }
     }
 
@@ -441,29 +400,30 @@ export class LectureOLD {
     }
 
     getDownloads() {
-        return this.downloadableVods;
+        //return this.downloadableVods;
     }
 
     async deleteFile(fileId: number) {
-        await fetch(`/api/stream/${this.lectureId}/files/${fileId}`, {
+        /*await fetch(`/api/stream/${this.lectureId}/files/${fileId}`, {
             method: "DELETE",
         })
             .catch((err) => console.log(err))
             .then(() => {
                 this.files = this.files.filter((f) => f.id !== fileId);
-            });
+            });*/
     }
 
     hasAttachments(): boolean {
-        if (this.files !== undefined && this.files !== null) {
+        /*if (this.files !== undefined && this.files !== null) {
             const filtered = this.files.filter((f) => f.fileType === FileType.attachment);
             return filtered.length > 0;
         }
-        return false;
+        return false;*/
+        return true;
     }
 
     onFileDrop(e) {
-        if (e.dataTransfer.items) {
+        /*if (e.dataTransfer.items) {
             const kind = e.dataTransfer.items[0].kind;
             switch (kind) {
                 case "file": {
@@ -474,11 +434,11 @@ export class LectureOLD {
                     this.postFileAsURL(e.dataTransfer.getData("URL"));
                 }
             }
-        }
+        }*/
     }
 
     private async postFile(file) {
-        const formData = new FormData();
+        /*const formData = new FormData();
         formData.append("file", file);
         await fetch(`/api/stream/${this.lectureId}/files?type=file`, {
             method: "POST",
@@ -489,11 +449,11 @@ export class LectureOLD {
                 const fileType = 2;
                 this.files.push(new LectureFile({ id, fileType, friendlyName }));
             }),
-        );
+        );*/
     }
 
     private async postFileAsURL(fileURL) {
-        const formData = new FormData();
+        /*const formData = new FormData();
         formData.append("file_url", fileURL);
         await fetch(`/api/stream/${this.lectureId}/files?type=url`, {
             method: "POST",
@@ -504,7 +464,7 @@ export class LectureOLD {
                 const fileType = 2;
                 this.files.push(new LectureFile({ id, fileType, friendlyName }));
             }),
-        );
+        );*/
     }
 }
 

From 0225a59285f65e32610c7bd4d2b1e477b8c7bf97 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 15:55:34 +0200
Subject: [PATCH 06/77] cleanup file

---
 web/ts/change-set.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index fcd0e77a6..a6b5c452f 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -1,7 +1,3 @@
-import {CacheOptions} from "./data-store/cache";
-
-
-
 export class ChangeSet<T> {
     private state: T;
     private changeState: T;

From 29c0977354017b2ff74518d54f2ef74ffd8960e1 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 16:27:57 +0200
Subject: [PATCH 07/77] remove get all streams again, as there is AdminJson
 method

---
 api/courses.go                                    | 12 +++---------
 dao/streams.go                                    |  8 --------
 mock_dao/streams.go                               | 15 ---------------
 .../course/manage/lecture-management-card.gohtml  |  4 ++--
 4 files changed, 5 insertions(+), 34 deletions(-)

diff --git a/api/courses.go b/api/courses.go
index 9f1bf8ea5..7502d87f5 100644
--- a/api/courses.go
+++ b/api/courses.go
@@ -1041,15 +1041,9 @@ func (r coursesRoutes) renameLecture(c *gin.Context) {
 
 func (r coursesRoutes) fetchLectures(c *gin.Context) {
 	tlctx := c.MustGet("TUMLiveContext").(tools.TUMLiveContext)
-	streams, err := r.StreamsDao.GetAllStreamsForCourse(tlctx.Course.ID)
-	if err != nil {
-		_ = c.Error(tools.RequestError{
-			Status:        http.StatusNotFound,
-			CustomMessage: "can not find streams",
-			Err:           err,
-		})
-		return
-	}
+
+	lectureHalls := r.LectureHallsDao.GetAllLectureHalls()
+	streams := tlctx.Course.AdminJson(lectureHalls)
 
 	c.JSON(http.StatusOK, gin.H{
 		"streams": streams,
diff --git a/dao/streams.go b/dao/streams.go
index b70c003a7..b6da68ba5 100755
--- a/dao/streams.go
+++ b/dao/streams.go
@@ -26,7 +26,6 @@ type StreamsDao interface {
 	GetStreamByID(ctx context.Context, id string) (stream model.Stream, err error)
 	GetWorkersForStream(stream model.Stream) ([]model.Worker, error)
 	GetAllStreams() ([]model.Stream, error)
-	GetAllStreamsForCourse(courseID uint) ([]model.Stream, error)
 	ExecAllStreamsWithCoursesAndSubtitles(f func([]StreamWithCourseAndSubtitles))
 	GetCurrentLive(ctx context.Context) (currentLive []model.Stream, err error)
 	GetCurrentLiveNonHidden(ctx context.Context) (currentLive []model.Stream, err error)
@@ -211,13 +210,6 @@ func (d streamsDao) GetAllStreams() ([]model.Stream, error) {
 	return res, err
 }
 
-// GetAllStreamsForCourse returns all streams of a course
-func (d streamsDao) GetAllStreamsForCourse(courseID uint) ([]model.Stream, error) {
-	var res []model.Stream
-	err := DB.Where("course_id = ?", courseID).Find(&res).Error
-	return res, err
-}
-
 type StreamWithCourseAndSubtitles struct {
 	Name, Description, TeachingTerm, CourseName, Subtitles string
 	ID, CourseID                                           uint
diff --git a/mock_dao/streams.go b/mock_dao/streams.go
index 098f3cd4d..f5b32c272 100644
--- a/mock_dao/streams.go
+++ b/mock_dao/streams.go
@@ -164,27 +164,12 @@ func (m *MockStreamsDao) GetAllStreams() ([]model.Stream, error) {
 	return ret0, ret1
 }
 
-// GetAllStreamsForCourse mocks base method.
-func (m MockStreamsDao) GetAllStreamsForCourse(courseID uint) ([]model.Stream, error) {
-	m.ctrl.T.Helper()
-	ret := m.ctrl.Call(m, "GetAllStreamsForCourse", courseID)
-	ret0, _ := ret[0].([]model.Stream)
-	ret1, _ := ret[1].(error)
-	return ret0, ret1
-}
-
 // GetAllStreams indicates an expected call of GetAllStreams.
 func (mr *MockStreamsDaoMockRecorder) GetAllStreams() *gomock.Call {
 	mr.mock.ctrl.T.Helper()
 	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "GetAllStreams", reflect.TypeOf((*MockStreamsDao)(nil).GetAllStreams))
 }
 
-// GetAllStreamsForCourse indicates an expected call of GetAllStreamsForCourse.
-func (mr *MockStreamsDaoMockRecorder) GetAllStreamsForCourse(courseID uint) *gomock.Call {
-	mr.mock.ctrl.T.Helper()
-	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "GetAllStreamsForCourse", reflect.TypeOf((*MockStreamsDao)(nil).GetAllStreamsForCourse), courseID)
-}
-
 // GetCurrentLive mocks base method.
 func (m *MockStreamsDao) GetCurrentLive(ctx context.Context) ([]model.Stream, error) {
 	m.ctrl.T.Helper()
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index a1f08de0f..462c07fd1 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -6,9 +6,9 @@
     {{$ingestBase := .IngestBase}}
     {{$lectureHalls := .LectureHalls}}
 
-    <li :id="`lecture-${lecture.ID}`"
+    <li :id="`lecture-${lecture.data.ID}`"
         x-show="!filterPast || !lecture.isPast"
-        :key="lecture.ID"
+        :key="lecture.data.ID"
         class="w-full mb-4 relative bg-white dark:bg-gray-800 border dark:border-0 rounded shadow">
         <div class="border-t-2 flex justify-between mb-2 rounded-t" :class="'border-' + lecture.color">
             <div class="pt-2 px-2 w-full">

From 0f3272551c4d09c5a144fc2a0ca6baaf94384231 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 16:36:53 +0200
Subject: [PATCH 08/77] Its rendering

---
 .../manage/course-lecture-management.gohtml   |   2 +-
 .../manage/lecture-management-card.gohtml     | 186 +++++++++---------
 web/ts/api/admin-lecture-list.ts              |  66 +++----
 web/ts/data-store/admin-lecture-list.ts       |   4 +-
 4 files changed, 123 insertions(+), 135 deletions(-)

diff --git a/web/template/partial/course/manage/course-lecture-management.gohtml b/web/template/partial/course/manage/course-lecture-management.gohtml
index 1c0c38e1c..2c090be9a 100644
--- a/web/template/partial/course/manage/course-lecture-management.gohtml
+++ b/web/template/partial/course/manage/course-lecture-management.gohtml
@@ -62,7 +62,7 @@
         <div x-data="{ lectureList: new admin.LectureList({{$course.Model.ID}}), lectures: [], marked: [] }"
              x-on:newlectures.window="e => {lectures = e.detail.lectures; marked = e.detail.markedIds; }">
             <ul class="flex" :class="sortAsc ? 'flex-col' : 'flex-col-reverse'">
-                <template x-for="lecture in lectures" :key="lecture.lectureId">
+                <template x-for="lecture in lectures" :key="lecture.data.lectureId">
                     {{template "lecture-management-card" .}}
                 </template>
             </ul>
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 462c07fd1..32f64d6a4 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -6,49 +6,49 @@
     {{$ingestBase := .IngestBase}}
     {{$lectureHalls := .LectureHalls}}
 
-    <li :id="`lecture-${lecture.data.ID}`"
-        x-show="!filterPast || !lecture.isPast"
-        :key="lecture.data.ID"
+    <li :id="`lecture-${lecture.data.lectureId}`"
+        x-show="!filterPast || !lecture.data.isPast"
+        :key="lecture.data.lectureId"
         class="w-full mb-4 relative bg-white dark:bg-gray-800 border dark:border-0 rounded shadow">
-        <div class="border-t-2 flex justify-between mb-2 rounded-t" :class="'border-' + lecture.color">
+        <div class="border-t-2 flex justify-between mb-2 rounded-t" :class="'border-' + lecture.data.color">
             <div class="pt-2 px-2 w-full">
                 <div class="text-3 font-semibold flex justify-start items-center">
-                    <input @change="$event.target.checked ? selectedLectures.push({ id: lecture.lectureId, isPast: lecture.isPast }) : (selectedLectures = selectedLectures.filter(({id}) => id != lecture.lectureId))"
+                    <input @change="$event.target.checked ? selectedLectures.push({ id: lecture.data.lectureId, isPast: lecture.data.isPast }) : (selectedLectures = selectedLectures.filter(({id}) => id != lecture.data.lectureId))"
                            class="w-auto mr-2" type="checkbox"/>
-                    <div x-show="marked.includes(lecture.lectureId)" class="rounded-full bg-green-400 dark:bg-green-600 w-11 h-4 mr-2 text-center text-xs inline-block">
+                    <div x-show="marked.includes(lecture.data.lectureId)" class="rounded-full bg-green-400 dark:bg-green-600 w-11 h-4 mr-2 text-center text-xs inline-block">
                         NEW
                     </div>
-                    <a :href="`/w/${lecture.courseSlug}/${lecture.lectureId}`"><span
-                                x-text="lecture.startDateFormatted()"></span> <i class="fas fa-external-link"></i></a>
+                    <a :href="`/w/${lecture.data.courseSlug}/${lecture.data.lectureId}`"><span
+                                x-text="lecture.data.startDateFormatted"></span> <i class="fas fa-external-link"></i></a>
                 </div>
                 <div class="text-3 font-sans ml-6" x-data="{ showKeys: false }">
-                    <span x-text="lecture.startTimeFormatted()"></span>
+                    <span x-text="lecture.data.startTimeFormatted"></span>
                     -
-                    <span x-text="lecture.endTimeFormatted()"></span>
+                    <span x-text="lecture.data.endTimeFormatted"></span>
                     <i class="ml-2 fas fa-location-pin text-5"></i>
-                    <span x-text="lecture.lectureHallName" class="text-5"></span>
-                    <button @click="showKeys=!showKeys" x-show="lecture.lectureHallId===0 && !lecture.isPast"
+                    <span x-text="lecture.data.lectureHallName" class="text-5"></span>
+                    <button @click="showKeys=!showKeys" x-show="lecture.data.lectureHallId===0 && !lecture.data.isPast"
                             class="bg-indigo-500 rounded px-2 py-0 font-semibold">
                         <i class="fas fa-key mr-2"></i><span x-text="showKeys?'Hide Keys':'Show Keys'"></span></button>
                     <p x-show="showKeys" class="mt-1 ml-2 p-2 border dark:border-gray-600 rounded w-full">
                         <span class="font-semibold">Stream Server:</span>
-                        <span x-text="'{{$ingestBase}}{{$course.Slug}}-'+ lecture.lectureId +'?secret=' + lecture.streamKey"></span>
+                        <span x-text="'{{$ingestBase}}{{$course.Slug}}-'+ lecture.data.lectureId +'?secret=' + lecture.data.streamKey"></span>
                         <i class="fas fa-clipboard hover:text-purple-500"
-                           @click="() => global.copyToClipboard('{{$ingestBase}}{{$course.Slug}}-'+ lecture.lectureId +'?secret=' + lecture.streamKey)"></i>
+                           @click="() => global.copyToClipboard('{{$ingestBase}}{{$course.Slug}}-'+ lecture.data.lectureId +'?secret=' + lecture.data.streamKey)"></i>
                         <br>
                         <span class="font-semibold">Stream Key:</span>
-                        <span x-text="lecture.courseSlug + '-' + lecture.lectureId"></span>
+                        <span x-text="lecture.data.courseSlug + '-' + lecture.data.lectureId"></span>
                         <i class="fas fa-clipboard hover:text-purple-500"
-                           @click="() => global.copyToClipboard(lecture.courseSlug + '-' + lecture.lectureId)"></i>
+                           @click="() => global.copyToClipboard(lecture.data.courseSlug + '-' + lecture.data.lectureId)"></i>
                         <br>
                         {{if ne $user.Role 1}}
                             <span>Want to stream from a lecture hall instead? Please reach out to the RBG.</span>
                         {{end}}
                     </p>
                 </div>
-                <div x-show="lecture.isConverting" class="p-4" x-init="lecture.keepProgressesUpdated()">
+                <div x-show="lecture.data.isConverting" class="p-4" x-init="lecture.data.keepProgressesUpdated()">
                     <span class="text-1 font-semibold text-sm">Converting:</span>
-                    <template x-for="p in lecture.transcodingProgresses">
+                    <template x-for="p in lecture.data.transcodingProgresses">
                         <div class="w-full ml-2">
                             <div class="font-semibold text-sm text-4" x-text="`${p.version} (${p.progress}%)`"></div>
                             <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1 dark:bg-gray-700">
@@ -58,17 +58,17 @@
                         </div>
                     </template>
                 </div>
-                <div x-show="lecture.uiEditMode == 0"
+                <div x-show="lecture.data.uiEditMode == 0"
                      class="text-2 font-sans ml-6 mt-2 pl-3 border-l-4 border-gray-500 dark:border-white">
-                    <span class="italic text-gray-400 dark:text-gray-600" x-show="lecture.name.length === 0">Unknown Name</span>
-                    <span class="text-gray-700 dark:text-white" x-show="lecture.name.length > 0"
-                          x-text="lecture.name"></span>
+                    <span class="italic text-gray-400 dark:text-gray-600" x-show="lecture.data.name.length === 0">Unknown Name</span>
+                    <span class="text-gray-700 dark:text-white" x-show="lecture.data.name.length > 0"
+                          x-text="lecture.data.name"></span>
                 </div>
             </div>
 
             <div class="flex items-center justify-end h-8">
                 <!-- generate subtitles button -->
-                <template x-if="lecture.isRecording">
+                <template x-if="lecture.data.isRecording">
                     <div class="relative mr-2" x-data="{'showLanguageSelect': false}">
                         <button @click="showLanguageSelect = !showLanguageSelect"
                                 @click.outside="showLanguageSelect = false"
@@ -82,13 +82,13 @@
                                 <span class="text-xs text-3">Generate subtitles</span>
                             </div>
                             <div class="pt-3">
-                                <button @click="await admin.requestSubtitles(lecture.lectureId, 'de')"
+                                <button @click="await admin.requestSubtitles(lecture.data.lectureId, 'de')"
                                         class="flex items-center justify-start
                                     py-1 px-2 text-3 w-full hover:bg-gray-200 hover:dark:bg-gray-600">
                                     <i class="text-lg w-8">🇩🇪</i>
                                     <span class="font-light text-sm ">German</span>
                                 </button>
-                                <button @click="await admin.requestSubtitles(lecture.lectureId, 'en')"
+                                <button @click="await admin.requestSubtitles(lecture.data.lectureId, 'en')"
                                         class="flex items-center justify-start
                                     py-1 px-2 text-3 w-full hover:bg-gray-200 hover:dark:bg-gray-600">
                                     <i class="text-lg w-8">🇬🇧</i>
@@ -98,7 +98,7 @@
                         </div>
                     </div>
                 </template>
-                <template x-if="lecture.isRecording && lecture.downloadableVods && lecture.downloadableVods.length > 0">
+                <template x-if="lecture.data.isRecording && lecture.data.downloadableVods && lecture.data.downloadableVods.length > 0">
                     <span class="relative mr-2" x-data="{expand:false}">
                         <button @click="expand=!expand" type="button"
                                 id="menu-button" aria-expanded="true"
@@ -113,7 +113,7 @@
                               aria-labelledby="menu-button" tabindex="-1">
                             <span class="py-1" role="none">
                             <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
-                                <template x-for="file in lecture.getDownloads()">
+                                <template x-for="file in lecture.data.getDownloads()">
                                     <a :href="file.DownloadURL" download
                                        class="hover:bg-gray-100 text-3 dark:hover:bg-gray-600
                                     block px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md"
@@ -124,22 +124,22 @@
                         </span>
                     </span>
                 </template>
-                <div x-show="lecture.isRecording">
+                <div x-show="lecture.data.isRecording">
                     <div class="font-semibold border-success w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black"
-                         :class="lecture.private?'bg-gray-500':'bg-success'">
-                        <i title="This lecture is hidden" x-show="lecture.private" class="fas fa-eye-slash"></i>
-                        <span x-show="!lecture.isConverting">VoD</span>
+                         :class="lecture.data.private?'bg-gray-500':'bg-success'">
+                        <i title="This lecture is hidden" x-show="lecture.data.private" class="fas fa-eye-slash"></i>
+                        <span x-show="!lecture.data.isConverting">VoD</span>
                     </div>
                 </div>
-                <div x-show="lecture.isLiveNow"
+                <div x-show="lecture.data.isLiveNow"
                      class="font-semibold bg-danger border-danger w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black">
                     Live
                 </div>
-                <div x-show="!lecture.isRecording && lecture.isPast"
+                <div x-show="!lecture.data.isRecording && lecture.data.isPast"
                      class="font-semibold bg-warn border-warn w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black">
                     Past
                 </div>
-                <div x-show="!lecture.isPast && !lecture.isLiveNow && !lecture.isRecording"
+                <div x-show="!lecture.data.isPast && !lecture.data.isLiveNow && !lecture.data.isRecording"
                      class="font-semibold bg-info border-info w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black">
                     Scheduled
                 </div>
@@ -184,29 +184,29 @@
                             class="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 border border-black rounded shadow-md overflow-hidden"
                     >
                         <div>
-                            <button @click="lecture.startSingleEdit(); closeMoreDropdown();"
+                            <button @click="lecture.data.startSingleEdit(); closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                 Edit Lecture
                             </button>
-                            <button @click="lecture.deleteLecture(); closeMoreDropdown();"
+                            <button @click="lecture.data.deleteLecture(); closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
                                 Delete Lecture
                             </button>
-                            <button x-text="lecture.private?'Make public': 'Make private'"
+                            <button x-text="lecture.data.private?'Make public': 'Make private'"
                                     class="block w-full px-4 py-2 text-left text-sm"
-                                    @click="lecture.toggleVisibility(); closeMoreDropdown()"
-                                    x-show="lecture.isRecording"
-                                    :class="lecture.private?'text-gray-400 dark:hover:text-gray-500 hover:text-gray-300':'text-red-400 dark:hover:text-red-500 hover:text-red-300'">
+                                    @click="lecture.data.toggleVisibility(); closeMoreDropdown()"
+                                    x-show="lecture.data.isRecording"
+                                    :class="lecture.data.private?'text-gray-400 dark:hover:text-gray-500 hover:text-gray-300':'text-red-400 dark:hover:text-red-500 hover:text-red-300'">
                                 Make private
                             </button>
                         </div>
-                        <template x-if="lecture.seriesIdentifier.length > 0">
+                        <template x-if="lecture.data.seriesIdentifier.length > 0">
                             <div class="border-t border-black">
-                                <button @click="lecture.startSeriesEdit(); closeMoreDropdown();"
+                                <button @click="lecture.data.startSeriesEdit(); closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                     Edit Series
                                 </button>
-                                <button @click="lecture.deleteLectureSeries(); closeMoreDropdown();"
+                                <button @click="lecture.data.deleteLectureSeries(); closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
                                     Delete Series
                                 </button>
@@ -217,39 +217,39 @@
             </div>
         </div>
 
-        <button x-show="lecture.uiEditMode == 0"
-                @click="lecture.startSingleEdit(); closeMoreDropdown();"
+        <button x-show="lecture.data.uiEditMode == 0"
+                @click="lecture.data.startSingleEdit(); closeMoreDropdown();"
                 class="bg-gray-100 dark:bg-gray-900 w-full py-2 mt-2 rounded-b">
             <span class="text-gray-700 dark:text-gray-300">Edit Lecture</span>
         </button>
 
-        <div x-show="lecture.uiEditMode > 0" class="grid gap-y-4 p-4">
+        <div x-show="lecture.data.uiEditMode > 0" class="grid gap-y-4 p-4">
             <article class="grid gap-2 w-full">
                 <header class="border-b dark:border-gray-600 w-full">
                     <h6 class="text-sm text-5 font-light">Media</h6>
                 </header>
-                <article x-data="{ id: `lecture_media_${lecture.lectureId}`, progress: { 'COMB': 0, 'PRES': 0, 'CAM': 0 } }"
-                         @voduploadprogressedit.window="({ detail: { type, progress, lectureId } }) => { if (lectureId === lecture.lectureId) { progress[type] = progress; }}"
+                <article x-data="{ id: `lecture_media_${lecture.data.lectureId}`, progress: { 'COMB': 0, 'PRES': 0, 'CAM': 0 } }"
+                         @voduploadprogressedit.window="({ detail: { type, progress, lectureId } }) => { if (lectureId === lecture.data.lectureId) { progress[type] = progress; }}"
                          class="w-full flex justify-center flex-wrap">
                     <div x-data="{ inputId: `${id}_comb` }"
                          x-on:click="document.querySelector(`#${inputId}`).click()"
                          class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
                     >
-                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.lectureId}/thumbs/vod?type=COMB')`"></div>
+                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.data.lectureId}/thumbs/vod?type=COMB')`"></div>
                         <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2">
                             Combined Video
                         </div>
                         <div class="w-full h-full flex justify-center items-center drop-shadow-[2px_4px_6px_black]">
-                            <span x-show="!lecture.newCombinedVideo">Click to upload new Video</span>
-                            <template x-if="lecture.newCombinedVideo !== null">
-                                <span class="text-green-400" x-text="lecture.newCombinedVideo.name"></span>
+                            <span x-show="!lecture.data.newCombinedVideo">Click to upload new Video</span>
+                            <template x-if="lecture.data.newCombinedVideo !== null">
+                                <span class="text-green-400" x-text="lecture.data.newCombinedVideo.name"></span>
                             </template>
                         </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.newCombinedVideo = null; lecture.updateIsDirty(); }" x-show="lecture.newCombinedVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newCombinedVideo = null; lecture.data.updateIsDirty(); }" x-show="lecture.data.newCombinedVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                             <i class="fa fa-xmark text-3"></i>
                         </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.newCombinedVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
-                        <div x-show="lecture.isSaving && lecture.newCombinedVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
+                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCombinedVideo = $event.target.files[0]; lecture.data.updateIsDirty(); }" />
+                        <div x-show="lecture.data.isSaving && lecture.data.newCombinedVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                             <span x-text="`${progress.COMB}%`"></span>
                         </div>
                     </div>
@@ -257,21 +257,21 @@
                          x-on:click="document.querySelector(`#${inputId}`).click()"
                          class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
                     >
-                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.lectureId}/thumbs/vod?type=PRES')`"></div>
+                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.data.lectureId}/thumbs/vod?type=PRES')`"></div>
                         <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2">
                             Presentation Video
                         </div>
                         <div class="w-full h-full flex justify-center items-center p-2 drop-shadow-[2px_4px_6px_black]">
-                            <span x-show="!lecture.newPresentationVideo">Click to upload new Video</span>
-                            <template x-if="lecture.newPresentationVideo !== null">
-                                <span class="text-green-400" x-text="lecture.newPresentationVideo.name"></span>
+                            <span x-show="!lecture.data.newPresentationVideo">Click to upload new Video</span>
+                            <template x-if="lecture.data.newPresentationVideo !== null">
+                                <span class="text-green-400" x-text="lecture.data.newPresentationVideo.name"></span>
                             </template>
                         </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.newPresentationVideo = null; lecture.updateIsDirty(); }" x-show="lecture.newPresentationVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newPresentationVideo = null; lecture.data.updateIsDirty(); }" x-show="lecture.data.newPresentationVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                             <i class="fa fa-xmark text-3"></i>
                         </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.newPresentationVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
-                        <div x-show="lecture.isSaving && lecture.newPresentationVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
+                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newPresentationVideo = $event.target.files[0]; lecture.data.updateIsDirty(); }" />
+                        <div x-show="lecture.data.isSaving && lecture.data.newPresentationVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                             <span x-text="`${progress.PRES}%`"></span>
                         </div>
                     </div>
@@ -280,21 +280,21 @@
                             x-on:click="document.querySelector(`#${inputId}`).click()"
                             class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
                     >
-                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.lectureId}/thumbs/vod?type=CAM')`"></div>
+                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.data.lectureId}/thumbs/vod?type=CAM')`"></div>
                         <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2">
                             Camera Video
                         </div>
                         <div class="w-full h-full flex justify-center items-center p-2 drop-shadow-[2px_4px_6px_black]">
-                            <span x-show="!lecture.newCameraVideo">Click to upload new Video</span>
-                            <template x-if="lecture.newCameraVideo !== null">
-                                <span class="text-green-400" x-text="lecture.newCameraVideo.name"></span>
+                            <span x-show="!lecture.data.newCameraVideo">Click to upload new Video</span>
+                            <template x-if="lecture.data.newCameraVideo !== null">
+                                <span class="text-green-400" x-text="lecture.data.newCameraVideo.name"></span>
                             </template>
                         </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.newCameraVideo = null; lecture.updateIsDirty(); }" x-show="lecture.newCameraVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newCameraVideo = null; lecture.data.updateIsDirty(); }" x-show="lecture.data.newCameraVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                             <i class="fa fa-xmark text-3"></i>
                         </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.newCameraVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
-                        <div x-show="lecture.isSaving && lecture.newCameraVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
+                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCameraVideo = $event.target.files[0]; lecture.data.updateIsDirty(); }" />
+                        <div x-show="lecture.data.isSaving && lecture.data.newCameraVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                             <span x-text="`${progress.CAM}%`"></span>
                         </div>
                     </div>
@@ -307,8 +307,8 @@
                     <label :for="id" class="hidden">Lecture Title</label>
                     <input :id="id"
                            class="grow tl-input" type="text"
-                           x-model="lecture.newName"
-                           x-on:keyup="lecture.updateIsDirty()"
+                           x-model="lecture.data.newName"
+                           x-on:keyup="lecture.data.updateIsDirty()"
                            placeholder="Lecture 2: Dark-Patterns I"
                            autocomplete="off">
                 </article>
@@ -317,13 +317,13 @@
                              class="w-full">
                         <label :for="id" class="hidden">Lecture description</label>
                         <textarea :id="id"
-                                  @drop.prevent="(e) => lecture.onFileDrop(e)"
+                                  @drop.prevent="(e) => lecture.data.onFileDrop(e)"
                                   @dragover.prevent=""
                                   class="tl-textarea grow"
                                   placeholder="Add a nice description, links, and more. You can use Markdown. Drop files here."
                                   autocomplete="off"
-                                  x-model="lecture.newDescription"
-                                  x-on:keyup="lecture.updateIsDirty()"></textarea>
+                                  x-model="lecture.data.newDescription"
+                                  x-on:keyup="lecture.data.updateIsDirty()"></textarea>
                     </article>
                     <article class="flex justify-center">
                         <span class="text-xs text-3 my-auto">Attach files or URL to files by Drag & Drop in the description field.</span>
@@ -350,7 +350,7 @@
                     </article>
                 </section>
 
-                <div x-show="!lecture.isPast && !lecture.isRecording"
+                <div x-show="!lecture.data.isPast && !lecture.data.isRecording"
                      class="p-3 border dark:border-gray-600 rounded mt-3">
                     {{if eq $user.Role 1}}
                         <div x-data="{ id: $id('select') }">
@@ -358,15 +358,15 @@
                                 <span>Select Lecture Hall</span>
                                 <select class="text-gray-700 dark:text-gray-300 dark:bg-secondary bg-gray-100 p-2"
                                         :id="id"
-                                        x-on:change="lecture.updateIsDirty()"
-                                        x-model="lecture.newLectureHallId">
+                                        x-on:change="lecture.data.updateIsDirty()"
+                                        x-model="lecture.data.newLectureHallId">
                                     <option class="text-gray-700 dark:text-gray-300" value="0">
                                         Self streaming
                                     </option>
                                     {{range $lectureHall := $lectureHalls}}
                                         <option class="text-gray-700 dark:text-gray-300"
                                                 value="{{$lectureHall.Model.ID}}"
-                                                :selected="lecture.lectureHallId === '{{$lectureHall.Model.ID}}'">
+                                                :selected="lecture.data.lectureHallId === '{{$lectureHall.Model.ID}}'">
                                             {{$lectureHall.Name}}
                                         </option>
                                     {{end}}
@@ -375,10 +375,10 @@
                         </div>
                     {{end}}
                     {{if eq $user.Role 2}}
-                        <div x-show="lecture.newLectureHallId !== '0'">
+                        <div x-show="lecture.data.newLectureHallId !== '0'">
                             This lecture will be streamed from <span
                                     class="font-semibold text-white">{{range $lectureHall := $lectureHalls}}<span
-                                        x-show="lecture.lectureHallId === '{{$lectureHall.Model.ID}}'">{{$lectureHall.Name}}</span>{{end}}</span>.
+                                        x-show="lecture.data.lectureHallId === '{{$lectureHall.Model.ID}}'">{{$lectureHall.Name}}</span>{{end}}</span>.
                             If you need this changed or want to stream from home (with obs, zoom etc.), please reach
                             out to the RBG.
                         </div>
@@ -386,18 +386,18 @@
                 </div>
             </article>
 
-            <template x-if="lecture.hasAttachments()">
+            <template x-if="lecture.data.hasAttachments()">
                 <article>
                     <h6 class="text-sm text-5 font-light border-b dark:border-gray-600">Attachments</h6>
                     <ul class="list-disc grid py-2 ml-6">
-                        <template x-for="file in lecture.files">
+                        <template x-for="file in lecture.data.files">
                             <template x-if="file.fileType === admin.FileType.attachment">
                                 <li>
                                     <section class="flex items-center">
                                     <span class="text-xs font-semibold text-3 my-auto"
                                           x-text="file.friendlyName"></span>
                                         <button class="px-3"
-                                                @click="lecture.deleteFile(file.id)">
+                                                @click="lecture.data.deleteFile(file.id)">
                                             <i class="fa fa-xmark"></i>
                                         </button>
                                     </section>
@@ -408,17 +408,17 @@
                 </article>
             </template>
 
-            <template x-if="lecture.uiEditMode > 0"> <!-- only render if in edit mode to avoid network calls -->
+            <template x-if="lecture.data.uiEditMode > 0"> <!-- only render if in edit mode to avoid network calls -->
                 {{template "editvideosections"}}
             </template>
 
-            <span x-show="lecture.isRecording" class="absolute left-0 bottom-0 p-4">
+            <span x-show="lecture.data.isRecording" class="absolute left-0 bottom-0 p-4">
                 <!-- buttons go here -->
             </span>
 
-            <div x-show="lecture.lastErrors.length > 0" class="px-6 py-3 bg-red-400 my-3 rounded">
+            <div x-show="lecture.data.lastErrors.length > 0" class="px-6 py-3 bg-red-400 my-3 rounded">
                 <ul>
-                    <template x-for="error in lecture.lastErrors">
+                    <template x-for="error in lecture.data.lastErrors">
                         <li x-text="error"></li>
                     </template>
                 </ul>
@@ -427,8 +427,8 @@
             <div class="mt-6 flex items-center justify-between">
                 <section class="flex items-center py-1 px-3">
                     <label class="relative inline-flex items-center cursor-pointer">
-                        <input type="checkbox" value="" class="sr-only peer" @change="lecture.updateIsDirty()"
-                               x-model="lecture.newIsChatEnabled">
+                        <input type="checkbox" value="" class="sr-only peer" @change="lecture.data.updateIsDirty()"
+                               x-model="lecture.data.newIsChatEnabled">
                         <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-600
                         dark:peer-focus:ring-indigo-600 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full
                         peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px]
@@ -438,15 +438,15 @@
                     </label>
                 </section>
                 <div>
-                    <button :disabled="lecture.isSaving" @click="lecture.discardEdit();"
+                    <button :disabled="lecture.data.isSaving" @click="lecture.data.discardEdit();"
                             class="px-8 py-3 text-2 text-white rounded bg-indigo-500/70 hover:bg-indigo-500/90 dark:bg-indigo-500/10 disabled:opacity-20 dark:hover:bg-indigo-500/20 mr-4">
                         Discard Changes
                     </button>
                     <button
-                            @click="lecture.saveEdit();"
-                            :disabled="!lecture.isDirty || lecture.isSaving"
+                            @click="lecture.data.saveEdit();"
+                            :disabled="!lecture.data.isDirty || lecture.data.isSaving"
                             class="px-8 py-3 text-2 rounded text-white bg-indigo-500 hover:bg-indigo-600 disabled:opacity-20 disabled:hover:bg-indigo-500"
-                            x-text="lecture.isSaving ? 'loading ...' : (lecture.uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
+                            x-text="lecture.data.isSaving ? 'loading ...' : (lecture.data.uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
                     ></button>
                 </div>
             </div>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 56790d292..13f9836ac 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -2,14 +2,14 @@ import { del, get, post, put } from "../utilities/fetch-wrappers";
 import {StatusCodes} from "http-status-codes";
 import {patchData, postData} from "../global";
 
-export type UpdateLectureMetaRequest = {
+export interface UpdateLectureMetaRequest {
     name?: string;
     description?: string;
     lectureHallId?: number;
     isChatEnabled?: boolean;
 }
 
-export type CreateNewLectureRequest = {
+export interface CreateNewLectureRequest {
     title: "",
     lectureHallId: 0,
     start: "",
@@ -30,40 +30,28 @@ export type CreateNewLectureRequest = {
 }
 
 export interface Lecture {
-    ID: number;
-    CreatedAt: string;
-    UpdatedAt: string;
-    DeletedAt: string;
-    Name: string;
-    Description: string;
-    CourseID: number;
-    Start: string;
-    End: string;
-    ChatEnabled: boolean;
-    RoomName: string;
-    RoomCode: string;
-    EventTypeName: string;
-    TUMOnlineEventID: number;
-    SeriesIdentifier: string;
-    StreamKey: string;
-    PlaylistUrl: string;
-    PlaylistUrlPRES: string;
-    PlaylistUrlCAM: string;
-    LiveNow: boolean;
-    LiveNowTimestamp: string;
-    Recording: boolean;
-    Premiere: boolean;
-    Ended: boolean;
-    VodViews: number;
-    StartOffset: number;
-    EndOffset: number;
-    LectureHallID: number;
-    ThumbInterval: number;
-    StreamName: string;
-    Duration: LectureDuration;
-    //VideoSections?: null;
-    Private: boolean;
-    Watched: boolean;
+    color:                 string;
+    courseId:              number;
+    courseSlug:            string;
+    description:           string;
+    downloadableVods:      DownloadableVOD[];
+    end:                   string;
+    files:                 null;
+    hasStats:              boolean;
+    isChatEnabled:         boolean;
+    isConverting:          boolean;
+    isLiveNow:             boolean;
+    isPast:                boolean;
+    isRecording:           boolean;
+    lectureHallId:         number;
+    lectureHallName:       string;
+    lectureId:             number;
+    name:                  string;
+    private:               boolean;
+    seriesIdentifier:      string;
+    start:                 string;
+    streamKey:             string;
+    transcodingProgresses: any[];
 
     // Clientside computed fields
     startDate: Date;
@@ -74,9 +62,9 @@ export interface Lecture {
     endTimeFormatted: string;
 }
 
-export interface LectureDuration {
-    Int32: number;
-    Valid: boolean;
+export interface DownloadableVOD {
+    FriendlyName: string;
+    DownloadURL:  string;
 }
 
 /**
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 829dfd098..e2767b008 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -17,11 +17,11 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
     protected async fetcher(courseId: number): Promise<Lecture[]> {
         const result = await AdminLectureList.get(courseId);
         return result.map((s) => {
-            s.startDate = new Date(s.Start);
+            s.startDate = new Date(s.start);
             s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
             s.startTimeFormatted = s.startDate.toLocaleTimeString("en-US", timeFormatOptions);
 
-            s.endDate = new Date(s.End);
+            s.endDate = new Date(s.end);
             s.endDateFormatted = s.endDate.toLocaleDateString("en-US", dateFormatOptions);
             s.endTimeFormatted = s.endDate.toLocaleTimeString("en-US", timeFormatOptions);
 

From 797d00d4724ecfbab6c247fe49f723ac6e5135be Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 16:48:20 +0200
Subject: [PATCH 09/77] further dev :S

---
 .../manage/lecture-management-card.gohtml     | 46 +++++++++----------
 web/ts/api/admin-lecture-list.ts              |  1 +
 web/ts/data-store/admin-lecture-list.ts       |  4 +-
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 32f64d6a4..a66c767bf 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -46,7 +46,7 @@
                         {{end}}
                     </p>
                 </div>
-                <div x-show="lecture.data.isConverting" class="p-4" x-init="lecture.data.keepProgressesUpdated()">
+                <div x-show="lecture.data.isConverting" class="p-4" x-init="lecture.keepProgressesUpdated()">
                     <span class="text-1 font-semibold text-sm">Converting:</span>
                     <template x-for="p in lecture.data.transcodingProgresses">
                         <div class="w-full ml-2">
@@ -113,7 +113,7 @@
                               aria-labelledby="menu-button" tabindex="-1">
                             <span class="py-1" role="none">
                             <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
-                                <template x-for="file in lecture.data.getDownloads()">
+                                <template x-for="file in lecture.getDownloads()">
                                     <a :href="file.DownloadURL" download
                                        class="hover:bg-gray-100 text-3 dark:hover:bg-gray-600
                                     block px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md"
@@ -184,17 +184,17 @@
                             class="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 border border-black rounded shadow-md overflow-hidden"
                     >
                         <div>
-                            <button @click="lecture.data.startSingleEdit(); closeMoreDropdown();"
+                            <button @click="lecture.startSingleEdit(); closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                 Edit Lecture
                             </button>
-                            <button @click="lecture.data.deleteLecture(); closeMoreDropdown();"
+                            <button @click="lecture.deleteLecture(); closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
                                 Delete Lecture
                             </button>
                             <button x-text="lecture.data.private?'Make public': 'Make private'"
                                     class="block w-full px-4 py-2 text-left text-sm"
-                                    @click="lecture.data.toggleVisibility(); closeMoreDropdown()"
+                                    @click="lecture.toggleVisibility(); closeMoreDropdown()"
                                     x-show="lecture.data.isRecording"
                                     :class="lecture.data.private?'text-gray-400 dark:hover:text-gray-500 hover:text-gray-300':'text-red-400 dark:hover:text-red-500 hover:text-red-300'">
                                 Make private
@@ -202,11 +202,11 @@
                         </div>
                         <template x-if="lecture.data.seriesIdentifier.length > 0">
                             <div class="border-t border-black">
-                                <button @click="lecture.data.startSeriesEdit(); closeMoreDropdown();"
+                                <button @click="lecture.startSeriesEdit(); closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                     Edit Series
                                 </button>
-                                <button @click="lecture.data.deleteLectureSeries(); closeMoreDropdown();"
+                                <button @click="lecture.deleteLectureSeries(); closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
                                     Delete Series
                                 </button>
@@ -218,7 +218,7 @@
         </div>
 
         <button x-show="lecture.data.uiEditMode == 0"
-                @click="lecture.data.startSingleEdit(); closeMoreDropdown();"
+                @click="lecture.startSingleEdit(); closeMoreDropdown();"
                 class="bg-gray-100 dark:bg-gray-900 w-full py-2 mt-2 rounded-b">
             <span class="text-gray-700 dark:text-gray-300">Edit Lecture</span>
         </button>
@@ -245,10 +245,10 @@
                                 <span class="text-green-400" x-text="lecture.data.newCombinedVideo.name"></span>
                             </template>
                         </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newCombinedVideo = null; lecture.data.updateIsDirty(); }" x-show="lecture.data.newCombinedVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newCombinedVideo = null; lecture.updateIsDirty(); }" x-show="lecture.data.newCombinedVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                             <i class="fa fa-xmark text-3"></i>
                         </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCombinedVideo = $event.target.files[0]; lecture.data.updateIsDirty(); }" />
+                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCombinedVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
                         <div x-show="lecture.data.isSaving && lecture.data.newCombinedVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                             <span x-text="`${progress.COMB}%`"></span>
                         </div>
@@ -267,10 +267,10 @@
                                 <span class="text-green-400" x-text="lecture.data.newPresentationVideo.name"></span>
                             </template>
                         </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newPresentationVideo = null; lecture.data.updateIsDirty(); }" x-show="lecture.data.newPresentationVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newPresentationVideo = null; lecture.updateIsDirty(); }" x-show="lecture.data.newPresentationVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                             <i class="fa fa-xmark text-3"></i>
                         </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newPresentationVideo = $event.target.files[0]; lecture.data.updateIsDirty(); }" />
+                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newPresentationVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
                         <div x-show="lecture.data.isSaving && lecture.data.newPresentationVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                             <span x-text="`${progress.PRES}%`"></span>
                         </div>
@@ -290,10 +290,10 @@
                                 <span class="text-green-400" x-text="lecture.data.newCameraVideo.name"></span>
                             </template>
                         </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newCameraVideo = null; lecture.data.updateIsDirty(); }" x-show="lecture.data.newCameraVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newCameraVideo = null; lecture.updateIsDirty(); }" x-show="lecture.data.newCameraVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                             <i class="fa fa-xmark text-3"></i>
                         </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCameraVideo = $event.target.files[0]; lecture.data.updateIsDirty(); }" />
+                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCameraVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
                         <div x-show="lecture.data.isSaving && lecture.data.newCameraVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                             <span x-text="`${progress.CAM}%`"></span>
                         </div>
@@ -308,7 +308,7 @@
                     <input :id="id"
                            class="grow tl-input" type="text"
                            x-model="lecture.data.newName"
-                           x-on:keyup="lecture.data.updateIsDirty()"
+                           x-on:keyup="lecture.updateIsDirty()"
                            placeholder="Lecture 2: Dark-Patterns I"
                            autocomplete="off">
                 </article>
@@ -317,13 +317,13 @@
                              class="w-full">
                         <label :for="id" class="hidden">Lecture description</label>
                         <textarea :id="id"
-                                  @drop.prevent="(e) => lecture.data.onFileDrop(e)"
+                                  @drop.prevent="(e) => lecture.onFileDrop(e)"
                                   @dragover.prevent=""
                                   class="tl-textarea grow"
                                   placeholder="Add a nice description, links, and more. You can use Markdown. Drop files here."
                                   autocomplete="off"
                                   x-model="lecture.data.newDescription"
-                                  x-on:keyup="lecture.data.updateIsDirty()"></textarea>
+                                  x-on:keyup="lecture.updateIsDirty()"></textarea>
                     </article>
                     <article class="flex justify-center">
                         <span class="text-xs text-3 my-auto">Attach files or URL to files by Drag & Drop in the description field.</span>
@@ -358,7 +358,7 @@
                                 <span>Select Lecture Hall</span>
                                 <select class="text-gray-700 dark:text-gray-300 dark:bg-secondary bg-gray-100 p-2"
                                         :id="id"
-                                        x-on:change="lecture.data.updateIsDirty()"
+                                        x-on:change="lecture.updateIsDirty()"
                                         x-model="lecture.data.newLectureHallId">
                                     <option class="text-gray-700 dark:text-gray-300" value="0">
                                         Self streaming
@@ -386,7 +386,7 @@
                 </div>
             </article>
 
-            <template x-if="lecture.data.hasAttachments()">
+            <template x-if="lecture.data.hasAttachments">
                 <article>
                     <h6 class="text-sm text-5 font-light border-b dark:border-gray-600">Attachments</h6>
                     <ul class="list-disc grid py-2 ml-6">
@@ -397,7 +397,7 @@
                                     <span class="text-xs font-semibold text-3 my-auto"
                                           x-text="file.friendlyName"></span>
                                         <button class="px-3"
-                                                @click="lecture.data.deleteFile(file.id)">
+                                                @click="lecture.deleteFile(file.id)">
                                             <i class="fa fa-xmark"></i>
                                         </button>
                                     </section>
@@ -427,7 +427,7 @@
             <div class="mt-6 flex items-center justify-between">
                 <section class="flex items-center py-1 px-3">
                     <label class="relative inline-flex items-center cursor-pointer">
-                        <input type="checkbox" value="" class="sr-only peer" @change="lecture.data.updateIsDirty()"
+                        <input type="checkbox" value="" class="sr-only peer" @change="lecture.updateIsDirty()"
                                x-model="lecture.data.newIsChatEnabled">
                         <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-600
                         dark:peer-focus:ring-indigo-600 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full
@@ -438,12 +438,12 @@
                     </label>
                 </section>
                 <div>
-                    <button :disabled="lecture.data.isSaving" @click="lecture.data.discardEdit();"
+                    <button :disabled="lecture.data.isSaving" @click="lecture.discardEdit();"
                             class="px-8 py-3 text-2 text-white rounded bg-indigo-500/70 hover:bg-indigo-500/90 dark:bg-indigo-500/10 disabled:opacity-20 dark:hover:bg-indigo-500/20 mr-4">
                         Discard Changes
                     </button>
                     <button
-                            @click="lecture.data.saveEdit();"
+                            @click="lecture.saveEdit();"
                             :disabled="!lecture.data.isDirty || lecture.data.isSaving"
                             class="px-8 py-3 text-2 rounded text-white bg-indigo-500 hover:bg-indigo-600 disabled:opacity-20 disabled:hover:bg-indigo-500"
                             x-text="lecture.data.isSaving ? 'loading ...' : (lecture.data.uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 13f9836ac..01c7b8bda 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -54,6 +54,7 @@ export interface Lecture {
     transcodingProgresses: any[];
 
     // Clientside computed fields
+    hasAttachments: boolean;
     startDate: Date;
     startDateFormatted: string;
     startTimeFormatted: string;
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index e2767b008..49988d086 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -1,6 +1,6 @@
 import { StreamableMapProvider } from "./provider";
 import {AdminLectureList, Lecture, UpdateLectureMetaRequest} from "../api/admin-lecture-list";
-import {Time} from "../utilities/time";
+import {FileType} from "../edit-course";
 
 const dateFormatOptions: Intl.DateTimeFormatOptions = {
     weekday: "long",
@@ -17,6 +17,8 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
     protected async fetcher(courseId: number): Promise<Lecture[]> {
         const result = await AdminLectureList.get(courseId);
         return result.map((s) => {
+            s.hasAttachments = (s.files || []).some((f) => f.fileType === FileType.attachment);
+
             s.startDate = new Date(s.start);
             s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
             s.startTimeFormatted = s.startDate.toLocaleTimeString("en-US", timeFormatOptions);

From 17f460afa532f57f785da554a4d8e13a12eceac2 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 21:07:57 +0200
Subject: [PATCH 10/77] added some directive

---
 web/assets/init-admin.js                      |  46 ++++
 web/template/admin/admin.gohtml               |   1 +
 .../manage/course-lecture-management.gohtml   |   2 +-
 .../manage/lecture-management-card.gohtml     | 212 +++++++-----------
 web/ts/api/admin-lecture-list.ts              |   5 +
 web/ts/change-set.ts                          |  36 ++-
 web/ts/data-store/admin-lecture-list.ts       |   8 +-
 web/ts/edit-course.ts                         |  35 ++-
 8 files changed, 204 insertions(+), 141 deletions(-)
 create mode 100644 web/assets/init-admin.js

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
new file mode 100644
index 000000000..3c7247d93
--- /dev/null
+++ b/web/assets/init-admin.js
@@ -0,0 +1,46 @@
+document.addEventListener("alpine:init", () => {
+    Alpine.directive("bind-change-set", (el, { expression, value, modifiers }, { evaluate, cleanup }) => {
+        const changeSet = evaluate(expression);
+        const fieldName = value;
+
+        if (el.type === "file") {
+            const [type] = modifiers;
+            const isSingle = type === "single";
+
+            const changeHandler = (e) => {
+                changeSet.patch(fieldName, isSingle ? e.target.files[0] : e.target.files);
+            };
+
+            const onChangeSetUpdateHandler = (data) => {
+                if (!data[fieldName]) {
+                    el.value = "";
+                }
+            };
+
+            changeSet.listen(onChangeSetUpdateHandler);
+            el.addEventListener('change', changeHandler);
+
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+                el.removeEventListener('change', changeHandler)
+            })
+        } else {
+            const keyupHandler = (e) => {
+                changeSet.patch(fieldName, e.target.value);
+            };
+
+            const onChangeSetUpdateHandler = (data) => {
+                el.value = data[fieldName];
+            };
+
+            changeSet.listen(onChangeSetUpdateHandler);
+            el.addEventListener('keyup', keyupHandler)
+            el.value = changeSet.get()[fieldName];
+
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+                el.removeEventListener('keyup', keyupHandler)
+            })
+        }
+    });
+});
\ No newline at end of file
diff --git a/web/template/admin/admin.gohtml b/web/template/admin/admin.gohtml
index 8e7549b56..72a4ff16c 100755
--- a/web/template/admin/admin.gohtml
+++ b/web/template/admin/admin.gohtml
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>{{.IndexData.Branding.Title}} | Administration</title>
     {{template "headImports" .IndexData.VersionTag}}
+    <script src="/static/assets/init-admin.js"></script>
     <script src="/static/assets/ts-dist/admin.bundle.js?v={{.IndexData.VersionTag}}"></script>
 </head>
 <body>
diff --git a/web/template/partial/course/manage/course-lecture-management.gohtml b/web/template/partial/course/manage/course-lecture-management.gohtml
index 2c090be9a..f8a80c064 100644
--- a/web/template/partial/course/manage/course-lecture-management.gohtml
+++ b/web/template/partial/course/manage/course-lecture-management.gohtml
@@ -62,7 +62,7 @@
         <div x-data="{ lectureList: new admin.LectureList({{$course.Model.ID}}), lectures: [], marked: [] }"
              x-on:newlectures.window="e => {lectures = e.detail.lectures; marked = e.detail.markedIds; }">
             <ul class="flex" :class="sortAsc ? 'flex-col' : 'flex-col-reverse'">
-                <template x-for="lecture in lectures" :key="lecture.data.lectureId">
+                <template x-for="lecture in lectures" :key="lecture.lectureData.lectureId">
                     {{template "lecture-management-card" .}}
                 </template>
             </ul>
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index a66c767bf..bc77364c9 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -6,49 +6,50 @@
     {{$ingestBase := .IngestBase}}
     {{$lectureHalls := .LectureHalls}}
 
-    <li :id="`lecture-${lecture.data.lectureId}`"
-        x-show="!filterPast || !lecture.data.isPast"
-        :key="lecture.data.lectureId"
+    <li x-data="lecture"
+        x-show="!filterPast || !lectureData.isPast"
+        :id="`lecture-${lectureData.lectureId}`"
+        :key="lectureData.lectureId"
         class="w-full mb-4 relative bg-white dark:bg-gray-800 border dark:border-0 rounded shadow">
-        <div class="border-t-2 flex justify-between mb-2 rounded-t" :class="'border-' + lecture.data.color">
+        <div class="border-t-2 flex justify-between mb-2 rounded-t" :class="'border-' + lectureData.color">
             <div class="pt-2 px-2 w-full">
                 <div class="text-3 font-semibold flex justify-start items-center">
-                    <input @change="$event.target.checked ? selectedLectures.push({ id: lecture.data.lectureId, isPast: lecture.data.isPast }) : (selectedLectures = selectedLectures.filter(({id}) => id != lecture.data.lectureId))"
+                    <input @change="$event.target.checked ? selectedLectures.push({ id: lectureData.lectureId, isPast: lectureData.isPast }) : (selectedLectures = selectedLectures.filter(({id}) => id != lectureData.lectureId))"
                            class="w-auto mr-2" type="checkbox"/>
-                    <div x-show="marked.includes(lecture.data.lectureId)" class="rounded-full bg-green-400 dark:bg-green-600 w-11 h-4 mr-2 text-center text-xs inline-block">
+                    <div x-show="marked.includes(lectureData.lectureId)" class="rounded-full bg-green-400 dark:bg-green-600 w-11 h-4 mr-2 text-center text-xs inline-block">
                         NEW
                     </div>
-                    <a :href="`/w/${lecture.data.courseSlug}/${lecture.data.lectureId}`"><span
-                                x-text="lecture.data.startDateFormatted"></span> <i class="fas fa-external-link"></i></a>
+                    <a :href="`/w/${lectureData.courseSlug}/${lectureData.lectureId}`"><span
+                                x-text="lectureData.startDateFormatted"></span> <i class="fas fa-external-link"></i></a>
                 </div>
                 <div class="text-3 font-sans ml-6" x-data="{ showKeys: false }">
-                    <span x-text="lecture.data.startTimeFormatted"></span>
+                    <span x-text="lectureData.startTimeFormatted"></span>
                     -
-                    <span x-text="lecture.data.endTimeFormatted"></span>
+                    <span x-text="lectureData.endTimeFormatted"></span>
                     <i class="ml-2 fas fa-location-pin text-5"></i>
-                    <span x-text="lecture.data.lectureHallName" class="text-5"></span>
-                    <button @click="showKeys=!showKeys" x-show="lecture.data.lectureHallId===0 && !lecture.data.isPast"
+                    <span x-text="lectureData.lectureHallName" class="text-5"></span>
+                    <button @click="showKeys=!showKeys" x-show="lectureData.lectureHallId===0 && !lectureData.isPast"
                             class="bg-indigo-500 rounded px-2 py-0 font-semibold">
                         <i class="fas fa-key mr-2"></i><span x-text="showKeys?'Hide Keys':'Show Keys'"></span></button>
                     <p x-show="showKeys" class="mt-1 ml-2 p-2 border dark:border-gray-600 rounded w-full">
                         <span class="font-semibold">Stream Server:</span>
-                        <span x-text="'{{$ingestBase}}{{$course.Slug}}-'+ lecture.data.lectureId +'?secret=' + lecture.data.streamKey"></span>
+                        <span x-text="'{{$ingestBase}}{{$course.Slug}}-'+ lectureData.lectureId +'?secret=' + lectureData.streamKey"></span>
                         <i class="fas fa-clipboard hover:text-purple-500"
-                           @click="() => global.copyToClipboard('{{$ingestBase}}{{$course.Slug}}-'+ lecture.data.lectureId +'?secret=' + lecture.data.streamKey)"></i>
+                           @click="() => global.copyToClipboard('{{$ingestBase}}{{$course.Slug}}-'+ lectureData.lectureId +'?secret=' + lectureData.streamKey)"></i>
                         <br>
                         <span class="font-semibold">Stream Key:</span>
-                        <span x-text="lecture.data.courseSlug + '-' + lecture.data.lectureId"></span>
+                        <span x-text="lectureData.courseSlug + '-' + lectureData.lectureId"></span>
                         <i class="fas fa-clipboard hover:text-purple-500"
-                           @click="() => global.copyToClipboard(lecture.data.courseSlug + '-' + lecture.data.lectureId)"></i>
+                           @click="() => global.copyToClipboard(lectureData.courseSlug + '-' + lectureData.lectureId)"></i>
                         <br>
                         {{if ne $user.Role 1}}
                             <span>Want to stream from a lecture hall instead? Please reach out to the RBG.</span>
                         {{end}}
                     </p>
                 </div>
-                <div x-show="lecture.data.isConverting" class="p-4" x-init="lecture.keepProgressesUpdated()">
+                <div x-show="lectureData.isConverting" class="p-4" x-init="lecture.keepProgressesUpdated()">
                     <span class="text-1 font-semibold text-sm">Converting:</span>
-                    <template x-for="p in lecture.data.transcodingProgresses">
+                    <template x-for="p in lectureData.transcodingProgresses">
                         <div class="w-full ml-2">
                             <div class="font-semibold text-sm text-4" x-text="`${p.version} (${p.progress}%)`"></div>
                             <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1 dark:bg-gray-700">
@@ -58,17 +59,17 @@
                         </div>
                     </template>
                 </div>
-                <div x-show="lecture.data.uiEditMode == 0"
+                <div x-show="uiEditMode == 0"
                      class="text-2 font-sans ml-6 mt-2 pl-3 border-l-4 border-gray-500 dark:border-white">
-                    <span class="italic text-gray-400 dark:text-gray-600" x-show="lecture.data.name.length === 0">Unknown Name</span>
-                    <span class="text-gray-700 dark:text-white" x-show="lecture.data.name.length > 0"
-                          x-text="lecture.data.name"></span>
+                    <span class="italic text-gray-400 dark:text-gray-600" x-show="lectureData.name.length === 0">Unknown Name</span>
+                    <span class="text-gray-700 dark:text-white" x-show="lectureData.name.length > 0"
+                          x-text="lectureData.name"></span>
                 </div>
             </div>
 
             <div class="flex items-center justify-end h-8">
                 <!-- generate subtitles button -->
-                <template x-if="lecture.data.isRecording">
+                <template x-if="lectureData.isRecording">
                     <div class="relative mr-2" x-data="{'showLanguageSelect': false}">
                         <button @click="showLanguageSelect = !showLanguageSelect"
                                 @click.outside="showLanguageSelect = false"
@@ -82,13 +83,13 @@
                                 <span class="text-xs text-3">Generate subtitles</span>
                             </div>
                             <div class="pt-3">
-                                <button @click="await admin.requestSubtitles(lecture.data.lectureId, 'de')"
+                                <button @click="await admin.requestSubtitles(lectureData.lectureId, 'de')"
                                         class="flex items-center justify-start
                                     py-1 px-2 text-3 w-full hover:bg-gray-200 hover:dark:bg-gray-600">
                                     <i class="text-lg w-8">🇩🇪</i>
                                     <span class="font-light text-sm ">German</span>
                                 </button>
-                                <button @click="await admin.requestSubtitles(lecture.data.lectureId, 'en')"
+                                <button @click="await admin.requestSubtitles(lectureData.lectureId, 'en')"
                                         class="flex items-center justify-start
                                     py-1 px-2 text-3 w-full hover:bg-gray-200 hover:dark:bg-gray-600">
                                     <i class="text-lg w-8">🇬🇧</i>
@@ -98,7 +99,7 @@
                         </div>
                     </div>
                 </template>
-                <template x-if="lecture.data.isRecording && lecture.data.downloadableVods && lecture.data.downloadableVods.length > 0">
+                <template x-if="lectureData.isRecording && lectureData.downloadableVods && lectureData.downloadableVods.length > 0">
                     <span class="relative mr-2" x-data="{expand:false}">
                         <button @click="expand=!expand" type="button"
                                 id="menu-button" aria-expanded="true"
@@ -124,22 +125,22 @@
                         </span>
                     </span>
                 </template>
-                <div x-show="lecture.data.isRecording">
+                <div x-show="lectureData.isRecording">
                     <div class="font-semibold border-success w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black"
-                         :class="lecture.data.private?'bg-gray-500':'bg-success'">
-                        <i title="This lecture is hidden" x-show="lecture.data.private" class="fas fa-eye-slash"></i>
-                        <span x-show="!lecture.data.isConverting">VoD</span>
+                         :class="lectureData.private?'bg-gray-500':'bg-success'">
+                        <i title="This lecture is hidden" x-show="lectureData.private" class="fas fa-eye-slash"></i>
+                        <span x-show="!lectureData.isConverting">VoD</span>
                     </div>
                 </div>
-                <div x-show="lecture.data.isLiveNow"
+                <div x-show="lectureData.isLiveNow"
                      class="font-semibold bg-danger border-danger w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black">
                     Live
                 </div>
-                <div x-show="!lecture.data.isRecording && lecture.data.isPast"
+                <div x-show="!lectureData.isRecording && lectureData.isPast"
                      class="font-semibold bg-warn border-warn w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black">
                     Past
                 </div>
-                <div x-show="!lecture.data.isPast && !lecture.data.isLiveNow && !lecture.data.isRecording"
+                <div x-show="!lectureData.isPast && !lectureData.isLiveNow && !lectureData.isRecording"
                      class="font-semibold bg-info border-info w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black">
                     Scheduled
                 </div>
@@ -184,7 +185,7 @@
                             class="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 border border-black rounded shadow-md overflow-hidden"
                     >
                         <div>
-                            <button @click="lecture.startSingleEdit(); closeMoreDropdown();"
+                            <button @click="uiEditMode = admin.UIEditMode.single; closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                 Edit Lecture
                             </button>
@@ -192,17 +193,17 @@
                                     class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
                                 Delete Lecture
                             </button>
-                            <button x-text="lecture.data.private?'Make public': 'Make private'"
+                            <button x-text="lectureData.private?'Make public': 'Make private'"
                                     class="block w-full px-4 py-2 text-left text-sm"
                                     @click="lecture.toggleVisibility(); closeMoreDropdown()"
-                                    x-show="lecture.data.isRecording"
-                                    :class="lecture.data.private?'text-gray-400 dark:hover:text-gray-500 hover:text-gray-300':'text-red-400 dark:hover:text-red-500 hover:text-red-300'">
+                                    x-show="lectureData.isRecording"
+                                    :class="lectureData.private?'text-gray-400 dark:hover:text-gray-500 hover:text-gray-300':'text-red-400 dark:hover:text-red-500 hover:text-red-300'">
                                 Make private
                             </button>
                         </div>
-                        <template x-if="lecture.data.seriesIdentifier.length > 0">
+                        <template x-if="lectureData.seriesIdentifier.length > 0">
                             <div class="border-t border-black">
-                                <button @click="lecture.startSeriesEdit(); closeMoreDropdown();"
+                                <button @click="lecture.reset(); uiEditMode = admin.UIEditMode.series; closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                     Edit Series
                                 </button>
@@ -217,87 +218,42 @@
             </div>
         </div>
 
-        <button x-show="lecture.data.uiEditMode == 0"
-                @click="lecture.startSingleEdit(); closeMoreDropdown();"
+        <button x-show="uiEditMode == 0"
+                @click="uiEditMode = admin.UIEditMode.single;"
                 class="bg-gray-100 dark:bg-gray-900 w-full py-2 mt-2 rounded-b">
             <span class="text-gray-700 dark:text-gray-300">Edit Lecture</span>
         </button>
 
-        <div x-show="lecture.data.uiEditMode > 0" class="grid gap-y-4 p-4">
+        <div x-show="uiEditMode > 0" class="grid gap-y-4 p-4">
             <article class="grid gap-2 w-full">
                 <header class="border-b dark:border-gray-600 w-full">
                     <h6 class="text-sm text-5 font-light">Media</h6>
                 </header>
-                <article x-data="{ id: `lecture_media_${lecture.data.lectureId}`, progress: { 'COMB': 0, 'PRES': 0, 'CAM': 0 } }"
-                         @voduploadprogressedit.window="({ detail: { type, progress, lectureId } }) => { if (lectureId === lecture.data.lectureId) { progress[type] = progress; }}"
+                <article x-data="{ id: `lecture_media_${lectureData.lectureId}`, progress: { 'COMB': 0, 'PRES': 0, 'CAM': 0 } }"
+                         @voduploadprogressedit.window="({ detail: { type, progress, lectureId } }) => { if (lectureId === lectureData.lectureId) { progress[type] = progress; }}"
                          class="w-full flex justify-center flex-wrap">
-                    <div x-data="{ inputId: `${id}_comb` }"
-                         x-on:click="document.querySelector(`#${inputId}`).click()"
-                         class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
-                    >
-                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.data.lectureId}/thumbs/vod?type=COMB')`"></div>
-                        <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2">
-                            Combined Video
-                        </div>
-                        <div class="w-full h-full flex justify-center items-center drop-shadow-[2px_4px_6px_black]">
-                            <span x-show="!lecture.data.newCombinedVideo">Click to upload new Video</span>
-                            <template x-if="lecture.data.newCombinedVideo !== null">
-                                <span class="text-green-400" x-text="lecture.data.newCombinedVideo.name"></span>
-                            </template>
-                        </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newCombinedVideo = null; lecture.updateIsDirty(); }" x-show="lecture.data.newCombinedVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
-                            <i class="fa fa-xmark text-3"></i>
-                        </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCombinedVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
-                        <div x-show="lecture.data.isSaving && lecture.data.newCombinedVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
-                            <span x-text="`${progress.COMB}%`"></span>
-                        </div>
-                    </div>
-                    <div x-data="{ inputId: `${id}_pres` }"
-                         x-on:click="document.querySelector(`#${inputId}`).click()"
-                         class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
-                    >
-                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.data.lectureId}/thumbs/vod?type=PRES')`"></div>
-                        <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2">
-                            Presentation Video
-                        </div>
-                        <div class="w-full h-full flex justify-center items-center p-2 drop-shadow-[2px_4px_6px_black]">
-                            <span x-show="!lecture.data.newPresentationVideo">Click to upload new Video</span>
-                            <template x-if="lecture.data.newPresentationVideo !== null">
-                                <span class="text-green-400" x-text="lecture.data.newPresentationVideo.name"></span>
-                            </template>
-                        </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newPresentationVideo = null; lecture.updateIsDirty(); }" x-show="lecture.data.newPresentationVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
-                            <i class="fa fa-xmark text-3"></i>
-                        </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newPresentationVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
-                        <div x-show="lecture.data.isSaving && lecture.data.newPresentationVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
-                            <span x-text="`${progress.PRES}%`"></span>
-                        </div>
-                    </div>
-                    <div
-                            x-data="{ inputId: `${id}_cam` }"
-                            x-on:click="document.querySelector(`#${inputId}`).click()"
-                            class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
-                    >
-                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.data.lectureId}/thumbs/vod?type=CAM')`"></div>
-                        <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2">
-                            Camera Video
-                        </div>
-                        <div class="w-full h-full flex justify-center items-center p-2 drop-shadow-[2px_4px_6px_black]">
-                            <span x-show="!lecture.data.newCameraVideo">Click to upload new Video</span>
-                            <template x-if="lecture.data.newCameraVideo !== null">
-                                <span class="text-green-400" x-text="lecture.data.newCameraVideo.name"></span>
-                            </template>
-                        </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.data.newCameraVideo = null; lecture.updateIsDirty(); }" x-show="lecture.data.newCameraVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
-                            <i class="fa fa-xmark text-3"></i>
-                        </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCameraVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
-                        <div x-show="lecture.data.isSaving && lecture.data.newCameraVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
-                            <span x-text="`${progress.CAM}%`"></span>
+                    <template x-for="video in lecture.videoFiles">
+                        <div x-data="{ inputId: `${id}_${video.type}`, file: lectureData[video.key] }"
+                             x-on:click="document.querySelector(`#${inputId}`).click()"
+                             class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
+                        >
+                            <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lectureData.lectureId}/thumbs/vod?type=${video.type}')`"></div>
+                            <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2" x-text="video.title"></div>
+                            <div class="w-full h-full flex justify-center items-center drop-shadow-[2px_4px_6px_black]">
+                                <span x-show="!file">Click to upload new Video</span>
+                                <template x-if="file !== null">
+                                    <span class="text-green-400" x-text="file.name"></span>
+                                </template>
+                            </div>
+                            <div x-on:click="() => { changeSet.patch(video.key, null); }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                                <i class="fa fa-xmark text-3"></i>
+                            </div>
+                            <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-bind-change-set.single:newCombinedVideo="changeSet" />
+                            <div x-show="lectureData.isSaving && file !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
+                                <span x-text="`${progress[video.type]}%`"></span>
+                            </div>
                         </div>
-                    </div>
+                    </template>
                 </article>
                 <header class="border-b dark:border-gray-600 w-full">
                     <h6 class="text-sm text-5 font-light">Title and Description</h6>
@@ -307,8 +263,7 @@
                     <label :for="id" class="hidden">Lecture Title</label>
                     <input :id="id"
                            class="grow tl-input" type="text"
-                           x-model="lecture.data.newName"
-                           x-on:keyup="lecture.updateIsDirty()"
+                           x-bind-change-set:name="changeSet"
                            placeholder="Lecture 2: Dark-Patterns I"
                            autocomplete="off">
                 </article>
@@ -322,8 +277,7 @@
                                   class="tl-textarea grow"
                                   placeholder="Add a nice description, links, and more. You can use Markdown. Drop files here."
                                   autocomplete="off"
-                                  x-model="lecture.data.newDescription"
-                                  x-on:keyup="lecture.updateIsDirty()"></textarea>
+                                  x-bind-change-set:description="changeSet"></textarea>
                     </article>
                     <article class="flex justify-center">
                         <span class="text-xs text-3 my-auto">Attach files or URL to files by Drag & Drop in the description field.</span>
@@ -350,7 +304,7 @@
                     </article>
                 </section>
 
-                <div x-show="!lecture.data.isPast && !lecture.data.isRecording"
+                <div x-show="!lectureData.isPast && !lectureData.isRecording"
                      class="p-3 border dark:border-gray-600 rounded mt-3">
                     {{if eq $user.Role 1}}
                         <div x-data="{ id: $id('select') }">
@@ -359,14 +313,14 @@
                                 <select class="text-gray-700 dark:text-gray-300 dark:bg-secondary bg-gray-100 p-2"
                                         :id="id"
                                         x-on:change="lecture.updateIsDirty()"
-                                        x-model="lecture.data.newLectureHallId">
+                                        x-model="lectureData.newLectureHallId">
                                     <option class="text-gray-700 dark:text-gray-300" value="0">
                                         Self streaming
                                     </option>
                                     {{range $lectureHall := $lectureHalls}}
                                         <option class="text-gray-700 dark:text-gray-300"
                                                 value="{{$lectureHall.Model.ID}}"
-                                                :selected="lecture.data.lectureHallId === '{{$lectureHall.Model.ID}}'">
+                                                :selected="lectureData.lectureHallId === '{{$lectureHall.Model.ID}}'">
                                             {{$lectureHall.Name}}
                                         </option>
                                     {{end}}
@@ -375,10 +329,10 @@
                         </div>
                     {{end}}
                     {{if eq $user.Role 2}}
-                        <div x-show="lecture.data.newLectureHallId !== '0'">
+                        <div x-show="lectureData.newLectureHallId !== '0'">
                             This lecture will be streamed from <span
                                     class="font-semibold text-white">{{range $lectureHall := $lectureHalls}}<span
-                                        x-show="lecture.data.lectureHallId === '{{$lectureHall.Model.ID}}'">{{$lectureHall.Name}}</span>{{end}}</span>.
+                                        x-show="lectureData.lectureHallId === '{{$lectureHall.Model.ID}}'">{{$lectureHall.Name}}</span>{{end}}</span>.
                             If you need this changed or want to stream from home (with obs, zoom etc.), please reach
                             out to the RBG.
                         </div>
@@ -386,11 +340,11 @@
                 </div>
             </article>
 
-            <template x-if="lecture.data.hasAttachments">
+            <template x-if="lectureData.hasAttachments">
                 <article>
                     <h6 class="text-sm text-5 font-light border-b dark:border-gray-600">Attachments</h6>
                     <ul class="list-disc grid py-2 ml-6">
-                        <template x-for="file in lecture.data.files">
+                        <template x-for="file in lectureData.files">
                             <template x-if="file.fileType === admin.FileType.attachment">
                                 <li>
                                     <section class="flex items-center">
@@ -408,17 +362,17 @@
                 </article>
             </template>
 
-            <template x-if="lecture.data.uiEditMode > 0"> <!-- only render if in edit mode to avoid network calls -->
+            <template x-if="uiEditMode > 0"> <!-- only render if in edit mode to avoid network calls -->
                 {{template "editvideosections"}}
             </template>
 
-            <span x-show="lecture.data.isRecording" class="absolute left-0 bottom-0 p-4">
+            <span x-show="lectureData.isRecording" class="absolute left-0 bottom-0 p-4">
                 <!-- buttons go here -->
             </span>
 
-            <div x-show="lecture.data.lastErrors.length > 0" class="px-6 py-3 bg-red-400 my-3 rounded">
+            <div x-show="lastErrors.length > 0" class="px-6 py-3 bg-red-400 my-3 rounded">
                 <ul>
-                    <template x-for="error in lecture.data.lastErrors">
+                    <template x-for="error in lastErrors">
                         <li x-text="error"></li>
                     </template>
                 </ul>
@@ -428,7 +382,7 @@
                 <section class="flex items-center py-1 px-3">
                     <label class="relative inline-flex items-center cursor-pointer">
                         <input type="checkbox" value="" class="sr-only peer" @change="lecture.updateIsDirty()"
-                               x-model="lecture.data.newIsChatEnabled">
+                               x-model="lectureData.newIsChatEnabled">
                         <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-600
                         dark:peer-focus:ring-indigo-600 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full
                         peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px]
@@ -438,15 +392,15 @@
                     </label>
                 </section>
                 <div>
-                    <button :disabled="lecture.data.isSaving" @click="lecture.discardEdit();"
+                    <button :disabled="lectureData.isSaving" @click="lecture.discardEdit();"
                             class="px-8 py-3 text-2 text-white rounded bg-indigo-500/70 hover:bg-indigo-500/90 dark:bg-indigo-500/10 disabled:opacity-20 dark:hover:bg-indigo-500/20 mr-4">
                         Discard Changes
                     </button>
                     <button
                             @click="lecture.saveEdit();"
-                            :disabled="!lecture.data.isDirty || lecture.data.isSaving"
+                            :disabled="!lectureData.isDirty || lectureData.isSaving"
                             class="px-8 py-3 text-2 rounded text-white bg-indigo-500 hover:bg-indigo-600 disabled:opacity-20 disabled:hover:bg-indigo-500"
-                            x-text="lecture.data.isSaving ? 'loading ...' : (lecture.data.uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
+                            x-text="lectureData.isSaving ? 'loading ...' : (uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
                     ></button>
                 </div>
             </div>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 01c7b8bda..2dd7a04b7 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -61,6 +61,11 @@ export interface Lecture {
     endDate: Date;
     endDateFormatted: string;
     endTimeFormatted: string;
+
+    // Clientside pseudo fields
+    newCombinedVideo: File|null;
+    newPresentationVideo: File|null;
+    newCameraVideo: File|null;
 }
 
 export interface DownloadableVOD {
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index a6b5c452f..af4be2a03 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -1,20 +1,41 @@
+export interface DirtyState {
+    isDirty: boolean;
+    dirtyKeys: string[];
+}
+
 export class ChangeSet<T> {
     private state: T;
     private changeState: T;
     private readonly comparator?: (key: string, a: T, b: T) => boolean|null;
+    private onUpdate: ((changeState: T, dirtyState: DirtyState) => void)[];
 
-    constructor(state: T, comparator?: (key: string, a: T, b: T) => boolean) {
+    constructor(state: T, comparator?: (key: string, a: T, b: T) => boolean, onUpdate?: (changeState: T, dirtyState: DirtyState) => void) {
         this.state = state;
+        this.onUpdate = onUpdate ? [onUpdate] : [];
         this.comparator = comparator;
         this.reset();
     }
 
+    listen(onUpdate: (changeState: T, dirtyState: DirtyState) => void) {
+        this.onUpdate.push(onUpdate);
+    }
+
+    removeListener(onUpdate: (changeState: T, dirtyState: DirtyState) => void) {
+        this.onUpdate = this.onUpdate.filter((o) => o !== onUpdate);
+    }
+
     get(): T {
         return this.changeState;
     }
 
     set(val: T) {
         this.changeState = {...val};
+        this.dispatchUpdate();
+    }
+
+    patch(key: string, val: T) {
+        this.changeState = {...this.changeState, [key]: val};
+        this.dispatchUpdate();
     }
 
     commit(): void {
@@ -23,6 +44,7 @@ export class ChangeSet<T> {
 
     reset(): void {
         this.changeState = {...this.state};
+        this.dispatchUpdate();
     }
 
     isDirty(): boolean {
@@ -59,4 +81,16 @@ export class ChangeSet<T> {
         }
         return false;
     }
+
+    dispatchUpdate() {
+        if (this.onUpdate.length > 0) {
+            const dirtyKeys = this.changedKeys();
+            for (const onUpdate of this.onUpdate) {
+                onUpdate(this.changeState, {
+                    dirtyKeys,
+                    isDirty: dirtyKeys.length > 0,
+                });
+            }
+        }
+    }
 }
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 49988d086..e1e9f0de3 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -27,6 +27,10 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
             s.endDateFormatted = s.endDate.toLocaleDateString("en-US", dateFormatOptions);
             s.endTimeFormatted = s.endDate.toLocaleTimeString("en-US", timeFormatOptions);
 
+            s.newCombinedVideo = null;
+            s.newPresentationVideo = null;
+            s.newCameraVideo = null;
+
             return s;
         });
     }
@@ -39,7 +43,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
 
     async delete(courseId: number, lectureIds: number[]) {
         await AdminLectureList.delete(courseId, lectureIds);
-        this.data[courseId] = (await this.getData(courseId)).filter((s) => !lectureIds.includes(s.ID));
+        this.data[courseId] = (await this.getData(courseId)).filter((s) => !lectureIds.includes(s.lectureId));
         await this.triggerUpdate(courseId);
     }
 
@@ -47,7 +51,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await AdminLectureList.update(courseId, streamId, request);
 
         this.data[courseId] = (await this.getData(courseId)).map((s) => {
-            if (s.ID === streamId) {
+            if (s.lectureId === streamId) {
                 s = {
                     ...s,
                 };
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 6959d1b17..e46ec8d2d 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -72,7 +72,7 @@ export class LectureList {
         const lectures = this.lectures;
         if (lectures.length < 2) return false;
         const first = lectures[0];
-        return lectures.slice(1).some((l) => l.data.ChatEnabled !== l.data.ChatEnabled);
+        return lectures.slice(1).some((l) => l.data.isChatEnabled !== l.data.isChatEnabled);
     }
 
     triggerUpdateEvent() {
@@ -108,13 +108,26 @@ class TranscodingProgress {
     progress: number;
 }
 
+interface VideoFile {
+    key: string;
+    type: string;
+    title: string;
+}
+
 export class LectureEditor {
-    changes: ChangeSet<Lecture>;
-    uiEditMode: UIEditMode = UIEditMode.none;
+    private changeSet: ChangeSet<Lecture>;
 
-    get data() : Lecture {
-        return this.changes.get();
-    }
+    public readonly videoFiles: VideoFile[] = [
+        { key: "newCombinedVideo", type: "PRES", title: "Combined Video" },
+        { key: "newPresentationVideo", type: "PRES", title: "Presentation Video" },
+        { key: "newCameraVideo", type: "PRES", title: "Camera Video" },
+    ]
+
+    lastErrors: string[];
+    uiEditMode: UIEditMode;
+    lastErrors: string[] = [];
+    lectureData: Lecture;
+    isDirty: boolean;
 
     /*readonly courseId: number;
     readonly courseSlug: string;
@@ -132,7 +145,12 @@ export class LectureEditor {
     readonly hasStats: boolean;*/
 
     constructor(lecture: Lecture) {
-        this.changes = new ChangeSet<Lecture>(lecture, this.lectureComparator);
+        this.changeSet = new ChangeSet<Lecture>(lecture, this.lectureComparator, (data, dirtyState) => {
+            this.lectureData = data;
+            this.isDirty = dirtyState.isDirty;
+        });
+        this.uiEditMode = UIEditMode.none;
+        this.lastErrors = [];
     }
 
     lectureComparator(key: string, a: Lecture, b: Lecture): boolean|null {
@@ -351,6 +369,7 @@ export class LectureEditor {
             }
         }
         return errors;*/
+        return [];
     }
 
     async saveSeries() {
@@ -377,7 +396,7 @@ export class LectureEditor {
     async deleteLecture() {
         if (confirm("Confirm deleting video?")) {
             try {
-                await DataStore.adminLectureList.delete(this.data.CourseID, [this.data.ID]);
+                await DataStore.adminLectureList.delete(this.data.courseId, [this.data.lectureId]);
             } catch (e) {
                 alert("An unknown error occurred during the deletion process!");
                 return;

From ca9c56717287abcfb8664aa49859f03043ec428e Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Mon, 28 Aug 2023 21:40:35 +0200
Subject: [PATCH 11/77] little fixes

---
 web/assets/init-admin.js                         |  5 ++---
 .../course/manage/lecture-management-card.gohtml |  2 +-
 web/ts/edit-course.ts                            | 16 +---------------
 3 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 3c7247d93..2648dbb35 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -1,11 +1,10 @@
 document.addEventListener("alpine:init", () => {
     Alpine.directive("bind-change-set", (el, { expression, value, modifiers }, { evaluate, cleanup }) => {
         const changeSet = evaluate(expression);
-        const fieldName = value;
+        const fieldName = value || el.name;
 
         if (el.type === "file") {
-            const [type] = modifiers;
-            const isSingle = type === "single";
+            const isSingle = modifiers.includes("single")
 
             const changeHandler = (e) => {
                 changeSet.patch(fieldName, isSingle ? e.target.files[0] : e.target.files);
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index bc77364c9..ae1db03af 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -248,7 +248,7 @@
                             <div x-on:click="() => { changeSet.patch(video.key, null); }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                                 <i class="fa fa-xmark text-3"></i>
                             </div>
-                            <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-bind-change-set.single:newCombinedVideo="changeSet" />
+                            <input :id="inputId" class="hidden" :name="video.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" />
                             <div x-show="lectureData.isSaving && file !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                                 <span x-text="`${progress[video.type]}%`"></span>
                             </div>
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index e46ec8d2d..ac01a7f94 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -129,26 +129,12 @@ export class LectureEditor {
     lectureData: Lecture;
     isDirty: boolean;
 
-    /*readonly courseId: number;
-    readonly courseSlug: string;
-    readonly lectureId: number;
-    readonly streamKey: string;
-    readonly seriesIdentifier: string;
-    color: string;
-    readonly vodViews: number;
-    start: Date;
-    end: Date;
-    readonly isLiveNow: boolean;
-    isConverting: boolean;
-    readonly isRecording: boolean;
-    readonly isPast: boolean;
-    readonly hasStats: boolean;*/
-
     constructor(lecture: Lecture) {
         this.changeSet = new ChangeSet<Lecture>(lecture, this.lectureComparator, (data, dirtyState) => {
             this.lectureData = data;
             this.isDirty = dirtyState.isDirty;
         });
+        this.isDirty = false;
         this.uiEditMode = UIEditMode.none;
         this.lastErrors = [];
     }

From 246fa4826b6bd7e1d70f207074139bd782a6209e Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Tue, 29 Aug 2023 00:07:54 +0200
Subject: [PATCH 12/77] ...

---
 .../manage/lecture-management-card.gohtml       | 10 +++++-----
 web/ts/edit-course.ts                           | 17 ++++++++++++-----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index ae1db03af..24de13abc 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -185,7 +185,7 @@
                             class="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 border border-black rounded shadow-md overflow-hidden"
                     >
                         <div>
-                            <button @click="uiEditMode = admin.UIEditMode.single; closeMoreDropdown();"
+                            <button @click="lecture.startSingleEdit(); closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                 Edit Lecture
                             </button>
@@ -203,7 +203,7 @@
                         </div>
                         <template x-if="lectureData.seriesIdentifier.length > 0">
                             <div class="border-t border-black">
-                                <button @click="lecture.reset(); uiEditMode = admin.UIEditMode.series; closeMoreDropdown();"
+                                <button @click="lecture.startSeriesEdit(); closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                     Edit Series
                                 </button>
@@ -219,7 +219,7 @@
         </div>
 
         <button x-show="uiEditMode == 0"
-                @click="uiEditMode = admin.UIEditMode.single;"
+                @click="lecture.startSingleEdit"
                 class="bg-gray-100 dark:bg-gray-900 w-full py-2 mt-2 rounded-b">
             <span class="text-gray-700 dark:text-gray-300">Edit Lecture</span>
         </button>
@@ -245,10 +245,10 @@
                                     <span class="text-green-400" x-text="file.name"></span>
                                 </template>
                             </div>
-                            <div x-on:click="() => { changeSet.patch(video.key, null); }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                            <div x-on:click="() => { $event.stopPropagation(); changeSet.patch(video.key, null); video = null; }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                                 <i class="fa fa-xmark text-3"></i>
                             </div>
-                            <input :id="inputId" class="hidden" :name="video.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" />
+                            <input :id="inputId" class="hidden" :name="video.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" @change="(e) => { console.log(e.target.files, video); file = e.target.files[0]; }" />
                             <div x-show="lectureData.isSaving && file !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                                 <span x-text="`${progress[video.type]}%`"></span>
                             </div>
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index ac01a7f94..a9ad1233a 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -112,20 +112,27 @@ interface VideoFile {
     key: string;
     type: string;
     title: string;
+    file?: File;
 }
 
 export class LectureEditor {
     private changeSet: ChangeSet<Lecture>;
 
-    public readonly videoFiles: VideoFile[] = [
+    public readonly _videoFiles: VideoFile[] = [
         { key: "newCombinedVideo", type: "PRES", title: "Combined Video" },
         { key: "newPresentationVideo", type: "PRES", title: "Presentation Video" },
         { key: "newCameraVideo", type: "PRES", title: "Camera Video" },
     ]
 
+    get videoFiles() : VideoFile[] {
+        return this._videoFiles.map((video) => ({
+            ...video,
+            file: this.lectureData[video.key]
+        }));
+    }
+
     lastErrors: string[];
     uiEditMode: UIEditMode;
-    lastErrors: string[] = [];
     lectureData: Lecture;
     isDirty: boolean;
 
@@ -169,13 +176,13 @@ export class LectureEditor {
 
     startSeriesEdit() {
         if (this.uiEditMode !== UIEditMode.none) return;
-        this.changes.reset();
+        this.changeSet.reset();
         this.uiEditMode = UIEditMode.series;
     }
 
     startSingleEdit() {
         if (this.uiEditMode !== UIEditMode.none) return;
-        this.changes.reset();
+        this.changeSet.reset();
         this.uiEditMode = UIEditMode.single;
     }
 
@@ -382,7 +389,7 @@ export class LectureEditor {
     async deleteLecture() {
         if (confirm("Confirm deleting video?")) {
             try {
-                await DataStore.adminLectureList.delete(this.data.courseId, [this.data.lectureId]);
+                await DataStore.adminLectureList.delete(this.lectureData.courseId, [this.lectureData.lectureId]);
             } catch (e) {
                 alert("An unknown error occurred during the deletion process!");
                 return;

From 1e66fc919c6dfdc04723805d73bd11045f1a8cf2 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Tue, 29 Aug 2023 00:18:00 +0200
Subject: [PATCH 13/77] ... no idea...

---
 .../course/manage/lecture-management-card.gohtml     |  8 ++++----
 web/ts/edit-course.ts                                | 12 ++----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 24de13abc..f7affc174 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -232,9 +232,9 @@
                 <article x-data="{ id: `lecture_media_${lectureData.lectureId}`, progress: { 'COMB': 0, 'PRES': 0, 'CAM': 0 } }"
                          @voduploadprogressedit.window="({ detail: { type, progress, lectureId } }) => { if (lectureId === lectureData.lectureId) { progress[type] = progress; }}"
                          class="w-full flex justify-center flex-wrap">
-                    <template x-for="video in lecture.videoFiles">
-                        <div x-data="{ inputId: `${id}_${video.type}`, file: lectureData[video.key] }"
-                             x-on:click="document.querySelector(`#${inputId}`).click()"
+                    <template x-for="video in lecture.videoFiles" :key="video.key">
+                        <div x-data="{ video, inputId: `${id}_${video.type}`, file: lectureData[video.key] }"
+                             x-on:click="() => document.querySelector(`#${inputId}`).click()"
                              class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
                         >
                             <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lectureData.lectureId}/thumbs/vod?type=${video.type}')`"></div>
@@ -245,7 +245,7 @@
                                     <span class="text-green-400" x-text="file.name"></span>
                                 </template>
                             </div>
-                            <div x-on:click="() => { $event.stopPropagation(); changeSet.patch(video.key, null); video = null; }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                            <div x-on:click="() => { $event.stopPropagation(); changeSet.patch(video.key, null); file = null; }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                                 <i class="fa fa-xmark text-3"></i>
                             </div>
                             <input :id="inputId" class="hidden" :name="video.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" @change="(e) => { console.log(e.target.files, video); file = e.target.files[0]; }" />
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index a9ad1233a..7fa52fd72 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -112,24 +112,16 @@ interface VideoFile {
     key: string;
     type: string;
     title: string;
-    file?: File;
 }
 
 export class LectureEditor {
     private changeSet: ChangeSet<Lecture>;
 
-    public readonly _videoFiles: VideoFile[] = [
+    public readonly videoFiles: VideoFile[] = [
         { key: "newCombinedVideo", type: "PRES", title: "Combined Video" },
         { key: "newPresentationVideo", type: "PRES", title: "Presentation Video" },
         { key: "newCameraVideo", type: "PRES", title: "Camera Video" },
-    ]
-
-    get videoFiles() : VideoFile[] {
-        return this._videoFiles.map((video) => ({
-            ...video,
-            file: this.lectureData[video.key]
-        }));
-    }
+    ];
 
     lastErrors: string[];
     uiEditMode: UIEditMode;

From e36890d08274590de02db5c7382c64367d8080c6 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Tue, 29 Aug 2023 15:25:00 +0200
Subject: [PATCH 14/77] right path i guess

---
 .../manage/course-lecture-management.gohtml   |  2 +-
 .../manage/lecture-management-card.gohtml     | 36 ++++-----
 web/ts/edit-course.ts                         | 80 ++++++++++++++++++-
 3 files changed, 95 insertions(+), 23 deletions(-)

diff --git a/web/template/partial/course/manage/course-lecture-management.gohtml b/web/template/partial/course/manage/course-lecture-management.gohtml
index f8a80c064..1c0c38e1c 100644
--- a/web/template/partial/course/manage/course-lecture-management.gohtml
+++ b/web/template/partial/course/manage/course-lecture-management.gohtml
@@ -62,7 +62,7 @@
         <div x-data="{ lectureList: new admin.LectureList({{$course.Model.ID}}), lectures: [], marked: [] }"
              x-on:newlectures.window="e => {lectures = e.detail.lectures; marked = e.detail.markedIds; }">
             <ul class="flex" :class="sortAsc ? 'flex-col' : 'flex-col-reverse'">
-                <template x-for="lecture in lectures" :key="lecture.lectureData.lectureId">
+                <template x-for="lecture in lectures" :key="lecture.lectureId">
                     {{template "lecture-management-card" .}}
                 </template>
             </ul>
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index f7affc174..e1c66b0d8 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -6,7 +6,7 @@
     {{$ingestBase := .IngestBase}}
     {{$lectureHalls := .LectureHalls}}
 
-    <li x-data="lecture"
+    <li x-data="admin.lectureEditor(lecture)"
         x-show="!filterPast || !lectureData.isPast"
         :id="`lecture-${lectureData.lectureId}`"
         :key="lectureData.lectureId"
@@ -47,7 +47,7 @@
                         {{end}}
                     </p>
                 </div>
-                <div x-show="lectureData.isConverting" class="p-4" x-init="lecture.keepProgressesUpdated()">
+                <div x-show="lectureData.isConverting" class="p-4" x-init="keepProgressesUpdated()">
                     <span class="text-1 font-semibold text-sm">Converting:</span>
                     <template x-for="p in lectureData.transcodingProgresses">
                         <div class="w-full ml-2">
@@ -114,7 +114,7 @@
                               aria-labelledby="menu-button" tabindex="-1">
                             <span class="py-1" role="none">
                             <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
-                                <template x-for="file in lecture.getDownloads()">
+                                <template x-for="file in getDownloads()">
                                     <a :href="file.DownloadURL" download
                                        class="hover:bg-gray-100 text-3 dark:hover:bg-gray-600
                                     block px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md"
@@ -185,17 +185,17 @@
                             class="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 border border-black rounded shadow-md overflow-hidden"
                     >
                         <div>
-                            <button @click="lecture.startSingleEdit(); closeMoreDropdown();"
+                            <button @click="startSingleEdit(); closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                 Edit Lecture
                             </button>
-                            <button @click="lecture.deleteLecture(); closeMoreDropdown();"
+                            <button @click="deleteLecture(); closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
                                 Delete Lecture
                             </button>
                             <button x-text="lectureData.private?'Make public': 'Make private'"
                                     class="block w-full px-4 py-2 text-left text-sm"
-                                    @click="lecture.toggleVisibility(); closeMoreDropdown()"
+                                    @click="toggleVisibility(); closeMoreDropdown()"
                                     x-show="lectureData.isRecording"
                                     :class="lectureData.private?'text-gray-400 dark:hover:text-gray-500 hover:text-gray-300':'text-red-400 dark:hover:text-red-500 hover:text-red-300'">
                                 Make private
@@ -203,11 +203,11 @@
                         </div>
                         <template x-if="lectureData.seriesIdentifier.length > 0">
                             <div class="border-t border-black">
-                                <button @click="lecture.startSeriesEdit(); closeMoreDropdown();"
+                                <button @click="startSeriesEdit(); closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                     Edit Series
                                 </button>
-                                <button @click="lecture.deleteLectureSeries(); closeMoreDropdown();"
+                                <button @click="deleteLectureSeries(); closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
                                     Delete Series
                                 </button>
@@ -219,7 +219,7 @@
         </div>
 
         <button x-show="uiEditMode == 0"
-                @click="lecture.startSingleEdit"
+                @click="startSingleEdit()"
                 class="bg-gray-100 dark:bg-gray-900 w-full py-2 mt-2 rounded-b">
             <span class="text-gray-700 dark:text-gray-300">Edit Lecture</span>
         </button>
@@ -232,9 +232,9 @@
                 <article x-data="{ id: `lecture_media_${lectureData.lectureId}`, progress: { 'COMB': 0, 'PRES': 0, 'CAM': 0 } }"
                          @voduploadprogressedit.window="({ detail: { type, progress, lectureId } }) => { if (lectureId === lectureData.lectureId) { progress[type] = progress; }}"
                          class="w-full flex justify-center flex-wrap">
-                    <template x-for="video in lecture.videoFiles" :key="video.key">
-                        <div x-data="{ video, inputId: `${id}_${video.type}`, file: lectureData[video.key] }"
-                             x-on:click="() => document.querySelector(`#${inputId}`).click()"
+                    <template x-for="video in videoFiles" :key="video.key">
+                        <div x-data="{ file: getVideoFile(video.key) }"
+                             x-on:click="() => document.querySelector(`#${video.inputId}`).click()"
                              class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
                         >
                             <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lectureData.lectureId}/thumbs/vod?type=${video.type}')`"></div>
@@ -245,10 +245,10 @@
                                     <span class="text-green-400" x-text="file.name"></span>
                                 </template>
                             </div>
-                            <div x-on:click="() => { $event.stopPropagation(); changeSet.patch(video.key, null); file = null; }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                            <div x-on:click="() => { $event.stopPropagation(); changeSet.patch(video.key, null); file = getVideoFile(video.key); }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                                 <i class="fa fa-xmark text-3"></i>
                             </div>
-                            <input :id="inputId" class="hidden" :name="video.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" @change="(e) => { console.log(e.target.files, video); file = e.target.files[0]; }" />
+                            <input :id="video.inputId" class="hidden" :name="video.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" @change="() => { file = getVideoFile(video.key); }" />
                             <div x-show="lectureData.isSaving && file !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                                 <span x-text="`${progress[video.type]}%`"></span>
                             </div>
@@ -312,7 +312,7 @@
                                 <span>Select Lecture Hall</span>
                                 <select class="text-gray-700 dark:text-gray-300 dark:bg-secondary bg-gray-100 p-2"
                                         :id="id"
-                                        x-on:change="lecture.updateIsDirty()"
+                                        x-on:change="updateIsDirty()"
                                         x-model="lectureData.newLectureHallId">
                                     <option class="text-gray-700 dark:text-gray-300" value="0">
                                         Self streaming
@@ -381,7 +381,7 @@
             <div class="mt-6 flex items-center justify-between">
                 <section class="flex items-center py-1 px-3">
                     <label class="relative inline-flex items-center cursor-pointer">
-                        <input type="checkbox" value="" class="sr-only peer" @change="lecture.updateIsDirty()"
+                        <input type="checkbox" value="" class="sr-only peer" @change="updateIsDirty()"
                                x-model="lectureData.newIsChatEnabled">
                         <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-600
                         dark:peer-focus:ring-indigo-600 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full
@@ -392,12 +392,12 @@
                     </label>
                 </section>
                 <div>
-                    <button :disabled="lectureData.isSaving" @click="lecture.discardEdit();"
+                    <button :disabled="lectureData.isSaving" @click="discardEdit();"
                             class="px-8 py-3 text-2 text-white rounded bg-indigo-500/70 hover:bg-indigo-500/90 dark:bg-indigo-500/10 disabled:opacity-20 dark:hover:bg-indigo-500/20 mr-4">
                         Discard Changes
                     </button>
                     <button
-                            @click="lecture.saveEdit();"
+                            @click="saveEdit();"
                             :disabled="!lectureData.isDirty || lectureData.isSaving"
                             class="px-8 py-3 text-2 rounded text-white bg-indigo-500 hover:bg-indigo-600 disabled:opacity-20 disabled:hover:bg-indigo-500"
                             x-text="lectureData.isSaving ? 'loading ...' : (uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 7fa52fd72..9b650ed0d 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -3,6 +3,7 @@ import { StatusCodes } from "http-status-codes";
 import { DataStore } from "./data-store/data-store";
 import { Lecture } from "./api/admin-lecture-list";
 import {ChangeSet} from "./change-set";
+import { AlpineComponent } from "./components/alpine-component";
 
 export enum UIEditMode {
     none,
@@ -22,7 +23,7 @@ export enum FileType {
 
 export class LectureList {
     courseId: number;
-    lectures: LectureEditor[] = [];
+    lectures: Lecture[] = [];
     markedIds: number[] = [];
 
     constructor(courseId: number) {
@@ -46,9 +47,8 @@ export class LectureList {
 
     async setup() {
         await DataStore.adminLectureList.subscribe(this.courseId, (lectures) => {
-            this.lectures = lectures.map((lecture) => new LectureEditor(lecture));
+            this.lectures = lectures;
             this.triggerUpdateEvent();
-            console.log("testyyy", this.lectures);
         });
     }
 
@@ -114,7 +114,79 @@ interface VideoFile {
     title: string;
 }
 
-export class LectureEditor {
+export function lectureEditor(lecture: Lecture): AlpineComponent {
+    return {
+        videoFiles: [
+            { key: "newCombinedVideo", type: "PRES", title: "Combined Video", inputId: `input_${lecture.lectureId}_comb` },
+            { key: "newPresentationVideo", type: "PRES", title: "Presentation Video", inputId: `input_${lecture.lectureId}_pres` },
+            { key: "newCameraVideo", type: "PRES", title: "Camera Video", inputId: `input_${lecture.lectureId}_cam` },
+        ] as VideoFile[],
+
+        // UI Data
+        lastErrors: [] as string[],
+        uiEditMode: UIEditMode.none,
+        isDirty: false,
+
+        // Lecture Data
+        changeSet: null,
+        lectureData: null,
+
+        /**
+         * AlpineJS init function which is called automatically in addition to 'x-init'
+         */
+        init() {
+            this.changeSet = new ChangeSet<Lecture>(lecture, this.lectureComparator, (data, dirtyState) => {
+                this.lectureData = data;
+                this.isDirty = dirtyState.isDirty;
+            });
+        },
+
+        /**
+         * A custom comparator to setup special comparison strategies for specific keys
+         * @param key key in Lecture
+         * @param a
+         * @param b
+         * @return return 0 to use naive default comparator
+         */
+        lectureComparator(key: string, a: Lecture, b: Lecture): boolean|null {
+            // here we can set some custom comparisons
+            return null;
+        },
+
+        async keepProgressesUpdated() {
+
+        },
+
+        getDownloads() {
+            //return this.downloadableVods;
+        },
+
+        getVideoFile(key: string): File {
+            return this.lectureData[key];
+        }
+
+        /**
+         * Opens the series lecture editor UI
+         */
+        startSeriesEdit() {
+            if (this.uiEditMode !== UIEditMode.none) return;
+            this.changeSet.reset();
+            this.uiEditMode = UIEditMode.series;
+        },
+
+        /**
+         * Opens the single lecture editor UI
+         */
+        startSingleEdit() {
+            if (this.uiEditMode !== UIEditMode.none) return;
+            this.changeSet.reset();
+            this.uiEditMode = UIEditMode.single;
+        },
+
+    }  as AlpineComponent;
+}
+
+export class LectureEditorX {
     private changeSet: ChangeSet<Lecture>;
 
     public readonly videoFiles: VideoFile[] = [

From fcf15c2f49728ce8d7d25e3fa3b0e7ae731b458c Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Tue, 29 Aug 2023 15:37:06 +0200
Subject: [PATCH 15/77] changeset working except video sections

---
 web/assets/init-admin.js                        | 17 +++++++++++++++++
 .../manage/lecture-management-card.gohtml       |  9 ++++-----
 web/ts/edit-course.ts                           |  8 +++++++-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 2648dbb35..313d6e080 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -19,6 +19,23 @@ document.addEventListener("alpine:init", () => {
             changeSet.listen(onChangeSetUpdateHandler);
             el.addEventListener('change', changeHandler);
 
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+                el.removeEventListener('change', changeHandler)
+            })
+        } else if (el.type === "checkbox") {
+            const changeHandler = (e) => {
+                changeSet.patch(fieldName, e.target.checked);
+            };
+
+            const onChangeSetUpdateHandler = (data) => {
+                el.checked = !!data[fieldName];
+            };
+
+            changeSet.listen(onChangeSetUpdateHandler);
+            el.addEventListener('change', changeHandler)
+            el.checked = changeSet.get()[fieldName];
+
             cleanup(() => {
                 changeSet.removeListener(onChangeSetUpdateHandler);
                 el.removeEventListener('change', changeHandler)
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index e1c66b0d8..e5b2c9dcc 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -381,8 +381,7 @@
             <div class="mt-6 flex items-center justify-between">
                 <section class="flex items-center py-1 px-3">
                     <label class="relative inline-flex items-center cursor-pointer">
-                        <input type="checkbox" value="" class="sr-only peer" @change="updateIsDirty()"
-                               x-model="lectureData.newIsChatEnabled">
+                        <input type="checkbox" name="isChatEnabled" class="sr-only peer" x-bind-change-set="changeSet" />
                         <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-600
                         dark:peer-focus:ring-indigo-600 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full
                         peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px]
@@ -392,15 +391,15 @@
                     </label>
                 </section>
                 <div>
-                    <button :disabled="lectureData.isSaving" @click="discardEdit();"
+                    <button :disabled="isSaving" @click="discardEdit();"
                             class="px-8 py-3 text-2 text-white rounded bg-indigo-500/70 hover:bg-indigo-500/90 dark:bg-indigo-500/10 disabled:opacity-20 dark:hover:bg-indigo-500/20 mr-4">
                         Discard Changes
                     </button>
                     <button
                             @click="saveEdit();"
-                            :disabled="!lectureData.isDirty || lectureData.isSaving"
+                            :disabled="!isDirty || isSaving"
                             class="px-8 py-3 text-2 rounded text-white bg-indigo-500 hover:bg-indigo-600 disabled:opacity-20 disabled:hover:bg-indigo-500"
-                            x-text="lectureData.isSaving ? 'loading ...' : (uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
+                            x-text="isSaving ? 'loading ...' : (uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
                     ></button>
                 </div>
             </div>
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 9b650ed0d..c4df99622 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -126,6 +126,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         lastErrors: [] as string[],
         uiEditMode: UIEditMode.none,
         isDirty: false,
+        isSaving: false,
 
         // Lecture Data
         changeSet: null,
@@ -163,7 +164,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
 
         getVideoFile(key: string): File {
             return this.lectureData[key];
-        }
+        },
 
         /**
          * Opens the series lecture editor UI
@@ -183,6 +184,11 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             this.uiEditMode = UIEditMode.single;
         },
 
+        discardEdit() {
+            this.changeSet.reset();
+            this.uiEditMode = UIEditMode.none;
+        }
+
     }  as AlpineComponent;
 }
 

From e576712ccaed99ec8b1bc338ea6eeb7a1b1d59ad Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Tue, 29 Aug 2023 15:49:21 +0200
Subject: [PATCH 16/77] fix discard files

---
 web/assets/init-admin.js                                      | 4 ++++
 .../partial/course/manage/lecture-management-card.gohtml      | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 313d6e080..5595ba548 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -2,6 +2,7 @@ document.addEventListener("alpine:init", () => {
     Alpine.directive("bind-change-set", (el, { expression, value, modifiers }, { evaluate, cleanup }) => {
         const changeSet = evaluate(expression);
         const fieldName = value || el.name;
+        const nativeEventName = "csupdate";
 
         if (el.type === "file") {
             const isSingle = modifiers.includes("single")
@@ -14,6 +15,7 @@ document.addEventListener("alpine:init", () => {
                 if (!data[fieldName]) {
                     el.value = "";
                 }
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
@@ -30,6 +32,7 @@ document.addEventListener("alpine:init", () => {
 
             const onChangeSetUpdateHandler = (data) => {
                 el.checked = !!data[fieldName];
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: !!data[fieldName] }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
@@ -47,6 +50,7 @@ document.addEventListener("alpine:init", () => {
 
             const onChangeSetUpdateHandler = (data) => {
                 el.value = data[fieldName];
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index e5b2c9dcc..79c8140fe 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -248,7 +248,7 @@
                             <div x-on:click="() => { $event.stopPropagation(); changeSet.patch(video.key, null); file = getVideoFile(video.key); }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                                 <i class="fa fa-xmark text-3"></i>
                             </div>
-                            <input :id="video.inputId" class="hidden" :name="video.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" @change="() => { file = getVideoFile(video.key); }" />
+                            <input :id="video.inputId" class="hidden" :name="video.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" @csupdate="(e) => { file = e.detail; }" />
                             <div x-show="lectureData.isSaving && file !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
                                 <span x-text="`${progress[video.type]}%`"></span>
                             </div>

From c25956ade02cd4021e59c79417c91bf5409c4935 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Sun, 3 Sep 2023 19:57:17 +0200
Subject: [PATCH 17/77] save from laptop

---
 web/ts/api/admin-lecture-list.ts        | 13 ++++++++++---
 web/ts/change-set.ts                    | 11 ++++++++++-
 web/ts/data-store/admin-lecture-list.ts | 14 ++++++++++++++
 web/ts/edit-course.ts                   | 25 +------------------------
 4 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 2dd7a04b7..838ad4d9a 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -90,11 +90,11 @@ export const AdminLectureList = {
     update: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
         const promises = [];
         if (request.name !== undefined) {
-            promises.push(postData("/api/course/" + courseId + "/renameLecture/" + lectureId, { name: request.name }));
+            promises.push(postData(`/api/course/${courseId}/renameLecture/${lectureId}`, { name: request.name }));
         }
 
         if (request.description !== undefined) {
-            promises.push(postData("/api/course/" + courseId + "/updateDescription/" + lectureId, { name: request.description }));
+            promises.push(postData(`/api/course/${courseId}/updateDescription/${lectureId}`, { name: request.description }));
         }
 
         if (request.lectureHallId !== undefined) {
@@ -102,7 +102,7 @@ export const AdminLectureList = {
         }
 
         if (request.isChatEnabled !== undefined) {
-            promises.push(patchData("/api/stream/" + lectureId + "/chat/enabled", { lectureId, isChatEnabled: request.isChatEnabled }));
+            promises.push(patchData(`/api/stream/${lectureId}/chat/enabled`, { lectureId, isChatEnabled: request.isChatEnabled }));
         }
 
         const errors = (await Promise.all(promises)).filter((res) => res.status !== StatusCodes.OK);
@@ -112,6 +112,13 @@ export const AdminLectureList = {
         }
     },
 
+    setPrivate: async (lectureId: number, isPrivate: boolean): Promise<void> => {
+        const res = await patchData(`/api/stream/${lectureId}/visibility`, { private: isPrivate });
+        if (res.status !== StatusCodes.OK) {
+            throw Error(res.body.toString());
+        }
+    },
+
     delete: async function (courseId: number, lectureIds: number[]): Promise<Response> {
         return await postData(`/api/course/${courseId}/deleteLectures`, {
             streamIDs: lectureIds,
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index af4be2a03..46456b63a 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -33,8 +33,17 @@ export class ChangeSet<T> {
         this.dispatchUpdate();
     }
 
-    patch(key: string, val: T) {
+    /**
+     * Patches a key with a new value. This makes the state dirty.
+     * @param key
+     * @param val
+     * @param isCommitted if true, the data will be passed also to the state, and won't make the model dirty.
+     */
+    patch(key: string, val: any, { isCommitted = false }: { isCommitted : boolean }) {
         this.changeState = {...this.changeState, [key]: val};
+        if (isCommitted) {
+            this.state = {...this.state, [key]: val};
+        }
         this.dispatchUpdate();
     }
 
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index e1e9f0de3..66db6e570 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -41,6 +41,20 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
+    async setPrivate(courseId: number, lectureId: number, isPrivate: boolean) {
+        await AdminLectureList.setPrivate(lectureId, isPrivate);
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId !== lectureId) {
+                return s;
+            }
+            return {
+                ...s,
+                private: !s.private
+            }
+        });
+        await this.triggerUpdate(courseId);
+    }
+
     async delete(courseId: number, lectureIds: number[]) {
         await AdminLectureList.delete(courseId, lectureIds);
         this.data[courseId] = (await this.getData(courseId)).filter((s) => !lectureIds.includes(s.lectureId));
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index c4df99622..be4559807 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -217,33 +217,9 @@ export class LectureEditorX {
     }
 
     lectureComparator(key: string, a: Lecture, b: Lecture): boolean|null {
-        // here we can set some custom comparisons
-
         return null;
     }
 
-    /*name: string;
-    description: string;
-    lectureHallId: string;
-    lectureHallName: string;
-    isChatEnabled = false;
-    uiEditMode: UIEditMode = UIEditMode.none;
-    newName: string;
-    newDescription: string;
-    newLectureHallId: string;
-    newIsChatEnabled = false;
-    newCombinedVideo = null;
-    newPresentationVideo = null;
-    newCameraVideo = null;
-    isDirty = false;
-    isSaving = false;
-    isDeleted = false;
-    lastErrors: string[] = [];
-    transcodingProgresses: TranscodingProgress[];
-    files: LectureFile[];
-    private: boolean;
-    downloadableVods: DownloadableVod[];*/
-
     startSeriesEdit() {
         if (this.uiEditMode !== UIEditMode.none) return;
         this.changeSet.reset();
@@ -257,6 +233,7 @@ export class LectureEditorX {
     }
 
     async toggleVisibility() {
+        //this.changeSet.patch("private", !this.lectureData.private, { isCommitted: true });
         /*fetch(`/api/stream/${this.lectureId}/visibility`, {
             method: "PATCH",
             body: JSON.stringify({ private: !this.private }),

From 51021410b5e0de997cd3f36b447981be187182db Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sun, 3 Sep 2023 20:03:32 +0200
Subject: [PATCH 18/77] Add changeset doku

---
 web/ts/change-set.ts | 41 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 46456b63a..74f6b63d7 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -16,18 +16,33 @@ export class ChangeSet<T> {
         this.reset();
     }
 
+    /**
+     * Add listener to receive change set updates
+     * @param onUpdate
+     */
     listen(onUpdate: (changeState: T, dirtyState: DirtyState) => void) {
         this.onUpdate.push(onUpdate);
     }
 
+    /**
+     * Remove listener from change set.
+     * @param onUpdate
+     */
     removeListener(onUpdate: (changeState: T, dirtyState: DirtyState) => void) {
         this.onUpdate = this.onUpdate.filter((o) => o !== onUpdate);
     }
 
+    /**
+     * Returns the current uncommitted change state.
+     */
     get(): T {
         return this.changeState;
     }
 
+    /**
+     * Sets the change state.
+     * @param val
+     */
     set(val: T) {
         this.changeState = {...val};
         this.dispatchUpdate();
@@ -47,15 +62,24 @@ export class ChangeSet<T> {
         this.dispatchUpdate();
     }
 
+    /**
+     * Commits the change state to the state. State is updated to the latest change state afterwards.
+     */
     commit(): void {
         this.state = {...this.changeState};
     }
 
+    /**
+     * Resets the change state to the state. Change state is the most current state afterwards.
+     */
     reset(): void {
         this.changeState = {...this.state};
         this.dispatchUpdate();
     }
 
+    /**
+     * A flag that indicated whether the change state is the same then the state or not.
+     */
     isDirty(): boolean {
         for (const key of Object.keys(this.state)) {
             if (this.keyChanged(key)) {
@@ -65,6 +89,9 @@ export class ChangeSet<T> {
         return false;
     }
 
+    /**
+     * Returns the keys that are not the same between the state and the change state.
+     */
     changedKeys(): string[] {
         const res = [];
         for (const key of Object.keys(this.state)) {
@@ -75,6 +102,10 @@ export class ChangeSet<T> {
         return res;
     }
 
+    /**
+     * Checks if a specific key's value is different on the state and the change state.
+     * @param key Key that should be checked
+     */
     keyChanged(key: string): boolean {
         // Check with custom comparator if set
         if (this.comparator !== undefined) {
@@ -84,13 +115,13 @@ export class ChangeSet<T> {
             }
         }
 
-        // Otherwise just check if equiv
-        if (this.state[key] !== this.changeState[key]) {
-            return true;
-        }
-        return false;
+        // else just check if equiv
+        return this.state[key] !== this.changeState[key];
     }
 
+    /**
+     * Executes all onUpdate listeners
+     */
     dispatchUpdate() {
         if (this.onUpdate.length > 0) {
             const dirtyKeys = this.changedKeys();

From 7518b5d243ddd75dc472599a7d7d1de847871118 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sun, 3 Sep 2023 20:20:50 +0200
Subject: [PATCH 19/77] make private works like charm

---
 web/ts/change-set.ts  | 18 ++++++++++++++++++
 web/ts/edit-course.ts | 39 ++++++++++++++++++++-------------------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 74f6b63d7..63131151e 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -62,11 +62,29 @@ export class ChangeSet<T> {
         this.dispatchUpdate();
     }
 
+    /**
+     * Updates the state. Also updates all keys that are not dirty on the change-state, so they remain "undirty".
+     * @param state
+     */
+    updateState(state: T) {
+        const changedKeys = this.changedKeys()
+        this.state = {...state};
+
+        for (const key of Object.keys(this.state)) {
+            if (!changedKeys.includes(key)) {
+                this.changeState[key] = this.state[key];
+            }
+        }
+
+        this.dispatchUpdate();
+    }
+
     /**
      * Commits the change state to the state. State is updated to the latest change state afterwards.
      */
     commit(): void {
         this.state = {...this.changeState};
+        this.dispatchUpdate();
     }
 
     /**
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index be4559807..d8e7476a9 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -29,20 +29,7 @@ export class LectureList {
     constructor(courseId: number) {
         this.courseId = courseId;
         this.markedIds = this.parseUrlHash();
-
-        /*
-        // load initial state into lecture objects
-        for (const lecture of initialState) {
-            let l = new Lecture();
-            l = Object.assign(l, lecture);
-            l.start = new Date(lecture.start);
-            l.end = new Date(lecture.end);
-            LectureList.lectures.push(l);
-        }*/
         this.setup();
-
-        //LectureList.triggerUpdate();
-        //setTimeout(() => this.scrollSelectedLecturesIntoView(), 500);
     }
 
     async setup() {
@@ -72,7 +59,7 @@ export class LectureList {
         const lectures = this.lectures;
         if (lectures.length < 2) return false;
         const first = lectures[0];
-        return lectures.slice(1).some((l) => l.data.isChatEnabled !== l.data.isChatEnabled);
+        return lectures.slice(1).some((l) => l.isChatEnabled !== first.isChatEnabled);
     }
 
     triggerUpdateEvent() {
@@ -112,6 +99,7 @@ interface VideoFile {
     key: string;
     type: string;
     title: string;
+    inputId: string;
 }
 
 export function lectureEditor(lecture: Lecture): AlpineComponent {
@@ -129,17 +117,26 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         isSaving: false,
 
         // Lecture Data
-        changeSet: null,
-        lectureData: null,
+        changeSet: null as ChangeSet<Lecture>|null,
+        lectureData: null as Lecture|null,
 
         /**
          * AlpineJS init function which is called automatically in addition to 'x-init'
          */
         init() {
+            // This tracks changes that are not saved yet
             this.changeSet = new ChangeSet<Lecture>(lecture, this.lectureComparator, (data, dirtyState) => {
                 this.lectureData = data;
                 this.isDirty = dirtyState.isDirty;
             });
+
+            // This updates the state live in background
+            DataStore.adminLectureList.subscribe(lecture.courseId, (lectureList) => {
+                const update = lectureList.find((l) => l.lectureId === lecture.lectureId);
+                if (update) {
+                    this.changeSet.updateState(update);
+                }
+            });
         },
 
         /**
@@ -154,6 +151,10 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             return null;
         },
 
+        toggleVisibility() {
+            DataStore.adminLectureList.setPrivate(this.lectureData.courseId, this.lectureData.lectureId, !this.lectureData.private);
+        },
+
         async keepProgressesUpdated() {
 
         },
@@ -196,9 +197,9 @@ export class LectureEditorX {
     private changeSet: ChangeSet<Lecture>;
 
     public readonly videoFiles: VideoFile[] = [
-        { key: "newCombinedVideo", type: "PRES", title: "Combined Video" },
-        { key: "newPresentationVideo", type: "PRES", title: "Presentation Video" },
-        { key: "newCameraVideo", type: "PRES", title: "Camera Video" },
+        { key: "newCombinedVideo", type: "PRES", title: "Combined Video", inputId:"" },
+        { key: "newPresentationVideo", type: "PRES", title: "Presentation Video", inputId:"" },
+        { key: "newCameraVideo", type: "PRES", title: "Camera Video", inputId:"" },
     ];
 
     lastErrors: string[];

From 8416d26ed1917b343b8d1cb70f93e4ba36207bff Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sun, 3 Sep 2023 21:03:42 +0200
Subject: [PATCH 20/77] changing works pretty well

---
 web/ts/change-set.ts  |  2 +-
 web/ts/edit-course.ts | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 63131151e..e1ddd497e 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -54,7 +54,7 @@ export class ChangeSet<T> {
      * @param val
      * @param isCommitted if true, the data will be passed also to the state, and won't make the model dirty.
      */
-    patch(key: string, val: any, { isCommitted = false }: { isCommitted : boolean }) {
+    patch(key: string, val: any, { isCommitted = false }: { isCommitted : boolean } = {}) {
         this.changeState = {...this.changeState, [key]: val};
         if (isCommitted) {
             this.state = {...this.state, [key]: val};
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index d8e7476a9..248a9dce7 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -185,9 +185,30 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             this.uiEditMode = UIEditMode.single;
         },
 
+        /**
+         * Discards current changes
+         */
         discardEdit() {
             this.changeSet.reset();
             this.uiEditMode = UIEditMode.none;
+        },
+
+        /**
+         * Save changes send them to backend and commit change set.
+         */
+        async saveEdit() {
+            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled } = this.lectureData;
+            const changedKeys = this.changeSet.changedKeys();
+
+            await DataStore.adminLectureList.updateMeta(courseId, lectureId, {
+                name: changedKeys.includes("name") ? name : undefined,
+                description: changedKeys.includes("description") ? description : undefined,
+                lectureHallId: changedKeys.includes("lectureHallId") ? lectureHallId : undefined,
+                isChatEnabled: changedKeys.includes("isChatEnabled") ? isChatEnabled : undefined,
+            });
+
+            this.changeSet.commit();
+            this.uiEditMode = UIEditMode.none;
         }
 
     }  as AlpineComponent;

From 8afb2b9f7aa91fa1adf66cd20f550a8b411c6603 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sun, 3 Sep 2023 22:03:13 +0200
Subject: [PATCH 21/77] add video upload

---
 .../manage/lecture-management-card.gohtml     |  12 +-
 web/ts/api/admin-lecture-list.ts              |  29 ++++-
 web/ts/change-set.ts                          |   6 +-
 web/ts/data-store/admin-lecture-list.ts       |  15 ++-
 web/ts/edit-course.ts                         | 107 ++++++++----------
 web/ts/global.ts                              |  29 +++++
 6 files changed, 122 insertions(+), 76 deletions(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 79c8140fe..c469233a2 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -232,12 +232,12 @@
                 <article x-data="{ id: `lecture_media_${lectureData.lectureId}`, progress: { 'COMB': 0, 'PRES': 0, 'CAM': 0 } }"
                          @voduploadprogressedit.window="({ detail: { type, progress, lectureId } }) => { if (lectureId === lectureData.lectureId) { progress[type] = progress; }}"
                          class="w-full flex justify-center flex-wrap">
-                    <template x-for="video in videoFiles" :key="video.key">
-                        <div x-data="{ file: getVideoFile(video.key) }"
+                    <template x-for="video in videoFiles" :key="video.info.key">
+                        <div x-data="{ file: getVideoFile(video.info.key) }"
                              x-on:click="() => document.querySelector(`#${video.inputId}`).click()"
                              class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
                         >
-                            <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lectureData.lectureId}/thumbs/vod?type=${video.type}')`"></div>
+                            <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lectureData.lectureId}/thumbs/vod?type=${video.info.type}')`"></div>
                             <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2" x-text="video.title"></div>
                             <div class="w-full h-full flex justify-center items-center drop-shadow-[2px_4px_6px_black]">
                                 <span x-show="!file">Click to upload new Video</span>
@@ -245,12 +245,12 @@
                                     <span class="text-green-400" x-text="file.name"></span>
                                 </template>
                             </div>
-                            <div x-on:click="() => { $event.stopPropagation(); changeSet.patch(video.key, null); file = getVideoFile(video.key); }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                            <div x-on:click="() => { $event.stopPropagation(); changeSet.patch(video.info.key, null); file = getVideoFile(video.info.key); }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
                                 <i class="fa fa-xmark text-3"></i>
                             </div>
-                            <input :id="video.inputId" class="hidden" :name="video.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" @csupdate="(e) => { file = e.detail; }" />
+                            <input :id="video.inputId" class="hidden" :name="video.info.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" @csupdate="(e) => { file = e.detail; }" />
                             <div x-show="lectureData.isSaving && file !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
-                                <span x-text="`${progress[video.type]}%`"></span>
+                                <span x-text="`${progress[video.info.type]}%`"></span>
                             </div>
                         </div>
                     </template>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 838ad4d9a..1a8fc11c3 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -1,6 +1,6 @@
 import { del, get, post, put } from "../utilities/fetch-wrappers";
 import {StatusCodes} from "http-status-codes";
-import {patchData, postData} from "../global";
+import {patchData, postData, putData, UploadFile, UploadFileListener} from "../global";
 
 export interface UpdateLectureMetaRequest {
     name?: string;
@@ -29,6 +29,22 @@ export interface CreateNewLectureRequest {
     camFile: [],
 }
 
+export interface LectureVideoType {
+    key: string;
+    type: string;
+}
+
+export const LectureVideoTypeComb = { key: "newCombinedVideo", type: "COMB" } as LectureVideoType;
+export const LectureVideoTypePres = { key: "newPresentationVideo", type: "PRES" } as LectureVideoType;
+export const LectureVideoTypeCam = { key: "newCameraVideo", type: "CAM" } as LectureVideoType;
+
+
+export const LectureVideoTypes = [
+    LectureVideoTypeComb,
+    LectureVideoTypePres,
+    LectureVideoTypeCam,
+] as LectureVideoType[];
+
 export interface Lecture {
     color:                 string;
     courseId:              number;
@@ -86,7 +102,6 @@ export const AdminLectureList = {
         return post(`/api/stream/${courseId}/sections`, request);
     },
 
-    // TODO: make one unified endpoint
     update: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
         const promises = [];
         if (request.name !== undefined) {
@@ -94,7 +109,7 @@ export const AdminLectureList = {
         }
 
         if (request.description !== undefined) {
-            promises.push(postData(`/api/course/${courseId}/updateDescription/${lectureId}`, { name: request.description }));
+            promises.push(putData(`/api/course/${courseId}/updateDescription/${lectureId}`, { name: request.description }));
         }
 
         if (request.lectureHallId !== undefined) {
@@ -119,6 +134,14 @@ export const AdminLectureList = {
         }
     },
 
+    uploadVideo: async (courseId: number, lectureId: number, videoType: string, file: File, listener : UploadFileListener = {}) => {
+        await UploadFile(
+            `/api/course/${courseId}/uploadVODMedia?streamID=${lectureId}&videoType=${videoType}`,
+            file,
+            listener,
+        );
+    },
+
     delete: async function (courseId: number, lectureIds: number[]): Promise<Response> {
         return await postData(`/api/course/${courseId}/deleteLectures`, {
             streamIDs: lectureIds,
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index e1ddd497e..2e549710f 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -81,8 +81,12 @@ export class ChangeSet<T> {
 
     /**
      * Commits the change state to the state. State is updated to the latest change state afterwards.
+     * @param discardKeys List of keys that should be discarded and not committed.
      */
-    commit(): void {
+    commit({ discardKeys = [] }: { discardKeys: string[] } = {}): void {
+        for (const key in discardKeys) {
+            this.changeState[key] = this.state[key];
+        }
         this.state = {...this.changeState};
         this.dispatchUpdate();
     }
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 66db6e570..ec6dfe856 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -1,6 +1,7 @@
 import { StreamableMapProvider } from "./provider";
 import {AdminLectureList, Lecture, UpdateLectureMetaRequest} from "../api/admin-lecture-list";
 import {FileType} from "../edit-course";
+import {UploadFileListener} from "../global";
 
 const dateFormatOptions: Intl.DateTimeFormatOptions = {
     weekday: "long",
@@ -61,16 +62,16 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
-    async updateMeta(courseId: number, streamId: number, request: UpdateLectureMetaRequest) {
-        await AdminLectureList.update(courseId, streamId, request);
+    async updateMeta(courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
+        await AdminLectureList.update(courseId, lectureId, request);
 
         this.data[courseId] = (await this.getData(courseId)).map((s) => {
-            if (s.lectureId === streamId) {
+            if (s.lectureId === lectureId) {
                 s = {
                     ...s,
                 };
 
-                // Path updated keys in local data
+                // Patch updated keys in local data
                 for (const requestKey in request) {
                     const val = request[requestKey];
                     if (val !== undefined) {
@@ -80,6 +81,10 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
             }
             return s;
         });
-        await this.triggerUpdate(streamId);
+        await this.triggerUpdate(courseId);
+    }
+
+    async uploadVideo(courseId: number, lectureId: number, videoType: string, file: File, listener : UploadFileListener = {}) {
+        await AdminLectureList.uploadVideo(courseId, lectureId, videoType, file, listener);
     }
 }
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 248a9dce7..90f788b45 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -1,7 +1,13 @@
 import { Delete, patchData, postData, putData, sendFormData, showMessage } from "./global";
 import { StatusCodes } from "http-status-codes";
 import { DataStore } from "./data-store/data-store";
-import { Lecture } from "./api/admin-lecture-list";
+import {
+    Lecture,
+    LectureVideoType, LectureVideoTypeCam,
+    LectureVideoTypeComb,
+    LectureVideoTypePres,
+    LectureVideoTypes
+} from "./api/admin-lecture-list";
 import {ChangeSet} from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 
@@ -95,20 +101,18 @@ class TranscodingProgress {
     progress: number;
 }
 
-interface VideoFile {
-    key: string;
-    type: string;
-    title: string;
+interface VideoFileUI {
+    info: LectureVideoType,
     inputId: string;
 }
 
 export function lectureEditor(lecture: Lecture): AlpineComponent {
     return {
         videoFiles: [
-            { key: "newCombinedVideo", type: "PRES", title: "Combined Video", inputId: `input_${lecture.lectureId}_comb` },
-            { key: "newPresentationVideo", type: "PRES", title: "Presentation Video", inputId: `input_${lecture.lectureId}_pres` },
-            { key: "newCameraVideo", type: "PRES", title: "Camera Video", inputId: `input_${lecture.lectureId}_cam` },
-        ] as VideoFile[],
+            { info: LectureVideoTypeComb, title: "Combined Video", inputId: `input_${lecture.lectureId}_comb` },
+            { info: LectureVideoTypePres, title: "Presentation Video", inputId: `input_${lecture.lectureId}_pres` },
+            { info: LectureVideoTypeCam, title: "Camera Video", inputId: `input_${lecture.lectureId}_cam` },
+        ] as VideoFileUI[],
 
         // UI Data
         lastErrors: [] as string[],
@@ -200,14 +204,38 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             const { courseId, lectureId, name, description, lectureHallId, isChatEnabled } = this.lectureData;
             const changedKeys = this.changeSet.changedKeys();
 
-            await DataStore.adminLectureList.updateMeta(courseId, lectureId, {
-                name: changedKeys.includes("name") ? name : undefined,
-                description: changedKeys.includes("description") ? description : undefined,
-                lectureHallId: changedKeys.includes("lectureHallId") ? lectureHallId : undefined,
-                isChatEnabled: changedKeys.includes("isChatEnabled") ? isChatEnabled : undefined,
-            });
+            try {
+                // Saving new meta data
+                await DataStore.adminLectureList.updateMeta(courseId, lectureId, {
+                    name: changedKeys.includes("name") ? name : undefined,
+                    description: changedKeys.includes("description") ? description : undefined,
+                    lectureHallId: changedKeys.includes("lectureHallId") ? lectureHallId : undefined,
+                    isChatEnabled: changedKeys.includes("isChatEnabled") ? isChatEnabled : undefined,
+                });
+
+                // Uploading new videos
+                for (const videoFile: VideoFileUI in this.videoFiles) {
+                    if (!changedKeys.includes(videoFile.info.key)) {
+                        continue;
+                    }
+
+                    const file = this.lectureData[videoFile.info.key];
+                    await DataStore.adminLectureList.uploadVideo(courseId, lectureId, videoFile.info.type, file, {
+                        onProgress: (progress) => {
+                            window.dispatchEvent(
+                                new CustomEvent(`voduploadprogressedit`, {
+                                    detail: { type: videoFile.info.type, progress, lectureId: this.lectureId },
+                                }),
+                            );
+                        }
+                    });
+                }
+            } catch (e) {
+                this.lastErrors = [e.description];
+                return;
+            }
 
-            this.changeSet.commit();
+            this.changeSet.commit({ discardKeys: this.videoFiles.map((v) => v.info.key) });
             this.uiEditMode = UIEditMode.none;
         }
 
@@ -217,11 +245,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
 export class LectureEditorX {
     private changeSet: ChangeSet<Lecture>;
 
-    public readonly videoFiles: VideoFile[] = [
-        { key: "newCombinedVideo", type: "PRES", title: "Combined Video", inputId:"" },
-        { key: "newPresentationVideo", type: "PRES", title: "Presentation Video", inputId:"" },
-        { key: "newCameraVideo", type: "PRES", title: "Camera Video", inputId:"" },
-    ];
+    public readonly videoFiles: VideoFileUI[] = [];
 
     lastErrors: string[];
     uiEditMode: UIEditMode;
@@ -254,23 +278,7 @@ export class LectureEditorX {
         this.uiEditMode = UIEditMode.single;
     }
 
-    async toggleVisibility() {
-        //this.changeSet.patch("private", !this.lectureData.private, { isCommitted: true });
-        /*fetch(`/api/stream/${this.lectureId}/visibility`, {
-            method: "PATCH",
-            body: JSON.stringify({ private: !this.private }),
-            headers: { "Content-Type": "application/json" },
-        }).then((r) => {
-            if (r.status == StatusCodes.OK) {
-                this.private = !this.private;
-                if (this.private) {
-                    this.color = "gray-500";
-                } else {
-                    this.color = "success";
-                }
-            }
-        });*/
-    }
+    async toggleVisibility() {}
 
     async keepProgressesUpdated() {
         /*if (!this.isConverting) {
@@ -1200,29 +1208,6 @@ export function createLectureForm(args: { s: [] }) {
     };
 }
 
-function uploadFilePost(url: string, file: File, onProgress: (progress: number) => void): Promise<string> {
-    const xhr = new XMLHttpRequest();
-    const vodUploadFormData = new FormData();
-    vodUploadFormData.append("file", file);
-    return new Promise((resolve, reject) => {
-        xhr.onloadend = () => {
-            if (xhr.status === 200) {
-                resolve(xhr.responseText);
-            } else {
-                reject();
-            }
-        };
-        xhr.upload.onprogress = (e: ProgressEvent) => {
-            if (!e.lengthComputable) {
-                return;
-            }
-            onProgress(Math.floor(100 * (e.loaded / e.total)));
-        };
-        xhr.open("POST", url);
-        xhr.send(vodUploadFormData);
-    });
-}
-
 export function sendCourseSettingsForm(courseId: number) {
     const form = document.getElementById("course-settings-form") as HTMLFormElement;
     const formData = new FormData(form);
diff --git a/web/ts/global.ts b/web/ts/global.ts
index 5fe96316d..34eedccf1 100644
--- a/web/ts/global.ts
+++ b/web/ts/global.ts
@@ -45,6 +45,35 @@ export async function Delete(url = "") {
     });
 }
 
+export interface UploadFileListener {
+    onProgress?: (progress: number) => void
+}
+
+export function UploadFile(url: string, file: File, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
+    const xhr = new XMLHttpRequest();
+    const vodUploadFormData = new FormData();
+    vodUploadFormData.append("file", file);
+    return new Promise((resolve, reject) => {
+        xhr.onloadend = () => {
+            if (xhr.status === 200) {
+                resolve(xhr);
+            } else {
+                reject(xhr);
+            }
+        };
+        xhr.upload.onprogress = (e: ProgressEvent) => {
+            if (!e.lengthComputable) {
+                return;
+            }
+            if (listener.onProgress) {
+                listener.onProgress(Math.floor(100 * (e.loaded / e.total)));
+            }
+        };
+        xhr.open("POST", url);
+        xhr.send(vodUploadFormData);
+    });
+}
+
 export function sendFormData(url, formData: FormData) {
     const HttpReq = new XMLHttpRequest();
     HttpReq.open("POST", url, false);

From f4a005f184177d7c3b1f960f98bf634fc2861f75 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sun, 3 Sep 2023 22:26:50 +0200
Subject: [PATCH 22/77] add series update

---
 web/ts/api/admin-lecture-list.ts        | 45 ++++++++++++++++++++++++-
 web/ts/data-store/admin-lecture-list.ts | 26 +++++++++++---
 web/ts/edit-course.ts                   | 13 ++++---
 3 files changed, 74 insertions(+), 10 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 1a8fc11c3..ba522376a 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -93,16 +93,32 @@ export interface DownloadableVOD {
  * REST API Wrapper for /api/stream/:id/sections
  */
 export const AdminLectureList = {
+
+    /**
+     * Fetches all lectures for a course
+     * @param courseId
+     */
     get: async function (courseId: number): Promise<Lecture[]> {
         const result = await get(`/api/course/${courseId}/lectures`);
         return result["streams"];
     },
 
+    /**
+     * Adds a new lecture to a course.
+     * @param courseId
+     * @param request
+     */
     add: async function (courseId: number, request: object) {
         return post(`/api/stream/${courseId}/sections`, request);
     },
 
-    update: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
+    /**
+     * Updates metadata of a lecture.
+     * @param courseId
+     * @param lectureId
+     * @param request
+     */
+    updateMetadata: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
         const promises = [];
         if (request.name !== undefined) {
             promises.push(postData(`/api/course/${courseId}/renameLecture/${lectureId}`, { name: request.name }));
@@ -127,6 +143,20 @@ export const AdminLectureList = {
         }
     },
 
+    /**
+     * Distributes the lecture metadata of given lecture to all lectures in its series.
+     * @param courseId
+     * @param lectureId
+     */
+    saveSeriesMetadata: async (courseId: number, lectureId: number) => {
+        return await postData(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
+    },
+
+    /**
+     * Updates the private state of a lecture.
+     * @param lectureId
+     * @param isPrivate
+     */
     setPrivate: async (lectureId: number, isPrivate: boolean): Promise<void> => {
         const res = await patchData(`/api/stream/${lectureId}/visibility`, { private: isPrivate });
         if (res.status !== StatusCodes.OK) {
@@ -134,6 +164,14 @@ export const AdminLectureList = {
         }
     },
 
+    /**
+     * Uploads a video to a lecture.
+     * @param courseId
+     * @param lectureId
+     * @param videoType
+     * @param file
+     * @param listener
+     */
     uploadVideo: async (courseId: number, lectureId: number, videoType: string, file: File, listener : UploadFileListener = {}) => {
         await UploadFile(
             `/api/course/${courseId}/uploadVODMedia?streamID=${lectureId}&videoType=${videoType}`,
@@ -142,6 +180,11 @@ export const AdminLectureList = {
         );
     },
 
+    /**
+     * Deletes a lecture
+     * @param courseId
+     * @param lectureIds
+     */
     delete: async function (courseId: number, lectureIds: number[]): Promise<Response> {
         return await postData(`/api/course/${courseId}/deleteLectures`, {
             streamIDs: lectureIds,
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index ec6dfe856..db941bcde 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -14,6 +14,13 @@ const timeFormatOptions: Intl.DateTimeFormatOptions = {
     minute: "2-digit",
 };
 
+export interface UpdateMetaProps {
+    payload: UpdateLectureMetaRequest;
+    options?: {
+        saveSeries?: boolean;
+    };
+}
+
 export class AdminLectureListProvider extends StreamableMapProvider<number, Lecture[]> {
     protected async fetcher(courseId: number): Promise<Lecture[]> {
         const result = await AdminLectureList.get(courseId);
@@ -62,18 +69,27 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
-    async updateMeta(courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
-        await AdminLectureList.update(courseId, lectureId, request);
+    async updateMeta(courseId: number, lectureId: number, props: UpdateMetaProps) {
+        const updateSeries = props?.options?.saveSeries === true;
+        const seriesIdentifier = this.data[courseId].find((l) => l.lectureId === lectureId)?.seriesIdentifier ?? null;
+
+        await AdminLectureList.updateMetadata(courseId, lectureId, props.payload);
+        if (updateSeries) {
+            await AdminLectureList.saveSeriesMetadata(courseId, lectureId);
+        }
 
         this.data[courseId] = (await this.getData(courseId)).map((s) => {
-            if (s.lectureId === lectureId) {
+            const isLecture = s.lectureId === lectureId;
+            const isInLectureSeries = s.seriesIdentifier === seriesIdentifier;
+
+            if (isLecture || (updateSeries && isInLectureSeries)) {
                 s = {
                     ...s,
                 };
 
                 // Patch updated keys in local data
-                for (const requestKey in request) {
-                    const val = request[requestKey];
+                for (const requestKey in props.payload) {
+                    const val = props.payload[requestKey];
                     if (val !== undefined) {
                         s[requestKey] = val;
                     }
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 90f788b45..22373ba57 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -207,10 +207,15 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             try {
                 // Saving new meta data
                 await DataStore.adminLectureList.updateMeta(courseId, lectureId, {
-                    name: changedKeys.includes("name") ? name : undefined,
-                    description: changedKeys.includes("description") ? description : undefined,
-                    lectureHallId: changedKeys.includes("lectureHallId") ? lectureHallId : undefined,
-                    isChatEnabled: changedKeys.includes("isChatEnabled") ? isChatEnabled : undefined,
+                    payload: {
+                        name: changedKeys.includes("name") ? name : undefined,
+                        description: changedKeys.includes("description") ? description : undefined,
+                        lectureHallId: changedKeys.includes("lectureHallId") ? lectureHallId : undefined,
+                        isChatEnabled: changedKeys.includes("isChatEnabled") ? isChatEnabled : undefined,
+                    },
+                    options: {
+                        saveSeries: this.uiEditMode === UIEditMode.series
+                    }
                 });
 
                 // Uploading new videos

From a258dc5da4d7d90c3de23cb5f45184b4b140e9c8 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sun, 3 Sep 2023 22:35:41 +0200
Subject: [PATCH 23/77] ported transcoding

---
 .../manage/lecture-management-card.gohtml     |  2 +-
 web/ts/api/admin-lecture-list.ts              |  4 ++++
 web/ts/edit-course.ts                         | 21 ++++++++++++++-----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index c469233a2..60c0db8ff 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -114,7 +114,7 @@
                               aria-labelledby="menu-button" tabindex="-1">
                             <span class="py-1" role="none">
                             <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
-                                <template x-for="file in getDownloads()">
+                                <template x-for="file in lectureData.downloadableVods">
                                     <a :href="file.DownloadURL" download
                                        class="hover:bg-gray-100 text-3 dark:hover:bg-gray-600
                                     block px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md"
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index ba522376a..b43496e36 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -180,6 +180,10 @@ export const AdminLectureList = {
         );
     },
 
+    getTranscodingProgress: async (courseId: number, lectureId: number, version: number): Promise<Number> => {
+        return (await fetch(`/api/course/${courseId}/stream/${lectureId}/transcodingProgress?v=${version}`)).json();
+    },
+
     /**
      * Deletes a lecture
      * @param courseId
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 22373ba57..f43d8b29f 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -2,6 +2,7 @@ import { Delete, patchData, postData, putData, sendFormData, showMessage } from
 import { StatusCodes } from "http-status-codes";
 import { DataStore } from "./data-store/data-store";
 import {
+    AdminLectureList,
     Lecture,
     LectureVideoType, LectureVideoTypeCam,
     LectureVideoTypeComb,
@@ -160,11 +161,21 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         async keepProgressesUpdated() {
-
-        },
-
-        getDownloads() {
-            //return this.downloadableVods;
+            if (!this.isConverting) {
+                return;
+            }
+            setTimeout(async () => {
+                for (let i = 0; i < this.transcodingProgresses.length; i++) {
+                    const res = await AdminLectureList.getTranscodingProgress(this.lectureData.courseId, this.lectureData.lectureId, this.transcodingProgresses[i].version);
+                    if (res === 100) {
+                        this.transcodingProgresses.splice(i, 1);
+                    } else {
+                        this.transcodingProgresses[i].progress = res;
+                    }
+                }
+                this.isConverting = this.transcodingProgresses.length > 0;
+                this.keepProgressesUpdated();
+            }, 5000);
         },
 
         getVideoFile(key: string): File {

From 184b0aac83f5e8600301bf5085f36b3862d447e3 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Tue, 5 Sep 2023 15:47:40 +0200
Subject: [PATCH 24/77] add readme and lecture hall select

---
 web/assets/init-admin.js                      | 87 ++++++++++++++++++-
 .../manage/lecture-management-card.gohtml     |  4 +-
 2 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 5595ba548..c562fb89d 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -1,4 +1,70 @@
 document.addEventListener("alpine:init", () => {
+    const textInputTypes = [
+        'text',
+        'password',
+        'email',
+        'search',
+        'url',
+        'tel',
+        'number',
+        'datetime-local',
+        'date',
+        'month',
+        'week',
+        'time',
+        'color'
+    ];
+
+    /**
+     * Alpine.js Directive: `x-bind-change-set`
+     *
+     * This directive allows you to synchronize form elements with a given changeSet object.
+     * It is designed to work with different form input types including text inputs,
+     * textareas, checkboxes, and file inputs.
+     *
+     * ## Parameters
+     *
+     * - `el`: The DOM element this directive is attached to.
+     * - `expression`: The JavaScript expression passed to the directive, evaluated to get the changeSet object.
+     * - `value`: Optional parameter to specify the field name. Defaults to the `name` attribute of the element.
+     * - `modifiers`: Array of additional modifiers to customize the behavior. For instance, use 'single' for single-file uploads.
+     * - `evaluate`: Function to evaluate Alpine.js expressions.
+     * - `cleanup`: Function to remove event listeners when element is destroyed or directive is unbound.
+     *
+     * ## Events
+     *
+     * This directive emits a custom event named "csupdate" whenever the changeSet object or the form element is updated.
+     *
+     * ## Usage
+     *
+     * ### Example in HTML
+     *
+     * ```html
+     * <select name="lectureHallId" x-bind-change-set="changeSet">
+     *   <option value="0">Self streaming</option>
+     *   <!-- ... other options ... -->
+     * </select>
+     * ```
+     *
+     * - `changeSet`: The changeSet object you want to bind with the form element.
+     *
+     * ## Modifiers
+     *
+     * - `single`: Use this modifier for file inputs when you want to work with a single file instead of a FileList.
+     *
+     * ```html
+     * <input type="file" x-bind-change-set.single="changeSet" />
+     * ```
+     *
+     * ## Notes
+     *
+     * This directive is intended to be used with the existing `ChangeSet` class.
+     * Make sure to import and initialize a `ChangeSet` object in your Alpine.js component
+     * to utilize this directive effectively. The `ChangeSet` class should have implemented
+     * methods such as `patch`, `listen`, `removeListener`, and `get`,
+     * and manage a `DirtyState` object for tracking changes.
+     */
+
     Alpine.directive("bind-change-set", (el, { expression, value, modifiers }, { evaluate, cleanup }) => {
         const changeSet = evaluate(expression);
         const fieldName = value || el.name;
@@ -43,7 +109,7 @@ document.addEventListener("alpine:init", () => {
                 changeSet.removeListener(onChangeSetUpdateHandler);
                 el.removeEventListener('change', changeHandler)
             })
-        } else {
+        } else  if (el.tagName === "textarea" || textInputTypes.includes(el.type)) {
             const keyupHandler = (e) => {
                 changeSet.patch(fieldName, e.target.value);
             };
@@ -61,6 +127,25 @@ document.addEventListener("alpine:init", () => {
                 changeSet.removeListener(onChangeSetUpdateHandler);
                 el.removeEventListener('keyup', keyupHandler)
             })
+        } else {
+            const changeHandler = (e) => {
+                changeSet.patch(fieldName, e.target.value);
+            };
+
+            const onChangeSetUpdateHandler = (data) => {
+                console.log(changeSet);
+                el.value = data[fieldName];
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+            };
+
+            changeSet.listen(onChangeSetUpdateHandler);
+            el.addEventListener('change', changeHandler)
+            el.value = changeSet.get()[fieldName];
+
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+                el.removeEventListener('change', changeHandler)
+            })
         }
     });
 });
\ No newline at end of file
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 60c0db8ff..42d859133 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -312,8 +312,8 @@
                                 <span>Select Lecture Hall</span>
                                 <select class="text-gray-700 dark:text-gray-300 dark:bg-secondary bg-gray-100 p-2"
                                         :id="id"
-                                        x-on:change="updateIsDirty()"
-                                        x-model="lectureData.newLectureHallId">
+                                        name="lectureHallId"
+                                        x-bind-change-set="changeSet">
                                     <option class="text-gray-700 dark:text-gray-300" value="0">
                                         Self streaming
                                     </option>

From 81e783dd90c040832dbe04f2deabbd9b6051d733 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Tue, 5 Sep 2023 15:55:51 +0200
Subject: [PATCH 25/77] more description

---
 web/ts/change-set.ts | 49 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 2e549710f..b5a9cb5e9 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -3,6 +3,55 @@ export interface DirtyState {
     dirtyKeys: string[];
 }
 
+/**
+ * ## ChangeSet Class
+ *
+ * The `ChangeSet` class is designed to manage and track changes to a state object.
+ * It provides an encapsulated way of observing state changes, committing them,
+ * or rolling them back. Essentially, it helps in maintaining two versions of a state:
+ * one that represents the current, committed state and another that captures all the changes (dirty state).
+ *
+ * ### Features
+ * - **DirtyState**: Utilizes a `DirtyState` object to indicate if the state is dirty (modified but not committed)
+ *   and which keys in the state object are dirty.
+ * - **Custom Comparators**: Optionally, you can pass in a custom comparator function to determine how to compare state objects.
+ * - **Event Subscriptions**: Offers an API for listening to changes in the state.
+ *
+ * ### Example Usage
+ * ```typescript
+ * const myState = { key1: 'value1', key2: 'value2' };
+ * const changeSet = new ChangeSet(myState);
+ *
+ * changeSet.listen((changeState, dirtyState) => {
+ *   console.log("Changed State:", changeState);
+ *   console.log("Is Dirty:", dirtyState.isDirty);
+ * });
+ *
+ * changeSet.patch('key1', 'new_value1');
+ * ```
+ *
+ * ### Methods
+ * - `listen(onUpdate)`: Subscribe to state changes.
+ * - `removeListener(onUpdate)`: Unsubscribe from state changes.
+ * - `get()`: Get the current uncommitted state.
+ * - `set(val)`: Set the change state.
+ * - `patch(key, val, options)`: Patch a specific key in the state object.
+ * - `updateState(state)`: Update the state object, and reconcile it with the change state.
+ * - `commit(options)`: Commit the change state, making it the new committed state.
+ * - `reset()`: Reset the change state back to the last committed state.
+ * - `isDirty()`: Check if the state has changes that are not yet committed.
+ * - `changedKeys()`: Get the keys that have uncommitted changes.
+ *
+ * ### Alpine.js `bind-change-set` Directive Example
+ * The `ChangeSet` class seamlessly integrates with Alpine.js through the `bind-change-set` directive.
+ * For example, to bind a text input element to a `ChangeSet` instance, you can use the following HTML snippet:
+ *
+ * ```html
+ * <input type="text" name="firstName" x-bind-change-set="changeSet">
+ * ```
+ *
+ * This makes it a useful utility for handling state changes in a predictable way.
+ */
 export class ChangeSet<T> {
     private state: T;
     private changeState: T;

From cffbf3e83a2f397b6280f3841af61554a30d8034 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Tue, 5 Sep 2023 20:29:06 +0200
Subject: [PATCH 26/77] simplified lecture hall set

---
 web/assets/init-admin.js                      |  28 +-
 .../manage/lecture-management-card.gohtml     |   6 +-
 web/ts/api/admin-lecture-list.ts              |   1 +
 web/ts/data-store/admin-lecture-list.ts       |   2 +-
 web/ts/edit-course.ts                         | 320 +-----------------
 5 files changed, 24 insertions(+), 333 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index c562fb89d..172d2513d 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -15,6 +15,15 @@ document.addEventListener("alpine:init", () => {
         'color'
     ];
 
+    const convert = (modifiers, value) => {
+        if (modifiers.includes("int")) {
+            return parseInt(value);
+        } else if (modifiers.includes("float")) {
+            return parseFloat(value);
+        }
+        return value;
+    }
+
     /**
      * Alpine.js Directive: `x-bind-change-set`
      *
@@ -51,6 +60,8 @@ document.addEventListener("alpine:init", () => {
      * ## Modifiers
      *
      * - `single`: Use this modifier for file inputs when you want to work with a single file instead of a FileList.
+     * - `int`: Use this modifier to convert the inserted value to integer.
+     * - `float`: Use this modifier to convert the inserted value to float.
      *
      * ```html
      * <input type="file" x-bind-change-set.single="changeSet" />
@@ -110,37 +121,32 @@ document.addEventListener("alpine:init", () => {
                 el.removeEventListener('change', changeHandler)
             })
         } else  if (el.tagName === "textarea" || textInputTypes.includes(el.type)) {
-            const keyupHandler = (e) => {
-                changeSet.patch(fieldName, e.target.value);
-            };
+            const keyupHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
 
             const onChangeSetUpdateHandler = (data) => {
-                el.value = data[fieldName];
+                el.value = `${data[fieldName]}`;
                 el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
             el.addEventListener('keyup', keyupHandler)
-            el.value = changeSet.get()[fieldName];
+            el.value = `${changeSet.get()[fieldName]}`;
 
             cleanup(() => {
                 changeSet.removeListener(onChangeSetUpdateHandler);
                 el.removeEventListener('keyup', keyupHandler)
             })
         } else {
-            const changeHandler = (e) => {
-                changeSet.patch(fieldName, e.target.value);
-            };
+            const changeHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
 
             const onChangeSetUpdateHandler = (data) => {
-                console.log(changeSet);
-                el.value = data[fieldName];
+                el.value = `${data[fieldName]}`;
                 el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
             el.addEventListener('change', changeHandler)
-            el.value = changeSet.get()[fieldName];
+            el.value = `${changeSet.get()[fieldName]}`;
 
             cleanup(() => {
                 changeSet.removeListener(onChangeSetUpdateHandler);
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 42d859133..bc1e554d3 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -313,14 +313,12 @@
                                 <select class="text-gray-700 dark:text-gray-300 dark:bg-secondary bg-gray-100 p-2"
                                         :id="id"
                                         name="lectureHallId"
-                                        x-bind-change-set="changeSet">
+                                        x-bind-change-set.int="changeSet">
                                     <option class="text-gray-700 dark:text-gray-300" value="0">
                                         Self streaming
                                     </option>
                                     {{range $lectureHall := $lectureHalls}}
-                                        <option class="text-gray-700 dark:text-gray-300"
-                                                value="{{$lectureHall.Model.ID}}"
-                                                :selected="lectureData.lectureHallId === '{{$lectureHall.Model.ID}}'">
+                                        <option class="text-gray-700 dark:text-gray-300" value="{{$lectureHall.Model.ID}}">
                                             {{$lectureHall.Name}}
                                         </option>
                                     {{end}}
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index b43496e36..77e466e5d 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -119,6 +119,7 @@ export const AdminLectureList = {
      * @param request
      */
     updateMetadata: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
+        console.log({request});
         const promises = [];
         if (request.name !== undefined) {
             promises.push(postData(`/api/course/${courseId}/renameLecture/${lectureId}`, { name: request.name }));
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index db941bcde..7cd5234c0 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -71,7 +71,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
 
     async updateMeta(courseId: number, lectureId: number, props: UpdateMetaProps) {
         const updateSeries = props?.options?.saveSeries === true;
-        const seriesIdentifier = this.data[courseId].find((l) => l.lectureId === lectureId)?.seriesIdentifier ?? null;
+        const seriesIdentifier = (await this.getData(courseId)).find((l) => l.lectureId === lectureId)?.seriesIdentifier ?? null;
 
         await AdminLectureList.updateMetadata(courseId, lectureId, props.payload);
         if (updateSeries) {
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index f43d8b29f..6906df4c7 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -230,7 +230,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 });
 
                 // Uploading new videos
-                for (const videoFile: VideoFileUI in this.videoFiles) {
+                for (const videoFile: VideoFileUI of this.videoFiles) {
                     if (!changedKeys.includes(videoFile.info.key)) {
                         continue;
                     }
@@ -247,7 +247,8 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                     });
                 }
             } catch (e) {
-                this.lastErrors = [e.description];
+                console.error(e);
+                this.lastErrors = [e.message];
                 return;
             }
 
@@ -258,321 +259,6 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
     }  as AlpineComponent;
 }
 
-export class LectureEditorX {
-    private changeSet: ChangeSet<Lecture>;
-
-    public readonly videoFiles: VideoFileUI[] = [];
-
-    lastErrors: string[];
-    uiEditMode: UIEditMode;
-    lectureData: Lecture;
-    isDirty: boolean;
-
-    constructor(lecture: Lecture) {
-        this.changeSet = new ChangeSet<Lecture>(lecture, this.lectureComparator, (data, dirtyState) => {
-            this.lectureData = data;
-            this.isDirty = dirtyState.isDirty;
-        });
-        this.isDirty = false;
-        this.uiEditMode = UIEditMode.none;
-        this.lastErrors = [];
-    }
-
-    lectureComparator(key: string, a: Lecture, b: Lecture): boolean|null {
-        return null;
-    }
-
-    startSeriesEdit() {
-        if (this.uiEditMode !== UIEditMode.none) return;
-        this.changeSet.reset();
-        this.uiEditMode = UIEditMode.series;
-    }
-
-    startSingleEdit() {
-        if (this.uiEditMode !== UIEditMode.none) return;
-        this.changeSet.reset();
-        this.uiEditMode = UIEditMode.single;
-    }
-
-    async toggleVisibility() {}
-
-    async keepProgressesUpdated() {
-        /*if (!this.isConverting) {
-            return;
-        }
-        setTimeout(() => {
-            for (let i = 0; i < this.transcodingProgresses.length; i++) {
-                fetch(
-                    `/api/course/${this.courseId}/stream/${this.lectureId}/transcodingProgress?v=${this.transcodingProgresses[i].version}`,
-                )
-                    .then((r) => {
-                        return r.json() as Promise<number>;
-                    })
-                    .then((r) => {
-                        if (r === 100) {
-                            this.transcodingProgresses.splice(i, 1);
-                        } else {
-                            this.transcodingProgresses[i].progress = r;
-                        }
-                    });
-            }
-            this.isConverting = this.transcodingProgresses.length > 0;
-            this.keepProgressesUpdated();
-        }, 5000);*/
-    }
-
-    async saveEdit() {
-        /*this.lastErrors = [];
-        if (this.uiEditMode === UIEditMode.none) return;
-
-        this.isSaving = true;
-
-        // Save Settings
-        const promises = [];
-        if (this.newName !== this.name) promises.push(this.saveNewLectureName());
-        if (this.newDescription !== this.description) promises.push(this.saveNewLectureDescription());
-        if (this.newLectureHallId !== this.lectureHallId) promises.push(this.saveNewLectureHall());
-        if (this.newIsChatEnabled !== this.isChatEnabled) promises.push(this.saveNewIsChatEnabled());
-        const errors = (await Promise.all(promises)).filter((res) => res.status !== StatusCodes.OK);
-
-        if (this.uiEditMode === UIEditMode.series && errors.length === 0) {
-            const seriesUpdateResult = await this.saveSeries();
-            if (seriesUpdateResult.status !== StatusCodes.OK) {
-                errors.push(seriesUpdateResult);
-            }
-        }
-
-        if (errors.length > 0) {
-            this.lastErrors = await Promise.all(
-                errors.map((e) => {
-                    const text = e.text();
-                    try {
-                        const msg = JSON.parse(text).msg;
-                        if (msg != null && msg.length > 0) {
-                            return msg;
-                        }
-                        // eslint-disable-next-line no-empty
-                    } catch (_) {}
-                    return text;
-                }),
-            );
-            this.isSaving = false;
-            return false;
-        }
-
-        // Upload new media files
-        const uploadErrors = await this.saveNewVODMedia();
-
-        if (uploadErrors.length > 0) {
-            this.lastErrors = uploadErrors;
-            this.isSaving = false;
-            return false;
-        }
-
-        this.uiEditMode = UIEditMode.none;
-        this.isSaving = false;
-        return true;*/
-    }
-
-    discardEdit() {
-        this.uiEditMode = UIEditMode.none;
-    }
-
-    async saveNewLectureName() {
-        /*const res = await postData("/api/course/" + this.courseId + "/renameLecture/" + this.lectureId, {
-            name: this.newName,
-        });
-
-        if (res.status == StatusCodes.OK) {
-            this.name = this.newName;
-        }
-
-        return res;*/
-    }
-
-    async saveNewLectureDescription() {
-        /*const res = await putData("/api/course/" + this.courseId + "/updateDescription/" + this.lectureId, {
-            name: this.newDescription,
-        });
-
-        if (res.status == StatusCodes.OK) {
-            this.description = this.newDescription;
-        }
-
-        return res;*/
-    }
-
-    async saveNewLectureHall() {
-        /*const res = await saveLectureHall([this.lectureId], this.newLectureHallId);
-
-        if (res.status == StatusCodes.OK) {
-            this.lectureHallId = this.newLectureHallId;
-            this.lectureHallName = "";
-        }
-
-        return res;*/
-    }
-
-    async saveNewIsChatEnabled() {
-        /*const res = await saveIsChatEnabled(this.lectureId, this.newIsChatEnabled);
-
-        if (res.status == StatusCodes.OK) {
-            this.isChatEnabled = this.newIsChatEnabled;
-        } else {
-            res.text().then((t) => showMessage(t));
-        }
-        return res;*/
-    }
-
-    async saveNewVODMedia(): Promise<string[]> {
-        /*const errors = [];
-        const mediaInfo = [
-            { key: "newCombinedVideo", type: "COMB" },
-            { key: "newPresentationVideo", type: "PRES" },
-            { key: "newCameraVideo", type: "CAM" },
-        ];
-
-        for (const info of mediaInfo) {
-            const mediaFile = this[info.key];
-            if (mediaFile === null) continue;
-
-            try {
-                await uploadFilePost(
-                    `/api/course/${this.courseId}/uploadVODMedia?streamID=${this.lectureId}&videoType=${info.type}`,
-                    mediaFile,
-                    (progress) => {
-                        window.dispatchEvent(
-                            new CustomEvent(`voduploadprogressedit`, {
-                                detail: { type: info.type, progress, lectureId: this.lectureId },
-                            }),
-                        );
-                    },
-                );
-                this[info.key] = null;
-            } catch (e) {
-                const error = `Failed to upload "${mediaFile.name}".`;
-                errors.push(error);
-            }
-        }
-        return errors;*/
-        return [];
-    }
-
-    async saveSeries() {
-        //const res = await postData("/api/course/" + this.courseId + "/updateLectureSeries/" + this.lectureId);
-
-        /*if (res.status == StatusCodes.OK) {
-            LectureList.lectures = LectureList.lectures.map((lecture) => {
-                if (this.lectureId !== lecture.lectureId && lecture.seriesIdentifier === this.seriesIdentifier) {
-                    // cloning, as otherwise alpine doesn't detect the changed object in the array ...
-                    lecture = lecture.clone();
-                    lecture.name = this.name;
-                    lecture.description = this.description;
-                    lecture.lectureHallId = this.lectureHallId;
-                    lecture.uiEditMode = UIEditMode.none;
-                }
-                return lecture;
-            });
-            LectureList.triggerUpdate();
-        }*/
-
-        //return res;
-    }
-
-    async deleteLecture() {
-        if (confirm("Confirm deleting video?")) {
-            try {
-                await DataStore.adminLectureList.delete(this.lectureData.courseId, [this.lectureData.lectureId]);
-            } catch (e) {
-                alert("An unknown error occurred during the deletion process!");
-                return;
-            }
-        }
-    }
-
-    async deleteLectureSeries() {
-        /*const lectureCount = LectureList.lectures.filter((l) => l.seriesIdentifier === this.seriesIdentifier).length;
-        if (confirm("Confirm deleting " + lectureCount + " videos in the lecture series?")) {
-            const res = await Delete("/api/course/" + this.courseId + "/deleteLectureSeries/" + this.lectureId);
-
-            if (res.status === StatusCodes.OK) {
-                LectureList.lectures = LectureList.lectures.filter((l) => l.seriesIdentifier !== this.seriesIdentifier);
-                LectureList.triggerUpdate();
-            }
-
-            return res;
-        }*/
-    }
-
-    getDownloads() {
-        //return this.downloadableVods;
-    }
-
-    async deleteFile(fileId: number) {
-        /*await fetch(`/api/stream/${this.lectureId}/files/${fileId}`, {
-            method: "DELETE",
-        })
-            .catch((err) => console.log(err))
-            .then(() => {
-                this.files = this.files.filter((f) => f.id !== fileId);
-            });*/
-    }
-
-    hasAttachments(): boolean {
-        /*if (this.files !== undefined && this.files !== null) {
-            const filtered = this.files.filter((f) => f.fileType === FileType.attachment);
-            return filtered.length > 0;
-        }
-        return false;*/
-        return true;
-    }
-
-    onFileDrop(e) {
-        /*if (e.dataTransfer.items) {
-            const kind = e.dataTransfer.items[0].kind;
-            switch (kind) {
-                case "file": {
-                    this.postFile(e.dataTransfer.items[0].getAsFile());
-                    break;
-                }
-                case "string": {
-                    this.postFileAsURL(e.dataTransfer.getData("URL"));
-                }
-            }
-        }*/
-    }
-
-    private async postFile(file) {
-        /*const formData = new FormData();
-        formData.append("file", file);
-        await fetch(`/api/stream/${this.lectureId}/files?type=file`, {
-            method: "POST",
-            body: formData,
-        }).then((res) =>
-            res.json().then((id) => {
-                const friendlyName = file.name;
-                const fileType = 2;
-                this.files.push(new LectureFile({ id, fileType, friendlyName }));
-            }),
-        );*/
-    }
-
-    private async postFileAsURL(fileURL) {
-        /*const formData = new FormData();
-        formData.append("file_url", fileURL);
-        await fetch(`/api/stream/${this.lectureId}/files?type=url`, {
-            method: "POST",
-            body: formData,
-        }).then((res) =>
-            res.json().then((id) => {
-                const friendlyName = fileURL.substring(fileURL.lastIndexOf("/") + 1);
-                const fileType = 2;
-                this.files.push(new LectureFile({ id, fileType, friendlyName }));
-            }),
-        );*/
-    }
-}
-
 export function decodeHtml(html) {
     const txt = document.createElement("textarea");
     txt.innerHTML = html;

From 2db8643d160f8ff0fad96d11665c4ef262f0cbf3 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Tue, 5 Sep 2023 22:46:12 +0200
Subject: [PATCH 27/77] linter

---
 web/ts/api/admin-lecture-list.ts        | 156 +++++++++++++++---------
 web/ts/change-set.ts                    |  25 ++--
 web/ts/data-store/admin-lecture-list.ts |  21 ++--
 web/ts/data-store/data-store.ts         |   2 +-
 web/ts/edit-course.ts                   |  44 +++----
 web/ts/global.ts                        |   2 +-
 6 files changed, 153 insertions(+), 97 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 77e466e5d..94a36b044 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -1,6 +1,6 @@
 import { del, get, post, put } from "../utilities/fetch-wrappers";
-import {StatusCodes} from "http-status-codes";
-import {patchData, postData, putData, UploadFile, UploadFileListener} from "../global";
+import { StatusCodes } from "http-status-codes";
+import { patchData, postData, putData, UploadFile, UploadFileListener } from "../global";
 
 export interface UpdateLectureMetaRequest {
     name?: string;
@@ -10,23 +10,28 @@ export interface UpdateLectureMetaRequest {
 }
 
 export interface CreateNewLectureRequest {
-    title: "",
-    lectureHallId: 0,
-    start: "",
-    end: "",
-    isChatEnabled: false,
-    duration: 0, // Duration in Minutes
-    formatedDuration: "", // Duration in Minutes
-    premiere: false,
-    vodup: false,
-    adHoc: false,
-    recurring: false,
-    recurringInterval: "weekly",
-    eventsCount: 10,
-    recurringDates: [],
-    combFile: [],
-    presFile: [],
-    camFile: [],
+    title: "";
+    lectureHallId: 0;
+    start: "";
+    end: "";
+    isChatEnabled: false;
+    duration: 0; // Duration in Minutes
+    formatedDuration: ""; // Duration in Minutes
+    premiere: false;
+    vodup: false;
+    adHoc: false;
+    recurring: false;
+    recurringInterval: "weekly";
+    eventsCount: 10;
+    recurringDates: [];
+    combFile: [];
+    presFile: [];
+    camFile: [];
+}
+
+export interface TranscodingProgress {
+    version: string;
+    progress: number;
 }
 
 export interface LectureVideoType {
@@ -34,10 +39,20 @@ export interface LectureVideoType {
     type: string;
 }
 
-export const LectureVideoTypeComb = { key: "newCombinedVideo", type: "COMB" } as LectureVideoType;
-export const LectureVideoTypePres = { key: "newPresentationVideo", type: "PRES" } as LectureVideoType;
-export const LectureVideoTypeCam = { key: "newCameraVideo", type: "CAM" } as LectureVideoType;
+export const LectureVideoTypeComb = {
+    key: "newCombinedVideo",
+    type: "COMB",
+} as LectureVideoType;
+
+export const LectureVideoTypePres = {
+    key: "newPresentationVideo",
+    type: "PRES",
+} as LectureVideoType;
 
+export const LectureVideoTypeCam = {
+    key: "newCameraVideo",
+    type: "CAM",
+} as LectureVideoType;
 
 export const LectureVideoTypes = [
     LectureVideoTypeComb,
@@ -46,28 +61,28 @@ export const LectureVideoTypes = [
 ] as LectureVideoType[];
 
 export interface Lecture {
-    color:                 string;
-    courseId:              number;
-    courseSlug:            string;
-    description:           string;
-    downloadableVods:      DownloadableVOD[];
-    end:                   string;
-    files:                 null;
-    hasStats:              boolean;
-    isChatEnabled:         boolean;
-    isConverting:          boolean;
-    isLiveNow:             boolean;
-    isPast:                boolean;
-    isRecording:           boolean;
-    lectureHallId:         number;
-    lectureHallName:       string;
-    lectureId:             number;
-    name:                  string;
-    private:               boolean;
-    seriesIdentifier:      string;
-    start:                 string;
-    streamKey:             string;
-    transcodingProgresses: any[];
+    color: string;
+    courseId: number;
+    courseSlug: string;
+    description: string;
+    downloadableVods: DownloadableVOD[];
+    end: string;
+    files: null;
+    hasStats: boolean;
+    isChatEnabled: boolean;
+    isConverting: boolean;
+    isLiveNow: boolean;
+    isPast: boolean;
+    isRecording: boolean;
+    lectureHallId: number;
+    lectureHallName: string;
+    lectureId: number;
+    name: string;
+    private: boolean;
+    seriesIdentifier: string;
+    start: string;
+    streamKey: string;
+    transcodingProgresses: TranscodingProgress[];
 
     // Clientside computed fields
     hasAttachments: boolean;
@@ -79,21 +94,20 @@ export interface Lecture {
     endTimeFormatted: string;
 
     // Clientside pseudo fields
-    newCombinedVideo: File|null;
-    newPresentationVideo: File|null;
-    newCameraVideo: File|null;
+    newCombinedVideo: File | null;
+    newPresentationVideo: File | null;
+    newCameraVideo: File | null;
 }
 
 export interface DownloadableVOD {
     FriendlyName: string;
-    DownloadURL:  string;
+    DownloadURL: string;
 }
 
 /**
  * REST API Wrapper for /api/stream/:id/sections
  */
 export const AdminLectureList = {
-
     /**
      * Fetches all lectures for a course
      * @param courseId
@@ -119,22 +133,42 @@ export const AdminLectureList = {
      * @param request
      */
     updateMetadata: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
-        console.log({request});
+        console.log({
+            request,
+        });
         const promises = [];
         if (request.name !== undefined) {
-            promises.push(postData(`/api/course/${courseId}/renameLecture/${lectureId}`, { name: request.name }));
+            promises.push(
+                postData(`/api/course/${courseId}/renameLecture/${lectureId}`, {
+                    name: request.name,
+                }),
+            );
         }
 
         if (request.description !== undefined) {
-            promises.push(putData(`/api/course/${courseId}/updateDescription/${lectureId}`, { name: request.description }));
+            promises.push(
+                putData(`/api/course/${courseId}/updateDescription/${lectureId}`, {
+                    name: request.description,
+                }),
+            );
         }
 
         if (request.lectureHallId !== undefined) {
-            promises.push(postData("/api/setLectureHall", { streamIds: [lectureId], lectureHall: request.lectureHallId }));
+            promises.push(
+                postData("/api/setLectureHall", {
+                    streamIds: [lectureId],
+                    lectureHall: request.lectureHallId,
+                }),
+            );
         }
 
         if (request.isChatEnabled !== undefined) {
-            promises.push(patchData(`/api/stream/${lectureId}/chat/enabled`, { lectureId, isChatEnabled: request.isChatEnabled }));
+            promises.push(
+                patchData(`/api/stream/${lectureId}/chat/enabled`, {
+                    lectureId,
+                    isChatEnabled: request.isChatEnabled,
+                }),
+            );
         }
 
         const errors = (await Promise.all(promises)).filter((res) => res.status !== StatusCodes.OK);
@@ -159,7 +193,9 @@ export const AdminLectureList = {
      * @param isPrivate
      */
     setPrivate: async (lectureId: number, isPrivate: boolean): Promise<void> => {
-        const res = await patchData(`/api/stream/${lectureId}/visibility`, { private: isPrivate });
+        const res = await patchData(`/api/stream/${lectureId}/visibility`, {
+            private: isPrivate,
+        });
         if (res.status !== StatusCodes.OK) {
             throw Error(res.body.toString());
         }
@@ -173,7 +209,13 @@ export const AdminLectureList = {
      * @param file
      * @param listener
      */
-    uploadVideo: async (courseId: number, lectureId: number, videoType: string, file: File, listener : UploadFileListener = {}) => {
+    uploadVideo: async (
+        courseId: number,
+        lectureId: number,
+        videoType: string,
+        file: File,
+        listener: UploadFileListener = {},
+    ) => {
         await UploadFile(
             `/api/course/${courseId}/uploadVODMedia?streamID=${lectureId}&videoType=${videoType}`,
             file,
@@ -181,7 +223,7 @@ export const AdminLectureList = {
         );
     },
 
-    getTranscodingProgress: async (courseId: number, lectureId: number, version: number): Promise<Number> => {
+    getTranscodingProgress: async (courseId: number, lectureId: number, version: number): Promise<number> => {
         return (await fetch(`/api/course/${courseId}/stream/${lectureId}/transcodingProgress?v=${version}`)).json();
     },
 
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index b5a9cb5e9..0532d3438 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -55,10 +55,14 @@ export interface DirtyState {
 export class ChangeSet<T> {
     private state: T;
     private changeState: T;
-    private readonly comparator?: (key: string, a: T, b: T) => boolean|null;
+    private readonly comparator?: (key: string, a: T, b: T) => boolean | null;
     private onUpdate: ((changeState: T, dirtyState: DirtyState) => void)[];
 
-    constructor(state: T, comparator?: (key: string, a: T, b: T) => boolean, onUpdate?: (changeState: T, dirtyState: DirtyState) => void) {
+    constructor(
+        state: T,
+        comparator?: (key: string, a: T, b: T) => boolean,
+        onUpdate?: (changeState: T, dirtyState: DirtyState) => void,
+    ) {
         this.state = state;
         this.onUpdate = onUpdate ? [onUpdate] : [];
         this.comparator = comparator;
@@ -93,7 +97,7 @@ export class ChangeSet<T> {
      * @param val
      */
     set(val: T) {
-        this.changeState = {...val};
+        this.changeState = { ...val };
         this.dispatchUpdate();
     }
 
@@ -103,10 +107,11 @@ export class ChangeSet<T> {
      * @param val
      * @param isCommitted if true, the data will be passed also to the state, and won't make the model dirty.
      */
-    patch(key: string, val: any, { isCommitted = false }: { isCommitted : boolean } = {}) {
-        this.changeState = {...this.changeState, [key]: val};
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    patch(key: string, val: any, { isCommitted = false }: { isCommitted: boolean } = {}) {
+        this.changeState = { ...this.changeState, [key]: val };
         if (isCommitted) {
-            this.state = {...this.state, [key]: val};
+            this.state = { ...this.state, [key]: val };
         }
         this.dispatchUpdate();
     }
@@ -116,8 +121,8 @@ export class ChangeSet<T> {
      * @param state
      */
     updateState(state: T) {
-        const changedKeys = this.changedKeys()
-        this.state = {...state};
+        const changedKeys = this.changedKeys();
+        this.state = { ...state };
 
         for (const key of Object.keys(this.state)) {
             if (!changedKeys.includes(key)) {
@@ -136,7 +141,7 @@ export class ChangeSet<T> {
         for (const key in discardKeys) {
             this.changeState[key] = this.state[key];
         }
-        this.state = {...this.changeState};
+        this.state = { ...this.changeState };
         this.dispatchUpdate();
     }
 
@@ -144,7 +149,7 @@ export class ChangeSet<T> {
      * Resets the change state to the state. Change state is the most current state afterwards.
      */
     reset(): void {
-        this.changeState = {...this.state};
+        this.changeState = { ...this.state };
         this.dispatchUpdate();
     }
 
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 7cd5234c0..a97587df2 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -1,7 +1,7 @@
 import { StreamableMapProvider } from "./provider";
-import {AdminLectureList, Lecture, UpdateLectureMetaRequest} from "../api/admin-lecture-list";
-import {FileType} from "../edit-course";
-import {UploadFileListener} from "../global";
+import { AdminLectureList, Lecture, UpdateLectureMetaRequest } from "../api/admin-lecture-list";
+import { FileType } from "../edit-course";
+import { UploadFileListener } from "../global";
 
 const dateFormatOptions: Intl.DateTimeFormatOptions = {
     weekday: "long",
@@ -57,8 +57,8 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
             }
             return {
                 ...s,
-                private: !s.private
-            }
+                private: !s.private,
+            };
         });
         await this.triggerUpdate(courseId);
     }
@@ -71,7 +71,8 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
 
     async updateMeta(courseId: number, lectureId: number, props: UpdateMetaProps) {
         const updateSeries = props?.options?.saveSeries === true;
-        const seriesIdentifier = (await this.getData(courseId)).find((l) => l.lectureId === lectureId)?.seriesIdentifier ?? null;
+        const seriesIdentifier =
+            (await this.getData(courseId)).find((l) => l.lectureId === lectureId)?.seriesIdentifier ?? null;
 
         await AdminLectureList.updateMetadata(courseId, lectureId, props.payload);
         if (updateSeries) {
@@ -100,7 +101,13 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
-    async uploadVideo(courseId: number, lectureId: number, videoType: string, file: File, listener : UploadFileListener = {}) {
+    async uploadVideo(
+        courseId: number,
+        lectureId: number,
+        videoType: string,
+        file: File,
+        listener: UploadFileListener = {},
+    ) {
         await AdminLectureList.uploadVideo(courseId, lectureId, videoType, file, listener);
     }
 }
diff --git a/web/ts/data-store/data-store.ts b/web/ts/data-store/data-store.ts
index 99758d854..39890a666 100644
--- a/web/ts/data-store/data-store.ts
+++ b/web/ts/data-store/data-store.ts
@@ -1,7 +1,7 @@
 import { VideoSectionProvider } from "./video-sections";
 import { BookmarksProvider } from "./bookmarks";
 import { StreamPlaylistProvider } from "./stream-playlist";
-import {AdminLectureListProvider} from "./admin-lecture-list";
+import { AdminLectureListProvider } from "./admin-lecture-list";
 
 export abstract class DataStore {
     static bookmarks: BookmarksProvider = new BookmarksProvider();
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 6906df4c7..383a094e2 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -4,12 +4,13 @@ import { DataStore } from "./data-store/data-store";
 import {
     AdminLectureList,
     Lecture,
-    LectureVideoType, LectureVideoTypeCam,
+    LectureVideoType,
+    LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    LectureVideoTypes
+    LectureVideoTypes,
 } from "./api/admin-lecture-list";
-import {ChangeSet} from "./change-set";
+import { ChangeSet } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 
 export enum UIEditMode {
@@ -97,13 +98,8 @@ class DownloadableVod {
     friendlyName: string;
 }
 
-class TranscodingProgress {
-    version: string;
-    progress: number;
-}
-
 interface VideoFileUI {
-    info: LectureVideoType,
+    info: LectureVideoType;
     inputId: string;
 }
 
@@ -122,8 +118,8 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         isSaving: false,
 
         // Lecture Data
-        changeSet: null as ChangeSet<Lecture>|null,
-        lectureData: null as Lecture|null,
+        changeSet: null as ChangeSet<Lecture> | null,
+        lectureData: null as Lecture | null,
 
         /**
          * AlpineJS init function which is called automatically in addition to 'x-init'
@@ -151,13 +147,17 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          * @param b
          * @return return 0 to use naive default comparator
          */
-        lectureComparator(key: string, a: Lecture, b: Lecture): boolean|null {
+        lectureComparator(key: string, a: Lecture, b: Lecture): boolean | null {
             // here we can set some custom comparisons
             return null;
         },
 
         toggleVisibility() {
-            DataStore.adminLectureList.setPrivate(this.lectureData.courseId, this.lectureData.lectureId, !this.lectureData.private);
+            DataStore.adminLectureList.setPrivate(
+                this.lectureData.courseId,
+                this.lectureData.lectureId,
+                !this.lectureData.private,
+            );
         },
 
         async keepProgressesUpdated() {
@@ -166,7 +166,11 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             }
             setTimeout(async () => {
                 for (let i = 0; i < this.transcodingProgresses.length; i++) {
-                    const res = await AdminLectureList.getTranscodingProgress(this.lectureData.courseId, this.lectureData.lectureId, this.transcodingProgresses[i].version);
+                    const res = await AdminLectureList.getTranscodingProgress(
+                        this.lectureData.courseId,
+                        this.lectureData.lectureId,
+                        this.transcodingProgresses[i].version,
+                    );
                     if (res === 100) {
                         this.transcodingProgresses.splice(i, 1);
                     } else {
@@ -225,8 +229,8 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                         isChatEnabled: changedKeys.includes("isChatEnabled") ? isChatEnabled : undefined,
                     },
                     options: {
-                        saveSeries: this.uiEditMode === UIEditMode.series
-                    }
+                        saveSeries: this.uiEditMode === UIEditMode.series,
+                    },
                 });
 
                 // Uploading new videos
@@ -243,7 +247,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                                     detail: { type: videoFile.info.type, progress, lectureId: this.lectureId },
                                 }),
                             );
-                        }
+                        },
                     });
                 }
             } catch (e) {
@@ -254,9 +258,8 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
 
             this.changeSet.commit({ discardKeys: this.videoFiles.map((v) => v.info.key) });
             this.uiEditMode = UIEditMode.none;
-        }
-
-    }  as AlpineComponent;
+        },
+    } as AlpineComponent;
 }
 
 export function decodeHtml(html) {
@@ -843,7 +846,6 @@ export function createLectureForm(args: { s: [] }) {
                         url.hash = `lectures:${ids.join(",")}`;
                         window.location.assign(url);
                         window.location.reload();*/
-
                     })
                     .catch((e) => {
                         console.log(e);
diff --git a/web/ts/global.ts b/web/ts/global.ts
index 34eedccf1..c05577352 100644
--- a/web/ts/global.ts
+++ b/web/ts/global.ts
@@ -46,7 +46,7 @@ export async function Delete(url = "") {
 }
 
 export interface UploadFileListener {
-    onProgress?: (progress: number) => void
+    onProgress?: (progress: number) => void;
 }
 
 export function UploadFile(url: string, file: File, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {

From 098b2d5c4fc396f01c067421542d1a1021e8e4e4 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Tue, 5 Sep 2023 22:52:37 +0200
Subject: [PATCH 28/77] more fixes

---
 web/ts/api/admin-lecture-list.ts |  4 ++--
 web/ts/change-set.ts             |  4 ++--
 web/ts/edit-course.ts            | 15 +++++++++------
 web/ts/global.ts                 |  2 +-
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 94a36b044..e9b97c70c 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -1,6 +1,6 @@
 import { del, get, post, put } from "../utilities/fetch-wrappers";
 import { StatusCodes } from "http-status-codes";
-import { patchData, postData, putData, UploadFile, UploadFileListener } from "../global";
+import { patchData, postData, putData, uploadFile, UploadFileListener } from "../global";
 
 export interface UpdateLectureMetaRequest {
     name?: string;
@@ -216,7 +216,7 @@ export const AdminLectureList = {
         file: File,
         listener: UploadFileListener = {},
     ) => {
-        await UploadFile(
+        await uploadFile(
             `/api/course/${courseId}/uploadVODMedia?streamID=${lectureId}&videoType=${videoType}`,
             file,
             listener,
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 0532d3438..6bdab6a0d 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -108,7 +108,7 @@ export class ChangeSet<T> {
      * @param isCommitted if true, the data will be passed also to the state, and won't make the model dirty.
      */
     /* eslint-disable @typescript-eslint/no-explicit-any */
-    patch(key: string, val: any, { isCommitted = false }: { isCommitted: boolean } = {}) {
+    patch(key: string, val: any, { isCommitted = false }: { isCommitted?: boolean } = {}) {
         this.changeState = { ...this.changeState, [key]: val };
         if (isCommitted) {
             this.state = { ...this.state, [key]: val };
@@ -137,7 +137,7 @@ export class ChangeSet<T> {
      * Commits the change state to the state. State is updated to the latest change state afterwards.
      * @param discardKeys List of keys that should be discarded and not committed.
      */
-    commit({ discardKeys = [] }: { discardKeys: string[] } = {}): void {
+    commit({ discardKeys = [] }: { discardKeys?: string[] } = {}): void {
         for (const key in discardKeys) {
             this.changeState[key] = this.state[key];
         }
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 383a094e2..009b1619b 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -1,4 +1,4 @@
-import { Delete, patchData, postData, putData, sendFormData, showMessage } from "./global";
+import {Delete, patchData, postData, putData, sendFormData, showMessage, uploadFile} from "./global";
 import { StatusCodes } from "http-status-codes";
 import { DataStore } from "./data-store/data-store";
 import {
@@ -100,6 +100,7 @@ class DownloadableVod {
 
 interface VideoFileUI {
     info: LectureVideoType;
+    title: string;
     inputId: string;
 }
 
@@ -234,7 +235,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 });
 
                 // Uploading new videos
-                for (const videoFile: VideoFileUI of this.videoFiles) {
+                for (const videoFile of this.videoFiles) {
                     if (!changedKeys.includes(videoFile.info.key)) {
                         continue;
                     }
@@ -891,12 +892,14 @@ export function createLectureForm(args: { s: [] }) {
             // Upload media
             try {
                 for (const mediaUpload of mediaFiles) {
-                    await uploadFilePost(
+                    await uploadFile(
                         `/api/course/${this.courseID}/uploadVODMedia?streamID=${streamID}&videoType=${mediaUpload.type}`,
                         mediaUpload.file,
-                        (progress) => {
-                            mediaUpload.progress = progress;
-                            this.dispatchMediaProgress(mediaFiles);
+                        {
+                            onProgress: (progress) => {
+                                mediaUpload.progress = progress;
+                                this.dispatchMediaProgress(mediaFiles);
+                            }
                         },
                     );
                 }
diff --git a/web/ts/global.ts b/web/ts/global.ts
index c05577352..376c99987 100644
--- a/web/ts/global.ts
+++ b/web/ts/global.ts
@@ -49,7 +49,7 @@ export interface UploadFileListener {
     onProgress?: (progress: number) => void;
 }
 
-export function UploadFile(url: string, file: File, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
+export function uploadFile(url: string, file: File, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
     const xhr = new XMLHttpRequest();
     const vodUploadFormData = new FormData();
     vodUploadFormData.append("file", file);

From 91f80cfefe240fef0a40d4cbe44e2c6373ad83ef Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Tue, 5 Sep 2023 23:26:54 +0200
Subject: [PATCH 29/77] :)

---
 web/ts/edit-course.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 009b1619b..7c8783f5d 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -1,4 +1,4 @@
-import {Delete, patchData, postData, putData, sendFormData, showMessage, uploadFile} from "./global";
+import { Delete, patchData, postData, putData, sendFormData, showMessage, uploadFile } from "./global";
 import { StatusCodes } from "http-status-codes";
 import { DataStore } from "./data-store/data-store";
 import {
@@ -899,7 +899,7 @@ export function createLectureForm(args: { s: [] }) {
                             onProgress: (progress) => {
                                 mediaUpload.progress = progress;
                                 this.dispatchMediaProgress(mediaFiles);
-                            }
+                            },
                         },
                     );
                 }

From b22422261f2ea8588b61d4c07a5f3f8063d95cac Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sun, 10 Sep 2023 23:34:26 +0200
Subject: [PATCH 30/77] add attachments

---
 .../manage/lecture-management-card.gohtml     |  4 +-
 web/ts/api/admin-lecture-list.ts              | 68 ++++++++++++++++++-
 web/ts/change-set.ts                          | 13 +++-
 web/ts/data-store/admin-lecture-list.ts       | 57 +++++++++++++++-
 web/ts/edit-course.ts                         | 60 +++++++++-------
 web/ts/global.ts                              |  8 ++-
 6 files changed, 176 insertions(+), 34 deletions(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index bc1e554d3..6046fc044 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -272,7 +272,7 @@
                              class="w-full">
                         <label :for="id" class="hidden">Lecture description</label>
                         <textarea :id="id"
-                                  @drop.prevent="(e) => lecture.onFileDrop(e)"
+                                  @drop.prevent="(e) => onAttachmentFileDrop(e)"
                                   @dragover.prevent=""
                                   class="tl-textarea grow"
                                   placeholder="Add a nice description, links, and more. You can use Markdown. Drop files here."
@@ -349,7 +349,7 @@
                                     <span class="text-xs font-semibold text-3 my-auto"
                                           x-text="file.friendlyName"></span>
                                         <button class="px-3"
-                                                @click="lecture.deleteFile(file.id)">
+                                                @click="deleteAttachment(file.id)">
                                             <i class="fa fa-xmark"></i>
                                         </button>
                                     </section>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index e9b97c70c..d86d83a09 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -1,6 +1,6 @@
 import { del, get, post, put } from "../utilities/fetch-wrappers";
 import { StatusCodes } from "http-status-codes";
-import { patchData, postData, putData, uploadFile, UploadFileListener } from "../global";
+import {Delete, patchData, postData, postFormData, putData, uploadFile, UploadFileListener} from "../global";
 
 export interface UpdateLectureMetaRequest {
     name?: string;
@@ -9,6 +9,18 @@ export interface UpdateLectureMetaRequest {
     isChatEnabled?: boolean;
 }
 
+export class LectureFile {
+    readonly id: number;
+    readonly fileType: number;
+    readonly friendlyName: string;
+
+    constructor({ id, fileType, friendlyName }) {
+        this.id = id;
+        this.fileType = fileType;
+        this.friendlyName = friendlyName;
+    }
+}
+
 export interface CreateNewLectureRequest {
     title: "";
     lectureHallId: 0;
@@ -67,7 +79,7 @@ export interface Lecture {
     description: string;
     downloadableVods: DownloadableVOD[];
     end: string;
-    files: null;
+    files: LectureFile[];
     hasStats: boolean;
     isChatEnabled: boolean;
     isConverting: boolean;
@@ -223,6 +235,58 @@ export const AdminLectureList = {
         );
     },
 
+    /**
+     * Upload a file as attachment for a lecture
+     * @param courseId
+     * @param lectureId
+     * @param file
+     * @param listener
+     */
+    uploadAttachmentFile: async (
+        courseId: number,
+        lectureId: number,
+        file: File,
+        listener: UploadFileListener = {},
+    ) => {
+        return await uploadFile(
+            `/api/stream/${lectureId}/files?type=file`,
+            file,
+            listener,
+        );
+    },
+
+    /**
+     * Upload a url as attachment for a lecture
+     * @param courseId
+     * @param lectureId
+     * @param url
+     * @param listener
+     */
+    uploadAttachmentUrl: async (
+        courseId: number,
+        lectureId: number,
+        url: string,
+        listener: UploadFileListener = {},
+    ) => {
+        const vodUploadFormData = new FormData();
+        vodUploadFormData.append("file_url", url);
+        return postFormData(`/api/stream/${lectureId}/files?type=url`, vodUploadFormData, listener);
+    },
+
+    deleteAttachment: async (
+        courseId: number,
+        lectureId: number,
+        attachmentId: number,
+    ) => {
+        return Delete(`/api/stream/${lectureId}/files/${attachmentId}`);
+    },
+
+    /**
+     * Get transcoding progress
+     * @param courseId
+     * @param lectureId
+     * @param version
+     */
     getTranscodingProgress: async (courseId: number, lectureId: number, version: number): Promise<number> => {
         return (await fetch(`/api/course/${courseId}/stream/${lectureId}/transcodingProgress?v=${version}`)).json();
     },
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 6bdab6a0d..d7517b2d4 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -55,7 +55,7 @@ export interface DirtyState {
 export class ChangeSet<T> {
     private state: T;
     private changeState: T;
-    private readonly comparator?: (key: string, a: T, b: T) => boolean | null;
+    private readonly comparator?: LectureComparator<T>;
     private onUpdate: ((changeState: T, dirtyState: DirtyState) => void)[];
 
     constructor(
@@ -210,3 +210,14 @@ export class ChangeSet<T> {
         }
     }
 }
+
+export type LectureComparator<T> = (key: string, a: T, b: T) => boolean | null;
+
+export function ignoreKeys<T>(list: string[]): LectureComparator<T> {
+    return (key: string, a, b) => {
+        if (list.includes(key)) {
+            return false;
+        }
+        return null;
+    }
+}
\ No newline at end of file
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index a97587df2..860445fa0 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -1,5 +1,5 @@
 import { StreamableMapProvider } from "./provider";
-import { AdminLectureList, Lecture, UpdateLectureMetaRequest } from "../api/admin-lecture-list";
+import {AdminLectureList, Lecture, LectureFile, UpdateLectureMetaRequest} from "../api/admin-lecture-list";
 import { FileType } from "../edit-course";
 import { UploadFileListener } from "../global";
 
@@ -101,6 +101,61 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
+    async uploadAttachmentFile(courseId: number, lectureId: number, file: File) {
+        const res = await AdminLectureList.uploadAttachmentFile(courseId, lectureId, file);
+        const newFile = new LectureFile({
+            id: JSON.parse(res.responseText),
+            fileType: 2,
+            friendlyName: file.name
+        });
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    files: [...s.files, newFile]
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async uploadAttachmentUrl(courseId: number, lectureId: number, url: String) {
+        const res = await AdminLectureList.uploadAttachmentUrl(courseId, lectureId, url);
+        const newFile = new LectureFile({
+            id: JSON.parse(res.responseText),
+            fileType: 2,
+            friendlyName: url.substring(url.lastIndexOf("/") + 1) }
+        );
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    files: [...s.files, newFile]
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async deleteAttachment(courseId: number, lectureId: number, attachmentId: number) {
+        await AdminLectureList.deleteAttachment(courseId, lectureId, attachmentId);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    files: [...s.files.filter(((a)=> a.id !== attachmentId))],
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
     async uploadVideo(
         courseId: number,
         lectureId: number,
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 7c8783f5d..733af3780 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -10,7 +10,7 @@ import {
     LectureVideoTypePres,
     LectureVideoTypes,
 } from "./api/admin-lecture-list";
-import { ChangeSet } from "./change-set";
+import {ChangeSet, ignoreKeys} from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 
 export enum UIEditMode {
@@ -81,18 +81,6 @@ export class LectureList {
     }
 }
 
-class LectureFile {
-    readonly id: number;
-    readonly fileType: number;
-    readonly friendlyName: string;
-
-    constructor({ id, fileType, friendlyName }) {
-        this.id = id;
-        this.fileType = fileType;
-        this.friendlyName = friendlyName;
-    }
-}
-
 class DownloadableVod {
     downloadURL: string;
     friendlyName: string;
@@ -127,7 +115,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          */
         init() {
             // This tracks changes that are not saved yet
-            this.changeSet = new ChangeSet<Lecture>(lecture, this.lectureComparator, (data, dirtyState) => {
+            this.changeSet = new ChangeSet<Lecture>(lecture, ignoreKeys(["files"]), (data, dirtyState) => {
                 this.lectureData = data;
                 this.isDirty = dirtyState.isDirty;
             });
@@ -141,18 +129,6 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             });
         },
 
-        /**
-         * A custom comparator to setup special comparison strategies for specific keys
-         * @param key key in Lecture
-         * @param a
-         * @param b
-         * @return return 0 to use naive default comparator
-         */
-        lectureComparator(key: string, a: Lecture, b: Lecture): boolean | null {
-            // here we can set some custom comparisons
-            return null;
-        },
-
         toggleVisibility() {
             DataStore.adminLectureList.setPrivate(
                 this.lectureData.courseId,
@@ -187,6 +163,38 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             return this.lectureData[key];
         },
 
+        onAttachmentFileDrop(e) {
+            if (e.dataTransfer.items) {
+                const item = e.dataTransfer.items[0];
+                const { kind } = item;
+                switch (kind) {
+                    case "file": {
+                        DataStore.adminLectureList.uploadAttachmentFile(
+                            this.lectureData.courseId,
+                            this.lectureData.lectureId,
+                            item.getAsFile(),
+                        );
+                        break;
+                    }
+                    case "string": {
+                        DataStore.adminLectureList.uploadAttachmentUrl(
+                            this.lectureData.courseId,
+                            this.lectureData.lectureId,
+                            e.dataTransfer.getData("URL"),
+                        );
+                    }
+                }
+            }
+        },
+
+        deleteAttachment(id: number) {
+            DataStore.adminLectureList.deleteAttachment(
+                this.lectureData.courseId,
+                this.lectureData.lectureId,
+                id,
+            );
+        },
+
         /**
          * Opens the series lecture editor UI
          */
diff --git a/web/ts/global.ts b/web/ts/global.ts
index 376c99987..a0069080a 100644
--- a/web/ts/global.ts
+++ b/web/ts/global.ts
@@ -50,9 +50,13 @@ export interface UploadFileListener {
 }
 
 export function uploadFile(url: string, file: File, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
-    const xhr = new XMLHttpRequest();
     const vodUploadFormData = new FormData();
     vodUploadFormData.append("file", file);
+    return postFormData(url, vodUploadFormData, listener);
+}
+
+export function postFormData(url: string, data: FormData, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
+    const xhr = new XMLHttpRequest();
     return new Promise((resolve, reject) => {
         xhr.onloadend = () => {
             if (xhr.status === 200) {
@@ -70,7 +74,7 @@ export function uploadFile(url: string, file: File, listener: UploadFileListener
             }
         };
         xhr.open("POST", url);
-        xhr.send(vodUploadFormData);
+        xhr.send(data);
     });
 }
 

From 0a65347e89d12e415a1e06440fb9e7f6c55bcc44 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sun, 10 Sep 2023 23:35:09 +0200
Subject: [PATCH 31/77] :)

---
 web/ts/api/admin-lecture-list.ts        | 14 +++-----------
 web/ts/change-set.ts                    |  4 ++--
 web/ts/data-store/admin-lecture-list.ts | 16 ++++++++--------
 web/ts/edit-course.ts                   |  8 ++------
 4 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index d86d83a09..f5d37342d 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -1,6 +1,6 @@
 import { del, get, post, put } from "../utilities/fetch-wrappers";
 import { StatusCodes } from "http-status-codes";
-import {Delete, patchData, postData, postFormData, putData, uploadFile, UploadFileListener} from "../global";
+import { Delete, patchData, postData, postFormData, putData, uploadFile, UploadFileListener } from "../global";
 
 export interface UpdateLectureMetaRequest {
     name?: string;
@@ -248,11 +248,7 @@ export const AdminLectureList = {
         file: File,
         listener: UploadFileListener = {},
     ) => {
-        return await uploadFile(
-            `/api/stream/${lectureId}/files?type=file`,
-            file,
-            listener,
-        );
+        return await uploadFile(`/api/stream/${lectureId}/files?type=file`, file, listener);
     },
 
     /**
@@ -273,11 +269,7 @@ export const AdminLectureList = {
         return postFormData(`/api/stream/${lectureId}/files?type=url`, vodUploadFormData, listener);
     },
 
-    deleteAttachment: async (
-        courseId: number,
-        lectureId: number,
-        attachmentId: number,
-    ) => {
+    deleteAttachment: async (courseId: number, lectureId: number, attachmentId: number) => {
         return Delete(`/api/stream/${lectureId}/files/${attachmentId}`);
     },
 
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index d7517b2d4..ff590d7fe 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -219,5 +219,5 @@ export function ignoreKeys<T>(list: string[]): LectureComparator<T> {
             return false;
         }
         return null;
-    }
-}
\ No newline at end of file
+    };
+}
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 860445fa0..582c33a0a 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -1,5 +1,5 @@
 import { StreamableMapProvider } from "./provider";
-import {AdminLectureList, Lecture, LectureFile, UpdateLectureMetaRequest} from "../api/admin-lecture-list";
+import { AdminLectureList, Lecture, LectureFile, UpdateLectureMetaRequest } from "../api/admin-lecture-list";
 import { FileType } from "../edit-course";
 import { UploadFileListener } from "../global";
 
@@ -106,14 +106,14 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         const newFile = new LectureFile({
             id: JSON.parse(res.responseText),
             fileType: 2,
-            friendlyName: file.name
+            friendlyName: file.name,
         });
 
         this.data[courseId] = (await this.getData(courseId)).map((s) => {
             if (s.lectureId === lectureId) {
                 return {
                     ...s,
-                    files: [...s.files, newFile]
+                    files: [...s.files, newFile],
                 };
             }
             return s;
@@ -121,19 +121,19 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
-    async uploadAttachmentUrl(courseId: number, lectureId: number, url: String) {
+    async uploadAttachmentUrl(courseId: number, lectureId: number, url: string) {
         const res = await AdminLectureList.uploadAttachmentUrl(courseId, lectureId, url);
         const newFile = new LectureFile({
             id: JSON.parse(res.responseText),
             fileType: 2,
-            friendlyName: url.substring(url.lastIndexOf("/") + 1) }
-        );
+            friendlyName: url.substring(url.lastIndexOf("/") + 1),
+        });
 
         this.data[courseId] = (await this.getData(courseId)).map((s) => {
             if (s.lectureId === lectureId) {
                 return {
                     ...s,
-                    files: [...s.files, newFile]
+                    files: [...s.files, newFile],
                 };
             }
             return s;
@@ -148,7 +148,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
             if (s.lectureId === lectureId) {
                 return {
                     ...s,
-                    files: [...s.files.filter(((a)=> a.id !== attachmentId))],
+                    files: [...s.files.filter((a) => a.id !== attachmentId)],
                 };
             }
             return s;
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 733af3780..36b1014a1 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -10,7 +10,7 @@ import {
     LectureVideoTypePres,
     LectureVideoTypes,
 } from "./api/admin-lecture-list";
-import {ChangeSet, ignoreKeys} from "./change-set";
+import { ChangeSet, ignoreKeys } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 
 export enum UIEditMode {
@@ -188,11 +188,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         deleteAttachment(id: number) {
-            DataStore.adminLectureList.deleteAttachment(
-                this.lectureData.courseId,
-                this.lectureData.lectureId,
-                id,
-            );
+            DataStore.adminLectureList.deleteAttachment(this.lectureData.courseId, this.lectureData.lectureId, id);
         },
 
         /**

From 74b180d92625b0c35c655ad294b673fa2dba0973 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Mon, 11 Sep 2023 11:34:36 +0200
Subject: [PATCH 32/77] add video sections to admin streams

---
 dao/courses.go  |  3 ++-
 model/stream.go | 13 +++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/dao/courses.go b/dao/courses.go
index 23978d086..18294dfea 100644
--- a/dao/courses.go
+++ b/dao/courses.go
@@ -201,6 +201,7 @@ func (d coursesDao) GetCourseByToken(token string) (course model.Course, err err
 func (d coursesDao) GetCourseById(ctx context.Context, id uint) (course model.Course, err error) {
 	var foundCourse model.Course
 	dbErr := DB.Preload("Streams.TranscodingProgresses").
+		Preload("Streams.VideoSections").
 		Preload("Streams.Files").
 		Preload("Streams", func(db *gorm.DB) *gorm.DB {
 			return db.Order("streams.start desc")
@@ -218,7 +219,7 @@ func (d coursesDao) GetCourseBySlugYearAndTerm(ctx context.Context, slug string,
 		return cachedCourses.(model.Course), nil
 	}
 	var course model.Course
-	err := DB.Preload("Streams.Units", func(db *gorm.DB) *gorm.DB {
+	err := DB.Preload("Streams.VideoSections").Preload("Streams.Units", func(db *gorm.DB) *gorm.DB {
 		return db.Order("unit_start desc")
 	}).Preload("Streams", func(db *gorm.DB) *gorm.DB {
 		return db.Order("start desc")
diff --git a/model/stream.go b/model/stream.go
index 6fac079af..35de2d675 100755
--- a/model/stream.go
+++ b/model/stream.go
@@ -323,6 +323,18 @@ func (s Stream) getJson(lhs []LectureHall, course Course) gin.H {
 		}
 	}
 
+	var videoSections []gin.H
+	for _, section := range s.VideoSections {
+		videoSections = append(videoSections, gin.H{
+			"id":           section.ID,
+			"description":  section.Description,
+			"startHours":   section.StartHours,
+			"startMinutes": section.StartMinutes,
+			"startSeconds": section.StartSeconds,
+			"fileID":       section.FileID,
+		})
+	}
+
 	return gin.H{
 		"lectureId":             s.Model.ID,
 		"courseId":              s.CourseID,
@@ -346,6 +358,7 @@ func (s Stream) getJson(lhs []LectureHall, course Course) gin.H {
 		"courseSlug":            course.Slug,
 		"private":               s.Private,
 		"downloadableVods":      s.GetVodFiles(),
+		"videoSections":         videoSections,
 	}
 }
 

From 85a17f51829ecb372eec2f980414486905bc1809 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Mon, 11 Sep 2023 15:46:54 +0200
Subject: [PATCH 33/77] main functionality

---
 .../course/manage/edit-video-sections.gohtml  | 201 ++++++++----------
 web/ts/api/admin-lecture-list.ts              |  62 ++++++
 web/ts/change-set.ts                          |  30 ++-
 web/ts/data-store/admin-lecture-list.ts       |   2 +
 web/ts/edit-course.ts                         |  43 +++-
 web/ts/entry/admins.ts                        |   1 +
 6 files changed, 219 insertions(+), 120 deletions(-)

diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index 71f1edf2f..d02b9f59b 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -1,7 +1,5 @@
 {{define "editvideosections"}}
-    <article x-data="{ videoSectionController: new admin.VideoSectionsAdminController(lecture.lectureId) }"
-            x-init="() => videoSectionController.init(`edit-video-sections-${lecture.lectureId}`, $el)"
-            class="grid gap-y-3">
+    <article 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>
@@ -29,147 +27,122 @@
                     </div>
                 </div>
             </div>
-            <div x-show="videoSectionController.unsavedChanges"
-                 class="flex items-center text-xs text-3 px-2 border border-amber-200 bg-amber-200/50 rounded-full">
-                <i class="fa fa-triangle-exclamation mr-1"></i>
-                <span class="font-light">Unsaved Changes</span>
-            </div>
         </header>
-        <form id = "new-section-form" @submit.prevent="videoSectionController.publishNewSections()">
+        <form
+                id="new-section-form"
+                x-data="{
+                    isValid: false,
+                    newSection: new admin.ChangeSet({ startHours: 0, startMinutes: 0, startSeconds: 0, description: '' })
+                }"
+                x-init="newSection.listen((s) => { isValid = isValidVideoSection(s); })"
+                @submit.prevent="addSection(newSection.changeState); newSection.reset();"
+        >
             <div class="flex align-middle">
                 <input id="startHours"
-                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
-                       x-model.number="videoSectionController.current.startHours"
+                       name="startHours"
+                       x-bind-change-set.int="newSection"
                        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"
+                       name="startMinutes"
+                       x-bind-change-set.int="newSection"
                        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"
+                       name="startSeconds"
+                       x-bind-change-set.int="newSection"
                        type="number" min="0" max="59" step="1"
                        placeholder="0"
                        class="w-20 rounded px-4 py-3 tl-input">
-                <input x-model="videoSectionController.current.description"
+                <input name="description"
+                       x-bind-change-set="newSection"
                        type="text" value=""
                        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 dark:bg-gray-600"
-                        @click="videoSectionController.pushNewSection()"
-                        :disabled="!videoSectionController.currentIsValid()">
+                        @click="addSection(newSection.changeState); newSection.reset();"
+                        :disabled="!isValid">
                     <i class="fa fa-plus text-3"></i>
                 </button>
             </div>
-            <template x-if="videoSectionController.newSections.length > 0">
-                <section>
-                    <article class="grid gap-2 pt-2">
-                        <template x-for="section in videoSectionController.newSections">
-                            <div class="flex justify-between w-full border dark:border-gray-600 rounded">
-                                <div class="my-auto p-1">
+        </form>
+        <template x-if="lectureData.videoSections.length > 0">
+            <div class="">
+                <div class="grid gap-2">
+                    <template x-for="section in lectureData.videoSections" :key="section.id">
+                        <div x-data="{ sectionChangeSet: new admin.ChangeSet(section), editMode: false }" class="flex align-middle items-stretch w-full border dark:border-gray-600 rounded">
+                            <template x-if="!editMode">
+                                <div class="p-1">
                                     <span class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
                                           x-text="section.friendlyTimestamp"></span>
                                     <span class="text-xs font-semibold text-3"
                                           x-text="section.description"></span>
                                 </div>
-                                <div class="my-auto ml-auto border-l dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600">
-                                    <button class="py-1 px-3"
-                                            @click="videoSectionController.removeNewSection(section)">
-                                        <i class="fa fa-trash text-xs"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </template>
-                    </article>
-                    <div class="flex items-center justify-center grow py-2">
-                        <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="videoSectionController.existingSections.length > 0">
-            <div class="">
-                <div class="grid gap-2">
-                    <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">
-                                <template x-if="!updater.show">
-                                    <div class="p-1">
-                                        <span class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
-                                              x-text="section.friendlyTimestamp"></span>
-                                        <span class="text-xs font-semibold text-3"
-                                              x-text="section.description"></span>
-                                    </div>
-                                </template>
-                                <template x-if="updater.show">
-                                    <form @submit.prevent="updater.update();"
-                                          @reset.prevent="updater.reset();"
-                                          class="flex flex-grow items-center p-2">
-                                        <div class="text-sm mr-2">
-                                            <label for="video-section-timestamp"
-                                                   class="block text-5">Timestamp</label>
-                                            <div class="flex mt-3">
-                                                <input id="startHours"
-                                                       x-model.number="updater.request.StartHours"
-                                                       type="number" min="0" max="23" step="1"
-                                                       placeholder="0"
-                                                       class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
-                                                <span class="px-2 my-auto font-semibold text-5">:</span>
-                                                <input id="startMinutes"
-                                                       x-model.number="updater.request.StartMinutes"
-                                                       type="number" min="0" max="59" step="1"
-                                                       placeholder="0"
-                                                       class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
-                                                <span class="px-2 my-auto font-semibold text-5">:</span>
-                                                <input id="startSeconds"
-                                                       x-model.number="updater.request.StartSeconds"
-                                                       type="number" min="0" max="59" step="1"
-                                                       placeholder="0"
-                                                       class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
-                                            </div>
-                                        </div>
-                                        <div class="text-sm flex-grow">
-                                            <label for="video-section-description"
-                                                   class="block text-5">Description</label>
-                                            <input x-model="updater.request.Description"
-                                                   id="video-section-description" type="text"
-                                                   name="video-section-description" autofocus="" required
-                                                   class="rounded px-4 py-3 mt-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600"/>
+                            </template>
+                            <template x-if="editMode">
+                                <form @submit.prevent="sectionChangeSet.commit();"
+                                      @reset.prevent="sectionChangeSet.reset();"
+                                      class="flex flex-grow items-center p-2">
+                                    <div class="text-sm mr-2">
+                                        <label for="video-section-timestamp"
+                                               class="block text-5">Timestamp</label>
+                                        <div class="flex mt-3">
+                                            <input id="startHours"
+                                                   x-bind-changeset="sectionChangeSet"
+                                                   name="startHours"
+                                                   type="number" min="0" max="23" step="1"
+                                                   placeholder="0"
+                                                   class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
+                                            <span class="px-2 my-auto font-semibold text-5">:</span>
+                                            <input id="startMinutes"
+                                                   x-bind-changeset="sectionChangeSet"
+                                                   name="startMinutes"
+                                                   type="number" min="0" max="59" step="1"
+                                                   placeholder="0"
+                                                   class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
+                                            <span class="px-2 my-auto font-semibold text-5">:</span>
+                                            <input id="startSeconds"
+                                                   x-bind-changeset="sectionChangeSet"
+                                                   name="dtartSeconds"
+                                                   type="number" min="0" max="59" step="1"
+                                                   placeholder="0"
+                                                   class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
                                         </div>
-                                        <button type="submit"
-                                                title="Update"
-                                                class="h-full w-fit ml-2 bg-blue-500 text-center px-3 py-1 rounded w-full dark:bg-indigo-600">
-                                            <i class="fa fa-square-check text-white"></i>
-                                        </button>
-                                        <button type="reset"
-                                                title="Undo changes"
-                                                class="h-full w-fit ml-2 bg-gray-100 text-center px-3 rounded w-full dark:bg-secondary-lighter">
-                                            <i class="fa fa-undo text-3"></i>
-                                        </button>
-                                    </form>
-                                </template>
-                                <button class="text-5 py-1 px-3 ml-auto border-l dark:border-gray-600 text-3 hover:bg-gray-200 dark:hover:bg-gray-600"
-                                        @click="updater.show = !updater.show">
-                                    <i class="fa fa-edit"></i>
-                                </button>
-                                <button class="text-5 py-1 px-3 border-l rounded-r dark:border-gray-600 text-3 text-xs hover:bg-gray-200 dark:hover:bg-gray-600"
-                                        @click="videoSectionController.removeExistingSection(section.ID)">
-                                    <i class="fa fa-trash"></i>
-                                </button>
-                            </div>
-                        </template>
+                                    </div>
+                                    <div class="text-sm flex-grow">
+                                        <label for="video-section-description"
+                                               class="block text-5">Description</label>
+                                        <input x-bind-changeset="sectionChangeSet"
+                                               name="description"
+                                               id="video-section-description" type="text"
+                                               autofocus="" required
+                                               class="rounded px-4 py-3 mt-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600"/>
+                                    </div>
+                                    <button type="submit"
+                                            title="Update"
+                                            class="h-full w-fit ml-2 bg-blue-500 text-center px-3 py-1 rounded w-full dark:bg-indigo-600">
+                                        <i class="fa fa-square-check text-white"></i>
+                                    </button>
+                                    <button type="reset"
+                                            title="Undo changes"
+                                            class="h-full w-fit ml-2 bg-gray-100 text-center px-3 rounded w-full dark:bg-secondary-lighter">
+                                        <i class="fa fa-undo text-3"></i>
+                                    </button>
+                                </form>
+                            </template>
+                            <button class="text-5 py-1 px-3 ml-auto border-l dark:border-gray-600 text-3 hover:bg-gray-200 dark:hover:bg-gray-600" @click="editMode = true">
+                                <i class="fa fa-edit"></i>
+                            </button>
+                            <button class="text-5 py-1 px-3 border-l rounded-r dark:border-gray-600 text-3 text-xs hover:bg-gray-200 dark:hover:bg-gray-600"
+                                    @click="deleteSection(section.id)">
+                                <i class="fa fa-trash"></i>
+                            </button>
+                        </div>
                     </template>
                 </div>
             </div>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index f5d37342d..c6375ef37 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -72,6 +72,26 @@ export const LectureVideoTypes = [
     LectureVideoTypeCam,
 ] as LectureVideoType[];
 
+export type VideoSection = {
+    id?: number;
+    description: string;
+
+    startHours: number;
+    startMinutes: number;
+    startSeconds: number;
+
+    streamID?: number;
+    fileID?: number;
+};
+
+export function videoSectionTimestamp(a: VideoSection) : number {
+    return a.startHours * 3600 + a.startMinutes * 60 + a.startSeconds;
+}
+
+export function videoSectionSort(a: VideoSection, b: VideoSection) : number {
+    return videoSectionTimestamp(a) - videoSectionTimestamp(b);
+}
+
 export interface Lecture {
     color: string;
     courseId: number;
@@ -95,6 +115,7 @@ export interface Lecture {
     start: string;
     streamKey: string;
     transcodingProgresses: TranscodingProgress[];
+    videoSections: VideoSection[];
 
     // Clientside computed fields
     hasAttachments: boolean;
@@ -199,6 +220,47 @@ export const AdminLectureList = {
         return await postData(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
     },
 
+    /**
+     * Add sections to a lecture
+     * @param lectureId
+     * @param sections
+     */
+    addSections: async (lectureId: number, sections: VideoSection[]): Promise<void> => {
+        const res = await postData(`/api/stream/${lectureId}/sections`, sections);
+        if (res.status !== StatusCodes.OK) {
+            throw Error(res.body.toString());
+        }
+    },
+
+    /**
+     * Updates a section
+     * @param lectureId
+     * @param section
+     */
+    updateSection: async (lectureId: number, section: VideoSection): Promise<void> => {
+        const res = await putData(`/api/stream/${lectureId}/sections/${section.id}`, {
+            Description: section.description,
+            StartHours: section.startHours,
+            StartMinutes: section.startMinutes,
+            StartSeconds: section.startSeconds,
+        });
+        if (res.status !== StatusCodes.OK) {
+            throw Error(res.body.toString());
+        }
+    },
+
+    /**
+     * Remove a section from a lecture
+     * @param lectureId
+     * @param sectionId
+     */
+    removeSection: async (lectureId: number, sectionId: number): Promise<void> => {
+        const res = await Delete(`/api/stream/${lectureId}/sections/${sectionId}`);
+        if (res.status !== StatusCodes.OK) {
+            throw Error(res.body.toString());
+        }
+    },
+
     /**
      * Updates the private state of a lecture.
      * @param lectureId
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index ff590d7fe..9c56f5a82 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -55,7 +55,7 @@ export interface DirtyState {
 export class ChangeSet<T> {
     private state: T;
     private changeState: T;
-    private readonly comparator?: LectureComparator<T>;
+    private readonly comparator?: PropertyComparator<T>;
     private onUpdate: ((changeState: T, dirtyState: DirtyState) => void)[];
 
     constructor(
@@ -211,9 +211,10 @@ export class ChangeSet<T> {
     }
 }
 
-export type LectureComparator<T> = (key: string, a: T, b: T) => boolean | null;
+export type PropertyComparator<T> = (key: string, a: T, b: T) => boolean | null;
+export type SinglePropertyComparator<T> = (a: T, b: T) => boolean | null;
 
-export function ignoreKeys<T>(list: string[]): LectureComparator<T> {
+export function ignoreKeys<T>(list: string[]): PropertyComparator<T> {
     return (key: string, a, b) => {
         if (list.includes(key)) {
             return false;
@@ -221,3 +222,26 @@ export function ignoreKeys<T>(list: string[]): LectureComparator<T> {
         return null;
     };
 }
+
+export function singleProperty<T>(key: string, comparator: SinglePropertyComparator<T>): PropertyComparator<T> {
+    return (_key: string, a, b) => {
+        if (_key !== key) {
+            return null;
+        }
+        return comparator(a, b);
+    };
+}
+
+export function comparatorPipeline<T>(list: PropertyComparator<T>[]): PropertyComparator<T> {
+    return (key: string, a, b) => {
+        for (const comparator of list) {
+            const res = comparator(key, a, b);
+            if (res === true) {
+                return true;
+            } else if (res === false) {
+                return false;
+            }
+        }
+        return null;
+    };
+}
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 582c33a0a..4712a24ca 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -27,6 +27,8 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         return result.map((s) => {
             s.hasAttachments = (s.files || []).some((f) => f.fileType === FileType.attachment);
 
+            s.videoSections = s.videoSections ?? [];
+
             s.startDate = new Date(s.start);
             s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
             s.startTimeFormatted = s.startDate.toLocaleTimeString("en-US", timeFormatOptions);
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 36b1014a1..ec9ab31ad 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -8,9 +8,9 @@ import {
     LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    LectureVideoTypes,
+    LectureVideoTypes, VideoSection, videoSectionSort,
 } from "./api/admin-lecture-list";
-import { ChangeSet, ignoreKeys } from "./change-set";
+import {ChangeSet, comparatorPipeline, ignoreKeys, singleProperty} from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 
 export enum UIEditMode {
@@ -114,8 +114,20 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          * AlpineJS init function which is called automatically in addition to 'x-init'
          */
         init() {
+            const customComparator = comparatorPipeline([
+                ignoreKeys(["files"]),
+                singleProperty("videoSections", (a: Lecture, b: Lecture): boolean|null => {
+                    if (a.videoSections.length !== b.videoSections.length) {
+                        return true;
+                    }
+                    if (a.videoSections.some(({ id }) => !b.videoSections.some(({id: bId}) => id === bId))) {
+                        return true;
+                    }
+                }),
+            ]);
+
             // This tracks changes that are not saved yet
-            this.changeSet = new ChangeSet<Lecture>(lecture, ignoreKeys(["files"]), (data, dirtyState) => {
+            this.changeSet = new ChangeSet<Lecture>(lecture, customComparator, (data, dirtyState) => {
                 this.lectureData = data;
                 this.isDirty = dirtyState.isDirty;
             });
@@ -191,6 +203,31 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             DataStore.adminLectureList.deleteAttachment(this.lectureData.courseId, this.lectureData.lectureId, id);
         },
 
+        addSection(section: VideoSection) {
+            this.changeSet.patch("videoSections", [
+                ...this.lectureData.videoSections,
+                section,
+            ].sort(videoSectionSort));
+        },
+
+        deleteSection(id: number) {
+            this.changeSet.patch("videoSections", this.lectureData.videoSections.filter(
+                (s) => s.id !== id,
+            ));
+        },
+
+        isValidVideoSection(section: VideoSection): boolean {
+            return (
+                section.description !== "" &&
+                section.startHours !== null &&
+                section.startHours < 32 &&
+                section.startMinutes !== null &&
+                section.startMinutes < 60 &&
+                section.startSeconds !== null &&
+                section.startSeconds < 60
+            );
+        },
+
         /**
          * Opens the series lecture editor UI
          */
diff --git a/web/ts/entry/admins.ts b/web/ts/entry/admins.ts
index e4374f0e0..ae5dbcc20 100644
--- a/web/ts/entry/admins.ts
+++ b/web/ts/entry/admins.ts
@@ -13,4 +13,5 @@ export * from "../courseAdminManagement";
 export * from "../notification-management";
 export * from "../audits";
 export * from "../maintenance";
+export * from "../change-set"
 export { VideoSectionsAdminController, VideoSectionUpdater } from "../video-sections";

From f21f0dbe536e784a985c1aec9bc48074863b08b6 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 14 Sep 2023 14:54:38 +0200
Subject: [PATCH 34/77] using fetch wrtappers

---
 web/ts/api/admin-lecture-list.ts   | 36 ++++++++++--------------------
 web/ts/utilities/fetch-wrappers.ts | 21 +++++++++++++++++
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index c6375ef37..a064157fe 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -1,4 +1,4 @@
-import { del, get, post, put } from "../utilities/fetch-wrappers";
+import {del, get, patch, post, put} from "../utilities/fetch-wrappers";
 import { StatusCodes } from "http-status-codes";
 import { Delete, patchData, postData, postFormData, putData, uploadFile, UploadFileListener } from "../global";
 
@@ -166,13 +166,10 @@ export const AdminLectureList = {
      * @param request
      */
     updateMetadata: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
-        console.log({
-            request,
-        });
         const promises = [];
         if (request.name !== undefined) {
             promises.push(
-                postData(`/api/course/${courseId}/renameLecture/${lectureId}`, {
+                post(`/api/course/${courseId}/renameLecture/${lectureId}`, {
                     name: request.name,
                 }),
             );
@@ -180,7 +177,7 @@ export const AdminLectureList = {
 
         if (request.description !== undefined) {
             promises.push(
-                putData(`/api/course/${courseId}/updateDescription/${lectureId}`, {
+                put(`/api/course/${courseId}/updateDescription/${lectureId}`, {
                     name: request.description,
                 }),
             );
@@ -188,7 +185,7 @@ export const AdminLectureList = {
 
         if (request.lectureHallId !== undefined) {
             promises.push(
-                postData("/api/setLectureHall", {
+                post("/api/setLectureHall", {
                     streamIds: [lectureId],
                     lectureHall: request.lectureHallId,
                 }),
@@ -197,7 +194,7 @@ export const AdminLectureList = {
 
         if (request.isChatEnabled !== undefined) {
             promises.push(
-                patchData(`/api/stream/${lectureId}/chat/enabled`, {
+                patch(`/api/stream/${lectureId}/chat/enabled`, {
                     lectureId,
                     isChatEnabled: request.isChatEnabled,
                 }),
@@ -216,8 +213,8 @@ export const AdminLectureList = {
      * @param courseId
      * @param lectureId
      */
-    saveSeriesMetadata: async (courseId: number, lectureId: number) => {
-        return await postData(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
+    saveSeriesMetadata: async (courseId: number, lectureId: number): Promise<void>  => {
+        await post(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
     },
 
     /**
@@ -226,10 +223,7 @@ export const AdminLectureList = {
      * @param sections
      */
     addSections: async (lectureId: number, sections: VideoSection[]): Promise<void> => {
-        const res = await postData(`/api/stream/${lectureId}/sections`, sections);
-        if (res.status !== StatusCodes.OK) {
-            throw Error(res.body.toString());
-        }
+        await post(`/api/stream/${lectureId}/sections`, sections);
     },
 
     /**
@@ -255,10 +249,7 @@ export const AdminLectureList = {
      * @param sectionId
      */
     removeSection: async (lectureId: number, sectionId: number): Promise<void> => {
-        const res = await Delete(`/api/stream/${lectureId}/sections/${sectionId}`);
-        if (res.status !== StatusCodes.OK) {
-            throw Error(res.body.toString());
-        }
+        await del(`/api/stream/${lectureId}/sections/${sectionId}`);
     },
 
     /**
@@ -267,12 +258,9 @@ export const AdminLectureList = {
      * @param isPrivate
      */
     setPrivate: async (lectureId: number, isPrivate: boolean): Promise<void> => {
-        const res = await patchData(`/api/stream/${lectureId}/visibility`, {
+        await patch(`/api/stream/${lectureId}/visibility`, {
             private: isPrivate,
         });
-        if (res.status !== StatusCodes.OK) {
-            throw Error(res.body.toString());
-        }
     },
 
     /**
@@ -332,7 +320,7 @@ export const AdminLectureList = {
     },
 
     deleteAttachment: async (courseId: number, lectureId: number, attachmentId: number) => {
-        return Delete(`/api/stream/${lectureId}/files/${attachmentId}`);
+        return del(`/api/stream/${lectureId}/files/${attachmentId}`);
     },
 
     /**
@@ -351,7 +339,7 @@ export const AdminLectureList = {
      * @param lectureIds
      */
     delete: async function (courseId: number, lectureIds: number[]): Promise<Response> {
-        return await postData(`/api/course/${courseId}/deleteLectures`, {
+        return await post(`/api/course/${courseId}/deleteLectures`, {
             streamIDs: lectureIds,
         });
     },
diff --git a/web/ts/utilities/fetch-wrappers.ts b/web/ts/utilities/fetch-wrappers.ts
index 797912d56..36500ca73 100644
--- a/web/ts/utilities/fetch-wrappers.ts
+++ b/web/ts/utilities/fetch-wrappers.ts
@@ -63,6 +63,27 @@ export async function put(url = "", body: object = {}) {
     });
 }
 
+/**
+ * Wrapper for Javascript's fetch function for PATCH
+ * @param  {string} url URL to fetch
+ * @param  {object} body Data object to put
+ * @return {Promise<Response>}
+ */
+export async function patch(url = "", body = {}) {
+    return await fetch(url, {
+        method: "PATCH",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+    }).then((res) => {
+        if (!res.ok) {
+            throw Error(res.statusText);
+        }
+        return res;
+    });
+}
+
 /**
  * Wrapper for Javascript's fetch function for DELETE
  * @param  {string} url URL to fetch

From 0b939c6ab6adfa38ad4a712ec1f5288db510180c Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 14 Sep 2023 15:00:15 +0200
Subject: [PATCH 35/77] moved uploadFile and postFormData

---
 web/ts/api/admin-lecture-list.ts   | 11 +++----
 web/ts/global.ts                   | 33 --------------------
 web/ts/utilities/fetch-wrappers.ts | 49 ++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index a064157fe..e8bca3d71 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -1,6 +1,5 @@
-import {del, get, patch, post, put} from "../utilities/fetch-wrappers";
+import {del, get, patch, post, postFormData, PostFormDataListener, put, uploadFile} from "../utilities/fetch-wrappers";
 import { StatusCodes } from "http-status-codes";
-import { Delete, patchData, postData, postFormData, putData, uploadFile, UploadFileListener } from "../global";
 
 export interface UpdateLectureMetaRequest {
     name?: string;
@@ -232,7 +231,7 @@ export const AdminLectureList = {
      * @param section
      */
     updateSection: async (lectureId: number, section: VideoSection): Promise<void> => {
-        const res = await putData(`/api/stream/${lectureId}/sections/${section.id}`, {
+        const res = await put(`/api/stream/${lectureId}/sections/${section.id}`, {
             Description: section.description,
             StartHours: section.startHours,
             StartMinutes: section.startMinutes,
@@ -276,7 +275,7 @@ export const AdminLectureList = {
         lectureId: number,
         videoType: string,
         file: File,
-        listener: UploadFileListener = {},
+        listener: PostFormDataListener = {},
     ) => {
         await uploadFile(
             `/api/course/${courseId}/uploadVODMedia?streamID=${lectureId}&videoType=${videoType}`,
@@ -296,7 +295,7 @@ export const AdminLectureList = {
         courseId: number,
         lectureId: number,
         file: File,
-        listener: UploadFileListener = {},
+        listener: PostFormDataListener = {},
     ) => {
         return await uploadFile(`/api/stream/${lectureId}/files?type=file`, file, listener);
     },
@@ -312,7 +311,7 @@ export const AdminLectureList = {
         courseId: number,
         lectureId: number,
         url: string,
-        listener: UploadFileListener = {},
+        listener: PostFormDataListener = {},
     ) => {
         const vodUploadFormData = new FormData();
         vodUploadFormData.append("file_url", url);
diff --git a/web/ts/global.ts b/web/ts/global.ts
index a0069080a..5fe96316d 100644
--- a/web/ts/global.ts
+++ b/web/ts/global.ts
@@ -45,39 +45,6 @@ export async function Delete(url = "") {
     });
 }
 
-export interface UploadFileListener {
-    onProgress?: (progress: number) => void;
-}
-
-export function uploadFile(url: string, file: File, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
-    const vodUploadFormData = new FormData();
-    vodUploadFormData.append("file", file);
-    return postFormData(url, vodUploadFormData, listener);
-}
-
-export function postFormData(url: string, data: FormData, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
-    const xhr = new XMLHttpRequest();
-    return new Promise((resolve, reject) => {
-        xhr.onloadend = () => {
-            if (xhr.status === 200) {
-                resolve(xhr);
-            } else {
-                reject(xhr);
-            }
-        };
-        xhr.upload.onprogress = (e: ProgressEvent) => {
-            if (!e.lengthComputable) {
-                return;
-            }
-            if (listener.onProgress) {
-                listener.onProgress(Math.floor(100 * (e.loaded / e.total)));
-            }
-        };
-        xhr.open("POST", url);
-        xhr.send(data);
-    });
-}
-
 export function sendFormData(url, formData: FormData) {
     const HttpReq = new XMLHttpRequest();
     HttpReq.open("POST", url, false);
diff --git a/web/ts/utilities/fetch-wrappers.ts b/web/ts/utilities/fetch-wrappers.ts
index 36500ca73..2ef7da612 100644
--- a/web/ts/utilities/fetch-wrappers.ts
+++ b/web/ts/utilities/fetch-wrappers.ts
@@ -1,3 +1,5 @@
+import {postFormData} from "../global";
+
 /**
  * Wrapper for Javascript's fetch function for GET
  * @param  {string} url URL to fetch
@@ -42,6 +44,41 @@ export async function post(url: string, body: object = {}) {
     });
 }
 
+
+export interface PostFormDataListener {
+    onProgress?: (progress: number) => void;
+}
+
+/**
+ * Wrapper for XMLHttpRequest to send form data via POST
+ * @param  {string} url URL to send to
+ * @param  {FormData} body form-data
+ * @param  {PostFormDataListener} listener attached progress listeners
+ * @return {Promise<XMLHttpRequest>}
+ */
+export function postFormData(url: string, body: FormData, listener: PostFormDataListener = {}): Promise<XMLHttpRequest> {
+    const xhr = new XMLHttpRequest();
+    return new Promise((resolve, reject) => {
+        xhr.onloadend = () => {
+            if (xhr.status === 200) {
+                resolve(xhr);
+            } else {
+                reject(xhr);
+            }
+        };
+        xhr.upload.onprogress = (e: ProgressEvent) => {
+            if (!e.lengthComputable) {
+                return;
+            }
+            if (listener.onProgress) {
+                listener.onProgress(Math.floor(100 * (e.loaded / e.total)));
+            }
+        };
+        xhr.open("POST", url);
+        xhr.send(body);
+    });
+}
+
 /**
  * Wrapper for Javascript's fetch function for PUT
  * @param  {string} url URL to fetch
@@ -92,3 +129,15 @@ export async function patch(url = "", body = {}) {
 export async function del(url: string) {
     return await fetch(url, { method: "DELETE" });
 }
+
+/**
+ * Wrapper for XMLHttpRequest to upload a file
+ * @param url URL to upload to
+ * @param file File to be uploaded
+ * @param listener Upload progress listeners
+ */
+export function uploadFile(url: string, file: File, listener: PostFormDataListener = {}): Promise<XMLHttpRequest> {
+    const vodUploadFormData = new FormData();
+    vodUploadFormData.append("file", file);
+    return postFormData(url, vodUploadFormData, listener);
+}

From df179a73aa2df75acb8b69eb368b526c23983696 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 14 Sep 2023 15:02:16 +0200
Subject: [PATCH 36/77] fix linteer

---
 web/ts/api/admin-lecture-list.ts   | 17 +++++++++++++----
 web/ts/edit-course.ts              | 22 +++++++++++-----------
 web/ts/entry/admins.ts             |  2 +-
 web/ts/utilities/fetch-wrappers.ts |  9 ++++++---
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index e8bca3d71..9ef78740d 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -1,4 +1,13 @@
-import {del, get, patch, post, postFormData, PostFormDataListener, put, uploadFile} from "../utilities/fetch-wrappers";
+import {
+    del,
+    get,
+    patch,
+    post,
+    postFormData,
+    PostFormDataListener,
+    put,
+    uploadFile,
+} from "../utilities/fetch-wrappers";
 import { StatusCodes } from "http-status-codes";
 
 export interface UpdateLectureMetaRequest {
@@ -83,11 +92,11 @@ export type VideoSection = {
     fileID?: number;
 };
 
-export function videoSectionTimestamp(a: VideoSection) : number {
+export function videoSectionTimestamp(a: VideoSection): number {
     return a.startHours * 3600 + a.startMinutes * 60 + a.startSeconds;
 }
 
-export function videoSectionSort(a: VideoSection, b: VideoSection) : number {
+export function videoSectionSort(a: VideoSection, b: VideoSection): number {
     return videoSectionTimestamp(a) - videoSectionTimestamp(b);
 }
 
@@ -212,7 +221,7 @@ export const AdminLectureList = {
      * @param courseId
      * @param lectureId
      */
-    saveSeriesMetadata: async (courseId: number, lectureId: number): Promise<void>  => {
+    saveSeriesMetadata: async (courseId: number, lectureId: number): Promise<void> => {
         await post(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
     },
 
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index ec9ab31ad..e71b44053 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -8,9 +8,11 @@ import {
     LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    LectureVideoTypes, VideoSection, videoSectionSort,
+    LectureVideoTypes,
+    VideoSection,
+    videoSectionSort,
 } from "./api/admin-lecture-list";
-import {ChangeSet, comparatorPipeline, ignoreKeys, singleProperty} from "./change-set";
+import { ChangeSet, comparatorPipeline, ignoreKeys, singleProperty } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 
 export enum UIEditMode {
@@ -116,11 +118,11 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         init() {
             const customComparator = comparatorPipeline([
                 ignoreKeys(["files"]),
-                singleProperty("videoSections", (a: Lecture, b: Lecture): boolean|null => {
+                singleProperty("videoSections", (a: Lecture, b: Lecture): boolean | null => {
                     if (a.videoSections.length !== b.videoSections.length) {
                         return true;
                     }
-                    if (a.videoSections.some(({ id }) => !b.videoSections.some(({id: bId}) => id === bId))) {
+                    if (a.videoSections.some(({ id }) => !b.videoSections.some(({ id: bId }) => id === bId))) {
                         return true;
                     }
                 }),
@@ -204,16 +206,14 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         addSection(section: VideoSection) {
-            this.changeSet.patch("videoSections", [
-                ...this.lectureData.videoSections,
-                section,
-            ].sort(videoSectionSort));
+            this.changeSet.patch("videoSections", [...this.lectureData.videoSections, section].sort(videoSectionSort));
         },
 
         deleteSection(id: number) {
-            this.changeSet.patch("videoSections", this.lectureData.videoSections.filter(
-                (s) => s.id !== id,
-            ));
+            this.changeSet.patch(
+                "videoSections",
+                this.lectureData.videoSections.filter((s) => s.id !== id),
+            );
         },
 
         isValidVideoSection(section: VideoSection): boolean {
diff --git a/web/ts/entry/admins.ts b/web/ts/entry/admins.ts
index ae5dbcc20..58e9df699 100644
--- a/web/ts/entry/admins.ts
+++ b/web/ts/entry/admins.ts
@@ -13,5 +13,5 @@ export * from "../courseAdminManagement";
 export * from "../notification-management";
 export * from "../audits";
 export * from "../maintenance";
-export * from "../change-set"
+export * from "../change-set";
 export { VideoSectionsAdminController, VideoSectionUpdater } from "../video-sections";
diff --git a/web/ts/utilities/fetch-wrappers.ts b/web/ts/utilities/fetch-wrappers.ts
index 2ef7da612..0c780409e 100644
--- a/web/ts/utilities/fetch-wrappers.ts
+++ b/web/ts/utilities/fetch-wrappers.ts
@@ -1,4 +1,4 @@
-import {postFormData} from "../global";
+import { postFormData } from "../global";
 
 /**
  * Wrapper for Javascript's fetch function for GET
@@ -44,7 +44,6 @@ export async function post(url: string, body: object = {}) {
     });
 }
 
-
 export interface PostFormDataListener {
     onProgress?: (progress: number) => void;
 }
@@ -56,7 +55,11 @@ export interface PostFormDataListener {
  * @param  {PostFormDataListener} listener attached progress listeners
  * @return {Promise<XMLHttpRequest>}
  */
-export function postFormData(url: string, body: FormData, listener: PostFormDataListener = {}): Promise<XMLHttpRequest> {
+export function postFormData(
+    url: string,
+    body: FormData,
+    listener: PostFormDataListener = {},
+): Promise<XMLHttpRequest> {
     const xhr = new XMLHttpRequest();
     return new Promise((resolve, reject) => {
         xhr.onloadend = () => {

From 4408da41647b0bafc0efcd20124b769b647cc9a6 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 14 Sep 2023 15:05:31 +0200
Subject: [PATCH 37/77] Impl. Feedback

---
 web/ts/api/admin-lecture-list.ts   | 42 +++++++++---------
 web/ts/utilities/fetch-wrappers.ts | 71 ++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 20 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index f5d37342d..68b744e04 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -1,6 +1,14 @@
-import { del, get, post, put } from "../utilities/fetch-wrappers";
+import {
+    del,
+    get,
+    patch,
+    post,
+    postFormData,
+    PostFormDataListener,
+    put,
+    uploadFile,
+} from "../utilities/fetch-wrappers";
 import { StatusCodes } from "http-status-codes";
-import { Delete, patchData, postData, postFormData, putData, uploadFile, UploadFileListener } from "../global";
 
 export interface UpdateLectureMetaRequest {
     name?: string;
@@ -145,13 +153,10 @@ export const AdminLectureList = {
      * @param request
      */
     updateMetadata: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
-        console.log({
-            request,
-        });
         const promises = [];
         if (request.name !== undefined) {
             promises.push(
-                postData(`/api/course/${courseId}/renameLecture/${lectureId}`, {
+                post(`/api/course/${courseId}/renameLecture/${lectureId}`, {
                     name: request.name,
                 }),
             );
@@ -159,7 +164,7 @@ export const AdminLectureList = {
 
         if (request.description !== undefined) {
             promises.push(
-                putData(`/api/course/${courseId}/updateDescription/${lectureId}`, {
+                put(`/api/course/${courseId}/updateDescription/${lectureId}`, {
                     name: request.description,
                 }),
             );
@@ -167,7 +172,7 @@ export const AdminLectureList = {
 
         if (request.lectureHallId !== undefined) {
             promises.push(
-                postData("/api/setLectureHall", {
+                post("/api/setLectureHall", {
                     streamIds: [lectureId],
                     lectureHall: request.lectureHallId,
                 }),
@@ -176,7 +181,7 @@ export const AdminLectureList = {
 
         if (request.isChatEnabled !== undefined) {
             promises.push(
-                patchData(`/api/stream/${lectureId}/chat/enabled`, {
+                patch(`/api/stream/${lectureId}/chat/enabled`, {
                     lectureId,
                     isChatEnabled: request.isChatEnabled,
                 }),
@@ -195,8 +200,8 @@ export const AdminLectureList = {
      * @param courseId
      * @param lectureId
      */
-    saveSeriesMetadata: async (courseId: number, lectureId: number) => {
-        return await postData(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
+    saveSeriesMetadata: async (courseId: number, lectureId: number): Promise<void> => {
+        await post(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
     },
 
     /**
@@ -205,12 +210,9 @@ export const AdminLectureList = {
      * @param isPrivate
      */
     setPrivate: async (lectureId: number, isPrivate: boolean): Promise<void> => {
-        const res = await patchData(`/api/stream/${lectureId}/visibility`, {
+        await patch(`/api/stream/${lectureId}/visibility`, {
             private: isPrivate,
         });
-        if (res.status !== StatusCodes.OK) {
-            throw Error(res.body.toString());
-        }
     },
 
     /**
@@ -226,7 +228,7 @@ export const AdminLectureList = {
         lectureId: number,
         videoType: string,
         file: File,
-        listener: UploadFileListener = {},
+        listener: PostFormDataListener = {},
     ) => {
         await uploadFile(
             `/api/course/${courseId}/uploadVODMedia?streamID=${lectureId}&videoType=${videoType}`,
@@ -246,7 +248,7 @@ export const AdminLectureList = {
         courseId: number,
         lectureId: number,
         file: File,
-        listener: UploadFileListener = {},
+        listener: PostFormDataListener = {},
     ) => {
         return await uploadFile(`/api/stream/${lectureId}/files?type=file`, file, listener);
     },
@@ -262,7 +264,7 @@ export const AdminLectureList = {
         courseId: number,
         lectureId: number,
         url: string,
-        listener: UploadFileListener = {},
+        listener: PostFormDataListener = {},
     ) => {
         const vodUploadFormData = new FormData();
         vodUploadFormData.append("file_url", url);
@@ -270,7 +272,7 @@ export const AdminLectureList = {
     },
 
     deleteAttachment: async (courseId: number, lectureId: number, attachmentId: number) => {
-        return Delete(`/api/stream/${lectureId}/files/${attachmentId}`);
+        return del(`/api/stream/${lectureId}/files/${attachmentId}`);
     },
 
     /**
@@ -289,7 +291,7 @@ export const AdminLectureList = {
      * @param lectureIds
      */
     delete: async function (courseId: number, lectureIds: number[]): Promise<Response> {
-        return await postData(`/api/course/${courseId}/deleteLectures`, {
+        return await post(`/api/course/${courseId}/deleteLectures`, {
             streamIDs: lectureIds,
         });
     },
diff --git a/web/ts/utilities/fetch-wrappers.ts b/web/ts/utilities/fetch-wrappers.ts
index 797912d56..ed4bf4f0c 100644
--- a/web/ts/utilities/fetch-wrappers.ts
+++ b/web/ts/utilities/fetch-wrappers.ts
@@ -42,6 +42,44 @@ export async function post(url: string, body: object = {}) {
     });
 }
 
+export interface PostFormDataListener {
+    onProgress?: (progress: number) => void;
+}
+
+/**
+ * Wrapper for XMLHttpRequest to send form data via POST
+ * @param  {string} url URL to send to
+ * @param  {FormData} body form-data
+ * @param  {PostFormDataListener} listener attached progress listeners
+ * @return {Promise<XMLHttpRequest>}
+ */
+export function postFormData(
+    url: string,
+    body: FormData,
+    listener: PostFormDataListener = {},
+): Promise<XMLHttpRequest> {
+    const xhr = new XMLHttpRequest();
+    return new Promise((resolve, reject) => {
+        xhr.onloadend = () => {
+            if (xhr.status === 200) {
+                resolve(xhr);
+            } else {
+                reject(xhr);
+            }
+        };
+        xhr.upload.onprogress = (e: ProgressEvent) => {
+            if (!e.lengthComputable) {
+                return;
+            }
+            if (listener.onProgress) {
+                listener.onProgress(Math.floor(100 * (e.loaded / e.total)));
+            }
+        };
+        xhr.open("POST", url);
+        xhr.send(body);
+    });
+}
+
 /**
  * Wrapper for Javascript's fetch function for PUT
  * @param  {string} url URL to fetch
@@ -63,6 +101,27 @@ export async function put(url = "", body: object = {}) {
     });
 }
 
+/**
+ * Wrapper for Javascript's fetch function for PATCH
+ * @param  {string} url URL to fetch
+ * @param  {object} body Data object to put
+ * @return {Promise<Response>}
+ */
+export async function patch(url = "", body = {}) {
+    return await fetch(url, {
+        method: "PATCH",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+    }).then((res) => {
+        if (!res.ok) {
+            throw Error(res.statusText);
+        }
+        return res;
+    });
+}
+
 /**
  * Wrapper for Javascript's fetch function for DELETE
  * @param  {string} url URL to fetch
@@ -71,3 +130,15 @@ export async function put(url = "", body: object = {}) {
 export async function del(url: string) {
     return await fetch(url, { method: "DELETE" });
 }
+
+/**
+ * Wrapper for XMLHttpRequest to upload a file
+ * @param url URL to upload to
+ * @param file File to be uploaded
+ * @param listener Upload progress listeners
+ */
+export function uploadFile(url: string, file: File, listener: PostFormDataListener = {}): Promise<XMLHttpRequest> {
+    const vodUploadFormData = new FormData();
+    vodUploadFormData.append("file", file);
+    return postFormData(url, vodUploadFormData, listener);
+}

From 394218e63b83b9b2080c2356a33108a6e31039df Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Mon, 11 Sep 2023 11:34:36 +0200
Subject: [PATCH 38/77] add video sections to admin streams

---
 dao/courses.go  |  3 ++-
 model/stream.go | 13 +++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/dao/courses.go b/dao/courses.go
index 23978d086..18294dfea 100644
--- a/dao/courses.go
+++ b/dao/courses.go
@@ -201,6 +201,7 @@ func (d coursesDao) GetCourseByToken(token string) (course model.Course, err err
 func (d coursesDao) GetCourseById(ctx context.Context, id uint) (course model.Course, err error) {
 	var foundCourse model.Course
 	dbErr := DB.Preload("Streams.TranscodingProgresses").
+		Preload("Streams.VideoSections").
 		Preload("Streams.Files").
 		Preload("Streams", func(db *gorm.DB) *gorm.DB {
 			return db.Order("streams.start desc")
@@ -218,7 +219,7 @@ func (d coursesDao) GetCourseBySlugYearAndTerm(ctx context.Context, slug string,
 		return cachedCourses.(model.Course), nil
 	}
 	var course model.Course
-	err := DB.Preload("Streams.Units", func(db *gorm.DB) *gorm.DB {
+	err := DB.Preload("Streams.VideoSections").Preload("Streams.Units", func(db *gorm.DB) *gorm.DB {
 		return db.Order("unit_start desc")
 	}).Preload("Streams", func(db *gorm.DB) *gorm.DB {
 		return db.Order("start desc")
diff --git a/model/stream.go b/model/stream.go
index 6fac079af..35de2d675 100755
--- a/model/stream.go
+++ b/model/stream.go
@@ -323,6 +323,18 @@ func (s Stream) getJson(lhs []LectureHall, course Course) gin.H {
 		}
 	}
 
+	var videoSections []gin.H
+	for _, section := range s.VideoSections {
+		videoSections = append(videoSections, gin.H{
+			"id":           section.ID,
+			"description":  section.Description,
+			"startHours":   section.StartHours,
+			"startMinutes": section.StartMinutes,
+			"startSeconds": section.StartSeconds,
+			"fileID":       section.FileID,
+		})
+	}
+
 	return gin.H{
 		"lectureId":             s.Model.ID,
 		"courseId":              s.CourseID,
@@ -346,6 +358,7 @@ func (s Stream) getJson(lhs []LectureHall, course Course) gin.H {
 		"courseSlug":            course.Slug,
 		"private":               s.Private,
 		"downloadableVods":      s.GetVodFiles(),
+		"videoSections":         videoSections,
 	}
 }
 

From 61b36b55656e0266cd217f3752dc44434ebd4e5b Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Mon, 11 Sep 2023 15:46:54 +0200
Subject: [PATCH 39/77] main functionality

---
 .../course/manage/edit-video-sections.gohtml  | 201 ++++++++----------
 web/ts/api/admin-lecture-list.ts              |  62 ++++++
 web/ts/change-set.ts                          |  30 ++-
 web/ts/data-store/admin-lecture-list.ts       |   2 +
 web/ts/edit-course.ts                         |  43 +++-
 web/ts/entry/admins.ts                        |   1 +
 6 files changed, 219 insertions(+), 120 deletions(-)

diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index 71f1edf2f..d02b9f59b 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -1,7 +1,5 @@
 {{define "editvideosections"}}
-    <article x-data="{ videoSectionController: new admin.VideoSectionsAdminController(lecture.lectureId) }"
-            x-init="() => videoSectionController.init(`edit-video-sections-${lecture.lectureId}`, $el)"
-            class="grid gap-y-3">
+    <article 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>
@@ -29,147 +27,122 @@
                     </div>
                 </div>
             </div>
-            <div x-show="videoSectionController.unsavedChanges"
-                 class="flex items-center text-xs text-3 px-2 border border-amber-200 bg-amber-200/50 rounded-full">
-                <i class="fa fa-triangle-exclamation mr-1"></i>
-                <span class="font-light">Unsaved Changes</span>
-            </div>
         </header>
-        <form id = "new-section-form" @submit.prevent="videoSectionController.publishNewSections()">
+        <form
+                id="new-section-form"
+                x-data="{
+                    isValid: false,
+                    newSection: new admin.ChangeSet({ startHours: 0, startMinutes: 0, startSeconds: 0, description: '' })
+                }"
+                x-init="newSection.listen((s) => { isValid = isValidVideoSection(s); })"
+                @submit.prevent="addSection(newSection.changeState); newSection.reset();"
+        >
             <div class="flex align-middle">
                 <input id="startHours"
-                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
-                       x-model.number="videoSectionController.current.startHours"
+                       name="startHours"
+                       x-bind-change-set.int="newSection"
                        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"
+                       name="startMinutes"
+                       x-bind-change-set.int="newSection"
                        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"
+                       name="startSeconds"
+                       x-bind-change-set.int="newSection"
                        type="number" min="0" max="59" step="1"
                        placeholder="0"
                        class="w-20 rounded px-4 py-3 tl-input">
-                <input x-model="videoSectionController.current.description"
+                <input name="description"
+                       x-bind-change-set="newSection"
                        type="text" value=""
                        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 dark:bg-gray-600"
-                        @click="videoSectionController.pushNewSection()"
-                        :disabled="!videoSectionController.currentIsValid()">
+                        @click="addSection(newSection.changeState); newSection.reset();"
+                        :disabled="!isValid">
                     <i class="fa fa-plus text-3"></i>
                 </button>
             </div>
-            <template x-if="videoSectionController.newSections.length > 0">
-                <section>
-                    <article class="grid gap-2 pt-2">
-                        <template x-for="section in videoSectionController.newSections">
-                            <div class="flex justify-between w-full border dark:border-gray-600 rounded">
-                                <div class="my-auto p-1">
+        </form>
+        <template x-if="lectureData.videoSections.length > 0">
+            <div class="">
+                <div class="grid gap-2">
+                    <template x-for="section in lectureData.videoSections" :key="section.id">
+                        <div x-data="{ sectionChangeSet: new admin.ChangeSet(section), editMode: false }" class="flex align-middle items-stretch w-full border dark:border-gray-600 rounded">
+                            <template x-if="!editMode">
+                                <div class="p-1">
                                     <span class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
                                           x-text="section.friendlyTimestamp"></span>
                                     <span class="text-xs font-semibold text-3"
                                           x-text="section.description"></span>
                                 </div>
-                                <div class="my-auto ml-auto border-l dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600">
-                                    <button class="py-1 px-3"
-                                            @click="videoSectionController.removeNewSection(section)">
-                                        <i class="fa fa-trash text-xs"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </template>
-                    </article>
-                    <div class="flex items-center justify-center grow py-2">
-                        <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="videoSectionController.existingSections.length > 0">
-            <div class="">
-                <div class="grid gap-2">
-                    <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">
-                                <template x-if="!updater.show">
-                                    <div class="p-1">
-                                        <span class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
-                                              x-text="section.friendlyTimestamp"></span>
-                                        <span class="text-xs font-semibold text-3"
-                                              x-text="section.description"></span>
-                                    </div>
-                                </template>
-                                <template x-if="updater.show">
-                                    <form @submit.prevent="updater.update();"
-                                          @reset.prevent="updater.reset();"
-                                          class="flex flex-grow items-center p-2">
-                                        <div class="text-sm mr-2">
-                                            <label for="video-section-timestamp"
-                                                   class="block text-5">Timestamp</label>
-                                            <div class="flex mt-3">
-                                                <input id="startHours"
-                                                       x-model.number="updater.request.StartHours"
-                                                       type="number" min="0" max="23" step="1"
-                                                       placeholder="0"
-                                                       class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
-                                                <span class="px-2 my-auto font-semibold text-5">:</span>
-                                                <input id="startMinutes"
-                                                       x-model.number="updater.request.StartMinutes"
-                                                       type="number" min="0" max="59" step="1"
-                                                       placeholder="0"
-                                                       class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
-                                                <span class="px-2 my-auto font-semibold text-5">:</span>
-                                                <input id="startSeconds"
-                                                       x-model.number="updater.request.StartSeconds"
-                                                       type="number" min="0" max="59" step="1"
-                                                       placeholder="0"
-                                                       class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
-                                            </div>
-                                        </div>
-                                        <div class="text-sm flex-grow">
-                                            <label for="video-section-description"
-                                                   class="block text-5">Description</label>
-                                            <input x-model="updater.request.Description"
-                                                   id="video-section-description" type="text"
-                                                   name="video-section-description" autofocus="" required
-                                                   class="rounded px-4 py-3 mt-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600"/>
+                            </template>
+                            <template x-if="editMode">
+                                <form @submit.prevent="sectionChangeSet.commit();"
+                                      @reset.prevent="sectionChangeSet.reset();"
+                                      class="flex flex-grow items-center p-2">
+                                    <div class="text-sm mr-2">
+                                        <label for="video-section-timestamp"
+                                               class="block text-5">Timestamp</label>
+                                        <div class="flex mt-3">
+                                            <input id="startHours"
+                                                   x-bind-changeset="sectionChangeSet"
+                                                   name="startHours"
+                                                   type="number" min="0" max="23" step="1"
+                                                   placeholder="0"
+                                                   class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
+                                            <span class="px-2 my-auto font-semibold text-5">:</span>
+                                            <input id="startMinutes"
+                                                   x-bind-changeset="sectionChangeSet"
+                                                   name="startMinutes"
+                                                   type="number" min="0" max="59" step="1"
+                                                   placeholder="0"
+                                                   class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
+                                            <span class="px-2 my-auto font-semibold text-5">:</span>
+                                            <input id="startSeconds"
+                                                   x-bind-changeset="sectionChangeSet"
+                                                   name="dtartSeconds"
+                                                   type="number" min="0" max="59" step="1"
+                                                   placeholder="0"
+                                                   class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
                                         </div>
-                                        <button type="submit"
-                                                title="Update"
-                                                class="h-full w-fit ml-2 bg-blue-500 text-center px-3 py-1 rounded w-full dark:bg-indigo-600">
-                                            <i class="fa fa-square-check text-white"></i>
-                                        </button>
-                                        <button type="reset"
-                                                title="Undo changes"
-                                                class="h-full w-fit ml-2 bg-gray-100 text-center px-3 rounded w-full dark:bg-secondary-lighter">
-                                            <i class="fa fa-undo text-3"></i>
-                                        </button>
-                                    </form>
-                                </template>
-                                <button class="text-5 py-1 px-3 ml-auto border-l dark:border-gray-600 text-3 hover:bg-gray-200 dark:hover:bg-gray-600"
-                                        @click="updater.show = !updater.show">
-                                    <i class="fa fa-edit"></i>
-                                </button>
-                                <button class="text-5 py-1 px-3 border-l rounded-r dark:border-gray-600 text-3 text-xs hover:bg-gray-200 dark:hover:bg-gray-600"
-                                        @click="videoSectionController.removeExistingSection(section.ID)">
-                                    <i class="fa fa-trash"></i>
-                                </button>
-                            </div>
-                        </template>
+                                    </div>
+                                    <div class="text-sm flex-grow">
+                                        <label for="video-section-description"
+                                               class="block text-5">Description</label>
+                                        <input x-bind-changeset="sectionChangeSet"
+                                               name="description"
+                                               id="video-section-description" type="text"
+                                               autofocus="" required
+                                               class="rounded px-4 py-3 mt-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600"/>
+                                    </div>
+                                    <button type="submit"
+                                            title="Update"
+                                            class="h-full w-fit ml-2 bg-blue-500 text-center px-3 py-1 rounded w-full dark:bg-indigo-600">
+                                        <i class="fa fa-square-check text-white"></i>
+                                    </button>
+                                    <button type="reset"
+                                            title="Undo changes"
+                                            class="h-full w-fit ml-2 bg-gray-100 text-center px-3 rounded w-full dark:bg-secondary-lighter">
+                                        <i class="fa fa-undo text-3"></i>
+                                    </button>
+                                </form>
+                            </template>
+                            <button class="text-5 py-1 px-3 ml-auto border-l dark:border-gray-600 text-3 hover:bg-gray-200 dark:hover:bg-gray-600" @click="editMode = true">
+                                <i class="fa fa-edit"></i>
+                            </button>
+                            <button class="text-5 py-1 px-3 border-l rounded-r dark:border-gray-600 text-3 text-xs hover:bg-gray-200 dark:hover:bg-gray-600"
+                                    @click="deleteSection(section.id)">
+                                <i class="fa fa-trash"></i>
+                            </button>
+                        </div>
                     </template>
                 </div>
             </div>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 68b744e04..46649c2fd 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -80,6 +80,26 @@ export const LectureVideoTypes = [
     LectureVideoTypeCam,
 ] as LectureVideoType[];
 
+export type VideoSection = {
+    id?: number;
+    description: string;
+
+    startHours: number;
+    startMinutes: number;
+    startSeconds: number;
+
+    streamID?: number;
+    fileID?: number;
+};
+
+export function videoSectionTimestamp(a: VideoSection) : number {
+    return a.startHours * 3600 + a.startMinutes * 60 + a.startSeconds;
+}
+
+export function videoSectionSort(a: VideoSection, b: VideoSection) : number {
+    return videoSectionTimestamp(a) - videoSectionTimestamp(b);
+}
+
 export interface Lecture {
     color: string;
     courseId: number;
@@ -103,6 +123,7 @@ export interface Lecture {
     start: string;
     streamKey: string;
     transcodingProgresses: TranscodingProgress[];
+    videoSections: VideoSection[];
 
     // Clientside computed fields
     hasAttachments: boolean;
@@ -204,6 +225,47 @@ export const AdminLectureList = {
         await post(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
     },
 
+    /**
+     * Add sections to a lecture
+     * @param lectureId
+     * @param sections
+     */
+    addSections: async (lectureId: number, sections: VideoSection[]): Promise<void> => {
+        const res = await postData(`/api/stream/${lectureId}/sections`, sections);
+        if (res.status !== StatusCodes.OK) {
+            throw Error(res.body.toString());
+        }
+    },
+
+    /**
+     * Updates a section
+     * @param lectureId
+     * @param section
+     */
+    updateSection: async (lectureId: number, section: VideoSection): Promise<void> => {
+        const res = await putData(`/api/stream/${lectureId}/sections/${section.id}`, {
+            Description: section.description,
+            StartHours: section.startHours,
+            StartMinutes: section.startMinutes,
+            StartSeconds: section.startSeconds,
+        });
+        if (res.status !== StatusCodes.OK) {
+            throw Error(res.body.toString());
+        }
+    },
+
+    /**
+     * Remove a section from a lecture
+     * @param lectureId
+     * @param sectionId
+     */
+    removeSection: async (lectureId: number, sectionId: number): Promise<void> => {
+        const res = await Delete(`/api/stream/${lectureId}/sections/${sectionId}`);
+        if (res.status !== StatusCodes.OK) {
+            throw Error(res.body.toString());
+        }
+    },
+
     /**
      * Updates the private state of a lecture.
      * @param lectureId
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index ff590d7fe..9c56f5a82 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -55,7 +55,7 @@ export interface DirtyState {
 export class ChangeSet<T> {
     private state: T;
     private changeState: T;
-    private readonly comparator?: LectureComparator<T>;
+    private readonly comparator?: PropertyComparator<T>;
     private onUpdate: ((changeState: T, dirtyState: DirtyState) => void)[];
 
     constructor(
@@ -211,9 +211,10 @@ export class ChangeSet<T> {
     }
 }
 
-export type LectureComparator<T> = (key: string, a: T, b: T) => boolean | null;
+export type PropertyComparator<T> = (key: string, a: T, b: T) => boolean | null;
+export type SinglePropertyComparator<T> = (a: T, b: T) => boolean | null;
 
-export function ignoreKeys<T>(list: string[]): LectureComparator<T> {
+export function ignoreKeys<T>(list: string[]): PropertyComparator<T> {
     return (key: string, a, b) => {
         if (list.includes(key)) {
             return false;
@@ -221,3 +222,26 @@ export function ignoreKeys<T>(list: string[]): LectureComparator<T> {
         return null;
     };
 }
+
+export function singleProperty<T>(key: string, comparator: SinglePropertyComparator<T>): PropertyComparator<T> {
+    return (_key: string, a, b) => {
+        if (_key !== key) {
+            return null;
+        }
+        return comparator(a, b);
+    };
+}
+
+export function comparatorPipeline<T>(list: PropertyComparator<T>[]): PropertyComparator<T> {
+    return (key: string, a, b) => {
+        for (const comparator of list) {
+            const res = comparator(key, a, b);
+            if (res === true) {
+                return true;
+            } else if (res === false) {
+                return false;
+            }
+        }
+        return null;
+    };
+}
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 582c33a0a..4712a24ca 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -27,6 +27,8 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         return result.map((s) => {
             s.hasAttachments = (s.files || []).some((f) => f.fileType === FileType.attachment);
 
+            s.videoSections = s.videoSections ?? [];
+
             s.startDate = new Date(s.start);
             s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
             s.startTimeFormatted = s.startDate.toLocaleTimeString("en-US", timeFormatOptions);
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 36b1014a1..ec9ab31ad 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -8,9 +8,9 @@ import {
     LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    LectureVideoTypes,
+    LectureVideoTypes, VideoSection, videoSectionSort,
 } from "./api/admin-lecture-list";
-import { ChangeSet, ignoreKeys } from "./change-set";
+import {ChangeSet, comparatorPipeline, ignoreKeys, singleProperty} from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 
 export enum UIEditMode {
@@ -114,8 +114,20 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          * AlpineJS init function which is called automatically in addition to 'x-init'
          */
         init() {
+            const customComparator = comparatorPipeline([
+                ignoreKeys(["files"]),
+                singleProperty("videoSections", (a: Lecture, b: Lecture): boolean|null => {
+                    if (a.videoSections.length !== b.videoSections.length) {
+                        return true;
+                    }
+                    if (a.videoSections.some(({ id }) => !b.videoSections.some(({id: bId}) => id === bId))) {
+                        return true;
+                    }
+                }),
+            ]);
+
             // This tracks changes that are not saved yet
-            this.changeSet = new ChangeSet<Lecture>(lecture, ignoreKeys(["files"]), (data, dirtyState) => {
+            this.changeSet = new ChangeSet<Lecture>(lecture, customComparator, (data, dirtyState) => {
                 this.lectureData = data;
                 this.isDirty = dirtyState.isDirty;
             });
@@ -191,6 +203,31 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             DataStore.adminLectureList.deleteAttachment(this.lectureData.courseId, this.lectureData.lectureId, id);
         },
 
+        addSection(section: VideoSection) {
+            this.changeSet.patch("videoSections", [
+                ...this.lectureData.videoSections,
+                section,
+            ].sort(videoSectionSort));
+        },
+
+        deleteSection(id: number) {
+            this.changeSet.patch("videoSections", this.lectureData.videoSections.filter(
+                (s) => s.id !== id,
+            ));
+        },
+
+        isValidVideoSection(section: VideoSection): boolean {
+            return (
+                section.description !== "" &&
+                section.startHours !== null &&
+                section.startHours < 32 &&
+                section.startMinutes !== null &&
+                section.startMinutes < 60 &&
+                section.startSeconds !== null &&
+                section.startSeconds < 60
+            );
+        },
+
         /**
          * Opens the series lecture editor UI
          */
diff --git a/web/ts/entry/admins.ts b/web/ts/entry/admins.ts
index e4374f0e0..ae5dbcc20 100644
--- a/web/ts/entry/admins.ts
+++ b/web/ts/entry/admins.ts
@@ -13,4 +13,5 @@ export * from "../courseAdminManagement";
 export * from "../notification-management";
 export * from "../audits";
 export * from "../maintenance";
+export * from "../change-set"
 export { VideoSectionsAdminController, VideoSectionUpdater } from "../video-sections";

From f78c5488d70a454dcfa8e7ff85ba16e04293ed60 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 14 Sep 2023 14:54:38 +0200
Subject: [PATCH 40/77] using fetch wrtappers

---
 web/ts/api/admin-lecture-list.ts | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 46649c2fd..4bbfb169a 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -231,10 +231,7 @@ export const AdminLectureList = {
      * @param sections
      */
     addSections: async (lectureId: number, sections: VideoSection[]): Promise<void> => {
-        const res = await postData(`/api/stream/${lectureId}/sections`, sections);
-        if (res.status !== StatusCodes.OK) {
-            throw Error(res.body.toString());
-        }
+        await post(`/api/stream/${lectureId}/sections`, sections);
     },
 
     /**
@@ -243,7 +240,7 @@ export const AdminLectureList = {
      * @param section
      */
     updateSection: async (lectureId: number, section: VideoSection): Promise<void> => {
-        const res = await putData(`/api/stream/${lectureId}/sections/${section.id}`, {
+        const res = await put(`/api/stream/${lectureId}/sections/${section.id}`, {
             Description: section.description,
             StartHours: section.startHours,
             StartMinutes: section.startMinutes,
@@ -260,10 +257,7 @@ export const AdminLectureList = {
      * @param sectionId
      */
     removeSection: async (lectureId: number, sectionId: number): Promise<void> => {
-        const res = await Delete(`/api/stream/${lectureId}/sections/${sectionId}`);
-        if (res.status !== StatusCodes.OK) {
-            throw Error(res.body.toString());
-        }
+        await del(`/api/stream/${lectureId}/sections/${sectionId}`);
     },
 
     /**

From 74cd080b25fa91a57b78c390057d103c581ab90d Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 14 Sep 2023 15:00:15 +0200
Subject: [PATCH 41/77] moved uploadFile and postFormData

---
 web/ts/global.ts | 33 ---------------------------------
 1 file changed, 33 deletions(-)

diff --git a/web/ts/global.ts b/web/ts/global.ts
index a0069080a..5fe96316d 100644
--- a/web/ts/global.ts
+++ b/web/ts/global.ts
@@ -45,39 +45,6 @@ export async function Delete(url = "") {
     });
 }
 
-export interface UploadFileListener {
-    onProgress?: (progress: number) => void;
-}
-
-export function uploadFile(url: string, file: File, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
-    const vodUploadFormData = new FormData();
-    vodUploadFormData.append("file", file);
-    return postFormData(url, vodUploadFormData, listener);
-}
-
-export function postFormData(url: string, data: FormData, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
-    const xhr = new XMLHttpRequest();
-    return new Promise((resolve, reject) => {
-        xhr.onloadend = () => {
-            if (xhr.status === 200) {
-                resolve(xhr);
-            } else {
-                reject(xhr);
-            }
-        };
-        xhr.upload.onprogress = (e: ProgressEvent) => {
-            if (!e.lengthComputable) {
-                return;
-            }
-            if (listener.onProgress) {
-                listener.onProgress(Math.floor(100 * (e.loaded / e.total)));
-            }
-        };
-        xhr.open("POST", url);
-        xhr.send(data);
-    });
-}
-
 export function sendFormData(url, formData: FormData) {
     const HttpReq = new XMLHttpRequest();
     HttpReq.open("POST", url, false);

From a6cf16ee7fe4aeb7958e033685c503025162294a Mon Sep 17 00:00:00 2001
From: Joscha Henningsen <44805696+joschahenningsen@users.noreply.github.com>
Date: Wed, 13 Sep 2023 11:08:57 +0200
Subject: [PATCH 42/77] version workers with tag (#1157)

---
 .github/workflows/deploy-workers.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/deploy-workers.yml b/.github/workflows/deploy-workers.yml
index 378b1970b..444c17cb8 100644
--- a/.github/workflows/deploy-workers.yml
+++ b/.github/workflows/deploy-workers.yml
@@ -29,9 +29,14 @@ jobs:
         with:
           images: ghcr.io/tum-dev/gocast/${{ env.containername }}
           tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
             type=sha
           flavor: |
             latest=true
+            prefix=
+            suffix=
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
       - name: Login to DockerHub

From f1ad4a0d21815aaa1423a6110759bb0ddaabae87 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 14 Sep 2023 15:02:16 +0200
Subject: [PATCH 43/77] fix linteer

---
 web/ts/api/admin-lecture-list.ts |  4 ++--
 web/ts/edit-course.ts            | 22 +++++++++++-----------
 web/ts/entry/admins.ts           |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 4bbfb169a..9ef78740d 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -92,11 +92,11 @@ export type VideoSection = {
     fileID?: number;
 };
 
-export function videoSectionTimestamp(a: VideoSection) : number {
+export function videoSectionTimestamp(a: VideoSection): number {
     return a.startHours * 3600 + a.startMinutes * 60 + a.startSeconds;
 }
 
-export function videoSectionSort(a: VideoSection, b: VideoSection) : number {
+export function videoSectionSort(a: VideoSection, b: VideoSection): number {
     return videoSectionTimestamp(a) - videoSectionTimestamp(b);
 }
 
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index ec9ab31ad..e71b44053 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -8,9 +8,11 @@ import {
     LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    LectureVideoTypes, VideoSection, videoSectionSort,
+    LectureVideoTypes,
+    VideoSection,
+    videoSectionSort,
 } from "./api/admin-lecture-list";
-import {ChangeSet, comparatorPipeline, ignoreKeys, singleProperty} from "./change-set";
+import { ChangeSet, comparatorPipeline, ignoreKeys, singleProperty } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 
 export enum UIEditMode {
@@ -116,11 +118,11 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         init() {
             const customComparator = comparatorPipeline([
                 ignoreKeys(["files"]),
-                singleProperty("videoSections", (a: Lecture, b: Lecture): boolean|null => {
+                singleProperty("videoSections", (a: Lecture, b: Lecture): boolean | null => {
                     if (a.videoSections.length !== b.videoSections.length) {
                         return true;
                     }
-                    if (a.videoSections.some(({ id }) => !b.videoSections.some(({id: bId}) => id === bId))) {
+                    if (a.videoSections.some(({ id }) => !b.videoSections.some(({ id: bId }) => id === bId))) {
                         return true;
                     }
                 }),
@@ -204,16 +206,14 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         addSection(section: VideoSection) {
-            this.changeSet.patch("videoSections", [
-                ...this.lectureData.videoSections,
-                section,
-            ].sort(videoSectionSort));
+            this.changeSet.patch("videoSections", [...this.lectureData.videoSections, section].sort(videoSectionSort));
         },
 
         deleteSection(id: number) {
-            this.changeSet.patch("videoSections", this.lectureData.videoSections.filter(
-                (s) => s.id !== id,
-            ));
+            this.changeSet.patch(
+                "videoSections",
+                this.lectureData.videoSections.filter((s) => s.id !== id),
+            );
         },
 
         isValidVideoSection(section: VideoSection): boolean {
diff --git a/web/ts/entry/admins.ts b/web/ts/entry/admins.ts
index ae5dbcc20..58e9df699 100644
--- a/web/ts/entry/admins.ts
+++ b/web/ts/entry/admins.ts
@@ -13,5 +13,5 @@ export * from "../courseAdminManagement";
 export * from "../notification-management";
 export * from "../audits";
 export * from "../maintenance";
-export * from "../change-set"
+export * from "../change-set";
 export { VideoSectionsAdminController, VideoSectionUpdater } from "../video-sections";

From 859555c096689d03560779fc857629365da4e378 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 14 Sep 2023 17:56:37 +0200
Subject: [PATCH 44/77] fix delete lecture

---
 web/ts/api/admin-lecture-list.ts        | 11 ++++++++++-
 web/ts/data-store/admin-lecture-list.ts | 11 +++++++++++
 web/ts/edit-course.ts                   |  8 ++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 68b744e04..c7f2d6ac9 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -292,7 +292,16 @@ export const AdminLectureList = {
      */
     delete: async function (courseId: number, lectureIds: number[]): Promise<Response> {
         return await post(`/api/course/${courseId}/deleteLectures`, {
-            streamIDs: lectureIds,
+            streamIDs: lectureIds.map((id) => `${id}`),
         });
     },
+
+    /**
+     * Delete lecture series of a lecture
+     * @param courseId
+     * @param lectureId
+     */
+    deleteSeries: async function (courseId: number, lectureId: number): Promise<Response> {
+        return await del(`/api/course/${courseId}/deleteLectureSeries/${lectureId}`);
+    },
 };
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 582c33a0a..077a71984 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -69,6 +69,17 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
+    async deleteSeries(courseId: number, lectureId: number) {
+        await AdminLectureList.deleteSeries(courseId, lectureId);
+
+        const lectures = await this.getData(courseId);
+        const seriesIdentifier = lectures.find((l) => l.lectureId === lectureId)?.seriesIdentifier ?? null;
+        const lectureIds = lectures.filter((l) => l.seriesIdentifier === seriesIdentifier).map((l) => l.lectureId);
+
+        this.data[courseId] = lectures.filter((s) => !lectureIds.includes(s.lectureId));
+        await this.triggerUpdate(courseId);
+    }
+
     async updateMeta(courseId: number, lectureId: number, props: UpdateMetaProps) {
         const updateSeries = props?.options?.saveSeries === true;
         const seriesIdentifier =
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 36b1014a1..bb53157a2 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -191,6 +191,14 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             DataStore.adminLectureList.deleteAttachment(this.lectureData.courseId, this.lectureData.lectureId, id);
         },
 
+        deleteLecture() {
+            DataStore.adminLectureList.delete(this.lectureData.courseId, [this.lectureData.lectureId]);
+        },
+
+        deleteLectureSeries() {
+            DataStore.adminLectureList.deleteSeries(this.lectureData.courseId, this.lectureData.lectureId);
+        },
+
         /**
          * Opens the series lecture editor UI
          */

From d375cf72cb47ead798b039579519893d448ba07f Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 14 Sep 2023 17:58:06 +0200
Subject: [PATCH 45/77] reenable page reload on create

---
 web/ts/edit-course.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index bb53157a2..039559e60 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -855,10 +855,10 @@ export function createLectureForm(args: { s: [] }) {
                 postData("/api/course/" + this.courseID + "/createLecture", payload)
                     .then(async (res) => {
                         const { ids } = await res.json();
-                        /*const url = new URL(window.location.href);
+                        const url = new URL(window.location.href);
                         url.hash = `lectures:${ids.join(",")}`;
                         window.location.assign(url);
-                        window.location.reload();*/
+                        window.location.reload();
                     })
                     .catch((e) => {
                         console.log(e);

From 1b1b1ab9ca79bb5f1dc683bbf6fc3caac2bdbd53 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 12:12:27 +0200
Subject: [PATCH 46/77] some linter fixes

---
 web/ts/edit-course.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index bc1d9f717..d42b5e716 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -1,4 +1,4 @@
-import { Delete, patchData, postData, putData, sendFormData, showMessage, uploadFile } from "./global";
+import { patchData, postData, putData, sendFormData } from "./global";
 import { StatusCodes } from "http-status-codes";
 import { DataStore } from "./data-store/data-store";
 import {
@@ -8,7 +8,6 @@ import {
     LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    LectureVideoTypes,
     VideoSection,
     videoSectionSort,
 } from "./api/admin-lecture-list";
@@ -227,7 +226,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 section.startSeconds < 60
             );
         },
-        
+
         deleteLecture() {
             DataStore.adminLectureList.delete(this.lectureData.courseId, [this.lectureData.lectureId]);
         },

From b996d077ed1e791fbea7136efbeb129c7fbdd788 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 12:21:20 +0200
Subject: [PATCH 47/77] fix merge complications

---
 web/ts/data-store/admin-lecture-list.ts | 4 ++--
 web/ts/edit-course.ts                   | 1 +
 web/ts/utilities/fetch-wrappers.ts      | 2 --
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index ffbb539c5..00af81658 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -1,7 +1,7 @@
 import { StreamableMapProvider } from "./provider";
 import { AdminLectureList, Lecture, LectureFile, UpdateLectureMetaRequest } from "../api/admin-lecture-list";
 import { FileType } from "../edit-course";
-import { UploadFileListener } from "../global";
+import {PostFormDataListener} from "../utilities/fetch-wrappers";
 
 const dateFormatOptions: Intl.DateTimeFormatOptions = {
     weekday: "long",
@@ -174,7 +174,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         lectureId: number,
         videoType: string,
         file: File,
-        listener: UploadFileListener = {},
+        listener: PostFormDataListener = {},
     ) {
         await AdminLectureList.uploadVideo(courseId, lectureId, videoType, file, listener);
     }
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index d42b5e716..b4a8573b2 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -13,6 +13,7 @@ import {
 } from "./api/admin-lecture-list";
 import { ChangeSet, comparatorPipeline, ignoreKeys, singleProperty } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
+import {uploadFile} from "./utilities/fetch-wrappers";
 
 export enum UIEditMode {
     none,
diff --git a/web/ts/utilities/fetch-wrappers.ts b/web/ts/utilities/fetch-wrappers.ts
index 0c780409e..ed4bf4f0c 100644
--- a/web/ts/utilities/fetch-wrappers.ts
+++ b/web/ts/utilities/fetch-wrappers.ts
@@ -1,5 +1,3 @@
-import { postFormData } from "../global";
-
 /**
  * Wrapper for Javascript's fetch function for GET
  * @param  {string} url URL to fetch

From 7bb8870ab327d2d0e08edfdcc235949543179f43 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 15:14:06 +0200
Subject: [PATCH 48/77] fix changeset; adding onchange listener

---
 web/assets/init-admin.js                      |  5 ++++-
 .../course/manage/edit-video-sections.gohtml  |  4 ++--
 web/ts/api/admin-lecture-list.ts              |  4 ++++
 web/ts/data-store/admin-lecture-list.ts       |  8 +++++++-
 web/ts/edit-course.ts                         | 20 ++++++++++++++++---
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 172d2513d..0aa850d33 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -122,6 +122,7 @@ document.addEventListener("alpine:init", () => {
             })
         } else  if (el.tagName === "textarea" || textInputTypes.includes(el.type)) {
             const keyupHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
+            const changeHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
 
             const onChangeSetUpdateHandler = (data) => {
                 el.value = `${data[fieldName]}`;
@@ -129,12 +130,14 @@ document.addEventListener("alpine:init", () => {
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
-            el.addEventListener('keyup', keyupHandler)
+            el.addEventListener('keyup', keyupHandler);
+            el.addEventListener('change', changeHandler);
             el.value = `${changeSet.get()[fieldName]}`;
 
             cleanup(() => {
                 changeSet.removeListener(onChangeSetUpdateHandler);
                 el.removeEventListener('keyup', keyupHandler)
+                el.removeEventListener('change', changeHandler)
             })
         } else {
             const changeHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index d02b9f59b..2c7533536 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -74,12 +74,12 @@
         <template x-if="lectureData.videoSections.length > 0">
             <div class="">
                 <div class="grid gap-2">
-                    <template x-for="section in lectureData.videoSections" :key="section.id">
+                    <template x-for="section in lectureData.videoSections" :key="sectionKey(section)">
                         <div x-data="{ sectionChangeSet: new admin.ChangeSet(section), editMode: false }" class="flex align-middle items-stretch w-full border dark:border-gray-600 rounded">
                             <template x-if="!editMode">
                                 <div class="p-1">
                                     <span class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
-                                          x-text="section.friendlyTimestamp"></span>
+                                          x-text="friendlySectionTimestamp(section)"></span>
                                     <span class="text-xs font-semibold text-3"
                                           x-text="section.description"></span>
                                 </div>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 1fa9465df..ffbb2c848 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -92,6 +92,10 @@ export type VideoSection = {
     fileID?: number;
 };
 
+export function videoSectionFriendlyTimestamp(a: VideoSection): string {
+    return `${a.startHours.toString().padStart(2, "0")}:${a.startMinutes.toString().padStart(2, "0")}:${a.startSeconds.toString().padStart(2, "0")}`;
+}
+
 export function videoSectionTimestamp(a: VideoSection): number {
     return a.startHours * 3600 + a.startMinutes * 60 + a.startSeconds;
 }
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 00af81658..af363d530 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -1,5 +1,11 @@
 import { StreamableMapProvider } from "./provider";
-import { AdminLectureList, Lecture, LectureFile, UpdateLectureMetaRequest } from "../api/admin-lecture-list";
+import {
+    AdminLectureList,
+    Lecture,
+    LectureFile,
+    UpdateLectureMetaRequest,
+    videoSectionFriendlyTimestamp
+} from "../api/admin-lecture-list";
 import { FileType } from "../edit-course";
 import {PostFormDataListener} from "../utilities/fetch-wrappers";
 
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index b4a8573b2..57531cbb1 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -8,8 +8,8 @@ import {
     LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    VideoSection,
-    videoSectionSort,
+    VideoSection, videoSectionFriendlyTimestamp,
+    videoSectionSort, videoSectionTimestamp,
 } from "./api/admin-lecture-list";
 import { ChangeSet, comparatorPipeline, ignoreKeys, singleProperty } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
@@ -205,6 +205,17 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             DataStore.adminLectureList.deleteAttachment(this.lectureData.courseId, this.lectureData.lectureId, id);
         },
 
+        friendlySectionTimestamp(section: VideoSection): string{
+            return videoSectionFriendlyTimestamp(section);
+        },
+
+        sectionKey(section: VideoSection): string {
+            if (section.id != null) {
+                return `sid_${section.id}`;
+            }
+            return `sts_${videoSectionTimestamp(section)}`;
+        },
+
         addSection(section: VideoSection) {
             this.changeSet.patch("videoSections", [...this.lectureData.videoSections, section].sort(videoSectionSort));
         },
@@ -224,7 +235,10 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 section.startMinutes !== null &&
                 section.startMinutes < 60 &&
                 section.startSeconds !== null &&
-                section.startSeconds < 60
+                section.startSeconds < 60 &&
+                !this.lectureData.videoSections.some(
+                    (s) => videoSectionTimestamp(s) == videoSectionTimestamp(section)
+                )
             );
         },
 

From 8c132ec472393cfed0dbaa24de878727e8084a77 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 15:17:39 +0200
Subject: [PATCH 49/77] fixed adding sections

---
 web/template/partial/course/manage/edit-video-sections.gohtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index 2c7533536..719a88100 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -64,7 +64,7 @@
                        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 dark:bg-gray-600"
+                        class="w-fit bg-gray-100 text-center px-3 rounded text-sky-800 bg-sky-200 dark:text-indigo-200 dark:bg-indigo-600 disabled:bg-gray-200 disabled:dark:bg-gray-600"
                         @click="addSection(newSection.changeState); newSection.reset();"
                         :disabled="!isValid">
                     <i class="fa fa-plus text-3"></i>

From 6c57fa0a51f33cfb8c54febbda6470b30360101f Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 16:30:59 +0200
Subject: [PATCH 50/77] added directives

---
 web/assets/init-admin.js                      | 74 ++++++++++++++++++-
 .../course/manage/edit-video-sections.gohtml  | 62 ++++++++--------
 2 files changed, 106 insertions(+), 30 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 0aa850d33..15e80fcfe 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -15,6 +15,8 @@ document.addEventListener("alpine:init", () => {
         'color'
     ];
 
+    const nativeEventName = "csupdate";
+
     const convert = (modifiers, value) => {
         if (modifiers.includes("int")) {
             return parseInt(value);
@@ -79,7 +81,6 @@ document.addEventListener("alpine:init", () => {
     Alpine.directive("bind-change-set", (el, { expression, value, modifiers }, { evaluate, cleanup }) => {
         const changeSet = evaluate(expression);
         const fieldName = value || el.name;
-        const nativeEventName = "csupdate";
 
         if (el.type === "file") {
             const isSingle = modifiers.includes("single")
@@ -157,4 +158,75 @@ document.addEventListener("alpine:init", () => {
             })
         }
     });
+
+    /**
+     * Alpine.js directive for dynamically triggering a custom event and updating an element's inner text
+     * based on changes to a "change set" object's field.
+     *
+     * Syntax:
+     * <div x-change-set-listen.text="changeSetExpression.fieldName"></div>
+     *
+     * Parameters:
+     *  - changeSetExpression: The JavaScript expression evaluating to the change set object
+     *  - fieldName: The specific field within the change set to monitor for changes
+     *
+     * Modifiers:
+     *  - "text": When provided, the directive will also update the element's innerText.
+     *
+     * Custom Events:
+     *  - "csupdate": Custom event triggered when the change set is updated.
+     *    The detail property of the event object contains the new value of the specified field.
+     */
+    Alpine.directive("change-set-listen", (el, { expression, modifiers }, { evaluate, cleanup }) => {
+        const [changeSetExpression, fieldName = null] = expression.split(".");
+        const changeSet = evaluate(changeSetExpression);
+
+        const onChangeSetUpdateHandler = (data) => {
+            const value = fieldName != null ? data[fieldName] : data;
+            if (modifiers.includes("text")) {
+                el.innerText = `${value}`;
+            }
+            el.dispatchEvent(new CustomEvent(nativeEventName, { detail: value }));
+        };
+
+        onChangeSetUpdateHandler(changeSet.get());
+        changeSet.listen(onChangeSetUpdateHandler);
+
+        cleanup(() => {
+            changeSet.removeListener(onChangeSetUpdateHandler);
+        })
+    });
+
+    /**
+    * Alpine.js directive for executing custom logic in response to the "csupdate" event,
+    * which is usually triggered by changes in a "change set" object's field.
+    *
+    * Syntax:
+    * <div x-on-change-set-update="[expression]"></div>
+    *
+    * Parameters:
+    *  - expression: The JavaScript expression to be evaluated when the "csupdate" event is triggered.
+    *
+    * Modifiers:
+    *  - "init": When provided, the directive will also execute the expression during initialization.
+    *
+    * Example usage:
+    * <div x-change-set-listen="sectionEditChangeSet"
+    *      x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())">
+    * </div>
+    */
+    Alpine.directive("on-change-set-update", (el, { expression, modifiers }, { evaluateLater, cleanup }) => {
+        const onUpdate = evaluateLater(expression);
+
+        const onChangeSetUpdateHandler = () => onUpdate();
+        el.addEventListener(nativeEventName, onChangeSetUpdateHandler);
+
+        if (modifiers.includes("init")) {
+            onChangeSetUpdateHandler();
+        }
+
+        cleanup(() => {
+            el.removeEventListener(nativeEventName, onChangeSetUpdateHandler);
+        })
+    })
 });
\ No newline at end of file
diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index 719a88100..f81e0c4b2 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -75,39 +75,48 @@
             <div class="">
                 <div class="grid gap-2">
                     <template x-for="section in lectureData.videoSections" :key="sectionKey(section)">
-                        <div x-data="{ sectionChangeSet: new admin.ChangeSet(section), editMode: false }" class="flex align-middle items-stretch w-full border dark:border-gray-600 rounded">
+                        <div x-data="{ sectionEditChangeSet: new admin.ChangeSet(section), editMode: false }" class="w-full border dark:border-gray-600 rounded">
                             <template x-if="!editMode">
-                                <div class="p-1">
-                                    <span class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
-                                          x-text="friendlySectionTimestamp(section)"></span>
-                                    <span class="text-xs font-semibold text-3"
-                                          x-text="section.description"></span>
+                                <div class="p-1 flex items-center justify-start">
+                                    <div class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
+                                         x-change-set-listen="sectionEditChangeSet"
+                                         x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())"></div>
+                                    <div x-change-set-listen.text="sectionEditChangeSet.description" class="text-xs font-semibold text-3 ml-2 flex-grow"></div>
+                                    <div class="flex items-center py-1 pl-2 border-l dark:border-gray-600">
+                                        <button class="text-5 py-1 px-3 rounded text-3 hover:bg-gray-200 dark:hover:bg-gray-600" @click="editMode = true">
+                                            <i class="fa fa-edit"></i>
+                                        </button>
+                                        <button class="text-5 py-1 px-3 rounded text-3 hover:bg-gray-200 dark:hover:bg-gray-600"
+                                                @click="deleteSection(section.id)">
+                                            <i class="fa fa-trash"></i>
+                                        </button>
+                                    </div>
                                 </div>
                             </template>
                             <template x-if="editMode">
-                                <form @submit.prevent="sectionChangeSet.commit();"
-                                      @reset.prevent="sectionChangeSet.reset();"
+                                <form @submit.prevent="sectionEditChangeSet.commit(); editMode = false;"
+                                      @reset.prevent="sectionEditChangeSet.reset(); editMode = false;"
                                       class="flex flex-grow items-center p-2">
                                     <div class="text-sm mr-2">
                                         <label for="video-section-timestamp"
                                                class="block text-5">Timestamp</label>
                                         <div class="flex mt-3">
                                             <input id="startHours"
-                                                   x-bind-changeset="sectionChangeSet"
+                                                   x-bind-change-set="sectionEditChangeSet"
                                                    name="startHours"
                                                    type="number" min="0" max="23" step="1"
                                                    placeholder="0"
                                                    class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
                                             <span class="px-2 my-auto font-semibold text-5">:</span>
                                             <input id="startMinutes"
-                                                   x-bind-changeset="sectionChangeSet"
+                                                   x-bind-change-set="sectionEditChangeSet"
                                                    name="startMinutes"
                                                    type="number" min="0" max="59" step="1"
                                                    placeholder="0"
                                                    class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
                                             <span class="px-2 my-auto font-semibold text-5">:</span>
                                             <input id="startSeconds"
-                                                   x-bind-changeset="sectionChangeSet"
+                                                   x-bind-change-set="sectionEditChangeSet"
                                                    name="dtartSeconds"
                                                    type="number" min="0" max="59" step="1"
                                                    placeholder="0"
@@ -117,31 +126,26 @@
                                     <div class="text-sm flex-grow">
                                         <label for="video-section-description"
                                                class="block text-5">Description</label>
-                                        <input x-bind-changeset="sectionChangeSet"
+                                        <input x-bind-change-set="sectionEditChangeSet"
                                                name="description"
                                                id="video-section-description" type="text"
                                                autofocus="" required
                                                class="rounded px-4 py-3 mt-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600"/>
                                     </div>
-                                    <button type="submit"
-                                            title="Update"
-                                            class="h-full w-fit ml-2 bg-blue-500 text-center px-3 py-1 rounded w-full dark:bg-indigo-600">
-                                        <i class="fa fa-square-check text-white"></i>
-                                    </button>
-                                    <button type="reset"
-                                            title="Undo changes"
-                                            class="h-full w-fit ml-2 bg-gray-100 text-center px-3 rounded w-full dark:bg-secondary-lighter">
-                                        <i class="fa fa-undo text-3"></i>
-                                    </button>
+                                    <div class="flex flex-col ml-2">
+                                        <button type="reset"
+                                                title="Undo changes"
+                                                class="h-8 mb-1 bg-gray-100 text-center px-3 rounded dark:bg-secondary-lighter">
+                                            <i class="fa fa-undo text-3"></i>
+                                        </button>
+                                        <button type="submit"
+                                                title="Update"
+                                                class="h-8 bg-blue-500 text-center px-3 py-1 rounded dark:bg-indigo-600">
+                                            <i class="fa fa-check text-white"></i>
+                                        </button>
+                                    </div>
                                 </form>
                             </template>
-                            <button class="text-5 py-1 px-3 ml-auto border-l dark:border-gray-600 text-3 hover:bg-gray-200 dark:hover:bg-gray-600" @click="editMode = true">
-                                <i class="fa fa-edit"></i>
-                            </button>
-                            <button class="text-5 py-1 px-3 border-l rounded-r dark:border-gray-600 text-3 text-xs hover:bg-gray-200 dark:hover:bg-gray-600"
-                                    @click="deleteSection(section.id)">
-                                <i class="fa fa-trash"></i>
-                            </button>
                         </div>
                     </template>
                 </div>

From 80907788dd793c7ce081370a062d942955f5ec57 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 16:34:40 +0200
Subject: [PATCH 51/77] fix typo

---
 web/template/partial/course/manage/edit-video-sections.gohtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index f81e0c4b2..db2f19d4b 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -117,7 +117,7 @@
                                             <span class="px-2 my-auto font-semibold text-5">:</span>
                                             <input id="startSeconds"
                                                    x-bind-change-set="sectionEditChangeSet"
-                                                   name="dtartSeconds"
+                                                   name="startSeconds"
                                                    type="number" min="0" max="59" step="1"
                                                    placeholder="0"
                                                    class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">

From c810b4c595a59bd6485eb0159de4edaf141b7cf2 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 16:57:57 +0200
Subject: [PATCH 52/77] improved directives

---
 web/assets/init-admin.js                      | 28 +++++++++++++------
 .../course/manage/edit-video-sections.gohtml  |  5 +++-
 web/ts/edit-course.ts                         | 21 +++++++++++++-
 3 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 15e80fcfe..6628576c0 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -93,7 +93,7 @@ document.addEventListener("alpine:init", () => {
                 if (!data[fieldName]) {
                     el.value = "";
                 }
-                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value: data[fieldName] } }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
@@ -110,7 +110,7 @@ document.addEventListener("alpine:init", () => {
 
             const onChangeSetUpdateHandler = (data) => {
                 el.checked = !!data[fieldName];
-                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: !!data[fieldName] }));
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value: !!data[fieldName] }}));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
@@ -127,7 +127,7 @@ document.addEventListener("alpine:init", () => {
 
             const onChangeSetUpdateHandler = (data) => {
                 el.value = `${data[fieldName]}`;
-                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value: data[fieldName] } }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
@@ -145,7 +145,7 @@ document.addEventListener("alpine:init", () => {
 
             const onChangeSetUpdateHandler = (data) => {
                 el.value = `${data[fieldName]}`;
-                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value: data[fieldName] } }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
@@ -186,7 +186,7 @@ document.addEventListener("alpine:init", () => {
             if (modifiers.includes("text")) {
                 el.innerText = `${value}`;
             }
-            el.dispatchEvent(new CustomEvent(nativeEventName, { detail: value }));
+            el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value } }));
         };
 
         onChangeSetUpdateHandler(changeSet.get());
@@ -208,7 +208,9 @@ document.addEventListener("alpine:init", () => {
     *  - expression: The JavaScript expression to be evaluated when the "csupdate" event is triggered.
     *
     * Modifiers:
-    *  - "init": When provided, the directive will also execute the expression during initialization.
+    *  - "init": When provided, the directive will execute the expression during initialization (no matter if its dirty or clean).
+    *  - "clean": When provided, the directive will only execute if changeSet is not dirty.
+    *  - "dirty": When provided, the directive will only execute if changeSet is dirty.
     *
     * Example usage:
     * <div x-change-set-listen="sectionEditChangeSet"
@@ -218,11 +220,21 @@ document.addEventListener("alpine:init", () => {
     Alpine.directive("on-change-set-update", (el, { expression, modifiers }, { evaluateLater, cleanup }) => {
         const onUpdate = evaluateLater(expression);
 
-        const onChangeSetUpdateHandler = () => onUpdate();
+        const onChangeSetUpdateHandler = (e) => {
+            const isDirty = e.detail.changeSet.isDirty();
+
+            if (modifiers.includes("clean") && isDirty) {
+                return;
+            }
+            if (modifiers.includes("dirty") && !isDirty) {
+                return;
+            }
+            onUpdate();
+        };
         el.addEventListener(nativeEventName, onChangeSetUpdateHandler);
 
         if (modifiers.includes("init")) {
-            onChangeSetUpdateHandler();
+            onUpdate();
         }
 
         cleanup(() => {
diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index db2f19d4b..3125533ce 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -75,7 +75,10 @@
             <div class="">
                 <div class="grid gap-2">
                     <template x-for="section in lectureData.videoSections" :key="sectionKey(section)">
-                        <div x-data="{ sectionEditChangeSet: new admin.ChangeSet(section), editMode: false }" class="w-full border dark:border-gray-600 rounded">
+                        <div x-data="{ sectionEditChangeSet: new admin.ChangeSet(section), editMode: false }" class="w-full border dark:border-gray-600 rounded"
+                             x-change-set-listen="sectionEditChangeSet"
+                             x-on-change-set-update.clean="updateSection(sectionEditChangeSet.get())"
+                        >
                             <template x-if="!editMode">
                                 <div class="p-1 flex items-center justify-start">
                                     <div class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 57531cbb1..1c9a489a7 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -119,12 +119,23 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             const customComparator = comparatorPipeline([
                 ignoreKeys(["files"]),
                 singleProperty("videoSections", (a: Lecture, b: Lecture): boolean | null => {
+                    // List length differs, something was removed or added
                     if (a.videoSections.length !== b.videoSections.length) {
                         return true;
                     }
-                    if (a.videoSections.some(({ id }) => !b.videoSections.some(({ id: bId }) => id === bId))) {
+
+                    // List length is the same but items do have no id, so they are new.
+                    if (a.videoSections.some(({ id }) => id === undefined) || b.videoSections.some(({ id }) => id === undefined)) {
                         return true;
                     }
+
+                    // A section has edited and different information now
+                    return (a.videoSections.some((sectionA) => b.videoSections.some((sectionB) => {
+                        return sectionA.id === sectionB.id && (
+                            sectionA.description !== sectionB.description ||
+                            videoSectionTimestamp(sectionA) !== videoSectionTimestamp(sectionB)
+                        );
+                    })));
                 }),
             ]);
 
@@ -220,6 +231,14 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             this.changeSet.patch("videoSections", [...this.lectureData.videoSections, section].sort(videoSectionSort));
         },
 
+        updateSection(section: VideoSection) {
+            const sectionKey = this.sectionKey(section);
+            this.changeSet.patch("videoSections", [
+                ...this.lectureData.videoSections.filter((s) => sectionKey !== this.sectionKey(s)),
+                section
+            ].sort(videoSectionSort));
+        },
+
         deleteSection(id: number) {
             this.changeSet.patch(
                 "videoSections",

From 96ba056164d096d5a13b5b46704061ba6caa3f28 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 16:59:15 +0200
Subject: [PATCH 53/77] design improvement

---
 web/template/partial/course/manage/edit-video-sections.gohtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index 3125533ce..a1d8047b3 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -81,7 +81,7 @@
                         >
                             <template x-if="!editMode">
                                 <div class="p-1 flex items-center justify-start">
-                                    <div class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
+                                    <div class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 ml-1 rounded"
                                          x-change-set-listen="sectionEditChangeSet"
                                          x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())"></div>
                                     <div x-change-set-listen.text="sectionEditChangeSet.description" class="text-xs font-semibold text-3 ml-2 flex-grow"></div>

From 44d203174bd8c2f6cf0493c02ba7c628761b1de5 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 17:39:50 +0200
Subject: [PATCH 54/77] fixed creating and deleting

---
 web/ts/api/admin-lecture-list.ts        | 53 +++++++++++++++++++++++--
 web/ts/change-set.ts                    | 12 ++++++
 web/ts/data-store/admin-lecture-list.ts | 53 ++++++++++++++++++++++++-
 web/ts/edit-course.ts                   | 27 +++++++++----
 4 files changed, 132 insertions(+), 13 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index ffbb2c848..a491038b1 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -92,6 +92,50 @@ export type VideoSection = {
     fileID?: number;
 };
 
+export type VideoSectionDelta = {
+    toAdd: VideoSection[],
+    toUpdate: VideoSection[],
+    toDelete: VideoSection[],
+}
+
+// Checks if two video sections have the same id but different data
+export function videoSectionHasChanged(a: VideoSection, b: VideoSection) {
+    return a.id === b.id && (
+        a.description !== b.description ||
+        videoSectionTimestamp(a) !== videoSectionTimestamp(b)
+    );
+}
+
+export function videoSectionListDelta(oldSections: VideoSection[], newSections: VideoSection[]) : VideoSectionDelta {
+    const sectionsToAdd = [];
+    const sectionsToUpdate = [];
+    const sectionsToDelete = [];
+
+    for (const section of newSections) {
+        // New Section
+        if (section.id === undefined) {
+            sectionsToAdd.push(section);
+            continue;
+        }
+
+        // Updating Video Sections
+        const oldVideoSection = oldSections.find((oldSection: VideoSection) => oldSection.id === section.id);
+        if (videoSectionHasChanged(section, oldVideoSection)) { sectionsToUpdate.push(section); }
+    }
+    for (const section of oldSections) {
+        // Deleted Sections
+        if (!newSections.some(({id}) => section.id === id)) {
+            sectionsToDelete.push(section);
+        }
+    }
+
+    return {
+        toAdd: sectionsToAdd,
+        toUpdate: sectionsToUpdate,
+        toDelete: sectionsToDelete,
+    };
+}
+
 export function videoSectionFriendlyTimestamp(a: VideoSection): string {
     return `${a.startHours.toString().padStart(2, "0")}:${a.startMinutes.toString().padStart(2, "0")}:${a.startSeconds.toString().padStart(2, "0")}`;
 }
@@ -235,7 +279,10 @@ export const AdminLectureList = {
      * @param sections
      */
     addSections: async (lectureId: number, sections: VideoSection[]): Promise<void> => {
-        await post(`/api/stream/${lectureId}/sections`, sections);
+        await post(`/api/stream/${lectureId}/sections`, sections.map((s) => ({
+            ...s,
+            streamID: lectureId,
+        })));
     },
 
     /**
@@ -256,11 +303,11 @@ export const AdminLectureList = {
     },
 
     /**
-     * Remove a section from a lecture
+     * Delete a section from a lecture
      * @param lectureId
      * @param sectionId
      */
-    removeSection: async (lectureId: number, sectionId: number): Promise<void> => {
+    deleteSection: async (lectureId: number, sectionId: number): Promise<void> => {
         await del(`/api/stream/${lectureId}/sections/${sectionId}`);
     },
 
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 9c56f5a82..72ed57ad4 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -85,6 +85,18 @@ export class ChangeSet<T> {
         this.onUpdate = this.onUpdate.filter((o) => o !== onUpdate);
     }
 
+    /**
+     * Returns a key from the change-state or the last committed state if flag is set
+     * @param key key to return
+     * @param lastCommittedState if set to true, value of the last committed state is returned
+     */
+    getValue(key: string, { lastCommittedState = false }): T {
+        if (lastCommittedState) {
+            return this.state[key];
+        }
+        return this.changeState[key];
+    }
+
     /**
      * Returns the current uncommitted change state.
      */
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index af363d530..e1b8b8618 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -3,8 +3,7 @@ import {
     AdminLectureList,
     Lecture,
     LectureFile,
-    UpdateLectureMetaRequest,
-    videoSectionFriendlyTimestamp
+    UpdateLectureMetaRequest, VideoSection, videoSectionSort,
 } from "../api/admin-lecture-list";
 import { FileType } from "../edit-course";
 import {PostFormDataListener} from "../utilities/fetch-wrappers";
@@ -175,6 +174,56 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
+    async addSections(courseId: number, lectureId: number, videoSections: VideoSection[]) {
+        const newSections = await AdminLectureList.addSections(lectureId, videoSections);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    videoSections: [...s.videoSections, ...newSections]
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async updateSection(courseId: number, lectureId: number, videoSection: VideoSection) {
+        await AdminLectureList.updateSection(lectureId, videoSection);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    videoSections: [
+                        ...s.videoSections.filter((a) => a.id !== videoSection.id),
+                        videoSection,
+                    ].sort(videoSectionSort)
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async deleteSection(courseId: number, lectureId: number, videoSectionId: number) {
+        await AdminLectureList.deleteSection(lectureId, videoSectionId);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    videoSections: [
+                        ...s.videoSections.filter((a) => a.id !== videoSectionId),
+                    ].sort(videoSectionSort)
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
     async uploadVideo(
         courseId: number,
         lectureId: number,
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 1c9a489a7..790dc38ed 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -8,7 +8,7 @@ import {
     LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    VideoSection, videoSectionFriendlyTimestamp,
+    VideoSection, videoSectionFriendlyTimestamp, videoSectionHasChanged, videoSectionListDelta,
     videoSectionSort, videoSectionTimestamp,
 } from "./api/admin-lecture-list";
 import { ChangeSet, comparatorPipeline, ignoreKeys, singleProperty } from "./change-set";
@@ -130,12 +130,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                     }
 
                     // A section has edited and different information now
-                    return (a.videoSections.some((sectionA) => b.videoSections.some((sectionB) => {
-                        return sectionA.id === sectionB.id && (
-                            sectionA.description !== sectionB.description ||
-                            videoSectionTimestamp(sectionA) !== videoSectionTimestamp(sectionB)
-                        );
-                    })));
+                    return (a.videoSections.some((sA) => b.videoSections.some((sB) => videoSectionHasChanged(sA, sB))));
                 }),
             ]);
 
@@ -299,7 +294,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          * Save changes send them to backend and commit change set.
          */
         async saveEdit() {
-            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled } = this.lectureData;
+            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled, videoSections } = this.lectureData;
             const changedKeys = this.changeSet.changedKeys();
 
             try {
@@ -316,6 +311,22 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                     },
                 });
 
+                // Saving VideoSections
+                if (changedKeys.includes("videoSections")) {
+                    const oldVideoSections = this.changeSet.getValue("videoSections", { lastCommittedState: true });
+                    const delta = videoSectionListDelta(oldVideoSections, videoSections);
+
+                    if (delta.toAdd.length > 0) {
+                        await DataStore.adminLectureList.addSections(courseId, lectureId, delta.toAdd);
+                    }
+                    for (const section of delta.toUpdate) {
+                        await DataStore.adminLectureList.updateSection(courseId, lectureId, section);
+                    }
+                    for (const section of delta.toDelete) {
+                        await DataStore.adminLectureList.deleteSection(courseId, lectureId, section.id);
+                    }
+                }
+
                 // Uploading new videos
                 for (const videoFile of this.videoFiles) {
                     if (!changedKeys.includes(videoFile.info.key)) {

From 2ebd58ab3869e0577dfe1f76634e5b7db9048c97 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 18:04:18 +0200
Subject: [PATCH 55/77] add sections fixed

---
 api/stream.go                    | 6 ++++--
 web/ts/api/admin-lecture-list.ts | 5 +++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/api/stream.go b/api/stream.go
index b50174cad..82b83bb0a 100644
--- a/api/stream.go
+++ b/api/stream.go
@@ -12,13 +12,13 @@ import (
 	"strings"
 	"time"
 
-	"github.com/getsentry/sentry-go"
-	"github.com/gin-gonic/gin"
 	"github.com/TUM-Dev/gocast/dao"
 	"github.com/TUM-Dev/gocast/model"
 	"github.com/TUM-Dev/gocast/tools"
 	"github.com/TUM-Dev/gocast/tools/bot"
 	"github.com/TUM-Dev/gocast/voice-service/pb"
+	"github.com/getsentry/sentry-go"
+	"github.com/gin-gonic/gin"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/gorm"
@@ -496,6 +496,8 @@ func (r streamRoutes) createVideoSectionBatch(c *gin.Context) {
 			log.WithError(err).Error("failed to generate video section images")
 		}
 	}()
+
+	c.JSON(http.StatusOK, sections)
 }
 
 type UpdateVideoSectionRequest struct {
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index a491038b1..acedbde13 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -278,11 +278,12 @@ export const AdminLectureList = {
      * @param lectureId
      * @param sections
      */
-    addSections: async (lectureId: number, sections: VideoSection[]): Promise<void> => {
-        await post(`/api/stream/${lectureId}/sections`, sections.map((s) => ({
+    addSections: async (lectureId: number, sections: VideoSection[]): Promise<VideoSection[]> => {
+        const result = await post(`/api/stream/${lectureId}/sections`, sections.map((s) => ({
             ...s,
             streamID: lectureId,
         })));
+        return result.json();
     },
 
     /**

From 738087af010cb641dc78de4d6c1ccf76f1e13b73 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 18:13:25 +0200
Subject: [PATCH 56/77] cleanup

---
 web/ts/api/admin-lecture-list.ts    |   4 +-
 web/ts/api/video-sections.ts        |  19 ----
 web/ts/data-store/video-sections.ts |  35 +-------
 web/ts/entry/admins.ts              |   1 -
 web/ts/entry/video.ts               |   1 -
 web/ts/video-sections.ts            | 134 ----------------------------
 6 files changed, 3 insertions(+), 191 deletions(-)
 delete mode 100644 web/ts/video-sections.ts

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index acedbde13..185d59ec2 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -88,8 +88,8 @@ export type VideoSection = {
     startMinutes: number;
     startSeconds: number;
 
-    streamID?: number;
-    fileID?: number;
+    //Pseudo Fields
+    key: string;
 };
 
 export type VideoSectionDelta = {
diff --git a/web/ts/api/video-sections.ts b/web/ts/api/video-sections.ts
index 9acb866c5..ffd3189c1 100644
--- a/web/ts/api/video-sections.ts
+++ b/web/ts/api/video-sections.ts
@@ -1,12 +1,5 @@
 import { del, get, post, put } from "../utilities/fetch-wrappers";
 
-export class UpdateVideoSectionRequest {
-    Description: string;
-    StartHours: number;
-    StartMinutes: number;
-    StartSeconds: number;
-}
-
 export type Section = {
     ID?: number;
     description: string;
@@ -29,16 +22,4 @@ export const VideoSectionAPI = {
     get: async function (streamId: number): Promise<Section[]> {
         return get(`/api/stream/${streamId}/sections`);
     },
-
-    add: async function (streamId: number, request: object) {
-        return post(`/api/stream/${streamId}/sections`, request);
-    },
-
-    update: function (streamId: number, id: number, request: UpdateVideoSectionRequest) {
-        return put(`/api/stream/${streamId}/sections/${id}`, request);
-    },
-
-    delete: async function (streamId: number, id: number): Promise<Response> {
-        return del(`/api/stream/${streamId}/sections/${id}`);
-    },
 };
diff --git a/web/ts/data-store/video-sections.ts b/web/ts/data-store/video-sections.ts
index 446de9c5a..8ca51be9e 100644
--- a/web/ts/data-store/video-sections.ts
+++ b/web/ts/data-store/video-sections.ts
@@ -1,6 +1,6 @@
 import { Time } from "../global";
 import { StreamableMapProvider } from "./provider";
-import { Section, UpdateVideoSectionRequest, VideoSectionAPI } from "../api/video-sections";
+import { Section, VideoSectionAPI } from "../api/video-sections";
 
 export class VideoSectionProvider extends StreamableMapProvider<number, Section[]> {
     protected async fetcher(streamId: number): Promise<Section[]> {
@@ -10,37 +10,4 @@ export class VideoSectionProvider extends StreamableMapProvider<number, Section[
             return s;
         });
     }
-
-    async add(streamId: number, sections: Section[]): Promise<void> {
-        await VideoSectionAPI.add(streamId, sections);
-        await this.fetch(streamId, true);
-        await this.triggerUpdate(streamId);
-    }
-
-    async delete(streamId: number, sectionId: number) {
-        await VideoSectionAPI.delete(streamId, sectionId);
-        this.data[streamId] = (await this.getData(streamId)).filter((s) => s.ID !== sectionId);
-    }
-
-    async update(streamId: number, sectionId: number, request: UpdateVideoSectionRequest) {
-        await VideoSectionAPI.update(streamId, sectionId, request);
-        this.data[streamId] = (await this.getData(streamId)).map((s) => {
-            if (s.ID === sectionId) {
-                s = {
-                    ...s,
-                    startHours: request.StartHours,
-                    startMinutes: request.StartMinutes,
-                    startSeconds: request.StartSeconds,
-                    description: request.Description,
-                    friendlyTimestamp: new Time(
-                        request.StartHours,
-                        request.StartMinutes,
-                        request.StartSeconds,
-                    ).toString(),
-                };
-            }
-            return s;
-        });
-        await this.triggerUpdate(streamId);
-    }
 }
diff --git a/web/ts/entry/admins.ts b/web/ts/entry/admins.ts
index 58e9df699..6b222edaa 100644
--- a/web/ts/entry/admins.ts
+++ b/web/ts/entry/admins.ts
@@ -14,4 +14,3 @@ export * from "../notification-management";
 export * from "../audits";
 export * from "../maintenance";
 export * from "../change-set";
-export { VideoSectionsAdminController, VideoSectionUpdater } from "../video-sections";
diff --git a/web/ts/entry/video.ts b/web/ts/entry/video.ts
index 7d83fb7ff..094fdf963 100644
--- a/web/ts/entry/video.ts
+++ b/web/ts/entry/video.ts
@@ -2,7 +2,6 @@
 export * from "../watch-admin";
 export * from "../TUMLiveVjs";
 export * from "../watch";
-export * from "../video-sections";
 export * from "../splitview";
 export * from "../bookmarks";
 export * from "../subtitle-search";
diff --git a/web/ts/video-sections.ts b/web/ts/video-sections.ts
deleted file mode 100644
index 7d73601e3..000000000
--- a/web/ts/video-sections.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Time } from "./global";
-import { DataStore } from "./data-store/data-store";
-import { Section, UpdateVideoSectionRequest } from "./api/video-sections";
-
-/**
- * Admin Page VideoSection Management
- * @category admin-page
- */
-export class VideoSectionsAdminController {
-    static initiatedInstances: Map<string, Promise<VideoSectionsAdminController>> = new Map<
-        string,
-        Promise<VideoSectionsAdminController>
-    >();
-
-    private readonly streamId: number;
-
-    existingSections: Section[];
-    newSections: Section[];
-    current: Section;
-    unsavedChanges: boolean;
-
-    private elem: HTMLElement;
-    private unsub: () => void;
-
-    constructor(streamId: number) {
-        this.streamId = streamId;
-
-        this.newSections = [];
-        this.existingSections = [];
-        this.unsavedChanges = false;
-        this.resetCurrent();
-    }
-
-    async init(key: string, element: HTMLElement) {
-        if (VideoSectionsAdminController.initiatedInstances[key]) {
-            (await VideoSectionsAdminController.initiatedInstances[key]).unsub();
-        }
-
-        VideoSectionsAdminController.initiatedInstances[key] = new Promise<VideoSectionsAdminController>((resolve) => {
-            this.elem = element;
-            const callback = (data) => this.onUpdate(data);
-            DataStore.videoSections.subscribe(this.streamId, callback).then(() => {
-                this.unsub = () => DataStore.videoSections.unsubscribe(this.streamId, callback);
-                resolve(this);
-            });
-        });
-    }
-
-    onUpdate(data: Section[]) {
-        this.existingSections = data;
-    }
-
-    pushNewSection() {
-        this.current.friendlyTimestamp = new Time(
-            this.current.startHours,
-            this.current.startMinutes,
-            this.current.startSeconds,
-        ).toString();
-        this.newSections.push({ ...this.current });
-        this.resetCurrent();
-        this.unsavedChanges = true;
-    }
-
-    removeNewSection(section: Section) {
-        this.newSections = this.newSections.filter((s) => s !== section);
-        this.unsavedChanges = true;
-    }
-
-    async publishNewSections() {
-        await DataStore.videoSections.add(this.streamId, this.newSections);
-        this.newSections = [];
-        this.unsavedChanges = false;
-    }
-
-    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.startHours < 32 &&
-            this.current.startMinutes !== null &&
-            this.current.startMinutes < 60 &&
-            this.current.startSeconds !== null &&
-            this.current.startSeconds < 60
-        );
-    }
-
-    private resetCurrent() {
-        this.current = {
-            description: "",
-            startHours: 0,
-            startMinutes: 0,
-            startSeconds: 0,
-            streamID: this.streamId,
-            isCurrent: false,
-        };
-    }
-}
-
-/**
- * Admin Page VideoSection Updater
- * @category admin-page
- */
-export class VideoSectionUpdater {
-    private readonly streamId: number;
-    private section: Section;
-
-    request: UpdateVideoSectionRequest;
-    show: boolean;
-
-    constructor(streamId: number, section: Section) {
-        this.streamId = streamId;
-        this.section = section;
-        this.reset();
-    }
-
-    async update() {
-        await DataStore.videoSections.update(this.streamId, this.section.ID, this.request);
-        this.show = false;
-    }
-
-    reset() {
-        this.request = new UpdateVideoSectionRequest();
-        this.request.Description = this.section.description;
-        this.request.StartHours = this.section.startHours;
-        this.request.StartMinutes = this.section.startMinutes;
-        this.request.StartSeconds = this.section.startSeconds;
-        this.show = false;
-    }
-}

From f11c393e5ca8bfd9ff95aa6befacce81f2af3ae3 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 19:03:49 +0200
Subject: [PATCH 57/77] :)

---
 web/assets/init-admin.js                      |  9 +++++--
 .../course/manage/edit-video-sections.gohtml  |  7 +++---
 web/ts/api/admin-lecture-list.ts              |  9 ++++++-
 web/ts/data-store/admin-lecture-list.ts       |  2 +-
 web/ts/edit-course.ts                         | 25 +++++++++++--------
 5 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 6628576c0..518f41ffd 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -181,6 +181,10 @@ document.addEventListener("alpine:init", () => {
         const [changeSetExpression, fieldName = null] = expression.split(".");
         const changeSet = evaluate(changeSetExpression);
 
+        if (!changeSet) {
+            return;
+        }
+
         const onChangeSetUpdateHandler = (data) => {
             const value = fieldName != null ? data[fieldName] : data;
             if (modifiers.includes("text")) {
@@ -217,10 +221,11 @@ document.addEventListener("alpine:init", () => {
     *      x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())">
     * </div>
     */
-    Alpine.directive("on-change-set-update", (el, { expression, modifiers }, { evaluateLater, cleanup }) => {
+    Alpine.directive("on-change-set-update", (el, { expression, modifiers }, { evaluate, evaluateLater, cleanup }) => {
         const onUpdate = evaluateLater(expression);
 
         const onChangeSetUpdateHandler = (e) => {
+            console.log(el, "trigger");
             const isDirty = e.detail.changeSet.isDirty();
 
             if (modifiers.includes("clean") && isDirty) {
@@ -234,7 +239,7 @@ document.addEventListener("alpine:init", () => {
         el.addEventListener(nativeEventName, onChangeSetUpdateHandler);
 
         if (modifiers.includes("init")) {
-            onUpdate();
+            evaluate(expression);
         }
 
         cleanup(() => {
diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index a1d8047b3..461e1aaa0 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -74,7 +74,7 @@
         <template x-if="lectureData.videoSections.length > 0">
             <div class="">
                 <div class="grid gap-2">
-                    <template x-for="section in lectureData.videoSections" :key="sectionKey(section)">
+                    <template x-for="section in lectureData.videoSections" :key="getSectionKey(section)">
                         <div x-data="{ sectionEditChangeSet: new admin.ChangeSet(section), editMode: false }" class="w-full border dark:border-gray-600 rounded"
                              x-change-set-listen="sectionEditChangeSet"
                              x-on-change-set-update.clean="updateSection(sectionEditChangeSet.get())"
@@ -83,14 +83,15 @@
                                 <div class="p-1 flex items-center justify-start">
                                     <div class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 ml-1 rounded"
                                          x-change-set-listen="sectionEditChangeSet"
-                                         x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())"></div>
+                                         x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())"
+                                    ></div>
                                     <div x-change-set-listen.text="sectionEditChangeSet.description" class="text-xs font-semibold text-3 ml-2 flex-grow"></div>
                                     <div class="flex items-center py-1 pl-2 border-l dark:border-gray-600">
                                         <button class="text-5 py-1 px-3 rounded text-3 hover:bg-gray-200 dark:hover:bg-gray-600" @click="editMode = true">
                                             <i class="fa fa-edit"></i>
                                         </button>
                                         <button class="text-5 py-1 px-3 rounded text-3 hover:bg-gray-200 dark:hover:bg-gray-600"
-                                                @click="deleteSection(section.id)">
+                                                @click="deleteSection(section)">
                                             <i class="fa fa-trash"></i>
                                         </button>
                                     </div>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 185d59ec2..f1df533f6 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -89,7 +89,7 @@ export type VideoSection = {
     startSeconds: number;
 
     //Pseudo Fields
-    key: string;
+    key?: string;
 };
 
 export type VideoSectionDelta = {
@@ -106,6 +106,13 @@ export function videoSectionHasChanged(a: VideoSection, b: VideoSection) {
     );
 }
 
+export function videoSectionGenKey(section: VideoSection): string {
+    if (section.id != null) {
+        return `sid_${section.id}`;
+    }
+    return `sts_${(new Date()).getTime()}`;
+}
+
 export function videoSectionListDelta(oldSections: VideoSection[], newSections: VideoSection[]) : VideoSectionDelta {
     const sectionsToAdd = [];
     const sectionsToUpdate = [];
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index e1b8b8618..ef346ae42 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -32,7 +32,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         return result.map((s) => {
             s.hasAttachments = (s.files || []).some((f) => f.fileType === FileType.attachment);
 
-            s.videoSections = s.videoSections ?? [];
+            s.videoSections = (s.videoSections ?? []).sort(videoSectionSort);
 
             s.startDate = new Date(s.start);
             s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 790dc38ed..6dcca49a4 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -215,29 +215,34 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             return videoSectionFriendlyTimestamp(section);
         },
 
-        sectionKey(section: VideoSection): string {
-            if (section.id != null) {
-                return `sid_${section.id}`;
-            }
-            return `sts_${videoSectionTimestamp(section)}`;
+        getSectionKey(section: VideoSection): string {
+            return section.id ? `sid_${section.id}` : section.key;
+        },
+
+        genPseudoSectionKey(): string {
+            return `sts_${(new Date()).getTime()}`;
         },
 
         addSection(section: VideoSection) {
-            this.changeSet.patch("videoSections", [...this.lectureData.videoSections, section].sort(videoSectionSort));
+            this.changeSet.patch("videoSections", [...this.lectureData.videoSections, {
+                ...section,
+                key: this.genPseudoSectionKey(),
+            }].sort(videoSectionSort));
         },
 
         updateSection(section: VideoSection) {
-            const sectionKey = this.sectionKey(section);
+            const sectionKey = this.getSectionKey(section);
             this.changeSet.patch("videoSections", [
-                ...this.lectureData.videoSections.filter((s) => sectionKey !== this.sectionKey(s)),
+                ...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)),
                 section
             ].sort(videoSectionSort));
         },
 
-        deleteSection(id: number) {
+        deleteSection(section) {
+            const sectionKey = this.getSectionKey(section);
             this.changeSet.patch(
                 "videoSections",
-                this.lectureData.videoSections.filter((s) => s.id !== id),
+                this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)),
             );
         },
 

From 0beec3a2c31ac85642dc7c2f67164c55a1c3d9d3 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 19:24:13 +0200
Subject: [PATCH 58/77] fix alpine js error issues

---
 web/assets/init-admin.js                | 39 ++++++++++---------
 web/ts/api/admin-lecture-list.ts        | 38 ++++++++++--------
 web/ts/data-store/admin-lecture-list.ts | 19 +++++----
 web/ts/edit-course.ts                   | 52 ++++++++++++++++---------
 4 files changed, 84 insertions(+), 64 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 518f41ffd..e54a093c8 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -177,28 +177,32 @@ document.addEventListener("alpine:init", () => {
      *  - "csupdate": Custom event triggered when the change set is updated.
      *    The detail property of the event object contains the new value of the specified field.
      */
-    Alpine.directive("change-set-listen", (el, { expression, modifiers }, { evaluate, cleanup }) => {
-        const [changeSetExpression, fieldName = null] = expression.split(".");
-        const changeSet = evaluate(changeSetExpression);
+    Alpine.directive("change-set-listen", (el, { expression, modifiers }, { effect, evaluate, cleanup }) => {
+        effect(() => {
+            const [changeSetExpression, fieldName = null] = expression.split(".");
+            const changeSet = evaluate(changeSetExpression);
 
-        if (!changeSet) {
-            return;
-        }
+            const onChangeSetUpdateHandler = (data) => {
+                console.log('onChangeSetUpdateHandler', el, data);
+                const value = fieldName != null ? data[fieldName] : data;
+                if (modifiers.includes("text")) {
+                    el.innerText = `${value}`;
+                }
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value } }));
+            };
 
-        const onChangeSetUpdateHandler = (data) => {
-            const value = fieldName != null ? data[fieldName] : data;
-            if (modifiers.includes("text")) {
-                el.innerText = `${value}`;
+            if (!changeSet) {
+                return;
             }
-            el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value } }));
-        };
-
-        onChangeSetUpdateHandler(changeSet.get());
-        changeSet.listen(onChangeSetUpdateHandler);
 
-        cleanup(() => {
             changeSet.removeListener(onChangeSetUpdateHandler);
-        })
+            onChangeSetUpdateHandler(changeSet.get());
+            changeSet.listen(onChangeSetUpdateHandler);
+
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+            })
+        });
     });
 
     /**
@@ -225,7 +229,6 @@ document.addEventListener("alpine:init", () => {
         const onUpdate = evaluateLater(expression);
 
         const onChangeSetUpdateHandler = (e) => {
-            console.log(el, "trigger");
             const isDirty = e.detail.changeSet.isDirty();
 
             if (modifiers.includes("clean") && isDirty) {
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index f1df533f6..fc65bc786 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -93,27 +93,24 @@ export type VideoSection = {
 };
 
 export type VideoSectionDelta = {
-    toAdd: VideoSection[],
-    toUpdate: VideoSection[],
-    toDelete: VideoSection[],
-}
+    toAdd: VideoSection[];
+    toUpdate: VideoSection[];
+    toDelete: VideoSection[];
+};
 
 // Checks if two video sections have the same id but different data
 export function videoSectionHasChanged(a: VideoSection, b: VideoSection) {
-    return a.id === b.id && (
-        a.description !== b.description ||
-        videoSectionTimestamp(a) !== videoSectionTimestamp(b)
-    );
+    return a.id === b.id && (a.description !== b.description || videoSectionTimestamp(a) !== videoSectionTimestamp(b));
 }
 
 export function videoSectionGenKey(section: VideoSection): string {
     if (section.id != null) {
         return `sid_${section.id}`;
     }
-    return `sts_${(new Date()).getTime()}`;
+    return `sts_${new Date().getTime()}`;
 }
 
-export function videoSectionListDelta(oldSections: VideoSection[], newSections: VideoSection[]) : VideoSectionDelta {
+export function videoSectionListDelta(oldSections: VideoSection[], newSections: VideoSection[]): VideoSectionDelta {
     const sectionsToAdd = [];
     const sectionsToUpdate = [];
     const sectionsToDelete = [];
@@ -127,11 +124,13 @@ export function videoSectionListDelta(oldSections: VideoSection[], newSections:
 
         // Updating Video Sections
         const oldVideoSection = oldSections.find((oldSection: VideoSection) => oldSection.id === section.id);
-        if (videoSectionHasChanged(section, oldVideoSection)) { sectionsToUpdate.push(section); }
+        if (videoSectionHasChanged(section, oldVideoSection)) {
+            sectionsToUpdate.push(section);
+        }
     }
     for (const section of oldSections) {
         // Deleted Sections
-        if (!newSections.some(({id}) => section.id === id)) {
+        if (!newSections.some(({ id }) => section.id === id)) {
             sectionsToDelete.push(section);
         }
     }
@@ -144,7 +143,9 @@ export function videoSectionListDelta(oldSections: VideoSection[], newSections:
 }
 
 export function videoSectionFriendlyTimestamp(a: VideoSection): string {
-    return `${a.startHours.toString().padStart(2, "0")}:${a.startMinutes.toString().padStart(2, "0")}:${a.startSeconds.toString().padStart(2, "0")}`;
+    return `${a.startHours.toString().padStart(2, "0")}:${a.startMinutes.toString().padStart(2, "0")}:${a.startSeconds
+        .toString()
+        .padStart(2, "0")}`;
 }
 
 export function videoSectionTimestamp(a: VideoSection): number {
@@ -286,10 +287,13 @@ export const AdminLectureList = {
      * @param sections
      */
     addSections: async (lectureId: number, sections: VideoSection[]): Promise<VideoSection[]> => {
-        const result = await post(`/api/stream/${lectureId}/sections`, sections.map((s) => ({
-            ...s,
-            streamID: lectureId,
-        })));
+        const result = await post(
+            `/api/stream/${lectureId}/sections`,
+            sections.map((s) => ({
+                ...s,
+                streamID: lectureId,
+            })),
+        );
         return result.json();
     },
 
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index ef346ae42..6633bf78e 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -3,10 +3,12 @@ import {
     AdminLectureList,
     Lecture,
     LectureFile,
-    UpdateLectureMetaRequest, VideoSection, videoSectionSort,
+    UpdateLectureMetaRequest,
+    VideoSection,
+    videoSectionSort,
 } from "../api/admin-lecture-list";
 import { FileType } from "../edit-course";
-import {PostFormDataListener} from "../utilities/fetch-wrappers";
+import { PostFormDataListener } from "../utilities/fetch-wrappers";
 
 const dateFormatOptions: Intl.DateTimeFormatOptions = {
     weekday: "long",
@@ -181,7 +183,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
             if (s.lectureId === lectureId) {
                 return {
                     ...s,
-                    videoSections: [...s.videoSections, ...newSections]
+                    videoSections: [...s.videoSections, ...newSections],
                 };
             }
             return s;
@@ -196,10 +198,9 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
             if (s.lectureId === lectureId) {
                 return {
                     ...s,
-                    videoSections: [
-                        ...s.videoSections.filter((a) => a.id !== videoSection.id),
-                        videoSection,
-                    ].sort(videoSectionSort)
+                    videoSections: [...s.videoSections.filter((a) => a.id !== videoSection.id), videoSection].sort(
+                        videoSectionSort,
+                    ),
                 };
             }
             return s;
@@ -214,9 +215,7 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
             if (s.lectureId === lectureId) {
                 return {
                     ...s,
-                    videoSections: [
-                        ...s.videoSections.filter((a) => a.id !== videoSectionId),
-                    ].sort(videoSectionSort)
+                    videoSections: [...s.videoSections.filter((a) => a.id !== videoSectionId)].sort(videoSectionSort),
                 };
             }
             return s;
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 6dcca49a4..2825f8655 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -8,12 +8,16 @@ import {
     LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    VideoSection, videoSectionFriendlyTimestamp, videoSectionHasChanged, videoSectionListDelta,
-    videoSectionSort, videoSectionTimestamp,
+    VideoSection,
+    videoSectionFriendlyTimestamp,
+    videoSectionHasChanged,
+    videoSectionListDelta,
+    videoSectionSort,
+    videoSectionTimestamp,
 } from "./api/admin-lecture-list";
 import { ChangeSet, comparatorPipeline, ignoreKeys, singleProperty } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
-import {uploadFile} from "./utilities/fetch-wrappers";
+import { uploadFile } from "./utilities/fetch-wrappers";
 
 export enum UIEditMode {
     none,
@@ -125,12 +129,15 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                     }
 
                     // List length is the same but items do have no id, so they are new.
-                    if (a.videoSections.some(({ id }) => id === undefined) || b.videoSections.some(({ id }) => id === undefined)) {
+                    if (
+                        a.videoSections.some(({ id }) => id === undefined) ||
+                        b.videoSections.some(({ id }) => id === undefined)
+                    ) {
                         return true;
                     }
 
                     // A section has edited and different information now
-                    return (a.videoSections.some((sA) => b.videoSections.some((sB) => videoSectionHasChanged(sA, sB))));
+                    return a.videoSections.some((sA) => b.videoSections.some((sB) => videoSectionHasChanged(sA, sB)));
                 }),
             ]);
 
@@ -211,7 +218,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             DataStore.adminLectureList.deleteAttachment(this.lectureData.courseId, this.lectureData.lectureId, id);
         },
 
-        friendlySectionTimestamp(section: VideoSection): string{
+        friendlySectionTimestamp(section: VideoSection): string {
             return videoSectionFriendlyTimestamp(section);
         },
 
@@ -220,22 +227,30 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         genPseudoSectionKey(): string {
-            return `sts_${(new Date()).getTime()}`;
+            return `sts_${new Date().getTime()}`;
         },
 
         addSection(section: VideoSection) {
-            this.changeSet.patch("videoSections", [...this.lectureData.videoSections, {
-                ...section,
-                key: this.genPseudoSectionKey(),
-            }].sort(videoSectionSort));
+            this.changeSet.patch(
+                "videoSections",
+                [
+                    ...this.lectureData.videoSections,
+                    {
+                        ...section,
+                        key: this.genPseudoSectionKey(),
+                    },
+                ].sort(videoSectionSort),
+            );
         },
 
         updateSection(section: VideoSection) {
             const sectionKey = this.getSectionKey(section);
-            this.changeSet.patch("videoSections", [
-                ...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)),
-                section
-            ].sort(videoSectionSort));
+            this.changeSet.patch(
+                "videoSections",
+                [...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)), section].sort(
+                    videoSectionSort,
+                ),
+            );
         },
 
         deleteSection(section) {
@@ -255,9 +270,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 section.startMinutes < 60 &&
                 section.startSeconds !== null &&
                 section.startSeconds < 60 &&
-                !this.lectureData.videoSections.some(
-                    (s) => videoSectionTimestamp(s) == videoSectionTimestamp(section)
-                )
+                !this.lectureData.videoSections.some((s) => videoSectionTimestamp(s) == videoSectionTimestamp(section))
             );
         },
 
@@ -299,7 +312,8 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          * Save changes send them to backend and commit change set.
          */
         async saveEdit() {
-            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled, videoSections } = this.lectureData;
+            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled, videoSections } =
+                this.lectureData;
             const changedKeys = this.changeSet.changedKeys();
 
             try {

From 7e63051daf51aea906b8bb27544d848c763969cc Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 19:29:45 +0200
Subject: [PATCH 59/77] remoev console log

---
 web/assets/init-admin.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index e54a093c8..f4e8be806 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -183,7 +183,6 @@ document.addEventListener("alpine:init", () => {
             const changeSet = evaluate(changeSetExpression);
 
             const onChangeSetUpdateHandler = (data) => {
-                console.log('onChangeSetUpdateHandler', el, data);
                 const value = fieldName != null ? data[fieldName] : data;
                 if (modifiers.includes("text")) {
                     el.innerText = `${value}`;

From a50db127657c2ec78497ae0faa3a8b924bfde306 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 20:38:33 +0200
Subject: [PATCH 60/77] nested :)

---
 .../course/manage/edit-video-sections.gohtml  | 19 ++++++++++---------
 web/ts/edit-course.ts                         | 13 +++++++++++--
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index 461e1aaa0..1c2f38411 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -75,10 +75,7 @@
             <div class="">
                 <div class="grid gap-2">
                     <template x-for="section in lectureData.videoSections" :key="getSectionKey(section)">
-                        <div x-data="{ sectionEditChangeSet: new admin.ChangeSet(section), editMode: false }" class="w-full border dark:border-gray-600 rounded"
-                             x-change-set-listen="sectionEditChangeSet"
-                             x-on-change-set-update.clean="updateSection(sectionEditChangeSet.get())"
-                        >
+                        <div x-data="{ sectionEditChangeSet: new admin.ChangeSet(section), editMode: false }" class="w-full border dark:border-gray-600 rounded">
                             <template x-if="!editMode">
                                 <div class="p-1 flex items-center justify-start">
                                     <div class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 ml-1 rounded"
@@ -98,29 +95,32 @@
                                 </div>
                             </template>
                             <template x-if="editMode">
-                                <form @submit.prevent="sectionEditChangeSet.commit(); editMode = false;"
+                                <form @submit.prevent="sectionEditChangeSet.commit(); updateSection(sectionEditChangeSet.get()); editMode = false;"
                                       @reset.prevent="sectionEditChangeSet.reset(); editMode = false;"
+                                      x-data="{ isValid: false }"
+                                      x-change-set-listen="sectionEditChangeSet"
+                                      x-on-change-set-update="isValid = sectionEditChangeSet.isDirty() && isValidVideoSection(sectionEditChangeSet.get())"
                                       class="flex flex-grow items-center p-2">
                                     <div class="text-sm mr-2">
                                         <label for="video-section-timestamp"
                                                class="block text-5">Timestamp</label>
                                         <div class="flex mt-3">
                                             <input id="startHours"
-                                                   x-bind-change-set="sectionEditChangeSet"
+                                                   x-bind-change-set.int="sectionEditChangeSet"
                                                    name="startHours"
                                                    type="number" min="0" max="23" step="1"
                                                    placeholder="0"
                                                    class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
                                             <span class="px-2 my-auto font-semibold text-5">:</span>
                                             <input id="startMinutes"
-                                                   x-bind-change-set="sectionEditChangeSet"
+                                                   x-bind-change-set.int="sectionEditChangeSet"
                                                    name="startMinutes"
                                                    type="number" min="0" max="59" step="1"
                                                    placeholder="0"
                                                    class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
                                             <span class="px-2 my-auto font-semibold text-5">:</span>
                                             <input id="startSeconds"
-                                                   x-bind-change-set="sectionEditChangeSet"
+                                                   x-bind-change-set.int="sectionEditChangeSet"
                                                    name="startSeconds"
                                                    type="number" min="0" max="59" step="1"
                                                    placeholder="0"
@@ -144,7 +144,8 @@
                                         </button>
                                         <button type="submit"
                                                 title="Update"
-                                                class="h-8 bg-blue-500 text-center px-3 py-1 rounded dark:bg-indigo-600">
+                                                :disabled="!isValid"
+                                                class="h-8 bg-blue-500 text-center px-3 py-1 rounded dark:bg-indigo-600 disabled:opacity-50">
                                             <i class="fa fa-check text-white"></i>
                                         </button>
                                     </div>
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 2825f8655..36f15631e 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -231,6 +231,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         addSection(section: VideoSection) {
+            console.log("PATCH A");
             this.changeSet.patch(
                 "videoSections",
                 [
@@ -244,6 +245,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         updateSection(section: VideoSection) {
+            console.log("PATCH B");
             const sectionKey = this.getSectionKey(section);
             this.changeSet.patch(
                 "videoSections",
@@ -254,14 +256,21 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         deleteSection(section) {
+            console.log("PATCH C");
             const sectionKey = this.getSectionKey(section);
             this.changeSet.patch(
                 "videoSections",
-                this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)),
+                [...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s))],
             );
         },
 
         isValidVideoSection(section: VideoSection): boolean {
+            const sectionKey = this.getSectionKey(section);
+            const hasValidTime = !this.lectureData.videoSections.some(
+                (s) =>  videoSectionTimestamp(s) == videoSectionTimestamp(section) &&
+                    sectionKey != this.getSectionKey(s)
+            );
+
             return (
                 section.description !== "" &&
                 section.startHours !== null &&
@@ -270,7 +279,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 section.startMinutes < 60 &&
                 section.startSeconds !== null &&
                 section.startSeconds < 60 &&
-                !this.lectureData.videoSections.some((s) => videoSectionTimestamp(s) == videoSectionTimestamp(section))
+                hasValidTime
             );
         },
 

From 0da5f03e01ce8c0e9d7bb6cfb583395cc5cda48f Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 20:38:50 +0200
Subject: [PATCH 61/77] remove console log

---
 web/ts/edit-course.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 36f15631e..a85276d95 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -231,7 +231,6 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         addSection(section: VideoSection) {
-            console.log("PATCH A");
             this.changeSet.patch(
                 "videoSections",
                 [
@@ -245,7 +244,6 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         updateSection(section: VideoSection) {
-            console.log("PATCH B");
             const sectionKey = this.getSectionKey(section);
             this.changeSet.patch(
                 "videoSections",
@@ -256,7 +254,6 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         },
 
         deleteSection(section) {
-            console.log("PATCH C");
             const sectionKey = this.getSectionKey(section);
             this.changeSet.patch(
                 "videoSections",

From 6a181d2f5b884bfc7a76aca6de0fdf9e9ae11096 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Fri, 15 Sep 2023 20:39:03 +0200
Subject: [PATCH 62/77] lint-fix

---
 web/ts/edit-course.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index a85276d95..c517000c6 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -255,17 +255,16 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
 
         deleteSection(section) {
             const sectionKey = this.getSectionKey(section);
-            this.changeSet.patch(
-                "videoSections",
-                [...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s))],
-            );
+            this.changeSet.patch("videoSections", [
+                ...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)),
+            ]);
         },
 
         isValidVideoSection(section: VideoSection): boolean {
             const sectionKey = this.getSectionKey(section);
             const hasValidTime = !this.lectureData.videoSections.some(
-                (s) =>  videoSectionTimestamp(s) == videoSectionTimestamp(section) &&
-                    sectionKey != this.getSectionKey(s)
+                (s) =>
+                    videoSectionTimestamp(s) == videoSectionTimestamp(section) && sectionKey != this.getSectionKey(s),
             );
 
             return (

From 34248acbe94c68f419366b7dcbe0a8524cb99c4c Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 21 Sep 2023 22:03:54 +0200
Subject: [PATCH 63/77] started with inputs

---
 web/assets/init-admin.js                      |  4 +
 .../manage/lecture-management-card.gohtml     | 35 +++++++++
 web/ts/api/admin-lecture-list.ts              |  3 +-
 web/ts/change-set.ts                          | 78 ++++++++++++++++---
 web/ts/data-store/admin-lecture-list.ts       | 12 +--
 web/ts/edit-course.ts                         | 65 +++++++++++++++-
 6 files changed, 171 insertions(+), 26 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index f4e8be806..f8802cd96 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -172,6 +172,7 @@ document.addEventListener("alpine:init", () => {
      *
      * Modifiers:
      *  - "text": When provided, the directive will also update the element's innerText.
+     *  - "value": When provided, the directive will also update the element's value.
      *
      * Custom Events:
      *  - "csupdate": Custom event triggered when the change set is updated.
@@ -187,6 +188,9 @@ document.addEventListener("alpine:init", () => {
                 if (modifiers.includes("text")) {
                     el.innerText = `${value}`;
                 }
+                if (modifiers.includes("value")) {
+                    el.value = value;
+                }
                 el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value } }));
             };
 
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 6046fc044..c7148987a 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -255,6 +255,41 @@
                         </div>
                     </template>
                 </article>
+
+                <header class="border-b dark:border-gray-600 w-full">
+                    <h6 class="text-sm text-5 font-light">Date and Time</h6>
+                </header>
+                <article class="w-full mb-2 flex"
+                        x-data="{ startId: $id('date-input'), endId: $id('date-input') }"
+                >
+                    <label :for="startId" class="grow mr-2">
+                        <span class="text-sm text-5">Start</span>
+                        <input class="tl-input"
+                           name="newStartDate"
+                           :id="startId"
+                           x-change-set-listen="changeSet.startDate"
+                           x-on-change-set-update="$el._flatpickr.setDate(flatpickr.formatDate(changeSet.get().startDate, 'Y-m-d H:i'))"
+                           x-init="flatpickr($el, {enableTime: true, time_24hr: true, altInput: true, altFormat:'Y-m-d H:i', dateFormat:'Z', allowInput: true, onChange: (date) => changeSet.patch('start', date[0].toString()) })"
+                       />
+                    </label>
+                    <template x-if="!lectureData.premiere && !lectureData.vodup">
+                        <label :for="endId">
+                            <span class="text-sm text-5">End</span>
+                            <span class="text-sm font-light opacity-75"
+                                  x-change-set-listen.text="changeSet.durationFormatted"
+                            >
+                            </span>
+                            <input class="tl-input"
+                               name="newEndTime"
+                               :id="endId"
+                               x-change-set-listen="changeSet.endDate"
+                               x-on-change-set-update="$el._flatpickr.setDate(flatpickr.formatDate(changeSet.get().endDate, 'H:i'))"
+                               x-init="flatpickr($el, {enableTime: true, noCalendar: true,  altInput: true, altFormat: 'H:i', time_24hr: true, allowInput: true, onChange: (date) => changeSet.patch('end', date.toString()) })"
+                            />
+                        </label>
+                    </template>
+                </article>
+
                 <header class="border-b dark:border-gray-600 w-full">
                     <h6 class="text-sm text-5 font-light">Title and Description</h6>
                 </header>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index fc65bc786..94d8e853b 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -187,8 +187,9 @@ export interface Lecture {
     startDateFormatted: string;
     startTimeFormatted: string;
     endDate: Date;
-    endDateFormatted: string;
     endTimeFormatted: string;
+    duration: number;
+    durationFormatted: string;
 
     // Clientside pseudo fields
     newCombinedVideo: File | null;
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 72ed57ad4..a323552b7 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -3,6 +3,12 @@ export interface DirtyState {
     dirtyKeys: string[];
 }
 
+export interface ChangeSetOptions<T> {
+    comparator?: (key: string, a: T, b: T) => boolean,
+    updateTransformer?: ComputedProperties<T>,
+    onUpdate?: (changeState: T, dirtyState: DirtyState) => void,
+};
+
 /**
  * ## ChangeSet Class
  *
@@ -57,16 +63,19 @@ export class ChangeSet<T> {
     private changeState: T;
     private readonly comparator?: PropertyComparator<T>;
     private onUpdate: ((changeState: T, dirtyState: DirtyState) => void)[];
+    private readonly changeStateTransformer?: ((changeState: T) => T);
+    private readonly stateTransformer?: ((changeState: T) => T);
 
     constructor(
         state: T,
-        comparator?: (key: string, a: T, b: T) => boolean,
-        onUpdate?: (changeState: T, dirtyState: DirtyState) => void,
+        { comparator, updateTransformer, onUpdate }: ChangeSetOptions<T> = {}
     ) {
         this.state = state;
         this.onUpdate = onUpdate ? [onUpdate] : [];
+        this.changeStateTransformer = updateTransformer !== undefined ? updateTransformer.create() : undefined;
+        this.stateTransformer = updateTransformer !== undefined ? updateTransformer.create() : undefined;
         this.comparator = comparator;
-        this.reset();
+        this.init();
     }
 
     /**
@@ -90,7 +99,7 @@ export class ChangeSet<T> {
      * @param key key to return
      * @param lastCommittedState if set to true, value of the last committed state is returned
      */
-    getValue(key: string, { lastCommittedState = false }): T {
+    getValue(key: string, { lastCommittedState = false } = {}): T {
         if (lastCommittedState) {
             return this.state[key];
         }
@@ -110,7 +119,7 @@ export class ChangeSet<T> {
      */
     set(val: T) {
         this.changeState = { ...val };
-        this.dispatchUpdate();
+        this.dispatchUpdate(false);
     }
 
     /**
@@ -125,7 +134,7 @@ export class ChangeSet<T> {
         if (isCommitted) {
             this.state = { ...this.state, [key]: val };
         }
-        this.dispatchUpdate();
+        this.dispatchUpdate(isCommitted);
     }
 
     /**
@@ -141,8 +150,7 @@ export class ChangeSet<T> {
                 this.changeState[key] = this.state[key];
             }
         }
-
-        this.dispatchUpdate();
+        this.dispatchUpdate(true);
     }
 
     /**
@@ -154,7 +162,15 @@ export class ChangeSet<T> {
             this.changeState[key] = this.state[key];
         }
         this.state = { ...this.changeState };
-        this.dispatchUpdate();
+        this.dispatchUpdate(true);
+    }
+
+    /**
+     * Init new state
+     */
+    init(): void {
+        this.changeState = { ...this.state };
+        this.dispatchUpdate(true);
     }
 
     /**
@@ -162,7 +178,7 @@ export class ChangeSet<T> {
      */
     reset(): void {
         this.changeState = { ...this.state };
-        this.dispatchUpdate();
+        this.dispatchUpdate(false);
     }
 
     /**
@@ -209,8 +225,17 @@ export class ChangeSet<T> {
 
     /**
      * Executes all onUpdate listeners
+     * @param stateChanged if state changed, state computed values are recalculated
      */
-    dispatchUpdate() {
+    dispatchUpdate(stateChanged: boolean) {
+        if (stateChanged && this.stateTransformer) {
+            this.state = this.stateTransformer(this.state);
+        }
+
+        if (this.changeStateTransformer) {
+            this.changeState = this.changeStateTransformer(this.changeState);
+        }
+
         if (this.onUpdate.length > 0) {
             const dirtyKeys = this.changedKeys();
             for (const onUpdate of this.onUpdate) {
@@ -257,3 +282,34 @@ export function comparatorPipeline<T>(list: PropertyComparator<T>[]): PropertyCo
         return null;
     };
 }
+
+export type ComputedPropertyTransformer<T> = ((state: T) => T);
+export type ComputedPropertySubTransformer<T> = ((state: T, oldState: T) => T);
+
+export class ComputedProperties<T> {
+    private readonly computed: ComputedPropertySubTransformer<T>[];
+
+    constructor(computed: ComputedPropertySubTransformer<T>[]) {
+        this.computed = computed;
+    }
+
+    create(): ComputedPropertyTransformer<T> {
+        let oldState: T|null = null;
+        return (state: T) => {
+            for (const transformer of this.computed) {
+                state = transformer(state, oldState);
+            }
+            oldState = {...state};
+            return state;
+        };
+    }
+}
+
+export function computedProperty<T, R>(key: string, updater: (changeState: T, old: T|null) => R, deps: string[] = []): ComputedPropertySubTransformer<T> {
+    return (state: T, oldState: T|null) => {
+        if (oldState == null || deps.length == 0 || deps.some((k) => oldState[k] !== state[k])) {
+            state[key] = updater(state, oldState);
+        }
+        return state;
+    };
+}
\ No newline at end of file
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 6633bf78e..c460a0cb5 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -10,13 +10,13 @@ import {
 import { FileType } from "../edit-course";
 import { PostFormDataListener } from "../utilities/fetch-wrappers";
 
-const dateFormatOptions: Intl.DateTimeFormatOptions = {
+export const dateFormatOptions: Intl.DateTimeFormatOptions = {
     weekday: "long",
     year: "numeric",
     month: "short",
     day: "2-digit",
 };
-const timeFormatOptions: Intl.DateTimeFormatOptions = {
+export const timeFormatOptions: Intl.DateTimeFormatOptions = {
     hour: "2-digit",
     minute: "2-digit",
 };
@@ -36,14 +36,6 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
 
             s.videoSections = (s.videoSections ?? []).sort(videoSectionSort);
 
-            s.startDate = new Date(s.start);
-            s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
-            s.startTimeFormatted = s.startDate.toLocaleTimeString("en-US", timeFormatOptions);
-
-            s.endDate = new Date(s.end);
-            s.endDateFormatted = s.endDate.toLocaleDateString("en-US", dateFormatOptions);
-            s.endTimeFormatted = s.endDate.toLocaleTimeString("en-US", timeFormatOptions);
-
             s.newCombinedVideo = null;
             s.newPresentationVideo = null;
             s.newCameraVideo = null;
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index c517000c6..74d798dcd 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -15,9 +15,17 @@ import {
     videoSectionSort,
     videoSectionTimestamp,
 } from "./api/admin-lecture-list";
-import { ChangeSet, comparatorPipeline, ignoreKeys, singleProperty } from "./change-set";
+import {
+    ChangeSet,
+    comparatorPipeline, ComputedProperties,
+    computedProperties,
+    computedProperty,
+    ignoreKeys,
+    singleProperty
+} from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 import { uploadFile } from "./utilities/fetch-wrappers";
+import {dateFormatOptions, timeFormatOptions} from "./data-store/admin-lecture-list";
 
 export enum UIEditMode {
     none,
@@ -141,10 +149,42 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 }),
             ]);
 
+            const computedFields = new ComputedProperties([
+                computedProperty<Lecture, Date>("startDate", (changeSet) => {
+                    return new Date(changeSet.start);
+                }, ["start"]),
+                computedProperty<Lecture, string>("startDateFormatted", (changeSet) => {
+                    return changeSet.startDate.toLocaleDateString("en-US", dateFormatOptions);
+                }, ["start"]),
+                computedProperty<Lecture, string>("startTimeFormatted", (changeSet) => {
+                    return changeSet.startDate.toLocaleDateString("en-US", timeFormatOptions);
+                }, ["start"]),
+                computedProperty<Lecture, Date>("endDate", (changeSet) => {
+                    return new Date(changeSet.end);
+                }, ["end"]),
+                computedProperty<Lecture, string>("endTimeFormatted", (changeSet) => {
+                    return changeSet.endDate.toLocaleTimeString("en-US", timeFormatOptions);
+                }, ["end"]),
+                computedProperty<Lecture, number>("duration", (changeSet) => {
+                    // To ignore day differences
+                    const normalizedEndDate = new Date(changeSet.startDate.getTime());
+                    normalizedEndDate.setHours(changeSet.endDate.getHours())
+                    normalizedEndDate.setMinutes(changeSet.endDate.getMinutes())
+                    return normalizedEndDate.getTime() - changeSet.startDate.getTime();
+                }, ["start", "end"]),
+                computedProperty<Lecture, string>("durationFormatted", (changeSet) => {
+                    return this.generateFormattedDuration(changeSet);
+                }, ["start", "end"]),
+            ]);
+
             // This tracks changes that are not saved yet
-            this.changeSet = new ChangeSet<Lecture>(lecture, customComparator, (data, dirtyState) => {
-                this.lectureData = data;
-                this.isDirty = dirtyState.isDirty;
+            this.changeSet = new ChangeSet<Lecture>(lecture, {
+                comparator: customComparator,
+                updateTransformer: computedFields,
+                onUpdate: (data, dirtyState) => {
+                    this.lectureData = data;
+                    this.isDirty = dirtyState.isDirty;
+                },
             });
 
             // This updates the state live in background
@@ -218,6 +258,23 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             DataStore.adminLectureList.deleteAttachment(this.lectureData.courseId, this.lectureData.lectureId, id);
         },
 
+        generateFormattedDuration(lecture: Lecture): string {
+            if (lecture.duration <= 0) {
+                return "invalid";
+            }
+            const duration = lecture.duration / 1000 / 60
+            const hours = Math.floor(duration / 60);
+            const minutes = duration - hours * 60;
+            let res = "";
+            if (hours > 0) {
+                res += `${hours}h `;
+            }
+            if (minutes > 0) {
+                res += `${minutes}min`;
+            }
+            return res;
+        },
+
         friendlySectionTimestamp(section: VideoSection): string {
             return videoSectionFriendlyTimestamp(section);
         },

From 3a5743c8ca7e78b3ae3aecd7d8671f182d4eaafc Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Wed, 27 Sep 2023 16:51:04 +0200
Subject: [PATCH 64/77] added some thorttleing

---
 web/ts/change-set.ts  | 36 ++++++++++++++++++++++++++++--------
 web/ts/edit-course.ts |  4 ++--
 web/ts/throttle.ts    | 14 ++++++++++++++
 3 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 web/ts/throttle.ts

diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index a323552b7..84f3c896b 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -1,3 +1,5 @@
+import {throttle, ThrottleFunc} from "./throttle";
+
 export interface DirtyState {
     isDirty: boolean;
     dirtyKeys: string[];
@@ -7,6 +9,7 @@ export interface ChangeSetOptions<T> {
     comparator?: (key: string, a: T, b: T) => boolean,
     updateTransformer?: ComputedProperties<T>,
     onUpdate?: (changeState: T, dirtyState: DirtyState) => void,
+    updateThrottle?: number,
 };
 
 /**
@@ -66,15 +69,20 @@ export class ChangeSet<T> {
     private readonly changeStateTransformer?: ((changeState: T) => T);
     private readonly stateTransformer?: ((changeState: T) => T);
 
+    private readonly throttledDispatchUpdateNoStateChanged?: ThrottleFunc;
+    private readonly throttledDispatchUpdateStateChanged?: ThrottleFunc;
+
     constructor(
         state: T,
-        { comparator, updateTransformer, onUpdate }: ChangeSetOptions<T> = {}
+        { comparator, updateTransformer, onUpdate, updateThrottle = 40 }: ChangeSetOptions<T> = {}
     ) {
         this.state = state;
         this.onUpdate = onUpdate ? [onUpdate] : [];
         this.changeStateTransformer = updateTransformer !== undefined ? updateTransformer.create() : undefined;
         this.stateTransformer = updateTransformer !== undefined ? updateTransformer.create() : undefined;
         this.comparator = comparator;
+        this.throttledDispatchUpdateNoStateChanged = throttle(() => this._dispatchUpdate(false), updateThrottle);
+        this.throttledDispatchUpdateStateChanged = throttle(() => this._dispatchUpdate(true), updateThrottle);
         this.init();
     }
 
@@ -119,7 +127,7 @@ export class ChangeSet<T> {
      */
     set(val: T) {
         this.changeState = { ...val };
-        this.dispatchUpdate(false);
+        this.dispatchUpdateThrottled(false);
     }
 
     /**
@@ -134,7 +142,7 @@ export class ChangeSet<T> {
         if (isCommitted) {
             this.state = { ...this.state, [key]: val };
         }
-        this.dispatchUpdate(isCommitted);
+        this.dispatchUpdateThrottled(isCommitted);
     }
 
     /**
@@ -150,7 +158,7 @@ export class ChangeSet<T> {
                 this.changeState[key] = this.state[key];
             }
         }
-        this.dispatchUpdate(true);
+        this.dispatchUpdateThrottled(true);
     }
 
     /**
@@ -162,7 +170,7 @@ export class ChangeSet<T> {
             this.changeState[key] = this.state[key];
         }
         this.state = { ...this.changeState };
-        this.dispatchUpdate(true);
+        this.dispatchUpdateThrottled(true);
     }
 
     /**
@@ -170,7 +178,7 @@ export class ChangeSet<T> {
      */
     init(): void {
         this.changeState = { ...this.state };
-        this.dispatchUpdate(true);
+        this.dispatchUpdateThrottled(true);
     }
 
     /**
@@ -178,7 +186,7 @@ export class ChangeSet<T> {
      */
     reset(): void {
         this.changeState = { ...this.state };
-        this.dispatchUpdate(false);
+        this.dispatchUpdateThrottled(false);
     }
 
     /**
@@ -227,7 +235,7 @@ export class ChangeSet<T> {
      * Executes all onUpdate listeners
      * @param stateChanged if state changed, state computed values are recalculated
      */
-    dispatchUpdate(stateChanged: boolean) {
+    _dispatchUpdate(stateChanged: boolean) {
         if (stateChanged && this.stateTransformer) {
             this.state = this.stateTransformer(this.state);
         }
@@ -246,6 +254,18 @@ export class ChangeSet<T> {
             }
         }
     }
+
+    /**
+     * Executes all onUpdate listeners
+     * @param stateChanged if state changed, state computed values are recalculated
+     */
+    dispatchUpdateThrottled(stateChanged: boolean) {
+        if (stateChanged && this.stateTransformer) {
+            return this.throttledDispatchUpdateStateChanged();
+        } else {
+            return this.throttledDispatchUpdateNoStateChanged();
+        }
+    }
 }
 
 export type PropertyComparator<T> = (key: string, a: T, b: T) => boolean | null;
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 74d798dcd..f4c1c1737 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -17,8 +17,8 @@ import {
 } from "./api/admin-lecture-list";
 import {
     ChangeSet,
-    comparatorPipeline, ComputedProperties,
-    computedProperties,
+    comparatorPipeline,
+    ComputedProperties,
     computedProperty,
     ignoreKeys,
     singleProperty
diff --git a/web/ts/throttle.ts b/web/ts/throttle.ts
new file mode 100644
index 000000000..d89dc3016
--- /dev/null
+++ b/web/ts/throttle.ts
@@ -0,0 +1,14 @@
+export type ThrottleFunc = ((...args: any[]) => void)
+
+export function throttle<T>(fun: ThrottleFunc, delay = 100): ThrottleFunc {
+    let lastInstance: NodeJS.Timeout|null = null;
+
+    return (...args): void => {
+        if (lastInstance !== null) {
+            clearTimeout(lastInstance);
+        }
+        lastInstance = setTimeout(() => {
+            fun(...args);
+        }, delay);
+    };
+}
\ No newline at end of file

From 233eff1d1d3235207782c2602f80f7f4d12f1bc0 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Wed, 27 Sep 2023 16:53:30 +0200
Subject: [PATCH 65/77] added throttling

---
 web/ts/change-set.ts | 6 +++---
 web/ts/throttle.ts   | 9 ++++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 84f3c896b..5ed2e6480 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -74,15 +74,15 @@ export class ChangeSet<T> {
 
     constructor(
         state: T,
-        { comparator, updateTransformer, onUpdate, updateThrottle = 40 }: ChangeSetOptions<T> = {}
+        { comparator, updateTransformer, onUpdate, updateThrottle = 50 }: ChangeSetOptions<T> = {}
     ) {
         this.state = state;
         this.onUpdate = onUpdate ? [onUpdate] : [];
         this.changeStateTransformer = updateTransformer !== undefined ? updateTransformer.create() : undefined;
         this.stateTransformer = updateTransformer !== undefined ? updateTransformer.create() : undefined;
         this.comparator = comparator;
-        this.throttledDispatchUpdateNoStateChanged = throttle(() => this._dispatchUpdate(false), updateThrottle);
-        this.throttledDispatchUpdateStateChanged = throttle(() => this._dispatchUpdate(true), updateThrottle);
+        this.throttledDispatchUpdateNoStateChanged = throttle(() => this._dispatchUpdate(false), updateThrottle, true);
+        this.throttledDispatchUpdateStateChanged = throttle(() => this._dispatchUpdate(true), updateThrottle, true);
         this.init();
     }
 
diff --git a/web/ts/throttle.ts b/web/ts/throttle.ts
index d89dc3016..24e9500e5 100644
--- a/web/ts/throttle.ts
+++ b/web/ts/throttle.ts
@@ -1,9 +1,16 @@
 export type ThrottleFunc = ((...args: any[]) => void)
 
-export function throttle<T>(fun: ThrottleFunc, delay = 100): ThrottleFunc {
+export function throttle<T>(fun: ThrottleFunc, delay = 100, skipFirst: boolean = false): ThrottleFunc {
     let lastInstance: NodeJS.Timeout|null = null;
+    let first: boolean = true;
 
     return (...args): void => {
+        if (skipFirst && first) {
+            first = false;
+            fun(...args);
+            return;
+        }
+
         if (lastInstance !== null) {
             clearTimeout(lastInstance);
         }

From 6003511107b6ad7fbc5d8fc2f6893d05c9f4d9c5 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Wed, 27 Sep 2023 17:13:04 +0200
Subject: [PATCH 66/77] fix start date comparator

---
 .../manage/lecture-management-card.gohtml     |  4 +-
 web/ts/change-set.ts                          | 36 ++++++++++---
 web/ts/edit-course.ts                         | 51 +++++++++++--------
 3 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index c7148987a..9a9629e8f 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -269,7 +269,7 @@
                            :id="startId"
                            x-change-set-listen="changeSet.startDate"
                            x-on-change-set-update="$el._flatpickr.setDate(flatpickr.formatDate(changeSet.get().startDate, 'Y-m-d H:i'))"
-                           x-init="flatpickr($el, {enableTime: true, time_24hr: true, altInput: true, altFormat:'Y-m-d H:i', dateFormat:'Z', allowInput: true, onChange: (date) => changeSet.patch('start', date[0].toString()) })"
+                           x-init="flatpickr($el, {enableTime: true, time_24hr: true, altInput: true, altFormat:'Y-m-d H:i', dateFormat:'Z', allowInput: true, onChange: (date) => changeSet.patch('start', flatpickr.formatDate(date[0], 'Z')) })"
                        />
                     </label>
                     <template x-if="!lectureData.premiere && !lectureData.vodup">
@@ -284,7 +284,7 @@
                                :id="endId"
                                x-change-set-listen="changeSet.endDate"
                                x-on-change-set-update="$el._flatpickr.setDate(flatpickr.formatDate(changeSet.get().endDate, 'H:i'))"
-                               x-init="flatpickr($el, {enableTime: true, noCalendar: true,  altInput: true, altFormat: 'H:i', time_24hr: true, allowInput: true, onChange: (date) => changeSet.patch('end', date.toString()) })"
+                               x-init="flatpickr($el, {enableTime: true, noCalendar: true, altInput: true, altFormat: 'H:i', time_24hr: true, allowInput: true, onChange: (date) => changeSet.patch('end', flatpickr.formatDate(date[0], 'Z')) })"
                             />
                         </label>
                     </template>
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 5ed2e6480..49cdfaac3 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -289,6 +289,15 @@ export function singleProperty<T>(key: string, comparator: SinglePropertyCompara
     };
 }
 
+export function multiProperty<T>(keys: string[], comparator: PropertyComparator<T>): PropertyComparator<T> {
+    return (_key: string, a, b) => {
+        if (!keys.includes(_key)) {
+            return null;
+        }
+        return comparator(_key, a, b);
+    };
+}
+
 export function comparatorPipeline<T>(list: PropertyComparator<T>[]): PropertyComparator<T> {
     return (key: string, a, b) => {
         for (const comparator of list) {
@@ -304,7 +313,10 @@ export function comparatorPipeline<T>(list: PropertyComparator<T>[]): PropertyCo
 }
 
 export type ComputedPropertyTransformer<T> = ((state: T) => T);
-export type ComputedPropertySubTransformer<T> = ((state: T, oldState: T) => T);
+export type ComputedPropertySubTransformer<T> = {
+    transform: ((state: T, oldState: T) => T);
+    key: string;
+};
 
 export class ComputedProperties<T> {
     private readonly computed: ComputedPropertySubTransformer<T>[];
@@ -317,19 +329,29 @@ export class ComputedProperties<T> {
         let oldState: T|null = null;
         return (state: T) => {
             for (const transformer of this.computed) {
-                state = transformer(state, oldState);
+                state = transformer.transform(state, oldState);
             }
             oldState = {...state};
             return state;
         };
     }
+
+    /**
+     * This is syntactic sugar to quickly ignore the computed keys in a changeset
+     */
+    ignore(): PropertyComparator<T> {
+        return ignoreKeys(this.computed.map((transformer) => transformer.key));
+    }
 }
 
 export function computedProperty<T, R>(key: string, updater: (changeState: T, old: T|null) => R, deps: string[] = []): ComputedPropertySubTransformer<T> {
-    return (state: T, oldState: T|null) => {
-        if (oldState == null || deps.length == 0 || deps.some((k) => oldState[k] !== state[k])) {
-            state[key] = updater(state, oldState);
-        }
-        return state;
+    return {
+        transform: (state: T, oldState: T|null) => {
+            if (oldState == null || deps.length == 0 || deps.some((k) => oldState[k] !== state[k])) {
+                state[key] = updater(state, oldState);
+            }
+            return state;
+        },
+        key,
     };
 }
\ No newline at end of file
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index f4c1c1737..8c0a59178 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -20,7 +20,7 @@ import {
     comparatorPipeline,
     ComputedProperties,
     computedProperty,
-    ignoreKeys,
+    ignoreKeys, multiProperty,
     singleProperty
 } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
@@ -128,27 +128,6 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          * AlpineJS init function which is called automatically in addition to 'x-init'
          */
         init() {
-            const customComparator = comparatorPipeline([
-                ignoreKeys(["files"]),
-                singleProperty("videoSections", (a: Lecture, b: Lecture): boolean | null => {
-                    // List length differs, something was removed or added
-                    if (a.videoSections.length !== b.videoSections.length) {
-                        return true;
-                    }
-
-                    // List length is the same but items do have no id, so they are new.
-                    if (
-                        a.videoSections.some(({ id }) => id === undefined) ||
-                        b.videoSections.some(({ id }) => id === undefined)
-                    ) {
-                        return true;
-                    }
-
-                    // A section has edited and different information now
-                    return a.videoSections.some((sA) => b.videoSections.some((sB) => videoSectionHasChanged(sA, sB)));
-                }),
-            ]);
-
             const computedFields = new ComputedProperties([
                 computedProperty<Lecture, Date>("startDate", (changeSet) => {
                     return new Date(changeSet.start);
@@ -177,6 +156,33 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 }, ["start", "end"]),
             ]);
 
+            const customComparator = comparatorPipeline([
+                computedFields.ignore(),
+                ignoreKeys(["files", "downloadableVods", "transcodingProgresses"]),
+                singleProperty("videoSections", (a: Lecture, b: Lecture): boolean | null => {
+                    // List length differs, something was removed or added
+                    if (a.videoSections.length !== b.videoSections.length) {
+                        return true;
+                    }
+
+                    // List length is the same but items do have no id, so they are new.
+                    if (
+                        a.videoSections.some(({ id }) => id === undefined) ||
+                        b.videoSections.some(({ id }) => id === undefined)
+                    ) {
+                        return true;
+                    }
+
+                    // A section has edited and different information now
+                    return a.videoSections.some((sA) => b.videoSections.some((sB) => videoSectionHasChanged(sA, sB)));
+                }),
+                multiProperty(["start", "end"], (key: string, a: Lecture, b: Lecture): boolean | null => {
+                    const dateA = new Date(a[key]);
+                    const dateB = new Date(b[key]);
+                    return dateA.getTime() !== dateB.getTime();
+                }),
+            ]);
+
             // This tracks changes that are not saved yet
             this.changeSet = new ChangeSet<Lecture>(lecture, {
                 comparator: customComparator,
@@ -184,6 +190,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 onUpdate: (data, dirtyState) => {
                     this.lectureData = data;
                     this.isDirty = dirtyState.isDirty;
+                    console.log(dirtyState, data.start)
                 },
             });
 

From fbe9497d4cb83fa67ca1c6677aa0288ac5bcac1a Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Wed, 27 Sep 2023 20:56:35 +0200
Subject: [PATCH 67/77] fix end date related to start date

---
 .../partial/course/manage/lecture-management-card.gohtml | 9 ++++++++-
 web/ts/edit-course.ts                                    | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 9a9629e8f..b0559759e 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -284,7 +284,14 @@
                                :id="endId"
                                x-change-set-listen="changeSet.endDate"
                                x-on-change-set-update="$el._flatpickr.setDate(flatpickr.formatDate(changeSet.get().endDate, 'H:i'))"
-                               x-init="flatpickr($el, {enableTime: true, noCalendar: true, altInput: true, altFormat: 'H:i', time_24hr: true, allowInput: true, onChange: (date) => changeSet.patch('end', flatpickr.formatDate(date[0], 'Z')) })"
+                               x-init="flatpickr($el, {enableTime: true, noCalendar: true, altInput: true, altFormat: 'H:i', time_24hr: true, allowInput: true, onChange: (date) => {
+                                    const startDate = changeSet.get().startDate;
+                                    let val = date[0];
+                                    val.setDate(startDate.getDate());
+                                    val.setMonth(startDate.getMonth());
+                                    val.setYear(startDate.getFullYear());
+                                    changeSet.patch('end', flatpickr.formatDate(val, 'Z'))
+                               }})"
                             />
                         </label>
                     </template>
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 8c0a59178..df1de7026 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -179,6 +179,10 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 multiProperty(["start", "end"], (key: string, a: Lecture, b: Lecture): boolean | null => {
                     const dateA = new Date(a[key]);
                     const dateB = new Date(b[key]);
+                    if (key == "end") {
+                        console.log(dateA);
+                        console.log(dateB);
+                    }
                     return dateA.getTime() !== dateB.getTime();
                 }),
             ]);

From 9d8640bf6e596612360a23b516e2a67a2f519456 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Wed, 27 Sep 2023 21:34:03 +0200
Subject: [PATCH 68/77] ad debug output and fix update handler leak

---
 web/assets/init-admin.js | 36 +++++++++++++-------------
 web/ts/change-set.ts     | 55 +++++++++++++++++++++++++++++++++++++++-
 web/ts/edit-course.ts    |  8 ++----
 3 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index f8802cd96..db34fa51d 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -179,20 +179,22 @@ document.addEventListener("alpine:init", () => {
      *    The detail property of the event object contains the new value of the specified field.
      */
     Alpine.directive("change-set-listen", (el, { expression, modifiers }, { effect, evaluate, cleanup }) => {
-        effect(() => {
-            const [changeSetExpression, fieldName = null] = expression.split(".");
-            const changeSet = evaluate(changeSetExpression);
+        const [changeSetExpression, fieldName = null] = expression.split(".");
+        let changeSet = evaluate(changeSetExpression);
 
-            const onChangeSetUpdateHandler = (data) => {
-                const value = fieldName != null ? data[fieldName] : data;
-                if (modifiers.includes("text")) {
-                    el.innerText = `${value}`;
-                }
-                if (modifiers.includes("value")) {
-                    el.value = value;
-                }
-                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value } }));
-            };
+        const onChangeSetUpdateHandler = (data) => {
+            const value = fieldName != null ? data[fieldName] : data;
+            if (modifiers.includes("text")) {
+                el.innerText = `${value}`;
+            }
+            if (modifiers.includes("value")) {
+                el.value = value;
+            }
+            el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value } }));
+        };
+
+        effect(() => {
+            changeSet = evaluate(changeSetExpression);
 
             if (!changeSet) {
                 return;
@@ -201,11 +203,11 @@ document.addEventListener("alpine:init", () => {
             changeSet.removeListener(onChangeSetUpdateHandler);
             onChangeSetUpdateHandler(changeSet.get());
             changeSet.listen(onChangeSetUpdateHandler);
-
-            cleanup(() => {
-                changeSet.removeListener(onChangeSetUpdateHandler);
-            })
         });
+
+        cleanup(() => {
+            changeSet.removeListener(onChangeSetUpdateHandler);
+        })
     });
 
     /**
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 49cdfaac3..19a2e9aeb 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -1,5 +1,14 @@
 import {throttle, ThrottleFunc} from "./throttle";
 
+export enum LogLevel {
+    none,
+    warn,
+    info,
+    debug,
+}
+
+const logLevelNames: string[] = ["None", "Warn", "Info", "Debug"];
+
 export interface DirtyState {
     isDirty: boolean;
     dirtyKeys: string[];
@@ -10,6 +19,7 @@ export interface ChangeSetOptions<T> {
     updateTransformer?: ComputedProperties<T>,
     onUpdate?: (changeState: T, dirtyState: DirtyState) => void,
     updateThrottle?: number,
+    logLevel?: LogLevel,
 };
 
 /**
@@ -72,10 +82,18 @@ export class ChangeSet<T> {
     private readonly throttledDispatchUpdateNoStateChanged?: ThrottleFunc;
     private readonly throttledDispatchUpdateStateChanged?: ThrottleFunc;
 
+    private readonly logLevel: LogLevel;
+    private lastLogTimestamp: number;
+    private static logIdCounter: number = 0;
+    private readonly logId: number;
+
     constructor(
         state: T,
-        { comparator, updateTransformer, onUpdate, updateThrottle = 50 }: ChangeSetOptions<T> = {}
+        { comparator, updateTransformer, onUpdate, updateThrottle = 5, logLevel = LogLevel.none }: ChangeSetOptions<T> = {}
     ) {
+        this.lastLogTimestamp = Date.now();
+        this.logLevel = logLevel;
+        this.logId = ChangeSet.logIdCounter++;
         this.state = state;
         this.onUpdate = onUpdate ? [onUpdate] : [];
         this.changeStateTransformer = updateTransformer !== undefined ? updateTransformer.create() : undefined;
@@ -91,6 +109,7 @@ export class ChangeSet<T> {
      * @param onUpdate
      */
     listen(onUpdate: (changeState: T, dirtyState: DirtyState) => void) {
+        this._log(LogLevel.debug, "Add Update Listener", { onUpdate });
         this.onUpdate.push(onUpdate);
     }
 
@@ -99,6 +118,7 @@ export class ChangeSet<T> {
      * @param onUpdate
      */
     removeListener(onUpdate: (changeState: T, dirtyState: DirtyState) => void) {
+        this._log(LogLevel.debug, "Remove Update Listener", { onUpdate });
         this.onUpdate = this.onUpdate.filter((o) => o !== onUpdate);
     }
 
@@ -126,6 +146,7 @@ export class ChangeSet<T> {
      * @param val
      */
     set(val: T) {
+        this._log(LogLevel.info, "Set ChangeState", { val });
         this.changeState = { ...val };
         this.dispatchUpdateThrottled(false);
     }
@@ -138,6 +159,7 @@ export class ChangeSet<T> {
      */
     /* eslint-disable @typescript-eslint/no-explicit-any */
     patch(key: string, val: any, { isCommitted = false }: { isCommitted?: boolean } = {}) {
+        this._log(LogLevel.info, "Patch State", { key, val, isCommitted });
         this.changeState = { ...this.changeState, [key]: val };
         if (isCommitted) {
             this.state = { ...this.state, [key]: val };
@@ -150,6 +172,7 @@ export class ChangeSet<T> {
      * @param state
      */
     updateState(state: T) {
+        this._log(LogLevel.info, "Update State", { state });
         const changedKeys = this.changedKeys();
         this.state = { ...state };
 
@@ -166,6 +189,7 @@ export class ChangeSet<T> {
      * @param discardKeys List of keys that should be discarded and not committed.
      */
     commit({ discardKeys = [] }: { discardKeys?: string[] } = {}): void {
+        this._log(LogLevel.info, "Perform Commit", { discardKeys });
         for (const key in discardKeys) {
             this.changeState[key] = this.state[key];
         }
@@ -177,6 +201,7 @@ export class ChangeSet<T> {
      * Init new state
      */
     init(): void {
+        this._log(LogLevel.info, "Perform Init");
         this.changeState = { ...this.state };
         this.dispatchUpdateThrottled(true);
     }
@@ -185,6 +210,7 @@ export class ChangeSet<T> {
      * Resets the change state to the state. Change state is the most current state afterwards.
      */
     reset(): void {
+        this._log(LogLevel.info, "Perform Reset");
         this.changeState = { ...this.state };
         this.dispatchUpdateThrottled(false);
     }
@@ -236,15 +262,20 @@ export class ChangeSet<T> {
      * @param stateChanged if state changed, state computed values are recalculated
      */
     _dispatchUpdate(stateChanged: boolean) {
+        this._log(LogLevel.info, "Dispatch Update", { stateChanged });
+
         if (stateChanged && this.stateTransformer) {
+            this._log(LogLevel.info, "Reevaluate Computed on State");
             this.state = this.stateTransformer(this.state);
         }
 
         if (this.changeStateTransformer) {
+            this._log(LogLevel.info, "Reevaluate Computed on ChangeState");
             this.changeState = this.changeStateTransformer(this.changeState);
         }
 
         if (this.onUpdate.length > 0) {
+            this._log(LogLevel.info, `Trigger ${this.onUpdate.length} onUpdate handler`);
             const dirtyKeys = this.changedKeys();
             for (const onUpdate of this.onUpdate) {
                 onUpdate(this.changeState, {
@@ -255,11 +286,33 @@ export class ChangeSet<T> {
         }
     }
 
+    /**
+     * Log Function that prints messages to console or discards them if the loglevel of changeSet is lower than the
+     * loglevel of the message
+     * @param level LogLevel of the message, if lower than changeSet's loglevel it will be discarded
+     * @param message The message to print to console
+     * @param payload Any payload object, "instance" is automatically attached if the changeSet loglevel is set to "debug"
+     */
+    _log(level: LogLevel, message: string, payload?: object) {
+        if (level <= this.logLevel) {
+            const ts = Date.now();
+            const tsDelta = ts - this.lastLogTimestamp;
+            this.lastLogTimestamp = ts;
+
+            if (this.logLevel === LogLevel.debug) {
+                payload = { ...(payload ?? {}), instance: this };
+            }
+
+            console.log(`[CHANGESET | ${this.logId.toString().padStart(4, "0")} | ${logLevelNames[level].padEnd(5, " ")}] ${message}`, payload ?? "", `[${tsDelta}ms]`);
+        }
+    }
+
     /**
      * Executes all onUpdate listeners
      * @param stateChanged if state changed, state computed values are recalculated
      */
     dispatchUpdateThrottled(stateChanged: boolean) {
+        this._log(LogLevel.debug, "Throttled: Dispatch Update", { stateChanged });
         if (stateChanged && this.stateTransformer) {
             return this.throttledDispatchUpdateStateChanged();
         } else {
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index df1de7026..6457fedd5 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -20,7 +20,7 @@ import {
     comparatorPipeline,
     ComputedProperties,
     computedProperty,
-    ignoreKeys, multiProperty,
+    ignoreKeys, LogLevel, multiProperty,
     singleProperty
 } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
@@ -179,22 +179,18 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 multiProperty(["start", "end"], (key: string, a: Lecture, b: Lecture): boolean | null => {
                     const dateA = new Date(a[key]);
                     const dateB = new Date(b[key]);
-                    if (key == "end") {
-                        console.log(dateA);
-                        console.log(dateB);
-                    }
                     return dateA.getTime() !== dateB.getTime();
                 }),
             ]);
 
             // This tracks changes that are not saved yet
             this.changeSet = new ChangeSet<Lecture>(lecture, {
+                logLevel: LogLevel.debug,
                 comparator: customComparator,
                 updateTransformer: computedFields,
                 onUpdate: (data, dirtyState) => {
                     this.lectureData = data;
                     this.isDirty = dirtyState.isDirty;
-                    console.log(dirtyState, data.start)
                 },
             });
 

From 106370809281e27c315cc1a7813fb38c874430d1 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Wed, 27 Sep 2023 21:37:24 +0200
Subject: [PATCH 69/77] UI looks great

---
 web/ts/change-set.ts  | 2 +-
 web/ts/edit-course.ts | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 19a2e9aeb..752d9d060 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -89,7 +89,7 @@ export class ChangeSet<T> {
 
     constructor(
         state: T,
-        { comparator, updateTransformer, onUpdate, updateThrottle = 5, logLevel = LogLevel.none }: ChangeSetOptions<T> = {}
+        { comparator, updateTransformer, onUpdate, updateThrottle = 50, logLevel = LogLevel.none }: ChangeSetOptions<T> = {}
     ) {
         this.lastLogTimestamp = Date.now();
         this.logLevel = logLevel;
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 6457fedd5..528f53fd5 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -185,7 +185,8 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
 
             // This tracks changes that are not saved yet
             this.changeSet = new ChangeSet<Lecture>(lecture, {
-                logLevel: LogLevel.debug,
+                //logLevel: LogLevel.debug,
+                updateThrottle: 20,
                 comparator: customComparator,
                 updateTransformer: computedFields,
                 onUpdate: (data, dirtyState) => {

From 2e3ce8c6f86c21aa522d176ebc3a93d46f27df75 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Wed, 27 Sep 2023 21:44:04 +0200
Subject: [PATCH 70/77] :)

---
 web/ts/change-set.ts  | 53 +++++++++++++++++---------
 web/ts/edit-course.ts | 88 +++++++++++++++++++++++++++++--------------
 web/ts/throttle.ts    |  7 ++--
 3 files changed, 98 insertions(+), 50 deletions(-)

diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index 752d9d060..bb39fca92 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -1,4 +1,4 @@
-import {throttle, ThrottleFunc} from "./throttle";
+import { throttle, ThrottleFunc } from "./throttle";
 
 export enum LogLevel {
     none,
@@ -15,12 +15,12 @@ export interface DirtyState {
 }
 
 export interface ChangeSetOptions<T> {
-    comparator?: (key: string, a: T, b: T) => boolean,
-    updateTransformer?: ComputedProperties<T>,
-    onUpdate?: (changeState: T, dirtyState: DirtyState) => void,
-    updateThrottle?: number,
-    logLevel?: LogLevel,
-};
+    comparator?: (key: string, a: T, b: T) => boolean;
+    updateTransformer?: ComputedProperties<T>;
+    onUpdate?: (changeState: T, dirtyState: DirtyState) => void;
+    updateThrottle?: number;
+    logLevel?: LogLevel;
+}
 
 /**
  * ## ChangeSet Class
@@ -76,8 +76,8 @@ export class ChangeSet<T> {
     private changeState: T;
     private readonly comparator?: PropertyComparator<T>;
     private onUpdate: ((changeState: T, dirtyState: DirtyState) => void)[];
-    private readonly changeStateTransformer?: ((changeState: T) => T);
-    private readonly stateTransformer?: ((changeState: T) => T);
+    private readonly changeStateTransformer?: (changeState: T) => T;
+    private readonly stateTransformer?: (changeState: T) => T;
 
     private readonly throttledDispatchUpdateNoStateChanged?: ThrottleFunc;
     private readonly throttledDispatchUpdateStateChanged?: ThrottleFunc;
@@ -89,7 +89,13 @@ export class ChangeSet<T> {
 
     constructor(
         state: T,
-        { comparator, updateTransformer, onUpdate, updateThrottle = 50, logLevel = LogLevel.none }: ChangeSetOptions<T> = {}
+        {
+            comparator,
+            updateTransformer,
+            onUpdate,
+            updateThrottle = 50,
+            logLevel = LogLevel.none,
+        }: ChangeSetOptions<T> = {},
     ) {
         this.lastLogTimestamp = Date.now();
         this.logLevel = logLevel;
@@ -303,7 +309,14 @@ export class ChangeSet<T> {
                 payload = { ...(payload ?? {}), instance: this };
             }
 
-            console.log(`[CHANGESET | ${this.logId.toString().padStart(4, "0")} | ${logLevelNames[level].padEnd(5, " ")}] ${message}`, payload ?? "", `[${tsDelta}ms]`);
+            console.log(
+                `[CHANGESET | ${this.logId.toString().padStart(4, "0")} | ${logLevelNames[level].padEnd(
+                    5,
+                    " ",
+                )}] ${message}`,
+                payload ?? "",
+                `[${tsDelta}ms]`,
+            );
         }
     }
 
@@ -365,9 +378,9 @@ export function comparatorPipeline<T>(list: PropertyComparator<T>[]): PropertyCo
     };
 }
 
-export type ComputedPropertyTransformer<T> = ((state: T) => T);
+export type ComputedPropertyTransformer<T> = (state: T) => T;
 export type ComputedPropertySubTransformer<T> = {
-    transform: ((state: T, oldState: T) => T);
+    transform: (state: T, oldState: T) => T;
     key: string;
 };
 
@@ -379,12 +392,12 @@ export class ComputedProperties<T> {
     }
 
     create(): ComputedPropertyTransformer<T> {
-        let oldState: T|null = null;
+        let oldState: T | null = null;
         return (state: T) => {
             for (const transformer of this.computed) {
                 state = transformer.transform(state, oldState);
             }
-            oldState = {...state};
+            oldState = { ...state };
             return state;
         };
     }
@@ -397,9 +410,13 @@ export class ComputedProperties<T> {
     }
 }
 
-export function computedProperty<T, R>(key: string, updater: (changeState: T, old: T|null) => R, deps: string[] = []): ComputedPropertySubTransformer<T> {
+export function computedProperty<T, R>(
+    key: string,
+    updater: (changeState: T, old: T | null) => R,
+    deps: string[] = [],
+): ComputedPropertySubTransformer<T> {
     return {
-        transform: (state: T, oldState: T|null) => {
+        transform: (state: T, oldState: T | null) => {
             if (oldState == null || deps.length == 0 || deps.some((k) => oldState[k] !== state[k])) {
                 state[key] = updater(state, oldState);
             }
@@ -407,4 +424,4 @@ export function computedProperty<T, R>(key: string, updater: (changeState: T, ol
         },
         key,
     };
-}
\ No newline at end of file
+}
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 528f53fd5..227ee4cd3 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -20,12 +20,14 @@ import {
     comparatorPipeline,
     ComputedProperties,
     computedProperty,
-    ignoreKeys, LogLevel, multiProperty,
-    singleProperty
+    ignoreKeys,
+    LogLevel,
+    multiProperty,
+    singleProperty,
 } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
 import { uploadFile } from "./utilities/fetch-wrappers";
-import {dateFormatOptions, timeFormatOptions} from "./data-store/admin-lecture-list";
+import { dateFormatOptions, timeFormatOptions } from "./data-store/admin-lecture-list";
 
 export enum UIEditMode {
     none,
@@ -129,31 +131,59 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          */
         init() {
             const computedFields = new ComputedProperties([
-                computedProperty<Lecture, Date>("startDate", (changeSet) => {
-                    return new Date(changeSet.start);
-                }, ["start"]),
-                computedProperty<Lecture, string>("startDateFormatted", (changeSet) => {
-                    return changeSet.startDate.toLocaleDateString("en-US", dateFormatOptions);
-                }, ["start"]),
-                computedProperty<Lecture, string>("startTimeFormatted", (changeSet) => {
-                    return changeSet.startDate.toLocaleDateString("en-US", timeFormatOptions);
-                }, ["start"]),
-                computedProperty<Lecture, Date>("endDate", (changeSet) => {
-                    return new Date(changeSet.end);
-                }, ["end"]),
-                computedProperty<Lecture, string>("endTimeFormatted", (changeSet) => {
-                    return changeSet.endDate.toLocaleTimeString("en-US", timeFormatOptions);
-                }, ["end"]),
-                computedProperty<Lecture, number>("duration", (changeSet) => {
-                    // To ignore day differences
-                    const normalizedEndDate = new Date(changeSet.startDate.getTime());
-                    normalizedEndDate.setHours(changeSet.endDate.getHours())
-                    normalizedEndDate.setMinutes(changeSet.endDate.getMinutes())
-                    return normalizedEndDate.getTime() - changeSet.startDate.getTime();
-                }, ["start", "end"]),
-                computedProperty<Lecture, string>("durationFormatted", (changeSet) => {
-                    return this.generateFormattedDuration(changeSet);
-                }, ["start", "end"]),
+                computedProperty<Lecture, Date>(
+                    "startDate",
+                    (changeSet) => {
+                        return new Date(changeSet.start);
+                    },
+                    ["start"],
+                ),
+                computedProperty<Lecture, string>(
+                    "startDateFormatted",
+                    (changeSet) => {
+                        return changeSet.startDate.toLocaleDateString("en-US", dateFormatOptions);
+                    },
+                    ["start"],
+                ),
+                computedProperty<Lecture, string>(
+                    "startTimeFormatted",
+                    (changeSet) => {
+                        return changeSet.startDate.toLocaleDateString("en-US", timeFormatOptions);
+                    },
+                    ["start"],
+                ),
+                computedProperty<Lecture, Date>(
+                    "endDate",
+                    (changeSet) => {
+                        return new Date(changeSet.end);
+                    },
+                    ["end"],
+                ),
+                computedProperty<Lecture, string>(
+                    "endTimeFormatted",
+                    (changeSet) => {
+                        return changeSet.endDate.toLocaleTimeString("en-US", timeFormatOptions);
+                    },
+                    ["end"],
+                ),
+                computedProperty<Lecture, number>(
+                    "duration",
+                    (changeSet) => {
+                        // To ignore day differences
+                        const normalizedEndDate = new Date(changeSet.startDate.getTime());
+                        normalizedEndDate.setHours(changeSet.endDate.getHours());
+                        normalizedEndDate.setMinutes(changeSet.endDate.getMinutes());
+                        return normalizedEndDate.getTime() - changeSet.startDate.getTime();
+                    },
+                    ["start", "end"],
+                ),
+                computedProperty<Lecture, string>(
+                    "durationFormatted",
+                    (changeSet) => {
+                        return this.generateFormattedDuration(changeSet);
+                    },
+                    ["start", "end"],
+                ),
             ]);
 
             const customComparator = comparatorPipeline([
@@ -270,7 +300,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             if (lecture.duration <= 0) {
                 return "invalid";
             }
-            const duration = lecture.duration / 1000 / 60
+            const duration = lecture.duration / 1000 / 60;
             const hours = Math.floor(duration / 60);
             const minutes = duration - hours * 60;
             let res = "";
diff --git a/web/ts/throttle.ts b/web/ts/throttle.ts
index 24e9500e5..d3ebac9f6 100644
--- a/web/ts/throttle.ts
+++ b/web/ts/throttle.ts
@@ -1,7 +1,8 @@
-export type ThrottleFunc = ((...args: any[]) => void)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ThrottleFunc = (...args: any[]) => void;
 
 export function throttle<T>(fun: ThrottleFunc, delay = 100, skipFirst: boolean = false): ThrottleFunc {
-    let lastInstance: NodeJS.Timeout|null = null;
+    let lastInstance: NodeJS.Timeout | null = null;
     let first: boolean = true;
 
     return (...args): void => {
@@ -18,4 +19,4 @@ export function throttle<T>(fun: ThrottleFunc, delay = 100, skipFirst: boolean =
             fun(...args);
         }, delay);
     };
-}
\ No newline at end of file
+}

From 957dae169b023d110ab324c6d7a2f65502bd5287 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Wed, 27 Sep 2023 22:02:40 +0200
Subject: [PATCH 71/77] chack if legal end date

---
 .../partial/course/manage/lecture-management-card.gohtml  | 2 +-
 web/ts/change-set.ts                                      | 2 +-
 web/ts/edit-course.ts                                     | 8 +++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index b0559759e..17935dfea 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -437,7 +437,7 @@
                     </button>
                     <button
                             @click="saveEdit();"
-                            :disabled="!isDirty || isSaving"
+                            :disabled="!isDirty || isSaving || isInvalid"
                             class="px-8 py-3 text-2 rounded text-white bg-indigo-500 hover:bg-indigo-600 disabled:opacity-20 disabled:hover:bg-indigo-500"
                             x-text="isSaving ? 'loading ...' : (uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
                     ></button>
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index bb39fca92..7b5bf71c5 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -93,7 +93,7 @@ export class ChangeSet<T> {
             comparator,
             updateTransformer,
             onUpdate,
-            updateThrottle = 50,
+            updateThrottle = 0,
             logLevel = LogLevel.none,
         }: ChangeSetOptions<T> = {},
     ) {
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 227ee4cd3..55bbf0e54 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -121,6 +121,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
         uiEditMode: UIEditMode.none,
         isDirty: false,
         isSaving: false,
+        isInvalid: false,
 
         // Lecture Data
         changeSet: null as ChangeSet<Lecture> | null,
@@ -216,12 +217,12 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             // This tracks changes that are not saved yet
             this.changeSet = new ChangeSet<Lecture>(lecture, {
                 //logLevel: LogLevel.debug,
-                updateThrottle: 20,
                 comparator: customComparator,
                 updateTransformer: computedFields,
                 onUpdate: (data, dirtyState) => {
                     this.lectureData = data;
                     this.isDirty = dirtyState.isDirty;
+                    this.isInvalid = data.duration <= 0;
                 },
             });
 
@@ -430,6 +431,11 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                     },
                 });
 
+                // Save new date and time
+                if (changedKeys.includes("start") || changedKeys.includes("end")) {
+
+                }
+
                 // Saving VideoSections
                 if (changedKeys.includes("videoSections")) {
                     const oldVideoSections = this.changeSet.getValue("videoSections", { lastCommittedState: true });

From 3aa37dff459e7a5bbcac4ab32e816eedc8926de7 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Wed, 27 Sep 2023 22:20:16 +0200
Subject: [PATCH 72/77] add frontend calls

---
 web/ts/api/admin-lecture-list.ts        | 18 ++++++++++++++++++
 web/ts/data-store/admin-lecture-list.ts | 18 +++++++++++++++++-
 web/ts/edit-course.ts                   |  4 ++--
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 94d8e853b..bdd4fd82a 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -17,6 +17,11 @@ export interface UpdateLectureMetaRequest {
     isChatEnabled?: boolean;
 }
 
+export interface UpdateLectureDateTimeRequest {
+    startDate: Date;
+    endTime: Date;
+}
+
 export class LectureFile {
     readonly id: number;
     readonly fileType: number;
@@ -282,6 +287,19 @@ export const AdminLectureList = {
         await post(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
     },
 
+    /**
+     * Updates date time of a lecture.
+     * @param courseId
+     * @param lectureId
+     * @param request
+     */
+    updateDateTime: async function (courseId: number, lectureId: number, request: UpdateLectureDateTimeRequest) {
+        await post(`/api/course/${courseId}/updateDateTime/${lectureId}`, {
+            startDate: request.startDate,
+            endTime: request.endTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+        });
+    },
+
     /**
      * Add sections to a lecture
      * @param lectureId
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index c460a0cb5..b637d57d4 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -2,7 +2,7 @@ import { StreamableMapProvider } from "./provider";
 import {
     AdminLectureList,
     Lecture,
-    LectureFile,
+    LectureFile, UpdateLectureDateTimeRequest,
     UpdateLectureMetaRequest,
     VideoSection,
     videoSectionSort,
@@ -113,6 +113,22 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
+    async updateDateTime(courseId: number, lectureId: number, payload: UpdateLectureDateTimeRequest) {
+        await AdminLectureList.updateDateTime(courseId, lectureId, payload);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    start: payload.startDate,
+                    end: payload.endTime,
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
     async uploadAttachmentFile(courseId: number, lectureId: number, file: File) {
         const res = await AdminLectureList.uploadAttachmentFile(courseId, lectureId, file);
         const newFile = new LectureFile({
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 55bbf0e54..98cb20f4f 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -413,7 +413,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          * Save changes send them to backend and commit change set.
          */
         async saveEdit() {
-            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled, videoSections } =
+            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled, videoSections, start, end } =
                 this.lectureData;
             const changedKeys = this.changeSet.changedKeys();
 
@@ -433,7 +433,7 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
 
                 // Save new date and time
                 if (changedKeys.includes("start") || changedKeys.includes("end")) {
-
+                    await DataStore.adminLectureList.updateDateTime(courseId, lectureId, { startDate: new Date(start), endTime: new Date(end) });
                 }
 
                 // Saving VideoSections

From a1f8d82be25d2e94a8137c0cda18e1f5573d51f1 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 28 Sep 2023 00:03:33 +0200
Subject: [PATCH 73/77] changing works

---
 api/courses.go                                | 38 +++++++++++++++++++
 .../manage/lecture-management-card.gohtml     |  2 +-
 web/ts/api/admin-lecture-list.ts              | 13 +++----
 web/ts/data-store/admin-lecture-list.ts       | 11 +++---
 web/ts/edit-course.ts                         |  7 +++-
 5 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/api/courses.go b/api/courses.go
index 7502d87f5..c092cb4d8 100644
--- a/api/courses.go
+++ b/api/courses.go
@@ -70,6 +70,7 @@ func configGinCourseRouter(router *gin.Engine, daoWrapper dao.DaoWrapper) {
 			courses.POST("/deleteLectures", routes.deleteLectures)
 			courses.POST("/renameLecture/:streamID", routes.renameLecture)
 			courses.POST("/updateLectureSeries/:streamID", routes.updateLectureSeries)
+			courses.POST("/updateStartEnd/:streamID", routes.updateStartEnd)
 			courses.PUT("/updateDescription/:streamID", routes.updateDescription)
 			courses.DELETE("/deleteLectureSeries/:streamID", routes.deleteLectureSeries)
 			courses.POST("/submitCut", routes.submitCut)
@@ -991,6 +992,43 @@ func (r coursesRoutes) updateDescription(c *gin.Context) {
 	}
 }
 
+type changeDateTime struct {
+	Start time.Time `json:"start" binding:"required"`
+	End   time.Time `json:"end" binding:"required"`
+}
+
+func (r coursesRoutes) updateStartEnd(c *gin.Context) {
+	var req changeDateTime
+	if err := c.Bind(&req); err != nil {
+		_ = c.Error(tools.RequestError{
+			Status:        http.StatusBadRequest,
+			CustomMessage: "invalid body",
+			Err:           err,
+		})
+		return
+	}
+
+	stream, err := r.StreamsDao.GetStreamByID(context.Background(), c.Param("streamID"))
+	if err != nil {
+		_ = c.Error(tools.RequestError{
+			Status:        http.StatusNotFound,
+			CustomMessage: "can not find stream",
+			Err:           err,
+		})
+		return
+	}
+	stream.Start = req.Start
+	stream.End = req.End
+	if err = r.StreamsDao.UpdateStream(stream); err != nil {
+		_ = c.Error(tools.RequestError{
+			Status:        http.StatusInternalServerError,
+			CustomMessage: "couldn't update lecture Description",
+			Err:           err,
+		})
+		return
+	}
+}
+
 func (r coursesRoutes) renameLecture(c *gin.Context) {
 	sIDInt, err := strconv.Atoi(c.Param("streamID"))
 	if err != nil {
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 17935dfea..06b823270 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -289,7 +289,7 @@
                                     let val = date[0];
                                     val.setDate(startDate.getDate());
                                     val.setMonth(startDate.getMonth());
-                                    val.setYear(startDate.getFullYear());
+                                    val.setFullYear(startDate.getFullYear());
                                     changeSet.patch('end', flatpickr.formatDate(val, 'Z'))
                                }})"
                             />
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index bdd4fd82a..5f5ae7578 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -17,9 +17,9 @@ export interface UpdateLectureMetaRequest {
     isChatEnabled?: boolean;
 }
 
-export interface UpdateLectureDateTimeRequest {
-    startDate: Date;
-    endTime: Date;
+export interface UpdateLectureStartEndRequest {
+    start: Date;
+    end: Date;
 }
 
 export class LectureFile {
@@ -293,11 +293,8 @@ export const AdminLectureList = {
      * @param lectureId
      * @param request
      */
-    updateDateTime: async function (courseId: number, lectureId: number, request: UpdateLectureDateTimeRequest) {
-        await post(`/api/course/${courseId}/updateDateTime/${lectureId}`, {
-            startDate: request.startDate,
-            endTime: request.endTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
-        });
+    updateStartEnd: async function (courseId: number, lectureId: number, { start, end }: UpdateLectureStartEndRequest) {
+        await post(`/api/course/${courseId}/updateStartEnd/${lectureId}`, { start, end });
     },
 
     /**
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index b637d57d4..c5295e95d 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -2,8 +2,9 @@ import { StreamableMapProvider } from "./provider";
 import {
     AdminLectureList,
     Lecture,
-    LectureFile, UpdateLectureDateTimeRequest,
+    LectureFile,
     UpdateLectureMetaRequest,
+    UpdateLectureStartEndRequest,
     VideoSection,
     videoSectionSort,
 } from "../api/admin-lecture-list";
@@ -113,15 +114,15 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
-    async updateDateTime(courseId: number, lectureId: number, payload: UpdateLectureDateTimeRequest) {
-        await AdminLectureList.updateDateTime(courseId, lectureId, payload);
+    async updateStartEnd(courseId: number, lectureId: number, payload: UpdateLectureStartEndRequest) {
+        await AdminLectureList.updateStartEnd(courseId, lectureId, payload);
 
         this.data[courseId] = (await this.getData(courseId)).map((s) => {
             if (s.lectureId === lectureId) {
                 return {
                     ...s,
-                    start: payload.startDate,
-                    end: payload.endTime,
+                    start: payload.start,
+                    end: payload.end,
                 };
             }
             return s;
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 98cb20f4f..bb48bc6d5 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -433,7 +433,12 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
 
                 // Save new date and time
                 if (changedKeys.includes("start") || changedKeys.includes("end")) {
-                    await DataStore.adminLectureList.updateDateTime(courseId, lectureId, { startDate: new Date(start), endTime: new Date(end) });
+                    const startDate = new Date(start);
+                    const endDate = new Date(end)
+                    endDate.setFullYear(startDate.getFullYear());
+                    endDate.setMonth(startDate.getMonth());
+                    endDate.setDate(startDate.getDate());
+                    await DataStore.adminLectureList.updateStartEnd(courseId, lectureId, { start: startDate, end: endDate });
                 }
 
                 // Saving VideoSections

From e937127ea84cdee011a5cf6abaaf04c55e13eb18 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 28 Sep 2023 00:08:41 +0200
Subject: [PATCH 74/77] fixed textarea issues

---
 web/assets/init-admin.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index db34fa51d..0b5fb6c6c 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -82,7 +82,7 @@ document.addEventListener("alpine:init", () => {
         const changeSet = evaluate(expression);
         const fieldName = value || el.name;
 
-        if (el.type === "file") {
+        if (el.type.toLowerCase() === "file") {
             const isSingle = modifiers.includes("single")
 
             const changeHandler = (e) => {
@@ -103,7 +103,7 @@ document.addEventListener("alpine:init", () => {
                 changeSet.removeListener(onChangeSetUpdateHandler);
                 el.removeEventListener('change', changeHandler)
             })
-        } else if (el.type === "checkbox") {
+        } else if (el.type.toLowerCase() === "checkbox") {
             const changeHandler = (e) => {
                 changeSet.patch(fieldName, e.target.checked);
             };
@@ -121,7 +121,7 @@ document.addEventListener("alpine:init", () => {
                 changeSet.removeListener(onChangeSetUpdateHandler);
                 el.removeEventListener('change', changeHandler)
             })
-        } else  if (el.tagName === "textarea" || textInputTypes.includes(el.type)) {
+        } else  if (el.tagName.toLowerCase() === "textarea" || textInputTypes.includes(el.type.toLowerCase())) {
             const keyupHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
             const changeHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
 

From 03dec0bd31349714818c2a36553508d37fc99bea Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Thu, 28 Sep 2023 00:21:04 +0200
Subject: [PATCH 75/77] lint fix

---
 .../partial/course/manage/lecture-management-card.gohtml   | 6 +++---
 web/ts/edit-course.ts                                      | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 06b823270..5f4a42c8e 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -275,9 +275,9 @@
                     <template x-if="!lectureData.premiere && !lectureData.vodup">
                         <label :for="endId">
                             <span class="text-sm text-5">End</span>
-                            <span class="text-sm font-light opacity-75"
-                                  x-change-set-listen.text="changeSet.durationFormatted"
-                            >
+                            <span :class="lectureData.duration > 0 ? 'text-sm font-light bg-gray-500/20 px-1 rounded opacity-75' : 'text-sm font-light bg-red-500 px-1 rounded opacity-75'"
+                                  x-text="lectureData.durationFormatted">
+
                             </span>
                             <input class="tl-input"
                                name="newEndTime"
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index bb48bc6d5..1deee80cc 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -434,11 +434,14 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                 // Save new date and time
                 if (changedKeys.includes("start") || changedKeys.includes("end")) {
                     const startDate = new Date(start);
-                    const endDate = new Date(end)
+                    const endDate = new Date(end);
                     endDate.setFullYear(startDate.getFullYear());
                     endDate.setMonth(startDate.getMonth());
                     endDate.setDate(startDate.getDate());
-                    await DataStore.adminLectureList.updateStartEnd(courseId, lectureId, { start: startDate, end: endDate });
+                    await DataStore.adminLectureList.updateStartEnd(courseId, lectureId, {
+                        start: startDate,
+                        end: endDate,
+                    });
                 }
 
                 // Saving VideoSections

From 2e81910baddfb84a555933b0df0458782cbe7707 Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sat, 30 Sep 2023 16:31:37 +0200
Subject: [PATCH 76/77] fix backend was writing at the same time to db ...

---
 web/ts/api/admin-lecture-list.ts | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 5f5ae7578..2c6df8cc8 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -236,10 +236,10 @@ export const AdminLectureList = {
      * @param request
      */
     updateMetadata: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
-        const promises = [];
+        const promises:  (() => Promise<Response>)[] = [];
         if (request.name !== undefined) {
             promises.push(
-                post(`/api/course/${courseId}/renameLecture/${lectureId}`, {
+                () => post(`/api/course/${courseId}/renameLecture/${lectureId}`, {
                     name: request.name,
                 }),
             );
@@ -247,7 +247,7 @@ export const AdminLectureList = {
 
         if (request.description !== undefined) {
             promises.push(
-                put(`/api/course/${courseId}/updateDescription/${lectureId}`, {
+                () => put(`/api/course/${courseId}/updateDescription/${lectureId}`, {
                     name: request.description,
                 }),
             );
@@ -255,7 +255,7 @@ export const AdminLectureList = {
 
         if (request.lectureHallId !== undefined) {
             promises.push(
-                post("/api/setLectureHall", {
+                () => post("/api/setLectureHall", {
                     streamIds: [lectureId],
                     lectureHall: request.lectureHallId,
                 }),
@@ -264,15 +264,22 @@ export const AdminLectureList = {
 
         if (request.isChatEnabled !== undefined) {
             promises.push(
-                patch(`/api/stream/${lectureId}/chat/enabled`, {
+                () => patch(`/api/stream/${lectureId}/chat/enabled`, {
                     lectureId,
                     isChatEnabled: request.isChatEnabled,
                 }),
             );
         }
 
-        const errors = (await Promise.all(promises)).filter((res) => res.status !== StatusCodes.OK);
-        if (errors.length > 0) {
+        let errors = 0;
+        for (const promise of promises) {
+            const res = await promise();
+            if (res.status !== StatusCodes.OK) {
+                errors++;
+            }
+        }
+
+        if (errors > 0) {
             console.error(errors);
             throw Error("Failed to update all data.");
         }

From 5e6b3eca8354644aff7a81b6ccb362a4b1763d3a Mon Sep 17 00:00:00 2001
From: Khadim <khadimfall0602@gmail.com>
Date: Sat, 30 Sep 2023 16:32:00 +0200
Subject: [PATCH 77/77] lint fix

---
 web/ts/api/admin-lecture-list.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index 2c6df8cc8..af8d51ce9 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -236,26 +236,26 @@ export const AdminLectureList = {
      * @param request
      */
     updateMetadata: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
-        const promises:  (() => Promise<Response>)[] = [];
+        const promises: (() => Promise<Response>)[] = [];
         if (request.name !== undefined) {
-            promises.push(
-                () => post(`/api/course/${courseId}/renameLecture/${lectureId}`, {
+            promises.push(() =>
+                post(`/api/course/${courseId}/renameLecture/${lectureId}`, {
                     name: request.name,
                 }),
             );
         }
 
         if (request.description !== undefined) {
-            promises.push(
-                () => put(`/api/course/${courseId}/updateDescription/${lectureId}`, {
+            promises.push(() =>
+                put(`/api/course/${courseId}/updateDescription/${lectureId}`, {
                     name: request.description,
                 }),
             );
         }
 
         if (request.lectureHallId !== undefined) {
-            promises.push(
-                () => post("/api/setLectureHall", {
+            promises.push(() =>
+                post("/api/setLectureHall", {
                     streamIds: [lectureId],
                     lectureHall: request.lectureHallId,
                 }),
@@ -263,8 +263,8 @@ export const AdminLectureList = {
         }
 
         if (request.isChatEnabled !== undefined) {
-            promises.push(
-                () => patch(`/api/stream/${lectureId}/chat/enabled`, {
+            promises.push(() =>
+                patch(`/api/stream/${lectureId}/chat/enabled`, {
                     lectureId,
                     isChatEnabled: request.isChatEnabled,
                 }),