cleanup templating

networkInterfaces.js

@@ -8,9 +8,12 @@ window.init = function init() {
     const interfaceID = Object.keys(networkInterfaces)[i];
     const interfaceObj = networkInterfaces[interfaceID];
 
-    html += `<tr><td><span class="if-${interfaceID.substring(0, 2)}">${interfaceID}</span></td>`;
-    html += `<td>${interfaceObj[0].address}</td>`;
-    html += `<td>${interfaceObj[0].netmask}</td>`;
+    html += `
+      <tr>
+        <td><span class="if-${interfaceID.substring(0, 2)}">${interfaceID}</span></td>
+        <td>${interfaceObj[0].address}</td>
+        <td>${interfaceObj[0].netmask}</td>
+    `;
 
     if (interfaceObj[0].searchTruncated) {
       html += `<td class='red'>`;
@@ -18,8 +21,10 @@ window.init = function init() {
       html += `<td class='green'>`;
     }
 
-    html += `${interfaceObj[0].firstSearchAddress} - ${interfaceObj[0].lastSearchAddress}</td>`;
-    html += `</tr>`;
+    html += `
+      ${interfaceObj[0].firstSearchAddress} - ${interfaceObj[0].lastSearchAddress}</td>
+      </tr>
+    `;
 
     document.getElementById('network-interfaces').innerHTML = html;
   }

plugins/eos/main.js

@@ -23,6 +23,9 @@ exports.config = {
 exports.ready = function ready(_device) {
   const device = _device;
   device.data.EOS = new EOS();
+  device.templates = {
+    cue: _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`))),
+  };
   device.send('/eos/get/cuelist/count');
   device.send('/eos/get/version');
   device.send('/eos/subscribe', [{ type: 'i', value: 1 }]);
@@ -91,14 +94,11 @@ exports.data = function data(_device, osc) {
   }
 };
 
-const cueTemplate = _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`)));
-
 exports.update = function update(device, doc, updateType, data) {
   if (updateType === 'cueData') {
     const $elem = doc.getElementById(data.uid);
-
     if ($elem) {
-      $elem.outerHTML = cueTemplate({
+      $elem.outerHTML = device.templates.cue({
         q: data.cue,
         cueNumber: data.cueNumber,
         isActive: false,

plugins/eos/template.ejs

@@ -3,13 +3,6 @@
 	<h2>Eos <%= data.version  %></h2>
 </header>
 
-<%
-  const fs = require('fs');
-  const path = require('path');
-  let cueTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/eos/cue.ejs`)));
-%>
-
-
 <% for(var i in data.EOS.cueLists){ %>
 	<div class="list_container">
 		<div class="list_name">List <%= i %></div>
@@ -35,7 +28,7 @@
 			<% for(var j=0; j<cues.length; j++){ %>
 				<% var q = data.EOS.cueLists[i][cues[j]] %>
 				
-				<%= cueTemplate({
+				<%= templates.cue({
 					q: q,
 					cues: cues,
 					cueNumber: cues[j],

plugins/qlab/cuelist.ejs

@@ -40,13 +40,11 @@
 
 
 function displayCueRow(q){
-  let html = "";
-
-  html+= rowTemplate({cue: allCues[q.uniqueID], allCues: allCues, workspace: workspace});
+  let html = rowTemplate({cue: allCues[q.uniqueID], allCues: allCues, workspace: workspace});
 
   if(q.cues){
     q.cues.forEach(q =>{
-      html+=displayCueRow(q);
+      html += displayCueRow(q);
     })
   }
   return html;

plugins/qlab/main.js

@@ -36,11 +36,14 @@ const valuesForKeysString =
   '"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",' +
   '"actionElapsed","postWaitElapsed","isPaused"]';
 
-const cueTemplate = _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`)));
-const tileTemplate = _.template(fs.readFileSync(path.join(__dirname, `tile.ejs`)));
-const cartTemplate = _.template(fs.readFileSync(path.join(__dirname, `cart.ejs`)));
-
-exports.ready = function ready(device) {
+exports.ready = function ready(_device) {
+  const device = _device;
+  device.templates = {
+    cue: _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`))),
+    tile: _.template(fs.readFileSync(path.join(__dirname, `tile.ejs`))),
+    cart: _.template(fs.readFileSync(path.join(__dirname, `cart.ejs`))),
+    cuelist: _.template(fs.readFileSync(path.join(__dirname, `cuelist.ejs`))),
+  };
   device.send(`/version`);
   device.send('/workspaces');
 };
@@ -321,8 +324,8 @@ exports.update = function update(device, doc, updateType, data) {
       if (data.cue.type === 'Cue List') {
         $elem.outerHTML = `<h3>${data.workspace.displayName} &mdash; ${data.cue.name}</h3>`;
       } else if (data.cue.type === 'Cart') {
-        $elem.outerHTML = cartTemplate({
-          tileTemplate,
+        $elem.outerHTML = device.templates.cart({
+          tileTemplate: device.templates.tile,
           cueList: data.cue,
           allCues: data.workspace.cues,
         });
@@ -330,12 +333,12 @@ exports.update = function update(device, doc, updateType, data) {
         // checking that the parent cue is a cart cue
         const parentCue = data.workspace.cues[data.cue.parent];
         if (parentCue && parentCue.type === 'Cart') {
-          $elem.outerHTML = tileTemplate(data);
+          $elem.outerHTML = device.templates.tile(data);
         } else {
-          $elem.outerHTML = cueTemplate(data);
+          $elem.outerHTML = device.templates.cue(data);
         }
       } else {
-        $elem.outerHTML = cueTemplate(data);
+        $elem.outerHTML = device.templates.cue(data);
       }
     }
   } else if (updateType === 'updatePlaybackPosition') {

plugins/qlab/template.ejs

@@ -3,16 +3,6 @@
   <h2>QLab <%= data.version || "" %></h2>
 </header>
 
-<% 
-  const fs = require('fs');
-  let _ = require('lodash');
-  const path = require('path');
-
-  let cueTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/qlab/cue.ejs`)));
-  let tileTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/qlab/tile.ejs`)));
-  let cartTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/qlab/cart.ejs`)));
-  let listTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/qlab/cuelist.ejs`)));
-%>
   
   <% if(data.permission=="ok"){
     for(const workspace_id in data.workspaces){
@@ -21,9 +11,9 @@
         const ql = workspace.cueLists[cueList_id]; %>
         
         <% if(ql.type=="Cue List"){ %>
-          <%= listTemplate({cueList: ql, allCues: workspace.cues, rowTemplate: cueTemplate, workspace: workspace}) %>
+          <%= templates.cuelist({cueList: ql, allCues: workspace.cues, rowTemplate: templates.cue, workspace: workspace}) %>
         <% }else if(ql.type=="Cart"){ %>
-          <%= cartTemplate({cueList: ql, allCues: workspace.cues, tileTemplate: tileTemplate}) %>
+          <%= templates.cart({cueList: ql, allCues: workspace.cues, tileTemplate: templates.tile}) %>
         <% } %>
 
 <% }}}else if(data.permission=="no workspaces"){ %>

src/device.js

@@ -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

@@ -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);