add feedback for selected day

app/assets/stylesheets/kluk.css

@@ -73,6 +73,13 @@ main {
   height: 15px;
 }
 
+.selected-day {
+  border: 2px double white;
+  margin: 4px;
+  width: 15px;
+  height: 15px;
+}
+
 .creatif {
   background-color: red;
 }

app/javascript/controllers/mood_controller.js

@@ -11,6 +11,11 @@ export default class extends Controller {
     image.src = event.target.dataset.image;
     modeDayMobile.textContent = modeDayContent;
     modeDay.textContent = modeDayContent;
+    event.target.className = "selected-day " + event.target.dataset.mode;
+  }
+
+  removeFeedback(event) {
+    event.target.className = "day " + event.target.dataset.mode;
   }
 
   connect() {

app/views/moods/index.html.erb

@@ -49,7 +49,7 @@
               </div>
               <% week.each do |d| %>
                 <% if mood[:mode] %>
-                  <div data-image="<%= asset_path(mood[:mode] + ".jpg") %>" data-mode="<%= mood[:mode] %>" data-day="<%= l mood[:day] %>" data-action="click->mood#updateDayInfo mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= mood[:day] %> : <%= mood[:mode] %>" class="day <%= mood[:mode] %>"></div>
+                  <div data-image="<%= asset_path(mood[:mode] + ".jpg") %>" data-mode="<%= mood[:mode] %>" data-day="<%= l mood[:day] %>" data-action="click->mood#updateDayInfo mouseover->mood#updateDayInfo mouseleave->mood#removeFeedback" title="<%= mood[:day] %> : <%= mood[:mode] %>" class="day <%= mood[:mode] %>"></div>
                 <% else %>
                   <div class="day"></div>
                 <% end %>