aboutsummaryrefslogtreecommitdiff
path: root/html
diff options
context:
space:
mode:
Diffstat (limited to 'html')
-rw-r--r--html/DOM_helpers.js47
-rw-r--r--html/base.css4
-rw-r--r--html/dialog.js41
-rw-r--r--html/install.html3
-rw-r--r--html/install.js73
-rw-r--r--html/repo_query.html148
-rw-r--r--html/repo_query.js210
-rw-r--r--html/settings.html4
-rw-r--r--html/text_entry_list.js7
9 files changed, 448 insertions, 89 deletions
diff --git a/html/DOM_helpers.js b/html/DOM_helpers.js
index 88092e5..9e64956 100644
--- a/html/DOM_helpers.js
+++ b/html/DOM_helpers.js
@@ -85,3 +85,50 @@ function clone_template(template_id)
return result_object;
}
#EXPORT clone_template
+
+function Showable(on_show_cb, on_hide_cb) {
+ this.shown = false;
+
+ /*
+ * Wrap the requested callback into one that only executes it if showable is
+ * not shown.
+ */
+ this.when_hidden = cb => {
+ const wrapped_cb = (...args) => {
+ if (!this.shown)
+ return cb(...args);
+ }
+ return wrapped_cb;
+ }
+
+ this.show = () => {
+ if (this.shown)
+ return false;
+
+ this.shown = true;
+
+ try {
+ on_show_cb();
+ } catch(e) {
+ console.error(e);
+ }
+
+ return true;
+ }
+
+ this.hide = () => {
+ if (!this.shown)
+ return false;
+
+ this.shown = false;
+
+ try {
+ on_hide_cb();
+ } catch(e) {
+ console.error(e);
+ }
+
+ return true;
+ }
+}
+#EXPORT Showable
diff --git a/html/base.css b/html/base.css
index df6213a..dd08387 100644
--- a/html/base.css
+++ b/html/base.css
@@ -88,11 +88,11 @@ body {
--line-height: 0.4em;
}
-div.bottom_line {
+div.top_line {
height: var(--line-height);
background: linear-gradient(#555, transparent);
}
-div.top_line {
+div.bottom_line {
height: var(--line-height);
background: linear-gradient(transparent, #555);
}
diff --git a/html/dialog.js b/html/dialog.js
index a4e275f..fbea657 100644
--- a/html/dialog.js
+++ b/html/dialog.js
@@ -41,17 +41,14 @@
* proprietary program, I am not going to enforce this in court.
*/
-#FROM html/DOM_helpers.js IMPORT clone_template
+#FROM html/DOM_helpers.js IMPORT clone_template, Showable
function make(on_dialog_show, on_dialog_hide)
{
const dialog_context = clone_template("dialog");
- Object.assign(dialog_context, {
- on_dialog_show,
- on_dialog_hide,
- shown: false,
- queue: [],
- });
+ dialog_context.queue = [];
+
+ Showable.call(dialog_context, on_dialog_show, on_dialog_hide);
for (const [id, val] of [["yes", true], ["no", false], ["ok", undefined]]) {
const but = dialog_context[`${id}_but`];
@@ -74,12 +71,7 @@ function close_dialog(dialog_context, event)
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);
- }
+ dialog_context.hide();
}
resolve(event ? event.target.haketilo_dialog_result : undefined);
@@ -104,15 +96,8 @@ async function show_dialog(dialog_context, shown_buts_id, msg)
const result_prom = new Promise(cb => resolve = cb);
dialog_context.queue.push([shown_buts_id, msg, resolve]);
- if (!dialog_context.shown) {
+ if (dialog_context.show())
process_queue_item(dialog_context);
- dialog_context.shown = true;
- try {
- dialog_context.on_dialog_show();
- } catch(e) {
- console.error(e);
- }
- }
return await result_prom;
}
@@ -129,17 +114,3 @@ const ask = (ctx, ...msg) => show_dialog(ctx, "ask_buts", msg);
const loader = (ctx, ...msg) => show_dialog(ctx, null, msg);
#EXPORT loader
-
-/*
- * Wrapper the requested callback into one that only executes it if dialog is
- * not shown.
- */
-function when_hidden(ctx, cb)
-{
- function wrapped_cb(...args) {
- if (!ctx.shown)
- return cb(...args);
- }
- return wrapped_cb;
-}
-#EXPORT when_hidden
diff --git a/html/install.html b/html/install.html
index b8d0927..0146a8d 100644
--- a/html/install.html
+++ b/html/install.html
@@ -67,7 +67,7 @@
}
.install_bottom_buttons {
- margin: 1em auto;
+ margin: 1em;
text-align: center;
}
</style>
@@ -95,6 +95,7 @@
</div>
</div>
</div>
+
<li id="install_list_entry" data-template="main_li"
class="install_entry_li">
<div class="install_item_info">
diff --git a/html/install.js b/html/install.js
index dbc490d..e972924 100644
--- a/html/install.js
+++ b/html/install.js
@@ -46,8 +46,9 @@
#IMPORT html/item_preview.js AS ip
#FROM common/browser.js IMPORT browser
-#FROM html/DOM_helpers.js IMPORT clone_template
-#FROM common/entities.js IMPORT item_id_string, version_string, get_files
+#FROM html/DOM_helpers.js IMPORT clone_template, Showable
+#FROM common/entities.js IMPORT item_id_string, version_string, get_files, \
+ is_valid_version
#FROM common/misc.js IMPORT sha256_async AS sha256
const coll = new Intl.Collator();
@@ -78,7 +79,7 @@ function ItemEntry(install_view, item) {
}
let preview_cb = () => install_view.preview_item(item.def);
- preview_cb = dialog.when_hidden(install_view.dialog_ctx, preview_cb);
+ preview_cb = install_view.dialog_ctx.when_hidden(preview_cb);
this.details_but.addEventListener("click", preview_cb);
}
@@ -114,8 +115,9 @@ async function init_work() {
}
function InstallView(tab_id, on_view_show, on_view_hide) {
+ Showable.call(this, on_view_show, on_view_hide);
+
Object.assign(this, clone_template("install_view"));
- this.shown = false;
const show_container = name => {
for (const cid of container_ids) {
@@ -154,8 +156,8 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
this[container_name].prepend(preview_ctx.main_div);
}
- const back_cb = dialog.when_hidden(this.dialog_ctx,
- () => show_container("install_preview"));
+ let back_cb = () => show_container("install_preview");
+ back_cb = this.dialog_ctx.when_hidden(back_cb);
for (const type of ["resource", "mapping"])
this[`${type}_back_but`].addEventListener("click", back_cb);
@@ -189,17 +191,18 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
"Repository's response is not valid JSON :(");
}
- if (response.json.api_schema_version > [1]) {
- let api_ver = "";
- try {
- api_ver =
- ` (${version_string(response.json.api_schema_version)})`;
- } catch(e) {
- console.warn(e);
- }
+ if (!is_valid_version(response.json.api_schema_version)) {
+ var bad_api_ver = "";
+ } else if (response.json.api_schema_version > [1]) {
+ var bad_api_ver =
+ ` (${version_string(response.json.api_schema_version)})`;
+ } else {
+ var bad_api_ver = false;
+ }
+ if (bad_api_ver !== false) {
const captype = item_type[0].toUpperCase() + item_type.substring(1);
- const msg = `${captype} ${item_id_string(id, ver)} was served using unsupported Hydrilla API version${api_ver}. You might need to update Haketilo.`;
+ const msg = `${captype} ${item_id_string(id, ver)} was served using unsupported Hydrilla API version${bad_api_ver}. You might need to update Haketilo.`;
return work.err(null, msg);
}
@@ -256,23 +259,16 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
return items;
}
+ const show_super = this.show;
this.show = async (repo_url, item_type, item_id, item_ver) => {
- if (this.shown)
+ if (!show_super())
return;
- this.shown = true;
-
this.repo_url = repo_url;
dialog.loader(this.dialog_ctx, "Fetching data from repository...");
try {
- on_view_show();
- } catch(e) {
- console.error(e);
- }
-
- try {
var items = await compute_deps(item_type, item_id, item_ver);
} catch(e) {
var dialog_prom = dialog.error(this.dialog_ctx, e);
@@ -288,7 +284,7 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
await dialog_prom;
- hide();
+ this.hide();
return;
}
@@ -419,35 +415,22 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
await dialog_prom;
- hide();
+ this.hide();
}
- const hide = () => {
- if (!this.shown)
+ const hide_super = this.hide;
+ this.hide = () => {
+ if (!hide_super())
return;
- this.shown = false;
delete this.item_entries;
[...this.to_install_list.children].forEach(n => n.remove());
-
- try {
- on_view_hide();
- } catch(e) {
- console.error(e);
- }
- }
-
- this.when_hidden = cb => {
- const wrapped_cb = (...args) => {
- if (!this.shown)
- return cb(...args);
- }
- return wrapped_cb;
}
- const hide_cb = dialog.when_hidden(this.dialog_ctx, hide);
+ const hide_cb = this.dialog_ctx.when_hidden(this.hide);
this.cancel_but.addEventListener("click", hide_cb);
- const install_cb = dialog.when_hidden(this.dialog_ctx, perform_install);
+ const install_cb = this.dialog_ctx.when_hidden(perform_install);
this.install_but.addEventListener("click", install_cb);
}
+#EXPORT InstallView
diff --git a/html/repo_query.html b/html/repo_query.html
new file mode 100644
index 0000000..73b0f00
--- /dev/null
+++ b/html/repo_query.html
@@ -0,0 +1,148 @@
+#IF !REPO_QUERY_LOADED
+#DEFINE REPO_QUERY_LOADED
+<!--
+ SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+ Show available repositories and allow querying them for resources.
+
+ This file is part of Haketilo.
+
+ Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org>
+
+ File is dual-licensed. You can choose either GPLv3+, CC BY-SA or both.
+
+ 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/>.
+
+ I, Wojtek Kosior, thereby promise not to sue for violation of this file's
+ licenses. Although I request that you do not make use of this code in a
+ proprietary program, I am not going to enforce this in court.
+ -->
+
+<!--
+ This is not a standalone page. This file is meant to be imported into other
+ HTML code.
+ -->
+
+#INCLUDE html/install.html
+
+#LOADCSS html/reset.css
+#LOADCSS html/base.css
+#LOADCSS html/grid.css
+<style>
+ .repo_query_top_text {
+ text-align: center;
+ margin: 0.4em;
+ }
+ .repo_queried_url {
+ text-decoration: underline;
+ }
+
+ .repo_query_repo_li {
+ margin: 0;
+ background-color:#dadada;
+ }
+ .repo_query_repo_li > .repo_query_entry {
+ padding: 0.2em;
+ }
+ .repo_query_repo_li > .repo_query_results_list {
+ background-color: #f0f0f0;
+ }
+
+ .repo_query_result_li {
+ margin: 0;
+ padding: 0.2em;
+ }
+ .repo_query_result_li:nth-child(2n) {
+ background-color:#dadada;
+ }
+
+ .repo_query_entry {
+ display: flex;
+ align-items: center;
+ }
+ .repo_query_entry_info {
+ display: grid;
+ grid-template-columns: auto;
+ flex: 1 1 auto;
+ min-width: 0;
+ }
+ .repo_query_entry_info > * {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .repo_query_entry button {
+ white-space: nowrap;
+ }
+
+ .repo_query_mapping_id {
+ font-size: 80%;
+ font-style: italic;
+ }
+
+ .repo_query_bottom_buttons {
+ margin: 1em;
+ text-align: center;
+ }
+</style>
+<template>
+ <div id="repo_query" data-template="main_div"
+ class="grid_1 repo_query_main_div">
+ <div data-template="repos_list_container">
+ <div class="repo_query_top_text">
+ Browsing custom resources for
+ <span data-template="url_span" class="repo_queried_url"></span>.
+ </div>
+ <ul data-template="repos_list"></ul>
+ <div class="repo_query_bottom_buttons">
+ <button data-template="cancel_but">Cancel</button>
+ </div>
+ </div>
+ <div data-template="install_view_container" class="hide">
+ <!-- Install view will be dynamically inserted here. -->
+ </div>
+ </div>
+
+ <li id="repo_query_single_repo" data-template="main_li"
+ class="repo_query_repo_li">
+ <div class="top_line"></div>
+ <div class="repo_query_entry">
+ <div class="repo_query_entry_info">
+ <label data-template="repo_url_label"></label>
+ </div>
+ <span class="repo_query_buttons">
+ <button data-template="show_results_but">
+ Show results
+ </button>
+ <button data-template="hide_results_but" class="hide">
+ Hide results
+ </button>
+ </span>
+ </div>
+ <div data-template="list_container" class="hide repo_query_results_list">
+ <span data-template="info_span">Querying repository...</span>
+ <ul data-template="results_list" class="hide"></ul>
+ </div>
+ </li>
+
+ <li id="repo_query_single_result" data-template="main_li"
+ class="repo_query_entry repo_query_result_li">
+ <div class="repo_query_entry_info">
+ <span data-template="mapping_name"></span>
+ <span data-template="mapping_id" class="repo_query_mapping_id"></span>
+ </div>
+ <span><button data-template="install_but">Install preview</button></span>
+ </li>
+</template>
+#ENDIF
diff --git a/html/repo_query.js b/html/repo_query.js
new file mode 100644
index 0000000..8f33356
--- /dev/null
+++ b/html/repo_query.js
@@ -0,0 +1,210 @@
+/**
+ * This file is part of Haketilo.
+ *
+ * Function: Show available repositories and allow querying them for resources.
+ *
+ * Copyright (C) 2022 Wojtek Kosior
+ *
+ * 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.
+ *
+ * As additional permission under GNU GPL version 3 section 7, you
+ * may distribute forms of that code without the copy of the GNU
+ * GPL normally required by section 4, provided you include this
+ * license notice and, in case of non-source distribution, a URL
+ * through which recipients can access the Corresponding Source.
+ * If you modify file(s) with this exception, you may extend this
+ * exception to your version of the file(s), but you are not
+ * obligated to do so. If you do not wish to do so, delete this
+ * exception statement from your version.
+ *
+ * As a special exception to the GPL, any HTML file which merely
+ * makes function calls to this code, and for that purpose
+ * includes it by reference shall be deemed a separate work for
+ * copyright law purposes. If you modify this code, you may extend
+ * this exception to your version of the code, but you are not
+ * obligated to do so. If you do not wish to do so, delete this
+ * exception statement from your version.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * I, Wojtek Kosior, thereby promise not to sue for violation of this file's
+ * license. Although I request that you do not make use of this code in a
+ * proprietary program, I am not going to enforce this in court.
+ */
+
+#IMPORT common/indexeddb.js AS haketilodb
+
+#FROM common/browser.js IMPORT browser
+#FROM html/DOM_helpers.js IMPORT clone_template, Showable
+#FROM common/entities.js IMPORT item_id_string, version_string, \
+ is_valid_version
+#FROM html/install.js IMPORT InstallView
+
+const coll = new Intl.Collator();
+
+function ResultEntry(repo_entry, mapping_ref) {
+ Object.assign(this, clone_template("repo_query_single_result"));
+ Object.assign(this, {repo_entry, mapping_ref});
+
+ this.mapping_name.innerText = mapping_ref.long_name;
+ this.mapping_id.innerText = item_id_string(mapping_ref);
+
+ const iv = repo_entry.query_view.install_view;
+
+ function start_install() {
+ iv.show(repo_entry.repo_url, "mapping",
+ mapping_ref.identifier, mapping_ref.version);
+ }
+
+ const cb = repo_entry.query_view.install_view.when_hidden(start_install);
+ this.install_but.addEventListener("click", cb);
+}
+
+function RepoEntry(query_view, repo_url) {
+ Object.assign(this, clone_template("repo_query_single_repo"));
+ Object.assign(this, {query_view, repo_url});
+ this.results_shown_before = false;
+
+ this.repo_url_label.innerText = repo_url;
+
+ const query_results = async () => {
+ const msg = [
+ "repo_query",
+ `${repo_url}query?url=${encodeURIComponent(query_view.url)}`
+ ];
+ const response = await browser.tabs.sendMessage(query_view.tab_id, msg);
+
+ if ("error" in response)
+ throw "Failure to communicate with repository :(";
+
+ if (!response.ok)
+ throw `Repository sent HTTP code ${response.status} :(`;
+ if ("error_json" in response)
+ throw "Repository's response is not valid JSON :(";
+
+ if (!is_valid_version(response.json.api_schema_version)) {
+ var bad_api_ver = "";
+ } else if (response.json.api_schema_version > [1]) {
+ var bad_api_ver =
+ ` (${version_string(response.json.api_schema_version)})`;
+ } else {
+ var bad_api_ver = false;
+ }
+
+ if (bad_api_ver !== false)
+ throw `Results were served using unsupported Hydrilla API version${bad_api_ver}. You might need to update Haketilo.`;
+
+ /* TODO: here we should perform JSON schema validation! */
+
+ return response.json.mappings;
+ }
+
+ const populate_results = async () => {
+ this.results_shown_before = true;
+
+ try {
+ var results = await query_results();
+ } catch(e) {
+ this.info_span.innerText = e;
+ return;
+ }
+
+ this.info_span.remove();
+ this.results_list.classList.remove("hide");
+
+ this.result_entries = results.map(ref => new ResultEntry(this, ref));
+
+ const to_append = this.result_entries.length > 0 ?
+ this.result_entries.map(re => re.main_li) :
+ ["No results :("];
+
+ this.results_list.append(...to_append);
+ }
+
+ let show_results = () => {
+ if (!query_view.shown)
+ return;
+
+ if (!this.results_shown_before)
+ populate_results();
+
+ this.list_container.classList.remove("hide");
+ this.hide_results_but.classList.remove("hide");
+ this.show_results_but.classList.add("hide");
+ }
+ show_results = query_view.install_view.when_hidden(show_results);
+
+ let hide_results = () => {
+ if (!query_view.shown)
+ return;
+
+ this.list_container.classList.add("hide");
+ this.hide_results_but.classList.add("hide");
+ this.show_results_but.classList.remove("hide");
+ }
+ hide_results = query_view.install_view.when_hidden(hide_results);
+
+ this.show_results_but.addEventListener("click", show_results);
+ this.hide_results_but.addEventListener("click", hide_results);
+}
+
+const container_ids = ["repos_list_container", "install_view_container"];
+
+function RepoQueryView(tab_id, on_view_show, on_view_hide) {
+ Showable.call(this, on_view_show, on_view_hide);
+
+ Object.assign(this, clone_template("repo_query"));
+ this.tab_id = tab_id;
+
+ const show_container = name => {
+ for (const cid of container_ids) {
+ if (cid !== name)
+ this[cid].classList.add("hide");
+ }
+ this[name].classList.remove("hide");
+ }
+
+ this.install_view = new InstallView(
+ tab_id,
+ () => show_container("install_view_container"),
+ () => show_container("repos_list_container")
+ );
+ this.install_view_container.prepend(this.install_view.main_div);
+
+ const show_super = this.show;
+ this.show = async url => {
+ if (!show_super())
+ return;
+
+ this.url = url;
+ this.url_span.innerText = url;
+
+ [...this.repos_list.children].forEach(c => c.remove());
+
+ const repo_urls = await haketilodb.get_repos();
+ repo_urls.sort((a, b) => coll.compare(a, b));
+ this.repo_entries = repo_urls.map(ru => new RepoEntry(this, ru));
+
+ if (repo_urls.length === 0) {
+ const info_li = document.createElement("li");
+ info_li.innerText = "You have no repositories configured :(";
+ this.repos_list.append(info_li);
+ return;
+ }
+
+ this.repos_list.append(...this.repo_entries.map(re => re.main_li));
+ }
+
+ this.cancel_but.addEventListener("click",
+ this.install_view.when_hidden(this.hide));
+}
+#EXPORT RepoQueryView
diff --git a/html/settings.html b/html/settings.html
index f318e2c..ce19e55 100644
--- a/html/settings.html
+++ b/html/settings.html
@@ -115,14 +115,14 @@
#INCLUDE html/item_preview.html
#INCLUDE html/text_entry_list.html
#INCLUDE html/payload_create.html
- <ul id="tab_heads" class="has_bottom_line">
+ <ul id="tab_heads">
<li id="blocking_head"> Blocking </li>
<li id="mappings_head"> Mappings </li>
<li id="resources_head"> Resources </li>
<li id="new_payload_head" class="active_head"> New payload </li>
<li id="repos_head"> Repositories </li>
</ul>
- <div id="top_menu_line" class="bottom_line"></div>
+ <div id="top_menu_line" class="top_line"></div>
<div id="blocking_tab" class="tab">
<div id="blocking_editable_container" class="grid_2">
<div id="blocking_list_container">
diff --git a/html/text_entry_list.js b/html/text_entry_list.js
index 8cef08f..0ea2862 100644
--- a/html/text_entry_list.js
+++ b/html/text_entry_list.js
@@ -162,11 +162,11 @@ function Entry(text, list, entry_idx) {
[this.cancel_but, this.make_noneditable],
[this.noneditable_view, this.make_editable],
])
- node.addEventListener("click", dialog.when_hidden(list.dialog_ctx, cb));
+ node.addEventListener("click", list.dialog_ctx.when_hidden(cb));
const enter_cb = e => (e.key === 'Enter') && enter_hit();
this.input.addEventListener("keypress",
- dialog.when_hidden(list.dialog_ctx, enter_cb));
+ list.dialog_ctx.when_hidden(enter_cb));
if (entry_idx > 0) {
const prev_text = list.shown_texts[entry_idx - 1];
@@ -227,8 +227,7 @@ function TextEntryList(dialog_ctx, destroy_cb,
const add_new = () => new Entry(null, this, 0);
- this.new_but.addEventListener("click",
- dialog.when_hidden(dialog_ctx, add_new));
+ this.new_but.addEventListener("click", dialog_ctx.when_hidden(add_new));
}
async function repo_list(dialog_ctx) {