app.kluk.fr/app/javascript/controllers/mood_controller.js

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = [ "image", "modeDay", "dayLogLink", "dayLogInfo" ];

  connect() {
    this.lastTarget = null;

    const params = new URLSearchParams(window.location.search);
    const selectedDay = params.get("day");

    if (selectedDay) {
      const dayEl = document.querySelector(`[data-day="${selectedDay}"]`);
      if (dayEl) {
        dayEl.click();
        dayEl.scrollIntoView({ block: "center" });
      }
    } else {
      const logs = document.querySelector(".logs");
      if (logs) logs.scrollTop = logs.scrollHeight;
    }
  }

  updateDayInfo(event) {
    const image = this.imageTarget;
    const modeDay = this.modeDayTarget;
    const day = event.target.dataset.day;
    const formattedDay = new Date(day).toLocaleDateString('fr-FR');
    const modeDayContent = formattedDay + ' : ' + event.target.dataset.mode;
    image.src = event.target.dataset.image;
    modeDay.textContent = modeDayContent;
    this.dayLogLinkTarget.href = `/day_logs/edit?day=${day}`;
    this.dayLogInfoTarget.textContent = event.target.dataset.info || '';
    event.target.className = "selected-day " + event.target.dataset.mode;

    history.pushState({}, '', `?day=${day}`);

    if (this.lastTarget) {
      this.lastTarget.className = "day " + this.lastTarget.dataset.mode;
    }

    this.lastTarget = event.target;
  }
}