Changeset bdd6491 for trip-planner-front


Ignore:
Timestamp:
12/28/21 08:56:55 (3 years ago)
Author:
Ema <ema_spirova@…>
Branches:
master
Children:
b738035
Parents:
84d0fbb
Message:

pre final presentation

Location:
trip-planner-front
Files:
10 added
15 edited

Legend:

Unmodified
Added
Removed

  • trip-planner-front/src/app/_models/location.ts

    r84d0fbb rbdd6491  
    88    priority: string;
    99    duration: number;
     10    trivia: string;
    1011    photo: any[];
    1112
    … …  
    1718        this.priority = 'Location priority';
    1819        this.duration = 1;
     20        this.trivia = '';
    1921        this.photo = [];
    2022    }

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

    r84d0fbb rbdd6491  
    1111
    1212    httpHeaders: HttpHeaders = new HttpHeaders({
    13         'Authorization': ''+sessionStorage.getItem("token"),
     13        'Authorization': '' + sessionStorage.getItem("token"),
    1414        'Accept': 'application/json',
    1515        'Content-Type': 'application/json'
    16       });
    17      
     16    });
    1817
    19     constructor(private httpClient: HttpClient){
     18
     19    constructor(private httpClient: HttpClient) {
    2020    }
    2121
    22    
    23     getAllPlanners():Observable<Planner[]>{
     22
     23    getAllPlanners(): Observable<Planner[]> {
    2424        let url = "http://localhost:8080/api/planners/user";
    2525        console.log("SERVID: " + sessionStorage.getItem("token"));
    26         console.log(this.httpHeaders.get('Authorization'))  ;
    27         return this.httpClient.get<Planner[]>(url, {headers: this.httpHeaders});     
     26        console.log(this.httpHeaders.get('Authorization'));
     27        return this.httpClient.get<Planner[]>(url, { headers: this.httpHeaders });
    2828    }
    2929
    30     postInitialPlanner(planner: Planner): Observable<Planner>{     
     30    postInitialPlanner(plannerDto: PlannerDto): Observable<Planner> {
    3131        let url = "http://localhost:8080/api/planner/new";
    32         return this.httpClient.post<Planner>(url, planner);
     32        return this.httpClient.post<Planner>(url, plannerDto);
    3333    }
    3434
    35     updatePlanner(id: number, plannerDto : PlannerDto):Observable<Planner>{   
    36     let url = "http://localhost:8080/api/edit/planner/" + id;
    37     return this.httpClient.put<Planner>(url, plannerDto, {headers: this.httpHeaders});
     35    updatePlanner(id: number, plannerDto: PlannerDto): Observable<Planner> {
     36        let url = "http://localhost:8080/api/edit/planner/" + id;
     37        return this.httpClient.put<Planner>(url, plannerDto, { headers: this.httpHeaders });
    3838    }
    3939
    40     getPlannerById(id:number):Observable<Planner>{
     40    getPlannerById(id: number): Observable<Planner> {
    4141        let url = "http://localhost:8080/api/planner/" + id;
    4242        return this.httpClient.get<Planner>(url);
    4343    }
    4444
    45 
     45    deletePlannerById(id: number): Observable<Planner> {
     46        let url = "http://localhost:8080/api/delete/" + id;
     47        return this.httpClient.delete<Planner>(url, { headers: this.httpHeaders });
     48    }
    4649}

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

    r84d0fbb rbdd6491  
    88
    99@Injectable({
    10     providedIn: 'root'
     10  providedIn: 'root'
    1111})
    12 export class UserService{
     12export class UserService {
    1313
    14      headers = new HttpHeaders({
    15         'Content-Type': 'application/json',
    16         'Access-Control-Allow-Headers': 'Content-Type',
     14  headers = new HttpHeaders({
     15    'Content-Type': 'application/json',
     16    'Access-Control-Allow-Headers': 'Content-Type',
    1717
    18       });
    19    
    20     constructor(private httpClient: HttpClient){
     18  });
    2119
    22     }
     20  constructor(private httpClient: HttpClient) {
    2321
    24     registerUser(user : UserDto) : Observable<User>{
    25         let url = "http://localhost:8080/api/users/register";
    26         var reqHeader = new HttpHeaders({'No-Auth' : 'True'});
    27         return this.httpClient.post<User>(url, user, { headers: reqHeader });
    28     }
    29    
    30     authenticateUser(loginResult : LoginRequest) {
    31         let url = "http://localhost:8080/api/users/login";
    32         var reqHeader = new HttpHeaders({'Content-Type': 'application/json'});
    33         return this.httpClient.post<any>(url, loginResult)
    34         .pipe(
    35             map(userData => {
    36                 sessionStorage.setItem("username", loginResult.username);
    37                 let tokenStr = userData.token;
    38                 sessionStorage.setItem("token", tokenStr);
    39                 return userData;
    40             })
    41         );
    42     }
    43  
    44       isUserLoggedIn() {
    45         let user = sessionStorage.getItem("username");
    46         let token = sessionStorage.getItem("token");
    47         console.log(user);
    48         console.log(token);
    49         console.log(!(user === null));
    50         return !(user === null);
    51       }
    52    
     22  }
     23
     24  registerUser(user: UserDto): Observable<User> {
     25    let url = "http://localhost:8080/api/users/register";
     26    return this.httpClient.post<User>(url, user, { headers: this.headers });
     27  }
     28
     29  authenticateUser(loginResult: LoginRequest) {
     30    let url = "http://localhost:8080/api/users/login";
     31    return this.httpClient.post<any>(url, loginResult)
     32      .pipe(
     33        map(userData => {
     34          sessionStorage.setItem("username", loginResult.username);
     35          let tokenStr = userData.token;
     36          sessionStorage.setItem("token", tokenStr);
     37          return userData;
     38        })
     39      );
     40  }
     41
     42  isUserLoggedIn() {
     43    let user = sessionStorage.getItem("username");
     44    let token = sessionStorage.getItem("token");
     45    console.log(user);
     46    console.log(token);
     47    console.log(!(user === null));
     48    return !(user === null);
     49  }
     50
    5351}

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

    r84d0fbb rbdd6491  
    4343import { InputTextModule } from 'primeng/inputtext';
    4444import { RippleModule } from 'primeng/ripple';
    45 import {PaginatorModule} from 'primeng/paginator';
    46 import {CardModule} from 'primeng/card';
     45import { PaginatorModule } from 'primeng/paginator';
     46import { CardModule } from 'primeng/card';
    4747import { RegisterComponent } from './homepage/register/register.component';
    4848import { LoginComponent } from './homepage/login/login.component';
    4949import { AuthGuard } from './auth/auth.guard';
    5050import { AuthInterceptor } from './auth/auth.interceptor';
     51
    5152
    5253@NgModule({
    … …  
    111112    PlannerService,
    112113    {
    113       provide: MatDialogRef, 
    114       useValue: {}, 
    115    
     114      provide: MatDialogRef,
     115      useValue: {},
     116
    116117    },
    117118    {
    … …  
    125126    AuthGuard
    126127  ],
    127  
     128
    128129  entryComponents: [
    129130    AddLocationToPlannerPanelComponent

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

    r84d0fbb rbdd6491  
    22    <p>Planner name</p>
    33    <mat-form-field appearance="fill">
    4       <input matInput required type="text" [(ngModel)]="planner.name" name="name" placeholder="Planner name">
     4      <input matInput  type="text" [(ngModel)]="plannerDto.name" name="plannerName" placeholder="Planner name">
     5     
    56    </mat-form-field>
    67    <p>Planner description</p>
    78    <mat-form-field appearance="fill">
    8       <textarea matInput required name="description" [(ngModel)]="planner.description" type="text"
     9      <textarea matInput  name="description" [(ngModel)]="plannerDto.description" type="text"
    910        placeholder="Planner description"></textarea>
    1011    </mat-form-field>
    1112  </div>
    1213  <div mat-dialog-actions>
    13     <button pButton pRipple type="submit" label="Save"
    14       class="p-button-outlined p-button-rounded p-button-help" (click)="onFormSubmitPlanner(planner)"></button>
     14    <button pButton pRipple type="button" label="Save"
     15      class="p-button-outlined p-button-rounded p-button-help" (click)="onFormSubmitPlanner(plannerDto)"></button>
    1516  </div>
     17
     18 

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

    r84d0fbb rbdd6491  
     1import { PlatformModule } from '@angular/cdk/platform';
    12import { Component, OnInit } from '@angular/core';
    23import { DynamicDialogRef } from 'primeng/dynamicdialog';
    … …  
    1112export class CreateInitialPlannerComponent implements OnInit {
    1213
    13   planner: Planner;
     14  plannerDto: PlannerDto;
    1415
    1516  constructor( private ref: DynamicDialogRef) {
    16                 this.planner = new Planner;
     17                this.plannerDto = new PlannerDto();
    1718              }
    1819
    1920  ngOnInit(): void {
    20     this.planner = new Planner();
     21    this.plannerDto = new Planner();
    2122  }
    2223
    23   onFormSubmitPlanner(planner){
    24     this.ref.close(planner);
     24  onFormSubmitPlanner(plannerDto){
     25    this.ref.close(plannerDto);
    2526    window.location.reload();
    2627  }

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

    r84d0fbb rbdd6491  
    1313  <header>
    1414    <nav class="navbar navbar-expand-sm bg-light">
    15       <img src={{myLogo}} />
    1615      <strong class="navbar-brand">Trivia Trip</strong>
    1716
    … …  
    3029    <img src={{imageURI}} />
    3130    <h4></h4>
    32 <!--
    33   <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
     31
     32    <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
    3433      <div class="card">
    3534        <p-carousel [value]="locations" [numVisible]="3" [numScroll]="3" [circular]="false"
    … …  
    9190      </div>
    9291    </div>
    93 -->
    94  
     92
    9593  </main>
    96 <br>
     94  <br>
    9795
    9896  <footer class="bg-dark text-center text-white">
    … …  
    102100      <section class="mb-4">
    103101        <!-- Facebook -->
    104         <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
    105           ><i class="fab fa-facebook-f"></i
    106         ></a>
    107  
     102        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-facebook-f"></i></a>
     103
    108104        <!-- Twitter -->
    109         <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
    110           ><i class="fab fa-twitter"></i
    111         ></a>
    112  
     105        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-twitter"></i></a>
     106
    113107        <!-- Google -->
    114         <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
    115           ><i class="fab fa-google"></i
    116         ></a>
    117  
     108        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-google"></i></a>
     109
    118110        <!-- Instagram -->
    119         <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
    120           ><i class="fab fa-instagram"></i
    121         ></a>
    122  
     111        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-instagram"></i></a>
     112
    123113        <!-- Linkedin -->
    124         <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
    125           ><i class="fab fa-linkedin-in"></i
    126         ></a>
    127  
     114        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a>
     115
    128116        <!-- Github -->
    129         <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
    130           ><i class="fab fa-github"></i
    131         ></a>
     117        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-github"></i></a>
    132118      </section>
    133119      <!-- Section: Social media -->
    134  
     120
    135121      <!-- Section: Form -->
    136122      <section class="">
    … …  
    145131            </div>
    146132            <!--Grid column-->
    147  
     133
    148134            <!--Grid column-->
    149135            <div class="col-md-5 col-12">
    … …  
    155141            </div>
    156142            <!--Grid column-->
    157  
     143
    158144            <!--Grid column-->
    159145            <div class="col-auto">
    … …  
    169155      </section>
    170156      <!-- Section: Form -->
    171  
     157
    172158      <!-- Section: Text -->
    173159      <section class="mb-4">
    … …  
    179165      </section>
    180166      <!-- Section: Text -->
    181  
     167
    182168      <!-- Section: Links -->
    183169      <section class="">
    … …  
    187173          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
    188174            <h5 class="text-uppercase">Links</h5>
    189  
    190             <ul class="list-unstyled mb-0">
    191               <li>
    192                 <a href="#!" class="text-white">Link 1</a>
    193               </li>
    194               <li>
    195                 <a href="#!" class="text-white">Link 2</a>
    196               </li>
    197               <li>
    198                 <a href="#!" class="text-white">Link 3</a>
    199               </li>
    200               <li>
    201                 <a href="#!" class="text-white">Link 4</a>
    202               </li>
    203             </ul>
    204           </div>
    205           <!--Grid column-->
    206  
    207           <!--Grid column-->
    208           <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
    209             <h5 class="text-uppercase">Links</h5>
    210  
    211             <ul class="list-unstyled mb-0">
    212               <li>
    213                 <a href="#!" class="text-white">Link 1</a>
    214               </li>
    215               <li>
    216                 <a href="#!" class="text-white">Link 2</a>
    217               </li>
    218               <li>
    219                 <a href="#!" class="text-white">Link 3</a>
    220               </li>
    221               <li>
    222                 <a href="#!" class="text-white">Link 4</a>
    223               </li>
    224             </ul>
    225           </div>
    226           <!--Grid column-->
    227  
    228           <!--Grid column-->
    229           <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
    230             <h5 class="text-uppercase">Links</h5>
    231  
    232             <ul class="list-unstyled mb-0">
    233               <li>
    234                 <a href="#!" class="text-white">Link 1</a>
    235               </li>
    236               <li>
    237                 <a href="#!" class="text-white">Link 2</a>
    238               </li>
    239               <li>
    240                 <a href="#!" class="text-white">Link 3</a>
    241               </li>
    242               <li>
    243                 <a href="#!" class="text-white">Link 4</a>
    244               </li>
    245             </ul>
    246           </div>
    247           <!--Grid column-->
    248  
    249           <!--Grid column-->
    250           <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
    251             <h5 class="text-uppercase">Links</h5>
    252  
     175
     176            <ul class="list-unstyled mb-0">
     177              <li>
     178                <a href="#!" class="text-white">Link 1</a>
     179              </li>
     180              <li>
     181                <a href="#!" class="text-white">Link 2</a>
     182              </li>
     183              <li>
     184                <a href="#!" class="text-white">Link 3</a>
     185              </li>
     186              <li>
     187                <a href="#!" class="text-white">Link 4</a>
     188              </li>
     189            </ul>
     190          </div>
     191          <!--Grid column-->
     192
     193          <!--Grid column-->
     194          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
     195            <h5 class="text-uppercase">Links</h5>
     196
     197            <ul class="list-unstyled mb-0">
     198              <li>
     199                <a href="#!" class="text-white">Link 1</a>
     200              </li>
     201              <li>
     202                <a href="#!" class="text-white">Link 2</a>
     203              </li>
     204              <li>
     205                <a href="#!" class="text-white">Link 3</a>
     206              </li>
     207              <li>
     208                <a href="#!" class="text-white">Link 4</a>
     209              </li>
     210            </ul>
     211          </div>
     212          <!--Grid column-->
     213
     214          <!--Grid column-->
     215          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
     216            <h5 class="text-uppercase">Links</h5>
     217
     218            <ul class="list-unstyled mb-0">
     219              <li>
     220                <a href="#!" class="text-white">Link 1</a>
     221              </li>
     222              <li>
     223                <a href="#!" class="text-white">Link 2</a>
     224              </li>
     225              <li>
     226                <a href="#!" class="text-white">Link 3</a>
     227              </li>
     228              <li>
     229                <a href="#!" class="text-white">Link 4</a>
     230              </li>
     231            </ul>
     232          </div>
     233          <!--Grid column-->
     234
     235          <!--Grid column-->
     236          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
     237            <h5 class="text-uppercase">Links</h5>
     238
    253239            <ul class="list-unstyled mb-0">
    254240              <li>
    … …  
    273259    </div>
    274260    <!-- Grid container -->
    275  
     261
    276262    <!-- Copyright -->
    277263    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">

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

    r84d0fbb rbdd6491  
     1import { HttpErrorResponse } from '@angular/common/http';
    12import { Component, OnInit } from '@angular/core';
    23import { Router } from '@angular/router';
    … …  
    5051
    5152   ngOnInit(): void {
    52 /*
    5353      this.locationService.getWeekendGetaways().subscribe(
    5454         data => {
    … …  
    6161         }
    6262      );
    63       */
     63
    6464   }
    6565
    … …  
    7373
    7474      this.ref.onClose.subscribe((user: UserDto) => {
    75          this.userService.registerUser(user).subscribe(
    76             data  => {
    77                console.log(data);
    78              
    79             }
    80          );
    81       });
     75         if (user) {
     76            this.userService.registerUser(user).subscribe(
     77               data => {
     78                  console.log(data);
     79               }
     80            );
     81         }
     82      },
     83         err => {
     84
     85         });
    8286   }
    8387
    84    
     88
    8589   onClickLogIn() {
    8690      this.ref = this.dialogService.open(LoginComponent, {
    … …  
    9094         baseZIndex: 10000
    9195      });
    92       this.ref.onClose.subscribe((loginRequest : LoginRequest) => {
    93          this.userService.authenticateUser(loginRequest).subscribe(
    94             (data : any)  => {
    95                console.log(data);
    96                if(this.userService.isUserLoggedIn()){
    97                   this.router.navigate(['planners']);
     96      this.ref.onClose.subscribe((loginRequest: LoginRequest) => {
     97         if (loginRequest) {
     98            this.userService.authenticateUser(loginRequest).subscribe(
     99               (data: any) => {
     100                  console.log(data);
     101                  if (this.userService.isUserLoggedIn()) {
     102                     this.router.navigate(['planners']);
     103                  }
    98104               }
    99             }
    100          );
     105            );
     106         }
    101107      });
    102108   }
     109
     110   ngOnDestroy() {
     111      if (this.ref) {
     112         this.ref.close();
     113      }
     114   }
    103115}

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

    r84d0fbb rbdd6491  
     1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
     2    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    13
    2     <div class="p-grid p-fluid">
    3         <div class="p-col-12 p-md-4">
    4             <div class="p-inputgroup">
    5                 <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
    6                 <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"
    7             >         
    8             </div>
     4<div class="p-grid p-fluid">
     5    <div class="p-col-12 p-md-4">
     6        <div class="p-inputgroup">
     7            <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
     8            <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"
     9                class="form-control">
     10
    911        </div>
    10    
    11         <div class="p-col-12 p-md-4">
    12             <div class="p-inputgroup">
    13                 <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
    14                 <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username" name="username"
    15               >         
    16             </div>
     12    </div>
     13
     14    <div class="p-col-12 p-md-4">
     15        <div class="p-inputgroup">
     16            <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
     17            <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username"
     18                name="username">
    1719        </div>
    18         <div class="p-col-12 p-md-4">
    19             <div class="p-inputgroup">
    20                 <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
    21                 <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password"
    22                 >         
    23             </div>
     20    </div>
     21
     22    <div class="p-col-12 p-md-4">
     23        <div class="p-inputgroup">
     24            <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
     25            <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password">
    2426        </div>
    25         <div class="p-col-12 p-md-4">
    26             <div class="p-inputgroup">
    27                 <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
    28                 <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword" name="confirmPassword"
    29                 >         
    30             </div>
     27    </div>
     28
     29    <div class="p-col-12 p-md-4">
     30        <div class="p-inputgroup">
     31            <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
     32            <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword"
     33                name="confirmPassword">
    3134        </div>
    32    
    33         <div class="p-col-12 p-md-4">
    34             <button pButton pRipple label="Submit" class="p-button-secondary" type="submit" (click)="onFormSubmitSignUp(user)"></button>
    35         </div>
    36     </div> 
     35    </div>
     36
     37    <div class="p-col-12 p-md-4">
     38        <button pButton pRipple label="Submit" class="p-button-secondary" type="button"
     39            (click)="onFormSubmitSignUp(user)"></button>
     40    </div>
     41</div>
     42
     43

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

    r84d0fbb rbdd6491  
    11import { Component, OnInit } from '@angular/core';
     2import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    23import { DynamicDialogRef } from 'primeng/dynamicdialog';
    34import { UserDto } from 'src/app/_models/dto/userDto';
    … …  
    1011export class RegisterComponent implements OnInit {
    1112
    12   user : UserDto;
     13  user: UserDto;
     14  myForm: FormGroup;
    1315
    14   constructor(private ref: DynamicDialogRef) {
     16  constructor(private ref: DynamicDialogRef, private fb: FormBuilder) {
    1517    this.user = new UserDto();
    16    }
     18    this.myForm = fb.group({
     19      title: fb.control('initial value', Validators.required)
     20    });
     21  }
    1722
    1823  ngOnInit(): void {
     24    this.myForm = this.fb.group({
     25      fullName: this.fb.control('', Validators.required),
     26      username: this.fb.control('', Validators.required),
     27      password: this.fb.control('', Validators.required),
     28      confirmPassword: this.fb.control('', Validators.required)
     29    });
    1930  }
    20  
    21   onFormSubmitSignUp(user){
     31
     32  onFormSubmitSignUp(user) {
    2233    this.ref.close(user);
    2334    //window.location.reload();
     35
    2436  }
     37
    2538}

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

    r84d0fbb rbdd6491  
    9393
    9494    this.ref.onClose.subscribe((planner: Planner) => {
     95      if(planner){
    9596      this.plannerLocationDto.locationId = location.id;
    9697      this.plannerLocationDto.plannerId = planner.id;
    … …  
    124125        }
    125126      );
     127      }
    126128    });
     129 
    127130  }
    128131

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

    r84d0fbb rbdd6491  
    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<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
     2    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    23
    34<h3>Here you can edit your planner</h3>
    45
    5 <form [formGroup] = "form" (ngSubmit)="onSubmit()">
     6<form [formGroup]="form" (ngSubmit)="onSubmit()">
    67    <div class="form-gorup">
    78        <p>Planner name</p>
    89        <mat-form-field appearance="fill">
    9           <input matInput required type="text" formControlName="name" placeholder="Planner name">
     10            <input matInput required type="text" formControlName="name" placeholder="Planner name">
    1011        </mat-form-field>
    1112        <p>Planner description</p>
    1213        <mat-form-field appearance="fill">
    13           <textarea matInput required formControlName="description"  type="text" placeholder="Planner description"></textarea>
     14            <textarea matInput required formControlName="description" type="text"
     15                placeholder="Planner description"></textarea>
    1416        </mat-form-field>
    1517    </div>
    16     <div class="container mb-4" >
     18    <div class="container mb-4">
    1719        <div class="row">
    1820            <div class="col-12">
    … …  
    2022                    <table class="table table-striped">
    2123                        <thead>
    22                         <tr>
    23                             <th scope="col">Location name</th>
    24                         </tr>
     24                            <tr>
     25                                <th scope="col">Location name</th>
     26                            </tr>
    2527                        </thead>
    2628                        <tbody>
    27                         <tr>                           
    28                             <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
    29                                  Add locations
    30                                  </button>
    31                             </td>
    32                         </tr>
    33                         <tr *ngFor ="let location of locations">
    34                             <td>
    35                                 {{location.name}}
    36                             </td>
    37                         </tr>
     29                            <tr>
     30                                <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
     31                                        Add locations
     32                                    </button>
     33                                </td>
     34                            </tr>
     35                            <tr *ngFor="let location of locations">
     36                                <td>
     37                                    {{location.name}}
     38                                </td>
     39                                <td>
     40                                    <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button>
     41                                </td>
     42                            </tr>
    3843                        </tbody>
    3944                    </table>
    … …  
    4449    <button pButton pRipplelabel label="Save" class="p-button-help"></button>
    4550</form>
    46 <button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()" [style]="{'margin-left': '.11em'}"></button>
     51<button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()"
     52    [style]="{'margin-left': '.11em'}"></button>

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

    r84d0fbb rbdd6491  
    2424
    2525  constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private plannerService: PlannerService,
    26     private locationService : LocationService) {
     26    private locationService: LocationService) {
    2727    this.planner = new Planner();
    2828    this.planners = [];
    … …  
    5050    this.locationService.getLocationsForPlanner(this.id).subscribe(
    5151      data => {
    52           this.locations = data;
     52        this.locations = data;
    5353      }
    5454    );
    55     }
    56  
     55  }
     56
    5757  onSubmit() {
    5858    this.updatePlanner();
    … …  
    7777  }
    7878
    79   onClickBack(){
     79  onClickBack() {
    8080    this.router.navigate(['planners']);
    8181  }
     82
     83  onClickRemoveLocation(id : number){
     84   
     85  }
    8286}

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

    r84d0fbb rbdd6491  
    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<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
     2  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    23
    34<p-toast></p-toast>
    4 <button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
     5
     6
     7<nav class="navbar navbar-light bg-light justify-content-between">
     8  <button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
     9  <form class="form-inline">
     10    <span>Hello, {{userDisplayName}}</span>
     11    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="onClickLogout()">Log out</button>
     12  </form>
     13</nav>
     14
     15
    516<br>
    617<br>
    718<p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">
    8  
     19
    920  <ng-template pTemplate="body" let-planner>
    10       <td >
    11         <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}" styleClass="p-card-shadow">
    12           <ng-template pTemplate="header">
    13           </ng-template>
    14           <p>{{planner.description}}</p>
    15           <ng-template pTemplate="footer">
    16               <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help" (click)="onClickEditPlannerGet(planner.id)"></button>
    17               <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" label="Delete" [style]="{'margin-left': '.5em'}"></button>
    18             </ng-template>
    19         </p-card>
    20       </td>
     21    <td>
     22      <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}"
     23        styleClass="p-card-shadow">
     24        <ng-template pTemplate="header">
     25        </ng-template>
     26        <p>{{planner.description}}</p>
     27        <ng-template pTemplate="footer">
     28          <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help"
     29            (click)="onClickEditPlannerGet(planner.id)"></button>
     30          <button pButton pRipple type="button" icon="pi pi-times"
     31            class="p-button-rounded p-button-danger p-button-outlined" label="Delete"
     32            [style]="{'margin-left': '.5em'}" (click)="onDeletePlanner(planner.id)"></button>
     33        </ng-template>
     34      </p-card>
     35    </td>
    2136  </ng-template>
    2237</p-table>
    23 
    24 

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

    r84d0fbb rbdd6491  
    88import { MessageService, PrimeNGConfig } from 'primeng/api';
    99import { UserDto } from '../_models/dto/userDto';
    10 import { UserService } from '../_services/user.service';
    1110
    1211
    … …  
    2322  ref: DynamicDialogRef;
    2423  user: UserDto;
     24  userDisplayName = '';
     25  status = '';
    2526
    2627  constructor(private plannerService: PlannerService, private router: Router,
    27     private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService,
    28     private userService : UserService) {
     28    private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService) {
    2929    this.planners = [];
    3030    this.plannerDto = new PlannerDto();
    … …  
    3636
    3737    this.primengConfig.ripple = true;
    38 
     38    let name1: string = sessionStorage.getItem("username") as string;
     39    this.userDisplayName = name1;
    3940    this.plannerService.getAllPlanners().subscribe(
    4041      data => {
    4142        this.planners = data;
    42         localStorage.getItem("token");
    4343      }
    44     ); 
     44    );
    4545  }
    4646
    … …  
    6161      baseZIndex: 10000
    6262    });
    63     this.ref.onClose.subscribe((planner: Planner) => {
    64       console.log("NOVOKREIRANIOT NAME NA PLANNER: " + planner.name);
    65       this.plannerService.postInitialPlanner(planner).subscribe(
    66         data=>{
    67           console.log(data);
    68         },
    69         error => console.log('oops', error)
    70      );
    71       this.messageService.add({ severity: 'success', summary: 'The planner: ' + planner.name + ' has been created.' });
     63    this.ref.onClose.subscribe((plannerDto: PlannerDto) => {
     64      if (plannerDto) {
     65        console.log("NOVOKREIRANIOT NAME NA PLANNER: " + plannerDto.name);
     66        this.plannerService.postInitialPlanner(plannerDto).subscribe(
     67          data => {
     68            console.log(data);
     69          },
     70          error => console.log('oops', error)
     71        );
     72        this.messageService.add({ severity: 'success', summary: 'The planner: ' + plannerDto.name + ' has been created.' });
     73      }
     74     
    7275    });
    73    
     76
    7477  }
    7578
     79  ngOnDestroy() {
     80    if (this.ref) {
     81      this.ref.close();
     82    }
     83  }
     84
     85  onClickLogout() {
     86    sessionStorage.removeItem("token");
     87    console.log("SESSION HAS ENDED, THE USER IS LOGGED OUT" + sessionStorage.getItem("token"));
     88    this.router.navigate(['']);
     89  }
     90
     91  onDeletePlanner(id: number) {
     92    console.log("DELETE KOCHE: " + id);
     93    this.plannerService.deletePlannerById(id).subscribe(
     94      (data) => {
     95        console.log(data);
     96      },
     97      (error) => console.log('error', error)
     98    );
     99    window.location.reload();
     100  }
    76101}
Note: See TracChangeset for help on using the changeset viewer.