76 lines
2.6 KiB
HTML
76 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Social weather</title>
|
|
</head>
|
|
<body>
|
|
<div id="weatherDiv" display="none">
|
|
<p>Weather: <span id="current" /></p>
|
|
</div>
|
|
<form id="reportWeather" action="#">
|
|
<label for="temperature">Temperature</label><input type="number" id="temperature" value="72"/>
|
|
<label for="weather">Weather</label>
|
|
<select id="weather">
|
|
<option value="Sunny">Sunny</option>
|
|
<option value="MostlySunny">Mostly Sunny</option>
|
|
<option value="PartlySunny">Partly Sunny</option>
|
|
<option value="PartlyCloudy">Partly Cloudy</option>
|
|
<option value="MostlyCloudy">Mostly Cloudy</option>
|
|
<option value="Cloudy">Cloudy</option>
|
|
</select>
|
|
<label for="zipCode">Zip</label><input type="text" id="zipCode" />
|
|
<input type="submit" value="Send report" />
|
|
</form>
|
|
<div>
|
|
<p>Status: <span id="status" /></p>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
function get(id) {
|
|
return document.getElementById(id);
|
|
}
|
|
|
|
function updateStatus(text, color) {
|
|
var span = get('status');
|
|
span.innerHTML = text;
|
|
span.style.color = color;
|
|
}
|
|
|
|
let connectUrl = `ws://${document.location.host}/weather/ws?formatType=json`;
|
|
let webSocket = new WebSocket(connectUrl);
|
|
webSocket.onopen = event => {
|
|
updateStatus('Connected', 'green');
|
|
};
|
|
|
|
webSocket.onerror = event => {
|
|
updateStatus('Error occurred', 'green');
|
|
};
|
|
|
|
webSocket.onmessage = event => {
|
|
get('weatherDiv').style.display = 'block';
|
|
let weatherReport = JSON.parse(event.data);
|
|
get('current').innerHTML = event.data;
|
|
}
|
|
|
|
webSocket.onclose = event => {
|
|
updateStatus(`WebSocket closed. Reason: ${event.code}`, event.wasClean ? 'green' : 'red')
|
|
}
|
|
|
|
get('reportWeather').addEventListener('submit', event => {
|
|
let weather = get('weather');
|
|
|
|
webSocket.send(
|
|
JSON.stringify({
|
|
Temperature: get('temperature').value,
|
|
Weather: weather.options[weather.selectedIndex].value,
|
|
ReportTime: Date.now(),
|
|
ZipCode: get('zipCode').value
|
|
}));
|
|
|
|
event.preventDefault();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |