From 3b433d8572057a1b522ef9056275e0ca8b31bb22 Mon Sep 17 00:00:00 2001
From: shmyga <shmyga.z@gmail.com>
Date: Wed, 9 Sep 2026 19:16:00 +0300
Subject: [PATCH] refactor(static): add base component types

---
 .../route/view/common/templates/base.html     |   1 -
 gallery/easel/route/view/schedule/route.py    |   2 +-
 .../route/view/schedule/templates/index.html  |  36 ++--
 gallery/easel/route/view/weather/route.py     |   2 +-
 .../route/view/weather/templates/index.html   |  21 +-
 static/src/app/base/component.ts              | 199 ++++++++++++++++++
 static/src/app/schedule/component.ts          | 139 ++++--------
 static/src/app/schedule/index.ts              |  50 +++--
 static/src/app/weather/component.ts           |  81 +++----
 static/src/app/weather/index.ts               |  45 +++-
 10 files changed, 371 insertions(+), 205 deletions(-)
 create mode 100644 static/src/app/base/component.ts

diff --git a/gallery/easel/route/view/common/templates/base.html b/gallery/easel/route/view/common/templates/base.html
index baf4b6f..3d7e10e 100644
--- a/gallery/easel/route/view/common/templates/base.html
+++ b/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>
diff --git a/gallery/easel/route/view/schedule/route.py b/gallery/easel/route/view/schedule/route.py
index 27f8ba3..bdfee8b 100644
--- a/gallery/easel/route/view/schedule/route.py
+++ b/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()},
     )
 
 
diff --git a/gallery/easel/route/view/schedule/templates/index.html b/gallery/easel/route/view/schedule/templates/index.html
index b0a4f61..63097e5 100644
--- a/gallery/easel/route/view/schedule/templates/index.html
+++ b/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>
-<hr>
+<div class="mb-4">
+  <schedule-channel-list value="{{channels | tojson | forceescape}}"
+                         onclick="scheduleChannelManager.storeChannel(element)" 
+                         onadd="scheduleChannelManager.addChannel(element)"></schedule-channel-list>
+  <hr>
+</div>
 {% endif %}
-<ul id="storedChannels"
-    class="list-group mb-4">
-</ul>
-<ul class="list-group">
-  {% for group in groups %}
-  <schedule-channel-group group="{{group}}"></schedule-channel-group>
-  {% endfor %}
-</ul>
+<div class="mb-4">
+  <h3>Stored channels</h3>
+  <schedule-channel-list id="storedChannels"
+                         onremove="scheduleChannelManager.removeChannel(element)"></schedule-channel-list>
+</div>
+<div class="mb-4">
+  <h3>Channel groups</h3>
+  <ul class="list-group">
+    {% for group in groups %}
+    <schedule-channel-group value="{{group | tojson | forceescape}}"></schedule-channel-group>
+    {% endfor %}
+  </ul>
+</div>
 <script>
   (function () {
     const params = new URLSearchParams(window.location.search);
@@ -59,7 +62,6 @@
     if (searchQuery) {
       document.querySelector('#query').value = searchQuery;
     }
-
     document.addEventListener("DOMContentLoaded", (event) => {
       scheduleChannelManager.loadChannels('#storedChannels');
     });
diff --git a/gallery/easel/route/view/weather/route.py b/gallery/easel/route/view/weather/route.py
index 0990be8..fdc2cab 100644
--- a/gallery/easel/route/view/weather/route.py
+++ b/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]},
     )
 
 
diff --git a/gallery/easel/route/view/weather/templates/index.html b/gallery/easel/route/view/weather/templates/index.html
index 21ea15a..166de99 100644
--- a/gallery/easel/route/view/weather/templates/index.html
+++ b/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>
-<hr>
+<div class="mb-4">
+  <weather-location-list value="{{locations | tojson | forceescape}}"
+                         onclick="weatherLocationManager.storeLocation(element)" 
+                         onadd="weatherLocationManager.addLocation(element)"></schedule-channel-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.removeLocation(element)"></weather-location-list>
+</div>
 <script>
   (function () {
     const params = new URLSearchParams(window.location.search);
diff --git a/static/src/app/base/component.ts b/static/src/app/base/component.ts
new file mode 100644
index 0000000..7af9336
--- /dev/null
+++ b/static/src/app/base/component.ts
@@ -0,0 +1,199 @@
+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 getLabel(value: T): string;
+
+  getBadge(value: T): string | null {
+    return null;
+  }
+
+  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 label = this.getLabel(this.value);
+    const badge = this.getBadge(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>
+        <span class="badge me-1 text-bg-secondary">${badge}</span>
+        <span class="text-primary">${label}</span>
+      </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>> 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));
+      }
+    }
+  }
+}
diff --git a/static/src/app/schedule/component.ts b/static/src/app/schedule/component.ts
index 9270d5a..53d9fab 100644
--- a/static/src/app/schedule/component.ts
+++ b/static/src/app/schedule/component.ts
@@ -1,110 +1,53 @@
+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}"
+  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-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 class="text-primary" style="text-transform: capitalize">${groupName}</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);
+  }
+}
+
+customElements.define("schedule-channel-group", ScheduleChannelGroup);
+
+export class ScheduleChannelItem extends ListItemElement<Channel> {
+  getHref(value: Channel): string {
+    return `${value.provider}/${value.id}`;
+  }
+
+  getLabel(value: Channel): string {
+    return value.name;
+  }
+
+  getBadge(value: Channel): string | null {
+    return value.provider;
+  }
+}
+
+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.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);
-        }
-      }
+      this.prepend("Empty");
     }
   }
 }
 
-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 = `
-    <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>
-    </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-item", ScheduleChannelItem);
+customElements.define("schedule-channel-list", ScheduleChannelList);
diff --git a/static/src/app/schedule/index.ts b/static/src/app/schedule/index.ts
index d51fb25..6bbaf22 100644
--- a/static/src/app/schedule/index.ts
+++ b/static/src/app/schedule/index.ts
@@ -1,26 +1,48 @@
+import { ListItemElement } from "../base/component";
 import { DataStorage } from "../base/storage";
-import { ScheduleChannelElement, ScheduleChannelGroupElement } from "./component";
+import { ScheduleChannelList } from "./component";
 import { Channel } from "./model";
 
 export class ScheduleChannelManager {
+  ScheduleChannelList = ScheduleChannelList; //prevent removing as unusing
+
+  constructor() {
+    this.loadChannels = this.loadChannels.bind(this);
+    this.storeChannel = this.storeChannel.bind(this);
+    this.addChannel = this.addChannel.bind(this);
+    this.removeChannel = this.removeChannel.bind(this);
+  }
+
   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);
+    const list: ScheduleChannelList = document.querySelector(selector)!;
+    list.value = channels;
+  }
+
+  storeChannel(element: ListItemElement<Channel>) {
+    const channel = element.value;
+    if (channel) window.scheduleChannelStorage.add(channel);
+  }
+
+  addChannel(element: ListItemElement<Channel>) {
+    const channel = element.value;
+    if (channel && window.scheduleChannelStorage.add(channel)) {
+      const storedChannels = document.querySelector("#storedChannels");
+      if (storedChannels) {
+        const clone: ListItemElement<Channel> = element.cloneNode(true) as ListItemElement<Channel>;
+        clone.options = { onRemove: this.removeChannel };
+        storedChannels.appendChild(clone);
       }
     }
   }
+
+  removeChannel(element: ListItemElement<Channel>) {
+    const channel = element.value;
+    if (channel) {
+      window.scheduleChannelStorage.remove(channel.id);
+      element.remove();
+    }
+  }
 }
 
 declare global {
diff --git a/static/src/app/weather/component.ts b/static/src/app/weather/component.ts
index 491aedf..f9bd384 100644
--- a/static/src/app/weather/component.ts
+++ b/static/src/app/weather/component.ts
@@ -1,63 +1,36 @@
+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>
-        <span class="small ms-1 text-secondary">
-          ${this.location?.country}, ${this.location?.district}, ${this.location?.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();
-    }
+  getLabel(value: Location): string {
+    return `
+    <span class="fi fi-${value.country_code} me-1"></span>
+    <span class="text-primary">${value.name}</span>
+    <span class="small ms-1 text-secondary">
+      ${value.country}, ${value.district}, ${value.subdistrict}
+    </span>
+    `;
   }
 
-  disconnectedCallback() {
-    this.removeEventListener("click", this.handleClick);
-    this.querySelector<HTMLElement>("[data-remove]")?.removeEventListener("click", this.handleRemoveClick);
-  }
-
-  handleClick(event: MouseEvent) {
-    if (this.location) {
-      window.weatherLocationStorage.add(this.location);
-    }
-  }
-
-  handleRemoveClick(event: MouseEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (this.location) {
-      window.weatherLocationStorage.remove(this.location.id);
-    }
-    this.remove();
+  getBadge(value: Location): string | null {
+    return value.provider;
   }
 }
 
-customElements.define("weather-location", WeatherLocationElement);
+export class WeatherLocationList extends ListElement<Location, WheatherLocationItem> {
+  childType = WheatherLocationItem;
+
+  public onRefresh(): void {
+    super.onRefresh();
+    if (!this.value?.length) {
+      this.prepend("Empty");
+    }
+  }
+}
+
+customElements.define("weather-location-item", WheatherLocationItem);
+customElements.define("weather-location-list", WeatherLocationList);
diff --git a/static/src/app/weather/index.ts b/static/src/app/weather/index.ts
index 5ff05e8..1a1e272 100644
--- a/static/src/app/weather/index.ts
+++ b/static/src/app/weather/index.ts
@@ -1,21 +1,48 @@
+import { ListItemElement } from "../base/component";
 import { DataStorage } from "../base/storage";
-import { WeatherLocationElement } from "./component";
+import { WeatherLocationList } from "./component";
 import { Location } from "./model";
 
 export class WeatherLocationManager {
+  WeatherLocationList = WeatherLocationList; //prevent removing as unusing
+
+  constructor() {
+    this.loadLocations = this.loadLocations.bind(this);
+    this.storeLocation = this.storeLocation.bind(this);
+    this.addLocation = this.addLocation.bind(this);
+    this.removeLocation = this.removeLocation.bind(this);
+  }
+
   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);
+    const list: WeatherLocationList = document.querySelector(selector)!;
+    list.value = locations;
+  }
+
+  storeLocation(element: ListItemElement<Location>) {
+    const location = element.value;
+    if (location) window.weatherLocationStorage.add(location);
+  }
+
+  addLocation(element: ListItemElement<Location>) {
+    const location = element.value;
+    if (location && window.weatherLocationStorage.add(location)) {
+      const storedLocations = document.querySelector("#storedLocations");
+      if (storedLocations) {
+        const clone: ListItemElement<Location> = element.cloneNode(true) as ListItemElement<Location>;
+        clone.options = { onRemove: this.removeLocation };
+        storedLocations.appendChild(clone);
       }
     }
   }
+
+  removeLocation(element: ListItemElement<Location>) {
+    const channel = element.value;
+    if (channel) {
+      window.weatherLocationStorage.remove(channel.id);
+      element.remove();
+    }
+  }
 }
 
 declare global {