krichtof/moodtracker
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

show mode on mouseouver

Browse source
This commit is contained in:
Christophe Robillard 2024-10-12 19:00:33 +02:00
parent 7e8690641f
commit 2109d7a4ab
1 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
views/index.erb
View file

@ -1,3 +1,24 @@
<head>
<meta charset="utf-8">
<script type="module">
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
window.Stimulus = Application.start()
Stimulus.register("mood", class extends Controller {
static targets = [ "image" ]
showMode(event) {
const image = this.imageTarget
image.src = event.target.dataset.mode + ".png"
}
showCurrent() {
const image = this.imageTarget
image.src = "<%= @last_mood.mode %>.png"
}
})
</script>
<style> <style>
body { body {
margin: 0px; margin: 0px;
@ -84,9 +105,10 @@ tbody tr td {
background-color: green; background-color: green;
} }
</style> </style>
<main> </head>
<main data-controller="mood">
<div class="mode"> <div class="mode">
<img src="<%= @last_mood.mode %>.png"> <img data-mood-target="image" src="<%= @last_mood.mode %>.png">
</div> </div>
<div class="tracker"> <div class="tracker">
<div class="info"> <div class="info">
@ -98,7 +120,7 @@ tbody tr td {
<div class="week"> <div class="week">
<% week.each do |d| %> <% week.each do |d| %>
<% if d[1] %> <% if d[1] %>
<div title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div> <div data-mode="<%= d[1] %>" data-action="mouseover->mood#showMode mouseleave->mood#showCurrent" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
<% else %> <% else %>
<div class="day"></div> <div class="day"></div>
<% end %> <% end %>