Changeset bdd6491 for trip-planner-front/src/app/planner

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/src/app/planner

Files:

• edit-planner/edit-planner.component.html (modified) (3 diffs)
• edit-planner/edit-planner.component.ts (modified) (3 diffs)
• planner.component.html (modified) (1 diff)
• planner.component.ts (modified) (4 diffs)

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

@@ -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">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
 <h3>Here you can edit your planner</h3>
 
-<form [formGroup] = "form" (ngSubmit)="onSubmit()">
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
     <div class="form-gorup">
         <p>Planner name</p>
         <mat-form-field appearance="fill">
-          <input matInput required type="text" formControlName="name"  placeholder="Planner name">
+            <input matInput required type="text" formControlName="name" placeholder="Planner name">
         </mat-form-field>
         <p>Planner description</p>
         <mat-form-field appearance="fill">
-          <textarea matInput required formControlName="description"  type="text" placeholder="Planner description"></textarea>
+            <textarea matInput required formControlName="description" type="text"
+                placeholder="Planner description"></textarea>
         </mat-form-field>
     </div>
-    <div class="container mb-4" >
+    <div class="container mb-4">
         <div class="row">
             <div class="col-12">
@@ -20 +22 @@
                     <table class="table table-striped">
                         <thead>
-                        <tr>
-                            <th scope="col">Location name</th>
-                        </tr>
+                            <tr>
+                                <th scope="col">Location name</th>
+                            </tr>
                         </thead>
                         <tbody>
-                        <tr>                           
-                            <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
-                                 Add locations
-                                 </button>
-                            </td>
-                        </tr>
-                        <tr *ngFor ="let location of locations">
-                            <td>
-                                {{location.name}}
-                            </td>
-                        </tr>
+                            <tr>
+                                <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
+                                        Add locations
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr *ngFor="let location of locations">
+                                <td>
+                                    {{location.name}}
+                                </td>
+                                <td>
+                                    <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button>
+                                </td>
+                            </tr>
                         </tbody>
                     </table>
@@ -44 +49 @@
     <button pButton pRipplelabel label="Save" class="p-button-help"></button>
 </form>
-<button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()" [style]="{'margin-left': '.11em'}"></button>
+<button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()"
+    [style]="{'margin-left': '.11em'}"></button>

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

@@ -24 +24 @@
 
   constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private plannerService: PlannerService,
-    private locationService : LocationService) {
+    private locationService: LocationService) {
     this.planner = new Planner();
     this.planners = [];
@@ -50 +50 @@
     this.locationService.getLocationsForPlanner(this.id).subscribe(
       data => {
-          this.locations = data;
+        this.locations = data;
       }
     );
-    }
- 
+  }
+
   onSubmit() {
     this.updatePlanner();
@@ -77 +77 @@
   }
 
-  onClickBack(){
+  onClickBack() {
     this.router.navigate(['planners']);
   }
+
+  onClickRemoveLocation(id : number){
+    
+  }
 }

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

@@ -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">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
 <p-toast></p-toast>
-<button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
+
+
+<nav class="navbar navbar-light bg-light justify-content-between">
+  <button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
+  <form class="form-inline">
+    <span>Hello, {{userDisplayName}}</span>
+    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="onClickLogout()">Log out</button>
+  </form>
+</nav>
+
+
 <br>
 <br>
 <p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">
-  
+
   <ng-template pTemplate="body" let-planner>
-      <td >
-        <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}" styleClass="p-card-shadow">
-          <ng-template pTemplate="header">
-          </ng-template>
-          <p>{{planner.description}}</p>
-          <ng-template pTemplate="footer">
-              <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help" (click)="onClickEditPlannerGet(planner.id)"></button>
-              <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>
-            </ng-template>
-        </p-card>
-      </td>
+    <td>
+      <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}"
+        styleClass="p-card-shadow">
+        <ng-template pTemplate="header">
+        </ng-template>
+        <p>{{planner.description}}</p>
+        <ng-template pTemplate="footer">
+          <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help"
+            (click)="onClickEditPlannerGet(planner.id)"></button>
+          <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'}" (click)="onDeletePlanner(planner.id)"></button>
+        </ng-template>
+      </p-card>
+    </td>
   </ng-template>
 </p-table>
-
-

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

@@ -8 +8 @@
 import { MessageService, PrimeNGConfig } from 'primeng/api';
 import { UserDto } from '../_models/dto/userDto';
-import { UserService } from '../_services/user.service';
 
 
@@ -23 +22 @@
   ref: DynamicDialogRef;
   user: UserDto;
+  userDisplayName = '';
+  status = '';
 
   constructor(private plannerService: PlannerService, private router: Router,
-    private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService,
-    private userService : UserService) {
+    private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService) {
     this.planners = [];
     this.plannerDto = new PlannerDto();
@@ -36 +36 @@
 
     this.primengConfig.ripple = true;
-
+    let name1: string = sessionStorage.getItem("username") as string;
+    this.userDisplayName = name1;
     this.plannerService.getAllPlanners().subscribe(
       data => {
         this.planners = data;
-        localStorage.getItem("token");
       }
-    ); 
+    );
   }
 
@@ -61 +61 @@
       baseZIndex: 10000
     });
-    this.ref.onClose.subscribe((planner: Planner) => {
-      console.log("NOVOKREIRANIOT NAME NA PLANNER: " + planner.name);
-      this.plannerService.postInitialPlanner(planner).subscribe(
-        data=>{
-          console.log(data);
-        },
-        error => console.log('oops', error)
-     );
-      this.messageService.add({ severity: 'success', summary: 'The planner: ' + planner.name + ' has been created.' });
+    this.ref.onClose.subscribe((plannerDto: PlannerDto) => {
+      if (plannerDto) {
+        console.log("NOVOKREIRANIOT NAME NA PLANNER: " + plannerDto.name);
+        this.plannerService.postInitialPlanner(plannerDto).subscribe(
+          data => {
+            console.log(data);
+          },
+          error => console.log('oops', error)
+        );
+        this.messageService.add({ severity: 'success', summary: 'The planner: ' + plannerDto.name + ' has been created.' });
+      }
+      
     });
-    
+
   }
 
+  ngOnDestroy() {
+    if (this.ref) {
+      this.ref.close();
+    }
+  }
+
+  onClickLogout() {
+    sessionStorage.removeItem("token");
+    console.log("SESSION HAS ENDED, THE USER IS LOGGED OUT" + sessionStorage.getItem("token"));
+    this.router.navigate(['']);
+  }
+
+  onDeletePlanner(id: number) {
+    console.log("DELETE KOCHE: " + id);
+    this.plannerService.deletePlannerById(id).subscribe(
+      (data) => {
+        console.log(data);
+      },
+      (error) => console.log('error', error)
+    );
+    window.location.reload();
+  }
 }