Mithril Event App

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="root"></div>

CSS

#root{margin-top: 30px;}
.form-control{margin-bottom: 10px;}
body{font-family: Helvetica;}

CoffeeScript

## https://gist.github.com/impinball/5e4d6e64aba2ffb7cd23
## Patches Mithril to accept components as well as strings
@m = ((o) ->
  Object.assign (->
    (if typeof arguments[0] == 'string' then o else o.component).apply undefined, arguments
  ), o
)(m)

# Dummy events data
events = [
  {
    id: 1
    name: 'TIFF'
    description: 'Toronto International Film Festival'
    date: '2015-09-10'
  }
  {
    id: 2
    name: 'The Martian Premiere'
    description: 'The Martian comes to theatres.'
    date: '2015-10-02'
  }
  {
    id: 3
    name: 'SXSW'
    description: 'Music, film and interactive festival in Austin, TX.'
    date: '2016-03-11'
  }
]

Page = 
  view: (ctrl, props) ->
    m 'div.container-fluid',
      m 'div.row', [
        m 'div.col-xs-12.col-md-6', props.EntryForm
        m 'div.col-xs-12.col-md-6', props.ListGroup
      ]
      
Panel = 
  view: (ctrl, props) ->
    m '.panel.panel-default', [
      m '.panel-heading', props.title
      m '.panel-body', props.body
    ]
    
m.bind = (prop, args = {}) ->
  args.onchange = m.withAttr('value', prop)
  args.value = prop()
  return args

Form = 
  view: (ctrl, props) ->
    incomplete = ->
      !(props.name() != "" && 
        props.description() != "" && 
        props.date() != ""
      )
    m 'div', [
      m 'input.form-control[type="text"]', 
        m.bind props.name, {placeholder: "Event Name"}
      m 'textarea.form-control',
        m.bind props.description, 
          {placeholder: "Event Description"}
      m 'input.form-control[type="date"]',
        m.bind props.date
      m 'button[type="submit"].btn.btn-primary', {
        onclick: props.onSubmit
        disabled: incomplete()
      }, 'Submit'
    ]
    
ListItem = 
  view: (ctrl, props) ->
    m 'a[href="#"].list-group-item', [
      m 'h4.list-group-item-heading', [
        m 'i.glyphicon.glyphicon-bullhorn'
        " #{props.name}"
      ]
      m 'h5', [
        m 'i.glyphicon.glyphicon-calendar'
        " #{props.date}"
      ]
...