initial files
This commit is contained in:
242
public/views/plugindashboard.hbs
Normal file
242
public/views/plugindashboard.hbs
Normal file
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Plugin Dashboard</title>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="pluginTabs" class="tabs"></div>
|
||||
<div class="card static">
|
||||
<div class="tab-contents container static" id="pluginsTabWrapper" style="height:100vh;grid-template-columns: repeat(3, 1fr);"></div>
|
||||
</div>
|
||||
<div class="grid" style="pointer-events:auto;position:absolute; bottom:18px;right:18px;grid-template-columns: 1fr;">
|
||||
<button class="bluebutton" id="createNewPlugin">Neues Plugin</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
createNewPlugin.onclick = () => {
|
||||
feedbox({
|
||||
title: 'Neues Plugin erstellen',
|
||||
message: `
|
||||
<input id="newPluginName" placeholder="Name des Plugins" />
|
||||
`,
|
||||
buttons: {
|
||||
yes: {
|
||||
text: '<b>Erstellen</b>',
|
||||
onClick: () => {
|
||||
const name = document.getElementById('newPluginName').value;
|
||||
pluginAPI.create(name);
|
||||
}
|
||||
},
|
||||
no: {
|
||||
text: 'Abbrechen',
|
||||
onClick: () => { /* automatisch geschlossen */ }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
{"name":"Demo",
|
||||
"description":"Beschreibung hier einfügen",
|
||||
"version":"1.0.0.0",
|
||||
"menu":{
|
||||
"label":"Demo",
|
||||
"items":[
|
||||
{"label":"Demo",
|
||||
"view":"index",
|
||||
"defaultSize":{"width":"600px","height":"150px"},
|
||||
"icon":"app.png",
|
||||
"permissions":["*"]}
|
||||
]},
|
||||
"config":{},
|
||||
"active":true
|
||||
}
|
||||
}*/
|
||||
|
||||
fetch('/api/plugins/getAll', { method: 'POST' })
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.forEach(async metaData => {
|
||||
createTab(pluginTabs, metaData.name, async (tabElement) => {
|
||||
pluginsTabWrapper.innerHTML = '';
|
||||
|
||||
const objectsContainer = document.createElement('div');
|
||||
objectsContainer.className = 'card grid';
|
||||
objectsContainer.style = ``;
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card static row';
|
||||
card.style = `gap:0 10px;min-height:fit-content;justify-content: center;`;
|
||||
pluginsTabWrapper.appendChild(card);
|
||||
|
||||
const sortedKeys = Object.keys(metaData).sort((a, b) => {
|
||||
if (typeof metaData[a] === 'object' && typeof metaData[b] !== 'object') {
|
||||
return 1;
|
||||
} else if (typeof metaData[a] !== 'object' && typeof metaData[b] === 'object') {
|
||||
return -1;
|
||||
} else {
|
||||
return a.localeCompare(b);
|
||||
}
|
||||
});
|
||||
|
||||
for (const key of sortedKeys) { // each plugin-metaData
|
||||
if (metaData.hasOwnProperty(key) && metaData[key] !== null && !key.includes('Path')) { // only first level
|
||||
const value = metaData[key];
|
||||
const container = document.createElement('div');
|
||||
|
||||
if(typeof value === 'string') {
|
||||
container.style = `flex:${key === 'description' ? '1 1' : '0 0'} auto;`;
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.style = `font-weight:bold`;
|
||||
label.textContent = key.charAt(0).toUpperCase() + key.slice(1);
|
||||
container.appendChild(label);
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.style="width:100%"
|
||||
input.value = value;
|
||||
input.setAttribute('data-name', metaData.name);
|
||||
input.setAttribute('data-field', key);
|
||||
|
||||
new AttachOnBlurChange(input, async (newValue, oldValue) => {
|
||||
if(key === 'name') {
|
||||
await pluginAPI.rename(oldValue, newValue);
|
||||
return;
|
||||
}
|
||||
await pluginAPI.update(`${metaData.name}`, { [key]: newValue});
|
||||
});
|
||||
|
||||
container.appendChild(input);
|
||||
|
||||
card.appendChild(container);
|
||||
}
|
||||
if(typeof value === 'boolean') {
|
||||
container.style = `flex:0;flex-direction:column; display:flex;align-items:center;`;
|
||||
const label = document.createElement('label');
|
||||
label.style = `font-weight:bold`;
|
||||
label.textContent = key.charAt(0).toUpperCase() + key.slice(1);
|
||||
container.appendChild(label);
|
||||
|
||||
const checkbox = document.createElement('label');
|
||||
checkbox.className = 'cb cb-modern';
|
||||
checkbox.innerHTML = `
|
||||
<input onchange="pluginAPI.activation('${metaData.name}', this.checked);" id="plugin-${metaData.name}" data-status="${metaData.name}" type="checkbox" ${metaData.active ? 'checked' : ''}>
|
||||
<span class="cb-box" aria-hidden="true"></span>
|
||||
`;
|
||||
container.appendChild(checkbox);
|
||||
|
||||
card.appendChild(container);
|
||||
}
|
||||
|
||||
if(typeof value === 'object') {
|
||||
const objectCard = document.createElement('div');
|
||||
objectCard.className = 'card';
|
||||
objectCard.style = `height:100%`;
|
||||
objectCard.innerHTML = `
|
||||
<label style="font-weight:bold">${key}</label>
|
||||
<div style="overflow:auto" id="${metaData.name}-${key}"></div>
|
||||
`;
|
||||
objectsContainer.appendChild(objectCard);
|
||||
pluginsTabWrapper.appendChild(objectsContainer);
|
||||
const menu = createJsonTree({
|
||||
container: document.getElementById(`${metaData.name}-${key}`),
|
||||
data: metaData[key],
|
||||
schema: {
|
||||
"active": { type: "boolean" }
|
||||
},
|
||||
onChange: (data) => { },
|
||||
onSave: async (data) => {
|
||||
await pluginAPI.update(metaData.name, { [key]: data });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
pluginsTabWrapper.appendChild(objectsContainer);
|
||||
|
||||
|
||||
|
||||
|
||||
/*pluginsTabWrapper.innerHTML = `
|
||||
<div class="card static row" style="grid-column: span 3;height:50px;">
|
||||
<label class="cb cb-modern">
|
||||
<label for="plugin-${plugin.name}" style="font-weight:bold">Aktiv</label>
|
||||
<input onchange="pluginAPI.activation('${plugin.name}', this.checked);" id="plugin-${plugin.name}" data-status="${plugin.name}" type="checkbox" ${plugin.active ? 'checked' : ''}>
|
||||
<span class="cb-box" aria-hidden="true"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="card static row" style="gap:0 10px;min-height:fit-content;">
|
||||
<div style="flex:0 0 auto">
|
||||
<label style="font-weight:bold">Name</label>
|
||||
<input type="text" data-name="${plugin.name}" data-field="name" value="${plugin.name}" />
|
||||
</div>
|
||||
|
||||
<div style="flex:0 0 auto">
|
||||
<label style="font-weight:bold">Version</label>
|
||||
<input type="text" data-name="${plugin.name}" data-field="version" value="${plugin.version}" />
|
||||
</div>
|
||||
|
||||
<div style="flex:1 1 auto">
|
||||
<label style="font-weight:bold">Beschreibung</label>
|
||||
<input type="text" data-name="${plugin.name}" data-field="description" style="width:100%" value="${plugin.description}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card static" style="grid-column: span 3;">
|
||||
<label style="font-weight:bold">Startmenüeinträge</label>
|
||||
<div style="overflow:auto" id="${plugin.name}-menu"></div>
|
||||
</div>
|
||||
`;
|
||||
createJsonTree({
|
||||
container: document.getElementById(`${plugin.name}-menu`),
|
||||
data: plugin,
|
||||
schema: {
|
||||
"active": { type: "boolean" }
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
{
|
||||
"name": "TEST",
|
||||
"description": "Remote Desktop Verbindungen über MSRA realisieren",
|
||||
"version": "0.2025.11.07",
|
||||
"config": {},
|
||||
"menu": {
|
||||
"label": "TEST",
|
||||
"items": [
|
||||
{
|
||||
"label": "Remoteunterstützung",
|
||||
"view": "index",
|
||||
"icon": "remoteServer.png",
|
||||
"permissions": [
|
||||
"Administration"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"active": true
|
||||
}
|
||||
*/
|
||||
/*
|
||||
new AttachOnBlurChange(document.querySelector(`[data-name="${plugin.name}"][data-field="name"]`), async (newValue, oldValue) => { await pluginAPI.rename(`${plugin.name}`, newValue); });
|
||||
new AttachOnBlurChange(document.querySelector(`[data-name="${plugin.name}"][data-field="version"]`), async (newValue, oldValue) => await pluginAPI.update(`${plugin.name}`, { version: newValue }))
|
||||
new AttachOnBlurChange(document.querySelector(`[data-name="${plugin.name}"][data-field="description"]`), async (newValue, oldValue) => await pluginAPI.update(`${plugin.name}`, { description: newValue }))
|
||||
*/
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user