diff --git a/CHANGELOG.md b/CHANGELOG.md index 52a6d629..6c94ac42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Fix dead link of example bullet abbreviations - Fix inaccurate error message when updating shot records - Fix tables not sorting dates correctly +- Fix dates displaying incorrectly - Fix container table not displaying all fields # v0.8.3 diff --git a/assets/js/app.js b/assets/js/app.js index e8bbead4..309a40f0 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -27,23 +27,15 @@ import { LiveSocket } from 'phoenix_live_view' import topbar from 'topbar' import MaintainAttrs from './maintain_attrs' import ShotLogChart from './shot_log_chart' -import Alpine from 'alpinejs' +import Date from './date' +import DateTime from './datetime' const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content') const liveSocket = new LiveSocket('/live', Socket, { - dom: { - onBeforeElUpdated (from, to) { - if (from._x_dataStack) { window.Alpine.clone(from, to) } - } - }, params: { _csrf_token: csrfToken }, - hooks: { MaintainAttrs, ShotLogChart } + hooks: { Date, DateTime, MaintainAttrs, ShotLogChart } }) -// alpine.js -window.Alpine = Alpine -Alpine.start() - // Show progress bar on live navigation and form submits topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' }) window.addEventListener('phx:page-loading-start', info => topbar.show()) diff --git a/assets/js/date.js b/assets/js/date.js new file mode 100644 index 00000000..3c6922fc --- /dev/null +++ b/assets/js/date.js @@ -0,0 +1,11 @@ +export default { + displayDate (el) { + const date = + Intl.DateTimeFormat([], { timeZone: 'Etc/UTC', dateStyle: 'short' }) + .format(new Date(el.dateTime)) + + el.innerText = date + }, + mounted () { this.displayDate(this.el) }, + updated () { this.displayDate(this.el) } +} diff --git a/assets/js/datetime.js b/assets/js/datetime.js new file mode 100644 index 00000000..ec19d484 --- /dev/null +++ b/assets/js/datetime.js @@ -0,0 +1,11 @@ +export default { + displayDateTime (el) { + const date = + Intl.DateTimeFormat([], { dateStyle: 'short', timeStyle: 'long' }) + .format(new Date(el.dateTime)) + + el.innerText = date + }, + mounted () { this.displayDateTime(this.el) }, + updated () { this.displayDateTime(this.el) } +} diff --git a/assets/package-lock.json b/assets/package-lock.json index 70683401..923840bf 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -7,7 +7,6 @@ "license": "MIT", "dependencies": { "@fortawesome/fontawesome-free": "^6.1.1", - "alpinejs": "^3.10.2", "chart.js": "^3.9.1", "chartjs-adapter-date-fns": "^2.0.0", "date-fns": "^2.29.3", @@ -40,19 +39,19 @@ "webpack-dev-server": "^4.9.0" }, "engines": { - "node": "18.12.1", - "npm": "8.19.2" + "node": "v18.9.1", + "npm": "8.19.1" } }, "../deps/phoenix": { - "version": "1.6.15", + "version": "1.6.16", "license": "MIT" }, "../deps/phoenix_html": { - "version": "3.2.0" + "version": "3.3.1" }, "../deps/phoenix_live_view": { - "version": "0.18.2", + "version": "0.18.18", "license": "MIT" }, "node_modules/@ampproject/remapping": { @@ -2335,19 +2334,6 @@ "@types/node": "*" } }, - "node_modules/@vue/reactivity": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", - "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", - "dependencies": { - "@vue/shared": "3.1.5" - } - }, - "node_modules/@vue/shared": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", - "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" - }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -2681,14 +2667,6 @@ "ajv": "^6.9.1" } }, - "node_modules/alpinejs": { - "version": "3.10.5", - "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.5.tgz", - "integrity": "sha512-qlvnal44Gof2XVfm/lef8fYpXKxR9fjdSki7aFB/9THyFvbsRKZ6lM5SjxXpIs7B0faJt7bgpK2K25gzrraXJw==", - "dependencies": { - "@vue/reactivity": "~3.1.1" - } - }, "node_modules/ansi-html-community": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", @@ -11913,19 +11891,6 @@ "@types/node": "*" } }, - "@vue/reactivity": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", - "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", - "requires": { - "@vue/shared": "3.1.5" - } - }, - "@vue/shared": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", - "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" - }, "@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -12210,14 +12175,6 @@ "dev": true, "requires": {} }, - "alpinejs": { - "version": "3.10.5", - "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.5.tgz", - "integrity": "sha512-qlvnal44Gof2XVfm/lef8fYpXKxR9fjdSki7aFB/9THyFvbsRKZ6lM5SjxXpIs7B0faJt7bgpK2K25gzrraXJw==", - "requires": { - "@vue/reactivity": "~3.1.1" - } - }, "ansi-html-community": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", diff --git a/assets/package.json b/assets/package.json index 91947fd1..0dd10d2b 100644 --- a/assets/package.json +++ b/assets/package.json @@ -4,7 +4,7 @@ "license": "MIT", "engines": { "node": "v18.9.1", - "npm": "8.10.0" + "npm": "8.19.1" }, "scripts": { "deploy": "NODE_ENV=production webpack --mode production", @@ -14,7 +14,6 @@ }, "dependencies": { "@fortawesome/fontawesome-free": "^6.1.1", - "alpinejs": "^3.10.2", "chart.js": "^3.9.1", "chartjs-adapter-date-fns": "^2.0.0", "date-fns": "^2.29.3", diff --git a/lib/cannery_web/components/core_components.ex b/lib/cannery_web/components/core_components.ex index 63904abb..890510d1 100644 --- a/lib/cannery_web/components/core_components.ex +++ b/lib/cannery_web/components/core_components.ex @@ -127,7 +127,7 @@ defmodule CanneryWeb.CoreComponents do @doc """ Phoenix.Component for a element that renders the Date in the user's - local timezone with Alpine.js + local timezone """ def date(assigns) @@ -136,7 +136,7 @@ defmodule CanneryWeb.CoreComponents do @doc """ Phoenix.Component for a