Feature/add lecture time change

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 start/end time",
+			Err:           err,
+		})
+		return
+	}
+}
+
 func (r coursesRoutes) renameLecture(c *gin.Context) {
 	sIDInt, err := strconv.Atoi(c.Param("streamID"))
 	if err != nil {

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));
 
@@ -172,23 +172,29 @@ 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.
      *    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}`;
-                }
-                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;
@@ -197,11 +203,11 @@ document.addEventListener("alpine:init", () => {
             changeSet.removeListener(onChangeSetUpdateHandler);
             onChangeSetUpdateHandler(changeSet.get());
             changeSet.listen(onChangeSetUpdateHandler);
-
-            cleanup(() => {
-                changeSet.removeListener(onChangeSetUpdateHandler);
-            })
         });
+
+        cleanup(() => {
+            changeSet.removeListener(onChangeSetUpdateHandler);
+        })
     });
 
     /**

web/template/partial/course/manage/lecture-management-card.gohtml

@@ -255,6 +255,48 @@
                         </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', flatpickr.formatDate(date[0], 'Z')) })"
+                       />
+                    </label>
+                    <template x-if="!lectureData.premiere && !lectureData.vodup">
+                        <label :for="endId">
+                            <span class="text-sm text-5">End</span>
+                            <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"
+                               :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) => {
+                                    const startDate = changeSet.get().startDate;
+                                    let val = date[0];
+                                    val.setDate(startDate.getDate());
+                                    val.setMonth(startDate.getMonth());
+                                    val.setFullYear(startDate.getFullYear());
+                                    changeSet.patch('end', flatpickr.formatDate(val, 'Z'))
+                               }})"
+                            />
+                        </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>
@@ -395,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>

web/ts/api/admin-lecture-list.ts

@@ -17,6 +17,11 @@ export interface UpdateLectureMetaRequest {
     isChatEnabled?: boolean;
 }
 
+export interface UpdateLectureStartEndRequest {
+    start: Date;
+    end: Date;
+}
+
 export class LectureFile {
     readonly id: number;
     readonly fileType: number;
@@ -187,8 +192,9 @@ export interface Lecture {
     startDateFormatted: string;
     startTimeFormatted: string;
     endDate: Date;
-    endDateFormatted: string;
     endTimeFormatted: string;
+    duration: number;
+    durationFormatted: string;
 
     // Clientside pseudo fields
     newCombinedVideo: File | null;
@@ -230,25 +236,25 @@ 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(
+            promises.push(() =>
                 post(`/api/course/${courseId}/renameLecture/${lectureId}`, {
                     name: request.name,
                 }),
             );
         }
 
         if (request.description !== undefined) {
-            promises.push(
+            promises.push(() =>
                 put(`/api/course/${courseId}/updateDescription/${lectureId}`, {
                     name: request.description,
                 }),
             );
         }
 
         if (request.lectureHallId !== undefined) {
-            promises.push(
+            promises.push(() =>
                 post("/api/setLectureHall", {
                     streamIds: [lectureId],
                     lectureHall: request.lectureHallId,
@@ -257,16 +263,23 @@ export const AdminLectureList = {
         }
 
         if (request.isChatEnabled !== undefined) {
-            promises.push(
+            promises.push(() =>
                 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.");
         }
@@ -281,6 +294,16 @@ export const AdminLectureList = {
         await post(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
     },
 
+    /**
+     * Updates date time of a lecture.
+     * @param courseId
+     * @param lectureId
+     * @param request
+     */
+    updateStartEnd: async function (courseId: number, lectureId: number, { start, end }: UpdateLectureStartEndRequest) {
+        await post(`/api/course/${courseId}/updateStartEnd/${lectureId}`, { start, end });
+    },
+
     /**
      * Add sections to a lecture
      * @param lectureId