sse event can now trigger individual cards
This commit is contained in:
lllllllillllllillll
parent
2dc22fd75a
commit
785b54d5aa
5 changed files with 43 additions and 85 deletions
|
|
@ -1,5 +1,4 @@
|
|||
import { readFileSync } from 'fs';
|
||||
import { appCard } from '../components/appCard.js';
|
||||
|
||||
let templatesJSON = readFileSync('./templates/templates.json');
|
||||
let templates = JSON.parse(templatesJSON).templates;
|
||||
|
|
|
|||
|
|
@ -78,4 +78,10 @@ router.get("/logout", Logout);
|
|||
import { Uninstall } from "../functions/uninstall.js"
|
||||
|
||||
// router.post("/install", auth, Install);
|
||||
router.post("/uninstall", auth, Uninstall);
|
||||
router.post("/uninstall", auth, Uninstall);
|
||||
|
||||
|
||||
router.get("/card", (req, res) => {
|
||||
console.log('card route hit');
|
||||
res.send('ok');
|
||||
});
|
||||
34
server.js
34
server.js
|
|
@ -77,21 +77,35 @@ let serverMetrics = async () => {
|
|||
}
|
||||
setInterval(serverMetrics, 1000);
|
||||
|
||||
let sent_list = '';
|
||||
|
||||
let containersArray = [];
|
||||
let sentArray = [];
|
||||
|
||||
function addContainer(container, state) {
|
||||
containersArray.push({ container, state });
|
||||
}
|
||||
|
||||
router.get('/sse_event', (req, res) => {
|
||||
res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', });
|
||||
let eventCheck = setInterval(async() => {
|
||||
let all_containers = '';
|
||||
res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' });
|
||||
let eventCheck = setInterval(async () => {
|
||||
containersArray = [];
|
||||
await docker.listContainers({ all: true }).then(containers => {
|
||||
containers.forEach(container => {
|
||||
all_containers += `${container.Names}: ${container.State}\n`;
|
||||
let name = container.Names[0].replace('/', '');
|
||||
addContainer(name, container.State);
|
||||
});
|
||||
});
|
||||
if ((all_containers != sent_list) || (event == true)) {
|
||||
sent_list = all_containers;
|
||||
event = false;
|
||||
res.write(`event: ${eventType}\n`);
|
||||
res.write(`data: there was an event!\n\n`);
|
||||
|
||||
if ((JSON.stringify(containersArray) !== JSON.stringify(sentArray)) || event) {
|
||||
console.log('Event triggered');
|
||||
for (let i = 0; i < containersArray.length; i++) {
|
||||
const container = containersArray[i];
|
||||
if (!sentArray[i] || JSON.stringify(container) !== JSON.stringify(sentArray[i])) {
|
||||
res.write(`event: ${container.container}\n`);
|
||||
res.write(`data: ${JSON.stringify(container)}\n\n`);
|
||||
}
|
||||
}
|
||||
sentArray = containersArray.slice();
|
||||
}
|
||||
}, 1000);
|
||||
req.on('close', () => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="col-sm-6 col-lg-3 pt-1">
|
||||
<div class="col-sm-6 col-lg-3 pt-1" hx-get="/card" hx-trigger="sse:AppName" hx-swap="outerHTML">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card-stamp card-stamp-sm">
|
||||
|
|
|
|||
|
|
@ -18,15 +18,23 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class=" d-flex flex-column">
|
||||
<body class="d-flex flex-column">
|
||||
<script src="/js/demo-theme.js"></script>
|
||||
<div class="page page-center">
|
||||
|
||||
|
||||
<form class="container container-tight py-4" action="/register" method="POST" novalidate>
|
||||
|
||||
|
||||
<div class="text-center">
|
||||
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||
<img src="/images/logo.png" alt="DweebUI" title="DweebUI" height="100px">
|
||||
</h1>
|
||||
</div>
|
||||
<div class="text-center mb-4">
|
||||
<a href="#" class="navbar-brand navbar-brand-autodark d-none"><img src="/images/logo.svg" height="36" alt=""></a>
|
||||
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||
<img src="/images/dweebui.svg" alt="DweebUI" title="DweebUI" class="navbar-brand-image">
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
|
@ -81,76 +89,7 @@
|
|||
<input type="text" class="form-control" id="secret" name="secret">
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Avatar</label>
|
||||
<div class="row g-2">
|
||||
<div class="col-6 col-sm-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="avatar" type="radio" value="rus.jpg" class="form-imagecheck-input" checked/>
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="/images/avatars/rus.jpg" alt="Rich Uncle Skeleton" title="Rich Uncle Skeleton" class="form-imagecheck-image" width="100px">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="avatar" type="radio" value="burns.jpg" class="form-imagecheck-input"/>
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="/images/avatars/burns.jpg" alt="Montgomery Burns" title="Montgomery Burns" class="form-imagecheck-image" width="100px">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="avatar" type="radio" value="frank.jpg" class="form-imagecheck-input" />
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="/images/avatars/frank.jpg" alt="Frank Grimes" title= "Frank Grimes" class="form-imagecheck-image" width="100px">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="avatar" type="radio" value="moe.jpg" class="form-imagecheck-input"/>
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="/images/avatars/moe.jpg" alt="Moe Szyslak" title="Moe Szyslak" class="form-imagecheck-image" width="100px">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="avatar" type="radio" value="poochie.jpg" class="form-imagecheck-input" />
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="/images/avatars/poochie.jpg" alt="Poochie" title="Poochie" class="form-imagecheck-image" width="100px">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="avatar" type="radio" value="skinner.jpg" class="form-imagecheck-input" />
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="/images/avatars/skinner.jpg" alt="Seymour Skinner" title="Seymour Skinner" class="form-imagecheck-image" width="100px">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="avatar" type="radio" value="moleman.png" class="form-imagecheck-input" />
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="/images/avatars/moleman.png" alt="Hans Moleman" title="Hans Moleman" class="form-imagecheck-image" width="100px">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="avatar" type="radio" value="duffman.png" class="form-imagecheck-input" />
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="/images/avatars/duffman.png" alt="Duffman" title="Duffman" class="form-imagecheck-image" width="100px">
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-check">
|
||||
<input type="checkbox" class="form-check-input" name="warning"/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue