Baguette
/
todo-webclient
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

very WIP

dev
Philippe PITTOLI 2019-11-22 18:42:46 +01:00
parent 3ce9915469
commit 5cb3eec194
4 changed files with 150 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
client/authd.ls
View File

@ -3,7 +3,53 @@ h = require 'maquette' .h
module.exports = {
login-widget: (model, socket) ->
create-socket: ->
self = {}
# users can record functions to run on events
self.user-on-error = []
self.user-on-close = []
self.user-on-message = []
self.open-socket = ->
console.log "Opening socket to #{socket-url}"
self.socket := new WebSocket socket-url
self.socket.onerror = (event) ->
for f in self.user-on-error
f event
self.socket.close!
self.socket.onclose = (event) ->
for f in self.user-on-close
f event
self.socket.onmessage = (event) ->
data = JSON.parse(event.data).payload
for f in self.user-on-message
f data
self.reopen = ->
self.socket.close!
self.open-socket!
self.open-socket!
self.send = (opts) ->
console.log JSON.stringify { mtype: 0, payload: opts }
self.socket.send JSON.stringify { mtype: 0, payload: opts }
self.login = (login, password) ->
self.send JSON.stringify {
type: "login",
login: login
password: password
}
self
login-widget: (model) ->
h \div.container [
h \div.box [
if model.login-error
@ -36,13 +82,13 @@ module.exports = {
e.prevent-default!
model.login-error = undefined
socket.login model.login, model.password
model.authd-ws.login model.login, model.password
} [ "Connexion" ]
]
]
]
login-page: (model, socket) ->
login-page: (model) ->
h \div.container [
h \div.box [
if model.login-error
@ -74,8 +120,7 @@ module.exports = {
onclick: (e) ->
e.prevent-default!
model.login-error = undefined
socket.login model.login, model.password
model.authd-ws.login model.login, model.password
} [ "Connexion" ]
]
]

150
client/index.ls
View File

@ -25,43 +25,48 @@ model = {
selected: undefined
users: {}
projects: {}
list-todos: []
connection: {
port: 9999
url: undefined
socket: undefined
}
todo-list: []
port: 9999
todod-url: undefined
authd-ws: undefined
todod-ws: undefined
previous-error: undefined
error: undefined
# authentication token
jwt: undefined
}
# '://' + location.hostname + \: +
model.connection.url =
model.todod-url =
(if location.protocol == 'https' then 'wss' else 'ws') +
"://www.junkos.netlib.re:" +
model.connection.port +
model.port +
"/kanban.JSON"
console.log model.connection.url
console.log model.todod-url
#
# network configuration
#
socket = todows.create-socket model.connection.url
model.authd-ws = authd.create-socket model.authd-url
model.todod-ws = todows.create-socket model.todod-url
on-websocket-error = (event) ->
console.log "WebSocket error.", event
model.state := "network-error"
model.current-view := "network-error"
projector.schedule-render!
on-websocket-close = ->
on-websocket-close = (event) ->
model.current-view := "login"
# socket.reopen!
console.log "WebSocket has been closed.", event
# model.todod-ws.reopen!
# Exporting the error in case the UI is able to deal with it.
model.previous-state := model.state
model.state := "network-error"
model.websocket-error := event.reason
projector.schedule-render!
on-websocket-message = (data) ->
@ -69,13 +74,11 @@ on-websocket-message = (data) ->
switch message.type
when "login"
model.current-view := "list-todos"
model.current-view := "todo-list"
when "list-projects"
for project in message.projects
model.projects[project.id] = Project.new project, model, socket
model.list-todos := message.projects
model.todo-list := message.projects || []
when "project"
model.projects[message.project.id] = Project.new message.project, model, socket
model.projects[message.project.id] = Project.new message.project, model
when "user"
if message.user
model.users[message.user.uid] := message.user
@ -89,11 +92,52 @@ on-websocket-message = (data) ->
console.log message
# record changes that need to happen on a network event
socket.user-on-error ++= [ on-websocket-error ]
socket.user-on-close ++= [ on-websocket-close ]
socket.user-on-message ++= [ on-websocket-message ]
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
]
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!
#
# Pages:
# login
@ -102,60 +146,26 @@ socket.user-on-message ++= [ on-websocket-message ]
# network-error
#
renderer = ->
render-navbar = ->
h \div.navbar [
h \div.navbar-start [
h \a.navbar-item.is-size-1 {
onclick: ->
model.viewed-project := undefined
model.current-view := "list-todos"
} [ "⌂" ]
]
h \div.navbar-end [
h \a.navbar-item {
onclick: ->
model.current-view := "login"
socket.reopen!
} [ "Logout" ]
]
authd.login-widget model, socket
]
render-body = ->
h \div.section [
switch model.current-view
when "login"
authd.login-page model, socket
authd.login-page model
when "list-todos"
h \div#list-todos [
when "todo-list"
h \div#todo-list [
render-navbar!
h \div.section (model.list-todos || []).map (project) ->
h \a.box {
key: project.id
onclick: ->
model.current-view := "project"
model.viewed-project := project.id
socket.get-project project.id
} [
bulma.title 3 project.name
]
render-todo-list!
h \div.button.is-primary.is-large.is-fullwidth {
onclick: ->
socket.new-project "Hello, there!"
} [ "New project! (random atm)" ]
render-new-project-button!
]
when "project"
when "todo"
h \div [
render-navbar!
if model.projects[model.viewed-project]
model.projects[model.viewed-project].render!
render-todo model.viewed-project
]
else
@ -164,6 +174,12 @@ renderer = ->
]
]
renderer = ->
render-navbar!
render-body!
document.add-event-listener 'DOMContentLoaded' ->
projector.append document.body, renderer

14
client/project.ls
View File

@ -5,8 +5,8 @@ Task = require "./task.ls"
module.exports = {
new: (self, model, socket) ->
self.tasks = self.tasks.map (e) -> Task.new e, self, model, socket
new: (self, model) ->
self.tasks = self.tasks.map (e) -> Task.new e, self, model
self.render-column = (column) ->
h \div.column.is-3 {
@ -24,7 +24,7 @@ module.exports = {
console.log "onchange??"
model.editing := undefined
socket.edit-column self.id, column.id, {
model.todod-ws.edit-column self.id, column.id, {
name: e.target.value
}
}
@ -57,7 +57,7 @@ module.exports = {
h \div.card-content [
h \div.button.is-fullwidth.is-danger {
onclick: ->
socket.delete-column self.id, column.id
model.todod-ws.delete-column self.id, column.id
} [ "Delete me!"]
]
]
@ -69,7 +69,7 @@ module.exports = {
h \div.button.is-fullwidth {
onclick: ->
socket.new-task self.id, column.id, {
model.todod-ws.new-task self.id, column.id, {
title: "General Kenobi…"
description: ""
}
@ -94,7 +94,7 @@ module.exports = {
h \input.input {
onchange: (e) ->
model.editing := undefined
socket.edit-project self.id, {
model.todod-ws.edit-project self.id, {
name: e.target.value
}
value: self.name
@ -113,7 +113,7 @@ module.exports = {
} [
h \div.button.is-fullwidth {
onclick: ->
socket.new-column self.id, "Hello, there!"
model.todod-ws.new-column self.id, "Hello, there!"
} [ "New Column" ]
]
]

20
client/task.ls
View File

@ -32,19 +32,19 @@ get-next = (collection, element) ->
module.exports = {
new: (self, project, model, socket) ->
new: (self, project, model) ->
self.render = ->
author = model.users[self.author]
if typeof(author) != "object" and author != "request sent"
model.users[self.author] = "request sent"
# FIXME: This should go directly to authd.
socket.get-user self.author
model.todod-ws.get-user self.author
assigned_to = model.users[self.assigned_to]
if self.assigned_to and typeof(assigned_to) != "object" and assigned_to != "request sent"
model.users[self.assigned_to] = "request sent"
# FIXME: This should go directly to authd.
socket.get-user self.assigned_to
model.todod-ws.get-user self.assigned_to
is-selected = model.selected == self.id
@ -73,7 +73,7 @@ module.exports = {
value: self.title
onchange: (e) ->
model.editing := undefined
socket.edit-task project.id, self.id, {
model.todod-ws.edit-task project.id, self.id, {
title: e.target.value
}
} [ self.title ]
@ -133,7 +133,7 @@ module.exports = {
}
h \div.button.is-fullwidth {
onclick: ->
socket.edit-task project.id, self.id, {
model.todod-ws.edit-task project.id, self.id, {
description: model.editing-data
}
model.editing-data := undefined
@ -161,7 +161,7 @@ module.exports = {
h \input.input {
onchange: (e) ->
model.editing := undefined
socket.edit-task project.id, self.id, {
model.todod-ws.edit-task project.id, self.id, {
assigned_to: Number e.target.value
}
}
@ -183,7 +183,7 @@ module.exports = {
h \input.input {
onchange: (e) ->
model.editing := undefined
socket.edit-task project.id, self.id, {
model.todod-ws.edit-task project.id, self.id, {
color: e.target.value
}
}
@ -201,7 +201,7 @@ module.exports = {
h \a.card-footer-item {
key: "⇐"
onclick: ->
socket.edit-task project.id, self.id, {
model.todod-ws.edit-task project.id, self.id, {
column: get-previous project.columns.map((.id)), self.column
}
} [ "⇐" ]
@ -212,14 +212,14 @@ module.exports = {
} [
h \div.button.is-danger {
onclick: ->
socket.delete-task project.id, self.id
model.todod-ws.delete-task project.id, self.id
} [ "Delete! For real!" ]
]
h \a.card-footer-item {
key: "⇒"
onclick: ->
socket.edit-task project.id, self.id, {
model.todod-ws.edit-task project.id, self.id, {
column: get-next project.columns.map((.id)), self.column
}
} [ "⇒" ]