feat(schedule): improve predefined schedule groups

static/src/app/base/storage.ts

@@ -17,15 +17,16 @@ export class DataStorage<T extends { id: string }> {
     return this.readValues();
   }
 
-  add(value: T) {
+  add(value: T): boolean {
     const values = this.readValues();
     for (const v of values) {
       if (v.id == value.id) {
-        return;
+        return false;
       }
     }
     values.push(value);
     this.writeValues(values);
+    return true;
   }
 
   remove(id: string) {

static/src/app/schedule/component.ts

@@ -9,14 +9,18 @@ export class ScheduleChannelElement extends HTMLElement {
     super();
     this.handleClick = this.handleClick.bind(this);
     this.handleRemoveClick = this.handleRemoveClick.bind(this);
+    this.handleAddClick = this.handleAddClick.bind(this);
   }
 
   connectedCallback() {
     this.channel = JSON.parse(this.getAttribute("channel") || "{}");
     this.innerHTML = `
     <a href="${this.channel?.provider}/${this.channel?.id}"
-      class="d-flex justify-content-between align-items-start  text-decoration-none">
+      class="d-flex justify-content-between align-items-start text-decoration-none">
       <span>
+        <span class="text-success me-2" style="color: green;" data-add>
+          &plus;
+        </span>
         <span class="badge me-1 text-bg-secondary">${this.channel?.provider}</span>
         <span class="text-primary">${this.channel?.name}</span>
       </span>
@@ -33,6 +37,11 @@ export class ScheduleChannelElement extends HTMLElement {
     } else {
       this.querySelector("[data-remove]")?.remove();
     }
+    if (this.hasAttribute("addeable")) {
+      this.querySelector<HTMLElement>("[data-add]")?.addEventListener("click", this.handleAddClick);
+    } else {
+      this.querySelector("[data-add]")?.remove();
+    }
   }
 
   disconnectedCallback() {
@@ -54,6 +63,22 @@ export class ScheduleChannelElement extends HTMLElement {
     }
     this.remove();
   }
+
+  handleAddClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.channel) {
+      if (window.scheduleChannelStorage.add(this.channel)) {
+        const storedChannels = document.querySelector("#storedChannels");
+        if (storedChannels) {
+          const clone: Element = this.cloneNode(true) as Element;
+          clone.removeAttribute("addeable");
+          clone.setAttribute("removable", "");
+          storedChannels.appendChild(clone);
+        }
+      }
+    }
+  }
 }
 
 export class ScheduleChannelGroupElement extends HTMLElement {
@@ -74,7 +99,7 @@ export class ScheduleChannelGroupElement extends HTMLElement {
     <a href="group/${encodeURIComponent(groupId)}"
       class="d-flex justify-content-between align-items-start  text-decoration-none">
       <span>
-        <span class="text-primary">${this.group || "Open All"}</span>
+        <span class="text-primary" style="text-transform: capitalize">${this.group || "Open group"}</span>
       </span>
     </a>`;
     this.classList = "list-group-item list-group-item-action";

static/src/app/schedule/index.ts

@@ -8,17 +8,17 @@ export class ScheduleChannelManager {
     const container = document.querySelector(selector);
     if (container) {
       container.innerHTML = "";
+      if (channels.length > 0) {
+        const groupElement = new ScheduleChannelGroupElement();
+        groupElement.setAttribute("channels", JSON.stringify(channels));
+        container.append(groupElement);
+      }
       for (const channel of channels) {
         const element = new ScheduleChannelElement();
         element.setAttribute("channel", JSON.stringify(channel));
         element.setAttribute("removable", "");
         container.appendChild(element);
       }
-      if (channels.length > 0) {
-        const groupElement = new ScheduleChannelGroupElement();
-        groupElement.setAttribute("channels", JSON.stringify(channels));
-        container.append(groupElement);
-      }
     }
   }
 }