Baguette/todo-webclient
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Grooming, style improvements.

Browse Source
This commit is contained in:
Luka Vandervelden 2019-12-12 21:49:15 +01:00
parent 79dcb48429
commit b4585f0c2e
10 changed files with 230 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Makefile
View File

@ -18,7 +18,7 @@ main.js: main.bundle.js
$(Q)npx babel --minified main.bundle.js -o main.js
main.bundle.js: client/index.ls client/authd.ls client/bulma.ls client/card.ls client/modal.ls client/project-creation-modal.ls client/project.ls client/task-creation-modal.ls client/task.ls client/task-removal-modal.ls client/todowebsocket.ls client/validation-modal.ls
main.bundle.js: client/index.ls client/authd.ls client/authws.ls client/bulma.ls client/card.ls client/modal.ls client/navbar.ls client/project-creation-modal.ls client/project.ls client/task-creation-modal.ls client/task.ls client/task-removal-modal.ls client/todowebsocket.ls client/validation-modal.ls
@echo ' BUN > main.bundle.js'
$(Q)npx browserify -t browserify-livescript client/index.ls -o main.bundle.js
@ -97,9 +97,11 @@ $(PACKAGE)-$(VERSION).tar.gz: distdir
$(PACKAGE)-$(VERSION)/client/index.ls \
$(PACKAGE)-$(VERSION)/client/style.sass \
$(PACKAGE)-$(VERSION)/client/authd.ls \
$(PACKAGE)-$(VERSION)/client/authws.ls \
$(PACKAGE)-$(VERSION)/client/bulma.ls \
$(PACKAGE)-$(VERSION)/client/card.ls \
$(PACKAGE)-$(VERSION)/client/modal.ls \
$(PACKAGE)-$(VERSION)/client/navbar.ls \
$(PACKAGE)-$(VERSION)/client/project-creation-modal.ls \
$(PACKAGE)-$(VERSION)/client/project.ls \
$(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \
@ -115,9 +117,11 @@ $(PACKAGE)-$(VERSION).tar.xz: distdir
$(PACKAGE)-$(VERSION)/client/index.ls \
$(PACKAGE)-$(VERSION)/client/style.sass \
$(PACKAGE)-$(VERSION)/client/authd.ls \
$(PACKAGE)-$(VERSION)/client/authws.ls \
$(PACKAGE)-$(VERSION)/client/bulma.ls \
$(PACKAGE)-$(VERSION)/client/card.ls \
$(PACKAGE)-$(VERSION)/client/modal.ls \
$(PACKAGE)-$(VERSION)/client/navbar.ls \
$(PACKAGE)-$(VERSION)/client/project-creation-modal.ls \
$(PACKAGE)-$(VERSION)/client/project.ls \
$(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \
@ -133,9 +137,11 @@ $(PACKAGE)-$(VERSION).tar.bz2: distdir
$(PACKAGE)-$(VERSION)/client/index.ls \
$(PACKAGE)-$(VERSION)/client/style.sass \
$(PACKAGE)-$(VERSION)/client/authd.ls \
$(PACKAGE)-$(VERSION)/client/authws.ls \
$(PACKAGE)-$(VERSION)/client/bulma.ls \
$(PACKAGE)-$(VERSION)/client/card.ls \
$(PACKAGE)-$(VERSION)/client/modal.ls \
$(PACKAGE)-$(VERSION)/client/navbar.ls \
$(PACKAGE)-$(VERSION)/client/project-creation-modal.ls \
$(PACKAGE)-$(VERSION)/client/project.ls \
$(PACKAGE)-$(VERSION)/client/task-creation-modal.ls \

4
client/authd.ls
View File

@ -48,8 +48,6 @@ 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 response-types
type = response-types[type]
self.callbacks[type] ++= [callback]
@ -69,7 +67,6 @@ module.exports = {
self.socket.onmessage = (event) ->
message = JSON.parse(event.data)
console.log "authd message received: ", message
for f in self.callbacks[message.mtype]
f JSON.parse(message.payload)
@ -81,7 +78,6 @@ module.exports = {
self.open-socket!
self.send = (type, opts) ->
console.log JSON.stringify { mtype: type, payload: opts }
self.socket.send JSON.stringify { mtype: type, payload: opts }
self.get-token = (login, password) ->

93
client/index.ls
View File

@ -8,6 +8,7 @@ bulma = require "./bulma.ls"
Task = require "./task.ls"
Project = require "./project.ls"
Modal = require "./modal.ls"
Navbar = require "./navbar.ls"
# ValidationModal = require "./validation-modal.ls"
UUID = require "uuid/v4"
@ -232,43 +233,9 @@ model.todod-ws.add-event-listener \task-removed, (message) ->
project.tasks := project.tasks.filter((.id != task))
projector.schedule-render!
render-navbar = ->
h \div.navbar [
h \div.navbar-start [
h \a.navbar-item.is-size-2 {
onclick: ->
if model.viewed-project
model.todod-ws.unsubscribe model.viewed-project.id
model.todod-ws.list-lists!
model.viewed-project := void
model.current-view := "project-list"
} [ "⌂" ]
]
if model.current-view == "project" && model.viewed-project
model.viewed-project.inner-nav-render!
h \div.navbar-end [
if model.current-view == "project" && model.viewed-project
model.viewed-project.right-nav-render!
h \a.navbar-item {
key: "logout"
onclick: ->
model.current-view := "login"
# TODO: remove anything related to the old session on the client
model.todod-ws.reopen!
} [ "Logout" ]
]
]
render-project-list = ->
h \div.section model.project-list.map (project) ->
h \div.box {
h \div.cards-list model.project-list.map (project) ->
h \div.card.is-grey {
key: project.id
onclick: ->
model.current-view := "project"
@ -277,7 +244,9 @@ render-project-list = ->
model.todod-ws.get-list project.id
model.todod-ws.get-tasks project.id
} [
bulma.title 4 project.title
h \div.card-content [
bulma.title 3 project.title
]
]
Column = (title) ->
@ -286,22 +255,6 @@ Column = (title) ->
id: UUID! # TODO FIXME XXX
}
render-new-project-button = ->
h \div.button.is-primary.is-large.is-fullwidth {
onclick: ->
model.todod-ws.add-list "New project", {
extra_properties: {
columns: [
Column "Unassigned"
Column "Work in progress"
Column "To be checked"
Column "Being checked"
Column "Done"
]
}
}
} [ "New project!" ]
render-project = (project) ->
if project
project.render!
@ -321,44 +274,38 @@ model.login-form = LoginForm {
projector.schedule-render!
}
navbar = Navbar!
render-body = ->
h \div.section [
h \div#body [
navbar.render model
h \div#main-section [
switch model.current-view
when "login"
# authd.login-page model
h \div.columns [
h \div.column
h \div.column [
model.login-form.render!
]
h \div.column
]
when "project-list"
h \div#project-list [
render-navbar!
render-project-list!
render-new-project-button!
]
when "project"
h \div [
render-navbar!
render-project model.viewed-project
]
else
h \div.notification.is-error [
"Wait, what? Internal error!"
]
]
if model.modal
model.modal.render!
]
renderer = ->
render-navbar!
render-body!
document.add-event-listener 'DOMContentLoaded' ->
projector.append document.body, renderer
projector.append document.body, render-body

68
client/navbar.ls Normal file
View File

@ -0,0 +1,68 @@
{h} = require "maquette"
{button, field, control} = require "./bulma.ls"
render-new-project-button = (model) ->
h \div.button.is-success.is-medium.is-outlined {
onclick: ->
model.todod-ws.add-list "New project", {
extra_properties: {
columns: [
Column "Unassigned"
Column "Work in progress"
Column "To be checked"
Column "Being checked"
Column "Done"
]
}
}
} [ "New project!" ]
Navbar = ->
self = {}
self.render = (model) ->
h \div.navbar [
h \div.navbar-start [
h \div.navbar-brand [
h \a.navbar-item {
onclick: ->
if model.viewed-project
model.todod-ws.unsubscribe model.viewed-project.id
model.todod-ws.list-lists!
model.viewed-project := void
model.current-view := "project-list"
} [
"todod - kanbanc"
]
]
]
if model.current-view == "project" && model.viewed-project
model.viewed-project.inner-nav-render!
if model.current-view != "login"
h \div.navbar-end [
if model.current-view == "project-list"
h \div.navbar-item {key: "new project"} [
render-new-project-button model
]
else if model.current-view == "project" && model.viewed-project
model.viewed-project.right-nav-render!
h \div.navbar-item {key: "logout"} [
h \a.button.is-medium.is-outlined {
onclick: ->
model.current-view := "login"
# TODO: remove anything related to the old session on the client
model.todod-ws.reopen!
} [ "Logout" ]
]
]
]
self
module.exports = Navbar

2
client/project-creation-modal.ls
View File

@ -191,6 +191,7 @@ ProjectCreationModal = (project, todod-ws, users) ->
}
]
control [
button \.is-success.is-outlined {
onclick: ->
new-col = {
@ -202,6 +203,7 @@ ProjectCreationModal = (project, todod-ws, users) ->
} [ "+" ]
]
]
]
on-validation: ->
tmp = delete self.tmp

36
client/project.ls
View File

@ -25,6 +25,8 @@ Project = (self, todod-ws, users) ->
self.tasks = []
self.users = users || []
self.selected-task-id = void
modal = void
self.render-column = (column, first) ->
@ -38,14 +40,20 @@ Project = (self, todod-ws, users) ->
# COLUMNS
#
h \div.column {
h \div.column.cards-list {
key: column.id
} [
h \div.box { key: self.id } [
h \p.title.is-4 [ column.title ]
for task in tasks-to-display
task.render!
]
tasks-to-display.map (task) ->
task.render {
is-selected: (task.id == self.selected-task-id)
onclick: ->
if self.selected-task-id == task.id
self.selected-task-id := void
else
self.selected-task-id := task.id
}
]
self.inner-nav-render = ->
@ -56,7 +64,7 @@ Project = (self, todod-ws, users) ->
h \div.navbar-item {
key: "navbar-new-task"
} [
h \div.button.is-success.is-outlined {
h \div.button.is-success.is-outlined.is-medium {
onclick: ->
modal := TaskCreationModal self, self.todod-ws, void, self.users
} [ "New task" ]
@ -65,7 +73,7 @@ Project = (self, todod-ws, users) ->
h \div.navbar-item {
key: "navbar-edit-project"
} [
h \div.button.is-outlined {
h \div.button.is-dark.is-outlined.is-medium {
onclick: ->
modal := ProjectCreationModal self, self.todod-ws, self.users
} [ "Edit this project" ]
@ -74,7 +82,7 @@ Project = (self, todod-ws, users) ->
h \div.navbar-item {
key: "navbar-delete-project"
} [
h \div.button.is-danger.is-outlined {
h \div.button.is-danger.is-outlined.is-medium {
onclick: ->
modal := Modal {
+visible
@ -93,8 +101,16 @@ Project = (self, todod-ws, users) ->
h \div.columns [
if columns = self.extra_properties.columns
for dom in columns.map((column, index) -> self.render-column(column, index == 0))
dom
for column in columns
is-last = column == columns[columns.length-1]
if is-last
self.render-column column, is-last
else
[
self.render-column column, is-last
h \div.is-divider-vertical
]
]
if modal

58
client/style.sass
View File

@ -7,14 +7,54 @@
// @import "../node_modules/bulmaswatch/superhero/_overrides.scss"
.project>.columns
#body
position: absolute
top: 0
left: 0
bottom: 0
right: 0
display: flex
flex-flow: column nowrap
.project, .project .columns
height: 100%
.project .columns
overflow-x: auto
.avatar
border-radius: 4px
.card.is-selected
#main-section
margin: 0.75rem 1.5rem
flex: 1 1 auto
.project .columns .column
padding: 0.25rem
.cards-list .card
border-top: 4px solid $grey-lighter
.cards-list .card .card-content
padding: 0.75rem
.cards-list .card .card-footer
margin: -0.75rem
.cards-list .card.is-selected
border-width: 4px
.cards-list .card .title.is-5
margin-bottom: 0.25rem
.cards-list > .title
margin: 0.5rem
margin-bottom: 1rem
.card .title.is-5, .card .title.is-6
font-weight: normal
.cards-list .card
margin-bottom: 1rem
.cards-list .card:last-child
margin-bottom: 0
.is-column-header + .card, .card + .button
margin-top: 12px
@ -25,10 +65,22 @@
.project
margin-top: 12px
.navbar
border-bottom: 2px solid $grey-lighter
background-color: $white
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
.card.is-#{$name}
background-color: darken($color, 30)
border-top: 4px solid $color
@import "../node_modules/bulma-divider/src/sass/index.sass"
.is-divider-vertical
padding: 0 0.5rem
.is-divider-vertical::before
top: 0
bottom: 0

2
client/task-creation-modal.ls
View File

@ -101,7 +101,7 @@ TaskCreationModal = (project, todod-ws, task, users) ->
field [
label "Initial column"
label "Column"
control [
select \.is-fullwidth {

43
client/task.ls
View File

@ -14,41 +14,54 @@ display-login = (task, users) ->
Task = (self, project, todod-ws) ->
modal = void
self.render = ->
self.render = (args) ->
args or= {}
background-color = "grey"
if self.extra_properties && self.extra_properties.background-color
background-color = self.extra_properties.background-color
h "div.card.has-background-#{background-color}" {
h "div.card.is-#{background-color}" {
classes: {
"is-selected": args.is-selected
}
key: self.id
onclick: (e) ->
if args.onclick
args.onclick(e)
} [
h \div.card-content [
h \div.title.is-5 [ self.title ]
h \div.media [
h \div.media-left [
# FIXME: assignee card image
"LEFT"
]
h \div.media-content [
display-login self, project.users
]
h \div.media-content [ self.title ]
h \div.button {
onclick: ->
modal := TaskCreationModal project, todod-ws, self, project.users
} [ "Edit" ]
h \div.button.is-danger {
onclick: ->
modal := TaskRemovalModal project.id, todod-ws, self
} [ "X" ]
]
if args.is-selected
h \div.content {
key: "task-description-#{self.id}"
after-create: (dom) ->
dom.innerHTML = nmd self.description
} [ ]
if args.is-selected
h \div.card-footer [
h \a.card-footer-item {
onclick: ->
modal := TaskCreationModal project, todod-ws, self, project.users
} [ "Edit" ]
h \a.card-footer-item.has-text-danger {
onclick: ->
modal := TaskRemovalModal project.id, todod-ws, self
} [ "Destroy" ]
]
]
if modal
modal.render!
]

3
client/todowebsocket.ls
View File

@ -69,7 +69,6 @@ module.exports = {
self.socket.onmessage = (event) ->
message = JSON.parse(event.data)
parsed-message = JSON.parse(message.payload)
console.log "todod message #{message.mtype} received: ", parsed-message
for f in self.callbacks[message.mtype]
f parsed-message
@ -81,8 +80,6 @@ module.exports = {
self.open-socket!
self.send = (type, opts) ->
console.log "sending message #{type} to todod: ", opts
# console.log JSON.stringify { mtype: type, payload: opts }
self.socket.send JSON.stringify { mtype: type, payload: opts }