From a705be5503426c069f6c02e43e503086b39b1257 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Mon, 25 Sep 2023 21:50:46 +0300 Subject: [PATCH 01/58] add awhy us section --- src/app/app.module.ts | 3 +-- src/app/core/components/us/us.component.css | 0 src/app/core/components/us/us.component.html | 20 ++++++++++++++ .../core/components/us/us.component.spec.ts | 21 +++++++++++++++ src/app/core/components/us/us.component.ts | 10 +++++++ src/app/core/core.module.ts | 27 +++---------------- src/app/home-section/home/home.component.html | 1 + src/app/home-section/home/home.module.ts | 10 +++++-- 8 files changed, 64 insertions(+), 28 deletions(-) create mode 100644 src/app/core/components/us/us.component.css create mode 100644 src/app/core/components/us/us.component.html create mode 100644 src/app/core/components/us/us.component.spec.ts create mode 100644 src/app/core/components/us/us.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 82fcf3a..c443dfc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -29,8 +29,7 @@ import { CurrencyPipe } from '@angular/common'; @NgModule({ declarations: [ - AppComponent, - HomeComponent + AppComponent ], imports: [ BrowserModule, diff --git a/src/app/core/components/us/us.component.css b/src/app/core/components/us/us.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/core/components/us/us.component.html b/src/app/core/components/us/us.component.html new file mode 100644 index 0000000..4294185 --- /dev/null +++ b/src/app/core/components/us/us.component.html @@ -0,0 +1,20 @@ +
+
+
+
+ Section 1 +
+
+

Section 2

+
+
+

Section 3

+
+
+

Section 4

+
+
+
+
+ + diff --git a/src/app/core/components/us/us.component.spec.ts b/src/app/core/components/us/us.component.spec.ts new file mode 100644 index 0000000..6c1c463 --- /dev/null +++ b/src/app/core/components/us/us.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UsComponent } from './us.component'; + +describe('UsComponent', () => { + let component: UsComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [UsComponent] + }); + fixture = TestBed.createComponent(UsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/components/us/us.component.ts b/src/app/core/components/us/us.component.ts new file mode 100644 index 0000000..518ca30 --- /dev/null +++ b/src/app/core/components/us/us.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-us', + templateUrl: './us.component.html', + styleUrls: ['./us.component.css'] +}) +export class UsComponent { + +} diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 80c14db..a761e9b 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -1,43 +1,22 @@ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { HeaderComponent } from './components/header/header.component'; import { ErrorComponent } from './components/error/error.component'; import { NotFoundComponent } from './components/not-found/not-found.component'; import { RouterModule } from '@angular/router'; import { SharedModule } from '../shared/shared.module'; - - - -// @NgModule({ -// declarations: [ -// HeaderComponent, -// ErrorComponent, -// NotFoundComponent -// ], -// imports: [ -// CommonModule, -// RouterModule.forChild([ -// { path: '404', component: NotFoundComponent }, -// { path: 'error', component: ErrorComponent }, -// { path: '**', redirectTo: '/404' } -// ] -// }), - -// export class CoreModule { } +import { UsComponent } from './components/us/us.component'; @NgModule({ - declarations: [HeaderComponent, NotFoundComponent, ErrorComponent], + declarations: [NotFoundComponent, ErrorComponent, UsComponent], imports: [ RouterModule.forChild([ { path: '404', component: NotFoundComponent }, { path: 'error', component: ErrorComponent }, { path: '**', redirectTo: '/404' } ]), - // MatBadgeModule, SharedModule ], exports: [ - HeaderComponent, + UsComponent ] }) export class CoreModule { } diff --git a/src/app/home-section/home/home.component.html b/src/app/home-section/home/home.component.html index 3c69cf4..54e3c8f 100644 --- a/src/app/home-section/home/home.component.html +++ b/src/app/home-section/home/home.component.html @@ -84,6 +84,7 @@

Quick Links

+
diff --git a/src/app/home-section/home/home.module.ts b/src/app/home-section/home/home.module.ts index 779fd88..a7c7b68 100644 --- a/src/app/home-section/home/home.module.ts +++ b/src/app/home-section/home/home.module.ts @@ -2,15 +2,21 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HomeRoutingModule } from './home-routing.module'; +import { CoreModule } from 'src/app/core/core.module'; +import { HomeComponent } from './home.component'; import { ProductsModule } from 'src/app/features/products/products.module'; @NgModule({ - declarations: [], + declarations: [HomeComponent], imports: [ CommonModule, HomeRoutingModule, - // ProductsModule + CoreModule, + ProductsModule + ], + exports: [ + HomeComponent ] }) export class HomeModule { } From fed84793f3993f47058d901213321f3b0627fa98 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Fri, 3 Nov 2023 17:31:07 +0300 Subject: [PATCH 02/58] clean code up --- src/app/app.component.html | 1 - src/app/app.module.ts | 4 +- .../components/header/header.component.css | 0 .../components/header/header.component.html | 18 --- .../header/header.component.spec.ts | 21 ---- .../components/header/header.component.ts | 68 ----------- src/app/core/components/us/us.component.css | 0 src/app/core/components/us/us.component.html | 20 --- .../core/components/us/us.component.spec.ts | 21 ---- src/app/core/components/us/us.component.ts | 10 -- src/app/core/core.module.ts | 5 +- src/app/features/product.service.spec.ts | 16 --- src/app/features/product.service.ts | 42 ------- .../beverages/beverages.component.css | 0 .../beverages/beverages.component.html | 4 - .../beverages/beverages.component.spec.ts | 21 ---- .../beverages/beverages.component.ts | 94 -------------- .../beverages/coffee/coffee.component.css | 0 .../beverages/coffee/coffee.component.html | 21 ---- .../beverages/coffee/coffee.component.spec.ts | 21 ---- .../beverages/coffee/coffee.component.ts | 115 ------------------ .../pages/beverages/tea/tea.component.css | 0 .../pages/beverages/tea/tea.component.html | 28 ----- .../pages/beverages/tea/tea.component.spec.ts | 21 ---- .../pages/beverages/tea/tea.component.ts | 115 ------------------ .../links/quick-links/projects.component.css | 0 .../links/quick-links/projects.component.html | 21 ---- .../quick-links/projects.component.spec.ts | 21 ---- .../links/quick-links/projects.component.ts | 110 ----------------- .../product-list/product-list.component.css | 0 .../product-list/product-list.component.html | 1 - .../product-list.component.spec.ts | 21 ---- .../product-list/product-list.component.ts | 10 -- .../pages/product/product.component.html | 2 +- .../pages/product/product.component.ts | 13 +- .../pages/products/products-routing.module.ts | 12 -- .../pages/products/products.component.html | 25 ---- .../single-product.component.html | 9 +- .../single-product.component.ts | 8 +- .../products/products-routing.module.ts | 33 +---- src/app/features/products/products.module.ts | 17 +-- .../features/services/scroll.service.spec.ts | 16 --- src/app/features/services/scroll.service.ts | 99 --------------- src/app/home-section/home/home.component.html | 3 - 44 files changed, 9 insertions(+), 1078 deletions(-) delete mode 100644 src/app/core/components/header/header.component.css delete mode 100644 src/app/core/components/header/header.component.html delete mode 100644 src/app/core/components/header/header.component.spec.ts delete mode 100644 src/app/core/components/header/header.component.ts delete mode 100644 src/app/core/components/us/us.component.css delete mode 100644 src/app/core/components/us/us.component.html delete mode 100644 src/app/core/components/us/us.component.spec.ts delete mode 100644 src/app/core/components/us/us.component.ts delete mode 100644 src/app/features/product.service.spec.ts delete mode 100644 src/app/features/product.service.ts delete mode 100644 src/app/features/products/pages/beverages/beverages/beverages.component.css delete mode 100644 src/app/features/products/pages/beverages/beverages/beverages.component.html delete mode 100644 src/app/features/products/pages/beverages/beverages/beverages.component.spec.ts delete mode 100644 src/app/features/products/pages/beverages/beverages/beverages.component.ts delete mode 100644 src/app/features/products/pages/beverages/coffee/coffee.component.css delete mode 100644 src/app/features/products/pages/beverages/coffee/coffee.component.html delete mode 100644 src/app/features/products/pages/beverages/coffee/coffee.component.spec.ts delete mode 100644 src/app/features/products/pages/beverages/coffee/coffee.component.ts delete mode 100644 src/app/features/products/pages/beverages/tea/tea.component.css delete mode 100644 src/app/features/products/pages/beverages/tea/tea.component.html delete mode 100644 src/app/features/products/pages/beverages/tea/tea.component.spec.ts delete mode 100644 src/app/features/products/pages/beverages/tea/tea.component.ts delete mode 100644 src/app/features/products/pages/links/quick-links/projects.component.css delete mode 100644 src/app/features/products/pages/links/quick-links/projects.component.html delete mode 100644 src/app/features/products/pages/links/quick-links/projects.component.spec.ts delete mode 100644 src/app/features/products/pages/links/quick-links/projects.component.ts delete mode 100644 src/app/features/products/pages/product-list/product-list.component.css delete mode 100644 src/app/features/products/pages/product-list/product-list.component.html delete mode 100644 src/app/features/products/pages/product-list/product-list.component.spec.ts delete mode 100644 src/app/features/products/pages/product-list/product-list.component.ts delete mode 100644 src/app/features/products/pages/products/products-routing.module.ts delete mode 100644 src/app/features/services/scroll.service.spec.ts delete mode 100644 src/app/features/services/scroll.service.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 95de8eb..fcfafc8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,3 @@ - diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c443dfc..44b95e1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,7 +4,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import { HomeComponent } from './home-section/home/home.component'; import { HomeModule } from './home-section/home/home.module'; import { ProductsModule } from './features/products/products.module'; @@ -24,7 +23,6 @@ import { CartModule } from './features/cart/cart.module'; import { DataModule } from './data/data.module'; import { CheckoutModule } from './features/checkout/checkout.module'; import { AuthModule } from './features/auth/auth.module'; -import { CurrencyPipe } from '@angular/common'; @NgModule({ @@ -53,7 +51,7 @@ import { CurrencyPipe } from '@angular/common'; AuthModule, ], - providers: [{ provide: LOCALE_ID, useValue: 'en-US' }, CurrencyPipe], + providers: [{ provide: LOCALE_ID, useValue: 'en-US' }], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/core/components/header/header.component.css b/src/app/core/components/header/header.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html deleted file mode 100644 index 2001450..0000000 --- a/src/app/core/components/header/header.component.html +++ /dev/null @@ -1,18 +0,0 @@ -
-
-

LimeStore

-
-
-
- - - -
-
-
\ No newline at end of file diff --git a/src/app/core/components/header/header.component.spec.ts b/src/app/core/components/header/header.component.spec.ts deleted file mode 100644 index f8d8ed5..0000000 --- a/src/app/core/components/header/header.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeaderComponent } from './header.component'; - -describe('HeaderComponent', () => { - let component: HeaderComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [HeaderComponent] - }); - fixture = TestBed.createComponent(HeaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts deleted file mode 100644 index decc9be..0000000 --- a/src/app/core/components/header/header.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { OnInit } from "@angular/core"; -import { CartService } from "src/app/data/services/cart.service"; -import { AuthenticationService } from "../../services/authentication.service"; -import { HeaderService } from "../../services/header.service"; -import { SessionService } from "../../services/session.service"; - -@UntilDestroy({ checkProperties: true }) -@Component({ - selector: 'app-header', - templateUrl: './header.component.html', - styleUrls: ['./header.component.css'] -}) -export class HeaderComponent implements OnInit { - cartAmount: number = 0; - isLoggedIn: boolean = false; - showButtons: boolean = true; - - constructor( - private session: SessionService, - private snackBar: MatSnackBar, - private cart: CartService, - private header: HeaderService, - private auth: AuthenticationService - ) { } - - ngOnInit() { - this.session.isCustomerLoggedIn() - .subscribe( - () => { - this.isLoggedIn = true; - this.session.setLoggedInStatus(true); - } - ); - - this.session.loggedInStatus.subscribe(status => this.isLoggedIn = status); - - this.header.showHeaderButtons.subscribe(visible => this.showButtons = visible); - - this.cart.cartValue$.subscribe(cart => this.cartAmount = cart.itemCount); - } - - logout() { - concat( - this.session.logout(), - this.auth.getClientSession() - ).subscribe( - () => { - this.snackBar.open('You have been logged out.', 'Close', { duration: 4000 }); - this.session.setLoggedInStatus(false); - }, - err => this.snackBar.open('There was a problem logging you out.', 'Close', { duration: 4000 }) - ); - } -} - -function UntilDestroy(arg0: { checkProperties: boolean; }): (target: typeof HeaderComponent) => void | typeof HeaderComponent { - throw new Error("Function not implemented."); -} - - -function Component(arg0: { selector: string; templateUrl: string; styleUrls: string[]; }): (target: typeof HeaderComponent) => void | typeof HeaderComponent { - throw new Error("Function not implemented."); -} - - -function concat(arg0: any, arg1: any) { - throw new Error("Function not implemented."); -} diff --git a/src/app/core/components/us/us.component.css b/src/app/core/components/us/us.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/core/components/us/us.component.html b/src/app/core/components/us/us.component.html deleted file mode 100644 index 4294185..0000000 --- a/src/app/core/components/us/us.component.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
-
-
- Section 1 -
-
-

Section 2

-
-
-

Section 3

-
-
-

Section 4

-
-
-
-
- - diff --git a/src/app/core/components/us/us.component.spec.ts b/src/app/core/components/us/us.component.spec.ts deleted file mode 100644 index 6c1c463..0000000 --- a/src/app/core/components/us/us.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { UsComponent } from './us.component'; - -describe('UsComponent', () => { - let component: UsComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [UsComponent] - }); - fixture = TestBed.createComponent(UsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/core/components/us/us.component.ts b/src/app/core/components/us/us.component.ts deleted file mode 100644 index 518ca30..0000000 --- a/src/app/core/components/us/us.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-us', - templateUrl: './us.component.html', - styleUrls: ['./us.component.css'] -}) -export class UsComponent { - -} diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index a761e9b..db1fe2c 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -3,10 +3,9 @@ import { ErrorComponent } from './components/error/error.component'; import { NotFoundComponent } from './components/not-found/not-found.component'; import { RouterModule } from '@angular/router'; import { SharedModule } from '../shared/shared.module'; -import { UsComponent } from './components/us/us.component'; @NgModule({ - declarations: [NotFoundComponent, ErrorComponent, UsComponent], + declarations: [NotFoundComponent, ErrorComponent], imports: [ RouterModule.forChild([ { path: '404', component: NotFoundComponent }, @@ -16,7 +15,7 @@ import { UsComponent } from './components/us/us.component'; SharedModule ], exports: [ - UsComponent + ] }) export class CoreModule { } diff --git a/src/app/features/product.service.spec.ts b/src/app/features/product.service.spec.ts deleted file mode 100644 index d5c493e..0000000 --- a/src/app/features/product.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { ProductService } from './product.service'; - -describe('ProductService', () => { - let service: ProductService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ProductService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/features/product.service.ts b/src/app/features/product.service.ts deleted file mode 100644 index df38bf7..0000000 --- a/src/app/features/product.service.ts +++ /dev/null @@ -1,42 +0,0 @@ -// import { HttpClient } from '@angular/common/http'; -// import { Injectable } from '@angular/core'; -// import { Observable } from 'rxjs'; -// import { Product } from '../interfaces/product.model'; - -// @Injectable({ -// providedIn: 'root' -// }) -// export class ProductService { - -// productUrl = 'https://api.itbook.store/1.0/'; - -// constructor(private http:HttpClient) { } - -// getAll():Observable{ -// return this.http.get(this.productUrl); -// } -// get(id:any):Observable{ -// return this.http.get(`${this.productUrl}/${id}`); -// } -// create(data:any):Observable{ -// return this.http.post(this.productUrl,data); -// } -// update(id:number, data:any):Observable{ -// return this.http.put(`${this.productUrl}/${id}`,data); -// } -// delete(id:number):Observable{ -// return this.http.delete(`${this.productUrl}/${id}`); -// } -// deleteAll():Observable{ -// return this.http.delete(this.productUrl); -// } -// findByName(product_name:string):Observable{ -// return this.http.get(`${this.productUrl}?name=${product_name}`); -// } -// getImage(id:number):Observable{ -// return this.http.get(`${this.productUrl}/${id}/image`); -// } -// postImage(id:number,data:any):Observable{ -// return this.http.post(`${this.productUrl}/${id}/image`,data); -// } -// } diff --git a/src/app/features/products/pages/beverages/beverages/beverages.component.css b/src/app/features/products/pages/beverages/beverages/beverages.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/features/products/pages/beverages/beverages/beverages.component.html b/src/app/features/products/pages/beverages/beverages/beverages.component.html deleted file mode 100644 index 45980fc..0000000 --- a/src/app/features/products/pages/beverages/beverages/beverages.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/src/app/features/products/pages/beverages/beverages/beverages.component.spec.ts b/src/app/features/products/pages/beverages/beverages/beverages.component.spec.ts deleted file mode 100644 index b7b905f..0000000 --- a/src/app/features/products/pages/beverages/beverages/beverages.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BeveragesComponent } from './beverages.component'; - -describe('BeveragesComponent', () => { - let component: BeveragesComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [BeveragesComponent] - }); - fixture = TestBed.createComponent(BeveragesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/beverages/beverages/beverages.component.ts b/src/app/features/products/pages/beverages/beverages/beverages.component.ts deleted file mode 100644 index dbcbd00..0000000 --- a/src/app/features/products/pages/beverages/beverages/beverages.component.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; - -@Component({ - selector: 'app-beverages', - templateUrl: './beverages.component.html', - styleUrls: ['./beverages.component.css'] -}) -export class BeveragesComponent { - - @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; - - - beverages = [ - { - name: 'Smoothie', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/smoothie.png', - price: 70.00 - }, - { - name: 'Kahawa', - description: 'Discover local spices and flavors', - imageUrl: '/assets/kahawa.png', - price: 70.00 - }, - { - name: 'Mnazi', - description: 'Discover local spices and flavors', - imageUrl: '/assets/mnazi.png', - price: 70.00 - }, - { - name: 'Maji Safi', - description: 'Discover local spices and flavors', - imageUrl: '/assets/water.png', - price: 70.00 - }, - { - name: 'Mango Juice', - description: 'Discover local spices and flavors', - imageUrl: '/assets/ukwaju.png', - price: 70.00 - }, - { - name: 'Ukwaju', - description: 'Discover local spices and flavors', - imageUrl: '/assets/ukaju.png', - price: 70.00 - }, - ]; - - scrollLeft() { - if (this.cardsWrapper) { - const scrollAmount = -300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - scrollRight() { - if (this.cardsWrapper) { - const scrollAmount = 300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - private scrollTo(element: HTMLElement, to: number, duration: number) { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } - - -} diff --git a/src/app/features/products/pages/beverages/coffee/coffee.component.css b/src/app/features/products/pages/beverages/coffee/coffee.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/features/products/pages/beverages/coffee/coffee.component.html b/src/app/features/products/pages/beverages/coffee/coffee.component.html deleted file mode 100644 index fe79d2c..0000000 --- a/src/app/features/products/pages/beverages/coffee/coffee.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
-

Coffee

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

-
-
-
- -
- -
- -
-
- -
- -
-
- - diff --git a/src/app/features/products/pages/beverages/coffee/coffee.component.spec.ts b/src/app/features/products/pages/beverages/coffee/coffee.component.spec.ts deleted file mode 100644 index 7d2b75b..0000000 --- a/src/app/features/products/pages/beverages/coffee/coffee.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CoffeeComponent } from './coffee.component'; - -describe('CoffeeComponent', () => { - let component: CoffeeComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [CoffeeComponent] - }); - fixture = TestBed.createComponent(CoffeeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/beverages/coffee/coffee.component.ts b/src/app/features/products/pages/beverages/coffee/coffee.component.ts deleted file mode 100644 index 6ca5067..0000000 --- a/src/app/features/products/pages/beverages/coffee/coffee.component.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { Router } from '@angular/router'; -import { Product } from 'src/app/features/models/products.product'; - -@Component({ - selector: 'app-coffee', - templateUrl: './coffee.component.html', - styleUrls: ['./coffee.component.css'] -}) -export class CoffeeComponent { - - @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; - - - coffee$: Product[] = [ - { - id: 0, - name: 'Smoothie', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/smoothie.png', - price: 70.00 - }, - { - id: 1, - name: 'Kahawa', - description: 'Discover local spices and flavors', - imageUrl: '/assets/kahawa.png', - price: 70.00 - }, - { - id: 2, - name: 'Mnazi', - description: 'Discover local spices and flavors', - imageUrl: '/assets/mnazi.png', - price: 70.00 - }, - { - id: 3, - name: 'Maji Safi', - description: 'Discover local spices and flavors', - imageUrl: '/assets/water.png', - price: 70.00 - }, - { - id: 4, - name: 'Mango Juice', - description: 'Discover local spices and flavors', - imageUrl: '/assets/ukwaju.png', - price: 70.00 - }, - { - id: 5, - name: 'Ukwaju', - description: 'Discover local spices and flavors', - imageUrl: '/assets/ukaju.png', - price: 70.00 - }, - ]; - - constructor (private route: Router) {} - - scrollLeft() { - if (this.cardsWrapper) { - const scrollAmount = -300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - scrollRight() { - if (this.cardsWrapper) { - const scrollAmount = 300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - private scrollTo(element: HTMLElement, to: number, duration: number) { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } - - navigateToCoffeeDetails(coffee: any) { - if (!coffee) { - throw new Error ('Coffee variable is missing') - - } - this.route.navigate(['/coffee$', coffee.id]) - } - - -} - - - diff --git a/src/app/features/products/pages/beverages/tea/tea.component.css b/src/app/features/products/pages/beverages/tea/tea.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/features/products/pages/beverages/tea/tea.component.html b/src/app/features/products/pages/beverages/tea/tea.component.html deleted file mode 100644 index c332eb6..0000000 --- a/src/app/features/products/pages/beverages/tea/tea.component.html +++ /dev/null @@ -1,28 +0,0 @@ -
-
-

Tea

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

-
-
-
- -
- -
- - -
-
- -
- -
-
- - - diff --git a/src/app/features/products/pages/beverages/tea/tea.component.spec.ts b/src/app/features/products/pages/beverages/tea/tea.component.spec.ts deleted file mode 100644 index bbd8775..0000000 --- a/src/app/features/products/pages/beverages/tea/tea.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { TeaComponent } from './tea.component'; - -describe('TeaComponent', () => { - let component: TeaComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [TeaComponent] - }); - fixture = TestBed.createComponent(TeaComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/beverages/tea/tea.component.ts b/src/app/features/products/pages/beverages/tea/tea.component.ts deleted file mode 100644 index 06b3ec2..0000000 --- a/src/app/features/products/pages/beverages/tea/tea.component.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { Router } from '@angular/router'; -import { Product } from 'src/app/features/models/products.product'; - -@Component({ - selector: 'app-tea', - templateUrl: './tea.component.html', - styleUrls: ['./tea.component.css'] -}) -export class TeaComponent { - - @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; - - - tea$: Product[] = [ - { - id: 0, - name: 'Smoothie', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/smoothie.png', - price: 70.00 - }, - { - id: 1, - name: 'Kahawa', - description: 'Discover local spices and flavors', - imageUrl: '/assets/kahawa.png', - price: 70.00 - }, - { - id: 2, - name: 'Mnazi', - description: 'Discover local spices and flavors', - imageUrl: '/assets/mnazi.png', - price: 70.00 - }, - { - id: 3, - name: 'Maji Safi', - description: 'Discover local spices and flavors', - imageUrl: '/assets/water.png', - price: 70.00 - }, - { - id: 4, - name: 'Mango Juice', - description: 'Discover local spices and flavors', - imageUrl: '/assets/ukwaju.png', - price: 70.00 - }, - { - id: 5, - name: 'Ukwaju', - description: 'Discover local spices and flavors', - imageUrl: '/assets/ukaju.png', - price: 70.00 - }, - ]; - - constructor (private route: Router) {} - - navigateToTeaDetails(tea: any) { - if (!tea) { - throw new Error('Tea variable is missing') - - } - this.route.navigate(['/tea$', tea.id]) - } - - scrollLeft() { - if (this.cardsWrapper) { - const scrollAmount = -300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - scrollRight() { - if (this.cardsWrapper) { - const scrollAmount = 300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - private scrollTo(element: HTMLElement, to: number, duration: number) { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } - - -} - - - diff --git a/src/app/features/products/pages/links/quick-links/projects.component.css b/src/app/features/products/pages/links/quick-links/projects.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/features/products/pages/links/quick-links/projects.component.html b/src/app/features/products/pages/links/quick-links/projects.component.html deleted file mode 100644 index 718bd42..0000000 --- a/src/app/features/products/pages/links/quick-links/projects.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
-

Quick Links

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

-
-
-
- -
- -
- -
-
- -
- -
-
- - diff --git a/src/app/features/products/pages/links/quick-links/projects.component.spec.ts b/src/app/features/products/pages/links/quick-links/projects.component.spec.ts deleted file mode 100644 index d396b2d..0000000 --- a/src/app/features/products/pages/links/quick-links/projects.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ProjectsComponent } from './projects.component'; - -describe('ProjectsComponent', () => { - let component: ProjectsComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ProjectsComponent] - }); - fixture = TestBed.createComponent(ProjectsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/links/quick-links/projects.component.ts b/src/app/features/products/pages/links/quick-links/projects.component.ts deleted file mode 100644 index e87ec14..0000000 --- a/src/app/features/products/pages/links/quick-links/projects.component.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { Router } from '@angular/router'; -import { Product } from 'src/app/features/models/products.product'; - -@Component({ - selector: 'app-projects', - templateUrl: './projects.component.html', - styleUrls: ['./projects.component.css'] -}) -export class ProjectsComponent { - - @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; - - - link$: Product[] = [ - { - id: 0, - name: 'AirBnB', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/accessories.png', - price: 70.00 - }, - { - id: 1, - name: 'Cottages', - description: 'Discover local spices and flavors', - imageUrl: '/assets/palm.jpg', - price: 70.00 - }, - { - id: 2, - name: 'Restaurants', - description: 'Discover local spices and flavors', - imageUrl: '/assets/island-tour.png', - price: 70.00 - }, - { - id: 3, - name: 'Maji Safi', - description: 'Discover local spices and flavors', - imageUrl: '/assets/travel.jpg', - price: 70.00 - }, - { - id: 4, - name: 'Mountains', - description: 'Discover local spices and flavors', - imageUrl: '/assets/travel.jpg', - price: 70.00 - }, - { - id: 5, - name: 'Game Parks', - description: 'Discover local spices and flavors', - imageUrl: '/assets/travel.jpg', - price: 70.00 - }, - ]; - - constructor(private router: Router) {} - - scrollLeft() { - if (this.cardsWrapper) { - const scrollAmount = -300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - scrollRight() { - if (this.cardsWrapper) { - const scrollAmount = 300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - private scrollTo(element: HTMLElement, to: number, duration: number) { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } - - navigateToLinkDetail(link: any) { - if (!link) { - throw new Error('The link variable is undefined'); - } - this.router.navigate(['/link$', link.id]); - } - -} diff --git a/src/app/features/products/pages/product-list/product-list.component.css b/src/app/features/products/pages/product-list/product-list.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/features/products/pages/product-list/product-list.component.html b/src/app/features/products/pages/product-list/product-list.component.html deleted file mode 100644 index 367cfef..0000000 --- a/src/app/features/products/pages/product-list/product-list.component.html +++ /dev/null @@ -1 +0,0 @@ -

product-list works!

diff --git a/src/app/features/products/pages/product-list/product-list.component.spec.ts b/src/app/features/products/pages/product-list/product-list.component.spec.ts deleted file mode 100644 index 8878d40..0000000 --- a/src/app/features/products/pages/product-list/product-list.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ProductListComponent } from './product-list.component'; - -describe('ProductListComponent', () => { - let component: ProductListComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ProductListComponent] - }); - fixture = TestBed.createComponent(ProductListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/product-list/product-list.component.ts b/src/app/features/products/pages/product-list/product-list.component.ts deleted file mode 100644 index fb5fc9f..0000000 --- a/src/app/features/products/pages/product-list/product-list.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-product-list', - templateUrl: './product-list.component.html', - styleUrls: ['./product-list.component.css'] -}) -export class ProductListComponent { - -} diff --git a/src/app/features/products/pages/product/product.component.html b/src/app/features/products/pages/product/product.component.html index 98a2ae5..de235ac 100644 --- a/src/app/features/products/pages/product/product.component.html +++ b/src/app/features/products/pages/product/product.component.html @@ -1,5 +1,5 @@
- Tour Site Image + Product Image

{{ product.name }}

{{ product.description }}

Price: {{ product.price | currency:'USD':'symbol':'1.2-2' }} diff --git a/src/app/features/products/pages/product/product.component.ts b/src/app/features/products/pages/product/product.component.ts index f52c313..12656aa 100644 --- a/src/app/features/products/pages/product/product.component.ts +++ b/src/app/features/products/pages/product/product.component.ts @@ -17,9 +17,7 @@ export class ProductComponent { imageUrl: '', price: 0 }; - @Output() scrollLeftClick: EventEmitter = new EventEmitter(); - @Output() scrollRightClick: EventEmitter = new EventEmitter(); - + scrollLeft() { if (this.cardsWrapper) { const scrollAmount = -300; @@ -61,13 +59,4 @@ export class ProductComponent { return -c / 2 * (t * (t - 2) - 1) + b; } - onScrollLeftClick() { - this.scrollLeftClick.emit(); - } - - onScrollRightClick() { - this.scrollRightClick.emit(); - } - - } diff --git a/src/app/features/products/pages/products/products-routing.module.ts b/src/app/features/products/pages/products/products-routing.module.ts deleted file mode 100644 index 9a50267..0000000 --- a/src/app/features/products/pages/products/products-routing.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -const routes: Routes = [ - -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class ProductsRoutingModule { } diff --git a/src/app/features/products/pages/products/products.component.html b/src/app/features/products/pages/products/products.component.html index d4e4c71..a0d9705 100644 --- a/src/app/features/products/pages/products/products.component.html +++ b/src/app/features/products/pages/products/products.component.html @@ -1,30 +1,5 @@
- -
- diff --git a/src/app/features/products/pages/single-product/single-product.component.html b/src/app/features/products/pages/single-product/single-product.component.html index 5ea9cfd..b74e6c9 100644 --- a/src/app/features/products/pages/single-product/single-product.component.html +++ b/src/app/features/products/pages/single-product/single-product.component.html @@ -2,16 +2,9 @@ {{ product.name }}

{{ product.name }}

{{ product.description }}

- Price: {{ formattedPrice }} + Price: {{ product.price }}
- \ No newline at end of file diff --git a/src/app/features/products/pages/single-product/single-product.component.ts b/src/app/features/products/pages/single-product/single-product.component.ts index fde92e2..0fee399 100644 --- a/src/app/features/products/pages/single-product/single-product.component.ts +++ b/src/app/features/products/pages/single-product/single-product.component.ts @@ -1,8 +1,5 @@ import { Component, Input, OnInit } from '@angular/core'; import { Product } from '../../../models/products.product'; -import { ActivatedRoute } from '@angular/router'; -import { ToursComponent } from '../tours/tours.component'; -import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-single-product', @@ -19,13 +16,10 @@ export class SingleProductComponent implements OnInit{ price: 0 }; - formattedPrice: any; - - constructor(private currencyPipe: CurrencyPipe) { + constructor() { } ngOnInit(): void { - this.formattedPrice = this.currencyPipe.transform(this.product.price); } buyNow() { diff --git a/src/app/features/products/products-routing.module.ts b/src/app/features/products/products-routing.module.ts index 4940dbe..ad14b75 100644 --- a/src/app/features/products/products-routing.module.ts +++ b/src/app/features/products/products-routing.module.ts @@ -6,8 +6,6 @@ import { ProductsComponent } from './pages/products/products.component'; import { ClothingComponent } from './pages/clothing/clothing/clothing.component'; import { HomeMadeComponent } from './pages/clothing/home-made/home-made.component'; import { ImportsComponent } from './pages/clothing/imports/imports.component'; -import { BeveragesComponent } from './pages/beverages/beverages/beverages.component'; -import { ProjectsComponent } from './pages/links/quick-links/projects.component'; const routes: Routes = [ @@ -39,36 +37,7 @@ const routes: Routes = [ }, { path: 'imports/:id', component: SingleProductComponent - }, - - { - path: 'beverages', - component: BeveragesComponent, - }, - { - path: 'tea', - component: BeveragesComponent, - }, - { - path: 'tea$/:id', component: SingleProductComponent - }, - { - path: 'coffee', - component: BeveragesComponent, - }, - - { - path: 'coffee$/:id', component: SingleProductComponent - }, - - { - path: 'links', - component: ProjectsComponent, - }, - - { - path: 'link$/:id', component: SingleProductComponent - }, + } ]; diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index 9b7e7e0..ecd439b 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -5,7 +5,6 @@ import {MatGridListModule} from '@angular/material/grid-list'; import { ProductsRoutingModule } from './products-routing.module'; -import { ProductListComponent } from './pages/product-list/product-list.component'; import { ProductsComponent } from './pages/products/products.component'; import { ProductComponent } from './pages/product/product.component'; import { ToursComponent } from './pages/tours/tours.component'; @@ -13,26 +12,16 @@ import { SingleProductComponent } from './pages/single-product/single-product.co import { ClothingComponent } from './pages/clothing/clothing/clothing.component'; import { ImportsComponent } from './pages/clothing/imports/imports.component'; import { HomeMadeComponent } from './pages/clothing/home-made/home-made.component'; -import { BeveragesComponent } from './pages/beverages/beverages/beverages.component'; -import { CoffeeComponent } from './pages/beverages/coffee/coffee.component'; -import { TeaComponent } from './pages/beverages/tea/tea.component'; -import { ProjectsComponent } from './pages/links/quick-links/projects.component'; - @NgModule({ declarations: [ ProductComponent, ProductsComponent, - ProductListComponent, ToursComponent, SingleProductComponent, ClothingComponent, ImportsComponent, HomeMadeComponent, - BeveragesComponent, - TeaComponent, - CoffeeComponent, - ProjectsComponent ], imports: [ CommonModule, @@ -45,11 +34,7 @@ import { ProjectsComponent } from './pages/links/quick-links/projects.component' SingleProductComponent, ClothingComponent, ImportsComponent, - HomeMadeComponent, - BeveragesComponent, - TeaComponent, - CoffeeComponent, - ProjectsComponent + HomeMadeComponent ] }) export class ProductsModule { } diff --git a/src/app/features/services/scroll.service.spec.ts b/src/app/features/services/scroll.service.spec.ts deleted file mode 100644 index 725042d..0000000 --- a/src/app/features/services/scroll.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { ScrollService } from './scroll.service'; - -describe('ScrollService', () => { - let service: ScrollService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ScrollService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/features/services/scroll.service.ts b/src/app/features/services/scroll.service.ts deleted file mode 100644 index 0accdb7..0000000 --- a/src/app/features/services/scroll.service.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class ScrollService { - - private currentPosition = 0; - private totalWidth = 0; // Initialize with 0 - - constructor() { } - - setCardWidth(width: number): void { - this.totalWidth += width; - } - - setNumCards(num: number): void { - this.totalWidth = num * this.currentCardWidth(); - } - currentCardWidth() { - return this.totalWidth / this.totalNumCards(); - } - totalNumCards(): number { - return Math.max(this.totalWidth/ this.currentCardWidth(), 1) - } - - scrollLeft(element: HTMLElement, duration: number): void { - const currentScroll = element.scrollLeft; - const cardWidth = this.currentCardWidth(); - const totalWidth = this.totalWidth; - - let targetScroll = currentScroll - cardWidth; - - // If the target scroll position is negative, wrap around to the end - if (targetScroll < 0) { - targetScroll = totalWidth - cardWidth; - } - - this.scrollTo(element, targetScroll, duration); -} - -scrollRight(element: HTMLElement, duration: number): void { - const currentScroll = element.scrollLeft; - const cardWidth = this.currentCardWidth(); - const totalWidth = this.totalWidth; - - let targetScroll = currentScroll + cardWidth; - - // If the target scroll position is greater than the total width, wrap around to the beginning - if (targetScroll > totalWidth) { - targetScroll = 0; - } - - this.scrollTo(element, targetScroll, duration); -} - - - scrollToStart(element: HTMLElement, duration: number): void { - this.scrollTo(element, 0, duration); - } - - scrollToEnd(element: HTMLElement, duration: number): void { - const maxScroll = this.totalWidth * this.currentPosition; - this.scrollTo(element, maxScroll, duration); - } - - scrollTo(element: HTMLElement, to: number, duration: number): void { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } else { - // Handle endless scrolling (loop back to the beginning or end) - if (element.scrollLeft === 0) { - element.scrollLeft = this.totalWidth * (this.currentPosition - 1); - } else if (element.scrollLeft >= this.totalWidth * (this.currentPosition - 1)) { - element.scrollLeft = 0; - } - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } -} diff --git a/src/app/home-section/home/home.component.html b/src/app/home-section/home/home.component.html index 54e3c8f..d9eaa92 100644 --- a/src/app/home-section/home/home.component.html +++ b/src/app/home-section/home/home.component.html @@ -84,13 +84,10 @@

Quick Links

-
- -
From 8d1a91dff54d86015350682ef3a7536854c8f189 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Fri, 3 Nov 2023 17:52:52 +0300 Subject: [PATCH 03/58] add clothes page --- .../pages/clothes/kids/kids.component.css | 0 .../pages/clothes/kids/kids.component.html | 20 ++++++++++++++++ .../pages/clothes/kids/kids.component.spec.ts | 21 +++++++++++++++++ .../pages/clothes/kids/kids.component.ts | 23 +++++++++++++++++++ .../pages/clothes/men/men.component.css | 0 .../pages/clothes/men/men.component.html | 20 ++++++++++++++++ .../pages/clothes/men/men.component.spec.ts | 21 +++++++++++++++++ .../pages/clothes/men/men.component.ts | 23 +++++++++++++++++++ .../pages/clothes/women/women.component.css | 0 .../pages/clothes/women/women.component.html | 20 ++++++++++++++++ .../clothes/women/women.component.spec.ts | 21 +++++++++++++++++ .../pages/clothes/women/women.component.ts | 22 ++++++++++++++++++ src/app/features/products/products.module.ts | 6 +++++ 13 files changed, 197 insertions(+) create mode 100644 src/app/features/products/pages/clothes/kids/kids.component.css create mode 100644 src/app/features/products/pages/clothes/kids/kids.component.html create mode 100644 src/app/features/products/pages/clothes/kids/kids.component.spec.ts create mode 100644 src/app/features/products/pages/clothes/kids/kids.component.ts create mode 100644 src/app/features/products/pages/clothes/men/men.component.css create mode 100644 src/app/features/products/pages/clothes/men/men.component.html create mode 100644 src/app/features/products/pages/clothes/men/men.component.spec.ts create mode 100644 src/app/features/products/pages/clothes/men/men.component.ts create mode 100644 src/app/features/products/pages/clothes/women/women.component.css create mode 100644 src/app/features/products/pages/clothes/women/women.component.html create mode 100644 src/app/features/products/pages/clothes/women/women.component.spec.ts create mode 100644 src/app/features/products/pages/clothes/women/women.component.ts diff --git a/src/app/features/products/pages/clothes/kids/kids.component.css b/src/app/features/products/pages/clothes/kids/kids.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/products/pages/clothes/kids/kids.component.html b/src/app/features/products/pages/clothes/kids/kids.component.html new file mode 100644 index 0000000..f2aad38 --- /dev/null +++ b/src/app/features/products/pages/clothes/kids/kids.component.html @@ -0,0 +1,20 @@ +
+
+

Kid's Latest

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

+
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+ diff --git a/src/app/features/products/pages/clothes/kids/kids.component.spec.ts b/src/app/features/products/pages/clothes/kids/kids.component.spec.ts new file mode 100644 index 0000000..b8f60f2 --- /dev/null +++ b/src/app/features/products/pages/clothes/kids/kids.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { KidsComponent } from './kids.component'; + +describe('KidsComponent', () => { + let component: KidsComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [KidsComponent] + }); + fixture = TestBed.createComponent(KidsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/products/pages/clothes/kids/kids.component.ts b/src/app/features/products/pages/clothes/kids/kids.component.ts new file mode 100644 index 0000000..75d0208 --- /dev/null +++ b/src/app/features/products/pages/clothes/kids/kids.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { Product } from 'src/app/features/models/products.product'; + +@Component({ + selector: 'app-kids', + templateUrl: './kids.component.html', + styleUrls: ['./kids.component.css'] +}) +export class KidsComponent { + + kids: Product[] = []; +scrollRight() { +throw new Error('Method not implemented.'); +} +navigateToClotheDetail(arg0: any) { +throw new Error('Method not implemented.'); +} + +scrollLeft() { +throw new Error('Method not implemented.'); +} + +} diff --git a/src/app/features/products/pages/clothes/men/men.component.css b/src/app/features/products/pages/clothes/men/men.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/products/pages/clothes/men/men.component.html b/src/app/features/products/pages/clothes/men/men.component.html new file mode 100644 index 0000000..bff48a6 --- /dev/null +++ b/src/app/features/products/pages/clothes/men/men.component.html @@ -0,0 +1,20 @@ +
+
+

Men's Latest

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

+
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+ diff --git a/src/app/features/products/pages/clothes/men/men.component.spec.ts b/src/app/features/products/pages/clothes/men/men.component.spec.ts new file mode 100644 index 0000000..a98b458 --- /dev/null +++ b/src/app/features/products/pages/clothes/men/men.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MenComponent } from './men.component'; + +describe('MenComponent', () => { + let component: MenComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [MenComponent] + }); + fixture = TestBed.createComponent(MenComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/products/pages/clothes/men/men.component.ts b/src/app/features/products/pages/clothes/men/men.component.ts new file mode 100644 index 0000000..fc703af --- /dev/null +++ b/src/app/features/products/pages/clothes/men/men.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { Product } from 'src/app/features/models/products.product'; + +@Component({ + selector: 'app-men', + templateUrl: './men.component.html', + styleUrls: ['./men.component.css'] +}) +export class MenComponent { + + men$!: Product[]; +scrollRight() { +throw new Error('Method not implemented.'); +} +navigateToClotheDetail(_t11: any) { +throw new Error('Method not implemented.'); +} + +scrollLeft() { +throw new Error('Method not implemented.'); +} + +} diff --git a/src/app/features/products/pages/clothes/women/women.component.css b/src/app/features/products/pages/clothes/women/women.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/products/pages/clothes/women/women.component.html b/src/app/features/products/pages/clothes/women/women.component.html new file mode 100644 index 0000000..bc9891d --- /dev/null +++ b/src/app/features/products/pages/clothes/women/women.component.html @@ -0,0 +1,20 @@ +
+
+

Women's Latest

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

+
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+ diff --git a/src/app/features/products/pages/clothes/women/women.component.spec.ts b/src/app/features/products/pages/clothes/women/women.component.spec.ts new file mode 100644 index 0000000..23fb368 --- /dev/null +++ b/src/app/features/products/pages/clothes/women/women.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WomenComponent } from './women.component'; + +describe('WomenComponent', () => { + let component: WomenComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [WomenComponent] + }); + fixture = TestBed.createComponent(WomenComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/products/pages/clothes/women/women.component.ts b/src/app/features/products/pages/clothes/women/women.component.ts new file mode 100644 index 0000000..50e97f5 --- /dev/null +++ b/src/app/features/products/pages/clothes/women/women.component.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; +import { Product } from 'src/app/features/models/products.product'; + +@Component({ + selector: 'app-women', + templateUrl: './women.component.html', + styleUrls: ['./women.component.css'] +}) +export class WomenComponent { + + women$!: Product[]; +navigateToClotheDetail(_t11: any) { +throw new Error('Method not implemented.'); +} +scrollRight() { +throw new Error('Method not implemented.'); +} +scrollLeft() { +throw new Error('Method not implemented.'); +} + +} diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index ecd439b..d9c748f 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -12,6 +12,9 @@ import { SingleProductComponent } from './pages/single-product/single-product.co import { ClothingComponent } from './pages/clothing/clothing/clothing.component'; import { ImportsComponent } from './pages/clothing/imports/imports.component'; import { HomeMadeComponent } from './pages/clothing/home-made/home-made.component'; +import { MenComponent } from './pages/clothes/men/men.component'; +import { WomenComponent } from './pages/clothes/women/women.component'; +import { KidsComponent } from './pages/clothes/kids/kids.component'; @NgModule({ declarations: [ @@ -22,6 +25,9 @@ import { HomeMadeComponent } from './pages/clothing/home-made/home-made.componen ClothingComponent, ImportsComponent, HomeMadeComponent, + MenComponent, + WomenComponent, + KidsComponent, ], imports: [ CommonModule, From 07c6ab5c11f3521ca8bd65d5b29996b8a12fa3b3 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Fri, 3 Nov 2023 19:38:28 +0300 Subject: [PATCH 04/58] add services to retrieve data from db --- .../pages/clothes/kids/kids.component.html | 2 +- .../pages/clothes/kids/kids.component.ts | 75 +++++++++++++++++- .../pages/clothes/men/men.component.html | 2 +- .../pages/clothes/men/men.component.ts | 77 ++++++++++++++++++- .../pages/clothes/women/women.component.html | 2 +- .../pages/clothes/women/women.component.ts | 77 ++++++++++++++++++- src/app/features/services/api.service.spec.ts | 16 ++++ src/app/features/services/api.service.ts | 10 +++ .../features/services/kids.service.spec.ts | 16 ++++ src/app/features/services/kids.service.ts | 42 ++++++++++ src/app/features/services/men.service.spec.ts | 16 ++++ src/app/features/services/men.service.ts | 42 ++++++++++ .../features/services/women.service.spec.ts | 16 ++++ src/app/features/services/women.service.ts | 43 +++++++++++ 14 files changed, 428 insertions(+), 8 deletions(-) create mode 100644 src/app/features/services/api.service.spec.ts create mode 100644 src/app/features/services/api.service.ts create mode 100644 src/app/features/services/kids.service.spec.ts create mode 100644 src/app/features/services/kids.service.ts create mode 100644 src/app/features/services/men.service.spec.ts create mode 100644 src/app/features/services/men.service.ts create mode 100644 src/app/features/services/women.service.spec.ts create mode 100644 src/app/features/services/women.service.ts diff --git a/src/app/features/products/pages/clothes/kids/kids.component.html b/src/app/features/products/pages/clothes/kids/kids.component.html index f2aad38..59236e2 100644 --- a/src/app/features/products/pages/clothes/kids/kids.component.html +++ b/src/app/features/products/pages/clothes/kids/kids.component.html @@ -9,7 +9,7 @@

Kid's Latest

- +
diff --git a/src/app/features/products/pages/clothes/kids/kids.component.ts b/src/app/features/products/pages/clothes/kids/kids.component.ts index 75d0208..207c40f 100644 --- a/src/app/features/products/pages/clothes/kids/kids.component.ts +++ b/src/app/features/products/pages/clothes/kids/kids.component.ts @@ -1,5 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { Product } from 'src/app/features/models/products.product'; +import { KidsService } from 'src/app/features/services/kids.service'; @Component({ selector: 'app-kids', @@ -8,7 +9,79 @@ import { Product } from 'src/app/features/models/products.product'; }) export class KidsComponent { + @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; + kids: Product[] = []; + currentKid: Product = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + } + + currentIndex: number = -1; + name: string = ''; + + +constructor(private kidsService: KidsService) {} + +ngOnInit(): void { + this.retrieveKids(); +} + + retrieveKids(): void { + this.kidsService.getAll().subscribe({ + next: (data) => { + this.kids = data; + console.log("Kids", data); + } + }) + } + + refreshList(): void { + this.retrieveKids(); + this.currentKid = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + }; + this.currentIndex = -1; + } + + setActiveKid(kid: Product, index: number): void { + this.currentKid = kid; + this.currentIndex = index; + } + + removeAllKids(): void { + this.kidsService.deleteAll().subscribe({ + next: (response) => { + console.log(response); + this.refreshList(); + } + }) + } + + searchName(): void { + this.currentKid = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + }; + this.currentIndex = -1; + this.kidsService.findByName(this.name).subscribe({ + next: (data) => { + this.kids = data; + console.log("Kids", data); + } + }) + } + scrollRight() { throw new Error('Method not implemented.'); } diff --git a/src/app/features/products/pages/clothes/men/men.component.html b/src/app/features/products/pages/clothes/men/men.component.html index bff48a6..16d50bf 100644 --- a/src/app/features/products/pages/clothes/men/men.component.html +++ b/src/app/features/products/pages/clothes/men/men.component.html @@ -9,7 +9,7 @@

Men's Latest

- +
diff --git a/src/app/features/products/pages/clothes/men/men.component.ts b/src/app/features/products/pages/clothes/men/men.component.ts index fc703af..c78675d 100644 --- a/src/app/features/products/pages/clothes/men/men.component.ts +++ b/src/app/features/products/pages/clothes/men/men.component.ts @@ -1,5 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { Product } from 'src/app/features/models/products.product'; +import { MenService } from 'src/app/features/services/men.service'; @Component({ selector: 'app-men', @@ -8,7 +9,79 @@ import { Product } from 'src/app/features/models/products.product'; }) export class MenComponent { - men$!: Product[]; + @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; + + men$: Product[] = []; + currentMan: Product = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + } + + currentIndex: number = -1; + name: string = ''; + + +constructor(private menService: MenService) {} + +ngOnInit(): void { + this.retrieveMen(); +} + + retrieveMen(): void { + this.menService.getAll().subscribe({ + next: (data) => { + this.men$ = data; + console.log("Men", data); + } + }) + } + + refreshList(): void { + this.retrieveMen(); + this.currentMan = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + }; + this.currentIndex = -1; + } + + setActiveMan(man: Product, index: number): void { + this.currentMan = man; + this.currentIndex = index; + } + + removeAllMen(): void { + this.menService.deleteAll().subscribe({ + next: (response) => { + console.log(response); + this.refreshList(); + } + }) + } + + searchName(): void { + this.currentMan = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + }; + this.currentIndex = -1; + this.menService.findByName(this.name).subscribe({ + next: (data) => { + this.men$ = data; + console.log("Men", data); + } + }) + } + scrollRight() { throw new Error('Method not implemented.'); } diff --git a/src/app/features/products/pages/clothes/women/women.component.html b/src/app/features/products/pages/clothes/women/women.component.html index bc9891d..ad644d8 100644 --- a/src/app/features/products/pages/clothes/women/women.component.html +++ b/src/app/features/products/pages/clothes/women/women.component.html @@ -9,7 +9,7 @@

Women's Latest

- +
diff --git a/src/app/features/products/pages/clothes/women/women.component.ts b/src/app/features/products/pages/clothes/women/women.component.ts index 50e97f5..520eebc 100644 --- a/src/app/features/products/pages/clothes/women/women.component.ts +++ b/src/app/features/products/pages/clothes/women/women.component.ts @@ -1,5 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { Product } from 'src/app/features/models/products.product'; +import { WomenService } from 'src/app/features/services/women.service'; @Component({ selector: 'app-women', @@ -7,8 +8,80 @@ import { Product } from 'src/app/features/models/products.product'; styleUrls: ['./women.component.css'] }) export class WomenComponent { + @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; + + women$: Product[] = []; + currentWoman: Product = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + } + + currentIndex: number = -1; + name: string = ''; + + +constructor(private womenService: WomenService) {} + +ngOnInit(): void { + this.retrieveWomen(); +} + + retrieveWomen(): void { + this.womenService.getAll().subscribe({ + next: (data) => { + this.women$ = data; + console.log("Women", data); + } + }) + } + + refreshList(): void { + this.retrieveWomen(); + this.currentWoman = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + }; + this.currentIndex = -1; + } + + setActiveWoman(woman: Product, index: number): void { + this.currentWoman = woman; + this.currentIndex = index; + } + + removeAllWomen(): void { + this.womenService.deleteAll().subscribe({ + next: (response) => { + console.log(response); + this.refreshList(); + } + }) + } + + searchName(): void { + this.currentWoman = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + }; + this.currentIndex = -1; + this.womenService.findByName(this.name).subscribe({ + next: (data) => { + this.women$ = data; + console.log("Women", data); + } + }) + } + - women$!: Product[]; navigateToClotheDetail(_t11: any) { throw new Error('Method not implemented.'); } diff --git a/src/app/features/services/api.service.spec.ts b/src/app/features/services/api.service.spec.ts new file mode 100644 index 0000000..c0310ae --- /dev/null +++ b/src/app/features/services/api.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ApiService } from './api.service'; + +describe('ApiService', () => { + let service: ApiService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ApiService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/features/services/api.service.ts b/src/app/features/services/api.service.ts new file mode 100644 index 0000000..5b24a9f --- /dev/null +++ b/src/app/features/services/api.service.ts @@ -0,0 +1,10 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class ApiService { + public baseUrl: string = 'http://localhost.4200'; + + constructor() { } +} diff --git a/src/app/features/services/kids.service.spec.ts b/src/app/features/services/kids.service.spec.ts new file mode 100644 index 0000000..fb0d941 --- /dev/null +++ b/src/app/features/services/kids.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { KidsService } from './kids.service'; + +describe('KidsService', () => { + let service: KidsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(KidsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/features/services/kids.service.ts b/src/app/features/services/kids.service.ts new file mode 100644 index 0000000..96a8069 --- /dev/null +++ b/src/app/features/services/kids.service.ts @@ -0,0 +1,42 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Product } from '../models/products.product'; +import { ApiService } from './api.service'; + +@Injectable({ + providedIn: 'root' +}) +export class KidsService { + private url: string = `${this.apiService.baseUrl}/kids`; + + constructor(private http: HttpClient, private apiService: ApiService) { } + + getAll():Observable{ + return this.http.get(this.url); + } + get(id:any):Observable{ + return this.http.get(`${this.url}/${id}`); + } + create(data:any):Observable{ + return this.http.post(this.url,data); + } + update(id:number, data:any):Observable{ + return this.http.put(`${this.url}/${id}`,data); + } + delete(id:number):Observable{ + return this.http.delete(`${this.url}/${id}`); + } + deleteAll():Observable{ + return this.http.delete(this.url); + } + findByName(name:string):Observable{ + return this.http.get(`${this.url}?name=${name}`); + } + getImage(id:number):Observable{ + return this.http.get(`${this.url}/${id}/image`); + } + postImage(id:number,data:any):Observable{ + return this.http.post(`${this.url}/${id}/image`,data); + } +} diff --git a/src/app/features/services/men.service.spec.ts b/src/app/features/services/men.service.spec.ts new file mode 100644 index 0000000..d1a836d --- /dev/null +++ b/src/app/features/services/men.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { MenService } from './men.service'; + +describe('MenService', () => { + let service: MenService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(MenService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/features/services/men.service.ts b/src/app/features/services/men.service.ts new file mode 100644 index 0000000..422b773 --- /dev/null +++ b/src/app/features/services/men.service.ts @@ -0,0 +1,42 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Product } from '../models/products.product'; +import { ApiService } from './api.service'; + +@Injectable({ + providedIn: 'root' +}) +export class MenService { + private url: string = `${this.apiService.baseUrl}/men`; + + constructor(private http: HttpClient, private apiService: ApiService) { } + + getAll():Observable{ + return this.http.get(this.url); + } + get(id:any):Observable{ + return this.http.get(`${this.url}/${id}`); + } + create(data:any):Observable{ + return this.http.post(this.url,data); + } + update(id:number, data:any):Observable{ + return this.http.put(`${this.url}/${id}`,data); + } + delete(id:number):Observable{ + return this.http.delete(`${this.url}/${id}`); + } + deleteAll():Observable{ + return this.http.delete(this.url); + } + findByName(name:string):Observable{ + return this.http.get(`${this.url}?name=${name}`); + } + getImage(id:number):Observable{ + return this.http.get(`${this.url}/${id}/image`); + } + postImage(id:number,data:any):Observable{ + return this.http.post(`${this.url}/${id}/image`,data); + } +} diff --git a/src/app/features/services/women.service.spec.ts b/src/app/features/services/women.service.spec.ts new file mode 100644 index 0000000..b6a024a --- /dev/null +++ b/src/app/features/services/women.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { WomenService } from './women.service'; + +describe('WomenService', () => { + let service: WomenService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(WomenService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/features/services/women.service.ts b/src/app/features/services/women.service.ts new file mode 100644 index 0000000..c975690 --- /dev/null +++ b/src/app/features/services/women.service.ts @@ -0,0 +1,43 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Product } from '../models/products.product'; +import { ApiService } from './api.service'; + +@Injectable({ + providedIn: 'root' +}) +export class WomenService { + + private url: string = `${this.apiService.baseUrl}/women`; + + constructor(private http: HttpClient, private apiService: ApiService) { } + + getAll():Observable{ + return this.http.get(this.url); + } + get(id:any):Observable{ + return this.http.get(`${this.url}/${id}`); + } + create(data:any):Observable{ + return this.http.post(this.url,data); + } + update(id:number, data:any):Observable{ + return this.http.put(`${this.url}/${id}`,data); + } + delete(id:number):Observable{ + return this.http.delete(`${this.url}/${id}`); + } + deleteAll():Observable{ + return this.http.delete(this.url); + } + findByName(name:string):Observable{ + return this.http.get(`${this.url}?name=${name}`); + } + getImage(id:number):Observable{ + return this.http.get(`${this.url}/${id}/image`); + } + postImage(id:number,data:any):Observable{ + return this.http.post(`${this.url}/${id}/image`,data); + } +} From fde56c86cd181e008f5447ae33d363780d83c6a0 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Fri, 3 Nov 2023 19:41:08 +0300 Subject: [PATCH 05/58] refactor: fix base url for api --- src/app/features/services/api.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/features/services/api.service.ts b/src/app/features/services/api.service.ts index 5b24a9f..964c6ad 100644 --- a/src/app/features/services/api.service.ts +++ b/src/app/features/services/api.service.ts @@ -4,7 +4,7 @@ import { Injectable } from '@angular/core'; providedIn: 'root' }) export class ApiService { - public baseUrl: string = 'http://localhost.4200'; + public baseUrl: string = 'http://localhost:4567'; constructor() { } } From ac9c6bf48ea1ac3ecce99f221b5571132b99e030 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Tue, 7 Nov 2023 18:23:55 +0300 Subject: [PATCH 06/58] add a list of kids clothes --- src/app/app.module.ts | 3 ++- .../features/products/pages/clothes/kids/kids.component.html | 2 +- src/app/features/products/products.module.ts | 3 ++- src/app/home-section/home/home.component.html | 1 + 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 44b95e1..94bbb05 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,6 +23,7 @@ import { CartModule } from './features/cart/cart.module'; import { DataModule } from './data/data.module'; import { CheckoutModule } from './features/checkout/checkout.module'; import { AuthModule } from './features/auth/auth.module'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ @@ -49,7 +50,7 @@ import { AuthModule } from './features/auth/auth.module'; DataModule, CheckoutModule, AuthModule, - + HttpClientModule ], providers: [{ provide: LOCALE_ID, useValue: 'en-US' }], bootstrap: [AppComponent] diff --git a/src/app/features/products/pages/clothes/kids/kids.component.html b/src/app/features/products/pages/clothes/kids/kids.component.html index 59236e2..8344225 100644 --- a/src/app/features/products/pages/clothes/kids/kids.component.html +++ b/src/app/features/products/pages/clothes/kids/kids.component.html @@ -9,7 +9,7 @@

Kid's Latest

- +
diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index d9c748f..11692a5 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -40,7 +40,8 @@ import { KidsComponent } from './pages/clothes/kids/kids.component'; SingleProductComponent, ClothingComponent, ImportsComponent, - HomeMadeComponent + HomeMadeComponent, + KidsComponent ] }) export class ProductsModule { } diff --git a/src/app/home-section/home/home.component.html b/src/app/home-section/home/home.component.html index d9eaa92..258a8da 100644 --- a/src/app/home-section/home/home.component.html +++ b/src/app/home-section/home/home.component.html @@ -86,6 +86,7 @@

Quick Links

+
From 07dfa40d48edd5420ee8c8ca10860759ab8b4789 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Tue, 7 Nov 2023 18:40:01 +0300 Subject: [PATCH 07/58] add kid detail component --- .../kid-detail/kid-detail.component.css | 7 +++++ .../kid-detail/kid-detail.component.html | 10 ++++++ .../kid-detail/kid-detail.component.spec.ts | 21 +++++++++++++ .../kid-detail/kid-detail.component.ts | 31 +++++++++++++++++++ .../pages/clothes/kids/kids.component.html | 2 +- .../products/products-routing.module.ts | 9 ++++++ src/app/features/products/products.module.ts | 2 ++ 7 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css create mode 100644 src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html create mode 100644 src/app/features/products/pages/clothes/kid-detail/kid-detail.component.spec.ts create mode 100644 src/app/features/products/pages/clothes/kid-detail/kid-detail.component.ts diff --git a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css new file mode 100644 index 0000000..c7e7f35 --- /dev/null +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css @@ -0,0 +1,7 @@ +.product-detail { + height: 80vh; +} + +img { + height: 500px; +} \ No newline at end of file diff --git a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html new file mode 100644 index 0000000..d8bd1a3 --- /dev/null +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html @@ -0,0 +1,10 @@ +
+ {{ product.name }} +

{{ product.name }}

+

{{ product.description }}

+ Price: {{ product.price }} + + +
+ + diff --git a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.spec.ts b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.spec.ts new file mode 100644 index 0000000..f99897c --- /dev/null +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { KidDetailComponent } from './kid-detail.component'; + +describe('KidDetailComponent', () => { + let component: KidDetailComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [KidDetailComponent] + }); + fixture = TestBed.createComponent(KidDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.ts b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.ts new file mode 100644 index 0000000..5cc79c6 --- /dev/null +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.ts @@ -0,0 +1,31 @@ +import { Component, Input } from '@angular/core'; +import { Product } from 'src/app/features/models/products.product'; + +@Component({ + selector: 'app-kid-detail', + templateUrl: './kid-detail.component.html', + styleUrls: ['./kid-detail.component.css'] +}) +export class KidDetailComponent { + @Input() product: Product = { + id: '', + name: '', + description: '', + imageUrl: '', + price: 0 + }; + + constructor() { + } + + ngOnInit(): void { + } + + buyNow() { + throw new Error('Method not implemented.'); + } + addToCart() { + throw new Error('Method not implemented.'); + } + +} diff --git a/src/app/features/products/pages/clothes/kids/kids.component.html b/src/app/features/products/pages/clothes/kids/kids.component.html index 8344225..281a4f8 100644 --- a/src/app/features/products/pages/clothes/kids/kids.component.html +++ b/src/app/features/products/pages/clothes/kids/kids.component.html @@ -9,7 +9,7 @@

Kid's Latest

- +
diff --git a/src/app/features/products/products-routing.module.ts b/src/app/features/products/products-routing.module.ts index ad14b75..9523216 100644 --- a/src/app/features/products/products-routing.module.ts +++ b/src/app/features/products/products-routing.module.ts @@ -6,6 +6,8 @@ import { ProductsComponent } from './pages/products/products.component'; import { ClothingComponent } from './pages/clothing/clothing/clothing.component'; import { HomeMadeComponent } from './pages/clothing/home-made/home-made.component'; import { ImportsComponent } from './pages/clothing/imports/imports.component'; +import { KidsComponent } from './pages/clothes/kids/kids.component'; +import { KidDetailComponent } from './pages/clothes/kid-detail/kid-detail.component'; const routes: Routes = [ @@ -19,6 +21,13 @@ const routes: Routes = [ { path: 'tours/:id', component: SingleProductComponent }, + + { + path: 'kids', component: KidsComponent + }, + { + path: 'kids/:id', component: KidDetailComponent + }, { path: 'clothing', diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index 11692a5..460501c 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -15,6 +15,7 @@ import { HomeMadeComponent } from './pages/clothing/home-made/home-made.componen import { MenComponent } from './pages/clothes/men/men.component'; import { WomenComponent } from './pages/clothes/women/women.component'; import { KidsComponent } from './pages/clothes/kids/kids.component'; +import { KidDetailComponent } from './pages/clothes/kid-detail/kid-detail.component'; @NgModule({ declarations: [ @@ -28,6 +29,7 @@ import { KidsComponent } from './pages/clothes/kids/kids.component'; MenComponent, WomenComponent, KidsComponent, + KidDetailComponent, ], imports: [ CommonModule, From 9372bc08e657f27b8a3479a93cafb7dc1bf43290 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Wed, 8 Nov 2023 10:20:48 +0300 Subject: [PATCH 08/58] Fix: display prices correctly --- .../pages/clothes/kid-detail/kid-detail.component.html | 9 +-------- .../pages/clothes/kid-detail/kid-detail.component.ts | 9 ++++++++- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html index d8bd1a3..d9b2b5a 100644 --- a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html @@ -1,10 +1,3 @@ -
- {{ product.name }} -

{{ product.name }}

-

{{ product.description }}

- Price: {{ product.price }} - - -
+ diff --git a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.ts b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.ts index 5cc79c6..db9268a 100644 --- a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.ts +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.ts @@ -1,5 +1,7 @@ import { Component, Input } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; import { Product } from 'src/app/features/models/products.product'; +import { KidsService } from 'src/app/features/services/kids.service'; @Component({ selector: 'app-kid-detail', @@ -7,6 +9,7 @@ import { Product } from 'src/app/features/models/products.product'; styleUrls: ['./kid-detail.component.css'] }) export class KidDetailComponent { + @Input() product: Product = { id: '', name: '', @@ -15,17 +18,21 @@ export class KidDetailComponent { price: 0 }; - constructor() { + constructor(private route: ActivatedRoute, private kidsService: KidsService) { } ngOnInit(): void { + const id = this.route.snapshot.paramMap.get('id'); + this.kidsService.get(id).subscribe(kid => this.product = kid); } + buyNow() { throw new Error('Method not implemented.'); } addToCart() { throw new Error('Method not implemented.'); } + } From 6781e4c26e5362e137373b688e7525d85b735065 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Wed, 8 Nov 2023 10:47:05 +0300 Subject: [PATCH 09/58] add product detail components for women and men --- .../kid-detail/kid-detail.component.html | 22 ++++++++++- .../man-detail/man-detail.component.css | 7 ++++ .../man-detail/man-detail.component.html | 23 ++++++++++++ .../man-detail/man-detail.component.spec.ts | 21 +++++++++++ .../man-detail/man-detail.component.ts | 37 +++++++++++++++++++ .../pages/clothes/men/men.component.html | 2 +- .../woman-detail/woman-detail.component.css | 7 ++++ .../woman-detail/woman-detail.component.html | 23 ++++++++++++ .../woman-detail.component.spec.ts | 21 +++++++++++ .../woman-detail/woman-detail.component.ts | 37 +++++++++++++++++++ .../pages/clothes/women/women.component.html | 2 +- .../products/products-routing.module.ts | 20 ++++++++++ src/app/features/products/products.module.ts | 4 ++ 13 files changed, 223 insertions(+), 3 deletions(-) create mode 100644 src/app/features/products/pages/clothes/man-detail/man-detail.component.css create mode 100644 src/app/features/products/pages/clothes/man-detail/man-detail.component.html create mode 100644 src/app/features/products/pages/clothes/man-detail/man-detail.component.spec.ts create mode 100644 src/app/features/products/pages/clothes/man-detail/man-detail.component.ts create mode 100644 src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css create mode 100644 src/app/features/products/pages/clothes/woman-detail/woman-detail.component.html create mode 100644 src/app/features/products/pages/clothes/woman-detail/woman-detail.component.spec.ts create mode 100644 src/app/features/products/pages/clothes/woman-detail/woman-detail.component.ts diff --git a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html index d9b2b5a..cc0252d 100644 --- a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html @@ -1,3 +1,23 @@ - +
+
+
+
+ {{ product.name }} +
+
+

{{ product.name }}

+

{{ product.description }}

+ Price: {{ product.price | currency:'USD':'symbol':'1.2-2' }} +
+
+ {{ product.name }} +
+
+ + +
+
+
+
diff --git a/src/app/features/products/pages/clothes/man-detail/man-detail.component.css b/src/app/features/products/pages/clothes/man-detail/man-detail.component.css new file mode 100644 index 0000000..c7e7f35 --- /dev/null +++ b/src/app/features/products/pages/clothes/man-detail/man-detail.component.css @@ -0,0 +1,7 @@ +.product-detail { + height: 80vh; +} + +img { + height: 500px; +} \ No newline at end of file diff --git a/src/app/features/products/pages/clothes/man-detail/man-detail.component.html b/src/app/features/products/pages/clothes/man-detail/man-detail.component.html new file mode 100644 index 0000000..cc0252d --- /dev/null +++ b/src/app/features/products/pages/clothes/man-detail/man-detail.component.html @@ -0,0 +1,23 @@ +
+
+
+
+ {{ product.name }} +
+
+

{{ product.name }}

+

{{ product.description }}

+ Price: {{ product.price | currency:'USD':'symbol':'1.2-2' }} +
+
+ {{ product.name }} +
+
+ + +
+
+
+
+ + diff --git a/src/app/features/products/pages/clothes/man-detail/man-detail.component.spec.ts b/src/app/features/products/pages/clothes/man-detail/man-detail.component.spec.ts new file mode 100644 index 0000000..096dd03 --- /dev/null +++ b/src/app/features/products/pages/clothes/man-detail/man-detail.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManDetailComponent } from './man-detail.component'; + +describe('ManDetailComponent', () => { + let component: ManDetailComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ManDetailComponent] + }); + fixture = TestBed.createComponent(ManDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/products/pages/clothes/man-detail/man-detail.component.ts b/src/app/features/products/pages/clothes/man-detail/man-detail.component.ts new file mode 100644 index 0000000..3d85f25 --- /dev/null +++ b/src/app/features/products/pages/clothes/man-detail/man-detail.component.ts @@ -0,0 +1,37 @@ +import { Component, Input } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Product } from 'src/app/features/models/products.product'; +import { MenService } from 'src/app/features/services/men.service'; + +@Component({ + selector: 'app-man-detail', + templateUrl: './man-detail.component.html', + styleUrls: ['./man-detail.component.css'] +}) +export class ManDetailComponent { + + @Input() product: Product = { + id: '', + name: '', + description: '', + imageUrl: '', + price: 0 + }; + + constructor(private route: ActivatedRoute, private menService: MenService) { + } + + ngOnInit(): void { + const id = this.route.snapshot.paramMap.get('id'); + this.menService.get(id).subscribe(man => this.product = man); + } + + + buyNow() { + throw new Error('Method not implemented.'); + } + addToCart() { + throw new Error('Method not implemented.'); + } + +} diff --git a/src/app/features/products/pages/clothes/men/men.component.html b/src/app/features/products/pages/clothes/men/men.component.html index 16d50bf..d96834e 100644 --- a/src/app/features/products/pages/clothes/men/men.component.html +++ b/src/app/features/products/pages/clothes/men/men.component.html @@ -9,7 +9,7 @@

Men's Latest

- +
diff --git a/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css new file mode 100644 index 0000000..c7e7f35 --- /dev/null +++ b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css @@ -0,0 +1,7 @@ +.product-detail { + height: 80vh; +} + +img { + height: 500px; +} \ No newline at end of file diff --git a/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.html b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.html new file mode 100644 index 0000000..cc0252d --- /dev/null +++ b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.html @@ -0,0 +1,23 @@ +
+
+
+
+ {{ product.name }} +
+
+

{{ product.name }}

+

{{ product.description }}

+ Price: {{ product.price | currency:'USD':'symbol':'1.2-2' }} +
+
+ {{ product.name }} +
+
+ + +
+
+
+
+ + diff --git a/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.spec.ts b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.spec.ts new file mode 100644 index 0000000..5f89caf --- /dev/null +++ b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WomanDetailComponent } from './woman-detail.component'; + +describe('WomanDetailComponent', () => { + let component: WomanDetailComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [WomanDetailComponent] + }); + fixture = TestBed.createComponent(WomanDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.ts b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.ts new file mode 100644 index 0000000..bf7a33e --- /dev/null +++ b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.ts @@ -0,0 +1,37 @@ +import { Component, Input } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Product } from 'src/app/features/models/products.product'; +import { WomenService } from 'src/app/features/services/women.service'; + +@Component({ + selector: 'app-woman-detail', + templateUrl: './woman-detail.component.html', + styleUrls: ['./woman-detail.component.css'] +}) +export class WomanDetailComponent { + + @Input() product: Product = { + id: '', + name: '', + description: '', + imageUrl: '', + price: 0 + }; + + constructor(private route: ActivatedRoute, private womenService: WomenService) { + } + + ngOnInit(): void { + const id = this.route.snapshot.paramMap.get('id'); + this.womenService.get(id).subscribe(woman => this.product = woman); + } + + + buyNow() { + throw new Error('Method not implemented.'); + } + addToCart() { + throw new Error('Method not implemented.'); + } + +} diff --git a/src/app/features/products/pages/clothes/women/women.component.html b/src/app/features/products/pages/clothes/women/women.component.html index ad644d8..f840f58 100644 --- a/src/app/features/products/pages/clothes/women/women.component.html +++ b/src/app/features/products/pages/clothes/women/women.component.html @@ -9,7 +9,7 @@

Women's Latest

- +
diff --git a/src/app/features/products/products-routing.module.ts b/src/app/features/products/products-routing.module.ts index 9523216..270e2d9 100644 --- a/src/app/features/products/products-routing.module.ts +++ b/src/app/features/products/products-routing.module.ts @@ -8,6 +8,10 @@ import { HomeMadeComponent } from './pages/clothing/home-made/home-made.componen import { ImportsComponent } from './pages/clothing/imports/imports.component'; import { KidsComponent } from './pages/clothes/kids/kids.component'; import { KidDetailComponent } from './pages/clothes/kid-detail/kid-detail.component'; +import { MenComponent } from './pages/clothes/men/men.component'; +import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.component'; +import { WomenComponent } from './pages/clothes/women/women.component'; +import { WomanDetailComponent } from './pages/clothes/woman-detail/woman-detail.component'; const routes: Routes = [ @@ -29,6 +33,22 @@ const routes: Routes = [ path: 'kids/:id', component: KidDetailComponent }, + { + path: 'men', component: MenComponent + }, + + { + path: 'man/:id', component: ManDetailComponent + }, + + { + path: 'women', component: WomenComponent + }, + + { + path: 'woman/:id', component: WomanDetailComponent + }, + { path: 'clothing', component: ClothingComponent, diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index 460501c..40a8c00 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -16,6 +16,8 @@ import { MenComponent } from './pages/clothes/men/men.component'; import { WomenComponent } from './pages/clothes/women/women.component'; import { KidsComponent } from './pages/clothes/kids/kids.component'; import { KidDetailComponent } from './pages/clothes/kid-detail/kid-detail.component'; +import { WomanDetailComponent } from './pages/clothes/woman-detail/woman-detail.component'; +import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.component'; @NgModule({ declarations: [ @@ -30,6 +32,8 @@ import { KidDetailComponent } from './pages/clothes/kid-detail/kid-detail.compon WomenComponent, KidsComponent, KidDetailComponent, + WomanDetailComponent, + ManDetailComponent, ], imports: [ CommonModule, From f4bc401295953a9970c2d094d2340cd2bbc1e005 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Wed, 8 Nov 2023 10:54:31 +0300 Subject: [PATCH 10/58] refactor: nest men and women components to home section --- src/app/features/products/products.module.ts | 4 +++- src/app/home-section/home/home.component.html | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index 40a8c00..9fa7099 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -47,7 +47,9 @@ import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.compon ClothingComponent, ImportsComponent, HomeMadeComponent, - KidsComponent + KidsComponent, + MenComponent, + WomenComponent ] }) export class ProductsModule { } diff --git a/src/app/home-section/home/home.component.html b/src/app/home-section/home/home.component.html index 258a8da..f50ae18 100644 --- a/src/app/home-section/home/home.component.html +++ b/src/app/home-section/home/home.component.html @@ -87,6 +87,8 @@

Quick Links

+ +
From e58a7ecf69784c05dd8b651807fe83d1b8286c8e Mon Sep 17 00:00:00 2001 From: kiprotich Date: Thu, 9 Nov 2023 17:11:30 +0300 Subject: [PATCH 11/58] fix routes to men and women details components --- src/app/features/products/products-routing.module.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/features/products/products-routing.module.ts b/src/app/features/products/products-routing.module.ts index 270e2d9..6ede17c 100644 --- a/src/app/features/products/products-routing.module.ts +++ b/src/app/features/products/products-routing.module.ts @@ -38,7 +38,7 @@ const routes: Routes = [ }, { - path: 'man/:id', component: ManDetailComponent + path: 'men/:id', component: ManDetailComponent }, { @@ -46,7 +46,7 @@ const routes: Routes = [ }, { - path: 'woman/:id', component: WomanDetailComponent + path: 'women/:id', component: WomanDetailComponent }, { From 425daa26102d58a4774d64903d74ebf69f40fba8 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Thu, 9 Nov 2023 17:37:12 +0300 Subject: [PATCH 12/58] clean code up --- .../clothing/clothing/clothing.component.css | 0 .../clothing/clothing/clothing.component.html | 4 - .../clothing/clothing.component.spec.ts | 21 --- .../clothing/clothing/clothing.component.ts | 106 --------------- .../home-made/home-made.component.css | 0 .../home-made/home-made.component.html | 20 --- .../home-made/home-made.component.spec.ts | 21 --- .../clothing/home-made/home-made.component.ts | 128 ------------------ .../clothing/imports/imports.component.css | 0 .../clothing/imports/imports.component.html | 20 --- .../imports/imports.component.spec.ts | 21 --- .../clothing/imports/imports.component.ts | 124 ----------------- .../pages/products/products.component.html | 3 +- .../single-product.component.css | 7 - .../single-product.component.html | 10 -- .../single-product.component.spec.ts | 21 --- .../single-product.component.ts | 32 ----- .../products/pages/tours/tours.component.css | 3 - .../products/pages/tours/tours.component.html | 32 ----- .../pages/tours/tours.component.spec.ts | 21 --- .../products/pages/tours/tours.component.ts | 111 --------------- .../products/products-routing.module.ts | 36 ----- src/app/features/products/products.module.ts | 17 --- src/app/home-section/home/home.component.html | 2 - 24 files changed, 1 insertion(+), 759 deletions(-) delete mode 100644 src/app/features/products/pages/clothing/clothing/clothing.component.css delete mode 100644 src/app/features/products/pages/clothing/clothing/clothing.component.html delete mode 100644 src/app/features/products/pages/clothing/clothing/clothing.component.spec.ts delete mode 100644 src/app/features/products/pages/clothing/clothing/clothing.component.ts delete mode 100644 src/app/features/products/pages/clothing/home-made/home-made.component.css delete mode 100644 src/app/features/products/pages/clothing/home-made/home-made.component.html delete mode 100644 src/app/features/products/pages/clothing/home-made/home-made.component.spec.ts delete mode 100644 src/app/features/products/pages/clothing/home-made/home-made.component.ts delete mode 100644 src/app/features/products/pages/clothing/imports/imports.component.css delete mode 100644 src/app/features/products/pages/clothing/imports/imports.component.html delete mode 100644 src/app/features/products/pages/clothing/imports/imports.component.spec.ts delete mode 100644 src/app/features/products/pages/clothing/imports/imports.component.ts delete mode 100644 src/app/features/products/pages/single-product/single-product.component.css delete mode 100644 src/app/features/products/pages/single-product/single-product.component.html delete mode 100644 src/app/features/products/pages/single-product/single-product.component.spec.ts delete mode 100644 src/app/features/products/pages/single-product/single-product.component.ts delete mode 100644 src/app/features/products/pages/tours/tours.component.css delete mode 100644 src/app/features/products/pages/tours/tours.component.html delete mode 100644 src/app/features/products/pages/tours/tours.component.spec.ts delete mode 100644 src/app/features/products/pages/tours/tours.component.ts diff --git a/src/app/features/products/pages/clothing/clothing/clothing.component.css b/src/app/features/products/pages/clothing/clothing/clothing.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/features/products/pages/clothing/clothing/clothing.component.html b/src/app/features/products/pages/clothing/clothing/clothing.component.html deleted file mode 100644 index c4c12b7..0000000 --- a/src/app/features/products/pages/clothing/clothing/clothing.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/src/app/features/products/pages/clothing/clothing/clothing.component.spec.ts b/src/app/features/products/pages/clothing/clothing/clothing.component.spec.ts deleted file mode 100644 index 26c7da7..0000000 --- a/src/app/features/products/pages/clothing/clothing/clothing.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ClothingComponent } from './clothing.component'; - -describe('ClothingComponent', () => { - let component: ClothingComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ClothingComponent] - }); - fixture = TestBed.createComponent(ClothingComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/clothing/clothing/clothing.component.ts b/src/app/features/products/pages/clothing/clothing/clothing.component.ts deleted file mode 100644 index afbdad7..0000000 --- a/src/app/features/products/pages/clothing/clothing/clothing.component.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; - -@Component({ - selector: 'app-clothing', - templateUrl: './clothing.component.html', - styleUrls: ['./clothing.component.css'] -}) -export class ClothingComponent { - - @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; - - - clothes = [ - { - name: 'Hand Made', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/hand-made.png', - price: 70.00 - }, - { - name: 'Dera', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/dera.png', - price: 70.00 - }, - { - name: 'Boots', - description: 'Discover local spices and flavors', - imageUrl: '/assets/boots.png', - price: 70.00 - }, - { - name: 'Shorts', - description: 'Discover local spices and flavors', - imageUrl: '/assets/shorts.png', - price: 70.00 - }, - { - name: 'Top\'s', - description: 'Discover local spices and flavors', - imageUrl: '/assets/top.png', - price: 70.00 - }, - { - name: 'Jeans', - description: 'Discover local spices and flavors', - imageUrl: '/assets/jeans.png', - price: 70.00 - }, - { - name: 'Blazers', - description: 'Discover local spices and flavors', - imageUrl: '/assets/blazer.png', - price: 70.00 - }, - { - name: 't-shirts', - description: 'Discover local spices and flavors', - imageUrl: '/assets/tshirts.png', - price: 70.00 - }, - ]; - - scrollLeft() { - if (this.cardsWrapper) { - const scrollAmount = -300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - scrollRight() { - if (this.cardsWrapper) { - const scrollAmount = 300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - private scrollTo(element: HTMLElement, to: number, duration: number) { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } - - -} diff --git a/src/app/features/products/pages/clothing/home-made/home-made.component.css b/src/app/features/products/pages/clothing/home-made/home-made.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/features/products/pages/clothing/home-made/home-made.component.html b/src/app/features/products/pages/clothing/home-made/home-made.component.html deleted file mode 100644 index 246beef..0000000 --- a/src/app/features/products/pages/clothing/home-made/home-made.component.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
-

Hand Made

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

-
-
-
- -
- -
- -
-
- -
- -
-
- diff --git a/src/app/features/products/pages/clothing/home-made/home-made.component.spec.ts b/src/app/features/products/pages/clothing/home-made/home-made.component.spec.ts deleted file mode 100644 index a2e4974..0000000 --- a/src/app/features/products/pages/clothing/home-made/home-made.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HomeMadeComponent } from './home-made.component'; - -describe('HomeMadeComponent', () => { - let component: HomeMadeComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [HomeMadeComponent] - }); - fixture = TestBed.createComponent(HomeMadeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/clothing/home-made/home-made.component.ts b/src/app/features/products/pages/clothing/home-made/home-made.component.ts deleted file mode 100644 index ca0313d..0000000 --- a/src/app/features/products/pages/clothing/home-made/home-made.component.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { Router } from '@angular/router'; -import { Product } from 'src/app/features/models/products.product'; - -@Component({ - selector: 'app-home-made', - templateUrl: './home-made.component.html', - styleUrls: ['./home-made.component.css'] -}) -export class HomeMadeComponent { - - @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; - - - handMade$: Product[] = [ - { - id: 0, - name: 'Hand Made', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/hand-made.png', - price: 70.00 - }, - { - id: 1, - name: 'Dera', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/dera.png', - price: 70.00 - }, - { - id: 2, - name: 'Boots', - description: 'Discover local spices and flavors', - imageUrl: '/assets/boots.png', - price: 70.00 - }, - { - id: 3, - name: 'Shorts', - description: 'Discover local spices and flavors', - imageUrl: '/assets/shorts.png', - price: 70.00 - }, - { - id: 4, - name: 'Top\'s', - description: 'Discover local spices and flavors', - imageUrl: '/assets/top.png', - price: 70.00 - }, - { - id: 5, - name: 'Jeans', - description: 'Discover local spices and flavors', - imageUrl: '/assets/jeans.png', - price: 70.00 - }, - { - id: 6, - name: 'Blazers', - description: 'Discover local spices and flavors', - imageUrl: '/assets/blazer.png', - price: 70.00 - }, - { - id: 7, - name: 't-shirts', - description: 'Discover local spices and flavors', - imageUrl: '/assets/tshirts.png', - price: 70.00 - }, - ]; - - constructor (private router: Router ){} - - navigateToClotheDetail(homeMade: any) { - if (!homeMade) { - throw new Error('The home made variable is undefined'); - } - this.router.navigate(['/home-made', homeMade.id]); - } - - scrollLeft() { - if (this.cardsWrapper) { - const scrollAmount = -300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - scrollRight() { - if (this.cardsWrapper) { - const scrollAmount = 300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - private scrollTo(element: HTMLElement, to: number, duration: number) { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } - - -} - - - diff --git a/src/app/features/products/pages/clothing/imports/imports.component.css b/src/app/features/products/pages/clothing/imports/imports.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/features/products/pages/clothing/imports/imports.component.html b/src/app/features/products/pages/clothing/imports/imports.component.html deleted file mode 100644 index f1c93cd..0000000 --- a/src/app/features/products/pages/clothing/imports/imports.component.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
-

Made In Turkey

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

-
-
-
- -
- -
- -
-
- -
- -
-
- diff --git a/src/app/features/products/pages/clothing/imports/imports.component.spec.ts b/src/app/features/products/pages/clothing/imports/imports.component.spec.ts deleted file mode 100644 index 8a97ee6..0000000 --- a/src/app/features/products/pages/clothing/imports/imports.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ImportsComponent } from './imports.component'; - -describe('ImportsComponent', () => { - let component: ImportsComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ImportsComponent] - }); - fixture = TestBed.createComponent(ImportsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/clothing/imports/imports.component.ts b/src/app/features/products/pages/clothing/imports/imports.component.ts deleted file mode 100644 index 59b4192..0000000 --- a/src/app/features/products/pages/clothing/imports/imports.component.ts +++ /dev/null @@ -1,124 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { Router } from '@angular/router'; -import { Product } from 'src/app/features/models/products.product'; - -@Component({ - selector: 'app-imports', - templateUrl: './imports.component.html', - styleUrls: ['./imports.component.css'] -}) -export class ImportsComponent { - - @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; - - - imports: Product[] = [ - { - id: 0, - name: 'Hand Made', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/hand-made.png', - price: 70.00 - }, - { - id: 1, - name: 'Dera', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/dera.png', - price: 70.00 - }, - { - id: 2, - name: 'Boots', - description: 'Discover local spices and flavors', - imageUrl: '/assets/boots.png', - price: 70.00 - }, - { - id: 3, - name: 'Shorts', - description: 'Discover local spices and flavors', - imageUrl: '/assets/shorts.png', - price: 70.00 - }, - { - id: 4, - name: 'Top\'s', - description: 'Discover local spices and flavors', - imageUrl: '/assets/top.png', - price: 70.00 - }, - { - id: 5, - name: 'Jeans', - description: 'Discover local spices and flavors', - imageUrl: '/assets/jeans.png', - price: 70.00 - }, - { - id: 6, - name: 'Blazers', - description: 'Discover local spices and flavors', - imageUrl: '/assets/blazer.png', - price: 70.00 - }, - { - id: 7, - name: 't-shirts', - description: 'Discover local spices and flavors', - imageUrl: '/assets/tshirts.png', - price: 70.00 - }, - ]; - - constructor (private route: Router) {} - - navigateToImportedClotheDetail (imports: any) { - if (!imports) { - throw new Error ('The imports variable is missing'); - } - this.route.navigate(['/imports', imports.id]) - } - - scrollLeft() { - if (this.cardsWrapper) { - const scrollAmount = -300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - scrollRight() { - if (this.cardsWrapper) { - const scrollAmount = 300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - private scrollTo(element: HTMLElement, to: number, duration: number) { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } - -} diff --git a/src/app/features/products/pages/products/products.component.html b/src/app/features/products/pages/products/products.component.html index a0d9705..a176f79 100644 --- a/src/app/features/products/pages/products/products.component.html +++ b/src/app/features/products/pages/products/products.component.html @@ -1,5 +1,4 @@
- - +
diff --git a/src/app/features/products/pages/single-product/single-product.component.css b/src/app/features/products/pages/single-product/single-product.component.css deleted file mode 100644 index c7e7f35..0000000 --- a/src/app/features/products/pages/single-product/single-product.component.css +++ /dev/null @@ -1,7 +0,0 @@ -.product-detail { - height: 80vh; -} - -img { - height: 500px; -} \ No newline at end of file diff --git a/src/app/features/products/pages/single-product/single-product.component.html b/src/app/features/products/pages/single-product/single-product.component.html deleted file mode 100644 index b74e6c9..0000000 --- a/src/app/features/products/pages/single-product/single-product.component.html +++ /dev/null @@ -1,10 +0,0 @@ -
- {{ product.name }} -

{{ product.name }}

-

{{ product.description }}

- Price: {{ product.price }} - - -
- - \ No newline at end of file diff --git a/src/app/features/products/pages/single-product/single-product.component.spec.ts b/src/app/features/products/pages/single-product/single-product.component.spec.ts deleted file mode 100644 index 756b84e..0000000 --- a/src/app/features/products/pages/single-product/single-product.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SingleProductComponent } from './single-product.component'; - -describe('SingleProductComponent', () => { - let component: SingleProductComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [SingleProductComponent] - }); - fixture = TestBed.createComponent(SingleProductComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/single-product/single-product.component.ts b/src/app/features/products/pages/single-product/single-product.component.ts deleted file mode 100644 index 0fee399..0000000 --- a/src/app/features/products/pages/single-product/single-product.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { Product } from '../../../models/products.product'; - -@Component({ - selector: 'app-single-product', - templateUrl: './single-product.component.html', - styleUrls: ['./single-product.component.css'] -}) -export class SingleProductComponent implements OnInit{ - - @Input() product: Product = { - id: '', - name: '', - description: '', - imageUrl: '', - price: 0 - }; - - constructor() { - } - - ngOnInit(): void { - } - - buyNow() { - throw new Error('Method not implemented.'); - } - addToCart() { - throw new Error('Method not implemented.'); - } - -} diff --git a/src/app/features/products/pages/tours/tours.component.css b/src/app/features/products/pages/tours/tours.component.css deleted file mode 100644 index 7555750..0000000 --- a/src/app/features/products/pages/tours/tours.component.css +++ /dev/null @@ -1,3 +0,0 @@ -img { - -} \ No newline at end of file diff --git a/src/app/features/products/pages/tours/tours.component.html b/src/app/features/products/pages/tours/tours.component.html deleted file mode 100644 index 818f5c1..0000000 --- a/src/app/features/products/pages/tours/tours.component.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
-

Tours

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

-
- - - -
- - -
- -
- - - -
- -
-
- -
- -
- -
- - - - - diff --git a/src/app/features/products/pages/tours/tours.component.spec.ts b/src/app/features/products/pages/tours/tours.component.spec.ts deleted file mode 100644 index 2bf220a..0000000 --- a/src/app/features/products/pages/tours/tours.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ToursComponent } from './tours.component'; - -describe('ToursComponent', () => { - let component: ToursComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ToursComponent] - }); - fixture = TestBed.createComponent(ToursComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/tours/tours.component.ts b/src/app/features/products/pages/tours/tours.component.ts deleted file mode 100644 index 57046d8..0000000 --- a/src/app/features/products/pages/tours/tours.component.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { Product } from '../../../models/products.product'; -import { Router } from '@angular/router'; - -@Component({ - selector: 'app-tours', - templateUrl: './tours.component.html', - styleUrls: ['./tours.component.css'] -}) -export class ToursComponent { - - @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; - - - tours:Product[] = [ - { - id: 0, - name: 'City Tour', - description: 'Explore the city\'s landmarks', - imageUrl: '/assets/city.png', - price: 70.00 - }, - { - id: 1, - name: 'Spice Tour', - description: 'Discover local spices and flavors', - imageUrl: 'assets/spices.png', - price: 70.00 - }, - { - id: 2, - name: 'Island Tour', - description: 'Discover local spices and flavors', - imageUrl: '/assets/island.png', - price: 70.00 - }, - { - id: 3, - name: 'Safari Blue', - description: 'Discover local spices and flavors', - imageUrl: '/assets/travel.jpg', - price: 70.00 - }, - { - id: 4, - name: 'Mountains', - description: 'Discover local spices and flavors', - imageUrl: '/assets/kilimanjaro.png', - price: 70.00 - }, - { - id: 5, - name: 'Game Parks', - description: 'Discover local spices and flavors', - imageUrl: '/assets/elephant.png', - price: 70.00 - }, - ]; - - -constructor(private router: Router) {} - - scrollLeft() { - if (this.cardsWrapper) { - const scrollAmount = -300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - scrollRight() { - if (this.cardsWrapper) { - const scrollAmount = 300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - private scrollTo(element: HTMLElement, to: number, duration: number) { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } - - navigateToTourDetail(tour: Product) { - if (!tour) { - throw new Error('The tour variable is undefined'); - } - this.router.navigate(['/tours', tour.id]); - } - -} diff --git a/src/app/features/products/products-routing.module.ts b/src/app/features/products/products-routing.module.ts index 6ede17c..a731b61 100644 --- a/src/app/features/products/products-routing.module.ts +++ b/src/app/features/products/products-routing.module.ts @@ -1,11 +1,5 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { SingleProductComponent } from './pages/single-product/single-product.component'; -import { ToursComponent } from './pages/tours/tours.component'; -import { ProductsComponent } from './pages/products/products.component'; -import { ClothingComponent } from './pages/clothing/clothing/clothing.component'; -import { HomeMadeComponent } from './pages/clothing/home-made/home-made.component'; -import { ImportsComponent } from './pages/clothing/imports/imports.component'; import { KidsComponent } from './pages/clothes/kids/kids.component'; import { KidDetailComponent } from './pages/clothes/kid-detail/kid-detail.component'; import { MenComponent } from './pages/clothes/men/men.component'; @@ -14,17 +8,6 @@ import { WomenComponent } from './pages/clothes/women/women.component'; import { WomanDetailComponent } from './pages/clothes/woman-detail/woman-detail.component'; const routes: Routes = [ - - { - path: 'products', component: ProductsComponent, - }, - - { - path: 'tours', component: ToursComponent - }, - { - path: 'tours/:id', component: SingleProductComponent - }, { path: 'kids', component: KidsComponent @@ -47,25 +30,6 @@ const routes: Routes = [ { path: 'women/:id', component: WomanDetailComponent - }, - - { - path: 'clothing', - component: ClothingComponent, - }, - { - path: 'home-made', - component: HomeMadeComponent, - }, - { - path: 'home-made/:id', component: SingleProductComponent - }, - { - path: 'imports', - component: ImportsComponent, - }, - { - path: 'imports/:id', component: SingleProductComponent } ]; diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index 9fa7099..c4361af 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -5,13 +5,7 @@ import {MatGridListModule} from '@angular/material/grid-list'; import { ProductsRoutingModule } from './products-routing.module'; -import { ProductsComponent } from './pages/products/products.component'; import { ProductComponent } from './pages/product/product.component'; -import { ToursComponent } from './pages/tours/tours.component'; -import { SingleProductComponent } from './pages/single-product/single-product.component'; -import { ClothingComponent } from './pages/clothing/clothing/clothing.component'; -import { ImportsComponent } from './pages/clothing/imports/imports.component'; -import { HomeMadeComponent } from './pages/clothing/home-made/home-made.component'; import { MenComponent } from './pages/clothes/men/men.component'; import { WomenComponent } from './pages/clothes/women/women.component'; import { KidsComponent } from './pages/clothes/kids/kids.component'; @@ -22,12 +16,6 @@ import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.compon @NgModule({ declarations: [ ProductComponent, - ProductsComponent, - ToursComponent, - SingleProductComponent, - ClothingComponent, - ImportsComponent, - HomeMadeComponent, MenComponent, WomenComponent, KidsComponent, @@ -42,11 +30,6 @@ import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.compon ], exports: [ ProductComponent, - ToursComponent, - SingleProductComponent, - ClothingComponent, - ImportsComponent, - HomeMadeComponent, KidsComponent, MenComponent, WomenComponent diff --git a/src/app/home-section/home/home.component.html b/src/app/home-section/home/home.component.html index f50ae18..68a35e7 100644 --- a/src/app/home-section/home/home.component.html +++ b/src/app/home-section/home/home.component.html @@ -89,8 +89,6 @@

Quick Links

- -
From c149c738fe20e11d03c59fe3f903e65eacde598a Mon Sep 17 00:00:00 2001 From: kiprotich Date: Sat, 11 Nov 2023 14:22:16 +0300 Subject: [PATCH 13/58] add main page and nest navbar, footer, kids, men and women components to it --- src/app/app-routing.module.ts | 9 ++--- src/app/app.component.html | 4 +-- src/app/app.module.ts | 5 +-- .../pages/clothes/kids/kids.component.html | 36 ++++++++++--------- .../{home => }/home-routing.module.ts | 8 +++-- .../home-section/{home => }/home.module.ts | 12 ++++--- src/app/home-section/home/home.component.css | 3 -- src/app/home-section/home/home.component.html | 16 +++------ .../main-page/main-page.component.css | 4 +++ .../main-page/main-page.component.html | 18 ++++++++++ .../main-page/main-page.component.spec.ts | 21 +++++++++++ .../main-page/main-page.component.ts | 10 ++++++ src/styles.css | 4 +++ 13 files changed, 103 insertions(+), 47 deletions(-) rename src/app/home-section/{home => }/home-routing.module.ts (50%) rename src/app/home-section/{home => }/home.module.ts (57%) create mode 100644 src/app/home-section/main-page/main-page.component.css create mode 100644 src/app/home-section/main-page/main-page.component.html create mode 100644 src/app/home-section/main-page/main-page.component.spec.ts create mode 100644 src/app/home-section/main-page/main-page.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d36fe86..230004f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -3,17 +3,12 @@ import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home-section/home/home.component'; import { NavBarComponent } from './shared/components/nav-bar/nav-bar.component'; import { FooterComponent } from './shared/components/footer/footer.component'; +import { MainPageComponent } from './home-section/main-page/main-page.component'; const routes: Routes = [ { - path: 'nav', component: NavBarComponent - }, - { - path: 'footer', component: FooterComponent - }, - { - path: '', component: HomeComponent + path: '', component: MainPageComponent } ]; diff --git a/src/app/app.component.html b/src/app/app.component.html index fcfafc8..8a9dc50 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,3 @@ - + - + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 94bbb05..0729f3c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import { HomeModule } from './home-section/home/home.module'; +import { HomeModule } from './home-section/home.module'; import { ProductsModule } from './features/products/products.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -17,13 +17,14 @@ import { MatSelectModule } from '@angular/material/select'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatListModule } from '@angular/material/list'; -import { HomeRoutingModule } from './home-section/home/home-routing.module'; +import { HomeRoutingModule } from './home-section/home-routing.module'; import { SharedModule } from './shared/shared.module'; import { CartModule } from './features/cart/cart.module'; import { DataModule } from './data/data.module'; import { CheckoutModule } from './features/checkout/checkout.module'; import { AuthModule } from './features/auth/auth.module'; import { HttpClientModule } from '@angular/common/http'; +import { MainPageComponent } from './home-section/main-page/main-page.component'; @NgModule({ diff --git a/src/app/features/products/pages/clothes/kids/kids.component.html b/src/app/features/products/pages/clothes/kids/kids.component.html index 281a4f8..5901183 100644 --- a/src/app/features/products/pages/clothes/kids/kids.component.html +++ b/src/app/features/products/pages/clothes/kids/kids.component.html @@ -1,20 +1,24 @@ -
-
-

Kid's Latest

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

-
-
-
- +
+
+
+
+

Kid's Latest

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

+
+
+
+ +
+ +
+ +
+
+ +
+
- -
-
-
- -
- -
+
diff --git a/src/app/home-section/home/home-routing.module.ts b/src/app/home-section/home-routing.module.ts similarity index 50% rename from src/app/home-section/home/home-routing.module.ts rename to src/app/home-section/home-routing.module.ts index 1ee03a4..61aca09 100644 --- a/src/app/home-section/home/home-routing.module.ts +++ b/src/app/home-section/home-routing.module.ts @@ -1,9 +1,13 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { HomeComponent } from './home.component'; +import { HomeComponent } from './home/home.component'; +import { MainPageComponent } from './main-page/main-page.component'; const routes: Routes = [ - { path: 'home', component: HomeComponent, pathMatch: 'full'}, + { path: 'landing', component: MainPageComponent, pathMatch: 'full'}, + { + path: 'home', component: HomeComponent + } ]; @NgModule({ diff --git a/src/app/home-section/home/home.module.ts b/src/app/home-section/home.module.ts similarity index 57% rename from src/app/home-section/home/home.module.ts rename to src/app/home-section/home.module.ts index a7c7b68..d6069f7 100644 --- a/src/app/home-section/home/home.module.ts +++ b/src/app/home-section/home.module.ts @@ -3,20 +3,24 @@ import { CommonModule } from '@angular/common'; import { HomeRoutingModule } from './home-routing.module'; import { CoreModule } from 'src/app/core/core.module'; -import { HomeComponent } from './home.component'; +import { HomeComponent } from './home/home.component'; import { ProductsModule } from 'src/app/features/products/products.module'; +import { SharedModule } from 'src/app/shared/shared.module'; +import { MainPageComponent } from './main-page/main-page.component'; @NgModule({ - declarations: [HomeComponent], + declarations: [MainPageComponent, HomeComponent], imports: [ CommonModule, HomeRoutingModule, CoreModule, - ProductsModule + ProductsModule, + SharedModule ], exports: [ - HomeComponent + HomeComponent, + MainPageComponent ] }) export class HomeModule { } diff --git a/src/app/home-section/home/home.component.css b/src/app/home-section/home/home.component.css index 3079841..6a9a080 100644 --- a/src/app/home-section/home/home.component.css +++ b/src/app/home-section/home/home.component.css @@ -75,9 +75,6 @@ color: white; } - .products-wrapper { - text-align: left; - } @media (max-width: 1024px) { .landing { diff --git a/src/app/home-section/home/home.component.html b/src/app/home-section/home/home.component.html index 68a35e7..06b8c04 100644 --- a/src/app/home-section/home/home.component.html +++ b/src/app/home-section/home/home.component.html @@ -1,5 +1,5 @@
-
+
photo of beach front @@ -80,17 +80,11 @@

Quick Links

-
- - -
-
-
- - - -
+
+ + + diff --git a/src/app/home-section/main-page/main-page.component.css b/src/app/home-section/main-page/main-page.component.css new file mode 100644 index 0000000..5d49f53 --- /dev/null +++ b/src/app/home-section/main-page/main-page.component.css @@ -0,0 +1,4 @@ +.border { + margin-bottom: 8%; + border-bottom: dashed; +} \ No newline at end of file diff --git a/src/app/home-section/main-page/main-page.component.html b/src/app/home-section/main-page/main-page.component.html new file mode 100644 index 0000000..4a4458d --- /dev/null +++ b/src/app/home-section/main-page/main-page.component.html @@ -0,0 +1,18 @@ +
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ + diff --git a/src/app/home-section/main-page/main-page.component.spec.ts b/src/app/home-section/main-page/main-page.component.spec.ts new file mode 100644 index 0000000..1085ea2 --- /dev/null +++ b/src/app/home-section/main-page/main-page.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MainPageComponent } from './main-page.component'; + +describe('MainPageComponent', () => { + let component: MainPageComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [MainPageComponent] + }); + fixture = TestBed.createComponent(MainPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home-section/main-page/main-page.component.ts b/src/app/home-section/main-page/main-page.component.ts new file mode 100644 index 0000000..240983f --- /dev/null +++ b/src/app/home-section/main-page/main-page.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-main-page', + templateUrl: './main-page.component.html', + styleUrls: ['./main-page.component.css'] +}) +export class MainPageComponent { + +} diff --git a/src/styles.css b/src/styles.css index fb80203..cbc08e2 100644 --- a/src/styles.css +++ b/src/styles.css @@ -49,6 +49,10 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } .scroll-button { z-index: 2; } + + .borders { + border-top: dashed; + } /* Tablet styles (2 cards) */ @media (max-width: 1024px) { From b7a1a3658a4e6d6c07ba6b3984768dd1a559b52c Mon Sep 17 00:00:00 2001 From: kiprotich Date: Sat, 11 Nov 2023 14:29:10 +0300 Subject: [PATCH 14/58] add logo --- .../components/nav-bar/nav-bar.component.html | 2 +- src/assets/hexalogo.png | Bin 0 -> 3601 bytes 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 src/assets/hexalogo.png diff --git a/src/app/shared/components/nav-bar/nav-bar.component.html b/src/app/shared/components/nav-bar/nav-bar.component.html index 9359064..6915682 100644 --- a/src/app/shared/components/nav-bar/nav-bar.component.html +++ b/src/app/shared/components/nav-bar/nav-bar.component.html @@ -1,7 +1,7 @@
+ +
+

{{ product.description }}

+
+ +
+

No. of Orders

+
+ +
+

Total:

+ +
+ +
+ + From 28c7aa865ac493dc2294e7a30d393e46164b8c4e Mon Sep 17 00:00:00 2001 From: kiprotich Date: Mon, 13 Nov 2023 16:02:08 +0300 Subject: [PATCH 26/58] add re-useable product detail component --- .../product-detail.component.css | 40 +++++++++++++++++++ .../product-detail.component.html | 39 ++++++++++++++++++ .../product-detail.component.spec.ts | 21 ++++++++++ .../product-detail.component.ts | 19 +++++++++ 4 files changed, 119 insertions(+) create mode 100644 src/app/features/products/pages/product-detail/product-detail.component.css create mode 100644 src/app/features/products/pages/product-detail/product-detail.component.html create mode 100644 src/app/features/products/pages/product-detail/product-detail.component.spec.ts create mode 100644 src/app/features/products/pages/product-detail/product-detail.component.ts diff --git a/src/app/features/products/pages/product-detail/product-detail.component.css b/src/app/features/products/pages/product-detail/product-detail.component.css new file mode 100644 index 0000000..cdef009 --- /dev/null +++ b/src/app/features/products/pages/product-detail/product-detail.component.css @@ -0,0 +1,40 @@ +.product-detail { + height: 80vh; +} + +img { + height: 300px; + width: 100%; +} + +.product-detail-section { + margin-top: 5%; +} + +.product-image { + margin: 10%; +} + +.product-name { + margin-top: 10%; +} + + + +.main-border-button a { + font-size: 13px; + color: black; + border: 1px solid black; + padding: 12px 25px; + display: inline-block; + font-weight: 500; + transition: all .3s; + text-decoration: none; + } + + .main-border-button a:hover { + background-color: black; + color: #fff; + } + + diff --git a/src/app/features/products/pages/product-detail/product-detail.component.html b/src/app/features/products/pages/product-detail/product-detail.component.html new file mode 100644 index 0000000..94f2c4c --- /dev/null +++ b/src/app/features/products/pages/product-detail/product-detail.component.html @@ -0,0 +1,39 @@ +
+
+ +
+ +
+
+ {{ product.name }} +
+
+ {{ product.name }} +
+
+ +
+
+

{{ product.name }}

+ Price: {{ product.price | currency:'USD':'symbol':'1.2-2' }} +
+ +
+

{{ product.description }}

+
+ +
+

No. of Orders

+
+ +
+

Total:

+ +
+ +
+ +
+ +
+
diff --git a/src/app/features/products/pages/product-detail/product-detail.component.spec.ts b/src/app/features/products/pages/product-detail/product-detail.component.spec.ts new file mode 100644 index 0000000..9ae9617 --- /dev/null +++ b/src/app/features/products/pages/product-detail/product-detail.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProductDetailComponent } from './product-detail.component'; + +describe('ProductDetailComponent', () => { + let component: ProductDetailComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ProductDetailComponent] + }); + fixture = TestBed.createComponent(ProductDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/products/pages/product-detail/product-detail.component.ts b/src/app/features/products/pages/product-detail/product-detail.component.ts new file mode 100644 index 0000000..6362855 --- /dev/null +++ b/src/app/features/products/pages/product-detail/product-detail.component.ts @@ -0,0 +1,19 @@ +import { Component, Input } from '@angular/core'; +import { Product } from 'src/app/features/models/products.product'; + +@Component({ + selector: 'app-product-detail', + templateUrl: './product-detail.component.html', + styleUrls: ['./product-detail.component.css'] +}) +export class ProductDetailComponent { + + @Input() product: Product = { + id: '', + name: '', + description: '', + imageUrl: '', + price: 0 + }; + +} From a5b117e0ace7f96cddad51ea101c43ae28f6947e Mon Sep 17 00:00:00 2001 From: kiprotich Date: Mon, 13 Nov 2023 16:05:36 +0300 Subject: [PATCH 27/58] add product datail component to declarations --- src/app/features/products/products.module.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index c4361af..64b3242 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -12,6 +12,7 @@ import { KidsComponent } from './pages/clothes/kids/kids.component'; import { KidDetailComponent } from './pages/clothes/kid-detail/kid-detail.component'; import { WomanDetailComponent } from './pages/clothes/woman-detail/woman-detail.component'; import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.component'; +import { ProductDetailComponent } from './pages/product-detail/product-detail.component'; @NgModule({ declarations: [ @@ -22,6 +23,7 @@ import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.compon KidDetailComponent, WomanDetailComponent, ManDetailComponent, + ProductDetailComponent, ], imports: [ CommonModule, From 6eeb998faef067675948438e1b7eeeea9d74e881 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Mon, 13 Nov 2023 16:11:47 +0300 Subject: [PATCH 28/58] remove redundant code --- .../kid-detail/kid-detail.component.css | 40 ------------------ .../kid-detail/kid-detail.component.html | 42 +------------------ .../pages/clothes/kids/kids.component.html | 2 +- .../man-detail/man-detail.component.css | 7 ---- .../man-detail/man-detail.component.html | 24 +---------- .../woman-detail/woman-detail.component.css | 7 ---- .../woman-detail/woman-detail.component.html | 24 +---------- 7 files changed, 4 insertions(+), 142 deletions(-) diff --git a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css index cdef009..e69de29 100644 --- a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css @@ -1,40 +0,0 @@ -.product-detail { - height: 80vh; -} - -img { - height: 300px; - width: 100%; -} - -.product-detail-section { - margin-top: 5%; -} - -.product-image { - margin: 10%; -} - -.product-name { - margin-top: 10%; -} - - - -.main-border-button a { - font-size: 13px; - color: black; - border: 1px solid black; - padding: 12px 25px; - display: inline-block; - font-weight: 500; - transition: all .3s; - text-decoration: none; - } - - .main-border-button a:hover { - background-color: black; - color: #fff; - } - - diff --git a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html index 0250c65..5501402 100644 --- a/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html @@ -1,41 +1 @@ -
-
- -
- -
-
- {{ product.name }} -
-
- {{ product.name }} -
-
- -
-
-

{{ product.name }}

- Price: {{ product.price | currency:'USD':'symbol':'1.2-2' }} -
- -
-

{{ product.description }}

-
- -
-

No. of Orders

-
- -
-

Total:

- -
- -
- -
- -
-
- - + diff --git a/src/app/features/products/pages/clothes/kids/kids.component.html b/src/app/features/products/pages/clothes/kids/kids.component.html index af59608..8231f3d 100644 --- a/src/app/features/products/pages/clothes/kids/kids.component.html +++ b/src/app/features/products/pages/clothes/kids/kids.component.html @@ -11,7 +11,7 @@

Kid's Latest

- +
diff --git a/src/app/features/products/pages/clothes/man-detail/man-detail.component.css b/src/app/features/products/pages/clothes/man-detail/man-detail.component.css index c7e7f35..e69de29 100644 --- a/src/app/features/products/pages/clothes/man-detail/man-detail.component.css +++ b/src/app/features/products/pages/clothes/man-detail/man-detail.component.css @@ -1,7 +0,0 @@ -.product-detail { - height: 80vh; -} - -img { - height: 500px; -} \ No newline at end of file diff --git a/src/app/features/products/pages/clothes/man-detail/man-detail.component.html b/src/app/features/products/pages/clothes/man-detail/man-detail.component.html index cc0252d..5501402 100644 --- a/src/app/features/products/pages/clothes/man-detail/man-detail.component.html +++ b/src/app/features/products/pages/clothes/man-detail/man-detail.component.html @@ -1,23 +1 @@ -
-
-
-
- {{ product.name }} -
-
-

{{ product.name }}

-

{{ product.description }}

- Price: {{ product.price | currency:'USD':'symbol':'1.2-2' }} -
-
- {{ product.name }} -
-
- - -
-
-
-
- - + diff --git a/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css index c7e7f35..e69de29 100644 --- a/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css +++ b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css @@ -1,7 +0,0 @@ -.product-detail { - height: 80vh; -} - -img { - height: 500px; -} \ No newline at end of file diff --git a/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.html b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.html index cc0252d..5501402 100644 --- a/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.html +++ b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.html @@ -1,23 +1 @@ -
-
-
-
- {{ product.name }} -
-
-

{{ product.name }}

-

{{ product.description }}

- Price: {{ product.price | currency:'USD':'symbol':'1.2-2' }} -
-
- {{ product.name }} -
-
- - -
-
-
-
- - + From ad1e0cd42ee809cd0f3f7f90215770a5bd632bb9 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Mon, 13 Nov 2023 17:10:12 +0300 Subject: [PATCH 29/58] HotFix --- .../product-detail.component.css | 29 +++++++++++++++++++ .../product-detail.component.html | 2 +- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/app/features/products/pages/product-detail/product-detail.component.css b/src/app/features/products/pages/product-detail/product-detail.component.css index cdef009..0244696 100644 --- a/src/app/features/products/pages/product-detail/product-detail.component.css +++ b/src/app/features/products/pages/product-detail/product-detail.component.css @@ -38,3 +38,32 @@ img { } + @media (max-width: 768px) { + + .product-detail { + height: 100vh; + } + + .product-image { + margin: 2%; + } + + .product-name { + margin: 2%; + margin-top: 2%; + } + + .product-description { + margin: 2%; + } + + .product-orders { + margin: 2%; + } + + .product-total { + margin: 2%; + + } + + } \ No newline at end of file diff --git a/src/app/features/products/pages/product-detail/product-detail.component.html b/src/app/features/products/pages/product-detail/product-detail.component.html index 94f2c4c..b73d26e 100644 --- a/src/app/features/products/pages/product-detail/product-detail.component.html +++ b/src/app/features/products/pages/product-detail/product-detail.component.html @@ -26,7 +26,7 @@

{{ product.name }}

No. of Orders

-
+

Total:

From ec6aff35060230c3d76a89965d58b83eab20f104 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Mon, 13 Nov 2023 17:29:11 +0300 Subject: [PATCH 30/58] fix product detail section display for tablets and mobile devices --- .../product-detail.component.css | 43 +++++++++++++++++-- .../product-detail.component.html | 2 + src/app/features/products/products.module.ts | 4 +- 3 files changed, 44 insertions(+), 5 deletions(-) diff --git a/src/app/features/products/pages/product-detail/product-detail.component.css b/src/app/features/products/pages/product-detail/product-detail.component.css index 0244696..4ffef90 100644 --- a/src/app/features/products/pages/product-detail/product-detail.component.css +++ b/src/app/features/products/pages/product-detail/product-detail.component.css @@ -1,5 +1,5 @@ .product-detail { - height: 80vh; + height: 90vh; } img { @@ -8,7 +8,7 @@ img { } .product-detail-section { - margin-top: 5%; + margin-top: 10%; } .product-image { @@ -37,8 +37,7 @@ img { color: #fff; } - - @media (max-width: 768px) { + @media (max-width: 1024px) { .product-detail { height: 100vh; @@ -46,6 +45,7 @@ img { .product-image { margin: 2%; + width: 100%; } .product-name { @@ -66,4 +66,39 @@ img { } + } + + + @media (max-width: 768px) { + + .product-detail { + height: 120vh; + } + + .product-detail-section { + margin-top: 25%; + } + + .product-image { + margin: 2%; + } + + .product-name { + margin: 2%; + margin-top: 2%; + } + + .product-description { + margin: 2%; + } + + .product-orders { + margin: 2%; + } + + .product-total { + margin: 2%; + margin-bottom: 5%; + } + } \ No newline at end of file diff --git a/src/app/features/products/pages/product-detail/product-detail.component.html b/src/app/features/products/pages/product-detail/product-detail.component.html index b73d26e..18c0199 100644 --- a/src/app/features/products/pages/product-detail/product-detail.component.html +++ b/src/app/features/products/pages/product-detail/product-detail.component.html @@ -1,3 +1,4 @@ +
@@ -37,3 +38,4 @@

Total:

+ diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index 64b3242..fb14960 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -13,6 +13,7 @@ import { KidDetailComponent } from './pages/clothes/kid-detail/kid-detail.compon import { WomanDetailComponent } from './pages/clothes/woman-detail/woman-detail.component'; import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.component'; import { ProductDetailComponent } from './pages/product-detail/product-detail.component'; +import { SharedModule } from 'src/app/shared/shared.module'; @NgModule({ declarations: [ @@ -28,7 +29,8 @@ import { ProductDetailComponent } from './pages/product-detail/product-detail.co imports: [ CommonModule, ProductsRoutingModule, - MatGridListModule + MatGridListModule, + SharedModule ], exports: [ ProductComponent, From a44aa7c81ac66798f4d392f1f58abdbe7d0bae31 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Mon, 13 Nov 2023 17:50:43 +0300 Subject: [PATCH 31/58] fix route to landing page --- src/app/shared/components/nav-bar/nav-bar.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/shared/components/nav-bar/nav-bar.component.html b/src/app/shared/components/nav-bar/nav-bar.component.html index 417052b..6fb85c9 100644 --- a/src/app/shared/components/nav-bar/nav-bar.component.html +++ b/src/app/shared/components/nav-bar/nav-bar.component.html @@ -1,7 +1,7 @@
+ + + + + \ No newline at end of file diff --git a/src/app/features/products/pages/clothes/designer/designer.component.spec.ts b/src/app/features/products/pages/clothes/designer/designer.component.spec.ts new file mode 100644 index 0000000..86ae074 --- /dev/null +++ b/src/app/features/products/pages/clothes/designer/designer.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DesignerComponent } from './designer.component'; + +describe('DesignerComponent', () => { + let component: DesignerComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [DesignerComponent] + }); + fixture = TestBed.createComponent(DesignerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/products/pages/clothes/designer/designer.component.ts b/src/app/features/products/pages/clothes/designer/designer.component.ts new file mode 100644 index 0000000..769059e --- /dev/null +++ b/src/app/features/products/pages/clothes/designer/designer.component.ts @@ -0,0 +1,104 @@ +import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; +import { Product } from 'src/app/features/models/products.product'; +import { DesignersService } from 'src/app/features/services/designers.service'; + +@Component({ + selector: 'app-designer', + templateUrl: './designer.component.html', + styleUrls: ['./designer.component.css'] +}) +export class DesignerComponent implements AfterViewInit{ + + @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; + @ViewChild('designersContainer') designersContainer!: ElementRef; + + designers: Product[] = []; + currentDesigner: Product = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + } + + currentIndex: number = -1; + name: string = ''; + + +constructor(private designersService: DesignersService) {} + +ngOnInit(): void { + this.retrieveDesigners(); +} + +ngAfterViewInit(): void { + // Scroll to the top of the component when it is loaded + if (this.designersContainer) { + this.designersContainer.nativeElement.scrollIntoView({ behavior: 'smooth' }); + } +} + + retrieveDesigners(): void { + this.designersService.getAll().subscribe({ + next: (data) => { + this.designers = data; + console.log("Designers", data); + } + }) + } + + refreshList(): void { + this.retrieveDesigners(); + this.currentDesigner = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + }; + this.currentIndex = -1; + } + + setActiveDesigner(designer: Product, index: number): void { + this.currentDesigner = designer; + this.currentIndex = index; + } + + removeAllDesigners(): void { + this.designersService.deleteAll().subscribe({ + next: (response) => { + console.log(response); + this.refreshList(); + } + }) + } + + searchName(): void { + this.currentDesigner = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00 + }; + this.currentIndex = -1; + this.designersService.findByName(this.name).subscribe({ + next: (data) => { + this.designers = data; + console.log("Designers", data); + } + }) + } + +scrollRight() { +throw new Error('Method not implemented.'); +} +navigateToClotheDetail(arg0: any) { +throw new Error('Method not implemented.'); +} + +scrollLeft() { +throw new Error('Method not implemented.'); +} + +} From 115ad2ca3e9c9f0464c3c5bf5c4ff44a5e2195ee Mon Sep 17 00:00:00 2001 From: kiprotich Date: Wed, 15 Nov 2023 16:04:43 +0300 Subject: [PATCH 37/58] add designer service --- .../services/designers.service.spec.ts | 16 +++++++ .../features/services/designers.service.ts | 42 +++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 src/app/features/services/designers.service.spec.ts create mode 100644 src/app/features/services/designers.service.ts diff --git a/src/app/features/services/designers.service.spec.ts b/src/app/features/services/designers.service.spec.ts new file mode 100644 index 0000000..c1d93f6 --- /dev/null +++ b/src/app/features/services/designers.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { DesignersService } from './designers.service'; + +describe('DesignersService', () => { + let service: DesignersService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(DesignersService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/features/services/designers.service.ts b/src/app/features/services/designers.service.ts new file mode 100644 index 0000000..dbd48c2 --- /dev/null +++ b/src/app/features/services/designers.service.ts @@ -0,0 +1,42 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Product } from '../models/products.product'; +import { ApiService } from './api.service'; + +@Injectable({ + providedIn: 'root' +}) +export class DesignersService { + private url: string = `${this.apiService.baseUrl}/designers`; + + constructor(private http: HttpClient, private apiService: ApiService) { } + + getAll():Observable{ + return this.http.get(this.url); + } + get(id:any):Observable{ + return this.http.get(`${this.url}/${id}`); + } + create(data:any):Observable{ + return this.http.post(this.url,data); + } + update(id:number, data:any):Observable{ + return this.http.put(`${this.url}/${id}`,data); + } + delete(id:number):Observable{ + return this.http.delete(`${this.url}/${id}`); + } + deleteAll():Observable{ + return this.http.delete(this.url); + } + findByName(name:string):Observable{ + return this.http.get(`${this.url}?name=${name}`); + } + getImage(id:number):Observable{ + return this.http.get(`${this.url}/${id}/image`); + } + postImage(id:number,data:any):Observable{ + return this.http.post(`${this.url}/${id}/image`,data); + } +} From 998bf1c29363bef94c4b296e56d0646ad36f3ba5 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Wed, 15 Nov 2023 16:05:49 +0300 Subject: [PATCH 38/58] add designer detail component --- .../designer-detail.component.css | 0 .../designer-detail.component.html | 1 + .../designer-detail.component.spec.ts | 21 +++++++++++++++ .../designer-detail.component.ts | 27 +++++++++++++++++++ 4 files changed, 49 insertions(+) create mode 100644 src/app/features/products/pages/clothes/designer-detail/designer-detail.component.css create mode 100644 src/app/features/products/pages/clothes/designer-detail/designer-detail.component.html create mode 100644 src/app/features/products/pages/clothes/designer-detail/designer-detail.component.spec.ts create mode 100644 src/app/features/products/pages/clothes/designer-detail/designer-detail.component.ts diff --git a/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.css b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.html b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.html new file mode 100644 index 0000000..e0bec75 --- /dev/null +++ b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.spec.ts b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.spec.ts new file mode 100644 index 0000000..c9ea0f3 --- /dev/null +++ b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DesignerDetailComponent } from './designer-detail.component'; + +describe('DesignerDetailComponent', () => { + let component: DesignerDetailComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [DesignerDetailComponent] + }); + fixture = TestBed.createComponent(DesignerDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.ts b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.ts new file mode 100644 index 0000000..7f38e70 --- /dev/null +++ b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.ts @@ -0,0 +1,27 @@ +import { Component, Input } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Product } from 'src/app/features/models/products.product'; +import { DesignersService } from 'src/app/features/services/designers.service'; + +@Component({ + selector: 'app-designer-detail', + templateUrl: './designer-detail.component.html', + styleUrls: ['./designer-detail.component.css'] +}) +export class DesignerDetailComponent { + + @Input() product: Product = { + id: '', + name: '', + description: '', + imageUrl: '', + price: 0 + }; + + constructor (private route: ActivatedRoute, private designersService: DesignersService) {} + ngOnInit(): void { + const id = this.route.snapshot.paramMap.get('id'); + this.designersService.get(id).subscribe(designer => this.product = designer); + } + +} From 96a589b113b1e69d64e420bb6b3761c40db9d1c9 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Wed, 15 Nov 2023 16:06:41 +0300 Subject: [PATCH 39/58] export designer component and nest it to main page --- src/app/features/products/products-routing.module.ts | 10 ++++++++++ src/app/features/products/products.module.ts | 7 ++++++- .../home-section/main-page/main-page.component.html | 4 ++++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/app/features/products/products-routing.module.ts b/src/app/features/products/products-routing.module.ts index a731b61..c7e9abc 100644 --- a/src/app/features/products/products-routing.module.ts +++ b/src/app/features/products/products-routing.module.ts @@ -6,6 +6,8 @@ import { MenComponent } from './pages/clothes/men/men.component'; import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.component'; import { WomenComponent } from './pages/clothes/women/women.component'; import { WomanDetailComponent } from './pages/clothes/woman-detail/woman-detail.component'; +import { DesignerComponent } from './pages/clothes/designer/designer.component'; +import { DesignerDetailComponent } from './pages/clothes/designer-detail/designer-detail.component'; const routes: Routes = [ @@ -30,6 +32,14 @@ const routes: Routes = [ { path: 'women/:id', component: WomanDetailComponent + }, + + { + path: 'designers', component: DesignerComponent + }, + + { + path: 'designers/:id', component: DesignerDetailComponent } ]; diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index fb14960..8cddad3 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -14,6 +14,8 @@ import { WomanDetailComponent } from './pages/clothes/woman-detail/woman-detail. import { ManDetailComponent } from './pages/clothes/man-detail/man-detail.component'; import { ProductDetailComponent } from './pages/product-detail/product-detail.component'; import { SharedModule } from 'src/app/shared/shared.module'; +import { DesignerComponent } from './pages/clothes/designer/designer.component'; +import { DesignerDetailComponent } from './pages/clothes/designer-detail/designer-detail.component'; @NgModule({ declarations: [ @@ -25,6 +27,8 @@ import { SharedModule } from 'src/app/shared/shared.module'; WomanDetailComponent, ManDetailComponent, ProductDetailComponent, + DesignerComponent, + DesignerDetailComponent, ], imports: [ CommonModule, @@ -36,7 +40,8 @@ import { SharedModule } from 'src/app/shared/shared.module'; ProductComponent, KidsComponent, MenComponent, - WomenComponent + WomenComponent, + DesignerComponent ] }) export class ProductsModule { } diff --git a/src/app/home-section/main-page/main-page.component.html b/src/app/home-section/main-page/main-page.component.html index f9c2ff1..5053a91 100644 --- a/src/app/home-section/main-page/main-page.component.html +++ b/src/app/home-section/main-page/main-page.component.html @@ -16,4 +16,8 @@ +
+ +
+ From c98fc9718cff8e687c6981f32bf4d66088881d12 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Wed, 15 Nov 2023 17:00:05 +0300 Subject: [PATCH 40/58] optimize imports --- src/app/app-routing.module.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 230004f..eda35ad 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,8 +1,5 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { HomeComponent } from './home-section/home/home.component'; -import { NavBarComponent } from './shared/components/nav-bar/nav-bar.component'; -import { FooterComponent } from './shared/components/footer/footer.component'; import { MainPageComponent } from './home-section/main-page/main-page.component'; const routes: Routes = [ From 3b56ade1569510623f55a1b96ea2be2c69869f88 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Fri, 17 Nov 2023 14:26:26 +0300 Subject: [PATCH 41/58] add scroll function --- .../clothes/designer/designer.component.ts | 48 +++++++++++++++---- .../pages/product/product.component.ts | 41 ---------------- src/styles.css | 5 +- 3 files changed, 42 insertions(+), 52 deletions(-) diff --git a/src/app/features/products/pages/clothes/designer/designer.component.ts b/src/app/features/products/pages/clothes/designer/designer.component.ts index 769059e..7e6f40e 100644 --- a/src/app/features/products/pages/clothes/designer/designer.component.ts +++ b/src/app/features/products/pages/clothes/designer/designer.component.ts @@ -90,15 +90,45 @@ ngAfterViewInit(): void { }) } -scrollRight() { -throw new Error('Method not implemented.'); -} -navigateToClotheDetail(arg0: any) { -throw new Error('Method not implemented.'); -} - scrollLeft() { -throw new Error('Method not implemented.'); -} + if (this.cardsWrapper) { + const scrollAmount = -400; + const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; + this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 400); + } + } + + scrollRight() { + if (this.cardsWrapper) { + const scrollAmount = 400; + const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; + this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 400); + } + } + + private scrollTo(element: HTMLElement, to: number, duration: number) { + const start = element.scrollLeft; + const change = to - start; + const increment = 20; + let currentTime = 0; + + const animateScroll = () => { + currentTime += increment; + const val = this.easeInOutQuad(currentTime, start, change, duration); + element.scrollLeft = val; + if (currentTime < duration) { + setTimeout(animateScroll, increment); + } + }; + + animateScroll(); + } + + private easeInOutQuad(t: number, b: number, c: number, d: number): number { + t /= d / 2; + if (t < 1) return c / 2 * t * t + b; + t--; + return -c / 2 * (t * (t - 2) - 1) + b; + } } diff --git a/src/app/features/products/pages/product/product.component.ts b/src/app/features/products/pages/product/product.component.ts index 12656aa..63b8101 100644 --- a/src/app/features/products/pages/product/product.component.ts +++ b/src/app/features/products/pages/product/product.component.ts @@ -17,46 +17,5 @@ export class ProductComponent { imageUrl: '', price: 0 }; - - scrollLeft() { - if (this.cardsWrapper) { - const scrollAmount = -300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - scrollRight() { - if (this.cardsWrapper) { - const scrollAmount = 300; - const currentScroll = this.cardsWrapper.nativeElement.scrollLeft; - this.scrollTo(this.cardsWrapper.nativeElement, currentScroll + scrollAmount, 500); - } - } - - private scrollTo(element: HTMLElement, to: number, duration: number) { - const start = element.scrollLeft; - const change = to - start; - const increment = 20; - let currentTime = 0; - - const animateScroll = () => { - currentTime += increment; - const val = this.easeInOutQuad(currentTime, start, change, duration); - element.scrollLeft = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - - animateScroll(); - } - - private easeInOutQuad(t: number, b: number, c: number, d: number): number { - t /= d / 2; - if (t < 1) return c / 2 * t * t + b; - t--; - return -c / 2 * (t * (t - 2) - 1) + b; - } } diff --git a/src/styles.css b/src/styles.css index fb80203..175b7db 100644 --- a/src/styles.css +++ b/src/styles.css @@ -37,8 +37,9 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } flex-direction: row; /* Display cards in a row */ overflow-x: hidden; /* Enable horizontal scrolling */ scroll-behavior: smooth; /* Add smooth scrolling behavior */ - transition: transform 0.3s; - padding-left: 20px; + transition: transform 0.9s; + margin: 20px; + } .service-image { From bb444ca92113517622385edcfea70abe4c38d3fa Mon Sep 17 00:00:00 2001 From: kiprotich Date: Sat, 18 Nov 2023 14:47:12 +0300 Subject: [PATCH 42/58] add cart service --- src/app/shared/services/cart.service.spec.ts | 16 +++++++++++++ src/app/shared/services/cart.service.ts | 25 ++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 src/app/shared/services/cart.service.spec.ts create mode 100644 src/app/shared/services/cart.service.ts diff --git a/src/app/shared/services/cart.service.spec.ts b/src/app/shared/services/cart.service.spec.ts new file mode 100644 index 0000000..cb4a750 --- /dev/null +++ b/src/app/shared/services/cart.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { CartService } from './cart.service'; + +describe('CartService', () => { + let service: CartService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(CartService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/shared/services/cart.service.ts b/src/app/shared/services/cart.service.ts new file mode 100644 index 0000000..13418f6 --- /dev/null +++ b/src/app/shared/services/cart.service.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core'; +import { Product } from 'src/app/features/models/products.product'; + +@Injectable({ + providedIn: 'root' +}) +export class CartService { + + items: Product [] = []; + + constructor() { } + + addToCart(product: Product) { + this.items.push(product); + } + + getItems() { + return this.items; + } + + clearCart() { + this.items = []; + return this.items; + } +} From 6f76b14541f358de24275bd0ff6f7549078d9133 Mon Sep 17 00:00:00 2001 From: kiprotich Date: Wed, 29 Nov 2023 12:07:07 +0300 Subject: [PATCH 43/58] add cart component and service --- src/app/app-routing.module.ts | 14 +- src/app/app.module.ts | 1 - src/app/features/cart/cart/cart.component.css | 29 +++ .../features/cart/cart/cart.component.html | 87 ++++++++ .../features/cart/cart/cart.component.spec.ts | 21 ++ src/app/features/cart/cart/cart.component.ts | 104 ++++++++++ .../directives/next.directive.spec.ts | 8 + src/app/features/directives/next.directive.ts | 19 ++ .../directives/prev.directive.spec.ts | 8 + src/app/features/directives/prev.directive.ts | 19 ++ src/app/features/models/products.product.ts | 10 +- .../designer-detail.component.html | 2 +- .../clothes/designer/designer.component.html | 34 ++-- .../pages/clothes/kids/kids.component.html | 2 + .../product-detail.component.html | 79 +++++--- .../product-detail.component.ts | 16 +- .../pages/product/product.component.ts | 17 +- src/app/features/products/products.module.ts | 4 +- src/app/home-section/home-routing.module.ts | 8 +- src/app/home-section/home/home.component.css | 171 ++++++++-------- src/app/home-section/home/home.component.html | 185 +++++++++++------- .../main-page/main-page.component.html | 46 ++--- .../components/nav-bar/nav-bar.component.html | 15 +- .../shipping/shipping.component.css | 0 .../shipping/shipping.component.html | 11 ++ .../shipping/shipping.component.spec.ts | 21 ++ .../components/shipping/shipping.component.ts | 20 ++ src/app/shared/models/cart-item-group.ts | 6 + src/app/shared/models/cart-item.ts | 6 + src/app/shared/services/cart.service.ts | 19 +- src/app/shared/shared.module.ts | 17 +- src/assets/baner-right-image-01.png | Bin 0 -> 7240 bytes src/assets/baner-right-image-02.png | Bin 0 -> 6505 bytes src/assets/baner-right-image-03.png | Bin 0 -> 9764 bytes src/assets/baner-right-image-04.png | Bin 0 -> 11847 bytes src/assets/left-banner-image.png | Bin 0 -> 14461 bytes src/assets/shipping.json | 26 +++ 37 files changed, 765 insertions(+), 260 deletions(-) create mode 100644 src/app/features/cart/cart/cart.component.css create mode 100644 src/app/features/cart/cart/cart.component.html create mode 100644 src/app/features/cart/cart/cart.component.spec.ts create mode 100644 src/app/features/cart/cart/cart.component.ts create mode 100644 src/app/features/directives/next.directive.spec.ts create mode 100644 src/app/features/directives/next.directive.ts create mode 100644 src/app/features/directives/prev.directive.spec.ts create mode 100644 src/app/features/directives/prev.directive.ts create mode 100644 src/app/shared/components/shipping/shipping.component.css create mode 100644 src/app/shared/components/shipping/shipping.component.html create mode 100644 src/app/shared/components/shipping/shipping.component.spec.ts create mode 100644 src/app/shared/components/shipping/shipping.component.ts create mode 100644 src/app/shared/models/cart-item-group.ts create mode 100644 src/app/shared/models/cart-item.ts create mode 100644 src/assets/baner-right-image-01.png create mode 100644 src/assets/baner-right-image-02.png create mode 100644 src/assets/baner-right-image-03.png create mode 100644 src/assets/baner-right-image-04.png create mode 100644 src/assets/left-banner-image.png create mode 100644 src/assets/shipping.json diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index eda35ad..5375d8b 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,15 +2,17 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { MainPageComponent } from './home-section/main-page/main-page.component'; -const routes: Routes = [ - +export const routes: Routes = [ { - path: '', component: MainPageComponent - } + path: '', + // loadChildren: () => import('/home/cheruiyot/clotours/src/app/home-section/home.module').then (m => m.HomeModule) + component: MainPageComponent, + pathMatch: 'full', + }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0729f3c..2cfd74a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,7 +24,6 @@ import { DataModule } from './data/data.module'; import { CheckoutModule } from './features/checkout/checkout.module'; import { AuthModule } from './features/auth/auth.module'; import { HttpClientModule } from '@angular/common/http'; -import { MainPageComponent } from './home-section/main-page/main-page.component'; @NgModule({ diff --git a/src/app/features/cart/cart/cart.component.css b/src/app/features/cart/cart/cart.component.css new file mode 100644 index 0000000..6fddfd2 --- /dev/null +++ b/src/app/features/cart/cart/cart.component.css @@ -0,0 +1,29 @@ +.nav { + margin-bottom: 10%; +} + +.cart { + height: auto; +} + +.totals { + margin-top: 5%; + margin-bottom: 10%; +} + +.item-image { + height: 20%; + width: 20%; +} + +@media (max-width: 1024px) { + .nav { + margin-bottom: 20%; + } +} + +@media (max-width: 768px) { + .nav { + margin-bottom: 30%; + } +} diff --git a/src/app/features/cart/cart/cart.component.html b/src/app/features/cart/cart/cart.component.html new file mode 100644 index 0000000..a0d1bc3 --- /dev/null +++ b/src/app/features/cart/cart/cart.component.html @@ -0,0 +1,87 @@ + +
+

Cart

+
+
+
+ entry.value.item.name +
+
+ +
+
+

Product

+ {{ entry.value.item.name }}
+
+
+ +
+
+

Price

+ {{ entry.value.item.price | currency }}
+
+
+ +
+
+

Quantity

+ {{ entry.value.quantity }}
+
+
+ +
+

Subtotal {{ calculateSubtotal() | currency }}

+
+ +
+
+ + +
+ + +
+ +

Shipping Cost: {{ shippingCost | currency }}

+ +

Total Cost: {{ totalCost | currency }}

+ + +
+
+
+
+ diff --git a/src/app/features/cart/cart/cart.component.spec.ts b/src/app/features/cart/cart/cart.component.spec.ts new file mode 100644 index 0000000..f28304e --- /dev/null +++ b/src/app/features/cart/cart/cart.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CartComponent } from './cart.component'; + +describe('CartComponent', () => { + let component: CartComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [CartComponent] + }); + fixture = TestBed.createComponent(CartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/cart/cart/cart.component.ts b/src/app/features/cart/cart/cart.component.ts new file mode 100644 index 0000000..64772e8 --- /dev/null +++ b/src/app/features/cart/cart/cart.component.ts @@ -0,0 +1,104 @@ +import { Component } from '@angular/core'; +import { CartService } from '../../../shared/services/cart.service'; +import { FormBuilder } from '@angular/forms'; + +@Component({ + selector: 'app-cart', + templateUrl: './cart.component.html', + styleUrls: ['./cart.component.css'], +}) +export class CartComponent { + items = new Map(); // use a Map object to store the items in the cart + checkoutForm = this.formBuilder.group({ + name: '', + address: '', + shipping: '', + }); + + shippingOptions!: { type: string; price: number }[]; + shippingCost = 0; // variable to store the shipping cost + totalCost = 0; // variable to store the total cost + + constructor( + private cartService: CartService, + private formBuilder: FormBuilder + ) {} + + ngOnInit(): void { + this.cartService.getShippingPrices().subscribe((options) => { + this.shippingOptions = options; + this.checkoutForm.get('shipping')?.setValue(this.shippingOptions[-1].type); + }); + this.cartService.getItems().forEach((item) => { + // iterate over the items from the cart service + if (this.items.has(item.id)) { + // check if the item already exists in the cart + let value = this.items.get(item.id); // get the value object of the item + if (value) { + value.quantity++; // increment the quantity of the item + this.items.set(item.id, value); // update the value object in the cart + } + } else { + this.items.set(item.id, { item: item, quantity: 1 }); // add the item to the cart with quantity 1 + } + }); + this.shippingCost = this.calculateShippingCost(); + this.totalCost = this.calculateTotalCost(); + } + + onSubmit(): void { + this.items.clear(); // clear the items from the cart + console.warn('Your order has been submitted', this.checkoutForm.value); + this.checkoutForm.reset(); + } + + calculateSubtotal(): number { + let subtotal = 0; + this.items.forEach((value) => { + // iterate over the values of the cart + subtotal += value.item.price * value.quantity; // multiply the item price by the quantity and add to the subtotal + }); + return subtotal; + } + + calculateShippingCost(): number { + let option = this.shippingOptions.find( + (o) => o.type === this.checkoutForm.get('shipping')?.value + ); + return option ? option.price : 0; + } + + calculateTotalCost(): number { + return this.calculateSubtotal() + this.shippingCost; + } + + onShippingChange(): void { + this.shippingCost = this.calculateShippingCost(); + this.totalCost = this.calculateTotalCost(); + } + + onAdd(item: any): void { + // function to add one more item to the cart + let value = this.items.get(item.id); // get the value object of the item + if (value) { + value.quantity++; // increment the quantity of the item + this.items.set(item.id, value); // update the value object in the cart + this.totalCost = this.calculateTotalCost(); // recalculate the total cost + } + } + + onRemove(item: any): void { + // function to remove one item from the cart + let value = this.items.get(item.id); // get the value object of the item + if (value) { + value.quantity--; // decrement the quantity of the item + if (value.quantity === 0) { + // check if the quantity is zero + this.items.delete(item.id); // delete the item from the cart + } else { + this.items.set(item.id, value); // update the value object in the cart + } + this.totalCost = this.calculateTotalCost(); // recalculate the total cost + } + } +} diff --git a/src/app/features/directives/next.directive.spec.ts b/src/app/features/directives/next.directive.spec.ts new file mode 100644 index 0000000..0ae43cc --- /dev/null +++ b/src/app/features/directives/next.directive.spec.ts @@ -0,0 +1,8 @@ +import { NextDirective } from './next.directive'; + +describe('NextDirective', () => { + it('should create an instance', () => { + const directive = new NextDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/features/directives/next.directive.ts b/src/app/features/directives/next.directive.ts new file mode 100644 index 0000000..c8234a4 --- /dev/null +++ b/src/app/features/directives/next.directive.ts @@ -0,0 +1,19 @@ +import { Directive, ElementRef, HostListener } from '@angular/core'; + +@Directive({ + selector: '[appNext]' +}) +export class NextDirective { + + constructor(private el: ElementRef) { } + + @HostListener('click') + nextFunction(){ + const elm = this.el.nativeElement.parentElement.parentElement.children[1]; + const product = elm.getElementsByClassName("card"); + if (product.length > 3 || window.innerWidth < 768) { + elm.append(product[0]); + } + } + +} diff --git a/src/app/features/directives/prev.directive.spec.ts b/src/app/features/directives/prev.directive.spec.ts new file mode 100644 index 0000000..0f29b8d --- /dev/null +++ b/src/app/features/directives/prev.directive.spec.ts @@ -0,0 +1,8 @@ +import { PrevDirective } from './prev.directive'; + +describe('PrevDirective', () => { + it('should create an instance', () => { + const directive = new PrevDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/features/directives/prev.directive.ts b/src/app/features/directives/prev.directive.ts new file mode 100644 index 0000000..489a55d --- /dev/null +++ b/src/app/features/directives/prev.directive.ts @@ -0,0 +1,19 @@ +import { Directive, ElementRef, HostListener } from '@angular/core'; + +@Directive({ + selector: '[appPrev]' +}) +export class PrevDirective { + + constructor(private el: ElementRef) { } + + @HostListener('click') + nextFunction(){ + const elm = this.el.nativeElement.parentElement.parentElement.children[1]; + const product = elm.getElementsByClassName('card'); + if (product.length > 3 || window.innerWidth < 768) { + elm.prepend(product[product.length - 1]); + } + } + +} diff --git a/src/app/features/models/products.product.ts b/src/app/features/models/products.product.ts index 06016b0..3f9aa0f 100644 --- a/src/app/features/models/products.product.ts +++ b/src/app/features/models/products.product.ts @@ -1,7 +1,7 @@ export interface Product { - id: any; - imageUrl: string; - name: string; - description: string; - price: number; + id: any; + imageUrl: string; + name: string; + description: string; + price: number; } diff --git a/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.html b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.html index e0bec75..5501402 100644 --- a/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.html +++ b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/app/features/products/pages/clothes/designer/designer.component.html b/src/app/features/products/pages/clothes/designer/designer.component.html index edce39d..e7551d4 100644 --- a/src/app/features/products/pages/clothes/designer/designer.component.html +++ b/src/app/features/products/pages/clothes/designer/designer.component.html @@ -1,25 +1,33 @@
-
-
-
-

Hand Made

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

-
+
+
+
+

Hand Made

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam. +

+
- +
- +
- +
- -
- - \ No newline at end of file +
diff --git a/src/app/features/products/pages/clothes/kids/kids.component.html b/src/app/features/products/pages/clothes/kids/kids.component.html index 32b3cd9..2974677 100644 --- a/src/app/features/products/pages/clothes/kids/kids.component.html +++ b/src/app/features/products/pages/clothes/kids/kids.component.html @@ -1,3 +1,4 @@ +
@@ -21,4 +22,5 @@

Kid's Latest

+ diff --git a/src/app/features/products/pages/product-detail/product-detail.component.html b/src/app/features/products/pages/product-detail/product-detail.component.html index 18c0199..4125571 100644 --- a/src/app/features/products/pages/product-detail/product-detail.component.html +++ b/src/app/features/products/pages/product-detail/product-detail.component.html @@ -1,41 +1,66 @@
-
- - diff --git a/src/app/features/products/pages/product-detail/product-detail.component.ts b/src/app/features/products/pages/product-detail/product-detail.component.ts index 6362855..beb0b2b 100644 --- a/src/app/features/products/pages/product-detail/product-detail.component.ts +++ b/src/app/features/products/pages/product-detail/product-detail.component.ts @@ -1,5 +1,7 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; import { Product } from 'src/app/features/models/products.product'; +import { CartService } from 'src/app/shared/services/cart.service'; @Component({ selector: 'app-product-detail', @@ -16,4 +18,16 @@ export class ProductDetailComponent { price: 0 }; + quantity: number = 1; + + constructor ( private route: ActivatedRoute, private cartService: CartService) {} + + addToCart(product: Product, quantity: number) { + for (let i = 0; i < quantity; i++) { + this.cartService.addToCart(product); + } + + window.alert(`Added ${quantity} ${product.name}(s) to the cart!`); + } + } diff --git a/src/app/features/products/pages/product/product.component.ts b/src/app/features/products/pages/product/product.component.ts index 63b8101..8c6aa04 100644 --- a/src/app/features/products/pages/product/product.component.ts +++ b/src/app/features/products/pages/product/product.component.ts @@ -1,21 +1,26 @@ -import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'; +import { + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, +} from '@angular/core'; import { Product } from '../../../models/products.product'; @Component({ selector: 'app-product', templateUrl: './product.component.html', - styleUrls: ['./product.component.css'] + styleUrls: ['./product.component.css'], }) export class ProductComponent { - @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; @Input() product: Product = { - id:'', + id: '', name: '', description: '', imageUrl: '', - price: 0 + price: 0, }; - } diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index 8cddad3..1aa1f49 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -16,6 +16,7 @@ import { ProductDetailComponent } from './pages/product-detail/product-detail.co import { SharedModule } from 'src/app/shared/shared.module'; import { DesignerComponent } from './pages/clothes/designer/designer.component'; import { DesignerDetailComponent } from './pages/clothes/designer-detail/designer-detail.component'; +import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ @@ -34,7 +35,8 @@ import { DesignerDetailComponent } from './pages/clothes/designer-detail/designe CommonModule, ProductsRoutingModule, MatGridListModule, - SharedModule + SharedModule, + FormsModule ], exports: [ ProductComponent, diff --git a/src/app/home-section/home-routing.module.ts b/src/app/home-section/home-routing.module.ts index 61aca09..510f272 100644 --- a/src/app/home-section/home-routing.module.ts +++ b/src/app/home-section/home-routing.module.ts @@ -4,10 +4,10 @@ import { HomeComponent } from './home/home.component'; import { MainPageComponent } from './main-page/main-page.component'; const routes: Routes = [ - { path: 'landing', component: MainPageComponent, pathMatch: 'full'}, - { - path: 'home', component: HomeComponent - } + // { path: 'landing', component: MainPageComponent, pathMatch: 'full'}, + // { + // path: 'home', component: HomeComponent + // } ]; @NgModule({ diff --git a/src/app/home-section/home/home.component.css b/src/app/home-section/home/home.component.css index b816704..cb3b052 100644 --- a/src/app/home-section/home/home.component.css +++ b/src/app/home-section/home/home.component.css @@ -4,7 +4,7 @@ } .banner { - height: 86.70%; + height: 86.7%; } .image-container { @@ -16,106 +16,99 @@ overflow: hidden; height: 34vh; } - - .bio { - position: absolute; - top: 50%; - left: 40%; - transform: translate(-50%, -50%); - text-align: center; - color: white; - } - .sub { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - color: white; - } +.bio { + position: absolute; + top: 50%; + left: 40%; + transform: translate(-50%, -50%); + text-align: center; + color: white; +} - #blurred-image { - position: relative; - filter: blur(1px); - width: 100%; - height: 100%; - object-fit: cover; - } +.sub { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: white; +} - .sub-image { - height: 100%; - width: 100%; - object-fit: cover; - } +#blurred-image { + position: relative; + filter: blur(1px); + width: 100%; + height: 100%; + object-fit: cover; +} - .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - opacity: 0; - transition: opacity 0.3s ease; - } +.sub-image { + height: 100%; + width: 100%; + object-fit: cover; +} - .overlay-content { - color: #fff; - font-size: 1rem; - } +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + transition: opacity 0.3s ease; +} - .sub-image-container:hover .overlay { - opacity: 1; - } +.overlay-content { + color: #fff; + font-size: 1rem; +} + +.sub-image-container:hover .overlay { + opacity: 1; +} - .link-button { - text-decoration: none; - color: white; +.link-button { + text-decoration: none; + color: white; +} + +@media (max-width: 1024px) { + .landing { + height: 225%; + } + .sub-image-container { + margin-left: -13%; + margin-right: -13%; } - @media (max-width: 1024px) { - .landing { - height: 225%; - } - .sub-image-container { - margin-left: -13%; - margin-right: -13%; - } - - .image-container { - margin-bottom: -10%; - } - - .margin-small-devices { - margin-bottom: -7%; - } - + .image-container { + margin-bottom: -10%; } - @media (max-width: 768px) { - .landing { - height: 205%; - } - .sub-image-container { - margin-left: -3%; - margin-right: -3%; - } - - .image-container { - margin-bottom: -10%; - } - - .margin-small-devices { - margin-bottom: -5%; - } - + .margin-small-devices { + margin-bottom: -7%; } +} +@media (max-width: 768px) { + .landing { + height: 205%; + } + .sub-image-container { + margin-left: -3%; + margin-right: -3%; + } - + .image-container { + margin-bottom: -10%; + } - \ No newline at end of file + .margin-small-devices { + margin-bottom: -5%; + } +} diff --git a/src/app/home-section/home/home.component.html b/src/app/home-section/home/home.component.html index cccc57e..d31b396 100644 --- a/src/app/home-section/home/home.component.html +++ b/src/app/home-section/home/home.component.html @@ -1,90 +1,125 @@
-
-
-