add traffic indicator to each view

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;

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

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>';