72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
//---------------------------------------------------------------------------
|
|
// @syndicate-lang/core, an implementation of Syndicate dataspaces for JS.
|
|
// Copyright (C) 2016-2021 Tony Garnock-Jones <tonyg@leastfixedpoint.com>
|
|
//
|
|
// This program is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
//
|
|
// This program is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU General Public License for more details.
|
|
//
|
|
// You should have received a copy of the GNU General Public License
|
|
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
//---------------------------------------------------------------------------
|
|
|
|
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!");
|
|
}
|
|
}
|
|
}
|