Skip to content

Commit 1fd09db

Browse files
warloekmartin
warlo
authored and
ekmartin
committed
Add setup page
1 parent 18cc8ef commit 1fd09db

File tree

3 files changed

+114
-59
lines changed

3 files changed

+114
-59
lines changed

‎electron-app/index.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<link rel='stylesheet' type='text/css' href='style.css'>
5-
</head>
63

7-
<body>
8-
<webview src='https://vote.abakus.no/admin' preload='./preload.js'></webview>
4+
<head>
5+
<link rel='stylesheet' type='text/css' href='style.css'>
6+
</head>
97

10-
<div class='status_area'>
11-
<div class='hidden'>
12-
<select id='port_list'>
13-
</select>
14-
<a id='refresh_button'>Refresh</a>
15-
<a id='connect_button'>Connect</a>
16-
<a id='fullscreen'>Fullscreen</a>
17-
<a id='test'>Test</a>
18-
19-
<div id='status_text'></div>
20-
</div>
8+
<body>
9+
<webview src='https://vote.abakus.no/admin' preload='./preload.js'></webview>
10+
<div id='overlay' class="overlay">
11+
<div class="setupContainer">
12+
<h1 class="header">Select device</h1>
13+
<div class="inputContainer">
14+
<ul id='port_ul' class="options">
15+
</ul>
2116
</div>
22-
23-
<script>
24-
require('./rfid.js');
17+
<div class="buttonGroup">
18+
<button id='connect_button'>Connect</button>
19+
<button id='refresh_button'>Refresh</button>
20+
</div>
21+
<div id='status_text'></div>
22+
</div>
23+
<script>
24+
require('./rfid.js');
2525
</script>
26-
</body>
26+
</body>
2727
</html>

‎electron-app/rfid.js‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,39 +23,53 @@ const updateTarget = value => {
2323
// Populate the list of available devices
2424
const updateAvailableDevices = () =>
2525
refresh().then(ports => {
26-
const dropDown = $('#port_list');
26+
const ul = $('#port_ul');
27+
ul.innerHTML = '';
2728
updateStatus(`found ${ports.length} ports connected`);
28-
dropDown.innerHTML = '';
2929

3030
ports.forEach(port => {
31-
const newOption = document.createElement('option');
32-
newOption.text = port.comName;
33-
newOption.value = port.comName;
34-
dropDown.appendChild(newOption);
31+
const newLi = document.createElement('li');
32+
newLi.setAttribute('data-value', port.comName);
33+
newLi.innerHTML = port.comName;
34+
ul.appendChild(newLi);
3535
});
3636
});
3737

3838
const onData = response => {
3939
// Callback function when data is read
4040
updateTarget(response);
4141
sound.play();
42-
updateStatus('reading...completed');
4342
};
4443

4544
// Handle the 'Connect' button
4645
const connectToDevice = () => {
47-
const dropDown = $('#port_list');
48-
const devicePath = dropDown.options[dropDown.selectedIndex].value;
49-
connect(devicePath, onData).then(() => {
50-
updateStatus('connected');
51-
});
46+
const active = $('.active');
47+
if (!active) {
48+
updateStatus('No device selected');
49+
} else {
50+
const devicePath = active.getAttribute('data-value');
51+
connect(devicePath, onData)
52+
.then(() => {
53+
$('#overlay').classList.add('hidden');
54+
})
55+
.catch(() => {
56+
updateStatus('Error connecting!');
57+
});
58+
}
59+
};
60+
61+
const setActive = e => {
62+
if (e.target && e.target.matches('li')) {
63+
const currentActive = $('.active');
64+
if (currentActive) {
65+
currentActive.classList.remove('active');
66+
}
67+
e.target.classList.add('active');
68+
}
5269
};
5370

71+
$('#port_ul').addEventListener('click', setActive);
5472
$('#refresh_button').addEventListener('click', updateAvailableDevices);
5573
$('#connect_button').addEventListener('click', connectToDevice);
56-
$('#fullscreen').addEventListener('click', () => {});
57-
$('#test').addEventListener('click', () => {
58-
updateTarget('test');
59-
});
6074

6175
updateAvailableDevices();

‎electron-app/style.css‎

Lines changed: 64 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,83 @@ webview {
66
border: 0;
77
width: 100%;
88
height: 100%;
9+
font-family: 'Open Sans', sans-serif;
10+
color: #3e3e3e;
911
}
1012

11-
.status_area {
13+
.overlay {
1214
position: absolute;
15+
top: 0;
1316
left: 0;
1417
width: 100%;
15-
bottom: 0;
18+
height: 100%;
19+
z-index: 10;
20+
background-color: #ffffff;
1621
}
1722

18-
.status_area .hidden {
19-
position: relative;
20-
bottom: -50px;
21-
background: #262323;
22-
-webkit-transition: all 200ms ease-in-out;
23-
transition-delay: 2s;
23+
.hidden {
24+
display: none;
2425
}
2526

26-
.status_area:hover .hidden {
27-
bottom: 0;
28-
-webkit-transition: all 200ms ease-in-out;
27+
.setupContainer {
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
justify-content: center;
32+
height: 100vh;
2933
}
3034

31-
.status_area a {
32-
display: inline-block;
33-
padding: 0 5px;
34-
color: #ffffff;
35+
.setupContainer > * {
36+
margin: 10px 0;
3537
}
3638

37-
a:hover {
38-
color: #fc0405;
39+
.header {
40+
font-size: 22px;
41+
text-transform: uppercase;
3942
}
4043

41-
.status_area #status_text {
42-
position: absolute;
43-
bottom: 0;
44-
right: 0;
45-
display: inline;
46-
color: #ffffff;
44+
.inputContainer {
45+
width: 480px;
46+
}
47+
48+
.buttonGroup {
49+
display: flex;
50+
}
51+
52+
button {
53+
width: 220px;
54+
outline: 0;
55+
cursor: pointer;
56+
height: 50px;
57+
font-size: 20px;
58+
font-weight: 500;
59+
color: rgba(0, 0, 0, 0.7);
60+
margin: 20px 20px;
61+
background-color: transparent;
62+
text-transform: uppercase;
63+
border: 2px solid #bbb;
64+
}
65+
66+
.buttonGroup {
67+
display: flex;
68+
}
69+
70+
.options {
71+
list-style: none;
72+
}
73+
74+
.options > li {
75+
padding-left: 5px;
76+
height: 32px;
77+
line-height: 32px;
78+
vertical-align: middle;
79+
}
80+
81+
.options > li:hover {
82+
cursor: pointer;
83+
background-color: rgba(60, 60, 60, 0.25);
84+
}
85+
86+
.active {
87+
background-color: rgba(60, 60, 60, 0.25);
4788
}

0 commit comments

Comments
 (0)