move instance card icon logic to template

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

View File

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

View File

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

View File

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

View File

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

View File

Before

Width:  |  Height:  |  Size: 310 B

After

Width:  |  Height:  |  Size: 310 B

View File

Before

Width:  |  Height:  |  Size: 307 B

After

Width:  |  Height:  |  Size: 307 B

View File

@@ -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>

View File

@@ -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}}