feat(schedule): add tv schedule group page

static/src/app/schedule.ts

@@ -37,6 +37,9 @@ export class ScheduleChannelManager {
         element.setAttribute("removable", "");
         container.appendChild(element);
       }
+      const groupElement = new ScheduleChannelGroupElement();
+      groupElement.setAttribute("channels", JSON.stringify(channels));
+      container.append(groupElement);
     }
   }
 }
@@ -58,10 +61,10 @@ class ScheduleChannelElement extends HTMLElement {
     <a href="${this.channel?.provider}/${this.channel?.id}"
       class="d-flex justify-content-between align-items-start  text-decoration-none">
       <span>
+        <span class="badge me-1 text-bg-secondary">${this.channel?.provider}</span>
         <span class="text-primary">${this.channel?.name}</span>
       </span>
       <span>
-        <span class="badge text-bg-secondary">${this.channel?.provider}</span>
         <span class="text-danger ms-2" data-remove>
           &#x2715;
         </span>
@@ -99,6 +102,30 @@ class ScheduleChannelElement extends HTMLElement {
 
 customElements.define("schedule-channel", ScheduleChannelElement);
 
+class ScheduleChannelGroupElement extends HTMLElement {
+  static observedAttributes = ["channels"];
+
+  channels: Channel[] | null = null;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.channels = JSON.parse(this.getAttribute("channels") || "[]");
+    const ids = this.channels?.map((item) => `${item.provider}:${item.id}`).join("+");
+    this.innerHTML = `
+    <a href="group?ids=${ids}"
+      class="d-flex justify-content-between align-items-start  text-decoration-none">
+      <span>
+        <span class="text-primary">Open All</span>
+      </span>
+    </a>`;
+    this.classList = "list-group-item list-group-item-action";
+  }
+}
+customElements.define("schedule-channel-group", ScheduleChannelGroupElement);
+
 declare global {
   interface Window {
     scheduleChannelStorage: ScheduleChannelStorage;