From 00bd4894bd518f8aebadec3ea5e8ea100c6512ac Mon Sep 17 00:00:00 2001
From: Philippe PITTOLI
Date: Wed, 4 Dec 2019 04:17:38 +0100
Subject: [PATCH] modal kinda working, now need some configuration
---
client/authd.ls | 2 +-
client/bulma.ls | 47 +++++++--
client/index.ls | 51 ++++++----
client/project.ls | 208 +++++++++++++++++++++-------------------
client/todowebsocket.ls | 125 ++++++++++++------------
5 files changed, 249 insertions(+), 184 deletions(-)
diff --git a/client/authd.ls b/client/authd.ls
index a0ace41..368353b 100644
--- a/client/authd.ls
+++ b/client/authd.ls
@@ -34,7 +34,7 @@ module.exports = {
# self.user-on-message = []
self.add-event-listener = (type, callback) ->
- console.log "authd: add event listener", type, callback, response-types[type]
+ # console.log "authd: add event listener", type, callback, response-types[type]
console.log response-types
type = response-types[type]
diff --git a/client/bulma.ls b/client/bulma.ls
index ad315a6..c8f0595 100644
--- a/client/bulma.ls
+++ b/client/bulma.ls
@@ -24,16 +24,51 @@ module.exports = {
field: (args, children) ->
h \div.field args, children
- modal: (args, content) ->
- h \div.modal args, [
- h \div.modal-background args.background
- h \div.modal-content [args.content]
- ]
-
form: (method, url, content) ->
h \form.form {
action: url
method: method
}, content
+
+ asking-modal: (model, args, content) ->
+ console.log "Rendering a modal: ", args, content
+ is-active = (if model.current-modal == true then \.is-active else "")
+ h \div.modal + is-active, args, [
+ h \div.modal-background (args.background || [])
+
+ h \div.modal-content {} [
+ content
+
+ h \hr []
+
+ h \div.columns {} [
+ h \div.column {} [
+ h \button.button.is-success.is-fullwidth {
+ onclick: ->
+ model.current-modal := false
+ } [
+ h \span.icon.has-text-success [ h \i.fas.fa-check-square [] ]
+ ]
+ ]
+ h \div.column {} [
+ # h \button.button.is-warning.is-fullwidth {
+ # onclick: ->
+ # model.current-modal := false
+ # } [
+ # h \span.icon.has-text-danger [ h \i.fas.fa-ban [] ]
+ # ]
+ h \span.icon.has-text-danger {
+ onclick: ->
+ model.current-modal := false
+ } [ h \i.fas.fa-ban [] ]
+ ]
+ ]
+ h \button.button.modal-close {
+ aria-label: "close"
+ onclick: ->
+ model.current-modal := false
+ } []
+ ]
+ ]
}
diff --git a/client/index.ls b/client/index.ls
index 331112f..325a9eb 100644
--- a/client/index.ls
+++ b/client/index.ls
@@ -46,13 +46,17 @@ projector = create-projector!
model = {
# view: login, todo-list, todo, network-error (TODO: other views, such as rights)
- current-view: "login"
+ # 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: {}
@@ -131,7 +135,7 @@ model.authd-ws.add-event-listener \token, (message) ->
projector.schedule-render!
model.authd-ws.add-event-listener \error, (message) ->
- console.log "authd error", message
+ # console.log "authd error", message
projector.schedule-render!
model.authd-ws.add-event-listener \user, (message) ->
@@ -141,6 +145,7 @@ model.authd-ws.add-event-listener \user, (message) ->
# TODO: user-added, user-edited
+
#
# todod messages management
#
@@ -160,19 +165,7 @@ on-websocket-close = (event) ->
projector.schedule-render!
-# TODO
-# on-websocket-message = (data) ->
-# message = JSON.parse data
-#
-# switch message.type
-# when "login"
-# model.current-view := "todo-list"
-# when "list-projects"
-# when "project"
# model.projects[message.project.id] = Project.new message.project, model
-# when "user"
-# if message.user
-# model.users[message.user.uid] := message.user
# record changes that need to happen on a network event
model.todod-ws.user-on-socket-error ++= [ on-websocket-error ]
@@ -181,7 +174,19 @@ 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 = ->
@@ -210,7 +215,7 @@ render-todo-list = ->
onclick: ->
model.current-view := "todo"
model.viewed-project := project.id
- model.todod-ws.get-project project.id
+ model.todod-ws.get-list model.jwt, project.id
} [
bulma.title 4 project.title
]
@@ -218,7 +223,9 @@ render-todo-list = ->
render-new-project-button = ->
h \div.button.is-primary.is-large.is-fullwidth {
onclick: ->
- model.todod-ws.new-project "New project"
+ 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) ->
@@ -252,6 +259,18 @@ render-body = ->
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" ]) ]
+ bulma.asking-modal model, {}, [ "rendering a modal !!" ]
+
+ render-new-project-button!
+ ]
+
when "todo"
h \div [
render-navbar!
diff --git a/client/project.ls b/client/project.ls
index d194fba..2cd1b5e 100644
--- a/client/project.ls
+++ b/client/project.ls
@@ -9,115 +9,129 @@ module.exports = {
self.tasks = self.tasks.map (e) -> Task.new e, self, model
self.render-column = (column) ->
- h \div.column.is-3 {
- key: column.id
- } [
- h \div.card.is-column-header {
- key: column.id
- } [
- h \div.card-header [
- if model.editing == column.id + ".title"
- h \input.input {
- type: "text",
- value: column.name
- onchange: (e) ->
- console.log "onchange??"
- model.editing := undefined
+ console.log "render column: ", column
+ bulma.modal {} [(h \div {} [ "rendering " + column ])]
- model.todod-ws.edit-column self.id, column.id, {
- name: e.target.value
- }
- }
- else
- h \div.card-header-title [
- bulma.title 3 column.name
- ]
+ # h \div.column.is-3 {
+ # key: column
+ # } [
+ # h \div.card.is-column-header {
+ # key: column
+ # } [
+ # h \div.card-header [
+ # if model.editing == column.id + ".title"
+ # h \input.input {
+ # type: "text",
+ # value: column
+ # onchange: (e) ->
+ # console.log "onchange??"
+ # model.editing := undefined
- h \a.card-header-icon {
- key: "edit"
- onclick: ->
- if model.editing == column.id + ".title"
- model.editing := undefined
- else
- model.editing := column.id + ".title"
- } [
- "Edit"
- ]
+ # # FIXME: columns = extra properties
+ # # model.todod-ws.edit-column self.id, column, {
+ # # name: e.target.value
+ # # }
+ # }
+ # else
+ # h \div.card-header-title [
+ # bulma.title 3 column
+ # ]
- if self.tasks.filter((.column == column.id)).length == 0
- h \a.card-header-icon {
- key: "delete"
- onclick: ->
- model.editing := column.id + ".delete"
- } [
- "Delete"
- ]
- ]
- if model.editing == column.id + ".delete"
- h \div.card-content [
- h \div.button.is-fullwidth.is-danger {
- onclick: ->
- model.todod-ws.delete-column self.id, column.id
- } [ "Delete me!"]
- ]
- ]
+ # h \a.card-header-icon {
+ # key: "edit"
+ # onclick: ->
- for task in self.tasks
- continue if task.column != column.id
+ # # FIXME: columns = extra properties
+ # # if model.editing == column + ".title"
+ # # model.editing := undefined
+ # # else
+ # # model.editing := column + ".title"
+ # } [
+ # "Edit"
+ # ]
- task.render!
+ # if self.tasks.filter((.column == column)).length == 0
+ # h \a.card-header-icon {
+ # key: "delete"
+ # onclick: ->
+ # # FIXME
+ # # model.editing := column + ".delete"
+ # } [
+ # "Delete"
+ # ]
+ # ]
+ # if model.editing == column.id + ".delete"
+ # h \div.card-content [
+ # h \div.button.is-fullwidth.is-danger {
+ # onclick: ->
+ # model.todod-ws.delete-column self.id, column.id
+ # } [ "Delete me!"]
+ # ]
+ # ]
- h \div.button.is-fullwidth {
- onclick: ->
- model.todod-ws.new-task self.id, column.id, {
- title: "General Kenobi…"
- description: ""
- }
- } [ "New task" ]
- ]
+ # for task in self.tasks
+ # continue if task.column != column
+
+ # task.render!
+
+ # h \div.button.is-fullwidth {
+ # onclick: ->
+ # model.todod-ws.new-task self.id, column.id, {
+ # title: "General Kenobi…"
+ # description: ""
+ # }
+ # } [ "New task" ]
+ # ]
self.render = ->
- h \div.project {
- key: self.id
- } [
- h \div.hero.is-dark { key: "title" } [
- h \div.hero-body [
- # FIXME: Consider using a .level for this.
- h \div.is-pulled-right {
- onclick: ->
- model.editing := self.id + ".name"
- } [
- "Edit"
- ]
-
- if model.editing == self.id + ".name"
- h \input.input {
- onchange: (e) ->
- model.editing := undefined
- model.todod-ws.edit-project self.id, {
- name: e.target.value
- }
- value: self.name
- }
- else
- h \div.title [ self.name ]
- ]
- ]
+ console.log "Project to render: ", self
+ h \div.list {} [
h \div.columns [
- for dom in self.columns.map((column) -> self.render-column(column))
- dom
-
- h \div.column.is-2 {
- key: "new-column"
- } [
- h \div.button.is-fullwidth {
- onclick: ->
- model.todod-ws.new-column self.id, "Hello, there!"
- } [ "New Column" ]
- ]
+ if self.extra_properties.columns
+ for dom in self.extra_properties.columns.map((column) -> self.render-column(column))
+ dom
]
]
+ # h \div.column.is-2 {
+ # key: "new-column"
+ # } [
+ # h \div.button.is-fullwidth {
+ # onclick: ->
+ # model.todod-ws.new-column self.id, "Hello, there!"
+ # } [ "New Column" ]
+ # ]
+ # ]
+ # ]
+
+ # h \div.project {
+ # key: self.id
+ # } [
+ # h \div.hero.is-dark { key: "title" } [
+ # h \div.hero-body [
+ # # FIXME: Consider using a .level for this.
+ # h \div.is-pulled-right {
+ # onclick: ->
+ # model.editing := self.id + ".name"
+ # } [
+ # "Edit"
+ # ]
+
+ # if model.editing == self.id + ".name"
+ # h \input.input {
+ # onchange: (e) ->
+ # model.editing := undefined
+ # model.todod-ws.edit-project self.id, {
+ # name: e.target.value
+ # }
+ # value: self.name
+ # }
+ # else
+ # h \div.title [ self.name ]
+ # ]
+ # ]
+
+
self
}
diff --git a/client/todowebsocket.ls b/client/todowebsocket.ls
index d888452..a07a851 100644
--- a/client/todowebsocket.ls
+++ b/client/todowebsocket.ls
@@ -44,7 +44,7 @@ module.exports = {
self.callbacks[value] = []
self.add-event-listener = (type, callback) ->
- console.log "add event listener", type, callback, response-types[type]
+ # console.log "add event listener", type, callback, response-types[type]
type = response-types[type]
self.callbacks[type] ++= [callback]
@@ -85,85 +85,82 @@ module.exports = {
token: token
}
- # self.get-user = (uid) ->
- # self.send JSON.stringify {
- # type: "get-user"
- # uid: uid
- # }
+ self.get-list = (token, list-id) ->
+ self.send request-types[\get-list], JSON.stringify {
+ token: token
+ list: list-id
+ }
- # self.new-project = (name) ->
- # self.send JSON.stringify {
- # type: "new-project"
- # name: name
- # }
+ self.get-tasks = (token, list-id) ->
+ self.send request-types[\get-tasks], JSON.stringify {
+ token: token
+ list: list-id
+ }
- # self.edit-task = (project-id, task-id, options) ->
- # payload = {
- # type: "edit-task"
- # project: project-id
- # task: task-id
- # }
+ self.get-task = (token, task-id) ->
+ self.send request-types[\get-task], JSON.stringify {
+ token: token
+ task: task-id
+ }
- # for key, value of options
- # payload[key] = value
+ self.remove-list = (token, list-id) ->
+ self.send request-types[\remove-list], JSON.stringify {
+ token: token
+ list: list-id
+ }
- # self.send JSON.stringify payload
+ # TODO: extra properties
+ self.add-list = (token, title, opts) ->
+ payload = {
+ token: token
+ title: title
+ }
- # self.delete-task = (project-id, task-id) ->
- # self.send JSON.stringify {
- # type: "delete-task"
- # project: project-id
- # task: task-id
- # }
+ for key, value of opts
+ payload[key] = value
- # self.edit-column = (project-id, column-id, options) ->
- # payload = {
- # type: "edit-column"
- # project: project-id
- # column: column-id
- # }
+ self.send request-types[\add-list], JSON.stringify payload
- # for key, value of options
- # payload[key] = value
+ self.edit-list = (token, list-id, opts) ->
+ payload = {
+ token: token
+ list: list-id
+ }
- # self.send JSON.stringify payload
+ for key, value of opts
+ payload[key] = value
- # self.delete-column = (project-id, column-id) ->
- # self.send JSON.stringify {
- # type: "delete-column"
- # project: project-id
- # column: column-id
- # }
+ self.send request-types[\edit-list], JSON.stringify payload
- # self.new-column = (project-id, name) ->
- # self.send JSON.stringify {
- # type: "new-column"
- # project: project-id
- # name: name
- # }
+ self.remove-task = (token, task-id) ->
+ self.send request-types[\remove-task], JSON.stringify {
+ token: token
+ task: task-id
+ }
- # self.new-task = (project-id, column-id, options) ->
- # payload = {
- # type: "new-task"
- # project: project-id
- # column: column-id
- # }
+ # TODO: extra properties
+ self.add-task = (token, list-id, title, opts) ->
+ payload = {
+ token: token
+ list: list-id
+ title: title
+ }
- # for key, value of options
- # payload[key] = value
+ for key, value of opts
+ payload[key] = value
- # self.send JSON.stringify payload
+ self.send request-types[\add-task], JSON.stringify payload
- # self.edit-project = (project-id, options) ->
- # payload = {
- # type: "edit-project"
- # project: project-id
- # }
+ self.edit-task = (token, id, opts) ->
+ payload = {
+ token: token
+ list: list-id
+ }
- # for key, value of options
- # payload[key] = value
+ for key, value of opts
+ payload[key] = value
- # self.send JSON.stringify payload
+ self.send request-types[\edit-task], JSON.stringify payload
self
}