A step by step guide to your first Volt app

app.css.scss

.conversation{
  form{
    input{
      margin: 10px 0 5px 0;
    }
  }
}

.contact{
  width:100%;
  padding:5px;
  margin: 4px 0;
  font-size:15px;
  cursor:pointer;
  &:hover{
    background-color: #FAFAFA;
  }
  &.active{
    background-color: #337ab7;
    color: #FFF;
  }
  .badge{
    background-color: #900;
  }
}

.message{
  max-width: 80%;
  padding:10px 15px;
  margin: 5px 0;
  background-color: #FEFEFE;
  border: 1px solid #E7E7E7;
  border-radius: 5px;
  float: left;
  clear:both;
  &.sent{
    background-color: #E4F3DB;
    border: 1px solid #B7D0A7;
    float: right;
  }
  p{
    margin:0;
  }
}

index.html

<:Title>
  Home

<:Body>
  <h1>Home</h1>
  {{ if Volt.user }}
    <div class="row">
      <div class="col-md-4">
        {{ _users.each do |user| }}
          {{ if user._id != Volt.user._id }}
            <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)">
              {{user._name}}
              {{ if unread_notifications_from(user).count > 0 }}
                <span class="badge">
                  {{ unread_notifications_from(user).count }}
                </span>
              {{ end }}
            </div>
          {{ end }}
        {{ end }}
      </div>
      {{ if params._user_id }}
        <div class="col-md-8 well conversation">
          {{ current_conversation.each do |message| }}
            <div class="message {{ if message._sender_id == Volt.user._id }} sent {{ end }}">
              <p>{{ message._text }}</p>
            </div>
          {{ end }}

          {{ if current_conversation.count == 0 }}
            <p>You have no messages yet. Start chatting!</p>
          {{ else }}
            <div class="clearfix"></div>
          {{ end }}

          <form e-submit="send_message" role="form">
            <div class="form-group">
              <input class="form-control" type="text" placeholder="Write a message" value="{{ page._new_message }}" />
              <button type="submit" class="btn btn-primary pull-right">Submit</button>
            </div>

          </form>
        </div>
      {{ end }}
    </div>
  {{ else }}
    <p>This is a sample application built with Volt to demonstrate its real-time capabilities. Please log in to access it.</p>
  {{ end }}

main.html

<:Title>
  {{ template main_path, "title", {controller_group: 'main'} }}

<:Body>
  <div class="container">
    <div class="header">
      <ul class="nav nav-pills pull-right">
        <:nav href="/" text="Home" />
        <:user-templates:menu />
      </ul>
      <h3 class="text-muted">chat</h3>
    </div>

    <:volt:notices />

    {{ template main_path, 'body', {controller_group: 'main'} }}

    <div class="footer">
      <p>&copy; Company 2014</p>
    </div>

  </div>

<:Nav>
  <li class="{{ if active_tab? }}active{{ end }}">
    <a href="{{ attrs.href }}">{{ attrs.text }}</a>
  </li>

main_controller.rb

# By default Volt generates this controller for your Main component
class MainController < Volt::ModelController
  model :store

  def index
  end

  def send_message
    unless page._new_message.strip.empty?
      _messages << { sender_id: Volt.user._id, receiver_id: params._user_id, text: page._new_message }
      _notifications << { sender_id: Volt.user._id, receiver_id: params._user_id }
      page._new_message = ''
    end
  end

  def current_conversation
    _messages.find({ "$or" => [{ sender_id: Volt.user._id, receiver_id: params._user_id }, { sender_id: params._user_id, receiver_id: Volt.user._id }] })
  end

  def select_conversation(user)
    params._user_id = user._id
    unread_notifications_from(user).then do |results|
      results.each do |notification|
        _notifications.delete(notification)
      end
    end
    page._new_message = ''
  end

  def unread_notifications_from(user)
    _notifications.find({ sender_id: user._id, receiver_id: Volt.user._id })
  end

  private

  # The main template contains a #template binding that shows another
  # template.  This is the path to that template.  It may change based
  # on the params._controller and params._action values.
  def main_path
    params._controller.or('main') + '/' + params._action.or('index')
  end

  # Determine if the current nav component is the active one by looking
  # at the first part of the url against the href attribute.
  def active_tab?
    url.path.split('/')[1] == attrs.href.split('/')[1]
  end
end

routes.rb

# See https://github.com/voltrb/volt#routes for more info on routes

# Routes for login and signup, provided by user-templates component gem
get '/signup', _controller: 'user-templates', _action: 'signup'
get '/login', _controller: 'user-templates', _action: 'login'

# The main route, this should be last. It will match any params not
# previously matched.
get '/', {}