refactor(static): add base component types
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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()},
|
||||
)
|
||||
|
||||
|
||||
|
||||
@@ -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.store(element)"
|
||||
onadd="scheduleChannelManager.add(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.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 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>
|
||||
|
||||
@@ -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]},
|
||||
)
|
||||
|
||||
|
||||
|
||||
@@ -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.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>
|
||||
|
||||
@@ -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 "Группы каналов"
|
||||
@@ -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>
|
||||
+
|
||||
</span>
|
||||
${content}
|
||||
</span>
|
||||
<span>
|
||||
<span class="text-danger ms-2 ${this.options?.onRemove ? "" : "d-none"}" data-remove>
|
||||
✕
|
||||
</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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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[] {
|
||||
|
||||
@@ -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}"
|
||||
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>
|
||||
+
|
||||
</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>
|
||||
✕
|
||||
</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}`;
|
||||
}
|
||||
|
||||
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.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);
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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>
|
||||
✕
|
||||
</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);
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user