feat: add content in emergency location page

akmalhisyammm · Nov 15, 2021 · 7a92437 · 7a92437
1 parent a7ab2bc
commit 7a92437
Show file tree

Hide file tree

Showing 5 changed files with 216 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,11 +13,13 @@
   "dependencies": {
     "@capacitor/app": "1.0.6",
     "@capacitor/core": "3.3.0",
+    "@capacitor/geolocation": "^1.1.3",
     "@capacitor/haptics": "1.1.3",
     "@capacitor/keyboard": "1.1.3",
     "@capacitor/status-bar": "1.0.6",
     "@ionic/react": "^5.5.0",
     "@ionic/react-router": "^5.5.0",
+    "@react-google-maps/api": "^2.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",

diff --git a/src/index.tsx b/src/index.tsx
@@ -3,10 +3,15 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import reportWebVitals from './reportWebVitals';
+import { LoadScript } from '@react-google-maps/api';
+
+const googleMapsApiKey = `${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`;
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <LoadScript googleMapsApiKey={googleMapsApiKey}>
+      <App />
+    </LoadScript>
   </React.StrictMode>,
   document.getElementById('root')
 );

diff --git a/src/pages/main/EmergencyLocation.tsx b/src/pages/main/EmergencyLocation.tsx
@@ -1,9 +1,107 @@
-import { IonPage } from '@ionic/react';
+import { useEffect, useState } from 'react';
+import {
+  IonButtons,
+  IonChip,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonMenuButton,
+  IonPage,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { Geolocation } from '@capacitor/geolocation';
+import { GoogleMap, Marker } from '@react-google-maps/api';
+import { locateOutline } from 'ionicons/icons';
+
+interface Coordinates {
+  lat: number;
+  lng: number;
+}
 
 const EmergencyLocation: React.FC = () => {
+  const [currentPosition, setCurrentPosition] = useState<Coordinates>({
+    lat: -6.257377926995551,
+    lng: 106.61829861017398,
+  });
+
+  useEffect(() => {
+    getCurrentPosition();
+  }, []);
+
+  const getCurrentPosition = async () => {
+    const coordinates = await Geolocation.getCurrentPosition({
+      enableHighAccuracy: true,
+    });
+
+    setCurrentPosition({
+      lat: coordinates.coords.latitude,
+      lng: coordinates.coords.longitude,
+    });
+  };
+
   return (
     <IonPage>
-      <h1>Emergency Location Page</h1>
+      <IonHeader>
+        <IonToolbar color="danger">
+          <IonTitle>Lokasi Layanan Darurat</IonTitle>
+          <IonButtons slot="start">
+            <IonMenuButton />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonToolbar color="primary">
+          <IonSearchbar
+            color="light"
+            placeholder="Cari Lokasi Layanan Darurat..."
+            style={{
+              '--border-radius': '24px',
+              '--box-shadow': '0 0 0 1px var(--ion-color-dark)',
+              margin: '12px 0 8px',
+              padding: '0 6px',
+            }}
+          />
+          <div
+            style={{
+              marginBottom: '12px',
+              overflow: 'auto',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            <IonChip outline style={{ borderColor: '#ffffff' }}>
+              Relevansi
+            </IonChip>
+            <IonChip outline style={{ borderColor: '#ffffff' }}>
+              Sedang Buka
+            </IonChip>
+            <IonChip outline style={{ borderColor: '#ffffff' }}>
+              Rating Tertinggi
+            </IonChip>
+          </div>
+        </IonToolbar>
+        <div style={{ width: '100%', height: '100%', paddingBottom: '112px' }}>
+          <GoogleMap
+            mapContainerStyle={{
+              width: '100%',
+              height: '100%',
+            }}
+            center={currentPosition}
+            zoom={14}
+          >
+            <Marker position={currentPosition} />
+          </GoogleMap>
+        </div>
+
+        <IonFab horizontal="start" vertical="bottom" slot="fixed">
+          <IonFabButton color="primary" onClick={getCurrentPosition}>
+            <IonIcon icon={locateOutline} />
+          </IonFabButton>
+        </IonFab>
+      </IonContent>
     </IonPage>
   );
 };

diff --git a/src/theme/variables.css b/src/theme/variables.css
@@ -46,7 +46,7 @@ http://ionicframework.com/docs/theming/ */
   /** danger **/
   --ion-color-danger: #e06c78;
   --ion-color-danger-rgb: 224, 108, 120;
-  --ion-color-danger-contrast: #000000;
+  --ion-color-danger-contrast: #ffffff;
   --ion-color-danger-contrast-rgb: 0, 0, 0;
   --ion-color-danger-shade: #c55f6a;
   --ion-color-danger-tint: #e37b86;
@@ -120,7 +120,7 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-color-danger: #e06c78;
     --ion-color-danger-rgb: 224, 108, 120;
-    --ion-color-danger-contrast: #000000;
+    --ion-color-danger-contrast: #ffffff;
     --ion-color-danger-contrast-rgb: 0, 0, 0;
     --ion-color-danger-shade: #c55f6a;
     --ion-color-danger-tint: #e37b86;