Ignore:
Timestamp:
11/02/21 22:14:57 (3 years ago)
Author:
Ema <ema_spirova@…>
Branches:
master
Children:
6c1585f
Parents:
188ee53
Message:

create initial planner and routing with angular

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  
    66    constructor(){
    77        this.id = 1;
    8         this.name = 'Planner name';
    9         this.description = 'Planner description';
     8        this.name = '';
     9        this.description = '';
    1010    }
    1111}

  • trip-planner-front/src/app/_services/planner.service.ts

    r188ee53 r6a80231  
    1 import { HttpClient } from "@angular/common/http";
     1import { HttpClient, HttpHeaders } from "@angular/common/http";
    22import { Injectable } from "@angular/core";
    33import { Observable } from "rxjs";
     4import { PlannerDto } from "../_models/dto/plannerDto";
    45import { Planner } from "../_models/planner";
    56
    … …  
    1415        return this.httpClient.get<Planner[]>(url);
    1516    }
     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    }
    1627}

  • trip-planner-front/src/app/app-routing.module.ts

    r188ee53 r6a80231  
    11import { NgModule } from '@angular/core';
    22import { RouterModule, Routes } from '@angular/router';
     3import { LocationsFormComponent } from './locations-form/locations-form.component';
     4import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
     5import { PlannerComponent } from './planner/planner.component';
    36
    4 const routes: Routes = [];
     7const routes: Routes = [
     8  {path: 'planners', component: PlannerComponent},
     9  {path: 'form', component: LocationsFormComponent},
     10  {path: 'edit/planner/:id', component: EditPlannerComponent}
     11];
    512
    613@NgModule({

  • trip-planner-front/src/app/app.component.html

    r188ee53 r6a80231  
    11
    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  
    2626import { MatFormFieldModule } from '@angular/material/form-field';
    2727import {MatAutocompleteModule} from '@angular/material/autocomplete';
     28import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
     29import { DetailPlannerComponent } from './planner/detail-planner/detail-planner.component';
    2830
    2931@NgModule({
    … …  
    3335    LocationComponent,
    3436    CreateInitialPlannerComponent,
    35     LocationsFormComponent
    36   ],
     37    LocationsFormComponent,
     38    EditPlannerComponent,
     39    DetailPlannerComponent
     40    ],
    3741  imports: [
    3842    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  
     1import { ResourceLoader } from '@angular/compiler';
     2import { Route } from '@angular/compiler/src/core';
    13import { Component, Inject, OnInit } from '@angular/core';
     4import { NgForm } from '@angular/forms';
    25import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
     6import { ActivatedRoute, Params, Router } from '@angular/router';
     7import { PlannerDto } from '../_models/dto/plannerDto';
     8import { Planner } from '../_models/planner';
     9import { PlannerService } from '../_services/planner.service';
    310
    411@Component({
    … …  
    916export class CreateInitialPlannerComponent implements OnInit {
    1017
    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              }
    1330
    1431  ngOnInit(): void {
     32    this.planner = new Planner();
     33    this.plannerDto = new PlannerDto();
    1534  }
    1635
    … …  
    1837    this.dialogRef.close();
    1938  }
     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
    2052
    2153}

  • trip-planner-front/src/app/locations-form/locations-form.component.css

    r188ee53 r6a80231  
    1919}
    2020
    21 .colorClass{
    22   color:yellow;
     21.yellow{
     22  background-color:yellow;
    2323}

  • trip-planner-front/src/app/locations-form/locations-form.component.html

    r188ee53 r6a80231  
    6767
    6868   <h5>What are your priorities to visit?</h5>
    69   <mat-chip-list  selectable multiple>
     69  <mat-chip-list  selectable multiple >
    7070    <mat-chip #c="matChip" selected *ngFor="let category of categories"
    71     (click)="toggleSelection(c, category)">
     71    (click)="toggleSelection(c, category)" [ngClass]="{'yellow' : toggle}">
    7272  <mat-icon *ngIf="!c.selected" >check</mat-icon>
    7373  {{category.name}}

  • trip-planner-front/src/app/locations-form/locations-form.component.ts

    r188ee53 r6a80231  
    11import { Component, Injectable, OnInit } from '@angular/core';
    2 import { FormControl } from '@angular/forms';
     2import { FormControl, NgForm } from '@angular/forms';
    33import {map, startWith, switchMap} from 'rxjs/operators';
    44import {forkJoin, Observable} from 'rxjs';
    … …  
    4242  value:number;
    4343  max: number;
     44  toggle = true;
     45  status = 'Enable';
    4446
    4547  constructor(private cityService : CityService, private regionService: RegionService,
    … …  
    109111 toggleSelection(chip: MatChip, category: Category){
    110112  chip.toggleSelected();
     113 
    111114  if(this.chipsSeletion.length > 0){
    112115    if(this.chipsSeletion.indexOf(category.id) <= -1){
    … …  
    141144    );
    142145   }
    143    
    144  
    145146 }
     147 
    146148 chooseCityOption(){
    147149   this.cityOption = true;
    … …  
    158160     }
    159161  }
     162
    160163}

  • trip-planner-front/src/app/planner/planner.component.css

    r188ee53 r6a80231  
    1 .example-card {
    2    
    3   }
     1mat-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">
    12
    23<button mat-raised-button (click)="openDialog()">Create initial planner</button>
    34
    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">
    78        <mat-card-title>{{planner.name}}</mat-card-title>
    89        <mat-card-content>
    910          {{planner.description}}
    1011        </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)">
    1314            <mat-icon>edit</mat-icon> Edit
    1415          </button>

  • trip-planner-front/src/app/planner/planner.component.ts

    r188ee53 r6a80231  
    44import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
    55import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
     6import { Router } from '@angular/router';
    67
    78
    … …  
    1415
    1516  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) {
    1720    this.planners = [];
     21    this.plannerId = 1;
    1822  };
    1923 
    … …  
    3337  }
    3438 
     39  onClickEditPlanner(id: number){
     40    console.log(id);
     41   
     42         
     43          this.router.navigate(['edit/planner/', this.plannerId])
     44   
     45  }
    3546}
Note: See TracChangeset for help on using the changeset viewer.