huahaofeng
/
aspnetcore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Making UI functional

This commit is contained in:
Pawel Kadluczka 2016-11-03 22:30:26 -07:00 committed by moozzyk
parent 04fede0436
commit 098347adde
1 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
samples/PersisitentConnection/wwwroot/weather.html
View File

@ -5,10 +5,12 @@
<title>Social weather</title> <title>Social weather</title>
</head> </head>
<body> <body>
<div> <div id="weatherDiv" display="none">
<p>Weather: <span id="current" /></p>
</div> </div>
<form id="reportWeather" action="#"> <form id="reportWeather" action="#">
<input type="number" id="temperature" /> <label for="temperature">Temperature</label><input type="number" id="temperature" value="72"/>
<label for="weather">Weather</label>
<select id="weather"> <select id="weather">
<option value="Sunny">Sunny</option> <option value="Sunny">Sunny</option>
<option value="MostlySunny">Mostly Sunny</option> <option value="MostlySunny">Mostly Sunny</option>
@ -17,34 +19,53 @@
<option value="MostlyCloudy">Mostly Cloudy</option> <option value="MostlyCloudy">Mostly Cloudy</option>
<option value="Cloudy">Cloudy</option> <option value="Cloudy">Cloudy</option>
</select> </select>
<label for="zipCode">Zip</label><input type="text" id="zipCode" />
<input type="submit" value="Send report" /> <input type="submit" value="Send report" />
</form> </form>
<div>
<p>Status: <span id="status" /></p>
</div>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { 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 connectUrl = `ws://${document.location.host}/weather/ws?formatType=json`;
var webSocket = new WebSocket(connectUrl); let webSocket = new WebSocket(connectUrl);
webSocket.onopen = event => { webSocket.onopen = event => {
console.log(`WebSocket connected to ${connectUrl}`); updateStatus('Connected', 'green');
}; };
webSocket.onerror = event => { webSocket.onerror = event => {
updateStatus('Error occurred', 'green');
}; };
webSocket.onmessage = message => { webSocket.onmessage = event => {
get('weatherDiv').style.display = 'block';
let weatherReport = JSON.parse(event.data);
get('current').innerHTML = event.data;
} }
webSocket.onclose = event => { webSocket.onclose = event => {
updateStatus(`WebSocket closed. Reason: ${event.code}`, event.wasClean ? 'green' : 'red')
} }
document.getElementById('reportWeather').addEventListener('submit', event => { get('reportWeather').addEventListener('submit', event => {
let weather = get('weather');
webSocket.send( webSocket.send(
JSON.stringify({ JSON.stringify({
Temperature: '49', Temperature: get('temperature').value,
Weather: 'Cloudy', Weather: weather.options[weather.selectedIndex].value,
ReportTime: Date.now(), ReportTime: Date.now(),
ZipCode: "98034" ZipCode: get('zipCode').value
})); }));
event.preventDefault(); event.preventDefault();