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/src/app/homepage
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • 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}
Note: See TracChangeset for help on using the changeset viewer.