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 }