53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { ListElement, ListItemElement, ValueElement } from "../base/component";
|
|
import { Channel } from "./model";
|
|
|
|
export class ScheduleChannelGroup extends ValueElement<string | Channel[], {}> {
|
|
className: string = "list-group-item list-group-item-action";
|
|
|
|
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">${groupName}</span>
|
|
</span>
|
|
</a>`;
|
|
}
|
|
}
|
|
|
|
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);
|