const { ipcRenderer } = require('electron'); const DEVICE = require('./device.js'); const PLUGINS = require('./plugins.js'); const { saveAll } = require('./saveSlots.js'); // const _ = require('lodash/function'); const pinnedDevices = []; module.exports.pinnedDevices = pinnedDevices; let activeDevice = false; module.exports.init = function init() { populatePluginLists(); }; function drawDeviceFrame(id) { const $deviceDrawArea = document.getElementById(`device-${id}-draw-area`); const $devicePinned = document.getElementById(`device-${id}-pinned`); if ($deviceDrawArea == null) { return true; } const d = DEVICE.all[id]; let str = ''; str += ``; // scrollbar styles are inline to prevent the styles flickering in str += ''; str += ""; str += ''; str += generateBodyHTML(d); // str += ""; // str += ""; str += ''; $deviceDrawArea.setAttribute('class', `${d.type} draw-area`); $deviceDrawArea.contentWindow.document.open(); $deviceDrawArea.contentWindow.document.write(str); $deviceDrawArea.contentWindow.document.close(); if (d.pinIndex) { $devicePinned.style.display = 'block'; } else { $devicePinned.style.display = 'none'; } return true; } function generateBodyHTML(d) { let str = ''; if (d.status === 'ok') { try { str += PLUGINS.all[d.type].template({ data: d.data, listName: d.displayName || d.defaultName, }); } catch (err) { console.log(err); str += '

Plugin Template Error

'; } } else { str += `

${d.displayName || d.defaultName}

`; str += "
"; str += `

${d.type} is not responding to requests for data.

`; str += `

IP ${d.addresses[0]}

`; str += `

Port ${d.port}

`; str += '
'; str += `
${PLUGINS.all[d.type].info()}
`; } return str; } module.exports.draw = function draw(device) { const d = device; const $deviceDrawArea = document.getElementById(`device-${d.id}-draw-area`); if ($deviceDrawArea) { const scriptEl = $deviceDrawArea.contentWindow.document.createRange().createContextualFragment(generateBodyHTML(d)); $deviceDrawArea.contentWindow.document.body.replaceChildren(scriptEl); } else { drawDeviceFrame(d.id); } d.drawn = true; }; module.exports.update = function update(device, type, data) { const doc = document.getElementById(`device-${device.id}-draw-area`); if (doc) { PLUGINS.all[device.type].update(device, doc.contentWindow.document, type, data); } }; module.exports.addDeviceToList = function addDeviceToList(device) { const d = device; let html = ''; if (d.status === 'ok') { html += "
done
"; } else if (d.status === 'refresh') { html += "
refresh
"; } else { html += "
clear
"; } html += `
`; html += `
${d.displayName || d.defaultName}
`; const elem = document.getElementById(d.id); if (elem == null) { document .getElementById('device-list') .insertAdjacentHTML('beforeend', `${html}`); } else { elem.innerHTML = html; } }; module.exports.removeDeviceFromList = function removeDeviceFromList(device) { const d = device; document.getElementById(d.id).remove(); }; function switchDevice(id) { if (activeDevice && activeDevice.pinIndex === false) { document.getElementById(`device-${activeDevice.id}`).remove(); activeDevice = false; } activeDevice = DEVICE.all[id]; let cols = 1; if (pinnedDevices.length > 0) { cols += pinnedDevices.length; } if (pinnedDevices.indexOf(activeDevice) >= 0 || id === undefined) { cols--; } document.getElementById('all-devices').style.gridTemplateColumns = `repeat(${cols}, 1fr)`; if (id === undefined) { // document.getElementById('refresh-device-button').style.opacity = 0.2; document.getElementById('refresh-device-button').disabled = true; document.getElementById('device-settings-table').style.display = 'none'; return; } document.getElementById('refresh-device-button').disabled = false; // document.getElementById('refresh-device-button').style.opacity = 1; const i = DEVICE.all[id].id; let $deviceWrapper = document.getElementById(`device-${i}`); if (!$deviceWrapper) { const html = `
`; document.getElementById('all-devices').insertAdjacentHTML('afterbegin', html); $deviceWrapper = document.getElementById(`device-${i}`); } window.switchClass(document.getElementById(id), 'active-device'); drawDeviceFrame(id); window.switchClass(document.getElementById(`device-${id}`), 'active-device-outline'); document.getElementById('device-settings-table').style.display = 'block'; document.getElementById('device-settings-plugin-dropdown').value = activeDevice.type; document.getElementById('device-settings-name').value = activeDevice.displayName || activeDevice.defaultName || ''; document.getElementById('device-settings-ip').value = activeDevice.addresses[0] || ''; document.getElementById('device-settings-port').value = activeDevice.port || ''; document.getElementById('device-settings-pin').checked = activeDevice.pinIndex; if (activeDevice.plugin.config.mayChangePort) { document.getElementById('device-settings-port').disabled = false; } else { document.getElementById('device-settings-port').disabled = true; } updateFields(); ipcRenderer.send('enableDeviceDropdown', ''); ipcRenderer.send('setDevicePin', !DEVICE.all[id].pinIndex === false); } module.exports.switchDevice = switchDevice; function updateFields() { document.getElementById('device-settings-fields').innerHTML = ''; if (activeDevice && activeDevice.plugin.config.fields) { const fields = activeDevice.plugin.config.fields; fields.forEach((field) => { const $elem = document.createElement('input'); $elem.type = 'text'; $elem.value = activeDevice.fields[field.key]; // || field.value; $elem.name = field.key; $elem.onchange = function onchange(e) { activeDevice.fields[field.key] = $elem.value; field.action(activeDevice); saveAll(); }; if (field.type === 'textinput') { const rowHTML = `${field.label}:`; document.getElementById('device-settings-fields').insertAdjacentHTML('beforeend', rowHTML); document.getElementById(field.key).appendChild($elem); } }); } } module.exports.updateFields = updateFields; module.exports.getActiveDevice = function getActiveDevice() { return activeDevice; }; module.exports.pinActiveDevice = function pinActiveDevice() { if (activeDevice === undefined) { return; } if (pinnedDevices.indexOf(DEVICE.all[activeDevice.id]) === -1) { pinnedDevices.push(DEVICE.all[activeDevice.id]); } DEVICE.changeActivePinIndex(true); }; module.exports.unpinActiveDevice = function unpinActiveDevice() { if (activeDevice === undefined) { return; } pinnedDevices.splice(pinnedDevices.indexOf(DEVICE.all[activeDevice.id]), 1); DEVICE.changeActivePinIndex(false); }; module.exports.pinDevice = function pinDevice(device) { pinnedDevices.push(device); DEVICE.changePinIndex(device, true); }; module.exports.unpinDevice = function unpinDevice(device) { pinnedDevices.push(device); DEVICE.changePinIndex(device, false); }; module.exports.resetPinned = function resetPinned() { pinnedDevices.length = 0; activeDevice = false; try { document.querySelector('#device-list .active-device').classList.remove('active-device'); } catch (err) { // } document.getElementById('all-devices').innerHTML = ''; }; module.exports.getPinnedDevices = function getPinnedDevices() { return pinnedDevices; }; module.exports.toggleSlotButtons = function toggleSlotButtons(slotIndex) { // remove all currently active classes const currentActiveSlots = document.getElementsByClassName('active'); for (let i = 0; i < currentActiveSlots.length; i++) { const slotButton = currentActiveSlots[i]; slotButton.classList.remove('active'); } // add the active class to the newly selected slot document.getElementById(`save-slot-${slotIndex}`).classList.add('active'); }; module.exports.selectPreviousDevice = function selectPreviousDevice() { if (activeDevice === undefined) { return; } const keys = Object.keys(DEVICE.all); const prevIndex = Math.max(0, keys.indexOf(activeDevice.id) - 1); switchDevice(keys[prevIndex]); }; module.exports.selectNextDevice = function selectNextDevice() { if (activeDevice === undefined) { return; } const keys = Object.keys(DEVICE.all); const prevIndex = Math.min(keys.length - 1, keys.indexOf(activeDevice.id) + 1); switchDevice(keys[prevIndex]); }; function populatePluginLists() { let typeSelect = ''; let addSelect = ''; Object.keys(PLUGINS.all).forEach((pluginType) => { const plugin = PLUGINS.all[pluginType]; addSelect += ``; typeSelect += ``; }); document.getElementById('device-settings-plugin-dropdown').innerHTML = typeSelect; document.getElementById('add-device-button').innerHTML = addSelect; }