Merge pull request #53 from norkator/Feature/continue-react-front-end

Feature/continue react front end

api/front-end/src/components/PlateEditModal/PlateEditModal.tsx

@@ -14,6 +14,10 @@ export const PlateEditModal = (props: PlateEditModalPropsInterface) => {
         <Modal.Body>
           <p className="text-muted mb-2">{props.description}</p>
 
+            {
+                props.imageData !== undefined ? <img src={props.imageData} alt={props.title} /> : null
+            }
+
           <form className="mt-4">
             <div className="form-group">
               <label htmlFor="new_plate_licence_plate">Licence plate</label>
@@ -56,4 +60,5 @@ export interface PlateEditModalPropsInterface {
   ownerName: string;
   lpOnChange: Function;
   ownerOnChange: Function;
+  imageData?: string;
 }

api/front-end/src/pages/Plates/Cars/Cars.tsx

@@ -2,9 +2,16 @@ import React, {Component} from "react";
 import {ReduxPropsInterface} from "../../../store/dateReducer";
 import {Card} from "react-bootstrap";
 import DateRangeSelector from "../../Home/DateRangeSelector/DateRangeSelector";
-import {getLicensePlateDetections, LicensePlateDetectionsInterface} from "../../../utils/HttpUtils";
+import {
+  addLicensePlate,
+  getLicensePlateDetections,
+  LicensePlateDetectionsInterface,
+  updateLicensePlate
+} from "../../../utils/HttpUtils";
 import {getNowISODate} from "../../../utils/DateUtils";
 import styles from './Cars.module.css'
+import {PlateEditModal, PlateEditModalPropsInterface} from "../../../components/PlateEditModal/PlateEditModal";
+import {filterLicensePlate} from "../../../utils/TextUtils";
 
 
 class Cars extends Component<ReduxPropsInterface> {
@@ -14,6 +21,7 @@ class Cars extends Component<ReduxPropsInterface> {
     resultOption: 'owner_detail_needed',
     totalPlates: 0,
     licensePlateDetections: [] as LicensePlateDetectionsInterface[],
+    plateEditModalData: {show: false} as PlateEditModalPropsInterface,
   };
 
   componentDidMount(): void {
@@ -37,7 +45,10 @@ class Cars extends Component<ReduxPropsInterface> {
       if (this.state.licensePlateDetections.length > 0) {
         cars = this.state.licensePlateDetections.map(detection => {
           return (
-            <div key={detection.file} className={styles.zoom} style={{cursor: 'pointer'}}>
+            <div key={detection.file}
+                 className={styles.zoom}
+                 style={{cursor: 'pointer'}}
+            onClick={() => this.addNewPlateHandler(detection)}>
               <Card style={{maxWidth: '160px'}} className="mr-1 mt-1 ml-1 mb-1">
                 <Card.Img variant="top" src={detection.image} style={{maxHeight: '100px'}}/>
                 <Card.Body className="p-2">
@@ -71,9 +82,62 @@ class Cars extends Component<ReduxPropsInterface> {
             </Card.Footer>
           </Card>
         </div>
+
+        <PlateEditModal
+          show={this.state.plateEditModalData.show}
+          title={this.state.plateEditModalData.title}
+          description={this.state.plateEditModalData.description}
+          id={this.state.plateEditModalData.id}
+          licencePlate={this.state.plateEditModalData.licencePlate}
+          ownerName={this.state.plateEditModalData.ownerName}
+          closeHandler={() => this.plateEditModalCloseHandler}
+          saveHandler={(plateObject: PlateEditModalPropsInterface) => this.plateEditModalSaveHandler(plateObject)}
+          lpOnChange={(lp: string) => this.setState({
+            plateEditModalData: {
+              ...this.state.plateEditModalData,
+              licencePlate: filterLicensePlate(lp)
+            }
+          })}
+          ownerOnChange={(owner: string) => this.setState({
+            plateEditModalData: {
+              ...this.state.plateEditModalData,
+              ownerName: owner
+            }
+          })}
+          imageData={this.state.plateEditModalData.imageData}
+        />
+
       </div>
     )
   }
+
+  plateEditModalCloseHandler = () => {
+    this.setState({plateEditModalData: {show: false}});
+  };
+
+  plateEditModalSaveHandler = (plateObject: PlateEditModalPropsInterface) => {
+    addLicensePlate(plateObject.licencePlate, plateObject.ownerName).then((response: any) => {
+      console.log(response);
+      // this.plateEditModalCloseHandler();
+    }).catch((error: any) => {
+      alert(error);
+    });
+  };
+
+  addNewPlateHandler = (lpDetection: LicensePlateDetectionsInterface) => {
+    this.setState({
+      plateEditModalData: {
+        show: true,
+        title: 'Add new plate',
+        description: 'Add new plate based on pre detection. Correct the plate based on image. License plate can be given with or without "-" character.',
+        id: null,
+        licencePlate: lpDetection.detectionResult,
+        ownerName: '',
+        imageData: lpDetection.image,
+      }
+    });
+  };
+
 }
 
 export default Cars;

api/front-end/src/pages/Plates/Owners/Owners.tsx

@@ -124,6 +124,7 @@ class Owners extends Component<ReduxPropsInterface> {
               ownerName: owner
             }
           })}
+          imageData={undefined}
         />
 
 

api/intelligence.js

@@ -32,7 +32,7 @@ initDb.initDatabase().then(() => {
     // allowAccessOriginAll will let any origin client connect to this api
     app.use(function(req, res, next) {
       res.setHeader('Access-Control-Allow-Origin', '*');
-      res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
+      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, PATCH, PUT');
       res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
       next();
     });

api/routes/site.js

@@ -786,38 +786,52 @@ async function Site(router, sequelizeObjects) {
    * Create license plate
    */
   router.post('/manage/licence/plates', async (req, res) => {
-    sequelizeObjects.Plate.create({
-      licence_plate: req.body.licence_plate, owner_name: req.body.owner_name, enabled: 1
-    }).then(result => {
-      res.status(200);
-      res.send('New licence plate added.');
+    const licensePlate = req.body.licence_plate;
+    sequelizeObjects.Plate.findAll({
+      attributes: ['id',],
+      where: {licence_plate: licensePlate},
+    }).then(rows => {
+      if (rows.length > 0) {
+        res.status(409);
+        res.send('Plate already exists in records');
+      } else {
+        sequelizeObjects.Plate.create({
+          licence_plate: req.body.licence_plate, owner_name: req.body.owner_name, enabled: 1
+        }).then(result => {
+          res.status(200);
+          res.send('New licence plate added.');
+        }).catch(error => {
+          res.status(500);
+          res.send('Error adding licence plate. ' + error);
+        });
+      }
     }).catch(error => {
       res.status(500);
-      res.send('Error adding licence plate. ' + error);
+      res.send(error);
     });
   });
 
   /**
    * Delete license plate
    */
-  router.delete('/manage/licence/plates', async (req, res) => {
-    console.log('Removing ', req.body.data.id);
-    /*
-    sequelizeObjects.Plate.destroy({
-      where: {id: req.body.id,},
-    }).then(result => {
-      if (result === 1) {
-        res.status(200);
-        res.send('Removed licence plate.');
-      } else {
-        res.status(500);
-        res.send('Error removing licence plate. ');
-      }
-    });
-     */
-
-    res.status(200);
-    res.send('Removed licence plate.');
+  router.delete('/manage/licence/plates/:id', async (req, res) => {
+    const id = Number(req.params.id);
+    if (id > 0) {
+      sequelizeObjects.Plate.destroy({
+        where: {id: id},
+      }).then(result => {
+        if (result === 1) {
+          res.status(200);
+          res.send('Removed licence plate.');
+        } else {
+          res.status(500);
+          res.send('Error removing licence plate. ');
+        }
+      });
+    } else {
+      res.status(500);
+      res.send('No proper :id parameter provided for delete.');
+    }
   });
 
   /**