Skip to content

Commit 7983beb

Browse files
jasonacoxjasonacox
committed
Data tables
1 parent 6f629d7 commit 7983beb

File tree

4 files changed

+115
-28
lines changed

4 files changed

+115
-28
lines changed

‎server/server.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858

5959
import tinytuya
6060

61-
BUILD = "t3"
61+
BUILD = "t4"
6262

6363
# Defaults
6464
APIPORT = 8888

‎server/web/device_dps.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<html lang="en">
33
<head>
44
<title>TinyTuya API Server - Device Details</title>
5-
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
5+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
6+
<link rel="stylesheet" href="tinytuya.css">
67
</head>
78

89
<body>
@@ -102,14 +103,14 @@
102103
var key = data.key;
103104
var product = data.productKey;
104105
var mac = data.mac;
105-
var output =
106-
"Name: " + name + "<br>" +
107-
"Device ID: " + id + "<br>" +
108-
"IP: " + ip + "<br>" +
109-
"MAC: " + mac + "<br>" +
110-
"Version: " + version + "<br>" +
111-
"Key: " + key + "<br>" +
112-
"Product: " + product + "<br>";
106+
var output = "<table>" +
107+
"<tr><td>Name</td><td><div class='value'>" + name + "</div></td><tr>" +
108+
"<tr><td>Device ID</td><td><div class='value'>" + id + "</div></td><tr>" +
109+
"<tr><td>IP</td><td><div class='value'>" + ip + "</div></td><tr>" +
110+
"<tr><td>MAC</td><td><div class='value'>" + mac + "</div></td><tr>" +
111+
"<tr><td>Version</td><td><div class='value'>" + version + "</div></td><tr>" +
112+
"<tr><td>Key</td><td><div class='value'>" + key + "</div></td><tr>" +
113+
"<tr><td>Product</td><td><div class='value'>" + product + "</div></td><tr>";
113114
$(".device").html(output);
114115
});
115116

‎server/web/index.html‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,22 @@
33
<head>
44
<title>TinyTuya API Server</title>
55
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
6+
<link rel="stylesheet" href="tinytuya.css">
67
</head>
78

8-
<body>
9+
<body>
910
<div class="title"></div>
10-
<p>Stats</p>
11+
<div class="row">
12+
<div class="lcolumn">
13+
<p class="onlinetext">Devices Online</p>
14+
<div class="devices"></div>
15+
</div>
16+
<div class = "rcolumn">
17+
<p class="offlinetext">Devices Offline</p>
18+
<div class="offline"></div>
19+
</div>
20+
</div>
1121
<div class="number"></div>
12-
<p class="onlinetext">Devices Online</p>
13-
<div class="devices"></div>
14-
<p class="offlinetext">Registered Devices Offline</p>
15-
<div class="offline"></div>
1622
<script>
1723

1824
// Get Version
@@ -29,8 +35,8 @@
2935
function numdevices() {
3036
var pwurl = window.location.protocol + "//" + window.location.hostname + ":8888/numdevices";
3137
$.getJSON(pwurl, function(data) {
32-
var text = `Number of Devices Found: ${data.found}` + "<br>" +
33-
`Total Devices Registered: ${data.registered}`;
38+
var text = `Number of Devices Found: ${data.found}` +
39+
` - Registered: ${data.registered}`;
3440
var online = `Devices Online: ${data.found}`;
3541
var numoff = data.registered - data.found;
3642
if(numoff<0) numoff = 0;
@@ -68,15 +74,22 @@
6874
// print sorted list
6975
let sortedDevices = deviceDB.sort((c1, c2) => (c1.name > c2.name) ? 1 : (c1.name < c2.name) ? -1 : 0);
7076
let rownum = 1;
77+
output = "<table><thead>\n<tr>\n<th>#</th><th>Device Name</th><th>Device ID</th>" +
78+
"<th>IP Address</th><th>Version</th><th>Control</th>\n</tr></thead>\n<tbody>";
7179
for (let x in sortedDevices) {
72-
output = output + rownum +
73-
" - <a href='device.html?id=" + sortedDevices[x].id + "'>" +
74-
(sortedDevices[x].name.length > 0 ? sortedDevices[x].name : '[' + sortedDevices[x].id + ']') + "</a> - " +
75-
"<a href='device_dps.html?id=" + sortedDevices[x].id + "'>" + sortedDevices[x].id + "</a> -" +
76-
sortedDevices[x].ip + "<br>\n";
80+
output = output + "<tr>\n<td>" + rownum + "</td>" +
81+
" <td> <a href='device_dps.html?id=" + sortedDevices[x].id + "'>" +
82+
(sortedDevices[x].name.length > 0 ? sortedDevices[x].name : '[' + sortedDevices[x].id + ']') +
83+
"</a> </td><td>" +
84+
"<div class='id'>" + sortedDevices[x].id + "</div></td><td>" +
85+
"<div class='address'>" + sortedDevices[x].ip + "</div></td><td>" +
86+
"<div class='version'>" + sortedDevices[x].version + "</div></td>" +
87+
" <td> <a href='device_dps.html?id=" + sortedDevices[x].id + "'>View</a></td>"
88+
"\n</tr>\n";
7789
rownum++;
7890
}
79-
91+
output = output + "</tbody>\n</table>\n";
92+
8093
$(".devices").html(output);
8194

8295
// TODO - convert to table
@@ -107,13 +120,18 @@
107120
// print sorted list
108121
let sortedDevices = deviceDB.sort((c1, c2) => (c1.name > c2.name) ? 1 : (c1.name < c2.name) ? -1 : 0);
109122
let rownum = 1;
123+
output = "<table><thead>\n<tr>\n<th>#</th><th>Device Name</th><th>Device ID</th>" +
124+
"</tr></thead>\n<tbody>";
110125
for (let x in sortedDevices) {
111-
output = output + rownum +
112-
" - <a href='device.html?id=" + sortedDevices[x].id + "'>" +
113-
(sortedDevices[x].name.length > 0 ? sortedDevices[x].name : '[' + sortedDevices[x].id + ']') + "</a> - " +
114-
sortedDevices[x].id + "<br>\n";
126+
output = output + "<tr>\n<td>" + rownum + "</td>" +
127+
" <td> <a href='device_dps.html?id=" + sortedDevices[x].id + "'>" +
128+
(sortedDevices[x].name.length > 0 ? sortedDevices[x].name : '[' + sortedDevices[x].id + ']') +
129+
"</a> </td><td>" +
130+
"<div class='id'>" + sortedDevices[x].id + "</div></td>" +
131+
"\n</tr>\n";
115132
rownum++;
116133
}
134+
output = output + "</tbody>\n</table>\n";
117135

118136
$(".offline").html(output);
119137
});

‎server/web/tinytuya.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
2+
body {
3+
font-family: sans-serif;
4+
font-size: small;
5+
}
6+
.title {
7+
font-size: large;
8+
font-weight: bold;
9+
}
10+
.address, .onlinetext {
11+
color: green;
12+
}
13+
.id {
14+
color: darkblue;
15+
}
16+
.offlinetext {
17+
color: red;
18+
}
19+
.version {
20+
color: rgb(200, 200, 3);
21+
}
22+
table {
23+
border-collapse: collapse;
24+
}
25+
tr {
26+
border: 1px solid black;
27+
}
28+
td, th {
29+
padding-left: 5px;
30+
padding-right: 5px;
31+
}
32+
tbody tr:nth-child(even) {
33+
background-color: #eeeeee;
34+
}
35+
thead {
36+
background-color: gray;
37+
color: white;
38+
text-align: left;
39+
padding: auto;
40+
}
41+
a:link, a:visited {
42+
color: black;
43+
text-decoration: underline;
44+
}
45+
a:hover, a:active {
46+
background-color: black;
47+
color: white;
48+
}
49+
.lcolumn {
50+
flex: 60%;
51+
padding: 5px;
52+
}
53+
.rcolumn {
54+
flex: 40%;
55+
padding: 5px;
56+
}
57+
.row {
58+
display: flex;
59+
}
60+
/* Clear floats after the columns */
61+
.row:after {
62+
content: "";
63+
display: table;
64+
clear: both;
65+
}
66+
.value {
67+
color: rgb(73, 73, 73);
68+
}

0 commit comments

Comments
 (0)