todo-webclient/client/index.ls

# first:
#   connection to authd
#   display the authd widget
#
# second:
#   connection to todod
#   rewrite the whole body component
#

maquette = require "maquette"
nmd      = require "nano-markdown"
authd    = require "./authd.ls"
todows   = require "./todowebsocket.ls"
bulma    = require "./bulma.ls"
Task     = require "./task.ls"
Project  = require "./project.ls"

{create-projector, h} = maquette
projector = create-projector!

model = {
	current-view: "login"
	editing: undefined
	selected: undefined
	users: {}
	projects: {}
	list-todos: []
	connection: {
		port: 9999
		url: undefined
		socket: undefined
	}
}

	# '://' + location.hostname + \: +
model.connection.url =
	(if location.protocol == 'https' then 'wss' else  'ws') +
	"://www.junkos.netlib.re:" +
	model.connection.port +
	"/kanban.JSON"

console.log model.connection.url


#
# network configuration
#

socket = todows.create-socket model.connection.url

on-websocket-error = (event) ->
	console.log "WebSocket error.", event
	model.state := "network-error"
	projector.schedule-render!

on-websocket-close = ->
	model.current-view := "login"
	# socket.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) ->
	message = JSON.parse data

	switch message.type
	when "login"
		model.current-view := "list-todos"
	when "list-projects"
		for project in message.projects
			model.projects[project.id] = Project.new project, model, socket
		model.list-todos := message.projects
	when "project"
		model.projects[message.project.id] = Project.new message.project, model, socket
	when "user"
		if message.user
			model.users[message.user.uid] := message.user
	when "login-error"
		model.login-error = message.error
	else
		console.log "RECEIVED UNKNOWN MESSAGE TYPE: #{message.type}"

	projector.schedule-render!

	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 ]


#
# Pages:
#   login
#   todo-list
#   todo
#   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
		]

	h \div.section [
		switch model.current-view
		when "login"
			authd.login-page model, socket

		when "list-todos"
			h \div#list-todos [
				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
					]

				h \div.button.is-primary.is-large.is-fullwidth {
					onclick: ->
						socket.new-project "Hello, there!"
				} [ "New project! (random atm)" ]
			]

		when "project"
			h \div [
				render-navbar!

				if model.projects[model.viewed-project]
					model.projects[model.viewed-project].render!
			]

		else
			h \div.notification.is-error [
				"Wait, what? Internal error!"
			]
	]

document.add-event-listener 'DOMContentLoaded' ->
	projector.append document.body, renderer