tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

assign alt properties

Browse Source
This commit is contained in:
Arthur Lu 2022-12-17 17:36:45 -08:00
parent 83246d1fa1
commit 7a5c1222ca
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -21,33 +21,33 @@
<p id="instance-name"></p> <p id="instance-name"></p>
</div> </div>
<div> <div>
<img id="node-status"> <img id="node-status" alt="instance node">
<p id="node-name"></p> <p id="node-name"></p>
</div> </div>
</div> </div>
<hr> <hr>
<div> <div>
<div> <div>
<img src="images/resources/cpu.svg"> <img src="images/resources/cpu.svg" alt="instance processor cores">
<p id="resource-cpu"></p> <p id="resource-cpu"></p>
</div> </div>
<div> <div>
<img src="images/resources/ram.svg"> <img src="images/resources/ram.svg" alt="instance memory">
<p id="resource-ram"></p> <p id="resource-ram"></p>
</div> </div>
<div> <div>
<img src="images/resources/swap.svg"> <img src="images/resources/swap.svg" alt="instance swap space">
<p id="resource-swap"></p> <p id="resource-swap"></p>
</div> </div>
<div> <div>
<img src="images/resources/disk.svg"> <img src="images/resources/disk.svg" alt="instance disk space">
<p id="resource-disk"></p> <p id="resource-disk"></p>
</div> </div>
</div> </div>
<hr> <hr>
<div class="btn-group"> <div class="btn-group">
<img id="power-btn"> <img id="power-btn">
<img id="configure-btn"> <img id="configure-btn" alt="change instance configuration">
</div> </div>
</article> </article>
</template> </template>

3
scripts/elements.js
View File

@ -29,6 +29,7 @@ class Instance extends HTMLElement {
set data (data) { set data (data) {
let typeImg = this.shadowElement.querySelector("#instance-type"); let typeImg = this.shadowElement.querySelector("#instance-type");
typeImg.src = `images/instances/${data.type}/${data.status}.svg`; typeImg.src = `images/instances/${data.type}/${data.status}.svg`;
typeImg.alt = `${data.status} instance`;
this.type = data.type; this.type = data.type;
this.status = data.status; this.status = data.status;
@ -60,6 +61,7 @@ class Instance extends HTMLElement {
let powerButton = this.shadowElement.querySelector("#power-btn"); let powerButton = this.shadowElement.querySelector("#power-btn");
powerButton.src = data.status === "running" ? "images/actions/stop.svg" : "images/actions/start.svg"; powerButton.src = data.status === "running" ? "images/actions/stop.svg" : "images/actions/start.svg";
powerButton.alt = data.status === "running" ? "shutdown instance" : "start instance";
powerButton.addEventListener("click", async () => { powerButton.addEventListener("click", async () => {
let targetAction = this.status === "running" ? "shutdown" : "start"; let targetAction = this.status === "running" ? "shutdown" : "start";
let targetStatus = this.status === "running" ? "stopped" : "running"; let targetStatus = this.status === "running" ? "stopped" : "running";
@ -81,6 +83,7 @@ class Instance extends HTMLElement {
let powerButton = this.shadowElement.querySelector("#power-btn"); let powerButton = this.shadowElement.querySelector("#power-btn");
powerButton.src = this.status === "running" ? "images/actions/stop.svg" : "images/actions/start.svg"; powerButton.src = this.status === "running" ? "images/actions/stop.svg" : "images/actions/start.svg";
powerButton.alt = this.status === "running" ? "shutdown instance" : "start instance";
}); });
let configButton = this.shadowElement.querySelector("#configure-btn"); let configButton = this.shadowElement.querySelector("#configure-btn");