update public folder,
This commit is contained in:
louiscklaw
@@ -3,5 +3,28 @@
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 100
|
||||
}
|
||||
"printWidth": 100,
|
||||
"overrides": [
|
||||
{
|
||||
"files": "src/App.tsx",
|
||||
"options": {
|
||||
"printWidth": 160
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": "src/routes/*",
|
||||
"options": {
|
||||
"printWidth": 160
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"*.html",
|
||||
"legacy/**/*.js"
|
||||
],
|
||||
"options": {
|
||||
"tabWidth": 4
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"@hookform/resolvers": "^4.1.3",
|
||||
"@ionic/react": "^8.5.0",
|
||||
"@ionic/react-router": "^8.5.0",
|
||||
"@ionic/storage": "^4.0.0",
|
||||
"@mdx-js/react": "^3.1.0",
|
||||
"@react-hook/window-size": "^3.1.1",
|
||||
"@types/leaflet": "^1.9.17",
|
||||
@@ -29,10 +30,12 @@
|
||||
"pigeon-maps": "^0.22.1",
|
||||
"pullstate": "^1",
|
||||
"react": "19.0.0",
|
||||
"react-canvas-draw": "^1.2.1",
|
||||
"react-color": "^2.19.3",
|
||||
"react-confetti": "^6.4.0",
|
||||
"react-dom": "19.0.0",
|
||||
"react-hook-form": "^7.55.0",
|
||||
"react-iconly": "^2.2.10",
|
||||
"react-leaflet": "^5.0.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-qr-code": "^2.0.15",
|
||||
|
||||
BIN
03_source/mobile/public/assets/DemoReactAddToCart/camera.jpeg
Normal file
BIN
03_source/mobile/public/assets/DemoReactAddToCart/camera.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 930 B |
BIN
03_source/mobile/public/assets/DemoReactAddToCart/icon/icon.png
Normal file
BIN
03_source/mobile/public/assets/DemoReactAddToCart/icon/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
03_source/mobile/public/assets/DemoReactAddToCart/macbook.jpeg
Normal file
BIN
03_source/mobile/public/assets/DemoReactAddToCart/macbook.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
03_source/mobile/public/assets/DemoReactAddToCart/tv.jpeg
Normal file
BIN
03_source/mobile/public/assets/DemoReactAddToCart/tv.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
03_source/mobile/public/assets/DemoReactLogin/icon/favicon.png
Normal file
BIN
03_source/mobile/public/assets/DemoReactLogin/icon/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 930 B |
BIN
03_source/mobile/public/assets/DemoReactLogin/icon/icon.png
Normal file
BIN
03_source/mobile/public/assets/DemoReactLogin/icon/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
03_source/mobile/public/assets/DemoReactLogin/login2.jpeg
Normal file
BIN
03_source/mobile/public/assets/DemoReactLogin/login2.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
1
03_source/mobile/public/assets/DemoReactLogin/shapes.svg
Normal file
1
03_source/mobile/public/assets/DemoReactLogin/shapes.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 930 B |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "blue",
|
||||
"tab_bar_background_color": "blue",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "",
|
||||
"light_color": "",
|
||||
|
||||
"main_color_tint": "",
|
||||
"main_color_shade": "",
|
||||
|
||||
"light_color_tint": "",
|
||||
"light_color_shade": ""
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#5f361e",
|
||||
"tab_bar_background_color": "#5f361e",
|
||||
"toolbar_color": "#d1bfb5",
|
||||
"tab_bar_color": "#886551",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "#5f361e",
|
||||
"light_color": "#886551",
|
||||
|
||||
"main_color_tint": "#855a41",
|
||||
"main_color_shade": "#57331e",
|
||||
|
||||
"light_color_tint": "#9c7d6b",
|
||||
"light_color_shade": "#61412f"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 474 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#c4b0c4",
|
||||
"tab_bar_background_color": "#c4b0c4",
|
||||
"toolbar_color": "#5c4153",
|
||||
"tab_bar_color": "#917788",
|
||||
"tab_bar_activated_color": "#5c4153",
|
||||
|
||||
"main_color": "#5c4153",
|
||||
"light_color": "#917788",
|
||||
|
||||
"main_color_tint": "#6b5463",
|
||||
"main_color_shade": "#4d3545",
|
||||
|
||||
"light_color_tint": "#a893a1",
|
||||
"light_color_shade": "#74606d"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#c93608",
|
||||
"tab_bar_background_color": "#c93608",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "#852506",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "#c93608",
|
||||
"light_color": "#c95834",
|
||||
|
||||
"main_color_tint": "#aa614a",
|
||||
"main_color_shade": "#692611",
|
||||
|
||||
"light_color_tint": "#d67151",
|
||||
"light_color_shade": "#a85439"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "green",
|
||||
"tab_bar_background_color": "green",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "",
|
||||
"light_color": "",
|
||||
|
||||
"main_color_tint": "",
|
||||
"main_color_shade": "",
|
||||
|
||||
"light_color_tint": "",
|
||||
"light_color_shade": ""
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#336b36",
|
||||
"tab_bar_background_color": "#336b36",
|
||||
"toolbar_color": "white",
|
||||
"tab_bar_color": "#1c421d",
|
||||
"tab_bar_activated_color": "white",
|
||||
|
||||
"main_color": "#336b36",
|
||||
"light_color": "#517953",
|
||||
|
||||
"main_color_tint": "#497a4b",
|
||||
"main_color_shade": "#305832",
|
||||
|
||||
"light_color_tint": "#738574",
|
||||
"light_color_shade": "#485849"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#7baec7",
|
||||
"tab_bar_background_color": "#7baec7",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "#49758b",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "#7baec7",
|
||||
"light_color": "#90bbcf",
|
||||
|
||||
"main_color_tint": "#96c0d5",
|
||||
"main_color_shade": "#6b93a7",
|
||||
|
||||
"light_color_tint": "#c3e2f1",
|
||||
"light_color_shade": "#89aec0"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#fd8f38",
|
||||
"tab_bar_background_color": "#fd8f38",
|
||||
"toolbar_color": "#815208",
|
||||
"tab_bar_color": "#ffb67c",
|
||||
"tab_bar_activated_color": "#815208",
|
||||
|
||||
"main_color": "#e49200",
|
||||
"light_color": "#ffb67c",
|
||||
|
||||
"main_color_tint": "#e6ae4b",
|
||||
"main_color_shade": "#b4780c",
|
||||
|
||||
"light_color_tint": "#fad4b6",
|
||||
"light_color_shade": "#ff9c4e"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "red",
|
||||
"tab_bar_background_color": "red",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "",
|
||||
"light_color": "",
|
||||
|
||||
"main_color_tint": "",
|
||||
"main_color_shade": "",
|
||||
|
||||
"light_color_tint": "",
|
||||
"light_color_shade": ""
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "blue",
|
||||
"tab_bar_background_color": "blue",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "",
|
||||
"light_color": "",
|
||||
|
||||
"main_color_tint": "",
|
||||
"main_color_shade": "",
|
||||
|
||||
"light_color_tint": "",
|
||||
"light_color_shade": ""
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#5f361e",
|
||||
"tab_bar_background_color": "#5f361e",
|
||||
"toolbar_color": "#d1bfb5",
|
||||
"tab_bar_color": "#886551",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "#5f361e",
|
||||
"light_color": "#886551",
|
||||
|
||||
"main_color_tint": "#855a41",
|
||||
"main_color_shade": "#57331e",
|
||||
|
||||
"light_color_tint": "#9c7d6b",
|
||||
"light_color_shade": "#61412f"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 474 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#c4b0c4",
|
||||
"tab_bar_background_color": "#c4b0c4",
|
||||
"toolbar_color": "#5c4153",
|
||||
"tab_bar_color": "#917788",
|
||||
"tab_bar_activated_color": "#5c4153",
|
||||
|
||||
"main_color": "#5c4153",
|
||||
"light_color": "#917788",
|
||||
|
||||
"main_color_tint": "#6b5463",
|
||||
"main_color_shade": "#4d3545",
|
||||
|
||||
"light_color_tint": "#a893a1",
|
||||
"light_color_shade": "#74606d"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#c93608",
|
||||
"tab_bar_background_color": "#c93608",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "#852506",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "#c93608",
|
||||
"light_color": "#c95834",
|
||||
|
||||
"main_color_tint": "#aa614a",
|
||||
"main_color_shade": "#692611",
|
||||
|
||||
"light_color_tint": "#d67151",
|
||||
"light_color_shade": "#a85439"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "green",
|
||||
"tab_bar_background_color": "green",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "",
|
||||
"light_color": "",
|
||||
|
||||
"main_color_tint": "",
|
||||
"main_color_shade": "",
|
||||
|
||||
"light_color_tint": "",
|
||||
"light_color_shade": ""
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#336b36",
|
||||
"tab_bar_background_color": "#336b36",
|
||||
"toolbar_color": "white",
|
||||
"tab_bar_color": "#1c421d",
|
||||
"tab_bar_activated_color": "white",
|
||||
|
||||
"main_color": "#336b36",
|
||||
"light_color": "#517953",
|
||||
|
||||
"main_color_tint": "#497a4b",
|
||||
"main_color_shade": "#305832",
|
||||
|
||||
"light_color_tint": "#738574",
|
||||
"light_color_shade": "#485849"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#7baec7",
|
||||
"tab_bar_background_color": "#7baec7",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "#49758b",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "#7baec7",
|
||||
"light_color": "#90bbcf",
|
||||
|
||||
"main_color_tint": "#96c0d5",
|
||||
"main_color_shade": "#6b93a7",
|
||||
|
||||
"light_color_tint": "#c3e2f1",
|
||||
"light_color_shade": "#89aec0"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "#fd8f38",
|
||||
"tab_bar_background_color": "#fd8f38",
|
||||
"toolbar_color": "#815208",
|
||||
"tab_bar_color": "#ffb67c",
|
||||
"tab_bar_activated_color": "#815208",
|
||||
|
||||
"main_color": "#e49200",
|
||||
"light_color": "#ffb67c",
|
||||
|
||||
"main_color_tint": "#e6ae4b",
|
||||
"main_color_shade": "#b4780c",
|
||||
|
||||
"light_color_tint": "#fad4b6",
|
||||
"light_color_shade": "#ff9c4e"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"toolbar_background_color": "red",
|
||||
"tab_bar_background_color": "red",
|
||||
"toolbar_color": "",
|
||||
"tab_bar_color": "",
|
||||
"tab_bar_activated_color": "",
|
||||
|
||||
"main_color": "",
|
||||
"light_color": "",
|
||||
|
||||
"main_color_tint": "",
|
||||
"main_color_shade": "",
|
||||
|
||||
"light_color_tint": "",
|
||||
"light_color_shade": ""
|
||||
}
|
||||
BIN
03_source/mobile/public/assets/DemoSkeletonText/icon/favicon.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/icon/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 930 B |
BIN
03_source/mobile/public/assets/DemoSkeletonText/icon/icon.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/icon/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/1.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 772 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/10.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/2.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 795 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/3.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 822 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/4.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 736 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/5.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 590 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/6.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 611 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/7.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 750 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/8.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/9.png
Normal file
BIN
03_source/mobile/public/assets/DemoSkeletonText/scenery/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -54,49 +54,34 @@ import Tutorial from './pages/Tutorial';
|
||||
import HomeOrTutorial from './components/HomeOrTutorial';
|
||||
import { Schedule } from './models/Schedule';
|
||||
import RedirectToLogin from './components/RedirectToLogin';
|
||||
import EventDetail from './pages/EventDetail';
|
||||
import EventList from './pages/EventList';
|
||||
import MemberProfile from './pages/MemberProfile';
|
||||
import Settings from './pages/Settings';
|
||||
import NotImplemented from './pages/NotImplemented';
|
||||
import ChangeLanguage from './pages/ChangeLanguage';
|
||||
import ServiceAgreement from './pages/ServiceAgreement';
|
||||
import paths from './paths';
|
||||
import PrivacyAgreement from './pages/PrivacyAgreement';
|
||||
import AppRoute from './AppRoute';
|
||||
//
|
||||
// TODO: resume DemoReactShop
|
||||
// import DemoReactShop from './pages/DemoReactShop';
|
||||
import DemoWeatherApp from './pages/DemoWeatherApp';
|
||||
import DemoClubHouse from './pages/DemoClubHouse';
|
||||
import DemoScoreBoard from './pages/DemoScoreBoard';
|
||||
import DemoQuoteApp from './pages/DemoQuoteApp';
|
||||
import DemoQrScanner from './pages/DemoQrScanner';
|
||||
|
||||
// TODO: remove obsoleted DemoWeatherApp
|
||||
// import DemoWeatherApp from './pages/DemoWeatherApp';
|
||||
|
||||
// DemoShopAppUi
|
||||
import DemoShopAppUi from './pages/DemoShopAppUi';
|
||||
// DemoDictionaryApp
|
||||
import DemoDictionaryApp from './pages/DemoDictionaryApp';
|
||||
// demo-recipe-app
|
||||
import DemoRecipeApp from './pages/DemoRecipeApp';
|
||||
|
||||
// DemoSlidingProfile
|
||||
import DemoSlidingProfile from './pages/DemoSlidingProfile';
|
||||
|
||||
// DemoQuizApp
|
||||
import DemoQuizApp from './pages/DemoQuizApp';
|
||||
import DemoBlogPostUi from './pages/DemoBlogPostUi';
|
||||
import DemoReactTravelApp from './pages/DemoReactTravelApp';
|
||||
import DemoPinterestFloatingTabBar from './pages/DemoPinterestFloatingTabBar';
|
||||
import DemoRestaurantFinder from './pages/DemoRestaurantFinder';
|
||||
import DemoReactOverlayHooks from './pages/DemoReactOverlayHooks';
|
||||
import DemoReactSwitchTabs from './pages/DemoReactSwitchTabs';
|
||||
import DemoReactPollApp from './pages/DemoReactPollApp';
|
||||
import DemoReactWhatsAppClone from './pages/DemoReactWhatsAppClone';
|
||||
import Demo2FaExample from './pages/Demo2FaExample';
|
||||
import DemoAccordionTutorial from './pages/DemoAccordionTutorial';
|
||||
import DemoBankingUi from './pages/DemoBankingUi';
|
||||
import DemoCapacitorGoogleMapsTutorial from './pages/DemoCapacitorGoogleMapsTutorial';
|
||||
import DemoColorTutorial from './pages/DemoColorTutorial';
|
||||
|
||||
//
|
||||
// import DemoReactMarvelApp from './pages/DemoReactMarvelApp';
|
||||
// import DemoReactOnboardingUI from './pages/DemoReactOnboardingUI';
|
||||
// import DemoReactTabsMenusCustom from './pages/DemoReactTabsMenusCustom';
|
||||
// import DemoReactThemeSwitcher from './pages/DemoReactThemeSwitcher';
|
||||
// import DemoSkeletonText from './pages/DemoSkeletonText';
|
||||
// import DemoStickyBottomSheetExample from './pages/DemoStickyBottomSheetExample';
|
||||
// import DemoStorageExample from './pages/DemoStorageExample';
|
||||
// import DemoSwiperjsTutorial from './pages/DemoSwiperjsTutorial';
|
||||
// TODO: SCSS of this directory will alter the main page
|
||||
import AppDemoRoute from './routes/DemoRoute';
|
||||
import Settings from './pages/Settings';
|
||||
|
||||
setupIonicReact();
|
||||
|
||||
@@ -122,14 +107,7 @@ interface DispatchProps {
|
||||
|
||||
interface IonicAppProps extends StateProps, DispatchProps {}
|
||||
|
||||
const IonicApp: React.FC<IonicAppProps> = ({
|
||||
darkMode,
|
||||
schedule,
|
||||
setIsLoggedIn,
|
||||
setUsername,
|
||||
loadConfData,
|
||||
loadUserData,
|
||||
}) => {
|
||||
const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn, setUsername, loadConfData, loadUserData }) => {
|
||||
useEffect(() => {
|
||||
loadUserData();
|
||||
loadConfData();
|
||||
@@ -153,98 +131,28 @@ const IonicApp: React.FC<IonicAppProps> = ({
|
||||
<AppRoute />
|
||||
|
||||
<Route path="/tabs" render={() => <MainTabs />} />
|
||||
<Route path={paths.DEMO_WEATHER_APP} render={() => <DemoWeatherApp />} />
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
|
||||
<AppDemoRoute />
|
||||
|
||||
{/* */}
|
||||
|
||||
<Route path={paths.DEMO_ACCORDION_TUTORIAL} render={() => <DemoAccordionTutorial />} />
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
|
||||
<Route path={paths.DEMO_BANKING_UI} render={() => <DemoBankingUi />} />
|
||||
<Route
|
||||
path={paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL}
|
||||
render={() => <DemoCapacitorGoogleMapsTutorial />}
|
||||
/>
|
||||
|
||||
<Route path={paths.DEMO_COLOR_TUTORIAL} render={() => <DemoColorTutorial />} />
|
||||
|
||||
{/*
|
||||
<Route path={paths.DEMO_ECOMMERCE_EXAMPLE} render={() => <DemoEcommerceExample />} />
|
||||
<Route path={paths.DEMO_FACEBOOK_CLONE} render={() => <DemoFacebookClone />} />
|
||||
<Route path={paths.DEMO_FAST_FOOD_APP} render={() => <DemoFastFoodApp />} />
|
||||
<Route path={paths.DEMO_FLOATING_TABS} render={() => <DemoFloatingTabs />} />
|
||||
<Route path={paths.DEMO_INSTAGRAM_CLONE} render={() => <DemoInstagramClone />} />
|
||||
<Route path={paths.DEMO_KANBAN_BOARD} render={() => <DemoKanbanBoard />} />
|
||||
<Route path={paths.DEMO_ORDERING_APP} render={() => <DemoOrderingApp />} />
|
||||
<Route path={paths.DEMO_PROFILE_EXAMPLE} render={() => <DemoProfileExample />} />
|
||||
<Route path={paths.DEMO_PULLSTATE_TUTORIAL} render={() => <DemoPullstateTutorial />} />
|
||||
<Route path={paths.DEMO_REACT_ADD_TO_CART} render={() => <DemoReactAddToCart />} />
|
||||
<Route path={paths.DEMO_REACT_CALCULATOR} render={() => <DemoReactCalculator />} />
|
||||
<Route path={paths.DEMO_REACT_DRAWING_CANVAS} render={() => <DemoReactDrawingCanvas />} />
|
||||
<Route path={paths.DEMO_REACT_HOOK_FORM_EXAMPLE} render={() => <DemoReactHookFormExample />} />
|
||||
<Route path={paths.DEMO_REACT_ITEM_LIST} render={() => <DemoReactItemList />} />
|
||||
<Route path={paths.DEMO_REACT_LIFECYCLES} render={() => <DemoReactLifecycles />} />
|
||||
<Route path={paths.DEMO_REACT_LOGIN} render={() => <DemoReactLogin />} />
|
||||
<Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} />
|
||||
<Route path={paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA} render(() => <DemoReactMovieAppWithAlgolia />} />
|
||||
<Route path={paths.DEMO_REACT_NOTES} render={() => <DemoReactNotes />} />
|
||||
<Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} />
|
||||
<Route path={paths.DEMO_REACT_PROFILE_DASHBOARD_UI} render(() => <DemoReactProfileDashboardUI />} />
|
||||
<Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQRCode />} />
|
||||
<Route path={paths.DEMO_REACT_QUOTES} render(() => <DemoReactQuotes />} />
|
||||
<Route path={paths.DEMO_REACT_SHOP_UI} render(() => <DemoReactShopUI />} />
|
||||
<Route path={paths.DEMO_REACT_TABS_MENUS_CUSTOM} render(() => <DemoReactTabsMenusCustom />} />
|
||||
<Route path={paths.DEMO_REACT_THEME_SWITCHER} render(() => <DemoReactThemeSwitcher />} />
|
||||
<Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render(() => <DemoReactWhatsAppClone />} />
|
||||
<Route path={paths.DEMO_SKELETON_TEXT} render(() => <DemoSkeletonText />} />
|
||||
<Route path={paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE} render(() => <DemoStickyBottomSheetExample />} />
|
||||
<Route path={paths.DEMO_STORAGE_EXAMPLE} render(() => <DemoStorageExample />} />
|
||||
<Route path={paths.DEMO_SWIPERJS_TUTORIAL} render(() => <DemoSwiperjsTutorial />} />
|
||||
<Route path={paths.DEMO_WEATHER_APP_UI} render(() => <DemoWeatherAppUI />} />
|
||||
*/}
|
||||
|
||||
<Route path={paths.DEMO_2FA_EXAMPLE} render={() => <Demo2FaExample />} />
|
||||
|
||||
{/* have problemx` */}
|
||||
{/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
|
||||
|
||||
<Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
|
||||
|
||||
<Route path={paths.DEMO_BLOG_POST_UI} render={() => <DemoBlogPostUi />} />
|
||||
<Route path={paths.DEMO_CLUB_HOUSE} render={() => <DemoClubHouse />} />
|
||||
<Route path={paths.DEMO_DICTIONARY_APP} render={() => <DemoDictionaryApp />} />
|
||||
<Route
|
||||
path={paths.DEMO_PINTEREST_FLOATING_TAB_BAR}
|
||||
render={() => <DemoPinterestFloatingTabBar />}
|
||||
/>
|
||||
<Route path={paths.DEMO_QR_SCANNER} render={() => <DemoQrScanner />} />
|
||||
<Route path={paths.DEMO_QUIZ_APP} render={() => <DemoQuizApp />} />
|
||||
<Route path={paths.DEMO_QUOTE_APP} render={() => <DemoQuoteApp />} />
|
||||
<Route path={paths.DEMO_REACT_OVERLAY_HOOKS} render={() => <DemoReactOverlayHooks />} />
|
||||
<Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
|
||||
{/* TODO: need update to @capacitor/barcode-scanner */}
|
||||
{/* <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQrCode />} /> */}
|
||||
|
||||
{/* TODO: resume DemoReactShop */}
|
||||
{/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}
|
||||
|
||||
<Route path={paths.DEMO_REACT_SWITCH_TABS} render={() => <DemoReactSwitchTabs />} />
|
||||
<Route path={paths.DEMO_REACT_TRAVEL_APP} render={() => <DemoReactTravelApp />} />
|
||||
<Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />
|
||||
<Route path={paths.DEMO_RESTAURANT_FINDER} render={() => <DemoRestaurantFinder />} />
|
||||
<Route path={paths.DEMO_SCORE_BOARD} render={() => <DemoScoreBoard />} />
|
||||
<Route path={paths.DEMO_SHOP_APP_UI} render={() => <DemoShopAppUi />} />
|
||||
<Route path={paths.DEMO_SLIDING_PROFILE} render={() => <DemoSlidingProfile />} />
|
||||
{/* have problemx` */}
|
||||
{/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
|
||||
|
||||
{/* TODO: scss will alter the main page, */}
|
||||
{/* <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} /> */}
|
||||
|
||||
{/* TODO: update ionslide */}
|
||||
{/* <Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} /> */}
|
||||
|
||||
{/* TODO: place a whatsapp clone */}
|
||||
{/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
|
||||
|
||||
<Route path="/account" component={Account} />
|
||||
<Route path="/login" component={Login} />
|
||||
@@ -253,6 +161,7 @@ const IonicApp: React.FC<IonicAppProps> = ({
|
||||
<Route path="/signup" component={Signup} />
|
||||
<Route path="/support" component={Support} />
|
||||
<Route path="/tutorial" component={Tutorial} />
|
||||
<Route path="/settings" component={Settings} />
|
||||
|
||||
<Route
|
||||
path="/logout"
|
||||
|
||||
@@ -6,7 +6,7 @@ import { Route } from 'react-router';
|
||||
import NotImplemented from './pages/NotImplemented';
|
||||
import EventDetail from './pages/EventDetail';
|
||||
import MemberProfile from './pages/MemberProfile';
|
||||
import paths from './paths';
|
||||
import PATHS from './PATHS';
|
||||
import Settings from './pages/Settings';
|
||||
import ChangeLanguage from './pages/ChangeLanguage';
|
||||
import ServiceAgreement from './pages/ServiceAgreement';
|
||||
@@ -28,10 +28,10 @@ const AppRoute: React.FC = () => {
|
||||
{/* <Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} /> */}
|
||||
|
||||
{/* */}
|
||||
<Route exact={true} path={paths.SETTINGS} component={Settings} />
|
||||
<Route exact={true} path={paths.CHANGE_LANGUAGE} component={ChangeLanguage} />
|
||||
<Route exact={true} path={paths.SERVICE_AGREEMENT} component={ServiceAgreement} />
|
||||
<Route exact={true} path={paths.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
|
||||
<Route exact={true} path={PATHS.SETTINGS} component={Settings} />
|
||||
<Route exact={true} path={PATHS.CHANGE_LANGUAGE} component={ChangeLanguage} />
|
||||
<Route exact={true} path={PATHS.SERVICE_AGREEMENT} component={ServiceAgreement} />
|
||||
<Route exact={true} path={PATHS.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
81
03_source/mobile/src/PATHS.ts
Normal file
81
03_source/mobile/src/PATHS.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
const PATHS = {
|
||||
NOT_IMPLEMENTED: '/not_implemented',
|
||||
SETTINGS: '/settings',
|
||||
CHANGE_LANGUAGE: '/change_language',
|
||||
SERVICE_AGREEMENT: '/service_agreement',
|
||||
PRIVACY_AGREEMENT: '/privacy_agreement',
|
||||
SIGN_IN: '/mylogin',
|
||||
//
|
||||
ORDER_DETAIL: '/order_detail/:id',
|
||||
getOrderDetail: (id: string) => `/order_detail/${id}`,
|
||||
//
|
||||
TAB_NOT_IMPLEMENTED: '/tabs/not_implemented',
|
||||
EVENT_LIST: `/tabs/events`,
|
||||
MESSAGE_LIST: `/tabs/messages`,
|
||||
NEARBY_LIST: '/tabs/nearby',
|
||||
ORDERS_LIST: '/tabs/orders',
|
||||
FAVOURITES_LIST: `/tabs/favourites`,
|
||||
PROFILE: '/tabs/my_profile',
|
||||
|
||||
//
|
||||
// DEMO_WEATHER_APP: '/demo-weather-app',
|
||||
DEMO_WEATHER_APP_UI: '/demo-weather-app-ui',
|
||||
//
|
||||
|
||||
DEMO_2FA_EXAMPLE: '/demo-2fa-example',
|
||||
DEMO_ACCORDION_TUTORIAL: '/demo-accordion-tutorial',
|
||||
DEMO_BANKING_UI: '/demo-banking-ui',
|
||||
DEMO_BLOG_POST_UI: '/demo-blog-post-ui',
|
||||
DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL: '/demo-capacitor-google-maps-tutorial',
|
||||
DEMO_CLUB_HOUSE: '/demo-club-house',
|
||||
DEMO_COLOR_TUTORIAL: '/demo-color-tutorial',
|
||||
DEMO_DICTIONARY_APP: '/demo-dictionary-app',
|
||||
DEMO_ECOMMERCE_EXAMPLE: '/demo-ecommerce-example',
|
||||
DEMO_FACEBOOK_CLONE: '/demo-facebook-clone',
|
||||
DEMO_FAST_FOOD_APP: '/demo-fast-food-app',
|
||||
DEMO_FLOATING_TABS: '/demo-floating-tabs',
|
||||
DEMO_INSTAGRAM_CLONE: '/demo-instagram-clone',
|
||||
DEMO_KANBAN_BOARD: '/demo-kanban-board',
|
||||
DEMO_ORDERING_APP: '/demo-ordering-app',
|
||||
DEMO_PAGE: '/tabs/demo-list',
|
||||
DEMO_PINTEREST_FLOATING_TAB_BAR: '/demo-pinterest-floating-tab-bar',
|
||||
DEMO_PROFILE_EXAMPLE: '/demo-profile-example',
|
||||
DEMO_PULLSTATE_TUTORIAL: '/demo-pullstate-tutorial',
|
||||
DEMO_QUIZ_APP: '/demo-quiz-app',
|
||||
DEMO_QUOTE_APP: '/demo-quote-app',
|
||||
DEMO_REACT_ADD_TO_CART: '/demo-react-add-to-cart',
|
||||
DEMO_REACT_CALCULATOR: '/demo-react-calculator',
|
||||
DEMO_REACT_DRAWING_CANVAS: '/demo-react-drawing-canvas',
|
||||
DEMO_REACT_HOOK_FORM_EXAMPLE: '/demo-react-hook-form-example',
|
||||
DEMO_REACT_ITEM_LIST: '/demo-react-item-list',
|
||||
DEMO_REACT_LIFECYCLES: '/demo-react-lifecycles',
|
||||
DEMO_REACT_LOGIN: '/demo-react-login',
|
||||
DEMO_REACT_MARVEL_APP: '/demo-react-marvel-app',
|
||||
DEMO_REACT_MOVIE_APP_WITH_ALGOLIA: '/demo-react-movie-app-with-algolia',
|
||||
DEMO_REACT_NOTES: '/demo-react-notes',
|
||||
DEMO_REACT_ONBOARDING_UI: '/demo-react-onboarding-ui',
|
||||
DEMO_REACT_OVERLAY_HOOKS: '/demo-react-overlay-hooks',
|
||||
DEMO_REACT_POLL_APP: '/demo-react-poll-app',
|
||||
DEMO_REACT_PROFILE_DASHBOARD_UI: '/demo-react-profile-dashboard-ui',
|
||||
|
||||
DEMO_REACT_QR_CODE: '/demo-react-qr-code',
|
||||
DEMO_QR_SCANNER: '/demo-qr-scanner',
|
||||
|
||||
DEMO_REACT_QUOTES: '/demo-react-quotes',
|
||||
DEMO_REACT_SHOP_UI: '/demo-react-shop-ui',
|
||||
DEMO_REACT_SHOP: '/demo-react-shop',
|
||||
DEMO_REACT_SWITCH_TABS: '/demo-react-switch-tabs',
|
||||
DEMO_REACT_TABS_MENUS_CUSTOM: '/demo-react-tabs-menus-custom',
|
||||
DEMO_REACT_THEME_SWITCHER: '/demo-react-theme-switcher',
|
||||
DEMO_REACT_TRAVEL_APP: '/demo-react-travel-app',
|
||||
DEMO_REACT_WHATSAPP_CLONE: '/demo-react-whatsapp-clone',
|
||||
DEMO_RECIPE_APP: '/demo-recipe-app',
|
||||
DEMO_RESTAURANT_FINDER: '/demo-restaurant-finder',
|
||||
DEMO_SCORE_BOARD: '/demo-score-board',
|
||||
DEMO_SHOP_APP_UI: '/demo-shop-app-ui',
|
||||
DEMO_SKELETON_TEXT: '/demo-skeleton-text',
|
||||
DEMO_SLIDING_PROFILE: '/demo-sliding-profile',
|
||||
DEMO_STICKY_BOTTOM_SHEET_EXAMPLE: '/demo-sticky-bottom-sheet-example',
|
||||
DEMO_STORAGE_EXAMPLE: '/demo-storage-example',
|
||||
};
|
||||
export default PATHS;
|
||||
@@ -2,7 +2,7 @@ import { Route } from 'react-router';
|
||||
import NotImplemented from './pages/NotImplemented';
|
||||
import EventDetail from './pages/EventDetail';
|
||||
import MemberProfile from './pages/MemberProfile';
|
||||
import paths from './paths';
|
||||
import PATHS from './PATHS';
|
||||
import MembersNearByList from './pages/MembersNearByList';
|
||||
import OrderList from './pages/OrderList';
|
||||
import MessageList from './pages/MessageList';
|
||||
@@ -17,25 +17,25 @@ import DemoList from './pages/DemoList';
|
||||
const TabAppRoute: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<Route path={paths.TAB_NOT_IMPLEMENTED} component={NotImplemented} />
|
||||
<Route path={PATHS.TAB_NOT_IMPLEMENTED} component={NotImplemented} />
|
||||
|
||||
{/* */}
|
||||
<Route path={paths.NEARBY_LIST} render={() => <MembersNearByList />} exact={true} />
|
||||
<Route path={PATHS.NEARBY_LIST} render={() => <MembersNearByList />} exact={true} />
|
||||
|
||||
{/* */}
|
||||
<Route path={paths.ORDERS_LIST} render={() => <OrderList />} exact={true} />
|
||||
<Route path={PATHS.ORDERS_LIST} render={() => <OrderList />} exact={true} />
|
||||
|
||||
{/* */}
|
||||
<Route path={paths.MESSAGE_LIST} render={() => <MessageList />} exact={true} />
|
||||
<Route path={PATHS.MESSAGE_LIST} render={() => <MessageList />} exact={true} />
|
||||
|
||||
{/* */}
|
||||
<Route path={paths.FAVOURITES_LIST} render={() => <Favourites />} exact={true} />
|
||||
<Route path={PATHS.FAVOURITES_LIST} render={() => <Favourites />} exact={true} />
|
||||
|
||||
{/* */}
|
||||
<Route path={paths.EVENT_LIST} render={() => <EventList />} exact={true} />
|
||||
<Route path={PATHS.EVENT_LIST} render={() => <EventList />} exact={true} />
|
||||
|
||||
{/* */}
|
||||
<Route path={paths.PROFILE} render={() => <MyProfile />} exact={true} />
|
||||
<Route path={PATHS.PROFILE} render={() => <MyProfile />} exact={true} />
|
||||
|
||||
{/* */}
|
||||
<Route path="/tabs/demo-list" render={() => <DemoList />} exact={true} />
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import axios from '../../lib/axios';
|
||||
|
||||
import { JWT_STORAGE_KEY } from './constant.js';
|
||||
import paths from '../../paths.js';
|
||||
import PATHS from '../../PATHS.js';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -60,7 +60,7 @@ export function tokenExpired(exp: number) {
|
||||
try {
|
||||
alert('Token expired!');
|
||||
sessionStorage.removeItem(JWT_STORAGE_KEY);
|
||||
window.location.href = paths.SIGN_IN;
|
||||
window.location.href = PATHS.SIGN_IN;
|
||||
} catch (error) {
|
||||
console.error('Error during token expiration:', error);
|
||||
throw error;
|
||||
|
||||
@@ -1,96 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
useIonRouter,
|
||||
} from '@ionic/react';
|
||||
|
||||
import { Geolocation } from '@capacitor/geolocation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
|
||||
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
|
||||
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
||||
|
||||
function Tab1() {
|
||||
const router = useIonRouter();
|
||||
|
||||
const [currentWeather, setCurrentWeather] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
getCurrentPosition();
|
||||
}, []);
|
||||
|
||||
const getCurrentPosition = async () => {
|
||||
setCurrentWeather(false);
|
||||
const coordinates = await Geolocation.getCurrentPosition();
|
||||
getAddress(coordinates.coords);
|
||||
};
|
||||
|
||||
const getAddress = async (coords) => {
|
||||
const query = `${coords.latitude},${coords.longitude}`;
|
||||
const response = await fetch(
|
||||
`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
|
||||
);
|
||||
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
setCurrentWeather(data);
|
||||
};
|
||||
|
||||
// const router = useIonRouter();
|
||||
function handleBackClick() {
|
||||
router.goBack();
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>My Weather</IonTitle>
|
||||
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={() => getCurrentPosition()}>
|
||||
<IonIcon icon={refreshOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => handleBackClick()}>
|
||||
<IonIcon icon={chevronBackOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Dashboard</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
|
||||
<IonCol size="12">
|
||||
<h4>Here's your location based weather</h4>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<div style={{ marginTop: '-1.5rem' }}>
|
||||
{currentWeather ? (
|
||||
<CurrentWeather currentWeather={currentWeather} />
|
||||
) : (
|
||||
<SkeletonDashboard />
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab1;
|
||||
@@ -1,81 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonSearchbar,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { useState } from 'react';
|
||||
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
||||
|
||||
function Tab2() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [currentWeather, setCurrentWeather] = useState(false);
|
||||
|
||||
const performSearch = async () => {
|
||||
getAddress(search);
|
||||
};
|
||||
|
||||
const getAddress = async (city) => {
|
||||
const response = await fetch(
|
||||
`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
if (data && data.current && data.location) {
|
||||
setCurrentWeather(data);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Search</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Search</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
|
||||
<IonCol size="7">
|
||||
<IonSearchbar
|
||||
placeholder="Try 'London'"
|
||||
animated
|
||||
value={search}
|
||||
onIonChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="5">
|
||||
<IonButton
|
||||
expand="block"
|
||||
className="ion-margin-start ion-margin-end"
|
||||
onClick={performSearch}
|
||||
>
|
||||
Search
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<div style={{ marginTop: '-0.8rem' }}>
|
||||
{currentWeather ? (
|
||||
<CurrentWeather currentWeather={currentWeather} />
|
||||
) : (
|
||||
<h3 className="ion-text-center">Your search result will appear here</h3>
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab2;
|
||||
@@ -1,62 +0,0 @@
|
||||
import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
|
||||
const [property, setProperty] = useState(false);
|
||||
|
||||
const properties = {
|
||||
wind: {
|
||||
isIcon: false,
|
||||
icon: '/assets/WeatherDemo/wind.png',
|
||||
alt: 'wind',
|
||||
label: 'Wind',
|
||||
value: `${currentWeather.current.wind_mph}mph`,
|
||||
},
|
||||
feelsLike: {
|
||||
isIcon: true,
|
||||
icon: thermometerOutline,
|
||||
alt: 'feels like',
|
||||
label: 'Feels like',
|
||||
value: `${currentWeather.current.feelslike_c}°C`,
|
||||
},
|
||||
indexUV: {
|
||||
isIcon: true,
|
||||
icon: sunnyOutline,
|
||||
alt: 'index uv',
|
||||
label: 'Index UV',
|
||||
value: currentWeather.current.uv,
|
||||
},
|
||||
pressure: {
|
||||
isIcon: true,
|
||||
icon: pulseOutline,
|
||||
alt: 'pressure',
|
||||
label: 'Pressure',
|
||||
value: `${currentWeather.current.pressure_mb} mbar`,
|
||||
},
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setProperty(properties[type]);
|
||||
}, [type]);
|
||||
|
||||
return (
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
{!property.isIcon && (
|
||||
<img alt={property.alt} src={property.icon} height="32" width="32" />
|
||||
)}
|
||||
{property.isIcon && (
|
||||
<IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
|
||||
)}
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>{property.label}</IonCardSubtitle>
|
||||
<IonNote>{property.value}</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
);
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
|
||||
import { WeatherProperty } from './WeatherProperty';
|
||||
|
||||
export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
{currentWeather.location.region},{' '}
|
||||
<span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<img
|
||||
alt="condition"
|
||||
src={currentWeather.current.condition.icon.replace('//', 'https://')}
|
||||
/>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>{new Date(currentWeather.location.localtime).toDateString()}</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
{currentWeather.current.temp_c}℃
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<WeatherProperty type="wind" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="feelsLike" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<WeatherProperty type="indexUV" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="pressure" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,117 +0,0 @@
|
||||
import {
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardSubtitle,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonGrid,
|
||||
IonIcon,
|
||||
IonNote,
|
||||
IonRow,
|
||||
IonSkeletonText,
|
||||
IonText,
|
||||
IonThumbnail,
|
||||
} from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
|
||||
export const SkeletonDashboard = () => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<IonThumbnail>
|
||||
<IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
|
||||
</IonThumbnail>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
<IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Wind</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Feels like</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Index UV</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Pressure</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,62 +0,0 @@
|
||||
import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
|
||||
const [property, setProperty] = useState(false);
|
||||
|
||||
const properties = {
|
||||
wind: {
|
||||
isIcon: false,
|
||||
icon: '/assets/WeatherDemo/wind.png',
|
||||
alt: 'wind',
|
||||
label: 'Wind',
|
||||
value: `${currentWeather.current.wind_mph}mph`,
|
||||
},
|
||||
feelsLike: {
|
||||
isIcon: true,
|
||||
icon: thermometerOutline,
|
||||
alt: 'feels like',
|
||||
label: 'Feels like',
|
||||
value: `${currentWeather.current.feelslike_c}°C`,
|
||||
},
|
||||
indexUV: {
|
||||
isIcon: true,
|
||||
icon: sunnyOutline,
|
||||
alt: 'index uv',
|
||||
label: 'Index UV',
|
||||
value: currentWeather.current.uv,
|
||||
},
|
||||
pressure: {
|
||||
isIcon: true,
|
||||
icon: pulseOutline,
|
||||
alt: 'pressure',
|
||||
label: 'Pressure',
|
||||
value: `${currentWeather.current.pressure_mb} mbar`,
|
||||
},
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setProperty(properties[type]);
|
||||
}, [type]);
|
||||
|
||||
return (
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
{!property.isIcon && (
|
||||
<img alt={property.alt} src={property.icon} height="32" width="32" />
|
||||
)}
|
||||
{property.isIcon && (
|
||||
<IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
|
||||
)}
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>{property.label}</IonCardSubtitle>
|
||||
<IonNote>{property.value}</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
);
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
|
||||
import { WeatherProperty } from './WeatherProperty';
|
||||
|
||||
export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
{currentWeather.location.region},{' '}
|
||||
<span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<img
|
||||
alt="condition"
|
||||
src={currentWeather.current.condition.icon.replace('//', 'https://')}
|
||||
/>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>{new Date(currentWeather.location.localtime).toDateString()}</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
{currentWeather.current.temp_c}℃
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<WeatherProperty type="wind" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="feelsLike" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<WeatherProperty type="indexUV" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="pressure" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,27 +0,0 @@
|
||||
import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
|
||||
import { addOutline, cameraOutline, qrCodeOutline } from 'ionicons/icons';
|
||||
|
||||
export const CustomFab = ({ start }) => {
|
||||
return (
|
||||
<IonFab
|
||||
vertical="bottom"
|
||||
horizontal="end"
|
||||
slot="fixed"
|
||||
className="ion-padding-bottom ion-padding-end"
|
||||
>
|
||||
<IonFabButton>
|
||||
<IonIcon icon={qrCodeOutline} />
|
||||
</IonFabButton>
|
||||
|
||||
<IonFabList side="top" className="ion-padding-bottom">
|
||||
<IonFabButton color="primary" onClick={start}>
|
||||
<IonIcon icon={cameraOutline} />
|
||||
</IonFabButton>
|
||||
|
||||
<IonFabButton color="primary" routerLink="/demo-qr-scanner/manual">
|
||||
<IonIcon icon={addOutline} />
|
||||
</IonFabButton>
|
||||
</IonFabList>
|
||||
</IonFab>
|
||||
);
|
||||
};
|
||||
@@ -1,15 +0,0 @@
|
||||
import { IonCol, IonRow, IonText } from '@ionic/react';
|
||||
|
||||
export const NoQRCodes = () => (
|
||||
<IonRow className="ion-text-center ion-justify-content-center">
|
||||
<IonCol size="9">
|
||||
<h3>It looks like you don't have any QR codes stored.</h3>
|
||||
<img src="/assets/icon2.png" alt="icon" />
|
||||
|
||||
<p>
|
||||
Click the <IonText color="primary">button</IonText> in the bottom right to scan a code or
|
||||
generate a code.
|
||||
</p>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
);
|
||||
@@ -1,106 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardHeader,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonNote,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
useIonToast,
|
||||
} from '@ionic/react';
|
||||
import QRCode from 'react-qr-code';
|
||||
import { addQRCode } from '../store/QRStore';
|
||||
|
||||
import useSound from 'use-sound';
|
||||
import closeSound from '../sounds/close.wav';
|
||||
import { reloadOutline } from 'ionicons/icons';
|
||||
|
||||
export const QRCodeScannedModal = ({ dismiss, code, set, scan }) => {
|
||||
const [play] = useSound(closeSound);
|
||||
const [showToast] = useIonToast();
|
||||
|
||||
const handleDismiss = () => {
|
||||
dismiss();
|
||||
play();
|
||||
};
|
||||
|
||||
const handleScanAgain = () => {
|
||||
handleDismiss();
|
||||
|
||||
setTimeout(() => {
|
||||
scan();
|
||||
}, 10);
|
||||
};
|
||||
|
||||
const handleAdd = async () => {
|
||||
addQRCode(code.text ? code.text : code, true);
|
||||
showToast({
|
||||
header: 'Success!',
|
||||
message: 'QR Code stored successfully.',
|
||||
duration: 3000,
|
||||
color: 'primary',
|
||||
});
|
||||
|
||||
handleDismiss();
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>View QR Code</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={handleDismiss}>Close</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonGrid className="ion-padding-top ion-margin-top">
|
||||
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
|
||||
<IonCol size="12">
|
||||
<QRCode value={code.text ? code.text : code} />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonCard>
|
||||
<IonCardHeader>
|
||||
<IonCardTitle>QR Code data</IonCardTitle>
|
||||
<IonNote>This is what the code represents</IonNote>
|
||||
</IonCardHeader>
|
||||
<IonCardContent>
|
||||
<p>{code.text ? code.text : code}</p>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonButton expand="block" fill="outline" onClick={handleScanAgain}>
|
||||
<IonIcon icon={reloadOutline} />
|
||||
Scan again
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
<IonCol size="6">
|
||||
<IonButton expand="block" onClick={handleAdd}>
|
||||
Store →
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
@@ -1,45 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
// import QrReader from "react-qr-reader";
|
||||
|
||||
export const QRWebModal = ({ dismiss, set, scan, error }) => {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Scan QR Code</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={dismiss}>Close</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonGrid className="ion-padding-top ion-margin-top">
|
||||
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
|
||||
<IonCol size="12">
|
||||
{/*
|
||||
<QrReader
|
||||
delay={ 500 }
|
||||
onError={ error }
|
||||
onScan={ scan }
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
*/}
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
@@ -1,117 +0,0 @@
|
||||
import {
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardSubtitle,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonGrid,
|
||||
IonIcon,
|
||||
IonNote,
|
||||
IonRow,
|
||||
IonSkeletonText,
|
||||
IonText,
|
||||
IonThumbnail,
|
||||
} from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
|
||||
export const SkeletonDashboard = () => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<IonThumbnail>
|
||||
<IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
|
||||
</IonThumbnail>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
<IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Wind</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Feels like</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Index UV</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Pressure</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,32 +0,0 @@
|
||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
||||
|
||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
||||
import { Route, Redirect } from 'react-router';
|
||||
|
||||
// import Tab1 from './AppPages/Tab1';
|
||||
// import Tab2 from './AppPages/Tab2';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
function DemoWeatherAppUi() {
|
||||
return (
|
||||
<IonTabs>
|
||||
<IonRouterOutlet>
|
||||
<Route exact path="/demo-react-qr-code/home">
|
||||
<Tab1 />
|
||||
</Route>
|
||||
<Route exact path="/demo-react-qr-code/manual">
|
||||
<Tab2 />
|
||||
</Route>
|
||||
|
||||
<Route exact path="/demo-react-qr-code/camera">
|
||||
<Tab3 />
|
||||
</Route>
|
||||
|
||||
<Redirect exact path="/demo-react-qr-code" to="/demo-react-qr-code/home" />
|
||||
</IonRouterOutlet>
|
||||
</IonTabs>
|
||||
);
|
||||
}
|
||||
|
||||
export default DemoWeatherAppUi;
|
||||
@@ -1,114 +0,0 @@
|
||||
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
|
||||
import { IonContent, IonGrid, IonHeader, IonPage, IonTitle, IonToolbar, useIonModal, getPlatforms } from '@ionic/react';
|
||||
import { useStoreState } from 'pullstate';
|
||||
import { useState } from 'react';
|
||||
import { useRef } from 'react';
|
||||
import useSound from 'use-sound';
|
||||
import { CustomFab } from '../components/CustomFab';
|
||||
import { NoQRCodes } from '../components/NoQRCodes';
|
||||
import { QRCodeList } from '../components/QRCodeList';
|
||||
import { QRCodeScannedModal } from '../components/QRCodeScannedModal';
|
||||
import { QRStore } from '../store';
|
||||
import { getCodes } from '../store/Selectors';
|
||||
import './Tab1.css';
|
||||
|
||||
import openSound from "../sounds/open.wav";
|
||||
import { QRWebModal } from '../components/QRWebModal';
|
||||
|
||||
const Tab1 = () => {
|
||||
|
||||
const pageRef = useRef();
|
||||
const codes = useStoreState(QRStore, getCodes);
|
||||
const [ play ] = useSound(openSound);
|
||||
|
||||
const [ QRData, setQRData ] = useState(false);
|
||||
|
||||
const handleScan = data => {
|
||||
|
||||
if (data) {
|
||||
|
||||
setQRData(data);
|
||||
play();
|
||||
handleSuccess(data);
|
||||
}
|
||||
}
|
||||
|
||||
const handleError = err => {
|
||||
|
||||
console.error(err)
|
||||
}
|
||||
|
||||
const start = async () => {
|
||||
|
||||
const platforms = getPlatforms();
|
||||
const isWeb = (platforms.includes("desktop") || platforms.includes("mobileweb") || platforms.includes("pwa"));
|
||||
|
||||
if (!isWeb) {
|
||||
|
||||
const data = await BarcodeScanner.scan();
|
||||
|
||||
if (data) {
|
||||
handleSuccess(data);
|
||||
}
|
||||
} else {
|
||||
|
||||
presentWebModal({
|
||||
|
||||
presentingElement: pageRef.current
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const handleSuccess = data => {
|
||||
|
||||
setQRData(data);
|
||||
console.log(data);
|
||||
dismissWebModal();
|
||||
|
||||
play();
|
||||
present({
|
||||
|
||||
presentingElement: pageRef.current
|
||||
});
|
||||
}
|
||||
|
||||
const [ present, dismiss ] = useIonModal(QRCodeScannedModal, {
|
||||
|
||||
dismiss: () => dismiss(),
|
||||
code: QRData,
|
||||
set: () => setQRData(),
|
||||
scan: () => start()
|
||||
});
|
||||
|
||||
const [ presentWebModal, dismissWebModal ] = useIonModal(QRWebModal, {
|
||||
|
||||
dismiss: () => dismissWebModal(),
|
||||
set: () => setQRData(),
|
||||
scan: handleScan,
|
||||
error: handleError
|
||||
});
|
||||
|
||||
return (
|
||||
<IonPage ref={ pageRef }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>QR Codes</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">QR Codes</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonGrid>
|
||||
{ codes.length < 1 && <NoQRCodes /> }
|
||||
{ codes.length > 0 && <QRCodeList codes={ codes } pageRef={ pageRef } /> }
|
||||
</IonGrid>
|
||||
<CustomFab start={ start } />
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tab1;
|
||||
@@ -1,105 +0,0 @@
|
||||
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonInput, IonItem, IonLabel, IonNote, IonPage, IonRow, IonTextarea, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
|
||||
import './Tab2.css';
|
||||
|
||||
import QRCode from "react-qr-code";
|
||||
import { useState } from 'react';
|
||||
import { addQRCode } from '../store/QRStore';
|
||||
|
||||
const Tab2 = () => {
|
||||
|
||||
const [ data, setData ] = useState("");
|
||||
const [ showToast ] = useIonToast();
|
||||
|
||||
const handleAdd = async () => {
|
||||
|
||||
if (data === "") {
|
||||
|
||||
showToast({
|
||||
|
||||
header: "Error!",
|
||||
message: "Please enter some data to store.",
|
||||
duration: 3000,
|
||||
color: "danger"
|
||||
});
|
||||
} else {
|
||||
|
||||
addQRCode(data);
|
||||
showToast({
|
||||
|
||||
header: "Success!",
|
||||
message: "QR Code stored successfully.",
|
||||
duration: 3000,
|
||||
color: "primary"
|
||||
});
|
||||
|
||||
setData("");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton text="QR Codes" />
|
||||
</IonButtons>
|
||||
<IonTitle>Generate QR Code</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Generate QR Code</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonGrid>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonItem lines="none">
|
||||
<IonLabel className="ion-text-wrap">
|
||||
<h1>You can generate a QR code to store or share with friends.</h1>
|
||||
<p>You'll see a live preview of the QR Code</p>
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonItem>
|
||||
<IonLabel position="stacked">Data to store</IonLabel>
|
||||
<IonTextarea rows="3" placeholder="Enter a URL or secret information" type="text" inputmode="text" value={ data } onIonChange={ e => setData(e.target.value) } />
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-text-center ion-margin-top">
|
||||
<IonCol size="12">
|
||||
{ data !== "" ? <QRCode value={ data } /> : <img src="/assets/placeholder2.png" alt="placeholder qr" height="256" /> }
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-text-center ion-justify-content-center">
|
||||
<IonCol size="10">
|
||||
<IonItem lines="none">
|
||||
<IonLabel className="ion-text-wrap ion-text-center">
|
||||
<p>When you're ready, you can store the generated QR Code</p>
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonButton expand="block" onClick={ handleAdd }>Store →</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tab2;
|
||||
@@ -1,102 +0,0 @@
|
||||
import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonNote, IonPage, IonRow, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
|
||||
import './Tab3.css';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { BarcodeScanner } from "@ionic-native/barcode-scanner";
|
||||
import QRCode from 'react-qr-code';
|
||||
import { addQRCode } from '../store/QRStore';
|
||||
import { reloadOutline } from 'ionicons/icons';
|
||||
|
||||
const Tab3 = () => {
|
||||
|
||||
const [ QRData, setQRData ] = useState(false);
|
||||
|
||||
const start = async () => {
|
||||
|
||||
const data = await BarcodeScanner.scan();
|
||||
setQRData(data);
|
||||
}
|
||||
|
||||
const [ showToast ] = useIonToast();
|
||||
|
||||
const handleAdd = async () => {
|
||||
|
||||
addQRCode(QRData.text, true);
|
||||
showToast({
|
||||
|
||||
header: "Success!",
|
||||
message: "QR Code stored successfully.",
|
||||
duration: 3000,
|
||||
color: "primary"
|
||||
});
|
||||
|
||||
setQRData(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton text="QR Codes" />
|
||||
</IonButtons>
|
||||
<IonTitle>Scan QR Code</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Scan QR Code</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonGrid>
|
||||
{ !QRData &&
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonButton expand="block" onClick={ start }>Scan →</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
}
|
||||
|
||||
{ QRData &&
|
||||
<>
|
||||
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
|
||||
<IonCol size="12">
|
||||
<QRCode value={ QRData.text } />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonCard>
|
||||
<IonCardHeader>
|
||||
<IonCardTitle>QR Code data</IonCardTitle>
|
||||
<IonNote>This is what the code represents</IonNote>
|
||||
</IonCardHeader>
|
||||
<IonCardContent>
|
||||
<p>{ QRData.text }</p>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonButton expand="block" fill="outline" onClick={ start }>
|
||||
<IonIcon icon={ reloadOutline } />
|
||||
Scan again</IonButton>
|
||||
</IonCol>
|
||||
<IonCol size="6">
|
||||
<IonButton expand="block" onClick={ handleAdd }>Store →</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</>
|
||||
}
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tab3;
|
||||
Binary file not shown.
Binary file not shown.
@@ -1,19 +0,0 @@
|
||||
import { Store } from 'pullstate';
|
||||
|
||||
const QRStore = new Store({
|
||||
codes: [],
|
||||
});
|
||||
|
||||
export default QRStore;
|
||||
|
||||
export const addQRCode = (data, scanned = false) => {
|
||||
QRStore.update((s) => {
|
||||
s.codes = [...s.codes, { id: new Date(), data, scanned }];
|
||||
});
|
||||
};
|
||||
|
||||
export const removeQRCode = (id) => {
|
||||
QRStore.update((s) => {
|
||||
s.codes = s.codes.filter((code) => code.id !== id);
|
||||
});
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
const getState = (state) => state;
|
||||
|
||||
// General getters
|
||||
export const getCodes = createSelector(getState, (state) => state.codes);
|
||||
@@ -1 +0,0 @@
|
||||
export { default as QRStore } from './QRStore';
|
||||
@@ -1,103 +0,0 @@
|
||||
#about-page {
|
||||
ion-toolbar {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
--background: transparent;
|
||||
--color: white;
|
||||
}
|
||||
|
||||
ion-toolbar ion-back-button,
|
||||
ion-toolbar ion-button,
|
||||
ion-toolbar ion-menu-button {
|
||||
--color: white;
|
||||
}
|
||||
|
||||
.about-header {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.about-header .about-image {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.about-header .madison {
|
||||
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
|
||||
}
|
||||
|
||||
.about-header .austin {
|
||||
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
|
||||
}
|
||||
|
||||
.about-header .chicago {
|
||||
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
|
||||
}
|
||||
|
||||
.about-header .seattle {
|
||||
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
|
||||
}
|
||||
|
||||
.about-info {
|
||||
position: relative;
|
||||
margin-top: -10px;
|
||||
border-radius: 10px;
|
||||
background: var(--ion-background-color, #fff);
|
||||
z-index: 2; // display rounded border above header image
|
||||
}
|
||||
|
||||
.about-info h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.about-info ion-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.about-info p {
|
||||
line-height: 130%;
|
||||
|
||||
color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
.about-info ion-icon {
|
||||
margin-inline-end: 32px;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Only
|
||||
*/
|
||||
|
||||
.ios .about-info {
|
||||
--ion-padding: 19px;
|
||||
}
|
||||
|
||||
.ios .about-info h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
#date-input-popover {
|
||||
--offset-y: -var(--ion-safe-area-bottom);
|
||||
|
||||
--max-width: 90%;
|
||||
--width: 336px;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
:root {
|
||||
|
||||
/* --ion-background-color: white; */
|
||||
--ion-tab-bar-color: rgb(76, 112, 141);
|
||||
--ion-tab-bar-color-selected: white;
|
||||
}
|
||||
|
||||
ion-tab-bar {
|
||||
|
||||
--background: rgb(1, 72, 131);
|
||||
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50px !important;
|
||||
|
||||
height: 50px;
|
||||
width: 40%;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
bottom: 24px;
|
||||
position: relative;
|
||||
margin: 0 auto !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
ion-tab-button {
|
||||
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
/* Ionic Variables and Theming. For more info, please see:
|
||||
http://ionicframework.com/docs/theming/ */
|
||||
|
||||
/** Ionic CSS Variables **/
|
||||
:root {
|
||||
/** primary **/
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
|
||||
/** secondary **/
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
|
||||
/** tertiary **/
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
|
||||
/** success **/
|
||||
--ion-color-success: #2dd36f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
|
||||
/** warning **/
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
|
||||
/** danger **/
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
|
||||
/** dark **/
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
/** medium **/
|
||||
--ion-color-medium: #92949c;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
|
||||
/** light **/
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import './Calls.css';
|
||||
|
||||
const Calls = () => {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Calls</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Calls</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Calls;
|
||||
@@ -1,289 +0,0 @@
|
||||
.chat-page ion-header,
|
||||
.chat-page ion-toolbar {
|
||||
|
||||
--min-height: 3.5rem;
|
||||
}
|
||||
|
||||
.chat-page ion-title {
|
||||
|
||||
margin-left: -3.5rem;
|
||||
}
|
||||
|
||||
.chat-page ion-title p {
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-contact {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-contact img {
|
||||
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
|
||||
.chat-contact-details {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.chat-contact-details p {
|
||||
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chat-contact-details ion-text {
|
||||
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
|
||||
border-radius: 5px;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-top: 0.8rem;
|
||||
|
||||
padding: 0.5rem;
|
||||
max-width: 80%;
|
||||
clear: both;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
transition: 0.2s all linear;
|
||||
}
|
||||
|
||||
.chat-bubble:last-child {
|
||||
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.bubble-sent {
|
||||
|
||||
background-color: var(--chat-bubble-sent-color);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.bubble-received {
|
||||
|
||||
background-color: var(--chat-bubble-received-color);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.chat-bubble p {
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-footer {
|
||||
|
||||
background-color: rgb(22, 22, 22);
|
||||
border-top: 1px solid rgb(47, 47, 47);
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.chat-footer ion-textarea {
|
||||
|
||||
background-color: rgb(31, 31, 31);
|
||||
border: 1px solid rgb(36, 36, 36);
|
||||
color: white;
|
||||
border-radius: 25px;
|
||||
padding-left: 0.5rem;
|
||||
caret-color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.chat-footer ion-icon {
|
||||
|
||||
font-size: 1.5rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
|
||||
width: 70%;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.chat-send-button {
|
||||
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
margin-top: -0.2rem !important;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chat-send-button ion-icon {
|
||||
|
||||
color: white;
|
||||
background-color: var(--ion-color-primary);
|
||||
font-size: 1.1rem;
|
||||
border-radius: 500px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
|
||||
color: rgb(165, 165, 165);
|
||||
font-size: 0.75rem;
|
||||
right: 0;
|
||||
bottom: 0 !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.bubble-arrow {
|
||||
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 6px;
|
||||
margin-top: -8px;
|
||||
/* top: 0px; */
|
||||
}
|
||||
|
||||
.bubble-arrow.alt {
|
||||
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
left: auto;
|
||||
right: -3px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.bubble-arrow:after {
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-top: 15px solid var(--chat-bubble-received-color);
|
||||
border-left: 15px solid transparent;
|
||||
border-radius: 4px 0 0 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.bubble-arrow.alt:after {
|
||||
|
||||
border-top: 15px solid var(--chat-bubble-sent-color);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.chat-reply-to-row {
|
||||
|
||||
bottom: 70px !important;
|
||||
position: absolute;
|
||||
|
||||
border-left: 4px solid rgb(224, 176, 18);
|
||||
width: 100%;
|
||||
background-color: rgb(22, 22, 22);
|
||||
border-top: 1px solid rgb(47, 47, 47);
|
||||
padding: 0.5rem;
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.chat-reply-to-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-reply-to-name {
|
||||
|
||||
color: rgb(224, 176, 18);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-reply-to-message {
|
||||
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.all-chats {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.chat-bottom-details {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.chat-bottom-details ion-icon {
|
||||
|
||||
font-size: 0.6rem;
|
||||
color: grey;
|
||||
margin-left: 0.5rem;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
|
||||
.chat-bottom-details span {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.75rem;
|
||||
color: rgb(190, 190, 190);
|
||||
}
|
||||
|
||||
.in-chat-reply-to-container {
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-left: 3px solid rgb(224, 176, 18);
|
||||
height: fit-content;
|
||||
padding: 0.5rem;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.in-chat-reply-to-container h1 {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgb(224, 176, 18);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.in-chat-reply-to-container p {
|
||||
|
||||
color: rgb(167, 167, 167);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
|
||||
position: absolute;
|
||||
bottom: 4.5rem;
|
||||
height: 5rem;
|
||||
background-color: red;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,378 +0,0 @@
|
||||
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonFooter, IonGrid, IonHeader, IonIcon, IonPage, IonRow, IonText, IonTextarea, IonTitle, IonToolbar, CreateAnimation, createGesture, useIonViewWillEnter, IonActionSheet, IonToast } from "@ionic/react";
|
||||
import { addOutline, alertOutline, callOutline, cameraOutline, micOutline, send, shareOutline, starOutline, trashOutline, videocamOutline } from "ionicons/icons";
|
||||
import { useRef } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
import { ChatStore, ContactStore } from "../store";
|
||||
import { getNotificationCount, markAllAsRead, sendChatMessage, starChatMessage } from "../store/ChatStore";
|
||||
import { getChat, getChats, getContact } from "../store/Selectors";
|
||||
|
||||
import { useLongPress } from 'react-use';
|
||||
import "./Chat.css"
|
||||
import ReplyTo from "../components/ReplyTo";
|
||||
import { ChatBottomDetails } from "../components/ChatBottomDetails";
|
||||
import { ChatRepliedQuote } from "../components/ChatRepliedQuote";
|
||||
import { useCamera } from "../hooks/useCamera";
|
||||
import { useGallery } from "../hooks/useGallery";
|
||||
|
||||
const Chat = () => {
|
||||
|
||||
const params = useParams();
|
||||
|
||||
// Global State
|
||||
const chat = ChatStore.useState(getChat(params.contact_id));
|
||||
const chats = ChatStore.useState(getChats);
|
||||
const contact = ContactStore.useState(getContact(params.contact_id));
|
||||
const notificationCount = getNotificationCount(chats);
|
||||
|
||||
const { takePhoto } = useCamera();
|
||||
const { prompt } = useGallery();
|
||||
|
||||
// Local state
|
||||
const [ message, setMessage ] = useState("");
|
||||
const [ showSendButton, setShowSendButton ] = useState(false);
|
||||
const [ replyToMessage, setReplyToMessage ] = useState(false);
|
||||
const [ messageSent, setMessageSent ] = useState(false);
|
||||
|
||||
const [ showActionSheet, setShowActionSheet ] = useState(false);
|
||||
const [ actionMessage, setActionMessage ] = useState(false);
|
||||
|
||||
const [ showToast, setShowToast ] = useState(false);
|
||||
const [ toastMessage, setToastMessage ] = useState("");
|
||||
|
||||
// Refs
|
||||
const contentRef = useRef();
|
||||
const swiperRefs = useRef([]);
|
||||
const textareaRef = useRef();
|
||||
const sideRef = useRef();
|
||||
const sendRef = useRef();
|
||||
const replyToAnimationRef = useRef();
|
||||
|
||||
const actionSheetButtons = [
|
||||
|
||||
{
|
||||
text: (actionMessage && actionMessage.starred) ? "Unstar Message" : "Star Message",
|
||||
icon: starOutline,
|
||||
handler: () => starChatMessage(params.contact_id, actionMessage.id)
|
||||
},
|
||||
actionMessage && actionMessage.received ?
|
||||
{
|
||||
text: "Reply To Message",
|
||||
icon: shareOutline,
|
||||
handler: () => showReplyToMessage(actionMessage)
|
||||
}
|
||||
:
|
||||
{
|
||||
text: "Unsend Message",
|
||||
icon: alertOutline,
|
||||
handler: () => toaster("I haven't implemented unsend :) Simple store update though")
|
||||
},
|
||||
{
|
||||
text: "Delete Message",
|
||||
icon: trashOutline,
|
||||
handler: () => toaster("I haven't implemented delete :) Simple store update though"),
|
||||
role: "destructive"
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
!showActionSheet && setActionMessage(false);
|
||||
}, [ showActionSheet ]);
|
||||
|
||||
// Scroll to end of content
|
||||
// Mark all chats as read if we come into a chat
|
||||
// Set up our swipe events for animations and gestures
|
||||
useIonViewWillEnter(() => {
|
||||
|
||||
scrollToBottom();
|
||||
setupObserver();
|
||||
markAllAsRead(params.contact_id);
|
||||
setSwipeEvents();
|
||||
});
|
||||
|
||||
// For displaying toast messages
|
||||
const toaster = message => {
|
||||
|
||||
setToastMessage(message);
|
||||
setShowToast(true);
|
||||
}
|
||||
|
||||
// Scroll to end of content
|
||||
const scrollToBottom = async () => {
|
||||
|
||||
contentRef.current.scrollToBottom();
|
||||
}
|
||||
|
||||
// Watch for DOM changes
|
||||
// Then scroll to bottom
|
||||
// This ensures that the new chat message has *actually* been rendered
|
||||
// Check this:
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
||||
const setupObserver = () => {
|
||||
|
||||
// Mutation Observers watch for DOM changes
|
||||
// This will ensure that we scroll to bottom AFTER the new chat has rendered
|
||||
const observer = new MutationObserver(() => {
|
||||
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
// We observe the ion-content (or containing element of chats)
|
||||
observer.observe(contentRef.current, {
|
||||
|
||||
childList: true
|
||||
});
|
||||
}
|
||||
|
||||
// Long press callback
|
||||
const onLongPress = (e) => {
|
||||
|
||||
const elementID = e.target.id;
|
||||
const chatMessageID = elementID.includes("chatText") ? parseInt(elementID.replace("chatText_", "")) : elementID.includes("chatTime") ? parseInt(elementID.replace("chatTime_", "")) : parseInt(elementID.replace("chatBubble_", ""));
|
||||
|
||||
const chatMessage = chat.filter(message => parseInt(message.id) === parseInt(chatMessageID))[0];
|
||||
|
||||
setActionMessage(chatMessage);
|
||||
setShowActionSheet(true);
|
||||
};
|
||||
|
||||
const longPressEvent = useLongPress(onLongPress, {
|
||||
|
||||
isPreventDefault: true,
|
||||
delay: 2000,
|
||||
});
|
||||
|
||||
const showReplyToMessage = async message => {
|
||||
|
||||
// Activate reply-to functionality
|
||||
setReplyToMessage(message);
|
||||
await replyToAnimationRef.current.animation.play();
|
||||
contentRef.current.scrollToBottom(300);
|
||||
}
|
||||
|
||||
const checkBubble = async (bubble, message, event) => {
|
||||
|
||||
if (event.deltaX >= 120) {
|
||||
|
||||
// Activate reply-to functionality
|
||||
bubble.style.transform = "none";
|
||||
showReplyToMessage(message);
|
||||
} else {
|
||||
|
||||
// Put chat bubble back to original position
|
||||
bubble.style.transform = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// Function to move a bubble with the deltaX swipe
|
||||
const moveBubble = (bubble, event) => {
|
||||
|
||||
if (event.velocityX > 0) {
|
||||
|
||||
bubble.style.transform = `translateX(${ event.deltaX }px)`;
|
||||
}
|
||||
}
|
||||
|
||||
const setSwipeEvents = () => {
|
||||
|
||||
chat.forEach((message, index) => {
|
||||
|
||||
if (!message.sent) {
|
||||
|
||||
const chatBubble = swiperRefs.current[index];
|
||||
|
||||
const swipeGesture = createGesture({
|
||||
el: chatBubble,
|
||||
onEnd: e => checkBubble(chatBubble, message, e),
|
||||
onMove: e => moveBubble(chatBubble, e)
|
||||
});
|
||||
|
||||
swipeGesture.enable();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const widthAnimation = {
|
||||
|
||||
property: "width",
|
||||
fromValue: "110%",
|
||||
toValue: "100%"
|
||||
};
|
||||
|
||||
const fadeAnimation = {
|
||||
|
||||
property: "opacity",
|
||||
fromValue: "100%",
|
||||
toValue: "0%"
|
||||
};
|
||||
|
||||
const sideButtonsAnimation = {
|
||||
|
||||
duration: 200,
|
||||
direction: showSendButton ? "normal" : "reverse",
|
||||
iterations: "1",
|
||||
fromTo: [ fadeAnimation ],
|
||||
easing: "ease-in-out"
|
||||
};
|
||||
|
||||
const sendButtonAnimation = {
|
||||
|
||||
duration: showSendButton ? 300 : 100,
|
||||
direction: !showSendButton ? "normal" : "reverse",
|
||||
iterations: "1",
|
||||
fromTo: [ fadeAnimation ],
|
||||
easing: "ease-in-out"
|
||||
};
|
||||
|
||||
const textareaAnimation = {
|
||||
|
||||
duration: 200,
|
||||
direction: !showSendButton ? "normal" : "reverse",
|
||||
iterations: "1",
|
||||
fromTo: [ widthAnimation ],
|
||||
easing: "ease-in-out"
|
||||
};
|
||||
|
||||
// Set the state value when message val changes
|
||||
useEffect(() => {
|
||||
|
||||
setShowSendButton(message !== "");
|
||||
}, [ message ]);
|
||||
|
||||
// Play the animations when the state value changes
|
||||
useEffect(() => {
|
||||
|
||||
textareaRef.current.animation.play();
|
||||
sideRef.current.animation.play();
|
||||
sendRef.current.animation.play();
|
||||
}, [ showSendButton ]);
|
||||
|
||||
const sendMessage = (image = false, imagePath = false) => {
|
||||
|
||||
if (message !== "" || image === true) {
|
||||
|
||||
sendChatMessage(params.contact_id, message, replyToMessage, replyToMessage ? replyToMessage.id : false, image, imagePath);
|
||||
setMessage("");
|
||||
|
||||
setMessageSent(true);
|
||||
setTimeout(() => setMessageSent(false), 10);
|
||||
image && setTimeout(() => scrollToBottom(), 100);
|
||||
}
|
||||
}
|
||||
|
||||
const handlePhoto = async () => {
|
||||
|
||||
const returnedFilePath = await takePhoto();
|
||||
sendMessage(true, returnedFilePath);
|
||||
}
|
||||
|
||||
const handlePrompt = async () => {
|
||||
|
||||
const returnedFilePath = await prompt();
|
||||
sendMessage(true, returnedFilePath);
|
||||
}
|
||||
|
||||
const replyToProps = {
|
||||
|
||||
replyToAnimationRef,
|
||||
replyToMessage,
|
||||
setReplyToMessage,
|
||||
contact: contact.name,
|
||||
messageSent
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<IonPage className="chat-page">
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonBackButton slot="start" text={ (notificationCount > 0) ? notificationCount : "" } />
|
||||
<IonTitle>
|
||||
|
||||
<div className="chat-contact">
|
||||
<img src={ contact.avatar } alt="avatar" />
|
||||
<div className="chat-contact-details">
|
||||
<p>{ contact.name }</p>
|
||||
<IonText color="medium">last seen today at 22:10</IonText>
|
||||
</div>
|
||||
</div>
|
||||
</IonTitle>
|
||||
|
||||
<IonButtons slot="end">
|
||||
<IonButton fill="clear" onClick={ () => toaster("As this is a UI only, video calling wouldn't work here.")}>
|
||||
<IonIcon icon={ videocamOutline } />
|
||||
</IonButton>
|
||||
|
||||
<IonButton fill="clear" onClick={ () => toaster("As this is a UI only, calling wouldn't work here.")}>
|
||||
<IonIcon icon={ callOutline } />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent id="main-chat-content" ref={ contentRef }>
|
||||
|
||||
{ chat.map((message, index) => {
|
||||
|
||||
const repliedMessage = chat.filter(subMessage => parseInt(subMessage.id) === parseInt(message.replyID))[0];
|
||||
|
||||
return (
|
||||
<div ref={ ref => swiperRefs.current[index] = ref } id={ `chatBubble_${ message.id }`} key={ index } className={ `chat-bubble ${ message.sent ? "bubble-sent" : "bubble-received" }` } { ...longPressEvent }>
|
||||
<div id={ `chatText_${ message.id }`}>
|
||||
|
||||
<ChatRepliedQuote message={ message } contact={ contact } repliedMessage={ repliedMessage } />
|
||||
|
||||
{ message.preview }
|
||||
{ message.image && message.imagePath && <img src={ message.imagePath } alt="chat message" /> }
|
||||
<ChatBottomDetails message={ message } />
|
||||
</div>
|
||||
|
||||
<div className={ `bubble-arrow ${ message.sent && "alt" }` }></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<IonActionSheet header="Message Actions" subHeader={ actionMessage && actionMessage.preview } isOpen={ showActionSheet } onDidDismiss={ () => setShowActionSheet(false) } buttons={ actionSheetButtons } />
|
||||
|
||||
<IonToast color="primary" isOpen={ showToast } onDidDismiss={ () => setShowToast(false) } message={ toastMessage } position="bottom" duration="3000" />
|
||||
</IonContent>
|
||||
|
||||
{ replyToMessage && <ReplyTo { ...replyToProps } /> }
|
||||
|
||||
<IonFooter className="chat-footer" id="chat-footer">
|
||||
<IonGrid>
|
||||
<IonRow className="ion-align-items-center">
|
||||
<IonCol size="1">
|
||||
<IonIcon icon={ addOutline } color="primary" onClick={ handlePrompt } />
|
||||
</IonCol>
|
||||
|
||||
<div className="chat-input-container">
|
||||
<CreateAnimation ref={ textareaRef } { ...textareaAnimation }>
|
||||
<IonTextarea rows="1" value={ message } onIonChange={ e => setMessage(e.target.value) } />
|
||||
</CreateAnimation>
|
||||
</div>
|
||||
|
||||
<CreateAnimation ref={ sideRef } { ...sideButtonsAnimation }>
|
||||
<IonCol size="1">
|
||||
<IonIcon icon={ cameraOutline } color="primary" onClick={ handlePhoto } />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="1">
|
||||
<IonIcon icon={ micOutline } color="primary" />
|
||||
</IonCol>
|
||||
</CreateAnimation>
|
||||
|
||||
<CreateAnimation ref={ sendRef } { ...sendButtonAnimation }>
|
||||
<IonCol size="1" className="chat-send-button" onClick={ sendMessage }>
|
||||
<IonIcon icon={ send } />
|
||||
</IonCol>
|
||||
</CreateAnimation>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonFooter>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chat;
|
||||
@@ -1,112 +0,0 @@
|
||||
.chat-row {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
/* align-content: center; */
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.chat-row ion-item {
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-row img {
|
||||
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 500px;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-content h2 {
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-content p,
|
||||
.chat-content h2 {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-content p {
|
||||
|
||||
font-size: 1rem;
|
||||
margin-top: 0.2rem;
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
|
||||
.chat-content p ion-icon {
|
||||
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
.chat-name-date {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chat-details .chat-date {
|
||||
|
||||
color: rgb(153, 153, 153);
|
||||
font-size: 0.8rem;
|
||||
padding-left: 0.5rem;;
|
||||
}
|
||||
|
||||
.chat-details .chat-unread {
|
||||
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.chat-notification-count {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-details {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
align-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chat-notification {
|
||||
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem;
|
||||
background-color: var(--ion-color-primary);
|
||||
border-radius: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.chat-content-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonButtons, IonButton, IonIcon, IonItem, IonModal } from '@ionic/react';
|
||||
import { checkmarkDone, createOutline } from 'ionicons/icons';
|
||||
import './Chats.css';
|
||||
|
||||
import { ChatStore, ContactStore } from '../store';
|
||||
import { getContacts, getChats } from '../store/Selectors';
|
||||
import { useEffect, useState } from 'react';
|
||||
import ChatItem from '../components/ChatItem';
|
||||
import { useRef } from 'react';
|
||||
import ContactModal from '../components/ContactModal';
|
||||
|
||||
const Chats = () => {
|
||||
|
||||
const pageRef = useRef();
|
||||
const contacts = ContactStore.useState(getContacts);
|
||||
const latestChats = ChatStore.useState(getChats);
|
||||
|
||||
const [ results, setResults ] = useState(latestChats);
|
||||
const [ showContactModal, setShowContactModal ] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
setResults(latestChats);
|
||||
}, [ latestChats ]);
|
||||
|
||||
const search = e => {
|
||||
|
||||
const searchTerm = e.target.value;
|
||||
|
||||
if (searchTerm !== "") {
|
||||
|
||||
const searchTermLower = searchTerm.toLowerCase();
|
||||
|
||||
const newResults = latestChats.filter(chat => contacts.filter(c => c.id === chat.contact_id)[0].name.toLowerCase().includes(searchTermLower));
|
||||
setResults(newResults);
|
||||
} else {
|
||||
|
||||
setResults(latestChats);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage ref={ pageRef }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonButton fill="clear">Edit</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="end">
|
||||
<IonButton fill="clear" onClick={ () => setShowContactModal(true) }>
|
||||
<IonIcon icon={ createOutline } />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Chats</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Chats</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonSearchbar onIonChange={ e => search(e) } />
|
||||
</IonHeader>
|
||||
|
||||
|
||||
{ results.map((chat, index) => {
|
||||
|
||||
return <ChatItem chat={ chat } key={ index } />;
|
||||
})}
|
||||
|
||||
<IonModal isOpen={ showContactModal } swipeToClose={ true } presentingElement={ pageRef.current } onDidDismiss={ () => setShowContactModal(false) }>
|
||||
<ContactModal close={ () => setShowContactModal(false) } />
|
||||
</IonModal>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chats;
|
||||
@@ -1,120 +0,0 @@
|
||||
import { IonCardSubtitle, IonCol, IonContent, IonHeader, IonIcon, IonItem, IonList, IonPage, IonRow, IonText, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import { camera, cloudUpload, cloudUploadOutline, heart, helpOutline, informationOutline, key, laptop, laptopOutline, logoWhatsapp, mailUnreadOutline, notificationsOutline, pencil, qrCodeOutline, star } from 'ionicons/icons';
|
||||
import styles from './Settings.module.scss';
|
||||
|
||||
const Settings = () => {
|
||||
|
||||
const settings = [
|
||||
|
||||
[
|
||||
{
|
||||
title: "Starred Messages",
|
||||
url: "/starred-messages",
|
||||
icon: star,
|
||||
color: "rgb(255, 208, 0)"
|
||||
},
|
||||
{
|
||||
title: "WhatsApp Web/Desktop",
|
||||
icon: laptopOutline,
|
||||
color: "rgb(33, 165, 114)"
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
title: "Account",
|
||||
icon: key,
|
||||
color: "rgb(0, 81, 255)"
|
||||
},
|
||||
{
|
||||
title: "Chats",
|
||||
icon: logoWhatsapp,
|
||||
color: "rgb(79, 182, 96)"
|
||||
},
|
||||
{
|
||||
title: "Notifications",
|
||||
icon: mailUnreadOutline,
|
||||
color: "rgb(233, 46, 46)"
|
||||
},
|
||||
{
|
||||
title: "Storage and Data",
|
||||
icon: cloudUploadOutline,
|
||||
color: "rgb(79, 182, 96)"
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
title: "Help",
|
||||
icon: informationOutline,
|
||||
color: "rgb(0, 81, 255)"
|
||||
},
|
||||
{
|
||||
title: "Tell a Friend",
|
||||
icon: heart,
|
||||
color: "rgb(228, 70, 70)"
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
return (
|
||||
<IonPage className={ styles.settingsPage }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonItem lines="none" className={ `${ styles.statusAvatar }` }>
|
||||
<img src="https://pbs.twimg.com/profile_images/1383061489469292548/5dhsPd4j_400x400.jpg" alt="avatar" />
|
||||
<IonCol className="ion-padding-start">
|
||||
<IonText color="white">
|
||||
<strong>Alan Montgomery</strong>
|
||||
</IonText>
|
||||
<br />
|
||||
<IonText color="medium" className={ styles.smallText }>This is my status!</IonText>
|
||||
</IonCol>
|
||||
|
||||
<IonRow className={ styles.statusActions }>
|
||||
<IonCol size="6">
|
||||
<IonIcon color="primary" icon={ qrCodeOutline } />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonItem>
|
||||
|
||||
{ settings.map((setting, index) => {
|
||||
|
||||
return (
|
||||
|
||||
<IonList key={ `setting_${ index }` } className={ `${ styles.settingsList } ion-margin-top ion-padding-top` }>
|
||||
|
||||
{ setting.map((option, index) => {
|
||||
|
||||
var itemStyle = { "--setting-item-color": option.color };
|
||||
|
||||
return (
|
||||
|
||||
<IonItem routerLink={ option.url ? option.url : "" } key={ `settingOption_${ index }` } lines="none" detail={ true }>
|
||||
<IonIcon icon={ option.icon } color="white" style={ itemStyle } />
|
||||
<p>{ option.title }</p>
|
||||
</IonItem>
|
||||
);
|
||||
})}
|
||||
</IonList>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="ion-text-center ion-justify-content-center ion-margin-top ion-padding-top">
|
||||
<IonText>from</IonText>
|
||||
<IonCardSubtitle className="ion-no-padding ion-no-margin">IONIC React HUB</IonCardSubtitle>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -1,69 +0,0 @@
|
||||
.settingsPage {
|
||||
|
||||
ion-item {
|
||||
|
||||
--background: rgb(27, 27, 27);
|
||||
background: rgb(27, 27, 27);
|
||||
border-top: 1px solid rgb(41, 41, 41);
|
||||
border-bottom: 1px solid rgb(41, 41, 41);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsList {
|
||||
|
||||
ion-item {
|
||||
|
||||
--background: rgb(27, 27, 27);
|
||||
background: rgb(27, 27, 27);
|
||||
// border: none !important;
|
||||
border-top: 1px solid rgb(34, 34, 34);
|
||||
border-bottom: 1px solid rgb(36, 36, 36);
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
|
||||
border-radius: 5px;
|
||||
padding: 0.2rem;
|
||||
font-size: 1.4rem;
|
||||
margin-right: 1.2rem;
|
||||
--setting-item-color: white;
|
||||
background-color: var(--setting-item-color);
|
||||
color: rgb(233, 46, 46);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.smallText {
|
||||
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
img {
|
||||
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.statusActions {
|
||||
|
||||
ion-icon {
|
||||
|
||||
padding: 0.5rem;
|
||||
background-color: rgb(56, 56, 56);
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import { IonBackButton, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar, useIonViewWillEnter } from '@ionic/react';
|
||||
import { chevronForward } from 'ionicons/icons';
|
||||
import { useState } from 'react';
|
||||
import { ChatStore, ContactStore } from '../store';
|
||||
import { getChats, getContacts } from '../store/Selectors';
|
||||
|
||||
import "./Starred.scss";
|
||||
|
||||
const Starred = () => {
|
||||
|
||||
const contacts = ContactStore.useState(getContacts);
|
||||
const chats = ChatStore.useState(getChats);
|
||||
|
||||
const [ starredMessages, setStarredMessages ] = useState(false);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
|
||||
var tempChats = [ ...chats ];
|
||||
var starred = [];
|
||||
|
||||
tempChats.forEach(tempChat => {
|
||||
|
||||
tempChat.chats.forEach(chat => {
|
||||
|
||||
if (chat.starred) {
|
||||
|
||||
starred.push({
|
||||
|
||||
contact_id: tempChat.contact_id,
|
||||
...chat
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setStarredMessages(starred);
|
||||
});
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonBackButton slot="start" text="Settings" />
|
||||
<IonTitle>Starred Messages</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
|
||||
{ starredMessages && starredMessages.map(starredMessage => {
|
||||
|
||||
const { id, contact_id, date, preview, received } = starredMessage;
|
||||
const contact = contacts.filter(c => c.id === contact_id)[0];
|
||||
|
||||
return (
|
||||
<div key={ `${ contact_id }_${ id }` } className="starred-message">
|
||||
<div className="starred-header">
|
||||
|
||||
<div className="starred-contact">
|
||||
<img src={ contact.avatar } alt="starred avatar" />
|
||||
<p>{ contact.name }</p>
|
||||
</div>
|
||||
|
||||
<p className="starred-date">{ date }</p>
|
||||
|
||||
</div>
|
||||
<div className={ `starred-content ${ received ? "received-starred-content" : "sent-starred-content" }` }>
|
||||
<p>{ preview }</p>
|
||||
<IonIcon icon={ chevronForward } />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{ starredMessages.length < 1 &&
|
||||
|
||||
<div className="no-starred">
|
||||
<img src="/assets/nostarred.png" alt="no starred" />
|
||||
<h1>No Starred Messages</h1>
|
||||
<p>Tap and hold on any message to star it, so you can easily find it later.</p>
|
||||
</div>
|
||||
}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Starred;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user