[Dashboard] Display metadata above image in pdf

MTES-MCT · Jan 6, 2025 · 33a4b62 · 33a4b62
1 parent 7318430
commit 33a4b62
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 6 deletions.
diff --git a/frontend/src/features/Dashboard/components/Layers/ExportLayer.tsx b/frontend/src/features/Dashboard/components/Layers/ExportLayer.tsx
@@ -97,7 +97,7 @@ export function ExportLayer({ onImagesReady, shouldLoadImages }: ExportLayerProp
 
       const view = inMemoryMap.getView()
 
-      view.fit(extent, { padding: [10, 10, 10, 10] })
+      view.fit(extent, { padding: [10, 10, 10, 150] })
 
       // admission of weakness...
       setTimeout(() => {

diff --git a/frontend/src/features/Dashboard/components/Pdf/Amps/index.tsx b/frontend/src/features/Dashboard/components/Pdf/Amps/index.tsx
@@ -22,6 +22,15 @@ export function Amps({ amps, images }: { amps: AMPFromAPI[]; images: ExportImage
 
           return (
             <View key={amp.id} style={areaStyle.wrapper} wrap={false}>
+              {image && (
+                <Image
+                  src={image}
+                  style={{
+                    height: '100%',
+                    width: '100%'
+                  }}
+                />
+              )}
               <View style={areaStyle.card}>
                 <View style={areaStyle.header}>
                   <Text> {getTitle(amp.name)}</Text>
@@ -54,7 +63,6 @@ export function Amps({ amps, images }: { amps: AMPFromAPI[]; images: ExportImage
                   </View>
                 )}
               </View>
-              {image && <Image src={image} />}
             </View>
           )
         })}

diff --git a/frontend/src/features/Dashboard/components/Pdf/RegulatoryAreas/index.tsx b/frontend/src/features/Dashboard/components/Pdf/RegulatoryAreas/index.tsx
@@ -28,6 +28,15 @@ export function RegulatoryAreas({
 
           return (
             <View key={regulatoryArea.id} style={areaStyle.wrapper} wrap={false}>
+              {image && (
+                <Image
+                  src={image}
+                  style={{
+                    height: '100%',
+                    width: '100%'
+                  }}
+                />
+              )}
               <View style={areaStyle.card}>
                 <View style={areaStyle.header}>
                   <Text> {getTitle(regulatoryArea.layer_name)}</Text>
@@ -80,7 +89,6 @@ export function RegulatoryAreas({
                   </View>
                 </View>
               </View>
-              {image && <Image src={image} />}
             </View>
           )
         })}

diff --git a/frontend/src/features/Dashboard/components/Pdf/VigilanceAreas/index.tsx b/frontend/src/features/Dashboard/components/Pdf/VigilanceAreas/index.tsx
@@ -47,6 +47,15 @@ export function VigilanceAreas({
 
           return (
             <View key={vigilanceArea.id} style={areaStyle.wrapper} wrap={false}>
+              {image && (
+                <Image
+                  src={image}
+                  style={{
+                    height: '100%',
+                    width: '100%'
+                  }}
+                />
+              )}
               <View style={areaStyle.card}>
                 <View style={areaStyle.header}>
                   <Text> {vigilanceArea.name}</Text>
@@ -128,7 +137,6 @@ export function VigilanceAreas({
                   </View>
                 )}
               </View>
-              {image && <Image src={image} />}
             </View>
           )
         })}

diff --git a/frontend/src/features/Dashboard/components/Pdf/style.ts b/frontend/src/features/Dashboard/components/Pdf/style.ts
@@ -102,6 +102,9 @@ export const areaStyle = StyleSheet.create({
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 5.5,
+    left: 10,
+    position: 'absolute',
+    top: 10,
     width: '30%'
   },
   content: {
@@ -125,6 +128,7 @@ export const areaStyle = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     gap: 6,
+    position: 'relative',
     width: '100%'
   }
 })
diff --git a/frontend/src/features/Dashboard/components/Pdf/utils.ts b/frontend/src/features/Dashboard/components/Pdf/utils.ts
@@ -12,5 +12,3 @@ export function getImage(images: ExportImageType[], type: Dashboard.Layer, id: n
     return imageType === Dashboard.featuresCode[type] && imageId && id === +imageId
   })?.image
 }
-
-// Dashboard.featuresCode[Dashboard.Layer.DASHBOARD_VIGILANCE_AREAS]