From 694db535fe7a9ad5f1ee47058d80dc00a4e922c5 Mon Sep 17 00:00:00 2001
From: sparks-alec <sparks.alec@gmail.com>
Date: Mon, 28 Oct 2024 21:07:34 -0400
Subject: [PATCH] update styles

---
 plugins/lightfactory/main.js      |  7 +++++--
 plugins/lightfactory/styles.css   | 35 ++++++++++++++++++++++++-------
 plugins/lightfactory/template.ejs | 10 +++++----
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/plugins/lightfactory/main.js b/plugins/lightfactory/main.js
index 08ce3ce..73e3a9e 100644
--- a/plugins/lightfactory/main.js
+++ b/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 {
diff --git a/plugins/lightfactory/styles.css b/plugins/lightfactory/styles.css
index a99942e..4f08140 100644
--- a/plugins/lightfactory/styles.css
+++ b/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);
 }
diff --git a/plugins/lightfactory/template.ejs b/plugins/lightfactory/template.ejs
index 103afd9..2fe80ad 100644
--- a/plugins/lightfactory/template.ejs
+++ b/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>
 
 			<% }); %>