Added public routes component

src/app/app.module.ts

@@ -57,6 +57,7 @@ import { DirectionsMapDirective } from './components/map/directions-map.directiv
 import { AccountComponent } from './components/dashboard/account-controller/account/account.component';
 import { UserService } from './services/user.service';
 import { RoutesSavedComponent } from './components/dashboard/route-controller/routes-saved/routes-saved.component';
+import { RoutesPublicComponent } from './components/dashboard/route-controller/routes-public/routes-public.component';
 
 @NgModule({
   declarations: [
@@ -68,7 +69,8 @@ import { RoutesSavedComponent } from './components/dashboard/route-controller/ro
     RouteControllerComponent,
     DirectionsMapDirective,
     AccountComponent,
-    RoutesSavedComponent
+    RoutesSavedComponent,
+    RoutesPublicComponent
   ],
   imports: [
     BrowserModule,
@@ -94,7 +96,8 @@ import { RoutesSavedComponent } from './components/dashboard/route-controller/ro
     MatCardModule,
     MatDatepickerModule,
     MatNativeDateModule,
-    MatTableModule
+    MatTableModule,
+    MatCheckboxModule
   ],
   providers: [ MapService, TreesService, RoutesService, UserService ],
   bootstrap: [AppComponent]

src/app/components/dashboard/route-controller/route-controller.component.html

@@ -77,7 +77,7 @@
             </mat-form-field>
           </div>
           <div>
-            <button mat-button color="primary" >Publica</button>
+            <mat-checkbox [(ngModel)]="makeRoutePublic">Publica</mat-checkbox>
             <button mat-button (click)="saveRoute()" color="primary" >Salveaza</button>
           </div>
         </mat-step>
@@ -88,7 +88,7 @@
       <ng-template mat-tab-label>
         <i class="material-icons">share</i> Trasee publice
       </ng-template>
-
+        <routes-public></routes-public>
     </mat-tab>
     <mat-tab label="Trasee salvate">
       <ng-template mat-tab-label>

src/app/components/dashboard/route-controller/route-controller.component.ts

@@ -5,6 +5,7 @@ import { UserService } from '../../../services/user.service';
 import { Route } from '../../../classes/route';
 import { MapCoordonates } from '../../../classes/map-coordonates';
 import { RoutesSavedComponent } from './routes-saved/routes-saved.component';
+import { RoutesPublicComponent } from './routes-public/routes-public.component';
 
 import 'rxjs/add/operator/first';
 
@@ -24,6 +25,7 @@ export class RouteControllerComponent implements OnInit {
   haltsOccurence = [];
   isUserAuthenticated: boolean;
   distance;
+  makeRoutePublic: boolean = false;
 
   constructor(private _formBuilder: FormBuilder, private _mapService: MapService, private _userService: UserService) {
 
@@ -140,6 +142,7 @@ export class RouteControllerComponent implements OnInit {
   }
 
   saveRoute() {
+
     let origin: MapCoordonates = new MapCoordonates(this.routeFormGroup.controls['latStr'].value, this.routeFormGroup.controls['lngStr'].value);
     let destin = new MapCoordonates(this.routeFormGroup.controls['latEnd'].value, this.routeFormGroup.controls['lngEnd'].value);
     let waypoints = this.transformPointsToCoords();
@@ -148,7 +151,17 @@ export class RouteControllerComponent implements OnInit {
                   + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
     let route = new Route(origin, destin, waypoints, dateTime, this.treesCounterToVisit.length, this.haltsCounterToVisit.length, this.distance);
 
-    this._userService.saveUserRoute(route);
+    if (this.makeRoutePublic) {
+      this._userService.makeRoutePublic(route);
+    }
+
+    this._userService.saveUserRoute(route).subscribe(result => {
+            if (result.status == 200) {
+              window.alert("Traseu salvat cu success!");
+            } else {
+              window.alert("Traseul nu a putut fi salvat, incearca din nou.");
+            }
+      });
   }
 
   transformPointsToCoords() {

src/app/components/dashboard/route-controller/routes-public/routes-public.component.html

@@ -0,0 +1,35 @@
+<div class="example-container mat-elevation-z8" style="margin-top: 5px;">
+  <mat-table #table [dataSource]="dataSource">
+
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef> Data </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.date}} </mat-cell>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="distance">
+      <mat-header-cell *matHeaderCellDef> Distanta </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.distance}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="trees">
+      <mat-header-cell *matHeaderCellDef> Pomi </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.trees}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="halts">
+      <mat-header-cell *matHeaderCellDef> Popasuri </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.halts}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="action">
+      <mat-header-cell *matHeaderCellDef> Actiune </mat-header-cell>
+      <mat-cell *matCellDef="let element">
+          <button mat-button color="primary" >Detalii</button>
+      </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
+</div>

src/app/components/dashboard/route-controller/routes-public/routes-public.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoutesPublicComponent } from './routes-public.component';
+
+describe('RoutesPublicComponent', () => {
+  let component: RoutesPublicComponent;
+  let fixture: ComponentFixture<RoutesPublicComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoutesPublicComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoutesPublicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/dashboard/route-controller/routes-public/routes-public.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { MapService } from '../../../../services/map.service';
+import { UserService } from '../../../../services/user.service';
+
+@Component({
+  selector: 'routes-public',
+  templateUrl: './routes-public.component.html',
+  styleUrls: ['./routes-public.component.css']
+})
+export class RoutesPublicComponent implements OnInit {
+
+  isUserAuthenticated: boolean;
+  publicRoutes = [];
+  displayedColumns = ['date', 'distance', 'trees', 'halts', 'action'];
+  dataSource = [];
+
+  constructor(private _mapService: MapService) { }
+
+  ngOnInit() {
+    this._mapService.getPublicRoutes().subscribe(value => {
+      this.publicRoutes = Object.keys(value).map(function(key) {
+            return value[key];
+      });
+
+      this.dataSource = this.publicRoutes;
+
+    });
+
+
+  }
+}

src/app/components/dashboard/route-controller/routes-saved/routes-saved.component.html

@@ -3,7 +3,7 @@
       <p>Pentru a iti putea vedea traseele salvate te rog sa te autentifici.</p>
 </div>
 <div *ngIf="isUserAuthenticated">
-      <div class="example-container mat-elevation-z8">
+      <div class="example-container mat-elevation-z8" style="margin-top: 5px;">
         <mat-table #table [dataSource]="dataSource">
 
           <ng-container matColumnDef="date">
@@ -27,6 +27,14 @@
             <mat-cell *matCellDef="let element"> {{element.halts}} </mat-cell>
           </ng-container>
 
+          <ng-container matColumnDef="action">
+            <mat-header-cell *matHeaderCellDef> Actiune </mat-header-cell>
+            <mat-cell *matCellDef="let element">
+              <button mat-button color="primary" >Arata</button>
+              <button mat-button color="warn" >Sterge</button>
+            </mat-cell>
+          </ng-container>
+
           <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
           <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
         </mat-table>

src/app/components/dashboard/route-controller/routes-saved/routes-saved.component.ts

@@ -10,7 +10,7 @@ export class RoutesSavedComponent implements OnInit {
 
   isUserAuthenticated: boolean;
   userRoutes = [];
-  displayedColumns = ['date', 'distance', 'trees', 'halts'];
+  displayedColumns = ['date', 'distance', 'trees', 'halts', 'action'];
   dataSource = [];
 
   constructor(private _userService: UserService) { }

src/app/components/map/map.component.css

@@ -4,6 +4,7 @@ agm-map {
 
 img {
   max-width: 200px !important;
+  max-height: 200px !important;
 }
 
 h5 {

src/app/components/map/map.component.html

@@ -6,13 +6,21 @@
     [longitude]="marker.coords.lng"
     [iconUrl]="marker.icon">
     <agm-info-window #infoWindow>
-      <img src="{{marker.img}}">
-      <h5><b>Latitudine:</b> {{marker.coords.lat}}</h5>
-      <h5><b>Longitudine:</b> {{marker.coords.lng}}</h5>
-      <h5><b>Categorie:</b> {{marker.category}}</h5>
-      <h4><b>INFO</b></h4>
-      <h5>{{marker.info}}</h5>
-      <button mat-button color="warn" (click)="markToVisit(marker); onMarkToVisitBtnClicked($event)">Viziteaza</button>
+      <div class="row">
+        <div class="col-md-4">
+          <img src="{{marker.img}}">
+        </div>
+        <div class="col-md-5">
+          <h4><b>INFO</b></h4>
+          <h5>{{marker.info}}</h5>
+        </div>
+        <div class="col-md-3">
+          <h5><b>Latitudine:</b> {{marker.coords.lat}}</h5>
+          <h5><b>Longitudine:</b> {{marker.coords.lng}}</h5>
+          <h5><b>Categorie:</b> {{marker.category}}</h5>
+          <button mat-raised-button color="warn" (click)="markToVisit(marker, $event)" style="margin-top: 10px;">Viziteaza</button>
+        </div>
+      </div>
     </agm-info-window>
   </agm-marker>
   <agm-marker

src/app/components/map/map.component.ts

@@ -73,9 +73,15 @@ export class MapComponent {
     return null;
   }
 
-  markToVisit(marker) {
+  markToVisit(marker, event) {
     var findIfMarked = this.checkCoordsAndReturnPoint(marker.coords);
 
+    if(event.srcElement.innerHTML == 'Viziteaza' ){
+      event.srcElement.innerHTML = 'Nu mai vizita';
+    } else if(event.srcElement.innerHTML == 'Nu mai vizita'){
+      event.srcElement.innerHTML = 'Viziteaza';
+    }
+
     if (findIfMarked == null) {
       this.pointsMarkedToVisit.push(marker);
       this.mapService.markedToVisit.next(this.pointsMarkedToVisit);
@@ -90,14 +96,6 @@ export class MapComponent {
     }
   }
 
-  onMarkToVisitBtnClicked(event) {
-    if(event.srcElement.innerHTML === 'Viziteaza' ){
-      event.srcElement.innerHTML = 'Nu mai vizita';
-    } else if(event.srcElement.innerHTML ==='Nu mai vizita'){
-      event.srcElement.innerHTML = 'Viziteaza';
-    }
-  }
-
   markerClicked(marker: Tree, index: number, infoWindow): void {
     console.log("Clicked marker at index " + index + " / "+ marker.coords.lat + " / " + marker.coords.lng);
     if (this.infoWindowOpened == infoWindow)

src/app/services/map.service.ts

@@ -174,4 +174,9 @@ export class MapService implements OnInit {
     }).subscribe(data => { this.routeResult.next(data); console.log(data); });
   }
 
+  getPublicRoutes() {
+    let url = "http://localhost:3000/routes/public";
+    return this.http.get(url).map(res => res.json());
+  }
+
 }

src/app/services/routes.service.ts

@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core';
+import { Http, Response, RequestOptions, Headers, URLSearchParams } from '@angular/http';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class RoutesService {

src/app/services/user.service.ts

@@ -73,7 +73,12 @@ export class UserService {
 
   saveUserRoute(route: Route) {
     var url = this.baseApiURL + "/routes";
-    return this.http.post(url, { token: this.userToken, route: route })
+    return this.http.post(url, { token: this.userToken, route: route });
+  }
+
+  makeRoutePublic(route: Route) {
+    var url = "http://localhost:3000/routes/public";
+    return this.http.post(url, { route: route })
       .subscribe(result => {
         console.log(result);
       });

src/styles.css

@@ -18,3 +18,13 @@ html, body {
   font-size: 8pt;
   float: right;
 }
+
+body > app-root > div > div > div.col-md-8 > app-map > agm-map > div.agm-map-container-inner.sebm-google-map-container-inner > div > div > div:nth-child(1) > div:nth-child(4) > div:nth-child(4) > div > div.gm-style-iw > div:nth-child(1) > div {
+  max-width: 500px !important;
+  max-height: 200px !important;
+}
+
+body > app-root > div > div > div.col-md-8 > app-map > agm-map > div.agm-map-container-inner.sebm-google-map-container-inner > div > div > div:nth-child(1) > div:nth-child(4) > div:nth-child(4) > div > div.gm-style-iw > div:nth-child(1) > div > img {
+  height: 200px !important;
+  float: left;
+}