552 lines
25 KiB
Cheetah
552 lines
25 KiB
Cheetah
{{define "proctype-input"}}
|
|
<svg aria-label="CPU Type"><use href="images/resources/cpu.svg#symb"></svg>
|
|
<label for="proctype">CPU Type</label>
|
|
{{template "select" .}}
|
|
<div></div>
|
|
{{end}}
|
|
|
|
{{define "cores-input"}}
|
|
<svg aria-label="CPU Amount"><use href="images/resources/cpu.svg#symb"></svg>
|
|
<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"}}
|
|
<svg aria-label="Memory Amount"><use href="images/resources/ram.svg#symb"></svg>
|
|
<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"}}
|
|
<svg aria-label="Swap Amount"><use href="images/resources/swap.svg#symb"></svg>
|
|
<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>
|
|
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Disk"><use href="images/actions/disk/add-disk.svg#symb"></use></svg>
|
|
</button>
|
|
<template id="add-disk-dialog">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">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>
|
|
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New CDROM"><use href="images/actions/disk/add-cd.svg#symb"></use></svg>
|
|
</button>
|
|
<template id="add-cd-dialog">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
{{end}}
|
|
|
|
{{define "volume-rootfs"}}
|
|
<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
|
|
<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"}}
|
|
<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
|
|
<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"}}
|
|
<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
|
|
<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"}}
|
|
<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
|
|
<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"}}
|
|
<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
|
|
<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="css/style.css">
|
|
<svg class="clickable" aria-label="Move {{.Name}}"><use href="images/actions/disk/move-active.svg#symb"></svg>
|
|
<template id="dialog-template">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">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="css/style.css">
|
|
<svg aria-label=""><use href="images/actions/disk/move-inactive.svg#symb"></svg>
|
|
</template>
|
|
</volume-action>
|
|
{{end}}
|
|
|
|
{{define "volume-action-resize"}}
|
|
<volume-action data-type="resize" data-volume="{{.Name}}">
|
|
<template shadowrootmode="open">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<svg class="clickable" aria-label="Resize {{.Name}}"><use href="images/actions/disk/resize-active.svg#symb"></svg>
|
|
<template id="dialog-template">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">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="css/style.css">
|
|
<svg aria-label=""><use href="images/actions/disk/resize-inactive.svg#symb"></svg>
|
|
</template>
|
|
</volume-action>
|
|
{{end}}
|
|
|
|
{{define "volume-action-delete"}}
|
|
<volume-action data-type="delete" data-volume="{{.Name}}">
|
|
<template shadowrootmode="open">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<svg class="clickable" aria-label="Delete {{.Name}}"><use href="images/actions/disk/delete-active.svg#symb"></svg>
|
|
<template id="dialog-template">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">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="css/style.css">
|
|
<svg aria-label=""><use href="images/actions/disk/delete-inactive.svg#symb"></svg>
|
|
</template>
|
|
</volume-action>
|
|
{{end}}
|
|
|
|
{{define "volume-action-attach"}}
|
|
<volume-action data-type="attach" data-volume="{{.Name}}">
|
|
<template shadowrootmode="open">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<svg class="clickable" aria-label="Attach {{.Name}}"><use href="images/actions/disk/attach.svg#symb"></svg>
|
|
<template id="dialog-template">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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>
|
|
{{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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">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="css/style.css">
|
|
<svg class="clickable" aria-label="Detach {{.Name}}"><use href="images/actions/disk/detach.svg#symb"></svg>
|
|
<template id="dialog-template">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">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="css/style.css">
|
|
<svg aria-label=""></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>
|
|
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Network Interface"><use href="images/actions/network/add.svg#symb"></use></svg>
|
|
</button>
|
|
<template id="add-net-dialog">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
{{end}}
|
|
|
|
{{define "net"}}
|
|
<svg data-network="{{.Net_ID}}" aria-label="Net {{.Net_ID}}"><use href="images/resources/network.svg#symb"></svg>
|
|
<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="css/style.css">
|
|
<svg class="clickable" aria-label="Configure Net {{.Net_ID}}"><use href="images/actions/network/config.svg#symb"></svg>
|
|
<template id="dialog-template">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">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="css/style.css">
|
|
<svg class="clickable" aria-label="Delete Net {{.Net_ID}}"><use href="images/actions/network/delete-active.svg#symb"></svg>
|
|
<template id="dialog-template">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">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>
|
|
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New PCIe Device"><use href="images/actions/device/add.svg#symb"></use></svg>
|
|
</button>
|
|
<template id="add-device-dialog">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
{{end}}
|
|
|
|
{{define "device"}}
|
|
<svg data-device="{{.Device_ID}}" aria-label="Device {{.Device_ID}}"><use href="images/resources/device.svg#symb"></svg>
|
|
<p>{{.Device_ID}}</p>
|
|
<p>{{.Device_Name}}</p>
|
|
<div>
|
|
<device-action data-type="config" data-device="{{.Device_ID}}" data-value="{{.Value}}">
|
|
<template shadowrootmode="open">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<svg class="clickable" aria-label="Configure Device {{.Device_ID}}"><use href="images/actions/device/config.svg#symb"></svg>
|
|
<template id="dialog-template">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
</template>
|
|
</device-action>
|
|
<device-action data-type="delete" data-device="{{.Device_ID}}" data-value="{{.Value}}">
|
|
<template shadowrootmode="open">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<svg class="clickable" aria-label="Delete Device {{.Device_ID}}"><use href="images/actions/device/delete-active.svg#symb"></svg>
|
|
<template id="dialog-template">
|
|
<dialog class="w3-container w3-card w3-border-0">
|
|
<p class="w3-large" id="prompt" style="text-align: center;">
|
|
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" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
|
|
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">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 svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
#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: 10px; align-items: center;">
|
|
<svg aria-label="Drag"><use href="images/actions/drag.svg#symb"></use></svg>
|
|
<svg aria-label="Volume"><use href="images/resources/drive.svg#symb"></use></svg>
|
|
<p style="margin: 0px;">{{.volume_id}}</p>
|
|
<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.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: 10px; align-items: center;">
|
|
<svg aria-label="Drag"><use href="images/actions/drag.svg#symb"></use></svg>
|
|
<svg aria-label="Net"><use href="images/resources/network.svg#symb"></use></svg>
|
|
<p style="margin: 0px;">{{.net_id}}</p>
|
|
<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.value}}</p>
|
|
</div>
|
|
{{else}}
|
|
{{end}}
|
|
{{end}} |