Upload tariff zones (#222)

src/actions/SuppliersActions.js

@@ -185,6 +185,60 @@ SuppliersActions.uploadFiles = (files, providerId) => async (
     });
 };
 
+SuppliersActions.uploadTariffZonesFiles = (files, provider) => async (
+  dispatch,
+  getState
+) => {
+  dispatch(sendData(0, types.UPDATED_TARIFF_ZONE_FILE_UPLOAD_PROGRESS));
+
+  const url = `${window.config.tariffZonesUrl}${provider.chouetteInfo.xmlns}/files`;
+
+  var data = new FormData();
+
+  files.forEach(file => {
+    data.append('files', file);
+  });
+
+  var config = {
+    onUploadProgress: function(progressEvent) {
+      let percentCompleted = (progressEvent.loaded / progressEvent.total) * 100;
+      dispatch(
+        sendData(
+          percentCompleted,
+          types.UPDATED_TARIFF_ZONE_FILE_UPLOAD_PROGRESS
+        )
+      );
+    },
+    ...(await getApiConfig(getState().UserReducer.auth))
+  };
+
+  return axios
+    .post(url, data, config)
+    .then(function(response) {
+      dispatch(
+        SuppliersActions.addNotification(
+          'Uploaded tariff zone file(s)',
+          'success'
+        )
+      );
+      dispatch(
+        SuppliersActions.logEvent({
+          title: 'Uploaded tariff zone file(s): ' + files.join(',')
+        })
+      );
+      dispatch(sendData(0, types.UPDATED_TARIFF_ZONE_FILE_UPLOAD_PROGRESS));
+    })
+    .catch(function(response) {
+      dispatch(
+        SuppliersActions.addNotification(
+          'Unable to upload tariff zone file(s)',
+          'error'
+        )
+      );
+      dispatch(sendData(0, types.UPDATED_TARIFF_ZONE_FILE_UPLOAD_PROGRESS));
+    });
+};
+
 SuppliersActions.getAllProviderStatus = () => async (dispatch, getState) => {
   dispatch(sendData(null, types.REQUESTED_ALL_SUPPLIERS_STATUS));
   const state = getState();

src/actions/actionTypes.js

@@ -167,6 +167,8 @@ export const REQUESTED_ALL_SUPPLIERS_STATUS = 'REQUESTED_ALL_SUPPLIERS_STATUS';
 export const RECEIVED_ALL_SUPPLIERS_STATUS = 'RECEIVED_ALL_SUPPLIERS_STATUS';
 
 export const UPDATED_FILE_UPLOAD_PROGRESS = 'UPDATED_FILE_UPLOAD_PROGRESS';
+export const UPDATED_TARIFF_ZONE_FILE_UPLOAD_PROGRESS =
+  'UPDATED_TARIFF_ZONE_FILE_UPLOAD_PROGRESS';
 
 /* organization actions */
 

src/config/environments/dev.json

@@ -8,6 +8,7 @@
   "mapboxAdminBaseUrl": "https://api.dev.entur.io/mapbox-admin/v1/",
   "geocoderAdminBaseUrl": "https://api.dev.entur.io/timetable-admin/v1/geocoder/",
   "poiFilterBaseUrl": "https://api.dev.entur.io/timetable-admin/v2/poi-filter",
+  "tariffZonesUrl": "https://api.dev.entur.io/timetable-admin/v2/tariffzones-import/",
   "endpointBase": "/",
   "chouetteBaseUrl": "https://rutedb.dev.entur.org/",
   "udugBaseUrl": "/netex-validation-reports/",

src/reducers/SuppliersReducer.js

@@ -94,6 +94,11 @@ const SuppliersReducer = (state = initialState, action) => {
     case types.UPDATED_FILE_UPLOAD_PROGRESS:
       return Object.assign({}, state, { fileUploadProgress: action.payLoad });
 
+    case types.UPDATED_TARIFF_ZONE_FILE_UPLOAD_PROGRESS:
+      return Object.assign({}, state, {
+        tariffZoneFileUploadProgress: action.payLoad
+      });
+
     case types.RECEIVED_GRAPH_STATUS:
       return Object.assign({}, state, { ...action.payLoad });
 

src/screens/common/components/FileUpload.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import Dropzone from 'react-dropzone';
+import Button from 'muicss/lib/react/button';
+import { Line as Progress } from 'rc-progress';
+
+export const FileUpload = ({ fileUploadProgress, handleFileUpload }) => {
+  const [files, setFiles] = useState([]);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+
+  useEffect(() => {
+    if (fileUploadProgress === 100) {
+      setFiles([]);
+      setShowSuccess(true);
+    }
+  }, [fileUploadProgress]);
+
+  useEffect(() => {
+    let showSuccessTimer = setTimeout(() => resetProgress(), 3000);
+    return () => {
+      clearTimeout(showSuccessTimer);
+    };
+  }, [showSuccess]);
+
+  useEffect(() => {
+    if (!showSuccess) {
+      setUploadProgress(fileUploadProgress);
+    }
+  }, [fileUploadProgress]);
+
+  const resetProgress = () => {
+    setShowSuccess(false);
+    setUploadProgress(0);
+  };
+
+  const handleOnDrop = files => {
+    if (files.length) {
+      setFiles(files);
+    }
+  };
+
+  const dropStyle = {
+    height: '150px',
+    borderWidth: 1,
+    borderColor: '#666',
+    borderStyle: 'dashed',
+    borderRadius: 2,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer'
+  };
+
+  const filesStyle = {
+    marginTop: '5%',
+    minHeight: '300px',
+    maxHeight: '300px'
+  };
+
+  const uploadButtonStyle = {
+    width: 100,
+    fontSize: '0.8em',
+    textAlign: 'center',
+    marginLeft: 'auto',
+    marginTop: 10
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column'
+      }}
+    >
+      <Dropzone
+        style={dropStyle}
+        accept="application/zip,
+                  application/octet-stream,
+                  application/x-zip,
+                  application/x-rar,
+                  application/x-zip-compressed,
+                  application/x-rar-compressed,
+                  compressed/rar,
+                  application/rar,
+                  application/xml,
+                  text/xml"
+        onDrop={(files, rejected) => {
+          handleOnDrop(files);
+          console.warn('rejected', rejected);
+        }}
+      >
+        <div style={{ textAlign: 'center' }}>
+          Try dropping some files here, or click to select files to upload.
+        </div>
+      </Dropzone>
+      {files.length ? (
+        <select style={filesStyle} multiple>
+          {files.map((file, index) => {
+            return <option key={'file-' + index}>{file.name}</option>;
+          })}
+        </select>
+      ) : (
+        <div style={{ marginTop: '5%' }}>No files added</div>
+      )}
+      <Progress strokeColor="#8dcc91" percent={uploadProgress} />
+      <Button
+        disabled={!files.length}
+        style={uploadButtonStyle}
+        color="primary"
+        onClick={() => files.length && handleFileUpload(files)}
+      >
+        Upload
+      </Button>
+      {showSuccess && (
+        <div style={{ color: 'green' }}>Files successfully uploaded</div>
+      )}
+    </div>
+  );
+};

src/screens/common/components/SelectSupplier.js

@@ -0,0 +1,49 @@
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
+import React from 'react';
+
+export const SelectSupplier = ({
+  suppliers,
+  selectSupplier,
+  selectedSupplierId,
+  errorText
+}) => {
+  return (
+    <>
+      <SelectField
+        id="select-supplier"
+        floatingLabelFixed={true}
+        style={{ minWidth: 350 }}
+        floatingLabelText={'Provider'}
+        onChange={(e, k, v) => selectSupplier(v)}
+        autoWidth={true}
+        value={Number(selectedSupplierId) || -1}
+        iconStyle={{ fill: 'rgba(22, 82, 149, 0.69)' }}
+      >
+        {suppliers.map(supplier => {
+          const isLevel1Provider =
+            (supplier.chouetteInfo &&
+              supplier.chouetteInfo.migrateDataToProvider) ||
+            supplier.id === -1;
+          return (
+            <MenuItem
+              key={supplier.id}
+              value={supplier.id}
+              label={supplier.name}
+              primaryText={
+                <span
+                  style={{
+                    color: isLevel1Provider ? 'intial' : '#d9a51b'
+                  }}
+                >
+                  {supplier.name}
+                </span>
+              }
+            />
+          );
+        })}
+      </SelectField>
+      {errorText && <div style={{ color: 'red' }}>{errorText}</div>}
+    </>
+  );
+};

src/screens/geocoder/components/tariffZonesImport/TariffZonesImport.js

@@ -0,0 +1,62 @@
+import { SelectSupplier } from '../../../common/components/SelectSupplier';
+import { useSelector, shallowEqual, useDispatch } from 'react-redux';
+import React, { useState } from 'react';
+import { FileUpload } from '../../../common/components/FileUpload';
+import SuppliersActions from '../../../../actions/SuppliersActions';
+
+export const TariffZonesImport = () => {
+  const suppliers = useSelector(
+    state => state.SuppliersReducer.data,
+    shallowEqual
+  );
+
+  const tariffZoneFileUploadProgress = useSelector(
+    state => state.SuppliersReducer.tariffZoneFileUploadProgress,
+    shallowEqual
+  );
+
+  const [selectedSupplier, setSelectedSupplier] = useState(null);
+  const [noSupplierSelected, setNoSupplierSelected] = useState(null);
+  const dispatch = useDispatch();
+
+  const handleFileUpload = files => {
+    if (selectedSupplier === null) {
+      setNoSupplierSelected(true);
+    } else {
+      dispatch(
+        SuppliersActions.uploadTariffZonesFiles(files, selectedSupplier)
+      );
+    }
+  };
+
+  const onSelectSupplier = selectedSupplierId => {
+    setNoSupplierSelected(false);
+    setSelectedSupplier(
+      suppliers.find(supplier => supplier.id === selectedSupplierId)
+    );
+  };
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#fff',
+        padding: '20px',
+        display: 'flex',
+        flexDirection: 'column'
+      }}
+    >
+      <SelectSupplier
+        suppliers={suppliers}
+        selectSupplier={onSelectSupplier}
+        selectedSupplierId={selectedSupplier && selectedSupplier.id}
+        errorText={noSupplierSelected === true && 'No Supplier selected'}
+      />
+      <div style={{ width: '50%', marginTop: '20px' }}>
+        <FileUpload
+          fileUploadProgress={tariffZoneFileUploadProgress}
+          handleFileUpload={handleFileUpload}
+        />
+      </div>
+    </div>
+  );
+};

src/screens/geocoder/index.js

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 import Pelias from './components/Pelias';
 import OSMPOIFilter from './components/OSMPOIFilter';
+import { TariffZonesImport } from './components/tariffZonesImport/TariffZonesImport';
+import { getQueryVariable } from '../../utils';
+import SuppliersActions from '../../actions/SuppliersActions';
+import { useDispatch } from 'react-redux';
 
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
@@ -32,6 +36,11 @@ function a11yProps(index) {
 
 export default () => {
   const [value, setValue] = React.useState(0);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(SuppliersActions.getAllProviders());
+  }, []);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
@@ -47,13 +56,17 @@ export default () => {
       >
         <Tab label="Geocoder pipeline" {...a11yProps(0)} />
         <Tab label="OSM POI filter" {...a11yProps(1)} />
+        <Tab label="TariffZone/FareZone Import" {...a11yProps(2)} />
       </Tabs>
       <TabPanel value={value} index={0}>
         <Pelias />
       </TabPanel>
       <TabPanel value={value} index={1}>
         <OSMPOIFilter />
       </TabPanel>
+      <TabPanel value={value} index={2}>
+        <TariffZonesImport />
+      </TabPanel>
     </div>
   );
 };