Implement parkings data export capability

dashboard/src/actions.ts

@@ -1,6 +1,6 @@
 import { Moment } from 'moment';
 
-import { ParkingList, RegionList, RegionStatsList } from './api/types';
+import { ParkingList, RegionList, RegionStatsList, PaymentZoneList, OperatorList } from './api/types';
 import { MapViewport } from './components/types';
 
 interface CheckExistingLoginAction {
@@ -139,6 +139,39 @@ export function receiveValidParkings(
     return {type: 'RECEIVE_VALID_PARKINGS', data, time};
 }
 
+interface ReceiveCsvAction {
+    type: 'RECEIVE_CSV';
+    data: string;
+}
+
+export function receiveCSV(
+    data: string
+): ReceiveCsvAction {
+    return {type: 'RECEIVE_CSV', data}
+}
+
+interface ReceiveOperatorsAction {
+    type: 'RECEIVE_OPERATORS';
+    data: OperatorList;
+}
+
+export function receiveOperators(
+    data: OperatorList
+): ReceiveOperatorsAction {
+    return {type: 'RECEIVE_OPERATORS', data}
+}
+
+interface ReceivePaymentZonesAction {
+    type: 'RECEIVE_PAYMENT_ZONES';
+    data: PaymentZoneList;
+}
+
+export function receivePaymentZones(
+    data: PaymentZoneList
+): ReceivePaymentZonesAction {
+    return {type: 'RECEIVE_PAYMENT_ZONES', data}
+}
+
 export type Action =
     CheckExistingLoginAction |
     ResolveExistingLoginCheckAction |
@@ -155,4 +188,7 @@ export type Action =
     SetSelectedRegionAction |
     ReceiveRegionStatsAction |
     ReceiveRegionInfoAction |
-    ReceiveValidParkingsAction;
+    ReceiveValidParkingsAction |
+    ReceiveOperatorsAction |
+    ReceivePaymentZonesAction |
+    ReceiveCsvAction;

dashboard/src/api/index.ts

@@ -2,7 +2,8 @@ import * as axios from 'axios';
 import { Moment } from 'moment';
 
 import AuthManager from './auth-manager';
-import { ParkingList, RegionList, RegionStatsList } from './types';
+import { download } from './utils';
+import { ExportFilters, ParkingList, RegionList, RegionStatsList, OperatorList, PaymentZoneList } from './types';
 
 interface SuccessCallback<T> {
     (response: axios.AxiosResponse<T>): void;
@@ -20,6 +21,9 @@ export class Api {
         regions: '/monitoring/v1/region/',
         regionStats: '/monitoring/v1/region_statistics/',
         validParkings: '/monitoring/v1/valid_parking/',
+        exportDownload: '/monitoring/v1/export/download/',
+        operators: '/enforcement/v1/operator/',
+        paymentZones: '/operator/v1/payment_zone/',
     };
 
     public auth: AuthManager;
@@ -62,9 +66,37 @@ export class Api {
                             callback, errorHandler);
     }
 
+    downloadCSV(
+        filters: ExportFilters,
+        callback: SuccessCallback<string>,
+        errorHandler: ErrorHandler,
+    ) : void {
+        this.axios.post(this.endpoints.exportDownload, filters)
+            .then((response) => {
+                callback(response);
+                const fileName = response.headers["x-suggested-filename"]
+                download(response.data, fileName);
+            })
+            .catch(errorHandler);
+    }
+
+    fetchOperators(
+        callback: SuccessCallback<OperatorList>,
+        errorHandler: ErrorHandler
+    ) {
+        this._fetchAllPages(this.endpoints.operators, callback, errorHandler);
+    }
+
+    fetchPaymentZones(
+        callback: SuccessCallback<PaymentZoneList>,
+        errorHandler: ErrorHandler
+    ) {
+        this._fetchAllPages(this.endpoints.paymentZones, callback, errorHandler);
+    }
+
     private _fetchAllPages(
         url: string,
-        callback: SuccessCallback<RegionList> | SuccessCallback<ParkingList> | SuccessCallback<RegionStatsList>,
+        callback: SuccessCallback<RegionList> | SuccessCallback<ParkingList> | SuccessCallback<RegionStatsList> | SuccessCallback<OperatorList> | SuccessCallback<PaymentZoneList>,
         errorHandler: ErrorHandler
     ) {
         this.axios.get(url)

dashboard/src/api/types.ts

@@ -90,3 +90,33 @@ export interface ParkingProperties {
     created_at: string;
     modified_at: string;
 }
+
+
+export interface Operator {
+    id: string;
+    name?: string;
+    created_at?: string;
+    modified_at?: string;
+}
+
+export interface OperatorList extends PaginatedList {
+    results: Operator[];
+}
+
+export interface PaymentZone {
+    code: string;
+    name?: string;
+    domain?: string;
+}
+
+export interface PaymentZoneList extends PaginatedList {
+    results: PaymentZone[];
+}
+
+export interface ExportFilters {
+    operators?: string[];
+    payment_zones?: string[];
+    parking_check?: boolean;
+    time_start: string;
+    time_end: string;
+}

dashboard/src/api/utils.ts

@@ -0,0 +1,16 @@
+export function download(data: string, fileName: string): void {
+    const blob: Blob = new Blob([data], { type: 'text/csv' });
+    const blobURL: string = window.URL.createObjectURL(blob)
+
+    const downloadLink: HTMLAnchorElement = document.createElement('a');
+    downloadLink.style.display = 'none';
+    downloadLink.href = blobURL;
+    downloadLink.setAttribute('download', fileName);
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    setTimeout(function() {
+        document.body.removeChild(downloadLink);
+        window.URL.revokeObjectURL(blobURL);
+    }, 200)
+}

dashboard/src/components/Export.css

@@ -0,0 +1,91 @@
+i {
+    margin-right: 3px !important;
+}
+
+.filter-card {
+    display: table !important;
+    width: 100% !important;
+    margin-left: 0 !important;
+    padding-left: 0 !important
+}
+
+.row {
+    display: table !important;
+    width: 100% !important;
+    margin-left: 0 !important;
+    flex: 1 !important;
+    box-sizing: border-box;
+}
+
+.export-button {
+    color: #515455 !important;
+    box-shadow: none !important;
+    background: hsl(32, 39%, 81%) !important;
+    border-color: #e1cfbb !important;
+    margin-top: 4px;
+}
+
+.export-button:hover {
+    background: #f0e5dd !important;
+    border-color: #f0e5dd !important;
+}
+
+.download-button {
+    color: #515455 !important;
+    box-shadow: none !important;
+    background: #e1cfbb !important;
+    border-color: #e1cfbb !important;
+    float: right;
+    margin-right: 4px;
+}
+
+.download-button:hover {
+    background: #f0e5dd !important;
+    border-color: #f0e5dd !important;
+}
+
+.filter-field {
+    display: table-cell !important;
+    padding: 5px !important;
+}
+
+.multi-select-field {
+    width: 50% !important;
+}
+
+.datepicker-field {
+    width: 160px !important;
+}
+
+.parking-check-button {
+    color: #515455 !important;
+    box-shadow: none !important;
+    background: #f0e5dd !important;
+    border-color: #e1cfbb !important;
+}
+
+.parking-check-button:hover {
+    background: #e1cfbb !important;
+    border-color: #f0e5dd !important;
+}
+
+.parking-check-active {
+    background: #e1cfbb !important;
+}
+
+@media screen and (max-width: 28rem) {
+    .export-button .text {
+        display: none;
+        margin-right: auto !important;
+    }
+
+    .download-button .text {
+        display: none;
+        margin-right: auto !important;
+    }
+
+    .parking-check-button .text {
+        display: none;
+        margin-right: auto !important;
+    }
+}