Public
Edited
Dec 1, 2022
html`<pre>${escapeHtml(JSON.stringify(current_tasks, null, 4))}</pre>`
html`Look, Ma, ${"<i>automatic escaping</i>"}!`
donesUpdated = checklist &&
Promise.all(
checklist.map(async (checks, idx) => {
let newDone = checks.length;
let item = current_tasks[idx];
let response = null;
if (item.done != newDone) {
response = await (
await fetch(
`https://latest.datasette.io/ephemeral/tasks/${item.rowid}/-/update`,
{
method: "POST",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
update: {
done: newDone
}
})
}
)
).json();
}
return { done: newDone, idx, item: JSON.stringify(item), response };
})
)
checklist
add_response = {
const response = await fetch(
"https://latest.datasette.io/ephemeral/tasks/-/insert",
{
method: "POST",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
row: {
task: to_add,
done: 0
}
})
}
);
return await response.json();
}
create_table_response = ensureTableExists()
viewof createResponse = Inputs.button("Create table", {
value: null,
reduce: async () => {
const response = await fetch(
"https://latest.datasette.io/ephemeral/-/create",
{
method: "POST",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
table: "tasks",
row: { task: "and another" }
})
}
);
return await response.json();
}
})
token
createResponse
current_tasks = {
// Trigger after add or create
create_table_response;
add_response;
try {
const response = await fetch(
"https://latest.datasette.io/ephemeral/tasks.json?_shape=array&task__notblank=1",
{
method: "GET",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
}
}
);
let data = await response.json();
if (!(data instanceof Array) && !data.ok) {
ensureTableExists();
return [];
}
return data;
} catch (e) {
return [];
}
}
async function ensureTableExists() {
const response = await fetch(
"https://latest.datasette.io/ephemeral/-/create",
{
method: "POST",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
table: "tasks",
columns: [
{ name: "task", type: "text" },
{ name: "done", type: "integer" }
]
})
}
);
return await response.json();
}
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
