mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 09:10:30 +08:00
refactoring
This commit is contained in:
parent
b5ba546481
commit
360ff00903
@ -34,34 +34,23 @@ function __loadKvmdInfo() {
|
|||||||
let http = tools.makeRequest("GET", "/api/info", function() {
|
let http = tools.makeRequest("GET", "/api/info", function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status === 200) {
|
if (http.status === 200) {
|
||||||
let port = JSON.parse(http.responseText).result.extras.ipmi.port;
|
let ipmi_port = JSON.parse(http.responseText).result.extras.ipmi.port;
|
||||||
let host = window.location.hostname;
|
let make_item = (comment, ipmi, api) => `
|
||||||
let site = `${window.location.protocol}//${window.location.host}`;
|
<span class="code-comment"># ${comment}:<br>$</span>
|
||||||
|
ipmitool -I lanplus -U admin -P admin -H ${window.location.hostname} -p ${ipmi_port} ${ipmi}<br>
|
||||||
|
<span class="code-comment">$</span> curl -XPOST -HX-KVMD-User:admin -HX-KVMD-Passwd:admin -k \\<br>
|
||||||
|
${window.location.protocol}//${window.location.host}/api/atx${api}<br>
|
||||||
|
`;
|
||||||
$("ipmi-text").innerHTML = `
|
$("ipmi-text").innerHTML = `
|
||||||
<span class="code-comment"># Power on the server if it's off:<br>
|
${make_item("Power on the server if it's off", "power on", "/power?action=on")}
|
||||||
$</span> ipmitool -I lanplus -U admin -P admin -H ${host} -p ${port} power on<br>
|
|
||||||
<span class="code-comment">$</span> curl -XPOST -HX-KVMD-User:admin -HX-KVMD-Passwd:admin -k \\<br>
|
|
||||||
${site}/api/atx/power?action=on<br>
|
|
||||||
<br>
|
<br>
|
||||||
<span class="code-comment"># Soft power off the server if it's on:<br>
|
${make_item("Soft power off the server if it's on", "power soft", "/power?action=off")}
|
||||||
$</span> ipmitool -I lanplus -U admin -P admin -H ${host} -p ${port} power soft<br>
|
|
||||||
<span class="code-comment">$</span> curl -XPOST -HX-KVMD-User:admin -HX-KVMD-Passwd:admin -k \\<br>
|
|
||||||
${site}/api/atx/power?action=off<br>
|
|
||||||
<br>
|
<br>
|
||||||
<span class="code-comment"># Hard power off the server if it's on:<br>
|
${make_item("Hard power off the server if it's on", "power off", "/power?action=off_hard")}
|
||||||
$</span> ipmitool -I lanplus -U admin -P admin -H ${host} -p ${port} power off<br>
|
|
||||||
<span class="code-comment">$</span> curl -XPOST -HX-KVMD-User:admin -HX-KVMD-Passwd:admin -k \\<br>
|
|
||||||
${site}/api/atx/power?action=off_hard<br>
|
|
||||||
<br>
|
<br>
|
||||||
<span class="code-comment"># Hard reset the server if it's on:<br>
|
${make_item("Hard reset the server if it's on", "power reset", "/power?action=reset_hard")}
|
||||||
$</span> ipmitool -I lanplus -U admin -P admin -H ${host} -p ${port} power reset<br>
|
|
||||||
<span class="code-comment">$</span> curl -XPOST -HX-KVMD-User:admin -HX-KVMD-Passwd:admin -k \\<br>
|
|
||||||
${site}/api/atx/power?action=reset_hard<br>
|
|
||||||
<br>
|
<br>
|
||||||
<span class="code-comment"># Check the power status:<br>
|
${make_item("Check the power status", "power status", "")}
|
||||||
$</span> ipmitool -I lanplus -U admin -P admin -H ${host} -p ${port} power status<br>
|
|
||||||
<span class="code-comment">$</span> curl -HX-KVMD-User:admin -HX-KVMD-Passwd:admin -k \\<br>
|
|
||||||
${site}/api/atx
|
|
||||||
`;
|
`;
|
||||||
} else if (http.status === 401 || http.status === 403) {
|
} else if (http.status === 401 || http.status === 403) {
|
||||||
document.location.href = "/login";
|
document.location.href = "/login";
|
||||||
|
|||||||
@ -36,7 +36,7 @@ export function Keypad(keys_parent, key_callback) {
|
|||||||
var __modifiers = {};
|
var __modifiers = {};
|
||||||
|
|
||||||
var __init__ = function() {
|
var __init__ = function() {
|
||||||
for (let el_key of $$$(keys_parent + " div.key")) {
|
for (let el_key of $$$(`${keys_parent} div.key`)) {
|
||||||
let code = el_key.getAttribute("data-code");
|
let code = el_key.getAttribute("data-code");
|
||||||
|
|
||||||
tools.setDefault(__keys, code, []);
|
tools.setDefault(__keys, code, []);
|
||||||
@ -54,7 +54,7 @@ export function Keypad(keys_parent, key_callback) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let el_key of $$$(keys_parent + " div.modifier")) {
|
for (let el_key of $$$(`${keys_parent} div.modifier`)) {
|
||||||
let code = el_key.getAttribute("data-code");
|
let code = el_key.getAttribute("data-code");
|
||||||
|
|
||||||
tools.setDefault(__modifiers, code, []);
|
tools.setDefault(__modifiers, code, []);
|
||||||
|
|||||||
@ -36,30 +36,37 @@ export function Atx() {
|
|||||||
$("atx-power-led").title = "Power Led";
|
$("atx-power-led").title = "Power Led";
|
||||||
$("atx-hdd-led").title = "Disk Activity Led";
|
$("atx-hdd-led").title = "Disk Activity Led";
|
||||||
|
|
||||||
tools.setOnClick($("atx-power-button"), () => __clickButton("power", "Are you sure to click the power button?"));
|
for (let args of [
|
||||||
tools.setOnClick($("atx-power-button-long"), () => __clickButton("power_long", "Are you sure to perform the long press of the power button?"));
|
["atx-power-button", "power", "Are you sure to click the power button?"],
|
||||||
tools.setOnClick($("atx-reset-button"), () => __clickButton("reset", "Are you sure to reboot the server?"));
|
["atx-power-button-long", "power_long", "Are you sure to perform the long press of the power button?"],
|
||||||
|
["atx-reset-button", "reset", "Are you sure to reboot the server?"],
|
||||||
|
]) {
|
||||||
|
tools.setOnClick($(args[0]), () => __clickButton(args[1], args[2]));
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/************************************************************************/
|
/************************************************************************/
|
||||||
|
|
||||||
self.setState = function(state) {
|
self.setState = function(state) {
|
||||||
|
let buttons_enabled = false;
|
||||||
if (state) {
|
if (state) {
|
||||||
tools.setFeatureEnabled($("atx-dropdown"), state.enabled);
|
tools.featureSetEnabled($("atx-dropdown"), state.enabled);
|
||||||
|
$("atx-power-led").className = (state.busy ? "led-yellow" : (state.leds.power ? "led-green" : "led-gray"));
|
||||||
|
$("atx-hdd-led").className = (state.leds.hdd ? "led-red" : "led-gray");
|
||||||
|
buttons_enabled = !state.busy;
|
||||||
|
} else {
|
||||||
|
$("atx-power-led").className = "led-gray";
|
||||||
|
$("atx-hdd-led").className = "led-gray";
|
||||||
|
}
|
||||||
|
for (let id of ["atx-power-button", "atx-power-button-long", "atx-reset-button"]) {
|
||||||
|
wm.switchEnabled($(id), buttons_enabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
$("atx-power-led").className = ((state && state.leds.power) ? "led-green" : "led-gray");
|
|
||||||
$("atx-hdd-led").className = ((state && state.leds.hdd) ? "led-red" : "led-gray");
|
|
||||||
|
|
||||||
wm.switchEnabled($("atx-power-button"), (state && !state.busy));
|
|
||||||
wm.switchEnabled($("atx-power-button-long"), (state && !state.busy));
|
|
||||||
wm.switchEnabled($("atx-reset-button"), (state && !state.busy));
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var __clickButton = function(button, confirm_msg) {
|
var __clickButton = function(button, confirm_msg) {
|
||||||
wm.confirm(confirm_msg).then(function(ok) {
|
wm.confirm(confirm_msg).then(function(ok) {
|
||||||
if (ok) {
|
if (ok) {
|
||||||
let http = tools.makeRequest("POST", "/api/atx/click?button=" + button, function() {
|
let http = tools.makeRequest("POST", `/api/atx/click?button=${button}`, function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status === 409) {
|
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");
|
||||||
|
|||||||
@ -42,7 +42,7 @@ export function Msd() {
|
|||||||
$("msd-image-selector").onchange = __selectImage;
|
$("msd-image-selector").onchange = __selectImage;
|
||||||
tools.setOnClick($("msd-remove-image"), __clickRemoveImageButton);
|
tools.setOnClick($("msd-remove-image"), __clickRemoveImageButton);
|
||||||
|
|
||||||
tools.setOnClickRadio("msd-mode-radio", __clickModeRadio);
|
tools.radioSetOnClick("msd-mode-radio", __clickModeRadio);
|
||||||
|
|
||||||
$("msd-select-new-image-file").onchange = __selectNewImageFile;
|
$("msd-select-new-image-file").onchange = __selectNewImageFile;
|
||||||
tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click());
|
tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click());
|
||||||
@ -85,7 +85,7 @@ export function Msd() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __clickModeRadio = function() {
|
var __clickModeRadio = function() {
|
||||||
__sendParam("cdrom", tools.getRadioValue("msd-mode-radio"));
|
__sendParam("cdrom", tools.radioGetValue("msd-mode-radio"));
|
||||||
};
|
};
|
||||||
|
|
||||||
var __sendParam = function(name, value) {
|
var __sendParam = function(name, value) {
|
||||||
@ -126,7 +126,7 @@ export function Msd() {
|
|||||||
var __uploadProgress = function(event) {
|
var __uploadProgress = function(event) {
|
||||||
if(event.lengthComputable) {
|
if(event.lengthComputable) {
|
||||||
let percent = Math.round((event.loaded * 100) / event.total);
|
let percent = Math.round((event.loaded * 100) / event.total);
|
||||||
tools.setProgressPercent($("msd-uploading-progress"), `${percent}%`, percent);
|
tools.progressSetValue($("msd-uploading-progress"), `${percent}%`, percent);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -135,7 +135,7 @@ export function Msd() {
|
|||||||
__upload_http.upload.onprogress = null;
|
__upload_http.upload.onprogress = null;
|
||||||
__upload_http.abort();
|
__upload_http.abort();
|
||||||
__upload_http = null;
|
__upload_http = null;
|
||||||
tools.setProgressPercent($("msd-uploading-progress"), "Aborted", 0);
|
tools.progressSetValue($("msd-uploading-progress"), "Aborted", 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
var __clickConnectButton = function(connect) {
|
var __clickConnectButton = function(connect) {
|
||||||
@ -183,8 +183,8 @@ export function Msd() {
|
|||||||
var __applyState = function() {
|
var __applyState = function() {
|
||||||
if (__state) {
|
if (__state) {
|
||||||
__toggleMsdFeatures();
|
__toggleMsdFeatures();
|
||||||
tools.setFeatureEnabled($("msd-dropdown"), __state.enabled);
|
tools.featureSetEnabled($("msd-dropdown"), __state.enabled);
|
||||||
tools.setFeatureEnabled($("msd-reset-button"), __state.enabled);
|
tools.featureSetEnabled($("msd-reset-button"), __state.enabled);
|
||||||
|
|
||||||
__showMessageOffline(!__state.online);
|
__showMessageOffline(!__state.online);
|
||||||
__showMessageImageBroken(__state.online && __state.drive.image && !__state.drive.image.complete && !__state.storage.uploading);
|
__showMessageImageBroken(__state.online && __state.drive.image && !__state.drive.image.complete && !__state.storage.uploading);
|
||||||
@ -212,10 +212,10 @@ export function Msd() {
|
|||||||
let size = __state.storage.size;
|
let size = __state.storage.size;
|
||||||
let used = __state.storage.size - __state.storage.free;
|
let used = __state.storage.size - __state.storage.free;
|
||||||
$("msd-storage-size").innerHTML = tools.formatSize(size);
|
$("msd-storage-size").innerHTML = tools.formatSize(size);
|
||||||
tools.setProgressPercent($("msd-storage-progress"), `Storage: ${tools.formatSize(used)} of ${tools.formatSize(size)} used`, used / size * 100);
|
tools.progressSetValue($("msd-storage-progress"), `Storage: ${tools.formatSize(used)} of ${tools.formatSize(size)} used`, used / size * 100);
|
||||||
} else {
|
} else {
|
||||||
$("msd-storage-size").innerHTML = "Unavailable";
|
$("msd-storage-size").innerHTML = "Unavailable";
|
||||||
tools.setProgressPercent($("msd-storage-progress"), "Storage: unavailable", 0);
|
tools.progressSetValue($("msd-storage-progress"), "Storage: unavailable", 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
wm.switchEnabled($("msd-image-selector"), (__state.online && __state.features.multi && !__state.drive.connected && !__state.busy));
|
wm.switchEnabled($("msd-image-selector"), (__state.online && __state.features.multi && !__state.drive.connected && !__state.busy));
|
||||||
@ -225,7 +225,7 @@ export function Msd() {
|
|||||||
wm.switchEnabled($("msd-remove-image"), (__state.online && __state.features.multi && __state.drive.image && !__state.drive.connected && !__state.busy));
|
wm.switchEnabled($("msd-remove-image"), (__state.online && __state.features.multi && __state.drive.image && !__state.drive.connected && !__state.busy));
|
||||||
|
|
||||||
wm.switchRadioEnabled("msd-mode-radio", (__state.online && __state.features.cdrom && !__state.drive.connected && !__state.busy));
|
wm.switchRadioEnabled("msd-mode-radio", (__state.online && __state.features.cdrom && !__state.drive.connected && !__state.busy));
|
||||||
tools.setRadioValue("msd-mode-radio", `${Number(__state.online && __state.features.cdrom && __state.drive.cdrom)}`);
|
tools.radioSetValue("msd-mode-radio", `${Number(__state.online && __state.features.cdrom && __state.drive.cdrom)}`);
|
||||||
|
|
||||||
wm.switchEnabled($("msd-connect-button"), (__state.online && (!__state.features.multi || __state.drive.image) && !__state.drive.connected && !__state.busy));
|
wm.switchEnabled($("msd-connect-button"), (__state.online && (!__state.features.multi || __state.drive.image) && !__state.drive.connected && !__state.busy));
|
||||||
wm.switchEnabled($("msd-disconnect-button"), (__state.online && __state.drive.connected && !__state.busy));
|
wm.switchEnabled($("msd-disconnect-button"), (__state.online && __state.drive.connected && !__state.busy));
|
||||||
@ -236,11 +236,11 @@ export function Msd() {
|
|||||||
|
|
||||||
wm.switchEnabled($("msd-reset-button"), (__state.enabled && !__state.busy));
|
wm.switchEnabled($("msd-reset-button"), (__state.enabled && !__state.busy));
|
||||||
|
|
||||||
tools.setHiddenVisible($("msd-submenu-new-image"), __image_file);
|
tools.hiddenSetVisible($("msd-submenu-new-image"), __image_file);
|
||||||
$("msd-new-image-name").innerHTML = (__image_file ? __image_file.name : "");
|
$("msd-new-image-name").innerHTML = (__image_file ? __image_file.name : "");
|
||||||
$("msd-new-image-size").innerHTML = (__image_file ? tools.formatSize(__image_file.size) : "");
|
$("msd-new-image-size").innerHTML = (__image_file ? tools.formatSize(__image_file.size) : "");
|
||||||
if (!__upload_http) {
|
if (!__upload_http) {
|
||||||
tools.setProgressPercent($("msd-uploading-progress"), "Waiting for upload ...", 0);
|
tools.progressSetValue($("msd-uploading-progress"), "Waiting for upload ...", 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
@ -255,14 +255,14 @@ export function Msd() {
|
|||||||
$("msd-image-name").innerHTML = "";
|
$("msd-image-name").innerHTML = "";
|
||||||
$("msd-image-size").innerHTML = "";
|
$("msd-image-size").innerHTML = "";
|
||||||
$("msd-storage-size").innerHTML = "";
|
$("msd-storage-size").innerHTML = "";
|
||||||
tools.setProgressPercent($("msd-storage-progress"), "", 0);
|
tools.progressSetValue($("msd-storage-progress"), "", 0);
|
||||||
|
|
||||||
wm.switchEnabled($("msd-image-selector"), false);
|
wm.switchEnabled($("msd-image-selector"), false);
|
||||||
$("msd-image-selector").options.length = 1;
|
$("msd-image-selector").options.length = 1;
|
||||||
wm.switchEnabled($("msd-remove-image"), false);
|
wm.switchEnabled($("msd-remove-image"), false);
|
||||||
|
|
||||||
wm.switchRadioEnabled("msd-mode-radio", false);
|
wm.switchRadioEnabled("msd-mode-radio", false);
|
||||||
tools.setRadioValue("msd-mode-radio", "0");
|
tools.radioSetValue("msd-mode-radio", "0");
|
||||||
|
|
||||||
wm.switchEnabled($("msd-connect-button"), false);
|
wm.switchEnabled($("msd-connect-button"), false);
|
||||||
wm.switchEnabled($("msd-disconnect-button"), false);
|
wm.switchEnabled($("msd-disconnect-button"), false);
|
||||||
@ -274,43 +274,43 @@ export function Msd() {
|
|||||||
wm.switchEnabled($("msd-reset-button"), false);
|
wm.switchEnabled($("msd-reset-button"), false);
|
||||||
|
|
||||||
$("msd-select-new-image-file").value = "";
|
$("msd-select-new-image-file").value = "";
|
||||||
tools.setHiddenVisible($("msd-submenu-new-image"), false);
|
tools.hiddenSetVisible($("msd-submenu-new-image"), false);
|
||||||
$("msd-new-image-name").innerHTML = "";
|
$("msd-new-image-name").innerHTML = "";
|
||||||
$("msd-new-image-size").innerHTML = "";
|
$("msd-new-image-size").innerHTML = "";
|
||||||
tools.setProgressPercent($("msd-uploading-progress"), "", 0);
|
tools.progressSetValue($("msd-uploading-progress"), "", 0);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var __toggleMsdFeatures = function() {
|
var __toggleMsdFeatures = function() {
|
||||||
for (let el of $$$(".msd-single-storage")) {
|
for (let el of $$$(".msd-single-storage")) {
|
||||||
tools.setFeatureEnabled(el, !__state.features.multi);
|
tools.featureSetEnabled(el, !__state.features.multi);
|
||||||
}
|
}
|
||||||
for (let el of $$$(".msd-multi-storage")) {
|
for (let el of $$$(".msd-multi-storage")) {
|
||||||
tools.setFeatureEnabled(el, __state.features.multi);
|
tools.featureSetEnabled(el, __state.features.multi);
|
||||||
}
|
}
|
||||||
for (let el of $$$(".msd-cdrom-emulation")) {
|
for (let el of $$$(".msd-cdrom-emulation")) {
|
||||||
tools.setFeatureEnabled(el, __state.features.cdrom);
|
tools.featureSetEnabled(el, __state.features.cdrom);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var __showMessageOffline = function(visible) {
|
var __showMessageOffline = function(visible) {
|
||||||
tools.setHiddenVisible($("msd-message-offline"), visible);
|
tools.hiddenSetVisible($("msd-message-offline"), visible);
|
||||||
};
|
};
|
||||||
|
|
||||||
var __showMessageImageBroken = function(visible) {
|
var __showMessageImageBroken = function(visible) {
|
||||||
tools.setHiddenVisible($("msd-message-image-broken"), visible);
|
tools.hiddenSetVisible($("msd-message-image-broken"), visible);
|
||||||
};
|
};
|
||||||
|
|
||||||
var __showMessageTooBigForCdrom = function(visible) {
|
var __showMessageTooBigForCdrom = function(visible) {
|
||||||
tools.setHiddenVisible($("msd-message-too-big-for-cdrom"), visible);
|
tools.hiddenSetVisible($("msd-message-too-big-for-cdrom"), visible);
|
||||||
};
|
};
|
||||||
|
|
||||||
var __showMessageOutOfStorage = function(visible) {
|
var __showMessageOutOfStorage = function(visible) {
|
||||||
tools.setHiddenVisible($("msd-message-out-of-storage"), visible);
|
tools.hiddenSetVisible($("msd-message-out-of-storage"), visible);
|
||||||
};
|
};
|
||||||
|
|
||||||
var __showMessageAnotherUserUploads = function(visible) {
|
var __showMessageAnotherUserUploads = function(visible) {
|
||||||
tools.setHiddenVisible($("msd-message-another-user-uploads"), visible);
|
tools.hiddenSetVisible($("msd-message-another-user-uploads"), visible);
|
||||||
};
|
};
|
||||||
|
|
||||||
var __setStatus = function(led_cls, msg) {
|
var __setStatus = function(led_cls, msg) {
|
||||||
|
|||||||
@ -92,11 +92,11 @@ export function Session() {
|
|||||||
let undervoltage = (flags.undervoltage.now || flags.undervoltage.past);
|
let undervoltage = (flags.undervoltage.now || flags.undervoltage.past);
|
||||||
let freq_capped = (flags.freq_capped.now || flags.freq_capped.past);
|
let freq_capped = (flags.freq_capped.now || flags.freq_capped.past);
|
||||||
|
|
||||||
tools.setHiddenVisible($("hw-health-dropdown"), (undervoltage || freq_capped));
|
tools.hiddenSetVisible($("hw-health-dropdown"), (undervoltage || freq_capped));
|
||||||
$("hw-health-undervoltage-led").className = (undervoltage ? (flags.undervoltage.now ? "led-red" : "led-yellow") : "hidden");
|
$("hw-health-undervoltage-led").className = (undervoltage ? (flags.undervoltage.now ? "led-red" : "led-yellow") : "hidden");
|
||||||
$("hw-health-overheating-led").className = (freq_capped ? (flags.freq_capped.now ? "led-red" : "led-yellow") : "hidden");
|
$("hw-health-overheating-led").className = (freq_capped ? (flags.freq_capped.now ? "led-red" : "led-yellow") : "hidden");
|
||||||
tools.setHiddenVisible($("hw-health-message-undervoltage"), undervoltage);
|
tools.hiddenSetVisible($("hw-health-message-undervoltage"), undervoltage);
|
||||||
tools.setHiddenVisible($("hw-health-message-overheating"), freq_capped);
|
tools.hiddenSetVisible($("hw-health-message-overheating"), freq_capped);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -43,27 +43,18 @@ export function Streamer() {
|
|||||||
var __init__ = function() {
|
var __init__ = function() {
|
||||||
$("stream-led").title = "Stream inactive";
|
$("stream-led").title = "Stream inactive";
|
||||||
|
|
||||||
$("stream-quality-slider").min = 5;
|
tools.sliderSetParams($("stream-quality-slider"), 5, 100, 5, 80);
|
||||||
$("stream-quality-slider").max = 100;
|
tools.sliderSetOnUp($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value));
|
||||||
$("stream-quality-slider").step = 5;
|
|
||||||
$("stream-quality-slider").value = 80;
|
|
||||||
tools.setOnUpSlider($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value));
|
|
||||||
|
|
||||||
$("stream-desired-fps-slider").min = 0;
|
tools.sliderSetParams($("stream-desired-fps-slider"), 0, 120, 1, 0);
|
||||||
$("stream-desired-fps-slider").max = 120;
|
tools.sliderSetOnUp($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value));
|
||||||
$("stream-desired-fps-slider").step = 1;
|
|
||||||
$("stream-desired-fps-slider").value = 0;
|
|
||||||
tools.setOnUpSlider($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value));
|
|
||||||
|
|
||||||
$("stream-resolution-selector").onchange = (() => {
|
$("stream-resolution-selector").onchange = (() => {
|
||||||
wm.switchEnabled($("stream-resolution-selector"), false);
|
wm.switchEnabled($("stream-resolution-selector"), false);
|
||||||
__sendParam("resolution", $("stream-resolution-selector").value);
|
__sendParam("resolution", $("stream-resolution-selector").value);
|
||||||
});
|
});
|
||||||
|
|
||||||
$("stream-size-slider").min = 20;
|
tools.sliderSetParams($("stream-size-slider"), 20, 200, 5, 100);
|
||||||
$("stream-size-slider").max = 200;
|
|
||||||
$("stream-size-slider").step = 5;
|
|
||||||
$("stream-size-slider").value = 100;
|
|
||||||
$("stream-size-slider").oninput = () => __resize();
|
$("stream-size-slider").oninput = () => __resize();
|
||||||
$("stream-size-slider").onchange = () => __resize();
|
$("stream-size-slider").onchange = () => __resize();
|
||||||
|
|
||||||
@ -75,8 +66,8 @@ export function Streamer() {
|
|||||||
|
|
||||||
self.setState = function(state) {
|
self.setState = function(state) {
|
||||||
if (state) {
|
if (state) {
|
||||||
tools.setFeatureEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0));
|
tools.featureSetEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0));
|
||||||
tools.setFeatureEnabled($("stream-resolution"), state.features.resolution);
|
tools.featureSetEnabled($("stream-resolution"), state.features.resolution);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (state && state.streamer) {
|
if (state && state.streamer) {
|
||||||
@ -211,7 +202,7 @@ export function Streamer() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __updateQualityValue = function(value) {
|
var __updateQualityValue = function(value) {
|
||||||
$("stream-quality-value").innerHTML = value + "%";
|
$("stream-quality-value").innerHTML = `${value}%`;
|
||||||
};
|
};
|
||||||
|
|
||||||
var __updateDesiredFpsValue = function(value) {
|
var __updateDesiredFpsValue = function(value) {
|
||||||
@ -253,7 +244,7 @@ export function Streamer() {
|
|||||||
|
|
||||||
var __resize = function() {
|
var __resize = function() {
|
||||||
let size = $("stream-size-slider").value;
|
let size = $("stream-size-slider").value;
|
||||||
$("stream-size-value").innerHTML = size + "%";
|
$("stream-size-value").innerHTML = `${size}%`;
|
||||||
__size_factor = size / 100;
|
__size_factor = size / 100;
|
||||||
__applySizeFactor();
|
__applySizeFactor();
|
||||||
};
|
};
|
||||||
@ -281,9 +272,9 @@ export function Streamer() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __applySizeFactor = function() {
|
var __applySizeFactor = function() {
|
||||||
let el_stream_image = $("stream-image");
|
let el = $("stream-image");
|
||||||
el_stream_image.style.width = __resolution.width * __size_factor + "px";
|
el.style.width = __resolution.width * __size_factor + "px";
|
||||||
el_stream_image.style.height = __resolution.height * __size_factor + "px";
|
el.style.height = __resolution.height * __size_factor + "px";
|
||||||
wm.showWindow($("stream-window"), false);
|
wm.showWindow($("stream-window"), false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -42,14 +42,17 @@ export function WakeOnLan() {
|
|||||||
|
|
||||||
self.setState = function(state) {
|
self.setState = function(state) {
|
||||||
if (state) {
|
if (state) {
|
||||||
tools.setFeatureEnabled($("wol"), state.enabled);
|
tools.featureSetEnabled($("wol"), state.enabled);
|
||||||
__target = state.target;
|
__target = state.target;
|
||||||
}
|
}
|
||||||
wm.switchEnabled($("wol-wakeup-button"), (state && state.enabled));
|
wm.switchEnabled($("wol-wakeup-button"), (state && state.enabled));
|
||||||
};
|
};
|
||||||
|
|
||||||
var __clickWakeupButton = function() {
|
var __clickWakeupButton = function() {
|
||||||
let msg = `Are you sure to send Wake-on-LAN packet to the server?<br>Target: <b>${__target.mac}</b> (${__target.ip}:${__target.port})?`;
|
let msg = `
|
||||||
|
Are you sure to send Wake-on-LAN packet to the server?<br>
|
||||||
|
Target: <b>${__target.mac}</b> (${__target.ip}:${__target.port})?
|
||||||
|
`;
|
||||||
wm.confirm(msg).then(function(ok) {
|
wm.confirm(msg).then(function(ok) {
|
||||||
if (ok) {
|
if (ok) {
|
||||||
let http = tools.makeRequest("POST", "/api/wol/wakeup", function() {
|
let http = tools.makeRequest("POST", "/api/wol/wakeup", function() {
|
||||||
|
|||||||
@ -107,7 +107,7 @@ export var tools = new function() {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
this.setOnUpSlider = function(el, delay, display_callback, execute_callback) {
|
this.sliderSetOnUp = function(el, delay, display_callback, execute_callback) {
|
||||||
el.execution_timer = null;
|
el.execution_timer = null;
|
||||||
el.activated = false;
|
el.activated = false;
|
||||||
|
|
||||||
@ -134,33 +134,37 @@ export var tools = new function() {
|
|||||||
}, delay);
|
}, delay);
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
this.sliderSetParams = function(el, min, max, step, value) {
|
||||||
|
el.min = min;
|
||||||
|
el.max = max;
|
||||||
|
el.step = step;
|
||||||
|
el.value = value;
|
||||||
|
};
|
||||||
|
|
||||||
this.setOnClickRadio = function(name, callback) {
|
this.radioSetOnClick = function(name, callback) {
|
||||||
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
|
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
|
||||||
this.setOnClick(el, callback);
|
this.setOnClick(el, callback);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
this.radioGetValue = function(name) {
|
||||||
this.getRadioValue = function(name) {
|
|
||||||
return document.querySelector(`input[type="radio"][name="${name}"]:checked`).value;
|
return document.querySelector(`input[type="radio"][name="${name}"]:checked`).value;
|
||||||
};
|
};
|
||||||
|
this.radioSetValue = function(name, value) {
|
||||||
this.setRadioValue = function(name, value) {
|
|
||||||
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
|
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
|
||||||
el.checked = (el.value === value);
|
el.checked = (el.value === value);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.setProgressPercent = function(el, title, percent) {
|
this.progressSetValue = function(el, title, percent) {
|
||||||
el.setAttribute("data-label", title);
|
el.setAttribute("data-label", title);
|
||||||
$(`${el.id}-value`).style.width = `${percent}%`;
|
$(`${el.id}-value`).style.width = `${percent}%`;
|
||||||
};
|
};
|
||||||
|
|
||||||
this.setHiddenVisible = function(el, visible) {
|
this.hiddenSetVisible = function(el, visible) {
|
||||||
el.classList.toggle("hidden", !visible);
|
el.classList.toggle("hidden", !visible);
|
||||||
};
|
};
|
||||||
|
|
||||||
this.setFeatureEnabled = function(el, enabled) {
|
this.featureSetEnabled = function(el, enabled) {
|
||||||
el.classList.toggle("feature-disabled", !enabled);
|
el.classList.toggle("feature-disabled", !enabled);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -34,11 +34,10 @@ function __loadKvmdInfo() {
|
|||||||
let http = tools.makeRequest("GET", "/api/info", function() {
|
let http = tools.makeRequest("GET", "/api/info", function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status === 200) {
|
if (http.status === 200) {
|
||||||
let port = JSON.parse(http.responseText).result.extras.vnc.port;
|
let vnc_port = JSON.parse(http.responseText).result.extras.vnc.port;
|
||||||
let host = window.location.hostname;
|
|
||||||
$("vnc-text").innerHTML = `
|
$("vnc-text").innerHTML = `
|
||||||
<span class="code-comment"># How to connect using the Linux terminal:<br>
|
<span class="code-comment"># How to connect using the Linux terminal:<br>
|
||||||
$</span> vncviewer ${host}::${port}
|
$</span> vncviewer ${window.location.hostname}::${vnc_port}
|
||||||
`;
|
`;
|
||||||
} else if (http.status === 401 || http.status === 403) {
|
} else if (http.status === 401 || http.status === 403) {
|
||||||
document.location.href = "/login";
|
document.location.href = "/login";
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user