Add setup page

webkom · Feb 19, 2018 · 1fd09db · 1fd09db
1 parent 18cc8ef
commit 1fd09db
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 59 deletions.
diff --git a/electron-app/index.html b/electron-app/index.html
@@ -1,27 +1,27 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <link rel='stylesheet' type='text/css' href='style.css'>
-    </head>
 
-    <body>
-        <webview src='https://vote.abakus.no/admin' preload='./preload.js'></webview>
+  <head>
+    <link rel='stylesheet' type='text/css' href='style.css'>
+  </head>
 
-        <div class='status_area'>
-            <div class='hidden'>
-                <select id='port_list'>
-                </select>
-                <a id='refresh_button'>Refresh</a>
-                <a id='connect_button'>Connect</a>
-                <a id='fullscreen'>Fullscreen</a>
-                <a id='test'>Test</a>
-
-                <div id='status_text'></div>
-            </div>
+  <body>
+    <webview src='https://vote.abakus.no/admin' preload='./preload.js'></webview>
+    <div id='overlay' class="overlay">
+      <div class="setupContainer">
+        <h1 class="header">Select device</h1>
+        <div class="inputContainer">
+          <ul id='port_ul' class="options">
+          </ul>
         </div>
-
-        <script>
-        require('./rfid.js');
+        <div class="buttonGroup">
+          <button id='connect_button'>Connect</button>
+          <button id='refresh_button'>Refresh</button>
+        </div>
+        <div id='status_text'></div>
+      </div>
+    <script>
+    require('./rfid.js');
 </script>
-    </body>
+  </body>
 </html>
diff --git a/electron-app/rfid.js b/electron-app/rfid.js
@@ -23,39 +23,53 @@ 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);
     });
   });
 
 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
@@ -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);
 }