tyler.durden/cockpit-navigator
1
0
Fork 0
mirror of https://github.com/45Drives/cockpit-navigator.git synced 2025-07-27 07:34:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

update ModalPrompt module

Browse Source
This commit is contained in:
joshuaboud 2021-07-22 16:53:25 -03:00
parent d01a9ef665
commit 074f52c0be
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
1 changed files with 228 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

441
navigator/components/ModalPrompt.js
View File

@ -1,20 +1,19 @@
/* /*
Cockpit Navigator - A File System Browser for Cockpit. ModalPrompt - A Custom Prompt Module for Cockpit Plugins.
Copyright (C) 2021 Josh Boudreau <jboudreau@45drives.com> Copyright (C) 2021 Josh Boudreau <jboudreau@45drives.com>
Copyright (C) 2021 Sam Silver <ssilver@45drives.com>
Copyright (C) 2021 Dawson Della Valle <ddellavalle@45drives.com>
This file is part of Cockpit Navigator. This program is free software: you can redistribute it and/or modify
Cockpit Navigator is free software: you can redistribute it and/or modify it under the terms of the Lesser GNU General Public License as published by
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or the Free Software Foundation, either version 3 of the License, or
(at your option) any later version. (at your option) any later version.
Cockpit Navigator is distributed in the hope that it will be useful,
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details. Lesser GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Cockpit Navigator. If not, see <https://www.gnu.org/licenses/>. You should have received a copy of the Lesser GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
/** /**
@ -30,218 +29,234 @@ let danger_btn = "pf-m-danger";
let all_btn = [primary_btn, secondary_btn, danger_btn]; let all_btn = [primary_btn, secondary_btn, danger_btn];
export class ModalPrompt { export class ModalPrompt {
constructor() { constructor() {
this.ok = document.createElement("button"); this.ok = document.createElement("button");
this.ok.innerText = "OK"; this.ok.innerText = "OK";
this.ok.classList.add("pf-c-button", "pf-m-primary"); this.ok.classList.add("pf-c-button", "pf-m-primary");
this.cancel = document.createElement("button"); this.cancel = document.createElement("button");
this.cancel.innerText = "Cancel"; this.cancel.innerText = "Cancel";
this.cancel.classList.add("pf-c-button", "pf-m-secondary"); this.cancel.classList.add("pf-c-button", "pf-m-secondary");
this.yes = document.createElement("button"); this.yes = document.createElement("button");
this.yes.innerText = "Yes"; this.yes.innerText = "Yes";
this.yes.classList.add("pf-c-button", "pf-m-primary"); this.yes.classList.add("pf-c-button", "pf-m-primary");
this.no = document.createElement("button"); this.no = document.createElement("button");
this.no.innerText = "No"; this.no.innerText = "No";
this.no.classList.add("pf-c-button", "pf-m-secondary"); this.no.classList.add("pf-c-button", "pf-m-secondary");
this.construct_element(); this.construct_element();
} }
construct_element() { construct_element() {
let bg = this.modal = document.createElement("div"); let bg = this.modal = document.createElement("div");
bg.classList.add("modal"); bg.classList.add("modal");
bg.style.overflowY = "auto"; bg.style.overflowY = "auto";
let fg = document.createElement("div"); let fg = document.createElement("div");
fg.classList.add("modal-dialog"); fg.classList.add("modal-dialog");
bg.appendChild(fg); bg.appendChild(fg);
let popup = document.createElement("div"); let popup = document.createElement("div");
popup.classList.add("modal-content"); popup.classList.add("modal-content");
fg.appendChild(popup); fg.appendChild(popup);
let header = document.createElement("div"); let header = document.createElement("div");
header.classList.add("modal-header"); header.classList.add("modal-header");
popup.appendChild(header); popup.appendChild(header);
let header_text = this.header = document.createElement("h4"); let header_text = this.header = document.createElement("h4");
header_text.classList.add("modal-title"); header_text.classList.add("modal-title");
header.appendChild(header_text); header.appendChild(header_text);
let body = this.body = document.createElement("div"); let body = this.body = document.createElement("div");
body.classList.add("modal-body"); body.classList.add("modal-body");
popup.appendChild(body); popup.appendChild(body);
let footer = this.footer = document.createElement("div"); let footer = this.footer = document.createElement("div");
footer.classList.add("modal-footer"); footer.classList.add("modal-footer");
footer.style.display = "flex"; footer.style.display = "flex";
footer.style.flexFlow = "row no-wrap"; footer.style.flexFlow = "row no-wrap";
footer.style.justifyContent = "flex-end"; footer.style.justifyContent = "flex-end";
popup.appendChild(footer); popup.appendChild(footer);
document.body.appendChild(this.modal); document.body.appendChild(this.modal);
} }
show() { show() {
this.modal.style.display = "block"; this.modal.style.display = "block";
} }
hide() { hide() {
this.modal.style.display = "none"; this.modal.style.display = "none";
} }
/** /**
* *
* @param {string} header * @param {string} header
*/ */
set_header(header) { set_header(header) {
this.header.innerText = header; this.header.innerText = header;
} }
/** /**
* *
* @param {string} message * @param {string} message
*/ */
set_body(message) { set_body(message) {
this.body.innerHTML = ""; this.body.innerHTML = "";
this.body.innerHTML = message; this.body.innerHTML = message;
} }
/** /**
* *
* @param {string} header * @param {string} header
* @param {string} message * @param {string} message
* @returns {Promise} * @returns {Promise}
*/ */
alert(header, message = "") { alert(header, message = "") {
this.set_header(header); this.set_header(header);
this.set_body(message); this.set_body(message);
this.footer.innerHTML = ""; this.footer.innerHTML = "";
this.footer.appendChild(this.ok); this.footer.appendChild(this.ok);
this.show(); this.show();
this.ok.focus(); this.ok.focus();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.ok.onclick = () => { this.ok.onclick = () => {
resolve(); resolve();
this.hide(); this.hide();
} }
}); });
} }
/** /**
* *
* @param {string} header * @param {string} header
* @param {string} message * @param {string} message
* @param {boolean} danger * @param {boolean} danger
* @returns {Promise<boolean>} * @returns {Promise<boolean>}
*/ */
confirm(header, message = "", danger = false) { confirm(header, message = "", danger = false) {
this.set_header(header); this.set_header(header);
this.set_body(message); this.set_body(message);
this.footer.innerHTML = ""; this.footer.innerHTML = "";
this.footer.append(this.no, this.yes); this.footer.append(this.no, this.yes);
this.yes.classList.remove(... all_btn); this.yes.classList.remove(... all_btn);
if (danger) if (danger)
this.yes.classList.add(danger_btn); this.yes.classList.add(danger_btn);
else else
this.yes.classList.add(primary_btn); this.yes.classList.add(primary_btn);
this.show(); this.show();
if (danger) if (danger)
this.no.focus(); this.no.focus();
else else
this.yes.focus(); this.yes.focus();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let resolve_true = () => { let resolve_true = () => {
resolve(true); resolve(true);
this.hide(); this.hide();
} }
let resolve_false = () => { let resolve_false = () => {
resolve(false); resolve(false);
this.hide(); this.hide();
} }
this.yes.onclick = resolve_true; this.yes.onclick = resolve_true;
this.no.onclick = resolve_false; this.no.onclick = resolve_false;
}); });
} }
/** /**
* *
* @param {string} header * @param {string} header
* @param {Object.<string, Request>} requests * @param {Object.<string, Request>} requests
* @returns {Promise<Object|string>} * @returns {Promise<Object|string>}
*/ */
prompt(header, requests) { prompt(header, requests) {
this.set_header(header); this.set_header(header);
this.body.innerHTML = ""; this.body.innerHTML = "";
this.footer.innerHTML = ""; this.footer.innerHTML = "";
this.footer.append(this.cancel, this.ok); this.footer.append(this.cancel, this.ok);
let inputs = []; let inputs = [];
let simple_prompt = false;
if (typeof requests === "object") {
let req_holder = document.createElement("div");
req_holder.style.display = "flex";
req_holder.style.flexFlow = "column nowrap";
req_holder.style.alignItems = "stretch";
this.body.appendChild(req_holder);
for(let key of Object.keys(requests)) {
let row = document.createElement("div");
row.style.display = "flex";
row.style.alignItems = "baseline";
row.style.padding = "2px";
let request = requests[key];
let label = document.createElement("label");
label.innerText = request.label;
label.htmlFor = key;
label.style.paddingRight = "1em";
label.style.flexBasis = "0";
label.style.flexGrow = "1";
let req = document.createElement("input");
req.id = key;
req.type = request.type;
req.style.flexBasis = "0";
if (request.hasOwnProperty("default")) {
req.value = request.default;
}
row.append(label, req);
req_holder.appendChild(row);
inputs.push(req);
switch (request.type) {
case "text":
req.style.flexGrow = "3";
break;
case "checkbox":
label.style.cursor = req.style.cursor = "pointer";
break;
default:
break;
}
}
}
this.show(); if (typeof requests === "string") {
inputs[0].focus(); let label = requests;
for (let i = 0; i < inputs.length - 1; i++) { simple_prompt = true;
inputs[i].onchange = () => { requests = {
inputs[i+1].focus(); "key": {
} "label": label,
} "type": "text"
inputs[inputs.length - 1].onchange = () => { }
this.ok.focus(); }
} }
return new Promise((resolve, reject) => {
this.ok.onclick = () => { let req_holder = document.createElement("div");
let response = {}; req_holder.style.display = "flex";
for (let input of inputs) { req_holder.style.flexFlow = "column nowrap";
switch (input.type) { req_holder.style.alignItems = "stretch";
case "checkbox": this.body.appendChild(req_holder);
response[input.id] = input.checked; for(let key of Object.keys(requests)) {
break; let row = document.createElement("div");
case "text": row.style.display = "flex";
default: row.style.alignItems = "baseline";
response[input.id] = input.value; row.style.padding = "2px";
break; let request = requests[key];
} let label = document.createElement("label");
} label.innerText = request.label;
resolve(response); label.htmlFor = key;
this.hide(); label.style.paddingRight = "1em";
} label.style.flexBasis = "0";
this.cancel.onclick = () => { label.style.flexGrow = "1";
resolve(null); let req = document.createElement("input");
this.hide(); req.id = key;
} req.type = request.type;
}); req.style.flexBasis = "0";
} if (request.hasOwnProperty("default")) {
req.value = request.default;
}
row.append(label, req);
req_holder.appendChild(row);
inputs.push(req);
switch (request.type) {
case "text":
req.style.flexGrow = "3";
break;
case "checkbox":
label.style.cursor = req.style.cursor = "pointer";
break;
default:
break;
}
}
this.show();
inputs[0].focus();
for (let i = 0; i < inputs.length - 1; i++) {
inputs[i].onchange = () => {
inputs[i+1].focus();
}
}
inputs[inputs.length - 1].onchange = () => {
this.ok.focus();
}
return new Promise((resolve, reject) => {
this.ok.onclick = () => {
let response
if (simple_prompt) {
response = inputs[0].value;
} else {
response = {};
for (let input of inputs) {
switch (input.type) {
case "checkbox":
response[input.id] = input.checked;
break;
case "text":
default:
response[input.id] = input.value;
break;
}
}
}
resolve(response);
this.hide();
}
this.cancel.onclick = () => {
resolve(null);
this.hide();
}
});
}
} }