todo-webclient/client/index.ls

186 lines
3.6 KiB
Plaintext
Raw Normal View History

2019-11-20 19:22:51 +01:00
# first:
# connection to authd
# display the authd widget
#
# second:
# connection to todod
# rewrite the whole body component
#
maquette = require "maquette"
2019-11-22 16:52:50 +01:00
nmd = require "nano-markdown"
authd = require "./authd.ls"
todows = require "./todowebsocket.ls"
bulma = require "./bulma.ls"
Task = require "./task.ls"
Project = require "./project.ls"
2019-11-20 19:22:51 +01:00
{create-projector, h} = maquette
projector = create-projector!
model = {
current-view: "login"
editing: undefined
selected: undefined
users: {}
projects: {}
2019-11-22 18:42:46 +01:00
todo-list: []
port: 9999
todod-url: undefined
authd-ws: undefined
todod-ws: undefined
previous-error: undefined
error: undefined
# authentication token
jwt: undefined
2019-11-20 19:22:51 +01:00
}
2019-11-22 16:52:50 +01:00
# '://' + location.hostname + \: +
2019-11-22 18:42:46 +01:00
model.todod-url =
2019-11-22 16:52:50 +01:00
(if location.protocol == 'https' then 'wss' else 'ws') +
"://www.junkos.netlib.re:" +
2019-11-22 18:42:46 +01:00
model.port +
2019-11-22 16:52:50 +01:00
"/kanban.JSON"
2019-11-20 19:22:51 +01:00
2019-11-22 18:42:46 +01:00
console.log model.todod-url
2019-11-20 19:22:51 +01:00
2019-11-22 16:52:50 +01:00
#
# network configuration
#
2019-11-22 18:42:46 +01:00
model.authd-ws = authd.create-socket model.authd-url
model.todod-ws = todows.create-socket model.todod-url
2019-11-22 16:52:50 +01:00
on-websocket-error = (event) ->
console.log "WebSocket error.", event
2019-11-22 18:42:46 +01:00
model.current-view := "network-error"
2019-11-22 16:52:50 +01:00
projector.schedule-render!
2019-11-20 19:22:51 +01:00
2019-11-22 18:42:46 +01:00
on-websocket-close = (event) ->
2019-11-20 19:22:51 +01:00
model.current-view := "login"
2019-11-22 18:42:46 +01:00
console.log "WebSocket has been closed.", event
# model.todod-ws.reopen!
2019-11-20 19:22:51 +01:00
2019-11-22 16:52:50 +01:00
projector.schedule-render!
on-websocket-message = (data) ->
message = JSON.parse data
2019-11-20 19:22:51 +01:00
switch message.type
when "login"
2019-11-22 18:42:46 +01:00
model.current-view := "todo-list"
2019-11-20 19:22:51 +01:00
when "list-projects"
2019-11-22 18:42:46 +01:00
model.todo-list := message.projects || []
2019-11-20 19:22:51 +01:00
when "project"
2019-11-22 18:42:46 +01:00
model.projects[message.project.id] = Project.new message.project, model
2019-11-20 19:22:51 +01:00
when "user"
if message.user
model.users[message.user.uid] := message.user
when "login-error"
model.login-error = message.error
else
console.log "RECEIVED UNKNOWN MESSAGE TYPE: #{message.type}"
projector.schedule-render!
console.log message
2019-11-22 16:52:50 +01:00
# record changes that need to happen on a network event
2019-11-22 18:42:46 +01:00
model.todod-ws.user-on-error ++= [ on-websocket-error ]
model.todod-ws.user-on-close ++= [ on-websocket-close ]
model.todod-ws.user-on-message ++= [ on-websocket-message ]
render-navbar = ->
h \div.navbar [
h \div.navbar-start [
h \a.navbar-item.is-size-1 {
onclick: ->
model.viewed-project := undefined
model.current-view := "todo-list"
} [ "⌂" ]
]
h \div.navbar-end [
h \a.navbar-item {
onclick: ->
model.current-view := "login"
model.todod-ws.reopen!
} [ "Logout" ]
]
authd.login-widget model
]
render-todo-list = ->
h \div.section model.todo-list.map (project) ->
h \a.box {
key: project.id
onclick: ->
model.current-view := "todo"
model.viewed-project := project.id
model.todod-ws.get-project project.id
} [
bulma.title 3 project.name
]
2019-11-22 16:52:50 +01:00
2019-11-22 18:42:46 +01:00
render-new-project-button = ->
h \div.button.is-primary.is-large.is-fullwidth {
onclick: ->
model.todod-ws.new-project "New project"
} [ "New project! (random atm)" ]
render-todo = (todo-id) ->
if model.projects[todo-id]
model.projects[todo-id].render!
2019-11-22 16:52:50 +01:00
#
# Pages:
# login
# todo-list
# todo
# network-error
#
2019-11-22 18:42:46 +01:00
render-body = ->
2019-11-20 19:22:51 +01:00
h \div.section [
switch model.current-view
when "login"
2019-11-22 18:42:46 +01:00
authd.login-page model
2019-11-20 19:22:51 +01:00
2019-11-22 18:42:46 +01:00
when "todo-list"
h \div#todo-list [
2019-11-20 19:22:51 +01:00
render-navbar!
2019-11-22 18:42:46 +01:00
render-todo-list!
render-new-project-button!
2019-11-20 19:22:51 +01:00
]
2019-11-22 18:42:46 +01:00
when "todo"
2019-11-20 19:22:51 +01:00
h \div [
render-navbar!
2019-11-22 18:42:46 +01:00
render-todo model.viewed-project
2019-11-20 19:22:51 +01:00
]
else
h \div.notification.is-error [
"Wait, what? Internal error!"
]
]
2019-11-22 18:42:46 +01:00
renderer = ->
render-navbar!
render-body!
2019-11-20 19:22:51 +01:00
document.add-event-listener 'DOMContentLoaded' ->
projector.append document.body, renderer