Merge branch 'master' of https://github.com/MTES-MCT/monitorfish

frontend/src/App.css

@@ -252,7 +252,7 @@ a:hover, a:focus {
 }
 
 .rs-picker-tag > .rs-picker-toggle {
-  width: 115px;
+  width: 125px;
 }
 
 .rs-picker-select-menu-item.rs-picker-select-menu-item-active, .rs-picker-select-menu-item.rs-picker-select-menu-item-active:hover,
@@ -284,3 +284,19 @@ a:hover, a:focus {
   margin-top: -1px;
   margin-left: 5px;
 }
+
+.rs-picker-check-menu {
+  width: 280px;
+}
+
+.rs-picker-tag .rs-tag {
+  max-width: calc(100% - 25px) !important;
+}
+
+.rs-picker-check-menu-group[role="listitem"] {
+  height: 48px !important;
+}
+
+.rs-picker-check-menu-items .rs-picker-check-menu-group:not(:first-child) {
+  padding-top: 0px !important;
+}

frontend/src/api/fetch.js

@@ -104,32 +104,44 @@ export function getAllRegulatoryZonesFromAPI() {
 
 }
 
-
-export function getAdministrativeZoneFromAPI(type, extent) {
-    return fetch(getAdministrativeZoneURL(type, extent))
+export function getAdministrativeZoneFromAPI(administrativeZone, extent, subZone) {
+    return fetch(getAdministrativeZoneURL(administrativeZone, extent, subZone))
         .then(response => {
             if (response.status === HTTP_OK) {
                 return response.json().then(response => {
                     return response
                 }).catch(e => {
-                    throwIrretrievableAdministrativeZoneError(e, type);
+                    throwIrretrievableAdministrativeZoneError(e, administrativeZone);
                 })
             } else {
                 response.text().then(response => {
-                    throwIrretrievableAdministrativeZoneError(response, type);
+                    throwIrretrievableAdministrativeZoneError(response, administrativeZone);
                 })
             }
         }).catch(e => {
-            throwIrretrievableAdministrativeZoneError(e, type);
+            throwIrretrievableAdministrativeZoneError(e, administrativeZone);
         })
 }
 
-export function getAdministrativeZoneURL(type, extent) {
+export function getAdministrativeZoneURL(type, extent, subZone) {
+    let extentFilter = ''
+    if(extent) {
+        extentFilter = `&bbox=${extent.join(',')},${OPENLAYERS_PROJECTION}`
+    }
+
+    let subZoneFilter = ''
+    if(subZone) {
+        let filter = `${subZone.replace(/'/g, '\'\'')}`;
+
+        subZoneFilter = `&featureID=` + filter
+            .replace(/'/g, '%27')
+            .replace(/ /g, '%20')
+    }
+
     return (
         `${process.env.REACT_APP_GEOSERVER_LOCAL_URL}/geoserver/wfs?service=WFS&` +
         `version=1.1.0&request=GetFeature&typename=monitorfish:${type}&` +
-        `outputFormat=application/json&srsname=${WSG84_PROJECTION}&` +
-        `bbox=${extent.join(',')},${OPENLAYERS_PROJECTION}`
+        `outputFormat=application/json&srsname=${WSG84_PROJECTION}` + extentFilter + subZoneFilter
     );
 }
 
@@ -244,3 +256,35 @@ export function getVesselERSMessagesFromAPI(vesselIdentity) {
             .then(ers => ers)
 }
 
+export function getAdministrativeSubZonesFromAPI(type) {
+    let query
+    if(type === Layers.FAO.code) {
+        let filter = `f_level='DIVISION'`
+
+        query = `${process.env.REACT_APP_GEOSERVER_LOCAL_URL}/geoserver/wfs?service=WFS&` +
+            `version=1.1.0&request=GetFeature&typename=monitorfish:${type}&` +
+            `outputFormat=application/json&srsname=${WSG84_PROJECTION}&CQL_FILTER=` +
+            filter.replace(/'/g, '%27').replace(/ /g, '%20')
+    } else {
+        query = `${process.env.REACT_APP_GEOSERVER_LOCAL_URL}/geoserver/wfs?service=WFS&` +
+            `version=1.1.0&request=GetFeature&typename=monitorfish:${type}&` +
+            `outputFormat=application/json&srsname=${WSG84_PROJECTION}`;
+    }
+
+    return fetch(query)
+        .then(response => {
+            if (response.status === HTTP_OK) {
+                return response.json().then(response => {
+                    return response
+                }).catch(e => {
+                    throwIrretrievableAdministrativeZoneError(e, type);
+                })
+            } else {
+                response.text().then(response => {
+                    throwIrretrievableAdministrativeZoneError(response, type);
+                })
+            }
+        }).catch(e => {
+            throwIrretrievableAdministrativeZoneError(e, type);
+        })
+}

frontend/src/components/DownloadVesselListModal.js

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import styled from "styled-components";
 import Modal from "rsuite/lib/Modal";
 import {COLORS} from "../constants/constants";
@@ -7,7 +7,7 @@ import CheckboxGroup from "rsuite/lib/CheckboxGroup";
 import {Radio} from "rsuite";
 import { ExportToCsv } from 'export-to-csv';
 import countries from "i18n-iso-countries";
-import {getDateTime} from "../utils";
+import {getDate, getDateTime} from "../utils";
 
 countries.registerLocale(require("i18n-iso-countries/langs/fr.json"));
 
@@ -19,7 +19,7 @@ const optionsCSV = {
     showTitle: false,
     useTextFile: false,
     useBom: true,
-    useKeysAsHeaders: true,
+    useKeysAsHeaders: true
 };
 
 const csvExporter = new ExportToCsv(optionsCSV);
@@ -92,7 +92,12 @@ function orderToCSVColumnOrder(valuesChecked, filteredVesselObject) {
 const DownloadVesselListModal = props => {
     const [indeterminate, setIndeterminate] = useState(false)
     const [checkAll, setCheckAll] = useState(true)
-    const [valuesChecked, setValuesChecked] = useState(Object.keys(options).map(value => options[value].code))
+    const [valuesChecked, setValuesChecked] = useState([])
+
+    useEffect(() => {
+        let values = Object.keys(options).map(value => options[value].code)
+        setValuesChecked(values ? values : [])
+    }, [])
 
     const handleCheckAll = (value, checked) => {
         const nextValue = checked ? Object.keys(options).map(value => options[value].code) : [];
@@ -124,6 +129,8 @@ const DownloadVesselListModal = props => {
             return orderToCSVColumnOrder(valuesChecked, filteredVesselObject)
         })
 
+        const date = new Date()
+        csvExporter.options.filename = `export_vms_${getDate(date.toISOString())}_${Math.floor(Math.random() * 100) + 1  }`
         csvExporter.generateCsv(objectsToExports)
     }
 

frontend/src/components/VesselListTable.js

@@ -96,7 +96,7 @@ const VesselListTable = props => {
             <Table
                 virtualized
                 height={510}
-                width={1147}
+                width={1187}
                 rowHeight={36}
                 data={getVessels()}
                 sortColumn={sortColumn}
@@ -173,12 +173,12 @@ const VesselListTable = props => {
                     <Cell dataKey="longitude" />
                 </Column>
 
-                <Column width={40}>
+                <Column sortable width={60}>
                     <HeaderCell>Cap</HeaderCell>
                     <Cell dataKey="course" />
                 </Column>
 
-                <Column width={60}>
+                <Column sortable width={80}>
                     <HeaderCell>Vitesse</HeaderCell>
                     <Cell dataKey="speed" />
                 </Column>

frontend/src/components/administratives_zones/AdministrativeZones.js

@@ -24,9 +24,9 @@ const AdministrativeZones = props => {
     }, [props.hideZonesListWhenSearching])
 
     useEffect(() => {
-        let zones = []
+        let nextZones = []
         if(props.administrativeZones && props.administrativeZones.length) {
-            zones = props.administrativeZones
+            nextZones = props.administrativeZones
                 .filter(zone => !zone.group)
                 .map(zone => [zone])
 
@@ -35,11 +35,10 @@ const AdministrativeZones = props => {
                 .map(zone => zone.group))]
 
             groups.forEach(group => {
-                zones.push(props.administrativeZones
+                nextZones.push(props.administrativeZones
                     .filter(zone => zone.group && zone.group === group))
             })
-            setZones(zones)
-            console.log(zones.length)
+            setZones(nextZones)
         }
     }, [props.administrativeZones])
 

frontend/src/containers/MapWrapper.js

@@ -8,7 +8,7 @@ import TileLayer from 'ol/layer/Tile'
 import {OSM} from 'ol/source';
 import {transform} from 'ol/proj'
 import {toStringHDMS} from 'ol/coordinate';
-import LayersEnum, {vesselIconIsLight} from "../domain/entities/layers";
+import LayersEnum, {layersType as LayersType, vesselIconIsLight} from "../domain/entities/layers";
 import MapCoordinatesBox from "../components/MapCoordinatesBox";
 import {Interactions, OPENLAYERS_PROJECTION, WSG84_PROJECTION} from "../domain/entities/map";
 import {
@@ -28,11 +28,13 @@ import VesselTrackCard from "../components/VesselTrackCard";
 import showVesselTrackAndSidebar from "../domain/use_cases/showVesselTrackAndSidebar";
 import {useDispatch, useSelector} from "react-redux";
 import {
+    addZoneSelected,
     hideVesselNames,
     isMoving,
     resetAnimateToRegulatoryLayer,
-    resetAnimateToVessel, resetInteraction,
-    setView, setZoneSelected
+    resetAnimateToVessel,
+    resetInteraction,
+    setView
 } from "../domain/reducers/Map";
 import {COLORS} from "../constants/constants";
 import {updateVesselFeatureAndIdentity} from "../domain/reducers/Vessel";
@@ -371,7 +373,11 @@ const MapWrapper = () => {
             map.addInteraction(draw)
 
             draw.on('drawend', event => {
-                dispatch(setZoneSelected(event.feature))
+                dispatch(addZoneSelected({
+                    name: "Tracé libre",
+                    code: LayersType.FREE_DRAW,
+                    feature: event.feature
+                }))
                 dispatch(resetInteraction())
                 map.removeInteraction(draw)
             })