dimgigov
4e54075078
CI / test (push) Has been cancelled
CI / verify (push) Has been cancelled
Clients CI / build-server (push) Has been cancelled
Clients CI / test-python (push) Has been cancelled
Clients CI / test-javascript (push) Has been cancelled
Clients CI / test-nim (push) Has been cancelled
Clients CI / test-rust (push) Has been cancelled
93 lines
2.5 KiB
Nim
93 lines
2.5 KiB
Nim
## Frontend for our chat application example.
|
|
## You need to have 'karax' installed in order for this to work.
|
|
|
|
import karax / [kbase, karax, vdom, karaxdsl, kajax, jwebsockets, jjson,
|
|
jstrutils, errors]
|
|
|
|
# Custom UI element with input validation:
|
|
|
|
proc validateNotEmpty(field: kstring): proc () =
|
|
result = proc () =
|
|
let x = getVNodeById(field)
|
|
if x.text.isNil or x.text == "":
|
|
setError(field, field & " must not be empty")
|
|
else:
|
|
setError(field, "")
|
|
|
|
proc loginField(desc, field, class: kstring;
|
|
validator: proc (field: kstring): proc ()): VNode =
|
|
result = buildHtml(tdiv):
|
|
label(`for` = field):
|
|
text desc
|
|
input(`type` = class, id = field, onchange = validator(field))
|
|
|
|
# here we setup the connection to the server:
|
|
let conn = newWebSocket("ws://localhost:8080", "orminchat")
|
|
|
|
proc send(msg: JsonNode) =
|
|
# The Ormin "protocol" requires us to have 'send' implementation.
|
|
conn.send(toJson(msg))
|
|
|
|
type User* = ref object
|
|
name*, password: kstring
|
|
|
|
const
|
|
username = kstring"username"
|
|
password = kstring"password"
|
|
message = kstring"message"
|
|
|
|
# Include the 'chatclient' helper that Ormin produced for us:
|
|
include chatclient
|
|
|
|
template loggedIn(): bool = userId > 0
|
|
|
|
proc doLogin() =
|
|
registerUser(User(name: getVNodeById(username).text,
|
|
password: getVNodeById(password).text))
|
|
|
|
proc doSendMessage() =
|
|
let inputField = getVNodeById(message)
|
|
sendMessage(TextMessage(author: userId, content: inputField.text))
|
|
inputField.setInputText ""
|
|
|
|
proc registerOnUpdate() =
|
|
conn.onmessage =
|
|
proc (e: MessageEvent) =
|
|
let msg = fromJson[JsonNode](e.data)
|
|
# 'recvMsg' was generated for us:
|
|
recvMsg(msg)
|
|
karax.redraw()
|
|
|
|
proc main(): VNode =
|
|
result = buildHtml(tdiv):
|
|
tdiv:
|
|
if not loggedIn:
|
|
loginField("Name :", username, "input", validateNotEmpty)
|
|
loginField("Password: ", password, "password", validateNotEmpty)
|
|
button(onclick = doLogin, disabled = disableOnError()):
|
|
text "Login"
|
|
p:
|
|
text getError(username)
|
|
p:
|
|
text getError(password)
|
|
tdiv:
|
|
table:
|
|
for m in allMessages:
|
|
tr:
|
|
td:
|
|
bold:
|
|
text m.name
|
|
td:
|
|
text m.content
|
|
tdiv:
|
|
if loggedIn:
|
|
label(`for` = message):
|
|
text "Message: "
|
|
input(class = "input", id = message, onkeyupenter = doSendMessage)
|
|
|
|
registerOnUpdate()
|
|
runLater proc() =
|
|
getRecentMessages()
|
|
|
|
setRenderer(main)
|