242 lines
9.2 KiB
Handlebars
242 lines
9.2 KiB
Handlebars
<!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> |