feat(schedule): improve predefined schedule groups

.editorconfig

@@ -10,4 +10,4 @@ max_line_length = 120
 
 [*.md]
 max_line_length = off
-trim_trailing_whitespace = false
+trim_trailing_whitespace = true

gallery/easel/route/view/schedule/bundle.py

@@ -1,4 +1,10 @@
 GROUP_MAP = {
+    "central": [
+        ("yandextv", "146"),  # pervyy
+        ("yandextv", "587"),  # rossya-1
+        ("yandextv", "162"),  # ntv
+        ("yandextv", "79"),  # sts
+    ],
     "sport": [
         ("matchtv", "matchtv"),
         ("matchtv", "igra"),
@@ -8,5 +14,5 @@ GROUP_MAP = {
         ("matchtv", "futbol-3"),
         ("matchtv", "strana"),
         ("yandextv", "1799"),  # start
-    ]
+    ],
 }

gallery/easel/route/view/schedule/route.py

@@ -46,7 +46,7 @@ async def get_schedule_index(request: AppRequest, provider: str | None = None, q
     return templates.TemplateResponse(
         request=request,
         name="index.html",
-        context={"channels": channels},
+        context={"channels": channels, "groups": GROUP_MAP.keys()},
     )
 
 

gallery/easel/route/view/schedule/templates/channel.html

@@ -37,15 +37,14 @@ locale=request.state.language)}}
   <thead>
     <tr>
       <td></td>
-      <td></td>
+      <td style="width:100%"></td>
     </tr>
   </thead>
   <tbody>
     {% for value in response.values %}
     <tr class="{{'d-none' if (live and not value.live) else 'table-success' if (not live and value.live) else ''}}">
       <td>
-        <span>{{value.start.strftime('%H:%M')}}</span>
+        <span>{{value.start.strftime('%H:%M')}}</span>&nbsp;<span class="small ms-1">({{(value.end - value.start) | timedelta_format}})</span>
-        <span class="small ms-1">({{(value.end - value.start) | timedelta_format}})</span>
       </td>
       <td>{{value.label}}</td>
     </tr>

gallery/easel/route/view/schedule/templates/group.html

@@ -40,15 +40,15 @@
   <thead>
     <tr>
       <td></td>
-      <td></td>
+      <td style="width:100%"></td>
     </tr>
   </thead>
   <tbody>
     {% for value in response.values %}
     <tr class="{{'d-none' if (live and not value.live) else 'table-success' if (not live and value.live) else ''}}">
       <td>
-        <span>{{value.start.strftime('%H:%M')}}</span>
+        <span>{{value.start.strftime('%H:%M')}}</span>&nbsp;<span class="small ms-1">({{(value.end - value.start) |
-        <span class="small ms-1">({{(value.end - value.start) | timedelta_format}})</span>
+          timedelta_format}})</span>
       </td>
       <td>{{value.label}}</td>
     </tr>

gallery/easel/route/view/schedule/templates/index.html

@@ -38,7 +38,8 @@
 <ul id="channels"
     class="list-group mb-5">
   {% for channel in channels %}
-  <schedule-channel channel="{{channel.model_dump() | tojson | forceescape}}"></schedule-channel>
+  <schedule-channel channel="{{channel.model_dump() | tojson | forceescape}}"
+                    addeable></schedule-channel>
   {% endfor %}
 </ul>
 <hr>
@@ -47,7 +48,9 @@
     class="list-group mb-4">
 </ul>
 <ul class="list-group">
-  <schedule-channel-group group="sport"></schedule-channel-group>
+  {% for group in groups %}
+  <schedule-channel-group group="{{group}}"></schedule-channel-group>
+  {% endfor %}
 </ul>
 <script>
   (function () {

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,6 +9,7 @@ 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() {
@@ -17,6 +18,9 @@ export 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="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);
-      }
     }
   }
 }