style day box when empty or unknown

app/assets/stylesheets/kluk.css

@@ -61,6 +61,14 @@ main {
   height: 15px;
 }
 
+.empty-day {
+  border: 1px dashed #aaa;
+  margin: 4px;
+  width: 15px;
+  height: 15px;
+  background: transparent;
+}
+
 .info {
   margin: 30px;
 }

app/helpers/moods_helper.rb

@@ -1,4 +1,11 @@
 module MoodsHelper
+  def day_status(mood, user)
+    return :filled if mood[:mode].present?
+    return :guessed if mood[:guess].present? && user.guess?
+    return :unknown if mood[:guess].present? && !user.guess?
+    :empty
+  end
+
   def mode_for(mood, user)
     if user.guess?
       mood[:mode] || mood[:guess] || { label: "unknown", color: "white", image_url: "unknown.jpg" }
@@ -7,9 +14,15 @@ module MoodsHelper
     end
   end
 
-  def style_for_mode(mode)
+  def style_for_mode(mode, status)
-    style = "background-color: #{mode[:color]};"
+    case status
-    style += " border: 2px double grey;" if mode[:label] == "unknown"
+    when :empty   then ""
-    style
+    when :unknown then "background-color: #{mode[:color]}; border: 2px double grey;"
+    else               "background-color: #{mode[:color]};"
+    end
+  end
+
+  def css_class_for_day(status)
+    status == :empty ? "day empty-day" : "day"
   end
 end

app/views/moods/index.html.erb

@@ -14,7 +14,7 @@
         </div>
         <% @user.modes.each do |mode| %>
           <div class="is-flex is-align-items-center mr-4">
-            <div class="bar mr-1" style="<%= style_for_mode(mode) %>"></div>
+            <div class="bar mr-1" style="<%= style_for_mode(mode, :filled) %>"></div>
             <div class=""><%= mode.label %></div>
           </div>
         <% end %>
@@ -38,8 +38,16 @@
                 <% month[:weeks].each do |week| %>
                   <div class="is-flex is-flex-direction-column is-flex-wrap-wrap mb-3">
                     <% week.each do |mood| %>
+                      <% status = day_status(mood, @user) %>
                       <% mode = mode_for(mood, @user) %>
-                      <div data-image="<%= mode[:image_url] %>" data-mode="<%= mode[:label] %>" data-day="<%= l mood[:recorded_at].to_date %>" data-action="click->mood#updateDayInfo" title="<%= l(mood[:recorded_at].to_date) %> : <%= mode[:label] %>" class="day" style="<%= style_for_mode(mode) %>"></div>
+                      <div data-image="<%= mode[:image_url] %>"
+                        data-mode="<%= mode[:label] %>"
+                        data-day="<%= l mood[:recorded_at].to_date %>"
+                        data-action="click->mood#updateDayInfo"
+                        title="<%= l(mood[:recorded_at].to_date) %> : <%= mode[:label] %>"
+                        class="<%= css_class_for_day(status) %>"
+                        style="<%= style_for_mode(mode, status) %>">
+                      </div>
                     <% end %>
                   </div>
                 <% end %>