48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
// Connects to data-controller="autosave"
|
|
export default class extends Controller {
|
|
static values = {
|
|
interval: { type: Number, default: 30000 } // we'll default to 30 seconds here
|
|
}
|
|
|
|
static targets = ["form", "button", "status"]
|
|
|
|
connect() {
|
|
this.startAutosave()
|
|
this.bindTurboEvents()
|
|
}
|
|
|
|
disconnect() {
|
|
this.stopAutosave()
|
|
}
|
|
|
|
startAutosave() {
|
|
this.timer = setInterval(() => this.save(), this.intervalValue)
|
|
}
|
|
|
|
stopAutosave() {
|
|
if (this.timer) clearInterval(this.timer)
|
|
}
|
|
|
|
save() {
|
|
if (!this.hasButtonTarget) return
|
|
this.buttonTarget.click()
|
|
}
|
|
|
|
bindTurboEvents() {
|
|
this.formTarget.addEventListener("turbo:submit-start", () => {
|
|
this.buttonTarget.textContent = "Saving..."
|
|
})
|
|
this.formTarget.addEventListener("turbo:submit-end", () => {
|
|
const now = new Date()
|
|
const formatted = now.toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: true
|
|
})
|
|
this.statusTarget.textContent = `Last saved at ${formatted}`
|
|
})
|
|
}
|
|
}
|