move instance card icon logic to template

This commit is contained in:
Arthur Lu 2025-04-14 19:24:49 +00:00
parent 02baa71622
commit 844cf4dfb9
11 changed files with 65 additions and 150 deletions

@ -47,115 +47,3 @@ var MimeTypes = map[string]MimeType{
Minifier: nil,
},
}
type Icon struct {
ID string
Src string
Alt string
Clickable bool
}
var Icons = map[string]map[string]Icon{
"running": {
"status": {
Src: "images/status/active.svg",
Alt: "Instance is running",
Clickable: false,
},
"power": {
Src: "images/actions/instance/stop.svg",
Alt: "Shutdown Instance",
Clickable: true,
},
"config": {
Src: "images/actions/instance/config-inactive.svg",
Alt: "Change Configuration (Inactive)",
Clickable: false,
},
"console": {
Src: "images/actions/instance/console-active.svg",
Alt: "Open Console",
Clickable: true,
},
"delete": {
Src: "images/actions/delete-inactive.svg",
Alt: "Delete Instance (Inactive)",
Clickable: false,
},
},
"stopped": {
"status": {
Src: "images/status/inactive.svg",
Alt: "Instance is stopped",
Clickable: false,
},
"power": {
Src: "images/actions/instance/start.svg",
Alt: "Start Instance",
Clickable: true,
},
"config": {
Src: "images/actions/instance/config-active.svg",
Alt: "Change Configuration",
Clickable: true,
},
"console": {
Src: "images/actions/instance/console-inactive.svg",
Alt: "Open Console (Inactive)",
Clickable: false,
},
"delete": {
Src: "images/actions/delete-active.svg",
Alt: "Delete Instance",
Clickable: true,
},
},
"loading": {
"status": {
Src: "images/status/loading.svg",
Alt: "Instance is loading",
Clickable: false,
},
"power": {
Src: "images/status/loading.svg",
Alt: "Loading Instance",
Clickable: false,
},
"config": {
Src: "images/actions/instance/config-inactive.svg",
Alt: "Change Configuration (Inactive)",
Clickable: false,
},
"console": {
Src: "images/actions/instance/console-inactive.svg",
Alt: "Open Console (Inactive)",
Clickable: false,
},
"delete": {
Src: "images/actions/delete-inactive.svg",
Alt: "Delete Instance (Inactive)",
Clickable: false,
},
},
"online": {
"status": {
Src: "images/status/active.svg",
Alt: "Node is online",
Clickable: false,
},
},
"offline": {
"status": {
Src: "images/status/inactive.svg",
Alt: "Node is offline",
Clickable: false,
},
},
"unknown": {
"status": {
Src: "images/status/inactive.svg",
Alt: "Node is offline",
Clickable: false,
},
},
}

@ -38,3 +38,10 @@ type Auth struct {
Token string
CSRF string
}
type Icon struct {
ID string
Src string
Alt string
Clickable bool
}

@ -16,22 +16,16 @@ type Node struct {
}
// used in constructing instance cards in index
type Instance struct {
VMID uint
Name string
Type string
Status string
Node string
StatusIcon common.Icon
NodeStatus string
NodeStatusIcon common.Icon
PowerBtnIcon common.Icon
ConsoleBtnIcon common.Icon
ConfigureBtnIcon common.Icon
DeleteBtnIcon common.Icon
type InstanceCard struct {
VMID uint
Name string
Type string
Status string
Node string
NodeStatus string
}
func GetClusterResources(auth common.Auth) (map[uint]Instance, map[string]Node, error) {
func GetClusterResources(auth common.Auth) (map[uint]InstanceCard, map[string]Node, error) {
ctx := common.RequestContext{
Cookies: map[string]string{
"PVEAuthCookie": auth.Token,
@ -47,7 +41,7 @@ func GetClusterResources(auth common.Auth) (map[uint]Instance, map[string]Node,
return nil, nil, fmt.Errorf("request to /cluster/resources/ resulted in %+v", res)
}
instances := map[uint]Instance{}
instances := map[uint]InstanceCard{}
nodes := map[string]Node{}
// if we successfully retrieved the resources, then process it and return index
@ -61,7 +55,7 @@ func GetClusterResources(auth common.Auth) (map[uint]Instance, map[string]Node,
}
nodes[node.Node] = node
} else if m["type"] == "lxc" || m["type"] == "qemu" {
instance := Instance{}
instance := InstanceCard{}
err := mapstructure.Decode(v, &instance)
if err != nil {
return nil, nil, err
@ -70,21 +64,8 @@ func GetClusterResources(auth common.Auth) (map[uint]Instance, map[string]Node,
}
}
for vmid, instance := range instances {
status := instance.Status
icons := common.Icons[status]
instance.StatusIcon = icons["status"]
instance.PowerBtnIcon = icons["power"]
instance.PowerBtnIcon.ID = "power-btn"
instance.ConfigureBtnIcon = icons["config"]
instance.ConfigureBtnIcon.ID = "configure-btn"
instance.ConsoleBtnIcon = icons["console"]
instance.ConsoleBtnIcon.ID = "console-btn"
instance.DeleteBtnIcon = icons["delete"]
instance.DeleteBtnIcon.ID = "delete-btn"
nodestatus := nodes[instance.Node].Status
icons = common.Icons[nodestatus]
instance.NodeStatus = nodestatus
instance.NodeStatusIcon = icons["status"]
instances[vmid] = instance
}
return instances, nodes, nil

@ -0,0 +1 @@
../../common/delete-active.svg

@ -0,0 +1 @@
../../common/delete-inactive.svg

@ -0,0 +1 @@
../../common/delete-active.svg

@ -0,0 +1 @@
../../common/delete-inactive.svg

Before

(image error) Size: 310 B

After

(image error) Size: 310 B

Before

(image error) Size: 307 B

After

(image error) Size: 307 B

@ -15,19 +15,46 @@
<p class="w3-col l2 m3 s6" id="instance-name">{{.Name}}</p>
<p class="w3-col l1 m2 w3-hide-small">{{.Type}}</p>
<div class="w3-col l2 m3 s6 flex row nowrap">
{{template "svg" .StatusIcon}}
{{if eq .Status "running"}}
<svg aria-label="instance is running"><use href="images/status/active.svg#symb"></svg>
{{else if eq .Status "stopped"}}
<svg aria-label="instance is stopped"><use href="images/status/inactive.svg#symb"></svg>
{{else if eq .Status "loading"}}
<svg aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
{{else}}
{{end}}
<p>{{.Status}}</p>
</div>
<p class="w3-col l2 w3-hide-medium w3-hide-small">{{.Node}}</p>
<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap">
{{template "svg" .NodeStatusIcon}}
{{if eq .NodeStatus "online"}}
<svg aria-label="node is online"><use href="images/status/active.svg#symb"></svg>
{{else if eq .NodeStatus "offline"}}
<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
{{else if eq .NodeStatus "unknown"}}
<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
{{else}}
{{end}}
<p>{{.NodeStatus}}</p>
</div>
<div class="w3-col l2 m2 s6 flex row nowrap" style="height: 1lh;">
{{template "svg" .PowerBtnIcon}}
{{template "svg" .ConsoleBtnIcon}}
{{template "svg" .ConfigureBtnIcon}}
{{template "svg" .DeleteBtnIcon}}
{{if eq .Status "running"}}
<svg id="power-btn" class="clickable" aria-label="shutdown instance"><use href="images/actions/instance/stop.svg#symb"></svg>
<svg id="configure-btn" aria-label=""><use href="images/actions/instance/config-inactive.svg#symb"></svg>
<svg id="console-btn" class="clickable" aria-label="open console"><use href="images/actions/instance/console-active.svg#symb"></svg>
<svg id="delete-btn" aria-label=""><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
{{else if eq .Status "stopped"}}
<svg id="power-btn" class="clickable" aria-label="start instance"><use href="images/actions/instance/start.svg#symb"></svg>
<svg id="configure-btn" class="clickable" aria-label="change configuration"><use href="images/actions/instance/config-active.svg#symb"></svg>
<svg id="console-btn" aria-label=""><use href="images/actions/instance/console-inactive.svg#symb"></svg>
<svg id="delete-btn" class="clickable" aria-label="delete instance"><use href="images/actions/instance/delete-active.svg#symb"></svg>
{{else if eq .Status "loading"}}
<svg id="power-btn" aria-label=""><use href="images/actions/instance/loading.svg#symb"></svg>
<svg id="configure-btn" aria-label=""><use href="images/actions/instance/config-inactive.svg#symb"></svg>
<svg id="console-btn" aria-label=""><use href="images/actions/instance/console-inactive.svg#symb"></svg>
<svg id="delete-btn" aria-label=""><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
{{else}}
{{end}}
</div>
</div>
</template>

@ -1,7 +1,15 @@
{{define "svg"}}
{{if .Clickable}}
<svg id={{.ID}} alt="{{.Alt}}" class="clickable"><use href="{{.Src}}#symb"></svg>
{{if .ID}}
{{if .Clickable}}
<svg id={{.ID}} aria-label="{{.Alt}}" class="clickable"><use href="{{.Src}}#symb"></svg>
{{else}}
<svg id={{.ID}} aria-label="{{.Alt}}"><use href="{{.Src}}#symb"></svg>
{{end}}
{{else}}
<svg id={{.ID}} alt="{{.Alt}}"><use href="{{.Src}}#symb"></svg>
{{if .Clickable}}
<svg aria-label="{{.Alt}}" class="clickable"><use href="{{.Src}}#symb"></svg>
{{else}}
<svg aria-label="{{.Alt}}"><use href="{{.Src}}#symb"></svg>
{{end}}
{{end}}
{{end}}