Added help icons to some admin pages and fixed worker pipeline for gi…

…thub to show current version instead of version sha

.github/workflows/deploy-workers.yml

@@ -54,6 +54,6 @@ jobs:
           context: ./${{ matrix.module }}
           pull: true
           push: true
-          build-args: version=${{ steps.vars.outputs.sha_short }}
+          build-args: version=${{ github.ref_name }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

web/assets/css/home.css

@@ -414,4 +414,4 @@ label:has(~ .tum-live-input) {
 
 .tum-live-markdown a {
     border-bottom: 1px solid black;
-}
+}

web/template/admin/admin_tabs/course-import.gohtml

@@ -1,6 +1,7 @@
 {{define "course-import"}}
 <h1 class="text-2xl text-1 my-4">Course Import</h1>
 <link rel="stylesheet" href="/static/node_modules/flatpickr/dist/flatpickr.min.css">
+<link href="/static/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
 <script src="/static/node_modules/flatpickr/dist/flatpickr.min.js"></script>
 
 <section class="form-container" x-data="admin.pageData()" x-on:loading-start.window="loading=true"
@@ -14,7 +15,10 @@
 
     <form x-show="step===0 || step===1" class="form-container-body grid grid-cols-2 gap-4">
         <label>
-            <h2>Year</h2>
+            <div class="flex flex-row">
+                <h2>Year</h2>
+                <help-icon class="transform -translate-x-0.5" text="Please select the current year. In case of WS select the first year"/>
+            </div>
             <select x-model="year" class="tl-select">
                 <option>2023</option>
                 <option>2024</option>
@@ -44,14 +48,20 @@
             <input x-show="department==='-- specify id --'" x-model="departmentID" type="text" class="tl-input">
         </label>
         <label>
-            <h2>Opt In / Opt Out</h2>
+            <div class="flex flex-row">
+                <h2>Opt In / Opt Out</h2>
+                <help-icon class="transform -translate-x-0.5" text="Opt In -> Lecturer has to opt in to use the system<br/>Opt Out -> Lecturer only has to opt out if he doesn't want to use livestreaming"/>
+            </div>
             <select x-model="optInOut" class="tl-select">
                 <option>Opt In</option>
                 <option>Opt Out</option>
             </select>
         </label>
         <label class="col-span-full" x-init="flatpickr($refs.range, {'mode': 'range'})">
-            <h2>Import events in this range</h2>
+            <div class="flex flex-row">
+                <h2>Import events in this range</h2>
+                <help-icon class="transform -translate-x-0.5" text="Please select a start date and and end date"/>
+            </div>
             <input class="tl-input" type="text" x-ref="range" x-model="range" placeholder="click me!">
         </label>
         <button class="btn primary col-span-full" @click="step++; $dispatch(`notify${step}`)" :disabled="loading"

web/template/partial/course/manage/course_settings.gohtml

@@ -48,30 +48,35 @@
                     <input class="w-auto" id="enVOD" name="enVOD" type="checkbox" {{if and . .VODEnabled}}checked{{end}}
                             {{if not .}}checked{{end}}>
                     Enable VOD
+                    <help-icon text="Students can watch this lecture after the livestream ended"/>
                 </label>
                 <label class="block text-slate-900 dark:text-slate-200" for="enDL">
                     <input class="w-auto" id="enDL" name="enDL" type="checkbox"
                            {{if and . .DownloadsEnabled}}checked{{end}}
                            {{if not .}}checked{{end}}>
                     Enable Downloads
+                    <help-icon text="Students can download this lecture after the livestream ended"/>
                 </label>
                 <div x-init="isChatEnabledForCourse={{.ChatEnabled}}">
                     <label class="block" for="enChat">
                         <input x-model="isChatEnabledForCourse" class="w-auto" id="enChat" name="enChat" type="checkbox"
                                {{if and . .ChatEnabled}}checked{{end}} {{if not .}}checked{{end}}>
                         Enable Live Chat
+                        <help-icon text="Students use the chat during the lecture"/>
                     </label>
                     <label class="block" for="enChatAnon">
                         <input :disabled="!isChatEnabledForCourse" class="w-auto" id="enChatAnon" name="enChatAnon"
                                type="checkbox"
                                {{if and . .AnonymousChatEnabled}}checked{{end}} {{if not .}}checked{{end}}>
                         Allow Anonymous Messages
+                        <help-icon text="Students are allowed to send messages anonymously"/>
                     </label>
                     <label class="block" for="enChatMod">
                         <input :disabled="!isChatEnabledForCourse" class="w-auto" id="enChatMod" name="enChatMod"
                                type="checkbox"
                                {{if and . .ModeratedChatEnabled}}checked{{end}} {{if not .}}checked{{end}}>
                         Enable Moderate Chat
+                        <help-icon text="Every Chat message has to be checked and approved by a moderator"/>
                     </label>
                 </div>
             </div>

web/ts/custom-elements/elements.ts

@@ -0,0 +1,6 @@
+import * as help from "./help-icon";
+
+export function defineElements() {
+    customElements.define("help-icon", help.HelpIcon);
+    console.log("Defined custom elements");
+}

web/ts/custom-elements/help-icon.ts

@@ -0,0 +1,31 @@
+export class HelpIcon extends HTMLElement {
+    private text: string;
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.text = this.getAttribute("text") ?? "No help available";
+        this.innerHTML = `
+            <style>
+                .help-icon-tooltip-desktop {
+                    max-width: 22rem;
+                }
+            </style>
+            <span
+                x-data="{ tooltip: false }" 
+                x-on:mouseover="tooltip = true" 
+                x-on:mouseleave="tooltip = false"
+                class="cursor-pointer m-0 pl-1 text-sm">
+              <i class="fa-solid fa-circle-info text-gray-700 dark:text-gray-400 w-fit h-fit justify-self-center"></i>
+              <div x-show="tooltip"
+                class="text-sm help-icon-tooltip-desktop text-white absolute primary rounded-lg p-1.5"
+              >
+                 ${this.text}
+              </div>
+            </span>
+        `;
+        this.className = "m-0 p-0 text-xs";
+        this.style.textRendering = "";
+    }
+}

web/ts/entry/user.ts

@@ -1,3 +1,3 @@
 /* This bundle contains all functionality that students depend on when not watching a video */
 export * from "../global";
-export * from "../course-overview";
+export * from "../course-overview";

web/ts/global.ts

@@ -1,9 +1,11 @@
 import { StatusCodes } from "http-status-codes";
+import {defineElements} from "./custom-elements/elements";
 
 export * from "./notifications";
 export * from "./user-settings";
 export * from "./start-page";
 export * from "./utilities/time";
+export * from "./custom-elements/elements";
 
 export async function getData(url = "") {
     return await fetch(url);
@@ -304,6 +306,7 @@ export type Section = {
 
 window.onload = function () {
     initHiddenCourses();
+    defineElements();
 };
 
 export function cloneEvents(srcElem: HTMLElement, destElem: HTMLElement, events: string[]) {

web/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "es6",
-    "target": "es5",
+    "target": "es6",
     "sourceMap": true,
     "outDir": "assets/ts-dist",
     "noImplicitAny": false,