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

use w3.css for primary styling

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu
2023-04-11 21:38:51 +00:00
parent 729f8c0faa
commit de36f2261a
12 changed files with 156 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
scripts/index.js
View File

@@ -34,14 +34,28 @@ async function populateInstances () {
instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1);
instanceContainer.innerHTML = `
<div style="display: contents;" id="instance-container-header">
<p>VM ID</p>
<p>VM Name</p>
<p>VM Type</p>
<p>VM Status</p>
<p>Host Name</p>
<p>Host Status</p>
<div class="w3-row w3-hide-small w3-border-bottom">
<div class="w3-col s1">
<p>VM ID</p>
</div>
<div class="w3-col s2">
<p>VM Name</p>
</div>
<div class="w3-col s1">
<p>VM Type</p>
</div>
<div class="w3-col s2">
<p>VM Status</p>
</div>
<div class="w3-col s2">
<p>Host Name</p>
</div>
<div class="w3-col s2">
<p>Host Status</p>
</div>
<div class="w3-col s2">
<p>Actions</p>
</div>
</div>
`;
for(let i = 0; i < instances.length; i++) {

45
scripts/instance.js
View File

@@ -7,21 +7,36 @@ export class Instance extends HTMLElement {
let shadowRoot = this.attachShadow({mode: "open"});
shadowRoot.innerHTML = `
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/button.css" type="text/css">
<link rel="stylesheet" href="css/instance.css" type="text/css">
<p id="instance-id"></p>
<p id="instance-name"></p>
<p id="instance-type"></p>
<div id="instance-status-div"><img id="instance-status-icon"><p id="instance-status"></p></div>
<p id="node-name"></p>
<div id="node-status-div"><img id="node-status-icon"><p id="node-status"></p></div>
<div class="btn-group">
<img id="power-btn" class="clickable">
<img id="console-btn" class="clickable">
<img id="configure-btn" class="clickable">
<img id="delete-btn" class="clickable">
</div>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<div class="w3-row w3-border-bottom">
<div class="w3-col m1 s6">
<p id="instance-id"></p>
</div>
<div class="w3-col m2 s6">
<p id="instance-name"></p>
</div>
<div class="w3-col m1 w3-hide-small">
<p id="instance-type"></p>
</div>
<div class="w3-col m2 s6 flex-row-nowrap">
<img id="instance-status-icon">
<p id="instance-status"></p>
</div>
<div class="w3-col m2 w3-hide-small">
<p id="node-name"></p>
</div>
<div class="w3-col m2 flex-row-nowrap w3-hide-small">
<img id="node-status-icon">
<p id="node-status"></p>
</div>
<div class="w3-col m2 s6 flex-row-nowrap" style="padding-top: 15px;">
<img id="power-btn" class="clickable">
<img id="console-btn" class="clickable">
<img id="configure-btn" class="clickable">
<img id="delete-btn" class="clickable">
</div>
</div>
`;
this.shadowElement = shadowRoot;