cynthia.rivera15
/
TallerSalud
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

Added geolocation to sms message

Ángel G. Romero Rosario 2 jaren geleden
bovenliggende
cfde94f722
commit
07818a3d88
13 gewijzigde bestanden met toevoegingen van 115 en 62 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 16
    0
      Readme.txt
  2. 1
    0
      android/app/capacitor.build.gradle
  3. 3
    0
      android/capacitor.settings.gradle
  4. 6
    6
      build/asset-manifest.json
  5. 1
    1
      build/index.html
  6. 1
    1
      build/service-worker.js
  7. 3
    0
      ios/App/App/Info.plist
  8. 1
    0
      ios/App/Podfile
  9. 2
    2
      src/pages/Flag.tsx
  10. 3
    11
      src/pages/Home.tsx
  11. 2
    2
      src/pages/Info.tsx
  12. 76
    0
      src/pages/components/GeolocationButton.tsx
  13. 0
    39
      src/pages/components/helpButton.tsx

+ 16
- 0
Readme.txt Bestand weergeven 

@@ -0,0 +1,16 @@
1 
+Application name: TPC (Tu paz cuenta)
2 
+
3 
+Developers:
4 
+ * Ángel G. Romero Rosario
5 
+ * Cynthia M. Rivera Sánchez
6 
+ * Jantony Velázquez Gauthier
7 
+ * Dylan A. Cedrés Rivera
8 
+
9 
+Purpose of the application:
10 
+      * Help and guide users (victims of gender violence and similar)
11 
+        about how to handle certain situations where their lives may be affected
12 
+        negatively and may be in danger. In addition, it would allow them to make contact with
13 
+        emergency services in a dangerous situation. Create a “safe space” for
14 
+        the user can feel safe to ask for help and not feel that they are alone in the face of what
15 
+        what's going on.
16 
+

+ 1
- 0
android/app/capacitor.build.gradle Bestand weergeven 

@@ -11,6 +11,7 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
11 11 
 dependencies {
12 12 
     implementation project(':capacitor-app')
13 13 
     implementation project(':capacitor-camera')
14 
+    implementation project(':capacitor-filesystem')
14 15 
     implementation project(':capacitor-haptics')
15 16 
     implementation project(':capacitor-keyboard')
16 17 
     implementation project(':capacitor-status-bar')

+ 3
- 0
android/capacitor.settings.gradle Bestand weergeven 

@@ -8,6 +8,9 @@ project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/
8 8 
 include ':capacitor-camera'
9 9 
 project(':capacitor-camera').projectDir = new File('../node_modules/@capacitor/camera/android')
10 10
11 
+include ':capacitor-filesystem'
12 
+project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacitor/filesystem/android')
13 
+
11 14 
 include ':capacitor-haptics'
12 15 
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
13 16

+ 6
- 6
build/asset-manifest.json Bestand weergeven 

@@ -1,7 +1,7 @@
1 1 
 {
2 2 
   "files": {
3 
-    "main.css": "/static/css/main.57f71c13.css",
4 
-    "main.js": "/static/js/main.5c91e17d.js",
3 
+    "main.css": "/static/css/main.efe4b27a.css",
4 
+    "main.js": "/static/js/main.8518b217.js",
5 5 
     "static/js/738.23d458d2.chunk.js": "/static/js/738.23d458d2.chunk.js",
6 6 
     "static/js/372.1940d375.chunk.js": "/static/js/372.1940d375.chunk.js",
7 7 
     "static/js/856.c55f21fe.chunk.js": "/static/js/856.c55f21fe.chunk.js",
 
@@ -31,8 +31,8 @@
31 31 
     "static/media/1.png": "/static/media/1.a51ecd8ad682ea72b959.png",
32 32 
     "service-worker.js": "/service-worker.js",
33 33 
     "index.html": "/index.html",
34 
-    "main.57f71c13.css.map": "/static/css/main.57f71c13.css.map",
35 
-    "main.5c91e17d.js.map": "/static/js/main.5c91e17d.js.map",
34 
+    "main.efe4b27a.css.map": "/static/css/main.efe4b27a.css.map",
35 
+    "main.8518b217.js.map": "/static/js/main.8518b217.js.map",
36 36 
     "738.23d458d2.chunk.js.map": "/static/js/738.23d458d2.chunk.js.map",
37 37 
     "372.1940d375.chunk.js.map": "/static/js/372.1940d375.chunk.js.map",
38 38 
     "856.c55f21fe.chunk.js.map": "/static/js/856.c55f21fe.chunk.js.map",
 
@@ -44,7 +44,7 @@
44 44 
     "377.31684c30.chunk.js.map": "/static/js/377.31684c30.chunk.js.map"
45 45 
   },
46 46 
   "entrypoints": [
47 
-    "static/css/main.57f71c13.css",
48 
-    "static/js/main.5c91e17d.js"
47 
+    "static/css/main.efe4b27a.css",
48 
+    "static/js/main.8518b217.js"
49 49 
   ]
50 50 
 }

+ 1
- 1
build/index.html Bestand weergeven 

@@ -1 +1 @@
1 
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Ionic App</title><base href="/"/><meta name="color-scheme" content="light dark"/><meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><meta name="format-detection" content="telephone=no"/><meta name="msapplication-tap-highlight" content="no"/><link rel="manifest" href="/manifest.json"/><link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Ionic App"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><script defer="defer" src="/static/js/main.5c91e17d.js"></script><link href="/static/css/main.57f71c13.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
1 
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Ionic App</title><base href="/"/><meta name="color-scheme" content="light dark"/><meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><meta name="format-detection" content="telephone=no"/><meta name="msapplication-tap-highlight" content="no"/><link rel="manifest" href="/manifest.json"/><link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Ionic App"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><script defer="defer" src="/static/js/main.8518b217.js"></script><link href="/static/css/main.efe4b27a.css" rel="stylesheet"></head><body><div id="root"></div></body></html>

+ 1
- 1
build/service-worker.js
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 3
- 0
ios/App/App/Info.plist Bestand weergeven 

@@ -51,5 +51,8 @@
51 51 
 	<string>To add images</string>
52 52 
 	<key>NSPhotoLibraryUsageDescription</key>
53 53 
 	<string>To store images</string>
54 
+	<!-- Ask for user location permisions -->
55 
+	<key>NSLocationWhenInUseUsageDescription</key>
56 
+ 	<string>Location is needed to share with emergency contact</string>
54 57 
 </dict>
55 58 
 </plist>

+ 1
- 0
ios/App/Podfile Bestand weergeven 

@@ -13,6 +13,7 @@ def capacitor_pods
13 13 
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
14 14 
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
15 15 
   pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
16 
+  pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
16 17 
   pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
17 18 
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
18 19 
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'

+ 2
- 2
src/pages/Flag.tsx Bestand weergeven 

@@ -12,7 +12,7 @@ import {
12 12 
   IonLabel,
13 13 
   IonPage,
14 14 
 } from '@ionic/react';
15 
-import { HelpBtn } from './components/helpButton';
15 
+import GeolocationButton from './components/GeolocationButton';
16 16
17 17 
 import './styles/styles.css';
18 18 
 
@@ -48,7 +48,7 @@ const Flag: React.FC = () => {
48 48 
   return (
49 49 
     <IonPage>
50 50 
       {/* This is the title with the button to ask for help */}
51 
-      <HelpBtn />
51 
+      <GeolocationButton />
52 52
53 53 
       <IonContent>
54 54 
         {/* Changed the behavior so it has only one flag open at a time */}

+ 3
- 11
src/pages/Home.tsx Bestand weergeven 

@@ -5,7 +5,7 @@
5 5
6 6 
 import { IonContent, IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonButton, IonIcon, useIonAlert} from '@ionic/react';
7 7 
 import { arrowDownCircle } from 'ionicons/icons';
8 
-import { HelpBtn } from "./components/helpButton"
8 
+import GeolocationButton from "./components/GeolocationButton"
9 9
10 10 
 import './styles/styles.css';
11 11 
 import * as math from 'mathjs';
 
@@ -31,7 +31,7 @@ const Home: React.FC = () => {
31 31
32 32 
     <IonPage>
33 33 
       {/* This is the title with the button to ask for help */}
34 
-      <HelpBtn/>
34 
+      <GeolocationButton/>
35 35 
       <IonContent fullscreen>
36 36
37 37 
         {/* Card 1 */}
 
@@ -41,15 +41,7 @@ const Home: React.FC = () => {
41 41 
             <IonCardTitle class="card-date">
42 42 
               {date}
43 43 
               {/* Alert message */}
44 
-              <IonButton fill="clear"
45 
-                // onClick={() =>
46 
-                //   presentAlert({
47 
-                //     header: 'Alerta',
48 
-                //     message: 'La imagen se guardó correctamente en la galería',
49 
-                //     buttons: ['OK'],
50 
-                //   })
51 
-                // }>
52 
-                >
44 
+              <IonButton fill="clear">
53 45 
                 {/* Download message button */}
54 46 
                 <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon>
55 47 
               </IonButton>

+ 2
- 2
src/pages/Info.tsx Bestand weergeven 

@@ -4,14 +4,14 @@
4 4 
 */
5 5
6 6 
 import { IonCard, IonContent, IonPage, IonText } from '@ionic/react';
7 
-import { HelpBtn } from './components/helpButton';
7 
+import GeolocationButton from './components/GeolocationButton';
8 8 
 import './styles/styles.css';
9 9
10 10 
 const Info: React.FC = () => {
11 11 
   return (
12 12 
     <IonPage>
13 13 
       {/* This is the title with the button to ask for help */}
14 
-      <HelpBtn />
14 
+      <GeolocationButton/>
15 15
16 16 
       <IonContent fullscreen>
17 17 
         {/* This card contins all the contact information */}

+ 76
- 0
src/pages/components/GeolocationButton.tsx Bestand weergeven 

@@ -0,0 +1,76 @@
1 
+
2 
+import { IonButton, IonCol, IonGrid, IonHeader, IonIcon, IonLoading, IonRow, IonText, IonTitle, IonToolbar, isPlatform } from '@ionic/react';
3 
+import { heart } from 'ionicons/icons';
4 
+import { Geolocation, Geoposition } from '@ionic-native/geolocation'
5 
+
6 
+import '../styles/styles.css';
7 
+import { useState } from 'react';
8 
+
9 
+// Determine which platform the app is running (ios or android)
10 
+// Compose message that will be opened with the click of a button
11 
+const separator = isPlatform('ios') === true ? '&' : '?';
12 
+const phoneNumber = '7877101934';
13 
+const message = '¡Ayuda! ¡MI VIDA CORRE PELIGRO! Estas son las coordenadas en donde me encuentro: ';
14 
+
15 
+// Message that SMS will receive
16 
+const finalMessage = "sms:" + phoneNumber + separator + "body=" + message;
17 
+
18 
+// This component receives a message and opens the SMS app with a given phone number
19 
+const GeolocationButton: React.FC = () => {
20 
+
21 
+    const [loading, setLoading] = useState<boolean>(false);
22 
+    const [error, setError] = useState();
23 
+    const [position, setPosition] = useState<Geoposition>();
24 
+
25 
+
26 
+    const getLocation = async () => {
27 
+        setLoading(true);
28 
+
29 
+        try {
30 
+            const position = await Geolocation.getCurrentPosition();
31 
+            // console.log(position.coords.latitude)
32 
+            setPosition(position);
33 
+            setLoading(false);
34 
+            // Open the SMS app with the location of the user
35 
+            window.open(finalMessage +
36 
+                        "lat: " + position?.coords.latitude +
37 
+                        ", long: " + position.coords.longitude)
38 
+
39 
+        } catch(e) {
40 
+            setLoading(false);
41 
+        }
42 
+    };
43 
+
44 
+    return (
45 
+        <IonHeader>
46 
+          <IonToolbar>
47 
+            <IonGrid>
48 
+              <IonRow>
49 
+                <IonCol class="title-col">
50 
+                  <IonTitle class="screen-titles">
51 
+                    <IonText>TPC</IonText>
52 
+                  </IonTitle>
53 
+                </IonCol>
54 
+
55 
+                <IonCol>
56 
+                {/* This message shows the user that the location is being fetched */}
57 
+                  <IonLoading
58 
+                    isOpen={loading}
59 
+                    message={"Buscando ubicación..."}
60 
+                    onDidDismiss={() => setLoading(false)}
61 
+                   />
62 
+                  <IonButton class="ion-btn-download" fill="clear"
63 
+                    onClick={getLocation}>
64 
+                    <IonIcon slot="icon-only" icon={heart} class="msg-button"></IonIcon>
65 
+                  </IonButton>
66 
+                </IonCol>
67 
+
68 
+               </IonRow>
69 
+            </IonGrid>
70 
+          </IonToolbar>
71 
+        </IonHeader>
72 
+
73 
+    );
74 
+};
75 
+
76 
+export default GeolocationButton;

+ 0
- 39
src/pages/components/helpButton.tsx Bestand weergeven 

@@ -1,39 +0,0 @@
1 
-
2 
-import { IonButton, IonCol, IonGrid, IonHeader, IonIcon, IonRow, IonText, IonTitle, IonToolbar, isPlatform } from '@ionic/react';
3 
-import { heart } from 'ionicons/icons';
4 
-
5 
-import '../styles/styles.css';
6 
-
7 
-// Determine which platform the app is running (ios or android)
8 
-// Compose message that will be opened with the click of a button
9 
-const separator = isPlatform('ios') === false ? '&' : '?'
10 
-const phoneNumber = '7877101934'
11 
-const message = 'Hola. Tengo una emergencia, mi ubicación es esta:'
12 
-
13 
-// Message that SMS will receive
14 
-const finalMessage = "sms:" + phoneNumber + separator + "body=" + message;
15 
-
16 
-// This function receives a message and opens the SMS app with a given phone number
17 
-export function HelpBtn() {
18 
-    return (
19 
-        <IonHeader>
20 
-            <IonToolbar>
21 
-                <IonGrid>
22 
-                    <IonRow>
23 
-                        <IonCol class="title-col">
24 
-                            <IonTitle class="screen-titles">
25 
-                                <IonText>TPC</IonText>
26 
-                            </IonTitle>
27 
-                        </IonCol>
28 
-                        <IonCol>
29 
-                            <IonButton class="ion-btn-download" fill="clear" href={finalMessage}>
30 
-                                <IonIcon slot="icon-only" icon={heart} class="msg-button"></IonIcon>
31 
-                            </IonButton>
32 
-                        </IonCol>
33 
-                    </IonRow>
34 
-                </IonGrid>
35 
-            </IonToolbar>
36 
-        </IonHeader>
37 
-
38 
-    );
39 
-}