97 lines
2.1 KiB
JavaScript
97 lines
2.1 KiB
JavaScript
|
import 'preact/debug'
|
||
|
|
import 'preact/devtools'
|
||
|
|
//import { signal } from 'preact/signals'
|
||
|
|
import { h, Component, render, createRef } from 'preact'
|
||
|
|
import htm from 'htm'
|
||
|
|
const html = htm.bind(h)
|
||
|
|
|
||
|
|
class App extends Component {
|
||
|
|
constructor() {//{{{
|
||
|
|
super()
|
||
|
|
this.websocket = null
|
||
|
|
this.websocket_int_ping = null
|
||
|
|
this.websocket_int_reconnect = null
|
||
|
|
this.wsConnect()
|
||
|
|
this.wsLoop()
|
||
|
|
|
||
|
|
this.sessionID = window.localStorage.getItem("sessionID")
|
||
|
|
}//}}}
|
||
|
|
render() {//{{{
|
||
|
|
if(this.sessionID === null) {
|
||
|
|
return html`<${Login} />`
|
||
|
|
}
|
||
|
|
|
||
|
|
return html`Welcome`;
|
||
|
|
}//}}}
|
||
|
|
|
||
|
|
wsLoop() {//{{{
|
||
|
|
setInterval(()=>{
|
||
|
|
if(this.websocket === null) {
|
||
|
|
console.log("wsLoop connect")
|
||
|
|
this.wsConnect()
|
||
|
|
}
|
||
|
|
}, 1000)
|
||
|
|
}//}}}
|
||
|
|
wsConnect() {//{{{
|
||
|
|
this.websocket = new WebSocket(`wss://notes.ahall.se/ws`)
|
||
|
|
this.websocket.onopen = evt=>this.wsOpen(evt)
|
||
|
|
this.websocket.onmessage = evt=>this.wsMessage(evt)
|
||
|
|
this.websocket.onerror = evt=>this.wsError(evt)
|
||
|
|
this.websocket.onclose = evt=>this.wsClose(evt)
|
||
|
|
}//}}}
|
||
|
|
wsOpen() {//{{{
|
||
|
|
this.setState({ wsConnected: true })
|
||
|
|
|
||
|
|
// A ping interval to implement a rudimentary keep-alive.
|
||
|
|
}//}}}
|
||
|
|
wsClose() {//{{{
|
||
|
|
console.log("Lost connection to Notes server")
|
||
|
|
this.websocket = null
|
||
|
|
}//}}}
|
||
|
|
wsError(evt) {//{{{
|
||
|
|
console.log("websocket error", evt)
|
||
|
|
this.websocket = null;
|
||
|
|
}//}}}
|
||
|
|
wsMessage(evt) {//{{{
|
||
|
|
let msg = JSON.parse(evt.data)
|
||
|
|
|
||
|
|
// Broadcast message
|
||
|
|
if(msg.ID == '') {
|
||
|
|
this.broadcastHandler(msg)
|
||
|
|
} else {
|
||
|
|
this.msgHandler(msg)
|
||
|
|
}
|
||
|
|
}//}}}
|
||
|
|
|
||
|
|
broadcastHandler(msg) {//{{{
|
||
|
|
switch(msg.Op) {
|
||
|
|
case 'css_reload':
|
||
|
|
refreshCSS()
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}//}}}
|
||
|
|
}
|
||
|
|
|
||
|
|
class Login extends Component {
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<div id="login">
|
||
|
|
<h1>Notes</h1>
|
||
|
|
<div>
|
||
|
|
<input id="username" type="text" placeholder="Username" />
|
||
|
|
<input id="password" type="password" placeholder="Password" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Init{{{
|
||
|
|
//let urlParams = new URLSearchParams(window.location.search)
|
||
|
|
window._app = createRef()
|
||
|
|
window._resourceModels = []
|
||
|
|
render(html`<${App} ref=${window._app} />`, document.getElementById('app'))
|
||
|
|
//}}}
|
||
|
|
|
||
|
|
// vim: foldmethod=marker
|