aboutsummaryrefslogtreecommitdiff
path: root/html
diff options
context:
space:
mode:
Diffstat (limited to 'html')
-rw-r--r--html/base.css2
-rw-r--r--html/dialog.js64
-rw-r--r--html/grid.css8
-rw-r--r--html/item_preview.html34
-rw-r--r--html/payload_create.html59
-rw-r--r--html/payload_create.js31
6 files changed, 114 insertions, 84 deletions
diff --git a/html/base.css b/html/base.css
index 6085f5f..e5e4660 100644
--- a/html/base.css
+++ b/html/base.css
@@ -34,7 +34,7 @@ body {
overflow: auto;
}
-.bold, h1, h2, h3 {
+.bold, h1, h2, h3, label {
font-weight: bold;
}
diff --git a/html/dialog.js b/html/dialog.js
index 22e8aa9..c4bba5d 100644
--- a/html/dialog.js
+++ b/html/dialog.js
@@ -42,7 +42,6 @@
*/
#FROM html/DOM_helpers.js IMPORT clone_template
-#FROM common/lock.js IMPORT make_lock, lock, try_lock, unlock
function make(on_dialog_show, on_dialog_hide)
{
@@ -51,9 +50,7 @@ function make(on_dialog_show, on_dialog_hide)
on_dialog_show,
on_dialog_hide,
shown: false,
- queue: 0,
- lock: make_lock(),
- callback: null
+ queue: [],
});
for (const [id, val] of [["yes", true], ["no", false], ["ok", undefined]]) {
@@ -68,33 +65,30 @@ function make(on_dialog_show, on_dialog_hide)
function close_dialog(dialog_context, event)
{
- if (event && event.target.parentElement.classList.contains("hide"))
+ if ((event && event.target.parentElement.classList.contains("hide")) ||
+ dialog_context.queue.length === 0)
return;
- const result = event ? event.target.haketilo_dialog_result : undefined;
+ const [[shown_buts_id, msg, resolve]] = dialog_context.queue.splice(0, 1);
- if (dialog_context.queue > 0)
- dialog_context.callback(result);
+ if (dialog_context.queue.length > 0) {
+ process_queue_item(dialog_context);
+ } else {
+ dialog_context.shown = false;
+ try {
+ dialog_context.on_dialog_hide();
+ } catch(e) {
+ console.error(e);
+ }
+ }
+
+ resolve(event ? event.target.haketilo_dialog_result : undefined);
}
#EXPORT close_dialog AS close
-async function show_dialog(dialog_context, shown_buts_id, msg)
+function process_queue_item(dialog_context)
{
- dialog_context.queue++;
-
- if (!dialog_context.shown) {
- dialog_context.shown = true;
- dialog_context.on_dialog_show();
- }
-
- /*
- * We want the dialog to be ready for calling close() right after
- * show_dialog() gets called. For this, we want locking to happen
- * synchronously if possible. If impossible (lock taken), this means dialog
- * is already open, hence it's also ready for close()'ing.
- */
- if (!try_lock(dialog_context.lock))
- await lock(dialog_context.lock);
+ const [shown_buts_id, msg, resolve] = dialog_context.queue[0];
[...dialog_context.msg.childNodes].forEach(n => n.remove());
dialog_context.msg.append(...msg);
@@ -102,17 +96,25 @@ async function show_dialog(dialog_context, shown_buts_id, msg)
const action = buts_id === shown_buts_id ? "remove" : "add";
dialog_context[buts_id].classList[action]("hide");
}
+}
- const result = await new Promise(cb => dialog_context.callback = cb);
+async function show_dialog(dialog_context, shown_buts_id, msg)
+{
+ let resolve;
+ const result_prom = new Promise(cb => resolve = cb);
+ dialog_context.queue.push([shown_buts_id, msg, resolve]);
- if (--dialog_context.queue == 0) {
- dialog_context.shown = false;
- dialog_context.on_dialog_hide();
+ if (!dialog_context.shown) {
+ process_queue_item(dialog_context);
+ dialog_context.shown = true;
+ try {
+ dialog_context.on_dialog_show();
+ } catch(e) {
+ console.error(e);
+ }
}
- unlock(dialog_context.lock);
-
- return result;
+ return await result_prom;
}
const error = (ctx, ...msg) => show_dialog(ctx, "conf_buts", msg);
diff --git a/html/grid.css b/html/grid.css
index 591772e..aa8fc80 100644
--- a/html/grid.css
+++ b/html/grid.css
@@ -70,11 +70,3 @@ div.grid_col_both {
margin-left: 1em;
margin-right: 1em;
}
-
-.grid_form>span {
- font-weight: bold;
-}
-
-span.grid_col_2 {
- font-weight: initial;
-}
diff --git a/html/item_preview.html b/html/item_preview.html
index a00d299..6cd15a8 100644
--- a/html/item_preview.html
+++ b/html/item_preview.html
@@ -46,43 +46,43 @@
<div id="resource_preview" data-template="main_div"
class="grid_2 grid_form preview_main_div">
<h3 class="grid_col_both">resource preview</h3>
- <span class="grid_col_1">identifier:</span>
+ <label class="grid_col_1">identifier:</label>
<span data-template="identifier" class="grid_col_2">...</span>
- <span class="grid_col_1">long name:</span>
+ <label class="grid_col_1">long name:</label>
<span data-template="long_name" class="grid_col_2">...</span>
- <span class="grid_col_1">UUID:</span>
+ <label class="grid_col_1">UUID:</label>
<span data-template="uuid" class="grid_col_2">...</span>
- <span class="grid_col_1">version:</span>
+ <label class="grid_col_1">version:</label>
<span data-template="version" class="grid_col_2">...</span>
- <span class="grid_col_1">description:</span>
+ <label class="grid_col_1">description:</label>
<span data-template="description" class="grid_col_2">...</span>
- <span class="grid_col_1">dependencies:</span>
+ <label class="grid_col_1">dependencies:</label>
<span class="grid_col_2"><ul data-template="dependencies"></ul></span>
- <span class="grid_col_1">scripts:</span>
+ <label class="grid_col_1">scripts:</label>
<span class="grid_col_2"><ul data-template="scripts"></ul></span>
- <span class="grid_col_1">source name:</span>
+ <label class="grid_col_1">source name:</label>
<span data-template="source_name" class="grid_col_2">...</span>
- <span class="grid_col_1">copyright:</span>
+ <label class="grid_col_1">copyright:</label>
<span class="grid_col_2"><ul data-template="copyright"></ul></span>
</div>
<div id="mapping_preview" data-template="main_div"
class="grid_2 grid_form">
<h3 class="grid_col_both">mapping preview</h3>
- <span class="grid_col_1">identifier:</span>
+ <label class="grid_col_1">identifier:</label>
<span data-template="identifier" class="grid_col_2">...</span>
- <span class="grid_col_1">long name:</span>
+ <label class="grid_col_1">long name:</label>
<span data-template="long_name" class="grid_col_2">...</span>
- <span class="grid_col_1">UUID:</span>
+ <label class="grid_col_1">UUID:</label>
<span data-template="uuid" class="grid_col_2">...</span>
- <span class="grid_col_1">version:</span>
+ <label class="grid_col_1">version:</label>
<span data-template="version" class="grid_col_2">...</span>
- <span class="grid_col_1">description:</span>
+ <label class="grid_col_1">description:</label>
<span data-template="description" class="grid_col_2">...</span>
- <span class="grid_col_both">payloads:</span>
+ <label class="grid_col_both">payloads:</label>
<div data-template="payloads" class="grid_col_both grid_2"></div>
- <span class="grid_col_1">source name:</span>
+ <label class="grid_col_1">source name:</label>
<span data-template="source_name" class="grid_col_2">...</span>
- <span class="grid_col_1">copyright:</span>
+ <label class="grid_col_1">copyright:</label>
<span class="grid_col_2"><ul data-template="copyright"></ul></span>
</div>
</template>
diff --git a/html/payload_create.html b/html/payload_create.html
index 0f6927f..062e41c 100644
--- a/html/payload_create.html
+++ b/html/payload_create.html
@@ -43,29 +43,54 @@
.payload_create_main_view {
margin: 0.8em;
}
- .payload_create_buts {
+ .payload_create_form {
+ margin: 0 0.6em;
+ }
+ .payload_create_form>* {
+ margin: 0.3em 0;
+ }
+ .payload_create_form>textarea {
+ resize: vertical;
+ height: 5em;
+ }
+ .payload_create_form>textarea.payload_create_script {
+ height: 18em;
+ font-family: monospace;
+ }
+ .payload_create_buts, .payload_create_heading {
text-align: center;
+ margin: 0.5em 0;
}
</style>
<template>
<div id="payload_create" data-template="main_div"
class="payload_create_main_view">
- <div data-template="form_container" class="grid_1">
- <h3>create_payload</h3>
- <label>
- identifier* (may only contain digits 0-9, lowercase letters a-z and hyphens '-'; will have 'local-' prepended):
- </label>
- <input data-template="identifier">
- <label>long name (defaults to the same as identifier):</label>
- <input data-template="long_name">
- <label>description:</label>
- <textarea data-template="description"></textarea>
- <label>URL patterns* (put each on its own line):</label>
- <textarea data-template="patterns">https://example.com/***</textarea>
- <label>script to inject*:</label>
- <textarea data-template="script">console.log("Hello, World!");</textarea>
- <div class="payload_create_buts">
- <button data-template="create_but">Create</button>
+ <div data-template="form_container">
+ <div class="grid_1 payload_create_form">
+ <h3 class="payload_create_heading">Create payload</h3>
+ <span>
+ <label>identifier*</label>
+ (may only contain digits 0-9, lowercase letters a-z and hyphens '-';
+ will have 'local-' prepended):
+ </span>
+ <input data-template="identifier">
+ <span>
+ <label>long name</label> (defaults to the same as identifier):
+ </span>
+ <input data-template="long_name">
+ <span><label>description</label>:</span>
+ <textarea data-template="description"></textarea>
+ <span>
+ <label><a data-template="patterns_link">URL patterns</a>*</label>
+ (put each on its own line):
+ </span>
+ <textarea data-template="patterns">https://example.com/***</textarea>
+ <span><label>script to inject*</label>:</span>
+ <textarea data-template="script" class="payload_create_script"
+ >console.log("Hello, World!");</textarea>
+ <div class="payload_create_buts">
+ <button data-template="create_but">Create</button>
+ </div>
</div>
</div>
<div data-template="dialog_container" class="hide">
diff --git a/html/payload_create.js b/html/payload_create.js
index db63a82..a5f9854 100644
--- a/html/payload_create.js
+++ b/html/payload_create.js
@@ -48,6 +48,9 @@
#FROM common/sha256.js IMPORT sha256
#FROM common/patterns.js IMPORT deconstruct_url
+const patterns_doc_url =
+ "https://hydrillabugs.koszko.org/projects/haketilo/wiki/URL_patterns";
+
/* https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid */
/* This is a helper function used by uuidv4(). */
function uuid_replace_num(num)
@@ -85,8 +88,6 @@ function collect_form_data(form_ctx)
try {
deconstruct_url(pattern);
} catch(e) {
- const patterns_doc_url =
- "https://hydrillabugs.koszko.org/projects/haketilo/wiki/URL_patterns";
const patterns_doc_link = document.createElement("a");
patterns_doc_link.href = patterns_doc_url;
patterns_doc_link.innerText = "here";
@@ -97,7 +98,7 @@ function collect_form_data(form_ctx)
}
if (pattern in payloads)
- throw `Pattern '${pattern}' soecified multiple times!`;
+ throw `Pattern '${pattern}' specified multiple times!`;
payloads[pattern] = {identifier};
}
@@ -135,6 +136,15 @@ function collect_form_data(form_ctx)
return {identifier, resource, mapping, files: {[hash_key]: script}};
}
+function clear_form(form_ctx)
+{
+ form_ctx.identifier.value = "";
+ form_ctx.long_name.value = "";
+ form_ctx.description.value = "";
+ form_ctx.patterns.value = "https://example.com/***";
+ form_ctx.script.value = `console.log("Hello, World!");`;
+}
+
async function save_payload(saving)
{
const db = await haketilodb.get();
@@ -146,7 +156,7 @@ async function save_payload(saving)
if (!saving[`override_${type}`] &&
(await haketilodb.idb_get(tx_ctx.transaction, store_name,
saving.identifier))) {
- saving.ask_override = "resource";
+ saving.ask_override = type;
return;
}
}
@@ -160,8 +170,8 @@ async function save_payload(saving)
function override_question(saving)
{
return saving.ask_override === "resource" ?
- `Resource '${saving.identifier}' alredy exists. Override?` :
- `Mapping '${saving.identifier}' alredy exists. Override?`;
+ `Resource '${saving.identifier}' already exists. Override?` :
+ `Mapping '${saving.identifier}' already exists. Override?`;
}
async function create_clicked(form_ctx)
@@ -169,16 +179,15 @@ async function create_clicked(form_ctx)
if (form_ctx.dialog_ctx.shown)
return;
- dialog.loader(form_ctx.dialog_ctx, "Saving payload...");
-
try {
var saving = collect_form_data(form_ctx);
} catch(e) {
dialog.error(form_ctx.dialog_ctx, e);
- dialog.close(form_ctx.dialog_ctx);
return;
}
+ dialog.loader(form_ctx.dialog_ctx, "Saving payload...");
+
try {
do {
if (saving.ask_override) {
@@ -197,9 +206,10 @@ async function create_clicked(form_ctx)
} while (saving.ask_override);
dialog.info(form_ctx.dialog_ctx, "Successfully saved payload!");
+ clear_form(form_ctx);
} catch(e) {
console.error(e);
- dialog.error(form_ctx.dialog_ctx, "Failed to save payload :(")
+ dialog.error(form_ctx.dialog_ctx, "Failed to save payload :(");
}
dialog.close(form_ctx.dialog_ctx);
@@ -221,6 +231,7 @@ function payload_create_form()
() => on_show_hide(form_ctx, "form"));
form_ctx.dialog_container.prepend(form_ctx.dialog_ctx.main_div);
+ form_ctx.patterns_link.href = patterns_doc_url;
form_ctx.create_but.addEventListener("click",
() => create_clicked(form_ctx));