diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/kvm/index.html | 4 | ||||
| -rw-r--r-- | web/kvm/navbar-msd.pug | 4 | ||||
| -rw-r--r-- | web/share/js/kvm/msd.js | 35 | ||||
| -rw-r--r-- | web/share/js/tools.js | 6 |
4 files changed, 39 insertions, 10 deletions
diff --git a/web/kvm/index.html b/web/kvm/index.html index 18128ba3..4e088654 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -498,9 +498,7 @@ </tr> </table> <hr> - <div class="text"> - <div class="progress" id="msd-storage-progress"><span class="progress-value" id="msd-storage-progress-value"></span></div> - </div> + <div id="msd-storages"></div> <hr> <div class="buttons buttons-row"> <button class="row50" disabled id="msd-select-new-button">Select image to upload</button> diff --git a/web/kvm/navbar-msd.pug b/web/kvm/navbar-msd.pug index 298746e8..ee1ed866 100644 --- a/web/kvm/navbar-msd.pug +++ b/web/kvm/navbar-msd.pug @@ -51,9 +51,7 @@ li(id="msd-dropdown" class="right feature-disabled") td +menu_switch_notable("msd-rw-switch", "Writable", false, false) hr - div(class="text") - div(id="msd-storage-progress" class="progress") - span(id="msd-storage-progress-value" class="progress-value") + div(id="msd-storages") hr div(class="buttons buttons-row") button(disabled id="msd-select-new-button" class="row50") Select image to upload diff --git a/web/share/js/kvm/msd.js b/web/share/js/kvm/msd.js index a7095c54..83d64fce 100644 --- a/web/share/js/kvm/msd.js +++ b/web/share/js/kvm/msd.js @@ -35,6 +35,10 @@ export function Msd() { var __state = null; var __http = null; + var __parts_json = ""; + var __parts = {}; + var __parts_len = 0; + var __init__ = function() { $("msd-led").title = "Unknown state"; @@ -243,9 +247,34 @@ export function Msd() { tools.hidden.setVisible($("msd-message-downloads"), (online && s.storage.downloading)); if (online) { - tools.progress.setSizeOf($("msd-storage-progress"), "Storage: %s", s.storage.parts[""].size, s.storage.parts[""].free); - } else { - tools.progress.setValue($("msd-storage-progress"), "Storage: unavailable", 0); + let names = Object.keys(s.storage.parts).sort(); + let parts_json = JSON.stringify(names); + if (__parts_json !== parts_json) { + $("msd-storages").innerHTML = names.map(name => ` + <div class="text"> + <div id="msd-storage-${tools.makeIdByText(name)}-progress" class="progress"> + <span class="progress-value"></span> + </div> + </div> + `).join("<hr>"); + __parts_json = parts_json; + __parts = s.storage.parts; + __parts_len = names.length; + } + } + for (let name in __parts) { + let part = __parts[name]; + let title = ( + name.length === 0 + ? `${__parts_len === 1 ? "Storage: %s" : "Internal storage: %s"}` // eslint-disable-line + : `Storage [${name}${part.writable ? "]" : ", read-only]"}: %s` // eslint-disable-line + ); + let id = `msd-storage-${tools.makeIdByText(name)}-progress`; + if (online) { + tools.progress.setSizeOf($(id), title, part.size, part.free); + } else { + tools.progress.setValue($(id), title.replace("%s", "unavailable"), 0); + } } tools.el.setEnabled($("msd-image-selector"), (online && !s.drive.connected && !s.busy)); diff --git a/web/share/js/tools.js b/web/share/js/tools.js index 07c8da19..13183659 100644 --- a/web/share/js/tools.js +++ b/web/share/js/tools.js @@ -66,6 +66,10 @@ export var tools = new function() { return id; }; + self.makeIdByText = function(text) { + return btoa(text).replace("=", "_"); + }; + self.formatSize = function(size) { if (size > 0) { let index = Math.floor( Math.log(size) / Math.log(1024) ); @@ -298,7 +302,7 @@ export var tools = new function() { return { "setValue": function(el, title, percent) { el.setAttribute("data-label", title); - $(`${el.id}-value`).style.width = `${percent}%`; + el.querySelector(".progress-value").style.width = `${percent}%`; }, "setPercentOf": function(el, max, value) { let percent = Math.round(value * 100 / max); |