57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
/// SPDX-License-Identifier: GPL-3.0-or-later
|
|
/// SPDX-FileCopyrightText: Copyright © 2016-2021 Tony Garnock-Jones <tonyg@leastfixedpoint.com>
|
|
|
|
import { Embedded, Value } from '@syndicate-lang/core';
|
|
activate import { UIEvent, GlobalEvent, HtmlFragments, template, Anchor } from '@syndicate-lang/html';
|
|
|
|
assertion type Person(id, firstName, lastName, address, age);
|
|
message type SetSortColumn(number);
|
|
|
|
boot {
|
|
function newRow(id: number, firstName: string, lastName: string, address: string, age: number) {
|
|
spawn named ('model' + id) {
|
|
assert Person(id, firstName, lastName, address, age);
|
|
}
|
|
}
|
|
|
|
newRow(1, 'Keith', 'Example', '94 Main St.', 44);
|
|
newRow(2, 'Karen', 'Fakeperson', '5504 Long Dr.', 34);
|
|
newRow(3, 'Angus', 'McFictional', '2B Pioneer Heights', 39);
|
|
newRow(4, 'Sue', 'Donnem', '1 Infinite Loop', 104);
|
|
newRow(5, 'Boaty', 'McBoatface', 'Arctic Ocean', 1);
|
|
|
|
spawn named 'view' {
|
|
let ui = new Anchor();
|
|
field orderColumn: number = 2;
|
|
|
|
function cell(text: Value): HtmlFragments {
|
|
return template`<td>${text.toString()}</td>`;
|
|
}
|
|
|
|
on message SetSortColumn($c: number) => this.orderColumn = c;
|
|
|
|
during Person($id: number, $firstName: string, $lastName: string, $address: string, $age: number) => {
|
|
assert ui.context(id)
|
|
.html('table#the-table tbody',
|
|
template`<tr>${[id, firstName, lastName, address, age].map(cell)}</tr>`,
|
|
[id, firstName, lastName, address, age][this.orderColumn]);
|
|
}
|
|
}
|
|
|
|
spawn named 'controller' {
|
|
on message GlobalEvent('table#the-table th', 'click', $e) => {
|
|
send message SetSortColumn(
|
|
JSON.parse(((e as Embedded<Event>).embeddedValue.target as HTMLElement).dataset.column!));
|
|
}
|
|
}
|
|
|
|
spawn named 'alerter' {
|
|
let ui = new Anchor();
|
|
assert ui.html('#extra', template`<button>Click me</button>`);
|
|
|
|
on message UIEvent(ui.fragmentId, '.', 'click', $_e) => {
|
|
alert("Hello!");
|
|
}
|
|
}
|
|
}
|