<html>
<head>
<script type="module">
import { html, render } from "https://unpkg.com/lit-html?module";
window.store = { commitLog: [] };
const reducer = (state, action) => {
if (action.body && action.body.commit !== null) {
return {
commitLog: [action.body, ...state.commitLog]
};
} else {
return state;
}
};
const commitTemplate = ({ parents, message }) => html`
<div>
${message}
</div>
`;
function listener(store) {
console.log("updating", store);
render(
commitTemplate(store.commitLog[0].data),
document.querySelector("#latest-commit")
);
}
var ws = new WebSocket("ws://localhost:5009");
function messageHandler({ data: message }) {
const el = document.createElement("li");
el.textContent = message;
document.querySelector("#websocket-log").appendChild(el);
const oldStore = store;
store = reducer(store, JSON.parse(message));
if (oldStore !== store) {
listener(store);
}
}
ws.addEventListener("message", messageHandler);
window.lastConnectAttempt = [0, null];
function closeHandler() {
console.log("lost connection, reconnecting in a second");
if (lastConnectAttempt[1]) {
clearTimeout(lastConnectAttempt[1]);
}
lastConnectAttempt = [
new Date().getTime(),
setTimeout(() => {
console.log("reconnecting");
lastConnectAttempt[1] = null;
ws = new WebSocket("ws://localhost:5009");
ws.addEventListener("message", messageHandler);
ws.addEventListener("close", closeHandler);
}, 1000)
];
}
ws.addEventListener("close", closeHandler);
</script>
<style>
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 80vh;
}
#websocket-log {
margin-top: -5px;
flex-grow: 1;
overflow: auto;
}
.widget {
border: double 5px #efefef;
min-height: 20px;
padding: 8px;
flex-grow: 1;
}
ul { margin: 0; }
</style>
</head>
<body>
<main>
<div class="widget" id="latest-commit"></div>
</main>
<ul class="widget" id="websocket-log"></ul>
</body>
</html>