add date range to range page

This commit is contained in:
2025-01-31 22:34:09 -05:00
parent 839e1d7124
commit f869da8a80
32 changed files with 377 additions and 100 deletions

View File

@ -25,6 +25,7 @@ import 'phoenix_html'
import { Socket } from 'phoenix'
import { LiveSocket } from 'phoenix_live_view'
import Date from './date'
import DateRange from './date_range'
import DateTime from './datetime'
import ShotLogChart from './shot_log_chart'
import SlimSelect from './slim_select'
@ -33,7 +34,7 @@ import topbar from 'topbar'
const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
const liveSocket = new LiveSocket('/live', Socket, {
params: { _csrf_token: csrfToken },
hooks: { Date, DateTime, ShotLogChart, SlimSelect }
hooks: { Date, DateRange, DateTime, ShotLogChart, SlimSelect }
})
// Show progress bar on live navigation and form submits

28
assets/js/date_range.js Normal file
View File

@ -0,0 +1,28 @@
import { easepick } from '@easepick/core'
import { RangePlugin } from '@easepick/range-plugin'
export default {
displayDateRange (el) {
// eslint-disable-next-line new-cap
el.easepick = new easepick.create({
element: el.firstElementChild,
css: [
'https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css',
'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css'
],
plugins: [RangePlugin],
RangePlugin: {
elementEnd: el.lastElementChild,
startDate: el.dataset.startDate,
endDate: el.dataset.endDate
},
setup (picker) {
picker.on('select', (e) => {
el.firstElementChild.dispatchEvent(new Event('input', { bubbles: true }))
})
}
})
},
mounted () { this.displayDateRange(this.el) },
updated () { this.displayDateRange(this.el) }
}

View File

@ -6,6 +6,7 @@
"": {
"license": "MIT",
"dependencies": {
"@easepick/bundle": "^1.2.1",
"@fortawesome/fontawesome-free": "^6.7.2",
"chart.js": "^4.4.7",
"chartjs-adapter-date-fns": "^3.0.0",
@ -2766,6 +2767,102 @@
"node": ">=14.17.0"
}
},
"node_modules/@easepick/amp-plugin": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/amp-plugin/-/amp-plugin-1.2.1.tgz",
"integrity": "sha512-LbGd7RU+fiucxTqJnBpT5SwACX1BoEK4yi1joLqN50O57jpN0jQMMvDO/vp/F4Zr8MO6kwaamRmOXhqo/Vb4aw==",
"license": "GPL-2.0-or-later",
"dependencies": {
"@easepick/base-plugin": "^1.1.0"
}
},
"node_modules/@easepick/base-plugin": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/base-plugin/-/base-plugin-1.2.1.tgz",
"integrity": "sha512-aonBQaRyZwNH/gmPzSzZDVjQjgy/rxWd+TXnM0E3Nxkeu4yMbXV+GnWVQbBwTvJx74M7iSCHJowdmZ5T46B7Vg==",
"license": "GPL-2.0-or-later",
"dependencies": {
"@easepick/core": "^1.1.0"
}
},
"node_modules/@easepick/bundle": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/bundle/-/bundle-1.2.1.tgz",
"integrity": "sha512-M9DGu7rrIltbTEPuBfc8fTOdK1E2CjTIiSqXmVRcof/peDnDC7U7h3XaTx7nbB0gq4HUTUO8BKHrofPC0jPqSw==",
"license": "GPL-2.0-or-later",
"dependencies": {
"@easepick/amp-plugin": "^1.1.0",
"@easepick/base-plugin": "^1.1.0",
"@easepick/core": "^1.1.0",
"@easepick/datetime": "^1.1.0",
"@easepick/kbd-plugin": "^1.1.0",
"@easepick/lock-plugin": "^1.1.0",
"@easepick/preset-plugin": "^1.1.0",
"@easepick/range-plugin": "^1.1.0",
"@easepick/time-plugin": "^1.1.0"
}
},
"node_modules/@easepick/core": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/core/-/core-1.2.1.tgz",
"integrity": "sha512-V/blEia/ykAq+0mnQ9djOU5wvMZ+iffL5iuQrKLObpMOw38kL/qo4inH4pCbB3wm7sDjrJTuDKf+6+FrgdFGsw==",
"license": "GPL-2.0-or-later",
"dependencies": {
"@easepick/datetime": "^1.1.0"
}
},
"node_modules/@easepick/datetime": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/datetime/-/datetime-1.2.1.tgz",
"integrity": "sha512-KIUvWo/kEipwBqPTazjfUf6R7dKb2ztPizPoB/0ZMYz3HrWJptsLSZQma3R1nM/zkaexnk/e4L4nX+vDjwBtYA==",
"license": "GPL-2.0-or-later"
},
"node_modules/@easepick/kbd-plugin": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/kbd-plugin/-/kbd-plugin-1.2.1.tgz",
"integrity": "sha512-t/bEtKuvAbo9b9iw4J5h5DsGYEL4Wm2sLA2VzR2rvmMfJuo1extktgzw2eCy+w6Q/s4ObdKzhXLnjMvFeiJ8Xg==",
"license": "GPL-2.0-or-later",
"dependencies": {
"@easepick/base-plugin": "^1.1.0"
}
},
"node_modules/@easepick/lock-plugin": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/lock-plugin/-/lock-plugin-1.2.1.tgz",
"integrity": "sha512-6sJCdliMpnQtzL9dwznS9vYaQUy66VRKPZ+jFdVR1ohiNUVM6C7dSGdG3dPntVTywTy2Z9uU+yJOeWcVFDT61A==",
"license": "GPL-2.0-or-later",
"dependencies": {
"@easepick/base-plugin": "^1.1.0"
}
},
"node_modules/@easepick/preset-plugin": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/preset-plugin/-/preset-plugin-1.2.1.tgz",
"integrity": "sha512-VAnjyWpf39kXTR6DYbpCJIBeBhbOgRoNTqntpSb5uF9O398KuHUpIM4Ep1id3fTIlfnRrKxzp54rAFwvc48eCA==",
"license": "GPL-2.0-or-later",
"dependencies": {
"@easepick/base-plugin": "^1.1.0",
"@easepick/range-plugin": "^1.1.0"
}
},
"node_modules/@easepick/range-plugin": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/range-plugin/-/range-plugin-1.2.1.tgz",
"integrity": "sha512-yEHLUq32Kj0exLz4txxchALQVJUbwyXvnovfN7yxTrCJLpi6uMmPXcW4lyYig2P9+xM9JqF6JsNqOsi0+5GlHQ==",
"license": "GPL-2.0-or-later",
"dependencies": {
"@easepick/base-plugin": "^1.1.0"
}
},
"node_modules/@easepick/time-plugin": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@easepick/time-plugin/-/time-plugin-1.2.1.tgz",
"integrity": "sha512-mjynAAppLxlqiDSdHdkBEqi4A67CH17FqO3UH2n6mfAIKPZLQA7R8Y6jEkp+Fpl5tj0/HFqdrk82ceiYYnLFYw==",
"license": "GPL-2.0-or-later",
"dependencies": {
"@easepick/base-plugin": "^1.1.0"
}
},
"node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",

View File

@ -13,6 +13,7 @@
"test": "standard"
},
"dependencies": {
"@easepick/bundle": "^1.2.1",
"@fortawesome/fontawesome-free": "^6.7.2",
"chart.js": "^4.4.7",
"chartjs-adapter-date-fns": "^3.0.0",

View File

@ -19,6 +19,8 @@ module.exports = {
},
extend: {
spacing: {
30: '7.5rem',
31: '7.75rem',
128: '32rem',
192: '48rem',
256: '64rem'