gistfile1.ls

class Post
    (title, description, replies, agreed = null) !->
        @title = m.prop(title)
        @description = m.prop(description)
        @replies = m.prop(replies)
        @agreed = m.prop(agreed)

PostList = Array

layout = (body) ->
    m \div.flowre-page,
        * m \header.flowre-header,
            * m \ul.flowre-header--nav,
                * m \li.active,
                    * m \a, { config: m.route, href: '/dashboard' }, 'Dashboard'
                * m \li,
                    * m \a, { config: m.route, href: '/groups' }, 'Groups'
                * m \li,
                    * m \a, { config: m.route, href: '/settings' }, 'Settings'
        * m \section.flowre-body, body

class Client
    (url) !->
        @_ws = new WebSocket(url)
        @_id = 0
        @_callbacks = {}
        @_ws.add-event-listener \message, (ev) !~>
            [id, ...payload] = ev.data.split('\0')
            @_callbacks[id](...payload)
            delete @_callbacks[id]

    request: (method, ...args, callback) !->
        id = ++@_id
        @_callbacks[id] = callback
        @_ws.send(['0.0.1', id, method, ...args].join('\0'))
client = new Client('ws://localhost:1337/')

login =
    controller: class
        !->
            @email-address = m.prop('')
            @password = m.prop('')
            @busy = m.prop(false)

        login: !->
            @busy(true)
            client.request \auth, @email-address!, @password!, (status, ...payload) !~>
                | status == \ok =>
                    m.route('/dashboard')
                | otherwise =>
                    @busy(false)
                    m.redraw!
    view: (controller) ->
        layout <| m \div.flowre-login-form,
            * m \div.flowre-login-form--email-address,
                * m \label, 'Email Address'
                * m \input,
                    type: \email
                    disabled: controller.busy!
                    value: controller.email-address!
                    oninput: m.with-attr(\value, controller.email-address)
            * m \div.flowre-login-form--password,
                * m \label, 'Password'
                * m \input,
                    type: \password
                    disabled: controller.busy!
                    value: controller.password!
                    oninput: m.with-attr(\value, controller.password)
            * m \button.flowre-login-form--forgot-password, {
                type: \button
              }, 'Forgot'
            * m \button.flowre-login-form--submit, {
                type: \button
                onclick: controller~login
                disabled: controller.busy!
              }, 'Login'

dashboard =
    controller: class
        !->
            @posts = m.prop(new PostList!)
            @posts!push(new Post('Type classes', 'lorem ipsum dolor sit amet', [], true))
            @posts!push(new Post('Significant indentation', 'bla bla i suck bla bla python bla bla', [], false))
            @posts!push(new Post('Macros', 'wee need this!!1', [new Post('Macros', 'noo it is terrible!!1', []), new Post('Macros', 'nope nope nope it is not', [])]))
    view: (controller) ->
        render-post = (post) ->
            * m \article.flowre-post,
                * m \section.flowre-post--user,
                    * m \img.flowre-post--user--avatar,
                        src: 'http://i.stack.imgur.com/NRwDw.png?s=64'
                        alt: 'rightfold'
                * m \section.flowre-post--body,
                    * m \h4.flowre-post--body--title, post.title!
                    * m \p, post.description!
                    * m \div.flowre-post--body--agreement-buttons,
                        * m \button.flowre-post--body--agreement-buttons--agree, {
                            type: \button
                            className: if post.agreed! == true then 'active' else ''
                            onclick: !-> post.agreed(true)
                          }, 'Agree'
                        * ' '
                        * m \button.flowre-post--body--agreement-buttons--disagree, {
                            type: \button
                            className: if post.agreed! == false then 'active' else ''
                            onclick: !-> post.agreed(false)
                          }, 'Disagree'
                    * if post.agreed! == false then
                        m \div.flowre-post--body--reply-form,
                            * m \div.flowre-post--body--reply-form--reply,
                                * m \label, 'Why do you disagree?'
                                * m \textarea
                            * m \button.flowre-post--body--reply-form--cancel, {
                                type: \button
                                onclick: !-> post.agreed(null)
                              }, 'Cancel'
                            * m \button.flowre-post--body--reply-form--submit, {
                                type: \button
                              }, 'Submit'
                    * post.replies!map(render-post)
        layout <| m \div, controller.posts!map(render-post)

add-event-listener 'load', !->
    m.route.mode = \hash
    m.route document.body, '/',
        '/login': login
        '/dashboard': dashboard