luci-app-opkg: show disk space consistent with overview

* Show Disk space graph consistent with the Status->Overview page
* Brought up in https://forum.openwrt.org/t/software-space-is-going-to-full/187112
* Leading whitespaces reformatted by vscode
* Localizable disk space progress bar title
* Kudos to https://forum.openwrt.org/u/psherman for coming up with final design

Signed-off-by: Stan Grishin <stangri@melmac.ca>
(cherry picked from commit c80ca79e05dbb19a4d97c48a90730d24f306f7f2)

diff --git a/applications/luci-app-opkg/htdocs/luci-static/resources/view/opkg.js b/applications/luci-app-opkg/htdocs/luci-static/resources/view/opkg.js
index af1e972efc3a58d1e279c755c364e8cee5a3abc7..d7a13d80d1b5bd0db34cff14cca8a933bd940f20 100644 (file)
--- a/applications/luci-app-opkg/htdocs/luci-static/resources/view/opkg.js
+++ b/applications/luci-app-opkg/htdocs/luci-static/resources/view/opkg.js
@@ -1088,11 +1088,11 @@ function updateLists(data)
 
        return (data ? Promise.resolve(data) : downloadLists()).then(function(data) {
                var pg = document.querySelector('.cbi-progressbar'),
-                   mount = L.toArray(data[0].filter(function(m) { return m.mount == '/' || m.mount == '/overlay' }))
-                       .sort(function(a, b) { return a.mount > b.mount })[0] || { size: 0, free: 0 };
+                       mount = L.toArray(data[0].filter(function(m) { return m.mount == '/' || m.mount == '/overlay' }))
+                               .sort(function(a, b) { return a.mount > b.mount })[0] || { size: 0, free: 0 };
 
-               pg.firstElementChild.style.width = Math.floor(mount.size ? ((100 / mount.size) * mount.free) : 100) + '%';
-               pg.setAttribute('title', '%s (%1024mB)'.format(pg.firstElementChild.style.width, mount.free));
+               pg.firstElementChild.style.width = Math.floor(mount.size ? (100 / mount.size) * (mount.size - mount.free) : 100) + '%';
+               pg.setAttribute('title', _('%s used (%1024mB used of %1024mB, %1024mB free)').format(pg.firstElementChild.style.width, mount.size - mount.free, mount.size, mount.free));
 
                parseList(data[1], packages.available);
                parseList(data[2], packages.installed);
@@ -1131,7 +1131,7 @@ return view.extend({
 
                        E('div', { 'class': 'controls' }, [
                                E('div', {}, [
-                                       E('label', {}, _('Free space') + ':'),
+                                       E('label', {}, _('Disk space') + ':'),
                                        E('div', { 'class': 'cbi-progressbar', 'title': _('unknown') }, E('div', {}, [ '\u00a0' ]))
                                ]),