modal kinda working, now need some configuration

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]
 

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
+				} []
+			]
+		]
 }
 

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!

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 {
+			console.log "render column: ", column
-				key: column.id
+			bulma.modal {} [(h \div {} [ "rendering " + column ])]
-			} [
-				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
 
-									model.todod-ws.edit-column self.id, column.id, {
+		# 	h \div.column.is-3 {
-										name: e.target.value
+		# 		key: column
-									}
+		# 	} [
-							}
+		# 		h \div.card.is-column-header {
-						else
+		# 			key: column
-							h \div.card-header-title [
+		# 		} [
-								bulma.title 3 column.name
+		# 			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 {
+		# 							# FIXME: columns = extra properties
-							key: "edit"
+		# 							# model.todod-ws.edit-column self.id, column, {
-							onclick: ->
+		# 							# 	name: e.target.value
-								if model.editing == column.id + ".title"
+		# 							# }
-									model.editing := undefined
+		# 					}
-								else
+		# 				else
-									model.editing := column.id + ".title"
+		# 					h \div.card-header-title [
-						} [
+		# 						bulma.title 3 column
-							"Edit"
+		# 					]
-						]
 
-						if self.tasks.filter((.column == column.id)).length == 0
+		# 				h \a.card-header-icon {
-							h \a.card-header-icon {
+		# 					key: "edit"
-								key: "delete"
+		# 					onclick: ->
-								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!"]
-						]
-				]
 
-				for task in self.tasks
+		# 						# FIXME: columns = extra properties
-					continue if task.column != column.id
+		# 						# 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 {
+		# 		for task in self.tasks
-					onclick: ->
+		# 			continue if task.column != column
-						model.todod-ws.new-task self.id, column.id, {
+
-							title: "General Kenobi…"
+		# 			task.render!
-							description: ""
+
-						}
+		# 		h \div.button.is-fullwidth {
-				} [ "New task" ]
+		# 			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))
+					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 ]
+			# 		]
+			# 	]
 
-					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" ]
-					]
-				]
-			]
 
 		self
 }

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.get-list = (token, list-id) ->
-		# 	self.send JSON.stringify {
+			self.send request-types[\get-list], JSON.stringify {
-		# 		type: "get-user"
+				token: token
-		# 		uid: uid
+				list: list-id
-		# 	}
+			}
 
-		# self.new-project = (name) ->
+		self.get-tasks = (token, list-id) ->
-		# 	self.send JSON.stringify {
+			self.send request-types[\get-tasks], JSON.stringify {
-		# 		type: "new-project"
+				token: token
-		# 		name: name
+				list: list-id
-		# 	}
+			}
 
-		# self.edit-task = (project-id, task-id, options) ->
+		self.get-task = (token, task-id) ->
-		# 	payload = {
+			self.send request-types[\get-task], JSON.stringify {
-		# 		type: "edit-task"
+				token: token
-		# 		project: project-id
+				task: task-id
-		# 		task: task-id
+			}
-		# 	}
 
-		# 	for key, value of options
+		self.remove-list = (token, list-id) ->
-		# 		payload[key] = value
+			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) ->
+			for key, value of opts
-		# 	self.send JSON.stringify {
+				payload[key] = value
-		# 		type: "delete-task"
-		# 		project: project-id
-		# 		task: task-id
-		# 	}
 
-		# self.edit-column = (project-id, column-id, options) ->
+			self.send request-types[\add-list], JSON.stringify payload
-		# 	payload = {
-		# 		type: "edit-column"
-		# 		project: project-id
-		# 		column: column-id
-		# 	}
 
-		# 	for key, value of options
+		self.edit-list = (token, list-id, opts) ->
-		# 		payload[key] = value
+			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 request-types[\edit-list], JSON.stringify payload
-		# 	self.send JSON.stringify {
-		# 		type: "delete-column"
-		# 		project: project-id
-		# 		column: column-id
-		# 	}
 
-		# self.new-column = (project-id, name) ->
+		self.remove-task = (token, task-id) ->
-		# 	self.send JSON.stringify {
+			self.send request-types[\remove-task], JSON.stringify {
-		# 		type: "new-column"
+				token: token
-		# 		project: project-id
+				task: task-id
-		# 		name: name
+			}
-		# 	}
 
-		# self.new-task = (project-id, column-id, options) ->
+		# TODO: extra properties
-		# 	payload = {
+		self.add-task = (token, list-id, title, opts) ->
-		# 		type: "new-task"
+			payload = {
-		# 		project: project-id
+				token: token
-		# 		column: column-id
+				list: list-id
-		# 	}
+				title: title
+			}
 
-		# 	for key, value of options
+			for key, value of opts
-		# 		payload[key] = value
+				payload[key] = value
 
-		# 	self.send JSON.stringify payload
+			self.send request-types[\add-task], JSON.stringify payload
 
-		# self.edit-project = (project-id, options) ->
+		self.edit-task = (token, id, opts) ->
-		# 	payload = {
+			payload = {
-		# 		type: "edit-project"
+				token: token
-		# 		project: project-id
+				list: list-id
-		# 	}
+			}
 
-		# 	for key, value of options
+			for key, value of opts
-		# 		payload[key] = value
+				payload[key] = value
 
-		# 	self.send JSON.stringify payload
+			self.send request-types[\edit-task], JSON.stringify payload
 
 		self
 }