add traffic indicator to each view

This commit is contained in:
sparks-alec
2023-06-11 22:29:01 -04:00
parent cf1874a29b
commit cf364a7381
4 changed files with 22 additions and 5 deletions
+11 -1
View File
@@ -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>';