mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 17:20:30 +08:00
improved wm dialogs
This commit is contained in:
Maxim Devaev
parent
5ed368769c
commit
8209ee2eb0
@ -57,7 +57,7 @@ function __loadKvmdInfo() {
|
||||
|
||||
let apps = [];
|
||||
if (info.extras === null) {
|
||||
wm.error("Not all applications in the menu can be displayed<br>due an error. See KVMD logs for details.");
|
||||
wm.error("Not all applications in the menu can be displayed due an error.<br>See KVMD logs for details.");
|
||||
} else {
|
||||
apps = Object.values(info.extras).sort(function(a, b) {
|
||||
if (a.place < b.place) {
|
||||
@ -113,7 +113,7 @@ function __makeApp(id, path, icon, name) {
|
||||
<a href="${path}">
|
||||
<div>
|
||||
<img class="svg-gray" src="${icon}">
|
||||
${name}
|
||||
${tools.escape(name)}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@ -125,7 +125,7 @@ function __logout() {
|
||||
if (http.status === 200 || http.status === 401 || http.status === 403) {
|
||||
document.location.href = "/login";
|
||||
} else {
|
||||
wm.error("Logout error:<br>", http.responseText);
|
||||
wm.error("Logout error", http.responseText);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -38,19 +38,9 @@ export function Atx(__recorder) {
|
||||
|
||||
tools.storage.bindSimpleSwitch($("atx-ask-switch"), "atx.ask", true);
|
||||
|
||||
for (let args of [
|
||||
["atx-power-button", "power", "Are you sure you want to press the power button?"],
|
||||
["atx-power-button-long", "power_long", `
|
||||
Are you sure you want to long press the power button?<br>
|
||||
Warning! This could cause data loss on the server.
|
||||
`],
|
||||
["atx-reset-button", "reset", `
|
||||
Are you sure you want to press the reset button?<br>
|
||||
Warning! This could case data loss on the server.
|
||||
`],
|
||||
]) {
|
||||
tools.el.setOnClick($(args[0]), () => __clickButton(args[1], args[2]));
|
||||
}
|
||||
tools.el.setOnClick($("atx-power-button"), () => __clickAtx("power"));
|
||||
tools.el.setOnClick($("atx-power-button-long"), () => __clickAtx("power_long"));
|
||||
tools.el.setOnClick($("atx-reset-button"), () => __clickAtx("reset"));
|
||||
};
|
||||
|
||||
/************************************************************************/
|
||||
@ -71,20 +61,23 @@ export function Atx(__recorder) {
|
||||
}
|
||||
};
|
||||
|
||||
var __clickButton = function(button, confirm_msg) {
|
||||
var __clickAtx = function(button) {
|
||||
let click_button = function() {
|
||||
tools.httpPost("/api/atx/click", {"button": button}, function(http) {
|
||||
if (http.status === 409) {
|
||||
wm.error("Performing another ATX operation for other client.<br>Please try again later");
|
||||
wm.error("Performing another ATX operation for other client.<br>Please try again later.");
|
||||
} else if (http.status !== 200) {
|
||||
wm.error("Click error:<br>", http.responseText);
|
||||
wm.error("Click error", http.responseText);
|
||||
}
|
||||
});
|
||||
__recorder.recordAtxButtonEvent(button);
|
||||
};
|
||||
|
||||
if ($("atx-ask-switch").checked) {
|
||||
wm.confirm(confirm_msg).then(function(ok) {
|
||||
wm.confirm(`
|
||||
Are you sure you want to press the <b>${button}</b> button?<br>
|
||||
Warning! This could case data loss on the server.
|
||||
`).then(function(ok) {
|
||||
if (ok) {
|
||||
click_button();
|
||||
}
|
||||
|
||||
@ -185,7 +185,7 @@ export function Gpio(__recorder) {
|
||||
__recorder.recordGpioSwitchEvent(channel, to);
|
||||
};
|
||||
if (confirm) {
|
||||
wm.confirm(confirm).then(function(ok) {
|
||||
wm.confirm(tools.escape(confirm)).then(function(ok) {
|
||||
if (ok) {
|
||||
act();
|
||||
} else {
|
||||
@ -205,7 +205,7 @@ export function Gpio(__recorder) {
|
||||
__recorder.recordGpioPulseEvent(channel);
|
||||
};
|
||||
if (confirm) {
|
||||
wm.confirm(confirm).then(function(ok) { if (ok) act(); });
|
||||
wm.confirm(tools.escape(confirm)).then(function(ok) { if (ok) act(); });
|
||||
} else {
|
||||
act();
|
||||
}
|
||||
@ -216,7 +216,7 @@ export function Gpio(__recorder) {
|
||||
if (http.status === 409) {
|
||||
wm.error("Performing another operation for this GPIO channel.<br>Please try again later");
|
||||
} else if (http.status !== 200) {
|
||||
wm.error("GPIO error:<br>", http.responseText);
|
||||
wm.error("GPIO error", http.responseText);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -98,8 +98,7 @@ export function Hid(__getGeometry, __recorder) {
|
||||
}
|
||||
let codes = el_shortcut.getAttribute("data-shortcut").split(" ");
|
||||
if (ask) {
|
||||
let confirm_msg = `Do you want to press <b>${codes.join(" + ")}</b>?`;
|
||||
wm.confirm(confirm_msg).then(function(ok) {
|
||||
wm.confirm("Do you want to press this hotkey?", codes.join(" + ")).then(function(ok) {
|
||||
if (ok) {
|
||||
__emitShortcut(codes);
|
||||
}
|
||||
@ -261,7 +260,7 @@ export function Hid(__getGeometry, __recorder) {
|
||||
if (http.status === 413) {
|
||||
wm.error("Too many text for paste!");
|
||||
} else if (http.status !== 200) {
|
||||
wm.error("HID paste error:<br>", http.responseText);
|
||||
wm.error("HID paste error", http.responseText);
|
||||
} else if (http.status === 200) {
|
||||
__recorder.recordPrintEvent(text);
|
||||
}
|
||||
@ -269,9 +268,10 @@ export function Hid(__getGeometry, __recorder) {
|
||||
};
|
||||
|
||||
if ($("hid-pak-ask-switch").checked) {
|
||||
let confirm_msg = `You're going to paste ${text.length} character${text.length ? "s" : ""}.<br>`;
|
||||
confirm_msg += "Are you sure you want to continue?";
|
||||
wm.confirm(confirm_msg).then(function(ok) {
|
||||
wm.confirm(`
|
||||
You're going to paste ${text.length} character${text.length ? "s" : ""}.<br>
|
||||
Are you sure you want to continue?
|
||||
`).then(function(ok) {
|
||||
if (ok) {
|
||||
paste_as_keys();
|
||||
} else {
|
||||
@ -288,7 +288,7 @@ export function Hid(__getGeometry, __recorder) {
|
||||
let output = tools.radio.getValue(`hid-outputs-${hid}-radio`);
|
||||
tools.httpPost("/api/hid/set_params", {[`${hid}_output`]: output}, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("Can't configure HID:<br>", http.responseText);
|
||||
wm.error("Can't configure HID", http.responseText);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -297,7 +297,7 @@ export function Hid(__getGeometry, __recorder) {
|
||||
let enabled = $("hid-jiggler-switch").checked;
|
||||
tools.httpPost("/api/hid/set_params", {"jiggler": enabled}, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error(`Can't ${enabled ? "enabled" : "disable"} mouse juggler:<br>`, http.responseText);
|
||||
wm.error(`Can't ${enabled ? "enabled" : "disable"} mouse jiggler`, http.responseText);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -306,7 +306,7 @@ export function Hid(__getGeometry, __recorder) {
|
||||
let connected = $("hid-connect-switch").checked;
|
||||
tools.httpPost("/api/hid/set_connected", {"connected": connected}, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error(`Can't ${connected ? "connect" : "disconnect"} HID:<br>`, http.responseText);
|
||||
wm.error(`Can't ${connected ? "connect" : "disconnect"} HID`, http.responseText);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -316,7 +316,7 @@ export function Hid(__getGeometry, __recorder) {
|
||||
if (ok) {
|
||||
tools.httpPost("/api/hid/reset", null, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("HID reset error:<br>", http.responseText);
|
||||
wm.error("HID reset error", http.responseText);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -86,11 +86,11 @@ export function Msd() {
|
||||
|
||||
var __clickRemoveButton = function() {
|
||||
let name = $("msd-image-selector").value;
|
||||
wm.confirm(`Are you sure you want to remove the image<br><b>${tools.escape(name)}</b> from PiKVM?`).then(function(ok) {
|
||||
wm.confirm("Are you sure you want to remove this image?", name).then(function(ok) {
|
||||
if (ok) {
|
||||
tools.httpPost("/api/msd/remove", {"image": name}, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("Can't remove image:<br>", http.responseText);
|
||||
wm.error("Can't remove image", http.responseText);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -100,7 +100,7 @@ export function Msd() {
|
||||
var __sendParam = function(name, value) {
|
||||
tools.httpPost("/api/msd/set_params", {[name]: value}, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("Can't configure MSD:<br>", http.responseText);
|
||||
wm.error("Can't configure Mass Storage", http.responseText);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -124,8 +124,9 @@ export function Msd() {
|
||||
var __httpStateChange = function() {
|
||||
if (__http.readyState === 4) {
|
||||
if (__http.status !== 200) {
|
||||
wm.error("Can't upload image to the Mass Storage Drive:<br>", __http.responseText);
|
||||
wm.error("Can't upload image", __http.responseText);
|
||||
} else if ($("msd-new-url").value.length > 0) {
|
||||
let html = "";
|
||||
let msg = "";
|
||||
try {
|
||||
let end = __http.responseText.lastIndexOf("\r\n");
|
||||
@ -139,13 +140,15 @@ export function Msd() {
|
||||
let result_str = __http.responseText.slice(begin, end);
|
||||
let result = JSON.parse(result_str);
|
||||
if (!result.ok) {
|
||||
msg = `Can't upload image to the Mass Storage Drive:<br>${result_str}`;
|
||||
html = "Can't upload image";
|
||||
msg = result_str;
|
||||
}
|
||||
} catch (ex) {
|
||||
msg = `Can't parse upload result:<br>${ex}`;
|
||||
html = "Can't parse upload result";
|
||||
msg = `${ex}`;
|
||||
}
|
||||
if (msg.length > 0) {
|
||||
wm.error(msg);
|
||||
if (html.length > 0) {
|
||||
wm.error(html, msg);
|
||||
}
|
||||
}
|
||||
tools.hidden.setVisible($("msd-new-sub"), false);
|
||||
@ -166,7 +169,7 @@ export function Msd() {
|
||||
var __clickConnectButton = function(connected) {
|
||||
tools.httpPost("/api/msd/set_connected", {"connected": connected}, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("Switch error:<br>", http.responseText);
|
||||
wm.error("Can't switch Mass Storage", http.responseText);
|
||||
}
|
||||
__applyState();
|
||||
});
|
||||
@ -175,11 +178,11 @@ export function Msd() {
|
||||
};
|
||||
|
||||
var __clickResetButton = function() {
|
||||
wm.confirm("Are you sure you want to reset Mass Storage Drive?").then(function(ok) {
|
||||
wm.confirm("Are you sure you want to reset Mass Storage?").then(function(ok) {
|
||||
if (ok) {
|
||||
tools.httpPost("/api/msd/reset", null, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("MSD reset error:<br>", http.responseText);
|
||||
wm.error("Mass Storage reset error", http.responseText);
|
||||
}
|
||||
__applyState();
|
||||
});
|
||||
@ -206,7 +209,7 @@ export function Msd() {
|
||||
$("msd-new-url").value = "";
|
||||
let part = __state.storage.parts[$("msd-new-part-selector").value];
|
||||
if (file.size > part.size) {
|
||||
wm.error("New image is too big for the MSD partition.<br>Maximum:", tools.formatSize(part.size));
|
||||
wm.error(`New image is too big for the Mass Storage partition.<br>Maximum: ${tools.formatSize(part.size)}`);
|
||||
el_input.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
@ -215,7 +215,7 @@ export function Recorder() {
|
||||
__events = events;
|
||||
__events_time = events_time;
|
||||
} catch (ex) {
|
||||
wm.error(`Invalid script: ${ex}`);
|
||||
wm.error("Invalid script", `${ex}`);
|
||||
}
|
||||
|
||||
el_input.value = "";
|
||||
@ -285,7 +285,7 @@ export function Recorder() {
|
||||
wm.error("Too many text for paste!");
|
||||
__stopProcess();
|
||||
} else if (http.status !== 200) {
|
||||
wm.error("HID paste error:<br>", http.responseText);
|
||||
wm.error("HID paste error", http.responseText);
|
||||
__stopProcess();
|
||||
} else if (http.status === 200) {
|
||||
__play_timer = setTimeout(() => __runEvents(index + 1, time), 0);
|
||||
@ -296,7 +296,7 @@ export function Recorder() {
|
||||
} else if (event.event_type === "atx_button") {
|
||||
tools.httpPost("/api/atx/click", {"button": event.event.button}, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("ATX error:<br>", http.responseText);
|
||||
wm.error("ATX error", http.responseText);
|
||||
__stopProcess();
|
||||
} else if (http.status === 200) {
|
||||
__play_timer = setTimeout(() => __runEvents(index + 1, time), 0);
|
||||
@ -315,7 +315,7 @@ export function Recorder() {
|
||||
}
|
||||
tools.httpPost(path, params, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("GPIO error:<br>", http.responseText);
|
||||
wm.error("GPIO error", http.responseText);
|
||||
__stopProcess();
|
||||
} else if (http.status === 200) {
|
||||
__play_timer = setTimeout(() => __runEvents(index + 1, time), 0);
|
||||
|
||||
@ -297,7 +297,7 @@ export function Streamer() {
|
||||
__resetStream();
|
||||
tools.httpPost("/api/streamer/reset", null, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("Can't reset stream:<br>", http.responseText);
|
||||
wm.error("Can't reset stream", http.responseText);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -307,7 +307,7 @@ export function Streamer() {
|
||||
var __sendParam = function(name, value) {
|
||||
tools.httpPost("/api/streamer/set_params", {[name]: value}, function(http) {
|
||||
if (http.status !== 200) {
|
||||
wm.error("Can't configure stream:<br>", http.responseText);
|
||||
wm.error("Can't configure stream", http.responseText);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -64,7 +64,7 @@ function __login() {
|
||||
if (error === "ValidatorError") {
|
||||
wm.error("Invalid characters in credentials").then(__tryAgain);
|
||||
} else {
|
||||
wm.error("Login error:<br>", http.responseText).then(__tryAgain);
|
||||
wm.error("Login error", http.responseText).then(__tryAgain);
|
||||
}
|
||||
}
|
||||
}, body, "application/x-www-form-urlencoded");
|
||||
|
||||
@ -173,13 +173,13 @@ function __WindowManager() {
|
||||
|
||||
if (ex) {
|
||||
tools.error("copyTextToClipboard(): Workaround failed:", ex);
|
||||
wm.error("Can't copy text to the clipboard:<br>", ex);
|
||||
self.error("Can't copy text to the clipboard", `${ex}`);
|
||||
}
|
||||
});
|
||||
};
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text).then(function() {
|
||||
wm.info("The text has been copied to the clipboard");
|
||||
self.info("The text has been copied to the clipboard");
|
||||
}, function(ex) {
|
||||
workaround(ex);
|
||||
});
|
||||
@ -188,12 +188,22 @@ function __WindowManager() {
|
||||
}
|
||||
};
|
||||
|
||||
self.info = (...args) => __modalDialog("Info", args.join(" "), true, false);
|
||||
self.error = (...args) => __modalDialog("Error", args.join(" "), true, false);
|
||||
self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
|
||||
self.modal = (header, text, ok, cancel) => __modalDialog(header, text, ok, cancel);
|
||||
self.info = (html, ...args) => __modalCodeDialog("Info", html, args.join("\n"), true, false);
|
||||
self.error = (html, ...args) => __modalCodeDialog("Error", html, args.join("\n"), true, false);
|
||||
self.confirm = (html, ...args) => __modalCodeDialog("Question", html, args.join("\n"), true, true);
|
||||
self.modal = (header, html, ok, cancel) => __modalDialog(header, html, ok, cancel);
|
||||
|
||||
var __modalDialog = function(header, text, ok, cancel, parent=null) {
|
||||
var __modalCodeDialog = function(header, html, code, ok, cancel) {
|
||||
let create_content = function(el_content) {
|
||||
if (code) {
|
||||
html += `<br><br><div class="code"><pre style="margin:0px">${tools.escape(code)}</pre></div>`;
|
||||
}
|
||||
el_content.innerHTML = html;
|
||||
};
|
||||
return __modalDialog(header, create_content, ok, cancel);
|
||||
};
|
||||
|
||||
var __modalDialog = function(header, html, ok, cancel, parent=null) {
|
||||
let el_active_menu = (document.activeElement && document.activeElement.closest(".menu"));
|
||||
|
||||
let el_modal = document.createElement("div");
|
||||
@ -207,7 +217,7 @@ function __WindowManager() {
|
||||
|
||||
let el_header = document.createElement("div");
|
||||
el_header.className = "modal-header";
|
||||
el_header.innerHTML = header;
|
||||
el_header.innerText = header;
|
||||
el_window.appendChild(el_header);
|
||||
|
||||
let el_content = document.createElement("div");
|
||||
@ -223,13 +233,13 @@ function __WindowManager() {
|
||||
if (cancel) {
|
||||
el_cancel_button = document.createElement("button");
|
||||
el_cancel_button.className = "row100";
|
||||
el_cancel_button.innerHTML = "Cancel";
|
||||
el_cancel_button.innerText = "Cancel";
|
||||
el_buttons.appendChild(el_cancel_button);
|
||||
}
|
||||
if (ok) {
|
||||
el_ok_button = document.createElement("button");
|
||||
el_ok_button.className = "row100";
|
||||
el_ok_button.innerHTML = "OK";
|
||||
el_ok_button.innerText = "OK";
|
||||
el_buttons.appendChild(el_ok_button);
|
||||
}
|
||||
if (ok && cancel) {
|
||||
@ -276,11 +286,11 @@ function __WindowManager() {
|
||||
|
||||
__windows.push(el_modal);
|
||||
(parent || document.fullscreenElement || document.body).appendChild(el_modal);
|
||||
if (typeof text === "function") {
|
||||
if (typeof html === "function") {
|
||||
// Это должно быть здесь, потому что элемент должен иметь родителя чтобы существовать
|
||||
text(el_content, el_ok_button);
|
||||
html(el_content, el_ok_button);
|
||||
} else {
|
||||
el_content.innerHTML = text;
|
||||
el_content.innerHTML = html;
|
||||
}
|
||||
__activateWindow(el_modal);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user