refactor(static): add base component types

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>
-        <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();
-    }
-  }
-
-  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();
+  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">
+      ${value.country}, ${value.district}, ${value.subdistrict}
+    </span>
+    `;
   }
 }
 
-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);

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");