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

ui: partial multi msd support

Browse Source
This commit is contained in:
Devaev Maxim 2019-11-08 01:28:42 +03:00
parent 8abe4b1ac9
commit b261c2695c
7 changed files with 104 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
kvmd/plugins/msd/otg/__init__.py
View File

@ -188,7 +188,7 @@ class Plugin(BaseMsd): # pylint: disable=too-many-instance-attributes
del vd["image"]["path"]
return {
"enabled": False, # FIXME
"enabled": True,
"online": bool(self.__state.vd),
"busy": self.__state.is_busy(),
"storage": storage,

35
web/kvm/index.html
View File

@ -104,7 +104,7 @@
</div>
<hr>
<div class="menu-item-content-text">
<table id="stream-auto-resize-box"><tr>
<table class="one-line-switch"><tr>
<td>Auto-resize stream:</td>
<td align="right">
<div class="switch-box">
@ -203,13 +203,40 @@
<td>Image size:</td>
<td id="msd-drive-image-size" class="msd-info-value"></td>
</tr>
<tr>
<tr class="msd-single-storage msd-feature-disabled">
<td>Storage size:</td>
<td id="msd-storage-size" class="msd-info-value"></td>
</tr>
</table>
<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="menu-item-content-text">
<div id="msd-storage-progress" class="progress">
<span id="msd-storage-progress-value" class="progress-value"></span>
</div>
</div>
<hr>
</div>
<input type="file" id="msd-select-new-image-file" class="msd-message" />
<div class="menu-item-content-buttons buttons-row">
<button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
@ -231,8 +258,8 @@
</table>
<hr>
<div class="menu-item-content-text">
<div id="msd-progress" class="progress">
<span id="msd-progress-value" class="progress-value"></span>
<div id="msd-uploading-progress" class="progress">
<span id="msd-uploading-progress-value" class="progress-value"></span>
</div>
</div>
<hr>

2
web/share/css/kvm/msd.css
View File

@ -24,7 +24,7 @@ div#msd-menu {
width: 450px;
}
div#msd-menu div.msd-message, input.msd-message {
div#msd-menu .msd-feature-disabled, div.msd-message, input.msd-message {
display: none;
}

12
web/share/css/kvm/stream.css
View File

@ -66,18 +66,6 @@ div.stream-slider-box {
display: flex;
}
table#stream-auto-resize-box {
width: 100%;
border-collapse: collapse;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
@supports (-webkit-appearance: none) {
table#stream-auto-resize-box {
margin: 20px 0 20px 0 !important;
}
}
}
div#stream-mouse-buttons {
display: none;
}

12
web/share/css/menu.css
View File

@ -119,6 +119,18 @@ ul#menu li div.menu-item-content-text {
font-size: 14px;
}
ul#menu li div.menu-item-content-text table.one-line-switch {
width: 100%;
border-collapse: collapse;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
@supports (-webkit-appearance: none) {
ul#menu li div.menu-item-content-text table.one-line-switch {
margin: 20px 0 20px 0 !important;
}
}
}
ul#menu li div.menu-item-content button, select {
box-shadow: none;
border: none;

5
web/share/css/switches.css
View File

@ -96,3 +96,8 @@ div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label
div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch {
right: 0px;
}
div.switch-box input[type=checkbox].switch-checkbox:disabled + label.switch-label span.switch {
background: var(--cs-thumb-disabled-bg);
border: var(--border-default-2px);
}

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

@ -23,7 +23,7 @@
"use strict";
import {tools, $} from "../tools.js";
import {tools, $, $$$} from "../tools.js";
import {wm} from "../wm.js";
@ -39,6 +39,8 @@ export function Msd() {
var __init__ = function() {
$("msd-led").title = "Unknown state";
tools.setOnClick($("msd-emulate-cdrom-checkbox"), __clickCdromSwitch);
$("msd-select-new-image-file").onchange = __selectNewImageFile;
tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click());
@ -58,6 +60,10 @@ export function Msd() {
__applyState();
};
var __clickCdromSwitch = function() {
__sendParam("cdrom", ($("msd-emulate-cdrom-checkbox").checked ? "1" : "0"));
};
var __clickUploadNewImageButton = function() {
let form_data = new FormData();
form_data.append("image", __image_file.name);
@ -76,8 +82,8 @@ export function Msd() {
__upload_http.upload.onprogress = null;
__upload_http.abort();
__upload_http = null;
$("msd-progress").setAttribute("data-label", "Aborted");
$("msd-progress-value").style.width = "0%";
$("msd-uploading-progress").setAttribute("data-label", "Aborted");
$("msd-uploading-progress-value").style.width = "0%";
};
var __clickConnectButton = function(connect) {
@ -124,13 +130,15 @@ export function Msd() {
var __applyState = function() {
if (__state) {
if (__state.enabled) {
$("msd-dropdown").classList.remove("feature-disabled");
$("msd-reset-button").classList.remove("feature-disabled");
} else {
$("msd-dropdown").classList.add("feature-disabled");
$("msd-reset-button").classList.add("feature-disabled");
for (let el of $$$(".msd-single-storage")) {
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-reset-button").classList.toggle("feature-disabled", !__state.enabled);
if (__state.online && __state.drive.connected) {
$("msd-another-another-user-uploads").style.display = "none";
@ -160,18 +168,35 @@ export function Msd() {
$("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");
$("msd-storage-size").innerHTML = (__state.online ? __formatSize(__state.storage.size) : "Unavailable");
if (__state.online) {
let size = __state.storage.size;
let used = __state.storage.size - __state.storage.free;
$("msd-storage-size").innerHTML = __formatSize(size);
$("msd-storage-progress").setAttribute("data-label", `Storage: ${__formatSize(used)} of ${__formatSize(size)} used`);
$("msd-storage-progress-value").style.width = `${used / size * 100}%`;
} else {
$("msd-storage-size").innerHTML = "Unavailable";
$("msd-storage-progress").setAttribute("data-label", "Storage: unavailable");
$("msd-storage-progress-value").style.width = "0%";
}
wm.switchDisabled($("msd-emulate-cdrom-checkbox"), (!__state.online || !__state.features.cdrom, __state.drive.connected || __state.busy));
if (__state.features.multi) {
wm.switchDisabled($("msd-connect-button"), (!__state.online || !__state.drive.image || __state.drive.connected || __state.busy));
} else {
wm.switchDisabled($("msd-connect-button"), (!__state.online || __state.drive.connected || __state.busy));
}
wm.switchDisabled($("msd-disconnect-button"), (!__state.online || !__state.drive.connected || __state.busy));
wm.switchDisabled($("msd-select-new-image-button"), (!__state.online || __state.drive.connected || __state.busy || __upload_http));
wm.switchDisabled($("msd-upload-new-image-button"), (!__state.online || __state.drive.connected || __state.busy || !__image_file));
wm.switchDisabled($("msd-abort-uploading-button"), (!__state.online || !__upload_http));
wm.switchDisabled($("msd-reset-button"), (!__state.enabled || __state.busy));
$("msd-emulate-cdrom-checkbox").checked = (__state.online && __state.features.cdrom && __state.drive.cdrom);
$("msd-new-image").style.display = (__image_file ? "block" : "none");
$("msd-progress").setAttribute("data-label", "Waiting for upload ...");
$("msd-progress-value").style.width = "0%";
$("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-size").innerHTML = (__image_file ? __formatSize(__image_file.size) : "");
@ -186,6 +211,7 @@ export function Msd() {
$("msd-drive-image-size").innerHTML = "";
$("msd-storage-size").innerHTML = "";
wm.switchDisabled($("msd-emulate-cdrom-checkbox"), true);
wm.switchDisabled($("msd-connect-button"), true);
wm.switchDisabled($("msd-disconnect-button"), true);
wm.switchDisabled($("msd-select-new-image-button"), true);
@ -193,10 +219,11 @@ export function Msd() {
wm.switchDisabled($("msd-abort-uploading-button"), true);
wm.switchDisabled($("msd-reset-button"), true);
$("msd-emulate-cdrom-checkbox").checked = false;
$("msd-select-new-image-file").value = "";
$("msd-new-image").style.display = "none";
$("msd-progress").setAttribute("data-label", "");
$("msd-progress-value").style.width = "0%";
$("msd-uploading-progress").setAttribute("data-label", "");
$("msd-uploading-progress-value").style.width = "0%";
$("msd-new-image-name").innerHTML = "";
$("msd-new-image-size").innerHTML = "";
}
@ -226,10 +253,20 @@ export function Msd() {
var __uploadProgress = function(event) {
if(event.lengthComputable) {
let percent = Math.round((event.loaded * 100) / event.total);
$("msd-progress").setAttribute("data-label", percent + "%");
$("msd-progress-value").style.width = percent + "%";
$("msd-uploading-progress").setAttribute("data-label", percent + "%");
$("msd-uploading-progress-value").style.width = percent + "%";
}
};
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);
}
}
});
};
__init__();
}