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

implement basic web server for dashboard,

Browse Source 
use templates to do basic SSR on head and header
This commit is contained in:
Arthur Lu
2025-02-25 21:35:11 +00:00
parent 84cbe0e45d
commit cfceb32134
21 changed files with 302 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/embed.go Normal file
View File

@@ -0,0 +1,43 @@
package embed
import (
"embed"
)
//go:embed css/*
var CSS_fs embed.FS
//go:embed images/*
var Images_fs embed.FS
//go:embed modules/*
var Modules_fs embed.FS
//go:embed scripts/*
var Scripts_fs embed.FS
//go:embed html/*
var HTML embed.FS
//go:embed templates/*
var Templates embed.FS
/*
//go:embed html/account.html
var Account string
//go:embed html/index.html
var Index string
//go:embed html/instance.html
var Instance string
//go:embed html/login.html
var Login string
//go:embed html/settings.html
var Settings string
//go:embed templates/base.html
var Base string
*/

24
web/html/account.html
View File

@@ -1,15 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Organization}} - dashboard</title>
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/form.css">
{{template "head" .}}
<script src="scripts/account.js" type="module"></script>
<script src="modules/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -43,15 +35,7 @@
</head>
<body>
<header>
<h1>{{.Organization}}</h1>
<label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle">
<nav id="navigation">
<a href="index.html">Instances</a>
<a href="account.html" aria-current="page">Account</a>
<a href="settings.html">Settings</a>
<a href="login.html">Logout</a>
</nav>
{{template "header" .}}
</header>
<main>
<h2>Account</h2>
@@ -65,8 +49,8 @@
<section class="w3-card w3-padding">
<div class="flex row nowrap">
<h3>Password</h3>
<button class="w3-button w3-margin" id="change-password">Change Password</button>
</div>
<button class="w3-button w3-margin" id="change-password" type="button">Change Password</button>
</div>
</section>
<section class="w3-card w3-padding">
<h3>Cluster Resources</h3>

20
web/html/index.html
View File

@@ -1,15 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Organization}} - dashboard</title>
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/form.css">
{{template "head" .}}
<script src="scripts/index.js" type="module"></script>
<script src="modules/wfa.js" type="module"></script>
<style>
@@ -33,15 +25,7 @@
</head>
<body>
<header>
<h1>{{.Organization}}</h1>
<label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle">
<nav id="navigation">
<a href="index.html" aria-current="page">Instances</a>
<a href="account.html">Account</a>
<a href="settings.html">Settings</a>
<a href="login.html">Logout</a>
</nav>
{{template "header" .}}
</header>
<main>
<section>

20
web/html/instance.html
View File

@@ -1,15 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Organization}} - dashboard</title>
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/form.css">
{{template "head" .}}
<script src="scripts/instance.js" type="module"></script>
<script src="scripts/draggable.js" type="module"></script>
<script src="modules/Sortable.min.js"></script>
@@ -25,15 +17,7 @@
</head>
<body>
<header>
<h1>{{.Organization}}</h1>
<label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle">
<nav id="navigation">
<a href="index.html" aria-current="page">Instances</a>
<a href="account.html">Account</a>
<a href="settings.html">Settings</a>
<a href="login.html">Logout</a>
</nav>
{{template "header" .}}
</header>
<main>
<section>

19
web/html/login.html
View File

@@ -1,25 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Organization}} - dashboard</title>
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/form.css">
{{template "head" .}}
<script src="scripts/login.js" type="module"></script>
</head>
<body>
<header>
<h1>{{.Organization}}</h1>
<label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle">
<nav id="navigation">
<a href="login.html" aria-current="page">Login</a>
</nav>
{{template "header" .}}
</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;">
@@ -32,7 +19,7 @@
<label for="realm">Realm</label>
<select class="w3-select w3-border" id="realm" name="realm"></select>
<div class="w3-center">
<button class="w3-button w3-margin" id="submit">LOGIN</button>
<button class="w3-button w3-margin" id="submit" type="submit">LOGIN</button>
</div>
</form>
</div>

22
web/html/settings.html
View File

@@ -1,15 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Organization}} - dashboard</title>
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/form.css">
{{template "head" .}}
<script src="scripts/settings.js" type="module"></script>
<style>
legend {
@@ -34,19 +26,11 @@
</head>
<body>
<header>
<h1>{{.Organization}}</h1>
<label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle">
<nav id="navigation">
<a href="index.html">Instances</a>
<a href="account.html">Account</a>
<a href="settings.html" aria-current="page">Settings</a>
<a href="login.html">Logout</a>
</nav>
{{template "header" .}}
</header>
<main>
<h2>Settings</h2>
<form id = "settings">
<form id="settings">
<section class="w3-card w3-padding">
<h3>Synchronization Settings</h3>
<fieldset>

3
web/scripts/clientsync.js
View File

@@ -1,5 +1,4 @@
import { getSyncSettings, requestAPI } from "./utils.js";
import { API } from "../vars.js";
export async function setupClientSync (callback) {
const { scheme, rate } = getSyncSettings();
@@ -22,7 +21,7 @@ export async function setupClientSync (callback) {
}
else if (scheme === "interrupt") {
callback();
const socket = new WebSocket(`wss://${API.replace("https://", "")}/sync/interrupt`);
const socket = new WebSocket(`wss://${window.API.replace("https://", "")}/sync/interrupt`);
socket.addEventListener("open", (event) => {
socket.send(`rate ${rate}`);
});

3
web/scripts/index.js
View File

@@ -2,7 +2,6 @@ import { requestPVE, requestAPI, goToPage, setAppearance, getSearchSettings, goT
import { alert, dialog } from "./dialog.js";
import { setupClientSync } from "./clientsync.js";
import wfaInit from "../modules/wfa.js";
import { PVE } from "../vars.js";
class InstanceCard extends HTMLElement {
constructor () {
@@ -220,7 +219,7 @@ class InstanceCard extends HTMLElement {
if (!this.actionLock && this.status === "running") {
const data = { console: `${this.type === "qemu" ? "kvm" : "lxc"}`, vmid: this.vmid, vmname: this.name, node: this.node.name, resize: "off", cmd: "" };
data[`${this.type === "qemu" ? "novnc" : "xtermjs"}`] = 1;
goToURL(PVE, data, true);
goToURL(window.PVE, data, true);
}
}

6
web/scripts/utils.js
View File

@@ -1,5 +1,3 @@
import { API } from "../vars.js";
export const resourcesConfig = {
cpu: {
name: "CPU Type",
@@ -224,7 +222,7 @@ export async function requestPVE (path, method, body = null) {
content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
}
const response = await request(`${API}/proxmox${path}`, content);
const response = await request(`${window.API}/proxmox${path}`, content);
return response;
}
@@ -245,7 +243,7 @@ export async function requestAPI (path, method, body = null) {
content.body = prms.toString();
}
const response = await request(`${API}${path}`, content);
const response = await request(`${window.API}${path}`, content);
return response;
}

3
web/template.vars.js
View File

@@ -1,3 +0,0 @@
export const API = "https://paas.mydomain.example/api"; // the proxmox-aas api
export const PVE = "https://pve.mydomain.example"; // the proxmox api
export const organization = "mydomain"; // org name used in page title and nav bar

31
web/templates/base.html Normal file
View File

@@ -0,0 +1,31 @@
{{define "head"}}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Organization}} - dashboard</title>
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script>
window.PVE = "{{.PVE}}";
window.API = "{{.API}}";
</script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/form.css">
{{end}}
{{define "header"}}
<h1>{{.Organization}}</h1>
<label for="navtoggle">&#9776;</label>
<input type="checkbox" id="navtoggle">
<nav id="navigation">
{{if eq .Page "login"}}
<a href="login.html" aria-current="page">Login</a>
{{else}}
<a href="index.html" {{if eq .Page "index"}} aria-current="page" {{end}}>Instances</a>
<a href="account.html" {{if eq .Page "account"}} aria-current="page" {{end}}>Account</a>
<a href="settings.html" {{if eq .Page "settings"}} aria-current="page" {{end}}>Settings</a>
<a href="login.html">Logout</a>
{{end}}
</nav>
{{end}}