use GODEBUG=embedfollowsymlinks=1 to support symlinked web src files
This commit is contained in:
alu committed
1 parent
98790dbe3b
commit
5c658db34e
94 files changed
+11
-14
No files matched your search
@@ -0,0 +1,101 @@
|
||||
input, select, textarea {
|
||||
background-color: var(--main-input-bg-color);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
.input-grid {
|
||||
display: grid;
|
||||
gap: 0.5em 1em;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-grid * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.input-grid input {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.input-grid img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.input-grid .last-item {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
fieldset > *:last-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
fieldset > .input-grid {
|
||||
float: left;
|
||||
}
|
||||
|
||||
body:not(:-moz-handler-blocked) fieldset {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: min-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
.w3-select, select {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.w3-check {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* sibling of input-grid that is not inside another input grid */
|
||||
:not(.input-grid) .input-grid + * {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
dialog {
|
||||
margin: auto;
|
||||
max-width: calc(min(100% - 16px, 80ch));
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
dialog #prompt {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
dialog button[value="confirm"] {
|
||||
background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);
|
||||
}
|
||||
|
||||
dialog button[value="cancel"] {
|
||||
background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
:root {
|
||||
--nav-transition-speed: 250ms;
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
:root, :root.dark-theme {
|
||||
--nav-bg-color: black;
|
||||
--nav-text-color: white;
|
||||
--nav-header-bg-color: #0f0;
|
||||
--nav-header-text-color: black;
|
||||
--nav-link-active-text-color: white;
|
||||
--nav-link-active-bg-color: var(--main-bg-color, #404040);
|
||||
|
||||
}
|
||||
|
||||
:root.light-theme {
|
||||
--nav-bg-color: black;
|
||||
--nav-text-color: white;
|
||||
--nav-header-bg-color: #0f0;
|
||||
--nav-header-text-color: black;
|
||||
--nav-link-active-text-color: black;
|
||||
--nav-link-active-bg-color: var(--main-bg-color, white);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: light) {
|
||||
:root, :root.light-theme {
|
||||
--nav-bg-color: black;
|
||||
--nav-text-color: white;
|
||||
--nav-header-bg-color: #0f0;
|
||||
--nav-header-text-color: black;
|
||||
--nav-link-active-text-color: black;
|
||||
--nav-link-active-bg-color: var(--main-bg-color, white);
|
||||
}
|
||||
|
||||
:root.dark-theme {
|
||||
--nav-bg-color: black;
|
||||
--nav-text-color: white;
|
||||
--nav-header-bg-color: #0f0;
|
||||
--nav-header-text-color: black;
|
||||
--nav-link-active-text-color: white;
|
||||
--nav-link-active-bg-color: var(--main-bg-color, #404040);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: var(--nav-bg-color);
|
||||
color: var(--nav-text-color);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: var(--small-font-size);
|
||||
margin: 0;
|
||||
background-color: var(--nav-header-bg-color);
|
||||
color: var(--nav-header-text-color);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-size: var(--small-font-size);
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
nav a, header h1, label[for="navtoggle"] {
|
||||
text-align: left;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
label[for="navtoggle"], #navtoggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (width >= 601px){
|
||||
header {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav a:hover, nav a[aria-current="page"] {
|
||||
color: var(--nav-link-active-text-color);
|
||||
background-color: var(--nav-link-active-bg-color);
|
||||
}
|
||||
|
||||
nav:hover a[aria-current="page"] {
|
||||
color: var(--nav-text-color);
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
nav:hover a[aria-current="page"]:hover {
|
||||
color: var(--nav-link-active-text-color);
|
||||
background-color: var(--nav-link-active-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 601px){
|
||||
header {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
right: 0;
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
nav a {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label[for="navtoggle"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#navtoggle ~ nav a {
|
||||
height: 0;
|
||||
line-height: 2em;
|
||||
opacity: 0;
|
||||
transition:
|
||||
height var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1)
|
||||
;
|
||||
}
|
||||
|
||||
#navtoggle:checked ~ nav a {
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
opacity: 1;
|
||||
transition:
|
||||
height var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1)
|
||||
;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
:root {
|
||||
--negative-color: #f00;
|
||||
--positive-color: #0f0;
|
||||
--highlight-color: yellow;
|
||||
--lightbg-text-color: black;
|
||||
--large-font-size: 32px;
|
||||
--medium-font-size: 24px;
|
||||
--small-font-size: 16px;
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
:root, :root.dark-theme {
|
||||
--main-bg-color: #404040;
|
||||
--main-text-color: white;
|
||||
--main-card-bg-color: #202020;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
|
||||
--main-input-bg-color: #404040;
|
||||
}
|
||||
|
||||
:root.light-theme {
|
||||
--main-bg-color: white;
|
||||
--main-text-color: black;
|
||||
--main-card-bg-color: white;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
|
||||
--main-input-bg-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: light) {
|
||||
:root, :root.light-theme {
|
||||
--main-bg-color: white;
|
||||
--main-text-color: black;
|
||||
--main-card-bg-color: white;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
|
||||
--main-input-bg-color: white;
|
||||
}
|
||||
|
||||
:root.dark-theme {
|
||||
--main-bg-color: #404040;
|
||||
--main-text-color: white;
|
||||
--main-card-bg-color: #202020;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
|
||||
--main-input-bg-color: #404040;
|
||||
}
|
||||
}
|
||||
|
||||
*, h1, h2, h3, h4, h5, h6, p {
|
||||
box-sizing: border-box;
|
||||
font-family: monospace;
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--large-font-size);
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--medium-font-size);
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h4, legend {
|
||||
font-size: var(--small-font-size);
|
||||
text-decoration: underline;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--small-font-size);
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
max-width: 100vw;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 100vw;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--main-text-color);
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.w3-card {
|
||||
background-color: var(--main-card-bg-color);
|
||||
box-shadow: var(--main-card-box-shadow);
|
||||
}
|
||||
|
||||
.w3-card + .w3-card {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
img, svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
color: var(--main-text-color)
|
||||
}
|
||||
|
||||
a img {
|
||||
vertical-align: unset;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: var(--main-text-color);
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
column-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
row-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
row-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
@media screen and (width >= 440px) {
|
||||
button .large {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button .small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 440px) {
|
||||
button .large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button .small {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* add hide large class similar to w3-hide-medium and w3-hide-small */
|
||||
@media screen and (width >= 993px) {
|
||||
.hide-large {display: none !important;}
|
||||
}
|
||||
|
||||
/* fixes edge case in w3-hide-medium where width between 992 and 993 */
|
||||
@media screen and (width <= 993px) and (width >= 601px){
|
||||
.hide-large {display: none !important;}
|
||||
.hide-medium {display:none !important}
|
||||
}
|
||||
|
||||
/* fixes edge case in w3-hide-small when width between 600 and 601 */
|
||||
@media screen and (width <= 601px) and (width >= 440px) {
|
||||
.hide-large {display: none !important;}
|
||||
.hide-medium {display:none !important}
|
||||
.hide-small {display:none !important}
|
||||
}
|
||||
|
||||
@media screen and (width <= 440px) {
|
||||
.hide-large {display: none !important;}
|
||||
.hide-medium {display:none !important}
|
||||
.hide-small {display:none !important}
|
||||
.hide-tiny { display: none !important;}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
package web
|
||||
|
||||
import (
|
||||
"embed"
|
||||
)
|
||||
|
||||
//go:embed css/*
|
||||
//go:embed images/*
|
||||
//go:embed images/*/*/*
|
||||
//go:embed modules/*
|
||||
//go:embed scripts/*
|
||||
var Static embed.FS
|
||||
|
||||
//go:embed html/*
|
||||
//go:embed templates/*
|
||||
var Templates embed.FS
|
||||
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="websrc/scripts/account.js" type="module"></script>
|
||||
<link rel="modulepreload" href="websrc/scripts/utils.js">
|
||||
<link rel="modulepreload" href="websrc/scripts/dialog.js">
|
||||
<style>
|
||||
@media screen and (width >= 1264px){
|
||||
.resource-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, calc(100% / 6));
|
||||
grid-gap: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 1264px) and (width >= 680px) {
|
||||
.resource-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 200px);
|
||||
grid-gap: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 680px) {
|
||||
.resource-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
<main>
|
||||
<h2>Account</h2>
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Account Details</h3>
|
||||
<p id="username">Username: {{.user.Username.UserID}}@{{.user.Username.Realm}}</p>
|
||||
<p id="email">Email: {{.user.Mail}}</p>
|
||||
<p>Password: <button class="w3-button" id="change-password" type="button" style="padding: 0em; height: 1.5em; line-height: 1.5em;">Change Password</button></p>
|
||||
</section>
|
||||
{{range $poolname, $pool := .pools}}
|
||||
{{template "pool-resources" $pool}}
|
||||
{{end}}
|
||||
</main>
|
||||
<template id="change-password-dialog">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<link rel="stylesheet" href="websrc/css/form.css">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Change Password
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="new-password">New Password</label>
|
||||
<input class="w3-input w3-border" id="new-password" name="new-password" type="password" autocomplete="new-password" required>
|
||||
<label for="confirm-password">Confirm Password</label>
|
||||
<input class="w3-input w3-border" id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin">CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
{{range $i, $x := .backups}}
|
||||
{{template "backup-card" $x}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="websrc/scripts/backups.js" type="module"></script>
|
||||
<link rel="modulepreload" href="websrc/scripts/utils.js">
|
||||
<link rel="modulepreload" href="websrc/scripts/dialog.js">
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
<main>
|
||||
<h2><a href="index">Instances</a> / {{.config.Name}} / Backups</h2>
|
||||
<section class="w3-card w3-padding">
|
||||
<div class="w3-row" style="border-bottom: 1px solid;">
|
||||
<p class="w3-col l2 m4 s8">Time</p>
|
||||
<p class="w3-col l6 m6 hide-small">Notes</p>
|
||||
<p class="w3-col l2 hide-medium">Size</p>
|
||||
<p class="w3-col l2 m2 s4">Actions</p>
|
||||
</div>
|
||||
<div id="backups-container">
|
||||
{{range $i, $x := .backups}}
|
||||
{{template "backup-card" $x}}
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="w3-container w3-center">
|
||||
{{template "backups-add-backup" .}}
|
||||
</div>
|
||||
</section>
|
||||
<div class="w3-container w3-center">
|
||||
<a class="w3-button w3-margin" id="exit" href="index">EXIT</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
{{template "boot" .config.Boot}}
|
||||
@@ -0,0 +1 @@
|
||||
{{template "devices" .config.Devices}}
|
||||
@@ -0,0 +1 @@
|
||||
{{template "nets" .config.Nets}}
|
||||
@@ -0,0 +1 @@
|
||||
{{template "volumes" Map "Volumes" .config.Volumes "InstanceType" .config.Type}}
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="websrc/scripts/config.js" type="module"></script>
|
||||
<script src="websrc/scripts/draggable.js" type="module"></script>
|
||||
<script src="websrc/modules/Sortable.min.js"></script>
|
||||
<link rel="modulepreload" href="websrc/scripts/utils.js">
|
||||
<link rel="modulepreload" href="websrc/scripts/dialog.js">
|
||||
<style>
|
||||
.input-grid p, .input-grid div {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
<main>
|
||||
<section>
|
||||
<h2><a href="index">Instances</a>/{{.config.Name}}/Config</h2>
|
||||
<form id="config-form">
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Resources</legend>
|
||||
<div class="input-grid" id="resources" style="grid-template-columns: auto auto auto 1fr;">
|
||||
{{if eq .config.Type "VM"}}
|
||||
{{template "proctype-input" .config.ProctypeSelect}}
|
||||
{{end}}
|
||||
{{template "cores-input" .config.Cores}}
|
||||
{{template "memory-input" .config.Memory}}
|
||||
{{if eq .config.Type "CT"}}
|
||||
{{template "swap-input" .config.Swap}}
|
||||
{{end}}
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Volumes</legend>
|
||||
<div class="input-grid" id="volumes" style="grid-template-columns: auto auto 1fr auto;">
|
||||
{{template "volumes" Map "Volumes" .config.Volumes "InstanceType" .config.Type}}
|
||||
</div>
|
||||
<div class="w3-container w3-center">
|
||||
<!--Add Disk Button & Dialog Template-->
|
||||
{{template "volumes-add-disk" .}}
|
||||
<!--Add CD Button & Dialog Template-->
|
||||
{{if eq .config.Type "VM"}}
|
||||
{{template "volumes-add-cd"}}
|
||||
{{end}}
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Network Interfaces</legend>
|
||||
<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;">
|
||||
{{template "nets" .config.Nets}}
|
||||
</div>
|
||||
<div class="w3-container w3-center">
|
||||
<!--Add Net Button & Dialog Template-->
|
||||
{{template "nets-add-net"}}
|
||||
</div>
|
||||
</fieldset>
|
||||
{{if eq .config.Type "VM"}}
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>PCIe Devices</legend>
|
||||
<div class="input-grid" id="devices" style="grid-template-columns: auto auto 1fr auto;">
|
||||
{{template "devices" .config.Devices}}
|
||||
</div>
|
||||
<div class="w3-container w3-center">
|
||||
<!--Add Device Button & Dialog Template-->
|
||||
{{template "devices-add-device"}}
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Boot Order</legend>
|
||||
<div id="boot-order">
|
||||
{{template "boot" .config.Boot}}
|
||||
</div>
|
||||
</fieldset>
|
||||
{{end}}
|
||||
<div class="w3-container w3-center" id="form-actions">
|
||||
<button class="w3-button w3-margin" id="exit" type="submit">EXIT</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
{{range .instances}}
|
||||
{{template "instance-card" .}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="websrc/scripts/index.js" type="module"></script>
|
||||
<script src="websrc/modules/wfa.js" type="module"></script>
|
||||
<link rel="modulepreload" href="websrc/scripts/utils.js">
|
||||
<link rel="modulepreload" href="websrc/scripts/dialog.js">
|
||||
<link rel="modulepreload" href="websrc/scripts/clientsync.js">
|
||||
<style>
|
||||
@media screen and (width >= 440px) {
|
||||
#vm-search {
|
||||
max-width: calc(100% - 10px - 152px);
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 440px) {
|
||||
#vm-search {
|
||||
max-width: calc(100% - 10px - 47px);
|
||||
}
|
||||
}
|
||||
@media screen and (width >= 993px) {
|
||||
#instance-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, auto);
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 0.25em;
|
||||
}
|
||||
#instance-table-header, #instance-container, #instance-table instance-card {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 993px) and (width >= 601px){
|
||||
#instance-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, auto);
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 0.25em;
|
||||
}
|
||||
#instance-table-header, #instance-container, #instance-table instance-card {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 601px) and (width >= 440px){
|
||||
#instance-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 0.25em;
|
||||
}
|
||||
#instance-table-header, #instance-container, #instance-table instance-card {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 440px) {
|
||||
#instance-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 0.25em;
|
||||
}
|
||||
#instance-table-header, #instance-container, #instance-table instance-card {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
<main>
|
||||
<section>
|
||||
<h2>Instances</h2>
|
||||
<div class="w3-card w3-padding">
|
||||
<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
|
||||
<form id="vm-search" role="search" class="flex row nowrap" tabindex="0">
|
||||
<button type="submit" id="submit" class="w3-button" style="padding: 0; width: 1em; height: 1em; line-height: 1em;"><img alt="Search Instances" aria-label="Search Instances" src="websrc/images/common/search.svg#symb"></button>
|
||||
<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;" aria-label="search instances by name">
|
||||
</form>
|
||||
<!--Add Instance Button & Dialog Template-->
|
||||
<button type="button" id="instance-add" class="w3-button" aria-label="create new instance">
|
||||
<span class="large" style="margin: 0;">Create Instance</span>
|
||||
<img class="small" style="height: 1lh; width: 1lh;" alt="Create Instance" aria-label="Create Instance" src="websrc/images/actions/instance/add.svg#symb">
|
||||
</button>
|
||||
<template id="create-instance-dialog">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Create New Instance
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="type">Instance Type</label>
|
||||
<select class="w3-select w3-border" name="type" id="type" selected-index="-1" required>
|
||||
<option value="lxc">Container</option>
|
||||
<option value="qemu">Virtual Machine</option>
|
||||
</select>
|
||||
<label for="pool">Pool</label>
|
||||
<select class="w3-select w3-border" name="pool" id="pool" required></select>
|
||||
<label for="node">Node</label>
|
||||
<select class="w3-select w3-border" name="node" id="node" required></select>
|
||||
<label for="name">Name</label>
|
||||
<input class="w3-input w3-border" name="name" id="name" type="text" required>
|
||||
<label for="vmid">ID</label>
|
||||
<input class="w3-input w3-border" name="vmid" id="vmid" type="number" required>
|
||||
<label for="cores">Cores (Threads)</label>
|
||||
<input class="w3-input w3-border" name="cores" id="cores" type="number" min="1" max="8192" required>
|
||||
<label for="memory">Memory (MiB)</label>
|
||||
<input class="w3-input w3-border" name="memory" id="memory" type="number" min="16" step="1" required>
|
||||
<p class="container-specific none" style="grid-column: 1 / span 2; text-align: center;">Container Options</p>
|
||||
<label class="container-specific none" for="swap">Swap (MiB)</label>
|
||||
<input class="w3-input w3-border container-specific none" name="swap" id="swap" type="number" min="0" step="1" required disabled>
|
||||
<label class="container-specific none" for="template-image">Template Image</label>
|
||||
<select class="w3-select w3-border container-specific none" name="template-image" id="template-image" required disabled></select>
|
||||
<label class="container-specific none" for="rootfs-storage">ROOTFS Storage</label>
|
||||
<select class="w3-select w3-border container-specific none" name="rootfs-storage" id="rootfs-storage" required disabled></select>
|
||||
<label class="container-specific none" for="rootfs-size">ROOTFS Size (GiB)</label>
|
||||
<input class="w3-input w3-border container-specific none" name="rootfs-size" id="rootfs-size" type="number" min="0" max="131072" required disabled>
|
||||
<label class="container-specific none" for="password">Password</label>
|
||||
<input class="w3-input w3-border container-specific none" name="password" id="password" type="password" autocomplete="new-password" required disabled>
|
||||
<label class="container-specific none" for="confirm-password">Confirm Password</label>
|
||||
<input class="w3-input w3-border container-specific none" name="confirm-password" id="confirm-password" type="password" autocomplete="new-password" required disabled>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</div>
|
||||
<div id="instance-table">
|
||||
<div id="instance-table-header">
|
||||
<p>ID</p>
|
||||
<p>Name</p>
|
||||
<p class="hide-tiny">Type</p>
|
||||
<p class="hide-small">Status</p>
|
||||
<p class="hide-medium">Host Name</p>
|
||||
<p class="hide-medium">Host Status</p>
|
||||
<p>Actions</p>
|
||||
</div>
|
||||
<hr style="grid-column: 1 / -1; padding: 0; margin: 0;">
|
||||
<div id="instance-container">
|
||||
{{range .instances}}
|
||||
{{template "instance-card" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="websrc/scripts/login.js" type="module"></script>
|
||||
<link rel="modulepreload" href="websrc/scripts/utils.js">
|
||||
<link rel="modulepreload" href="websrc/scripts/dialog.js">
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
<main class="flex" style="justify-content: center; align-items: center;">
|
||||
<div class="w3-container w3-card w3-margin w3-padding" style="height: fit-content;">
|
||||
<h2 class="w3-center">{{.global.Organization}} Login</h2>
|
||||
<form>
|
||||
<label for="username"><b>Username</b></label>
|
||||
<input class="w3-input w3-border" id="username" name="username" type="text" autocomplete="username">
|
||||
<label for="password"><b>Password</b></label>
|
||||
<input class="w3-input w3-border" id="password" name="password" type="password" autocomplete="current-password">
|
||||
<label for="realm">Realm</label>
|
||||
{{template "select" .realms}}
|
||||
<div class="w3-center">
|
||||
<button class="w3-button w3-margin" id="submit" type="submit">LOGIN</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="websrc/scripts/settings.js" type="module"></script>
|
||||
<link rel="modulepreload" href="websrc/scripts/utils.js">
|
||||
<style>
|
||||
label {
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
column-gap: 0.5em;
|
||||
}
|
||||
label + p {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#save.disabled {
|
||||
display: none;
|
||||
}
|
||||
#save.enabled {
|
||||
display: unset;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
<main>
|
||||
<h2>Settings</h2>
|
||||
<form id="settings">
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Synchronization Settings</h3>
|
||||
<fieldset>
|
||||
<legend>App Sync Method</legend>
|
||||
<label><input class="w3-radio" type="radio" id="sync-always" name="sync-scheme" value="always" required>Always Sync</label>
|
||||
<p>App will always periodically synchronize with Proxmox. High resource usage.</p>
|
||||
<label><input class="w3-radio" type="radio" id="sync-hash" name="sync-scheme" value="hash" required>Check For Sync</label>
|
||||
<p>App will periodically check for updates and synchronize only if needed. Medium resource usage.</p>
|
||||
<label><input class="w3-radio" type="radio" id="sync-interrupt" name="sync-scheme" value="interrupt" required>Sync When Needed</label>
|
||||
<p>App will react to changes and synchronize when changes are made. Low resource usage.</p>
|
||||
<label><input class="w3-radio" type="radio" id="sync-never" name="sync-scheme" value="never" required>Never Sync</label>
|
||||
<p>App will never automatically sync. Reload the page to sync the latest cluster state.</p>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>App Sync Frequency</legend>
|
||||
<div class="input-grid" style="grid-template-columns: auto auto 1fr;">
|
||||
<p>Sync every</p><input aria-label="sync rate in seconds" class="w3-input w3-border" type="number" id="sync-rate" name="sync-rate" min="1" required><p>Second(s)</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</section>
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Search Settings</h3>
|
||||
<fieldset>
|
||||
<legend>Instance Search Criteria</legend>
|
||||
<label><input class="w3-radio" type="radio" id="search-exact" name="search-criteria" value="exact" required>Exact Match</label>
|
||||
<p>Sorts by exact query match in instance name.</p>
|
||||
<label><input class="w3-radio" type="radio" id="search-fuzzy" name="search-criteria" value="fuzzy" required>Fuzzy Match</label>
|
||||
<p>Sorts by best matching to worst matching.</p>
|
||||
</fieldset>
|
||||
</section>
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Appearance</h3>
|
||||
<fieldset>
|
||||
<legend>Default Theme</legend>
|
||||
<label>Theme<select class="w3-select w3-border" id="appearance-theme" name="appearance-theme" style="width: fit-content; padding-right: 24px;">
|
||||
<option value="auto">Auto</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
</section>
|
||||
<div class="w3-container w3-center" id="form-actions">
|
||||
<button class="w3-button w3-margin disabled" id="save" type="submit">SAVE</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
../../common/config.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/delete-active.svg
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="symb" aria-label="config" viewBox="4 2 17 19" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M10 8H5V3m.291 13.357a8 8 0 10.188-8.991" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 332 B |
+1
@@ -0,0 +1 @@
|
||||
../../common/add.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/config.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/delete-active.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/delete-inactive.svg
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="add cd" viewBox="2.3 2.3 19.4 19.4" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g stroke="currentColor" stroke-width="1.25"><path d="M7 12h5m0 0h5m-5 0V7m0 5v5"/><circle cx="12" cy="12" r="9"/></g></svg>
|
||||
|
After Width: | Height: | Size: 331 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="create disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M25 0H7a7 7 0 00-7 7v18a7 7 0 007 7h18a7 7 0 007-7V7a7 7 0 00-7-7zm5 25a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5h18a5 5 0 015 5z"/><path d="M17 6h-2v9H6v2h9v9h2v-9h9v-2h-9V6z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 412 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="attach disk" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><g fill="#0f0"><path d="M17 12h-2.85a6.25 6.25 0 00-6.21 5H2v2h5.93a6.22 6.22 0 006.22 5H17z" class="prefix__prefix__clr-i-solid prefix__prefix__clr-i-solid-path-1"/><path d="M28.23 17A6.25 6.25 0 0022 12h-3v12h3a6.22 6.22 0 006.22-5H34v-2z" class="prefix__prefix__clr-i-solid prefix__prefix__clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 467 B |
@@ -0,0 +1 @@
|
||||
../../common/delete-active.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/delete-inactive.svg
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="detach disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="red" d="M76.987 235.517H0v40.973h76.987c9.04 33.686 39.694 58.522 76.238 58.522h57.062V176.988h-57.062c-36.543 0-67.206 24.836-76.238 58.529zm435.013 0h-76.995c-9.032-33.693-39.686-58.53-76.23-58.53h-57.062v158.024h57.062c36.537 0 67.19-24.836 76.23-58.522H512v-40.972z"/></svg>
|
||||
|
After Width: | Height: | Size: 398 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="" xmlns="http://www.w3.org/2000/svg"/>
|
||||
|
After Width: | Height: | Size: 76 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="move disk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 318 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 215 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="resize disk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 317 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="gray"/></svg>
|
||||
|
After Width: | Height: | Size: 212 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="drag" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M5 10h14m-5 9l-2 2-2-2m4-14l-2-2-2 2m-5 9h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 345 B |
+1
@@ -0,0 +1 @@
|
||||
../../common/add.svg
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="backup" viewBox="1 1 22 22" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M18.172 1a2 2 0 011.414.586l2.828 2.828A2 2 0 0123 5.828V20a3 3 0 01-3 3H4a3 3 0 01-3-3V4a3 3 0 013-3h14.172zM4 3a1 1 0 00-1 1v16a1 1 0 001 1h1v-6a3 3 0 013-3h8a3 3 0 013 3v6h1a1 1 0 001-1V6.828a2 2 0 00-.586-1.414l-1.828-1.828A2 2 0 0017.172 3H17v2a3 3 0 01-3 3h-4a3 3 0 01-3-3V3H4zm13 18v-6a1 1 0 00-1-1H8a1 1 0 00-1 1v6h10zM9 3h6v2a1 1 0 01-1 1h-4a1 1 0 01-1-1V3z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 631 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="backup" viewBox="1 1 22 22" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.172 1a2 2 0 011.414.586l2.828 2.828A2 2 0 0123 5.828V20a3 3 0 01-3 3H4a3 3 0 01-3-3V4a3 3 0 013-3h14.172zM4 3a1 1 0 00-1 1v16a1 1 0 001 1h1v-6a3 3 0 013-3h8a3 3 0 013 3v6h1a1 1 0 001-1V6.828a2 2 0 00-.586-1.414l-1.828-1.828A2 2 0 0017.172 3H17v2a3 3 0 01-3 3h-4a3 3 0 01-3-3V3H4zm13 18v-6a1 1 0 00-1-1H8a1 1 0 00-1 1v6h10zM9 3h6v2a1 1 0 01-1 1h-4a1 1 0 01-1-1V3z" fill="#808080"/></svg>
|
||||
|
After Width: | Height: | Size: 540 B |
@@ -0,0 +1 @@
|
||||
../../common/config.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/config-inactive.svg
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="instance console" viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M2 7a5 5 0 015-5h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7zm5-3a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm0 13a1 1 0 011-1h8a1 1 0 110 2H8a1 1 0 01-1-1zm1.707-9.707a1 1 0 10-1.414 1.414L9.586 11l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414l-3-3z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 565 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="" viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 7a5 5 0 015-5h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7zm5-3a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm0 13a1 1 0 011-1h8a1 1 0 110 2H8a1 1 0 01-1-1zm1.707-9.707a1 1 0 10-1.414 1.414L9.586 11l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414l-3-3z" fill="#808080"/></svg>
|
||||
|
After Width: | Height: | Size: 458 B |
@@ -0,0 +1 @@
|
||||
../../common/delete-active.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/delete-inactive.svg
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="start instance" xmlns="http://www.w3.org/2000/svg" viewBox="4.2 2.4 9 12"><path 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" fill="#0f0"/></svg>
|
||||
|
After Width: | Height: | Size: 237 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="stop instance" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 350 350"><path stroke-width="20" d="M315 0H15C6.716 0 0 6.716 0 15v300c0 8.284 6.716 15 15 15h300c8.284 0 15-6.716 15-15V15c0-8.284-6.716-15-15-15zm-15 300H30V30h270v270z" stroke="#f00" fill="#f00"/></svg>
|
||||
|
After Width: | Height: | Size: 310 B |
+1
@@ -0,0 +1 @@
|
||||
../../common/add.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/config.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/delete-active.svg
|
||||
@@ -0,0 +1 @@
|
||||
../../common/delete-inactive.svg
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="add device" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 87 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="cpu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>
|
||||
|
After Width: | Height: | Size: 104 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="#808080"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="config" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="delete" viewBox="3 2 18 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#f00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 310 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="" viewBox="3 2 18 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#ffbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 307 B |
@@ -0,0 +1 @@
|
||||
<svg role="img" aria-label="search" id="symb" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M15.796 15.811L21 21m-3-10.5a7.5 7.5 0 11-15 0 7.5 7.5 0 0115 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 367 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><g fill="#0f0" font-family="monospace" font-weight="bold"><text y="14" font-size="16">H</text><text x="9" y="8" font-size="10">0</text></g></svg>
|
||||
|
After Width: | Height: | Size: 215 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="cpu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M14.25 8h-4.5A1.752 1.752 0 008 9.75v4.5A1.752 1.752 0 009.75 16h4.5A1.752 1.752 0 0016 14.25v-4.5A1.752 1.752 0 0014.25 8zM14 14h-4v-4h4zm8-5a1 1 0 000-2h-2v-.25A2.752 2.752 0 0017.25 4H17V2a1 1 0 00-2 0v2h-2V2a1 1 0 00-2 0v2H9V2a1 1 0 00-2 0v2h-.25A2.752 2.752 0 004 6.75V7H2a1 1 0 000 2h2v2H2a1 1 0 000 2h2v2H2a1 1 0 000 2h2v.25A2.752 2.752 0 006.75 20H7v2a1 1 0 002 0v-2h2v2a1 1 0 002 0v-2h2v2a1 1 0 002 0v-2h.25A2.752 2.752 0 0020 17.25V17h2a1 1 0 000-2h-2v-2h2a1 1 0 000-2h-2V9zm-4 8.25a.751.751 0 01-.75.75H6.75a.751.751 0 01-.75-.75V6.75A.751.751 0 016.75 6h10.5a.751.751 0 01.75.75z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 813 B |
@@ -0,0 +1 @@
|
||||
<svg role="img" aria-label="pci device" id="symb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g stroke="currentColor" fill="currentColor"><path d="M480.003 128H48c0-22.056-17.944-40-40-40a8 8 0 000 16c13.234 0 24 10.766 24 24v288a8 8 0 0016 0v-8h16.01C77.238 408 88 397.238 88 384.01V384h392.003C497.646 384 512 369.646 512 352.003V159.997C512 142.354 497.646 128 480.003 128zM496 352.003c0 8.821-7.176 15.997-15.997 15.997H80a8 8 0 00-8 8v8.01c0 4.406-3.584 7.99-7.99 7.99H48V144h432.003c8.821 0 15.997 7.176 15.997 15.997v192.006z"/><path d="M240 192c-22.922 0-43.057 12.12-54.363 30.28a8.026 8.026 0 00-1.737 2.954A63.601 63.601 0 00176 256a63.583 63.583 0 008.264 31.399c.187.398.407.778.656 1.14C196.078 307.354 216.586 320 240 320c35.29 0 64-28.71 64-64a63.583 63.583 0 00-8.264-31.399 8.057 8.057 0 00-.656-1.14C283.922 204.646 263.414 192 240 192zm-48 64c0-4.395.605-8.648 1.717-12.695 3.596 3.178 8.453 6.73 15.035 10.53 6.376 3.681 11.742 6.078 16.208 7.612-2.622 2.061-5.987 4.385-10.208 6.821-8.449 4.878-14.816 7.039-18.36 7.752A47.681 47.681 0 01192 256zm96 0c0 4.103-.52 8.087-1.493 11.891-3.617-3.227-8.542-6.848-15.259-10.726-5.96-3.441-11.036-5.758-15.321-7.298 2.483-1.885 5.564-3.966 9.321-6.135 8.447-4.876 14.816-7.039 18.36-7.752A47.681 47.681 0 01288 256zm-14.052-33.901c-4.562 1.524-10.087 3.96-16.699 7.777-6.252 3.61-10.952 6.997-14.49 10.051-.449-3.245-.759-7.21-.759-11.927 0-9.763 1.314-16.361 2.469-19.785 11.465 1.064 21.775 6.169 29.479 13.884zm-46.329-12.472C226.655 214.344 226 220.354 226 228c0 7.056.557 12.721 1.401 17.26-3.022-1.232-6.59-2.938-10.65-5.282-8.302-4.793-13.33-9.159-15.769-11.883 6.394-8.915 15.757-15.56 26.637-18.468zm-21.57 80.271c4.564-1.524 10.086-3.954 16.702-7.774 6.252-3.61 10.952-6.997 14.49-10.051.449 3.245.759 7.21.759 11.927 0 9.763-1.314 16.361-2.469 19.785-11.466-1.064-21.778-6.17-29.482-13.887zm46.332 12.475C253.345 297.656 254 291.646 254 284c0-7.633-.653-13.635-1.614-18.347 3.066 1.237 6.708 2.97 10.863 5.368 8.764 5.06 13.892 9.652 16.163 12.33-6.4 9.195-15.926 16.054-27.031 19.022z"/><path d="M440 168a8 8 0 000 16c8.822 0 16 7.178 16 16v112c0 8.822-7.178 16-16 16H240c-39.701 0-72-32.299-72-72s32.299-72 72-72h168a8 8 0 000-16H240c-48.523 0-88 39.477-88 88s39.477 88 88 88h200c17.645 0 32-14.355 32-32V200c0-17.645-14.355-32-32-32zm-328 64H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88zm24-88H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88zm24 80H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88z"/><path d="M432 200h-24a8 8 0 000 16h24a8 8 0 000-16zm0 96h-24a8 8 0 000 16h24a8 8 0 000-16zm0-72h-24a8 8 0 000 16h24a8 8 0 000-16zm0 24h-24a8 8 0 000 16h24a8 8 0 000-16zm0 24h-24a8 8 0 000 16h24a8 8 0 000-16z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="cd" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M12 0a12 12 0 1012 12A12 12 0 0012 0zm0 22a10 10 0 1110-10 10 10 0 01-10 10z"/><path d="M12 8a4 4 0 104 4 4 4 0 00-4-4zm0 6a2 2 0 111.73-3A2 2 0 0112 14z"/><path d="M12 18a6 6 0 01-6-6 1 1 0 00-2 0 8 8 0 008 8 1 1 0 000-2zm0-14a1 1 0 000 2 6 6 0 016 6 1 1 0 001 1c2.57 0 .27-9-7-9z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 509 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M22 12H2m3.45-6.89L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h0m4 0h0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 421 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="network" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M9 7V5H7v2H5v4h6V7H9zm-9 9h16V0H0v16zm2-2V2h12v12H2z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 298 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="memory" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M23 9a1 1 0 001-1V5a1 1 0 00-1-1H1a1 1 0 00-1 1v3a1 1 0 001 1 1 1 0 010 2 1 1 0 00-1 1v7a1 1 0 001 1h13a1 1 0 001-1v-3h2v3a1 1 0 001 1h5a1 1 0 001-1v-7a1 1 0 00-1-1 1 1 0 010-2zM2 16h3v2H2zm7 0v2H7v-2zm4 2h-2v-2h2zm6 0v-2h3v2zm3-10.83a3 3 0 000 5.66V14H2v-1.17a3 3 0 000-5.66V6h20z"/><path d="M9 11V9a1 1 0 00-2 0v2a1 1 0 002 0zm4 0V9a1 1 0 00-2 0v2a1 1 0 002 0zm4 0V9a1 1 0 00-2 0v2a1 1 0 002 0z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 628 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="swap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M19.841 3.24A10.988 10.988 0 008.54.573l1.266 3.8a7.033 7.033 0 018.809 9.158L17 11.891v7.092h7l-2.407-2.439A11.049 11.049 0 0019.841 3.24zM1 10.942a11.05 11.05 0 0011.013 11.044 11.114 11.114 0 003.521-.575l-1.266-3.8a7.035 7.035 0 01-8.788-9.22L7 9.891V6.034c.021-.02.038-.044.06-.065L7 5.909V2.982H0l2.482 2.449A10.951 10.951 0 001 10.942z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 565 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="active" fill="#0f0" viewBox="0 0 16 16" stroke="#none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>
|
||||
|
After Width: | Height: | Size: 163 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="inactive" fill="#f00" viewBox="0 0 16 16" stroke="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>
|
||||
|
After Width: | Height: | Size: 164 B |
@@ -0,0 +1 @@
|
||||
<svg id="symb" role="img" aria-label="loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204.481 204.481"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M162.116 38.31a7.43 7.43 0 00.454-.67c.033-.055.068-.109.1-.164a7.72 7.72 0 00.419-.857c.014-.034.024-.069.038-.104a7.492 7.492 0 00.314-1.008c.068-.288.124-.581.157-.881l.008-.052a7.48 7.48 0 00.043-.796V7.5a7.5 7.5 0 00-7.5-7.5H48.332a7.5 7.5 0 00-7.5 7.5v26.279c0 .269.016.534.043.796l.008.052c.034.3.089.593.157.881.016.069.035.138.053.207.073.273.159.541.261.801.013.034.024.069.038.104.121.296.262.581.419.857.032.056.067.109.1.164.14.232.291.455.454.67.027.035.047.074.074.109l50.255 63.821-50.255 63.821c-.028.035-.047.074-.074.109a7.43 7.43 0 00-.454.67c-.033.055-.068.109-.1.164a7.72 7.72 0 00-.419.857c-.014.034-.024.069-.038.104a7.492 7.492 0 00-.314 1.008 7.308 7.308 0 00-.157.881l-.008.052a7.48 7.48 0 00-.043.796v26.279a7.5 7.5 0 007.5 7.5h107.817a7.5 7.5 0 007.5-7.5v-26.279c0-.269-.016-.534-.043-.796l-.008-.052a7.51 7.51 0 00-.157-.881c-.016-.069-.035-.138-.053-.207a7.492 7.492 0 00-.261-.801c-.013-.034-.024-.069-.038-.104a7.383 7.383 0 00-.419-.857c-.032-.056-.067-.109-.1-.164a7.646 7.646 0 00-.454-.67c-.027-.035-.047-.074-.074-.109l-50.255-63.821 50.255-63.821c.028-.035.047-.074.074-.11zM148.649 15v11.279H55.832V15h92.817zM55.832 189.481v-11.279h92.817v11.279H55.832zm84.866-26.279H63.784l38.457-48.838 38.457 48.838zm-38.457-73.084L63.784 41.279h76.914l-38.457 48.839z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
/*! Sortable 1.15.7 - MIT | git://github.com/SortableJS/Sortable.git */
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Sortable=e()}(this,function(){"use strict";function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=Array(e);n<e;n++)o[n]=t[n];return o}function i(t,e,n){return(e=function(t){t=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0===n)return("string"===e?String:Number)(t);e=n.call(t,e||"default");if("object"!=typeof e)return e;throw new TypeError("@@toPrimitive must return a primitive value.")}(t,"string");return"symbol"==typeof t?t:t+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function a(){return(a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n,o=arguments[e];for(n in o)!{}.hasOwnProperty.call(o,n)||(t[n]=o[n])}return t}).apply(null,arguments)}function r(e,t){var n,o=Object.keys(e);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(e),t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),o.push.apply(o,n)),o}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach(function(t){i(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function l(t,e){if(null==t)return{};var n,o=function(t,e){if(null==t)return{};var n,o={};for(n in t)if({}.hasOwnProperty.call(t,n)){if(-1!==e.indexOf(n))continue;o[n]=t[n]}return o}(t,e);if(Object.getOwnPropertySymbols)for(var i=Object.getOwnPropertySymbols(t),r=0;r<i.length;r++)n=i[r],-1===e.indexOf(n)&&{}.propertyIsEnumerable.call(t,n)&&(o[n]=t[n]);return o}function e(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return o(t,e);var n={}.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var y=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),w=t(/Edge/i),c=t(/firefox/i),u=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),d=t(/iP(ad|od|hone)/i),n=t(/chrome/i)&&t(/android/i),h={capture:!1,passive:!1};function f(t,e,n){t.addEventListener(e,n,!y&&h)}function p(t,e,n){t.removeEventListener(e,n,!y&&h)}function g(t,e){if(e&&(">"===e[0]&&(e=e.substring(1)),t))try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return}}function m(t){return t.host&&t!==document&&t.host.nodeType&&t.host!==t?t.host:t.parentNode}function P(t,e,n,o){if(t){n=n||document;do{if(null!=e&&(">"!==e[0]||t.parentNode===n)&&g(t,e)||o&&t===n)return t}while(t!==n&&(t=m(t)))}return null}var v,b=/\s+/g;function k(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(b," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(b," ")))}function R(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];o[e=!(e in o||-1!==e.indexOf("webkit"))?"-webkit-"+e:e]=n+("string"==typeof n?"":"px")}}function D(t,e){var n="";if("string"==typeof t)n=t;else do{var o=R(t,"transform")}while(o&&"none"!==o&&(n=o+" "+n),!e&&(t=t.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix||window.MSCSSMatrix;return i&&new i(n)}function E(t,e,n){if(t){var o=t.getElementsByTagName(e),i=0,r=o.length;if(n)for(;i<r;i++)n(o[i],i);return o}return[]}function O(){var t=document.scrollingElement;return t||document.documentElement}function X(t,e,n,o,i){if(t.getBoundingClientRect||t===window){var r,a,l,s,c,u,d=t!==window&&t.parentNode&&t!==O()?(a=(r=t.getBoundingClientRect()).top,l=r.left,s=r.bottom,c=r.right,u=r.height,r.width):(l=a=0,s=window.innerHeight,c=window.innerWidth,u=window.innerHeight,window.innerWidth);if((e||n)&&t!==window&&(i=i||t.parentNode,!y))do{if(i&&i.getBoundingClientRect&&("none"!==R(i,"transform")||n&&"static"!==R(i,"position"))){var h=i.getBouLine truncated
|
||||
@@ -0,0 +1,251 @@
|
||||
/* W3.CSS 5.02 March 31 2025 by Jan Egil and Borge Refsnes */
|
||||
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
|
||||
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
|
||||
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
|
||||
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
|
||||
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
|
||||
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
|
||||
a{background-color:transparent}a:active,a:hover{outline-width:0}
|
||||
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
|
||||
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
|
||||
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
|
||||
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
|
||||
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
|
||||
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
|
||||
button,input{overflow:visible}button,select{text-transform:none}
|
||||
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
|
||||
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
|
||||
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
|
||||
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
|
||||
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
|
||||
[type=checkbox],[type=radio]{padding:0}
|
||||
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
|
||||
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
|
||||
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
|
||||
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
|
||||
/* End extract */
|
||||
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
|
||||
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
|
||||
.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
|
||||
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
|
||||
hr{border:0;border-top:1px solid #eee;margin:20px 0}
|
||||
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
|
||||
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
|
||||
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
|
||||
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
|
||||
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
|
||||
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
|
||||
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
|
||||
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
|
||||
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
|
||||
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
|
||||
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
|
||||
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
|
||||
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
|
||||
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
|
||||
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
|
||||
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
|
||||
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
|
||||
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
|
||||
.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
|
||||
.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
|
||||
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
|
||||
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
|
||||
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
|
||||
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
|
||||
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
|
||||
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
|
||||
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
|
||||
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
|
||||
.w3-main,#main{transition:margin-left .4s}
|
||||
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
|
||||
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
|
||||
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
|
||||
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
|
||||
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
|
||||
.w3-bar .w3-button{white-space:normal}
|
||||
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
|
||||
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
|
||||
.w3-responsive{display:block;overflow-x:auto}
|
||||
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
|
||||
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
|
||||
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
|
||||
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
|
||||
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
|
||||
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
|
||||
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
|
||||
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
|
||||
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
|
||||
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
|
||||
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
|
||||
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
|
||||
.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
|
||||
.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
|
||||
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
|
||||
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
|
||||
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
|
||||
@media (max-width:1205px){.w3-auto{max-width:95%}}
|
||||
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
|
||||
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
|
||||
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
|
||||
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
|
||||
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
|
||||
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
|
||||
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
|
||||
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
|
||||
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
|
||||
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
|
||||
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
|
||||
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
|
||||
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
|
||||
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
|
||||
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
|
||||
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
|
||||
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
|
||||
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
|
||||
.w3-display-position{position:absolute}
|
||||
.w3-circle{border-radius:50%}
|
||||
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
|
||||
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
|
||||
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
|
||||
.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
|
||||
.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
|
||||
.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
|
||||
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
|
||||
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
|
||||
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
|
||||
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
|
||||
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
|
||||
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
|
||||
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
|
||||
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
||||
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
|
||||
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
|
||||
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
||||
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
||||
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
|
||||
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
|
||||
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
|
||||
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
|
||||
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
|
||||
.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
|
||||
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
|
||||
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
|
||||
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
|
||||
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
|
||||
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
|
||||
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
|
||||
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
|
||||
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
|
||||
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
|
||||
.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
|
||||
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
|
||||
.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
|
||||
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
|
||||
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
|
||||
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
|
||||
.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
|
||||
.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
|
||||
.w3-left{float:left!important}.w3-right{float:right!important}
|
||||
.w3-button:hover{color:#000!important;background-color:#ccc!important}
|
||||
.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
|
||||
.w3-hover-none:hover{box-shadow:none!important}
|
||||
.w3-rtl{direction:rtl}.w3-ltr{direction:ltr}
|
||||
/* Colors */
|
||||
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
|
||||
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
|
||||
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
|
||||
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
|
||||
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
|
||||
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
|
||||
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
|
||||
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
|
||||
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
|
||||
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
|
||||
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
|
||||
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
|
||||
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
|
||||
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
|
||||
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
|
||||
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
|
||||
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
|
||||
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
|
||||
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
|
||||
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
|
||||
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
|
||||
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
|
||||
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
|
||||
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
|
||||
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
|
||||
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
|
||||
.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
|
||||
.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
|
||||
.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
|
||||
.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
|
||||
.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
|
||||
.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
|
||||
.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
|
||||
.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
|
||||
.w3-danger{color:#fff!important;background-color:#dd0000!important}
|
||||
.w3-note{color:#000!important;background-color:#fff599!important}
|
||||
.w3-info{color:#fff!important;background-color:#0a6fc2!important}
|
||||
.w3-warning{color:#000!important;background-color:#ffb305!important}
|
||||
.w3-success{color:#fff!important;background-color:#008a00!important}
|
||||
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
|
||||
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
|
||||
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
|
||||
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
|
||||
.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
|
||||
.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
|
||||
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
|
||||
.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
|
||||
.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
|
||||
.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
|
||||
.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
|
||||
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
|
||||
.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
|
||||
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
|
||||
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
|
||||
.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
|
||||
.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
|
||||
.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
|
||||
.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
|
||||
.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
|
||||
.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
|
||||
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
|
||||
.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
|
||||
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
|
||||
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
|
||||
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
|
||||
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
|
||||
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
|
||||
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
|
||||
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
|
||||
.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
|
||||
.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
|
||||
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
|
||||
.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
|
||||
.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
|
||||
.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
|
||||
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
|
||||
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
|
||||
.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
|
||||
.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
|
||||
.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
|
||||
.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
|
||||
.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
|
||||
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
|
||||
.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
|
||||
.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
|
||||
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
|
||||
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
|
||||
.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
|
||||
.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
|
||||
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
|
||||
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
|
||||
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
|
||||
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
|
||||
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
|
||||
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
|
||||
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
|
||||
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
|
||||
@@ -0,0 +1,604 @@
|
||||
// Copyright 2018 The Go Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style
|
||||
// license that can be found in the LICENSE file.
|
||||
|
||||
"use strict";
|
||||
|
||||
(() => {
|
||||
const enosys = () => {
|
||||
const err = new Error("not implemented");
|
||||
err.code = "ENOSYS";
|
||||
return err;
|
||||
};
|
||||
|
||||
if (!globalThis.fs) {
|
||||
let outputBuf = "";
|
||||
globalThis.fs = {
|
||||
constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1, O_DIRECTORY: -1 }, // unused
|
||||
writeSync(fd, buf) {
|
||||
outputBuf += decoder.decode(buf);
|
||||
const nl = outputBuf.lastIndexOf("\n");
|
||||
if (nl != -1) {
|
||||
console.log(outputBuf.substring(0, nl));
|
||||
outputBuf = outputBuf.substring(nl + 1);
|
||||
}
|
||||
return buf.length;
|
||||
},
|
||||
write(fd, buf, offset, length, position, callback) {
|
||||
if (offset !== 0 || length !== buf.length || position !== null) {
|
||||
callback(enosys());
|
||||
return;
|
||||
}
|
||||
const n = this.writeSync(fd, buf);
|
||||
callback(null, n);
|
||||
},
|
||||
chmod(path, mode, callback) { callback(enosys()); },
|
||||
chown(path, uid, gid, callback) { callback(enosys()); },
|
||||
close(fd, callback) { callback(enosys()); },
|
||||
fchmod(fd, mode, callback) { callback(enosys()); },
|
||||
fchown(fd, uid, gid, callback) { callback(enosys()); },
|
||||
fstat(fd, callback) { callback(enosys()); },
|
||||
fsync(fd, callback) { callback(null); },
|
||||
ftruncate(fd, length, callback) { callback(enosys()); },
|
||||
lchown(path, uid, gid, callback) { callback(enosys()); },
|
||||
link(path, link, callback) { callback(enosys()); },
|
||||
lstat(path, callback) { callback(enosys()); },
|
||||
mkdir(path, perm, callback) { callback(enosys()); },
|
||||
open(path, flags, mode, callback) { callback(enosys()); },
|
||||
read(fd, buffer, offset, length, position, callback) { callback(enosys()); },
|
||||
readdir(path, callback) { callback(enosys()); },
|
||||
readlink(path, callback) { callback(enosys()); },
|
||||
rename(from, to, callback) { callback(enosys()); },
|
||||
rmdir(path, callback) { callback(enosys()); },
|
||||
stat(path, callback) { callback(enosys()); },
|
||||
symlink(path, link, callback) { callback(enosys()); },
|
||||
truncate(path, length, callback) { callback(enosys()); },
|
||||
unlink(path, callback) { callback(enosys()); },
|
||||
utimes(path, atime, mtime, callback) { callback(enosys()); },
|
||||
};
|
||||
}
|
||||
|
||||
if (!globalThis.process) {
|
||||
globalThis.process = {
|
||||
getuid() { return -1; },
|
||||
getgid() { return -1; },
|
||||
geteuid() { return -1; },
|
||||
getegid() { return -1; },
|
||||
getgroups() { throw enosys(); },
|
||||
pid: -1,
|
||||
ppid: -1,
|
||||
umask() { throw enosys(); },
|
||||
cwd() { throw enosys(); },
|
||||
chdir() { throw enosys(); },
|
||||
}
|
||||
}
|
||||
|
||||
if (!globalThis.path) {
|
||||
globalThis.path = {
|
||||
resolve(...pathSegments) {
|
||||
return pathSegments.join("/");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!globalThis.crypto) {
|
||||
throw new Error("globalThis.crypto is not available, polyfill required (crypto.getRandomValues only)");
|
||||
}
|
||||
|
||||
if (!globalThis.performance) {
|
||||
throw new Error("globalThis.performance is not available, polyfill required (performance.now only)");
|
||||
}
|
||||
|
||||
if (!globalThis.TextEncoder) {
|
||||
throw new Error("globalThis.TextEncoder is not available, polyfill required");
|
||||
}
|
||||
|
||||
if (!globalThis.TextDecoder) {
|
||||
throw new Error("globalThis.TextDecoder is not available, polyfill required");
|
||||
}
|
||||
|
||||
const encoder = new TextEncoder("utf-8");
|
||||
const decoder = new TextDecoder("utf-8");
|
||||
|
||||
globalThis.Go = class {
|
||||
constructor() {
|
||||
this.argv = ["js"];
|
||||
this.env = {};
|
||||
this.exit = (code) => {
|
||||
if (code !== 0) {
|
||||
console.warn("exit code:", code);
|
||||
}
|
||||
};
|
||||
this._exitPromise = new Promise((resolve) => {
|
||||
this._resolveExitPromise = resolve;
|
||||
});
|
||||
this._pendingEvent = null;
|
||||
this._scheduledTimeouts = new Map();
|
||||
this._nextCallbackTimeoutID = 1;
|
||||
|
||||
const setInt64 = (addr, v) => {
|
||||
this.mem.setUint32(addr + 0, v, true);
|
||||
this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true);
|
||||
}
|
||||
|
||||
const setInt32 = (addr, v) => {
|
||||
this.mem.setUint32(addr + 0, v, true);
|
||||
}
|
||||
|
||||
const getInt64 = (addr) => {
|
||||
const low = this.mem.getUint32(addr + 0, true);
|
||||
const high = this.mem.getInt32(addr + 4, true);
|
||||
return low + high * 4294967296;
|
||||
}
|
||||
|
||||
const loadValue = (addr) => {
|
||||
const f = this.mem.getFloat64(addr, true);
|
||||
if (f === 0) {
|
||||
return undefined;
|
||||
}
|
||||
if (!isNaN(f)) {
|
||||
return f;
|
||||
}
|
||||
|
||||
const id = this.mem.getUint32(addr, true);
|
||||
return this._values[id];
|
||||
}
|
||||
|
||||
const storeValue = (addr, v) => {
|
||||
const nanHead = 0x7FF80000;
|
||||
|
||||
if (typeof v === "number" && v !== 0) {
|
||||
if (isNaN(v)) {
|
||||
this.mem.setUint32(addr + 4, nanHead, true);
|
||||
this.mem.setUint32(addr, 0, true);
|
||||
return;
|
||||
}
|
||||
this.mem.setFloat64(addr, v, true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (v === undefined) {
|
||||
this.mem.setFloat64(addr, 0, true);
|
||||
return;
|
||||
}
|
||||
|
||||
let id = this._ids.get(v);
|
||||
if (id === undefined) {
|
||||
id = this._idPool.pop();
|
||||
if (id === undefined) {
|
||||
id = this._values.length;
|
||||
}
|
||||
this._values[id] = v;
|
||||
this._goRefCounts[id] = 0;
|
||||
this._ids.set(v, id);
|
||||
}
|
||||
this._goRefCounts[id]++;
|
||||
let typeFlag = 0;
|
||||
switch (typeof v) {
|
||||
case "object":
|
||||
if (v !== null) {
|
||||
typeFlag = 1;
|
||||
}
|
||||
break;
|
||||
case "string":
|
||||
typeFlag = 2;
|
||||
break;
|
||||
case "symbol":
|
||||
typeFlag = 3;
|
||||
break;
|
||||
case "function":
|
||||
typeFlag = 4;
|
||||
break;
|
||||
}
|
||||
this.mem.setUint32(addr + 4, nanHead | typeFlag, true);
|
||||
this.mem.setUint32(addr, id, true);
|
||||
}
|
||||
|
||||
const loadSlice = (addr) => {
|
||||
const array = getInt64(addr + 0);
|
||||
const len = getInt64(addr + 8);
|
||||
return new Uint8Array(this._inst.exports.mem.buffer, array, len);
|
||||
}
|
||||
|
||||
const loadSliceOfValues = (addr) => {
|
||||
const array = getInt64(addr + 0);
|
||||
const len = getInt64(addr + 8);
|
||||
const a = new Array(len);
|
||||
for (let i = 0; i < len; i++) {
|
||||
a[i] = loadValue(array + i * 8);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
const loadString = (addr) => {
|
||||
const saddr = getInt64(addr + 0);
|
||||
const len = getInt64(addr + 8);
|
||||
return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len));
|
||||
}
|
||||
|
||||
const testCallExport = (a, b) => {
|
||||
this._inst.exports.testExport0();
|
||||
return this._inst.exports.testExport(a, b);
|
||||
}
|
||||
|
||||
const timeOrigin = Date.now() - performance.now();
|
||||
this.importObject = {
|
||||
_gotest: {
|
||||
add: (a, b) => a + b,
|
||||
callExport: testCallExport,
|
||||
},
|
||||
gojs: {
|
||||
// Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
|
||||
// may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
|
||||
// function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
|
||||
// This changes the SP, thus we have to update the SP used by the imported function.
|
||||
|
||||
// func wasmExit(code int32)
|
||||
"runtime.wasmExit": (sp) => {
|
||||
sp >>>= 0;
|
||||
const code = this.mem.getInt32(sp + 8, true);
|
||||
this.exited = true;
|
||||
delete this._inst;
|
||||
delete this._values;
|
||||
delete this._goRefCounts;
|
||||
delete this._ids;
|
||||
delete this._idPool;
|
||||
this.exit(code);
|
||||
},
|
||||
|
||||
// func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
|
||||
"runtime.wasmWrite": (sp) => {
|
||||
sp >>>= 0;
|
||||
const fd = getInt64(sp + 8);
|
||||
const p = getInt64(sp + 16);
|
||||
const n = this.mem.getInt32(sp + 24, true);
|
||||
fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n));
|
||||
},
|
||||
|
||||
// func resetMemoryDataView()
|
||||
"runtime.resetMemoryDataView": (sp) => {
|
||||
sp >>>= 0;
|
||||
this.mem = new DataView(this._inst.exports.mem.buffer);
|
||||
},
|
||||
|
||||
// func nanotime1() int64
|
||||
"runtime.nanotime1": (sp) => {
|
||||
sp >>>= 0;
|
||||
setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000);
|
||||
},
|
||||
|
||||
// func walltime() (sec int64, nsec int32)
|
||||
"runtime.walltime": (sp) => {
|
||||
sp >>>= 0;
|
||||
const msec = (new Date).getTime();
|
||||
setInt64(sp + 8, msec / 1000);
|
||||
this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true);
|
||||
},
|
||||
|
||||
// func scheduleTimeoutEvent(delay int64) int32
|
||||
"runtime.scheduleTimeoutEvent": (sp) => {
|
||||
sp >>>= 0;
|
||||
const id = this._nextCallbackTimeoutID;
|
||||
this._nextCallbackTimeoutID++;
|
||||
this._scheduledTimeouts.set(id, setTimeout(
|
||||
() => {
|
||||
this._resume();
|
||||
while (this._scheduledTimeouts.has(id)) {
|
||||
// for some reason Go failed to register the timeout event, log and try again
|
||||
// (temporary workaround for https://github.com/golang/go/issues/28975)
|
||||
console.warn("scheduleTimeoutEvent: missed timeout event");
|
||||
this._resume();
|
||||
}
|
||||
},
|
||||
getInt64(sp + 8),
|
||||
));
|
||||
this.mem.setInt32(sp + 16, id, true);
|
||||
},
|
||||
|
||||
// func clearTimeoutEvent(id int32)
|
||||
"runtime.clearTimeoutEvent": (sp) => {
|
||||
sp >>>= 0;
|
||||
const id = this.mem.getInt32(sp + 8, true);
|
||||
clearTimeout(this._scheduledTimeouts.get(id));
|
||||
this._scheduledTimeouts.delete(id);
|
||||
},
|
||||
|
||||
// func getRandomData(r []byte)
|
||||
"runtime.getRandomData": (sp) => {
|
||||
sp >>>= 0;
|
||||
crypto.getRandomValues(loadSlice(sp + 8));
|
||||
},
|
||||
|
||||
// func finalizeRef(v ref)
|
||||
"syscall/js.finalizeRef": (sp) => {
|
||||
sp >>>= 0;
|
||||
const id = this.mem.getUint32(sp + 8, true);
|
||||
this._goRefCounts[id]--;
|
||||
if (this._goRefCounts[id] === 0) {
|
||||
const v = this._values[id];
|
||||
this._values[id] = null;
|
||||
this._ids.delete(v);
|
||||
this._idPool.push(id);
|
||||
}
|
||||
},
|
||||
|
||||
// func stringVal(value string) ref
|
||||
"syscall/js.stringVal": (sp) => {
|
||||
sp >>>= 0;
|
||||
storeValue(sp + 24, loadString(sp + 8));
|
||||
},
|
||||
|
||||
// func valueGet(v ref, p string) ref
|
||||
"syscall/js.valueGet": (sp) => {
|
||||
sp >>>= 0;
|
||||
const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16));
|
||||
sp = this._inst.exports.getsp() >>> 0; // see comment above
|
||||
storeValue(sp + 32, result);
|
||||
},
|
||||
|
||||
// func valueSet(v ref, p string, x ref)
|
||||
"syscall/js.valueSet": (sp) => {
|
||||
sp >>>= 0;
|
||||
Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32));
|
||||
},
|
||||
|
||||
// func valueDelete(v ref, p string)
|
||||
"syscall/js.valueDelete": (sp) => {
|
||||
sp >>>= 0;
|
||||
Reflect.deleteProperty(loadValue(sp + 8), loadString(sp + 16));
|
||||
},
|
||||
|
||||
// func valueIndex(v ref, i int) ref
|
||||
"syscall/js.valueIndex": (sp) => {
|
||||
sp >>>= 0;
|
||||
storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)));
|
||||
},
|
||||
|
||||
// valueSetIndex(v ref, i int, x ref)
|
||||
"syscall/js.valueSetIndex": (sp) => {
|
||||
sp >>>= 0;
|
||||
Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24));
|
||||
},
|
||||
|
||||
// func valueCall(v ref, m string, args []ref) (ref, bool)
|
||||
"syscall/js.valueCall": (sp) => {
|
||||
sp >>>= 0;
|
||||
try {
|
||||
const v = loadValue(sp + 8);
|
||||
const m = Reflect.get(v, loadString(sp + 16));
|
||||
const args = loadSliceOfValues(sp + 32);
|
||||
const result = Reflect.apply(m, v, args);
|
||||
sp = this._inst.exports.getsp() >>> 0; // see comment above
|
||||
storeValue(sp + 56, result);
|
||||
this.mem.setUint8(sp + 64, 1);
|
||||
} catch (err) {
|
||||
sp = this._inst.exports.getsp() >>> 0; // see comment above
|
||||
storeValue(sp + 56, err);
|
||||
this.mem.setUint8(sp + 64, 0);
|
||||
}
|
||||
},
|
||||
|
||||
// func valueInvoke(v ref, args []ref) (ref, bool)
|
||||
"syscall/js.valueInvoke": (sp) => {
|
||||
sp >>>= 0;
|
||||
try {
|
||||
const v = loadValue(sp + 8);
|
||||
const args = loadSliceOfValues(sp + 16);
|
||||
const result = Reflect.apply(v, undefined, args);
|
||||
sp = this._inst.exports.getsp() >>> 0; // see comment above
|
||||
storeValue(sp + 40, result);
|
||||
this.mem.setUint8(sp + 48, 1);
|
||||
} catch (err) {
|
||||
sp = this._inst.exports.getsp() >>> 0; // see comment above
|
||||
storeValue(sp + 40, err);
|
||||
this.mem.setUint8(sp + 48, 0);
|
||||
}
|
||||
},
|
||||
|
||||
// func valueNew(v ref, args []ref) (ref, bool)
|
||||
"syscall/js.valueNew": (sp) => {
|
||||
sp >>>= 0;
|
||||
try {
|
||||
const v = loadValue(sp + 8);
|
||||
const args = loadSliceOfValues(sp + 16);
|
||||
const result = Reflect.construct(v, args);
|
||||
sp = this._inst.exports.getsp() >>> 0; // see comment above
|
||||
storeValue(sp + 40, result);
|
||||
this.mem.setUint8(sp + 48, 1);
|
||||
} catch (err) {
|
||||
sp = this._inst.exports.getsp() >>> 0; // see comment above
|
||||
storeValue(sp + 40, err);
|
||||
this.mem.setUint8(sp + 48, 0);
|
||||
}
|
||||
},
|
||||
|
||||
// func valueLength(v ref) int
|
||||
"syscall/js.valueLength": (sp) => {
|
||||
sp >>>= 0;
|
||||
setInt64(sp + 16, parseInt(loadValue(sp + 8).length));
|
||||
},
|
||||
|
||||
// valuePrepareString(v ref) (ref, int)
|
||||
"syscall/js.valuePrepareString": (sp) => {
|
||||
sp >>>= 0;
|
||||
const str = encoder.encode(String(loadValue(sp + 8)));
|
||||
storeValue(sp + 16, str);
|
||||
setInt64(sp + 24, str.length);
|
||||
},
|
||||
|
||||
// valueLoadString(v ref, b []byte)
|
||||
"syscall/js.valueLoadString": (sp) => {
|
||||
sp >>>= 0;
|
||||
const str = loadValue(sp + 8);
|
||||
loadSlice(sp + 16).set(str);
|
||||
},
|
||||
|
||||
// func valueInstanceOf(v ref, t ref) bool
|
||||
"syscall/js.valueInstanceOf": (sp) => {
|
||||
sp >>>= 0;
|
||||
this.mem.setUint8(sp + 24, (loadValue(sp + 8) instanceof loadValue(sp + 16)) ? 1 : 0);
|
||||
},
|
||||
|
||||
// func copyBytesToGo(dst []byte, src ref) (int, bool)
|
||||
"syscall/js.copyBytesToGo": (sp) => {
|
||||
sp >>>= 0;
|
||||
const dst = loadSlice(sp + 8);
|
||||
const src = loadValue(sp + 32);
|
||||
if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) {
|
||||
this.mem.setUint8(sp + 48, 0);
|
||||
return;
|
||||
}
|
||||
const toCopy = src.subarray(0, dst.length);
|
||||
dst.set(toCopy);
|
||||
setInt64(sp + 40, toCopy.length);
|
||||
this.mem.setUint8(sp + 48, 1);
|
||||
},
|
||||
|
||||
// func copyBytesToJS(dst ref, src []byte) (int, bool)
|
||||
"syscall/js.copyBytesToJS": (sp) => {
|
||||
sp >>>= 0;
|
||||
const dst = loadValue(sp + 8);
|
||||
const src = loadSlice(sp + 16);
|
||||
if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) {
|
||||
this.mem.setUint8(sp + 48, 0);
|
||||
return;
|
||||
}
|
||||
const toCopy = src.subarray(0, dst.length);
|
||||
dst.set(toCopy);
|
||||
setInt64(sp + 40, toCopy.length);
|
||||
this.mem.setUint8(sp + 48, 1);
|
||||
},
|
||||
|
||||
"debug": (value) => {
|
||||
console.log(value);
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async run(instance) {
|
||||
if (!(instance instanceof WebAssembly.Instance)) {
|
||||
throw new Error("Go.run: WebAssembly.Instance expected");
|
||||
}
|
||||
this._inst = instance;
|
||||
this.mem = new DataView(this._inst.exports.mem.buffer);
|
||||
this._values = [ // JS values that Go currently has references to, indexed by reference id
|
||||
NaN,
|
||||
0,
|
||||
null,
|
||||
true,
|
||||
false,
|
||||
globalThis,
|
||||
this,
|
||||
];
|
||||
this._goRefCounts = new Array(this._values.length).fill(Infinity); // number of references that Go has to a JS value, indexed by reference id
|
||||
this._ids = new Map([ // mapping from JS values to reference ids
|
||||
[0, 1],
|
||||
[null, 2],
|
||||
[true, 3],
|
||||
[false, 4],
|
||||
[globalThis, 5],
|
||||
[this, 6],
|
||||
]);
|
||||
this._idPool = []; // unused ids that have been garbage collected
|
||||
this.exited = false; // whether the Go program has exited
|
||||
|
||||
// Pass command line arguments and environment variables to WebAssembly by writing them to the linear memory.
|
||||
let offset = 4096;
|
||||
|
||||
const strPtr = (str) => {
|
||||
const ptr = offset;
|
||||
const bytes = encoder.encode(str + "\0");
|
||||
new Uint8Array(this.mem.buffer, offset, bytes.length).set(bytes);
|
||||
offset += bytes.length;
|
||||
if (offset % 8 !== 0) {
|
||||
offset += 8 - (offset % 8);
|
||||
}
|
||||
return ptr;
|
||||
};
|
||||
|
||||
const argc = this.argv.length;
|
||||
|
||||
const argvPtrs = [];
|
||||
this.argv.forEach((arg) => {
|
||||
argvPtrs.push(strPtr(arg));
|
||||
});
|
||||
argvPtrs.push(0);
|
||||
|
||||
const keys = Object.keys(this.env).sort();
|
||||
keys.forEach((key) => {
|
||||
argvPtrs.push(strPtr(`${key}=${this.env[key]}`));
|
||||
});
|
||||
argvPtrs.push(0);
|
||||
|
||||
const argv = offset;
|
||||
argvPtrs.forEach((ptr) => {
|
||||
this.mem.setUint32(offset, ptr, true);
|
||||
this.mem.setUint32(offset + 4, 0, true);
|
||||
offset += 8;
|
||||
});
|
||||
|
||||
// The linker guarantees global data starts from at least wasmMinDataAddr.
|
||||
// Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr.
|
||||
const wasmMinDataAddr = 4096 + 8192;
|
||||
if (offset >= wasmMinDataAddr) {
|
||||
throw new Error("total length of command line and environment variables exceeds limit");
|
||||
}
|
||||
|
||||
this._inst.exports.run(argc, argv);
|
||||
if (this.exited) {
|
||||
this._resolveExitPromise();
|
||||
}
|
||||
await this._exitPromise;
|
||||
}
|
||||
|
||||
_resume() {
|
||||
if (this.exited) {
|
||||
throw new Error("Go program has already exited");
|
||||
}
|
||||
this._inst.exports.resume();
|
||||
if (this.exited) {
|
||||
this._resolveExitPromise();
|
||||
}
|
||||
}
|
||||
|
||||
_makeFuncWrapper(id) {
|
||||
const go = this;
|
||||
return function () {
|
||||
const event = { id: id, this: this, args: arguments };
|
||||
go._pendingEvent = event;
|
||||
go._resume();
|
||||
return event.result;
|
||||
};
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
// wasm setup code
|
||||
export default function init (path) {
|
||||
if (typeof global === "undefined") {
|
||||
var global = globalThis;
|
||||
}
|
||||
return new Promise ((res) => {
|
||||
const go = new Go();
|
||||
const run = (obj) => {
|
||||
const wasm = obj.instance;
|
||||
global.wfa = wasm
|
||||
go.run(wasm);
|
||||
res(wasm)
|
||||
}
|
||||
if ('instantiateStreaming' in WebAssembly) {
|
||||
WebAssembly.instantiateStreaming(fetch(path), go.importObject).then(function (obj) {
|
||||
run(obj)
|
||||
})
|
||||
} else {
|
||||
fetch(path).then(resp =>
|
||||
resp.arrayBuffer()
|
||||
).then(bytes =>
|
||||
WebAssembly.instantiate(bytes, go.importObject).then(function (obj) {
|
||||
run(obj)
|
||||
})
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
Executable
BIN
Binary file not shown.
@@ -0,0 +1,30 @@
|
||||
import { requestAPI, setAppearance } from "./utils.js";
|
||||
import { dialog, error } from "./dialog.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
async function init () {
|
||||
setAppearance();
|
||||
|
||||
document.querySelector("#change-password").addEventListener("click", handlePasswordChangeButton);
|
||||
}
|
||||
|
||||
function handlePasswordChangeButton () {
|
||||
const template = document.querySelector("#change-password-dialog");
|
||||
const d = dialog(template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") });
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to change password but got: ${result.error}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const password = d.querySelector("#new-password");
|
||||
const confirmPassword = d.querySelector("#confirm-password");
|
||||
function validatePassword () {
|
||||
confirmPassword.setCustomValidity(password.value !== confirmPassword.value ? "Passwords Don't Match" : "");
|
||||
}
|
||||
password.addEventListener("change", validatePassword);
|
||||
confirmPassword.addEventListener("keyup", validatePassword);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
import { requestAPI, getURIData, setAppearance, requestDash } from "./utils.js";
|
||||
import { error, dialog } from "./dialog.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
let node;
|
||||
let type;
|
||||
let vmid;
|
||||
|
||||
async function init () {
|
||||
setAppearance();
|
||||
|
||||
const uriData = getURIData();
|
||||
node = uriData.node;
|
||||
type = uriData.type;
|
||||
vmid = uriData.vmid;
|
||||
|
||||
document.querySelector("#backup-add").addEventListener("click", handleBackupAddButton);
|
||||
}
|
||||
|
||||
class BackupCard extends HTMLElement {
|
||||
shadowRoot = null;
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
const internals = this.attachInternals();
|
||||
this.shadowRoot = internals.shadowRoot;
|
||||
|
||||
const editButton = this.shadowRoot.querySelector("#edit-btn");
|
||||
if (editButton.classList.contains("clickable")) {
|
||||
editButton.onclick = this.handleEditButton.bind(this);
|
||||
editButton.onkeydown = (event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
this.editButton();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const deleteButton = this.shadowRoot.querySelector("#delete-btn");
|
||||
if (deleteButton.classList.contains("clickable")) {
|
||||
deleteButton.onclick = this.handleDeleteButton.bind(this);
|
||||
deleteButton.onkeydown = (event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
this.handleDeleteButton();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const restoreButton = this.shadowRoot.querySelector("#restore-btn");
|
||||
if (restoreButton.classList.contains("clickable")) {
|
||||
restoreButton.onclick = this.handleRestoreButton.bind(this);
|
||||
restoreButton.onkeydown = (event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
this.handleRestoreButton();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
get volid () {
|
||||
return this.dataset.volid;
|
||||
}
|
||||
|
||||
async handleEditButton () {
|
||||
const template = this.shadowRoot.querySelector("#edit-dialog");
|
||||
dialog(template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const body = {
|
||||
volid: this.volid,
|
||||
notes: form.get("notes")
|
||||
};
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/notes`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to edit backup but got: ${result.error}`);
|
||||
}
|
||||
refreshBackups();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async handleDeleteButton () {
|
||||
const template = this.shadowRoot.querySelector("#delete-dialog");
|
||||
dialog(template, async (result, _form) => {
|
||||
if (result === "confirm") {
|
||||
const body = {
|
||||
volid: this.volid
|
||||
};
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "DELETE", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to delete backup but got: ${result.error}`);
|
||||
}
|
||||
refreshBackups();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async handleRestoreButton () {
|
||||
const template = this.shadowRoot.querySelector("#restore-dialog");
|
||||
dialog(template, async (result, _form) => {
|
||||
if (result === "confirm") {
|
||||
const body = {
|
||||
volid: this.volid
|
||||
};
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/restore`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to delete backup but got: ${result.error}`);
|
||||
}
|
||||
refreshBackups();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("backup-card", BackupCard);
|
||||
|
||||
async function refreshBackups () {
|
||||
let backups = await requestDash(`/backups/backups?node=${node}&type=${type}&vmid=${vmid}`, "GET");
|
||||
if (backups.status !== 200) {
|
||||
error("Error fetching backups.");
|
||||
}
|
||||
else {
|
||||
backups = backups.data;
|
||||
const container = document.querySelector("#backups-container");
|
||||
container.setHTMLUnsafe(backups);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleBackupAddButton () {
|
||||
const template = document.querySelector("#create-backup-dialog");
|
||||
dialog(template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const body = {
|
||||
notes: form.get("notes")
|
||||
};
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to create backup but got: ${result.error}`);
|
||||
}
|
||||
refreshBackups();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { getSetting, requestAPI } from "./utils.js";
|
||||
import { error } from "./dialog.js";
|
||||
|
||||
export async function setupClientSync (callback) {
|
||||
const scheme = getSetting("sync-scheme");
|
||||
const rate = getSetting("sync-rate");
|
||||
if (scheme === "never") {
|
||||
return;
|
||||
}
|
||||
else if (scheme === "always") {
|
||||
window.setInterval(callback, rate * 1000);
|
||||
}
|
||||
else if (scheme === "hash") {
|
||||
const newHash = (await requestAPI("/sync/hash")).data;
|
||||
localStorage.setItem("sync-current-hash", newHash);
|
||||
window.setInterval(async () => {
|
||||
const newHash = (await requestAPI("/sync/hash")).data;
|
||||
if (localStorage.getItem("sync-current-hash") !== newHash) {
|
||||
localStorage.setItem("sync-current-hash", newHash);
|
||||
callback();
|
||||
}
|
||||
}, rate * 1000);
|
||||
}
|
||||
else if (scheme === "interrupt") {
|
||||
const socket = new WebSocket(`wss://${window.API.replace("https://", "")}/sync/interrupt`);
|
||||
socket.addEventListener("open", (_event) => {
|
||||
socket.send(`rate ${rate}`);
|
||||
});
|
||||
socket.addEventListener("message", (event) => {
|
||||
const message = event.data.toString();
|
||||
if (message === "sync") {
|
||||
callback();
|
||||
}
|
||||
else {
|
||||
error("clientsync: recieved unexpected message from server, closing socket.");
|
||||
socket.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
error(`clientsync: unsupported scheme ${scheme} selected.`);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,479 @@
|
||||
import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setIconSrc, requestDash, getCookie } from "./utils.js";
|
||||
import { error, dialog } from "./dialog.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
let node;
|
||||
let type;
|
||||
let vmid;
|
||||
|
||||
async function init () {
|
||||
setAppearance();
|
||||
|
||||
const uriData = getURIData();
|
||||
node = uriData.node;
|
||||
type = uriData.type;
|
||||
vmid = uriData.vmid;
|
||||
|
||||
initVolumes();
|
||||
initNetworks();
|
||||
initDevices();
|
||||
|
||||
document.querySelector("#config-form").addEventListener("submit", handleFormExit);
|
||||
}
|
||||
|
||||
class VolumeAction extends HTMLElement {
|
||||
shadowRoot = null;
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
const internals = this.attachInternals();
|
||||
this.shadowRoot = internals.shadowRoot;
|
||||
this.template = this.shadowRoot.querySelector("#dialog-template");
|
||||
if (this.dataset.type === "move") {
|
||||
this.addEventListener("click", this.handleDiskMove);
|
||||
}
|
||||
else if (this.dataset.type === "resize") {
|
||||
this.addEventListener("click", this.handleDiskResize);
|
||||
}
|
||||
else if (this.dataset.type === "delete") {
|
||||
this.addEventListener("click", this.handleDiskDelete);
|
||||
}
|
||||
else if (this.dataset.type === "attach") {
|
||||
this.addEventListener("click", this.handleDiskAttach);
|
||||
}
|
||||
else if (this.dataset.type === "detach") {
|
||||
this.addEventListener("click", this.handleDiskDetach);
|
||||
}
|
||||
}
|
||||
|
||||
async setStatusLoading () {
|
||||
const icon = document.querySelector(`img[data-volume="${this.dataset.volume}"]`);
|
||||
setIconSrc(icon, "images/status/loading.svg");
|
||||
}
|
||||
|
||||
async handleDiskDetach () {
|
||||
const disk = this.dataset.volume;
|
||||
dialog(this.template, async (result, _form) => {
|
||||
if (result === "confirm") {
|
||||
this.setStatusLoading();
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/detach`, "POST");
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to detach ${disk} but got: ${result.error}`);
|
||||
}
|
||||
refreshVolumes();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async handleDiskAttach () {
|
||||
dialog(this.template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const device = form.get("device");
|
||||
this.setStatusLoading();
|
||||
const body = {
|
||||
source: this.dataset.volume.replace("unused", ""),
|
||||
mp: form.get("mp")
|
||||
};
|
||||
const prefix = type === "qemu" ? "scsi" : "mp";
|
||||
const disk = `${prefix}${device}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/attach`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to attach ${this.dataset.volume} to ${disk} but got: ${result.error}`);
|
||||
}
|
||||
refreshVolumes();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async handleDiskResize () {
|
||||
dialog(this.template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const disk = this.dataset.volume;
|
||||
this.setStatusLoading();
|
||||
const body = {
|
||||
size: form.get("size-increment")
|
||||
};
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/resize`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to resize ${disk} but got: ${result.error}`);
|
||||
}
|
||||
refreshVolumes();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async handleDiskMove () {
|
||||
const d = dialog(this.template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const disk = this.dataset.volume;
|
||||
this.setStatusLoading();
|
||||
const body = {
|
||||
storage: form.get("storage-select"),
|
||||
delete: form.get("delete-check") === "on" ? "1" : "0"
|
||||
};
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/move`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`);
|
||||
}
|
||||
refreshVolumes();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
const content = type === "qemu" ? "images" : "rootdir";
|
||||
const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
||||
const select = d.querySelector("#storage-select");
|
||||
storage.data.forEach((element) => {
|
||||
if (element.content.includes(content)) {
|
||||
select.add(new Option(element.storage));
|
||||
}
|
||||
select.selectedIndex = -1;
|
||||
});
|
||||
}
|
||||
|
||||
async handleDiskDelete () {
|
||||
const disk = this.dataset.volume;
|
||||
dialog(this.template, async (result, _form) => {
|
||||
if (result === "confirm") {
|
||||
this.setStatusLoading();
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/delete`, "DELETE");
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to delete ${disk} but got: ${result.error}`);
|
||||
}
|
||||
refreshVolumes();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("volume-action", VolumeAction);
|
||||
|
||||
async function initVolumes () {
|
||||
document.querySelector("#disk-add").addEventListener("click", handleDiskAdd);
|
||||
if (type === "qemu") {
|
||||
document.querySelector("#cd-add").addEventListener("click", handleCDAdd);
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshVolumes () {
|
||||
let volumes = await requestDash(`/config/volumes?node=${node}&type=${type}&vmid=${vmid}`, "GET");
|
||||
if (volumes.status !== 200) {
|
||||
error("Error fetching instance volumes.");
|
||||
}
|
||||
else {
|
||||
volumes = volumes.data;
|
||||
const container = document.querySelector("#volumes");
|
||||
container.setHTMLUnsafe(volumes);
|
||||
}
|
||||
|
||||
initVolumes();
|
||||
}
|
||||
|
||||
async function handleDiskAdd () {
|
||||
const template = document.querySelector("#add-disk-dialog");
|
||||
const d = dialog(template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const body = {
|
||||
storage: form.get("storage-select"),
|
||||
size: form.get("size")
|
||||
};
|
||||
const id = form.get("device");
|
||||
const prefix = type === "qemu" ? "scsi" : "mp";
|
||||
const disk = `${prefix}${id}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to create ${disk} but got: ${result.error}`);
|
||||
}
|
||||
refreshVolumes();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
|
||||
const content = type === "qemu" ? "images" : "rootdir";
|
||||
const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
||||
const select = d.querySelector("#storage-select");
|
||||
storage.data.forEach((element) => {
|
||||
if (element.content.includes(content)) {
|
||||
select.add(new Option(element.storage));
|
||||
}
|
||||
select.selectedIndex = -1;
|
||||
});
|
||||
}
|
||||
|
||||
async function handleCDAdd () {
|
||||
const template = document.querySelector("#add-cd-dialog");
|
||||
const d = dialog(template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const body = {
|
||||
iso: form.get("iso-select")
|
||||
};
|
||||
const disk = `ide${form.get("device")}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to mount ${body.iso} to ${disk} but got: result.error`);
|
||||
}
|
||||
refreshVolumes();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
|
||||
const isos = await requestAPI(`/access/users/${getCookie("username")}/vm-isos`, "GET");
|
||||
const select = d.querySelector("#iso-select");
|
||||
|
||||
for (const iso of isos.data) {
|
||||
select.add(new Option(iso.name, iso.volid));
|
||||
}
|
||||
select.selectedIndex = -1;
|
||||
}
|
||||
|
||||
class NetworkAction extends HTMLElement {
|
||||
shadowRoot = null;
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
const internals = this.attachInternals();
|
||||
this.shadowRoot = internals.shadowRoot;
|
||||
this.template = this.shadowRoot.querySelector("#dialog-template");
|
||||
if (this.dataset.type === "config") {
|
||||
this.addEventListener("click", this.handleNetworkConfig);
|
||||
}
|
||||
else if (this.dataset.type === "delete") {
|
||||
this.addEventListener("click", this.handleNetworkDelete);
|
||||
}
|
||||
}
|
||||
|
||||
async setStatusLoading () {
|
||||
const icon = document.querySelector(`img[data-network="${this.dataset.network}"]`);
|
||||
setIconSrc(icon, "images/status/loading.svg");
|
||||
}
|
||||
|
||||
async handleNetworkConfig () {
|
||||
const netDetails = this.dataset.value;
|
||||
const netID = this.dataset.network;
|
||||
const d = dialog(this.template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
this.setStatusLoading();
|
||||
const body = {
|
||||
rate: form.get("rate")
|
||||
};
|
||||
const net = `${netID}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/modify`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to change ${net} but got: ${result.error}`);
|
||||
}
|
||||
refreshNetworks();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
|
||||
d.querySelector("#rate").value = netDetails.split("rate=")[1].split(",")[0];
|
||||
}
|
||||
|
||||
async handleNetworkDelete () {
|
||||
const netID = this.dataset.network;
|
||||
dialog(this.template, async (result, _form) => {
|
||||
if (result === "confirm") {
|
||||
setIconSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
|
||||
const net = `${netID}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE");
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to delete ${net} but got: ${result.error}`);
|
||||
}
|
||||
refreshNetworks();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("network-action", NetworkAction);
|
||||
|
||||
async function initNetworks () {
|
||||
document.querySelector("#network-add").addEventListener("click", handleNetworkAdd);
|
||||
}
|
||||
|
||||
async function refreshNetworks () {
|
||||
let nets = await requestDash(`/config/nets?node=${node}&type=${type}&vmid=${vmid}`, "GET");
|
||||
if (nets.status !== 200) {
|
||||
error("Error fetching instance nets.");
|
||||
}
|
||||
else {
|
||||
nets = nets.data;
|
||||
const container = document.querySelector("#networks");
|
||||
container.setHTMLUnsafe(nets);
|
||||
}
|
||||
|
||||
initNetworks();
|
||||
}
|
||||
|
||||
async function handleNetworkAdd () {
|
||||
const template = document.querySelector("#add-net-dialog");
|
||||
dialog(template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const body = {
|
||||
rate: form.get("rate")
|
||||
};
|
||||
if (type === "lxc") {
|
||||
body.name = form.get("name");
|
||||
}
|
||||
const id = form.get("netid");
|
||||
const net = `net${id}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/create`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to create ${net} but got: ${result.error}`);
|
||||
}
|
||||
refreshNetworks();
|
||||
refreshBoot();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
class DeviceAction extends HTMLElement {
|
||||
shadowRoot = null;
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
const internals = this.attachInternals();
|
||||
this.shadowRoot = internals.shadowRoot;
|
||||
this.template = this.shadowRoot.querySelector("#dialog-template");
|
||||
if (this.dataset.type === "config") {
|
||||
this.addEventListener("click", this.handleDeviceConfig);
|
||||
}
|
||||
else if (this.dataset.type === "delete") {
|
||||
this.addEventListener("click", this.handleDeviceDelete);
|
||||
}
|
||||
}
|
||||
|
||||
async setStatusLoading () {
|
||||
const icon = document.querySelector(`img[data-device="${this.dataset.device}"]`);
|
||||
setIconSrc(icon, "images/status/loading.svg");
|
||||
}
|
||||
|
||||
async handleDeviceConfig () {
|
||||
const deviceID = this.dataset.device;
|
||||
const deviceDetails = this.dataset.value;
|
||||
const deviceName = this.dataset.name;
|
||||
const d = dialog(this.template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
this.setStatusLoading();
|
||||
const body = {
|
||||
device: form.get("device"),
|
||||
pcie: form.get("pcie") ? 1 : 0
|
||||
};
|
||||
const device = `${deviceID}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/modify`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to add ${device} but got: ${result.error}`);
|
||||
}
|
||||
refreshDevices();
|
||||
}
|
||||
});
|
||||
|
||||
const availDevices = await requestAPI(`/cluster/${node}/pci`, "GET");
|
||||
d.querySelector("#device").append(new Option(deviceName, deviceDetails.split(",")[0]));
|
||||
for (const availDevice of availDevices.data) {
|
||||
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.device_bus));
|
||||
}
|
||||
d.querySelector("#pcie").checked = deviceDetails.includes("pcie=1");
|
||||
}
|
||||
|
||||
async handleDeviceDelete () {
|
||||
const deviceID = this.dataset.device;
|
||||
dialog(this.template, async (result, _form) => {
|
||||
if (result === "confirm") {
|
||||
this.setStatusLoading();
|
||||
const device = `${deviceID}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/delete`, "DELETE");
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to delete ${device} but got: ${result.error}`);
|
||||
}
|
||||
refreshDevices();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("device-action", DeviceAction);
|
||||
|
||||
async function initDevices () {
|
||||
if (type === "qemu") {
|
||||
document.querySelector("#device-add").addEventListener("click", handleDeviceAdd);
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshDevices () {
|
||||
let devices = await requestDash(`/config/devices?node=${node}&type=${type}&vmid=${vmid}`, "GET");
|
||||
if (devices.status !== 200) {
|
||||
error("Error fetching instance devices.");
|
||||
}
|
||||
else {
|
||||
devices = devices.data;
|
||||
const container = document.querySelector("#devices");
|
||||
container.setHTMLUnsafe(devices);
|
||||
}
|
||||
|
||||
initDevices();
|
||||
}
|
||||
|
||||
async function handleDeviceAdd () {
|
||||
const template = document.querySelector("#add-device-dialog");
|
||||
const d = dialog(template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const hostpci = form.get("hostpci");
|
||||
const body = {
|
||||
device: form.get("device"),
|
||||
pcie: form.get("pcie") ? 1 : 0
|
||||
};
|
||||
const deviceID = `hostpci${hostpci}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${deviceID}/create`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to add ${body.device} but got: ${result.error}`);
|
||||
}
|
||||
refreshDevices();
|
||||
}
|
||||
});
|
||||
|
||||
const availDevices = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci`, "GET");
|
||||
for (const availDevice of availDevices.data) {
|
||||
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.device_bus));
|
||||
}
|
||||
d.querySelector("#pcie").checked = true;
|
||||
}
|
||||
|
||||
async function refreshBoot () {
|
||||
let boot = await requestDash(`/config/boot?node=${node}&type=${type}&vmid=${vmid}`, "GET");
|
||||
if (boot.status !== 200) {
|
||||
error("Error fetching instance boot order.");
|
||||
}
|
||||
else if (type === "qemu") {
|
||||
boot = boot.data;
|
||||
const container = document.querySelector("#boot-order");
|
||||
container.setHTMLUnsafe(boot);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFormExit (event) {
|
||||
event.preventDefault();
|
||||
const body = {
|
||||
cores: document.querySelector("#cores").value,
|
||||
memory: document.querySelector("#ram").value
|
||||
};
|
||||
if (type === "lxc") {
|
||||
body.swap = document.querySelector("#swap").value;
|
||||
}
|
||||
else if (type === "qemu") {
|
||||
body.proctype = document.querySelector("#proctype").value;
|
||||
body.boot = document.querySelector("#enabled").value;
|
||||
}
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/resources`, "POST", body);
|
||||
if (result.status === 200) {
|
||||
goToPage("index");
|
||||
}
|
||||
else {
|
||||
error(`Attempted to set basic resources but got: ${result.error}`);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* Spawn modal dialog from template node. Assumes the following structure:
|
||||
* <template>
|
||||
* <dialog>
|
||||
* <p id="prompt"></p>
|
||||
* <div id="body">
|
||||
* <form id="form"> ... </form>
|
||||
* </div>
|
||||
* <div id="controls">
|
||||
* <button value="..." form="form"
|
||||
* <button value="..." form="form"
|
||||
* ...
|
||||
* </div>
|
||||
* </dialog>
|
||||
* </template>
|
||||
* Where prompt is the modal dialog's prompt or header,
|
||||
* body contains an optional form or other information,
|
||||
* and controls contains a series of buttons which controls the form
|
||||
*/
|
||||
export function dialog (template, onclose = async (_result, _form) => { }) {
|
||||
const dialog = template.content.querySelector("dialog").cloneNode(true);
|
||||
document.body.append(dialog);
|
||||
dialog.addEventListener("close", async () => {
|
||||
const formElem = dialog.querySelector("form");
|
||||
const formData = formElem ? new FormData(formElem) : null;
|
||||
await onclose(dialog.returnValue, formData);
|
||||
formElem.reset();
|
||||
dialog.close();
|
||||
dialog.parentElement.removeChild(dialog);
|
||||
});
|
||||
if (!dialog.querySelector("form")) {
|
||||
for (const control of dialog.querySelector("#controls").childNodes) {
|
||||
control.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
dialog.close(e.target.value);
|
||||
});
|
||||
}
|
||||
}
|
||||
document.body.append(dialog);
|
||||
dialog.showModal();
|
||||
return dialog;
|
||||
}
|
||||
|
||||
class ErrorDialog extends HTMLElement {
|
||||
shadowRoot = null;
|
||||
dialog = null;
|
||||
errors = null;
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<link rel="stylesheet" href="websrc/css/form.css">
|
||||
<style>
|
||||
#errors {
|
||||
margin-bottom: 0;
|
||||
max-height: 20lh;
|
||||
min-height: 20lh;
|
||||
overflow-y: scroll;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
#errors * {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<form method="dialog">
|
||||
<p class="w3-large" id="prompt">Error</p>
|
||||
<div id="errors" class="flex column"></div>
|
||||
<div class="w3-center" id="controls">
|
||||
<button class="w3-button w3-margin" type="submit" value="ok">OK</button>
|
||||
<button class="w3-button w3-margin" type="submit" value="copy">Copy</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
`;
|
||||
this.dialog = this.shadowRoot.querySelector("dialog");
|
||||
this.errors = this.shadowRoot.querySelector("#errors");
|
||||
|
||||
for (const control of this.shadowRoot.querySelector("#controls").childNodes) {
|
||||
control.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
this.dialog.close(e.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
this.dialog.addEventListener("close", () => {
|
||||
if (this.dialog.returnValue === "copy") {
|
||||
let errors = "";
|
||||
for (const error of this.errors.childNodes) {
|
||||
errors += `${error.innerText}\n`;
|
||||
}
|
||||
navigator.clipboard.writeText(errors);
|
||||
}
|
||||
this.dialog.close();
|
||||
});
|
||||
}
|
||||
|
||||
appendError (error) {
|
||||
error = `${(new Date()).toUTCString()}: ${error}`;
|
||||
const p = document.createElement("p");
|
||||
p.innerText = error;
|
||||
this.errors.appendChild(p);
|
||||
}
|
||||
|
||||
showModal () {
|
||||
this.dialog.showModal();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("error-dialog", ErrorDialog);
|
||||
|
||||
export function error (message) {
|
||||
let dialog = document.querySelector("error-dialog");
|
||||
if (dialog === null) {
|
||||
dialog = document.createElement("error-dialog");
|
||||
document.body.append(dialog);
|
||||
dialog.appendError(message);
|
||||
dialog.showModal();
|
||||
}
|
||||
else {
|
||||
dialog.appendError(message);
|
||||
dialog.showModal();
|
||||
}
|
||||
return dialog;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
const blank = document.createElement("img");
|
||||
blank.src = "websrc/images/common/blank.png"; // for whatever reason an svg does NOT work here
|
||||
|
||||
class DraggableContainer extends HTMLElement {
|
||||
shadowRoot = null;
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
const internals = this.attachInternals();
|
||||
this.shadowRoot = internals.shadowRoot;
|
||||
this.content = this.shadowRoot.querySelector("#wrapper");
|
||||
|
||||
window.Sortable.create(this.content, {
|
||||
group: this.dataset.group,
|
||||
ghostClass: "ghost",
|
||||
setData: function (dataTransfer, _dragEl) {
|
||||
dataTransfer.setDragImage(blank, 0, 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
append (newNode) {
|
||||
this.content.appendChild(newNode, this.bottom);
|
||||
}
|
||||
|
||||
insertBefore (newNode, referenceNode) {
|
||||
this.content.insertBefore(newNode, referenceNode);
|
||||
}
|
||||
|
||||
querySelector (query) {
|
||||
return this.content.querySelector(query);
|
||||
}
|
||||
|
||||
hasChildNodes (query) {
|
||||
return this.querySelector(query) !== null;
|
||||
}
|
||||
|
||||
removeChild (node) {
|
||||
if (node && this.content.contains(node)) {
|
||||
this.content.removeChild(node);
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
set value (value) {}
|
||||
|
||||
get value () {
|
||||
const value = [];
|
||||
this.content.querySelectorAll(".draggable-item").forEach((element) => {
|
||||
if (element.dataset.value) {
|
||||
value.push(element.dataset.value);
|
||||
}
|
||||
});
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("draggable-container", DraggableContainer);
|
||||
@@ -0,0 +1,438 @@
|
||||
import { requestPVE, requestAPI, setAppearance, getSetting, requestDash, setIconSrc, setIconAlt, getCookie } from "./utils.js";
|
||||
import { dialog, error } from "./dialog.js";
|
||||
import { setupClientSync } from "./clientsync.js";
|
||||
import wfaInit from "../modules/wfa.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
var wfa;
|
||||
|
||||
async function init () {
|
||||
setAppearance();
|
||||
|
||||
wfa = await wfaInit("websrc/modules/wfa.wasm.gz");
|
||||
initInstances();
|
||||
|
||||
document.querySelector("#instance-add").addEventListener("click", handleInstanceAddButton);
|
||||
document.querySelector("#vm-search").addEventListener("input", sortInstances);
|
||||
|
||||
setupClientSync(refreshInstances);
|
||||
}
|
||||
|
||||
class InstanceCard extends HTMLElement {
|
||||
actionLock = false;
|
||||
shadowRoot = null;
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
const internals = this.attachInternals();
|
||||
this.shadowRoot = internals.shadowRoot;
|
||||
this.actionLock = false;
|
||||
}
|
||||
|
||||
get type () {
|
||||
return this.dataset.type;
|
||||
}
|
||||
|
||||
set type (type) {
|
||||
this.dataset.type = type;
|
||||
}
|
||||
|
||||
get status () {
|
||||
return this.dataset.status;
|
||||
}
|
||||
|
||||
set status (status) {
|
||||
this.dataset.status = status;
|
||||
}
|
||||
|
||||
get vmid () {
|
||||
return this.dataset.vmid;
|
||||
}
|
||||
|
||||
set vmid (vmid) {
|
||||
this.dataset.vmid = vmid;
|
||||
}
|
||||
|
||||
get name () {
|
||||
return this.dataset.name;
|
||||
}
|
||||
|
||||
set name (name) {
|
||||
this.dataset.name = name;
|
||||
}
|
||||
|
||||
get node () {
|
||||
return {
|
||||
name: this.dataset.node,
|
||||
status: this.dataset.nodestatus
|
||||
};
|
||||
}
|
||||
|
||||
set node (node) {
|
||||
this.dataset.node = node.name;
|
||||
this.dataset.nodetsatus = node.status;
|
||||
}
|
||||
|
||||
set searchQueryResult (result) {
|
||||
this.dataset.searchqueryresult = JSON.stringify(result);
|
||||
}
|
||||
|
||||
get searchQueryResult () {
|
||||
return JSON.parse(!this.dataset.searchqueryresult ? "{}" : this.dataset.searchqueryresult);
|
||||
}
|
||||
|
||||
update () {
|
||||
const nameParagraph = this.shadowRoot.querySelector("#instance-name");
|
||||
nameParagraph.innerText = "";
|
||||
if (this.searchQueryResult.alignment) {
|
||||
let i = 0; // name index
|
||||
let c = 0; // alignment index
|
||||
const alignment = this.searchQueryResult.alignment;
|
||||
while (i < this.name.length && c < alignment.length) {
|
||||
if (alignment[c] === "M") {
|
||||
const part = document.createElement("span");
|
||||
part.innerText = this.name[i];
|
||||
part.style = "color: var(--lightbg-text-color); background-color: var(--highlight-color);";
|
||||
nameParagraph.append(part);
|
||||
i++;
|
||||
c++;
|
||||
}
|
||||
else if (alignment[c] === "I") {
|
||||
const part = document.createElement("span");
|
||||
part.innerText = this.name[i];
|
||||
nameParagraph.append(part);
|
||||
i++;
|
||||
c++;
|
||||
}
|
||||
else if (alignment[c] === "D") {
|
||||
c++;
|
||||
}
|
||||
else if (alignment[c] === "X") {
|
||||
const part = document.createElement("span");
|
||||
part.innerText = this.name[i];
|
||||
nameParagraph.append(part);
|
||||
i++;
|
||||
c++;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
nameParagraph.innerHTML = this.name ? this.name : " ";
|
||||
}
|
||||
|
||||
const powerButton = this.shadowRoot.querySelector("#power-btn");
|
||||
if (powerButton !== null) {
|
||||
if (powerButton.classList.contains("clickable")) {
|
||||
powerButton.onclick = this.handlePowerButton.bind(this);
|
||||
powerButton.onkeydown = (event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
this.handlePowerButton();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const deleteButton = this.shadowRoot.querySelector("#delete-btn");
|
||||
if (deleteButton !== null) {
|
||||
if (deleteButton.classList.contains("clickable")) {
|
||||
deleteButton.onclick = this.handleDeleteButton.bind(this);
|
||||
deleteButton.onkeydown = (event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
this.handleDeleteButton();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setStatusLoading () {
|
||||
this.status = "loading";
|
||||
const statusicon = this.shadowRoot.querySelector("#status");
|
||||
const powerbtn = this.shadowRoot.querySelector("#power-btn");
|
||||
setIconSrc(statusicon, "images/status/loading.svg");
|
||||
setIconAlt(statusicon, "instance is loading");
|
||||
setIconSrc(powerbtn, "images/status/loading.svg");
|
||||
setIconAlt(powerbtn, "");
|
||||
}
|
||||
|
||||
async handlePowerButton () {
|
||||
if (!this.actionLock) {
|
||||
const template = this.shadowRoot.querySelector("#power-dialog");
|
||||
dialog(template, async (result, _form) => {
|
||||
if (result === "confirm") {
|
||||
this.actionLock = true;
|
||||
const targetAction = this.status === "running" ? "stop" : "start";
|
||||
|
||||
const result = await requestPVE(`/nodes/${this.node.name}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", { node: this.node.name, vmid: this.vmid });
|
||||
this.setStatusLoading();
|
||||
|
||||
const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
|
||||
|
||||
while (true) {
|
||||
const taskStatus = await requestPVE(`/nodes/${this.node.name}/tasks/${result.data}/status`, "GET");
|
||||
if (taskStatus.data.status === "stopped" && taskStatus.data.exitstatus === "OK") { // task stopped and was successful
|
||||
break;
|
||||
}
|
||||
else if (taskStatus.data.status === "stopped") { // task stopped but was not successful
|
||||
error(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`);
|
||||
break;
|
||||
}
|
||||
else { // task has not stopped
|
||||
await waitFor(1000);
|
||||
}
|
||||
}
|
||||
|
||||
this.actionLock = false;
|
||||
refreshInstances();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleDeleteButton () {
|
||||
if (!this.actionLock && this.status === "stopped") {
|
||||
const template = this.shadowRoot.querySelector("#delete-dialog");
|
||||
dialog(template, async (result, _form) => {
|
||||
if (result === "confirm") {
|
||||
this.actionLock = true;
|
||||
|
||||
const action = {};
|
||||
action.purge = 1;
|
||||
action["destroy-unreferenced-disks"] = 1;
|
||||
|
||||
const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE");
|
||||
if (result.status !== 200) {
|
||||
error(`Attempted to delete ${this.vmid} but got: ${result.error}`);
|
||||
}
|
||||
|
||||
this.actionLock = false;
|
||||
refreshInstances();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("instance-card", InstanceCard);
|
||||
|
||||
async function refreshInstances () {
|
||||
let instances = await requestDash("/index/instances", "GET");
|
||||
if (instances.status !== 200) {
|
||||
error(`Error fetching instances: ${instances.status} ${instances.error !== undefined ? instances.error : ""}`);
|
||||
}
|
||||
else {
|
||||
instances = instances.data;
|
||||
const container = document.querySelector("#instance-container");
|
||||
container.setHTMLUnsafe(instances);
|
||||
sortInstances();
|
||||
}
|
||||
}
|
||||
|
||||
function initInstances () {
|
||||
const container = document.querySelector("#instance-container");
|
||||
let instances = container.children;
|
||||
instances = [].slice.call(instances);
|
||||
for (let i = 0; i < instances.length; i++) {
|
||||
instances[i].update();
|
||||
}
|
||||
}
|
||||
|
||||
function sortInstances () {
|
||||
const searchCriteria = getSetting("search-criteria");
|
||||
const searchQuery = document.querySelector("#search").value || null;
|
||||
let criteria;
|
||||
if (!searchQuery) {
|
||||
criteria = (item, _query = null) => {
|
||||
return { score: item.vmid, alignment: null };
|
||||
};
|
||||
}
|
||||
else if (searchCriteria === "exact") {
|
||||
criteria = (item, query) => {
|
||||
const substrInc = item.includes(query);
|
||||
if (substrInc) {
|
||||
const substrStartIndex = item.indexOf(query);
|
||||
const queryLength = query.length;
|
||||
const remaining = item.length - substrInc - queryLength + 1;
|
||||
const alignment = `${"X".repeat(substrStartIndex)}${"M".repeat(queryLength)}${"X".repeat(remaining)}`;
|
||||
return { score: -1, alignment };
|
||||
}
|
||||
else {
|
||||
const alignment = `${"X".repeat(item.length)}`;
|
||||
return { score: 0, alignment };
|
||||
}
|
||||
};
|
||||
}
|
||||
else if (searchCriteria === "fuzzy") {
|
||||
const penalties = {
|
||||
m: 0,
|
||||
x: 2,
|
||||
o: 3,
|
||||
e: 1
|
||||
};
|
||||
criteria = (item, query) => {
|
||||
// lower is better
|
||||
const { score, CIGAR } = wfa.wfAlign(query, item, penalties, true);
|
||||
const alignment = wfa.DecodeCIGAR(CIGAR);
|
||||
const maxlength = Math.max(item.length, query.length);
|
||||
return { score: score / maxlength, alignment };
|
||||
};
|
||||
}
|
||||
|
||||
const container = document.querySelector("#instance-container");
|
||||
let instances = container.children;
|
||||
instances = [].slice.call(instances);
|
||||
|
||||
for (let i = 0; i < instances.length; i++) {
|
||||
if (!instances[i].dataset.name) { // if the instance has no name, assume its just empty string
|
||||
instances[i].dataset.name = "";
|
||||
}
|
||||
const { score, alignment } = criteria(instances[i].dataset.name.toLowerCase(), searchQuery ? searchQuery.toLowerCase() : "");
|
||||
instances[i].searchQueryResult = { score, alignment };
|
||||
}
|
||||
const sortCriteria = (a, b) => {
|
||||
const aScore = a.searchQueryResult.score;
|
||||
const bScore = b.searchQueryResult.score;
|
||||
if (aScore === bScore) {
|
||||
return a.vmid > b.vmid ? 1 : -1;
|
||||
}
|
||||
else {
|
||||
return aScore - bScore;
|
||||
}
|
||||
};
|
||||
|
||||
instances.sort(sortCriteria);
|
||||
|
||||
for (let i = 0; i < instances.length; i++) {
|
||||
container.appendChild(instances[i]);
|
||||
instances[i].update();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInstanceAddButton () {
|
||||
const template = document.querySelector("#create-instance-dialog");
|
||||
const d = dialog(template, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const body = {
|
||||
name: form.get("name"),
|
||||
cores: form.get("cores"),
|
||||
memory: form.get("memory"),
|
||||
pool: form.get("pool")
|
||||
};
|
||||
if (form.get("type") === "lxc") {
|
||||
body.swap = form.get("swap");
|
||||
body.password = form.get("password");
|
||||
body.ostemplate = form.get("template-image");
|
||||
body.rootfslocation = form.get("rootfs-storage");
|
||||
body.rootfssize = form.get("rootfs-size");
|
||||
}
|
||||
const node = form.get("node");
|
||||
const type = form.get("type");
|
||||
const vmid = form.get("vmid");
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/create`, "POST", body);
|
||||
if (result.status === 200) {
|
||||
refreshInstances();
|
||||
}
|
||||
else {
|
||||
error(`Attempted to create new instance ${vmid} but got: ${result.error}`);
|
||||
refreshInstances();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// setup type select
|
||||
const typeSelect = d.querySelector("#type");
|
||||
typeSelect.selectedIndex = -1;
|
||||
// on type change, reveal or hide the container specific section
|
||||
typeSelect.addEventListener("change", () => {
|
||||
if (typeSelect.value === "qemu") {
|
||||
d.querySelectorAll(".container-specific").forEach((element) => {
|
||||
element.classList.add("none");
|
||||
element.disabled = true;
|
||||
});
|
||||
}
|
||||
else {
|
||||
d.querySelectorAll(".container-specific").forEach((element) => {
|
||||
element.classList.remove("none");
|
||||
element.disabled = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
d.querySelectorAll(".container-specific").forEach((element) => {
|
||||
element.classList.add("none");
|
||||
element.disabled = true;
|
||||
});
|
||||
|
||||
// setup pool select
|
||||
const poolSelect = d.querySelector("#pool");
|
||||
poolSelect.innerHTML = "";
|
||||
// add user pools to selector
|
||||
const userPools = Object.keys((await requestAPI("/access/pools", "GET")).data.pools);
|
||||
userPools.forEach((element) => {
|
||||
poolSelect.add(new Option(element));
|
||||
});
|
||||
poolSelect.selectedIndex = -1;
|
||||
// on pool change, get the allowed nodes for that pool, then repopulate the node selector
|
||||
poolSelect.addEventListener("change", async () => {
|
||||
const pool = (await requestAPI(`/access/pools/${poolSelect.value}`, "GET")).data.pool;
|
||||
|
||||
const nodeSelect = d.querySelector("#node");
|
||||
nodeSelect.innerHTML = "";
|
||||
const clusterNodes = (await requestPVE("/nodes", "GET")).data;
|
||||
const allowedNodes = Object.keys(pool["nodes-allowed"]);
|
||||
clusterNodes.forEach((element) => {
|
||||
if (element.status === "online" && allowedNodes.includes(element.node)) {
|
||||
nodeSelect.add(new Option(element.node));
|
||||
}
|
||||
});
|
||||
nodeSelect.selectedIndex = -1;
|
||||
|
||||
// set vmid min/max
|
||||
d.querySelector("#vmid").min = pool["vmid-allowed"].min;
|
||||
d.querySelector("#vmid").max = pool["vmid-allowed"].max;
|
||||
});
|
||||
|
||||
// setup node select
|
||||
const nodeSelect = d.querySelector("#node");
|
||||
nodeSelect.selectedIndex = -1;
|
||||
// on node change, get the available storages and repopulate the storage selector
|
||||
nodeSelect.addEventListener("change", async () => { // change rootfs storage based on node
|
||||
const node = nodeSelect.value;
|
||||
const storage = (await requestPVE(`/nodes/${node}/storage`, "GET")).data;
|
||||
rootfsStorage.innerHTML = "";
|
||||
storage.forEach((element) => {
|
||||
if (element.content.includes(rootfsContent)) {
|
||||
rootfsStorage.add(new Option(element.storage));
|
||||
}
|
||||
});
|
||||
rootfsStorage.selectedIndex = -1;
|
||||
});
|
||||
|
||||
// setup root dir select
|
||||
const rootfsStorage = d.querySelector("#rootfs-storage");
|
||||
rootfsStorage.selectedIndex = -1;
|
||||
// set rootfs content type (rootdir)
|
||||
const rootfsContent = "rootdir";
|
||||
|
||||
// setup templateImage depending on selected image storage
|
||||
const templateImage = d.querySelector("#template-image");
|
||||
// add template images to selector
|
||||
const templates = await requestAPI(`/access/users/${getCookie("username")}/ct-templates`, "GET");
|
||||
for (const template of templates.data) {
|
||||
templateImage.append(new Option(template.name, template.volid));
|
||||
}
|
||||
templateImage.selectedIndex = -1;
|
||||
|
||||
// setup custom password checker for containers
|
||||
const password = d.querySelector("#password");
|
||||
const confirmPassword = d.querySelector("#confirm-password");
|
||||
function validatePassword () {
|
||||
confirmPassword.setCustomValidity(password.value !== confirmPassword.value ? "Passwords Don't Match" : "");
|
||||
}
|
||||
password.addEventListener("change", validatePassword);
|
||||
confirmPassword.addEventListener("keyup", validatePassword);
|
||||
|
||||
d.showModal();
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { goToPage, setAppearance, requestAPI } from "./utils.js";
|
||||
import { error } from "./dialog.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
async function init () {
|
||||
await deleteAllCookies();
|
||||
setAppearance();
|
||||
|
||||
const formSubmitButton = document.querySelector("#submit");
|
||||
formSubmitButton.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
const form = document.querySelector("form");
|
||||
const formData = new FormData(form);
|
||||
|
||||
formSubmitButton.innerText = "Authenticating...";
|
||||
const ticket = await requestTicket(formData.get("username"), formData.get("password"), formData.get("realm"));
|
||||
if (ticket.status === 200) {
|
||||
formSubmitButton.innerText = "LOGIN";
|
||||
goToPage("index");
|
||||
}
|
||||
else if (ticket.status === 401) {
|
||||
error("Authenticaton failed.");
|
||||
formSubmitButton.innerText = "LOGIN";
|
||||
}
|
||||
else if (ticket.status === 408) {
|
||||
error("Network error.");
|
||||
formSubmitButton.innerText = "LOGIN";
|
||||
}
|
||||
else {
|
||||
error(`An error occured: ${JSON.stringify(ticket)}`);
|
||||
formSubmitButton.innerText = "LOGIN";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function requestTicket (username, password, realm) {
|
||||
const response = await requestAPI("/access/ticket", "POST", { username: `${username}@${realm}`, password }, false);
|
||||
return response;
|
||||
}
|
||||
|
||||
async function deleteAllCookies () {
|
||||
await requestAPI("/access/ticket", "DELETE");
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { setAppearance, getSetting, setSetting } from "./utils.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
function init () {
|
||||
setAppearance();
|
||||
|
||||
document.querySelectorAll("[id^=sync-]").forEach((v) => {
|
||||
v.addEventListener("change", handleSettingsChange);
|
||||
});
|
||||
document.querySelector(`#sync-${getSetting("sync-scheme")}`).checked = true;
|
||||
document.querySelector("#sync-rate").value = getSetting("sync-rate");
|
||||
|
||||
document.querySelectorAll("[id^=search-]").forEach((v) => {
|
||||
v.addEventListener("change", handleSettingsChange);
|
||||
});
|
||||
document.querySelector(`#search-${getSetting("search-criteria")}`).checked = true;
|
||||
|
||||
document.querySelector("#appearance-theme").addEventListener("change", handleSettingsChange);
|
||||
document.querySelector("#appearance-theme").value = getSetting("appearance-theme");
|
||||
|
||||
document.querySelector("#settings").addEventListener("submit", handleSaveSettings, false);
|
||||
}
|
||||
|
||||
function handleSettingsChange (event) {
|
||||
event.preventDefault();
|
||||
const form = new FormData(document.querySelector("#settings"));
|
||||
const saveBtn = document.querySelector("#save");
|
||||
if (getSetting("sync-scheme") !== form.get("sync-scheme")) {
|
||||
saveBtn.classList.remove("disabled");
|
||||
saveBtn.classList.add("enabled");
|
||||
}
|
||||
else if (getSetting("sync-rate") !== Number(form.get("sync-rate"))) {
|
||||
saveBtn.classList.remove("disabled");
|
||||
saveBtn.classList.add("enabled");
|
||||
}
|
||||
else if (getSetting("search-criteria") !== form.get("search-criteria")) {
|
||||
saveBtn.classList.remove("disabled");
|
||||
saveBtn.classList.add("enabled");
|
||||
}
|
||||
else if (getSetting("appearance-theme") !== form.get("appearance-theme")) {
|
||||
saveBtn.classList.remove("disabled");
|
||||
saveBtn.classList.add("enabled");
|
||||
}
|
||||
else {
|
||||
saveBtn.classList.remove("enabled");
|
||||
saveBtn.classList.add("disabled");
|
||||
}
|
||||
}
|
||||
|
||||
function handleSaveSettings (event) {
|
||||
event.preventDefault();
|
||||
const form = new FormData(document.querySelector("#settings"));
|
||||
const saveBtn = document.querySelector("#save");
|
||||
setSetting("sync-scheme", form.get("sync-scheme"));
|
||||
setSetting("sync-rate", Number(form.get("sync-rate")));
|
||||
setSetting("search-criteria", form.get("search-criteria"));
|
||||
setSetting("appearance-theme", form.get("appearance-theme"));
|
||||
saveBtn.classList.remove("enabled");
|
||||
saveBtn.classList.add("disabled");
|
||||
init();
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
export function setCookie (cname, cval) {
|
||||
document.cookie = `${cname}=${cval}`;
|
||||
}
|
||||
|
||||
export function getCookie (cname) {
|
||||
const name = cname + "=";
|
||||
const decodedCookie = decodeURIComponent(document.cookie);
|
||||
const ca = decodedCookie.split(";");
|
||||
for (let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) === " ") {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) === 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
export async function requestPVE (path, method, body = null) {
|
||||
const prms = new URLSearchParams(body);
|
||||
const content = {
|
||||
method,
|
||||
mode: "cors",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
}
|
||||
};
|
||||
if (method === "POST") {
|
||||
content.body = prms.toString();
|
||||
content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
|
||||
}
|
||||
|
||||
const response = await request(`${window.API}/proxmox${path}`, content);
|
||||
return response;
|
||||
}
|
||||
|
||||
export async function requestAPI (path, method, body = null) {
|
||||
const prms = new URLSearchParams(body);
|
||||
const content = {
|
||||
method,
|
||||
mode: "cors",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
}
|
||||
};
|
||||
if (method === "POST" || method === "DELETE") {
|
||||
content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
|
||||
}
|
||||
if (body) {
|
||||
content.body = prms.toString();
|
||||
}
|
||||
|
||||
const response = await request(`${window.API}${path}`, content);
|
||||
return response;
|
||||
}
|
||||
|
||||
export async function requestDash (path, method, body = null) {
|
||||
const prms = new URLSearchParams(body);
|
||||
const content = {
|
||||
method,
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
}
|
||||
};
|
||||
content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
|
||||
if (body) {
|
||||
content.body = prms.toString();
|
||||
}
|
||||
|
||||
const response = await request(`${window.DASH}${path}`, content);
|
||||
return response;
|
||||
}
|
||||
|
||||
async function request (url, content) {
|
||||
try {
|
||||
const response = await fetch(url, content);
|
||||
const contentType = response.headers.get("Content-Type");
|
||||
const res = {};
|
||||
|
||||
if (contentType === null) {
|
||||
res.data = null;
|
||||
res.status = response.status;
|
||||
}
|
||||
else if (contentType.includes("application/json")) {
|
||||
res.data = await response.json();
|
||||
res.status = response.status;
|
||||
}
|
||||
else if (contentType.includes("text/html")) {
|
||||
res.data = await response.text();
|
||||
res.status = response.status;
|
||||
}
|
||||
else if (contentType.includes("text/plain")) {
|
||||
res.data = await response.text();
|
||||
res.status = response.status;
|
||||
}
|
||||
else {
|
||||
res.data = null;
|
||||
res.status = response.status;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
return { status: response.status, error: res.data ? res.data.error : response.status };
|
||||
}
|
||||
else {
|
||||
return res;
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
return { status: 400, error };
|
||||
}
|
||||
}
|
||||
|
||||
export function goToPage (page, data = null) {
|
||||
const params = data ? (new URLSearchParams(data)).toString() : "";
|
||||
window.location.href = `${page}${data ? "?" : ""}${params}`;
|
||||
}
|
||||
|
||||
export function getURIData () {
|
||||
const url = new URL(window.location.href);
|
||||
return Object.fromEntries(url.searchParams);
|
||||
}
|
||||
|
||||
const settings = {
|
||||
"sync-scheme": {"type": String, "default": "always"},
|
||||
"sync-rate": {"type": Number, "default": 5},
|
||||
"search-criteria": {"type": String, "default": "fuzzy"},
|
||||
"appearance-theme": {"type": String, "default": "auto"}
|
||||
};
|
||||
|
||||
export function getSetting (key) {
|
||||
const meta = settings[key];
|
||||
let value = localStorage.getItem(key);
|
||||
if (value === null || meta === null) {
|
||||
value = meta.default;
|
||||
localStorage.setItem(key, meta.default);
|
||||
}
|
||||
|
||||
return meta.type(value);
|
||||
}
|
||||
|
||||
export function setSetting (key, value) {
|
||||
localStorage.setItem(key, value);
|
||||
}
|
||||
|
||||
export function setAppearance () {
|
||||
const theme = getSetting("appearance-theme");
|
||||
if (theme === "auto") {
|
||||
document.querySelector(":root").classList.remove("dark-theme", "light-theme");
|
||||
}
|
||||
else if (theme === "dark") {
|
||||
document.querySelector(":root").classList.remove("light-theme");
|
||||
document.querySelector(":root").classList.add("dark-theme");
|
||||
}
|
||||
else if (theme === "light") {
|
||||
document.querySelector(":root").classList.add("light-theme");
|
||||
document.querySelector(":root").classList.remove("dark-theme");
|
||||
}
|
||||
}
|
||||
|
||||
export function setIconSrc (icon, path) {
|
||||
icon.setAttribute("src", path);
|
||||
}
|
||||
|
||||
export function setIconAlt (icon, alt) {
|
||||
icon.setAttribute("alt", alt);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
{{define "backup-card"}}
|
||||
<backup-card data-volid="{{.Volid}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;">
|
||||
<p class="w3-col l2 m4 s8">{{.TimeFormatted}}</p>
|
||||
<p class="w3-col l6 m6 hide-small">{{.Notes}}</p>
|
||||
<p class="w3-col l2 hide-medium">{{.SizeFormatted}}</p>
|
||||
<div class="w3-col l2 m2 s4 flex row nowrap" style="height: 1lh;">
|
||||
<img id="edit-btn" class="clickable" alt="change notes" src="websrc/images/actions/backups/config.svg#symb">
|
||||
<img id="delete-btn" class="clickable" alt="delete backup" role="button" tabindex=0 src="websrc/images/actions/backups/delete-active.svg#symb">
|
||||
<img id="restore-btn" class="clickable" alt="restore from backup" role="button" tabindex=0 src="websrc/images/actions/backups/restore.svg#symb">
|
||||
</div>
|
||||
</div>
|
||||
<template id="edit-dialog">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<link rel="stylesheet" href="websrc/css/form.css">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Edit Backup
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto;" id="form">
|
||||
<label for="rate">Notes</label>
|
||||
<textarea id="notes" name="notes" class="w3-input w3-border">{{.Notes}}</textarea>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
<template id="delete-dialog">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<link rel="stylesheet" href="websrc/css/form.css">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Delete Backup
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<p>
|
||||
Are you sure you want to <strong>delete</strong> the backup made at {{.TimeFormatted}}?
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
<template id="restore-dialog">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<link rel="stylesheet" href="websrc/css/form.css">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Restore From Backup?
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<p>
|
||||
Are you sure you want to <strong>restore</strong> from the backup made at {{.TimeFormatted}}?
|
||||
<br>
|
||||
<br>
|
||||
<strong>WARNING: Restoring from a backup will WIPE disks NOT contained in the backup!!!</strong>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</backup-card>
|
||||
{{end}}
|
||||
|
||||
{{define "backups-add-backup"}}
|
||||
<button type="button" id="backup-add" class="w3-button" aria-label="Create Backup">
|
||||
<span class="large" style="margin: 0;">Create Backup</span>
|
||||
<img class="small" role="img" style="height: 1lh; width: 1lh;" alt="Create Backup" src="websrc/images/actions/network/add.svg#symb">
|
||||
</button>
|
||||
<template id="create-backup-dialog">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<link rel="stylesheet" href="websrc/css/form.css">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Create Backup
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto;" id="form">
|
||||
<label for="rate">Notes</label>
|
||||
<textarea id="notes" name="notes" class="w3-input w3-border">{{.Notes}}</textarea>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
{{end}}
|
||||
@@ -0,0 +1,35 @@
|
||||
{{/* <head> common across all pages */}}
|
||||
{{define "head"}}
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.global.Organization}} - dashboard</title>
|
||||
<link rel="icon" href="websrc/images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<script>
|
||||
window.PVE = "{{.global.PVE}}";
|
||||
window.API = "{{.global.API}}";
|
||||
window.DASH = "{{.global.DASH}}";
|
||||
</script>
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<link rel="stylesheet" href="websrc/css/nav.css">
|
||||
<link rel="stylesheet" href="websrc/css/form.css">
|
||||
{{end}}
|
||||
|
||||
{{/* <header> common across all pages */}}
|
||||
{{define "header"}}
|
||||
<header>
|
||||
<h1>{{.global.Organization}}</h1>
|
||||
<label for="navtoggle">☰</label>
|
||||
<input type="checkbox" id="navtoggle">
|
||||
<nav id="navigation">
|
||||
{{if eq .page "login"}}
|
||||
<a href="login" aria-current="page">Login</a>
|
||||
{{else}}
|
||||
<a href="index" {{if eq .page "index"}} aria-current="page" {{end}}>Instances</a>
|
||||
<a href="account" {{if eq .page "account"}} aria-current="page" {{end}}>Account</a>
|
||||
<a href="settings" {{if eq .page "settings"}} aria-current="page" {{end}}>Settings</a>
|
||||
<a href="login">Logout</a>
|
||||
{{end}}
|
||||
</nav>
|
||||
</header>
|
||||
{{end}}
|
||||
@@ -0,0 +1,561 @@
|
||||
{{define "proctype-input"}}
|
||||
<img alt="CPU Type" src="websrc/images/resources/cpu.svg#symb">
|
||||
<label for="proctype">CPU Type</label>
|
||||
{{template "select" .}}
|
||||
<div></div>
|
||||
{{end}}
|
||||
|
||||
{{define "cores-input"}}
|
||||
<img alt="CPU Amount" src="websrc/images/resources/cpu.svg#symb">
|
||||
<label for="cores">CPU Amount</label>
|
||||
<input id="cores" name="cores" class="w3-input w3-border" type="number" required value="{{.}}">
|
||||
<p>Cores</p>
|
||||
{{end}}
|
||||
|
||||
{{define "memory-input"}}
|
||||
<img alt="Memory Amount" src="websrc/images/resources/ram.svg#symb">
|
||||
<label for="ram">Memory</label>
|
||||
<input id="ram" name="ram" class="w3-input w3-border" type="number" required value="{{.}}">
|
||||
<p>MiB</p>
|
||||
{{end}}
|
||||
|
||||
{{define "swap-input"}}
|
||||
<img alt="Swap Amount" src="websrc/images/resources/swap.svg#symb">
|
||||
<label for="swap">Swap</label>
|
||||
<input id="swap" name="swap" class="w3-input w3-border" type="number" required value="{{.}}">
|
||||
<p>MiB</p>
|
||||
{{end}}
|
||||
|
||||
{{define "volumes"}}
|
||||
{{range $k,$v := .Volumes}}
|
||||
{{if eq $v.Type "rootfs"}}
|
||||
{{ template "volume-rootfs" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
|
||||
{{else if eq $v.Type "mp"}}
|
||||
{{ template "volume-mp" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
|
||||
{{else if eq $v.Type "ide"}}
|
||||
{{ template "volume-ide" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
|
||||
{{else if or (eq $v.Type "scsi") (eq $v.Type "sata")}}
|
||||
{{ template "volume-scsi" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
|
||||
{{else if eq $v.Type "unused"}}
|
||||
{{ template "volume-unused" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
|
||||
{{else}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{define "volumes-add-disk"}}
|
||||
<button type="button" id="disk-add" class="w3-button" aria-label="Add New Disk">
|
||||
<span class="large" style="margin: 0;">Add Disk</span>
|
||||
<img class="small" style="height: 1lh; width: 1lh;" alt="Add New Disk" src="websrc/images/actions/disk/add-disk.svg#symb">
|
||||
</button>
|
||||
<template id="add-disk-dialog">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Create New Disk
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
{{if eq .config.Type "VM"}}
|
||||
<label for="device">SCSI</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="30" value="0" required>
|
||||
{{else}}
|
||||
<label for="device">MP</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="255" value="0" required>
|
||||
{{end}}
|
||||
<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select" required></select>
|
||||
<label for="size">Size (GiB)</label><input class="w3-input w3-border" name="size" id="size" type="number" min="0" max="131072" required>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
{{end}}
|
||||
|
||||
{{define "volumes-add-cd"}}
|
||||
<button type="button" id="cd-add" class="w3-button" aria-label="Add New CD">
|
||||
<span class="large" style="margin: 0;">Mount CD</span>
|
||||
<img class="small" style="height: 1lh; width: 1lh;" alt="Add New CDROM" src="websrc/images/actions/disk/add-cd.svg#symb">
|
||||
</button>
|
||||
<template id="add-cd-dialog">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Mount a CDROM
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="device">IDE</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="3" required>
|
||||
<label for="iso-select">Image</label><select class="w3-select w3-border" name="iso-select" id="iso-select" required></select>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-rootfs"}}
|
||||
<img data-volume={{.Name}} alt="Drive" src="websrc/images/resources/drive.svg#symb">
|
||||
<p>{{.Name}}</p>
|
||||
<p>{{.Volume.File}}</p>
|
||||
<div>
|
||||
{{template "volume-action-move" .}}
|
||||
{{template "volume-action-resize" .}}
|
||||
{{template "volume-action-none" .}}
|
||||
{{template "volume-action-none" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-mp"}}
|
||||
<img data-volume={{.Name}} alt="Drive" src="websrc/images/resources/drive.svg#symb">
|
||||
<p>{{.Name}}</p>
|
||||
<p>{{.Volume.File}}</p>
|
||||
<div>
|
||||
{{template "volume-action-move" .}}
|
||||
{{template "volume-action-resize" .}}
|
||||
{{template "volume-action-detach" .}}
|
||||
{{template "volume-action-delete-inactive" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-ide"}}
|
||||
<img data-volume={{.Name}} alt="Drive" src="websrc/images/resources/drive.svg#symb">
|
||||
<p>{{.Name}}</p>
|
||||
<p>{{.Volume.File}}</p>
|
||||
<div>
|
||||
{{template "volume-action-none" .}}
|
||||
{{template "volume-action-none" .}}
|
||||
{{template "volume-action-none" .}}
|
||||
{{template "volume-action-delete" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-scsi"}}
|
||||
<img data-volume={{.Name}} alt="Drive" src="websrc/images/resources/drive.svg#symb">
|
||||
<p>{{.Name}}</p>
|
||||
<p>{{.Volume.File}}</p>
|
||||
<div>
|
||||
{{template "volume-action-move" .}}
|
||||
{{template "volume-action-resize" .}}
|
||||
{{template "volume-action-detach" .}}
|
||||
{{template "volume-action-delete-inactive" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-unused"}}
|
||||
<img data-volume={{.Name}} alt="Drive" src="websrc/images/resources/drive.svg#symb">
|
||||
<p>{{.Name}}</p>
|
||||
<p>{{.Volume.File}}</p>
|
||||
<div>
|
||||
{{template "volume-action-move-inactive" .}}
|
||||
{{template "volume-action-resize-inactive" .}}
|
||||
{{template "volume-action-attach" .}}
|
||||
{{template "volume-action-delete" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-action-move"}}
|
||||
<volume-action data-type="move" data-volume="{{.Name}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img class="clickable" alt="Move {{.Name}}" src="websrc/images/actions/disk/move-active.svg#symb">
|
||||
<template id="dialog-template">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Move {{.Name}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select"></select>
|
||||
<label for="delete-check">Delete Source</label><input class="w3-input w3-border" name="delete-check" id="delete-check" type="checkbox" checked required>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</volume-action>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-action-move-inactive"}}
|
||||
<volume-action data-type="none" data-volume="{{.Name}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img alt="" src="websrc/images/actions/disk/move-inactive.svg#symb">
|
||||
</template>
|
||||
</volume-action>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-action-resize"}}
|
||||
<volume-action data-type="resize" data-volume="{{.Name}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img class="clickable" alt="Resize {{.Name}}" src="websrc/images/actions/disk/resize-active.svg#symb">
|
||||
<template id="dialog-template">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Resize {{.Name}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="size-increment">Size Increment (GiB)</label>
|
||||
<input class="w3-input w3-border" name="size-increment" id="size-increment" type="number" min="0" max="131072">
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</volume-action>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-action-resize-inactive"}}
|
||||
<volume-action data-type="none" data-volume="{{.Name}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img alt="" src="websrc/images/actions/disk/resize-inactive.svg#symb">
|
||||
</template>
|
||||
</volume-action>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-action-delete"}}
|
||||
<volume-action data-type="delete" data-volume="{{.Name}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img class="clickable" alt="Delete {{.Name}}" src="websrc/images/actions/disk/delete-active.svg#symb">
|
||||
<template id="dialog-template">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Delete {{.Name}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<p>Are you sure you want to <strong>delete</strong> disk {{.Name}}?</p>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</volume-action>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-action-delete-inactive"}}
|
||||
<volume-action data-type="none" data-volume="{{.Name}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img alt="" src="websrc/images/actions/disk/delete-inactive.svg#symb">
|
||||
</template>
|
||||
</volume-action>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-action-attach"}}
|
||||
<volume-action data-type="attach" data-volume="{{.Name}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img class="clickable" alt="Attach {{.Name}}" src="websrc/images/actions/disk/attach.svg#symb">
|
||||
<template id="dialog-template">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Attach {{.Name}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
{{if eq .InstanceType "VM"}}
|
||||
<label for="device">SCSI</label>
|
||||
<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="30" required>
|
||||
{{else}}
|
||||
<label for="device">MP</label>
|
||||
<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="255" required>
|
||||
<label for="device">Path</label>
|
||||
<input class="w3-input w3-border" name="mp" id="mp" required>
|
||||
{{end}}
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</volume-action>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-action-detach"}}
|
||||
<volume-action data-type="detach" data-volume="{{.Name}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img class="clickable" alt="Detach {{.Name}}" src="websrc/images/actions/disk/detach.svg#symb">
|
||||
<template id="dialog-template">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Detach {{.Name}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<p>Are you sure you want to detach disk {{.Name}}?</p>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</volume-action>
|
||||
{{end}}
|
||||
|
||||
{{define "volume-action-none"}}
|
||||
<volume-action data-type="none">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img alt="" src="websrc/images/common/blank.svg">
|
||||
</template>
|
||||
</volume-action>
|
||||
{{end}}
|
||||
|
||||
{{define "nets"}}
|
||||
{{range $k,$v := .}}
|
||||
{{template "net" $v}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{define "nets-add-net"}}
|
||||
<button type="button" id="network-add" class="w3-button" aria-label="Add New Network Interface">
|
||||
<span class="large" style="margin: 0;">Add Network</span>
|
||||
<img class="small" style="height: 1lh; width: 1lh;" alt="Add New Network Interface" src="websrc/images/actions/network/add.svg#symb">
|
||||
</button>
|
||||
<template id="add-net-dialog">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Create Network Interface
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="netid">Interface ID</label><input type="number" id="netid" name="netid" class="w3-input w3-border">
|
||||
<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
|
||||
{{if eq .config.Type "CT"}}
|
||||
<label for="name">Interface Name</label><input type="text" id="name" name="name" class="w3-input w3-border">
|
||||
{{end}}
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
{{end}}
|
||||
|
||||
{{define "net"}}
|
||||
<img data-network="{{.Net_ID}}" alt="Net {{.Net_ID}}" src="websrc/images/resources/network.svg#symb">
|
||||
<p>{{.Net_ID}}</p>
|
||||
<p>{{.Value}}</p>
|
||||
<div>
|
||||
<network-action data-type="config" data-network="{{.Net_ID}}" data-value="{{.Value}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img class="clickable" alt="Configure Net {{.Net_ID}}" src="websrc/images/actions/network/config.svg#symb">
|
||||
<template id="dialog-template">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Edit {{.Net_ID}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</network-action>
|
||||
<network-action data-type="delete" data-network="{{.Net_ID}}" data-value="{{.Value}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img class="clickable" alt="Delete Net {{.Net_ID}}" src="websrc/images/actions/network/delete-active.svg#symb">
|
||||
<template id="dialog-template">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Delete {{.Net_ID}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<p>Are you sure you want to <strong>delete</strong> {{.Net_ID}}?</p>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</network-action>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "devices"}}
|
||||
{{range $k,$v := .}}
|
||||
{{template "device" $v}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{define "devices-add-device"}}
|
||||
<button type="button" id="device-add" class="w3-button" aria-label="Add New PCIe Device">
|
||||
<span class="large" style="margin: 0;">Add Device</span>
|
||||
<img class="small" style="height: 1lh; width: 1lh;" alt="Add New PCIe Device" src="websrc/images/actions/device/add.svg#symb">
|
||||
</button>
|
||||
<template id="add-device-dialog">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Add Expansion Card
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="hostpci">Device Bus</label><input type="number" id="hostpci" name="hostpci" class="w3-input w3-border">
|
||||
<label for="device">Device</label><select id="device" name="device" required></select>
|
||||
<label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
{{end}}
|
||||
|
||||
{{define "device"}}
|
||||
<img data-device="{{.Device_ID}}" alt="Device {{.Device_ID}}" src="websrc/images/resources/device.svg#symb">
|
||||
<p>{{.Device_ID}}</p>
|
||||
<p>{{.Device_Name}}</p>
|
||||
<div>
|
||||
<device-action data-type="config" data-device="{{.Device_ID}}" data-value="{{.Device_ID}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img class="clickable" alt="Configure Device {{.Device_ID}}" src="websrc/images/actions/device/config.svg#symb">
|
||||
<template id="dialog-template">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Edit Expansion Card {{.Device_ID}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="device">Device</label><select id="device" name="device" required></select><label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</device-action>
|
||||
<device-action data-type="delete" data-device="{{.Device_ID}}" data-value="{{.Device_ID}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<img class="clickable" alt="Delete Device {{.Device_ID}}" src="websrc/images/actions/device/delete-active.svg#symb">
|
||||
<template id="dialog-template">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
remove Expansion Card {{.Device_ID}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<p>Are you sure you want to <strong>remove</strong> {{.Device_ID}}?</p>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</device-action>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "boot"}}
|
||||
{{template "boot-container" Map "ID" "enabled" "Name" "Enabled" "Targets" .Enabled}}
|
||||
<hr style="padding: 0; margin: 0;">
|
||||
{{template "boot-container" Map "ID" "disabled" "Name" "Disabled" "Targets" .Disabled}}
|
||||
{{end}}
|
||||
|
||||
{{define "boot-container"}}
|
||||
<draggable-container id="{{.ID}}" data-group="boot">
|
||||
<template shadowrootmode="open">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
div.draggable-item.ghost {
|
||||
border: 1px dashed var(--main-text-color);
|
||||
border-radius: 5px;
|
||||
margin: -1px;
|
||||
}
|
||||
div.draggable-item {
|
||||
cursor: grab;
|
||||
}
|
||||
div.draggable-item img {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
div.draggable-item p {
|
||||
margin: 0;
|
||||
}
|
||||
div.draggable-item p.volume-file {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#wrapper {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
<label>{{.Name}}</label>
|
||||
<div id="wrapper">
|
||||
{{range .Targets}}
|
||||
{{template "boot-target" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
</template>
|
||||
</draggable-container>
|
||||
{{end}}
|
||||
|
||||
{{define "boot-target"}}
|
||||
{{if .volume_id}}
|
||||
<div class="draggable-item" data-value="{{.volume_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 0.5em; align-items: center;">
|
||||
<img alt="Drag" src="websrc/images/actions/drag.svg#symb">
|
||||
<img alt="Volume" src="websrc/images/resources/drive.svg#symb">
|
||||
<p class="volume-id">{{.volume_id}}</p>
|
||||
<p class="volume-file">{{.file}}</p>
|
||||
</div>
|
||||
{{else if .net_id}}
|
||||
<div class="draggable-item" data-value="{{.net_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 0.5em; align-items: center;">
|
||||
<img alt="Drag" src="websrc/images/actions/drag.svg#symb">
|
||||
<img alt="Net" src="websrc/images/resources/network.svg#symb">
|
||||
<p class="volume-id">{{.net_id}}</p>
|
||||
<p class="volume-file">{{.value}}</p>
|
||||
</div>
|
||||
{{else}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,163 @@
|
||||
{{define "instance-card"}}
|
||||
<instance-card data-type="{{.Type}}" data-status="{{.Status}}" data-vmid="{{.VMID}}" data-name="{{.Name}}" data-node="{{.Node}}" data-nodestatus="{{.NodeStatus}}">
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
}
|
||||
a, svg, img {
|
||||
line-height: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a img {
|
||||
vertical-align: unset;
|
||||
}
|
||||
#instance-name {
|
||||
overflow-x: hidden;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.flex { /* needed for some reason to avoid a flickering issue on chrome ONLY */
|
||||
display: flex;
|
||||
}
|
||||
.row { /* needed for some reason to avoid a flickering issue on chrome ONLY */
|
||||
flex-direction: row;
|
||||
column-gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
.nowrap { /* needed for some reason to avoid a flickering issue on chrome ONLY */
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
@media screen and (width >=993px) {
|
||||
.hide-large {display: none !important;}
|
||||
}
|
||||
@media screen and (width <=993px) and (width >=601px){
|
||||
.hide-large {display: none !important;}
|
||||
.hide-medium {display:none !important}
|
||||
}
|
||||
@media screen and (width <=601px) and (width >=440px){
|
||||
.hide-large {display: none !important;}
|
||||
.hide-medium {display:none !important}
|
||||
.hide-small {display:none !important}
|
||||
}
|
||||
@media screen and (width <= 440px) {
|
||||
.hide-large {display: none !important;}
|
||||
.hide-medium {display:none !important}
|
||||
.hide-small {display:none !important}
|
||||
.hide-tiny { display: none !important;}
|
||||
}
|
||||
</style>
|
||||
<p>{{.VMID}}</p>
|
||||
<p id="instance-name">{{.Name}}</p>
|
||||
<p class="hide-small">{{.Type}}</p>
|
||||
<div class="flex row nowrap hide-tiny">
|
||||
{{if eq .Status "running"}}
|
||||
<img id="status" alt="instance is running" src="websrc/images/status/active.svg#symb">
|
||||
{{else if eq .Status "stopped"}}
|
||||
<img id="status" alt="instance is stopped" src="websrc/images/status/inactive.svg#symb">
|
||||
{{else if eq .Status "loading"}}
|
||||
<img id="status" alt="instance is loading" src="websrc/images/status/loading.svg#symb">
|
||||
{{else}}
|
||||
<img id="status" alt="instance is loading" src="websrc/images/status/loading.svg#symb">
|
||||
{{end}}
|
||||
<p>{{.Status}}</p>
|
||||
</div>
|
||||
<p class="hide-medium">{{.Node}}</p>
|
||||
<div class="flex row nowrap hide-medium">
|
||||
{{if eq .NodeStatus "online"}}
|
||||
<img alt="node is online" src="websrc/images/status/active.svg#symb">
|
||||
{{else if eq .NodeStatus "offline"}}
|
||||
<img alt="node is offline" src="websrc/images/status/inactive.svg#symb">
|
||||
{{else if eq .NodeStatus "unknown"}}
|
||||
<img alt="node is offline" src="websrc/images/status/inactive.svg#symb">
|
||||
{{else}}
|
||||
{{end}}
|
||||
<p>{{.NodeStatus}}</p>
|
||||
</div>
|
||||
<div class="flex row nowrap">
|
||||
{{if and (eq .NodeStatus "online") (eq .Status "running")}}
|
||||
<img id="power-btn" class="clickable" alt="shutdown instance" role="button" tabindex=0 src="websrc/images/actions/instance/stop.svg#symb">
|
||||
<img id="configure-btn" alt="" aria-disabled="true" role="none" src="websrc/images/actions/instance/config-inactive.svg#symb">
|
||||
<img id="backup-btn" alt="" aria-disabled="true" role="none" src="websrc/images/actions/instance/backup-inactive.svg#symb">
|
||||
<a href="{{.ConsolePath}}" target="_blank">
|
||||
<img id="console-btn" class="clickable" alt="open console" src="websrc/images/actions/instance/console-active.svg#symb">
|
||||
</a>
|
||||
<img id="delete-btn" alt="" aria-disabled="true" role="none" src="websrc/images/actions/instance/delete-inactive.svg#symb">
|
||||
{{else if and (eq .NodeStatus "online") (eq .Status "stopped")}}
|
||||
<img id="power-btn" class="clickable" alt="start instance" role="button" tabindex=0 src="websrc/images/actions/instance/start.svg#symb">
|
||||
<a href="{{.ConfigPath}}">
|
||||
<img id="configure-btn" class="clickable" alt="change configuration" src="websrc/images/actions/instance/config-active.svg#symb">
|
||||
</a>
|
||||
<a href="{{.BackupsPath}}">
|
||||
<img id="backup-btn" class="clickable" alt="manage backups" src="websrc/images/actions/instance/backup-active.svg#symb">
|
||||
</a>
|
||||
<img id="console-btn" alt="" aria-disabled="true" role="none" src="websrc/images/actions/instance/console-inactive.svg#symb">
|
||||
<img id="delete-btn" class="clickable" alt="delete instance" role="button" tabindex=0 src="websrc/images/actions/instance/delete-active.svg#symb">
|
||||
{{else if and (eq .NodeStatus "online") (eq .Status "loading")}}
|
||||
<img id="power-btn" alt="" aria-disabled="true" role="none" src="websrc/images/actions/instance/loading.svg#symb">
|
||||
<img id="configure-btn" alt="" aria-disabled="true" role="none" src="websrc/images/actions/instance/config-inactive.svg#symb">
|
||||
<img id="backup-btn" alt="" aria-disabled="true" role="none" src="websrc/images/actions/instance/backup-inactive.svg#symb">
|
||||
<img id="console-btn" alt="" aria-disabled="true" role="none" src="websrc/images/actions/instance/console-inactive.svg#symb">
|
||||
<img id="delete-btn" alt="" aria-disabled="true" role="none" src="websrc/images/actions/instance/delete-inactive.svg#symb">
|
||||
{{else}}
|
||||
{{end}}
|
||||
</div>
|
||||
<template id="power-dialog">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<link rel="stylesheet" href="websrc/css/form.css">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
{{if eq .Status "running"}}
|
||||
Stop {{.VMID}}
|
||||
{{else if eq .Status "stopped"}}
|
||||
Start {{.VMID}}
|
||||
{{else}}
|
||||
{{end}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
{{if eq .Status "running"}}
|
||||
<p>Are you sure you want to <strong>stop</strong> {{.VMID}}?</p>
|
||||
{{else if eq .Status "stopped"}}
|
||||
<p>Are you sure you want to <strong>start</strong> {{.VMID}}?</p>
|
||||
{{else}}
|
||||
{{end}}
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
<template id="delete-dialog">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<link rel="stylesheet" href="websrc/css/form.css">
|
||||
<dialog class="w3-container w3-card w3-border-0">
|
||||
<p class="w3-large" id="prompt">
|
||||
Delete {{.VMID}}
|
||||
</p>
|
||||
<div id="body">
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<p>Are you sure you want to <strong>delete</strong> {{.VMID}}?</p>
|
||||
</form>
|
||||
</div>
|
||||
<div id="controls" class="w3-center w3-container">
|
||||
<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
|
||||
<button id="confirm" value="confirm" form="form" class="w3-button w3-margin">CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
</template>
|
||||
</instance-card>
|
||||
{{end}}
|
||||
@@ -0,0 +1,34 @@
|
||||
{{define "pool-resources"}}
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Pool: {{.PoolID}}</h3>
|
||||
<p id="vmid">VMID Range: {{.AllowedVMIDRange.Min}} - {{.AllowedVMIDRange.Max}}</p>
|
||||
<p id="nodes">Nodes: {{MapKeys .AllowedNodes ", "}}</p>
|
||||
<p id="backups">Max Backups Per Instance: {{.AllowedBackups.MaxPerInstance}} Max Backups Total: {{.AllowedBackups.MaxTotal}}</p>
|
||||
<div>
|
||||
{{range $category, $v := .ResourceCharts}}
|
||||
{{if eq $category ""}}
|
||||
<h4>Generic</h4>
|
||||
{{else}}
|
||||
<h4>{{$category}}</h4>
|
||||
{{end}}
|
||||
<div class="resource-container">
|
||||
{{range $v}}
|
||||
{{if .Display}}
|
||||
{{if eq .Type "numeric"}}
|
||||
{{template "resource-chart" .}}
|
||||
{{end}}
|
||||
{{if eq .Type "storage"}}
|
||||
{{template "resource-chart" .}}
|
||||
{{end}}
|
||||
{{if eq .Type "list"}}
|
||||
{{range .Resources}}
|
||||
{{template "resource-chart" .}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
{{end}}
|
||||
@@ -0,0 +1,44 @@
|
||||
{{define "resource-chart"}}
|
||||
<resource-chart>
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="websrc/modules/w3.css">
|
||||
<link rel="stylesheet" href="websrc/css/style.css">
|
||||
<style>
|
||||
#container{
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
padding: 0.5em;
|
||||
}
|
||||
progress {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
height: 1em;
|
||||
appearance: none;
|
||||
}
|
||||
#caption {
|
||||
text-align: center;
|
||||
margin-top: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
progress::-moz-progress-bar {
|
||||
background: #{{.ColorHex}};
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
background: var(--main-text-color);
|
||||
}
|
||||
progress::-webkit-progress-value {
|
||||
background: #{{.ColorHex}};
|
||||
}
|
||||
</style>
|
||||
<div id="container">
|
||||
<progress value="{{.Used}}" max="{{.Max}}" id="resource"></progress>
|
||||
<label id="caption" for="resource">
|
||||
<span>{{.Name}}</span>
|
||||
<span>{{.Avail}} {{.Prefix}}{{.Unit}} Avaliable</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</resource-chart>
|
||||
{{end}}
|
||||
@@ -0,0 +1,27 @@
|
||||
{{/*
|
||||
Select: generic data driven <select> element template
|
||||
.ID = (string) select element id & name attribute
|
||||
.Required = (bool) select element required attribute
|
||||
.Options = ([]Options) array of Options
|
||||
*/}}
|
||||
{{define "select"}}
|
||||
<select class="w3-select w3-border" id="{{.ID}}" name="{{.ID}}" {{if .Required}}required{{end}}>
|
||||
{{range .Options}}
|
||||
{{template "option" .}}
|
||||
{{end}}
|
||||
</select>
|
||||
{{end}}
|
||||
|
||||
{{/*
|
||||
Options: generic data driven <option> element template
|
||||
.Selected = (bool) option element selected attribute
|
||||
.Value = (string) option element value attribute
|
||||
.Display = (string) option element innerText
|
||||
*/}}
|
||||
{{define "option"}}
|
||||
{{if .Selected}}
|
||||
<option value="{{.Value}}" selected>{{.Display}}</option>
|
||||
{{else}}
|
||||
<option value="{{.Value}}">{{.Display}}</option>
|
||||
{{end}}
|
||||
{{end}}
|
||||
Reference in new issue
Block a user