iic2154-uc-cl · luzmagurzua · Oct 30, 2024 · Oct 31, 2024 · Oct 31, 2024 · Nov 1, 2024
diff --git a/.env b/.env
@@ -13,6 +13,16 @@
 # NEXT_PUBLIC_LOGIN_REDIRECT_URL=http://localhost:3000/post/CreateProperty
 # NEXT_PUBLIC_LOGOUT_REDIRECT_URL=http://localhost:3000
 
+
+VITE_GOOGLE_MAPS_API_KEY=AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E
+
+#VITE_AUTH0_AUDIENCE=https://geomap/
+#VITE_AUTH0_DOMAIN=dev-7w1no2zl1opt24if.us.auth0.com
+#VITE_AUTH0_CLIENT_ID=QrElcRF9AI2H6dRBwCChbc04JvtKygJo
+
 VITE_AUTH0_AUDIENCE=https://geomap/
 VITE_AUTH0_DOMAIN=dev-7w1no2zl1opt24if.us.auth0.com
 VITE_AUTH0_CLIENT_ID=QrElcRF9AI2H6dRBwCChbc04JvtKygJo
+
+VITE_API_URL=http://localhost:8000/
+
diff --git a/index.html b/index.html
@@ -8,6 +8,17 @@
     <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
+    <script>
+      window.OneSignalDeferred = window.OneSignalDeferred || [];
+      OneSignalDeferred.push(async function(OneSignal) {
+        await OneSignal.init({
+          appId: "a8f9feb6-81c6-464a-ac6d-56bf9fafba76",
+        });
+      });
+    </script>
+
     <title>GeoMapp</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -14,14 +14,18 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@material-tailwind/react": "^2.1.10",
+    "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.10",
     "@mui/material": "^6.1.2",
     "@mui/system": "^6.1.2",
     "@mui/x-date-pickers": "^7.19.0",
-    "@react-google-maps/api": "^2.19.3",
+    "@react-google-maps/api": "^2.20.3",
     "aws-sdk": "^2.1691.0",
     "axios": "^1.7.7",
+    "browser-image-compression": "^2.0.2",
+    "compress.js": "1.1.2",
     "date-fns": "2.29.3",
+    "framer-motion": "^11.11.11",
     "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -39,6 +43,6 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
-    "vite": "^5.4.8"
+    "vite": "^5.4.10"
   }
 }
diff --git a/public/OneSignalSDKWorker.js b/public/OneSignalSDKWorker.js
@@ -0,0 +1 @@
+importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/Router.jsx b/src/Router.jsx
@@ -11,6 +11,10 @@ import Favoritos from './pages/users/favoritos.jsx';
 import Notification from './pages/users/notificaciones.jsx';
 import NewMapa from './pages/newMapa.jsx';
 import Calendario from './pages/calendario.jsx';
+import GestionSolicitudes from './pages/GestionSolicitudes.jsx';
+import TermCondition from './pages/TermCondition.jsx';
+import Privacy from './pages/PrivacyPolitic.jsx';
+import NewPublicacionInfo from './components/NewPublicacionInfo.jsx';
 
 function Router() {
 
@@ -30,8 +34,10 @@ function Router() {
         <Route path="/notificaciones" element={<Notification />} />
         <Route path="/mapa-navegacion" element={<NewMapa />} />
         <Route path="/calendario" element={<Calendario />} />
-
-
+        <Route path="/gestion-solicitudes" element={<GestionSolicitudes />} />
+        <Route path="/term-condition" element={<TermCondition />} />
+        <Route path="/privacy" element={<Privacy />} />
+        <Route path="/publicacion/:id" element={<NewPublicacionInfo />} />
 
       </Routes>
     </BrowserRouter>

diff --git a/src/assets/Empanadas.jpg b/src/assets/Empanadas.jpg
diff --git a/src/assets/Logo270.png b/src/assets/Logo270.png
diff --git a/src/assets/boton1.jpg b/src/assets/boton1.jpg
diff --git a/src/assets/boton2 2.jpg b/src/assets/boton2 2.jpg
diff --git a/src/assets/boton2.jpg b/src/assets/boton2.jpg
diff --git a/src/assets/boton3.jpg b/src/assets/boton3.jpg
diff --git a/src/assets/fblogo.png b/src/assets/fblogo.png
diff --git a/src/assets/iglogo.png b/src/assets/iglogo.png
diff --git a/src/assets/logo_admin.png b/src/assets/logo_admin.png
diff --git a/src/assets/logo_oficial.png b/src/assets/logo_oficial.png
diff --git a/src/assets/pin2.png b/src/assets/pin2.png
diff --git a/src/assets/tellogo.png b/src/assets/tellogo.png
diff --git a/src/boton1.jpg b/src/boton1.jpg
diff --git a/src/boton2.jpg b/src/boton2.jpg
diff --git a/src/boton3.jpg b/src/boton3.jpg
diff --git a/src/components/Campana.jsx b/src/components/Campana.jsx
@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import '../pages/users/campana.css';
+
+const Campana = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [notificaciones, setNotificaciones] = useState([]);
+
+  const toggleNotifications = () => {
+    setIsOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    if (isOpen && notificaciones.length === 0) {
+      fetch('http://localhost:8000/onesignal/notificaciones/')
+        .then((response) => response.json())
+        .then((data) => setNotificaciones(data))
+        .catch((error) => console.error('Error fetching notifications:', error));
+    }
+  }, [isOpen]);
+
+  return (
+    <div className="campana-container">
+      <div className="loader" onClick={toggleNotifications}>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          height="24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          className="w-6 h-6 text-gray-800 dark:text-white"
+        >
+          <path
+            d="M12 5.365V3m0 2.365a5.338 5.338 0 0 1 5.133 5.368v1.8c0 2.386 1.867 2.982 1.867 4.175 0 .593 0 1.292-.538 1.292H5.538C5 18 5 17.301 5 16.708c0-1.193 1.867-1.789 1.867-4.175v-1.8A5.338 5.338 0 0 1 12 5.365ZM8.733 18c.094.852.306 1.54.944 2.112a3.48 3.48 0 0 0 4.646 0c.638-.572 1.236-1.26 1.33-2.112h-6.92Z"
+            strokeWidth="2"
+            strokeLinejoin="round"
+            strokeLinecap="round"
+            stroke="currentColor"
+          ></path>
+        </svg>
+        <div className="point"></div>
+      </div>
+
+      {isOpen && (
+        <div className="notification-box">
+          <h4>Notificaciones</h4>
+          <ul>
+            {notificaciones.length > 0 ? (
+              notificaciones.map((notificacion, index) => (
+                <li key={index}>
+                  <h5>{notificacion.title}</h5>
+                  <p>{notificacion.message}</p>
+                </li>
+              ))
+            ) : (
+              <li>No hay notificaciones disponibles</li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Campana;
diff --git a/src/components/Filter.jsx b/src/components/Filter.jsx
@@ -180,26 +180,34 @@ const Filter = ({ onCategoryChange, onSubCategoryChange, onRatingChange, onPrice
 
         {/* linea de separación */}
         <hr/>
+        {/* Solo se muestra si categoría: Propiedad o Camping */}
+        {selectedIndustries.includes('Propiedad') || selectedIndustries.includes('Camping') ? (
+            <>
+            <h3>Precio</h3>
+            <div className="price-list">
+                {/* rango de precio: 0 - 100000 */}
+                <Slider
+                    value={rangePrice}
+                    onChange={handlePriceChange}
+                    valueLabelDisplay="off"
+                    min={0}
+                    max={100000}
+                    step={1000}
+                    style={{ width: '100%', color: '#fa7e02' }}
+                />
+                <span className='price-text'>
+                    <span>{`$${rangePrice[0]}`}</span>
+                    <span>{' - '}</span>
+                    <span>{`$${rangePrice[1]}`}</span>
+                </span>
+
+            </div>
+            </>
+        )
+        : null}
+
+        {/* linea de separación */}
 
-        <h3>Precio</h3>
-        <div className="price-list">
-            {/* rango de precio: 0 - 100000 */}
-            <Slider
-                value={rangePrice}
-                onChange={handlePriceChange}
-                valueLabelDisplay="off"
-                min={0}
-                max={100000}
-                step={1000}
-                style={{ width: '100%', color: '#fa7e02' }}
-            />
-            <span className='price-text'>
-                <span>{`$${rangePrice[0]}`}</span>
-                <span>{' - '}</span>
-                <span>{`$${rangePrice[1]}`}</span>
-            </span>
-
-        </div>
 
         <div className="buttons">
             <button id="showResultsBtn" className="show-results-btn" onClick={handleReset}>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,12 +1,16 @@
-import React from 'react';
-import '../styles/footer.css'; // Asegúrate de que este archivo está correctamente vinculado
+import React, { useState } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+//import '../styles/footer.css'; // Asegúrate de que este archivo está correctamente vinculado
+import { Link } from 'react-router-dom';
 
 function Footer() {
-    return (
+
+return (
         <footer className="footer">
             <div className="footer-links">
-                <a href="Terminos.html" className="footer-link">Términos y Condiciones de uso</a>
-                <a href="Politicas.html" className="footer-link">Políticas de privacidad</a>
+                <Link to="/term-condition" className="footer-link">Términos y Condiciones de uso</Link>
+                <Link to="/privacy" className="footer-link">Políticas de privacidad</Link>
             </div>
         </footer>
     );

diff --git a/src/components/GoogleMap.jsx b/src/components/GoogleMap.jsx
@@ -139,7 +139,7 @@ const GoogleMapComponent = ({ onMapLoad, filterType, places }) => {
   return (
     <div style={containerStyle}>
       <div style={mapStyle}>
-        <LoadScript googleMapsApiKey="AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E">
+        <LoadScript googleMapsApiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}>
           <GoogleMap
             mapContainerStyle={mapStyle}
             center={userLocation}

diff --git a/src/components/GoogleMapSelectLocation.jsx b/src/components/GoogleMapSelectLocation.jsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
+
+const containerStyle = {
+  height: '400px',  // Ajusta el tamaño del contenedor si es necesario
+  width: '100%',
+};
+
+const center = {
+  lat: -33.45694,  // Coordenadas iniciales para Santiago, Chile
+  lng: -70.64827,
+};
+
+const GoogleMapSelectLocation = ({ onLocationSelect }) => {
+  const [selectedLocation, setSelectedLocation] = useState(null);
+
+  const handleMapClick = (event) => {
+    const location = {
+      lat: event.latLng.lat(),
+      lng: event.latLng.lng(),
+    };
+    setSelectedLocation(location);
+
+    //Llamada a la API de Geocoding
+    const geocoder = new window.google.maps.Geocoder();
+    geocoder.geocode({ location }, (results, status) => {
+      if (status === "OK") {
+        if (results[0]) {
+          const address = results[0].formatted_address;
+          onLocationSelect(address); // Pasar la dirección al formulario
+        } else {
+          console.log("No se encontraron resultados");
+        }
+      } else {
+        console.log("Geocoder falló debido a: " + status);
+      }
+    });
+  };
+
+  return (
+    <LoadScript googleMapsApiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}>
+      <GoogleMap
+        mapContainerStyle={containerStyle}
+        center={center}
+        zoom={12}
+        onClick={handleMapClick}  // Añade la función para manejar clics en el mapa
+      >
+        {selectedLocation && (
+          <Marker
+            position={selectedLocation}
+            title="Ubicación seleccionada"
+          />
+        )}
+      </GoogleMap>
+    </LoadScript>
+  );
+};
+
+export default GoogleMapSelectLocation;
diff --git a/src/components/ImageUpload.css b/src/components/ImageUpload.css
@@ -0,0 +1,46 @@
+html, body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Usar San Francisco */
+}
+.image-upload-container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .dropzone {
+    background-color: #f9fafb; /* Color de fondo más claro */
+    transition: background-color 0.2s;
+  }
+
+  .dropzone:hover {
+    background-color: #e5e7eb; /* Color de fondo al pasar el mouse */
+  }
+
+  .image-preview {
+    margin-top: 0.5rem;
+    width: 100%; /* Asegúrate de que ocupe todo el ancho de su contenedor */
+    height: 150px; /* Altura fija para todas las imágenes */
+    object-fit: cover; /* Mantener la relación de aspecto y recortar si es necesario */
+  }
+
+  .font-medium {
+    padding-left: 10px;
+    margin-bottom: 70px;
+  }
+  .absolute{
+    position: absolute;
+    border: none;
+    background-color: transparent;
+  }
+  .absolute:hover{
+    color: #666;
+  }
+  .flex{
+    display: flex flex-wrap; 
+  }
+
+
+
+
+
+
+