Added help icons to admin and management pages (TUM-Dev#1264)

* Added help icons to some admin pages and fixed worker pipeline for github to show current version instead of version sha

* Added help icons to some admin pages and fixed worker pipeline for github to show current version instead of version sha

* Added help icons to two more admin pages

* Minor updates on layout

* Lint fix

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 @@
 
     <div 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 they don'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/template/partial/course/manage/edit-video-sections.gohtml

@@ -3,29 +3,10 @@
         <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>
-                <div x-data="{showInfo: false}"
-                     class="relative my-auto">
-                    <button @click="showInfo = !showInfo;">
-                        <i class="fa fa-circle-info text-3 ml-2"></i>
-                    </button>
-                    <div x-show="showInfo"
-                         class="absolute top-full z-50"
-                         @mouseleave="showInfo = false">
-                        <div>
-                            <div class="tooltip relative w-56">
-                                <div class="w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-black dark:border-b-white ml-2 mr-auto"></div>
-                                <div class="bg-black dark:bg-white rounded-md px-2 py-1">
-                                    <span class="text-white dark:text-black text-xs font-bold">
-                                        Structuring lectures into sections makes lectures more rewatchable.
+                <help-icon text='Structuring lectures into sections makes lectures more rewatchable.
                                         For detailed information visit: <a
                                                 class="underline hover:text-white dark:hover:text-black"
-                                                href="https://docs.live.mm.rbg.tum.de">https://docs.live.mm.rbg.tum.de</a>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                href="https://docs.live.mm.rbg.tum.de">https://docs.live.mm.rbg.tum.de</a>'/>
             </div>
         </header>
         <form

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

@@ -281,26 +281,7 @@
                     </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>
-                        <div x-data="{showInfo: false}"
-                             class="relative my-auto">
-                            <button @click="showInfo = !showInfo;">
-                                <i class="fa fa-circle-info text-3 ml-2"></i>
-                            </button>
-                            <div x-show="showInfo"
-                                 class="absolute top-full z-50"
-                                 @mouseleave="showInfo = false">
-                                <div>
-                                    <div class="tooltip relative w-56">
-                                        <div class="w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-black dark:border-b-white ml-2 mr-auto"></div>
-                                        <div class="bg-black dark:bg-white rounded-md px-2 py-1">
-                                    <span class="text-white dark:text-black text-xs font-bold">
-                                        Attachments allow students to download (additional) material directly from this TUMLive-stream.
-                                    </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                        <help-icon text="Attachments allow students to download (additional) material directly from this TUMLive-stream."/>
                     </article>
                 </section>
 

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/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,