-
-
-
- `);
+
+
+
+
+ `);
case "number":
return createElement(`
+
+ `);
+ case "password":
+ const $node = createElement(`
+
- `);
- case "password":
- // TODO: click eye
- const $node = createElement(`
-
+ `);
const $icon = $node.querySelector("component-icon");
if ($icon instanceof window.HTMLElement) {
$icon.onclick = function(e) {
@@ -124,77 +149,94 @@ function $renderInput(options = {}) {
case "long_password":
// TODO
case "long_text":
- return createElement(`
-
- `);
+ const $textarea = createElement(`
+
+ `);
+ if (value) $textarea.value = value;
+ return $textarea;
case "bcrypt":
return createElement(`
-
- `);
- // TODO
+ ${attr}
+ value="${safe(value)}"
+ readonly
+ class="component_input"
+ />
+ `);
case "hidden":
return createElement(`
-
- `);
+
+ `);
case "boolean":
return createElement(`
-
-
-
- `);
+
-
-
-
- `);
+
+
+
+
+ `);
case "select":
- const renderOption = (name) => ``;
+ const renderOption = (name) => {
+ const optName = safe(name);
+ const formVal = safe(value || props.default);
+ return `
+
+ `;
+ }
return createElement(`
-
- `);
+
+ `);
case "date":
return createElement(`
-
- `);
+
+ `);
case "datetime":
return createElement(`
-
- `);
+
+ `);
case "image":
return createElement(`
-
- Admin Console
+
+
+
diff --git a/public/index.html b/public/index.html
index 840c4d5e4..a9558fabf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,24 +13,18 @@
-
`);
+`);
+
+class ModalComponent extends window.HTMLElement {
+ async trigger($node, opts = {}) {
+ const $modal = await createModal();
+ const close$ = new rxjs.Subject();
+ const { onQuit = nop, withButtonsLeft = null, withButtonsRight = null } = opts;
+
+ // feature: build the dom
+ qs($modal, `[data-bind="body"]`).replaceChildren($node);
this.replaceChildren($modal);
+ qsa($modal, `.component_popup > div.buttons > button`).forEach(($button, i) => {
+ let currentLabel = null;
+ if (i === 0) currentLabel = withButtonsLeft;
+ else if (i === 1) currentLabel = withButtonsRight;
- // feature: setup the modal body
- effect(rxjs.of([$node]).pipe(
- applyMutation(qs($modal, "[data-bind=\"body\"]"), "appendChild")
+ if (currentLabel === null) return $button.remove();
+ $button.textContent = currentLabel;
+ $button.onclick = () => close$.next(currentLabel);
+ });
+ effect(rxjs.fromEvent($modal, "click").pipe(
+ rxjs.filter((e) => e.target.getAttribute("id") === "modal-box"),
+ rxjs.tap(() => close$.next()),
+ ));
+ effect(rxjs.fromEvent(window, "keydown").pipe(
+ rxjs.filter((e) => e.keyCode === 27),
+ rxjs.tap(() => close$.next()),
));
// feature: closing the modal
- effect(rxjs.merge(
- rxjs.fromEvent($modal, "click").pipe(
- rxjs.filter((e) => e.target.getAttribute("id") === "modal-box")
- ),
- rxjs.fromEvent(window, "keydown").pipe(
- rxjs.filter((e) => e.keyCode === 27)
- )
- ).pipe(
- rxjs.tap(() => typeof onQuit === "function" && onQuit()),
+ effect(close$.pipe(
+ rxjs.tap((label) => onQuit(label)),
rxjs.tap(() => animate(qs($modal, "div > div"), {
time: 200,
keyframes: [
@@ -91,7 +101,7 @@ export default class Modal extends HTMLElement {
rxjs.map(() => {
let size = 300;
const $box = document.querySelector("#modal-box > div");
- if ($box instanceof HTMLElement) size = $box.offsetHeight;
+ if ($box instanceof window.HTMLElement) size = $box.offsetHeight;
size = Math.round((document.body.offsetHeight - size) / 2);
if (size < 0) return 0;
@@ -104,4 +114,19 @@ export default class Modal extends HTMLElement {
}
}
-customElements.define("component-modal", Modal);
+customElements.define("component-modal", ModalComponent);
+
+let _observables = [];
+const effect = (obs) => _observables.push(obs.subscribe());
+const free = () => {
+ for (let i = 0; i < _observables.length; i++) {
+ _observables[i].unsubscribe();
+ }
+ _observables = [];
+};
+
+function find() {
+ const $dom = document.body.querySelector("component-modal");
+ if (!($dom instanceof ModalComponent)) throw new ApplicationError("INTERNAL_ERROR", "assumption failed: wrong type modal component");
+ return $dom;
+}
diff --git a/public/components/notification.css b/public/components/notification.css
new file mode 100644
index 000000000..362f8cfb5
--- /dev/null
+++ b/public/components/notification.css
@@ -0,0 +1,59 @@
+.component_notification {
+ position: fixed;
+ bottom: 20px;
+ left: 20px;
+ right: 70px;
+ font-size: 0.95em;
+ z-index: 1001;
+}
+.component_notification .component_notification--container {
+ overflow: hidden;
+ width: 400px;
+ text-align: left;
+ display: inline-block;
+ padding: 15px 20px 15px 15px;
+ border-radius: 2px;
+ box-shadow: rgba(158, 163, 172, 0.3) 5px 5px 20px;
+ display: flex;
+ align-items: center;
+}
+.component_notification .component_notification--container.info {
+ background: var(--color);
+ color: rgba(255, 255, 255, 0.8);
+}
+.component_notification .component_notification--container.error {
+ background: var(--error);
+ color: rgba(0, 0, 0, 0.5);
+}
+.component_notification .component_notification--container.success {
+ background: var(--success);
+ color: rgba(0, 0, 0, 0.5);
+}
+.component_notification .component_notification--container .message {
+ flex: 1 1 auto;
+ max-height: 92px;
+ max-width: 100%;
+ overflow: hidden;
+}
+.component_notification .component_notification--container .close {
+ cursor: pointer;
+ padding: 0 2px;
+}
+.component_notification .component_notification--container .close .component_icon {
+ height: 18px;
+}
+
+@media (max-width: 490px) {
+ .component_notification {
+ bottom: 0px;
+ left: 0px;
+ }
+ .component_notification .component_notification--container {
+ width: 100%;
+ box-sizing: border-box;
+ }
+}
+
+.component_notification .component_notification--container {
+ box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 20px;
+}
diff --git a/public/components/notification.js b/public/components/notification.js
new file mode 100644
index 000000000..91f42810a
--- /dev/null
+++ b/public/components/notification.js
@@ -0,0 +1,83 @@
+import { createElement } from "../lib/skeleton/index.js";
+import { ApplicationError } from "../lib/error.js";
+import { animate, slideYIn, slideYOut } from "../lib/animate.js";
+import { CSS } from "../helpers/loader.js";
+
+const createNotification = async (msg, type) => createElement(`
+
+
+
-
-
-
-
-
+const createModal = async () => createElement(`
+
+
+
-
+
+
+
+
+
+
+
+
+
+`);
+
+class NotificationComponent extends window.HTMLElement {
+ buffer = [];
+
+ constructor() {
+ super();
+ }
+
+ async trigger(message, type) {
+ if (this.buffer.length > 20) this.buffer.pop(); // failsafe
+ this.buffer.push({ message, type });
+ if (this.buffer.length !== 1) {
+ const $close = this.querySelector(".close");
+ if ($close && typeof $close.onclick === "function") $close.onclick();
+ return;
+ }
+ await this.run();
+ }
+
+ async run() {
+ if (this.buffer.length === 0) return;
+ const { message, type } = this.buffer[0];
+ const $notification = await createNotification(message, type);
+ this.replaceChildren($notification);
+ await animate($notification, {
+ keyframes: slideYIn(50),
+ time: 100,
+ });
+ const ids = []
+ await Promise.race([
+ new Promise((done) => ids.push(window.setTimeout(done, this.buffer.length === 1 ? 8000 : 800))),
+ new Promise((done) => ids.push(window.setTimeout(() => $notification.querySelector(".close").onclick = done, 1000))),
+ ]);
+ ids.forEach((id) => window.clearTimeout(id));
+ await animate($notification, {
+ keyframes: slideYOut(10),
+ time: 200,
+ });
+ $notification.remove();
+ this.buffer.shift();
+ await this.run();
+ }
+}
+
+customElements.define("component-notification", NotificationComponent);
+
+function find() {
+ const $dom = document.body.querySelector("component-notification");
+ if (!($dom instanceof NotificationComponent)) throw new ApplicationError("INTERNAL_ERROR", "assumption failed: wrong type notification component");
+ return $dom;
+}
+
+export default class Notification {
+ static info(msg) {
+ find().trigger(msg, "info");
+ }
+
+ static success(msg) {
+ find().trigger(msg, "success");
+ }
+
+ static error(msg) {
+ find().trigger(msg, "error");
+ }
+}
diff --git a/public/helpers/loader.js b/public/helpers/loader.js
index 3a3c144a3..d9615d7fa 100644
--- a/public/helpers/loader.js
+++ b/public/helpers/loader.js
@@ -1,3 +1,7 @@
+import { get as getRelease } from "../pages/adminpage/model_release.js";
+
+let version = null;
+
export async function loadScript(url) {
const $script = document.createElement("script");
$script.setAttribute("src", url);
@@ -14,10 +18,15 @@ export async function CSS(baseURL, ...arrayOfFilenames) {
}
async function loadSingleCSS(baseURL, filename) {
- const res = await fetch(baseURL.replace(/(.*)\/[^\/]+$/, "$1/") + filename + "?version=" + "__", {
- cache: "force-cache"
+ const res = await fetch(baseURL.replace(/(.*)\/[^\/]+$/, "$1/") + `${filename}?version=${version}`, {
+ cache: "force-cache",
});
if (res.status !== 200) return `/* ERROR: ${res.status} */`;
else if (!res.headers.get("Content-Type").startsWith("text/css")) return `/* ERROR: wrong type, got "${res.headers.get("Content-Type")}"*/`;
return await res.text();
}
+
+export async function init() {
+ const info = await getRelease().toPromise();
+ version = info.version;
+}
diff --git a/public/helpers/modal.js b/public/helpers/modal.js
deleted file mode 100644
index 679f451b0..000000000
--- a/public/helpers/modal.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Modal from "../components/modal.js";
-
-// prompt, alert, confirm, modal, popup?
-class ModalManager {
- constructor() {
- this.$dom = document.body.querySelector("component-modal");
- }
-
- alert($node, opts) {
- if (this.$dom instanceof Modal) {
- this.$dom.trigger($node, opts);
- }
- }
-}
-
-export default new ModalManager();
diff --git a/public/index.backoffice.html b/public/index.backoffice.html
new file mode 100644
index 000000000..7db3e18e1
--- /dev/null
+++ b/public/index.backoffice.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ 