summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/kvm/index.html83
-rw-r--r--web/share/css/keypad.css17
-rw-r--r--web/share/css/kvm/msd.css4
-rw-r--r--web/share/css/login/login.css3
-rw-r--r--web/share/css/main.css35
-rw-r--r--web/share/css/menu.css9
-rw-r--r--web/share/css/switch.css3
-rw-r--r--web/share/js/kvm/msd.js246
-rw-r--r--web/share/js/tools.js14
9 files changed, 280 insertions, 134 deletions
diff --git a/web/kvm/index.html b/web/kvm/index.html
index 053603d4..af2e9ffc 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -150,7 +150,7 @@
Mass Storage ↴
</a>
<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">
<table>
<tr>
@@ -161,8 +161,7 @@
</div>
<hr>
</div>
-
- <div id="msd-drive-image-broken" class="msd-message">
+ <div id="msd-message-image-broken" class="msd-message">
<div class="menu-item-content-text">
<table>
<tr>
@@ -173,8 +172,29 @@
</div>
<hr>
</div>
-
- <div id="msd-another-another-user-uploads" class="msd-message">
+ <div id="msd-message-too-big-for-cdrom" 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">
<table>
<tr>
@@ -194,42 +214,49 @@
</table>
<hr>
- <table class="msd-info">
+ <table class="msd-info msd-single-storage msd-feature-disabled">
<tr>
<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>
<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 class="msd-single-storage msd-feature-disabled">
+ <tr>
<td>Storage size:</td>
<td id="msd-storage-size" class="msd-info-value"></td>
</tr>
</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>
<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>
@@ -245,7 +272,7 @@
</div>
<hr>
- <div id="msd-new-image" class="msd-message">
+ <div id="msd-submenu-new-image" class="msd-message">
<table class="msd-info">
<tr>
<td>New image:</td>
diff --git a/web/share/css/keypad.css b/web/share/css/keypad.css
index c0370fd4..abd01578 100644
--- a/web/share/css/keypad.css
+++ b/web/share/css/keypad.css
@@ -41,14 +41,17 @@ div.keypad div.keypad-row:last-child {
margin-bottom: 0;
}
-div.keypad div.key, div.modifier, div.empty-key {
+div.keypad div.key,
+div.keypad div.modifier,
+div.keypad div.empty-key {
box-sizing: border-box;
display: inline-block;
margin-right: 5px;
padding: 0;
width: 40px;
}
-div.keypad div.key, div.modifier {
+div.keypad div.key,
+div.keypad div.modifier {
font-size: 0.9em;
text-align: center;
vertical-align: top;
@@ -60,7 +63,8 @@ div.keypad div.key, div.modifier {
cursor: pointer;
height: 40px;
}
-div.keypad div.key:hover, div.modifier:hover {
+div.keypad div.key:hover,
+div.keypad div.modifier:hover {
color: var(--cs-key-hovered-fg);
background-color: var(--cs-key-hovered-bg);
}
@@ -74,7 +78,9 @@ div.keypad div.holded {
color: var(--cs-key-default-fg) !important;
background-color: var(--cs-key-holded-bg) !important;
}
-div.keypad div.key:last-child, div.empty-key:last-child, div.modifier:last-child {
+div.keypad div.key:last-child,
+div.keypad div.empty-key:last-child,
+div.keypad div.modifier:last-child {
margin-right: 0;
}
div.keypad div.margin-0 {
@@ -127,7 +133,8 @@ div.keypad b {
zoom: 1.28 !important;
}
- div.keypad div.key:hover, div.modifier:hover {
+ div.keypad div.key:hover,
+ div.keypad div.modifier:hover {
color: var(--cs-key-default-fg);
background-color: var(--cs-key-default-bg);
}
diff --git a/web/share/css/kvm/msd.css b/web/share/css/kvm/msd.css
index 11f02c39..1d15eba7 100644
--- a/web/share/css/kvm/msd.css
+++ b/web/share/css/kvm/msd.css
@@ -24,7 +24,9 @@ div#msd-menu {
width: 450px;
}
-div#msd-menu .msd-feature-disabled, div.msd-message, input.msd-message {
+div#msd-menu .msd-feature-disabled,
+div#msd-menu div.msd-message,
+div#msd-menu input.msd-message {
display: none;
}
diff --git a/web/share/css/login/login.css b/web/share/css/login/login.css
index 05d9bae5..ac4a795c 100644
--- a/web/share/css/login/login.css
+++ b/web/share/css/login/login.css
@@ -42,6 +42,7 @@ div#login {
padding: 15px;
}
-input[type="text"]#user-input, input[type="password"]#passwd-input {
+input[type="text"]#user-input,
+input[type="password"]#passwd-input {
text-align: center;
}
diff --git a/web/share/css/main.css b/web/share/css/main.css
index 5262bb99..cf92ae5f 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -81,7 +81,8 @@ img.svg-gray {
vertical-align: middle;
}
-button, select {
+button,
+select {
box-shadow: none;
border: var(--border-key-thin);
border-radius: 4px;
@@ -95,13 +96,18 @@ button, select {
outline: none;
cursor: pointer;
}
+select {
+ padding-left: 5px;
+}
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
/* If we have a mouse cursor */
- button:enabled:hover, select:enabled:hover {
+ button:enabled:hover,
+ select:enabled:hover {
color: var(--cs-control-hovered-fg);
background-color: var(--cs-control-hovered-bg);
}
- button:active, select:active {
+ button:active,
+ select:active {
color: var(--cs-control-pressed-fg) !important;
background-color: var(--cs-control-pressed-bg) !important;
box-shadow: none;
@@ -112,12 +118,14 @@ button, select {
}
@media (hover: none) {
/* If we DON'T have a mouse cursor */
- button:active, select:active {
+ button:active,
+ select:active {
color: var(--cs-control-hovered-fg);
background-color: var(--cs-control-hovered-bg);
}
}
-button:disabled, select:disabled {
+button:disabled,
+select:disabled {
color: var(--cs-control-disabled-fg);
cursor: default;
}
@@ -141,6 +149,10 @@ select:active {
background-color: var(--cs-bg-control-intensive) !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] {
overflow-x: auto;
@@ -153,7 +165,10 @@ input[type=text], input[type=password] {
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
- button, select, input[type=text], input[type=password] {
+ button,
+ select,
+ input[type=text],
+ input[type=password] {
height: 45px !important;
}
}
@@ -176,12 +191,16 @@ div.buttons-row {
display: inline-block;
width: 16.66%
}
-.row50:not(:first-child), .row25:not(:first-child), .row16:not(:first-child) {
+.row50:not(:first-child),
+.row25:not(:first-child),
+.row16:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: var(--border-control-thin) !important;
}
-.row50:not(:last-child), .row25:not(:last-child), .row16:not(:last-child) {
+.row50:not(:last-child),
+.row25:not(:last-child),
+.row16:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
diff --git a/web/share/css/menu.css b/web/share/css/menu.css
index 8e7663e7..5a7b9d22 100644
--- a/web/share/css/menu.css
+++ b/web/share/css/menu.css
@@ -76,12 +76,14 @@ ul#menu li a.menu-item {
text-decoration: none;
}
-ul#menu li a#menu-logo:hover:not(.active), a.menu-item:hover:not(.active) {
+ul#menu li a#menu-logo:hover:not(.active),
+ul#menu li a.menu-item:hover:not(.active) {
background-color: var(--cs-menu-hovered-bg);
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad 8 */
- ul#menu li a#menu-item:hover:not(.active), a.menu-item:hover:not(.active) {
+ ul#menu li a#menu-item:hover:not(.active),
+ ul#menu li a.menu-item:hover:not(.active) {
background-color: var(--cs-menu-default-bg) !important;
}
}
@@ -131,7 +133,8 @@ ul#menu li div.menu-item-content-text table.one-line-switch {
}
}
-ul#menu li div.menu-item-content button, select {
+ul#menu li div.menu-item-content-buttons button,
+ul#menu li div.menu-item-content-buttons select {
box-shadow: none;
border: none;
border-radius: 0;
diff --git a/web/share/css/switch.css b/web/share/css/switch.css
index 00defe4a..69b6486d 100644
--- a/web/share/css/switch.css
+++ b/web/share/css/switch.css
@@ -47,7 +47,8 @@ div.switch-box label.switch-label span.switch-inner {
margin-left: -100%;
}
-div.switch-box label.switch-label span.switch-inner:before, span.switch-inner:after {
+div.switch-box label.switch-label span.switch-inner:before,
+div.switch-box label.switch-label span.switch-inner:after {
display: block;
float: left;
width: 50%;
diff --git a/web/share/js/kvm/msd.js b/web/share/js/kvm/msd.js
index d4b249c2..db2603cb 100644
--- a/web/share/js/kvm/msd.js
+++ b/web/share/js/kvm/msd.js
@@ -39,6 +39,9 @@ export function Msd() {
var __init__ = function() {
$("msd-led").title = "Unknown state";
+ $("msd-image-selector").onchange = __selectImage;
+ tools.setOnClick($("msd-remove-image"), __clickRemoveImageButton);
+
tools.setOnClick($("msd-emulate-cdrom-checkbox"), __clickCdromSwitch);
$("msd-select-new-image-file").onchange = __selectNewImageFile;
@@ -60,10 +63,40 @@ export function Msd() {
__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() {
__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() {
let form_data = new FormData();
form_data.append("image", __image_file.name);
@@ -77,13 +110,31 @@ export function Msd() {
__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() {
__upload_http.onreadystatechange = null;
__upload_http.upload.onprogress = null;
__upload_http.abort();
__upload_http = null;
- $("msd-uploading-progress").setAttribute("data-label", "Aborted");
- $("msd-uploading-progress-value").style.width = "0%";
+ tools.setProgressPercent($("msd-uploading-progress"), "Aborted", 0);
};
var __clickConnectButton = function(connect) {
@@ -104,7 +155,7 @@ export function Msd() {
let el_input = $("msd-select-new-image-file");
let image_file = (el_input.files.length ? el_input.files[0] : null);
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 = "";
image_file = null;
}
@@ -130,144 +181,165 @@ export function Msd() {
var __applyState = function() {
if (__state) {
- 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);
- }
-
+ __toggleMsdFeatures();
$("msd-dropdown").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) {
- $("msd-another-another-user-uploads").style.display = "none";
- $("msd-led").className = "led-green";
- $("msd-status").innerHTML = $("msd-led").title = "Connected to Server";
+ __showMessageAnotherUserUploads(false);
+ __setStatus("led-green", "Connected to Server");
} else if (__state.online && __state.storage.uploading) {
if (!__upload_http) {
- $("msd-another-another-user-uploads").style.display = "block";
+ __showMessageAnotherUserUploads(true);
}
- $("msd-led").className = "led-yellow-rotating-fast";
- $("msd-status").innerHTML = $("msd-led").title = "Uploading new image";
+ __setStatus("led-yellow-rotating-fast", "Uploading new image");
} else {
- $("msd-another-another-user-uploads").style.display = "none";
- $("msd-led").className = "led-gray";
- if (__state.online) {
- $("msd-status").innerHTML = $("msd-led").title = "Disconnected";
- } else {
- $("msd-status").innerHTML = $("msd-led").title = "Unavailable";
- }
+ __showMessageAnotherUserUploads(false);
+ __setStatus("led-gray", (__state.online ? "Disconnected" : "Unavailable"));
}
- $("msd-offline").style.display = (__state.online ? "none" : "block");
- $("msd-drive-image-broken").style.display = (
- __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");
-
+ $("msd-image-name").innerHTML = (__state.online && __state.drive.image ? __state.drive.image.name : "None");
+ $("msd-image-size").innerHTML = (__state.online && __state.drive.image ? tools.formatSize(__state.drive.image.size) : "None");
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}%`;
+ $("msd-storage-size").innerHTML = tools.formatSize(size);
+ tools.setProgressPercent($("msd-storage-progress"), `Storage: ${tools.formatSize(used)} of ${tools.formatSize(size)} used`, used / size * 100);
} else {
$("msd-storage-size").innerHTML = "Unavailable";
- $("msd-storage-progress").setAttribute("data-label", "Storage: unavailable");
- $("msd-storage-progress-value").style.width = "0%";
+ tools.setProgressPercent($("msd-storage-progress"), "Storage: unavailable", 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) {
- wm.switchEnabled($("msd-connect-button"), (__state.online && __state.drive.image && !__state.drive.connected && !__state.busy));
- } else {
- wm.switchEnabled($("msd-connect-button"), (__state.online && !__state.drive.connected && !__state.busy));
+ __refreshImageSelector();
}
+ 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-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-abort-uploading-button"), (__state.online && __upload_http));
+
wm.switchEnabled($("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-submenu-new-image").style.display = (__image_file ? "block" : "none");
+ $("msd-new-image-name").innerHTML = (__image_file ? __image_file.name : "");
+ $("msd-new-image-size").innerHTML = (__image_file ? tools.formatSize(__image_file.size) : "");
if (!__upload_http) {
- $("msd-uploading-progress").setAttribute("data-label", "Waiting for upload ...");
- $("msd-uploading-progress-value").style.width = "0%";
+ tools.setProgressPercent($("msd-uploading-progress"), "Waiting for upload ...", 0);
}
- $("msd-new-image-name").innerHTML = (__image_file ? __image_file.name : "");
- $("msd-new-image-size").innerHTML = (__image_file ? __formatSize(__image_file.size) : "");
} else {
- $("msd-another-another-user-uploads").style.display = "none";
- $("msd-led").className = "led-gray";
- $("msd-status").innerHTML = "";
- $("msd-led").title = "";
- $("msd-offline").style.display = "none";
- $("msd-drive-image-broken").style.display = "none";
- $("msd-drive-image-name").innerHTML = "";
- $("msd-drive-image-size").innerHTML = "";
+ __showMessageOffline(false);
+ __showMessageImageBroken(false);
+ __showMessageTooBigForCdrom(false);
+ __showMessageAnotherUserUploads(false);
+ __showMessageOutOfStorage(false);
+
+ __setStatus("led-gray", "");
+
+ $("msd-image-name").innerHTML = "";
+ $("msd-image-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);
+ $("msd-emulate-cdrom-checkbox").checked = false;
+
wm.switchEnabled($("msd-connect-button"), false);
wm.switchEnabled($("msd-disconnect-button"), false);
+
wm.switchEnabled($("msd-select-new-image-button"), false);
wm.switchEnabled($("msd-upload-new-image-button"), false);
wm.switchEnabled($("msd-abort-uploading-button"), false);
+
wm.switchEnabled($("msd-reset-button"), false);
- $("msd-emulate-cdrom-checkbox").checked = false;
$("msd-select-new-image-file").value = "";
- $("msd-new-image").style.display = "none";
- $("msd-uploading-progress").setAttribute("data-label", "");
- $("msd-uploading-progress-value").style.width = "0%";
+ $("msd-submenu-new-image").style.display = "none";
$("msd-new-image-name").innerHTML = "";
$("msd-new-image-size").innerHTML = "";
+ tools.setProgressPercent($("msd-uploading-progress"), "", 0);
}
};
- var __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", "kB", "MB", "GB", "TB"][index];
- } else {
- return 0;
+ var __toggleMsdFeatures = function() {
+ 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);
+ }
+ for (let el of $$$(".msd-cdrom-emulation")) {
+ el.classList.toggle("msd-feature-disabled", !__state.features.cdrom);
}
};
- 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 __showMessageOffline = function(visible) {
+ $("msd-message-offline").style.display = (visible ? "block" : "none");
};
- var __uploadProgress = function(event) {
- if(event.lengthComputable) {
- let percent = Math.round((event.loaded * 100) / event.total);
- $("msd-uploading-progress").setAttribute("data-label", percent + "%");
- $("msd-uploading-progress-value").style.width = percent + "%";
- }
+ var __showMessageImageBroken = function(visible) {
+ $("msd-message-image-broken").style.display = (visible ? "block" : "none");
};
- 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 __showMessageTooBigForCdrom = function(visible) {
+ $("msd-message-too-big-for-cdrom").style.display = (visible ? "block" : "none");
+ };
+
+ 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__();
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index f249de33..8212b62f 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -55,6 +55,15 @@ export var tools = new function() {
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) {
@@ -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");
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-24 14:52:07 +0000