add date range to range page
This commit is contained in:
@ -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
28
assets/js/date_range.js
Normal 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) }
|
||||
}
|
97
assets/package-lock.json
generated
97
assets/package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -19,6 +19,8 @@ module.exports = {
|
||||
},
|
||||
extend: {
|
||||
spacing: {
|
||||
30: '7.5rem',
|
||||
31: '7.75rem',
|
||||
128: '32rem',
|
||||
192: '48rem',
|
||||
256: '64rem'
|
||||
|
Reference in New Issue
Block a user