modal kinda working, now need some configuration
This commit is contained in:
Philippe PITTOLI
parent
9f749b3067
commit
00bd4894bd
@ -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]
|
||||
|
||||
|
||||
@ -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
|
||||
} []
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@ -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!
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user