Replace hotwire with htmx

In the process, also improve the feedback from the import/add feed
forms.

I also replaced the frontend code to replace utc timestamps with local
time strings with @hotwired/stimulus with vanilla js.
This commit is contained in:
2023-09-01 00:25:05 -04:00
parent ff0b218da1
commit 1d6f98c6bb
20 changed files with 215 additions and 233 deletions

View File

@@ -1,9 +1,4 @@
import { Application } from "@hotwired/stimulus";
import LocalTimeController from "./local_time_controller";
// import CSS so it gets named with a content hash that busts caches
import "../css/styles.css";
window.Stimulus = Application.start();
window.Stimulus.register("local-time", LocalTimeController);
import "./localTimeController";

View File

@@ -0,0 +1,24 @@
function convertTimeElements() {
const timeElements = document.querySelectorAll('time.local-time');
timeElements.forEach((element) => {
const utcString = element.getAttribute("datetime");
if (utcString) {
const utcTime = new Date(utcString);
element.textContent = utcTime.toLocaleDateString(window.navigator.language, {
year: "numeric",
month: "long",
day: "numeric",
});
} else {
console.error("Missing datetime attribute on time.local-time element", element);
}
});
}
document.addEventListener("DOMContentLoaded", function() {
convertTimeElements();
});
document.body.addEventListener('htmx:afterSwap', function() {
convertTimeElements();
});

View File

@@ -1,28 +0,0 @@
import { Controller } from "@hotwired/stimulus";
// Replaces all UTC timestamps with time formated for the local timezone
export default class extends Controller {
connect() {
this.renderLocalTime();
}
renderLocalTime() {
this.element.textContent = this.localTimeString;
}
get localTimeString(): string {
if (this.utcTime) {
return this.utcTime.toLocaleDateString(window.navigator.language, {
year: "numeric",
month: "long",
day: "numeric",
});
}
return "Unknown datetime"
}
get utcTime(): Date | null {
const utcString = this.element.getAttribute("datetime");
return utcString ? new Date(utcString) : null;
}
}