Make sure date nav not being hidden when clicking next/prev day button

This commit is contained in:
Eugene Burmakin 2025-10-14 17:39:17 +02:00
parent 6da1019bf3
commit 79a2140e6f
2 changed files with 41 additions and 27 deletions

View file

@ -3,23 +3,43 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["panel", "toggleIcon"]
connect() {
// Restore panel state from sessionStorage on page load
const panelState = sessionStorage.getItem('mapControlsPanelState')
if (panelState === 'visible') {
this.showPanel()
}
}
toggle() {
this.panelTarget.classList.toggle("hidden")
const isHidden = this.panelTarget.classList.contains("hidden")
// Toggle the icon between chevron-down and chevron-up
if (isHidden) {
this.showPanel()
sessionStorage.setItem('mapControlsPanelState', 'visible')
} else {
this.hidePanel()
sessionStorage.setItem('mapControlsPanelState', 'hidden')
}
}
showPanel() {
this.panelTarget.classList.remove("hidden")
// Update icon to chevron-up
const currentIcon = this.toggleIconTarget.querySelector('svg')
const isChevronDown = currentIcon.classList.contains('lucide-chevron-down')
if (isChevronDown) {
// Replace with chevron-up
currentIcon.classList.remove('lucide-chevron-down')
currentIcon.classList.add('lucide-chevron-up')
currentIcon.innerHTML = '<path d="m18 15-6-6-6 6"/>'
} else {
// Replace with chevron-down
}
hidePanel() {
this.panelTarget.classList.add("hidden")
// Update icon to chevron-down
const currentIcon = this.toggleIconTarget.querySelector('svg')
currentIcon.classList.remove('lucide-chevron-up')
currentIcon.classList.add('lucide-chevron-down')
currentIcon.innerHTML = '<path d="m6 9 6 6 6-6"/>'
}
}
}

View file

@ -31,17 +31,11 @@
</span>
</div>
</div>
<div class="w-full lg:w-2/12">
<div class="flex flex-col space-y-2">
<%= f.label :start_at, class: "text-sm font-semibold" %>
<%= f.datetime_local_field :start_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary", value: @start_at %>
</div>
</div>
<div class="w-full lg:w-2/12">
<div class="flex flex-col space-y-2">
<%= f.label :end_at, class: "text-sm font-semibold" %>
<%= f.datetime_local_field :end_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary", value: @end_at %>
<div class="w-full lg:w-2/12 tooltip tooltip-bottom" data-tip="Start date and time">
<%= f.datetime_local_field :start_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary w-full", value: @start_at %>
</div>
<div class="w-full lg:w-2/12 tooltip tooltip-bottom" data-tip="End date and time">
<%= f.datetime_local_field :end_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary w-full", value: @end_at %>
</div>
<div class="w-full lg:w-1/12">
<div class="flex flex-col space-y-2">