moodtracker/views/index.erb

50 lines
1.4 KiB
Text
Raw Normal View History

2024-10-12 19:00:33 +02:00
<head>
<meta charset="utf-8">
2025-03-05 17:54:57 +01:00
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
2024-10-12 19:00:33 +02:00
<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
2025-03-05 17:33:10 +01:00
image.src = "<%= @mode %>.png"
2024-10-12 19:00:33 +02:00
}
})
</script>
</head>
<main data-controller="mood">
2024-06-02 20:19:02 +02:00
<div class="mode">
2025-03-05 17:33:10 +01:00
<img data-mood-target="image" src="<%= @mode %>.png">
2024-06-02 20:19:02 +02:00
</div>
2024-09-22 20:50:55 +02:00
<div class="tracker">
<div class="info">
2024-11-01 11:47:55 +01:00
<h1>Comment il va le Robi ?</h1>
2024-09-22 20:50:55 +02:00
</div>
<div class="tracks">
2024-06-02 20:19:02 +02:00
2024-09-22 20:50:55 +02:00
<% @mood_log.each do |week| %>
<div class="week">
<% week.each do |d| %>
<% if d[1] %>
2024-10-12 19:00:33 +02:00
<div data-mode="<%= d[1] %>" data-action="mouseover->mood#showMode mouseleave->mood#showCurrent" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
2024-09-22 20:50:55 +02:00
<% else %>
<div class="day"></div>
<% end %>
2024-06-02 20:19:02 +02:00
<% end %>
2024-09-22 20:50:55 +02:00
</div>
<% end %>
</div>
2024-06-02 20:19:02 +02:00
</div>
</main>