Add navigation between app, analytics and settings

app.rb

@@ -110,6 +110,8 @@ def table_name_from_user_id(user_id)
               utc_duration: row.fetch(:utc_duration).sub(/:00$/, ""))
   end
 
+  @user_id = user_id
+  @app = :app
   erb :app, layout: :layout
 end
 
@@ -165,9 +167,13 @@ def table_name_from_user_id(user_id)
   @max_hours["night"] = @hours_slept_histogram.select{|k, _| k[0] == "night"}.map(&:last).compact.sort.last.to_f
   @max_hours["nap"]   = @hours_slept_histogram.select{|k, _| k[0] == "nap"}.map(&:last).compact.sort.last.to_f
 
+  @user_id = user_id
+  @app = :analytics
   erb :analytics
 end
 
 get %r{\A/me/#{UUID_RE}/settings} do |user_id|
+  @user_id = user_id
+  @app = :settings
   erb :settings
 end

public/css/app.css

@@ -1,3 +1,22 @@
 .graph-bar {
   background-color: #33c;
 }
+
+.bottom-nav .menu {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}
+
+.bottom-nav .menu.reverse {
+  background: #333;
+}
+
+.bottom-nav .menu li {
+  width: 33%;
+  text-align: center;
+}
+
+.bottom-nav .menu.reverse .active {
+  background: #666;
+}

public/css/foundation.css

@@ -1082,6 +1082,97 @@ select {
     float: none;
     top: -0.1em; }
 
+.menu {
+  margin: 0;
+  list-style-type: none; }
+  .menu > li {
+    display: table-cell;
+    vertical-align: middle; }
+    [data-whatinput='mouse'] .menu > li {
+      outline: 0; }
+  .menu > li > a {
+    display: block;
+    padding: 0.7rem 1rem;
+    line-height: 1; }
+  .menu input,
+  .menu a,
+  .menu button {
+    margin-bottom: 0; }
+  .menu > li > a img,
+  .menu > li > a i,
+  .menu > li > a svg {
+    vertical-align: middle; }
+    .menu > li > a img + span,
+    .menu > li > a i + span,
+    .menu > li > a svg + span {
+      vertical-align: middle; }
+  .menu > li > a img,
+  .menu > li > a i,
+  .menu > li > a svg {
+    margin-right: 0.25rem;
+    display: inline-block; }
+  .menu > li {
+    display: table-cell; }
+  .menu.vertical > li {
+    display: block; }
+  @media screen and (min-width: 40em) {
+    .menu.medium-horizontal > li {
+      display: table-cell; }
+    .menu.medium-vertical > li {
+      display: block; } }
+  @media screen and (min-width: 64em) {
+    .menu.large-horizontal > li {
+      display: table-cell; }
+    .menu.large-vertical > li {
+      display: block; } }
+  .menu.simple li {
+    line-height: 1;
+    display: inline-block;
+    margin-right: 1rem; }
+  .menu.simple a {
+    padding: 0; }
+  .menu.align-right::before, .menu.align-right::after {
+    content: ' ';
+    display: table; }
+  .menu.align-right::after {
+    clear: both; }
+  .menu.align-right > li {
+    float: right; }
+  .menu.expanded {
+    width: 100%;
+    display: table;
+    table-layout: fixed; }
+    .menu.expanded > li:first-child:last-child {
+      width: 100%; }
+  .menu.icon-top > li > a {
+    text-align: center; }
+    .menu.icon-top > li > a img,
+    .menu.icon-top > li > a i,
+    .menu.icon-top > li > a svg {
+      display: block;
+      margin: 0 auto 0.25rem; }
+  .menu.nested {
+    margin-left: 1rem; }
+  .menu .active > a {
+    color: #fefefe;
+    background: #2ba6cb; }
+
+.menu-text {
+  font-weight: bold;
+  color: inherit;
+  line-height: 1;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding: 0.7rem 1rem; }
+
+.menu-centered {
+  text-align: center; }
+  .menu-centered > .menu {
+    display: inline-block; }
+
+.no-js [data-responsive-menu] ul {
+  display: none; }
+
 table {
   width: 100%;
   margin-bottom: 1rem;
@@ -1869,6 +1960,48 @@ table.hover tr:nth-of-type(even):hover {
     margin-right: 0;
     float: left; } }
 
+.menu-icon {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  width: 20px;
+  height: 16px; }
+  .menu-icon::after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 2px;
+    background: #fefefe;
+    top: 0;
+    left: 0;
+    box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe; }
+  .menu-icon:hover::after {
+    background: #cacaca;
+    box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; }
+
+.menu-icon.dark {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  width: 20px;
+  height: 16px; }
+  .menu-icon.dark::after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 2px;
+    background: #0a0a0a;
+    top: 0;
+    left: 0;
+    box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a; }
+  .menu-icon.dark:hover::after {
+    background: #8a8a8a;
+    box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; }
+
 .slide-in-down.mui-enter {
   transition-duration: 500ms;
   transition-timing-function: linear;

views/analytics.erb

@@ -2,8 +2,9 @@
   <div class="small-12 medium-4 columns">
 
     <% {"night" => "slept", "nap" => "napped"}.each do |key, verb| %>
+      <h1><%= verb.capitalize %></h1>
       <table>
-        <caption>Average <%= verb %> hours per day</caption>
+        <caption>Average hours <%= verb %> per day</caption>
         <thead>
           <tr>
             <th>DOW</th>
@@ -13,6 +14,7 @@
         </thead>
         <tbody>
           <% (0..6).each do |dow| %>
+            <% next unless @avg_hours_slept_per_weekday.fetch([dow.to_f, key], {})[:avg_utc_duration] %>
             <tr>
               <td><%= %w(Sun Mon Tue Wed Thu Fri Sat)[dow] %></td>
               <td><%= "%.1f" % @avg_hours_slept_per_weekday.fetch([dow.to_f, key], {}).fetch(:avg_utc_duration, 0.0) %></td>
@@ -35,6 +37,7 @@
         </thead>
         <tbody>
           <% (0..23).each do |hour| %>
+            <% next unless @hours_slept_histogram[[key, hour.to_f]] %></td>
             <tr>
               <td><%= hour %></td>
               <td><%= @hours_slept_histogram.fetch([key, hour.to_f], "N/A") %></td>

views/layout.erb

@@ -13,5 +13,16 @@
   </head>
   <body>
     <%= yield %>
+    <% if @user_id %>
+      <div class="expanded row small-collapse bottom-nav">
+        <div class="small-12 columns">
+          <ul class="menu reverse">
+            <li<%= " class=\"active\"" if @app == :app       %>><a href="/me/<%= @user_id %>">app</a></li>
+            <li<%= " class=\"active\"" if @app == :analytics %>><a href="/me/<%= @user_id %>/analytics">analytics</a></li>
+            <li<%= " class=\"active\"" if @app == :settings  %>><a href="/me/<%= @user_id %>/settings">settings</a></li>
+          </ul>
+        </div>
+      </div>
+    <% end %>
   </body>
 </html>

views/settings.erb

@@ -0,0 +1,6 @@
+<div class="row expanded">
+  <div class="small-12 medium-4 columns">
+    <h1>Settings</h1>
+    <p>Well, this isn't implemented yet&hellip; how embarassing!</p>
+  </div>
+</div>