assign alt properties
This commit is contained in:
parent
c39fca591c
commit
f4374faccd
12
index.html
12
index.html
@ -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>
|
||||
|
@ -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");
|
||||
|
Loading…
Reference in New Issue
Block a user