feat(shcedule): add predefined schedule sport group

static/src/app/schedule/component.ts

@@ -57,8 +57,9 @@ export class ScheduleChannelElement extends HTMLElement {
 }
 
 export class ScheduleChannelGroupElement extends HTMLElement {
-  static observedAttributes = ["channels"];
+  static observedAttributes = ["group", "channels"];
 
+  group: string | null = null;
   channels: Channel[] | null = null;
 
   constructor() {
@@ -67,12 +68,13 @@ export class ScheduleChannelGroupElement extends HTMLElement {
 
   connectedCallback() {
     this.channels = JSON.parse(this.getAttribute("channels") || "[]");
-    const ids = this.channels?.map((item) => `${item.provider}:${item.id}`).join("+");
+    this.group = this.getAttribute("group");
+    const groupId = this.channels?.map((item) => `${item.provider}:${item.id}`).join(",") || this.group || "n/a";
     this.innerHTML = `
-    <a href="group?ids=${ids}"
+    <a href="group/${encodeURIComponent(groupId)}"
       class="d-flex justify-content-between align-items-start  text-decoration-none">
       <span>
-        <span class="text-primary">Open All</span>
+        <span class="text-primary">${this.group || "Open All"}</span>
       </span>
     </a>`;
     this.classList = "list-group-item list-group-item-action";