195 lines
6.9 KiB
Handlebars
195 lines
6.9 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 defer 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/integrated', { method: 'POST' })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
createTab(pluginTabs, 'Integrierte Plugins', { onclick:
|
|
async (tabElement) => {
|
|
pluginsTabWrapper.innerHTML = '';
|
|
|
|
const objectsContainer = document.createElement('div');
|
|
objectsContainer.className = 'card';
|
|
|
|
createJsonTree({
|
|
container: objectsContainer,
|
|
data: data,
|
|
expandInitially: true,
|
|
onSave: () => {}
|
|
})
|
|
pluginsTabWrapper.appendChild(objectsContainer);
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
fetch('/api/plugins/getAll', { method: 'POST' })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
data.forEach(async metaData => {
|
|
createTab(pluginTabs, metaData.name, { onclick:
|
|
async (tabElement) => {
|
|
pluginsTabWrapper.innerHTML = '';
|
|
|
|
const objectsContainer = document.createElement('div');
|
|
objectsContainer.className = 'card static';
|
|
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 static';
|
|
objectCard.style = `min-height:400px;`;
|
|
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],
|
|
onChange: (data) => { },
|
|
onSave: async (data) => {
|
|
await pluginAPI.update(metaData.name, { [key]: data });
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
pluginsTabWrapper.appendChild(objectsContainer);
|
|
}
|
|
});
|
|
});
|
|
pluginTabs.querySelectorAll('.tab')[0]?.click();
|
|
})
|
|
</script>
|
|
</html> |