assign alt properties

This commit is contained in:
Arthur Lu 2022-12-17 17:36:45 -08:00
parent c39fca591c
commit f4374faccd
2 changed files with 9 additions and 6 deletions

View File

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

View File

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