Services improvements

2022-01-06 22:14:16 +01:00 · 2022-01-06 22:14:16 +01:00 · 33cc6e4ff9
parent e96a4af8de
commit 33cc6e4ff9
5 changed files with 146 additions and 23 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -17,10 +17,13 @@
        "@angular/platform-browser-dynamic": "~13.0.0",
        "@angular/router": "~13.0.0",
        "@angular/service-worker": "~13.0.0",
+        "@asymmetrik/ngx-leaflet": "^8.1.0",
        "@fortawesome/fontawesome-free": "^5.15.4",
        "@ng-bootstrap/ng-bootstrap": "11.0.0",
        "bootstrap": "^5.1.3",
        "jwt-decode": "^3.1.2",
+        "leaflet": "^1.7.1",
+        "leaflet.locatecontrol": "^0.76.0",
        "ngx-bootstrap": "^7.1.2",
        "ngx-toastr": "^14.2.1",
        "rxjs": "~7.4.0",
@ -32,6 +35,7 @@
        "@angular/cli": "~13.0.3",
        "@angular/compiler-cli": "~13.0.0",
        "@types/jasmine": "~3.10.0",
+        "@types/leaflet": "^1.7.8",
        "@types/node": "16.11.17",
        "jasmine-core": "4.0.0",
        "karma": "~6.3.0",
@ -622,6 +626,17 @@
      "integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==",
      "dev": true
    },
+    "node_modules/@asymmetrik/ngx-leaflet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-8.1.0.tgz",
+      "integrity": "sha512-lq7LduBP/vXcaSEmKnx7mzCR8WsoYqh9pB6BNnq53yeCwsqRbG3GdKye1/i8VvoRzjDsmQBPQsIFZ9uclXrtgg==",
+      "peerDependencies": {
+        "@angular/common": ">=10",
+        "@angular/core": ">=10",
+        "leaflet": "1",
+        "tslib": "2"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.16.0",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
@ -2665,6 +2680,12 @@
      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
      "dev": true
    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "dev": true
+    },
    "node_modules/@types/http-proxy": {
      "version": "1.17.8",
      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@ -2686,6 +2707,15 @@
      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
      "dev": true
    },
+    "node_modules/@types/leaflet": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.8.tgz",
+      "integrity": "sha512-prZwhmUznkwTYCTZVGTR4U1GzgPP3PAWYYQ3wDgVkIoiuQTheWoycsXx4Rz9ARYhlDTl0Ycd8lvhH2/rNSkqIg==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
    "node_modules/@types/node": {
      "version": "16.11.17",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.17.tgz",
@ -7119,6 +7149,16 @@
        "node": ">= 8"
      }
    },
+    "node_modules/leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+    },
+    "node_modules/leaflet.locatecontrol": {
+      "version": "0.76.0",
+      "resolved": "https://registry.npmjs.org/leaflet.locatecontrol/-/leaflet.locatecontrol-0.76.0.tgz",
+      "integrity": "sha512-Mx8uiihBi8KrrW3LgblsNL/pS8HR0gj60m8VFDFrnhSvDuitChazc095XcMSscf/XqZW+TSqQMCTe+AUy/4/eA=="
+    },
    "node_modules/less": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz",
@ -12979,6 +13019,12 @@
      "integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==",
      "dev": true
    },
+    "@asymmetrik/ngx-leaflet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-8.1.0.tgz",
+      "integrity": "sha512-lq7LduBP/vXcaSEmKnx7mzCR8WsoYqh9pB6BNnq53yeCwsqRbG3GdKye1/i8VvoRzjDsmQBPQsIFZ9uclXrtgg==",
+      "requires": {}
+    },
    "@babel/code-frame": {
      "version": "7.16.0",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
@ -14453,6 +14499,12 @@
      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
      "dev": true
    },
+    "@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "dev": true
+    },
    "@types/http-proxy": {
      "version": "1.17.8",
      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@ -14474,6 +14526,15 @@
      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
      "dev": true
    },
+    "@types/leaflet": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.8.tgz",
+      "integrity": "sha512-prZwhmUznkwTYCTZVGTR4U1GzgPP3PAWYYQ3wDgVkIoiuQTheWoycsXx4Rz9ARYhlDTl0Ycd8lvhH2/rNSkqIg==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
    "@types/node": {
      "version": "16.11.17",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.17.tgz",
@ -17838,6 +17899,16 @@
      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
      "dev": true
    },
+    "leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+    },
+    "leaflet.locatecontrol": {
+      "version": "0.76.0",
+      "resolved": "https://registry.npmjs.org/leaflet.locatecontrol/-/leaflet.locatecontrol-0.76.0.tgz",
+      "integrity": "sha512-Mx8uiihBi8KrrW3LgblsNL/pS8HR0gj60m8VFDFrnhSvDuitChazc095XcMSscf/XqZW+TSqQMCTe+AUy/4/eA=="
+    },
    "less": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -21,10 +21,13 @@
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "@angular/service-worker": "~13.0.0",
+    "@asymmetrik/ngx-leaflet": "^8.1.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@ng-bootstrap/ng-bootstrap": "11.0.0",
    "bootstrap": "^5.1.3",
    "jwt-decode": "^3.1.2",
+    "leaflet": "^1.7.1",
+    "leaflet.locatecontrol": "^0.76.0",
    "ngx-bootstrap": "^7.1.2",
    "ngx-toastr": "^14.2.1",
    "rxjs": "~7.4.0",
@ -36,6 +39,7 @@
    "@angular/cli": "~13.0.3",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
+    "@types/leaflet": "^1.7.8",
    "@types/node": "16.11.17",
    "jasmine-core": "4.0.0",
    "karma": "~6.3.0",
--- a/frontend/src/app/_components/edit-service/edit-service.component.html
+++ b/frontend/src/app/_components/edit-service/edit-service.component.html
@ -53,17 +53,11 @@
        </ng-container>
      </div>
      <label>Luogo dell'intervento</label>
-      <div id="map"></div>
-      <div id="search">
-        <div class="form-inline">
-          <div class="form-group mx-sm-3 mb-2">
-            <input type="text" class="form-control" value="" id="addr" size="50" />
-          </div>
-          <div class="form-group mx-sm-3 mb-2">
-            <button id="search_button" type="button" class="btn btn-primary mb-2">
-                Cerca
-            </button>
-          </div>
+      <div id="map" style="height: 300px;" leaflet [leafletOptions]="options" (leafletMapReady)="mapReady($event)"></div> 
+      <div id="search" class="mt-2">
+        <div class="input-group mb-3">
+          <input type="text" class="form-control" placeholder="Luogo">
+          <button class="btn btn-outline-secondary" type="button">Cerca</button>
        </div>
        <div id="results"></div>
      </div>
@ -75,17 +69,19 @@
      <div class="form-group">
        <label>Tipologia</label>
        <br>
-        <!--
-        <select id="types" class="form-control" class="types">
-          {% for type in service.types %}
-          <option value='{{ type.name }}'>{{ type.name }}</option>
-          {% endfor %}
-          {% if service.types is empty %}
-          <option id="empty_option" value=''></option>
-          {% endif %}
-          <option value='add_new'>{{ 'Add type...'|t }}</option>
-        </select>
-        -->
+        <div class="input-group">
+          <select class="form-control mr-2">
+            <option selected disabled>Seleziona tipologia..</option>
+            <option *ngFor="let type of types" value="{{ type.id }}">{{ type.name }}</option>
+          </select>
+          <button class="btn btn-outline-secondary" type="button" tabindex="-1" (click)="addingType = true">
+            Aggiungi
+          </button>
+        </div>
+        <div class="input-group mb-2 mt-2" *ngIf="addingType">
+          <input type="text" class="form-control" placeholder="Nome della tipologia" [(ngModel)]="newType" [ngModelOptions]="{standalone: true}">
+          <button class="btn btn-secondary" type="button" (click)="addType()">Invia</button>
+        </div>
      </div>
      <br>
      <button id="submit_button" type="submit" class="btn btn-primary">Invia</button>
--- a/frontend/src/app/_components/edit-service/edit-service.component.ts
+++ b/frontend/src/app/_components/edit-service/edit-service.component.ts
@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ApiClientService } from 'src/app/_services/api-client.service';
+import { ToastrService } from 'ngx-toastr';
+import { latLng, tileLayer } from 'leaflet';
+import "leaflet.locatecontrol";

@Component({
  selector: 'app-edit-service',
@ -10,8 +13,22 @@ import { ApiClientService } from 'src/app/_services/api-client.service';
 export class EditServiceComponent implements OnInit {
  public serviceId: string | undefined;
  public users: any[] = [];
+  public types: any[] = [];
+  public addingType = false;
+  public newType = "";
+  public options = {
+    layers: [
+      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
+    ],
+    zoom: 5,
+    center: latLng(46.879966, -121.726909)
+  };

-  constructor(private route: ActivatedRoute, private api: ApiClientService) {
+  constructor(
+    private route: ActivatedRoute,
+    private api: ApiClientService,
+    private toastr: ToastrService
+  ) {
    this.route.paramMap.subscribe(params => {
      this.serviceId = params.get('id') || undefined;
      console.log(this.serviceId);
@ -20,8 +37,41 @@ export class EditServiceComponent implements OnInit {
      this.users = users;
      console.log(this.users);
    });
+    this.loadTypes();
+  }
+
+  loadTypes() {
+    this.api.get("service_types").then((types) => {
+      console.log(types);
+      this.types = types;
+    });
  }

  ngOnInit(): void { }

+  addType() {
+    if(this.newType.length < 2) {
+      this.toastr.error("Il nome della tipologia deve essere lungo almeno 2 caratteri");
+      return;
+    }
+    if(this.types.find(t => t.name == this.newType)) {
+      this.toastr.error("Il nome della tipologia è già in uso");
+      return;
+    }
+    this.api.post("service_types", {
+      name: this.newType
+    }).then((type) => {
+      this.addingType = false;
+      this.newType = "";
+      console.log(type);
+      if(type === 1) this.toastr.success("Tipologia di servizio aggiunta con successo.");
+      this.loadTypes();
+    });
+  }
+
+  mapReady(map: any) {
+    console.log(map);
+    (window as any).L.control.locate().addTo(map);
+  }
+
 }
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -4,6 +4,8 @@
@import "~@fortawesome/fontawesome-free/css/all.css";
@import '~ngx-toastr/toastr';
@import '~ngx-bootstrap/datepicker/bs-datepicker.scss';
+@import '~leaflet/dist/leaflet.css';
+@import '~leaflet.locatecontrol/dist/L.Control.Locate.min.css';

 .fa {
  vertical-align: middle;