implement server side rendering for account page,

remove chartjs module

app/routes/account.go

@@ -2,6 +2,7 @@ package routes
 
 import (
 	"fmt"
+	"math"
 	"net/http"
 	"proxmoxaas-dashboard/app/common"
 
@@ -17,6 +18,68 @@ type Account struct {
 		Min int
 		Max int
 	}
+	Resources map[string]any
+}
+
+type Constraint struct {
+	Max   int64
+	Used  int64
+	Avail int64
+}
+
+type Match struct {
+	Name  string
+	Match string
+	Max   int64
+	Used  int64
+	Avail int64
+}
+
+type NumericResource struct {
+	Type       string
+	Name       string
+	Multiplier int64
+	Base       int64
+	Compact    bool
+	Unit       string
+	Display    bool
+	Global     Constraint
+	Nodes      map[string]Constraint
+	Total      Constraint
+}
+
+type StorageResource struct {
+	Type       string
+	Name       string
+	Multiplier int64
+	Base       int64
+	Compact    bool
+	Unit       string
+	Display    bool
+	Disks      []string
+	Global     Constraint
+	Nodes      map[string]Constraint
+	Total      Constraint
+}
+
+type ListResource struct {
+	Type      string
+	Whitelist bool
+	Display   bool
+	Global    []Match
+	Nodes     map[string][]Match
+	Total     []Match
+}
+
+type ResourceChart struct {
+	Type    string
+	Display bool
+	Name    string
+	Used    int64
+	Max     int64
+	Avail   float64
+	Prefix  string
+	Unit    string
 }
 
 func HandleGETAccount(c *gin.Context) {
@@ -28,6 +91,58 @@ func HandleGETAccount(c *gin.Context) {
 			return
 		}
 
+		for k, v := range account.Resources {
+			switch t := v.(type) {
+			case NumericResource:
+				avail, prefix := FormatNumber(t.Total.Avail*t.Multiplier, t.Base)
+				account.Resources[k] = ResourceChart{
+					Type:    t.Type,
+					Display: t.Display,
+					Name:    t.Name,
+					Used:    t.Total.Used,
+					Max:     t.Total.Max,
+					Avail:   avail,
+					Prefix:  prefix,
+					Unit:    t.Unit,
+				}
+			case StorageResource:
+				avail, prefix := FormatNumber(t.Total.Avail*t.Multiplier, t.Base)
+				account.Resources[k] = ResourceChart{
+					Type:    t.Type,
+					Display: t.Display,
+					Name:    t.Name,
+					Used:    t.Total.Used,
+					Max:     t.Total.Max,
+					Avail:   avail,
+					Prefix:  prefix,
+					Unit:    t.Unit,
+				}
+			case ListResource:
+				l := struct {
+					Type      string
+					Display   bool
+					Resources []ResourceChart
+				}{
+					Type:      t.Type,
+					Display:   t.Display,
+					Resources: []ResourceChart{},
+				}
+
+				for _, r := range t.Total {
+					l.Resources = append(l.Resources, ResourceChart{
+						Type:    t.Type,
+						Display: t.Display,
+						Name:    r.Name,
+						Used:    r.Used,
+						Max:     r.Max,
+						Avail:   float64(r.Avail), // usually an int
+						Unit:    "",
+					})
+				}
+				account.Resources[k] = l
+			}
+		}
+
 		c.HTML(http.StatusOK, "html/account.html", gin.H{
 			"global":  common.Global,
 			"page":    "account",
@@ -39,7 +154,9 @@ func HandleGETAccount(c *gin.Context) {
 }
 
 func GetUserAccount(username string, token string, csrf string) (Account, error) {
-	account := Account{}
+	account := Account{
+		Resources: map[string]any{},
+	}
 
 	ctx := common.RequestContext{
 		Cookies: map[string]string{
@@ -49,6 +166,8 @@ func GetUserAccount(username string, token string, csrf string) (Account, error)
 		},
 		Body: map[string]any{},
 	}
+
+	// get user account basic data
 	res, code, err := common.RequestGetAPI("/user/config/cluster", ctx)
 	if err != nil {
 		return account, err
@@ -56,12 +175,89 @@ func GetUserAccount(username string, token string, csrf string) (Account, error)
 	if code != 200 {
 		return account, fmt.Errorf("request to /user/config/cluster resulted in %+v", res)
 	}
-
 	err = mapstructure.Decode(ctx.Body, &account)
 	if err != nil {
 		return account, err
 	} else {
 		account.Username = username
-		return account, nil
+	}
+
+	ctx.Body = map[string]any{}
+	// get user resources
+	res, code, err = common.RequestGetAPI("/user/dynamic/resources", ctx)
+	if err != nil {
+		return account, err
+	}
+	if code != 200 {
+		return account, fmt.Errorf("request to /user/dynamic/resources resulted in %+v", res)
+	}
+	resources := ctx.Body
+
+	ctx.Body = map[string]any{}
+	// get resource meta data
+	res, code, err = common.RequestGetAPI("/global/config/resources", ctx)
+	if err != nil {
+		return account, err
+	}
+	if code != 200 {
+		return account, fmt.Errorf("request to /global/config/resources resulted in %+v", res)
+	}
+	meta := ctx.Body["resources"].(map[string]any)
+
+	// build each resource by its meta type
+	for k, v := range meta {
+		m := v.(map[string]any)
+		t := m["type"].(string)
+		r := resources[k].(map[string]any)
+		if t == "numeric" {
+			n := NumericResource{}
+			n.Type = t
+			err_m := mapstructure.Decode(m, &n)
+			err_r := mapstructure.Decode(r, &n)
+			if err_m != nil || err_r != nil {
+				return account, fmt.Errorf("%s\n%s", err_m.Error(), err_r.Error())
+			}
+			account.Resources[k] = n
+		} else if t == "storage" {
+			n := StorageResource{}
+			n.Type = t
+			err_m := mapstructure.Decode(m, &n)
+			err_r := mapstructure.Decode(r, &n)
+			if err_m != nil || err_r != nil {
+				return account, fmt.Errorf("%s\n%s", err_m.Error(), err_r.Error())
+			}
+			account.Resources[k] = n
+		} else if t == "list" {
+			n := ListResource{}
+			n.Type = t
+			err_m := mapstructure.Decode(m, &n)
+			err_r := mapstructure.Decode(r, &n)
+			if err_m != nil || err_r != nil {
+				return account, fmt.Errorf("%s\n%s", err_m.Error(), err_r.Error())
+			}
+			account.Resources[k] = n
+		}
+	}
+
+	return account, nil
+}
+
+func FormatNumber(val int64, base int64) (float64, string) {
+	valf := float64(val)
+	basef := float64(base)
+	steps := 0
+	for math.Abs(valf) > basef && steps < 4 {
+		valf /= basef
+		steps++
+	}
+
+	if base == 1000 {
+		prefixes := []string{"", "K", "M", "G", "T"}
+		return valf, prefixes[steps]
+	} else if base == 1024 {
+		prefixes := []string{"", "Ki", "Mi", "Gi", "Ti"}
+		return valf, prefixes[steps]
+	} else {
+		return 0, ""
 	}
 }

web/html/account.html

@@ -3,8 +3,6 @@
 	<head>
 		{{template "head" .}}
 		<script src="scripts/account.js" type="module"></script>
-		<script src="modules/chart.js"></script>
-		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 		<link rel="modulepreload" href="scripts/utils.js">
 		<link rel="modulepreload" href="scripts/dialog.js">
 		<style>
@@ -56,7 +54,23 @@
 			</section>
 			<section class="w3-card w3-padding">
 				<h3>Cluster Resources</h3>
-				<div id="resource-container"></div>
+				<div id="resource-container">
+					{{range .account.Resources}}
+						{{if .Display}}
+							{{if eq .Type "numeric"}}
+								{{template "resource-chart" .}}
+							{{end}}
+							{{if eq .Type "storage"}}
+								{{template "resource-chart" .}}
+							{{end}}
+							{{if eq .Type "list"}}
+								{{range .Resources}}
+									{{template "resource-chart" .}}
+								{{end}}
+							{{end}}
+						{{end}}
+					{{end}}
+				</div>
 			</section>
 		</main>
 	</body>

web/modules/chart.js

@@ -1,20 +0,0 @@
-/**
- * Skipped minification because the original files appears to be already minified.
- * Original file: /npm/chart.js@4.4.3/dist/chart.umd.js
- *
- * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
- */
-/*!
- * Chart.js v4.4.3
- * https://www.chartjs.org
- * (c) 2024 Chart.js Contributors
- * Released under the MIT License
- */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Chart=e()}(this,(function(){"use strict";var t=Object.freeze({__proto__:null,get Colors(){return Go},get Decimation(){return Qo},get Filler(){return ma},get Legend(){return ya},get SubTitle(){return ka},get Title(){return Ma},get Tooltip(){return Ba}});function e(){}const i=(()=>{let t=0;return()=>t++})();function s(t){return null==t}function n(t){if(Array.isArray&&Array.isArray(t))return!0;const e=Object.prototype.toString.call(t);return"[object"===e.slice(0,7)&&"Array]"===e.slice(-6)}function o(t){return null!==t&&"[object Object]"===Object.prototype.toString.call(t)}function a(t){return("number"==typeof t||t instanceof Number)&&isFinite(+t)}function r(t,e){return a(t)?t:e}function l(t,e){return void 0===t?e:t}const h=(t,e)=>"string"==typeof t&&t.endsWith("%")?parseFloat(t)/100:+t/e,c=(t,e)=>"string"==typeof t&&t.endsWith("%")?parseFloat(t)/100*e:+t;function d(t,e,i){if(t&&"function"==typeof t.call)return t.apply(i,e)}function u(t,e,i,s){let a,r,l;if(n(t))if(r=t.length,s)for(a=r-1;a>=0;a--)e.call(i,t[a],a);else for(a=0;a<r;a++)e.call(i,t[a],a);else if(o(t))for(l=Object.keys(t),r=l.length,a=0;a<r;a++)e.call(i,t[l[a]],l[a])}function f(t,e){let i,s,n,o;if(!t||!e||t.length!==e.length)return!1;for(i=0,s=t.length;i<s;++i)if(n=t[i],o=e[i],n.datasetIndex!==o.datasetIndex||n.index!==o.index)return!1;return!0}function g(t){if(n(t))return t.map(g);if(o(t)){const e=Object.create(null),i=Object.keys(t),s=i.length;let n=0;for(;n<s;++n)e[i[n]]=g(t[i[n]]);return e}return t}function p(t){return-1===["__proto__","prototype","constructor"].indexOf(t)}function m(t,e,i,s){if(!p(t))return;const n=e[t],a=i[t];o(n)&&o(a)?x(n,a,s):e[t]=g(a)}function x(t,e,i){const s=n(e)?e:[e],a=s.length;if(!o(t))return t;const r=(i=i||{}).merger||m;let l;for(let e=0;e<a;++e){if(l=s[e],!o(l))continue;const n=Object.keys(l);for(let e=0,s=n.length;e<s;++e)r(n[e],t,l,i)}return t}function b(t,e){return x(t,e,{merger:_})}function _(t,e,i){if(!p(t))return;const s=e[t],n=i[t];o(s)&&o(n)?b(s,n):Object.prototype.hasOwnProperty.call(e,t)||(e[t]=g(n))}const y={"":t=>t,x:t=>t.x,y:t=>t.y};function v(t){const e=t.split("."),i=[];let s="";for(const t of e)s+=t,s.endsWith("\\")?s=s.slice(0,-1)+".":(i.push(s),s="");return i}function M(t,e){const i=y[e]||(y[e]=function(t){const e=v(t);return t=>{for(const i of e){if(""===i)break;t=t&&t[i]}return t}}(e));return i(t)}function w(t){return t.charAt(0).toUpperCase()+t.slice(1)}const k=t=>void 0!==t,S=t=>"function"==typeof t,P=(t,e)=>{if(t.size!==e.size)return!1;for(const i of t)if(!e.has(i))return!1;return!0};function D(t){return"mouseup"===t.type||"click"===t.type||"contextmenu"===t.type}const C=Math.PI,O=2*C,A=O+C,T=Number.POSITIVE_INFINITY,L=C/180,E=C/2,R=C/4,I=2*C/3,z=Math.log10,F=Math.sign;function V(t,e,i){return Math.abs(t-e)<i}function B(t){const e=Math.round(t);t=V(t,e,t/1e3)?e:t;const i=Math.pow(10,Math.floor(z(t))),s=t/i;return(s<=1?1:s<=2?2:s<=5?5:10)*i}function W(t){const e=[],i=Math.sqrt(t);let s;for(s=1;s<i;s++)t%s==0&&(e.push(s),e.push(t/s));return i===(0|i)&&e.push(i),e.sort(((t,e)=>t-e)).pop(),e}function N(t){return!isNaN(parseFloat(t))&&isFinite(t)}function H(t,e){const i=Math.round(t);return i-e<=t&&i+e>=t}function j(t,e,i){let s,n,o;for(s=0,n=t.length;s<n;s++)o=t[s][i],isNaN(o)||(e.min=Math.min(e.min,o),e.max=Math.max(e.max,o))}function $(t){return t*(C/180)}function Y(t){return t*(180/C)}function U(t){if(!a(t))return;let e=1,i=0;for(;Math.round(t*e)/e!==t;)e*=10,i++;return i}function X(t,e){const i=e.x-t.x,s=e.y-t.y,n=Math.sqrt(i*i+s*s);let o=Math.atan2(s,i);return o<-.5*C&&(o+=O),{angle:o,distance:n}}function q(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}function K(t,e){return(t-e+A)%O-C}function G(t){return(t%O+O)%O}function Z(t,e,i,s){const n=G(t),o=G(e),a=G(i),r=G(o-n),l=G(a-n),h=G(n-o),c=G(n-a);return n===o||n===a||s&&o===a||r>l&&h<c}function J(t,e,i){return Math.max(e,Math.min(i,t))}function Q(t){return J(t,-32768,32767)}function tt(t,e,i,s=1e-6){return t>=Math.min(e,i)-s&&t<=Math.max(e,i)+s}function et(t,e,i){i=i||(i=>t[i]<e);let s,n=t.length-1,o=0;for(;n-o>1;)s=o+n>>1,i(s)?o=s:n=s;return{lo:o,hi:n}}const it=(t,e,i,s)=>et(t,i,s?s=>{const n=t[s][e];return n<i||n===i&&t[s+1][e]===i}:s=>t[s][e]<i),st=(t,e,i)=>et(t,i,(s=>t[s][e]>=i));function nt(t,e,i){let s=0,n=t.length;for(;s<n&&t[s]<e;)s++;for(;n>s&&t[n-1]>i;)n--;return s>0||n<t.length?t.slice(s,n):t}const ot=["push","pop","shift","splice","unshift"];function at(t,e){t._chartjs?t._chartjs.listeners.push(e):(Object.defineProperty(t,"_chartjs",{configurable:!0,enumerable:!1,value:{listeners:[e]}}),ot.forEach((e=>{const i="_onData"+w(e),s=t[e];Object.defineProperty(t,e,{configurable:!0,enumerable:!1,value(...e){const n=s.apply(this,e);return t._chartjs.listeners.forEach((t=>{"function"==typeof t[i]&&t[i](...e)})),n}})})))}function rt(t,e){Line truncated
-/*!
- * @kurkle/color v0.3.2
- * https://github.com/kurkle/color#readme
- * (c) 2023 Jukka Kurkela
- * Released under the MIT License
- */function _t(t){return t+.5|0}const yt=(t,e,i)=>Math.max(Math.min(t,i),e);function vt(t){return yt(_t(2.55*t),0,255)}function Mt(t){return yt(_t(255*t),0,255)}function wt(t){return yt(_t(t/2.55)/100,0,1)}function kt(t){return yt(_t(100*t),0,100)}const St={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,9:9,A:10,B:11,C:12,D:13,E:14,F:15,a:10,b:11,c:12,d:13,e:14,f:15},Pt=[..."0123456789ABCDEF"],Dt=t=>Pt[15&t],Ct=t=>Pt[(240&t)>>4]+Pt[15&t],Ot=t=>(240&t)>>4==(15&t);function At(t){var e=(t=>Ot(t.r)&&Ot(t.g)&&Ot(t.b)&&Ot(t.a))(t)?Dt:Ct;return t?"#"+e(t.r)+e(t.g)+e(t.b)+((t,e)=>t<255?e(t):"")(t.a,e):void 0}const Tt=/^(hsla?|hwb|hsv)\(\s*([-+.e\d]+)(?:deg)?[\s,]+([-+.e\d]+)%[\s,]+([-+.e\d]+)%(?:[\s,]+([-+.e\d]+)(%)?)?\s*\)$/;function Lt(t,e,i){const s=e*Math.min(i,1-i),n=(e,n=(e+t/30)%12)=>i-s*Math.max(Math.min(n-3,9-n,1),-1);return[n(0),n(8),n(4)]}function Et(t,e,i){const s=(s,n=(s+t/60)%6)=>i-i*e*Math.max(Math.min(n,4-n,1),0);return[s(5),s(3),s(1)]}function Rt(t,e,i){const s=Lt(t,1,.5);let n;for(e+i>1&&(n=1/(e+i),e*=n,i*=n),n=0;n<3;n++)s[n]*=1-e-i,s[n]+=e;return s}function It(t){const e=t.r/255,i=t.g/255,s=t.b/255,n=Math.max(e,i,s),o=Math.min(e,i,s),a=(n+o)/2;let r,l,h;return n!==o&&(h=n-o,l=a>.5?h/(2-n-o):h/(n+o),r=function(t,e,i,s,n){return t===n?(e-i)/s+(e<i?6:0):e===n?(i-t)/s+2:(t-e)/s+4}(e,i,s,h,n),r=60*r+.5),[0|r,l||0,a]}function zt(t,e,i,s){return(Array.isArray(e)?t(e[0],e[1],e[2]):t(e,i,s)).map(Mt)}function Ft(t,e,i){return zt(Lt,t,e,i)}function Vt(t){return(t%360+360)%360}function Bt(t){const e=Tt.exec(t);let i,s=255;if(!e)return;e[5]!==i&&(s=e[6]?vt(+e[5]):Mt(+e[5]));const n=Vt(+e[2]),o=+e[3]/100,a=+e[4]/100;return i="hwb"===e[1]?function(t,e,i){return zt(Rt,t,e,i)}(n,o,a):"hsv"===e[1]?function(t,e,i){return zt(Et,t,e,i)}(n,o,a):Ft(n,o,a),{r:i[0],g:i[1],b:i[2],a:s}}const Wt={x:"dark",Z:"light",Y:"re",X:"blu",W:"gr",V:"medium",U:"slate",A:"ee",T:"ol",S:"or",B:"ra",C:"lateg",D:"ights",R:"in",Q:"turquois",E:"hi",P:"ro",O:"al",N:"le",M:"de",L:"yello",F:"en",K:"ch",G:"arks",H:"ea",I:"ightg",J:"wh"},Nt={OiceXe:"f0f8ff",antiquewEte:"faebd7",aqua:"ffff",aquamarRe:"7fffd4",azuY:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"0",blanKedOmond:"ffebcd",Xe:"ff",XeviTet:"8a2be2",bPwn:"a52a2a",burlywood:"deb887",caMtXe:"5f9ea0",KartYuse:"7fff00",KocTate:"d2691e",cSO:"ff7f50",cSnflowerXe:"6495ed",cSnsilk:"fff8dc",crimson:"dc143c",cyan:"ffff",xXe:"8b",xcyan:"8b8b",xgTMnPd:"b8860b",xWay:"a9a9a9",xgYF:"6400",xgYy:"a9a9a9",xkhaki:"bdb76b",xmagFta:"8b008b",xTivegYF:"556b2f",xSange:"ff8c00",xScEd:"9932cc",xYd:"8b0000",xsOmon:"e9967a",xsHgYF:"8fbc8f",xUXe:"483d8b",xUWay:"2f4f4f",xUgYy:"2f4f4f",xQe:"ced1",xviTet:"9400d3",dAppRk:"ff1493",dApskyXe:"bfff",dimWay:"696969",dimgYy:"696969",dodgerXe:"1e90ff",fiYbrick:"b22222",flSOwEte:"fffaf0",foYstWAn:"228b22",fuKsia:"ff00ff",gaRsbSo:"dcdcdc",ghostwEte:"f8f8ff",gTd:"ffd700",gTMnPd:"daa520",Way:"808080",gYF:"8000",gYFLw:"adff2f",gYy:"808080",honeyMw:"f0fff0",hotpRk:"ff69b4",RdianYd:"cd5c5c",Rdigo:"4b0082",ivSy:"fffff0",khaki:"f0e68c",lavFMr:"e6e6fa",lavFMrXsh:"fff0f5",lawngYF:"7cfc00",NmoncEffon:"fffacd",ZXe:"add8e6",ZcSO:"f08080",Zcyan:"e0ffff",ZgTMnPdLw:"fafad2",ZWay:"d3d3d3",ZgYF:"90ee90",ZgYy:"d3d3d3",ZpRk:"ffb6c1",ZsOmon:"ffa07a",ZsHgYF:"20b2aa",ZskyXe:"87cefa",ZUWay:"778899",ZUgYy:"778899",ZstAlXe:"b0c4de",ZLw:"ffffe0",lime:"ff00",limegYF:"32cd32",lRF:"faf0e6",magFta:"ff00ff",maPon:"800000",VaquamarRe:"66cdaa",VXe:"cd",VScEd:"ba55d3",VpurpN:"9370db",VsHgYF:"3cb371",VUXe:"7b68ee",VsprRggYF:"fa9a",VQe:"48d1cc",VviTetYd:"c71585",midnightXe:"191970",mRtcYam:"f5fffa",mistyPse:"ffe4e1",moccasR:"ffe4b5",navajowEte:"ffdead",navy:"80",Tdlace:"fdf5e6",Tive:"808000",TivedBb:"6b8e23",Sange:"ffa500",SangeYd:"ff4500",ScEd:"da70d6",pOegTMnPd:"eee8aa",pOegYF:"98fb98",pOeQe:"afeeee",pOeviTetYd:"db7093",papayawEp:"ffefd5",pHKpuff:"ffdab9",peru:"cd853f",pRk:"ffc0cb",plum:"dda0dd",powMrXe:"b0e0e6",purpN:"800080",YbeccapurpN:"663399",Yd:"ff0000",Psybrown:"bc8f8f",PyOXe:"4169e1",saddNbPwn:"8b4513",sOmon:"fa8072",sandybPwn:"f4a460",sHgYF:"2e8b57",sHshell:"fff5ee",siFna:"a0522d",silver:"c0c0c0",skyXe:"87ceeb",UXe:"6a5acd",UWay:"708090",UgYy:"708090",snow:"fffafa",sprRggYF:"ff7f",stAlXe:"4682b4",tan:"d2b48c",teO:"8080",tEstN:"d8bfd8",tomato:"ff6347",Qe:"40e0d0",viTet:"ee82ee",JHt:"f5deb3",wEte:"ffffff",wEtesmoke:"f5f5f5",Lw:"ffff00",LwgYF:"9acd32"};let Ht;function jt(t){Ht||(Ht=function(){const t={},e=Object.keys(Nt),i=Object.keys(Wt);let s,n,o,a,r;for(s=0;s<e.length;s++){for(a=r=e[s],n=0;n<i.length;n++)o=i[n],r=r.replace(o,Wt[o]);o=parseInt(Nt[a],16),t[r]=[o>>16&255,o>>8&255,255&o]}return t}(),Ht.transparent=[0,0,0,0]);const e=Ht[t.toLowerCase()];return e&&{r:e[0],g:e[1],b:e[2],a:4===e.length?e[3]:255}}const $t=/^rgba?\(\s*([-+.\d]+)(%)?[\s,]+([-+.e\d]+)(%)?[\s,]+([-+.e\d]+)(%)?(?:[\s,/]+([-+.e\d]+)(%)?)?\s*\)$/;const Yt=t=>t<=.0031308?12.92*t:1.055*Math.pow(t,1/2.4)-.055,Ut=t=>t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4);function Xt(t,e,i){if(t){let s=It(t);s[e]=Math.max(0,Math.min(s[e]+s[e]*i,0===e?360:1)),Line truncated
-//# sourceMappingURL=chart.umd.js.map

web/scripts/account.js

@@ -1,230 +1,14 @@
 import { dialog } from "./dialog.js";
 import { requestAPI, setAppearance } from "./utils.js";
 
-class ResourceChart extends HTMLElement {
-	constructor () {
-		super();
-		this.attachShadow({ mode: "open" });
-		this.shadowRoot.innerHTML = `
-			<style>
-				* {
-					box-sizing: border-box;
-					font-family: monospace;
-				}
-				figure {
-					margin: 0;
-				}
-				div {
-					max-width: 400px;
-					aspect-ratio: 1 / 1;
-				}
-				figcaption {
-					text-align: center;
-					margin-top: 10px;
-					display: flex;
-					flex-direction: column;
-				}
-			</style>
-			<style id="responsive-style" media="not all">
-				figure {
-					display: flex;
-					align-items: center;
-					flex-direction: row;
-					flex-wrap: nowrap;
-					justify-content: flex-start;
-				}
-				div {
-					max-height: 1lh;
-				}
-				figcaption {
-					margin: 0;
-					margin-left: 10px;
-					display: flex;
-					flex-direction: row;
-					gap: 1ch;
-					font-size: small;
-				}
-			</style>
-			<figure>
-				<div>
-					<canvas></canvas>
-				</div>
-				<figcaption></figcaption>
-			</figure>
-		`;
-		this.responsiveStyle = this.shadowRoot.querySelector("#responsive-style");
-		this.canvas = this.shadowRoot.querySelector("canvas");
-		this.caption = this.shadowRoot.querySelector("figcaption");
-	}
-
-	set data (data) {
-		for (const line of data.title) {
-			this.caption.innerHTML += `<span>${line}</span>`;
-		}
-
-		this.canvas.role = "img";
-		this.canvas.ariaLabel = data.ariaLabel;
-
-		const chartData = {
-			type: "pie",
-			data: data.data,
-			options: {
-				plugins: {
-					title: {
-						display: false
-					},
-					legend: {
-						display: false
-					},
-					tooltip: {
-						enabled: true
-					}
-				},
-				interaction: {
-					mode: "nearest"
-				},
-				onHover: function (e, activeElements) {
-					if (window.innerWidth <= data.breakpoint) {
-						updateTooltipShow(e.chart, false);
-					}
-					else {
-						updateTooltipShow(e.chart, true);
-					}
-				}
-			}
-		};
-
-		this.chart = new window.Chart(this.canvas, chartData);
-
-		if (data.breakpoint) {
-			this.responsiveStyle.media = `screen and (width <= ${data.breakpoint}px)`;
-		}
-		else {
-			this.responsiveStyle.media = "not all";
-		}
-	}
-
-	get data () {
-		return null;
-	}
-}
-
-// this is a really bad way to do this, but chartjs api does not expose many ways to dynamically set hover and tooltip options
-function updateTooltipShow (chart, enabled) {
-	chart.options.plugins.tooltip.enabled = enabled;
-	chart.options.interaction.mode = enabled ? "nearest" : null;
-	chart.update();
-}
-
-customElements.define("resource-chart", ResourceChart);
-
 window.addEventListener("DOMContentLoaded", init);
 
-const prefixes = {
-	1024: [
-		"",
-		"Ki",
-		"Mi",
-		"Gi",
-		"Ti"
-	],
-	1000: [
-		"",
-		"K",
-		"M",
-		"G",
-		"T"
-	]
-};
-
 async function init () {
 	setAppearance();
 
-	let resources = requestAPI("/user/dynamic/resources");
-	let meta = requestAPI("/global/config/resources");
-
-	resources = await resources;
-	meta = (await meta).resources;
-
-	populateResources("#resource-container", meta, resources);
-
 	document.querySelector("#change-password").addEventListener("click", handlePasswordChangeForm);
 }
 
-function populateResources (containerID, meta, resources) {
-	if (resources instanceof Object) {
-		const container = document.querySelector(containerID);
-		Object.keys(meta).forEach((resourceType) => {
-			if (meta[resourceType].display) {
-				if (meta[resourceType].type === "list") {
-					resources[resourceType].total.forEach((listResource) => {
-						createResourceUsageChart(container, listResource.name, listResource.avail, listResource.used, listResource.max, null);
-					});
-				}
-				else {
-					createResourceUsageChart(container, meta[resourceType].name, resources[resourceType].total.avail, resources[resourceType].total.used, resources[resourceType].total.max, meta[resourceType]);
-				}
-			}
-		});
-	}
-}
-
-function createResourceUsageChart (container, resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) {
-	const chart = document.createElement("resource-chart");
-	container.append(chart);
-	const maxStr = parseNumber(resourceMax, resourceUnitData);
-	const usedStr = parseNumber(resourceUsed, resourceUnitData);
-	const usedRatio = resourceUsed / resourceMax;
-	const R = Math.min(usedRatio * 510, 255);
-	const G = Math.min((1 - usedRatio) * 510, 255);
-	const usedColor = `rgb(${R}, ${G}, 0)`;
-	chart.data = {
-		title: [resourceName, `Used ${usedStr} of ${maxStr}`],
-		ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`,
-		data: {
-			labels: [
-				"Used",
-				"Available"
-			],
-			datasets: [{
-				label: resourceName,
-				data: [resourceUsed, resourceAvail],
-				backgroundColor: [
-					usedColor,
-					"rgb(140, 140, 140)"
-				],
-				borderWidth: 0,
-				hoverOffset: 4
-			}]
-		},
-		breakpoint: 680
-	};
-	chart.style = "margin: 10px;";
-}
-
-function parseNumber (value, unitData) {
-	if (!unitData) {
-		return `${value}`;
-	}
-	const compact = unitData.compact;
-	const multiplier = unitData.multiplier;
-	const base = unitData.base;
-	const unit = unitData.unit;
-	value = multiplier * value;
-	if (value <= 0) {
-		return `0 ${unit}`;
-	}
-	else if (compact) {
-		const exponent = Math.floor(Math.log(value) / Math.log(base));
-		value = value / base ** exponent;
-		const unitPrefix = prefixes[base][exponent];
-		return `${value} ${unitPrefix}${unit}`;
-	}
-	else {
-		return `${value} ${unit}`;
-	}
-}
-
 function handlePasswordChangeForm () {
 	const body = `
 		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">

web/templates/resource-chart.tmpl

@@ -0,0 +1,47 @@
+{{define "resource-chart"}}
+<resource-chart>
+	<template shadowrootmode="open">
+		<link rel="stylesheet" href="modules/w3.css">
+		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+		<link rel="stylesheet" href="css/style.css">
+		<style>
+			* {
+				box-sizing: border-box;
+				font-family: monospace;
+			}
+			#container{
+				margin: 0;
+				width: 100%;
+				height: fit-content;
+				padding: 10px 10px 10px 10px;
+				border-radius: 5px;
+			}
+			progress {
+				width: 100%;
+				border: 0;
+				height: 1em;
+				-webkit-appearance: none;
+				-moz-appearance: none;
+				appearance: none;
+			}
+			#caption {
+				text-align: center;
+				margin-top: 10px;
+				display: flex;
+				flex-direction: column;
+			}
+		</style>
+		<div id="container">
+			<progress value="{{.Used}}" max="{{.Max}}"></progress>
+			<p id="caption">
+				<span>{{.Name}}</span>
+				{{if eq .Type "list"}}
+					<span>{{.Avail}} {{.Prefix}}{{.Unit}} Avaliable</span>
+				{{else}}
+					<span>{{printf "%.2f" .Avail}} {{.Prefix}}{{.Unit}} Avaliable</span>
+				{{end}}
+			</p>
+		</div>
+	</template>
+</resource-chart>
+{{end}}-