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

add action icons,

Browse Source 
set action icons depending on instance status
This commit is contained in:
Arthur Lu 2022-12-15 18:28:12 -08:00
parent ea596b8258
commit f40e05fbf5
6 changed files with 46 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
images/actions/config-active.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 229.034 229.034" style="enable-background:new 0 0 229.034 229.034;" xml:space="preserve">
<path style="fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" d="M218.411,167.068l-70.305-70.301l9.398-35.073c0.693-2.588-0.046-5.35-1.94-7.245L103.311,2.197
c-1.895-1.895-4.656-2.635-7.245-1.941L56.812,10.774c-2.588,0.694-4.609,2.715-5.303,5.303c-0.693,2.588,0.046,5.35,1.941,7.245
l39.259,39.262L86.345,86.34l-23.751,6.363l-39.263-39.26c-1.895-1.894-4.655-2.635-7.245-1.94c-2.588,0.693-4.61,2.715-5.303,5.303
L0.266,96.059c-0.693,2.588,0.046,5.349,1.941,7.244l52.249,52.255c1.895,1.895,4.657,2.635,7.245,1.941l35.076-9.4l70.302,70.306
c6.854,6.854,15.968,10.628,25.662,10.629h0.001c9.695,0,18.81-3.776,25.665-10.631C232.56,204.252,232.563,181.225,218.411,167.068
z M207.8,207.795c-4.022,4.024-9.37,6.239-15.058,6.239c-0.001,0-0.001,0-0.002,0c-5.688,0-11.035-2.215-15.056-6.236
l-73.363-73.367c-1.425-1.425-3.34-2.197-5.304-2.197c-0.647,0-1.299,0.083-1.941,0.255l-35.076,9.4L15.875,95.758l6.035-22.523
l33.139,33.137c1.895,1.894,4.654,2.635,7.244,1.941l32.116-8.604c2.588-0.693,4.61-2.715,5.304-5.304l8.606-32.121
c0.693-2.588-0.046-5.35-1.941-7.244L73.242,21.901l22.524-6.036l46.128,46.129l-9.398,35.073c-0.694,2.588,0.046,5.35,1.941,7.245
l73.365,73.361C216.107,185.98,216.106,199.492,207.8,207.795z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

16
images/actions/config-inactive.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 229.034 229.034" style="enable-background:new 0 0 229.034 229.034;" xml:space="preserve">
<path style="fill: rgb(128,128,128); fill-rule: nonzero; opacity: 1;" d="M218.411,167.068l-70.305-70.301l9.398-35.073c0.693-2.588-0.046-5.35-1.94-7.245L103.311,2.197
c-1.895-1.895-4.656-2.635-7.245-1.941L56.812,10.774c-2.588,0.694-4.609,2.715-5.303,5.303c-0.693,2.588,0.046,5.35,1.941,7.245
l39.259,39.262L86.345,86.34l-23.751,6.363l-39.263-39.26c-1.895-1.894-4.655-2.635-7.245-1.94c-2.588,0.693-4.61,2.715-5.303,5.303
L0.266,96.059c-0.693,2.588,0.046,5.349,1.941,7.244l52.249,52.255c1.895,1.895,4.657,2.635,7.245,1.941l35.076-9.4l70.302,70.306
c6.854,6.854,15.968,10.628,25.662,10.629h0.001c9.695,0,18.81-3.776,25.665-10.631C232.56,204.252,232.563,181.225,218.411,167.068
z M207.8,207.795c-4.022,4.024-9.37,6.239-15.058,6.239c-0.001,0-0.001,0-0.002,0c-5.688,0-11.035-2.215-15.056-6.236
l-73.363-73.367c-1.425-1.425-3.34-2.197-5.304-2.197c-0.647,0-1.299,0.083-1.941,0.255l-35.076,9.4L15.875,95.758l6.035-22.523
l33.139,33.137c1.895,1.894,4.654,2.635,7.244,1.941l32.116-8.604c2.588-0.693,4.61-2.715,5.304-5.304l8.606-32.121
c0.693-2.588-0.046-5.35-1.941-7.244L73.242,21.901l22.524-6.036l46.128,46.129l-9.398,35.073c-0.694,2.588,0.046,5.35,1.941,7.245
l73.365,73.361C216.107,185.98,216.106,199.492,207.8,207.795z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
images/actions/start.svg Normal file
View File

@ -0,0 +1 @@
<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path style="fill: rgb(0,255,0); fill-rule: nonzero; opacity: 1;" d="M4.25 3l1.166-.624 8 5.333v1.248l-8 5.334-1.166-.624V3zm1.5 1.401v7.864l5.898-3.932L5.75 4.401z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 280 B

7
images/actions/stop.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve">
<path style="fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;" id="XMLID_494_" d="M315,0H15C6.716,0,0,6.716,0,15v300c0,8.284,6.716,15,15,15h300c8.284,0,15-6.716,15-15V15
C330,6.716,323.284,0,315,0z M300,300H30V30h270V300z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 595 B

4
index.html
View File

@ -46,8 +46,8 @@
</div> </div>
<hr> <hr>
<div class="btn-group"> <div class="btn-group">
<button type="button" id="power-btn"></button> <img id="power-btn">
<button type="button" id="configure-btn">Config</button> <img id="configure-btn">
</div> </div>
</article> </article>
</template> </template>

5
scripts/elements.js
View File

@ -51,7 +51,10 @@ class Instance extends HTMLElement {
resourceDISK.innerText = (data.maxdisk / 1073741824).toFixed(3); resourceDISK.innerText = (data.maxdisk / 1073741824).toFixed(3);
let powerButton = this.shadowElement.querySelector("#power-btn"); let powerButton = this.shadowElement.querySelector("#power-btn");
powerButton.innerText = data.status === "running" ? "Shutdown" : "Start" powerButton.src = data.status === "running" ? "images/actions/stop.svg" : "images/actions/start.svg";
let configButton = this.shadowElement.querySelector("#configure-btn");
configButton.src = data.status === "running" ? "images/actions/config-inactive.svg" : "images/actions/config-active.svg";
} }
} }