gistfile1.coffee

classSet = require 'react-classset'
moment   = require 'moment'
_   = require 'underscore'
moment.locale 'de'

# -----------------------------------------------------------------------------
Event = React.createClass
  displayName: "Event"
  workDayInMinutes: 8 * 60

  offsetFromTop: (start) ->
    mmt = moment(start, 'HH:mm')
    mmtMidnight = mmt.clone().startOf('day')
    diffMinutes = mmt.diff(mmtMidnight, 'minutes')
    diffMinutes -= (10 * 60) # minus ten hours
    @props.height * (diffMinutes / @workDayInMinutes)


  style: ->
    height: @props.height * (@props.duration / @workDayInMinutes)
    transform: "translateY(#{Math.round(@offsetFromTop(@props.start))}px)"

  render: ->
    <div className="event" style={@style()}>
      {@props.duration}
    </div>

# -----------------------------------------------------------------------------
EventList = React.createClass
  displayName: "EventList"

  getInitialState: ->
    height: 0

  componentDidMount: ->
    @setState width: @getDOMNode().offsetWidth
    @setState height: @getDOMNode().offsetHeight
    # @drawRuler()

  # drawRuler: ->
  #   ctxRuler = document.getCSSCanvasContext  '2d', 'ruler' , @state.width, @state.height
  #   for y in [[email protected]] by (@state.height / (8))
  #     y += (@state.height / 8)
  #     y = Math.round y
  #     y += 0.5
  #
  #     ctxRuler.beginPath()
  #     ctxRuler.strokeStyle = "#cbcbcb"
  #     ctxRuler.moveTo 0, y
  #     ctxRuler.lineTo @state.width, y
  #     ctxRuler.stroke()

  render: ->
    <ul className='events'>
      {<Event {...event} height={@state.height} key={index} /> for event, index in @props.eventData if @props.eventData}
    </ul>

# -----------------------------------------------------------------------------
Day = React.createClass
  displayName: "Day"
  render: ->
    <div className="date-display">
      <span className="day-name">{@props.day.format("dd")}</span>
      <span className="day-number">{@props.day.format("D")}</span>
    </div>

# -----------------------------------------------------------------------------
DayList = React.createClass
  displayName: "DayList"

  isToday: ->
    @day.isSame(new Date(), 'day')

  classes: ->
    classSet
      'day': true
      'is-today': @isToday()

  weekDays: ->
    for weekDay in [0..6]
      @day = moment().isoWeek(@props.isoWeek).weekday(weekDay)
      <li className={@classes()}>
        <@props.child key={weekDay} day={@day} eventData={@props.eventData[@day.format('YYYY-MM-DD')]} />
      </li>

  render: ->
    <ul className={[@props.className, 'vertical-row'].join(" ")}>{@weekDays()}</ul>

# -----------------------------------------------------------------------------
Controls = React.createClass
  displayName: "Controls"
  isoMoment: -> moment().isoWeek(@props.isoWeek)
  render: ->
    <div className="calendar-controls">
      <div className="left">
        <div className="window-controls">
          <div className="close control"></div>
          <div className="minimize control"></div>
          <div className="fullscreen control"></div>
        </div>
      </div>
      <div className="center">
        <div className="date-display">
          <span className="month">{@isoMoment().format('MMMM')}</span>
          <span className="year">{@isoMoment().format('YYYY')}</span>
        </div>
      </div>
      <div className="right">
        <div className="week-control">
          <button onClick={@props.onDecrement} className="decrement-week control">-</button>
          <button onClick={@props.onReset} className="current-week control">Today</button>
          <button onClick={@props.onIncrement} className="increment-week control">+</button>
        </div>
      </div>
    </div>
# -----------------------------------------------------------------------------
Calendar = React.createClass
  displayName: "Calendar"
  incrementISOWeek: ->
    @setState isoWeek: @state.isoWeek + 1

  decrementISOWeek: ->
    @setState isoWeek: @state.isoWeek - 1

  resetISOWeek: ->
    @setState isoWeek: moment().isoWeek()

  getDefaultProps: ->
    initialISOWeek: moment().isoWeek()

  getInitialState: ->
    isoWeek: @props.initialISOWeek
    eventData: {
      '2015-02-23': [
        { start: '10:00', duration: 15 }
        { start: '10:15', duration: 120 }
        { start: '13:15', duration: 180 }
      ]
      '2015-02-24': [
        { start: '10:00', duration: 60 }
        { start: '11:15', duration: 320 }
        { start: '16:37', duration: 60 }
      ]
      '2015-02-25': [
        { start: '10:00', duration: 60 }
        { start: '11:00', duration: 60 }
        { start: '17:00', duration: 60 }
      ]
      '2015-02-26': [
        { start: '12:00', duration: 120 }
        { start: '16:00', duration: 120 }
      ]
      '2015-02-27': [
        { start: '10:00', duration: 240 }
        { start: '14:00', duration: 240 }
      ]
      '2015-02-28': [
        { start: '13:00', duration: 240 }
      ]
      '2015-03-01': [
        { start: '10:00', duration: 15 }
        { start: '11:00', duration: 15 }
        { start: '11:15', duration: 360 }
      ]
    }

  render: ->
    <div className="calendar-component">
      <Controls {...@state} child={Day} onDecrement={@decrementISOWeek} onIncrement={@incrementISOWeek} onReset={@resetISOWeek} />
      <DayList {...@state} className="dates-row" child={Day} />
      <DayList {...@state} className="days-row" child={EventList} />
    </div>

# -----------------------------------------------------------------------------
module.exports = React.createClass
  displayName: "App"
  render: -> <Calendar />