0ct0pu5/DweebUI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new permissions modal

Browse source
This commit is contained in:
lllllllillllllillll 2024-02-05 23:51:36 -08:00
parent 883a65faae
commit 70ec201924
9 changed files with 321 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -5,7 +5,8 @@
* Improved Dockerfile. * Improved Dockerfile.
* Express sessions configured to use memorystore. * Express sessions configured to use memorystore.
* Improved chart rendering. * Improved chart rendering.
* Fixed chart scaling. * Improvements to container charts.
* Created Supporters page.
## v0.20 (Jan 20th 2024) - The rewrite. Jumping all the way to v0.20. ## v0.20 (Jan 20th 2024) - The rewrite. Jumping all the way to v0.20.
* Changed to ES6 imports. * Changed to ES6 imports.

24
components/containerCard.js
View file

@ -85,7 +85,7 @@ export const containerCard = (data) => {
<div class="dropdown-menu dropdown-menu-end"> <div class="dropdown-menu dropdown-menu-end">
<button class="dropdown-item text-secondary" data-hx-get="/hide" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="hide" value="hide">Hide</button> <button class="dropdown-item text-secondary" data-hx-get="/hide" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="hide" value="hide">Hide</button>
<button class="dropdown-item text-secondary" data-hx-get="/hide" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="reset" value="reset">Reset View</button> <button class="dropdown-item text-secondary" data-hx-get="/hide" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="reset" value="reset">Reset View</button>
<button class="dropdown-item text-secondary" name="${name}" id="permissions" value="permissions" data-bs-toggle="modal" data-bs-target="#${name}_permissions">Permissions</button> <button class="dropdown-item text-secondary" name="${name}" id="permissions" data-hx-get="/modal" data-hx-target="#modals-here" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">Permissions</button>
</div> </div>
</div> </div>
</div> </div>
@ -212,18 +212,35 @@ export const containerCard = (data) => {
<div class="mb-2"> <div class="mb-2">
<div class="divide-y"> <div class="divide-y">
<div class="row">
<div class="col-9">
<div class="d-flex align-items-center">
User:
<select class="form-select ms-2">
<option value="john_doe" selected hidden>John Doe</option>
<option value="john_doe">John Doe</option>
<option value="jane_doe">Jane Doe</option>
</select>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-9"> <div class="col-9">
<label class="row text-start"> <label class="row text-start">
<span class="col">Install</span> <span class="col">
View
</span>
</label> </label>
</div> </div>
<div class="col-3"> <div class="col-3">
<label class="form-check form-check-single form-switch text-end"> <label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_volumes"> <input class="form-check-input" type="checkbox" name="remove_image">
</label> </label>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-9"> <div class="col-9">
<label class="row text-start"> <label class="row text-start">
@ -238,6 +255,7 @@ export const containerCard = (data) => {
</label> </label>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-9"> <div class="col-9">
<label class="row text-start"> <label class="row text-start">

269
components/permissions_modal.js Normal file
View file

@ -0,0 +1,269 @@
export const permissionsModal = (data) => {
let modal = `
<div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Permissions</h5>
</div>
<div class="modal-body">
<form action="" id="details_modal" method="POST">
<div class="accordion" id="modal-accordion">
<div class="accordion-item" style="border: 1px solid grey;">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button collapsed row" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false">
<span class="avatar avatar-sm bg-green-lt col-3 text-start">JD</span>
<div class="col text-end" style="margin-right: 10px;">Jane Doe</div>
</button>
</h2>
<div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
<div class="accordion-body pt-0">
<div class="mb-2">
<div class="">
<div class="row mb-3">
<div class="col-9">
<label class="row text-start">
<span class="col">
All
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_image">
</label>
</div>
</div>
<div class="row mb-2">
<div class="col-9">
<label class="row text-start">
<span class="col">
View
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_image">
</label>
</div>
</div>
<div class="row mb-2">
<div class="col-9">
<label class="row text-start">
<span class="col">
Uninstall
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_image">
</label>
</div>
</div>
<div class="row mb-2">
<div class="col-9">
<label class="row text-start">
<span class="col">
Edit
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_backups">
</label>
</div>
</div>
<div class="row mb-2">
<div class="col-9">
<label class="row text-start">
<span class="col">
Upgrade
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_backups">
</label>
</div>
</div>
<div class="row mb-2">
<div class="col-9">
<label class="row text-start">
<span class="col">
Start
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_backups">
</label>
</div>
</div>
<div class="row mb-2">
<div class="col-9">
<label class="row text-start">
<span class="col">
Stop
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_backups">
</label>
</div>
</div>
<div class="row mb-2">
<div class="col-9">
<label class="row text-start">
<span class="col">
Pause
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_backups">
</label>
</div>
</div>
<div class="row mb-2">
<div class="col-9">
<label class="row text-start">
<span class="col">
Restart
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_backups">
</label>
</div>
</div>
<div class="row mb-2">
<div class="col-9">
<label class="row text-start">
<span class="col">
Logs
</span>
</label>
</div>
<div class="col-3">
<label class="form-check form-check-single form-switch text-end">
<input class="form-check-input" type="checkbox" name="remove_backups">
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item mt-2" style="border: 1px solid grey;">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
Volumes
</button>
</h2>
<div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
<div class="accordion-body pt-0">
</div>
</div>
</div>
<div class="accordion-item mt-2" style="border: 1px solid grey;">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
Environment Variables
</button>
</h2>
<div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
<div class="accordion-body pt-0">
</div>
</div>
</div>
<div class="accordion-item mt-2" style="border: 1px solid grey;">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
Labels
</button>
</h2>
<div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
<div class="accordion-body pt-0">
</div>
</div>
</div>
<div class="accordion-item mt-2" style="border: 1px solid grey;">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-5" aria-expanded="false">
Extras
</button>
</h2>
<div id="collapse-5" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
<div class="accordion-body pt-0">
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="row">
<label class="form-check form-switch col">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">Reset</span>
</label>
<div class="col">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" disabled="">Reset</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Update</button>
</div>
</div>
</div>
</div>
</div>`;
return modal;
}

29
server.js
View file

@ -9,6 +9,7 @@ import { sequelize, Container } from './database/models.js';
import { currentLoad, mem, networkStats, fsSize, dockerContainerStats, dockerImages, networkInterfaces } from 'systeminformation'; import { currentLoad, mem, networkStats, fsSize, dockerContainerStats, dockerImages, networkInterfaces } from 'systeminformation';
import { containerCard } from './components/containerCard.js'; import { containerCard } from './components/containerCard.js';
import { modal } from './components/modal.js'; import { modal } from './components/modal.js';
import { permissionsModal } from './components/permissions_modal.js';
export var docker = new Docker(); export var docker = new Docker();
const app = express(); const app = express();
@ -17,7 +18,7 @@ const port = process.env.PORT || 8000;
let [ hidden, activeEvent, cardList, clicked ] = ['', '', '', false]; let [ hidden, activeEvent, cardList, clicked ] = ['', '', '', false];
let sentList = ''; let sentList = '';
let SSE = false; let SSE = false;
let clicks = 0; let thanks = 0;
// Session middleware // Session middleware
const sessionMiddleware = session({ const sessionMiddleware = session({
@ -298,6 +299,14 @@ router.get('/sse_event', (req, res) => {
router.get('/modal', async (req, res) => { router.get('/modal', async (req, res) => {
let name = req.header('hx-trigger-name'); let name = req.header('hx-trigger-name');
let id = req.header('hx-trigger');
if (id == 'permissions') {
let form = permissionsModal();
res.send(form);
return;
}
let containerId = docker.getContainer(name); let containerId = docker.getContainer(name);
let containerInfo = await containerId.inspect(); let containerInfo = await containerId.inspect();
@ -326,8 +335,6 @@ router.get('/modal', async (req, res) => {
ports: ports_list, ports: ports_list,
link: 'localhost', link: 'localhost',
} }
console.log(container_info);
let form = modal(container_info); let form = modal(container_info);
res.send(form); res.send(form);
@ -349,13 +356,13 @@ router.get('/chart', async (req, res) => {
// slice them down to the last 15 values // slice them down to the last 15 values
stats[name].cpuArray = stats[name].cpuArray.slice(-15); stats[name].cpuArray = stats[name].cpuArray.slice(-15);
stats[name].ramArray = stats[name].ramArray.slice(-15); stats[name].ramArray = stats[name].ramArray.slice(-15);
// replace the chart with the new data
let chart = ` let chart = `
<script> <script>
${name}chart.updateSeries([{ ${name}chart.updateSeries([{
data: ${JSON.stringify(stats[name].cpuArray)} data: [${stats[name].cpuArray}]
}, { }, {
data: ${JSON.stringify(stats[name].ramArray)} data: [${stats[name].ramArray}]
}]) }])
</script>` </script>`
res.send(chart); res.send(chart);
@ -363,8 +370,12 @@ router.get('/chart', async (req, res) => {
router.get('/clicker', async (req, res) => { router.get('/thank', async (req, res) => {
let name = req.header('hx-trigger-name'); let name = req.header('hx-trigger-name');
clicks++; thanks++;
res.send(clicks.toString()); let data = thanks.toString();
if (thanks > 999) {
data = 'Did you really click 1000 times?!';
}
res.send(data);
}); });

13
views/dashboard.html
View file

@ -146,11 +146,10 @@
<div id="modals-here" class="modal modal-blur fade" style="display: none" aria-hidden="false" tabindex="-1"> <div id="modals-here" class="modal modal-blur fade" style="display: none" aria-hidden="false" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document"> <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
</div> </div>
</div> </div>
</div> </div>
<div class="modal modal-blur fade" id="log_view" tabindex="-1" style="display: none;" aria-hidden="true"> <div class="modal modal-blur fade" id="log_view" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
@ -203,7 +202,7 @@
enabled: true enabled: true
}, },
animations: { animations: {
enabled: false enabled: true
} }
}, },
fill: { fill: {
@ -229,19 +228,13 @@
strokeDashArray: 4 strokeDashArray: 4
}, },
xaxis: { xaxis: {
labels: {
padding: 0
},
tooltip: { tooltip: {
enabled: false enabled: false
} }
}, },
yaxis: { yaxis: {
min: 0, min: 0,
max: 102, max: 100,
labels: {
padding: 4
}
}, },
colors: [tabler.getColor("primary"), tabler.getColor("gray-600")], colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
legend: { legend: {

3
views/navbar.html
View file

@ -141,8 +141,9 @@
<!-- <a href="#" class="dropdown-item">Status</a> --> <!-- <a href="#" class="dropdown-item">Status</a> -->
<a href="/account" class="dropdown-item">Account</a> <a href="/account" class="dropdown-item">Account</a>
<!-- <a href="#" class="dropdown-item">Feedback</a> --> <!-- <a href="#" class="dropdown-item">Feedback</a> -->
<!-- <div class="dropdown-divider"></div> -->
<a href="/settings" class="dropdown-item">Settings</a> <a href="/settings" class="dropdown-item">Settings</a>
<!-- <div class="dropdown-divider"></div> -->
<a href="/logout" class="dropdown-item">Logout</a> <a href="/logout" class="dropdown-item">Logout</a>
</div> </div>
</div> </div>

1
views/register.html
View file

@ -8,6 +8,7 @@
<!-- CSS files --> <!-- CSS files -->
<link href="/css/tabler.min.css" rel="stylesheet"/> <link href="/css/tabler.min.css" rel="stylesheet"/>
<link href="/css/demo.min.css" rel="stylesheet"/> <link href="/css/demo.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
<style> <style>
@import url('/fonts/inter.css'); @import url('/fonts/inter.css');
:root { :root {

2
views/sidebar.html
View file

@ -2,7 +2,7 @@
<div class="card-body"> <div class="card-body">
<h4 class="subheader">Menu</h4> <h4 class="subheader">Menu</h4>
<div class="list-group list-group-transparent"> <div class="list-group list-group-transparent">
<a href="/account" class="list-group-item list-group-item-action d-flex align-items-center active">Accounts</a> <a href="/account" class="list-group-item list-group-item-action d-flex align-items-center">Accounts</a>
<a href="/settings" class="list-group-item list-group-item-action d-flex align-items-center">Settings</a> <a href="/settings" class="list-group-item list-group-item-action d-flex align-items-center">Settings</a>
</div> </div>
<h4 class="subheader mt-4">Other</h4> <h4 class="subheader mt-4">Other</h4>

4
views/supporters.html
View file

@ -50,9 +50,9 @@
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col"> <div class="col">
<span type="button" class="avatar avatar-md bg-green-lt" hx-trigger="load, click" hx-get="/clicker" hx-target="#count" name="MM" title="Micheal M" style="margin-right: 5px;">mm</span> <span type="button" class="avatar avatar-md bg-green-lt" hx-trigger="load, click" hx-get="/thank" hx-target="#count" name="MM" title="Micheal M" style="margin-right: 5px;">mm</span>
<span type="button" class="avatar avatar-md bg-cyan-lt" hx-trigger="load, click" hx-get="/clicker" hx-target="#count" name="PD" title="Peter D" style="margin-right: 5px;">pd</span> <span type="button" class="avatar avatar-md bg-cyan-lt" hx-trigger="click" hx-get="/thank" hx-target="#count" name="PD" title="Peter D" style="margin-right: 5px;">pd</span>
</div> </div>