remove template in index,

add article content in js

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-01-26 19:33:39 +00:00
parent 96569d3f88
commit a8f9c67711
2 changed files with 20 additions and 23 deletions

View File

@ -17,24 +17,4 @@
</header>
<main><div id="instance-container" class="center-div"></div></main>
</body>
<template id="instance-template">
<article>
<div>
<div>
<img id="instance-type">
<p id="instance-id"></p>
<p id="instance-name"></p>
</div>
<div>
<img id="node-status" alt="instance node">
<p id="node-name"></p>
</div>
</div>
<hr>
<div class="btn-group">
<img id="power-btn">
<img id="configure-btn" alt="change instance configuration">
</div>
</article>
</template>
</html>

View File

@ -7,9 +7,26 @@ class Instance extends HTMLElement {
super();
let shadowRoot = this.attachShadow({mode: "open"});
let instanceTemplate = document.querySelector("#instance-template");
let instanceTemplateContent = instanceTemplate.content;
shadowRoot.append(instanceTemplateContent.cloneNode(true));
shadowRoot.innerHTML = `
<article>
<div>
<div>
<img id="instance-type">
<p id="instance-id"></p>
<p id="instance-name"></p>
</div>
<div>
<img id="node-status" alt="instance node">
<p id="node-name"></p>
</div>
</div>
<hr>
<div class="btn-group">
<img id="power-btn">
<img id="configure-btn" alt="change instance configuration">
</div>
</article>
`;
let styleLink = document.createElement("link");
styleLink.rel = "stylesheet";