-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (100 loc) · 2.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html>
<head>
<title>Proiect RFID</title>
</head>
<script src="/socket.io/socket.io.js"></script>
<script>
let readButton = document.getElementById('read_button');
const socket = io();
socket.on('read', data => {
let readDiv = document.getElementById('read');
let readButton = document.getElementById('read_button');
console.log('data in front', data);
let child = document.createElement('div');
child.setAttribute('class','single_read');
let textNode = document.createTextNode(data);
child.appendChild(textNode);
readDiv.appendChild(child);
readButton.value = "START READING";
readButton.removeAttribute('disabled');
})
function startReading() {
var readButton = document.getElementById('read_button');
readButton.disabled = true;
readButton.value = "PRESENT CARD "
socket.emit('startReading');
console.log('called frontend');
}
function startWriting() {
var writeInput = document.getElementById('write_input')
socket.emit('startWriting', writeInput.value)
writeInput.value = '';
}
</script>
<body>
<div class="main_container">
<div class="read_container">
<input onclick="startReading()"
id="read_button"
type="button"
value="START READING"/>
<div id="read"></div>
</div>
<div class="write_container">
<form onsubmit="return false">
<input id="write_input" type="text" placeholder="enter name"/>
<input type="button" onclick="startWriting()" value="Write"/>
</form>
</div>
</div>
</body>
<style>
.single_read {
border-bottom: 2px;
padding: 10px;
background-color: #fff;
color: #005073
overflow: hidden;
width: 170px;
margin: 5px;
overflow: hidden;
}
#read_button {
background-color: #005073;
border: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 100;
text-decoration: none;
user-select: none;
color: #fff;
padding: 20px 40px;
letter-spacing: 1.3px;
max-height: 52px;
}
#read {
//padding-left: 50px;
}
.main_container {
display: flex;
flex-direction: row;
width: 50%;
height: 500px;
background-color: white;
}
.read_container {
display: flex;
flex-flow: column;
min-height: 300px;
padding: 10px;
background-color: white;
}
.write_container {
border: 1px solid green;
height: 50%;
overflow: hidden;
padding: 10px;
}
</style>
</html>