update styles

plugins/lightfactory/main.js

@@ -13,9 +13,11 @@ exports.config = {
   },
 };
 
-exports.ready = function ready(device) {
+exports.ready = function ready(_device) {
+  const device = _device;
   device.data.cueLists = {};
   device.send('get cue list\n');
+  console.log('sent');
 };
 
 function cleanMessage(message) {
@@ -70,7 +72,8 @@ exports.data = function data(_device, _message) {
         const cueName = cueListCuesMessage[i];
         if (cueList.cues[cueName] === undefined) {
           cueList.cues[cueName] = {
-            name: cueName,
+            name: cueName.substring(cueName.indexOf(' ')),
+            number: cueName.substring(0, cueName.indexOf(' ')),
             active: false,
           };
         } else {

plugins/lightfactory/styles.css

@@ -1,31 +1,52 @@
 section {
-  background-color: #2d2d2d;
+  background-color: #363636;
   border: gray 1px solid;
-  padding: 10px;
+  padding: 2px;
   padding-top: 0px;
-  border-radius: 10px;
   overflow: hidden;
+  font-size: 8px;
+  margin-bottom: 10px;
+  width: 300px;
 }
 table {
   border: #414142 1px solid;
   background-color: #272727;
+  width: 100%;
 }
 table,
 th,
 td {
   border-collapse: collapse;
   color: #ccc;
-  font-size: 13px;
+  font-size: 12px;
 }
 th {
   padding: 2px 10px;
+  border: #282828 1px solid;
+  background: linear-gradient(#404040, #363636);
+  text-align: left;
 }
 td {
   text-align: left;
-  padding: 2px 7px;
-  font-family: 'Courier New', Courier, monospace;
+  padding: 7px 7px;
+  font-family: sans-serif;
+  position: relative;
+}
+tr {
+  border-bottom: #363636 1px solid;
+}
+tr:nth-child(odd) {
+  background-color: #2a2a2a;
+}
+tr:nth-child(even) {
+  background-color: #202020;
 }
 
 .active_indicator {
-  color: green;
+  color: #00ff00;
+  font-size: 13px;
+  position: absolute;
+  top: 4px;
+  left: -4px;
+  transform: rotate(-45deg);
 }

plugins/lightfactory/template.ejs

@@ -11,16 +11,18 @@
 
 		<table>
 			<tr>
-				<th></th>
-				<th>Name</th>
+				<th width="10px" style="padding: 0px;"></th>
+				<th width="50px">Cue No</th>
+				<th>Description</th>
 
 			</tr>
 			<!-- Tracker Loop -->
 			<% Object.entries(cueListData.cues).forEach(([cueName,cueData]) => { %>
 
 			<tr>
-				<td class="active_indicator"><%= cueData.active ? '>': '' %></td>
-				<td><%= cueName %> </td>
+				<td style="padding: 0px;"><span class="active_indicator"><%= cueData.active ? '&#9698;': '' %></span></td>
+				<td><%= cueData.number %></td>
+				<td><%= cueData.name %> </td>
 			</tr>
 
 			<% }); %>