Added cluster selection and creation path.

app/controllers/application_controller.rb

@@ -2,4 +2,11 @@
 
 class ApplicationController < ActionController::Base
   prepend_view_path Rails.root.join('frontend')
+
+  def valid_cluster?
+    return false unless session[:cluster_uuid]
+    return false unless Cluster.get(session[:cluster_uuid])
+
+    true
+  end
 end

app/controllers/cluster_controller.rb

@@ -3,17 +3,19 @@
 # This is the landing for a specific tally cluster
 class ClusterController < ApplicationController
   before_action :only_for_unknown
-  def new; end
+  def show
+    @clusters = Cluster.list
+  end
 
   def create
-    # TODO: This will need to modify a shared object to insert a new tally cluster.
+    cluster = Cluster.new(params[:cluster])
-    session[:cluster] = params[:cluster]
+    session[:cluster_uuid] = cluster.uuid;
     redirect_to root_path
   end
 
   private
 
   def only_for_unknown
-    redirect_to root_path if session[:cluster]
+    redirect_to root_path if valid_cluster?
   end
 end

app/controllers/counter_controller.rb

@@ -8,6 +8,6 @@ class CounterController < ApplicationController
   private
 
   def associate!
-    redirect_to cluster_path unless session[:cluster]
+    redirect_to cluster_path unless valid_cluster?
   end
 end

app/models/cluster.rb

@@ -4,7 +4,7 @@ require 'securerandom'
 
 # A collective for a tally
 class Cluster
-  attr_reader :count, :name, :status, :uuid
+  attr_reader :count, :name, :status, :uuid, :created_on
   @@clusters = {}
 
   def initialize(name)
@@ -13,6 +13,7 @@ class Cluster
     @count = 0
     @status = :open
     @mutex = Mutex.new
+    @created_on = Time.new
     @@clusters[@uuid] = self
   end
 

app/views/cluster/new.html.erb

@@ -1,4 +0,0 @@
-<%= c("page") do %>
-    <%= c("cluster-list") %>
-    <%= c("cluster-new") %>
-<% end %>

app/views/cluster/show.html.erb

@@ -0,0 +1,3 @@
+<%= c("page") do %>
+    <%= c("cluster-view") %>
+<% end %>

frontend/components/cluster-list/_cluster-list.html.erb

@@ -0,0 +1,5 @@
+<div class="cluster-list">
+    <% clusters.each do |cluster| %>
+       <%= c("cluster", cluster: cluster) %>
+    <% end %>
+</div>

frontend/components/cluster-list/cluster-list.js

@@ -1 +1,3 @@
 import "./cluster-list.pcss";
+
+import "components/cluster/cluster";

frontend/components/cluster-list/cluster-list.pcss

@@ -1 +1,4 @@
-/* placeholder */
+.cluster-list {
+  line-height: 1.5;
+  margin-bottom: 2rem;
+}

frontend/components/cluster-new/cluster-new.pcss

@@ -1,10 +1,4 @@
 .create-cluster-form {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-
   & input {
     width: 100%;
     padding: 12px 0;

frontend/components/cluster-view/_cluster-view.html.erb

@@ -0,0 +1,4 @@
+<div class="cluster-view">
+    <%= c("cluster-list", clusters: @clusters.values) %>
+    <%= c("cluster-new") %>
+</div>

frontend/components/cluster-view/cluster-view.css

@@ -0,0 +1,8 @@
+.cluster-view {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}

frontend/components/cluster-view/cluster-view.js

@@ -0,0 +1,4 @@
+import "./cluster-view.css";
+
+import "components/cluster-new/cluster-new";
+import "components/cluster-list/cluster-list";

frontend/components/cluster/_cluster.html.erb

@@ -0,0 +1,6 @@
+<a href="cluster/<%=cluster.uuid%>" class="cluster">
+    <span class="panel-icon"><i class="fa fa-sort" aria-hidden="true"></i></span>
+    <span class="panel-text">
+        <%= cluster.name %></span>
+    <span class="panel-subtext"> created on <%= cluster.created_on.strftime("%Y-%m-%d %H:%M:%S")%></span>
+</a>

frontend/components/cluster/cluster.js

@@ -0,0 +1 @@
+import "./cluster.pcss";

frontend/components/cluster/cluster.pcss

@@ -0,0 +1,40 @@
+.cluster {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.5em 0.75em;
+
+  & .panel-icon {
+    display: inline-block;
+    font-size: 14px;
+    height: 1em;
+    line-height: 1em;
+    text-align: center;
+    vertical-align: top;
+    width: 1em;
+    color: #7a7a7a;
+    margin-right: 0.75em;
+  }
+
+  & .panel-text {
+    font-weight: 800;
+    margin-right: 0.5rem;
+  }
+
+  & .panel-subtext {
+    font-weight: 100;
+    opacity: 40%;
+  }
+  &:hover,
+  &:focus {
+    background-color: #f5f5f5;
+
+    & .panel-icon {
+      color: #3273dc;
+    }
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #ededed;
+  }
+}

frontend/init/index.pcss

@@ -5,3 +5,8 @@ body {
   font-size: 16px;
   line-height: 24px;
 }
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

frontend/packs/application.js

@@ -1,5 +1,4 @@
 import "init";
 
 import "components/page/page";
-import "components/cluster-list/cluster-list";
+import "components/cluster-view/cluster-view";
-import "components/cluster-new/cluster-new";