wip: profile component

This commit is contained in:
Jegor 2021-06-17 09:55:40 +02:00
parent be534551ba
commit 969ac6feaf
13 changed files with 113 additions and 19 deletions

View File

@ -1,6 +1,8 @@
import {Component, OnDestroy, OnInit} from '@angular/core'; import {Component, OnDestroy, OnInit} from '@angular/core';
import {NgcCookieConsentService, NgcInitializeEvent, NgcNoCookieLawEvent, NgcStatusChangeEvent} from 'ngx-cookieconsent'; import {NgcCookieConsentService, NgcInitializeEvent, NgcNoCookieLawEvent, NgcStatusChangeEvent} from 'ngx-cookieconsent';
import {Subscription} from 'rxjs'; import {Subscription} from 'rxjs';
import {ApiService} from "./services/api.service";
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -19,12 +21,18 @@ export class AppComponent implements OnInit, OnDestroy {
private revokeChoiceSubscription: Subscription; private revokeChoiceSubscription: Subscription;
private noCookieLawSubscription: Subscription; private noCookieLawSubscription: Subscription;
isLoggedIn = false;
showUserBoard = false;
username?: string;
constructor( constructor(
private ccService: NgcCookieConsentService private ccService: NgcCookieConsentService,
private api: ApiService
) { ) {
} }
ngOnInit(): void { ngOnInit(): void {
// subscribe to cookieconsent observables to react to main events // subscribe to cookieconsent observables to react to main events
this.popupOpenSubscription = this.ccService.popupOpen$.subscribe( this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(
() => { () => {

View File

@ -39,6 +39,7 @@ import { GreetingInfoSliderComponent } from './components/greeting-info-slider/g
import { KundenComponent } from './components/kunden/kunden.component'; import { KundenComponent } from './components/kunden/kunden.component';
import { AboutUsComponent } from './components/about-us/about-us.component'; import { AboutUsComponent } from './components/about-us/about-us.component';
import { ProfileComponent } from './components/profile/profile.component'; import { ProfileComponent } from './components/profile/profile.component';
import { ProfilePageComponent } from './pages/profile-page/profile-page.component';
// For cookie popup // For cookie popup
const cookieConfig: NgcCookieConsentConfig = { const cookieConfig: NgcCookieConsentConfig = {
@ -104,6 +105,7 @@ const cookieConfig: NgcCookieConsentConfig = {
KundenComponent, KundenComponent,
AboutUsComponent, AboutUsComponent,
ProfileComponent, ProfileComponent,
ProfilePageComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

View File

@ -12,6 +12,7 @@ import {PrivacyComponent} from './pages/privacy/privacy.component';
import {SigninComponent} from "./components/auth/signin/signin.component"; import {SigninComponent} from "./components/auth/signin/signin.component";
import {RegistrationComponent} from "./components/auth/registration/registration.component"; import {RegistrationComponent} from "./components/auth/registration/registration.component";
import {ProfileComponent} from "./components/profile/profile.component"; import {ProfileComponent} from "./components/profile/profile.component";
import {ProfilePageComponent} from "./pages/profile-page/profile-page.component";
const routes: Routes = [ const routes: Routes = [
{path: '', component: LandingpageComponent, pathMatch: 'full'}, {path: '', component: LandingpageComponent, pathMatch: 'full'},
@ -22,7 +23,7 @@ const routes: Routes = [
{path: 'signin', component: SigninComponent}, {path: 'signin', component: SigninComponent},
{path: 'registration', component: RegistrationComponent}, {path: 'registration', component: RegistrationComponent},
{path: "product-detail", component: ProductDetailPageComponent}, {path: "product-detail", component: ProductDetailPageComponent},
{path: "profile", component: ProfileComponent}, {path: "profile", component: ProfilePageComponent},
{path: '**', component: PageNotFoundPageComponent} {path: '**', component: PageNotFoundPageComponent}
]; ];

View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {ApiService} from "../../../services/api.service"; import {ApiService} from "../../../services/api.service";
import {Router} from "@angular/router";
@Component({ @Component({
@ -15,7 +16,8 @@ export class RegistrationComponent implements OnInit {
constructor( constructor(
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private api : ApiService private api : ApiService,
private router: Router
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
@ -32,6 +34,11 @@ export class RegistrationComponent implements OnInit {
get me() { return this.form.controls; } get me() { return this.form.controls; }
onSubmit() { onSubmit() {
this.api.registerUser(this.form.value.username, this.form.value.password, this.form.value.email).subscribe(res=>console.log(res)); this.api.registerUser(this.form.value.username, this.form.value.password, this.form.value.email).subscribe(
res=> {
this.router.navigate(['']);
this.api.saveSessionInfoToLocalStorage(res);
}
);
} }
} }

View File

@ -43,8 +43,8 @@ export class SigninComponent implements OnInit {
.subscribe( .subscribe(
data => { data => {
this.isSuccessful = true; this.isSuccessful = true;
this.isSignUpFailed = false;
this.router.navigate(['']); this.router.navigate(['']);
this.api.saveSessionInfoToLocalStorage(data);
}, },
err => { err => {
this.errorMessage = err.error.message; this.errorMessage = err.error.message;

View File

@ -11,16 +11,16 @@
<!-- Portfolio Item 1--> <!-- Portfolio Item 1-->
<div class="col-md-4 mx-auto my-5" *ngFor="let productId of bestDealsProductIds" (click)="clickedProduct(productId)"> <div class="col-md-4 mx-auto my-5" *ngFor="let productId of bestDealsProductIds" (click)="clickedProduct(productId)">
<div class="bbb_deals_wrapper"> <div class="bbb_deals_wrapper">
<div class="bbb_deals_image"><img src="https://www.mueller-patrick.tech/betterzon/images/{{productsPricesMap[productId]?.product.image_guid}}.jpg" alt=""></div> <div class="bbb_deals_image"><img src="https://www.mueller-patrick.tech/betterzon/images/{{productsPricesMap[productId]?.product?.image_guid}}.jpg" alt=""></div>
<div class="bbb_deals_content"> <div class="bbb_deals_content">
<div class="bbb_deals_info_line d-flex flex-row justify-content-start"> <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
<div class="bbb_deals_item_name">{{productsPricesMap[productId]?.product.name}}</div> <div class="bbb_deals_item_name">{{productsPricesMap[productId]?.product?.name}}</div>
</div> </div>
<div class="bbb_deals_info_line d-flex flex-row justify-content-start"> <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
<div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>{{productsPricesMap[productId]?.amazonPrice.price_in_cents}}$</strike></span></div> <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>{{productsPricesMap[productId]?.amazonPrice?.price_in_cents/100}}$</strike></span></div>
</div> </div>
<div class="bbb_deals_info_line d-flex flex-row justify-content-start"> <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
<div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">{{productsPricesMap[productId]?.lowestPrice.price_in_cents}}</span></div> <div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">{{productsPricesMap[productId]?.lowestPrice?.price_in_cents/100}}</span></div>
</div> </div>
<div class="available_bar"> <div class="available_bar">
<span style="width:17%"></span> <span style="width:17%"></span>

View File

@ -86,12 +86,11 @@ export class HotDealsWidgetComponent implements OnInit {
this.apiService.getAmazonPrice(id).subscribe( this.apiService.getAmazonPrice(id).subscribe(
price => { price => {
this.amazonPrices.push(price); this.amazonPrices.push(price);
this.productsPricesMap[price.product_id].amazonPrice = price; this.productsPricesMap[price[0].product_id].amazonPrice = price[0];
} }
); );
} }
); );
console.log(this.amazonPrices);
} }
getSearchedProducts(): void { getSearchedProducts(): void {

View File

@ -20,7 +20,7 @@
{{product?.short_description}} {{product?.short_description}}
</div> </div>
</div> </div>
<div class="priceAlarm"> <div class="priceAlarm" (click)="setPriceAlarm()">
Set Price Alarm Set Price Alarm
</div> </div>
<div class="bestPriceContainer"> <div class="bestPriceContainer">

View File

@ -117,4 +117,10 @@ export class ProductDetailsComponent implements OnInit {
return Math.round(percentage); return Math.round(percentage);
} }
setPriceAlarm() {
this.apiService.createPriceAlarms(this.productId, 9).subscribe(
alarms => console.log(alarms)
)
}
} }

View File

@ -7,6 +7,27 @@
<strong>username:</strong> <strong>username:</strong>
{{ currentUser.username}} {{ currentUser.username}}
</p> </p>
<p>
<strong>alarms</strong>
{{alarms}}
</p>
<table>
<tr>
<th>Produkt</th>
<th>Preis</th>
</tr>
<tr *ngFor="let alarm of alarms">
<td>
{{productsMap[alarm.product_id]?.name}}
</td>
<td>
{{alarm.defined_price/100}}
</td>
</tr>
</table>
<p>
<strong><a routerLink="/">zurück</a></strong>
</p>
</div> </div>
<ng-template #loggedOut> <ng-template #loggedOut>

View File

@ -9,7 +9,9 @@ import {ApiService} from "../../services/api.service";
export class ProfileComponent implements OnInit { export class ProfileComponent implements OnInit {
currentUser: any; currentUser: any;
obj:any obj:any;
alarms: any [];
productsMap: any;
constructor(private api: ApiService ) { } constructor(private api: ApiService ) { }
@ -21,5 +23,30 @@ export class ProfileComponent implements OnInit {
console.log(this.currentUser); console.log(this.currentUser);
}, },
); );
this.getPriceAlarms();
}
getPriceAlarms(): void {
this.api.getPriceAlarms().subscribe(
alarms => {
this.alarms = alarms
this.getProductsByIds()
}
)
}
getProductsByIds(): void {
let productIds: number [];
this.alarms.forEach(
alarm => {productIds.push(alarm.product_id)}
);
this.api.getProductsByIds(productIds).subscribe(
products => {
products.forEach(
product => {this.productsMap[product.product_id] = product}
)
}
)
} }
} }

View File

@ -2,7 +2,7 @@
<div class="container"> <div class="container">
<a class="navbar-brand" routerLink=""> Betterzon</a> <a class="navbar-brand" routerLink=""> Betterzon</a>
<form class="form-inline my-2 my-lg-0"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" (keyup.enter)="getSearchedProducts()">
</form> </form>
<button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu Menu
@ -13,9 +13,10 @@
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#top-gesuchte">Top-Gesuchte</a></li> <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#top-gesuchte">Top-Gesuchte</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">über uns</a></li> <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">über uns</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#unsere-kunden">Unsere Kunden</a></li> <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#unsere-kunden">Unsere Kunden</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/signin">Anmelden</a></li> <li class="nav-item mx-0 mx-lg-1" *ngIf="!isLoggedIn"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/signin">Anmelden</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Konto Erstellen</a></li> <li class="nav-item mx-0 mx-lg-1" *ngIf="!isLoggedIn"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Konto Erstellen</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Log Out</a></li> <li class="nav-item mx-0 mx-lg-1" *ngIf="isLoggedIn"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="" (click)="logout()">Log Out</a></li>
<li class="nav-item mx-0 mx-lg-1" *ngIf="isLoggedIn"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/profile">Profile</a></li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {ApiService} from "../../services/api.service"; import {ApiService} from "../../services/api.service";
import {Router} from "@angular/router";
@Component({ @Component({
@ -10,13 +11,34 @@ import {ApiService} from "../../services/api.service";
export class TopBarComponent implements OnInit { export class TopBarComponent implements OnInit {
sidenav: any; sidenav: any;
isLoggedIn: boolean;
@Input() searchQuery: string;
constructor( constructor(
private api: ApiService private api: ApiService,
private router: Router
) { } ) { }
ngOnInit() { ngOnInit() {
this.api.getUserInfo().subscribe(data=>{console.log(data)}); this.api.getUserInfo().subscribe(data=>{console.log(data)});
if ( this.api.getSessionInfoFromLocalStorage().session_id != "") {
this.isLoggedIn = true;
}
}
logout(): void {
localStorage.setItem('session_id', '');
localStorage.setItem('session_key', '');
window.location.reload()
}
getSearchedProducts(): void {
this.api.getProductsByQuery(this.searchQuery).subscribe(
data => {
this.router.navigate([('/registration')]);
}
);
} }
} }