diff --git a/app/javascript/controllers/mood_controller.js b/app/javascript/controllers/mood_controller.js new file mode 100644 index 0000000..6b8428b --- /dev/null +++ b/app/javascript/controllers/mood_controller.js @@ -0,0 +1,12 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + static targets = [ "image", "info" ] + + updateDayInfo(event) { + const image = this.imageTarget; + const infoDay = this.infoTarget; + image.src = event.target.dataset.image; + infoDay.textContent = event.target.dataset.day; + } +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index edddae6..97edb5e 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -2,6 +2,7 @@ <%= content_for(:title) || "Moodie" %> + @@ -17,6 +18,10 @@ + + + + <%# Includes all stylesheet files in app/assets/stylesheets %> <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb index 7fc8f6d..b81681f 100644 --- a/app/views/moods/index.html.erb +++ b/app/views/moods/index.html.erb @@ -1,32 +1,6 @@ - - - - - - - - - -
- - <%= image_tag @mode + ".jpg" %> + <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
@@ -39,7 +13,7 @@
<% week.each do |d| %> <% if d[1] %> -
+
" data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>">
<% else %>
<% end %>