From cf364a7381586e6e3c967674a8d2f6e3aaa8dc27 Mon Sep 17 00:00:00 2001
From: sparks-alec <sparks.alec@gmail.com>
Date: Sun, 11 Jun 2023 22:29:01 -0400
Subject: [PATCH] add traffic indicator to each view

---
 src/assets/css/index.css                   |   9 +++++++++
 src/assets/img/outline_link_white_18dp.png | Bin 0 -> 236 bytes
 src/device.js                              |   6 ++----
 src/view.js                                |  12 +++++++++++-
 4 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/img/outline_link_white_18dp.png

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 3109ac9..16482e8 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -199,11 +199,20 @@ a {
   background-color: rgba(0, 0, 0, 0.3);
 }
 .device-pin {
+  position: absolute;
+  right: 45px;
+  top: 4px;
+  height: 20px;
+  padding: inherit;
+}
+.device-traffic-signal {
   position: absolute;
   right: 15px;
   top: 4px;
   height: 20px;
   padding: inherit;
+  opacity: 0.3;
+  transition: opacity 0.1s ease-in-out;
 }
 .device-wrapper {
   box-sizing: border-box;
diff --git a/src/assets/img/outline_link_white_18dp.png b/src/assets/img/outline_link_white_18dp.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba63727cc81cb5145432310ccd03bd81b5489ed2
GIT binary patch
literal 236
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k0wldT1B8LpW=|K#5Rc=@2@<S}6I>epyZxX1
z|GKgx`-T<FT@jz^mH)K;_`m<3yzG_c)K`W_*8l&0Jk{rWeGbEPM}-T$XJ-Vhc(VNe
z?0?%IeT~u%II6zlRZvOtlmGu2ymS8Qdxm&;F@-iA=>Pv|h0xrDhpYeJ?CcXMTaYF2
z!bNl+ix`iK(8}X{6GK><zQ#D2ay&}cR1uV6@N5-P@ySdPxVpz}>w#rqUxIZVgABU^
k3@-<5l#m3v@dg7!p*nYWOz64wK<6`fy85}Sb4q9e01Y5u6aWAK

literal 0
HcmV?d00001

diff --git a/src/device.js b/src/device.js
index 86bdea9..1fe2267 100644
--- a/src/device.js
+++ b/src/device.js
@@ -47,6 +47,7 @@ function registerDevice(newDevice, discoveryMethod) {
     sendQueue: [],
     heartbeatInterval: PLUGINS.all[newDevice.type].heartbeatInterval,
     heartbeatTimeout: PLUGINS.all[newDevice.type].heartbeatTimeout,
+    trafficSignal: VIEW.trafficSignal,
     draw() {
       VIEW.draw(this);
     },
@@ -320,10 +321,7 @@ function infoUpdate(device, param, value) {
 }
 module.exports.infoUpdate = infoUpdate;
 
-let $networkIndicatorDot;
-
 function heartbeat() {
-  $networkIndicatorDot = document.getElementById('network-indicator-dot');
   Object.keys(devices).forEach((deviceID) => {
     const d = devices[deviceID];
 
@@ -356,7 +354,7 @@ function networkTick() {
     if (d.sendQueue.length > 0 && d.sendNow) {
       d.sendNow(d.sendQueue[0]);
       d.sendQueue.shift();
-      $networkIndicatorDot.style.background = 'green';
+      d.trafficSignal(d);
     }
   });
 }
diff --git a/src/view.js b/src/view.js
index c8e5bd0..be510fa 100644
--- a/src/view.js
+++ b/src/view.js
@@ -171,7 +171,10 @@ function switchDevice(id) {
   const $deviceWrapper = document.getElementById(`device-${i}`);
 
   if (!$deviceWrapper) {
-    const html = `<div class="col device-wrapper" id="device-${i}"><img id="device-${i}-pinned" class="device-pin" src="src/assets/img/outline_push_pin_white_18dp.png"><iframe id="device-${i}-draw-area" class="draw-area"></iframe></div>`;
+    let html = `<div class="col device-wrapper" id="device-${i}">`;
+    html += `<img id="device-${i}-pinned" class="device-pin" src="src/assets/img/outline_push_pin_white_18dp.png">`;
+    html += `<img id="device-${i}-traffic" class="device-traffic-signal" src="src/assets/img/outline_link_white_18dp.png">`;
+    html += `<iframe id="device-${i}-draw-area" class="draw-area"></iframe></div>`;
     document.getElementById('all-devices').insertAdjacentHTML('afterbegin', html);
   }
 
@@ -305,6 +308,13 @@ module.exports.selectNextDevice = function selectNextDevice() {
   switchDevice(keys[prevIndex]);
 };
 
+module.exports.trafficSignal = function trafficSignal(device) {
+  document.querySelector(`#device-${device.id} .device-traffic-signal`).style.opacity = 1;
+  setTimeout(() => {
+    document.querySelector(`#device-${device.id} .device-traffic-signal`).style.opacity = 0.3;
+  }, 50);
+};
+
 function populatePluginLists() {
   let typeSelect = '';
   let addSelect = '<option value="" disabled selected hidden>&nbsp;+&nbsp;</option>';