7a7fa4c095
- drop Bulma and Font Awesome, plain CSS built on charte.css - dashboard: GitHub-like calendar grouped by year, selected day panel (sticky side column on desktop, bottom bar on mobile), keyboard navigation - public page: today's mood and last months fit in one screen, journal hidden - day log page: mode picker as pills, illustration follows the chosen mode - login, password and invitation screens in French, global flash messages - add User#current_mode_since Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
56 lines
2.1 KiB
JavaScript
56 lines
2.1 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
// Calendrier des humeurs : choisir un jour affiche son détail (illustration, mode, journal).
|
|
// Au clavier, les flèches se déplacent d'un jour (haut, bas) ou d'une semaine (gauche, droite).
|
|
export default class extends Controller {
|
|
static targets = [ "carte", "image", "date", "mode", "statut", "journal", "lien" ]
|
|
|
|
connect() {
|
|
const selectionne = this.element.querySelector(".jour[aria-pressed='true']")
|
|
if (selectionne && new URLSearchParams(window.location.search).has("day")) {
|
|
selectionne.scrollIntoView({ block: "center" })
|
|
}
|
|
}
|
|
|
|
choisir(event) {
|
|
this.selectionner(event.currentTarget)
|
|
}
|
|
|
|
naviguer(event) {
|
|
const decalages = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7 }
|
|
const decalage = decalages[event.key]
|
|
if (!decalage) return
|
|
|
|
const date = new Date(`${event.currentTarget.dataset.day}T12:00:00`)
|
|
date.setDate(date.getDate() + decalage)
|
|
const cible = this.element.querySelector(`button.jour[data-day="${date.toISOString().slice(0, 10)}"]`)
|
|
if (!cible) return
|
|
|
|
event.preventDefault()
|
|
this.selectionner(cible)
|
|
cible.focus()
|
|
}
|
|
|
|
selectionner(jour) {
|
|
const precedent = this.element.querySelector(".jour[aria-pressed='true']")
|
|
if (precedent) {
|
|
precedent.setAttribute("aria-pressed", "false")
|
|
precedent.tabIndex = -1
|
|
}
|
|
jour.setAttribute("aria-pressed", "true")
|
|
jour.tabIndex = 0
|
|
|
|
const { day, date, mode, statut, couleur, image, info } = jour.dataset
|
|
this.carteTarget.style.setProperty("--humeur", couleur || "")
|
|
this.imageTarget.src = image
|
|
this.dateTarget.textContent = date
|
|
this.modeTarget.textContent = mode || "Pas de tasse posée"
|
|
this.statutTarget.textContent = mode ? (statut || "") : ""
|
|
this.journalTarget.textContent = info || this.journalTarget.dataset.vide
|
|
this.journalTarget.classList.toggle("detail-journal-vide", !info)
|
|
this.lienTarget.href = `/day_logs/edit?day=${day}`
|
|
this.lienTarget.textContent = info ? "Modifier le journal" : "Écrire dans le journal"
|
|
|
|
history.replaceState({}, "", `?day=${day}`)
|
|
}
|
|
}
|