<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>userver sample</title>
<link href="custom.css" rel="stylesheet">
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<div class="nav-bar">
<form action="/v1/messages" id="send-message-form">
<label>Name:</label>
<input type="text" id="form-name" name="name">
<label>Message:</label>
<input type="text" id="form-message" name="message">
<input type="submit" value="Send message">
</form>
</div>
<div class="clear-both"></div>
<h1>Messages:</h1>
<div id="the-messages"></div>
<script>
function OnSubmit(event) {
PostJsonForm(event, _ => { window.location.reload(); });
}
document.getElementById('send-message-form').addEventListener('submit', OnSubmit);
function EscapeHTML(str){
var p = document.createElement("p");
p.appendChild(document.createTextNode(str));
return p.innerHTML;
}
function OnLoaded() {
GetMessages(messages_array =>{
var content = "";
messages_array.forEach(message => {
content += "<p><span class='name'>" + EscapeHTML(message["name"]) + "</span>: " + EscapeHTML(message["message"]) + "</p>";
});
document.getElementById("the-messages").innerHTML = content;
});
}
document.addEventListener('DOMContentLoaded', OnLoaded);
</script>
</body>
</html>
