Skip to content

Commit e6a46aa

Browse files
balloobballoob
committed
Update the MQTT server
1 parent e38895c commit e6a46aa

File tree

1 file changed

+92
-48
lines changed

1 file changed

+92
-48
lines changed

‎source/mqtt/test_server.html

Lines changed: 92 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,57 +11,90 @@
1111

1212
<script src="https://unpkg.com/mqtt@2.9.3/dist/mqtt.min.js"></script>
1313

14-
<form id='connection'>
15-
<table>
16-
<tr>
17-
<td>
18-
MQTT Websocket Server<br>
19-
<small>Default of Home Assistant embedded websocket server is <code>ws://localhost:8080</code>.</small>
20-
</td>
21-
<td><input name='host' value="ws://localhost:8080" size="30" /></td>
22-
</tr>
23-
<tr>
24-
<td></td>
25-
<td><button>Connect</button></td>
26-
</tr>
27-
</table>
14+
<style>
15+
.mqtt-form input {
16+
margin-bottom: 24px;
17+
}
18+
</style>
19+
20+
<form id='connection' class='mqtt-form'>
21+
<div class="grid">
22+
23+
<div class="grid__item one-half lap-one-half palm-one-whole">
24+
<label for="host">MQTT Websocket Server</label>
25+
<small>Default for the Home Assistant embedded websocket server is <code>ws://localhost:8080</code>.</small>
26+
<br><br>
27+
</div>
28+
<div class="grid__item one-half lap-one-half palm-one-whole">
29+
<input name='host' value="ws://localhost:8080" style='width: 100%' />
30+
</div>
31+
32+
<div class="grid__item one-half lap-one-half palm-one-whole">
33+
<label for="password">API Password</label>
34+
<small>Enter your Home Assistant password. This is required to connect to the MQTT server. This password will not be stored!</small>
35+
</div>
36+
<div class="grid__item one-half lap-one-half palm-one-whole">
37+
<input type='password' name='password' value="" style='width: 100%' />
38+
</div>
39+
40+
<div class="grid__item one-half lap-one-half palm-one-whole">
41+
</div>
42+
<div class="grid__item one-half lap-one-half palm-one-whole">
43+
<button>Connect</button>
44+
</div>
45+
46+
</div>
2847
</form>
2948

30-
<div id='connectionStatus' style='display: none'>
31-
Host <span id='host'></span>. Status: <span id='status'></span>.
32-
<button id='disconnectButton'>Disconnect</button>
49+
<div id='connectionStatus' class="grid push--bottom" style='display: none'>
50+
<div class="grid__item one-half lap-one-half palm-one-whole">
51+
Host <span id='host'></span>. Status: <span id='status'></span>.
52+
</div>
53+
<div class="grid__item one-half lap-one-half palm-one-whole">
54+
<button id='disconnectButton'>Disconnect</button>
55+
</div>
3356
</div>
3457

35-
<form id='publisher' style='display: none;'>
36-
<table>
37-
<tr>
38-
<td>Topic</td>
39-
<td>
40-
<input
41-
name='topic'
42-
value="homeassistant/kitchen/temperature"
43-
size="30"
44-
style='width: 100%'
45-
/>
46-
</td>
47-
</tr>
48-
<tr>
49-
<td>Payload</td>
50-
<td>
58+
<form id='publisher' style='display: none;' class='mqtt-form'>
59+
<div class="grid">
60+
61+
<div class="grid__item one-half lap-one-half palm-one-whole">
62+
<label for="topic">Topic</label>
63+
</div>
64+
<div class="grid__item one-half lap-one-half palm-one-whole">
65+
<input
66+
name='topic'
67+
value="homeassistant/kitchen/temperature"
68+
style='width: 100%'
69+
/>
70+
</div>
71+
72+
<div class="grid__item one-half lap-one-half palm-one-whole">
73+
Payload
74+
</div>
75+
<div class="grid__item one-half lap-one-half palm-one-whole">
5176
<textarea name='payload'>23</textarea>
52-
</td>
53-
</tr>
54-
<tr>
55-
<td></td>
56-
<td><button>Publish</button></td>
57-
</tr>
58-
</table>
77+
</div>
78+
79+
<div class="grid__item one-half lap-one-half palm-one-whole">
80+
</div>
81+
<div class="grid__item one-half lap-one-half palm-one-whole push--top">
82+
<button>Publish</button>
83+
</div>
84+
85+
</div>
5986
</form>
6087

6188
<script>
6289
function updateStatus(status) {
6390
document.getElementById('status').innerText = status;
6491
}
92+
function show(el) {
93+
document.getElementById(el).style.display = 'block';
94+
}
95+
function hide(el) {
96+
document.getElementById(el).style.display = 'none';
97+
}
6598

6699
document.getElementById('connection').addEventListener('submit', function (ev) {
67100
ev.preventDefault();
@@ -70,27 +103,38 @@
70103
window.client.end();
71104
}
72105

73-
var host = ev.target.querySelector('input').value;
106+
var host = ev.target.querySelector('input[name=host]').value;
107+
var password = ev.target.querySelector('input[name=password]').value;
108+
var options = {};
74109

75-
window.client = mqtt.connect(host);
110+
if (password) {
111+
options.username = 'homeassistant';
112+
options.password = password;
113+
}
114+
115+
window.client = mqtt.connect(host, options);
76116
console.log('Connecting')
77117
document.getElementById('host').innerText = host;
78118
updateStatus("Connecting");
79-
document.getElementById('connection').style.display = 'none';
80-
document.getElementById('connectionStatus').style.display = 'block';
119+
hide('connection');
120+
show('connectionStatus');
81121

82122
window.client.on("connect", function () {
83123
console.log('Connected')
84124
updateStatus("Connected");
85-
document.getElementById('publisher').style.display = 'block';
125+
126+
hide('connection');
127+
show('connectionStatus');
128+
show('publisher');
86129
})
87130

88131
window.client.on("close", function () {
89132
console.log('Connection closed')
90133
updateStatus("Disconnected");
91-
document.getElementById('connection').style.display = 'block';
92-
document.getElementById('connectionStatus').style.display = 'none';
93-
document.getElementById('publisher').style.display = 'none';
134+
135+
show('connection');
136+
hide('connectionStatus');
137+
hide('publisher');
94138
})
95139
});
96140

0 commit comments

Comments
 (0)