Merge pull request #194 from Lemoncode/feature/188-add-the-location-to-the-reservoirs

Feature/188 add the location to the reservoirs

Author: brauliodiez

front/src/pods/embalse/api/embalse.api-model.ts

@@ -1,12 +1,13 @@
-import type { Media } from '@content-island/api-client';
+import type { Media } from "@content-island/api-client";
 export interface ReservoirInfo {
   id: string;
-  language: 'es';
+  language: "es";
   lastUpdate: string; // Stores the date in ISO 8601 format. For example: 2021-09-10T19:30:00.000Z
   slug: string;
   name: string;
   mainPicture: Media;
   author?: string;
   authorUrl?: string;
   description: string;
+  mapUrl?: string;
 }

front/src/pods/embalse/embalse.component.tsx

@@ -29,6 +29,19 @@ export const Embalse: React.FC<Props> = (props) => {
           <ReservoirCardInfo reservoirInfo={reservoirData.reservoirInfo} />
         </div>
       )}
+
+      {reservoirData.datosEmbalse.mapUrl && (
+        <div className="card bg-base-100 mx-auto w-full max-w-[400px] items-center gap-6 rounded-2xl p-4 shadow-lg md:order-4 md:max-w-[900px]">
+          <iframe
+            title={`Mapa del embalse ${reservoirData.nombre}`}
+            src={reservoirData.datosEmbalse.mapUrl}
+            width="100%"
+            height="300"
+            className="rounded-lg border-0"
+          ></iframe>
+        </div>
+      )}
+
       <div className="card bg-base-100 mx-auto w-full max-w-[400px] items-center gap-6 rounded-2xl p-4 shadow-lg md:order-2 md:w-[calc(50%-16px)]">
         <ReservoirCardDetail datosEmbalse={reservoirData.datosEmbalse} />
       </div>

front/src/pods/embalse/embalse.mapper.spec.ts

@@ -166,6 +166,7 @@ describe("mapEmbalseToReservoirData", () => {
       measurementDate: "15/06/2024",
       datosEmbalse: {
         cuenca: "Mediterránea",
+        mapUrl: "",
         provincia: "Málaga",
         uso: "",
       },

front/src/pods/embalse/embalse.mapper.ts

@@ -42,6 +42,7 @@ export function mapEmbalseToReservoirData(
       cuenca: embalse.cuenca?.nombre ?? "",
       provincia: embalse.provincia ?? "",
       uso: embalse.uso ?? "",
+      mapUrl: embalseInfo?.mapUrl ?? "",
     },
     reservoirInfo: embalseInfo
       ? mapReservoirInfoFromContentIslandToViewModel(embalseInfo)

front/src/pods/embalse/embalse.vm.ts

@@ -5,6 +5,7 @@ export interface DatosEmbalse {
   cuenca: string;
   provincia: string;
   uso: string;
+  mapUrl: string;
 }
 
 export interface ReservoirInfo {
@@ -15,6 +16,7 @@ export interface ReservoirInfo {
   author?: string;
   authorUrl?: string;
   description: string;
+  mapUrl?: string;
 }
 
 export interface ReservoirData {