From 1fd09dba86a22129cca13c00802295fecf0a210a Mon Sep 17 00:00:00 2001 From: Hans-Wilhelm Warlo Date: Tue, 13 Feb 2018 19:34:18 +0100 Subject: [PATCH] Add setup page --- electron-app/index.html | 40 +++++++++---------- electron-app/rfid.js | 46 ++++++++++++++-------- electron-app/style.css | 87 ++++++++++++++++++++++++++++++----------- 3 files changed, 114 insertions(+), 59 deletions(-) diff --git a/electron-app/index.html b/electron-app/index.html index 627226ac..a6d62f4a 100644 --- a/electron-app/index.html +++ b/electron-app/index.html @@ -1,27 +1,27 @@ - - - - - + + + -
- + + +
+
+

Select device

+
+
    +
- - - + diff --git a/electron-app/rfid.js b/electron-app/rfid.js index 385349e4..2b3e4158 100644 --- a/electron-app/rfid.js +++ b/electron-app/rfid.js @@ -23,15 +23,15 @@ const updateTarget = value => { // Populate the list of available devices const updateAvailableDevices = () => refresh().then(ports => { - const dropDown = $('#port_list'); + const ul = $('#port_ul'); + ul.innerHTML = ''; updateStatus(`found ${ports.length} ports connected`); - dropDown.innerHTML = ''; ports.forEach(port => { - const newOption = document.createElement('option'); - newOption.text = port.comName; - newOption.value = port.comName; - dropDown.appendChild(newOption); + const newLi = document.createElement('li'); + newLi.setAttribute('data-value', port.comName); + newLi.innerHTML = port.comName; + ul.appendChild(newLi); }); }); @@ -39,23 +39,37 @@ const onData = response => { // Callback function when data is read updateTarget(response); sound.play(); - updateStatus('reading...completed'); }; // Handle the 'Connect' button const connectToDevice = () => { - const dropDown = $('#port_list'); - const devicePath = dropDown.options[dropDown.selectedIndex].value; - connect(devicePath, onData).then(() => { - updateStatus('connected'); - }); + const active = $('.active'); + if (!active) { + updateStatus('No device selected'); + } else { + const devicePath = active.getAttribute('data-value'); + connect(devicePath, onData) + .then(() => { + $('#overlay').classList.add('hidden'); + }) + .catch(() => { + updateStatus('Error connecting!'); + }); + } +}; + +const setActive = e => { + if (e.target && e.target.matches('li')) { + const currentActive = $('.active'); + if (currentActive) { + currentActive.classList.remove('active'); + } + e.target.classList.add('active'); + } }; +$('#port_ul').addEventListener('click', setActive); $('#refresh_button').addEventListener('click', updateAvailableDevices); $('#connect_button').addEventListener('click', connectToDevice); -$('#fullscreen').addEventListener('click', () => {}); -$('#test').addEventListener('click', () => { - updateTarget('test'); -}); updateAvailableDevices(); diff --git a/electron-app/style.css b/electron-app/style.css index 113e3277..8165849f 100644 --- a/electron-app/style.css +++ b/electron-app/style.css @@ -6,42 +6,83 @@ webview { border: 0; width: 100%; height: 100%; + font-family: 'Open Sans', sans-serif; + color: #3e3e3e; } -.status_area { +.overlay { position: absolute; + top: 0; left: 0; width: 100%; - bottom: 0; + height: 100%; + z-index: 10; + background-color: #ffffff; } -.status_area .hidden { - position: relative; - bottom: -50px; - background: #262323; - -webkit-transition: all 200ms ease-in-out; - transition-delay: 2s; +.hidden { + display: none; } -.status_area:hover .hidden { - bottom: 0; - -webkit-transition: all 200ms ease-in-out; +.setupContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; } -.status_area a { - display: inline-block; - padding: 0 5px; - color: #ffffff; +.setupContainer > * { + margin: 10px 0; } -a:hover { - color: #fc0405; +.header { + font-size: 22px; + text-transform: uppercase; } -.status_area #status_text { - position: absolute; - bottom: 0; - right: 0; - display: inline; - color: #ffffff; +.inputContainer { + width: 480px; +} + +.buttonGroup { + display: flex; +} + +button { + width: 220px; + outline: 0; + cursor: pointer; + height: 50px; + font-size: 20px; + font-weight: 500; + color: rgba(0, 0, 0, 0.7); + margin: 20px 20px; + background-color: transparent; + text-transform: uppercase; + border: 2px solid #bbb; +} + +.buttonGroup { + display: flex; +} + +.options { + list-style: none; +} + +.options > li { + padding-left: 5px; + height: 32px; + line-height: 32px; + vertical-align: middle; +} + +.options > li:hover { + cursor: pointer; + background-color: rgba(60, 60, 60, 0.25); +} + +.active { + background-color: rgba(60, 60, 60, 0.25); }