upend/webui/src/lib/types.ts

152 lines
3.0 KiB
TypeScript

import Table from "../components/widgets/Table.svelte";
import Gallery from "../components/widgets/Gallery.svelte";
export class UpType {
address: string | undefined;
name: string | null = null;
label: string | null = null;
attributes: string[] = [];
constructor(address?: string) {
this.address = address;
}
public get icon(): string | undefined {
return this.name ? TYPE_ICONS[this.name] : undefined;
}
public get widgetInfo(): Widget[] {
return TYPE_WIDGETS[this.name] || [];
}
}
export const UNTYPED = new UpType();
export interface Component {
component: any; // TODO
props?: { [key: string]: unknown };
}
export interface Widget {
name: string;
icon?: string;
components: Array<Component>;
}
const TYPE_ICONS: { [key: string]: string } = {
BLOB: "package",
HIER: "folder",
};
const TYPE_WIDGETS: { [key: string]: Widget[] } = {
HIER: [
{
name: "hierarchical-listing",
icon: "folder",
components: [
{
component: Table,
props: {
columns: "value",
header: false,
},
},
],
},
{
name: "gallery-view",
icon: "image",
components: [
{
component: Gallery,
},
],
},
],
KSX_TRACK_MOODS: [
{
name: "ksx-track-compass",
icon: "plus-square",
components: [
// {
// name: "Compass",
// id: "compass_tint_energy",
// props: {
// xAttrName: "KSX_TINT",
// yAttrName: "KSX_ENERGY",
// xLabel: "Lightsoft // Heavydark",
// yLabel: "Chill // Extreme",
// },
// },
// {
// name: "Compass",
// id: "compass_seriousness_materials",
// props: {
// xAttrName: "KSX_SERIOUSNESS",
// yAttrName: "KSX_MATERIALS",
// xLabel: "Dionysia // Apollonia",
// yLabel: "Natural // Reinforced",
// },
// },
],
},
],
HOME_VIEW: [
{
name: "list-table",
icon: "list-ul",
components: [
{
component: Table,
props: {
columns: "value, entity",
columnWidths: ["13em"],
orderByValue: true,
header: false,
},
},
],
},
{
name: "gallery-view",
icon: "image",
components: [
{
component: Gallery,
props: {
showEntities: true,
},
},
],
},
],
SEARCH_VIEW: [
{
name: "list-table",
icon: "list-ul",
components: [
{
component: Table,
props: {
columns: "entity",
orderByValue: true,
header: false,
},
},
],
},
{
name: "gallery-view",
icon: "image",
components: [
{
component: Gallery,
props: {
showEntities: true,
},
},
],
},
],
};