Compare commits
12 Commits
d5f1a2e3a1
...
8ba7a39ce5
| Author | SHA1 | Date | |
|---|---|---|---|
| 8ba7a39ce5 | |||
| 30dfaa17af | |||
| f310bbef54 | |||
| b7d5d7d32c | |||
| 362b836dc6 | |||
| f8582e1fe9 | |||
| 31b25e3533 | |||
| 5dc7ceb8aa | |||
| b83f1f2f31 | |||
| e36d2610da | |||
| 0f259824fc | |||
| 3372933044 |
17
README.md
Normal file
17
README.md
Normal file
@ -0,0 +1,17 @@
|
||||
# reminder-dashboard
|
||||
|
||||
The re-re-rewrite of the dashboard.
|
||||
|
||||
## Why
|
||||
|
||||
The existing beta variant of the dashboard is written using vanilla JavaScript. This is fine,
|
||||
but annoying to update. This would've been okay if I was more dedicated to updating the vanilla
|
||||
JavaScript too, but I want to experiment with "new" things.
|
||||
|
||||
This also allows me to expand my frontend skills, which is relevant to part of my job.
|
||||
|
||||
## Developing
|
||||
|
||||
1. Download the parent repo: https://gitea.jellypro.xyz/jude/reminder-bot
|
||||
2. Initialise the submodules
|
||||
3. Run both `npm start` and `cargo run`
|
||||
410
package-lock.json
generated
410
package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"bulma": "^0.9.4",
|
||||
"luxon": "^3.4.3",
|
||||
"preact": "^10.13.1",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-query": "^3.39.3",
|
||||
"tributejs": "^5.1.3",
|
||||
"wouter": "^2.12.1"
|
||||
@ -61,18 +62,18 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/compat-data": {
|
||||
"version": "7.22.20",
|
||||
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.20.tgz",
|
||||
"integrity": "sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw==",
|
||||
"version": "7.23.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.2.tgz",
|
||||
"integrity": "sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/core": {
|
||||
"version": "7.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.0.tgz",
|
||||
"integrity": "sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ==",
|
||||
"version": "7.23.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.2.tgz",
|
||||
"integrity": "sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "^2.2.0",
|
||||
@ -80,10 +81,10 @@
|
||||
"@babel/generator": "^7.23.0",
|
||||
"@babel/helper-compilation-targets": "^7.22.15",
|
||||
"@babel/helper-module-transforms": "^7.23.0",
|
||||
"@babel/helpers": "^7.23.0",
|
||||
"@babel/helpers": "^7.23.2",
|
||||
"@babel/parser": "^7.23.0",
|
||||
"@babel/template": "^7.22.15",
|
||||
"@babel/traverse": "^7.23.0",
|
||||
"@babel/traverse": "^7.23.2",
|
||||
"@babel/types": "^7.23.0",
|
||||
"convert-source-map": "^2.0.0",
|
||||
"debug": "^4.1.0",
|
||||
@ -295,13 +296,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helpers": {
|
||||
"version": "7.23.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.1.tgz",
|
||||
"integrity": "sha512-chNpneuK18yW5Oxsr+t553UZzzAs3aZnFm4bxhebsNTeshrC95yA7l5yl7GBAG+JG1rF0F7zzD2EixK9mWSDoA==",
|
||||
"version": "7.23.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz",
|
||||
"integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/template": "^7.22.15",
|
||||
"@babel/traverse": "^7.23.0",
|
||||
"@babel/traverse": "^7.23.2",
|
||||
"@babel/types": "^7.23.0"
|
||||
},
|
||||
"engines": {
|
||||
@ -411,9 +412,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.23.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
|
||||
"integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
|
||||
"version": "7.23.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
|
||||
"integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.14.0"
|
||||
},
|
||||
@ -436,9 +437,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/traverse": {
|
||||
"version": "7.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz",
|
||||
"integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==",
|
||||
"version": "7.23.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
|
||||
"integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.22.13",
|
||||
@ -838,18 +839,18 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint-community/regexpp": {
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.0.tgz",
|
||||
"integrity": "sha512-zJmuCWj2VLBt4c25CfBIbMZLGLyhkvs7LznyVX5HfpzeocThgIj5XQK4L+g3U36mMcx8bPMhGyPpwCATamC4jQ==",
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
|
||||
"integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint/eslintrc": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
|
||||
"integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz",
|
||||
"integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ajv": "^6.12.4",
|
||||
@ -870,9 +871,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint/eslintrc/node_modules/globals": {
|
||||
"version": "13.22.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz",
|
||||
"integrity": "sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw==",
|
||||
"version": "13.23.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
|
||||
"integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"type-fest": "^0.20.2"
|
||||
@ -885,21 +886,21 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint/js": {
|
||||
"version": "8.50.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.50.0.tgz",
|
||||
"integrity": "sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ==",
|
||||
"version": "8.53.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.53.0.tgz",
|
||||
"integrity": "sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.11",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
|
||||
"integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
|
||||
"version": "0.11.13",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
|
||||
"integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@humanwhocodes/object-schema": "^1.2.1",
|
||||
"@humanwhocodes/object-schema": "^2.0.1",
|
||||
"debug": "^4.1.1",
|
||||
"minimatch": "^3.0.5"
|
||||
},
|
||||
@ -921,9 +922,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/object-schema": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
|
||||
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
|
||||
"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
@ -965,9 +966,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.19",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
|
||||
"integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
|
||||
"version": "0.3.20",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
|
||||
"integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
@ -975,9 +976,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mdn/browser-compat-data": {
|
||||
"version": "5.3.19",
|
||||
"resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.3.19.tgz",
|
||||
"integrity": "sha512-3k0I0sqa9vyO1z687O4hfoeXnTIf68WI0UBksBj0GPbXdNrOA4VOntP08jtvuaTG7yYHRVXSyoA9xRWxSGv3mw==",
|
||||
"version": "5.3.28",
|
||||
"resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.3.28.tgz",
|
||||
"integrity": "sha512-vC+UDAsQti7Cv2oBahPfgnTXT7n0XZk8e7UFucNMmkauszdiiEsNFI0elmMMrh2u+IaMOvAAHo3DDzMx7y80Cw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
|
||||
@ -1047,19 +1048,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@preact/preset-vite": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@preact/preset-vite/-/preset-vite-2.5.0.tgz",
|
||||
"integrity": "sha512-BUhfB2xQ6ex0yPkrT1Z3LbfPzjpJecOZwQ/xJrXGFSZD84+ObyS//41RdEoQCMWsM0t7UHGaujUxUBub7WM1Jw==",
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@preact/preset-vite/-/preset-vite-2.6.0.tgz",
|
||||
"integrity": "sha512-5nztNzXbCpqyVum/K94nB2YQ5PTnvWdz4u7/X0jc8+kLyskSSpkNUxLQJeI90zfGSFIX1Ibj2G2JIS/mySHWYQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.14.9",
|
||||
"@babel/plugin-transform-react-jsx-development": "^7.16.7",
|
||||
"@prefresh/vite": "^2.2.8",
|
||||
"@babel/plugin-transform-react-jsx": "^7.22.15",
|
||||
"@babel/plugin-transform-react-jsx-development": "^7.22.5",
|
||||
"@prefresh/vite": "^2.4.1",
|
||||
"@rollup/pluginutils": "^4.1.1",
|
||||
"babel-plugin-transform-hook-names": "^1.0.2",
|
||||
"debug": "^4.3.1",
|
||||
"kolorist": "^1.2.10",
|
||||
"resolve": "^1.20.0"
|
||||
"debug": "^4.3.4",
|
||||
"kolorist": "^1.8.0",
|
||||
"resolve": "^1.22.8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "7.x",
|
||||
@ -1088,9 +1089,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@prefresh/vite": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@prefresh/vite/-/vite-2.4.1.tgz",
|
||||
"integrity": "sha512-vthWmEqu8TZFeyrBNc9YE5SiC3DVSzPgsOCp/WQ7FqdHpOIJi7Z8XvCK06rBPOtG4914S52MjG9Ls22eVAiuqQ==",
|
||||
"version": "2.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@prefresh/vite/-/vite-2.4.3.tgz",
|
||||
"integrity": "sha512-diQ8AW+Y2i1QEhO64t2hhV8WFP9X0/NAxuSd9eRlVyS3LOs3RgGOwjOmLoJqwCmIbdq5Szq983gO+xdW/l0G6A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.22.1",
|
||||
@ -1118,21 +1119,21 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz",
|
||||
"integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
|
||||
"version": "7.0.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz",
|
||||
"integrity": "sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/luxon": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.2.tgz",
|
||||
"integrity": "sha512-l5cpE57br4BIjK+9BSkFBOsWtwv6J9bJpC7gdXIzZyI0vuKvNTk0wZZrkQxMGsUAuGW9+WMNWF2IJMD7br2yeQ==",
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.3.tgz",
|
||||
"integrity": "sha512-/BJF3NT0pRMuxrenr42emRUF67sXwcZCd+S1ksG/Fcf9O7C3kKCY4uJSbKBE4KDUIYr3WMsvfmWD8hRjXExBJQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/semver": {
|
||||
"version": "7.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
|
||||
"integrity": "sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==",
|
||||
"version": "7.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.4.tgz",
|
||||
"integrity": "sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@typescript-eslint/experimental-utils": {
|
||||
@ -1342,10 +1343,16 @@
|
||||
"url": "https://opencollective.com/typescript-eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/@ungap/structured-clone": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
|
||||
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.10.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
|
||||
"integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
|
||||
"version": "8.11.2",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
|
||||
"integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
@ -1558,9 +1565,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
|
||||
"integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
|
||||
"integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
@ -1663,13 +1670,14 @@
|
||||
"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
||||
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
|
||||
"integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.0.2"
|
||||
"function-bind": "^1.1.2",
|
||||
"get-intrinsic": "^1.2.1",
|
||||
"set-function-length": "^1.1.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
@ -1685,9 +1693,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001541",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz",
|
||||
"integrity": "sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw==",
|
||||
"version": "1.0.30001561",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz",
|
||||
"integrity": "sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -1793,9 +1801,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/define-data-property": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz",
|
||||
"integrity": "sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
|
||||
"integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.2.1",
|
||||
@ -1861,32 +1869,32 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.537",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.537.tgz",
|
||||
"integrity": "sha512-W1+g9qs9hviII0HAwOdehGYkr+zt7KKdmCcJcjH0mYg6oL8+ioT3Skjmt7BLoAQqXhjf40AXd+HlR4oAWMlXjA==",
|
||||
"version": "1.4.576",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.576.tgz",
|
||||
"integrity": "sha512-yXsZyXJfAqzWk1WKryr0Wl0MN2D47xodPvEEwlVePBnhU5E7raevLQR+E6b9JAD3GfL/7MbAL9ZtWQQPcLx7wA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/es-abstract": {
|
||||
"version": "1.22.2",
|
||||
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz",
|
||||
"integrity": "sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==",
|
||||
"version": "1.22.3",
|
||||
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
|
||||
"integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"array-buffer-byte-length": "^1.0.0",
|
||||
"arraybuffer.prototype.slice": "^1.0.2",
|
||||
"available-typed-arrays": "^1.0.5",
|
||||
"call-bind": "^1.0.2",
|
||||
"call-bind": "^1.0.5",
|
||||
"es-set-tostringtag": "^2.0.1",
|
||||
"es-to-primitive": "^1.2.1",
|
||||
"function.prototype.name": "^1.1.6",
|
||||
"get-intrinsic": "^1.2.1",
|
||||
"get-intrinsic": "^1.2.2",
|
||||
"get-symbol-description": "^1.0.0",
|
||||
"globalthis": "^1.0.3",
|
||||
"gopd": "^1.0.1",
|
||||
"has": "^1.0.3",
|
||||
"has-property-descriptors": "^1.0.0",
|
||||
"has-proto": "^1.0.1",
|
||||
"has-symbols": "^1.0.3",
|
||||
"hasown": "^2.0.0",
|
||||
"internal-slot": "^1.0.5",
|
||||
"is-array-buffer": "^3.0.2",
|
||||
"is-callable": "^1.2.7",
|
||||
@ -1896,7 +1904,7 @@
|
||||
"is-string": "^1.0.7",
|
||||
"is-typed-array": "^1.1.12",
|
||||
"is-weakref": "^1.0.2",
|
||||
"object-inspect": "^1.12.3",
|
||||
"object-inspect": "^1.13.1",
|
||||
"object-keys": "^1.1.1",
|
||||
"object.assign": "^4.1.4",
|
||||
"regexp.prototype.flags": "^1.5.1",
|
||||
@ -1910,7 +1918,7 @@
|
||||
"typed-array-byte-offset": "^1.0.0",
|
||||
"typed-array-length": "^1.0.4",
|
||||
"unbox-primitive": "^1.0.2",
|
||||
"which-typed-array": "^1.1.11"
|
||||
"which-typed-array": "^1.1.13"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@ -1942,26 +1950,26 @@
|
||||
}
|
||||
},
|
||||
"node_modules/es-set-tostringtag": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
|
||||
"integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
|
||||
"integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.1.3",
|
||||
"has": "^1.0.3",
|
||||
"has-tostringtag": "^1.0.0"
|
||||
"get-intrinsic": "^1.2.2",
|
||||
"has-tostringtag": "^1.0.0",
|
||||
"hasown": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-shim-unscopables": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
|
||||
"integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
|
||||
"integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has": "^1.0.3"
|
||||
"hasown": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/es-to-primitive": {
|
||||
@ -2037,18 +2045,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/eslint": {
|
||||
"version": "8.50.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.50.0.tgz",
|
||||
"integrity": "sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg==",
|
||||
"version": "8.53.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.53.0.tgz",
|
||||
"integrity": "sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.2.0",
|
||||
"@eslint-community/regexpp": "^4.6.1",
|
||||
"@eslint/eslintrc": "^2.1.2",
|
||||
"@eslint/js": "8.50.0",
|
||||
"@humanwhocodes/config-array": "^0.11.11",
|
||||
"@eslint/eslintrc": "^2.1.3",
|
||||
"@eslint/js": "8.53.0",
|
||||
"@humanwhocodes/config-array": "^0.11.13",
|
||||
"@humanwhocodes/module-importer": "^1.0.1",
|
||||
"@nodelib/fs.walk": "^1.2.8",
|
||||
"@ungap/structured-clone": "^1.2.0",
|
||||
"ajv": "^6.12.4",
|
||||
"chalk": "^4.0.0",
|
||||
"cross-spawn": "^7.0.2",
|
||||
@ -2243,12 +2252,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-react/node_modules/resolve": {
|
||||
"version": "2.0.0-next.4",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz",
|
||||
"integrity": "sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==",
|
||||
"version": "2.0.0-next.5",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
|
||||
"integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-core-module": "^2.9.0",
|
||||
"is-core-module": "^2.13.0",
|
||||
"path-parse": "^1.0.7",
|
||||
"supports-preserve-symlinks-flag": "^1.0.0"
|
||||
},
|
||||
@ -2349,9 +2358,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/eslint/node_modules/globals": {
|
||||
"version": "13.22.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz",
|
||||
"integrity": "sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw==",
|
||||
"version": "13.23.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
|
||||
"integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"type-fest": "^0.20.2"
|
||||
@ -2545,12 +2554,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/flat-cache": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.0.tgz",
|
||||
"integrity": "sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==",
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.1.tgz",
|
||||
"integrity": "sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"flatted": "^3.2.7",
|
||||
"flatted": "^3.2.9",
|
||||
"keyv": "^4.5.3",
|
||||
"rimraf": "^3.0.2"
|
||||
},
|
||||
@ -2625,10 +2634,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/function.prototype.name": {
|
||||
"version": "1.1.6",
|
||||
@ -2667,15 +2679,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
|
||||
"integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
|
||||
"integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
"has": "^1.0.3",
|
||||
"function-bind": "^1.1.2",
|
||||
"has-proto": "^1.0.1",
|
||||
"has-symbols": "^1.0.3"
|
||||
"has-symbols": "^1.0.3",
|
||||
"hasown": "^2.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
@ -2790,18 +2802,6 @@
|
||||
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/has-bigints": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
|
||||
@ -2821,12 +2821,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/has-property-descriptors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
|
||||
"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
|
||||
"integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.1.1"
|
||||
"get-intrinsic": "^1.2.2"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
@ -2871,6 +2871,18 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
|
||||
"integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.2.4",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
|
||||
@ -2920,13 +2932,13 @@
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
|
||||
},
|
||||
"node_modules/internal-slot": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
|
||||
"integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz",
|
||||
"integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.2.0",
|
||||
"has": "^1.0.3",
|
||||
"get-intrinsic": "^1.2.2",
|
||||
"hasown": "^2.0.0",
|
||||
"side-channel": "^1.0.4"
|
||||
},
|
||||
"engines": {
|
||||
@ -3003,12 +3015,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/is-core-module": {
|
||||
"version": "2.13.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
|
||||
"integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
|
||||
"version": "2.13.1",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
|
||||
"integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has": "^1.0.3"
|
||||
"hasown": "^2.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
@ -3352,9 +3364,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/keyv": {
|
||||
"version": "4.5.3",
|
||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
|
||||
"integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==",
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
||||
"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"json-buffer": "3.0.1"
|
||||
@ -3554,9 +3566,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/object-inspect": {
|
||||
"version": "1.12.3",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
|
||||
"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
|
||||
"version": "1.13.1",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
|
||||
"integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
@ -3810,9 +3822,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.18.1",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.18.1.tgz",
|
||||
"integrity": "sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg==",
|
||||
"version": "10.18.2",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.18.2.tgz",
|
||||
"integrity": "sha512-X/K43vocUHDg0XhWVmTTMbec4LT/iBMh+csCEqJk+pJqegaXsvjdqN80ZZ3L+93azWCnWCZ+WGwYb8SplxeNjA==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
@ -3859,9 +3871,9 @@
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
|
||||
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
@ -3899,6 +3911,28 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-colorful": {
|
||||
"version": "5.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
|
||||
"integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
@ -3978,9 +4012,9 @@
|
||||
"integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.6",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz",
|
||||
"integrity": "sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==",
|
||||
"version": "1.22.8",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
|
||||
"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-core-module": "^2.13.0",
|
||||
@ -4098,6 +4132,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
|
||||
@ -4107,6 +4150,21 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-function-length": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
|
||||
"integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"define-data-property": "^1.1.1",
|
||||
"get-intrinsic": "^1.2.1",
|
||||
"gopd": "^1.0.1",
|
||||
"has-property-descriptors": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/set-function-name": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
|
||||
@ -4514,9 +4572,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.4.9",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
|
||||
"integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
|
||||
"integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.18.10",
|
||||
@ -4641,13 +4699,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/which-typed-array": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
|
||||
"integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
|
||||
"version": "1.1.13",
|
||||
"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
|
||||
"integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"available-typed-arrays": "^1.0.5",
|
||||
"call-bind": "^1.0.2",
|
||||
"call-bind": "^1.0.4",
|
||||
"for-each": "^0.3.3",
|
||||
"gopd": "^1.0.1",
|
||||
"has-tostringtag": "^1.0.0"
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
"bulma": "^0.9.4",
|
||||
"luxon": "^3.4.3",
|
||||
"preact": "^10.13.1",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-query": "^3.39.3",
|
||||
"tributejs": "^5.1.3",
|
||||
"wouter": "^2.12.1"
|
||||
|
||||
140
src/api.ts
140
src/api.ts
@ -8,8 +8,9 @@ type UserInfo = {
|
||||
};
|
||||
|
||||
export type GuildInfo = {
|
||||
id: string;
|
||||
patreon: boolean;
|
||||
name: string;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
type EmbedField = {
|
||||
@ -47,36 +48,133 @@ export type Reminder = {
|
||||
utc_time: DateTime;
|
||||
};
|
||||
|
||||
type ChannelInfo = {
|
||||
export type ChannelInfo = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export function fetchUserInfo(): Promise<UserInfo> {
|
||||
return axios.get("/dashboard/api/user").then((resp) => resp.data) as Promise<UserInfo>;
|
||||
}
|
||||
type RoleInfo = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export function fetchUserGuilds(): Promise<GuildInfo[]> {
|
||||
return axios.get("/dashboard/api/user/guilds").then((resp) => resp.data) as Promise<
|
||||
GuildInfo[]
|
||||
>;
|
||||
}
|
||||
type Template = {
|
||||
id: number;
|
||||
name: string;
|
||||
attachment: string | null;
|
||||
attachment_name: string | null;
|
||||
avatar: string | null;
|
||||
channel: string;
|
||||
content: string;
|
||||
embed_author: string;
|
||||
embed_author_url: string | null;
|
||||
embed_color: number;
|
||||
embed_description: string;
|
||||
embed_footer: string;
|
||||
embed_footer_url: string | null;
|
||||
embed_image_url: string | null;
|
||||
embed_thumbnail_url: string | null;
|
||||
embed_title: string;
|
||||
embed_fields: EmbedField[] | null;
|
||||
};
|
||||
|
||||
export function fetchGuildReminders(guild: string): Promise<Reminder[]> {
|
||||
return axios
|
||||
const USER_INFO_STALE_TIME = 120_000;
|
||||
const GUILD_INFO_STALE_TIME = 300_000;
|
||||
const OTHER_STALE_TIME = 15_000;
|
||||
|
||||
export const fetchUserInfo = () => ({
|
||||
queryKey: ["USER_INFO"],
|
||||
queryFn: () => axios.get("/dashboard/api/user").then((resp) => resp.data) as Promise<UserInfo>,
|
||||
staleTime: USER_INFO_STALE_TIME,
|
||||
});
|
||||
|
||||
export const patchUserInfo = () => ({
|
||||
mutationFn: (user: UserInfo) => axios.patch(`/dashboard/api/user`, user),
|
||||
});
|
||||
|
||||
export const fetchUserGuilds = () => ({
|
||||
queryKey: ["USER_GUILDS"],
|
||||
queryFn: () =>
|
||||
axios.get("/dashboard/api/user/guilds").then((resp) => resp.data) as Promise<GuildInfo[]>,
|
||||
staleTime: USER_INFO_STALE_TIME,
|
||||
});
|
||||
|
||||
export const fetchGuildInfo = (guild: string) => ({
|
||||
queryKey: ["GUILD_INFO", guild],
|
||||
queryFn: () =>
|
||||
axios.get(`/dashboard/api/guild/${guild}`).then((resp) => resp.data) as Promise<GuildInfo>,
|
||||
staleTime: GUILD_INFO_STALE_TIME,
|
||||
});
|
||||
|
||||
export const fetchGuildChannels = (guild: string) => ({
|
||||
queryKey: ["GUILD_CHANNELS", guild],
|
||||
queryFn: () =>
|
||||
axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise<
|
||||
ChannelInfo[]
|
||||
>,
|
||||
staleTime: GUILD_INFO_STALE_TIME,
|
||||
});
|
||||
|
||||
export const fetchGuildRoles = (guild: string) => ({
|
||||
queryKey: ["GUILD_ROLES", guild],
|
||||
queryFn: () =>
|
||||
axios.get(`/dashboard/api/guild/${guild}/roles`).then((resp) => resp.data) as Promise<
|
||||
RoleInfo[]
|
||||
>,
|
||||
staleTime: GUILD_INFO_STALE_TIME,
|
||||
});
|
||||
|
||||
export const fetchGuildReminders = (guild: string) => ({
|
||||
queryKey: ["GUILD_REMINDERS", guild],
|
||||
queryFn: () =>
|
||||
axios
|
||||
.get(`/dashboard/api/guild/${guild}/reminders`)
|
||||
.then((resp) => resp.data)
|
||||
.then((value) =>
|
||||
value.map((reminder) => ({
|
||||
...reminder,
|
||||
utc_time: DateTime.fromISO(reminder.utc_time),
|
||||
expires: reminder.expires === null ? null : DateTime.fromISO(reminder.expires),
|
||||
utc_time: DateTime.fromISO(reminder.utc_time, { zone: "UTC" }),
|
||||
expires:
|
||||
reminder.expires === null
|
||||
? null
|
||||
: DateTime.fromISO(reminder.expires, { zone: "UTC" }),
|
||||
})),
|
||||
) as Promise<Reminder[]>;
|
||||
}
|
||||
) as Promise<Reminder[]>,
|
||||
staleTime: OTHER_STALE_TIME,
|
||||
});
|
||||
|
||||
export function fetchGuildChannels(guild: string): Promise<ChannelInfo[]> {
|
||||
return axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise<
|
||||
ChannelInfo[]
|
||||
>;
|
||||
}
|
||||
export const patchGuildReminder = (guild: string) => ({
|
||||
mutationFn: (reminder: Reminder) =>
|
||||
axios.patch(`/dashboard/api/guild/${guild}/reminders`, {
|
||||
...reminder,
|
||||
utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
|
||||
}),
|
||||
});
|
||||
|
||||
export const postGuildReminder = (guild: string) => ({
|
||||
mutationFn: (reminder: Reminder) =>
|
||||
axios
|
||||
.post(`/dashboard/api/guild/${guild}/reminders`, {
|
||||
...reminder,
|
||||
utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
|
||||
})
|
||||
.then((resp) => resp.data),
|
||||
});
|
||||
|
||||
export const deleteGuildReminder = (guild: string) => ({
|
||||
mutationFn: (reminder: Reminder) =>
|
||||
axios.delete(`/dashboard/api/guild/${guild}/reminders`, {
|
||||
data: {
|
||||
uid: reminder.uid,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
export const fetchGuildTemplates = (guild: string) => ({
|
||||
queryKey: ["GUILD_TEMPLATES", guild],
|
||||
queryFn: () =>
|
||||
axios.get(`/dashboard/api/guild/${guild}/templates`).then((resp) => resp.data) as Promise<
|
||||
Template[]
|
||||
>,
|
||||
staleTime: OTHER_STALE_TIME,
|
||||
});
|
||||
|
||||
7
src/components/App/FlashContext.tsx
Normal file
7
src/components/App/FlashContext.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import { createContext } from "preact";
|
||||
import { useContext } from "preact/compat";
|
||||
import { Message } from "./FlashProvider";
|
||||
|
||||
export const FlashContext = createContext(null as (message: Message) => void);
|
||||
|
||||
export const useFlash = () => useContext(FlashContext);
|
||||
43
src/components/App/FlashProvider.tsx
Normal file
43
src/components/App/FlashProvider.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { FlashContext } from "./FlashContext";
|
||||
import { useState } from "preact/hooks";
|
||||
import { MESSAGE_FLASH_TIME } from "../../consts";
|
||||
|
||||
export type Message = {
|
||||
message: string;
|
||||
type: "error" | "success";
|
||||
};
|
||||
|
||||
export const FlashProvider = ({ children }) => {
|
||||
const [messages, setMessages] = useState([] as Message[]);
|
||||
|
||||
return (
|
||||
<FlashContext.Provider
|
||||
value={(message: Message) => {
|
||||
setMessages((messages: Message[]) => [...messages, message]);
|
||||
setTimeout(() => {
|
||||
setMessages((messages) => [...messages].splice(1));
|
||||
}, MESSAGE_FLASH_TIME);
|
||||
}}
|
||||
>
|
||||
<>
|
||||
{children}
|
||||
<div class="flash-container">
|
||||
{messages.map((message) => {
|
||||
const className = message.type === "error" ? "is-danger" : "is-success";
|
||||
const icon =
|
||||
message.type === "error" ? "fa-exclamation-circle" : "fa-check";
|
||||
|
||||
return (
|
||||
<div class={`notification flash-message is-active ${className}`}>
|
||||
<span class="icon">
|
||||
<i class={`far ${icon}`}></i>
|
||||
</span>{" "}
|
||||
<span class="error-message">{message.message}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
</FlashContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -2,31 +2,29 @@ import { Sidebar } from "../Sidebar";
|
||||
import { QueryClient, QueryClientProvider } from "react-query";
|
||||
import { Route, Router, Switch } from "wouter";
|
||||
import { Welcome } from "../Welcome";
|
||||
import { GuildReminders } from "../GuildReminders";
|
||||
import { Guild } from "../Guild";
|
||||
import { FlashProvider } from "./FlashProvider";
|
||||
|
||||
export function App() {
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
return (
|
||||
<FlashProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<>
|
||||
<Router base={"/dashboard"}>
|
||||
<div class="columns is-gapless dashboard-frame">
|
||||
<Sidebar></Sidebar>
|
||||
<Sidebar />
|
||||
<div class="column is-main-content">
|
||||
<Switch>
|
||||
<Route
|
||||
path={"/:guild/reminders"}
|
||||
component={GuildReminders}
|
||||
></Route>
|
||||
<Route path={"/:guild/reminders"} component={Guild}></Route>
|
||||
<Route>
|
||||
<Welcome></Welcome>
|
||||
<Welcome />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</Router>
|
||||
</>
|
||||
</QueryClientProvider>
|
||||
</FlashProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
import { useQuery } from "react-query";
|
||||
import { QueryKeys } from "../../consts";
|
||||
import { useParams } from "wouter";
|
||||
import { fetchGuildChannels } from "../../api";
|
||||
|
||||
export const ChannelSelector = ({ channel }) => {
|
||||
const { guild } = useParams();
|
||||
|
||||
const { isSuccess, data } = useQuery({
|
||||
queryKey: [QueryKeys.GUILD_CHANNELS, guild],
|
||||
queryFn: () => fetchGuildChannels(guild),
|
||||
staleTime: 300,
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
<select name="channel" class="channel-selector" value={channel}>
|
||||
{isSuccess && data.map((c) => <option value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-small is-left">
|
||||
<i class="fas fa-hashtag"></i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
export const Content = ({ value }) => (
|
||||
<>
|
||||
<label class="is-sr-only">Content</label>
|
||||
<textarea
|
||||
class="message-input autoresize discord-content"
|
||||
placeholder="Content Content..."
|
||||
maxlength={2000}
|
||||
name="content"
|
||||
rows={1}
|
||||
value={value}
|
||||
></textarea>
|
||||
</>
|
||||
);
|
||||
@ -1,31 +0,0 @@
|
||||
export const Author = ({ name, icon }) => {
|
||||
return (
|
||||
<div class="embed-author-box">
|
||||
<div class="a">
|
||||
<p class="image is-24x24 customizable">
|
||||
<a>
|
||||
<img
|
||||
class="is-rounded embed_author_url"
|
||||
src={icon || "/static/img/bg.webp"}
|
||||
alt="Image for embed author"
|
||||
></img>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="b">
|
||||
<label class="is-sr-only" for="embedAuthor">
|
||||
Embed Author
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-embed-author message-input autoresize"
|
||||
placeholder="Embed Author..."
|
||||
rows={1}
|
||||
maxlength={256}
|
||||
name="embed_author"
|
||||
value={name}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,100 +0,0 @@
|
||||
import { Author } from "./Author";
|
||||
import { Title } from "./Title";
|
||||
import { Description } from "./Description";
|
||||
|
||||
export const Embed = ({ reminder }) => {
|
||||
return (
|
||||
<div class="discord-embed">
|
||||
<div class="embed-body">
|
||||
<button class="change-color button is-rounded is-small">
|
||||
<span class="is-sr-only">Choose embed color</span>
|
||||
<i class="fas fa-eye-dropper"></i>
|
||||
</button>
|
||||
<div class="a">
|
||||
<Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
|
||||
<Title title={reminder.embed_title}></Title>
|
||||
<br></br>
|
||||
<Description description={reminder.embed_description}></Description>
|
||||
<br></br>
|
||||
|
||||
<div class="embed-multifield-box">
|
||||
<div data-inlined="1" class="embed-field-box">
|
||||
<label class="is-sr-only" for="embedFieldTitle">
|
||||
Field Title
|
||||
</label>
|
||||
<div class="is-flex">
|
||||
<textarea
|
||||
class="discord-field-title field-input message-input autoresize"
|
||||
placeholder="Field Title..."
|
||||
rows={1}
|
||||
maxlength={256}
|
||||
name="embed_field_title[]"
|
||||
></textarea>
|
||||
<button class="button is-small inline-btn">
|
||||
<span class="is-sr-only">Toggle field inline</span>
|
||||
<i class="fas fa-arrows-h"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="is-sr-only" for="embedFieldValue">
|
||||
Field Value
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-field-value field-input message-input autoresize "
|
||||
placeholder="Field Value..."
|
||||
maxlength={1024}
|
||||
name="embed_field_value[]"
|
||||
rows={1}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b">
|
||||
<p class="image thumbnail customizable">
|
||||
<a>
|
||||
<img
|
||||
class="embed_thumbnail_url"
|
||||
src="/static/img/bg.webp"
|
||||
alt="Square thumbnail embedded image"
|
||||
></img>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="image is-400x300 customizable">
|
||||
<a>
|
||||
<img
|
||||
class="embed_image_url"
|
||||
src="/static/img/bg.webp"
|
||||
alt="Large embedded image"
|
||||
></img>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div class="embed-footer-box">
|
||||
<p class="image is-20x20 customizable">
|
||||
<a>
|
||||
<img
|
||||
class="is-rounded embed_footer_url"
|
||||
src="/static/img/bg.webp"
|
||||
alt="Footer profile-like image"
|
||||
></img>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<label class="is-sr-only" for="embedFooter">
|
||||
Embed Footer text
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-embed-footer message-input autoresize "
|
||||
placeholder="Embed Footer..."
|
||||
maxlength={2048}
|
||||
name="embed_footer"
|
||||
rows={1}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
export const Name = ({ value }) => (
|
||||
<div class="name-bar">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="label sr-only">Reminder Name</label>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Reminder Name"
|
||||
maxlength={100}
|
||||
value={value}
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -1,12 +0,0 @@
|
||||
export const Username = ({ value }) => (
|
||||
<div class="discord-message-header">
|
||||
<label class="is-sr-only">Username Override</label>
|
||||
<input
|
||||
class="discord-username message-input"
|
||||
placeholder="Username Override"
|
||||
maxlength={32}
|
||||
name="username"
|
||||
value={value}
|
||||
></input>
|
||||
</div>
|
||||
);
|
||||
@ -1,197 +0,0 @@
|
||||
import { fetchGuildChannels, fetchUserInfo, Reminder } from "../../api";
|
||||
import { useQueries } from "react-query";
|
||||
import { QueryKeys } from "../../consts";
|
||||
import { useParams } from "wouter";
|
||||
import { Name } from "./Name";
|
||||
import { Username } from "./Username";
|
||||
import { Content } from "./Content";
|
||||
import { ChannelSelector } from "./ChannelSelector";
|
||||
import { useState } from "preact/hooks";
|
||||
import { IntervalSelector } from "./IntervalSelector";
|
||||
import { Embed } from "./Embed";
|
||||
|
||||
type Props = {
|
||||
reminder: Reminder;
|
||||
};
|
||||
|
||||
export const EditReminder = ({ reminder }: Props) => {
|
||||
const { guild } = useParams();
|
||||
|
||||
const [
|
||||
{ isSuccess: channelsFetched, data: guildChannels },
|
||||
{ isSuccess: userFetched, data: userInfo },
|
||||
] = useQueries([
|
||||
{
|
||||
queryKey: [QueryKeys.GUILD_CHANNELS, guild],
|
||||
queryFn: () => fetchGuildChannels(guild),
|
||||
staleTime: 300,
|
||||
},
|
||||
{
|
||||
queryKey: [QueryKeys.USER_DATA],
|
||||
queryFn: fetchUserInfo,
|
||||
staleTime: Infinity,
|
||||
},
|
||||
]);
|
||||
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
if (!channelsFetched || !userFetched) {
|
||||
// todo
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const channelInfo = guildChannels.find((c) => c.id === reminder.channel);
|
||||
|
||||
return (
|
||||
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
|
||||
<div class="columns is-mobile column reminder-topbar">
|
||||
<div class="invert-collapses channel-bar">#{channelInfo.name}</div>
|
||||
<Name value={reminder.name}></Name>
|
||||
<div class="hide-button-bar">
|
||||
<button
|
||||
class="button hide-box"
|
||||
onClick={() => {
|
||||
setCollapsed(!collapsed);
|
||||
}}
|
||||
>
|
||||
<span class="is-sr-only">Hide reminder</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns reminder-settings">
|
||||
<div class="column discord-frame">
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-32x32 customizable">
|
||||
<a>
|
||||
<img
|
||||
class="is-rounded avatar"
|
||||
src="/static/img/bg.webp"
|
||||
alt="Image for discord avatar"
|
||||
></img>
|
||||
</a>
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<Username value={reminder.username}></Username>
|
||||
<Content value={reminder.content}></Content>
|
||||
<Embed reminder={reminder}></Embed>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="column settings">
|
||||
<div class="field channel-field">
|
||||
<div class="collapses">
|
||||
<label class="label" for="channelOption">
|
||||
Channel*
|
||||
</label>
|
||||
</div>
|
||||
<ChannelSelector channel={reminder.channel}></ChannelSelector>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="label collapses">
|
||||
Time*
|
||||
<input
|
||||
class="input"
|
||||
type="datetime-local"
|
||||
step="1"
|
||||
name="time"
|
||||
value={reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
|
||||
></input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapses split-controls">
|
||||
<div>
|
||||
<div class={!userInfo.patreon && "is-locked"}>
|
||||
<div class="patreon-invert foreground">
|
||||
Intervals available on{" "}
|
||||
<a href="https://patreon.com/jellywx">Patreon</a> or{" "}
|
||||
<a href="https://gitea.jellypro.xyz/jude/reminder-bot">
|
||||
self-hosting
|
||||
</a>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Interval{" "}
|
||||
<a class="foreground" href="/help/intervals">
|
||||
<i class="fas fa-question-circle"></i>
|
||||
</a>
|
||||
</label>
|
||||
<IntervalSelector
|
||||
months={reminder.interval_months}
|
||||
days={reminder.interval_days}
|
||||
seconds={reminder.interval_seconds}
|
||||
></IntervalSelector>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="label">
|
||||
Expiration
|
||||
<input
|
||||
class="input"
|
||||
type="datetime-local"
|
||||
step="1"
|
||||
name="expiration"
|
||||
value={
|
||||
reminder.expires !== null &&
|
||||
reminder.expires.toFormat(
|
||||
"yyyy-LL-dd'T'HH:mm:ss",
|
||||
)
|
||||
}
|
||||
></input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile tts-row">
|
||||
<div class="column has-text-centered">
|
||||
<div class="is-boxed">
|
||||
<label class="label">
|
||||
Enable TTS <input type="checkbox" name="tts"></input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column has-text-centered">
|
||||
<div class="file is-small is-boxed">
|
||||
<label class="file-label">
|
||||
<input
|
||||
class="file-input"
|
||||
type="file"
|
||||
name="attachment"
|
||||
></input>
|
||||
<span class="file-cta">
|
||||
<span class="file-label">Add Attachment</span>
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-row-edit">
|
||||
<button class="button is-success save-btn">
|
||||
<span>Save</span>{" "}
|
||||
<span class="icon">
|
||||
<i class="fas fa-save"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-warning">{reminder.enabled ? "Disable" : "Enable"}</button>
|
||||
<button class="button is-danger delete-reminder">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
25
src/components/Guild/GuildError.tsx
Normal file
25
src/components/Guild/GuildError.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
export const GuildError = () => {
|
||||
return (
|
||||
<div class="hero is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">We couldn't get this server's data</p>
|
||||
<p class="subtitle">
|
||||
Please check Reminder Bot is in the server, and has correct permissions.
|
||||
</p>
|
||||
<a
|
||||
class="button is-size-4 is-rounded is-success"
|
||||
href="https://invite.reminder-bot.com"
|
||||
>
|
||||
<p class="is-size-4">
|
||||
<span>Add to Server</span>{" "}
|
||||
<span class="icon">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</span>
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,22 +1,19 @@
|
||||
import { useParams } from "wouter";
|
||||
import { useQuery } from "react-query";
|
||||
import { fetchGuildReminders } from "../../api";
|
||||
import { QueryKeys } from "../../consts";
|
||||
import { EditReminder } from "../EditReminder";
|
||||
import { EditReminder } from "../Reminder/EditReminder";
|
||||
import { CreateReminder } from "../Reminder/CreateReminder";
|
||||
|
||||
export const GuildReminders = () => {
|
||||
const { guild } = useParams();
|
||||
|
||||
const { isSuccess, data } = useQuery({
|
||||
queryKey: [QueryKeys.GUILD_REMINDERS, guild],
|
||||
queryFn: () => fetchGuildReminders(guild),
|
||||
});
|
||||
const { isSuccess, data: guildReminders } = useQuery(fetchGuildReminders(guild));
|
||||
|
||||
return (
|
||||
<div style={{ margin: "0 12px 12px 12px" }}>
|
||||
<strong>Create Reminder</strong>
|
||||
<div id={"reminderCreator"}>
|
||||
<></>
|
||||
<CreateReminder></CreateReminder>
|
||||
</div>
|
||||
<br></br>
|
||||
<div class={"field"}>
|
||||
@ -59,7 +56,9 @@ export const GuildReminders = () => {
|
||||
|
||||
<div id={"guildReminders"}>
|
||||
{isSuccess &&
|
||||
data.map((reminder) => <EditReminder reminder={reminder}></EditReminder>)}
|
||||
guildReminders.map((reminder) => (
|
||||
<EditReminder reminder={reminder}></EditReminder>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
18
src/components/Guild/index.tsx
Normal file
18
src/components/Guild/index.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { useQuery } from "react-query";
|
||||
import { fetchGuildInfo } from "../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { GuildReminders } from "./GuildReminders";
|
||||
import { GuildError } from "./GuildError";
|
||||
|
||||
export const Guild = () => {
|
||||
const { guild } = useParams();
|
||||
const { isSuccess, data: guildInfo } = useQuery(fetchGuildInfo(guild));
|
||||
|
||||
if (!isSuccess) {
|
||||
return <></>;
|
||||
} else if (guildInfo.error) {
|
||||
return <GuildError />;
|
||||
} else {
|
||||
return <GuildReminders />;
|
||||
}
|
||||
};
|
||||
57
src/components/Modal/index.tsx
Normal file
57
src/components/Modal/index.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import { JSX } from "preact";
|
||||
|
||||
type Props = {
|
||||
setModalOpen: (open: boolean) => never;
|
||||
title: string;
|
||||
onSubmitText?: string;
|
||||
onSubmit?: () => void;
|
||||
children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
|
||||
};
|
||||
|
||||
export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => {
|
||||
return (
|
||||
<div class="modal is-active">
|
||||
<div
|
||||
class="modal-background"
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<label class="modal-card-title">{title}</label>
|
||||
<button
|
||||
class="delete close-modal"
|
||||
aria-label="close"
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
></button>
|
||||
</header>
|
||||
<section class="modal-card-body">{children}</section>
|
||||
{onSubmit && (
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-success" onInput={onSubmit}>
|
||||
{onSubmitText || "Save"}
|
||||
</button>
|
||||
<button
|
||||
class="button close-modal"
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</footer>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large close-modal"
|
||||
aria-label="close"
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
82
src/components/Reminder/ButtonRow/CreateButtonRow.tsx
Normal file
82
src/components/Reminder/ButtonRow/CreateButtonRow.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import { LoadTemplate } from "../LoadTemplate";
|
||||
import { useReminder } from "../ReminderContext";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { postGuildReminder } from "../../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { useState } from "preact/hooks";
|
||||
import { ICON_FLASH_TIME } from "../../../consts";
|
||||
import { useFlash } from "../../App/FlashContext";
|
||||
|
||||
export const CreateButtonRow = () => {
|
||||
const { guild } = useParams();
|
||||
const [reminder] = useReminder();
|
||||
|
||||
const [recentlyCreated, setRecentlyCreated] = useState(false);
|
||||
|
||||
const flash = useFlash();
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation({
|
||||
...postGuildReminder(guild),
|
||||
onSuccess: (data) => {
|
||||
if (data.error) {
|
||||
flash({
|
||||
message: data.error,
|
||||
type: "error",
|
||||
});
|
||||
} else {
|
||||
flash({
|
||||
message: "Reminder created",
|
||||
type: "success",
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["GUILD_REMINDERS", guild],
|
||||
});
|
||||
setRecentlyCreated(true);
|
||||
setTimeout(() => {
|
||||
setRecentlyCreated(false);
|
||||
}, ICON_FLASH_TIME);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="button-row">
|
||||
<div class="button-row-reminder">
|
||||
<button
|
||||
class="button is-success"
|
||||
onClick={() => {
|
||||
mutation.mutate(reminder);
|
||||
}}
|
||||
>
|
||||
<span>Create Reminder</span>{" "}
|
||||
{mutation.isLoading ? (
|
||||
<span class="icon">
|
||||
<i class="fas fa-spin fa-cog"></i>
|
||||
</span>
|
||||
) : recentlyCreated ? (
|
||||
<span class="icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
) : (
|
||||
<span class="icon">
|
||||
<i class="fas fa-sparkles"></i>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div class="button-row-template">
|
||||
<div>
|
||||
<button class="button is-success is-outlined">
|
||||
<span>Create Template</span>{" "}
|
||||
<span class="icon">
|
||||
<i class="fas fa-file-spreadsheet"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<LoadTemplate />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
74
src/components/Reminder/ButtonRow/DeleteButton.tsx
Normal file
74
src/components/Reminder/ButtonRow/DeleteButton.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { Modal } from "../../Modal";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { useReminder } from "../ReminderContext";
|
||||
import { deleteGuildReminder } from "../../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { useFlash } from "../../App/FlashContext";
|
||||
|
||||
export const DeleteButton = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
class="button is-danger delete-reminder"
|
||||
onClick={() => {
|
||||
setModalOpen(true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
{modalOpen && <DeleteModal setModalOpen={setModalOpen}></DeleteModal>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const DeleteModal = ({ setModalOpen }) => {
|
||||
const [reminder] = useReminder();
|
||||
const { guild } = useParams();
|
||||
|
||||
const flash = useFlash();
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation({
|
||||
...deleteGuildReminder(guild),
|
||||
onSuccess: () => {
|
||||
flash({
|
||||
message: "Reminder deleted",
|
||||
type: "success",
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["GUILD_REMINDERS", guild],
|
||||
});
|
||||
setModalOpen(false);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal setModalOpen={setModalOpen} title={"Delete Reminder"}>
|
||||
<>
|
||||
<p>This reminder will be permanently deleted. Are you sure?</p>
|
||||
<br></br>
|
||||
<div class="has-text-centered">
|
||||
<button
|
||||
class="button is-danger"
|
||||
onClick={() => {
|
||||
mutation.mutate(reminder);
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
class="button is-light close-modal"
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
69
src/components/Reminder/ButtonRow/EditButtonRow.tsx
Normal file
69
src/components/Reminder/ButtonRow/EditButtonRow.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { patchGuildReminder } from "../../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { ICON_FLASH_TIME } from "../../../consts";
|
||||
import { DeleteButton } from "./DeleteButton";
|
||||
import { useReminder } from "../ReminderContext";
|
||||
import { useFlash } from "../../App/FlashContext";
|
||||
|
||||
export const EditButtonRow = () => {
|
||||
const { guild } = useParams();
|
||||
const [reminder] = useReminder();
|
||||
|
||||
const [recentlySaved, setRecentlySaved] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation({
|
||||
...patchGuildReminder(guild),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["GUILD_REMINDERS", guild],
|
||||
});
|
||||
setRecentlySaved(true);
|
||||
setTimeout(() => {
|
||||
setRecentlySaved(false);
|
||||
}, ICON_FLASH_TIME);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="button-row-edit">
|
||||
<button
|
||||
class="button is-success save-btn"
|
||||
onClick={() => {
|
||||
mutation.mutate(reminder);
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
<span>Save</span>{" "}
|
||||
{mutation.isLoading ? (
|
||||
<span class="icon">
|
||||
<i class="fas fa-spin fa-cog"></i>
|
||||
</span>
|
||||
) : recentlySaved ? (
|
||||
<span class="icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
) : (
|
||||
<span class="icon">
|
||||
<i class="fas fa-save"></i>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
class="button is-warning"
|
||||
onClick={() => {
|
||||
mutation.mutate({
|
||||
...reminder,
|
||||
enabled: !reminder.enabled,
|
||||
});
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
{reminder.enabled ? "Disable" : "Enable"}
|
||||
</button>
|
||||
<DeleteButton />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
32
src/components/Reminder/ChannelSelector.tsx
Normal file
32
src/components/Reminder/ChannelSelector.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { useQuery } from "react-query";
|
||||
import { useParams } from "wouter";
|
||||
import { fetchGuildChannels } from "../../api";
|
||||
|
||||
export const ChannelSelector = ({ channel, setChannel }) => {
|
||||
const { guild } = useParams();
|
||||
const { isSuccess, data } = useQuery(fetchGuildChannels(guild));
|
||||
|
||||
return (
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
<select
|
||||
name="channel"
|
||||
class="channel-selector"
|
||||
onInput={(ev) => {
|
||||
setChannel(ev.currentTarget.value);
|
||||
}}
|
||||
>
|
||||
{isSuccess &&
|
||||
data.map((c) => (
|
||||
<option value={c.id} selected={c.id === channel}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-small is-left">
|
||||
<i class="fas fa-hashtag"></i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
25
src/components/Reminder/Content.tsx
Normal file
25
src/components/Reminder/Content.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { useReminder } from "./ReminderContext";
|
||||
|
||||
export const Content = () => {
|
||||
const [reminder, setReminder] = useReminder();
|
||||
|
||||
return (
|
||||
<>
|
||||
<label class="is-sr-only">Content</label>
|
||||
<textarea
|
||||
class="message-input autoresize discord-content"
|
||||
placeholder="Content..."
|
||||
maxlength={2000}
|
||||
name="content"
|
||||
rows={1}
|
||||
value={reminder.content}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
content: ev.currentTarget.value,
|
||||
}));
|
||||
}}
|
||||
></textarea>
|
||||
</>
|
||||
);
|
||||
};
|
||||
74
src/components/Reminder/CreateReminder.tsx
Normal file
74
src/components/Reminder/CreateReminder.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { fetchGuildChannels, Reminder } from "../../api";
|
||||
import { DateTime } from "luxon";
|
||||
import { CreateButtonRow } from "./ButtonRow/CreateButtonRow";
|
||||
import { TopBar } from "./TopBar";
|
||||
import { Message } from "./Message";
|
||||
import { Settings } from "./Settings";
|
||||
import { ReminderContext } from "./ReminderContext";
|
||||
import { useQuery } from "react-query";
|
||||
import { useParams } from "wouter";
|
||||
|
||||
function defaultReminder(): Reminder {
|
||||
return {
|
||||
attachment: null,
|
||||
attachment_name: null,
|
||||
avatar: null,
|
||||
channel: null,
|
||||
content: "",
|
||||
embed_author: "",
|
||||
embed_author_url: null,
|
||||
embed_color: 0,
|
||||
embed_description: "",
|
||||
embed_fields: [],
|
||||
embed_footer: "",
|
||||
embed_footer_url: null,
|
||||
embed_image_url: null,
|
||||
embed_thumbnail_url: null,
|
||||
embed_title: "",
|
||||
enabled: true,
|
||||
expires: null,
|
||||
interval_days: null,
|
||||
interval_months: null,
|
||||
interval_seconds: null,
|
||||
name: "",
|
||||
restartable: false,
|
||||
tts: false,
|
||||
uid: "",
|
||||
username: "",
|
||||
utc_time: DateTime.now(),
|
||||
};
|
||||
}
|
||||
|
||||
export const CreateReminder = () => {
|
||||
const { guild } = useParams();
|
||||
|
||||
const [reminder, setReminder] = useState(defaultReminder());
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
|
||||
|
||||
if (isSuccess && reminder.channel === null) {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
channel: reminder.channel || guildChannels[0].id,
|
||||
}));
|
||||
}
|
||||
|
||||
return (
|
||||
<ReminderContext.Provider value={[reminder, setReminder]}>
|
||||
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
|
||||
<TopBar
|
||||
toggleCollapsed={() => {
|
||||
setCollapsed(!collapsed);
|
||||
}}
|
||||
/>
|
||||
<div class="columns reminder-settings">
|
||||
<Message />
|
||||
<Settings />
|
||||
</div>
|
||||
<CreateButtonRow />
|
||||
</div>
|
||||
</ReminderContext.Provider>
|
||||
);
|
||||
};
|
||||
34
src/components/Reminder/EditReminder.tsx
Normal file
34
src/components/Reminder/EditReminder.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { Reminder } from "../../api";
|
||||
import { useState } from "preact/hooks";
|
||||
import { EditButtonRow } from "./ButtonRow/EditButtonRow";
|
||||
import { Message } from "./Message";
|
||||
import { Settings } from "./Settings";
|
||||
import { ReminderContext } from "./ReminderContext";
|
||||
import { TopBar } from "./TopBar";
|
||||
|
||||
type Props = {
|
||||
reminder: Reminder;
|
||||
};
|
||||
|
||||
export const EditReminder = ({ reminder: initialReminder }: Props) => {
|
||||
const [reminder, setReminder] = useState(initialReminder);
|
||||
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
return (
|
||||
<ReminderContext.Provider value={[reminder, setReminder]}>
|
||||
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
|
||||
<TopBar
|
||||
toggleCollapsed={() => {
|
||||
setCollapsed(!collapsed);
|
||||
}}
|
||||
/>
|
||||
<div class="columns reminder-settings">
|
||||
<Message />
|
||||
<Settings />
|
||||
</div>
|
||||
<EditButtonRow />
|
||||
</div>
|
||||
</ReminderContext.Provider>
|
||||
);
|
||||
};
|
||||
50
src/components/Reminder/Embed/Author.tsx
Normal file
50
src/components/Reminder/Embed/Author.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { ImagePicker } from "../ImagePicker";
|
||||
import { Reminder } from "../../../api";
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
icon: string;
|
||||
setReminder: (r: (reminder: Reminder) => Reminder) => void;
|
||||
};
|
||||
|
||||
export const Author = ({ name, icon, setReminder }: Props) => {
|
||||
return (
|
||||
<div class="embed-author-box">
|
||||
<div class="a">
|
||||
<p class="image is-24x24 customizable">
|
||||
<ImagePicker
|
||||
class="is-rounded embed_author_url"
|
||||
url={icon}
|
||||
alt="Image for embed author"
|
||||
setImage={(url) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
embed_author_url: url,
|
||||
}));
|
||||
}}
|
||||
></ImagePicker>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="b">
|
||||
<label class="is-sr-only" for="embedAuthor">
|
||||
Embed Author
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-embed-author message-input autoresize"
|
||||
placeholder="Embed Author..."
|
||||
rows={1}
|
||||
maxlength={256}
|
||||
name="embed_author"
|
||||
value={name}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
embed_author: ev.currentTarget.value,
|
||||
}));
|
||||
}}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
68
src/components/Reminder/Embed/Color.tsx
Normal file
68
src/components/Reminder/Embed/Color.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { Modal } from "../../Modal";
|
||||
import { Reminder } from "../../../api";
|
||||
|
||||
type Props = {
|
||||
color: string;
|
||||
setReminder: (r: (reminder: Reminder) => Reminder) => void;
|
||||
};
|
||||
|
||||
function colorToInt(hex: string) {
|
||||
return parseInt(hex.substring(1), 16);
|
||||
}
|
||||
|
||||
export const Color = ({ color, setReminder }: Props) => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{modalOpen && (
|
||||
<ColorModal
|
||||
color={color}
|
||||
setModalOpen={setModalOpen}
|
||||
setReminder={setReminder}
|
||||
></ColorModal>
|
||||
)}
|
||||
<button
|
||||
class="change-color button is-rounded is-small"
|
||||
onClick={() => {
|
||||
setModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<span class="is-sr-only">Choose embed color</span>
|
||||
<i class="fas fa-eye-dropper"></i>
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const ColorModal = ({ setModalOpen, color, setReminder }) => {
|
||||
return (
|
||||
<Modal setModalOpen={setModalOpen} title={"Select Color"}>
|
||||
<div class="colorpicker-container">
|
||||
<HexColorPicker
|
||||
color={color}
|
||||
onInput={(color) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
embed_color: colorToInt(color),
|
||||
}));
|
||||
}}
|
||||
></HexColorPicker>
|
||||
</div>
|
||||
<br></br>
|
||||
<input
|
||||
class="input"
|
||||
id="colorInput"
|
||||
value={color}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
embed_color: colorToInt(ev.currentTarget.value),
|
||||
}));
|
||||
}}
|
||||
></input>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
export const Description = ({ description }) => (
|
||||
export const Description = ({ description, onInput }) => (
|
||||
<>
|
||||
<label class="is-sr-only" for="embedDescription">
|
||||
Embed Description
|
||||
@ -10,6 +10,9 @@ export const Description = ({ description }) => (
|
||||
name="embed_description"
|
||||
rows={1}
|
||||
value={description}
|
||||
onInput={(ev) => {
|
||||
onInput(ev.currentTarget.value);
|
||||
}}
|
||||
></textarea>
|
||||
</>
|
||||
);
|
||||
43
src/components/Reminder/Embed/Footer.tsx
Normal file
43
src/components/Reminder/Embed/Footer.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { Reminder } from "../../../api";
|
||||
import { ImagePicker } from "../ImagePicker";
|
||||
|
||||
type Props = {
|
||||
footer: string;
|
||||
icon: string;
|
||||
setReminder: (r: (reminder: Reminder) => Reminder) => void;
|
||||
};
|
||||
|
||||
export const Footer = ({ footer, icon, setReminder }: Props) => (
|
||||
<div class="embed-footer-box">
|
||||
<p class="image is-20x20 customizable">
|
||||
<ImagePicker
|
||||
class="is-rounded embed_footer_url"
|
||||
url={icon}
|
||||
alt="Footer profile-like image"
|
||||
setImage={(url: string) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
embed_footer_url: url,
|
||||
}));
|
||||
}}
|
||||
></ImagePicker>
|
||||
</p>
|
||||
<label class="is-sr-only" for="embedFooter">
|
||||
Embed Footer text
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-embed-footer message-input autoresize "
|
||||
placeholder="Embed Footer..."
|
||||
maxlength={2048}
|
||||
name="embed_footer"
|
||||
rows={1}
|
||||
value={footer}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
embed_footer: ev.currentTarget.value,
|
||||
}));
|
||||
}}
|
||||
></textarea>
|
||||
</div>
|
||||
);
|
||||
@ -1,4 +1,4 @@
|
||||
export const Title = ({ title }) => (
|
||||
export const Title = ({ title, onInput }) => (
|
||||
<>
|
||||
<label class="is-sr-only" for="embedTitle">
|
||||
Embed Title
|
||||
@ -10,6 +10,9 @@ export const Title = ({ title }) => (
|
||||
rows={1}
|
||||
name="embed_title"
|
||||
value={title}
|
||||
onInput={(ev) => {
|
||||
onInput(ev.currentTarget.value);
|
||||
}}
|
||||
></textarea>
|
||||
</>
|
||||
);
|
||||
119
src/components/Reminder/Embed/index.tsx
Normal file
119
src/components/Reminder/Embed/index.tsx
Normal file
@ -0,0 +1,119 @@
|
||||
import { Author } from "./Author";
|
||||
import { Title } from "./Title";
|
||||
import { Description } from "./Description";
|
||||
import { Footer } from "./Footer";
|
||||
import { Color } from "./Color";
|
||||
import { Reminder } from "../../../api";
|
||||
import { ImagePicker } from "../ImagePicker";
|
||||
import { useReminder } from "../ReminderContext";
|
||||
|
||||
function intToColor(num: number) {
|
||||
return `#${num.toString(16).padStart(6, "0")}`;
|
||||
}
|
||||
|
||||
const DEFAULT_COLOR = 9418359;
|
||||
|
||||
export const Embed = () => {
|
||||
const [reminder, setReminder] = useReminder();
|
||||
|
||||
return (
|
||||
<div
|
||||
class="discord-embed"
|
||||
style={{
|
||||
borderLeftColor: intToColor(reminder.embed_color || DEFAULT_COLOR),
|
||||
}}
|
||||
>
|
||||
<div class="embed-body">
|
||||
<Color
|
||||
color={intToColor(reminder.embed_color || DEFAULT_COLOR)}
|
||||
setReminder={setReminder}
|
||||
></Color>
|
||||
<div class="a">
|
||||
<Author
|
||||
name={reminder.embed_author}
|
||||
icon={reminder.embed_author_url}
|
||||
setReminder={setReminder}
|
||||
></Author>
|
||||
<Title
|
||||
title={reminder.embed_title}
|
||||
onInput={(title: string) =>
|
||||
setReminder((reminder: Reminder) => ({
|
||||
...reminder,
|
||||
embed_title: title,
|
||||
}))
|
||||
}
|
||||
></Title>
|
||||
<br></br>
|
||||
<Description
|
||||
description={reminder.embed_description}
|
||||
onInput={(description: string) =>
|
||||
setReminder((reminder: Reminder) => ({
|
||||
...reminder,
|
||||
embed_description: description,
|
||||
}))
|
||||
}
|
||||
></Description>
|
||||
<br></br>
|
||||
|
||||
<div class="embed-multifield-box">
|
||||
<div data-inlined="1" class="embed-field-box">
|
||||
<label class="is-sr-only" for="embedFieldTitle">
|
||||
Field Title
|
||||
</label>
|
||||
<div class="is-flex">
|
||||
<textarea
|
||||
class="discord-field-title field-input message-input autoresize"
|
||||
placeholder="Field Title..."
|
||||
rows={1}
|
||||
maxlength={256}
|
||||
name="embed_field_title[]"
|
||||
></textarea>
|
||||
<button class="button is-small inline-btn">
|
||||
<span class="is-sr-only">Toggle field inline</span>
|
||||
<i class="fas fa-arrows-h"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="is-sr-only" for="embedFieldValue">
|
||||
Field Value
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-field-value field-input message-input autoresize "
|
||||
placeholder="Field Value..."
|
||||
maxlength={1024}
|
||||
name="embed_field_value[]"
|
||||
rows={1}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b">
|
||||
<p class="image thumbnail customizable">
|
||||
<ImagePicker
|
||||
class="embed_thumbnail_url"
|
||||
url={reminder.embed_thumbnail_url}
|
||||
alt="Square thumbnail embedded image"
|
||||
setImage={() => {}}
|
||||
></ImagePicker>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="image is-400x300 customizable">
|
||||
<ImagePicker
|
||||
class="embed_image_url"
|
||||
url={reminder.embed_image_url}
|
||||
alt="Large embedded image"
|
||||
setImage={() => {}}
|
||||
></ImagePicker>
|
||||
</p>
|
||||
|
||||
<Footer
|
||||
footer={reminder.embed_footer}
|
||||
icon={reminder.embed_footer_url}
|
||||
setReminder={setReminder}
|
||||
></Footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
49
src/components/Reminder/ImagePicker.tsx
Normal file
49
src/components/Reminder/ImagePicker.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { Modal } from "../Modal";
|
||||
import { useState } from "preact/hooks";
|
||||
|
||||
export const ImagePicker = ({ alt, url, setImage, ...props }) => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
setModalOpen(true);
|
||||
}}
|
||||
role={"button"}
|
||||
>
|
||||
<img {...props} src={url || "/static/img/bg.webp"} alt={alt}></img>
|
||||
</a>
|
||||
{modalOpen && (
|
||||
<ImagePickerModal
|
||||
setModalOpen={setModalOpen}
|
||||
setImage={setImage}
|
||||
></ImagePickerModal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const ImagePickerModal = ({ setModalOpen, setImage }) => {
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
return (
|
||||
<Modal
|
||||
setModalOpen={setModalOpen}
|
||||
title={"Enter Image URL"}
|
||||
onSubmit={() => {
|
||||
setImage(value);
|
||||
}}
|
||||
onSubmitText={"Save"}
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
id="urlInput"
|
||||
placeholder="Image URL..."
|
||||
onInput={(ev) => {
|
||||
setValue(ev.currentTarget.value);
|
||||
}}
|
||||
></input>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@ -1,4 +1,5 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { useReminder } from "./ReminderContext";
|
||||
|
||||
function divmod(a: number, b: number) {
|
||||
return [Math.floor(a / b), a % b];
|
||||
@ -13,16 +14,37 @@ function secondsToHMS(seconds: number) {
|
||||
return [hours, minutes, seconds];
|
||||
}
|
||||
|
||||
export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: secondsProp }) => {
|
||||
export const IntervalSelector = ({
|
||||
months: monthsProp,
|
||||
days: daysProp,
|
||||
seconds: secondsProp,
|
||||
setInterval,
|
||||
clearInterval,
|
||||
}) => {
|
||||
const [months, setMonths] = useState(monthsProp);
|
||||
const [days, setDays] = useState(daysProp);
|
||||
const [seconds, setSeconds] = useState(secondsProp);
|
||||
|
||||
let [hours, minutes, secondsRem] = [0, 0, 0];
|
||||
if (seconds !== null) {
|
||||
[hours, minutes, secondsRem] = secondsToHMS(seconds);
|
||||
let [_hours, _minutes, _seconds] = [0, 0, 0];
|
||||
if (secondsProp !== null) {
|
||||
[_hours, _minutes, _seconds] = secondsToHMS(secondsProp);
|
||||
}
|
||||
|
||||
const [seconds, setSeconds] = useState(_seconds);
|
||||
const [minutes, setMinutes] = useState(_minutes);
|
||||
const [hours, setHours] = useState(_hours);
|
||||
|
||||
useEffect(() => {
|
||||
if (seconds || minutes || hours || days || months) {
|
||||
setInterval({
|
||||
seconds: (seconds || 0) + (minutes || 0) * 60 + (hours || 0) * 3600,
|
||||
days: days || 0,
|
||||
months: months || 0,
|
||||
});
|
||||
} else {
|
||||
clearInterval();
|
||||
}
|
||||
}, [seconds, minutes, hours, days, months]);
|
||||
|
||||
return (
|
||||
<div class="control intervalSelector">
|
||||
<div class="input interval-group">
|
||||
@ -38,6 +60,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
|
||||
maxlength={2}
|
||||
placeholder=""
|
||||
value={months || ""}
|
||||
onInput={(ev) => {
|
||||
setMonths(parseInt(ev.currentTarget.value));
|
||||
}}
|
||||
></input>{" "}
|
||||
<span class="half-rem"></span> months, <span class="half-rem"></span>
|
||||
</label>
|
||||
@ -51,6 +76,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
|
||||
maxlength={4}
|
||||
placeholder=""
|
||||
value={days || ""}
|
||||
onInput={(ev) => {
|
||||
setDays(parseInt(ev.currentTarget.value));
|
||||
}}
|
||||
></input>{" "}
|
||||
<span class="half-rem"></span> days, <span class="half-rem"></span>
|
||||
</label>
|
||||
@ -66,6 +94,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
|
||||
maxlength={2}
|
||||
placeholder="HH"
|
||||
value={hours || ""}
|
||||
onInput={(ev) => {
|
||||
setHours(parseInt(ev.currentTarget.value));
|
||||
}}
|
||||
></input>
|
||||
:
|
||||
</label>
|
||||
@ -79,6 +110,9 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
|
||||
maxlength={2}
|
||||
placeholder="MM"
|
||||
value={minutes || ""}
|
||||
onInput={(ev) => {
|
||||
setMinutes(parseInt(ev.currentTarget.value));
|
||||
}}
|
||||
></input>
|
||||
:
|
||||
</label>
|
||||
@ -91,7 +125,10 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
|
||||
name="interval_seconds"
|
||||
maxlength={2}
|
||||
placeholder="SS"
|
||||
value={secondsRem || ""}
|
||||
value={seconds || ""}
|
||||
onInput={(ev) => {
|
||||
setSeconds(parseInt(ev.currentTarget.value));
|
||||
}}
|
||||
></input>
|
||||
</label>
|
||||
</span>
|
||||
@ -102,6 +139,8 @@ export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds:
|
||||
setMonths(0);
|
||||
setDays(0);
|
||||
setSeconds(0);
|
||||
setMinutes(0);
|
||||
setHours(0);
|
||||
}}
|
||||
>
|
||||
<span class="is-sr-only">Clear interval</span>
|
||||
77
src/components/Reminder/LoadTemplate.tsx
Normal file
77
src/components/Reminder/LoadTemplate.tsx
Normal file
@ -0,0 +1,77 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { Modal } from "../Modal";
|
||||
import { useQuery } from "react-query";
|
||||
import { fetchGuildTemplates } from "../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { useReminder } from "./ReminderContext";
|
||||
|
||||
export const LoadTemplate = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
class="button is-outlined show-modal is-pulled-right"
|
||||
onClick={() => {
|
||||
setModalOpen(true);
|
||||
}}
|
||||
>
|
||||
Load Template
|
||||
</button>
|
||||
{modalOpen && <LoadTemplateModal setModalOpen={setModalOpen}></LoadTemplateModal>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LoadTemplateModal = ({ setModalOpen }) => {
|
||||
const { guild } = useParams();
|
||||
const [reminder, setReminder] = useReminder();
|
||||
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
|
||||
|
||||
const [selected, setSelected] = useState(null);
|
||||
|
||||
return (
|
||||
<Modal setModalOpen={setModalOpen} title={"Load Template"}>
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-fullwidth">
|
||||
<select
|
||||
id="templateSelect"
|
||||
onChange={(ev) => {
|
||||
setSelected(ev.currentTarget.value);
|
||||
}}
|
||||
>
|
||||
<option disabled={true} selected={true}>
|
||||
Choose template...
|
||||
</option>
|
||||
{isSuccess &&
|
||||
templates.map((template) => (
|
||||
<option value={template.id}>{template.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-small is-left">
|
||||
<i class="fas fa-file-spreadsheet"></i>
|
||||
</div>
|
||||
</div>
|
||||
<br></br>
|
||||
<div class="has-text-centered">
|
||||
<button
|
||||
class="button is-success close-modal"
|
||||
id="load-template"
|
||||
onClick={() => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
// todo this probably needs to exclude some things
|
||||
...templates.find((template) => template.id === selected),
|
||||
}));
|
||||
}}
|
||||
>
|
||||
Load Template
|
||||
</button>
|
||||
<button class="button is-danger" id="delete-template">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
38
src/components/Reminder/Message.tsx
Normal file
38
src/components/Reminder/Message.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { ImagePicker } from "./ImagePicker";
|
||||
import { Username } from "./Username";
|
||||
import { Content } from "./Content";
|
||||
import { Embed } from "./Embed";
|
||||
import { useReminder } from "./ReminderContext";
|
||||
|
||||
export const Message = () => {
|
||||
const [reminder, setReminder] = useReminder();
|
||||
|
||||
return (
|
||||
<div class="column discord-frame">
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-32x32 customizable">
|
||||
<ImagePicker
|
||||
class="is-rounded avatar"
|
||||
url={reminder.avatar}
|
||||
alt="Image for discord avatar"
|
||||
setImage={(url: string) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
avatar: url,
|
||||
}));
|
||||
}}
|
||||
></ImagePicker>
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<Username />
|
||||
<Content />
|
||||
<Embed />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
29
src/components/Reminder/Name.tsx
Normal file
29
src/components/Reminder/Name.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { useReminder } from "./ReminderContext";
|
||||
|
||||
export const Name = () => {
|
||||
const [reminder, setReminder] = useReminder();
|
||||
|
||||
return (
|
||||
<div class="name-bar">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="label sr-only">Reminder Name</label>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Reminder Name"
|
||||
maxlength={100}
|
||||
value={reminder.name}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
name: ev.currentTarget.value,
|
||||
}));
|
||||
}}
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
9
src/components/Reminder/ReminderContext.tsx
Normal file
9
src/components/Reminder/ReminderContext.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import { createContext } from "preact";
|
||||
import { useContext } from "preact/compat";
|
||||
import { Reminder } from "../../api";
|
||||
|
||||
export const ReminderContext = createContext<
|
||||
[Reminder, (r: (reminder: Reminder) => Reminder) => void]
|
||||
>([null, () => {}]);
|
||||
|
||||
export const useReminder = () => useContext(ReminderContext);
|
||||
140
src/components/Reminder/Settings.tsx
Normal file
140
src/components/Reminder/Settings.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
import { ChannelSelector } from "./ChannelSelector";
|
||||
import { DateTime } from "luxon";
|
||||
import { IntervalSelector } from "./IntervalSelector";
|
||||
import { useQuery } from "react-query";
|
||||
import { fetchUserInfo } from "../../api";
|
||||
import { useReminder } from "./ReminderContext";
|
||||
|
||||
export const Settings = () => {
|
||||
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
|
||||
|
||||
const [reminder, setReminder] = useReminder();
|
||||
|
||||
if (!userFetched) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="column settings">
|
||||
<div class="field channel-field">
|
||||
<div class="collapses">
|
||||
<label class="label" for="channelOption">
|
||||
Channel*
|
||||
</label>
|
||||
</div>
|
||||
<ChannelSelector
|
||||
channel={reminder.channel}
|
||||
setChannel={(channel: string) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
channel: channel,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="label collapses">
|
||||
Time*
|
||||
<input
|
||||
class="input"
|
||||
type="datetime-local"
|
||||
step="1"
|
||||
name="time"
|
||||
value={reminder.utc_time.toLocal().toFormat("yyyy-LL-dd'T'HH:mm:ss")}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
utc_time: DateTime.fromISO(ev.currentTarget.value).toUTC(),
|
||||
}));
|
||||
}}
|
||||
></input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapses split-controls">
|
||||
<div>
|
||||
<div class={userInfo.patreon ? "patreon-only" : "patreon-only is-locked"}>
|
||||
<div class="patreon-invert foreground">
|
||||
Intervals available on <a href="https://patreon.com/jellywx">Patreon</a>{" "}
|
||||
or{" "}
|
||||
<a href="https://gitea.jellypro.xyz/jude/reminder-bot">self-hosting</a>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Interval{" "}
|
||||
<a class="foreground" href="/help/intervals">
|
||||
<i class="fas fa-question-circle"></i>
|
||||
</a>
|
||||
</label>
|
||||
<IntervalSelector
|
||||
months={reminder.interval_months}
|
||||
days={reminder.interval_days}
|
||||
seconds={reminder.interval_seconds}
|
||||
setInterval={({ seconds, days, months }) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
interval_months: months,
|
||||
interval_days: days,
|
||||
interval_seconds: seconds,
|
||||
}));
|
||||
}}
|
||||
clearInterval={() => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
interval_months: null,
|
||||
interval_days: null,
|
||||
interval_seconds: null,
|
||||
}));
|
||||
}}
|
||||
></IntervalSelector>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="label">
|
||||
Expiration
|
||||
<input
|
||||
class="input"
|
||||
type="datetime-local"
|
||||
step="1"
|
||||
name="expiration"
|
||||
value={
|
||||
reminder.expires !== null &&
|
||||
reminder.expires.toFormat("yyyy-LL-dd'T'HH:mm:ss")
|
||||
}
|
||||
></input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile tts-row">
|
||||
<div class="column has-text-centered">
|
||||
<div class="is-boxed">
|
||||
<label class="label">
|
||||
Enable TTS <input type="checkbox" name="tts"></input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column has-text-centered">
|
||||
<div class="file is-small is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="attachment"></input>
|
||||
<span class="file-cta">
|
||||
<span class="file-label">Add Attachment</span>
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
30
src/components/Reminder/TopBar.tsx
Normal file
30
src/components/Reminder/TopBar.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { useReminder } from "./ReminderContext";
|
||||
import { Name } from "./Name";
|
||||
import { fetchGuildChannels, Reminder } from "../../api";
|
||||
import { useQuery } from "react-query";
|
||||
import { useParams } from "wouter";
|
||||
|
||||
export const TopBar = ({ toggleCollapsed }) => {
|
||||
const { guild } = useParams();
|
||||
const [reminder] = useReminder();
|
||||
|
||||
const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
|
||||
|
||||
const channelName = (reminder: Reminder) => {
|
||||
const channel = guildChannels.find((c) => c.id === reminder.channel);
|
||||
return channel === undefined ? "" : channel.name;
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="columns is-mobile column reminder-topbar">
|
||||
{isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
|
||||
<Name />
|
||||
<div class="hide-button-bar">
|
||||
<button class="button hide-box" onClick={toggleCollapsed}>
|
||||
<span class="is-sr-only">Hide reminder</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
24
src/components/Reminder/Username.tsx
Normal file
24
src/components/Reminder/Username.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { useReminder } from "./ReminderContext";
|
||||
|
||||
export const Username = () => {
|
||||
const [reminder, setReminder] = useReminder();
|
||||
|
||||
return (
|
||||
<div class="discord-message-header">
|
||||
<label class="is-sr-only">Username Override</label>
|
||||
<input
|
||||
class="discord-username message-input"
|
||||
placeholder="Username Override"
|
||||
maxlength={32}
|
||||
name="username"
|
||||
value={reminder.username}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
username: ev.currentTarget.value,
|
||||
}));
|
||||
}}
|
||||
></input>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -5,7 +5,8 @@ import { Brand } from "./Brand";
|
||||
import { Wave } from "./Wave";
|
||||
import { GuildEntry } from "./GuildEntry";
|
||||
import { fetchUserGuilds, GuildInfo } from "../../api";
|
||||
import { QueryKeys } from "../../consts";
|
||||
import { useState } from "preact/hooks";
|
||||
import { TimezonePicker } from "../TimezonePicker";
|
||||
|
||||
type ContentProps = {
|
||||
guilds: GuildInfo[];
|
||||
@ -33,12 +34,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
|
||||
</span>{" "}
|
||||
Import/Export
|
||||
</a>
|
||||
<a class="show-modal" data-modal="chooseTimezoneModal">
|
||||
<span class="icon">
|
||||
<i class="fas fa-map-marked"></i>
|
||||
</span>{" "}
|
||||
Timezone
|
||||
</a>
|
||||
<TimezonePicker />
|
||||
<a href="/login/discord/logout">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sign-out"></i>
|
||||
@ -60,11 +56,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
|
||||
};
|
||||
|
||||
export const Sidebar = () => {
|
||||
const { status, data } = useQuery({
|
||||
queryKey: [QueryKeys.USER_GUILDS],
|
||||
queryFn: fetchUserGuilds,
|
||||
staleTime: Infinity,
|
||||
});
|
||||
const { status, data } = useQuery(fetchUserGuilds());
|
||||
|
||||
let content = <SidebarContent guilds={[]}></SidebarContent>;
|
||||
if (status === "success") {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { DateTime } from "luxon";
|
||||
import { useQuery } from "react-query";
|
||||
import { QueryKeys } from "../../consts";
|
||||
import { fetchUserInfo } from "../../api";
|
||||
import { Modal } from "../Modal";
|
||||
import { useState } from "preact/hooks";
|
||||
|
||||
type DisplayProps = {
|
||||
timezone: string;
|
||||
@ -27,30 +28,35 @@ const TimezoneDisplay = ({ timezone }: DisplayProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
const TimezonePicker = () => {
|
||||
const browserTimezone = DateTime.now().zone.name;
|
||||
|
||||
const { isLoading, isError, data } = useQuery({
|
||||
queryKey: QueryKeys.USER_DATA,
|
||||
queryFn: fetchUserInfo,
|
||||
});
|
||||
export const TimezonePicker = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div class="modal" id="chooseTimezoneModal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<label class="modal-card-title" for="urlInput">
|
||||
Update Timezone{" "}
|
||||
<a href="/help/timezone">
|
||||
<span>
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
<>
|
||||
<a
|
||||
class="show-modal"
|
||||
data-modal="chooseTimezoneModal"
|
||||
onClick={() => {
|
||||
setModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-map-marked"></i>
|
||||
</span>{" "}
|
||||
Timezone
|
||||
</a>
|
||||
</label>
|
||||
<button class="delete close-modal" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
{modalOpen && <TimezoneModal setModalOpen={setModalOpen} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const TimezoneModal = ({ setModalOpen }) => {
|
||||
const browserTimezone = DateTime.now().zone.name;
|
||||
|
||||
const { isLoading, isError, data } = useQuery(fetchUserInfo());
|
||||
|
||||
return (
|
||||
<Modal title={"Timezone"} setModalOpen={setModalOpen}>
|
||||
<p>
|
||||
Your configured timezone is:{" "}
|
||||
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
|
||||
@ -65,14 +71,11 @@ const TimezonePicker = () => {
|
||||
{isLoading ? (
|
||||
<i className="fas fa-cog fa-spin"></i>
|
||||
) : (
|
||||
<TimezoneDisplay
|
||||
timezone={data.timezone || "UTC"}
|
||||
></TimezoneDisplay>
|
||||
<TimezoneDisplay timezone={data.timezone || "UTC"}></TimezoneDisplay>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<br></br>
|
||||
<div class="has-text-centered">
|
||||
<button class="button is-success close-modal" id="set-browser-timezone">
|
||||
@ -91,9 +94,6 @@ const TimezonePicker = () => {
|
||||
Set Bot Timezone
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<button class="modal-close is-large close-modal" aria-label="close"></button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,2 @@
|
||||
export enum QueryKeys {
|
||||
USER_DATA = "userData",
|
||||
USER_GUILDS = "userGuilds",
|
||||
GUILD_REMINDERS = "guildReminders",
|
||||
GUILD_CHANNELS = "guildChannels",
|
||||
}
|
||||
export const ICON_FLASH_TIME = 2_500;
|
||||
export const MESSAGE_FLASH_TIME = 5_000;
|
||||
|
||||
@ -7,5 +7,6 @@ export default defineConfig({
|
||||
build: {
|
||||
assetsDir: "static/assets",
|
||||
sourcemap: true,
|
||||
copyPublicDir: false,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user