2025-09-20 22:59:18 +02:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="./dialog.css">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="./jsonform.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script type="module">
|
|
|
|
|
|
2025-09-21 12:16:40 +02:00
|
|
|
import { el, dom } from './dom.js';
|
|
|
|
|
import { dialog } from './dialog.js';
|
|
|
|
|
import { JsonForm, TextField, NumericField, CheckField } from './jsonform.js';
|
|
|
|
|
import { jsonQuery, jsonPatch, tokenizePath } from './json.js';
|
|
|
|
|
import { date } from './date.js';
|
|
|
|
|
|
|
|
|
|
// build our dom tree
|
|
|
|
|
let btn, btn2, btn3, btn4;
|
|
|
|
|
let root = el.div({}, [
|
|
|
|
|
el.div({ style:'color:#444;' }, "This is dynamically generated!"),
|
|
|
|
|
el.div({ style:'display:flex; gap:0.25rem; margin-top:0.25rem;' }, [
|
|
|
|
|
el.button({ 'on:click': () => dialog.info("You clicked me!") }, "With event"),
|
|
|
|
|
btn = el.button({}, "Hello World"),
|
|
|
|
|
btn2 = el.button({}, "Error mode"),
|
|
|
|
|
btn3 = el.button({}, "Edit form"),
|
|
|
|
|
btn4 = el.button({}, "Form modal"),
|
|
|
|
|
])
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
// Apply attributes (in this case styles) to the root element
|
|
|
|
|
dom.apply(root, { 'style':'border: solid 1px #999; padding: 5px;' });
|
|
|
|
|
|
|
|
|
|
// click handlers to show off the dialogs
|
|
|
|
|
btn.addEventListener('click', () => {
|
|
|
|
|
dialog.msgbox("Yo! This is a messagebox!").then((result) => {
|
|
|
|
|
console.log("Accepted with: " + result);
|
|
|
|
|
dialog.confirm("Isn't that neat?", "Woah", { "sure":"Sure!", "nah":"Nah..." }).then((result) => {
|
|
|
|
|
console.log("Neat? " + result);
|
|
|
|
|
});
|
2025-09-20 22:59:18 +02:00
|
|
|
});
|
|
|
|
|
});
|
2025-09-21 12:16:40 +02:00
|
|
|
btn2.addEventListener('click', async () => {
|
|
|
|
|
await dialog.error("Oh shit. That didn't work. Maybe try again?");
|
|
|
|
|
await dialog.information("Just kidding! Everything is great!");
|
|
|
|
|
});
|
2025-09-21 00:45:34 +02:00
|
|
|
|
2025-09-21 12:16:40 +02:00
|
|
|
// Append the dom we built
|
|
|
|
|
document.body.appendChild(root);
|
|
|
|
|
|
|
|
|
|
// Define a form with three rows and some various fields
|
|
|
|
|
const userForm = new JsonForm();
|
|
|
|
|
userForm.layout.addRow()
|
|
|
|
|
.append(new TextField({ label:"Username", width:70, path:".username" }))
|
|
|
|
|
.append(new NumericField({ label:"ID", path:".id", locked:true }));
|
|
|
|
|
userForm.layout.addRow()
|
|
|
|
|
.append(new TextField({ label:"Created", width:50, path:".meta.created", locked:true }))
|
|
|
|
|
.append(new TextField({ label:"Updated", width:50, path:".meta.updated", locked:true }));
|
|
|
|
|
userForm.layout.addRow()
|
|
|
|
|
.append(new NumericField({ label:"Salary", width:30, path:".meta.salary", fixed:2 }))
|
|
|
|
|
.append(new CheckField({ label:"Admin", path:".admin" }));
|
|
|
|
|
document.body.appendChild(userForm.dom());
|
|
|
|
|
|
|
|
|
|
// Set the model
|
|
|
|
|
userForm.model = {
|
|
|
|
|
username: "Admin",
|
|
|
|
|
id: 1,
|
|
|
|
|
meta: {
|
|
|
|
|
created: '2025-09-01 00:00:00 +02:00',
|
2025-09-21 00:45:34 +02:00
|
|
|
}
|
2025-09-21 12:16:40 +02:00
|
|
|
};
|
2025-09-21 00:45:34 +02:00
|
|
|
|
2025-09-21 12:16:40 +02:00
|
|
|
// Create a click handler to toggle editable on the form
|
|
|
|
|
btn3.addEventListener('click', () => {
|
|
|
|
|
userForm.editable = !userForm.editable;
|
|
|
|
|
if (!userForm.editable) {
|
|
|
|
|
console.log(userForm.model);
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-09-21 00:45:34 +02:00
|
|
|
|
2025-09-21 12:16:40 +02:00
|
|
|
// Define another form, this one for embedding in a dialog
|
|
|
|
|
const productForm = new JsonForm();
|
|
|
|
|
productForm.layout.addRow()
|
|
|
|
|
.append(new TextField({ label:"Product", width:60, path:".product.name" }))
|
|
|
|
|
.append(new NumericField({ label:"Price", path:".product.price", fixed:2 }));
|
|
|
|
|
productForm.layout.addRow()
|
|
|
|
|
.append(new NumericField({ label:"Inventory", width:30, path:".inventory.count" }))
|
|
|
|
|
.append(new NumericField({ label:"Limit", width:30, path:".inventory.limit" }))
|
|
|
|
|
.append(new CheckField({ label:"Virtual", width:20, path:".virtual" }))
|
|
|
|
|
.append(new CheckField({ label:"Active", width:20, path:".active" }));
|
|
|
|
|
|
|
|
|
|
// Set an empty model for creating a new product
|
|
|
|
|
productForm.model = {};
|
|
|
|
|
|
|
|
|
|
btn4.addEventListener('click', () => {
|
|
|
|
|
dialog.dialog(productForm.dom(), "Title", {"ok":"Update"}, { showClose:true, width:'400px' }).then(
|
|
|
|
|
(result) => {
|
|
|
|
|
productForm.editable = false;
|
|
|
|
|
if (result == 'ok') {
|
|
|
|
|
// here's the new product model!
|
|
|
|
|
console.log(productForm.model);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
productForm.editable = true;
|
|
|
|
|
});
|
2025-09-20 22:59:18 +02:00
|
|
|
|
2025-09-21 12:16:40 +02:00
|
|
|
// This just demonstrates the json functions
|
|
|
|
|
console.log(tokenizePath(".foo.bar[1].title"));
|
|
|
|
|
console.log(jsonQuery({ "foo":{ "bar":"42" }}, ".foo.bar" ));
|
|
|
|
|
console.log(jsonQuery([ { name:"cheese" }, { name:"bread" }, { name:"milk" } ], "[].name" ));
|
2025-09-20 22:59:18 +02:00
|
|
|
|
2025-09-21 12:16:40 +02:00
|
|
|
let data = { name: "Bob" };
|
|
|
|
|
console.log(data);
|
|
|
|
|
let data2 = jsonPatch(data, ".name", "Bobby");
|
|
|
|
|
console.log(data, data2);
|
2025-09-20 22:59:18 +02:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
