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.
* Express sessions configured to use memorystore.
* 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.
* 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">
<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" 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>
@ -212,18 +212,35 @@ export const containerCard = (data) => {
<div class="mb-2">
<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="col-9">
<label class="row text-start">
<span class="col">Install</span>
<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_volumes">
<input class="form-check-input" type="checkbox" name="remove_image">
</label>
</div>
</div>
<div class="row">
<div class="col-9">
<label class="row text-start">
@ -238,6 +255,7 @@ export const containerCard = (data) => {
</label>
</div>
</div>
<div class="row">
<div class="col-9">
<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 { containerCard } from './components/containerCard.js';
import { modal } from './components/modal.js';
import { permissionsModal } from './components/permissions_modal.js';
export var docker = new Docker();
const app = express();
@ -17,7 +18,7 @@ const port = process.env.PORT || 8000;
let [ hidden, activeEvent, cardList, clicked ] = ['', '', '', false];
let sentList = '';
let SSE = false;
let clicks = 0;
let thanks = 0;
// Session middleware
const sessionMiddleware = session({
@ -298,6 +299,14 @@ router.get('/sse_event', (req, res) => {
router.get('/modal', async (req, res) => {
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 containerInfo = await containerId.inspect();
@ -326,8 +335,6 @@ router.get('/modal', async (req, res) => {
ports: ports_list,
link: 'localhost',
}
console.log(container_info);
let form = modal(container_info);
res.send(form);
@ -349,13 +356,13 @@ router.get('/chart', async (req, res) => {
// slice them down to the last 15 values
stats[name].cpuArray = stats[name].cpuArray.slice(-15);
stats[name].ramArray = stats[name].ramArray.slice(-15);
// replace the chart with the new data
let chart = `
<script>
${name}chart.updateSeries([{
data: ${JSON.stringify(stats[name].cpuArray)}
data: [${stats[name].cpuArray}]
}, {
data: ${JSON.stringify(stats[name].ramArray)}
data: [${stats[name].ramArray}]
}])
</script>`
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');
clicks++;
res.send(clicks.toString());
thanks++;
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 class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
</div>
</div>
</div>
<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">
@ -203,7 +202,7 @@
enabled: true
},
animations: {
enabled: false
enabled: true
}
},
fill: {
@ -229,19 +228,13 @@
strokeDashArray: 4
},
xaxis: {
labels: {
padding: 0
},
tooltip: {
enabled: false
}
},
yaxis: {
min: 0,
max: 102,
labels: {
padding: 4
}
max: 100,
},
colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
legend: {

3
views/navbar.html
View file

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

1
views/register.html
View file

@ -8,6 +8,7 @@
<!-- CSS files -->
<link href="/css/tabler.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>
@import url('/fonts/inter.css');
:root {

2
views/sidebar.html
View file

@ -2,7 +2,7 @@
<div class="card-body">
<h4 class="subheader">Menu</h4>
<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>
</div>
<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="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>