Initial UI prototype

Gemfile

@@ -9,19 +9,11 @@ gem 'pg', '~> 0.15'
 gem 'sass-rails', '~> 5.0'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
-# Use CoffeeScript for .coffee assets and views
-gem 'coffee-rails', '~> 4.1.0'
-# See https://github.com/rails/execjs#readme for more supported runtimes
-# gem 'therubyracer', platforms: :ruby
 
-# Use jquery as the JavaScript library
-gem 'jquery-rails'
-# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
-gem 'turbolinks'
-# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
-gem 'jbuilder', '~> 2.0'
-# bundle exec rake doc:rails generates the API under doc/api.
-gem 'sdoc', '~> 0.4.0', group: :doc
+gem 'clearwater', '~> 1.0.0.rc1'
+gem 'opal', github: 'opal/opal'
+gem 'opal-rails', github: 'opal/opal-rails'
+gem 'grand_central', github: 'clearwater-rb/grand_central'
 
 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
@@ -37,9 +29,6 @@ end
 group :development do
   # Access an IRB console on exception pages or by using <%= console %> in views
   gem 'web-console', '~> 2.0'
-
-  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
-  gem 'spring'
 end
 
 gem 'rails_12factor', group: :production

Gemfile.lock

@@ -1,3 +1,33 @@
+GIT
+  remote: git://github.com/clearwater-rb/grand_central.git
+  revision: 773bcf55dd43eb65dd3ab397164e8533693f0fa3
+  specs:
+    grand_central (0.3.0)
+
+GIT
+  remote: git://github.com/opal/opal-rails.git
+  revision: 5f1f1f681bcbfecd01f601bedc76e4ecf31898ed
+  specs:
+    opal-rails (0.9.0)
+      jquery-rails
+      opal (>= 0.8.0, < 0.11)
+      opal-activesupport (>= 0.0.5)
+      opal-jquery (~> 0.4.0)
+      rails (>= 4.0, < 6.0)
+      sprockets-rails (< 3.0)
+
+GIT
+  remote: git://github.com/opal/opal.git
+  revision: 5bac8d786cd233e9982aaed713a0862d21403f69
+  specs:
+    opal (0.10.0.rc1)
+      ast (>= 2.3.0)
+      hike (~> 1.2)
+      parser (>= 2.3.1.2)
+      sourcemap (~> 0.1.0)
+      sprockets (~> 3.1)
+      tilt (>= 1.4)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -37,28 +67,25 @@ GEM
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     arel (6.0.3)
+    ast (2.3.0)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
+    bowser (0.1.6)
+      opal (>= 0.8.0, < 0.11.0)
     builder (3.2.2)
     byebug (9.0.5)
-    coffee-rails (4.1.1)
-      coffee-script (>= 2.2.0)
-      railties (>= 4.0.0, < 5.1.x)
-    coffee-script (2.4.1)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.10.0)
+    clearwater (1.0.0.rc1)
+      bowser (~> 0.1.5)
+      opal (~> 0.7)
     concurrent-ruby (1.0.2)
     debug_inspector (0.0.2)
     diff-lcs (1.2.5)
     erubis (2.7.0)
     execjs (2.7.0)
     globalid (0.3.6)
       activesupport (>= 4.1.0)
+    hike (1.2.3)
     i18n (0.7.0)
-    jbuilder (2.5.0)
-      activesupport (>= 3.0.0, < 5.1)
-      multi_json (~> 1.2)
     jquery-rails (4.1.1)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
@@ -73,10 +100,15 @@ GEM
     mime-types-data (3.2016.0521)
     mini_portile2 (2.1.0)
     minitest (5.9.0)
-    multi_json (1.12.1)
     nokogiri (1.6.8)
       mini_portile2 (~> 2.1.0)
       pkg-config (~> 1.1.7)
+    opal-activesupport (0.3.0)
+      opal (>= 0.5.0, < 1.0.0)
+    opal-jquery (0.4.1)
+      opal (>= 0.7.0, < 0.10.0)
+    parser (2.3.1.2)
+      ast (~> 2.2)
     pg (0.18.4)
     pkg-config (1.1.7)
     puma (3.4.0)
@@ -113,8 +145,6 @@ GEM
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
     rake (11.2.2)
-    rdoc (4.2.2)
-      json (~> 1.4)
     rspec-core (3.4.4)
       rspec-support (~> 3.4.0)
     rspec-expectations (3.4.0)
@@ -139,22 +169,17 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
-    sdoc (0.4.1)
-      json (~> 1.7, >= 1.7.7)
-      rdoc (~> 4.0)
-    spring (1.7.1)
+    sourcemap (0.1.1)
     sprockets (3.6.0)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-rails (3.0.4)
-      actionpack (>= 4.0)
-      activesupport (>= 4.0)
-      sprockets (>= 3.0.0)
+    sprockets-rails (2.3.3)
+      actionpack (>= 3.0)
+      activesupport (>= 3.0)
+      sprockets (>= 2.8, < 4.0)
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (2.0.5)
-    turbolinks (2.5.3)
-      coffee-rails
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     uglifier (3.0.0)
@@ -170,18 +195,16 @@ PLATFORMS
 
 DEPENDENCIES
   byebug
-  coffee-rails (~> 4.1.0)
-  jbuilder (~> 2.0)
-  jquery-rails
+  clearwater (~> 1.0.0.rc1)
+  grand_central!
+  opal!
+  opal-rails!
   pg (~> 0.15)
   puma (~> 3.4)
   rails (= 4.2.6)
   rails_12factor
   rspec-rails (~> 3.4)
   sass-rails (~> 5.0)
-  sdoc (~> 0.4.0)
-  spring
-  turbolinks
   uglifier (>= 1.3.0)
   web-console (~> 2.0)
 

app/assets/javascripts/actions.rb

@@ -0,0 +1,8 @@
+require 'grand_central/action'
+
+ObserveBehavior     = GrandCentral::Action.with_attributes(:behavior, :actor)
+SetCurrentActor     = GrandCentral::Action.with_attributes(:actor_id)
+SetCurrentTarget    = GrandCentral::Action.with_attributes(:target)
+AddModifier         = GrandCentral::Action.with_attributes(:observation, :modifier)
+CompleteObservation = GrandCentral::Action.create
+

app/assets/javascripts/application.rb

@@ -0,0 +1,181 @@
+require 'opal'
+require 'clearwater'
+
+require 'store'
+
+class Layout
+  include Clearwater::Component
+
+  def render
+    div([
+      h1(NavLink.new({ href: '/' }, 'Red Pandas')),
+      header([
+        nav([
+          NavLink.new({ href: '/focus/animal' }, 'Focus Animal'),
+          NavLink.new({ href: '/focus/scan' }, 'Scan'),
+          NavLink.new({ href: '/focus/behavior' }, 'Focus Behavior'),
+        ])
+      ]),
+
+      outlet || Data.new,
+    ])
+  end
+end
+
+class NavLink
+  include Clearwater::Component
+
+  def initialize(properties, label)
+    @properties = properties
+    @label = label
+  end
+
+  def render
+    Link.new(defaults.merge(@properties), @label)
+  end
+
+  def defaults
+    {
+      style: {
+        color: :blue,
+        display: 'inline-block',
+        padding: '5px 8px',
+      },
+    }
+  end
+end
+
+class Data
+  include Clearwater::Component
+end
+
+class NewObservation
+  include Clearwater::Component
+
+  def render
+    div([
+
+    ])
+  end
+
+  def handle_submit(event)
+    event.prevent
+
+    Store.dispatch UpdateObservation.new
+  end
+end
+
+class Focus
+  include Clearwater::Component
+
+  def render
+    div([
+      h2('Focus'),
+      outlet,
+    ])
+  end
+end
+
+class FocusAnimal
+  include Clearwater::Component
+
+  def render
+    div([
+      h3('Focus animal'),
+      select({
+        onchange: method(:set_actor)
+      }, [option({ value: nil }, 'Select an actor')] + animals.map { |animal|
+        option({ value: animal.id, selected: current_actor_id == animal.id }, animal.name)
+      }),
+      content,
+    ])
+  end
+
+  def content
+    return unless current_actor
+
+    if observation.behavior.nil?
+      div([
+        header([
+          h2("Select behavior"),
+        ]),
+        Store.state.behaviors.map { |behavior|
+          button({ onclick: proc { set_behavior behavior } }, behavior.name)
+        }
+      ])
+    elsif observation.behavior.targetable? && !observation.target
+      div([
+        h2('Select target'),
+        animals.map { |animal|
+          button({ onclick: proc { set_target animal } }, animal.name)
+        }
+      ])
+    else
+      div([
+        available_modifiers.map { |modifier|
+          button({ onclick: proc { add_modifier modifier } }, modifier)
+        },
+        div(button({ onclick: proc { next_behavior } }, 'Next Observation')),
+      ])
+    end
+  end
+
+  def available_modifiers
+    observation.available_modifiers - observation.modifiers
+  end
+
+  def add_modifier modifier
+    Store.dispatch AddModifier.new(observation, modifier)
+  end
+
+  def next_behavior
+    Store.dispatch CompleteObservation.new
+  end
+
+  def current_actor
+    Store.state.current_actor
+  end
+
+  def current_actor_id
+    current_actor && current_actor.id
+  end
+
+  def observation
+    Store.state.new_observation
+  end
+
+  def animals
+    Store.state.subjects
+  end
+
+  def set_behavior behavior
+    Store.dispatch ObserveBehavior.new(behavior)
+  end
+
+  def set_actor event
+    Store.dispatch SetCurrentActor.new(event.target.value)
+  end
+
+  def set_target target
+    Store.dispatch SetCurrentTarget.new(target)
+  end
+end
+
+router = Clearwater::Router.new do
+  route 'new_observation' => NewObservation.new
+
+  route 'focus' => Focus.new do
+    route 'animal' => FocusAnimal.new
+  end
+end
+
+app = Clearwater::Application.new(
+  component: Layout.new,
+  router: router,
+)
+
+app.call
+
+Store.on_dispatch do
+  app.render
+end