mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-11-10 00:23:58 +00:00
Merge pull request #77 from Mueller-Patrick/BETTERZON-120
BETTERZON-120
This commit is contained in:
commit
d2d3bcac8c
11770
Frontend/package-lock.json
generated
11770
Frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
@ -7,7 +7,8 @@
|
||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
"test": "ng test",
|
"test": "ng test",
|
||||||
"lint": "ng lint",
|
"lint": "ng lint",
|
||||||
"e2e": "ng e2e"
|
"e2e": "ng e2e",
|
||||||
|
"postinstall": "ngcc"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -1 +1,9 @@
|
||||||
|
.wrapper_app {
|
||||||
|
padding-bottom: 2.5rem; /* Footer height */
|
||||||
|
}
|
||||||
|
.footer_app {
|
||||||
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2.5rem; /* Footer height */
|
||||||
|
}
|
||||||
|
|
|
@ -1,13 +1,8 @@
|
||||||
<div class="container">
|
<router-outlet></router-outlet>
|
||||||
<div class="header">
|
|
||||||
<app-top-bar></app-top-bar>
|
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<router-outlet></router-outlet>
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
<app-bottom-bar></app-bottom-bar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,7 @@ import {NgApexchartsModule} from 'ng-apexcharts';
|
||||||
import {ProductSearchPageComponent} from './pages/product-search-page/product-search-page.component';
|
import {ProductSearchPageComponent} from './pages/product-search-page/product-search-page.component';
|
||||||
import {HeaderComponent} from './components/header/header.component';
|
import {HeaderComponent} from './components/header/header.component';
|
||||||
import {NewestPricesListComponent} from './components/newest-prices-list/newest-prices-list.component';
|
import {NewestPricesListComponent} from './components/newest-prices-list/newest-prices-list.component';
|
||||||
import {FormsModule} from '@angular/forms';
|
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||||
import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
|
import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
|
||||||
import {MatMenuModule} from '@angular/material/menu';
|
import {MatMenuModule} from '@angular/material/menu';
|
||||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||||
|
@ -31,7 +31,13 @@ import {MatListModule} from "@angular/material/list";
|
||||||
import {BottomBarComponent} from './components/bottom-bar/bottom-bar.component';
|
import {BottomBarComponent} from './components/bottom-bar/bottom-bar.component';
|
||||||
import { HotDealsWidgetComponent } from './components/hot-deals-widget/hot-deals-widget.component';
|
import { HotDealsWidgetComponent } from './components/hot-deals-widget/hot-deals-widget.component';
|
||||||
import { SliderForProductsComponent } from './components/slider-for-products/slider-for-products.component';
|
import { SliderForProductsComponent } from './components/slider-for-products/slider-for-products.component';
|
||||||
|
import { RegistrationComponent } from './components/auth/registration/registration.component';
|
||||||
|
import { MatCardModule } from "@angular/material/card";
|
||||||
|
import {SigninComponent} from "./components/auth/signin/signin.component";
|
||||||
|
import { CopyrightComponent } from './components/copyright/copyright.component';
|
||||||
|
import { GreetingInfoSliderComponent } from './components/greeting-info-slider/greeting-info-slider.component';
|
||||||
|
import { KundenComponent } from './components/kunden/kunden.component';
|
||||||
|
import { AboutUsComponent } from './components/about-us/about-us.component';
|
||||||
|
|
||||||
// For cookie popup
|
// For cookie popup
|
||||||
const cookieConfig: NgcCookieConsentConfig = {
|
const cookieConfig: NgcCookieConsentConfig = {
|
||||||
|
@ -89,7 +95,13 @@ const cookieConfig: NgcCookieConsentConfig = {
|
||||||
TopBarComponent,
|
TopBarComponent,
|
||||||
BottomBarComponent,
|
BottomBarComponent,
|
||||||
HotDealsWidgetComponent,
|
HotDealsWidgetComponent,
|
||||||
SliderForProductsComponent
|
SliderForProductsComponent,
|
||||||
|
RegistrationComponent,
|
||||||
|
SigninComponent,
|
||||||
|
CopyrightComponent,
|
||||||
|
GreetingInfoSliderComponent,
|
||||||
|
KundenComponent,
|
||||||
|
AboutUsComponent,
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -110,6 +122,8 @@ const cookieConfig: NgcCookieConsentConfig = {
|
||||||
RouterModule.forRoot([
|
RouterModule.forRoot([
|
||||||
{path: '', component: LandingpageComponent},
|
{path: '', component: LandingpageComponent},
|
||||||
]),
|
]),
|
||||||
|
MatCardModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
@ -9,6 +9,8 @@ import {ProductSearchPageComponent} from './pages/product-search-page/product-se
|
||||||
import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
|
import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
|
||||||
import {ImprintComponent} from './pages/imprint/imprint.component';
|
import {ImprintComponent} from './pages/imprint/imprint.component';
|
||||||
import {PrivacyComponent} from './pages/privacy/privacy.component';
|
import {PrivacyComponent} from './pages/privacy/privacy.component';
|
||||||
|
import {SigninComponent} from "./components/auth/signin/signin.component";
|
||||||
|
import {RegistrationComponent} from "./components/auth/registration/registration.component";
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{path: '', component: LandingpageComponent, pathMatch: 'full'},
|
{path: '', component: LandingpageComponent, pathMatch: 'full'},
|
||||||
|
@ -16,6 +18,9 @@ const routes: Routes = [
|
||||||
{path: 'product/:id', component: ProductDetailPageComponent},
|
{path: 'product/:id', component: ProductDetailPageComponent},
|
||||||
{path: 'impressum', component: ImprintComponent},
|
{path: 'impressum', component: ImprintComponent},
|
||||||
{path: 'datenschutz', component: PrivacyComponent},
|
{path: 'datenschutz', component: PrivacyComponent},
|
||||||
|
{path: 'signin', component: SigninComponent},
|
||||||
|
{path: 'registration', component: RegistrationComponent},
|
||||||
|
{path: "product-detail", component: ProductDetailPageComponent},
|
||||||
{path: '**', component: PageNotFoundPageComponent}
|
{path: '**', component: PageNotFoundPageComponent}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
17
Frontend/src/app/components/about-us/about-us.component.html
Normal file
17
Frontend/src/app/components/about-us/about-us.component.html
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
<section class="page-section bg-primary text-white mb-0" id="about">
|
||||||
|
<div class="container">
|
||||||
|
<!-- About Section Heading-->
|
||||||
|
<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
|
||||||
|
<!-- Icon Divider-->
|
||||||
|
<div class="divider-custom divider-light">
|
||||||
|
<div class="divider-custom-line"></div>
|
||||||
|
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
|
||||||
|
<div class="divider-custom-line"></div>
|
||||||
|
</div>
|
||||||
|
<!-- About Section Content-->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 ms-auto"><p class="lead">text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p></div>
|
||||||
|
<div class="col-lg-4 me-auto"><p class="lead">text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AboutUsComponent } from './about-us.component';
|
||||||
|
|
||||||
|
describe('AboutUsComponent', () => {
|
||||||
|
let component: AboutUsComponent;
|
||||||
|
let fixture: ComponentFixture<AboutUsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ AboutUsComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(AboutUsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
15
Frontend/src/app/components/about-us/about-us.component.ts
Normal file
15
Frontend/src/app/components/about-us/about-us.component.ts
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-about-us',
|
||||||
|
templateUrl: './about-us.component.html',
|
||||||
|
styleUrls: ['./about-us.component.css']
|
||||||
|
})
|
||||||
|
export class AboutUsComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
26
Frontend/src/app/components/auth/auth-routing.module.ts
Normal file
26
Frontend/src/app/components/auth/auth-routing.module.ts
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
import {RegistrationComponent} from "./registration/registration.component";
|
||||||
|
import {SigninComponent} from "./signin/signin.component";
|
||||||
|
import {ResetpasswortComponent} from "./resetpasswort/resetpasswort.component";
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: 'registration',
|
||||||
|
component: RegistrationComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'signin',
|
||||||
|
component: SigninComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'resetpasswort',
|
||||||
|
component: ResetpasswortComponent
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule]
|
||||||
|
})
|
||||||
|
export class AuthRoutingModule { }
|
22
Frontend/src/app/components/auth/auth.module.ts
Normal file
22
Frontend/src/app/components/auth/auth.module.ts
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
|
||||||
|
import { AuthRoutingModule } from './auth-routing.module';
|
||||||
|
import { SigninComponent } from "./signin/signin.component";
|
||||||
|
import { RegistrationComponent } from './registration/registration.component';
|
||||||
|
import { ResetpasswortComponent } from './resetpasswort/resetpasswort.component';
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [SigninComponent, RegistrationComponent, ResetpasswortComponent],
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
AuthRoutingModule,
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
SigninComponent,
|
||||||
|
RegistrationComponent,
|
||||||
|
ResetpasswortComponent,
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class AuthModule { }
|
|
@ -0,0 +1,76 @@
|
||||||
|
.main-content{
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 5px 5px rgba(0,0,0,.4);
|
||||||
|
margin: 5em auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.company__info{
|
||||||
|
background-color: #008080;
|
||||||
|
border-top-left-radius: 20px;
|
||||||
|
border-bottom-left-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fa-android{
|
||||||
|
font-size:3em;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 640px) {
|
||||||
|
.main-content{width: 90%;}
|
||||||
|
.company__info{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
border-top-left-radius:20px;
|
||||||
|
border-bottom-left-radius:20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 642px) and (max-width:800px){
|
||||||
|
.main-content{width: 70%;}
|
||||||
|
}
|
||||||
|
.row > h2{
|
||||||
|
color:#008080;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
background-color: #fff;
|
||||||
|
border-top-right-radius:20px;
|
||||||
|
border-bottom-right-radius:20px;
|
||||||
|
border-top:1px solid #ccc;
|
||||||
|
border-right:1px solid #ccc;
|
||||||
|
}
|
||||||
|
form{
|
||||||
|
padding: 0 2em;
|
||||||
|
}
|
||||||
|
.form__input{
|
||||||
|
width: 100%;
|
||||||
|
border:0px solid transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
padding: 1em .5em .5em;
|
||||||
|
padding-left: 2em;
|
||||||
|
outline:none;
|
||||||
|
margin:1.5em auto;
|
||||||
|
transition: all .5s ease;
|
||||||
|
}
|
||||||
|
.form__input:focus{
|
||||||
|
border-bottom-color: #008080;
|
||||||
|
box-shadow: 0 0 5px rgba(0,80,80,.4);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.btn_signin{
|
||||||
|
transition: all .5s ease;
|
||||||
|
width: 70%;
|
||||||
|
border-radius: 30px;
|
||||||
|
color:#008080;
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #008080;
|
||||||
|
margin-top: 1.5em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.btn_signin:hover, .btn:focus{
|
||||||
|
background-color: #008080;
|
||||||
|
color:#fff;
|
||||||
|
}
|
|
@ -0,0 +1,40 @@
|
||||||
|
<div class="container">
|
||||||
|
<div class="row main-content bg-success text-center">
|
||||||
|
<div class="col-md-4 text-center company__info">
|
||||||
|
<span class="company__logo" routerLink=""><h2><img src="assets/images/Betterzon.svg"></h2></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8 col-xs-12 col-sm-12 login_form ">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<h2>Konto erstellen</h2>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<form control="" class="form-group">
|
||||||
|
<div class="row">
|
||||||
|
<input type="text" name="username" id="username" class="form__input" placeholder="Nickname">
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<!-- <span class="fa fa-lock"></span> -->
|
||||||
|
<input type="password" name="password" id="email" class="form__input" placeholder= "E-Mail">
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<!-- <span class="fa fa-lock"></span> -->
|
||||||
|
<input type="password" name="password" id="password" class="form__input" placeholder="Kennwort erstellen">
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<!-- <span class="fa fa-lock"></span> -->
|
||||||
|
<input type="password" name="password" id="password_repeated" class="form__input" placeholder="Kennwort bestätigen">
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<input type="submit" value="Erstellen" class="btn_signin">
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<p>Haben Sie bereits ein Konto?<a href="/signin">Sich anmelden</a></p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { RegistrationComponent } from './registration.component';
|
||||||
|
|
||||||
|
describe('RegistrationComponent', () => {
|
||||||
|
let component: RegistrationComponent;
|
||||||
|
let fixture: ComponentFixture<RegistrationComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ RegistrationComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(RegistrationComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-registration',
|
||||||
|
templateUrl: './registration.component.html',
|
||||||
|
styleUrls: ['./registration.component.css']
|
||||||
|
})
|
||||||
|
export class RegistrationComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
<p>resetpasswort works!</p>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ResetpasswortComponent } from './resetpasswort.component';
|
||||||
|
|
||||||
|
describe('ResetpasswortComponent', () => {
|
||||||
|
let component: ResetpasswortComponent;
|
||||||
|
let fixture: ComponentFixture<ResetpasswortComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ ResetpasswortComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(ResetpasswortComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-resetpasswort',
|
||||||
|
templateUrl: './resetpasswort.component.html',
|
||||||
|
styleUrls: ['./resetpasswort.component.css']
|
||||||
|
})
|
||||||
|
export class ResetpasswortComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
76
Frontend/src/app/components/auth/signin/signin.component.css
Normal file
76
Frontend/src/app/components/auth/signin/signin.component.css
Normal file
|
@ -0,0 +1,76 @@
|
||||||
|
.main-content{
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 5px 5px rgba(0,0,0,.4);
|
||||||
|
margin: 5em auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.company__info{
|
||||||
|
background-color: #008080;
|
||||||
|
border-top-left-radius: 20px;
|
||||||
|
border-bottom-left-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fa-android{
|
||||||
|
font-size:3em;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 640px) {
|
||||||
|
.main-content{width: 90%;}
|
||||||
|
.company__info{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
border-top-left-radius:20px;
|
||||||
|
border-bottom-left-radius:20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 642px) and (max-width:800px){
|
||||||
|
.main-content{width: 70%;}
|
||||||
|
}
|
||||||
|
.row > h2{
|
||||||
|
color:#008080;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
background-color: #fff;
|
||||||
|
border-top-right-radius:20px;
|
||||||
|
border-bottom-right-radius:20px;
|
||||||
|
border-top:1px solid #ccc;
|
||||||
|
border-right:1px solid #ccc;
|
||||||
|
}
|
||||||
|
form{
|
||||||
|
padding: 0 2em;
|
||||||
|
}
|
||||||
|
.form__input{
|
||||||
|
width: 100%;
|
||||||
|
border:0px solid transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
padding: 1em .5em .5em;
|
||||||
|
padding-left: 2em;
|
||||||
|
outline:none;
|
||||||
|
margin:1.5em auto;
|
||||||
|
transition: all .5s ease;
|
||||||
|
}
|
||||||
|
.form__input:focus{
|
||||||
|
border-bottom-color: #008080;
|
||||||
|
box-shadow: 0 0 5px rgba(0,80,80,.4);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.btn_signin{
|
||||||
|
transition: all .5s ease;
|
||||||
|
width: 70%;
|
||||||
|
border-radius: 30px;
|
||||||
|
color:#008080;
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #008080;
|
||||||
|
margin-top: 1.5em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.btn_signin:hover, .btn:focus{
|
||||||
|
background-color: #008080;
|
||||||
|
color:#fff;
|
||||||
|
}
|
|
@ -0,0 +1,34 @@
|
||||||
|
<div class="container">
|
||||||
|
<div class="row main-content bg-success text-center">
|
||||||
|
<div class="col-md-4 text-center company__info">
|
||||||
|
<span class="company__logo" routerLink=""><h2><img src="assets/images/Betterzon.svg"></h2></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8 col-xs-12 col-sm-12 login_form ">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<h2>Anmelden</h2>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<form control="" class="form-group">
|
||||||
|
<div class="row">
|
||||||
|
<input type="text" name="username" id="username" class="form__input" placeholder="Username">
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<!-- <span class="fa fa-lock"></span> -->
|
||||||
|
<input type="password" name="password" id="password" class="form__input" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<input type="submit" value="Anmelden" class="btn_signin">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<p>Noch kein Konto?<a href="/registration">Konto erstellen</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { SigninComponent } from './signin.component';
|
||||||
|
|
||||||
|
describe('SigninComponent', () => {
|
||||||
|
let component: SigninComponent;
|
||||||
|
let fixture: ComponentFixture<SigninComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ SigninComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(SigninComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
19
Frontend/src/app/components/auth/signin/signin.component.ts
Normal file
19
Frontend/src/app/components/auth/signin/signin.component.ts
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-signin',
|
||||||
|
templateUrl: './signin.component.html',
|
||||||
|
styleUrls: ['./signin.component.css']
|
||||||
|
})
|
||||||
|
|
||||||
|
export class SigninComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,26 +1,31 @@
|
||||||
<div class="bottom-bar-wrapper">
|
<footer class="footer text-center">
|
||||||
<div class="folge-uns-item">
|
<div class="container">
|
||||||
<p><span id="folge">FOLGE</span><span id="uns">UNS</span></p>
|
<div class="row">
|
||||||
</div>
|
<!-- Footer Location-->
|
||||||
<div class="link-items">
|
<div class="col-lg-4 mb-5 mb-lg-0">
|
||||||
<ul style="list-style-type:none" class="footer-links">
|
<h4 class="text-uppercase mb-4">Location</h4>
|
||||||
<li><a href="https://github.com/Mueller-Patrick/Betterzon">GiT</a></li>
|
<p class="lead mb-0">
|
||||||
<li><a href="https://blog.betterzon.xyz/">BLOG</a></li>
|
70376 Stuttgart
|
||||||
<li><a href="https://github.com/Mueller-Patrick/Betterzon/wiki">Wiki</a></li>
|
<br />
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="footer-line">
|
|
||||||
|
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-logo">
|
<!-- Footer Social Icons-->
|
||||||
<p><span id="better">BETTER</span><span id="zon">ZON</span></p>
|
<div class="col-lg-4 mb-5 mb-lg-0">
|
||||||
|
<h4 class="text-uppercase mb-4">FOLGE UNS</h4>
|
||||||
|
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-github"></i></a>
|
||||||
|
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-twitter"></i></a>
|
||||||
|
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-linkedin-in"></i></a>
|
||||||
|
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-dribbble"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-info">
|
<!-- Footer About Text-->
|
||||||
<ul style="list-style-type:none" class="footer-links">
|
<div class="col-lg-4">
|
||||||
<li><a>DATENSCHUTZERKLÄRUNG</a></li>
|
<h4 class="text-uppercase mb-4">SOME INFO</h4>
|
||||||
<li><a>IMPRESSUM</a></li>
|
<p class="lead mb-0">
|
||||||
</ul>
|
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<div class="copyright py-4 text-center text-white">
|
||||||
|
<div class="container"><small>Copyright © Your Website 2021</small></div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { CopyrightComponent } from './copyright.component';
|
||||||
|
|
||||||
|
describe('CopyrightComponent', () => {
|
||||||
|
let component: CopyrightComponent;
|
||||||
|
let fixture: ComponentFixture<CopyrightComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ CopyrightComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(CopyrightComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
15
Frontend/src/app/components/copyright/copyright.component.ts
Normal file
15
Frontend/src/app/components/copyright/copyright.component.ts
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-copyright',
|
||||||
|
templateUrl: './copyright.component.html',
|
||||||
|
styleUrls: ['./copyright.component.css']
|
||||||
|
})
|
||||||
|
export class CopyrightComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,16 @@
|
||||||
|
<header class="masthead bg-primary text-white text-center">
|
||||||
|
<div class="container d-flex align-items-center flex-column">
|
||||||
|
<!-- Masthead Avatar Image-->
|
||||||
|
<img class="masthead-avatar mb-5" src="assets/images/Betterzon.svg" alt="..." />
|
||||||
|
<!-- Masthead Heading-->
|
||||||
|
<h1 class="masthead-heading text-uppercase mb-0"></h1>
|
||||||
|
<!-- Icon Divider-->
|
||||||
|
<div class="divider-custom divider-light">
|
||||||
|
<div class="divider-custom-line"></div>
|
||||||
|
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
|
||||||
|
<div class="divider-custom-line"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Masthead Subheading-->
|
||||||
|
<p class="masthead-subheading font-weight-light mb-0"></p>
|
||||||
|
</div>
|
||||||
|
</header>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { GreetingInfoSliderComponent } from './greeting-info-slider.component';
|
||||||
|
|
||||||
|
describe('GreetingInfoSliderComponent', () => {
|
||||||
|
let component: GreetingInfoSliderComponent;
|
||||||
|
let fixture: ComponentFixture<GreetingInfoSliderComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ GreetingInfoSliderComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(GreetingInfoSliderComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-greeting-info-slider',
|
||||||
|
templateUrl: './greeting-info-slider.component.html',
|
||||||
|
styleUrls: ['./greeting-info-slider.component.css']
|
||||||
|
})
|
||||||
|
export class GreetingInfoSliderComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,72 +1,97 @@
|
||||||
.hot-deal-widget-wrapper{
|
.bbb_deals_wrapper {
|
||||||
width: 1640px;
|
overflow: hidden;
|
||||||
height: 820px;
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
grid-column-gap: 0px;
|
|
||||||
grid-row-gap: 0px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-description {
|
.bbb_deals_wrapper:hover {
|
||||||
/*background-color: #3480E3;*/
|
transform: scale(1.2);
|
||||||
height: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 15% 16px 15% 16px 15% 16px 15% 16px 15% 16px 15% 8px;
|
|
||||||
grid-template-rows: repeat(5, 1fr);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-image {
|
.bbb_deals_featured {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#hot-deals{
|
.bbb_deals {
|
||||||
/*background-color: #E53167;*/
|
width: 100%;
|
||||||
justify-self: center;
|
margin-right: 7%;
|
||||||
align-self: center;
|
padding-top: 80px;
|
||||||
grid-column: 3/10;
|
padding-left: 25px;
|
||||||
grid-row: 1/2;
|
padding-right: 25px;
|
||||||
|
padding-bottom: 34px;
|
||||||
|
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 0px
|
||||||
}
|
}
|
||||||
|
|
||||||
#product-name {
|
.bbb_deals_title {
|
||||||
justify-self: center;
|
position: absolute;
|
||||||
align-self: center;
|
top: 10px;
|
||||||
grid-column: 3/10;
|
left: 22px;
|
||||||
grid-row: 2/3;
|
font-size: 18px;
|
||||||
/*background-color: #E53167;*/
|
font-weight: 500;
|
||||||
|
color: #000000
|
||||||
}
|
}
|
||||||
|
|
||||||
#product-name > p {
|
.bbb_deals_slider_container {
|
||||||
font-size: 65px;
|
width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
#sales {
|
.bbb_deals_item {
|
||||||
justify-self: center;
|
width: 100% !important
|
||||||
align-self: center;
|
|
||||||
grid-column: 3/10;
|
|
||||||
grid-row: 3/4;
|
|
||||||
/*background-color: #E53167;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#futher-informations {
|
.bbb_deals_image {
|
||||||
justify-self: center;
|
width: 40%;
|
||||||
align-self: center;
|
height: 40%;
|
||||||
grid-column: 3/10;
|
|
||||||
grid-row: 4/5;
|
|
||||||
/*background-color: #E53167;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#points {
|
.bbb_deals_image img {
|
||||||
justify-self: center;
|
width: 100%
|
||||||
align-self: start;
|
|
||||||
grid-column: 3/10;
|
|
||||||
grid-row: 5/6;
|
|
||||||
/*background-color: #E53167;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-image {
|
.bbb_deals_content {
|
||||||
display: grid;
|
margin-top: 33px
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bbb_deals_item_category a {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(0, 0, 0, 0.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
#bbb_deals_item_price_a {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bbb_deals_item_price_b {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bbb_deals_item_name {
|
||||||
|
max-width: 300px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bbb_deals_item_price {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #228B22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.available {
|
||||||
|
margin-top: 19px
|
||||||
|
}
|
||||||
|
|
||||||
|
.available_title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
font-weight: 400
|
||||||
|
}
|
||||||
|
|
|
@ -1,23 +1,34 @@
|
||||||
<div class="hot-deal-widget-wrapper">
|
<section class="page-section portfolio" id="top-gesuchte">
|
||||||
<div class="product-description">
|
<div class="container">
|
||||||
<div id="hot-deals">
|
<!-- Portfolio Section Heading-->
|
||||||
<h1>HOT DEALS</h1>
|
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">TOP-ANGEBOTE</h2>
|
||||||
|
<!-- Icon Divider-->
|
||||||
|
<div class="divider-custom">
|
||||||
|
<div class="divider-custom-line"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="product-name">
|
<!-- Portfolio Grid Items-->
|
||||||
<h1>Neues Apple iPhone 12 Pro <br> (512 GB) - Graphit</h1>
|
<div class="row justify-content-center">
|
||||||
|
<!-- Portfolio Item 1-->
|
||||||
|
<div class="col-md-4 mx-auto my-5" *ngFor="let product of products">
|
||||||
|
<div class="bbb_deals_wrapper">
|
||||||
|
<div class="bbb_deals_image"><img src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg" alt=""></div>
|
||||||
|
<div class="bbb_deals_content">
|
||||||
|
<div class="bbb_deals_info_line d-flex flex-row justify-content-start">
|
||||||
|
<div class="bbb_deals_item_name">{{product.name}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="sales">
|
<div class="bbb_deals_info_line d-flex flex-row justify-content-start">
|
||||||
SPARE BIS ZU 7%!
|
<div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>699.00$</strike></span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="futher-informations">
|
<div class="bbb_deals_info_line d-flex flex-row justify-content-start">
|
||||||
Weitere Informationen
|
<div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">599,00$</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="points">
|
<div class="available_bar">
|
||||||
points
|
<span style="width:17%"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-image">
|
|
||||||
<img src="assets/images/iphone-12-pro-silver-hero.png" height="771">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import {Component, Input, OnInit} from '@angular/core';
|
||||||
|
import {ApiService} from '../../services/api.service';
|
||||||
|
import {Product} from '../../models/product';
|
||||||
|
import {ActivatedRoute, Router} from '@angular/router';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-hot-deals-widget',
|
selector: 'app-hot-deals-widget',
|
||||||
|
@ -7,9 +10,60 @@ import { Component, OnInit } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class HotDealsWidgetComponent implements OnInit {
|
export class HotDealsWidgetComponent implements OnInit {
|
||||||
|
|
||||||
constructor() { }
|
products: Product[] = [];
|
||||||
|
@Input() numberOfProducts: number;
|
||||||
|
@Input() showProductPicture: boolean;
|
||||||
|
@Input() searchQuery: string;
|
||||||
|
@Input() type: string;
|
||||||
|
|
||||||
ngOnInit(): void {
|
constructor(
|
||||||
|
private apiService: ApiService,
|
||||||
|
private router: Router,
|
||||||
|
private route: ActivatedRoute
|
||||||
|
) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.loadParams();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadParams(): void {
|
||||||
|
if (!this.numberOfProducts) {
|
||||||
|
this.numberOfProducts = 10;
|
||||||
|
}
|
||||||
|
if (!this.showProductPicture) {
|
||||||
|
this.showProductPicture = false;
|
||||||
|
}
|
||||||
|
if (!this.searchQuery) {
|
||||||
|
this.searchQuery = '';
|
||||||
|
}
|
||||||
|
if (!this.type) {
|
||||||
|
this.type = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (this.type) {
|
||||||
|
case 'search': {
|
||||||
|
this.getSearchedProducts();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
this.getProducts();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getProducts(): void {
|
||||||
|
this.apiService.getProducts().subscribe(products => this.products = products);
|
||||||
|
}
|
||||||
|
|
||||||
|
getSearchedProducts(): void {
|
||||||
|
this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
|
||||||
|
}
|
||||||
|
|
||||||
|
clickedProduct(product: Product): void {
|
||||||
|
this.router.navigate([('/product/' + product.product_id)]);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
38
Frontend/src/app/components/kunden/kunden.component.html
Normal file
38
Frontend/src/app/components/kunden/kunden.component.html
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
<section class="page-section portfolio" id="unsere-kunden">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Portfolio Section Heading-->
|
||||||
|
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">SIE VERTRAUEN UNS</h2>
|
||||||
|
<!-- Icon Divider-->
|
||||||
|
<div class="divider-custom">
|
||||||
|
<div class="divider-custom-line"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Portfolio Grid Items-->
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<!-- Portfolio Item 1-->
|
||||||
|
<div class="col-md-6 col-lg-4 mb-5">
|
||||||
|
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
|
||||||
|
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
|
||||||
|
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
|
||||||
|
</div>
|
||||||
|
<img class="productImage" src="assets/images/Betterzon.svg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-lg-4 mb-5">
|
||||||
|
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
|
||||||
|
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
|
||||||
|
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
|
||||||
|
</div>
|
||||||
|
<img class="productImage" src="assets/images/Betterzon.svg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-lg-4 mb-5">
|
||||||
|
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
|
||||||
|
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
|
||||||
|
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
|
||||||
|
</div>
|
||||||
|
<img class="productImage" src="assets/images/Betterzon.svg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
25
Frontend/src/app/components/kunden/kunden.component.spec.ts
Normal file
25
Frontend/src/app/components/kunden/kunden.component.spec.ts
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { KundenComponent } from './kunden.component';
|
||||||
|
|
||||||
|
describe('KundenComponent', () => {
|
||||||
|
let component: KundenComponent;
|
||||||
|
let fixture: ComponentFixture<KundenComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ KundenComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(KundenComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
67
Frontend/src/app/components/kunden/kunden.component.ts
Normal file
67
Frontend/src/app/components/kunden/kunden.component.ts
Normal file
|
@ -0,0 +1,67 @@
|
||||||
|
import {Component, Input, OnInit} from '@angular/core';
|
||||||
|
import {ApiService} from '../../services/api.service';
|
||||||
|
import {Product} from '../../models/product';
|
||||||
|
import {ActivatedRoute, Router} from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-kunden',
|
||||||
|
templateUrl: './kunden.component.html',
|
||||||
|
styleUrls: ['./kunden.component.css']
|
||||||
|
})
|
||||||
|
export class KundenComponent implements OnInit {
|
||||||
|
products: Product[] = [];
|
||||||
|
@Input() numberOfProducts: number;
|
||||||
|
@Input() showProductPicture: boolean;
|
||||||
|
@Input() searchQuery: string;
|
||||||
|
@Input() type: string;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private apiService: ApiService,
|
||||||
|
private router: Router,
|
||||||
|
private route: ActivatedRoute
|
||||||
|
) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.loadParams();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadParams(): void {
|
||||||
|
if (!this.numberOfProducts) {
|
||||||
|
this.numberOfProducts = 10;
|
||||||
|
}
|
||||||
|
if (!this.showProductPicture) {
|
||||||
|
this.showProductPicture = false;
|
||||||
|
}
|
||||||
|
if (!this.searchQuery) {
|
||||||
|
this.searchQuery = '';
|
||||||
|
}
|
||||||
|
if (!this.type) {
|
||||||
|
this.type = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (this.type) {
|
||||||
|
case 'search': {
|
||||||
|
this.getSearchedProducts();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
this.getProducts();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getProducts(): void {
|
||||||
|
this.apiService.getProducts().subscribe(products => this.products = products);
|
||||||
|
}
|
||||||
|
|
||||||
|
getSearchedProducts(): void {
|
||||||
|
this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
|
||||||
|
}
|
||||||
|
|
||||||
|
clickedProduct(product: Product): void {
|
||||||
|
this.router.navigate([('/product/' + product.product_id)]);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,54 +0,0 @@
|
||||||
.top-bar-wrapper {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 200px 360px 820px 20px 250px;
|
|
||||||
grid-template-rows: 40px;
|
|
||||||
grid-column-gap: 0px;
|
|
||||||
grid-row-gap: 0px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-logo {
|
|
||||||
grid-area: 1/1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#better {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #3480E3;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zon {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #E53167;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-button {
|
|
||||||
/*background-color: #E53167;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.sign-up {
|
|
||||||
/*background-color: #E53167;*/
|
|
||||||
margin-left: 50px;
|
|
||||||
margin-right: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login {
|
|
||||||
margin-right: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#signin {
|
|
||||||
border-radius: 25px;
|
|
||||||
background-color: #E53167;
|
|
||||||
}
|
|
||||||
|
|
||||||
._links > a {
|
|
||||||
/*background-color: #E53167;*/
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
._signing_links > a {
|
|
||||||
/*background-color: #E53167;*/
|
|
||||||
margin-left: 50px;
|
|
||||||
}
|
|
|
@ -1,26 +1,22 @@
|
||||||
<div class="top-bar-wrapper">
|
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
|
||||||
<div class="<top-logo>">
|
<div class="container">
|
||||||
<a><span id="better">BETTER</span><span id="zon">ZON</span></a>
|
<a class="navbar-brand" routerLink=""> Betterzon</a>
|
||||||
|
<form class="form-inline my-2 my-lg-0">
|
||||||
|
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
</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">
|
||||||
|
Menu
|
||||||
|
<i class="fas fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||||
|
<ul class="navbar-nav ms-auto">
|
||||||
|
<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="#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"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Konto Erstellen</a></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="links">
|
|
||||||
<nav class="_links">
|
|
||||||
<a>KONTAKTIERE UNS</a>
|
|
||||||
<a>KUNDEN</a>
|
|
||||||
<a>FAQ</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="footer_space">
|
</nav>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="search-button">
|
|
||||||
<a>
|
|
||||||
<img src="assets/images/search_black_24dp.svg" alt="Sarch button">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<nav class="_signing_links">
|
|
||||||
<a>SIGN UP</a>
|
|
||||||
<a><span id="signin">SIGN IN</span></a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
|
@ -11,7 +11,7 @@ export class TopBarComponent implements OnInit {
|
||||||
|
|
||||||
constructor() { }
|
constructor() { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit() {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,12 @@
|
||||||
<app-hot-deals-widget></app-hot-deals-widget>
|
<app-top-bar></app-top-bar>
|
||||||
|
|
||||||
|
<app-greeting-info-slider></app-greeting-info-slider>
|
||||||
|
<app-hot-deals-widget></app-hot-deals-widget>
|
||||||
|
<app-about-us></app-about-us>
|
||||||
|
<app-kunden></app-kunden>
|
||||||
|
|
||||||
|
<app-bottom-bar></app-bottom-bar>
|
||||||
|
<app-copyright></app-copyright>
|
||||||
<!--<div id="mainComponents">
|
<!--<div id="mainComponents">
|
||||||
<div id="searchContainer">
|
<div id="searchContainer">
|
||||||
<input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
|
<input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
|
||||||
|
|
|
@ -1,2 +1,3 @@
|
||||||
<h1>404</h1>
|
<h1>404</h1>
|
||||||
<p>Page not found!</p>
|
<p>Page not found!</p>
|
||||||
|
<p routerLink="">Zurück</p>
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
|
<app-top-bar></app-top-bar>
|
||||||
|
|
||||||
<div id="mainComponents">
|
<div id="mainComponents">
|
||||||
<app-product-details [productId]="productId"></app-product-details>
|
<app-product-details [productId]="productId"></app-product-details>
|
||||||
<app-newest-prices-list [productId]="productId"></app-newest-prices-list>
|
<app-newest-prices-list [productId]="productId"></app-newest-prices-list>
|
||||||
</div>
|
</div>
|
||||||
<app-footer></app-footer>
|
|
||||||
|
|
|
@ -6,11 +6,16 @@
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
|
<!-- Favicon-->
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||||
|
<!-- Font Awesome icons (free version)-->
|
||||||
|
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
|
||||||
|
<!-- Google fonts-->
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
|
||||||
<script src="node_modules/cookieconsent/build/cookieconsent.min.js"></script>
|
<script src="node_modules/cookieconsent/build/cookieconsent.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root></app-root>
|
<app-root>LOADING</app-root>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
11115
Frontend/src/styles.css
11115
Frontend/src/styles.css
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user