From 00b4abf2bddee5077ae1aa5532d76f1b15416f23 Mon Sep 17 00:00:00 2001 From: joseji Date: Thu, 13 Apr 2023 23:23:56 +0200 Subject: [PATCH 01/44] rating con estrellas y arreglado --- webapp/package-lock.json | 19 ++++++++++ webapp/package.json | 1 + .../components/CommentsPage/CommentsPage.tsx | 37 +++++++++++++------ webapp/src/components/Map/OSMap.css | 14 +++++++ webapp/src/components/Map/OSMap.tsx | 31 +++++++++------- .../components/WelcomePage/WelcomePage.css | 16 ++++++++ .../components/WelcomePage/WelcomePage.tsx | 6 +-- 7 files changed, 95 insertions(+), 29 deletions(-) create mode 100644 webapp/src/components/Map/OSMap.css diff --git a/webapp/package-lock.json b/webapp/package-lock.json index a79d695..c2e2dcc 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -30,6 +30,7 @@ "react-leaflet": "^4.2.0", "react-router-dom": "^6.9.0", "react-scripts": "5.0.1", + "react-simple-star-rating": "^5.1.7", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, @@ -15365,6 +15366,18 @@ } } }, + "node_modules/react-simple-star-rating": { + "version": "5.1.7", + "resolved": "https://registry.npmjs.org/react-simple-star-rating/-/react-simple-star-rating-5.1.7.tgz", + "integrity": "sha512-NTFkW8W3uwvI82Fv7JW5i7gmDjEZKxJmj+Z9vn+BjYIXT6ILdnU9qnSUP2cWrWN/WAUlue81f9SgM4CQcenltQ==", + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + } + }, "node_modules/react-table": { "version": "7.8.0", "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz", @@ -29010,6 +29023,12 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-simple-star-rating": { + "version": "5.1.7", + "resolved": "https://registry.npmjs.org/react-simple-star-rating/-/react-simple-star-rating-5.1.7.tgz", + "integrity": "sha512-NTFkW8W3uwvI82Fv7JW5i7gmDjEZKxJmj+Z9vn+BjYIXT6ILdnU9qnSUP2cWrWN/WAUlue81f9SgM4CQcenltQ==", + "requires": {} + }, "react-table": { "version": "7.8.0", "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz", diff --git a/webapp/package.json b/webapp/package.json index dfa84b7..1cfbfd9 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -25,6 +25,7 @@ "react-leaflet": "^4.2.0", "react-router-dom": "^6.9.0", "react-scripts": "5.0.1", + "react-simple-star-rating": "^5.1.7", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, diff --git a/webapp/src/components/CommentsPage/CommentsPage.tsx b/webapp/src/components/CommentsPage/CommentsPage.tsx index 8585100..5f2323a 100644 --- a/webapp/src/components/CommentsPage/CommentsPage.tsx +++ b/webapp/src/components/CommentsPage/CommentsPage.tsx @@ -4,6 +4,8 @@ import { addMarker } from "../../api/api"; import { Marker } from "../Map/OSMap"; import { getDefaultSession } from "@inrupt/solid-client-authn-browser"; import { writeMarkerToDataSet } from "../Solid/WriteToPod"; +import { Rating } from 'react-simple-star-rating' +import { Link } from "react-router-dom"; // TODO: ver si se puede eliminar esta funcion async function saveMarker(markerData: any) { @@ -14,12 +16,12 @@ export default function CommentsPage(props: any) { const [title, setTitle] = useState(""); const [comment, setComment] = useState(""); const [markerType, setMarkerType] = useState("restaurant"); - const [score, setScore] = useState(-1); const writeMarkerToPod = async ( title: string, comment: string, - markerType: string + markerType: string, + rating: number ) => { const markerData: Marker = { lat: props.lat[0], @@ -27,7 +29,7 @@ export default function CommentsPage(props: any) { comment: comment, title: title.replace(" ", "_"), type: markerType, - score: score, + score: rating, }; const session = getDefaultSession(); @@ -55,16 +57,28 @@ export default function CommentsPage(props: any) { const target = event.target as typeof event.target & { markerTitle: { value: string }; comment: { value: string }; - score: { value: string }; + rating: { value: number }; }; writeMarkerToPod( target.markerTitle.value, target.comment.value, - markerType + markerType, + rating ); }; + const [rating, setRating] = useState(0) + + const onPointerEnter = () => console.log('Enter') + const onPointerLeave = () => console.log('Leave') + const onPointerMove = (value: number, index: number) => console.log(value, index) + + // Catch Rating value + const handleRating = (rate: number) => { + setRating(rate) + } + return (
@@ -107,17 +121,16 @@ export default function CommentsPage(props: any) {
- setScore(parseInt(event.target.value))} - max="10" +
- +
diff --git a/webapp/src/components/Map/OSMap.css b/webapp/src/components/Map/OSMap.css new file mode 100644 index 0000000..5ab6788 --- /dev/null +++ b/webapp/src/components/Map/OSMap.css @@ -0,0 +1,14 @@ +.map { + position: relative; + z-index: 1; + width: 100%; + height: 100%; +} +.comment { + position: absolute; + top: 17%; + left: 23%; + width: 50%; + height: 50%; + z-index: 1000; +} diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index 8b2e399..1a61a00 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -1,3 +1,4 @@ +import "./OSMap.css"; import "leaflet/dist/leaflet.css"; import L from "leaflet"; import { MapContainer, TileLayer } from "react-leaflet"; @@ -46,22 +47,24 @@ export function OSMap() { }; return ( -
- - - - + +
+ + + {!markerForm && } + + {markerForm && ( -
+
-
+
+
+ +
+ ); } diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index 1a61a00..9bd3ff1 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -42,10 +42,6 @@ export function OSMap() { return null; } - const cancelMarker = () => { - setMarkerForm(false); - }; - return (
@@ -64,15 +60,6 @@ export function OSMap() { {markerForm && (
-
- -
)}
From 6f03f308d48915ab5c5a8e1b4dcaec6015ad0d08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Teresa=20Fern=C3=A1ndez=20Coro?= <79691310+teresafcoro@users.noreply.github.com> Date: Fri, 14 Apr 2023 09:44:53 +0200 Subject: [PATCH 03/44] =?UTF-8?q?Update=20documentaci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/05_building_block_view.adoc | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc index e6c761d..f175fdb 100644 --- a/docs/05_building_block_view.adoc +++ b/docs/05_building_block_view.adoc @@ -24,7 +24,7 @@ Caja blanca LoMap:: [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _Back-end_ | _Contiene todo lo necesario para que la aplicación funcione adecuadamante. Se comunica con el Front-end para obtener aquellos datos proporcionados por el usuario, los procesa y realiza las operaciones pertinentes._ +| _Back-end_ | _Contiene todo lo necesario para que la aplicación funcione adecuadamante. Se comunica con el Front-end para obtener aquellos datos proporcionados por el usuario, los procesa y realiza las operaciones comentadas más adelante._ | _Front-end_ | _Contiene las interfaces de usuario. Permite que los usuarios finales de la aplicación puedan interactuar con esta. Además, a través de ella se recopilan datos del usuario._ | _POD_ | _Almacén de datos para cada usuario de la aplicación. Es externo al sistema._ |=== @@ -34,7 +34,7 @@ Caja blanca Back-end:: [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _..._ | _..._ +| _Api_ | _Se comunica con la base de datos y los pods._ |=== === Level 3 @@ -42,10 +42,10 @@ Caja blanca Front-end:: [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _MainMenu_ | _Página inicial (menú principal) de la aplicación. En esta se muestran enlaces a otras páginas de la app para redireccionar al usuario._ -| _WelcomePage_ | _Página de bienvenida a la aplicación. En esta se muestra el mapa y enlaces a otras páginas de la app para redireccionar al usuario._ -| _LoginPage_ | _Permite al usuario de la aplicación iniciar sesión con su usuario y contraseña._ -| _SignupPage_ | _Permite a un nuevo usuario de la aplicación registrarse con su usuario, email y contraseña._ +| _MainMenu_ | _Página inicial (menú principal) de la aplicación. En esta se muestran enlaces a otras páginas de la app para redireccionar al usuario {Inicio, Documentación, Sobre Nosotros y Perfil}._ +| _WelcomePage_ | _Página de bienvenida a la aplicación. En esta se muestra el mapa del usuario, en el case de que tenga la sesión iniciada, o información de la app y un enlace a Solid._ +| _LoginPage_ | _Permite al usuario de la aplicación dirigirse a la página de Inrupt para iniciar sesión, o registrarse._ +| _UserPage_ | _Página del usuario con sesión iniciada dónde puede ver sus datos almacenados por la app._ |=== === Level 4 From 1f45a319a10838c3db5167e186e11b48c3e88db5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Teresa=20Fern=C3=A1ndez=20Coro?= <79691310+teresafcoro@users.noreply.github.com> Date: Fri, 14 Apr 2023 10:35:38 +0200 Subject: [PATCH 04/44] =?UTF-8?q?M=C3=A1s=20cambios?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/05_building_block_view.adoc | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc index f175fdb..d762b86 100644 --- a/docs/05_building_block_view.adoc +++ b/docs/05_building_block_view.adoc @@ -24,9 +24,11 @@ Caja blanca LoMap:: [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _Back-end_ | _Contiene todo lo necesario para que la aplicación funcione adecuadamante. Se comunica con el Front-end para obtener aquellos datos proporcionados por el usuario, los procesa y realiza las operaciones comentadas más adelante._ -| _Front-end_ | _Contiene las interfaces de usuario. Permite que los usuarios finales de la aplicación puedan interactuar con esta. Además, a través de ella se recopilan datos del usuario._ -| _POD_ | _Almacén de datos para cada usuario de la aplicación. Es externo al sistema._ +| _Back-end_ | _Contiene todo lo necesario para que la aplicación funcione adecuadamante. Se comunica con el Front-end para obtener aquellos datos proporcionados por el cliente, los procesa y realiza las operaciones comentadas más adelante._ +| _Front-end_ | _Contiene las interfaces de usuario. Permite que los clientes finales de la aplicación puedan interactuar con esta. Además, a través de ella se recopilan datos del cliente._ +| _POD_ | _Almacén de datos para cada cliente de la aplicación. El cliente posee el control absoluto de sus datos privados. Es externo al sistema._ +| _Base de Datos_ | _Utilizamos MongoDB como almacén de datos central para la aplicación._ +| _OpenStreetMaps API_ | _Nos permite generar los mapas._ |=== === Level 2 @@ -42,16 +44,8 @@ Caja blanca Front-end:: [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _MainMenu_ | _Página inicial (menú principal) de la aplicación. En esta se muestran enlaces a otras páginas de la app para redireccionar al usuario {Inicio, Documentación, Sobre Nosotros y Perfil}._ -| _WelcomePage_ | _Página de bienvenida a la aplicación. En esta se muestra el mapa del usuario, en el case de que tenga la sesión iniciada, o información de la app y un enlace a Solid._ -| _LoginPage_ | _Permite al usuario de la aplicación dirigirse a la página de Inrupt para iniciar sesión, o registrarse._ -| _UserPage_ | _Página del usuario con sesión iniciada dónde puede ver sus datos almacenados por la app._ -|=== - -=== Level 4 -Caja blanca POD:: -[options="header",cols="1,2"] -|=== -|Nombre|Responsabilidad -| _..._ | _..._ +| _MainMenu_ | _Página inicial (menú principal) de la aplicación. En esta se muestran enlaces a otras páginas de la app para redireccionar al cliente {Inicio, Documentación, Sobre Nosotros y Perfil}._ +| _WelcomePage_ | _Página de bienvenida a la aplicación. En esta se muestra el mapa del cliente, en el case de que tenga la sesión iniciada, o información de la aplicación y un enlace a Solid._ +| _LoginPage_ | _Permite al cliente de la aplicación dirigirse a la página de Inrupt para iniciar sesión o registrarse._ +| _UserPage_ | _Página del cliente con sesión iniciada dónde puede ver sus datos almacenados por la app._ |=== From d2e53df3bfe15c8c9a35c1fa70894a50f6d85ce8 Mon Sep 17 00:00:00 2001 From: Alejandro Campa Date: Fri, 14 Apr 2023 10:50:54 +0200 Subject: [PATCH 05/44] cambios de lo que devuelve el readFromPod --- webapp/src/components/Solid/ReadFromPod.ts | 14 ++++++++++++-- .../components/Solid/User/ReadFromPodComponent.tsx | 2 -- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/Solid/ReadFromPod.ts b/webapp/src/components/Solid/ReadFromPod.ts index 1cfe8aa..59caee6 100644 --- a/webapp/src/components/Solid/ReadFromPod.ts +++ b/webapp/src/components/Solid/ReadFromPod.ts @@ -6,6 +6,11 @@ import { import { getDefaultSession } from "@inrupt/solid-client-authn-browser"; import { SCHEMA_INRUPT } from "@inrupt/vocab-common-rdf"; + + function isData(element : any, index : number, array: any) { + return (element != "No data"); + } + export async function readFromDataSet() { // Obtener la sesion actual y su webId @@ -36,8 +41,13 @@ import { const data = getThingAll(thingDataset).map((thing) => { const thingData = getStringNoLocale(thing, SCHEMA_INRUPT.description) return thingData ? JSON.parse(thingData) : "No data"; - }) - return data + }).filter(isData) + let finalData = new Array() + data.forEach( (element : any ) => finalData.push(element)) + + console.log(finalData) + + return data.shift() }) // Queda quitar el primer elemento del array porque no es un marcador sino el dataset y no sirve para nada diff --git a/webapp/src/components/Solid/User/ReadFromPodComponent.tsx b/webapp/src/components/Solid/User/ReadFromPodComponent.tsx index 1af6869..6c9f066 100644 --- a/webapp/src/components/Solid/User/ReadFromPodComponent.tsx +++ b/webapp/src/components/Solid/User/ReadFromPodComponent.tsx @@ -4,8 +4,6 @@ import { readFromDataSet } from "../ReadFromPod"; export default function ReadFromPodComponent() { const [markers, setMarkers] = useState([] as any); - console.log(markers); - if (markers.length > 0) { markers.map((marker: any) => { console.log(marker); From 752bee2f5c8c1ee996be8f408b6882361308a402 Mon Sep 17 00:00:00 2001 From: joseji Date: Sun, 16 Apr 2023 20:01:01 +0200 Subject: [PATCH 06/44] falla el volver a estado correcto despues de enviar --- webapp/src/components/Map/OSMap.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index 9bd3ff1..f220fba 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -43,7 +43,7 @@ export function OSMap() { } return ( - +
Date: Sun, 16 Apr 2023 20:31:20 +0200 Subject: [PATCH 07/44] ya funciona bien el enviar --- webapp/src/components/CommentsPage/CommentsPage.tsx | 3 ++- webapp/src/components/Map/OSMap.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/webapp/src/components/CommentsPage/CommentsPage.tsx b/webapp/src/components/CommentsPage/CommentsPage.tsx index 282fd00..860c5d1 100644 --- a/webapp/src/components/CommentsPage/CommentsPage.tsx +++ b/webapp/src/components/CommentsPage/CommentsPage.tsx @@ -67,7 +67,8 @@ export default function CommentsPage(props: any) { rating ); - setMarkerForm(false); + // quitar componente comentarios + props.onChange(); }; const [rating, setRating] = useState(0) diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index f220fba..b5aecbc 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -42,8 +42,11 @@ export function OSMap() { return null; } + function exitComments() { + setMarkerForm(false); + } + return ( -
{markerForm && (
- +
)}
From 8175fb671a5159242ddda818bc1d84dfbee5b893 Mon Sep 17 00:00:00 2001 From: joseji Date: Sun, 16 Apr 2023 20:31:53 +0200 Subject: [PATCH 08/44] =?UTF-8?q?tambi=C3=A9n=20funciona=20el=20cancelar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/components/CommentsPage/CommentsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/CommentsPage/CommentsPage.tsx b/webapp/src/components/CommentsPage/CommentsPage.tsx index 860c5d1..a438583 100644 --- a/webapp/src/components/CommentsPage/CommentsPage.tsx +++ b/webapp/src/components/CommentsPage/CommentsPage.tsx @@ -85,7 +85,7 @@ export default function CommentsPage(props: any) { const [markerForm, setMarkerForm] = useState(true); const cancelMarker = () => { - setMarkerForm(false); + props.onChange(); }; if(!markerForm) return null; From 8484fe7d718fc1117a264bc918e9fb249767cc13 Mon Sep 17 00:00:00 2001 From: joseji Date: Sun, 16 Apr 2023 20:44:56 +0200 Subject: [PATCH 09/44] todo operativo --- webapp/src/components/CommentsPage/CommentsPage.tsx | 5 +---- webapp/src/components/Map/OSMap.tsx | 11 ++++++++--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/webapp/src/components/CommentsPage/CommentsPage.tsx b/webapp/src/components/CommentsPage/CommentsPage.tsx index a438583..6628a7f 100644 --- a/webapp/src/components/CommentsPage/CommentsPage.tsx +++ b/webapp/src/components/CommentsPage/CommentsPage.tsx @@ -68,7 +68,7 @@ export default function CommentsPage(props: any) { ); // quitar componente comentarios - props.onChange(); + props.onSubmit(); }; const [rating, setRating] = useState(0) @@ -82,14 +82,11 @@ export default function CommentsPage(props: any) { setRating(rate) } - const [markerForm, setMarkerForm] = useState(true); const cancelMarker = () => { props.onChange(); }; - if(!markerForm) return null; - return (
diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index b5aecbc..3c1455c 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -24,6 +24,10 @@ export function OSMap() { const [markerForm, setMarkerForm] = useState(false); const [cords, setCords] = useState([0, 0]); + function cancelMarker() { + setMarkerForm(false); + } + function MyComponent() { const map = useMapEvents({ click: (e) => { @@ -33,10 +37,11 @@ export function OSMap() { icon: markerIcon, draggable: false, }); - marker.addTo(map); - marker.bindPopup(marker.getLatLng().toString()).openPopup(); setMarkerForm(true); + + marker.addTo(map); + marker.bindPopup(marker.getLatLng().toString()).openPopup(); }, }); return null; @@ -62,7 +67,7 @@ export function OSMap() { {markerForm && (
- +
)}
From 7f5e5f9644360870e13cc9e6d97619dc5bc8a37c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Campa=20Mart=C3=ADnez?= Date: Tue, 18 Apr 2023 20:02:02 +0200 Subject: [PATCH 10/44] Mostrar marcadores en el mapa --- webapp/src/App.tsx | 2 - .../components/Map/Markers/ShowMyMarkers.tsx | 20 ++++++++++ webapp/src/components/Map/OSMap.tsx | 38 +++++++++++++++---- webapp/src/components/Solid/ReadFromPod.ts | 18 ++++++--- .../components/Solid/User/ProfileViewer.tsx | 4 -- .../Solid/User/ReadFromPodComponent.tsx | 24 ------------ .../components/WelcomePage/WelcomePage.tsx | 14 +++---- 7 files changed, 70 insertions(+), 50 deletions(-) create mode 100644 webapp/src/components/Map/Markers/ShowMyMarkers.tsx delete mode 100644 webapp/src/components/Solid/User/ReadFromPodComponent.tsx diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 3a2825c..02d3baf 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -9,7 +9,6 @@ import { OSMap } from "./components/Map/OSMap"; import { SessionProvider } from "@inrupt/solid-ui-react"; import RequestFriendship from "./components/Solid/Friends/RequestFriendship"; import About from "./components/About/About"; -import ReadFromPodComponent from "./components/Solid/User/ReadFromPodComponent"; function App() { return (
@@ -49,7 +48,6 @@ function App() { /> } /> } /> - } /> diff --git a/webapp/src/components/Map/Markers/ShowMyMarkers.tsx b/webapp/src/components/Map/Markers/ShowMyMarkers.tsx new file mode 100644 index 0000000..dc37fcb --- /dev/null +++ b/webapp/src/components/Map/Markers/ShowMyMarkers.tsx @@ -0,0 +1,20 @@ +import { useState } from "react"; +import { readFromDataSet } from "../../Solid/ReadFromPod"; +import { ShowMarkers } from "../OSMap"; + +export default function ShowMyMarkers() { + const [markers, setMarkers] = useState(readFromDataSet()); + + return ( +
+ +
+ ); +} diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index 3c1455c..57f3dc0 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -5,6 +5,10 @@ import { MapContainer, TileLayer } from "react-leaflet"; import { useMapEvents } from "react-leaflet"; import CommentsPage from "../CommentsPage/CommentsPage"; import { useState } from "react"; +import ShowMyMarkers from "./Markers/ShowMyMarkers"; +import { readFromDataSet } from "../Solid/ReadFromPod"; + +var map: L.Map; export interface Marker { lat: number; @@ -15,6 +19,19 @@ export interface Marker { score: number; } +export function ShowMarkers(promise: any) { + promise.then((array: any) => { + array.forEach((element: any) => { + let marker = L.marker([element.lat, element.lng], { + icon: markerIcon, + draggable: false, + }); + marker.addTo(map); + marker.bindPopup(element.comment).openPopup(); + }); + }); +} + const markerIcon = L.icon({ iconUrl: "https://unpkg.com/leaflet@1.7/dist/images/marker-icon.png", iconSize: [30, 30], @@ -29,7 +46,7 @@ export function OSMap() { } function MyComponent() { - const map = useMapEvents({ + map = useMapEvents({ click: (e) => { const { lat, lng } = e.latlng; setCords([lat, lng]); @@ -52,6 +69,8 @@ export function OSMap() { } return ( +
+
{!markerForm && } - - {markerForm && ( -
- -
- )} + {markerForm && ( +
+ +
+ )} +
); } diff --git a/webapp/src/components/Solid/ReadFromPod.ts b/webapp/src/components/Solid/ReadFromPod.ts index 59caee6..36ddf39 100644 --- a/webapp/src/components/Solid/ReadFromPod.ts +++ b/webapp/src/components/Solid/ReadFromPod.ts @@ -45,15 +45,21 @@ import { let finalData = new Array() data.forEach( (element : any ) => finalData.push(element)) - console.log(finalData) - return data.shift() + return finalData }) - // Queda quitar el primer elemento del array porque no es un marcador sino el dataset y no sirve para nada - // Quitar el log cuando funciones del todo - //console.log(markers) + // Crear una nueva lista + let newMarkers = new Array() - return markers + for(let i = 0; i < markers.length; i++){ + markers[i].then((array: any) => { + array.forEach((object: any) => { + newMarkers.push(object) + }); + }); + } + + return newMarkers } \ No newline at end of file diff --git a/webapp/src/components/Solid/User/ProfileViewer.tsx b/webapp/src/components/Solid/User/ProfileViewer.tsx index f9520fd..8a75fd5 100644 --- a/webapp/src/components/Solid/User/ProfileViewer.tsx +++ b/webapp/src/components/Solid/User/ProfileViewer.tsx @@ -15,7 +15,6 @@ import { } from "@mui/material"; import { FOAF, VCARD } from "@inrupt/lit-generated-vocab-common"; import { Link } from "react-router-dom"; -import ReadFromPodComponent from "./ReadFromPodComponent"; const ProfileViewer = () => { const { session } = useSession(); @@ -65,9 +64,6 @@ const ProfileViewer = () => { - ); }; diff --git a/webapp/src/components/Solid/User/ReadFromPodComponent.tsx b/webapp/src/components/Solid/User/ReadFromPodComponent.tsx deleted file mode 100644 index 6c9f066..0000000 --- a/webapp/src/components/Solid/User/ReadFromPodComponent.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useState } from "react"; -import { readFromDataSet } from "../ReadFromPod"; - -export default function ReadFromPodComponent() { - const [markers, setMarkers] = useState([] as any); - - if (markers.length > 0) { - markers.map((marker: any) => { - console.log(marker); - }); - } - - return ( -
- -
- {markers.length > 0 && - markers.map((marker: any) =>
{marker}
)} -
-
- ); -} diff --git a/webapp/src/components/WelcomePage/WelcomePage.tsx b/webapp/src/components/WelcomePage/WelcomePage.tsx index b07faee..226be1d 100644 --- a/webapp/src/components/WelcomePage/WelcomePage.tsx +++ b/webapp/src/components/WelcomePage/WelcomePage.tsx @@ -15,13 +15,13 @@ export default function WelcomePage() {
- document - .getElementById("solid") - ?.scrollIntoView({ behavior: "smooth" }) - } - >
+ className="arrow" + onClick={() => + document + .getElementById("solid") + ?.scrollIntoView({ behavior: "smooth" }) + } + >
From 7dcade08a25e13e742917d096084f5248f62c802 Mon Sep 17 00:00:00 2001 From: joseji Date: Tue, 18 Apr 2023 21:27:29 +0200 Subject: [PATCH 11/44] boton en condiciones --- .../components/Map/Markers/ShowMyMarkers.css | 21 +++++++++++++++++++ .../components/Map/Markers/ShowMyMarkers.tsx | 7 ++++--- webapp/src/components/Map/OSMap.css | 9 ++++++++ webapp/src/components/Map/OSMap.tsx | 4 +++- 4 files changed, 37 insertions(+), 4 deletions(-) create mode 100644 webapp/src/components/Map/Markers/ShowMyMarkers.css diff --git a/webapp/src/components/Map/Markers/ShowMyMarkers.css b/webapp/src/components/Map/Markers/ShowMyMarkers.css new file mode 100644 index 0000000..85c72ac --- /dev/null +++ b/webapp/src/components/Map/Markers/ShowMyMarkers.css @@ -0,0 +1,21 @@ +.button-markers { + background-color: white; + border: none; + padding: 10px 20px; + font-size: 18px; + cursor: pointer; + outline: none; + transition: background-color 0.3s ease; + } + + /* Estilos de animación al hacer clic */ + .button-markers:hover { + background-color: #f0f0f0; + transform: scale(1.05); + } + + /* Estilos de animación al hacer clic */ + .button-markers:active { + background-color: #e0e0e0; + transform: scale(0.95); + } \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/ShowMyMarkers.tsx b/webapp/src/components/Map/Markers/ShowMyMarkers.tsx index dc37fcb..0390388 100644 --- a/webapp/src/components/Map/Markers/ShowMyMarkers.tsx +++ b/webapp/src/components/Map/Markers/ShowMyMarkers.tsx @@ -1,19 +1,20 @@ +/* eslint-disable jsx-a11y/alt-text */ import { useState } from "react"; import { readFromDataSet } from "../../Solid/ReadFromPod"; import { ShowMarkers } from "../OSMap"; - +import "./ShowMyMarkers.css"; export default function ShowMyMarkers() { const [markers, setMarkers] = useState(readFromDataSet()); return (
-
); diff --git a/webapp/src/components/Map/OSMap.css b/webapp/src/components/Map/OSMap.css index 5ab6788..d31f903 100644 --- a/webapp/src/components/Map/OSMap.css +++ b/webapp/src/components/Map/OSMap.css @@ -12,3 +12,12 @@ height: 50%; z-index: 1000; } + +.button_marker { + position: absolute; + top: 3%; + right: 3%; + width: 5%; + height: 5%; + z-index: 1000; +} \ No newline at end of file diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index 57f3dc0..164c764 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -70,8 +70,10 @@ export function OSMap() { return (
-
+
+ +
Date: Fri, 21 Apr 2023 00:58:35 +0200 Subject: [PATCH 12/44] funcionan todos los filtros --- .../components/Map/Markers/Filters/Filter.tsx | 6 +++ .../Map/Markers/Filters/FilterButton.css | 38 ++++++++++++++++ .../Filters/Landscape/FilterMonument.tsx | 22 ++++++++++ .../Filters/Monument/FilterMonument.tsx | 22 ++++++++++ .../Filters/Restaurant/FilterRestaurant.tsx | 22 ++++++++++ .../MarkersButton.css} | 0 .../MarkersButton.tsx} | 11 ++--- webapp/src/components/Map/OSMap.css | 11 +++++ webapp/src/components/Map/OSMap.tsx | 43 ++++++++++++++----- 9 files changed, 159 insertions(+), 16 deletions(-) create mode 100644 webapp/src/components/Map/Markers/Filters/Filter.tsx create mode 100644 webapp/src/components/Map/Markers/Filters/FilterButton.css create mode 100644 webapp/src/components/Map/Markers/Filters/Landscape/FilterMonument.tsx create mode 100644 webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx create mode 100644 webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx rename webapp/src/components/Map/Markers/{ShowMyMarkers.css => MarkersButton/MarkersButton.css} (100%) rename webapp/src/components/Map/Markers/{ShowMyMarkers.tsx => MarkersButton/MarkersButton.tsx} (77%) diff --git a/webapp/src/components/Map/Markers/Filters/Filter.tsx b/webapp/src/components/Map/Markers/Filters/Filter.tsx new file mode 100644 index 0000000..1c7785a --- /dev/null +++ b/webapp/src/components/Map/Markers/Filters/Filter.tsx @@ -0,0 +1,6 @@ +export async function filterByType(markers: Promise, filter: string): Promise{ + var filteredPromise = markers.then((markerArray: any) => { + return (Promise.all(markerArray.filter(function(marker: any){return marker.type === filter}))) + }); + return filteredPromise; +} \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/FilterButton.css b/webapp/src/components/Map/Markers/Filters/FilterButton.css new file mode 100644 index 0000000..a319583 --- /dev/null +++ b/webapp/src/components/Map/Markers/Filters/FilterButton.css @@ -0,0 +1,38 @@ +.filter-restaurant { + background-color: white; + border: none; + padding: 5px 5px; + cursor: pointer; + outline: none; + transition: background-color 0.3s ease; + } + + .filter-monument { + background-color: white; + border: none; + padding: 5px 5px; + cursor: pointer; + outline: none; + transition: background-color 0.3s ease; + } + + .filter-landscape { + background-color: white; + border: none; + padding: 5px 5px; + cursor: pointer; + outline: none; + transition: background-color 0.3s ease; + } + + /* Estilos de animación al hacer clic */ + button:hover { + background-color: #f0f0f0; + transform: scale(1.05); + } + + /* Estilos de animación al hacer clic */ + button:active { + background-color: #e0e0e0; + transform: scale(0.95); + } \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/Landscape/FilterMonument.tsx b/webapp/src/components/Map/Markers/Filters/Landscape/FilterMonument.tsx new file mode 100644 index 0000000..08c2437 --- /dev/null +++ b/webapp/src/components/Map/Markers/Filters/Landscape/FilterMonument.tsx @@ -0,0 +1,22 @@ +/* eslint-disable jsx-a11y/alt-text */ +import { useState } from "react"; +import { readFromDataSet } from "../../../../Solid/ReadFromPod"; +import { ShowMarkersFulfilledPromise } from "../../../OSMap"; +import { filterByType } from "../Filter"; +import "../FilterButton.css" + +export function FilterLandscape() { + const [markers, setMarkers] = useState(readFromDataSet()); + return ( +
+ +
+ ); + } \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx b/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx new file mode 100644 index 0000000..d15b4ca --- /dev/null +++ b/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx @@ -0,0 +1,22 @@ +/* eslint-disable jsx-a11y/alt-text */ +import { useState } from "react"; +import { readFromDataSet } from "../../../../Solid/ReadFromPod"; +import { ShowMarkersFulfilledPromise } from "../../../OSMap"; +import { filterByType } from "../Filter"; +import "../FilterButton.css" + +export function FilterMonument() { + const [markers, setMarkers] = useState(readFromDataSet()); + return ( +
+ +
+ ); + } \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx b/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx new file mode 100644 index 0000000..efdafad --- /dev/null +++ b/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx @@ -0,0 +1,22 @@ +/* eslint-disable jsx-a11y/alt-text */ +import { useState } from "react"; +import { readFromDataSet } from "../../../../Solid/ReadFromPod"; +import { ShowMarkersFulfilledPromise } from "../../../OSMap"; +import { filterByType } from "../Filter"; +import "../FilterButton.css" + +export function FilterRestaurant() { + const [markers, setMarkers] = useState(readFromDataSet()); + return ( +
+ +
+ ); + } \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/ShowMyMarkers.css b/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.css similarity index 100% rename from webapp/src/components/Map/Markers/ShowMyMarkers.css rename to webapp/src/components/Map/Markers/MarkersButton/MarkersButton.css diff --git a/webapp/src/components/Map/Markers/ShowMyMarkers.tsx b/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx similarity index 77% rename from webapp/src/components/Map/Markers/ShowMyMarkers.tsx rename to webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx index 0390388..d52611b 100644 --- a/webapp/src/components/Map/Markers/ShowMyMarkers.tsx +++ b/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx @@ -1,9 +1,10 @@ /* eslint-disable jsx-a11y/alt-text */ import { useState } from "react"; -import { readFromDataSet } from "../../Solid/ReadFromPod"; -import { ShowMarkers } from "../OSMap"; -import "./ShowMyMarkers.css"; -export default function ShowMyMarkers() { +import { readFromDataSet } from "../../../Solid/ReadFromPod"; +import { ShowMarkers } from "../../OSMap"; +import "./MarkersButton.css"; + +export default function Markers() { const [markers, setMarkers] = useState(readFromDataSet()); return ( @@ -18,4 +19,4 @@ export default function ShowMyMarkers() {
); -} +} \ No newline at end of file diff --git a/webapp/src/components/Map/OSMap.css b/webapp/src/components/Map/OSMap.css index d31f903..57cfca5 100644 --- a/webapp/src/components/Map/OSMap.css +++ b/webapp/src/components/Map/OSMap.css @@ -20,4 +20,15 @@ width: 5%; height: 5%; z-index: 1000; +} + + +.filters { + position: absolute; + display: grid; + top: 3%; + left: 3%; + width: 4%; + height: 4%; + z-index: 1000; } \ No newline at end of file diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index 164c764..76560c2 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -5,9 +5,10 @@ import { MapContainer, TileLayer } from "react-leaflet"; import { useMapEvents } from "react-leaflet"; import CommentsPage from "../CommentsPage/CommentsPage"; import { useState } from "react"; -import ShowMyMarkers from "./Markers/ShowMyMarkers"; -import { readFromDataSet } from "../Solid/ReadFromPod"; - +import MarkersButton from "./Markers/MarkersButton/MarkersButton"; +import { FilterRestaurant } from "./Markers/Filters/Restaurant/FilterRestaurant"; +import { FilterMonument } from "./Markers/Filters/Monument/FilterMonument"; +import { FilterLandscape } from "./Markers/Filters/Landscape/FilterMonument"; var map: L.Map; export interface Marker { @@ -21,14 +22,28 @@ export interface Marker { export function ShowMarkers(promise: any) { promise.then((array: any) => { - array.forEach((element: any) => { - let marker = L.marker([element.lat, element.lng], { - icon: markerIcon, - draggable: false, - }); - marker.addTo(map); - marker.bindPopup(element.comment).openPopup(); + ShowMarkersFulfilledPromise(array); + }); +} + +export function ShowMarkersFulfilledPromise(array: any[] | null) { + if(!array) return; + array.forEach((element: any) => { + let marker = L.marker([element.lat, element.lng], { + icon: markerIcon, + draggable: false, }); + marker.addTo(map); + marker.bindPopup(element.comment).openPopup(); + }); +} + +export function clearMarkers() { + map.eachLayer(function (layer) { + if (layer instanceof L.Marker) { + console.log(layer); + map.removeLayer(layer); + } }); } @@ -66,13 +81,19 @@ export function OSMap() { function exitComments() { setMarkerForm(false); + } return (
+
+ + + +
- +
Date: Fri, 21 Apr 2023 01:01:19 +0200 Subject: [PATCH 13/44] los filtros eliminan el resto de tipos del mapa --- .../Landscape/{FilterMonument.tsx => FilterLandscape.tsx} | 3 ++- .../Map/Markers/Filters/Monument/FilterMonument.tsx | 4 +++- .../Map/Markers/Filters/Restaurant/FilterRestaurant.tsx | 3 ++- webapp/src/components/Map/OSMap.tsx | 1 - 4 files changed, 7 insertions(+), 4 deletions(-) rename webapp/src/components/Map/Markers/Filters/Landscape/{FilterMonument.tsx => FilterLandscape.tsx} (86%) diff --git a/webapp/src/components/Map/Markers/Filters/Landscape/FilterMonument.tsx b/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx similarity index 86% rename from webapp/src/components/Map/Markers/Filters/Landscape/FilterMonument.tsx rename to webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx index 08c2437..e3e181d 100644 --- a/webapp/src/components/Map/Markers/Filters/Landscape/FilterMonument.tsx +++ b/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/alt-text */ import { useState } from "react"; import { readFromDataSet } from "../../../../Solid/ReadFromPod"; -import { ShowMarkersFulfilledPromise } from "../../../OSMap"; +import { clearMarkers, ShowMarkersFulfilledPromise } from "../../../OSMap"; import { filterByType } from "../Filter"; import "../FilterButton.css" @@ -11,6 +11,7 @@ export function FilterLandscape() {
From 619a0795a0c38f3f52562fb0f15d553e6dda9bf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Campa=20Mart=C3=ADnez?= Date: Fri, 21 Apr 2023 17:10:20 +0200 Subject: [PATCH 19/44] mejorando poco a poco --- .../Markers/MarkersButton/MarkersButton.tsx | 11 ++--- webapp/src/components/Map/OSMap.tsx | 24 ++++++----- webapp/src/components/Solid/ReadFromPod.ts | 30 ++++++++------ .../components/WelcomePage/WelcomePage.tsx | 41 ++++++++++--------- 4 files changed, 60 insertions(+), 46 deletions(-) diff --git a/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx b/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx index d52611b..e152e22 100644 --- a/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx +++ b/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/alt-text */ import { useState } from "react"; import { readFromDataSet } from "../../../Solid/ReadFromPod"; -import { ShowMarkers } from "../../OSMap"; +import { ShowMarkersFromPromise } from "../../OSMap"; import "./MarkersButton.css"; export default function Markers() { @@ -9,14 +9,15 @@ export default function Markers() { return (
-
); -} \ No newline at end of file +} diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index fb9a51d..cd8df2e 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -20,14 +20,18 @@ export interface Marker { score: number; } -export function ShowMarkers(promise: any) { +export function ShowMarkersFromPromise(promise: any) { promise.then((array: any) => { ShowMarkersFulfilledPromise(array); }); } +export function ShowMarkers(array: any) { + ShowMarkersFulfilledPromise(array); +} + export function ShowMarkersFulfilledPromise(array: any[] | null) { - if(!array) return; + if (!array) return; array.forEach((element: any) => { let marker = L.marker([element.lat, element.lng], { icon: markerIcon, @@ -85,14 +89,14 @@ export function OSMap() { return (
-
- - - -
-
- -
+
+ + + +
+
+ +
{ const thingData = getStringNoLocale(thing, SCHEMA_INRUPT.description) return thingData ? JSON.parse(thingData) : "No data"; }).filter(isData) - let finalData = new Array() - data.forEach( (element : any ) => finalData.push(element)) - - return finalData + return data }) @@ -143,16 +139,21 @@ import { const reader = new FileReader(); - let content - // This fires after the blob has been read/loaded. - reader.addEventListener('loadend', (e) => { - content = parseContent(e.target?.result) + // Wrap the event listener in a Promise + const contentPromise = new Promise((resolve) => { + reader.addEventListener("loadend", (e) => { + const content : any = parseContent(e.target?.result); + resolve(content); + }); }); // Start reading the blob as text. reader.readAsText(file); - console.log(content) + // Wait for the Promise to resolve before returning the content. + const content = await contentPromise; + + return content; } catch (err) { console.error(err); @@ -169,10 +170,15 @@ import { let friends = new Array() prefixes.forEach((e : string) => { - const url = e.split(": ")[1] + let url = e.split(": ")[1] + url = url.replace("<", "") + url = url.replace(">", "") + url = url.substring(0, url.length - 1) friends.push(url) }) + friends.shift() + return friends } \ No newline at end of file diff --git a/webapp/src/components/WelcomePage/WelcomePage.tsx b/webapp/src/components/WelcomePage/WelcomePage.tsx index 943b538..650e16a 100644 --- a/webapp/src/components/WelcomePage/WelcomePage.tsx +++ b/webapp/src/components/WelcomePage/WelcomePage.tsx @@ -1,7 +1,7 @@ import "./WelcomePage.css"; import WelcomeText from "./subcomponents/WelcomeText"; import WelcomeSolid from "./subcomponents/WelcomeSolid"; -import { OSMap, ShowMarkers } from "../Map/OSMap"; +import { OSMap, ShowMarkers, ShowMarkersFromPromise } from "../Map/OSMap"; import "aos/dist/aos.css"; import { useSession } from "@inrupt/solid-ui-react"; import { getFriendsFromPod, readFromFriendDataSet } from "../Solid/ReadFromPod"; @@ -9,7 +9,7 @@ import { useState } from "react"; export default function WelcomePage() { const { session } = useSession(); - const [markers, setMarkers] = useState("" as any); + const [markers, setMarkers] = useState(new Array()); return (
@@ -32,23 +32,26 @@ export default function WelcomePage() { ) : (
-
From 5c343ad9bc257c6852b7f32046fd2b3b15b0ca62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Campa=20Mart=C3=ADnez?= Date: Sat, 22 Apr 2023 13:32:44 +0200 Subject: [PATCH 20/44] cambios --- webapp/src/components/Map/OSMap.tsx | 8 ++++++-- webapp/src/components/WelcomePage/WelcomePage.tsx | 14 +++++++------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index cd8df2e..7ae6d4f 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -26,13 +26,17 @@ export function ShowMarkersFromPromise(promise: any) { }); } -export function ShowMarkers(array: any) { - ShowMarkersFulfilledPromise(array); +export function ShowMarkersMultidimensional(array: any) { + array.forEach((element: any) => { + console.log(element); + ShowMarkersFulfilledPromise(element); + }); } export function ShowMarkersFulfilledPromise(array: any[] | null) { if (!array) return; array.forEach((element: any) => { + console.log(element); let marker = L.marker([element.lat, element.lng], { icon: markerIcon, draggable: false, diff --git a/webapp/src/components/WelcomePage/WelcomePage.tsx b/webapp/src/components/WelcomePage/WelcomePage.tsx index 650e16a..8a98bd5 100644 --- a/webapp/src/components/WelcomePage/WelcomePage.tsx +++ b/webapp/src/components/WelcomePage/WelcomePage.tsx @@ -1,7 +1,11 @@ import "./WelcomePage.css"; import WelcomeText from "./subcomponents/WelcomeText"; import WelcomeSolid from "./subcomponents/WelcomeSolid"; -import { OSMap, ShowMarkers, ShowMarkersFromPromise } from "../Map/OSMap"; +import { + OSMap, + ShowMarkersFromPromise, + ShowMarkersMultidimensional, +} from "../Map/OSMap"; import "aos/dist/aos.css"; import { useSession } from "@inrupt/solid-ui-react"; import { getFriendsFromPod, readFromFriendDataSet } from "../Solid/ReadFromPod"; @@ -9,7 +13,6 @@ import { useState } from "react"; export default function WelcomePage() { const { session } = useSession(); - const [markers, setMarkers] = useState(new Array()); return (
@@ -36,15 +39,12 @@ export default function WelcomePage() { onClick={async () => { try { const friends: any = await getFriendsFromPod(); - const promises: Promise[] = friends.map((e: any) => { + const promises: Promise[] = friends.flatMap((e: any) => { return readFromFriendDataSet(e); }); const arrays: any[] = await Promise.all(promises); console.log(arrays); - const markersToSet: any[] = arrays.flat(); - console.log(markersToSet); - await ShowMarkers(markersToSet); - setMarkers(markersToSet); + ShowMarkersMultidimensional(arrays); } catch (error) { // Handle errors here console.log(error); From 3e1023b82a77fb4ecad4625d4f8ab56d909698da Mon Sep 17 00:00:00 2001 From: joseji Date: Sat, 22 Apr 2023 13:40:21 +0200 Subject: [PATCH 21/44] cambio paths --- webapp/src/App.tsx | 6 +++--- .../src/components/{pages => Pages}/LoginPage/LoginPage.css | 0 .../src/components/{pages => Pages}/LoginPage/LoginPage.tsx | 0 .../src/components/{pages => Pages}/MainMenu/MainMenu.css | 0 .../src/components/{pages => Pages}/MainMenu/MainMenu.tsx | 0 .../src/components/{pages => Pages}/UserPage/UserPage.tsx | 3 ++- .../src/components/{ => Pages}/WelcomePage/WelcomePage.css | 0 .../src/components/{ => Pages}/WelcomePage/WelcomePage.tsx | 6 ++---- .../{ => Pages}/WelcomePage/subcomponents/WelcomeSolid.tsx | 0 .../{ => Pages}/WelcomePage/subcomponents/WelcomeText.tsx | 0 webapp/src/components/Solid/Friends/RequestFriendship.tsx | 3 ++- 11 files changed, 9 insertions(+), 9 deletions(-) rename webapp/src/components/{pages => Pages}/LoginPage/LoginPage.css (100%) rename webapp/src/components/{pages => Pages}/LoginPage/LoginPage.tsx (100%) rename webapp/src/components/{pages => Pages}/MainMenu/MainMenu.css (100%) rename webapp/src/components/{pages => Pages}/MainMenu/MainMenu.tsx (100%) rename webapp/src/components/{pages => Pages}/UserPage/UserPage.tsx (99%) rename webapp/src/components/{ => Pages}/WelcomePage/WelcomePage.css (100%) rename webapp/src/components/{ => Pages}/WelcomePage/WelcomePage.tsx (91%) rename webapp/src/components/{ => Pages}/WelcomePage/subcomponents/WelcomeSolid.tsx (100%) rename webapp/src/components/{ => Pages}/WelcomePage/subcomponents/WelcomeText.tsx (100%) diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 02d3baf..b0c387a 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -1,10 +1,10 @@ import "./App.css"; import NavBar from "./components/NavBar/NavBar"; import Footer from "./components/Footer/Footer"; -import WelcomePage from "./components/WelcomePage/WelcomePage"; -import MainMenu from "./components/pages/MainMenu/MainMenu"; +import WelcomePage from "./components/Pages/WelcomePage/WelcomePage"; +import MainMenu from "./components/Pages/MainMenu/MainMenu"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; -import UserPage from "./components/pages/UserPage/UserPage"; +import UserPage from "./components/Pages/UserPage/UserPage"; import { OSMap } from "./components/Map/OSMap"; import { SessionProvider } from "@inrupt/solid-ui-react"; import RequestFriendship from "./components/Solid/Friends/RequestFriendship"; diff --git a/webapp/src/components/pages/LoginPage/LoginPage.css b/webapp/src/components/Pages/LoginPage/LoginPage.css similarity index 100% rename from webapp/src/components/pages/LoginPage/LoginPage.css rename to webapp/src/components/Pages/LoginPage/LoginPage.css diff --git a/webapp/src/components/pages/LoginPage/LoginPage.tsx b/webapp/src/components/Pages/LoginPage/LoginPage.tsx similarity index 100% rename from webapp/src/components/pages/LoginPage/LoginPage.tsx rename to webapp/src/components/Pages/LoginPage/LoginPage.tsx diff --git a/webapp/src/components/pages/MainMenu/MainMenu.css b/webapp/src/components/Pages/MainMenu/MainMenu.css similarity index 100% rename from webapp/src/components/pages/MainMenu/MainMenu.css rename to webapp/src/components/Pages/MainMenu/MainMenu.css diff --git a/webapp/src/components/pages/MainMenu/MainMenu.tsx b/webapp/src/components/Pages/MainMenu/MainMenu.tsx similarity index 100% rename from webapp/src/components/pages/MainMenu/MainMenu.tsx rename to webapp/src/components/Pages/MainMenu/MainMenu.tsx diff --git a/webapp/src/components/pages/UserPage/UserPage.tsx b/webapp/src/components/Pages/UserPage/UserPage.tsx similarity index 99% rename from webapp/src/components/pages/UserPage/UserPage.tsx rename to webapp/src/components/Pages/UserPage/UserPage.tsx index 6f645dd..4feb19c 100644 --- a/webapp/src/components/pages/UserPage/UserPage.tsx +++ b/webapp/src/components/Pages/UserPage/UserPage.tsx @@ -1,6 +1,7 @@ -import LoginForm from "../LoginPage/LoginPage"; + import ProfileViewer from "../../Solid/User/ProfileViewer"; import { useSession } from "@inrupt/solid-ui-react"; +import LoginForm from "../LoginPage/LoginPage"; const UserPage = () => { //With this we can control the login status for solid diff --git a/webapp/src/components/WelcomePage/WelcomePage.css b/webapp/src/components/Pages/WelcomePage/WelcomePage.css similarity index 100% rename from webapp/src/components/WelcomePage/WelcomePage.css rename to webapp/src/components/Pages/WelcomePage/WelcomePage.css diff --git a/webapp/src/components/WelcomePage/WelcomePage.tsx b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx similarity index 91% rename from webapp/src/components/WelcomePage/WelcomePage.tsx rename to webapp/src/components/Pages/WelcomePage/WelcomePage.tsx index 8a98bd5..ec4e51f 100644 --- a/webapp/src/components/WelcomePage/WelcomePage.tsx +++ b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx @@ -3,13 +3,11 @@ import WelcomeText from "./subcomponents/WelcomeText"; import WelcomeSolid from "./subcomponents/WelcomeSolid"; import { OSMap, - ShowMarkersFromPromise, ShowMarkersMultidimensional, -} from "../Map/OSMap"; +} from "../../Map/OSMap"; import "aos/dist/aos.css"; import { useSession } from "@inrupt/solid-ui-react"; -import { getFriendsFromPod, readFromFriendDataSet } from "../Solid/ReadFromPod"; -import { useState } from "react"; +import { getFriendsFromPod, readFromFriendDataSet } from "../../Solid/ReadFromPod"; export default function WelcomePage() { const { session } = useSession(); diff --git a/webapp/src/components/WelcomePage/subcomponents/WelcomeSolid.tsx b/webapp/src/components/Pages/WelcomePage/subcomponents/WelcomeSolid.tsx similarity index 100% rename from webapp/src/components/WelcomePage/subcomponents/WelcomeSolid.tsx rename to webapp/src/components/Pages/WelcomePage/subcomponents/WelcomeSolid.tsx diff --git a/webapp/src/components/WelcomePage/subcomponents/WelcomeText.tsx b/webapp/src/components/Pages/WelcomePage/subcomponents/WelcomeText.tsx similarity index 100% rename from webapp/src/components/WelcomePage/subcomponents/WelcomeText.tsx rename to webapp/src/components/Pages/WelcomePage/subcomponents/WelcomeText.tsx diff --git a/webapp/src/components/Solid/Friends/RequestFriendship.tsx b/webapp/src/components/Solid/Friends/RequestFriendship.tsx index 97d522b..00e310b 100644 --- a/webapp/src/components/Solid/Friends/RequestFriendship.tsx +++ b/webapp/src/components/Solid/Friends/RequestFriendship.tsx @@ -1,8 +1,9 @@ -import LoginForm from "../../pages/LoginPage/LoginPage"; + import { useSession } from "@inrupt/solid-ui-react"; import { writeDataToNewDataSet } from "../WriteToPod"; import React, { useState } from "react"; +import LoginForm from "../../Pages/LoginPage/LoginPage"; const RequestFriendship = () => { const [friendUrl, setfriendUrl] = useState(""); From 6b05f9a9f1a90b59c22e9f48534761691f503548 Mon Sep 17 00:00:00 2001 From: joseji Date: Sat, 22 Apr 2023 16:27:33 +0200 Subject: [PATCH 22/44] error solucionado, se muestran los marcadores de los amigos correctamente --- .../Filters/Landscape/FilterLandscape.tsx | 4 +-- .../Filters/Monument/FilterMonument.tsx | 4 +-- .../Filters/Restaurant/FilterRestaurant.tsx | 4 +-- webapp/src/components/Map/OSMap.tsx | 10 +------ .../Pages/WelcomePage/WelcomePage.tsx | 26 ++++++++++++------- webapp/src/components/Solid/ReadFromPod.ts | 25 +++++++----------- 6 files changed, 32 insertions(+), 41 deletions(-) diff --git a/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx b/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx index e3e181d..ed6045c 100644 --- a/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx +++ b/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/alt-text */ import { useState } from "react"; import { readFromDataSet } from "../../../../Solid/ReadFromPod"; -import { clearMarkers, ShowMarkersFulfilledPromise } from "../../../OSMap"; +import { clearMarkers, ShowMarkersFromPromise} from "../../../OSMap"; import { filterByType } from "../Filter"; import "../FilterButton.css" @@ -13,7 +13,7 @@ export function FilterLandscape() { onClick={async () => { clearMarkers(); setMarkers(readFromDataSet()); - ShowMarkersFulfilledPromise(await filterByType(markers, "landscape")); + ShowMarkersFromPromise(filterByType(markers, "landscape")); }} > diff --git a/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx b/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx index 4ea14c5..7ae8103 100644 --- a/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx +++ b/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/alt-text */ import { useState } from "react"; import { readFromDataSet } from "../../../../Solid/ReadFromPod"; -import { clearMarkers, ShowMarkersFulfilledPromise } from "../../../OSMap"; +import { clearMarkers, ShowMarkersFromPromise } from "../../../OSMap"; import { filterByType } from "../Filter"; import "../FilterButton.css" @@ -13,7 +13,7 @@ export function FilterMonument() { onClick={async () => { clearMarkers(); setMarkers(readFromDataSet()); - ShowMarkersFulfilledPromise(await filterByType(markers, "monument")); + ShowMarkersFromPromise(filterByType(markers, "monument")); }} > diff --git a/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx b/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx index 61837e3..4a6dc45 100644 --- a/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx +++ b/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/alt-text */ import { useState } from "react"; import { readFromDataSet } from "../../../../Solid/ReadFromPod"; -import { clearMarkers, ShowMarkersFulfilledPromise } from "../../../OSMap"; +import { clearMarkers, ShowMarkersFromPromise } from "../../../OSMap"; import { filterByType } from "../Filter"; import "../FilterButton.css" @@ -13,7 +13,7 @@ export function FilterRestaurant() { onClick={async () => { clearMarkers(); setMarkers(readFromDataSet()); - ShowMarkersFulfilledPromise(await filterByType(markers, "restaurant")); + ShowMarkersFromPromise(filterByType(markers, "restaurant")); }} > diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index 7ae6d4f..6fa988a 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -26,17 +26,9 @@ export function ShowMarkersFromPromise(promise: any) { }); } -export function ShowMarkersMultidimensional(array: any) { - array.forEach((element: any) => { - console.log(element); - ShowMarkersFulfilledPromise(element); - }); -} - export function ShowMarkersFulfilledPromise(array: any[] | null) { - if (!array) return; + if (array === null) return; array.forEach((element: any) => { - console.log(element); let marker = L.marker([element.lat, element.lng], { icon: markerIcon, draggable: false, diff --git a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx index ec4e51f..32fc401 100644 --- a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx +++ b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx @@ -3,14 +3,23 @@ import WelcomeText from "./subcomponents/WelcomeText"; import WelcomeSolid from "./subcomponents/WelcomeSolid"; import { OSMap, - ShowMarkersMultidimensional, + ShowMarkersFulfilledPromise, } from "../../Map/OSMap"; import "aos/dist/aos.css"; import { useSession } from "@inrupt/solid-ui-react"; -import { getFriendsFromPod, readFromFriendDataSet } from "../../Solid/ReadFromPod"; +import { getFriendsFromPod, readFromDataSet, readFromFriendDataSet } from "../../Solid/ReadFromPod"; +import { useState } from "react"; export default function WelcomePage() { const { session } = useSession(); + const [markers, setMarkers] = useState(readFromDataSet()); + + function readFromFriend(url: string){ + setMarkers(readFromFriendDataSet(url)); + markers.then((array: any) => { + ShowMarkersFulfilledPromise(array); + }); + } return (
@@ -34,17 +43,14 @@ export default function WelcomePage() { ) : (
From faf56f8c518bd84a5d71a870856a32ec73aa6a56 Mon Sep 17 00:00:00 2001 From: joseji Date: Sun, 23 Apr 2023 17:42:27 +0200 Subject: [PATCH 24/44] filter button todo funcionando --- .../Markers/Filters/{Filter.tsx => Filter.ts} | 0 .../Map/Markers/Filters/FilterButton.css | 9 +- .../Filters/Hamburger/FilterHamburger.css | 139 ++++++++++++++++++ .../Filters/Hamburger/FilterHamburger.tsx | 49 ++++++ .../Filters/Restaurant/FilterRestaurant.tsx | 4 +- webapp/src/components/Map/OSMap.tsx | 5 +- 6 files changed, 200 insertions(+), 6 deletions(-) rename webapp/src/components/Map/Markers/Filters/{Filter.tsx => Filter.ts} (100%) create mode 100644 webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.css create mode 100644 webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx diff --git a/webapp/src/components/Map/Markers/Filters/Filter.tsx b/webapp/src/components/Map/Markers/Filters/Filter.ts similarity index 100% rename from webapp/src/components/Map/Markers/Filters/Filter.tsx rename to webapp/src/components/Map/Markers/Filters/Filter.ts diff --git a/webapp/src/components/Map/Markers/Filters/FilterButton.css b/webapp/src/components/Map/Markers/Filters/FilterButton.css index a319583..608215a 100644 --- a/webapp/src/components/Map/Markers/Filters/FilterButton.css +++ b/webapp/src/components/Map/Markers/Filters/FilterButton.css @@ -1,12 +1,19 @@ .filter-restaurant { - background-color: white; + position: relative; + background-color: whitesmoke; border: none; padding: 5px 5px; + height: 80px; + width: 80px; cursor: pointer; outline: none; transition: background-color 0.3s ease; } + .button-image{ + margin-top: -30px; + } + .filter-monument { background-color: white; border: none; diff --git a/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.css b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.css new file mode 100644 index 0000000..411fed2 --- /dev/null +++ b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.css @@ -0,0 +1,139 @@ +body { + background: #3f51b5; + color: white; + text-align: center; +} + +a { + color: inherit; +} + +h1, h2, h3, h4 { + margin: 0; + margin-bottom: 10px; + margin-top: 10px; +} + +h1 { + font-size: 3em; +} + +.menu { + filter: url("#shadowed-goo"); +} + +.menu-item, .menu-open-button { + background: cornflowerblue; + border-radius: 100%; + width: 80px; + height: 80px; + margin-left: -40px; + position: absolute; + top: 20px; + color: white; + text-align: center; + line-height: 80px; + transform: translate3d(0, 0, 0); + transition: transform ease-out 200ms; +} + +.menu-open { + display: none; +} + +.hamburger { + width: 25px; + height: 3px; + background: white; + display: block; + position: absolute; + top: 50%; + left: 50%; + margin-left: -12.5px; + margin-top: -1.5px; + transition: transform 200ms; +} + +.hamburger-1 { + transform: translate3d(0, -8px, 0); +} + +.hamburger-2 { + transform: translate3d(0, 0, 0); +} + +.hamburger-3 { + transform: translate3d(0, 8px, 0); +} + +.menu-open:checked + .menu-open-button .hamburger-1 { + transform: translate3d(0, 0, 0) rotate(45deg); +} +.menu-open:checked + .menu-open-button .hamburger-2 { + transform: translate3d(0, 0, 0) scale(0.1, 1); +} +.menu-open:checked + .menu-open-button .hamburger-3 { + transform: translate3d(0, 0, 0) rotate(-45deg); +} + +.menu-item:hover { + background: white; + color: #ff4081; +} +.menu-item:nth-child(3) { + transition-duration: 70ms; +} +.menu-item:nth-child(4) { + transition-duration: 130ms; +} +.menu-item:nth-child(5) { + transition-duration: 190ms; +} +.menu-item:nth-child(6) { + transition-duration: 250ms; +} +.menu-item:nth-child(7) { + transition-duration: 310ms; +} + +.menu-open-button { + z-index: 2; + transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); + transition-duration: 400ms; + transform: scale(1.1, 1.1) translate3d(0, 0, 0); + cursor: pointer; +} + +.menu-open-button:hover { + transform: scale(1.2, 1.2) translate3d(0, 0, 0); +} + +.menu-open:checked + .menu-open-button { + transition-timing-function: linear; + transition-duration: 200ms; + transform: scale(0.8, 0.8) translate3d(0, 0, 0); +} + +.menu-open:checked ~ .menu-item { + transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); +} +.menu-open:checked ~ .menu-item:nth-child(3) { + transition-duration: 160ms; + transform: translate3d(70px, 70px, 0); +} +.menu-open:checked ~ .menu-item:nth-child(4) { + transition-duration: 240ms; + transform: translate3d(77.18543px, 85.2491px, 0); +} +.menu-open:checked ~ .menu-item:nth-child(5) { + transition-duration: 320ms; + transform: translate3d(0.09158px, 114.99996px, 0); +} +.menu-open:checked ~ .menu-item:nth-child(6) { + transition-duration: 400ms; + transform: translate3d(-77.04956px, 85.37192px, 0); +} +.menu-open:checked ~ .menu-item:nth-child(7) { + transition-duration: 480ms; + transform: translate3d(-114.40705px, 11.66307px, 0); +} \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx new file mode 100644 index 0000000..26f9e03 --- /dev/null +++ b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx @@ -0,0 +1,49 @@ + +import { useState } from "react"; +import { FilterLandscape } from "../Landscape/FilterLandscape"; +import { FilterMonument } from "../Monument/FilterMonument"; +import { FilterRestaurant } from "../Restaurant/FilterRestaurant"; +import "./FilterHamburger.css" + +export default function FilterHamburger(){ + + const [menuOpen, setMenuOpen] = useState(false); + + const handleMenuToggle = () => { + setMenuOpen(!menuOpen); + }; + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx b/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx index 4a6dc45..30699e1 100644 --- a/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx +++ b/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx @@ -9,14 +9,14 @@ export function FilterRestaurant() { const [markers, setMarkers] = useState(readFromDataSet()); return (
-
); diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index 6fa988a..fe514ab 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -9,6 +9,7 @@ import MarkersButton from "./Markers/MarkersButton/MarkersButton"; import { FilterRestaurant } from "./Markers/Filters/Restaurant/FilterRestaurant"; import { FilterMonument } from "./Markers/Filters/Monument/FilterMonument"; import { FilterLandscape } from "./Markers/Filters/Landscape/FilterLandscape"; +import FilterHamburger from "./Markers/Filters/Hamburger/FilterHamburger"; var map: L.Map; export interface Marker { @@ -86,9 +87,7 @@ export function OSMap() {
- - - +
From f12290b5d0b2dcd7a2c7235bf59c1c6f3ddfea71 Mon Sep 17 00:00:00 2001 From: joseji Date: Sun, 23 Apr 2023 17:42:38 +0200 Subject: [PATCH 25/44] refactor boton amigos --- .../Pages/WelcomePage/WelcomePage.tsx | 26 -------------- .../Solid/Friends/ShowFriendMarkers.tsx | 35 +++++++++++++++++++ 2 files changed, 35 insertions(+), 26 deletions(-) create mode 100644 webapp/src/components/Solid/Friends/ShowFriendMarkers.tsx diff --git a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx index 32fc401..80c0414 100644 --- a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx +++ b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx @@ -3,23 +3,12 @@ import WelcomeText from "./subcomponents/WelcomeText"; import WelcomeSolid from "./subcomponents/WelcomeSolid"; import { OSMap, - ShowMarkersFulfilledPromise, } from "../../Map/OSMap"; import "aos/dist/aos.css"; import { useSession } from "@inrupt/solid-ui-react"; -import { getFriendsFromPod, readFromDataSet, readFromFriendDataSet } from "../../Solid/ReadFromPod"; -import { useState } from "react"; export default function WelcomePage() { const { session } = useSession(); - const [markers, setMarkers] = useState(readFromDataSet()); - - function readFromFriend(url: string){ - setMarkers(readFromFriendDataSet(url)); - markers.then((array: any) => { - ShowMarkersFulfilledPromise(array); - }); - } return (
@@ -42,21 +31,6 @@ export default function WelcomePage() { ) : (
-
diff --git a/webapp/src/components/Solid/Friends/ShowFriendMarkers.tsx b/webapp/src/components/Solid/Friends/ShowFriendMarkers.tsx new file mode 100644 index 0000000..0effd51 --- /dev/null +++ b/webapp/src/components/Solid/Friends/ShowFriendMarkers.tsx @@ -0,0 +1,35 @@ +import { useState } from "react"; +import { ShowMarkersFulfilledPromise } from "../../Map/OSMap"; +import { getFriendsFromPod, readFromDataSet, readFromFriendDataSet } from "../ReadFromPod"; + + +function GetFriendMarkers(){ + + const [markers, setMarkers] = useState(readFromDataSet()); + + function readFromFriend(url: string){ + setMarkers(readFromFriendDataSet(url)); + markers.then((array: any) => { + ShowMarkersFulfilledPromise(array); + }); + } + return( + + ); +}; + +export default GetFriendMarkers; \ No newline at end of file From 0d3e2ba0949dd15545d5ca52cd6c2da583e02dd5 Mon Sep 17 00:00:00 2001 From: joseji Date: Sun, 23 Apr 2023 18:18:47 +0200 Subject: [PATCH 26/44] filtro entero --- .../Map/Markers/Filters/FilterButton.css | 28 ++-------- .../Filters/Hamburger/FilterHamburger.css | 51 +++++++------------ .../Filters/Hamburger/FilterHamburger.tsx | 16 +++--- .../Filters/Landscape/FilterLandscape.tsx | 4 +- .../Filters/Monument/FilterMonument.tsx | 4 +- .../Filters/Restaurant/FilterRestaurant.tsx | 4 +- .../Markers/MarkersButton/MarkersButton.css | 16 +++--- .../Markers/MarkersButton/MarkersButton.tsx | 5 +- webapp/src/components/Map/OSMap.css | 17 ++----- webapp/src/components/Map/OSMap.tsx | 3 -- .../Solid/Friends/ShowFriendMarkers.tsx | 6 +-- 11 files changed, 55 insertions(+), 99 deletions(-) diff --git a/webapp/src/components/Map/Markers/Filters/FilterButton.css b/webapp/src/components/Map/Markers/Filters/FilterButton.css index 608215a..af42f9b 100644 --- a/webapp/src/components/Map/Markers/Filters/FilterButton.css +++ b/webapp/src/components/Map/Markers/Filters/FilterButton.css @@ -1,4 +1,4 @@ -.filter-restaurant { +.filter-button { position: relative; background-color: whitesmoke; border: none; @@ -9,28 +9,6 @@ outline: none; transition: background-color 0.3s ease; } - - .button-image{ - margin-top: -30px; - } - - .filter-monument { - background-color: white; - border: none; - padding: 5px 5px; - cursor: pointer; - outline: none; - transition: background-color 0.3s ease; - } - - .filter-landscape { - background-color: white; - border: none; - padding: 5px 5px; - cursor: pointer; - outline: none; - transition: background-color 0.3s ease; - } /* Estilos de animación al hacer clic */ button:hover { @@ -42,4 +20,8 @@ button:active { background-color: #e0e0e0; transform: scale(0.95); + } + + .filter-button-image{ + margin-top: -15px; } \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.css b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.css index 411fed2..18ef983 100644 --- a/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.css +++ b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.css @@ -4,25 +4,11 @@ body { text-align: center; } -a { - color: inherit; -} - -h1, h2, h3, h4 { - margin: 0; - margin-bottom: 10px; - margin-top: 10px; -} - -h1 { - font-size: 3em; -} - .menu { filter: url("#shadowed-goo"); } -.menu-item, .menu-open-button { +.menu-item-hamburger, .menu-open-button { background: cornflowerblue; border-radius: 100%; width: 80px; @@ -76,23 +62,22 @@ h1 { transform: translate3d(0, 0, 0) rotate(-45deg); } -.menu-item:hover { +.menu-item-hamburger:hover { background: white; - color: #ff4081; } -.menu-item:nth-child(3) { +.menu-item-hamburger:nth-child(3) { transition-duration: 70ms; } -.menu-item:nth-child(4) { +.menu-item-hamburger:nth-child(4) { transition-duration: 130ms; } -.menu-item:nth-child(5) { +.menu-item-hamburger:nth-child(5) { transition-duration: 190ms; } -.menu-item:nth-child(6) { +.menu-item-hamburger:nth-child(6) { transition-duration: 250ms; } -.menu-item:nth-child(7) { +.menu-item-hamburger:nth-child(7) { transition-duration: 310ms; } @@ -114,26 +99,26 @@ h1 { transform: scale(0.8, 0.8) translate3d(0, 0, 0); } -.menu-open:checked ~ .menu-item { +.menu-open:checked ~ .menu-item-hamburger { transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); } -.menu-open:checked ~ .menu-item:nth-child(3) { +.menu-open:checked ~ .menu-item-hamburger:nth-child(3) { transition-duration: 160ms; - transform: translate3d(70px, 70px, 0); + transform: translate3d(77.60px, 85.2491px, 0); } -.menu-open:checked ~ .menu-item:nth-child(4) { +.menu-open:checked ~ .menu-item-hamburger:nth-child(4) { transition-duration: 240ms; - transform: translate3d(77.18543px, 85.2491px, 0); + transform: translate3d(0.09158px, 114.99996px, 0); } -.menu-open:checked ~ .menu-item:nth-child(5) { +.menu-open:checked ~ .menu-item-hamburger:nth-child(5) { transition-duration: 320ms; - transform: translate3d(0.09158px, 114.99996px, 0); + transform: translate3d(-77.04956px, 85.37192px, 0); } -.menu-open:checked ~ .menu-item:nth-child(6) { +.menu-open:checked ~ .menu-item-hamburger:nth-child(6) { transition-duration: 400ms; - transform: translate3d(-77.04956px, 85.37192px, 0); + transform: translate3d(-114.40705px, 11.66307px, 0); } -.menu-open:checked ~ .menu-item:nth-child(7) { +.menu-open:checked ~ .menu-item-hamburger:nth-child(7) { transition-duration: 480ms; - transform: translate3d(-114.40705px, 11.66307px, 0); + transform: translate3d(-77.04956px, -62.04956px, 0); } \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx index 26f9e03..eba1bae 100644 --- a/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx +++ b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx @@ -1,5 +1,6 @@ -import { useState } from "react"; +import GetFriendMarkers from "../../../../Solid/Friends/ShowFriendMarkers"; +import Markers from "../../MarkersButton/MarkersButton"; import { FilterLandscape } from "../Landscape/FilterLandscape"; import { FilterMonument } from "../Monument/FilterMonument"; import { FilterRestaurant } from "../Restaurant/FilterRestaurant"; @@ -7,12 +8,6 @@ import "./FilterHamburger.css" export default function FilterHamburger(){ - const [menuOpen, setMenuOpen] = useState(false); - - const handleMenuToggle = () => { - setMenuOpen(!menuOpen); - }; - return (
@@ -23,7 +18,12 @@ export default function FilterHamburger(){ - + +
+
+
+
+
diff --git a/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx b/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx index ed6045c..e31fec6 100644 --- a/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx +++ b/webapp/src/components/Map/Markers/Filters/Landscape/FilterLandscape.tsx @@ -9,14 +9,14 @@ export function FilterLandscape() { const [markers, setMarkers] = useState(readFromDataSet()); return (
-
); diff --git a/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx b/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx index 7ae8103..7e06f66 100644 --- a/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx +++ b/webapp/src/components/Map/Markers/Filters/Monument/FilterMonument.tsx @@ -9,14 +9,14 @@ export function FilterMonument() { const [markers, setMarkers] = useState(readFromDataSet()); return (
-
); diff --git a/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx b/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx index 30699e1..5576579 100644 --- a/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx +++ b/webapp/src/components/Map/Markers/Filters/Restaurant/FilterRestaurant.tsx @@ -9,14 +9,14 @@ export function FilterRestaurant() { const [markers, setMarkers] = useState(readFromDataSet()); return (
-
); diff --git a/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.css b/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.css index 85c72ac..6be6191 100644 --- a/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.css +++ b/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.css @@ -1,11 +1,13 @@ .button-markers { - background-color: white; - border: none; - padding: 10px 20px; - font-size: 18px; - cursor: pointer; - outline: none; - transition: background-color 0.3s ease; + position: relative; + background-color: whitesmoke; + border: none; + padding: 5px 5px; + height: 80px; + width: 80px; + cursor: pointer; + outline: none; + transition: background-color 0.3s ease; } /* Estilos de animación al hacer clic */ diff --git a/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx b/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx index e152e22..de9f92a 100644 --- a/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx +++ b/webapp/src/components/Map/Markers/MarkersButton/MarkersButton.tsx @@ -3,20 +3,21 @@ import { useState } from "react"; import { readFromDataSet } from "../../../Solid/ReadFromPod"; import { ShowMarkersFromPromise } from "../../OSMap"; import "./MarkersButton.css"; +import "../Filters/FilterButton.css"; export default function Markers() { const [markers, setMarkers] = useState(readFromDataSet()); return (
-
); diff --git a/webapp/src/components/Map/OSMap.css b/webapp/src/components/Map/OSMap.css index 57cfca5..51f374e 100644 --- a/webapp/src/components/Map/OSMap.css +++ b/webapp/src/components/Map/OSMap.css @@ -13,22 +13,11 @@ z-index: 1000; } -.button_marker { +.filters { position: absolute; - top: 3%; - right: 3%; + top: 1%; + right: 1%; width: 5%; height: 5%; z-index: 1000; } - - -.filters { - position: absolute; - display: grid; - top: 3%; - left: 3%; - width: 4%; - height: 4%; - z-index: 1000; -} \ No newline at end of file diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index fe514ab..2e5155a 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -89,9 +89,6 @@ export function OSMap() {
-
- -
{ try { getFriendsFromPod().then((friends: any) => { @@ -27,7 +27,7 @@ function GetFriendMarkers(){ } }} > - Amigos + ); }; From a00d2a0b8555f444f3ee9961997025515d2179f7 Mon Sep 17 00:00:00 2001 From: joseji Date: Sun, 23 Apr 2023 18:22:00 +0200 Subject: [PATCH 27/44] color fixed --- webapp/src/components/Pages/LoginPage/LoginPage.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/Pages/LoginPage/LoginPage.css b/webapp/src/components/Pages/LoginPage/LoginPage.css index e121e81..42546da 100644 --- a/webapp/src/components/Pages/LoginPage/LoginPage.css +++ b/webapp/src/components/Pages/LoginPage/LoginPage.css @@ -40,7 +40,7 @@ label { } button { - background-color: #ee7e51; + background-color: cornflowerblue;; color: white; font-weight: bold; cursor: pointer; From 741234ea3b8036eee2f4f01fd5f7d008871d5aa6 Mon Sep 17 00:00:00 2001 From: joseji Date: Sun, 23 Apr 2023 18:37:12 +0200 Subject: [PATCH 28/44] arreglada pantalla comentario --- .../components/CommentsPage/CommentsPage.css | 23 ++++++++++++++++++- .../components/CommentsPage/CommentsPage.tsx | 17 ++++++-------- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/webapp/src/components/CommentsPage/CommentsPage.css b/webapp/src/components/CommentsPage/CommentsPage.css index c5dd7f8..e1e92ae 100644 --- a/webapp/src/components/CommentsPage/CommentsPage.css +++ b/webapp/src/components/CommentsPage/CommentsPage.css @@ -11,8 +11,29 @@ } .cancel_button { - width: 70%; + position: absolute; + background: none; + border: none; + right: 4%; + top: 8%; + width: 30px; + height: 30px; + margin-left: 35%; + align-items: center; } + +.cancel_button:hover { + background: none; +} + +.cancel-button-img { + position: relative; + margin-top: -12px; + margin-left: -20px; + width: 40px; + height: 40px; +} + h1 { color: white; } diff --git a/webapp/src/components/CommentsPage/CommentsPage.tsx b/webapp/src/components/CommentsPage/CommentsPage.tsx index 6628a7f..2735b18 100644 --- a/webapp/src/components/CommentsPage/CommentsPage.tsx +++ b/webapp/src/components/CommentsPage/CommentsPage.tsx @@ -5,7 +5,6 @@ import { Marker } from "../Map/OSMap"; import { getDefaultSession } from "@inrupt/solid-client-authn-browser"; import { writeMarkerToDataSet } from "../Solid/WriteToPod"; import { Rating } from 'react-simple-star-rating' -import { Link } from "react-router-dom"; // TODO: ver si se puede eliminar esta funcion async function saveMarker(markerData: any) { @@ -89,6 +88,13 @@ export default function CommentsPage(props: any) { return (
+
+ +
@@ -141,15 +147,6 @@ export default function CommentsPage(props: any) {
-
- -
From 476615b99b09b1e51f5ba9f5bafc5aef594d79ae Mon Sep 17 00:00:00 2001 From: joseji Date: Sun, 23 Apr 2023 18:49:18 +0200 Subject: [PATCH 29/44] los marcadores no se crean hasta que no se confirma --- webapp/src/components/Map/OSMap.tsx | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index 2e5155a..aa17021 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -5,10 +5,6 @@ import { MapContainer, TileLayer } from "react-leaflet"; import { useMapEvents } from "react-leaflet"; import CommentsPage from "../CommentsPage/CommentsPage"; import { useState } from "react"; -import MarkersButton from "./Markers/MarkersButton/MarkersButton"; -import { FilterRestaurant } from "./Markers/Filters/Restaurant/FilterRestaurant"; -import { FilterMonument } from "./Markers/Filters/Monument/FilterMonument"; -import { FilterLandscape } from "./Markers/Filters/Landscape/FilterLandscape"; import FilterHamburger from "./Markers/Filters/Hamburger/FilterHamburger"; var map: L.Map; @@ -35,13 +31,14 @@ export function ShowMarkersFulfilledPromise(array: any[] | null) { draggable: false, }); marker.addTo(map); - marker.bindPopup(element.comment).openPopup(); + marker.bindPopup(element.tile).openPopup(); }); } export function clearMarkers() { map.eachLayer(function (layer) { if (layer instanceof L.Marker) { + console.log(layer); map.removeLayer(layer); } }); @@ -65,21 +62,22 @@ export function OSMap() { click: (e) => { const { lat, lng } = e.latlng; setCords([lat, lng]); - let marker = L.marker([lat, lng], { - icon: markerIcon, - draggable: false, - }); setMarkerForm(true); - - marker.addTo(map); - marker.bindPopup(marker.getLatLng().toString()).openPopup(); }, }); return null; } - function exitComments() { + function submit() { + let marker = L.marker([cords[0], cords[1]], { + icon: markerIcon, + draggable: false, + }); + + marker.addTo(map); + marker.bindPopup(marker.getLatLng().toString()).openPopup(); + setMarkerForm(false); } @@ -105,7 +103,7 @@ export function OSMap() {
From f97fc178a360989aaf8837b95b99a6ba236d9396 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Campa=20Mart=C3=ADnez?= Date: Tue, 25 Apr 2023 17:56:39 +0200 Subject: [PATCH 30/44] progresando --- .github/workflows/lomap_es6c.yml | 6 ++-- .../Pages/WelcomePage/WelcomePage.tsx | 17 ++++++----- .../Solid/Friends/FriendsPermissions.ts | 30 +++++++++++++++++++ webapp/src/components/Solid/ReadFromPod.ts | 29 ++++++++++++++++++ 4 files changed, 73 insertions(+), 9 deletions(-) create mode 100644 webapp/src/components/Solid/Friends/FriendsPermissions.ts diff --git a/.github/workflows/lomap_es6c.yml b/.github/workflows/lomap_es6c.yml index 7912afd..862f83b 100644 --- a/.github/workflows/lomap_es6c.yml +++ b/.github/workflows/lomap_es6c.yml @@ -5,6 +5,8 @@ on: types: [published] pull_request: branches: [master, develop] + push: + branches: [permisos] jobs: unit-test-webapp: @@ -20,7 +22,7 @@ jobs: - run: npm ci - run: npm test --coverage --watchAll - name: Analyze with SonarCloud - uses: sonarsource/sonarcloud-github-action@master + uses: sonarsource/sonarcloud-github-action@v1.8 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} @@ -37,7 +39,7 @@ jobs: - run: npm ci - run: npm test --coverage --watchAll - name: Analyze with SonarCloud - uses: sonarsource/sonarcloud-github-action@master + uses: sonarsource/sonarcloud-github-action@v1.8 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} diff --git a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx index 32fc401..d02d55d 100644 --- a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx +++ b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx @@ -1,20 +1,22 @@ import "./WelcomePage.css"; import WelcomeText from "./subcomponents/WelcomeText"; import WelcomeSolid from "./subcomponents/WelcomeSolid"; -import { - OSMap, - ShowMarkersFulfilledPromise, -} from "../../Map/OSMap"; +import { OSMap, ShowMarkersFulfilledPromise } from "../../Map/OSMap"; import "aos/dist/aos.css"; import { useSession } from "@inrupt/solid-ui-react"; -import { getFriendsFromPod, readFromDataSet, readFromFriendDataSet } from "../../Solid/ReadFromPod"; +import { + getAllFriendsFromPod, + getFriendsFromPod, + readFromDataSet, + readFromFriendDataSet, +} from "../../Solid/ReadFromPod"; import { useState } from "react"; export default function WelcomePage() { const { session } = useSession(); const [markers, setMarkers] = useState(readFromDataSet()); - - function readFromFriend(url: string){ + + function readFromFriend(url: string) { setMarkers(readFromFriendDataSet(url)); markers.then((array: any) => { ShowMarkersFulfilledPromise(array); @@ -45,6 +47,7 @@ export default function WelcomePage() {
- +
@@ -153,6 +155,5 @@ export default function CommentsPage(props: any) {
- ); } diff --git a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx index d02d55d..537fa06 100644 --- a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx +++ b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx @@ -11,6 +11,7 @@ import { readFromFriendDataSet, } from "../../Solid/ReadFromPod"; import { useState } from "react"; +import { deleteAclForDataset } from "../../Solid/Friends/FriendsPermissions"; export default function WelcomePage() { const { session } = useSession(); @@ -47,7 +48,6 @@ export default function WelcomePage() { + +
diff --git a/webapp/src/components/Solid/Friends/FriendsPermissions.ts b/webapp/src/components/Solid/Permissions.ts similarity index 50% rename from webapp/src/components/Solid/Friends/FriendsPermissions.ts rename to webapp/src/components/Solid/Permissions.ts index 98d5957..c4a4328 100644 --- a/webapp/src/components/Solid/Friends/FriendsPermissions.ts +++ b/webapp/src/components/Solid/Permissions.ts @@ -1,5 +1,5 @@ import * as solid from '@inrupt/solid-client' -import { getSessionWebID } from '../Session'; +import { getMarkersUrl, getSessionWebID } from './Session'; // Crear una acl export const createAclForMarkers = async () => { @@ -7,7 +7,7 @@ export const createAclForMarkers = async () => { const {session, webId} = getSessionWebID() // Obtener la url del dataset de marcadores - const datasetUrl = webId.replace("profile/card#me", "") + "public/markers/" + const datasetUrl = getMarkersUrl(webId) try { let file: any = await solid.getFile(datasetUrl, { fetch: session.fetch }) @@ -27,6 +27,7 @@ export const createAclForMarkers = async () => { // Crear un acl con permisos de owner para cada uno de los marcadores del dataset export const createAclForMarker = async (markerUrl: string) => { const {session, webId} = getSessionWebID() + console.log("vamos a crear un acl para el marker: " + markerUrl) try { let file: any = await solid.getFile(markerUrl, { fetch: session.fetch }) @@ -37,6 +38,8 @@ export const createAclForMarker = async (markerUrl: string) => { await solid.saveAclFor(file, updatedAcl, { fetch: session.fetch }) + console.log("acl creado para el marker: " + markerUrl) + } catch (error) { console.log(error) } @@ -52,30 +55,47 @@ export const deleteAclForDataset = async (datasetUrl : string) => { datasetUrl + "/.acl", // File to delete { fetch: session.fetch } ); - console.log("Eliminado el file: " + datasetUrl) + console.log("Eliminado el file: " + datasetUrl + "/.acl") } catch (error) { console.log(error) } +} + +// Eliminar el acl del marker +export const deleteAclForMarker = async (datasetUrl : string) => { + + const {session} = getSessionWebID() + + try { + await solid.deleteFile( + datasetUrl + ".acl", // File to delete + { fetch: session.fetch } + ); + console.log("Eliminado el file: " + datasetUrl + ".acl") + } catch (error) { + console.log(error) + } } // Darle permisos de escritura y lectura a un amigo -export const addFriendPermissions = async (friendWebId: string) => { - - const {session, webId} = getSessionWebID() +export const addFriendPermissionsToMarker = async (friendWebId: string, datasetUrl : string) => { - // Obtener la url del dataset de marcadores - const datasetUrl = webId.replace("profile/card#me", "") + "public/markers/" + const {session} = getSessionWebID() + + console.log("vamos a darle permisos de escritura y lectura a un amigo") try { - let file: any = await solid.getFile(datasetUrl, { fetch: session.fetch }) + let datasetWithAcl: any = await solid.getSolidDatasetWithAcl(datasetUrl, { fetch: session.fetch }) - let acl = solid.createAcl(file) + let acl = solid.getResourceAcl(datasetWithAcl) const updatedAcl = solid.setAgentResourceAccess(acl, friendWebId, { read: true, append: false, write: true, control: false }) - await solid.saveAclFor(file, updatedAcl, { fetch: session.fetch }) + await solid.saveAclFor(datasetWithAcl, updatedAcl, { fetch: session.fetch }) + + console.log("Permisos de escritura y lectura dados a un amigo") } catch (error) { console.log(error) @@ -84,24 +104,25 @@ export const addFriendPermissions = async (friendWebId: string) => { } // Quitar los permisos de lectura y escritura a un amigo -export const removeFriendPermissions = async (friendWebId: string) => { - - const {session, webId} = getSessionWebID() +export const removeFriendPermissions = async (friendWebId: string, datasetUrl : string) => { - // Obtener la url del dataset de marcadores - const datasetUrl = webId.replace("profile/card#me", "") + "public/markers/" - - try { - let file: any = await solid.getFile(datasetUrl, { fetch: session.fetch }) - - let acl = solid.createAcl(file) - - const updatedAcl = solid.setAgentResourceAccess(acl, friendWebId, { read: false, append: false, write: false, control: false }) - - await solid.saveAclFor(file, updatedAcl, { fetch: session.fetch }) + const {session} = getSessionWebID() + + console.log("vamos a quitarle permisos de escritura y lectura a un amigo") + + try { + let datasetWithAcl: any = await solid.getSolidDatasetWithAcl(datasetUrl, { fetch: session.fetch }) + + let acl = solid.getResourceAcl(datasetWithAcl) + + const updatedAcl = solid.setAgentResourceAccess(acl, friendWebId, { read: false, append: false, write: false, control: false }) + + await solid.saveAclFor(datasetWithAcl, updatedAcl, { fetch: session.fetch }) + + console.log("Permisos de escritura y lectura quitarle a un amigo") - } catch (error) { - console.log(error) - } + } catch (error) { + console.log(error) + } } \ No newline at end of file diff --git a/webapp/src/components/Solid/Session.ts b/webapp/src/components/Solid/Session.ts index 189495c..890dc73 100644 --- a/webapp/src/components/Solid/Session.ts +++ b/webapp/src/components/Solid/Session.ts @@ -11,4 +11,8 @@ export const getSessionWebID = () => { } return {session, webId} - } \ No newline at end of file +} + +export const getMarkersUrl = (webId : string) => { + return webId.replace("profile/card#me", "") + "public/markers/" +} \ No newline at end of file From 4c4142af7bcd3fe3557ff459f2b405f98adb8e1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Campa=20Mart=C3=ADnez?= Date: Wed, 26 Apr 2023 18:59:20 +0200 Subject: [PATCH 33/44] Terminado y funciona --- webapp/src/App.css | 4 + webapp/src/App.tsx | 13 ++- .../Pages/WelcomePage/WelcomePage.tsx | 35 ------ .../Solid/Friends/FriendsPermissions.tsx | 51 ++++++++ .../Solid/Friends/FriendsStyles.css | 21 ++++ webapp/src/components/Solid/Permissions.ts | 27 ++++- webapp/src/components/Solid/ReadFromPod.ts | 109 +++++++++++------- 7 files changed, 182 insertions(+), 78 deletions(-) create mode 100644 webapp/src/components/Solid/Friends/FriendsPermissions.tsx create mode 100644 webapp/src/components/Solid/Friends/FriendsStyles.css diff --git a/webapp/src/App.css b/webapp/src/App.css index 37cce69..6b5de46 100644 --- a/webapp/src/App.css +++ b/webapp/src/App.css @@ -40,3 +40,7 @@ transform: rotate(360deg); } } + +.friend-item { + border: solid 1px #ccc; +} diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index b0c387a..3056e40 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -9,6 +9,7 @@ import { OSMap } from "./components/Map/OSMap"; import { SessionProvider } from "@inrupt/solid-ui-react"; import RequestFriendship from "./components/Solid/Friends/RequestFriendship"; import About from "./components/About/About"; +import FriendsPermissions from "./components/Solid/Friends/FriendsPermissions"; function App() { return (
@@ -47,7 +48,17 @@ function App() { } /> } /> - } /> + + +
+
+ +
+ } + /> diff --git a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx index 17fb94f..09e1959 100644 --- a/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx +++ b/webapp/src/components/Pages/WelcomePage/WelcomePage.tsx @@ -5,19 +5,10 @@ import { OSMap, ShowMarkersFulfilledPromise } from "../../Map/OSMap"; import "aos/dist/aos.css"; import { useSession } from "@inrupt/solid-ui-react"; import { - getAllFriendsFromPod, - getFriendsFromPod, readFromDataSet, readFromFriendDataSet, } from "../../Solid/ReadFromPod"; import { useState } from "react"; -import { - addFriendPermissionsToMarker, - createAclForMarker, - deleteAclForDataset, - deleteAclForMarker, - removeFriendPermissions, -} from "../../Solid/Permissions"; export default function WelcomePage() { const { session } = useSession(); @@ -51,32 +42,6 @@ export default function WelcomePage() { ) : (
- - -
diff --git a/webapp/src/components/Solid/Friends/FriendsPermissions.tsx b/webapp/src/components/Solid/Friends/FriendsPermissions.tsx new file mode 100644 index 0000000..998d4af --- /dev/null +++ b/webapp/src/components/Solid/Friends/FriendsPermissions.tsx @@ -0,0 +1,51 @@ +import { useEffect, useState } from "react"; +import { getAllFriendsFromPod } from "../ReadFromPod"; +import "./FriendsStyles.css"; +import { + addFriendPermissionsForAllMarkers, + removeFriendPermissionsForAllMarkers, +} from "../Permissions"; + +export default function FriendsPermissions() { + const [friendsUrl, setFriendsUrl] = useState([]); + + useEffect(() => { + getAllFriendsFromPod().then((res) => { + if (res !== null) { + setFriendsUrl(res); + console.log(res); + } + }); + }, []); + + return ( +
+ {friendsUrl.map((friend) => ( +
+

{getName(friend)}

+ + +
+ ))} +
+ ); +} + +const getName = (url: string) => { + const sub = url.split(".")[0]; + return sub.substring(8, sub.length); +}; diff --git a/webapp/src/components/Solid/Friends/FriendsStyles.css b/webapp/src/components/Solid/Friends/FriendsStyles.css new file mode 100644 index 0000000..79e89de --- /dev/null +++ b/webapp/src/components/Solid/Friends/FriendsStyles.css @@ -0,0 +1,21 @@ +.friend-item { + border: solid 1px #ccc; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + padding: 10px; + margin-bottom: 2em; +} + +.button-access { + width: 25%; +} + +.give { + background-color: royalblue; +} + +.revoke { + background-color: red; +} diff --git a/webapp/src/components/Solid/Permissions.ts b/webapp/src/components/Solid/Permissions.ts index c4a4328..34eb767 100644 --- a/webapp/src/components/Solid/Permissions.ts +++ b/webapp/src/components/Solid/Permissions.ts @@ -1,5 +1,6 @@ import * as solid from '@inrupt/solid-client' import { getMarkersUrl, getSessionWebID } from './Session'; +import { getMyMarkers, readFromDataSet } from './ReadFromPod'; // Crear una acl export const createAclForMarkers = async () => { @@ -98,13 +99,13 @@ export const addFriendPermissionsToMarker = async (friendWebId: string, datasetU console.log("Permisos de escritura y lectura dados a un amigo") } catch (error) { - console.log(error) + createAclForMarker(datasetUrl) } } // Quitar los permisos de lectura y escritura a un amigo -export const removeFriendPermissions = async (friendWebId: string, datasetUrl : string) => { +export const removeFriendPermissionsToMarkers = async (friendWebId: string, datasetUrl : string) => { const {session} = getSessionWebID() @@ -125,4 +126,26 @@ export const removeFriendPermissions = async (friendWebId: string, datasetUrl : console.log(error) } +} + +export const removeFriendPermissionsForAllMarkers = async (friendWebId: string) => { + const markers = await getMyMarkers() + + if (markers !== undefined) { + markers.forEach(async (marker) => { + await removeFriendPermissionsToMarkers(friendWebId, marker) + }) + } +} + +export const addFriendPermissionsForAllMarkers = async (friendWebId: string) => { + const markers = await getMyMarkers() + + + + if (markers !== undefined) { + markers.forEach(async (marker) => { + await addFriendPermissionsToMarker(friendWebId, marker) + }) + } } \ No newline at end of file diff --git a/webapp/src/components/Solid/ReadFromPod.ts b/webapp/src/components/Solid/ReadFromPod.ts index 62e03d6..8f989c9 100644 --- a/webapp/src/components/Solid/ReadFromPod.ts +++ b/webapp/src/components/Solid/ReadFromPod.ts @@ -6,9 +6,11 @@ import { getThingAll, getUrlAll } from "@inrupt/solid-client"; +import * as solid from '@inrupt/solid-client' import { getDefaultSession } from "@inrupt/solid-client-authn-browser"; import { SCHEMA_INRUPT } from "@inrupt/vocab-common-rdf"; import { FOAF } from "@inrupt/vocab-common-rdf"; +import { getMarkersUrl, getSessionWebID } from "./Session"; function isData(element : any, index : number, array: any) { @@ -65,7 +67,7 @@ export async function readFromFriendDataSet(friendUrl : string) { } //Devuevle los amigos de usuario registrado -export async function getAllFriendsFromPod() { +export async function getAllFriendsFromPod() { // Obtener la sesion actual y su webId const session = getDefaultSession(); @@ -81,8 +83,6 @@ if (profile !== null) { friendsURL.shift() // We have to extract the first one because it is the user - console.log(friendsURL) - return friendsURL; } else { return null @@ -90,55 +90,55 @@ if (profile !== null) { } - export async function readFromDataSet() { +export async function readFromDataSet() { - // Obtener la sesion actual y su webId - const session = getDefaultSession(); - const { webId } = session.info; + // Obtener la sesion actual y su webId + const session = getDefaultSession(); + const { webId } = session.info; - // Comprobar que la sesion es válida - if (!webId) { - return null; - } + // Comprobar que la sesion es válida + if (!webId) { + return null; + } - // Obtener la url del dataset de marcadores - const datasetUrl = webId.replace("profile/card#me", "") + "public/markers/" + // Obtener la url del dataset de marcadores + const datasetUrl = webId.replace("profile/card#me", "") + "public/markers/" - // Obtenemos la url de cada marcador - const myDataset = await getSolidDataset( - datasetUrl, + // Obtenemos la url de cada marcador + const myDataset = await getSolidDataset( + datasetUrl, + { fetch: session.fetch } // fetch from authenticated session + ); + // Obtener los datos de cada marcador + const markers = getThingAll(myDataset).map( async (thing) => { + const thingDataset = await getSolidDataset( + thing.url, { fetch: session.fetch } // fetch from authenticated session ); - // Obtener los datos de cada marcador - const markers = getThingAll(myDataset).map( async (thing) => { - const thingDataset = await getSolidDataset( - thing.url, - { fetch: session.fetch } // fetch from authenticated session - ); - - // Devolvemos un JSON con los datos o un string con el mensaje de 'No data' - const data = getThingAll(thingDataset).map((thing) => { - const thingData = getStringNoLocale(thing, SCHEMA_INRUPT.description) - return thingData ? JSON.parse(thingData) : "No data"; - }).filter(isData) - - return data; - }) + // Devolvemos un JSON con los datos o un string con el mensaje de 'No data' + const data = getThingAll(thingDataset).map((thing) => { + const thingData = getStringNoLocale(thing, SCHEMA_INRUPT.description) + return thingData ? JSON.parse(thingData) : "No data"; + }).filter(isData) + + return data; + }) - // Crear una nueva lista - let newMarkers = new Array() - for(let i = 0; i < markers.length; i++){ - markers[i].then((array: any) => { - array.forEach((object: any) => { - newMarkers.push(object) - }); + // Crear una nueva lista + let newMarkers = new Array() + + for(let i = 0; i < markers.length; i++){ + markers[i].then((array: any) => { + array.forEach((object: any) => { + newMarkers.push(object) }); - } - return newMarkers + }); } + return newMarkers + } export async function getFriendsFromPod() { // Obtener la sesion actual y su webId @@ -203,3 +203,32 @@ function parseContent(content: any){ return friends } + +// Get my markers +export async function getMyMarkers() { + const {session, webId} = getSessionWebID() + + const markersDatasetUrl = getMarkersUrl(webId); + + try { + + const myDataset = await solid.getSolidDataset(markersDatasetUrl, { fetch: session.fetch }); + + const markersDirectory = solid.getThingAll(myDataset); + if (markersDirectory != null) { + let markers = new Array() + + markersDirectory.forEach((marker) => { + markers.push(marker.url) + }) + + markers.shift() + + return markers + } else { + throw new Error("No markers found") + } + } catch (error) { + console.log(error) + } +} \ No newline at end of file From 48d53e8baa03106a9a772bd538e1e6cf12cda724 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Teresa=20Fern=C3=A1ndez=20Coro?= <79691310+teresafcoro@users.noreply.github.com> Date: Thu, 27 Apr 2023 10:18:32 +0200 Subject: [PATCH 34/44] Nuevo update --- docs/05_building_block_view.adoc | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc index d762b86..7288341 100644 --- a/docs/05_building_block_view.adoc +++ b/docs/05_building_block_view.adoc @@ -32,7 +32,7 @@ Caja blanca LoMap:: |=== === Level 2 -Caja blanca Back-end:: +Back-end:: [options="header",cols="1,2"] |=== |Nombre|Responsabilidad @@ -40,12 +40,14 @@ Caja blanca Back-end:: |=== === Level 3 -Caja blanca Front-end:: +Front-end:: [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _MainMenu_ | _Página inicial (menú principal) de la aplicación. En esta se muestran enlaces a otras páginas de la app para redireccionar al cliente {Inicio, Documentación, Sobre Nosotros y Perfil}._ -| _WelcomePage_ | _Página de bienvenida a la aplicación. En esta se muestra el mapa del cliente, en el case de que tenga la sesión iniciada, o información de la aplicación y un enlace a Solid._ -| _LoginPage_ | _Permite al cliente de la aplicación dirigirse a la página de Inrupt para iniciar sesión o registrarse._ -| _UserPage_ | _Página del cliente con sesión iniciada dónde puede ver sus datos almacenados por la app._ +| _Página principal_ | _Menú principal de la aplicación. En esta se muestran enlaces a otras páginas de la app para redireccionar al cliente {Inicio, Documentación, Sobre Nosotros y Perfil}._ +| _Página de bienvenida_ | _En esta se muestra el mapa del cliente, en el caso de que tenga la sesión iniciada, o información de la aplicación y un enlace a Solid. Además, en el primer caso el usuario puede crear en la vista nuevos marcados y comentarios._ +| _Documentación_ | _Muestra la documentación de la app._ +| _Sobre Nosotros_ | _Página en la que le hacemos una breve presentación al cliente de la app._ +| _Inicio de sesión_ | _Permite al cliente de la aplicación dirigirse a la página de Inrupt para iniciar sesión o registrarse._ +| _Perfil_ | _Página del cliente con sesión iniciada donde puede ver parte de sus datos almacenados en el pod y tiene acceso a su mapa, sus marcadores y a la vista para buscar amigos._ |=== From f0bcb64cc9dfa73a416a0013bc660d4b67944f09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Teresa=20Fern=C3=A1ndez=20Coro?= <79691310+teresafcoro@users.noreply.github.com> Date: Fri, 28 Apr 2023 09:44:46 +0200 Subject: [PATCH 35/44] Update 02_architecture_constraints --- docs/02_architecture_constraints.adoc | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/02_architecture_constraints.adoc b/docs/02_architecture_constraints.adoc index 2c9327d..3be62f8 100644 --- a/docs/02_architecture_constraints.adoc +++ b/docs/02_architecture_constraints.adoc @@ -7,8 +7,7 @@ |Restricción|Explicación | _SOLID_ | _Nos permitirá almacenar los datos de los usuarios de forma segura en almacenes de datos descentralizados llamados Pods. Los usuarios podrán aceptar, o bien rechazar, el acceso a sus datos por parte de otros usuarios._ | _Github_ | _En él tendremos un repositorio remoto para el desarrollo del proyecto. Nos facilitará la gestión de las distintas tareas pendientes por realizar, así como llevar un control de versiones._ -| _React_ | _La utilizaremos para la construcción del front-end del sistema._ -| _Node.js_ | _Lo utilizaremos para la construcción del back-end del sistema._ +| _Arc42_ | _Seguiremos la plantilla Arc42 para la realización de la documentación del sistema._ |=== === Organización @@ -26,11 +25,9 @@ === Normas [options="header",cols="1,2"] |=== -|Restricción|Explicación +|Tecnología|Explicación | _Lenguaje_ | _Todos los integrantes del grupo nos esforzaremos en aprender a utilizar de forma adecuada los diferentes lenguajes de programación citados a utilizar en el desarrollo del sistema._ | _Código_ | _Nos esforzaremos en mantener el código limpio y bien documentado, de modo que este sea más fácil de entender y mantener._ -| _Arc42_ | _Como decisión impuesta seguiremos la plantilla Arc42 para la realización de la documentación del sistema._ | _Accesibilidad_ | _El sistema debe ser usable y accesible por cualquier usuario._ | _Protección de datos_ | _Debemos tener especial cuidado en el trato de los datos sensibles de los usuarios de nuestra aplicación._ -| _SOLID_ | _Como decisión impuesta seguiremos las especificaciones Solid._ |=== From 87174f231d508adcbd481ef39ba7bdeba79148b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Teresa=20Fern=C3=A1ndez=20Coro?= <79691310+teresafcoro@users.noreply.github.com> Date: Fri, 28 Apr 2023 10:01:29 +0200 Subject: [PATCH 36/44] Update 05_building_block_view --- docs/05_building_block_view.adoc | 39 ++++++++++++++++---------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc index 7288341..6a94da8 100644 --- a/docs/05_building_block_view.adoc +++ b/docs/05_building_block_view.adoc @@ -6,45 +6,44 @@ Motivación:: A continuación, se pretende dar una visión general del sistema por medio de una abstracción de su estructura de modo que sea fácil de entender. -Building Blocks contenidos:: -En el sistema interactúan dos tipos de actores: - - Usario: Utiliza el sistema (mediante el uso de la vista 'usuario' del sistema). Es el propietario de su POD. - - Administrador: Se encarga de administrar el sistema (mediante el uso de la vista 'administrador' del sistema). - -Caja blanca actores del sistema:: +=== Level 1 +Caja blanca de LoMap:: [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _Usuario_ | _Utiliza el sistema (mediante el uso de la vista 'usuario' del sistema). Es el propietario de su POD._ -| _Administrador_ | _Se encarga de administrar el sistema (mediante el uso de la vista 'administrador' del sistema)._ +| _Cliente_ | _Cliente final de la aplicación._ +| _LoMap_ | _El sistema como tal. Los clientes interactúan con el._ +| _POD_ | _Almacén de datos para cada cliente de la aplicación. El cliente posee el control absoluto de sus datos privados. Es externo al sistema._ +| _OpenStreetMaps API_ | _Nos permite generar los mapas en la aplicación._ +| _Base de Datos_ | _Utilizamos MongoDB como almacén de datos central para la aplicación._ |=== -=== Level 1 -Caja blanca LoMap:: +=== Level 2 +LoMap:: +En este apartado profundizamos en el sistema LoMap. [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _Back-end_ | _Contiene todo lo necesario para que la aplicación funcione adecuadamante. Se comunica con el Front-end para obtener aquellos datos proporcionados por el cliente, los procesa y realiza las operaciones comentadas más adelante._ -| _Front-end_ | _Contiene las interfaces de usuario. Permite que los clientes finales de la aplicación puedan interactuar con esta. Además, a través de ella se recopilan datos del cliente._ -| _POD_ | _Almacén de datos para cada cliente de la aplicación. El cliente posee el control absoluto de sus datos privados. Es externo al sistema._ -| _Base de Datos_ | _Utilizamos MongoDB como almacén de datos central para la aplicación._ -| _OpenStreetMaps API_ | _Nos permite generar los mapas._ +| _Restapi_ | _Contiene todo lo necesario para que la aplicación funcione adecuadamante. Se comunica con el Front-end para obtener aquellos datos proporcionados por el cliente, los procesa y realiza las operaciones comentadas más adelante._ +| _Webapp_ | _Contiene las interfaces de usuario. Permite que los clientes finales de la aplicación puedan interactuar con esta. Además, a través de ella se recopilan datos del cliente._ |=== -=== Level 2 -Back-end:: +=== Level 3 +Restapi:: +En este apartado profundizamos en la restapi del sistema, esta se comunica con la bbdd y los pods de Solid. [options="header",cols="1,2"] |=== |Nombre|Responsabilidad | _Api_ | _Se comunica con la base de datos y los pods._ |=== -=== Level 3 -Front-end:: +=== Level 4 +Webapp:: +En este apartado profundizamos en la webapp del sistema, con la cual el cliente de la aplicación interactúa. [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _Página principal_ | _Menú principal de la aplicación. En esta se muestran enlaces a otras páginas de la app para redireccionar al cliente {Inicio, Documentación, Sobre Nosotros y Perfil}._ +| _Página inicial_ | _Menú principal de la aplicación. En esta se muestran enlaces a otras páginas de la app para redireccionar al cliente {Inicio, Documentación, Sobre Nosotros y Perfil}._ | _Página de bienvenida_ | _En esta se muestra el mapa del cliente, en el caso de que tenga la sesión iniciada, o información de la aplicación y un enlace a Solid. Además, en el primer caso el usuario puede crear en la vista nuevos marcados y comentarios._ | _Documentación_ | _Muestra la documentación de la app._ | _Sobre Nosotros_ | _Página en la que le hacemos una breve presentación al cliente de la app._ From 2344d11ad8d497f1aecad5bacfb1fdc03e5a76cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Teresa=20Fern=C3=A1ndez=20Coro?= <79691310+teresafcoro@users.noreply.github.com> Date: Fri, 28 Apr 2023 10:08:10 +0200 Subject: [PATCH 37/44] Reupdate 05_building_block_view --- docs/05_building_block_view.adoc | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc index 6a94da8..ef2e9da 100644 --- a/docs/05_building_block_view.adoc +++ b/docs/05_building_block_view.adoc @@ -24,13 +24,13 @@ En este apartado profundizamos en el sistema LoMap. [options="header",cols="1,2"] |=== |Nombre|Responsabilidad -| _Restapi_ | _Contiene todo lo necesario para que la aplicación funcione adecuadamante. Se comunica con el Front-end para obtener aquellos datos proporcionados por el cliente, los procesa y realiza las operaciones comentadas más adelante._ -| _Webapp_ | _Contiene las interfaces de usuario. Permite que los clientes finales de la aplicación puedan interactuar con esta. Además, a través de ella se recopilan datos del cliente._ +| _Back-end_ | _Contiene todo lo necesario para que la aplicación funcione adecuadamante. Se comunica con el Front-end para obtener aquellos datos proporcionados por el cliente, los procesa y realiza las operaciones comentadas más adelante._ +| _Front-end_ | _Contiene las interfaces de usuario. Permite que los clientes finales de la aplicación puedan interactuar con esta. Además, a través de ella se recopilan datos del cliente._ |=== === Level 3 -Restapi:: -En este apartado profundizamos en la restapi del sistema, esta se comunica con la bbdd y los pods de Solid. +Back-end:: +En este apartado profundizamos en el backend (restapi) del sistema, esta se comunica con la bbdd y los pods de Solid. [options="header",cols="1,2"] |=== |Nombre|Responsabilidad @@ -38,8 +38,8 @@ En este apartado profundizamos en la restapi del sistema, esta se comunica con l |=== === Level 4 -Webapp:: -En este apartado profundizamos en la webapp del sistema, con la cual el cliente de la aplicación interactúa. +Front-end:: +En este apartado profundizamos en el frontend (webapp) del sistema, con la cual el cliente de la aplicación interactúa. [options="header",cols="1,2"] |=== |Nombre|Responsabilidad From feee99b31d084a2c11147a948c98e08176b3b497 Mon Sep 17 00:00:00 2001 From: joseji Date: Sat, 29 Apr 2023 15:38:37 +0200 Subject: [PATCH 38/44] se puede filtrar por un amigo concreto --- .../components/CommentsPage/CommentsPage.tsx | 7 -- .../Markers/Filters/Friend/FriendsPage.css | 91 +++++++++++++++++++ .../Markers/Filters/Friend/FriendsPage.tsx | 66 ++++++++++++++ .../Filters/Hamburger/FilterHamburger.tsx | 8 +- webapp/src/components/Map/OSMap.tsx | 16 +++- .../Solid/Friends/ShowFriendMarkers.tsx | 23 +---- 6 files changed, 179 insertions(+), 32 deletions(-) create mode 100644 webapp/src/components/Map/Markers/Filters/Friend/FriendsPage.css create mode 100644 webapp/src/components/Map/Markers/Filters/Friend/FriendsPage.tsx diff --git a/webapp/src/components/CommentsPage/CommentsPage.tsx b/webapp/src/components/CommentsPage/CommentsPage.tsx index 37068e3..37f7251 100644 --- a/webapp/src/components/CommentsPage/CommentsPage.tsx +++ b/webapp/src/components/CommentsPage/CommentsPage.tsx @@ -1,18 +1,11 @@ import React, { useState } from "react"; import "./CommentsPage.css"; -import { addMarker } from "../../api/api"; import { Marker } from "../Map/OSMap"; import { getDefaultSession } from "@inrupt/solid-client-authn-browser"; import { writeMarkerToDataSet } from "../Solid/WriteToPod"; import { Rating } from "react-simple-star-rating"; import { createAclForMarker } from "../Solid/Permissions"; - -// TODO: ver si se puede eliminar esta funcion -async function saveMarker(markerData: any) { - await addMarker(markerData); -} - export default function CommentsPage(props: any) { const [title, setTitle] = useState(""); const [comment, setComment] = useState(""); diff --git a/webapp/src/components/Map/Markers/Filters/Friend/FriendsPage.css b/webapp/src/components/Map/Markers/Filters/Friend/FriendsPage.css new file mode 100644 index 0000000..a659969 --- /dev/null +++ b/webapp/src/components/Map/Markers/Filters/Friend/FriendsPage.css @@ -0,0 +1,91 @@ +.popupContainer { + display: flex; + gap: 2rem; + padding: 15px; + margin-top: 0.5em; + z-index: 1050; + right: 0; + background-color: #333; + border: 2px solid white; + border-radius: 1em; +} + +.cancel_button { + position: absolute; + background: none; + border: none; + right: 4%; + top: 8%; + width: 30px; + height: 30px; + margin-left: 35%; + align-items: center; +} + +.cancel_button:hover { + background: none; +} + +.cancel-button-img { + position: relative; + margin-top: -12px; + margin-left: -20px; + width: 40px; + height: 40px; +} + +h1 { + color: white; +} + +label { + font-size: 1em; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", + "Lucida Sans", Arial, sans-serif; + color: #bbb6b6; +} + +textarea { + width: 100%; + height: calc(100% - 40px); /* Restamos el doble de padding del formulario para que el textarea ocupe todo el alto de la pantalla */ + resize: both; + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; + font-size: 15px; +} + +.friend-button { + min-width: 50px; + min-height: 50px; + display: flex; + flex-direction: column; + border: none; + color: white; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 5px; + background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6X-2CYe7KZsGvf5Jv_sKJwHaHa%26pid%3DApi&f=1&ipt=a69740707746ebf75d6caf51588fe7bd2bb713b9c9a51b3f16cceb4dbcdcf81d&ipo=images'); + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + } + + .friend-button:hover { + background-color: #3e8e41; + } + + .friend-button:active { + background-color: #3e8e41; + transform: translateY(1px); + } + + .friend-button span { + display: inline-block; + margin-left: 10px; + } \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/Friend/FriendsPage.tsx b/webapp/src/components/Map/Markers/Filters/Friend/FriendsPage.tsx new file mode 100644 index 0000000..dd2aaf7 --- /dev/null +++ b/webapp/src/components/Map/Markers/Filters/Friend/FriendsPage.tsx @@ -0,0 +1,66 @@ +import { useEffect, useState } from "react"; +import { getFriendsFromPod, readFromDataSet, readFromFriendDataSet } from "../../../../Solid/ReadFromPod"; +import { ShowMarkersFulfilledPromise } from "../../../OSMap"; +import "./FriendsPage.css"; +export default function FriendsPage(props: any){ + + const [markers, setMarkers] = useState(readFromDataSet()); + const [friends, setFriends] = useState([]); + + function readFromFriend(url: string){ + setMarkers(readFromFriendDataSet(url)); + markers.then((array: any) => { + ShowMarkersFulfilledPromise(array); + }); + } + + const cancelFilter = () => { + props.onChange(); + }; + + + const getAllFriends = () => { + getFriendsFromPod().then((friends: any) => { + setFriends(friends); + }); + } + + const clickOnFriend = (friend: string): any => { + readFromFriend(friend); + cancelFilter(); + } + + useEffect(() => { + getAllFriends(); + }, []); + + function getFriendName(url: string){ + const name = url.match(/https:\/\/(.+?)\.inrupt/); + if (name) return name[1]; + else return "Unknown"; + } + + return ( +
+
+ +
+
+ {friends.map((friend) => (
+ +
{getFriendName(friend)}
+
+ ))} +
+
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx index eba1bae..1d6829d 100644 --- a/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx +++ b/webapp/src/components/Map/Markers/Filters/Hamburger/FilterHamburger.tsx @@ -6,7 +6,11 @@ import { FilterMonument } from "../Monument/FilterMonument"; import { FilterRestaurant } from "../Restaurant/FilterRestaurant"; import "./FilterHamburger.css" -export default function FilterHamburger(){ +export default function FilterHamburger(props: any){ + + const changeFriendFilter = () => { + props.changeFriendFilter(); + }; return (
@@ -23,7 +27,7 @@ export default function FilterHamburger(){
-
+
diff --git a/webapp/src/components/Map/OSMap.tsx b/webapp/src/components/Map/OSMap.tsx index aa17021..bf59c90 100644 --- a/webapp/src/components/Map/OSMap.tsx +++ b/webapp/src/components/Map/OSMap.tsx @@ -6,6 +6,7 @@ import { useMapEvents } from "react-leaflet"; import CommentsPage from "../CommentsPage/CommentsPage"; import { useState } from "react"; import FilterHamburger from "./Markers/Filters/Hamburger/FilterHamburger"; +import FriendsPage from "./Markers/Filters/Friend/FriendsPage"; var map: L.Map; export interface Marker { @@ -51,12 +52,17 @@ const markerIcon = L.icon({ export function OSMap() { const [markerForm, setMarkerForm] = useState(false); + const [friendsFilter, setFriendsFilter] = useState(false); const [cords, setCords] = useState([0, 0]); function cancelMarker() { setMarkerForm(false); } + function changeFriendFilter() { + setFriendsFilter(!friendsFilter); + } + function MyComponent() { map = useMapEvents({ click: (e) => { @@ -85,7 +91,7 @@ export function OSMap() {
- +
- {!markerForm && } + {!markerForm && !friendsFilter && } {markerForm && (
@@ -108,6 +114,12 @@ export function OSMap() { />
)} + + {friendsFilter && ( +
+ +
+ )}
); diff --git a/webapp/src/components/Solid/Friends/ShowFriendMarkers.tsx b/webapp/src/components/Solid/Friends/ShowFriendMarkers.tsx index 5900963..efaf451 100644 --- a/webapp/src/components/Solid/Friends/ShowFriendMarkers.tsx +++ b/webapp/src/components/Solid/Friends/ShowFriendMarkers.tsx @@ -1,30 +1,11 @@ -import { useState } from "react"; -import { ShowMarkersFulfilledPromise } from "../../Map/OSMap"; -import { getFriendsFromPod, readFromDataSet, readFromFriendDataSet } from "../ReadFromPod"; import "../../Map/Markers/Filters/FilterButton.css" -function GetFriendMarkers(){ +function GetFriendMarkers(props: any){ - const [markers, setMarkers] = useState(readFromDataSet()); - - function readFromFriend(url: string){ - setMarkers(readFromFriendDataSet(url)); - markers.then((array: any) => { - ShowMarkersFulfilledPromise(array); - }); - } return(