Fixed appCard catagories. refactoring dashboard.js
This commit is contained in:
lllllllillllllillll
parent
bb84828ffe
commit
c9da3bd30b
4 changed files with 134 additions and 73 deletions
|
|
@ -9,6 +9,8 @@ templates = templates.sort((a, b) => {
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
export const Apps = (req, res) => {
|
||||
|
||||
let page = Number(req.params.page) || 1;
|
||||
|
|
@ -35,9 +37,21 @@ export const Apps = (req, res) => {
|
|||
let image = templates[i].image;
|
||||
let logo = templates[i].logo;
|
||||
|
||||
let categories = '';
|
||||
|
||||
// set data.catagories to 'other' if data.catagories is empty or undefined
|
||||
if (templates[i].categories == null || templates[i].categories == undefined || templates[i].categories == '') {
|
||||
templates[i].categories = ['Other'];
|
||||
}
|
||||
|
||||
for (let c = 0; c < templates[i].categories.length; c++) {
|
||||
categories += CatagoryColor(templates[i].categories[c]);
|
||||
}
|
||||
|
||||
appCard = appCard.replace(/AppShortName/g, name);
|
||||
appCard = appCard.replace(/AppDesc/g, desc);
|
||||
appCard = appCard.replace(/AppLogo/g, logo);
|
||||
appCard = appCard.replace(/AppCategories/g, categories);
|
||||
|
||||
apps_list += appCard;
|
||||
}
|
||||
|
|
@ -104,4 +118,50 @@ export const appSearch = async (req, res) => {
|
|||
apps_list: apps_list
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function CatagoryColor(category) {
|
||||
switch (category) {
|
||||
case 'Other':
|
||||
return '<span class="badge bg-blue-lt">Other</span> ';
|
||||
case 'Productivity':
|
||||
return '<span class="badge bg-blue-lt">Productivity</span> ';
|
||||
case 'Tools':
|
||||
return '<span class="badge bg-blue-lt">Tools</span> ';
|
||||
case 'Dashboard':
|
||||
return '<span class="badge bg-blue-lt">Dashboard</span> ';
|
||||
case 'Communication':
|
||||
return '<span class="badge bg-azure-lt">Communication</span> ';
|
||||
case 'Media':
|
||||
return '<span class="badge bg-azure-lt">Media</span> ';
|
||||
case 'CMS':
|
||||
return '<span class="badge bg-azure-lt">CMS</span> ';
|
||||
case 'Monitoring':
|
||||
return '<span class="badge bg-indigo-lt">Monitoring</span> ';
|
||||
case 'LDAP':
|
||||
return '<span class="badge bg-purple-lt">LDAP</span> ';
|
||||
case 'Arr':
|
||||
return '<span class="badge bg-purple-lt">Arr</span> ';
|
||||
case 'Database':
|
||||
return '<span class="badge bg-red-lt">Database</span> ';
|
||||
case 'Paid':
|
||||
return '<span class="badge bg-red-lt" title="This is a paid product or contains paid features.">Paid</span> ';
|
||||
case 'Gaming':
|
||||
return '<span class="badge bg-pink-lt">Gaming</span> ';
|
||||
case 'Finance':
|
||||
return '<span class="badge bg-orange-lt">Finance</span> ';
|
||||
case 'Networking':
|
||||
return '<span class="badge bg-yellow-lt">Networking</span> ';
|
||||
case 'Authentication':
|
||||
return '<span class="badge bg-lime-lt">Authentication</span> ';
|
||||
case 'Development':
|
||||
return '<span class="badge bg-green-lt">Development</span> ';
|
||||
case 'Media Server':
|
||||
return '<span class="badge bg-teal-lt">Media Server</span> ';
|
||||
case 'Downloaders':
|
||||
return '<span class="badge bg-cyan-lt">Downloaders</span> ';
|
||||
default:
|
||||
return ''; // default to other if the category is not recognized
|
||||
}
|
||||
}
|
||||
|
|
@ -160,6 +160,69 @@ export const Installs = async (req, res) => {
|
|||
res.send('ok');
|
||||
}
|
||||
|
||||
|
||||
async function containerInfo (containerName) {
|
||||
|
||||
let card = readFileSync('./views/partials/containerCard.html', 'utf8');
|
||||
let container = docker.getContainer(containerName);
|
||||
let info = await container.inspect();
|
||||
|
||||
let name = containerName;
|
||||
let state = info.State.Status;
|
||||
let state_color = '';
|
||||
switch (state) {
|
||||
case 'running':
|
||||
state_color = 'green';
|
||||
break;
|
||||
case 'exited':
|
||||
state_color = 'red';
|
||||
state = 'stopped';
|
||||
break;
|
||||
case 'paused':
|
||||
state_color = 'orange';
|
||||
break;
|
||||
}
|
||||
|
||||
let wrapped = name;
|
||||
if (name.length > 13) { wrapped = name.slice(0, 10) + '...'; }
|
||||
if (name.startsWith('dweebui')) { disable = 'disabled=""'; }
|
||||
let disable = "";
|
||||
let chartName = name.replace(/-/g, '');
|
||||
|
||||
let trigger = 'data-hx-trigger="load, every 3s"';
|
||||
if (state != 'running') { trigger = 'data-hx-trigger="load"'; }
|
||||
|
||||
let imageVersion = info.Config.Image.split('/');
|
||||
let service = imageVersion[imageVersion.length - 1].split(':')[0];
|
||||
|
||||
let ports_list = [];
|
||||
try {
|
||||
for (const [key, value] of Object.entries(info.HostConfig.PortBindings)) {
|
||||
let ports = {
|
||||
check: 'checked',
|
||||
external: value[0].HostPort,
|
||||
internal: key.split('/')[0],
|
||||
protocol: key.split('/')[1]
|
||||
}
|
||||
ports_list.push(ports);
|
||||
}
|
||||
} catch {}
|
||||
let external_port = ports_list[0]?.external || 0;
|
||||
let internal_port = ports_list[0]?.internal || 0;
|
||||
|
||||
card = card.replace(/AppName/g, name);
|
||||
card = card.replace(/AppShortName/g, wrapped);
|
||||
card = card.replace(/AppIcon/g, service);
|
||||
card = card.replace(/AppState/g, state);
|
||||
card = card.replace(/StateColor/g, state_color);
|
||||
card = card.replace(/ChartName/g, chartName);
|
||||
card = card.replace(/data-trigger=""/, trigger);
|
||||
if (hidden.includes(name)) { card = ''; }
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
|
||||
async function addCard(container, list) {
|
||||
let card = readFileSync('./views/partials/containerCard.html', 'utf8');
|
||||
let containerId = docker.getContainer(container);
|
||||
|
|
@ -178,12 +241,12 @@ async function addCard(container, list) {
|
|||
// if ( external_port == undefined ) { external_port = 0; }
|
||||
// if ( internal_port == undefined ) { internal_port = 0; }
|
||||
|
||||
let state_indicator = 'green';
|
||||
let state_color = 'green';
|
||||
if (state == 'exited') {
|
||||
state = 'stopped';
|
||||
state_indicator = 'red';
|
||||
state_color = 'red';
|
||||
} else if (state == 'paused') {
|
||||
state_indicator = 'orange';
|
||||
state_color = 'orange';
|
||||
}
|
||||
|
||||
let trigger = 'data-hx-trigger="load, every 3s"';
|
||||
|
|
@ -209,13 +272,13 @@ async function addCard(container, list) {
|
|||
card = card.replace(/AppShortName/g, wrapped);
|
||||
card = card.replace(/AppIcon/g, service);
|
||||
card = card.replace(/AppState/g, state);
|
||||
card = card.replace(/StateColor/g, state_indicator);
|
||||
card = card.replace(/StateColor/g, state_color);
|
||||
card = card.replace(/ChartName/g, chartName);
|
||||
card = card.replace(/AppNameState/g, `${container}State`);
|
||||
card = card.replace(/data-trigger=""/, trigger);
|
||||
if (list == 'newCards') {
|
||||
newCards += card;
|
||||
} else {
|
||||
} else if (list == 'cardList'){
|
||||
cardList += card;
|
||||
}
|
||||
});
|
||||
|
|
@ -231,73 +294,11 @@ export const updateCards = async (req, res) => {
|
|||
|
||||
|
||||
|
||||
export const Card = (req, res) => {
|
||||
export const Card = async (req, res) => {
|
||||
let name = req.header('hx-trigger-name');
|
||||
console.log(`Updated card for ${name}`);
|
||||
|
||||
let newCard = readFileSync('./views/partials/containerCard.html', 'utf8');
|
||||
|
||||
let containerId = docker.getContainer(name);
|
||||
containerId.inspect().then(data => {
|
||||
|
||||
let state = data.State.Status;
|
||||
|
||||
let state_indicator = 'green';
|
||||
if (state == 'exited') {
|
||||
state = 'stopped';
|
||||
state_indicator = 'red';
|
||||
} else if (state == 'paused') {
|
||||
state_indicator = 'orange';
|
||||
}
|
||||
|
||||
let wrapped = name;
|
||||
let disable = "";
|
||||
let chartName = name.replace(/-/g, '');
|
||||
|
||||
// shorten long names
|
||||
if (name.length > 13) { wrapped = name.slice(0, 10) + '...'; }
|
||||
// disable buttons for dweebui
|
||||
if (name.startsWith('dweebui')) { disable = 'disabled=""'; }
|
||||
|
||||
// if ( external_port == undefined ) { external_port = 0; }
|
||||
// if ( internal_port == undefined ) { internal_port = 0; }
|
||||
|
||||
|
||||
|
||||
let trigger = 'data-hx-trigger="load, every 3s"';
|
||||
if (state != 'running') { trigger = 'data-hx-trigger="load"'; }
|
||||
|
||||
let imageVersion = data.Config.Image.split('/');
|
||||
let service = imageVersion[imageVersion.length - 1].split(':')[0];
|
||||
let ports_list = [];
|
||||
try {
|
||||
for (const [key, value] of Object.entries(data.HostConfig.PortBindings)) {
|
||||
let ports = {
|
||||
check: 'checked',
|
||||
external: value[0].HostPort,
|
||||
internal: key.split('/')[0],
|
||||
protocol: key.split('/')[1]
|
||||
}
|
||||
ports_list.push(ports);
|
||||
}
|
||||
} catch {}
|
||||
let external_port = ports_list[0]?.external || 0;
|
||||
let internal_port = ports_list[0]?.internal || 0;
|
||||
|
||||
|
||||
newCard = newCard.replace(/AppName/g, name);
|
||||
newCard = newCard.replace(/AppShortName/g, wrapped);
|
||||
newCard = newCard.replace(/AppIcon/g, service);
|
||||
newCard = newCard.replace(/AppState/g, state);
|
||||
newCard = newCard.replace(/AppImage/g, data.Config.Image.split('/'));
|
||||
newCard = newCard.replace(/StateColor/g, state_indicator);
|
||||
newCard = newCard.replace(/ChartName/g, chartName);
|
||||
newCard = newCard.replace(/data-trigger=""/, trigger);
|
||||
|
||||
if (hidden.includes(name)) { newCard = ''; }
|
||||
|
||||
res.send(newCard);
|
||||
});
|
||||
let card = await containerInfo(name);
|
||||
res.send(card);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@
|
|||
opacity: 1
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 1],
|
||||
width: [3, 1],
|
||||
dashArray: [0, 3],
|
||||
lineCap: "round",
|
||||
curve: "smooth"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<h3 class="m-0 mb-1"><a href="#">AppShortName</a></h3>
|
||||
<div class="text-secondary">AppDesc</div>
|
||||
<div class="mt-3">
|
||||
${categories}
|
||||
AppCategories
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue