stagehacks/Cue-View
1
0
Fork 0
mirror of https://github.com/stagehacks/Cue-View.git synced 2026-08-07 14:53:38 +00:00
Code Issues Packages Projects Releases 9 Wiki Activity

cleanup templating

Browse Source
This commit is contained in:
Joel Wetzell
2023-01-22 13:01:35 -06:00
parent 2c02b4751d
commit aa4397ba56
8 changed files with 77 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/device.js
+1
View File
@@ -38,6 +38,7 @@ function registerDevice(newDevice, discoveryMethod) {
port: newDevice.port,
addresses: newDevice.addresses,
data: {},
templates: {},
fields: newDevice.fields || {},
pinIndex: false,
lastDrawn: 0,
src/view.js
+44 -32
View File
@@ -21,23 +21,26 @@ function drawDeviceFrame(id) {
const d = DEVICE.all[id];
let str = '<html><head>';
str += `<link href='./plugins/${d.type}/styles.css' rel='stylesheet' type='text/css'>`;
const str = `
<html>
<head>
<link href='./plugins/${d.type}/styles.css' rel='stylesheet' type='text/css'>
// scrollbar styles are inline to prevent the styles flickering in
str += '<style>';
str += '::-webkit-scrollbar {background-color: black;width: 12px;}';
str += '::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background-color: #2b2b2b;}';
str += '::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}';
str += '::-webkit-scrollbar-button {display:none;}';
str += 'body{visibility: hidden;}';
str += '</style>';
str += "<link href='src/assets/css/plugin_default.css' rel='stylesheet' type='text/css'>";
str += '</head><body>';
str += generateBodyHTML(d);
str += '</body></html>';
<!--scrollbar styles are inline to prevent the styles flickering in-->
<style>
::-webkit-scrollbar {background-color: black;width: 12px;}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background-color: #2b2b2b;}
::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}
::-webkit-scrollbar-button {display:none;}
body{visibility: hidden;}
</style>
<link href='src/assets/css/plugin_default.css' rel='stylesheet' type='text/css'>
</head>
<body>
${generateBodyHTML(d)};
</body>
</html>
`;
$deviceDrawArea.setAttribute('class', `${d.type} draw-area`);
$deviceDrawArea.contentWindow.document.open();
@@ -57,29 +60,34 @@ function drawDeviceFrame(id) {
}
function generateBodyHTML(d) {
let str = '';
if (d.status === 'ok') {
try {
str += PLUGINS.all[d.type].template({
return PLUGINS.all[d.type].template({
templates: d.templates,
data: d.data,
listName: d.displayName || d.defaultName,
});
} catch (err) {
console.log(err);
str += '<h3>Plugin Template Error</h3>';
return '<h3>Plugin Template Error</h3>';
}
} else {
str += `<header><h1>${d.displayName || d.defaultName}</h1></header>`;
str += "<div class='not-responding'>";
str += `<h2><em>${d.type}</em> is not responding to requests for data.</h2>`;
str += `<h3>IP <em>${d.addresses[0]}</em></h3>`;
str += `<h3>Port <em>${d.port}</em></h3>`;
str += '<hr></div>';
str += `<div class="device-info">${PLUGINS.all[d.type].info()}<div>`;
}
return `
<header>
<h1>${d.displayName || d.defaultName}</h1>
</header>
return str;
<div class='not-responding'>
<h2><em>${d.type}</em> is not responding to requests for data.</h2>
<h3>IP <em>${d.addresses[0]}</em></h3>
<h3>Port <em>${d.port}</em></h3>
<hr>
</div>
<div class="device-info">
${PLUGINS.all[d.type].info()}
<div>
`;
}
}
module.exports.draw = function draw(device) {
@@ -114,8 +122,10 @@ module.exports.addDeviceToList = function addDeviceToList(device) {
html += "<div class='status material-icons red'>clear</div>";
}
html += `<div class='type'><img height='18px' src='plugins/${d.type}/icon.png'></div>`;
html += `<div class='name'>${d.displayName || d.defaultName}</div>`;
html += `
<div class='type'><img height='18px' src='plugins/${d.type}/icon.png'></div>
<div class='name'>${d.displayName || d.defaultName}</div>
`;
const elem = document.getElementById(d.id);
if (elem == null) {
@@ -196,8 +206,8 @@ function updateFields() {
const fields = activeDevice.plugin.config.fields;
fields.forEach((field) => {
// generic input setup
const $elem = document.createElement('input');
$elem.type = 'text';
$elem.value = activeDevice.fields[field.key];
$elem.name = field.key;
$elem.onchange = function onchange(e) {
@@ -206,7 +216,9 @@ function updateFields() {
saveAll();
};
// type specific setup
if (field.type === 'textinput') {
$elem.type = 'text';
const rowHTML = `<tr><th>${field.label}:</th><td colspan="3" id="${field.key}"></td></tr>`;
document.getElementById('device-settings-fields').insertAdjacentHTML('beforeend', rowHTML);
document.getElementById(field.key).appendChild($elem);