update public folder,
This commit is contained in:
louiscklaw
@@ -3,5 +3,28 @@
|
|||||||
"semi": true,
|
"semi": true,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"trailingComma": "es5",
|
"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",
|
"@hookform/resolvers": "^4.1.3",
|
||||||
"@ionic/react": "^8.5.0",
|
"@ionic/react": "^8.5.0",
|
||||||
"@ionic/react-router": "^8.5.0",
|
"@ionic/react-router": "^8.5.0",
|
||||||
|
"@ionic/storage": "^4.0.0",
|
||||||
"@mdx-js/react": "^3.1.0",
|
"@mdx-js/react": "^3.1.0",
|
||||||
"@react-hook/window-size": "^3.1.1",
|
"@react-hook/window-size": "^3.1.1",
|
||||||
"@types/leaflet": "^1.9.17",
|
"@types/leaflet": "^1.9.17",
|
||||||
@@ -29,10 +30,12 @@
|
|||||||
"pigeon-maps": "^0.22.1",
|
"pigeon-maps": "^0.22.1",
|
||||||
"pullstate": "^1",
|
"pullstate": "^1",
|
||||||
"react": "19.0.0",
|
"react": "19.0.0",
|
||||||
|
"react-canvas-draw": "^1.2.1",
|
||||||
"react-color": "^2.19.3",
|
"react-color": "^2.19.3",
|
||||||
"react-confetti": "^6.4.0",
|
"react-confetti": "^6.4.0",
|
||||||
"react-dom": "19.0.0",
|
"react-dom": "19.0.0",
|
||||||
"react-hook-form": "^7.55.0",
|
"react-hook-form": "^7.55.0",
|
||||||
|
"react-iconly": "^2.2.10",
|
||||||
"react-leaflet": "^5.0.0",
|
"react-leaflet": "^5.0.0",
|
||||||
"react-markdown": "^10.1.0",
|
"react-markdown": "^10.1.0",
|
||||||
"react-qr-code": "^2.0.15",
|
"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 HomeOrTutorial from './components/HomeOrTutorial';
|
||||||
import { Schedule } from './models/Schedule';
|
import { Schedule } from './models/Schedule';
|
||||||
import RedirectToLogin from './components/RedirectToLogin';
|
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';
|
import AppRoute from './AppRoute';
|
||||||
//
|
//
|
||||||
// TODO: resume DemoReactShop
|
// TODO: resume DemoReactShop
|
||||||
// import DemoReactShop from './pages/DemoReactShop';
|
// import DemoReactShop from './pages/DemoReactShop';
|
||||||
import DemoWeatherApp from './pages/DemoWeatherApp';
|
|
||||||
import DemoClubHouse from './pages/DemoClubHouse';
|
// TODO: remove obsoleted DemoWeatherApp
|
||||||
import DemoScoreBoard from './pages/DemoScoreBoard';
|
// import DemoWeatherApp from './pages/DemoWeatherApp';
|
||||||
import DemoQuoteApp from './pages/DemoQuoteApp';
|
|
||||||
import DemoQrScanner from './pages/DemoQrScanner';
|
|
||||||
// DemoShopAppUi
|
// DemoShopAppUi
|
||||||
import DemoShopAppUi from './pages/DemoShopAppUi';
|
|
||||||
// DemoDictionaryApp
|
// DemoDictionaryApp
|
||||||
import DemoDictionaryApp from './pages/DemoDictionaryApp';
|
|
||||||
// demo-recipe-app
|
// demo-recipe-app
|
||||||
import DemoRecipeApp from './pages/DemoRecipeApp';
|
|
||||||
|
|
||||||
// DemoSlidingProfile
|
// DemoSlidingProfile
|
||||||
import DemoSlidingProfile from './pages/DemoSlidingProfile';
|
|
||||||
|
|
||||||
// DemoQuizApp
|
// DemoQuizApp
|
||||||
import DemoQuizApp from './pages/DemoQuizApp';
|
|
||||||
import DemoBlogPostUi from './pages/DemoBlogPostUi';
|
//
|
||||||
import DemoReactTravelApp from './pages/DemoReactTravelApp';
|
// import DemoReactMarvelApp from './pages/DemoReactMarvelApp';
|
||||||
import DemoPinterestFloatingTabBar from './pages/DemoPinterestFloatingTabBar';
|
// import DemoReactOnboardingUI from './pages/DemoReactOnboardingUI';
|
||||||
import DemoRestaurantFinder from './pages/DemoRestaurantFinder';
|
// import DemoReactTabsMenusCustom from './pages/DemoReactTabsMenusCustom';
|
||||||
import DemoReactOverlayHooks from './pages/DemoReactOverlayHooks';
|
// import DemoReactThemeSwitcher from './pages/DemoReactThemeSwitcher';
|
||||||
import DemoReactSwitchTabs from './pages/DemoReactSwitchTabs';
|
// import DemoSkeletonText from './pages/DemoSkeletonText';
|
||||||
import DemoReactPollApp from './pages/DemoReactPollApp';
|
// import DemoStickyBottomSheetExample from './pages/DemoStickyBottomSheetExample';
|
||||||
import DemoReactWhatsAppClone from './pages/DemoReactWhatsAppClone';
|
// import DemoStorageExample from './pages/DemoStorageExample';
|
||||||
import Demo2FaExample from './pages/Demo2FaExample';
|
// import DemoSwiperjsTutorial from './pages/DemoSwiperjsTutorial';
|
||||||
import DemoAccordionTutorial from './pages/DemoAccordionTutorial';
|
// TODO: SCSS of this directory will alter the main page
|
||||||
import DemoBankingUi from './pages/DemoBankingUi';
|
import AppDemoRoute from './routes/DemoRoute';
|
||||||
import DemoCapacitorGoogleMapsTutorial from './pages/DemoCapacitorGoogleMapsTutorial';
|
import Settings from './pages/Settings';
|
||||||
import DemoColorTutorial from './pages/DemoColorTutorial';
|
|
||||||
|
|
||||||
setupIonicReact();
|
setupIonicReact();
|
||||||
|
|
||||||
@@ -122,14 +107,7 @@ interface DispatchProps {
|
|||||||
|
|
||||||
interface IonicAppProps extends StateProps, DispatchProps {}
|
interface IonicAppProps extends StateProps, DispatchProps {}
|
||||||
|
|
||||||
const IonicApp: React.FC<IonicAppProps> = ({
|
const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn, setUsername, loadConfData, loadUserData }) => {
|
||||||
darkMode,
|
|
||||||
schedule,
|
|
||||||
setIsLoggedIn,
|
|
||||||
setUsername,
|
|
||||||
loadConfData,
|
|
||||||
loadUserData,
|
|
||||||
}) => {
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadUserData();
|
loadUserData();
|
||||||
loadConfData();
|
loadConfData();
|
||||||
@@ -153,98 +131,28 @@ const IonicApp: React.FC<IonicAppProps> = ({
|
|||||||
<AppRoute />
|
<AppRoute />
|
||||||
|
|
||||||
<Route path="/tabs" render={() => <MainTabs />} />
|
<Route path="/tabs" render={() => <MainTabs />} />
|
||||||
<Route path={paths.DEMO_WEATHER_APP} render={() => <DemoWeatherApp />} />
|
|
||||||
{/* */}
|
<AppDemoRoute />
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
{/* */}
|
{/* */}
|
||||||
|
|
||||||
<Route path={paths.DEMO_ACCORDION_TUTORIAL} render={() => <DemoAccordionTutorial />} />
|
{/* TODO: need update to @capacitor/barcode-scanner */}
|
||||||
{/* */}
|
{/* <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQrCode />} /> */}
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
{/* */}
|
|
||||||
|
|
||||||
<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: resume DemoReactShop */}
|
{/* TODO: resume DemoReactShop */}
|
||||||
{/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}
|
{/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}
|
||||||
|
|
||||||
<Route path={paths.DEMO_REACT_SWITCH_TABS} render={() => <DemoReactSwitchTabs />} />
|
{/* have problemx` */}
|
||||||
<Route path={paths.DEMO_REACT_TRAVEL_APP} render={() => <DemoReactTravelApp />} />
|
{/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
|
||||||
<Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />
|
|
||||||
<Route path={paths.DEMO_RESTAURANT_FINDER} render={() => <DemoRestaurantFinder />} />
|
{/* TODO: scss will alter the main page, */}
|
||||||
<Route path={paths.DEMO_SCORE_BOARD} render={() => <DemoScoreBoard />} />
|
{/* <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} /> */}
|
||||||
<Route path={paths.DEMO_SHOP_APP_UI} render={() => <DemoShopAppUi />} />
|
|
||||||
<Route path={paths.DEMO_SLIDING_PROFILE} render={() => <DemoSlidingProfile />} />
|
{/* 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="/account" component={Account} />
|
||||||
<Route path="/login" component={Login} />
|
<Route path="/login" component={Login} />
|
||||||
@@ -253,6 +161,7 @@ const IonicApp: React.FC<IonicAppProps> = ({
|
|||||||
<Route path="/signup" component={Signup} />
|
<Route path="/signup" component={Signup} />
|
||||||
<Route path="/support" component={Support} />
|
<Route path="/support" component={Support} />
|
||||||
<Route path="/tutorial" component={Tutorial} />
|
<Route path="/tutorial" component={Tutorial} />
|
||||||
|
<Route path="/settings" component={Settings} />
|
||||||
|
|
||||||
<Route
|
<Route
|
||||||
path="/logout"
|
path="/logout"
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { Route } from 'react-router';
|
|||||||
import NotImplemented from './pages/NotImplemented';
|
import NotImplemented from './pages/NotImplemented';
|
||||||
import EventDetail from './pages/EventDetail';
|
import EventDetail from './pages/EventDetail';
|
||||||
import MemberProfile from './pages/MemberProfile';
|
import MemberProfile from './pages/MemberProfile';
|
||||||
import paths from './paths';
|
import PATHS from './PATHS';
|
||||||
import Settings from './pages/Settings';
|
import Settings from './pages/Settings';
|
||||||
import ChangeLanguage from './pages/ChangeLanguage';
|
import ChangeLanguage from './pages/ChangeLanguage';
|
||||||
import ServiceAgreement from './pages/ServiceAgreement';
|
import ServiceAgreement from './pages/ServiceAgreement';
|
||||||
@@ -28,10 +28,10 @@ const AppRoute: React.FC = () => {
|
|||||||
{/* <Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} /> */}
|
{/* <Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} /> */}
|
||||||
|
|
||||||
{/* */}
|
{/* */}
|
||||||
<Route exact={true} path={paths.SETTINGS} component={Settings} />
|
<Route exact={true} path={PATHS.SETTINGS} component={Settings} />
|
||||||
<Route exact={true} path={paths.CHANGE_LANGUAGE} component={ChangeLanguage} />
|
<Route exact={true} path={PATHS.CHANGE_LANGUAGE} component={ChangeLanguage} />
|
||||||
<Route exact={true} path={paths.SERVICE_AGREEMENT} component={ServiceAgreement} />
|
<Route exact={true} path={PATHS.SERVICE_AGREEMENT} component={ServiceAgreement} />
|
||||||
<Route exact={true} path={paths.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
|
<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 NotImplemented from './pages/NotImplemented';
|
||||||
import EventDetail from './pages/EventDetail';
|
import EventDetail from './pages/EventDetail';
|
||||||
import MemberProfile from './pages/MemberProfile';
|
import MemberProfile from './pages/MemberProfile';
|
||||||
import paths from './paths';
|
import PATHS from './PATHS';
|
||||||
import MembersNearByList from './pages/MembersNearByList';
|
import MembersNearByList from './pages/MembersNearByList';
|
||||||
import OrderList from './pages/OrderList';
|
import OrderList from './pages/OrderList';
|
||||||
import MessageList from './pages/MessageList';
|
import MessageList from './pages/MessageList';
|
||||||
@@ -17,25 +17,25 @@ import DemoList from './pages/DemoList';
|
|||||||
const TabAppRoute: React.FC = () => {
|
const TabAppRoute: React.FC = () => {
|
||||||
return (
|
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} />
|
<Route path="/tabs/demo-list" render={() => <DemoList />} exact={true} />
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
import axios from '../../lib/axios';
|
import axios from '../../lib/axios';
|
||||||
|
|
||||||
import { JWT_STORAGE_KEY } from './constant.js';
|
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 {
|
try {
|
||||||
alert('Token expired!');
|
alert('Token expired!');
|
||||||
sessionStorage.removeItem(JWT_STORAGE_KEY);
|
sessionStorage.removeItem(JWT_STORAGE_KEY);
|
||||||
window.location.href = paths.SIGN_IN;
|
window.location.href = PATHS.SIGN_IN;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error during token expiration:', error);
|
console.error('Error during token expiration:', error);
|
||||||
throw 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