Merge pull request #112 from MTES-MCT/rapportage-v1.4

Rapportage v1.4
MTES-MCT · Sep 2, 2022 · 9ac90e6 · 9ac90e6
2 parents 48fe1a7 + 943c37d
commit 9ac90e6
Show file tree

Hide file tree

Showing 26 changed files with 307 additions and 136 deletions.
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
@@ -1,14 +1,22 @@
 import 'rsuite/dist/rsuite.min.css'
 import 'ol/ol.css'
 
-import '../src/index.css';
-import '../src/App.css';
+import '../src/index.css'
+import '../src/App.css'
 import '../src/uiMonitor/ol-override.css'
 import '../src/uiMonitor/rsuite-override.css'
 
-import './storybook.css';
-
+import './storybook.css'
+import GlobalFonts from '../src/fonts/fonts'
 
+export const decorators = [
+  Story => (
+    <>
+      <GlobalFonts />
+      <Story />
+    </>
+  )
+]
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -17,4 +25,5 @@ export const parameters = {
       date: /Date$/,
     },
   },
+
 }
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -33,6 +33,9 @@
     display: none;
 }
 
+
+/* classNames added via ol component */
+
 .overlay-mission-hover {
     z-index: 5000;
     width: 0;
@@ -43,4 +46,10 @@
     z-index: 4000;
     width: 0;
     height: 0;
+}
+
+.overlay-control-hover {
+    z-index: 5500;
+    width: 0;
+    height: 0;
 }
diff --git a/frontend/src/domain/entities/missions.js b/frontend/src/domain/entities/missions.js
@@ -45,11 +45,11 @@ export const missionNatureEnum = {
 
 export const infractionTypeEnum = {
   WITHOUT_REPORT: {
-    code: true,
+    code: 'WITHOUT_REPORT',
     libelle: 'Sans PV'
   },
   WITH_REPORT: {
-    code: false,
+    code: 'WITH_REPORT',
     libelle: 'Avec PV'
   }
 }

diff --git a/frontend/src/domain/use_cases/missions/missionAndControlLocalisation.js b/frontend/src/domain/use_cases/missions/missionAndControlLocalisation.js
@@ -63,13 +63,14 @@ export const addMissionZone = ({callback, geom} ) => (dispatch) => {
 }
 
 
-export const addControlPositions = ({callback, geom} ) => (dispatch) => {
+export const addControlPositions = ({callback, geom, missionGeom} ) => (dispatch) => {
   const features = geom?.type=== olGeometryTypes.MULTIPOINT &&  geom?.coordinates?.length > 0 && geom.coordinates.map(coord=> {
     return new Feature({
       geometry: new Point(coord).transform(WSG84_PROJECTION, OPENLAYERS_PROJECTION)
     })
   })
   features && dispatch(setFeatures(features))
+  missionGeom?.coordinates?.length && dispatch(setFitToExtent({extent: transformExtent(boundingExtent(_.flattenDepth(missionGeom.coordinates,2)), WSG84_PROJECTION, OPENLAYERS_PROJECTION)}))
   dispatch(openDrawLayerModal)
   dispatch(setFeatureType({featureType: monitorenvFeatureTypes.ACTION_LOCALISATION, callback}))
   dispatch(setInteractionType(interactionTypes.POINT))

diff --git a/frontend/src/features/map/overlays/OverlayPositionOnCentroid.js b/frontend/src/features/map/overlays/OverlayPositionOnCentroid.js
@@ -22,6 +22,7 @@ const defaultMargins = {
 export const OverlayPositionOnCentroid = ({
   map, 
   feature, 
+  appClassName,
   children, 
   options: {
     margins = defaultMargins
@@ -36,6 +37,7 @@ export const OverlayPositionOnCentroid = ({
     if (ref) {
       olOverlayObjectRef.current = new Overlay({
         element: ref,
+        className: `ol-overlay-container ol-selectable ${appClassName}`
       })
     } else {
       olOverlayObjectRef.current = null

diff --git a/frontend/src/features/map/overlays/controls/ControlCard.js b/frontend/src/features/map/overlays/controls/ControlCard.js
@@ -4,12 +4,16 @@ import { format, isValid } from 'date-fns'
 import { fr } from 'date-fns/locale'
 
 import { COLORS } from '../../../../constants/constants'
+import { ControlInfractionsTags } from '../../../../ui/ControlInfractionsTags'
+import { actionTargetTypeEnum } from '../../../../domain/entities/missions'
 
 export const ControlCard = ({feature}) => {
   const { 
     actionStartDatetimeUtc,
     actionTheme,
     actionNumberOfControls,
+    actionTargetType,
+    infractions
   } = feature.getProperties()
   const parsedActionStartDatetimeUtc = new Date(actionStartDatetimeUtc)
 
@@ -18,12 +22,13 @@ export const ControlCard = ({feature}) => {
   <ControlCardHeader>
     <Col1>
       <ControlDate>
-        {isValid(parsedActionStartDatetimeUtc) && format(parsedActionStartDatetimeUtc, "dd MMM yyyy à HH:mm", {locale: fr})}
+        {isValid(parsedActionStartDatetimeUtc) && format(parsedActionStartDatetimeUtc, "dd MMM à HH:mm", {locale: fr})}
       </ControlDate>
     </Col1>
     <Col2>
       <Theme>{actionTheme}</Theme>
-      <Actions>{actionNumberOfControls} contrôles réalisés</Actions>
+      <Actions><Accented>{actionNumberOfControls ||0 } contrôles</Accented> réalisés sur des cibles de type <Accented>{actionTargetTypeEnum[actionTargetType]?.libelle || 'non spécifié'}</Accented></Actions>
+      <ControlInfractionsTags infractions={infractions} actionNumberOfControls={actionNumberOfControls} />
     </Col2>
   </ControlCardHeader>
   </>)
@@ -35,6 +40,8 @@ const ControlCardHeader = styled.div`
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   display: flex;
+  box-shadow: 0px 3px 6px rgba(0,0,0,.3);
+  padding: 18px;
 `
 
 const ControlDate = styled.div`
@@ -43,11 +50,15 @@ const ControlDate = styled.div`
 const Theme = styled.div`
 `
 const Actions = styled.div`
+  margin-bottom: 8px;
 `
 
 const Col1 = styled.div`
-  width: 220px;
+  width: 120px;
 `
 const Col2 = styled.div`
-  width: 120px;
+  width: 330px;
+`
+const Accented = styled.span`
+  font-weight: 500;
 `
diff --git a/frontend/src/features/map/overlays/controls/ControlOverlay.js b/frontend/src/features/map/overlays/controls/ControlOverlay.js
@@ -8,7 +8,11 @@ import Layers from '../../../../domain/entities/layers'
 export const ControlOverlay = ({ map, currentFeatureOver }) => {
   const displayHoveredFeature = currentFeatureOver?.getId()?.startsWith(Layers.ACTIONS.code)
   return (
-      <OverlayPositionOnCentroid feature={displayHoveredFeature && currentFeatureOver} map={map} >
+      <OverlayPositionOnCentroid 
+        feature={displayHoveredFeature && currentFeatureOver} 
+        map={map}
+        appClassName={'overlay-control-hover'}
+        >
         <ControlCard feature={currentFeatureOver} />
       </OverlayPositionOnCentroid>
     )

diff --git a/frontend/src/features/map/overlays/missions/ActionCard.js b/frontend/src/features/map/overlays/missions/ActionCard.js
@@ -6,8 +6,9 @@ import { fr } from 'date-fns/locale'
 import { actionTargetTypeEnum } from '../../../../domain/entities/missions'
 
 import { COLORS } from '../../../../constants/constants'
+import { ControlInfractionsTags } from '../../../../ui/ControlInfractionsTags'
 
-export const ActionCard = ({feature, }) => {
+export const ActionCard = ({feature}) => {
   const { 
     // actionType, 
     actionNumberOfControls, 
@@ -33,12 +34,7 @@ export const ActionCard = ({feature, }) => {
         {` contrôles réalisés sur des cibles de type ` }
         <Accented>{actionTargetTypeEnum[actionTargetType]?.libelle || 'non spécifié'}</Accented>
       </ControlSummary>
-      <Tags>
-        <Tag>RAS</Tag>
-        <Tag>INFRA</Tag>
-        <Tag>INFRA SANS PV</Tag>
-        <Tag>MED</Tag>
-      </Tags>
+      <ControlInfractionsTags infractions={infractions} actionNumberOfControls={actionNumberOfControls} />
       <Accented>{infractions || 0}</Accented>infraction(s)
     </Col2>
   </ActionCardHeader>
@@ -55,7 +51,7 @@ const ActionCardHeader = styled.div`
 `
 
 const ActionDate = styled.div`
-  width: 75px;
+  width: 80px;
   font-size: 12px;
   margin-right: 16px;
 `
@@ -67,29 +63,12 @@ const Accented = styled.span`
 const ControlSummary = styled.div`
   font: normal normal normal 13px/18px Marianne;
   color: ${COLORS.slateGray};
+  margin-bottom: 16px;
 `
 
 const Col1 = styled.div`
   padding: 8px 0px 5px 10px;
 `
 const Col2 = styled.div`
   padding: 8px 8px 4px 8px;
-`
-
-const Tags = styled.div`
-  display: flex;
-  margin-top: 16px;
-  margin-bottom: 16px;
-`
-
-const Tag = styled.div`
-  background: ${COLORS.missingGrey};
-  border-radius: 11px;
-  font-weight: 500;
-  font-size: 13px;
-  line-height: 18px;
-  padding: 2px 8px 2px 8px;
-  :not(:first-child) {
-    margin-left: 8px;
-  }
 `
diff --git a/frontend/src/features/map/overlays/missions/MissionCard.js b/frontend/src/features/map/overlays/missions/MissionCard.js
@@ -74,7 +74,7 @@ const MissionCardHeader = styled.div`
 `
 
 const MissionDate = styled.div`
-  width: 75px;
+  width: 80px;
   font-size: 12px;
   margin-right: 16px;
 `

diff --git a/frontend/src/features/missions/MissionDetails/ActionCard.js b/frontend/src/features/missions/MissionDetails/ActionCard.js
@@ -6,6 +6,8 @@ import { IconButton } from 'rsuite'
 
 import { actionTargetTypeEnum, actionTypeEnum } from '../../../domain/entities/missions'
 
+import { ControlInfractionsTags } from '../../../ui/ControlInfractionsTags'
+
 import { ReactComponent as DuplicateSVG } from '../../../uiMonitor/icons/dupliquer_14px.svg'
 import { ReactComponent as DeleteSVG } from '../../../uiMonitor/icons/Suppression_clair.svg'
 import { ReactComponent as ControlIconSVG } from '../../../uiMonitor/icons/controles.svg'
@@ -42,17 +44,12 @@ export const ActionCard = ({selected, selectAction, action, removeAction, duplic
               <Accented>{`${action.actionTheme} ${action.actionSubTheme ? ' - ' + action.actionSubTheme : ''}`}</Accented> 
               : 'à renseigner'}
           </Title>
-          <ControlSummary>
-            <Accented>{action.actionNumberOfControls || 0}</Accented>
+            {action.actionNumberOfControls && <ControlSummary>
+              <Accented>{action.actionNumberOfControls}</Accented>
             {` contrôles réalisés sur des cibles de type ` }
             <Accented>{actionTargetTypeEnum[action.actionTargetType]?.libelle || 'non spécifié'}</Accented>
-          </ControlSummary>
-          <Tags>
-            <Tag>RAS</Tag>
-            <Tag>INFRA</Tag>
-            <Tag>INFRA SANS PV</Tag>
-            <Tag>MED</Tag>
-          </Tags>
+            </ControlSummary>}
+          {action.actionNumberOfControls && <ControlInfractionsTags infractions={action?.infractions} actionNumberOfControls={action.actionNumberOfControls} />}
         </SummaryContent>
       </>)}
       {(action.actionType === actionTypeEnum.SURVEILLANCE.code) && (<>
@@ -63,15 +60,13 @@ export const ActionCard = ({selected, selectAction, action, removeAction, duplic
               <Accented>{`${action.actionTheme} ${action.actionSubTheme ? ' - ' + action.actionSubTheme : ''}`}</Accented> 
               : 'à renseigner'}
           </Title>
-          <ControlSummary>
           {
           action.duration &&
-            <>
-            <Accented>{action.duration} heures&nbsp;</Accented>
+            <DurationWrapper>
+            <Accented>{action.duration} heure(s)&nbsp;</Accented>
               de surveillance
-            </>
+            </DurationWrapper>
           }
-          </ControlSummary>
         </SummaryContent>
       </>)}
 
@@ -100,6 +95,7 @@ const TimeLine = styled.div`
   display: flex;
   align-items: center;
   width: 50px;
+  margin-right: 16px;
 `
 
 const DateTimeWrapper = styled.div`
@@ -157,6 +153,7 @@ const NoteIcon = styled(NoteSVG)`
 const ControlSummary = styled.div`
   font: normal normal normal 13px/18px Marianne;
   color: ${COLORS.slateGray};
+  margin-bottom: 16px;
 `
 
 const SummaryContent = styled.div`
@@ -184,23 +181,10 @@ const Accented = styled.span`
   font-weight: bold;
 `
 
-const Tags = styled.div`
-  display: flex;
-  margin-top: 16px;
-`
-
-const Tag = styled.div`
-  background: ${COLORS.missingGrey};
-  border-radius: 11px;
-  font-weight: 500;
-  font-size: 13px;
-  line-height: 18px;
-  padding: 2px 8px 2px 8px;
-  :not(:first-child) {
-    margin-left: 8px;
-  }
-`
-
 const DeleteIcon = styled(DeleteSVG)`
   color: ${COLORS.maximumRed};
 `
+const DurationWrapper = styled.div` 
+  font: normal normal normal 13px/18px Marianne;
+  color: ${COLORS.slateGray};
+`
diff --git a/frontend/src/features/missions/MissionDetails/ControlForm.js b/frontend/src/features/missions/MissionDetails/ControlForm.js
@@ -137,8 +137,9 @@ const Title = styled.h2`
 const Msg = styled.div`
 `
 
-const SelectorWrapper = styled(Form.Group)`
+const SelectorWrapper = styled.div`
   height: 58px;
+  margin-bottom: 16px;
 `
 
 const Separator = styled.hr`