GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 09:10:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

otg msd ui

Browse Source
This commit is contained in:
Devaev Maxim 2019-11-10 00:59:27 +03:00
parent 67bc2b0e08
commit 090bb3866a
4 changed files with 236 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
web/kvm/index.html
View File

@ -150,7 +150,7 @@
Mass Storage ↴ Mass Storage ↴
</a> </a>
<div data-dont-hide-menu id="msd-menu" class="menu-item-content"> <div data-dont-hide-menu id="msd-menu" class="menu-item-content">
<div id="msd-offline" class="msd-message"> <div id="msd-message-offline" class="msd-message">
<div class="menu-item-content-text"> <div class="menu-item-content-text">
<table> <table>
<tr> <tr>
@ -161,8 +161,7 @@
</div> </div>
<hr> <hr>
</div> </div>
<div id="msd-message-image-broken" class="msd-message">
<div id="msd-drive-image-broken" class="msd-message">
<div class="menu-item-content-text"> <div class="menu-item-content-text">
<table> <table>
<tr> <tr>
@ -173,8 +172,29 @@
</div> </div>
<hr> <hr>
</div> </div>
<div id="msd-message-too-big-for-cdrom" class="msd-message">
<div id="msd-another-another-user-uploads" class="msd-message"> <div class="menu-item-content-text">
<table>
<tr>
<td><img src="../share/svg/warning.svg" /></td>
<td><b>Current image is too big for CD-ROM!</b><br><sub>The device filesystem will be truncated to 2.2GiB</sub></td>
</tr>
</table>
</div>
<hr>
</div>
<div id="msd-message-out-of-storage" class="msd-message">
<div class="menu-item-content-text">
<table>
<tr>
<td><img src="../share/svg/info.svg" /></td>
<td><b>Current image is out of storage</b><br><sub>This image was connected manually using <b>kvmd-otgmsd</b></sub></td>
</tr>
</table>
</div>
<hr>
</div>
<div id="msd-message-another-user-uploads" class="msd-message">
<div class="menu-item-content-text"> <div class="menu-item-content-text">
<table> <table>
<tr> <tr>
@ -194,40 +214,47 @@
</table> </table>
<hr> <hr>
<table class="msd-info"> <table class="msd-info msd-single-storage msd-feature-disabled">
<tr> <tr>
<td>Current image:</td> <td>Current image:</td>
<td id="msd-drive-image-name" class="msd-info-value"></td> <td id="msd-image-name" class="msd-info-value"></td>
</tr> </tr>
<tr> <tr>
<td>Image size:</td> <td>Image size:</td>
<td id="msd-drive-image-size" class="msd-info-value"></td> <td id="msd-image-size" class="msd-info-value"></td>
</tr> </tr>
<tr class="msd-single-storage msd-feature-disabled"> <tr>
<td>Storage size:</td> <td>Storage size:</td>
<td id="msd-storage-size" class="msd-info-value"></td> <td id="msd-storage-size" class="msd-info-value"></td>
</tr> </tr>
</table> </table>
<table class="msd-info msd-multi-storage msd-feature-disabled">
<tr>
<td>Image:</td>
<td width="100%">
<select disabled id="msd-image-selector">
<option selected value="">&lt;Not selected&gt;</option>
</select>
</td>
<td><button disabled id="msd-remove-image">Remove</button></td>
</tr>
</table>
<table class="msd-info msd-multi-storage msd-feature-disabled">
<tr class="msd-cdrom-emulation msd-feature-disabled">
<td>Emulate CD-ROM drive:</td>
<td>
<div class="switch-box msd-cdrom-switch-box">
<input type="checkbox" id="msd-emulate-cdrom-checkbox" class="switch-checkbox" checked />
<label class="switch-label" for="msd-emulate-cdrom-checkbox">
<span class="switch-inner"></span>
<span class="switch"></span>
</label>
</div>
</td>
</tr>
</table>
<hr> <hr>
<div class="msd-multi-storage msd-feature-disabled">
<div class="menu-item-content-text">
<table class="one-line-switch"><tr>
<td>Emulate CD-ROM drive: <sup><i>otherwise the flash drive</i></sup></td>
<td align="right">
<div class="switch-box msd-cdrom-switch-box">
<input type="checkbox" id="msd-emulate-cdrom-checkbox" class="switch-checkbox" checked />
<label class="switch-label" for="msd-emulate-cdrom-checkbox">
<span class="switch-inner"></span>
<span class="switch"></span>
</label>
</div>
</td>
</tr></table>
</div>
<hr>
</div>
<div class="msd-multi-storage msd-feature-disabled"> <div class="msd-multi-storage msd-feature-disabled">
<div class="menu-item-content-text"> <div class="menu-item-content-text">
<div id="msd-storage-progress" class="progress"> <div id="msd-storage-progress" class="progress">
@ -245,7 +272,7 @@
</div> </div>
<hr> <hr>
<div id="msd-new-image" class="msd-message"> <div id="msd-submenu-new-image" class="msd-message">
<table class="msd-info"> <table class="msd-info">
<tr> <tr>
<td>New image:</td> <td>New image:</td>

7
web/share/css/main.css
View File

@ -96,6 +96,9 @@ select {
outline: none; outline: none;
cursor: pointer; cursor: pointer;
} }
select {
padding-left: 5px;
}
@media (hover: hover), (min--moz-device-pixel-ratio: 0) { @media (hover: hover), (min--moz-device-pixel-ratio: 0) {
/* If we have a mouse cursor */ /* If we have a mouse cursor */
button:enabled:hover, button:enabled:hover,
@ -146,6 +149,10 @@ select:active {
background-color: var(--cs-bg-control-intensive) !important; background-color: var(--cs-bg-control-intensive) !important;
background-image: url("../svg/select-arrow-intensive.svg") !important; background-image: url("../svg/select-arrow-intensive.svg") !important;
} }
select option {
color: var(--cs-control-default-fg);
background-color: var(--cs-control-default-bg);
}
input[type=text], input[type=password] { input[type=text], input[type=password] {
overflow-x: auto; overflow-x: auto;

248
web/share/js/kvm/msd.js
View File

@ -39,6 +39,9 @@ export function Msd() {
var __init__ = function() { var __init__ = function() {
$("msd-led").title = "Unknown state"; $("msd-led").title = "Unknown state";
$("msd-image-selector").onchange = __selectImage;
tools.setOnClick($("msd-remove-image"), __clickRemoveImageButton);
tools.setOnClick($("msd-emulate-cdrom-checkbox"), __clickCdromSwitch); tools.setOnClick($("msd-emulate-cdrom-checkbox"), __clickCdromSwitch);
$("msd-select-new-image-file").onchange = __selectNewImageFile; $("msd-select-new-image-file").onchange = __selectNewImageFile;
@ -60,10 +63,40 @@ export function Msd() {
__applyState(); __applyState();
}; };
var __selectImage = function() {
wm.switchEnabled($("msd-remove-image"), false);
__sendParam("image", $("msd-image-selector").value);
};
var __clickRemoveImageButton = function() {
let name = $("msd-image-selector").value;
wm.confirm(`Are you sure you want to remove<br>the image <b>${name}</b>?`).then(function(ok) {
if (ok) {
let http = tools.makeRequest("POST", `/api/msd/remove?image=${name}`, function() {
if (http.readyState === 4) {
if (http.status !== 200) {
wm.error("Can't remove image:<br>", http.responseText);
}
}
});
}
});
};
var __clickCdromSwitch = function() { var __clickCdromSwitch = function() {
__sendParam("cdrom", ($("msd-emulate-cdrom-checkbox").checked ? "1" : "0")); __sendParam("cdrom", ($("msd-emulate-cdrom-checkbox").checked ? "1" : "0"));
}; };
var __sendParam = function(name, value) {
let http = tools.makeRequest("POST", `/api/msd/set_params?${name}=${value}`, function() {
if (http.readyState === 4) {
if (http.status !== 200) {
wm.error("Can't configure MSD:<br>", http.responseText);
}
}
});
};
var __clickUploadNewImageButton = function() { var __clickUploadNewImageButton = function() {
let form_data = new FormData(); let form_data = new FormData();
form_data.append("image", __image_file.name); form_data.append("image", __image_file.name);
@ -77,13 +110,31 @@ export function Msd() {
__upload_http.send(form_data); __upload_http.send(form_data);
}; };
var __uploadStateChange = function() {
if (__upload_http.readyState === 4) {
if (__upload_http.status !== 200) {
wm.error("Can't upload image to the Mass Storage Device:<br>", __upload_http.responseText);
}
$("msd-select-new-image-file").value = "";
__image_file = null;
__upload_http = null;
__applyState();
}
};
var __uploadProgress = function(event) {
if(event.lengthComputable) {
let percent = Math.round((event.loaded * 100) / event.total);
tools.setProgressPercent($("msd-uploading-progress"), `${percent}%`, percent);
}
};
var __clickAbortUploadingButton = function() { var __clickAbortUploadingButton = function() {
__upload_http.onreadystatechange = null; __upload_http.onreadystatechange = null;
__upload_http.upload.onprogress = null; __upload_http.upload.onprogress = null;
__upload_http.abort(); __upload_http.abort();
__upload_http = null; __upload_http = null;
$("msd-uploading-progress").setAttribute("data-label", "Aborted"); tools.setProgressPercent($("msd-uploading-progress"), "Aborted", 0);
$("msd-uploading-progress-value").style.width = "0%";
}; };
var __clickConnectButton = function(connect) { var __clickConnectButton = function(connect) {
@ -104,7 +155,7 @@ export function Msd() {
let el_input = $("msd-select-new-image-file"); let el_input = $("msd-select-new-image-file");
let image_file = (el_input.files.length ? el_input.files[0] : null); let image_file = (el_input.files.length ? el_input.files[0] : null);
if (image_file && image_file.size > __state.storage.size) { if (image_file && image_file.size > __state.storage.size) {
wm.error("New image is too big for your Mass Storage Device.<br>Maximum:", __formatSize(__state.storage.size)); wm.error("New image is too big for your Mass Storage Device.<br>Maximum:", tools.formatSize(__state.storage.size));
el_input.value = ""; el_input.value = "";
image_file = null; image_file = null;
} }
@ -130,144 +181,165 @@ export function Msd() {
var __applyState = function() { var __applyState = function() {
if (__state) { if (__state) {
for (let el of $$$(".msd-single-storage")) { __toggleMsdFeatures();
el.classList.toggle("msd-feature-disabled", __state.features.multi);
}
for (let el of $$$(".msd-multi-storage")) {
el.classList.toggle("msd-feature-disabled", !__state.features.multi);
}
$("msd-dropdown").classList.toggle("feature-disabled", !__state.enabled); $("msd-dropdown").classList.toggle("feature-disabled", !__state.enabled);
$("msd-reset-button").classList.toggle("feature-disabled", !__state.enabled); $("msd-reset-button").classList.toggle("feature-disabled", !__state.enabled);
__showMessageOffline(!__state.online);
__showMessageImageBroken(__state.online && __state.drive.image && !__state.drive.image.complete && !__state.drive.uploading);
if (__state.features.cdrom) {
__showMessageTooBigForCdrom(__state.online && __state.drive.image && __state.drive.cdrom && __state.drive.image.size >= 2359296000);
}
__showMessageOutOfStorage(__state.online && __state.features.multi && __state.drive.image && !__state.drive.image.in_storage);
if (__state.online && __state.drive.connected) { if (__state.online && __state.drive.connected) {
$("msd-another-another-user-uploads").style.display = "none"; __showMessageAnotherUserUploads(false);
$("msd-led").className = "led-green"; __setStatus("led-green", "Connected to Server");
$("msd-status").innerHTML = $("msd-led").title = "Connected to Server";
} else if (__state.online && __state.storage.uploading) { } else if (__state.online && __state.storage.uploading) {
if (!__upload_http) { if (!__upload_http) {
$("msd-another-another-user-uploads").style.display = "block"; __showMessageAnotherUserUploads(true);
} }
$("msd-led").className = "led-yellow-rotating-fast"; __setStatus("led-yellow-rotating-fast", "Uploading new image");
$("msd-status").innerHTML = $("msd-led").title = "Uploading new image";
} else { } else {
$("msd-another-another-user-uploads").style.display = "none"; __showMessageAnotherUserUploads(false);
$("msd-led").className = "led-gray"; __setStatus("led-gray", (__state.online ? "Disconnected" : "Unavailable"));
if (__state.online) {
$("msd-status").innerHTML = $("msd-led").title = "Disconnected";
} else {
$("msd-status").innerHTML = $("msd-led").title = "Unavailable";
}
} }
$("msd-offline").style.display = (__state.online ? "none" : "block"); $("msd-image-name").innerHTML = (__state.online && __state.drive.image ? __state.drive.image.name : "None");
$("msd-drive-image-broken").style.display = ( $("msd-image-size").innerHTML = (__state.online && __state.drive.image ? tools.formatSize(__state.drive.image.size) : "None");
__state.online && __state.drive.image &&
!__state.drive.image.complete && !__state.drive.uploading ? "block" : "none"
);
$("msd-drive-image-name").innerHTML = (__state.online && __state.drive.image ? __state.drive.image.name : "None");
$("msd-drive-image-size").innerHTML = (__state.online && __state.drive.image ? __formatSize(__state.drive.image.size) : "None");
if (__state.online) { if (__state.online) {
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 = __formatSize(size); $("msd-storage-size").innerHTML = tools.formatSize(size);
$("msd-storage-progress").setAttribute("data-label", `Storage: ${__formatSize(used)} of ${__formatSize(size)} used`); tools.setProgressPercent($("msd-storage-progress"), `Storage: ${tools.formatSize(used)} of ${tools.formatSize(size)} used`, used / size * 100);
$("msd-storage-progress-value").style.width = `${used / size * 100}%`;
} else { } else {
$("msd-storage-size").innerHTML = "Unavailable"; $("msd-storage-size").innerHTML = "Unavailable";
$("msd-storage-progress").setAttribute("data-label", "Storage: unavailable"); tools.setProgressPercent($("msd-storage-progress"), "Storage: unavailable", 0);
$("msd-storage-progress-value").style.width = "0%";
} }
wm.switchEnabled($("msd-emulate-cdrom-checkbox"), (__state.online && __state.features.cdrom && !__state.drive.connected && !__state.busy)); wm.switchEnabled($("msd-image-selector"), (__state.online && __state.features.multi && !__state.drive.connected && !__state.busy));
if (__state.features.multi) { if (__state.features.multi) {
wm.switchEnabled($("msd-connect-button"), (__state.online && __state.drive.image && !__state.drive.connected && !__state.busy)); __refreshImageSelector();
} else {
wm.switchEnabled($("msd-connect-button"), (__state.online && !__state.drive.connected && !__state.busy));
} }
wm.switchEnabled($("msd-remove-image"), (__state.online && __state.features.multi && __state.drive.image && !__state.drive.connected && !__state.busy));
wm.switchEnabled($("msd-emulate-cdrom-checkbox"), (__state.online && __state.features.cdrom && !__state.drive.connected && !__state.busy));
$("msd-emulate-cdrom-checkbox").checked = (__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-disconnect-button"), (__state.online && __state.drive.connected && !__state.busy)); wm.switchEnabled($("msd-disconnect-button"), (__state.online && __state.drive.connected && !__state.busy));
wm.switchEnabled($("msd-select-new-image-button"), (__state.online && !__state.drive.connected && !__upload_http && !__state.busy)); wm.switchEnabled($("msd-select-new-image-button"), (__state.online && !__state.drive.connected && !__upload_http && !__state.busy));
wm.switchEnabled($("msd-upload-new-image-button"), (__state.online && !__state.drive.connected && __image_file && !__state.busy)); wm.switchEnabled($("msd-upload-new-image-button"), (__state.online && !__state.drive.connected && __image_file && !__state.busy));
wm.switchEnabled($("msd-abort-uploading-button"), (__state.online && __upload_http)); wm.switchEnabled($("msd-abort-uploading-button"), (__state.online && __upload_http));
wm.switchEnabled($("msd-reset-button"), (__state.enabled && !__state.busy)); wm.switchEnabled($("msd-reset-button"), (__state.enabled && !__state.busy));
$("msd-emulate-cdrom-checkbox").checked = (__state.online && __state.features.cdrom && __state.drive.cdrom); $("msd-submenu-new-image").style.display = (__image_file ? "block" : "none");
$("msd-new-image").style.display = (__image_file ? "block" : "none");
if (!__upload_http) {
$("msd-uploading-progress").setAttribute("data-label", "Waiting for upload ...");
$("msd-uploading-progress-value").style.width = "0%";
}
$("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 ? __formatSize(__image_file.size) : ""); $("msd-new-image-size").innerHTML = (__image_file ? tools.formatSize(__image_file.size) : "");
if (!__upload_http) {
tools.setProgressPercent($("msd-uploading-progress"), "Waiting for upload ...", 0);
}
} else { } else {
$("msd-another-another-user-uploads").style.display = "none"; __showMessageOffline(false);
$("msd-led").className = "led-gray"; __showMessageImageBroken(false);
$("msd-status").innerHTML = ""; __showMessageTooBigForCdrom(false);
$("msd-led").title = ""; __showMessageAnotherUserUploads(false);
$("msd-offline").style.display = "none"; __showMessageOutOfStorage(false);
$("msd-drive-image-broken").style.display = "none";
$("msd-drive-image-name").innerHTML = ""; __setStatus("led-gray", "");
$("msd-drive-image-size").innerHTML = "";
$("msd-image-name").innerHTML = "";
$("msd-image-size").innerHTML = "";
$("msd-storage-size").innerHTML = ""; $("msd-storage-size").innerHTML = "";
tools.setProgressPercent($("msd-storage-progress"), "", 0);
wm.switchEnabled($("msd-image-selector"), false);
$("msd-image-selector").options.length = 1;
wm.switchEnabled($("msd-remove-image"), false);
wm.switchEnabled($("msd-emulate-cdrom-checkbox"), false); wm.switchEnabled($("msd-emulate-cdrom-checkbox"), false);
$("msd-emulate-cdrom-checkbox").checked = false;
wm.switchEnabled($("msd-connect-button"), false); wm.switchEnabled($("msd-connect-button"), false);
wm.switchEnabled($("msd-disconnect-button"), false); wm.switchEnabled($("msd-disconnect-button"), false);
wm.switchEnabled($("msd-select-new-image-button"), false); wm.switchEnabled($("msd-select-new-image-button"), false);
wm.switchEnabled($("msd-upload-new-image-button"), false); wm.switchEnabled($("msd-upload-new-image-button"), false);
wm.switchEnabled($("msd-abort-uploading-button"), false); wm.switchEnabled($("msd-abort-uploading-button"), false);
wm.switchEnabled($("msd-reset-button"), false); wm.switchEnabled($("msd-reset-button"), false);
$("msd-emulate-cdrom-checkbox").checked = false;
$("msd-select-new-image-file").value = ""; $("msd-select-new-image-file").value = "";
$("msd-new-image").style.display = "none"; $("msd-submenu-new-image").style.display = "none";
$("msd-uploading-progress").setAttribute("data-label", "");
$("msd-uploading-progress-value").style.width = "0%";
$("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);
} }
}; };
var __formatSize = function(size) { var __toggleMsdFeatures = function() {
if (size > 0) { for (let el of $$$(".msd-single-storage")) {
let index = Math.floor( Math.log(size) / Math.log(1024) ); el.classList.toggle("msd-feature-disabled", __state.features.multi);
return (size / Math.pow(1024, index)).toFixed(2) * 1 + " " + ["B", "kB", "MB", "GB", "TB"][index]; }
} else { for (let el of $$$(".msd-multi-storage")) {
return 0; el.classList.toggle("msd-feature-disabled", !__state.features.multi);
}
for (let el of $$$(".msd-cdrom-emulation")) {
el.classList.toggle("msd-feature-disabled", !__state.features.cdrom);
} }
}; };
var __uploadStateChange = function() { var __showMessageOffline = function(visible) {
if (__upload_http.readyState === 4) { $("msd-message-offline").style.display = (visible ? "block" : "none");
if (__upload_http.status !== 200) {
wm.error("Can't upload image to the Mass Storage Device:<br>", __upload_http.responseText);
}
$("msd-select-new-image-file").value = "";
__image_file = null;
__upload_http = null;
__applyState();
}
}; };
var __uploadProgress = function(event) { var __showMessageImageBroken = function(visible) {
if(event.lengthComputable) { $("msd-message-image-broken").style.display = (visible ? "block" : "none");
let percent = Math.round((event.loaded * 100) / event.total);
$("msd-uploading-progress").setAttribute("data-label", percent + "%");
$("msd-uploading-progress-value").style.width = percent + "%";
}
}; };
var __sendParam = function(name, value) { var __showMessageTooBigForCdrom = function(visible) {
let http = tools.makeRequest("POST", `/api/msd/set_params?${name}=${value}`, function() { $("msd-message-too-big-for-cdrom").style.display = (visible ? "block" : "none");
if (http.readyState === 4) { };
if (http.status !== 200) {
wm.error("Can't configure MSD:<br>", http.responseText); var __showMessageOutOfStorage = function(visible) {
$("msd-message-out-of-storage").style.display = (visible ? "block" : "none");
};
var __showMessageAnotherUserUploads = function(visible) {
$("msd-message-another-user-uploads").style.display = (visible ? "block" : "none");
};
var __setStatus = function(led_cls, msg) {
$("msd-led").className = led_cls;
$("msd-status").innerHTML = $("msd-led").title = msg;
};
var __refreshImageSelector = function() {
let el = $("msd-image-selector");
let select_index = 0;
let index = 1;
el.options.length = 1;
if (__state.online) {
for (let image of Object.values(__state.storage.images)) {
let title = `${image.name} (${tools.formatSize(image.size)}${image.complete ? "" : ", broken"})`;
let option = new Option(title, image.name, false, false);
el.options[index] = option;
if (__state.drive.image && __state.drive.image.name == image.name && __state.drive.image.in_storage) {
select_index = index;
} }
++index;
} }
}); if (__state.drive.image && !__state.drive.image.in_storage) {
let title = `${__state.drive.image.name} (${tools.formatSize(__state.drive.image.size)}, out of storage)`;
el.options[index] = new Option(title, "", false, false);
select_index = el.options.length - 1;
}
el.selectedIndex = select_index;
}
}; };
__init__(); __init__();

14
web/share/js/tools.js
View File

@ -55,6 +55,15 @@ export var tools = new function() {
return id; return id;
}; };
this.formatSize = function(size) {
if (size > 0) {
let index = Math.floor( Math.log(size) / Math.log(1024) );
return (size / Math.pow(1024, index)).toFixed(2) * 1 + " " + ["B", "KiB", "MiB", "GiB", "TiB"][index];
} else {
return 0;
}
};
/************************************************************************/ /************************************************************************/
this.getCookie = function(name) { this.getCookie = function(name) {
@ -110,6 +119,11 @@ export var tools = new function() {
}; };
}; };
this.setProgressPercent = function(el, title, percent) {
el.setAttribute("data-label", title);
$(`${el.id}-value`).style.width = `${percent}%`;
};
/************************************************************************/ /************************************************************************/
let __debug = (new URL(window.location.href)).searchParams.get("debug"); let __debug = (new URL(window.location.href)).searchParams.get("debug");