ci(version): 0.8.3

Dockerfile

@@ -23,14 +23,19 @@ COPY static ./
 RUN npm run build
 
 FROM python:3.14-slim
-ENV PATH="/app/.venv/bin:$PATH"
-WORKDIR /app
 
+ENV PLAYWRIGHT_BROWSERS_PATH="/opt/playwright-browsers"
+RUN  --mount=type=cache,target=/var/cache/apt,sharing=locked \
+  --mount=type=cache,target=/var/lib/apt,sharing=locked \
+  pip install playwright && \
+  playwright install --with-deps chromium
+
+ENV PATH="/app/.venv/bin:$PATH"
 ENV TZ="Europe/Moscow"
 
-COPY --from=builder /app ./
-RUN .venv/bin/playwright install chromium --with-deps --only-shell
+WORKDIR /app
 
+COPY --from=builder /app ./
 COPY --from=node-builder /app/dist ./static/dist
 
 COPY gallery gallery/

gallery/easel/route/view/common/templates/base.html

@@ -23,7 +23,6 @@
   <div class="app col-lg-8 mx-auto p-3 py-md-5">
     {% if not is_widget %}
     <header class="app-header pb-3 mb-5 border-bottom">
-      <div>{{request.query_params.widget}}</div>
       <div class="link-list">
         <app-link href="/"
                   icon="gear">API Gallery</app-link>

gallery/easel/route/view/common/utils/template.py

@@ -45,7 +45,7 @@ def build_url(
     if query:
         query_dict = {**dict(parse_qsl(parts.query)), **query}
         parts = parts._replace(query=urlencode(query_dict))
-    return parts.geturl()
+    return "/".join([""] + parts.geturl().split("/")[3:])
 
 
 def build_templates(

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

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

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

@@ -35,23 +35,26 @@
   </div>
 </form>
 {% if channels %}
-<ul id="channels"
-    class="list-group mb-5">
-  {% for channel in channels %}
-  <schedule-channel channel="{{channel.model_dump() | tojson | forceescape}}"
-                    addeable></schedule-channel>
-  {% endfor %}
-</ul>
+<div class="mb-4">
+  <schedule-channel-list value="{{channels | tojson | forceescape}}"
+                         onclick="scheduleChannelManager.store(element)"
+                         onadd="scheduleChannelManager.add(element)"></schedule-channel-list>
   <hr>
+</div>
 {% endif %}
-<ul id="storedChannels"
-    class="list-group mb-4">
-</ul>
+<div class="mb-4">
+  <h3>{{_("Stored channels")}}</h3>
+  <schedule-channel-list id="storedChannels"
+                         onremove="scheduleChannelManager.remove(element)"></schedule-channel-list>
+</div>
+<div class="mb-4">
+  <h3>{{_("Channel groups")}}</h3>
   <ul class="list-group">
     {% for group in groups %}
-  <schedule-channel-group group="{{group}}"></schedule-channel-group>
+    <schedule-channel-group value="{{group | tojson | forceescape}}"></schedule-channel-group>
     {% endfor %}
   </ul>
+</div>
 <script>
   (function () {
     const params = new URLSearchParams(window.location.search);
@@ -59,9 +62,8 @@
     if (searchQuery) {
       document.querySelector('#query').value = searchQuery;
     }
-
     document.addEventListener("DOMContentLoaded", (event) => {
-      scheduleChannelManager.loadChannels('#storedChannels');
+      scheduleChannelManager.load();
     });
   })();
 </script>

gallery/easel/route/view/weather/route.py

@@ -53,7 +53,7 @@ async def get_weather_index(request: AppRequest, provider: str | None = None, qu
     return templates.TemplateResponse(
         request=request,
         name="index.html",
-        context={"locations": locations},
+        context={"locations": [item.model_dump() for item in locations]},
     )
 
 

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

@@ -35,17 +35,18 @@
   </div>
 </form>
 {% if locations %}
-<ul id="locations"
-    class="list-group mb-5">
-  {% for location in locations %}
-  <weather-location location="{{location.model_dump() | tojson | forceescape}}"></weather-location>
-  {% endfor %}
-</ul>
+<div class="mb-4">
+  <weather-location-list value="{{locations | tojson | forceescape}}"
+                         onclick="weatherLocationManager.store(element)"
+                         onadd="weatherLocationManager.add(element)"></weather-location-list>
   <hr>
+</div>
 {% endif %}
-<ul id="storedLocations"
-    class="list-group mb-5">
-</ul>
+<div class="mb-4">
+  <h3>{{_("Stored locations")}}</h3>
+  <weather-location-list id="storedLocations"
+                         onremove="weatherLocationManager.remove(element)"></weather-location-list>
+</div>
 <script>
   (function () {
     const params = new URLSearchParams(window.location.search);
@@ -55,7 +56,7 @@
     }
 
     document.addEventListener("DOMContentLoaded", (event) => {
-      weatherLocationManager.loadLocations('#storedLocations');
+      weatherLocationManager.load();
     });
   })();
 </script>

gallery/painting/gismeteo/api.py

@@ -12,12 +12,22 @@ from gallery.sketch.weather.api import WeatherApi
 from gallery.sketch.weather.model import Location, WeatherResponse, WeatherValue
 from gallery.sketch.weather.util import merge_weather_values
 
-from . import datehelp
 from .parser import DAYS_PARSER, LOCATION_PARSER, ONE_DAY_PARSER, ROW_PARSERS
 
 logger = logging.getLogger("gismeteo")
 
 
+def format_date(date: datetime.date) -> str:
+    today = datetime.date.today()
+    days = (date - today).days
+    if days == 0:
+        return "today"
+    elif days == 1:
+        return "tomorrow"
+    else:
+        return f"{days + 1}-day"
+
+
 class GismeteoApi(WeatherApi):
     PROVIDER = "gismeteo"
 
@@ -107,7 +117,7 @@ class GismeteoApi(WeatherApi):
             raise HTTPException(
                 status_code=status.HTTP_400_BAD_REQUEST, detail={"max_date": max_date.strftime("%Y-%m-%d")}
             )
-        data = await self.source.request(f"weather-{location_id}/{datehelp.dump(date)}")
+        data = await self.source.request(f"weather-{location_id}/{format_date(date)}")
         return self._parse_oneday(date, data)
 
     async def get_days(self, location_id: str, days: int) -> WeatherResponse:

gallery/painting/gismeteo/core.py

@@ -1,31 +0,0 @@
-from typing import Generic, Iterable, Optional, TypeVar
-
-from bs4 import Tag
-
-T = TypeVar("T")
-
-
-class WidgetParser:
-    def parse_widget(self, tag: Tag) -> Tag:
-        raise NotImplementedError
-
-
-class BaseWidgetParser(WidgetParser):
-    SELECT: str
-
-    def __init__(self, select: Optional[str] = None):
-        super().__init__()
-        self._select = select or self.SELECT
-
-    def parse_widget(self, tag: Tag) -> Tag:
-        widget = tag.select_one(self._select)
-        if widget is None:
-            raise ValueError(self._select)
-        return widget
-
-
-class RowParser(Generic[T]):
-    KEY: str
-
-    def parse_row(self, tag: Tag) -> Iterable[T]:
-        raise NotImplementedError

gallery/painting/gismeteo/datehelp.py

@@ -1,39 +0,0 @@
-import datetime
-from enum import Enum
-
-import dateparser
-import dateparser.date_parser
-
-
-class Day(str, Enum):
-    TODAY = "today"
-    TOMORROW = "tomorrow"
-    DAY_3 = "3-day"
-    DAY_4 = "4-day"
-    DAY_5 = "5-day"
-
-
-def parse(value: str) -> datetime.date:
-    if value in ["today", "mock"]:
-        return datetime.date.today()
-    elif value == "tomorrow":
-        return datetime.date.today() + datetime.timedelta(days=1)
-    elif value.endswith("-day"):
-        days = int(value.split("-")[0]) - 1
-        return datetime.date.today() + datetime.timedelta(days=days)
-    else:
-        date = dateparser.parse(value)
-        if date is None:
-            raise ValueError(value)
-        return date.date()
-
-
-def dump(date: datetime.date) -> str:
-    today = datetime.date.today()
-    days = (date - today).days
-    if days == 0:
-        return "today"
-    elif days == 1:
-        return "tomorrow"
-    else:
-        return f"{days + 1}-day"

gallery/painting/gismeteo/parser.py

@@ -1,7 +1,7 @@
 import datetime
 import logging
 import re
-from typing import Iterable
+from typing import Generic, Iterable, Optional, TypeVar
 
 import dateparser
 from bs4 import Tag
@@ -14,10 +14,37 @@ from gallery.sketch.weather.model import (
 )
 from gallery.sketch.weather.parser import ParseError, parse_wind_direction
 
-from .core import BaseWidgetParser, RowParser
-
 logger = logging.getLogger("gismeteo")
 
+T = TypeVar("T")
+
+
+class WidgetParser:
+    def parse_widget(self, tag: Tag) -> Tag:
+        raise NotImplementedError
+
+
+class BaseWidgetParser(WidgetParser):
+    SELECT: str
+
+    def __init__(self, select: Optional[str] = None):
+        super().__init__()
+        self._select = select or self.SELECT
+
+    def parse_widget(self, tag: Tag) -> Tag:
+        widget = tag.select_one(self._select)
+        if widget is None:
+            raise ValueError(self._select)
+        return widget
+
+
+class RowParser(Generic[T]):
+    KEY: str
+
+    def parse_row(self, tag: Tag) -> Iterable[T]:
+        raise NotImplementedError
+
+
 ONE_DAY_PARSER = BaseWidgetParser(".widget.widget-oneday .widget-items")
 DAYS_PARSER = BaseWidgetParser(".widget.widget-days .widget-items")
 

gallery/painting/rp5/parser.py

@@ -1,4 +1,6 @@
 import re
+from enum import Enum, auto
+from typing import Iterable
 
 import dateparser
 from bs4 import BeautifulSoup, Tag
@@ -36,29 +38,56 @@ def _parse_wind_speed(cell: Tag) -> int:
     return 0
 
 
+class RowType(Enum):
+    DATE = auto()
+    TIME = auto()
+    CLOUDNESS = auto()
+    PRECIPITATION = auto()
+    TEMPERATURE = auto()
+    PRESSURE = auto()
+    WIND_SPEED = auto()
+    WIND_GUST = auto()
+    WIND_DIRECTION = auto()
+    HUMIDITY = auto()
+
+
+def _iter_table_rows(table: Tag) -> Iterable[tuple[RowType, Tag]]:
+    for row in table.select("tr"):
+        title = row.select_one("td").text.strip().lower()
+        if "сегодня" in title or "завтра" in title:
+            yield RowType.DATE, row
+        elif "местное время" in title:
+            yield RowType.TIME, row
+        elif "облачность" in title:
+            yield RowType.CLOUDNESS, row
+        elif "осадки" in title:
+            yield RowType.PRECIPITATION, row
+        elif "температура" in title:
+            yield RowType.TEMPERATURE, row
+        elif "давление" in title:
+            yield RowType.PRESSURE, row
+        elif "скорость" in title:
+            yield RowType.WIND_SPEED, row
+        elif "порывы" in title:
+            yield RowType.WIND_GUST, row
+        elif "направление" in title:
+            yield RowType.WIND_DIRECTION, row
+        elif "влажность" in title:
+            yield RowType.HUMIDITY, row
+
+
 # pylint:disable=too-many-branches
 def parse_page(page: BeautifulSoup) -> list[WeatherResponse]:
     location = page.select(".intoLeftNavi > .verticalBottom > a")[-1].text.strip()
     table = page.select_one("#forecastTable")
     if table is None:
         raise ParseError("#forecastTable not found")
-    (
-        date_row,
-        time_row,
-        cloudness_row,
-        precipitation_row,
-        temperature_row,
-        _,
-        pressure_row,
-        wind_speed_row,
-        wind_gust_row,
-        wind_direction_row,
-        humidity_row,
-        *_,
-    ) = table.select("tr")
     result: list[WeatherResponse] = []
     values: list[WeatherValue] = []
-    for index, cell in enumerate(date_row.select("td")):
+    for row_type, row in _iter_table_rows(table):
+        match row_type:
+            case RowType.DATE:
+                for index, cell in enumerate(row.select("td")):
                     colspan = int(cell.attrs["colspan"])
                     if index == 0:
                         colspan -= 1
@@ -76,14 +105,17 @@ def parse_page(page: BeautifulSoup) -> list[WeatherResponse]:
                         )
                     )
                     values += item_values
-    for index, cell in enumerate(time_row.select("td")[1:]):
+            case RowType.TIME:
+                for index, cell in enumerate(row.select("td")[1:]):
                     hour = int(cell.text.strip())
                     values[index].date = values[index].date.replace(hour=hour)
-    for index, cell in enumerate(cloudness_row.select("td")[1:]):
+            case RowType.CLOUDNESS:
+                for index, cell in enumerate(row.select("td")[1:]):
                     onmouseover = cell.select_one(".cc_0").next_element.attrs["onmouseover"]
                     cloudness_str = re.compile("<b>(.*?)</b>").search(onmouseover).group(1).strip()
                     values[index].sky.cloudness = CLOUDNESS_MAP[cloudness_str]
-    for index, cell in enumerate(precipitation_row.select("td")[1:]):
+            case RowType.PRECIPITATION:
+                for index, cell in enumerate(row.select("td")[1:]):
                     onmouseover = cell.select_one(".pr_0").attrs["onmouseover"]
                     precipitation_str = onmouseover.split(",")[1].strip(" '")
                     precipitation_value_matched = re.compile("(\\d+\\.\\d+) мм").search(precipitation_str)
@@ -93,16 +125,22 @@ def parse_page(page: BeautifulSoup) -> list[WeatherResponse]:
                     if "(" in precipitation_str:
                         precipitation_str = precipitation_str.split(" (")[0]
                     values[index].sky.precipitation = PRECIPITATION_MAP[precipitation_str]
-    for index, cell in enumerate(temperature_row.select("td")[1:]):
+            case RowType.TEMPERATURE:
+                for index, cell in enumerate(row.select("td")[1:]):
                     values[index].temperature = [int(cell.select_one(".t_0").text.lstrip("+").strip())]
-    for index, cell in enumerate(pressure_row.select("td")[1:]):
+            case RowType.PRESSURE:
+                for index, cell in enumerate(row.select("td")[1:]):
                     values[index].pressure = [int(cell.select_one(".p_0").text.strip())]
-    for index, cell in enumerate(wind_speed_row.select("td")[1:]):
+            case RowType.WIND_SPEED:
+                for index, cell in enumerate(row.select("td")[1:]):
                     values[index].wind_speed = _parse_wind_speed(cell)
-    for index, cell in enumerate(wind_gust_row.select("td")[1:]):
-        values[index].wind_speed = _parse_wind_speed(cell)
-    for index, cell in enumerate(wind_direction_row.select("td")[1:]):
+            case RowType.WIND_GUST:
+                for index, cell in enumerate(row.select("td")[1:]):
+                    values[index].wind_gust = _parse_wind_speed(cell)
+            case RowType.WIND_DIRECTION:
+                for index, cell in enumerate(row.select("td")[1:]):
                     values[index].wind_direction = parse_wind_direction(cell.text.strip())
-    for index, cell in enumerate(humidity_row.select("td")[1:]):
+            case RowType.HUMIDITY:
+                for index, cell in enumerate(row.select("td")[1:]):
                     values[index].humidity = int(cell.text.strip())
     return result

locales/ru/LC_MESSAGES/messages.po

@@ -69,9 +69,18 @@ msgstr "Давление, мм рт. ст."
 msgid "Humidity, %"
 msgstr "Влажность, %"
 
+msgid "Stored locations"
+msgstr "Сохранённые локации"
+
 # tv
 msgid "TV program"
 msgstr "Телепрограмма"
 
 msgid "Live broadcasts"
 msgstr "Прямые трансляции"
+
+msgid "Stored channels"
+msgstr "Сохранённые каналы"
+
+msgid "Channel groups"
+msgstr "Группы каналов"

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "gallery"
 description = ""
-version = "0.7.0"
+version = "0.8.3"
 readme = "README.md"
 authors = [{ name = "shmyga", email = "shmyga.z@gmail.com" }]
 requires-python = '>=3.14,<4.0'

static/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "gallery",
-  "version": "0.7.0",
+  "version": "0.8.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "gallery",
-      "version": "0.7.0",
+      "version": "0.8.3",
       "license": "ISC",
       "dependencies": {
         "@popperjs/core": "^2.11.8",

static/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gallery",
-  "version": "0.7.0",
+  "version": "0.8.3",
   "type": "module",
   "scripts": {
     "build": "webpack --mode production",

static/src/app/base/component.ts

@@ -0,0 +1,196 @@
+export interface Type<T> extends Function {
+  new (...args: any[]): T;
+}
+
+export abstract class ValueElement<T, O> extends HTMLElement {
+  static observedAttributes = ["value"];
+
+  private _value: T | null = null;
+
+  get value(): T | null {
+    return this._value;
+  }
+
+  set value(value: T | null) {
+    if (value) {
+      this.setAttribute("value", JSON.stringify(value));
+    } else if (this.hasAttribute("value")) {
+      this.removeAttribute("value");
+    }
+  }
+
+  options: O | null;
+
+  constructor(value: T | null = null, options: O | null = null) {
+    super();
+    if (value) {
+      this.value = value;
+    }
+    this.options = options;
+    this.onInit();
+  }
+
+  onInit() {}
+
+  beforeRefresh() {}
+
+  onRefresh() {}
+
+  abstract buildHTML(): string;
+
+  refresh() {
+    const rawValue = this.getAttribute("value");
+    if (rawValue) {
+      this._value = JSON.parse(rawValue);
+    } else {
+      this._value = null;
+    }
+    if (this.className) {
+      this.classList = this.className;
+    }
+    this.beforeRefresh();
+    this.innerHTML = this.buildHTML();
+    this.onRefresh();
+  }
+
+  connectedCallback() {
+    this.refresh();
+  }
+
+  attributeChangedCallback(name: string, oldValue: any, newValue: any) {
+    setTimeout(() => this.refresh());
+  }
+}
+
+export interface ListOptions<T> {
+  onClick?: (element: ListItemElement<T>) => void;
+  onAdd?: (element: ListItemElement<T>) => void;
+  onRemove?: (element: ListItemElement<T>) => void;
+}
+
+export abstract class ListItemElement<T> extends ValueElement<T, ListOptions<T>> {
+  abstract getHref(value: T): string;
+
+  abstract getContent(value: T): string;
+
+  className = "list-group-item list-group-item-action";
+
+  onInit(): void {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleRemoveClick = this.handleRemoveClick.bind(this);
+    this.handleAddClick = this.handleAddClick.bind(this);
+  }
+
+  buildHTML(): string {
+    if (!this.value) {
+      return "";
+    }
+    const href = this.getHref(this.value);
+    const content = this.getContent(this.value);
+    return `
+    <a href="${href}"
+      class="d-flex justify-content-between align-items-start text-decoration-none">
+      <span>
+        <span class="text-success me-2 ${this.options?.onAdd ? "" : "d-none"}" style="color: green;" data-add>
+          &plus;
+        </span>
+        ${content}
+      </span>
+      <span>
+        <span class="text-danger ms-2 ${this.options?.onRemove ? "" : "d-none"}" data-remove>
+          &#x2715;
+        </span>
+      </span>
+    </a>
+    `;
+  }
+
+  onRefresh(): void {
+    this.addEventListener("click", this.handleClick);
+    if (this.options?.onAdd) {
+      this.querySelector<HTMLElement>("[data-add]")?.addEventListener("click", this.handleAddClick);
+    } else {
+      this.querySelector("[data-add]")?.remove();
+    }
+    if (this.options?.onRemove) {
+      this.querySelector<HTMLElement>("[data-remove]")?.addEventListener("click", this.handleRemoveClick);
+    } else {
+      this.querySelector("[data-remove]")?.remove();
+    }
+  }
+
+  handleClick(event: MouseEvent) {
+    if (this.value && this.options?.onClick) {
+      this.options.onClick(this);
+    }
+  }
+
+  handleAddClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.value && this.options?.onAdd) {
+      this.options.onAdd(this);
+    }
+  }
+
+  handleRemoveClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.value && this.options?.onRemove) {
+      this.options.onRemove(this);
+    }
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this.handleClick);
+    this.querySelector<HTMLElement>("[data-add]")?.removeEventListener("click", this.handleAddClick);
+    this.querySelector<HTMLElement>("[data-remove]")?.removeEventListener("click", this.handleRemoveClick);
+  }
+}
+
+export abstract class ListElement<T, C extends ListItemElement<T> = ListItemElement<T>> extends ValueElement<
+  T[],
+  ListOptions<T>
+> {
+  static observedAttributes = ["value", "onadd", "onremove", "onclick"];
+
+  abstract childType: Type<C>;
+
+  className = "list-group";
+
+  buildHTML(): string {
+    return "";
+  }
+
+  beforeRefresh() {
+    if (this.hasAttribute("onclick")) {
+      const onclick = new Function("element", this.getAttribute("onclick")!) as ListOptions<T>["onClick"];
+      if (!this.options) {
+        this.options = {};
+      }
+      this.options.onClick = onclick;
+    }
+    if (this.hasAttribute("onadd")) {
+      const onadd = new Function("element", this.getAttribute("onadd")!) as ListOptions<T>["onAdd"];
+      if (!this.options) {
+        this.options = {};
+      }
+      this.options.onAdd = onadd;
+    }
+    if (this.hasAttribute("onremove")) {
+      const onremove = new Function("element", this.getAttribute("onremove")!) as ListOptions<T>["onRemove"];
+      if (!this.options) {
+        this.options = {};
+      }
+      this.options.onRemove = onremove;
+    }
+  }
+
+  onRefresh() {
+    if (this.value) {
+      for (const item of this.value) {
+        this.appendChild(new this.childType(item, this.options));
+      }
+    }
+  }
+}

static/src/app/base/manager.ts

@@ -0,0 +1,50 @@
+import { ListElement, ListItemElement } from "./component";
+import { DataStorage, StorageValue } from "./storage";
+
+export class DataManager<T extends StorageValue> {
+  private storage: DataStorage<T>;
+
+  private get dataList(): ListElement<T> {
+    return document.querySelector(this.dataListSelector)!;
+  }
+
+  constructor(
+    listComponentType: typeof ListElement<T>, //prevent removing as unusing
+    storageKey: string,
+    private dataListSelector: string,
+  ) {
+    this.storage = new DataStorage(storageKey);
+    this.load = this.load.bind(this);
+    this.store = this.store.bind(this);
+    this.add = this.add.bind(this);
+    this.remove = this.remove.bind(this);
+  }
+
+  load() {
+    this.dataList.value = this.storage.getAll();
+  }
+
+  store(element: ListItemElement<T>) {
+    if (element.value) {
+      this.storage.add(element.value);
+    }
+  }
+
+  add(element: ListItemElement<T>) {
+    const value = element.value;
+    value;
+    if (value && this.storage.add(value)) {
+      const clone: ListItemElement<T> = element.cloneNode(true) as ListItemElement<T>;
+      clone.options = { onRemove: this.remove };
+      this.dataList.appendChild(clone);
+    }
+  }
+
+  remove(element: ListItemElement<T>) {
+    const value = element.value;
+    if (value) {
+      this.storage.remove(value.id);
+      element.remove();
+    }
+  }
+}

static/src/app/base/storage.ts

@@ -1,4 +1,8 @@
-export class DataStorage<T extends { id: string }> {
+export interface StorageValue {
+  id: string;
+}
+
+export class DataStorage<T extends StorageValue> {
   constructor(private storageKey: string) {}
 
   private readValues(): T[] {

static/src/app/schedule/component.ts

@@ -1,110 +1,52 @@
+import { ListElement, ListItemElement, ValueElement } from "../base/component";
 import { Channel } from "./model";
 
-export class ScheduleChannelElement extends HTMLElement {
-  static observedAttributes = ["channel", "removable"];
+export class ScheduleChannelGroup extends ValueElement<string | Channel[], {}> {
+  className: string = "list-group-item list-group-item-action";
 
-  channel: Channel | null = null;
-
-  constructor() {
-    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">
-      <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>
-      <span>
-        <span class="text-danger ms-2" data-remove>
-          &#x2715;
-        </span>
-      </span>
-    </a>`;
-    this.classList = "list-group-item list-group-item-action";
-    this.addEventListener("click", this.handleClick);
-    if (this.hasAttribute("removable")) {
-      this.querySelector<HTMLElement>("[data-remove]")?.addEventListener("click", this.handleRemoveClick);
-    } 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() {
-    this.removeEventListener("click", this.handleClick);
-    this.querySelector<HTMLElement>("[data-remove]")?.removeEventListener("click", this.handleRemoveClick);
-  }
-
-  handleClick(event: MouseEvent) {
-    if (this.channel) {
-      window.scheduleChannelStorage.add(this.channel);
-    }
-  }
-
-  handleRemoveClick(event: MouseEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (this.channel) {
-      window.scheduleChannelStorage.remove(this.channel.id);
-    }
-    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 {
-  static observedAttributes = ["group", "channels"];
-
-  group: string | null = null;
-  channels: Channel[] | null = null;
-
-  constructor() {
-    super();
-  }
-
-  connectedCallback() {
-    this.channels = JSON.parse(this.getAttribute("channels") || "[]");
-    this.group = this.getAttribute("group");
-    const groupId = this.channels?.map((item) => `${item.provider}:${item.id}`).join(",") || this.group || "n/a";
-    this.innerHTML = `
+  buildHTML(): string {
+    const groupName = Array.isArray(this.value) ? "Open All" : this.value;
+    const groupId = Array.isArray(this.value)
+      ? this.value.map((item) => `${item.provider}:${item.id}`).join(",")
+      : this.value || "";
+    return `
     <a href="group/${encodeURIComponent(groupId)}"
       class="d-flex justify-content-between align-items-start text-decoration-none">
       <span>
-        <span class="text-primary" style="text-transform: capitalize">${this.group || "Open group"}</span>
+        <span class="text-primary" style="text-transform: capitalize">${groupName}</span>
       </span>
     </a>`;
-    this.classList = "list-group-item list-group-item-action";
   }
 }
 
-customElements.define("schedule-channel", ScheduleChannelElement);
-customElements.define("schedule-channel-group", ScheduleChannelGroupElement);
+customElements.define("schedule-channel-group", ScheduleChannelGroup);
+
+export class ScheduleChannelItem extends ListItemElement<Channel> {
+  getHref(value: Channel): string {
+    return `${value.provider}/${value.id}`;
+  }
+
+  getContent(value: Channel): string {
+    return `
+    <span class="badge me-1 text-bg-secondary">${value.provider}</span>
+    <span class="text-primary">${value.name}</span>
+    `;
+  }
+}
+
+export class ScheduleChannelList extends ListElement<Channel, ScheduleChannelItem> {
+  childType = ScheduleChannelItem;
+
+  public onRefresh(): void {
+    super.onRefresh();
+    if (this.value?.length) {
+      const groupElement = new ScheduleChannelGroup(this.value);
+      this.prepend(groupElement);
+    } else {
+      this.prepend("Empty");
+    }
+  }
+}
+
+customElements.define("schedule-channel-item", ScheduleChannelItem);
+customElements.define("schedule-channel-list", ScheduleChannelList);

static/src/app/schedule/index.ts

@@ -1,34 +1,11 @@
-import { DataStorage } from "../base/storage";
-import { ScheduleChannelElement, ScheduleChannelGroupElement } from "./component";
+import { DataManager } from "../base/manager";
+import { ScheduleChannelList } from "./component";
 import { Channel } from "./model";
 
-export class ScheduleChannelManager {
-  loadChannels(selector: string) {
-    const channels = window.scheduleChannelStorage.getAll();
-    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);
-      }
-    }
-  }
-}
-
 declare global {
   interface Window {
-    scheduleChannelStorage: DataStorage<Channel>;
-    scheduleChannelManager: ScheduleChannelManager;
+    scheduleChannelManager: DataManager<Channel>;
   }
 }
 
-window.scheduleChannelStorage = new DataStorage("schedule:channels");
-window.scheduleChannelManager = new ScheduleChannelManager();
+window.scheduleChannelManager = new DataManager(ScheduleChannelList, "schedule:channels", "#storedChannels");

static/src/app/weather/component.ts

@@ -1,63 +1,33 @@
+import { ListElement, ListItemElement } from "../base/component";
 import { Location } from "./model";
 
-export class WeatherLocationElement extends HTMLElement {
-  static observedAttributes = ["location", "removable"];
-
-  location: Location | null = null;
-
-  constructor() {
-    super();
-    this.handleClick = this.handleClick.bind(this);
-    this.handleRemoveClick = this.handleRemoveClick.bind(this);
+export class WheatherLocationItem extends ListItemElement<Location> {
+  getHref(value: Location): string {
+    return `${value.provider}/${value.id}`;
   }
 
-  connectedCallback() {
-    this.location = JSON.parse(this.getAttribute("location") || "{}");
-    this.innerHTML = `
-    <a href="${this.location?.provider}/${this.location?.id}"
-      class="d-flex justify-content-between align-items-start text-decoration-none">
-      <span>
-        <span class="badge me-1 text-bg-secondary">${this.location?.provider}</span>
-        <span class="fi fi-${this.location?.country_code} me-1"></span>
-        <span class="text-primary">${this.location?.name}</span>
+  getContent(value: Location): string {
+    return `
+    <span class="badge me-1 text-bg-secondary">${value.provider}</span>
+    <span class="fi fi-${value.country_code} me-1"></span>
+    <span class="text-primary">${value.name}</span>
     <span class="small ms-1 text-secondary">
-          ${this.location?.country}, ${this.location?.district}, ${this.location?.subdistrict}
+      ${value.country}, ${value.district}, ${value.subdistrict}
     </span>
-      </span>
-      <span>
-        <span class="text-danger ms-2" data-remove>
-          &#x2715;
-        </span>
-      </span>
-    </a>`;
-    this.classList = "list-group-item list-group-item-action";
-    this.addEventListener("click", this.handleClick);
-    if (this.hasAttribute("removable")) {
-      this.querySelector<HTMLElement>("[data-remove]")?.addEventListener("click", this.handleRemoveClick);
-    } else {
-      this.querySelector("[data-remove]")?.remove();
+    `;
   }
 }
 
-  disconnectedCallback() {
-    this.removeEventListener("click", this.handleClick);
-    this.querySelector<HTMLElement>("[data-remove]")?.removeEventListener("click", this.handleRemoveClick);
-  }
+export class WeatherLocationList extends ListElement<Location, WheatherLocationItem> {
+  childType = WheatherLocationItem;
 
-  handleClick(event: MouseEvent) {
-    if (this.location) {
-      window.weatherLocationStorage.add(this.location);
+  public onRefresh(): void {
+    super.onRefresh();
+    if (!this.value?.length) {
+      this.prepend("Empty");
+    }
   }
 }
 
-  handleRemoveClick(event: MouseEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (this.location) {
-      window.weatherLocationStorage.remove(this.location.id);
-    }
-    this.remove();
-  }
-}
-
-customElements.define("weather-location", WeatherLocationElement);
+customElements.define("weather-location-item", WheatherLocationItem);
+customElements.define("weather-location-list", WeatherLocationList);

static/src/app/weather/index.ts

@@ -1,29 +1,11 @@
-import { DataStorage } from "../base/storage";
-import { WeatherLocationElement } from "./component";
+import { DataManager } from "../base/manager";
+import { WeatherLocationList } from "./component";
 import { Location } from "./model";
 
-export class WeatherLocationManager {
-  loadLocations(selector: string) {
-    const locations = window.weatherLocationStorage.getAll();
-    const container = document.querySelector(selector);
-    if (container) {
-      container.innerHTML = "";
-      for (const location of locations) {
-        const element = new WeatherLocationElement();
-        element.setAttribute("location", JSON.stringify(location));
-        element.setAttribute("removable", "");
-        container.appendChild(element);
-      }
-    }
-  }
-}
-
 declare global {
   interface Window {
-    weatherLocationStorage: DataStorage<Location>;
-    weatherLocationManager: WeatherLocationManager;
+    weatherLocationManager: DataManager<Location>;
   }
 }
 
-window.weatherLocationStorage = new DataStorage("weather:locations");
-window.weatherLocationManager = new WeatherLocationManager();
+window.weatherLocationManager = new DataManager(WeatherLocationList, "weather:locations", "#storedLocations");

tests/test_rp5.py

@@ -18,10 +18,10 @@ async def test_search(rp5_api: RP5WeatherApi):
 
 
 async def test_day(rp5_api: RP5WeatherApi):
-    result = await rp5_api.get_day("test", datetime.date(2026, 9, 2))
+    result = await rp5_api.get_day("test", datetime.date(2026, 9, 11))
     assert len(result.values) == 4
 
 
 async def test_days(rp5_api: RP5WeatherApi):
     result = await rp5_api.get_days("test", 10)
-    assert len(result.values) == 7
+    assert len(result.values) == 8