forked from shibao/cannery
use hooks for datetime, remove alpinejs
This commit is contained in:
parent
a54cf8b87d
commit
f5f72b53e6
@ -4,6 +4,7 @@
|
|||||||
- Fix dead link of example bullet abbreviations
|
- Fix dead link of example bullet abbreviations
|
||||||
- Fix inaccurate error message when updating shot records
|
- Fix inaccurate error message when updating shot records
|
||||||
- Fix tables not sorting dates correctly
|
- Fix tables not sorting dates correctly
|
||||||
|
- Fix dates displaying incorrectly
|
||||||
- Fix container table not displaying all fields
|
- Fix container table not displaying all fields
|
||||||
|
|
||||||
# v0.8.3
|
# v0.8.3
|
||||||
|
@ -27,23 +27,15 @@ import { LiveSocket } from 'phoenix_live_view'
|
|||||||
import topbar from 'topbar'
|
import topbar from 'topbar'
|
||||||
import MaintainAttrs from './maintain_attrs'
|
import MaintainAttrs from './maintain_attrs'
|
||||||
import ShotLogChart from './shot_log_chart'
|
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 csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
|
||||||
const liveSocket = new LiveSocket('/live', Socket, {
|
const liveSocket = new LiveSocket('/live', Socket, {
|
||||||
dom: {
|
|
||||||
onBeforeElUpdated (from, to) {
|
|
||||||
if (from._x_dataStack) { window.Alpine.clone(from, to) }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
params: { _csrf_token: csrfToken },
|
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
|
// Show progress bar on live navigation and form submits
|
||||||
topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' })
|
topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' })
|
||||||
window.addEventListener('phx:page-loading-start', info => topbar.show())
|
window.addEventListener('phx:page-loading-start', info => topbar.show())
|
||||||
|
11
assets/js/date.js
Normal file
11
assets/js/date.js
Normal file
@ -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) }
|
||||||
|
}
|
11
assets/js/datetime.js
Normal file
11
assets/js/datetime.js
Normal file
@ -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) }
|
||||||
|
}
|
53
assets/package-lock.json
generated
53
assets/package-lock.json
generated
@ -7,7 +7,6 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "^6.1.1",
|
"@fortawesome/fontawesome-free": "^6.1.1",
|
||||||
"alpinejs": "^3.10.2",
|
|
||||||
"chart.js": "^3.9.1",
|
"chart.js": "^3.9.1",
|
||||||
"chartjs-adapter-date-fns": "^2.0.0",
|
"chartjs-adapter-date-fns": "^2.0.0",
|
||||||
"date-fns": "^2.29.3",
|
"date-fns": "^2.29.3",
|
||||||
@ -40,19 +39,19 @@
|
|||||||
"webpack-dev-server": "^4.9.0"
|
"webpack-dev-server": "^4.9.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "18.12.1",
|
"node": "v18.9.1",
|
||||||
"npm": "8.19.2"
|
"npm": "8.19.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"../deps/phoenix": {
|
"../deps/phoenix": {
|
||||||
"version": "1.6.15",
|
"version": "1.6.16",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"../deps/phoenix_html": {
|
"../deps/phoenix_html": {
|
||||||
"version": "3.2.0"
|
"version": "3.3.1"
|
||||||
},
|
},
|
||||||
"../deps/phoenix_live_view": {
|
"../deps/phoenix_live_view": {
|
||||||
"version": "0.18.2",
|
"version": "0.18.18",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@ampproject/remapping": {
|
"node_modules/@ampproject/remapping": {
|
||||||
@ -2335,19 +2334,6 @@
|
|||||||
"@types/node": "*"
|
"@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": {
|
"node_modules/@webassemblyjs/ast": {
|
||||||
"version": "1.11.1",
|
"version": "1.11.1",
|
||||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
|
||||||
@ -2681,14 +2667,6 @@
|
|||||||
"ajv": "^6.9.1"
|
"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": {
|
"node_modules/ansi-html-community": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
|
||||||
@ -11913,19 +11891,6 @@
|
|||||||
"@types/node": "*"
|
"@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": {
|
"@webassemblyjs/ast": {
|
||||||
"version": "1.11.1",
|
"version": "1.11.1",
|
||||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
|
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
|
||||||
@ -12210,14 +12175,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {}
|
"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": {
|
"ansi-html-community": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "v18.9.1",
|
"node": "v18.9.1",
|
||||||
"npm": "8.10.0"
|
"npm": "8.19.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"deploy": "NODE_ENV=production webpack --mode production",
|
"deploy": "NODE_ENV=production webpack --mode production",
|
||||||
@ -14,7 +14,6 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "^6.1.1",
|
"@fortawesome/fontawesome-free": "^6.1.1",
|
||||||
"alpinejs": "^3.10.2",
|
|
||||||
"chart.js": "^3.9.1",
|
"chart.js": "^3.9.1",
|
||||||
"chartjs-adapter-date-fns": "^2.0.0",
|
"chartjs-adapter-date-fns": "^2.0.0",
|
||||||
"date-fns": "^2.29.3",
|
"date-fns": "^2.29.3",
|
||||||
|
@ -127,7 +127,7 @@ defmodule CanneryWeb.CoreComponents do
|
|||||||
|
|
||||||
@doc """
|
@doc """
|
||||||
Phoenix.Component for a <date> element that renders the Date in the user's
|
Phoenix.Component for a <date> element that renders the Date in the user's
|
||||||
local timezone with Alpine.js
|
local timezone
|
||||||
"""
|
"""
|
||||||
def date(assigns)
|
def date(assigns)
|
||||||
|
|
||||||
@ -136,7 +136,7 @@ defmodule CanneryWeb.CoreComponents do
|
|||||||
|
|
||||||
@doc """
|
@doc """
|
||||||
Phoenix.Component for a <time> element that renders the naivedatetime in the
|
Phoenix.Component for a <time> element that renders the naivedatetime in the
|
||||||
user's local timezone with Alpine.js
|
user's local timezone
|
||||||
"""
|
"""
|
||||||
def datetime(assigns)
|
def datetime(assigns)
|
||||||
|
|
||||||
|
@ -1,7 +1,3 @@
|
|||||||
<time :if={@date} id={@id} datetime={@date |> Date.to_iso8601(:extended)} x-data={~s<{
|
<time :if={@date} id={@id} datetime={Date.to_iso8601(@date, :extended)} phx-hook="Date">
|
||||||
date:
|
<%= Date.to_iso8601(@date, :extended) %>
|
||||||
Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
|
|
||||||
.format(new Date("#{Date.to_iso8601(@date, :extended)}"))
|
|
||||||
}>} x-text="date">
|
|
||||||
<%= @date |> Date.to_iso8601(:extended) %>
|
|
||||||
</time>
|
</time>
|
||||||
|
@ -1,7 +1,3 @@
|
|||||||
<time :if={@datetime} id={@id} datetime={cast_datetime(@datetime)} x-data={~s/{
|
<time :if={@datetime} id={@id} datetime={cast_datetime(@datetime)} phx-hook="DateTime">
|
||||||
datetime:
|
|
||||||
Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
|
|
||||||
.format(new Date("#{cast_datetime(@datetime)}"))
|
|
||||||
}/} x-text="datetime">
|
|
||||||
<%= cast_datetime(@datetime) %>
|
<%= cast_datetime(@datetime) %>
|
||||||
</time>
|
</time>
|
||||||
|
Loading…
Reference in New Issue
Block a user