todo-webclient/client/index.ls

301 lines
6.5 KiB
Plaintext

# first:
# connection to authd
# display the authd widget
#
# second:
# connection to todod
# rewrite the whole body component
# page 1: (TODO) list of lists (or todos)
# display:
# navbar
#
# "element 1" button
# "element 2" button
# ...
# "element x" button
#
# "new list" button
# widgets:
# navbar: [return to list button] [logout]
# element button:
# [todo list name]
# or
# [todo list name] [RIGTHS] [DELETE]
#
# page 2:
# display:
# (TODO) list of tasks (this client has a kanban display of tasks, with columns)
# (TODO) task widget
# widgets:
# task widget:
# TODO
#
# page 3: (TODO) pages about
maquette = require "maquette"
nmd = require "nano-markdown"
authd = require "./authd.ls"
todows = require "./todowebsocket.ls"
bulma = require "./bulma.ls"
Task = require "./task.ls"
Project = require "./project.ls"
Modal = require "./modal.ls"
{create-projector, h} = maquette
projector = create-projector!
model = {
# view: login, todo-list, todo, network-error (TODO: other views, such as rights)
# XXX FIXME TODO: TESTING THINGS
# current-view: "login"
current-view: "testing-modals"
# TODO: currently-editing
editing: undefined
# TODO: currently-selected
selected: undefined
current-modal: true
# { uid => user data }
users: {}
# list of todos-list
projects: {}
todo-list: []
port: 9999
authd-url: undefined
todod-url: undefined
authd-ws: undefined
todod-ws: undefined
previous-error: undefined
error: undefined
# TODO: authentication token
jwt: undefined
}
# TODO XXX FIXME
model.modal = Modal {+visible}
model.authd-url =
(if location.protocol == 'https' then 'wss' else 'ws') +
'://' + location.hostname + \: +
model.port +
"/auth.JSON"
model.todod-url =
(if location.protocol == 'https' then 'wss' else 'ws') +
'://' + location.hostname + \: +
model.port +
"/todo.JSON"
console.log "authd url: " + model.authd-url
console.log "todod url: " + model.todod-url
#
# network configuration
#
model.authd-ws = authd.create-socket model.authd-url
model.todod-ws = todows.create-socket model.todod-url
#
# authd messages management
#
# authd socket errors
authd-on-websocket-error = (event) ->
console.log "WebSocket error.", event
model.current-view := "network-error"
projector.schedule-render!
authd-on-websocket-close = (event) ->
model.current-view := "login"
console.log "WebSocket has been closed.", event
# model.todod-ws.reopen!
projector.schedule-render!
# record changes that need to happen on a network event
model.authd-ws.user-on-socket-error ++= [ authd-on-websocket-error ]
model.authd-ws.user-on-socket-close ++= [ authd-on-websocket-close ]
# authd message handlers
model.authd-ws.add-event-listener \token, (message) ->
model.jwt := message.token
model.current-view := "todo-list"
model.todod-ws.list-lists model.jwt
projector.schedule-render!
model.authd-ws.add-event-listener \error, (message) ->
# console.log "authd error", message
projector.schedule-render!
model.authd-ws.add-event-listener \user, (message) ->
model.users[message.user.uid] := message.user
projector.schedule-render!
# TODO: user-added, user-edited
#
# todod messages management
#
# todod socket errors
on-websocket-error = (event) ->
console.log "WebSocket error.", event
model.current-view := "network-error"
projector.schedule-render!
on-websocket-close = (event) ->
model.current-view := "login"
console.log "WebSocket has been closed.", event
# model.todod-ws.reopen!
projector.schedule-render!
# model.projects[message.project.id] = Project.new message.project, model
# record changes that need to happen on a network event
model.todod-ws.user-on-socket-error ++= [ on-websocket-error ]
model.todod-ws.user-on-socket-close ++= [ on-websocket-close ]
model.todod-ws.add-event-listener \lists-list, (message) ->
console.log message
model.todo-list := message.lists
for list in model.todo-list
model.projects[list.id] := Project.new list, model
projector.schedule-render!
model.todod-ws.add-event-listener \new-list, (message) ->
console.log message
model.todo-list := model.todo-list ++ [ message.list ]
model.projects[message.list.id] := Project.new message.list, model
projector.schedule-render!
model.todod-ws.add-event-listener \tasks, (message) ->
console.log message
model.projects[message.list].tasks := message.tasks
projector.schedule-render!
render-navbar = ->
h \div.navbar [
h \div.navbar-start [
h \a.navbar-item.is-size-2 {
onclick: ->
model.viewed-project := undefined
model.current-view := "todo-list"
} [ "⌂" ]
]
h \div.navbar-end [
h \a.navbar-item {
onclick: ->
model.current-view := "login"
# TODO: remove anything related to the old session on the client
model.todod-ws.reopen!
} [ "Logout" ]
]
]
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-list model.jwt, project.id
} [
bulma.title 4 project.title
]
render-new-project-button = ->
h \div.button.is-primary.is-large.is-fullwidth {
onclick: ->
model.todod-ws.add-list model.jwt, "New project", {
columns: ["Unassigned", "Work in progress", "To be checked", "Being checked", "Done"]
}
} [ "New project!" ]
render-todo = (todo-id) ->
if model.projects[todo-id]
model.projects[todo-id].render!
else
h \div.notification.is-error [
bulma.title 3 "Error, we did not get the todo id " + todo-id
]
#
# Pages:
# login
# todo-list
# todo
# network-error
#
render-body = ->
h \div.section [
switch model.current-view
when "login"
authd.login-page model
when "todo-list"
h \div#todo-list [
render-navbar!
render-todo-list!
render-new-project-button!
]
# FIXME: TODO: XXX: modal testing
when "testing-modals"
h \div#testing-modals [
render-navbar!
console.log "rendering a modal"
# bulma.asking-modal model, {}, [ (h \button.button {} [ "rendering a modal" ]) ]
if model.modal
model.modal.render!
render-new-project-button!
]
when "todo"
h \div [
render-navbar!
render-todo model.viewed-project
]
else
h \div.notification.is-error [
"Wait, what? Internal error!"
]
]
renderer = ->
render-navbar!
render-body!
document.add-event-listener 'DOMContentLoaded' ->
projector.append document.body, renderer