Changeset 6a80231 for trip-planner-front/src/app
- Timestamp:
- 11/02/21 22:14:57 (3 years ago)
- Branches:
- master
- Children:
- 6c1585f
- Parents:
- 188ee53
- Location:
- trip-planner-front/src/app
- Files:
-
- 8 added
- 13 edited
Legend:
- Unmodified
- Added
- Removed
-
trip-planner-front/src/app/_models/planner.ts
r188ee53 r6a80231 6 6 constructor(){ 7 7 this.id = 1; 8 this.name = ' Planner name';9 this.description = ' Planner description';8 this.name = ''; 9 this.description = ''; 10 10 } 11 11 } -
trip-planner-front/src/app/_services/planner.service.ts
r188ee53 r6a80231 1 import { HttpClient } from "@angular/common/http";1 import { HttpClient, HttpHeaders } from "@angular/common/http"; 2 2 import { Injectable } from "@angular/core"; 3 3 import { Observable } from "rxjs"; 4 import { PlannerDto } from "../_models/dto/plannerDto"; 4 5 import { Planner } from "../_models/planner"; 5 6 … … 14 15 return this.httpClient.get<Planner[]>(url); 15 16 } 17 18 postInitialPlanner(plannerDto: PlannerDto): Observable<Object>{ 19 let url = "http://localhost:8080/api/planner/new"; 20 return this.httpClient.post<Planner>(url, plannerDto); 21 } 22 23 updatePlanner(id: number):Observable<Planner>{ 24 let url = "http://localhost:8080/api/edit/planner/" + id; 25 return this.httpClient.put<Planner>(url, null); 26 } 16 27 } -
trip-planner-front/src/app/app-routing.module.ts
r188ee53 r6a80231 1 1 import { NgModule } from '@angular/core'; 2 2 import { RouterModule, Routes } from '@angular/router'; 3 import { LocationsFormComponent } from './locations-form/locations-form.component'; 4 import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component'; 5 import { PlannerComponent } from './planner/planner.component'; 3 6 4 const routes: Routes = []; 7 const routes: Routes = [ 8 {path: 'planners', component: PlannerComponent}, 9 {path: 'form', component: LocationsFormComponent}, 10 {path: 'edit/planner/:id', component: EditPlannerComponent} 11 ]; 5 12 6 13 @NgModule({ -
trip-planner-front/src/app/app.component.html
r188ee53 r6a80231 1 1 2 <app-locations-form> 3 </app-locations-form> 2 <router-outlet></router-outlet> 3 4 -
trip-planner-front/src/app/app.module.ts
r188ee53 r6a80231 26 26 import { MatFormFieldModule } from '@angular/material/form-field'; 27 27 import {MatAutocompleteModule} from '@angular/material/autocomplete'; 28 import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component'; 29 import { DetailPlannerComponent } from './planner/detail-planner/detail-planner.component'; 28 30 29 31 @NgModule({ … … 33 35 LocationComponent, 34 36 CreateInitialPlannerComponent, 35 LocationsFormComponent 36 ], 37 LocationsFormComponent, 38 EditPlannerComponent, 39 DetailPlannerComponent 40 ], 37 41 imports: [ 38 42 BrowserModule, -
trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html
r188ee53 r6a80231 1 <h1 mat-dialog-title>Hi </h1> 2 <div mat-dialog-content> 3 <p>Trip name</p> 4 <mat-form-field appearance="fill"> 5 <input matInput required > 6 </mat-form-field> 7 <p>Trip description</p> 8 <mat-form-field appearance="fill"> 9 <textarea matInput ></textarea> 10 </mat-form-field> 11 </div> 12 <div mat-dialog-actions> 13 <button mat-button (click)="onCancelClick()">Cancel</button> 14 <button mat-button cdkFocusInitial>Save</button> 15 </div> 1 <form (ngSubmit)="onFormSubmitPlanner(f)" #f="ngForm"> 2 <h1 mat-dialog-title>Hi </h1> 3 <div mat-dialog-content> 4 <p>Planner name</p> 5 <mat-form-field appearance="fill"> 6 <input matInput required type="text" [(ngModel)]="plannerDto.name" name="name" placeholder="Planner name"> 7 </mat-form-field> 8 <p>Planner description</p> 9 <mat-form-field appearance="fill"> 10 <textarea matInput required name="description" [(ngModel)]="plannerDto.description" type="text" placeholder="Planner description"></textarea> 11 </mat-form-field> 12 </div> 13 <div mat-dialog-actions> 14 15 <button mat-button type="submit" [disabled]="!f.form.valid" >Save</button> 16 </div> 17 </form> 18 19 <button mat-button (click)="onCancelClick()">Cancel</button> -
trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts
r188ee53 r6a80231 1 import { ResourceLoader } from '@angular/compiler'; 2 import { Route } from '@angular/compiler/src/core'; 1 3 import { Component, Inject, OnInit } from '@angular/core'; 4 import { NgForm } from '@angular/forms'; 2 5 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; 6 import { ActivatedRoute, Params, Router } from '@angular/router'; 7 import { PlannerDto } from '../_models/dto/plannerDto'; 8 import { Planner } from '../_models/planner'; 9 import { PlannerService } from '../_services/planner.service'; 3 10 4 11 @Component({ … … 9 16 export class CreateInitialPlannerComponent implements OnInit { 10 17 11 constructor( 12 public dialogRef: MatDialogRef<CreateInitialPlannerComponent>) {} 18 planner: Planner; 19 planners: Planner[]; 20 locations : Location[]; 21 plannerDto: PlannerDto; 22 23 constructor(public dialogRef: MatDialogRef<CreateInitialPlannerComponent>, 24 private plannerService : PlannerService, private router : Router) { 25 this.planner = new Planner; 26 this.planners = []; 27 this.locations = []; 28 this.plannerDto = new PlannerDto(); 29 } 13 30 14 31 ngOnInit(): void { 32 this.planner = new Planner(); 33 this.plannerDto = new PlannerDto(); 15 34 } 16 35 … … 18 37 this.dialogRef.close(); 19 38 } 39 40 onFormSubmitPlanner(form: NgForm){ 41 console.log(this.planner); 42 this.plannerService.postInitialPlanner(this.plannerDto).subscribe( 43 data=>{ 44 console.log(data); 45 this.router.navigate(['planner']); 46 }, 47 error => console.log('oops', error) 48 ); 49 window.location.reload(); 50 } 51 20 52 21 53 } -
trip-planner-front/src/app/locations-form/locations-form.component.css
r188ee53 r6a80231 19 19 } 20 20 21 . colorClass{22 color:yellow;21 .yellow{ 22 background-color:yellow; 23 23 } -
trip-planner-front/src/app/locations-form/locations-form.component.html
r188ee53 r6a80231 67 67 68 68 <h5>What are your priorities to visit?</h5> 69 <mat-chip-list selectable multiple >69 <mat-chip-list selectable multiple > 70 70 <mat-chip #c="matChip" selected *ngFor="let category of categories" 71 (click)="toggleSelection(c, category)" >71 (click)="toggleSelection(c, category)" [ngClass]="{'yellow' : toggle}"> 72 72 <mat-icon *ngIf="!c.selected" >check</mat-icon> 73 73 {{category.name}} -
trip-planner-front/src/app/locations-form/locations-form.component.ts
r188ee53 r6a80231 1 1 import { Component, Injectable, OnInit } from '@angular/core'; 2 import { FormControl } from '@angular/forms';2 import { FormControl, NgForm } from '@angular/forms'; 3 3 import {map, startWith, switchMap} from 'rxjs/operators'; 4 4 import {forkJoin, Observable} from 'rxjs'; … … 42 42 value:number; 43 43 max: number; 44 toggle = true; 45 status = 'Enable'; 44 46 45 47 constructor(private cityService : CityService, private regionService: RegionService, … … 109 111 toggleSelection(chip: MatChip, category: Category){ 110 112 chip.toggleSelected(); 113 111 114 if(this.chipsSeletion.length > 0){ 112 115 if(this.chipsSeletion.indexOf(category.id) <= -1){ … … 141 144 ); 142 145 } 143 144 145 146 } 147 146 148 chooseCityOption(){ 147 149 this.cityOption = true; … … 158 160 } 159 161 } 162 160 163 } -
trip-planner-front/src/app/planner/planner.component.css
r188ee53 r6a80231 1 .example-card { 2 3 } 1 mat-card { 2 width: 280px; 3 height: 160px; 4 5 } 6 .example-card button { 7 box-shadow:none !important; 8 cursor:pointer; 9 } -
trip-planner-front/src/app/planner/planner.component.html
r188ee53 r6a80231 1 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 1 2 2 3 <button mat-raised-button (click)="openDialog()">Create initial planner</button> 3 4 4 <mat-grid-list cols="4" rowHeight="250px">5 <mat-grid-tile *ngFor="let planner of planners" 6 <mat-card class=" example-card">5 <mat-grid-list cols="4" > 6 <mat-grid-tile *ngFor="let planner of planners"> 7 <mat-card class="d-flex flex-column"> 7 8 <mat-card-title>{{planner.name}}</mat-card-title> 8 9 <mat-card-content> 9 10 {{planner.description}} 10 11 </mat-card-content> 11 <mat-card-actions >12 <button mat-raised-button color="primary" >12 <mat-card-actions class="mt-auto"> 13 <button mat-raised-button color="primary" (click)="onClickEditPlanner(planner.id)"> 13 14 <mat-icon>edit</mat-icon> Edit 14 15 </button> -
trip-planner-front/src/app/planner/planner.component.ts
r188ee53 r6a80231 4 4 import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; 5 5 import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component'; 6 import { Router } from '@angular/router'; 6 7 7 8 … … 14 15 15 16 planners: Planner[]; 16 constructor(private plannerService: PlannerService, public dialog: MatDialog) { 17 plannerId: number; 18 19 constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router) { 17 20 this.planners = []; 21 this.plannerId = 1; 18 22 }; 19 23 … … 33 37 } 34 38 39 onClickEditPlanner(id: number){ 40 console.log(id); 41 42 43 this.router.navigate(['edit/planner/', this.plannerId]) 44 45 } 35 46 }
Note:
See TracChangeset
for help on using the changeset viewer.