diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d36fe86..5375d8b 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,24 +1,18 @@ 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 = [ - +export const routes: Routes = [ { - path: 'nav', component: NavBarComponent + path: '', + // loadChildren: () => import('/home/cheruiyot/clotours/src/app/home-section/home.module').then (m => m.HomeModule) + component: MainPageComponent, + pathMatch: 'full', }, - { - path: 'footer', component: FooterComponent - }, - { - path: '', component: HomeComponent - } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/src/app/app.component.html b/src/app/app.component.html index 95de8eb..8a9dc50 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 82fcf3a..2cfd74a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,8 +4,7 @@ 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 { HomeModule } from './home-section/home.module'; import { ProductsModule } from './features/products/products.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -18,19 +17,18 @@ 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 { CurrencyPipe } from '@angular/common'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ - AppComponent, - HomeComponent + AppComponent ], imports: [ BrowserModule, @@ -52,9 +50,9 @@ import { CurrencyPipe } from '@angular/common'; DataModule, CheckoutModule, AuthModule, - + HttpClientModule ], - 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.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.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/core.module.ts b/src/app/core/core.module.ts index 80c14db..db1fe2c 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -1,43 +1,21 @@ 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 { } - @NgModule({ - declarations: [HeaderComponent, NotFoundComponent, ErrorComponent], + declarations: [NotFoundComponent, ErrorComponent], imports: [ RouterModule.forChild([ { path: '404', component: NotFoundComponent }, { path: 'error', component: ErrorComponent }, { path: '**', redirectTo: '/404' } ]), - // MatBadgeModule, SharedModule ], exports: [ - HeaderComponent, + ] }) export class CoreModule { } 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..1fbb82b --- /dev/null +++ b/src/app/features/cart/cart/cart.component.html @@ -0,0 +1,71 @@ + +
+

Cart

+
+ + + + + + + + + + + + + + + + + +
ProductPriceQuantity
+ product.name + + {{ entry.value.item.name }} + + {{ entry.value.item.price | currency }} + + {{ entry.value.quantity }} +
+ +

Subtotal Cost: {{ calculateSubtotal() | currency }}

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

Shipping Cost: {{ shippingCost | currency }}

+ +

Total Cost: {{ totalCost | currency }}

+ + +
+
+
+
+ diff --git a/src/app/features/products/pages/tours/tours.component.spec.ts b/src/app/features/cart/cart/cart.component.spec.ts similarity index 52% rename from src/app/features/products/pages/tours/tours.component.spec.ts rename to src/app/features/cart/cart/cart.component.spec.ts index 2bf220a..f28304e 100644 --- a/src/app/features/products/pages/tours/tours.component.spec.ts +++ b/src/app/features/cart/cart/cart.component.spec.ts @@ -1,16 +1,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ToursComponent } from './tours.component'; +import { CartComponent } from './cart.component'; -describe('ToursComponent', () => { - let component: ToursComponent; - let fixture: ComponentFixture; +describe('CartComponent', () => { + let component: CartComponent; + let fixture: ComponentFixture; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ToursComponent] + declarations: [CartComponent] }); - fixture = TestBed.createComponent(ToursComponent); + fixture = TestBed.createComponent(CartComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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..be717cc --- /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.name)) { + // check if the item already exists in the cart + let value = this.items.get(item.name); // get the value object of the item + if (value) { + value.quantity++; // increment the quantity of the item + this.items.set(item.name, value); // update the value object in the cart + } + } else { + this.items.set(item.name, { 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..8f784fd 100644 --- a/src/app/features/models/products.product.ts +++ b/src/app/features/models/products.product.ts @@ -1,7 +1,9 @@ export interface Product { - id: any; - imageUrl: string; - name: string; - description: string; - price: number; + id: any; + imageUrl: string; + name: string; + description: string; + price: number; + quantity: number; + color: string; } 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.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.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.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.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.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/core/components/header/header.component.css b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.css similarity index 100% rename from src/app/core/components/header/header.component.css rename to src/app/features/products/pages/clothes/designer-detail/designer-detail.component.css 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..5501402 --- /dev/null +++ b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.html @@ -0,0 +1 @@ + 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..f5b487b --- /dev/null +++ b/src/app/features/products/pages/clothes/designer-detail/designer-detail.component.ts @@ -0,0 +1,29 @@ +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, + quantity: 0, + color: '' + }; + + 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); + } + +} diff --git a/src/app/features/products/pages/beverages/beverages/beverages.component.css b/src/app/features/products/pages/clothes/designer/designer.component.css similarity index 100% rename from src/app/features/products/pages/beverages/beverages/beverages.component.css rename to src/app/features/products/pages/clothes/designer/designer.component.css diff --git a/src/app/features/products/pages/clothes/designer/designer.component.html b/src/app/features/products/pages/clothes/designer/designer.component.html new file mode 100644 index 0000000..e7551d4 --- /dev/null +++ b/src/app/features/products/pages/clothes/designer/designer.component.html @@ -0,0 +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. +

+
+
+
+ +
+ +
+ +
+
+ +
+
+
+
+
diff --git a/src/app/features/products/pages/clothing/clothing/clothing.component.spec.ts b/src/app/features/products/pages/clothes/designer/designer.component.spec.ts similarity index 50% rename from src/app/features/products/pages/clothing/clothing/clothing.component.spec.ts rename to src/app/features/products/pages/clothes/designer/designer.component.spec.ts index 26c7da7..86ae074 100644 --- a/src/app/features/products/pages/clothing/clothing/clothing.component.spec.ts +++ b/src/app/features/products/pages/clothes/designer/designer.component.spec.ts @@ -1,16 +1,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ClothingComponent } from './clothing.component'; +import { DesignerComponent } from './designer.component'; -describe('ClothingComponent', () => { - let component: ClothingComponent; - let fixture: ComponentFixture; +describe('DesignerComponent', () => { + let component: DesignerComponent; + let fixture: ComponentFixture; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ClothingComponent] + declarations: [DesignerComponent] }); - fixture = TestBed.createComponent(ClothingComponent); + fixture = TestBed.createComponent(DesignerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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..9e378b8 --- /dev/null +++ b/src/app/features/products/pages/clothes/designer/designer.component.ts @@ -0,0 +1,140 @@ +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, + quantity: 0, + color: '' + } + + 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, + quantity: 0, + color: '' + }; + 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, + quantity: 0, + color: '' + }; + this.currentIndex = -1; + this.designersService.findByName(this.name).subscribe({ + next: (data) => { + this.designers = data; + console.log("Designers", data); + } + }) + } + +scrollLeft() { + 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/beverages/coffee/coffee.component.css b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css similarity index 100% rename from src/app/features/products/pages/beverages/coffee/coffee.component.css rename to src/app/features/products/pages/clothes/kid-detail/kid-detail.component.css 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..5501402 --- /dev/null +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.html @@ -0,0 +1 @@ + diff --git a/src/app/features/products/pages/beverages/beverages/beverages.component.spec.ts b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.spec.ts similarity index 50% rename from src/app/features/products/pages/beverages/beverages/beverages.component.spec.ts rename to src/app/features/products/pages/clothes/kid-detail/kid-detail.component.spec.ts index b7b905f..f99897c 100644 --- a/src/app/features/products/pages/beverages/beverages/beverages.component.spec.ts +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.spec.ts @@ -1,16 +1,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { BeveragesComponent } from './beverages.component'; +import { KidDetailComponent } from './kid-detail.component'; -describe('BeveragesComponent', () => { - let component: BeveragesComponent; - let fixture: ComponentFixture; +describe('KidDetailComponent', () => { + let component: KidDetailComponent; + let fixture: ComponentFixture; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [BeveragesComponent] + declarations: [KidDetailComponent] }); - fixture = TestBed.createComponent(BeveragesComponent); + fixture = TestBed.createComponent(KidDetailComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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..85cb84f --- /dev/null +++ b/src/app/features/products/pages/clothes/kid-detail/kid-detail.component.ts @@ -0,0 +1,40 @@ +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', + templateUrl: './kid-detail.component.html', + styleUrls: ['./kid-detail.component.css'] +}) +export class KidDetailComponent { + + @Input() product: Product = { + id: '', + name: '', + description: '', + imageUrl: '', + price: 0, + quantity: 0, + color: '' + }; + + 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.'); + } + + +} diff --git a/src/app/features/products/pages/beverages/tea/tea.component.css b/src/app/features/products/pages/clothes/kids/kids.component.css similarity index 100% rename from src/app/features/products/pages/beverages/tea/tea.component.css rename to src/app/features/products/pages/clothes/kids/kids.component.css 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..32b3cd9 --- /dev/null +++ b/src/app/features/products/pages/clothes/kids/kids.component.html @@ -0,0 +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.

+
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+
+
+ diff --git a/src/app/core/components/header/header.component.spec.ts b/src/app/features/products/pages/clothes/kids/kids.component.spec.ts similarity index 52% rename from src/app/core/components/header/header.component.spec.ts rename to src/app/features/products/pages/clothes/kids/kids.component.spec.ts index f8d8ed5..b8f60f2 100644 --- a/src/app/core/components/header/header.component.spec.ts +++ b/src/app/features/products/pages/clothes/kids/kids.component.spec.ts @@ -1,16 +1,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { HeaderComponent } from './header.component'; +import { KidsComponent } from './kids.component'; -describe('HeaderComponent', () => { - let component: HeaderComponent; - let fixture: ComponentFixture; +describe('KidsComponent', () => { + let component: KidsComponent; + let fixture: ComponentFixture; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [HeaderComponent] + declarations: [KidsComponent] }); - fixture = TestBed.createComponent(HeaderComponent); + fixture = TestBed.createComponent(KidsComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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..6767059 --- /dev/null +++ b/src/app/features/products/pages/clothes/kids/kids.component.ts @@ -0,0 +1,110 @@ +import { AfterViewInit, 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', + templateUrl: './kids.component.html', + styleUrls: ['./kids.component.css'] +}) +export class KidsComponent implements AfterViewInit{ + + @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; + @ViewChild('kidsContainer') kidsContainer!: ElementRef; + + kids: Product[] = []; + currentKid: Product = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00, + quantity: 0, + color: '' + } + + currentIndex: number = -1; + name: string = ''; + + +constructor(private kidsService: KidsService) {} + +ngOnInit(): void { + this.retrieveKids(); +} + +ngAfterViewInit(): void { + // Scroll to the top of the component when it is loaded + if (this.kidsContainer) { + this.kidsContainer.nativeElement.scrollIntoView({ behavior: 'smooth' }); + } +} + + 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, + quantity: 0, + color: '' + }; + 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, + quantity: 0, + color: '' + }; + 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.'); +} +navigateToClotheDetail(arg0: any) { +throw new Error('Method not implemented.'); +} + +scrollLeft() { +throw new Error('Method not implemented.'); +} + +} diff --git a/src/app/features/products/pages/clothing/clothing/clothing.component.css b/src/app/features/products/pages/clothes/man-detail/man-detail.component.css similarity index 100% rename from src/app/features/products/pages/clothing/clothing/clothing.component.css rename to src/app/features/products/pages/clothes/man-detail/man-detail.component.css 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..5501402 --- /dev/null +++ b/src/app/features/products/pages/clothes/man-detail/man-detail.component.html @@ -0,0 +1 @@ + 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..0e728a3 --- /dev/null +++ b/src/app/features/products/pages/clothes/man-detail/man-detail.component.ts @@ -0,0 +1,39 @@ +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, + quantity: 0, + color: '' + }; + + 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/clothing/home-made/home-made.component.css b/src/app/features/products/pages/clothes/men/men.component.css similarity index 100% rename from src/app/features/products/pages/clothing/home-made/home-made.component.css rename to src/app/features/products/pages/clothes/men/men.component.css diff --git a/src/app/features/products/pages/links/quick-links/projects.component.html b/src/app/features/products/pages/clothes/men/men.component.html similarity index 77% rename from src/app/features/products/pages/links/quick-links/projects.component.html rename to src/app/features/products/pages/clothes/men/men.component.html index 718bd42..fb8ca2c 100644 --- a/src/app/features/products/pages/links/quick-links/projects.component.html +++ b/src/app/features/products/pages/clothes/men/men.component.html @@ -1,6 +1,6 @@ -
+
-

Quick Links

+

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.

@@ -9,7 +9,7 @@

Quick Links

- +
@@ -18,4 +18,3 @@

Quick Links

- diff --git a/src/app/features/products/pages/beverages/tea/tea.component.spec.ts b/src/app/features/products/pages/clothes/men/men.component.spec.ts similarity index 54% rename from src/app/features/products/pages/beverages/tea/tea.component.spec.ts rename to src/app/features/products/pages/clothes/men/men.component.spec.ts index bbd8775..a98b458 100644 --- a/src/app/features/products/pages/beverages/tea/tea.component.spec.ts +++ b/src/app/features/products/pages/clothes/men/men.component.spec.ts @@ -1,16 +1,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { TeaComponent } from './tea.component'; +import { MenComponent } from './men.component'; -describe('TeaComponent', () => { - let component: TeaComponent; - let fixture: ComponentFixture; +describe('MenComponent', () => { + let component: MenComponent; + let fixture: ComponentFixture; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TeaComponent] + declarations: [MenComponent] }); - fixture = TestBed.createComponent(TeaComponent); + fixture = TestBed.createComponent(MenComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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..91d9c24 --- /dev/null +++ b/src/app/features/products/pages/clothes/men/men.component.ts @@ -0,0 +1,102 @@ +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', + templateUrl: './men.component.html', + styleUrls: ['./men.component.css'] +}) +export class MenComponent { + + @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; + + men$: Product[] = []; + currentMan: Product = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00, + quantity: 0, + color: '' + } + + 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, + quantity: 0, + color: '' + }; + 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, + quantity: 0, + color: '' + }; + 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.'); +} +navigateToClotheDetail(_t11: any) { +throw new Error('Method not implemented.'); +} + +scrollLeft() { +throw new Error('Method not implemented.'); +} + +} diff --git a/src/app/features/products/pages/clothing/imports/imports.component.css b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css similarity index 100% rename from src/app/features/products/pages/clothing/imports/imports.component.css rename to src/app/features/products/pages/clothes/woman-detail/woman-detail.component.css 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..5501402 --- /dev/null +++ b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.html @@ -0,0 +1 @@ + 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..a2b5176 --- /dev/null +++ b/src/app/features/products/pages/clothes/woman-detail/woman-detail.component.ts @@ -0,0 +1,39 @@ +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, + quantity: 0, + color: '' + }; + + 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/links/quick-links/projects.component.css b/src/app/features/products/pages/clothes/women/women.component.css similarity index 100% rename from src/app/features/products/pages/links/quick-links/projects.component.css rename to src/app/features/products/pages/clothes/women/women.component.css diff --git a/src/app/features/products/pages/beverages/coffee/coffee.component.html b/src/app/features/products/pages/clothes/women/women.component.html similarity index 76% rename from src/app/features/products/pages/beverages/coffee/coffee.component.html rename to src/app/features/products/pages/clothes/women/women.component.html index fe79d2c..481a534 100644 --- a/src/app/features/products/pages/beverages/coffee/coffee.component.html +++ b/src/app/features/products/pages/clothes/women/women.component.html @@ -1,6 +1,6 @@ -
+
-

Coffee

+

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.

@@ -9,7 +9,7 @@

Coffee

- +
@@ -18,4 +18,3 @@

Coffee

- diff --git a/src/app/features/products/pages/beverages/coffee/coffee.component.spec.ts b/src/app/features/products/pages/clothes/women/women.component.spec.ts similarity index 52% rename from src/app/features/products/pages/beverages/coffee/coffee.component.spec.ts rename to src/app/features/products/pages/clothes/women/women.component.spec.ts index 7d2b75b..23fb368 100644 --- a/src/app/features/products/pages/beverages/coffee/coffee.component.spec.ts +++ b/src/app/features/products/pages/clothes/women/women.component.spec.ts @@ -1,16 +1,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { CoffeeComponent } from './coffee.component'; +import { WomenComponent } from './women.component'; -describe('CoffeeComponent', () => { - let component: CoffeeComponent; - let fixture: ComponentFixture; +describe('WomenComponent', () => { + let component: WomenComponent; + let fixture: ComponentFixture; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [CoffeeComponent] + declarations: [WomenComponent] }); - fixture = TestBed.createComponent(CoffeeComponent); + fixture = TestBed.createComponent(WomenComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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..8f6ce2e --- /dev/null +++ b/src/app/features/products/pages/clothes/women/women.component.ts @@ -0,0 +1,101 @@ +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', + templateUrl: './women.component.html', + styleUrls: ['./women.component.css'] +}) +export class WomenComponent { + @ViewChild('cardsWrapper') cardsWrapper!: ElementRef; + + women$: Product[] = []; + currentWoman: Product = { + id: 0, + name: '', + description: '', + imageUrl: '', + price: 0.00, + quantity: 0, + color: '' + } + + 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, + quantity: 0, + color: '' + }; + 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, + quantity: 0, + color: '' + }; + this.currentIndex = -1; + this.womenService.findByName(this.name).subscribe({ + next: (data) => { + this.women$ = data; + console.log("Women", data); + } + }) + } + + +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/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.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.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.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/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-detail/product-detail.component.css b/src/app/features/products/pages/product-detail/product-detail.component.css new file mode 100644 index 0000000..4ffef90 --- /dev/null +++ b/src/app/features/products/pages/product-detail/product-detail.component.css @@ -0,0 +1,104 @@ +.product-detail { + height: 90vh; +} + +img { + height: 300px; + width: 100%; +} + +.product-detail-section { + margin-top: 10%; +} + +.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; + } + + @media (max-width: 1024px) { + + .product-detail { + height: 100vh; + } + + .product-image { + margin: 2%; + width: 100%; + } + + .product-name { + margin: 2%; + margin-top: 2%; + } + + .product-description { + margin: 2%; + } + + .product-orders { + margin: 2%; + } + + .product-total { + margin: 2%; + + } + + } + + + @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 new file mode 100644 index 0000000..37cc734 --- /dev/null +++ b/src/app/features/products/pages/product-detail/product-detail.component.html @@ -0,0 +1,75 @@ + +
+
+
+
+
+ {{ product.name }} +
+
+ {{ product.name }} +
+
+ +
+
+

+ {{ product.name }} +

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

{{ product.description }}

+
+ +
+

Quantity: {{ product.quantity }}

+
+ +
+

Color: {{ product.color }}

+
+ +
+

No. of Orders

+ + +
+ +
+

+ Total: + {{ + product.price * quantity$ | currency : "USD" : "symbol" : "1.2-2" + }} +

+
+ Add To Cart +
+ +
+ + your_shopping_cart + +
+
+ + +
+

Product details not available.

+
+
+
+
+
+ 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..a15ee73 --- /dev/null +++ b/src/app/features/products/pages/product-detail/product-detail.component.ts @@ -0,0 +1,43 @@ +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', + templateUrl: './product-detail.component.html', + styleUrls: ['./product-detail.component.css'] +}) +export class ProductDetailComponent { + + @Input() product: Product = { + id: '', + name: '', + description: '', + imageUrl: '', + price: 0, + quantity: 0, + color: '' + }; + + quantity$: number = 1; + + constructor ( private cartService: CartService) {} + + addToCart(product: Product, quantity$: number) { + if (product.quantity < quantity$) { + window.alert(`Sorry, there are only ${product.quantity} ${product.name}(s) in stock.`); + quantity$ = product.quantity; + } + for (let i = 0; i < quantity$; i++) { +// this.cartService.addToCart(product); +if (product.quantity > 0) { + this.cartService.addToCart(product); + product.quantity--; +} + } + + window.alert(`Added ${quantity$} ${product.name}(s) to the cart!`); + } + +} 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..9d639b3 100644 --- a/src/app/features/products/pages/product/product.component.html +++ b/src/app/features/products/pages/product/product.component.html @@ -1,8 +1,10 @@
- Tour Site Image + Product Image

{{ product.name }}

{{ product.description }}

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

{{ product.quantity }}

+

{{ product.color }}

diff --git a/src/app/features/products/pages/product/product.component.ts b/src/app/features/products/pages/product/product.component.ts index f52c313..c314ce6 100644 --- a/src/app/features/products/pages/product/product.component.ts +++ b/src/app/features/products/pages/product/product.component.ts @@ -1,73 +1,28 @@ -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, + quantity: 0, + color: '' }; - @Output() scrollLeftClick: EventEmitter = new EventEmitter(); - @Output() scrollRightClick: EventEmitter = new EventEmitter(); - - 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; - } - - 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.css b/src/app/features/products/pages/products/products.component.css deleted file mode 100644 index 05f1a52..0000000 --- a/src/app/features/products/pages/products/products.component.css +++ /dev/null @@ -1,3 +0,0 @@ -/* .services { - margin-top: 150px; -} */ \ No newline at end of file diff --git a/src/app/features/products/pages/products/products.component.html b/src/app/features/products/pages/products/products.component.html deleted file mode 100644 index d4e4c71..0000000 --- a/src/app/features/products/pages/products/products.component.html +++ /dev/null @@ -1,30 +0,0 @@ -
- - - - -
- - diff --git a/src/app/features/products/pages/products/products.component.spec.ts b/src/app/features/products/pages/products/products.component.spec.ts deleted file mode 100644 index 0a84299..0000000 --- a/src/app/features/products/pages/products/products.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ProductsComponent } from './products.component'; - -describe('ServicesComponent', () => { - let component: ProductsComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ProductsComponent] - }); - fixture = TestBed.createComponent(ProductsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/products/pages/products/products.component.ts b/src/app/features/products/pages/products/products.component.ts deleted file mode 100644 index 9451703..0000000 --- a/src/app/features/products/pages/products/products.component.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -// import { mergeMap, tap } from 'rxjs'; -// import { HeaderService } from 'src/app/core/services/header.service'; -// import { Order } from 'src/app/data/models/order'; -// import { Sku } from 'src/app/data/models/sku'; -// import { CartService } from 'src/app/data/services/cart.service'; -// import { LineItemService } from 'src/app/data/services/line-item.service'; -// import { OrderService } from 'src/app/data/services/order.service'; -// import { SkuService } from 'src/app/data/services/sku.service'; - -@Component({ - selector: 'app-services', - templateUrl: './products.component.html', - styleUrls: ['./products.component.css'] -}) -export class ProductsComponent { - - // constructor(public router: Router, public activateRoute: ActivatedRoute) {} - // id: string = ''; - // product!: Sku; - // quantity: number = 0; - - // constructor( - // private route: ActivatedRoute, - // private skus: SkuService, - // private location: Location, - // private router: Router, - // private header: HeaderService, - // private orders: OrderService, - // private lineItems: LineItemService, - // private cart: CartService, - // private snackBar: MatSnackBar - // ) { } - - // ngOnInit() { - // this.route.paramMap - // .pipe( - // mergeMap(params => { - // const id = params.get('id') - // this.id = id ? id : ''; - - // return this.skus.getSku(this.id); - // }), - // tap((sku) => { - // this.product = sku; - // }) - // ).subscribe({ - // error: (err) => this.router.navigateByUrl('/error') - // }); - - // this.header.setHeaderButtonsVisibility(true); - // } - - // addItemToCart() { - // if (this.quantity > 0) { - // if (this.cart.orderId == '') { - // this.orders.createOrder() - // .pipe( - // mergeMap((order: Order) => { - // this.cart.orderId = order.id || ''; - - // return this.lineItems.createLineItem({ - // orderId: order.id, - // name: this.product.name, - // imageUrl: this.product.imageUrl, - // quantity: this.quantity, - // skuCode: this.product.code - // }); - // }) - // ) - // .subscribe( - // () => { - // this.cart.incrementItemCount(this.quantity); - // this.showSuccessSnackBar(); - // }, - // err => this.showErrorSnackBar() - // ); - // } else { - // this.lineItems.createLineItem({ - // orderId: this.cart.orderId, - // name: this.product.name, - // imageUrl: this.product.imageUrl, - // quantity: this.quantity, - // skuCode: this.product.code - // }).subscribe( - // () => { - // this.cart.incrementItemCount(this.quantity); - // this.showSuccessSnackBar(); - // }, - // err => this.showErrorSnackBar() - // ); - // } - // } else { - // this.snackBar.open('Select a quantity greater than 0.', 'Close', { duration: 8000 }); - // } - // } - - // setQuantity(no: number) { - // this.quantity = no; - // } - - // goBack() { - // this.location.back(); - // } - - // private showSuccessSnackBar() { - // this.snackBar.open('Item successfully added to cart.', 'Close', { duration: 8000 }); - // } - - // private showErrorSnackBar() { - // this.snackBar.open('Failed to add your item to the cart.', 'Close', { duration: 8000 }); - // } - -} 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 5ea9cfd..0000000 --- a/src/app/features/products/pages/single-product/single-product.component.html +++ /dev/null @@ -1,17 +0,0 @@ -
- {{ product.name }} -

{{ product.name }}

-

{{ product.description }}

- Price: {{ formattedPrice }} - - -
- - - \ 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 fde92e2..0000000 --- a/src/app/features/products/pages/single-product/single-product.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -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', - templateUrl: './single-product.component.html', - styleUrls: ['./single-product.component.css'] -}) -export class SingleProductComponent implements OnInit{ - - @Input() product: Product = { - id: '', - name: '', - description: '', - imageUrl: '', - price: 0 - }; - - formattedPrice: any; - - constructor(private currencyPipe: CurrencyPipe) { - } - - ngOnInit(): void { - this.formattedPrice = this.currencyPipe.transform(this.product.price); - } - - 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.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 4940dbe..c7e9abc 100644 --- a/src/app/features/products/products-routing.module.ts +++ b/src/app/features/products/products-routing.module.ts @@ -1,74 +1,46 @@ 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 { BeveragesComponent } from './pages/beverages/beverages/beverages.component'; -import { ProjectsComponent } from './pages/links/quick-links/projects.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'; +import { DesignerComponent } from './pages/clothes/designer/designer.component'; +import { DesignerDetailComponent } from './pages/clothes/designer-detail/designer-detail.component'; const routes: Routes = [ - - { - path: 'products', component: ProductsComponent, - }, - + { - path: 'tours', component: ToursComponent + path: 'kids', component: KidsComponent }, { - path: 'tours/:id', component: SingleProductComponent + path: 'kids/:id', component: KidDetailComponent }, { - path: 'clothing', - component: ClothingComponent, - }, - { - path: 'home-made', - component: HomeMadeComponent, - }, - { - path: 'home-made/:id', component: SingleProductComponent - }, - { - path: 'imports', - component: ImportsComponent, - }, - { - path: 'imports/:id', component: SingleProductComponent - }, - - { - path: 'beverages', - component: BeveragesComponent, - }, - { - path: 'tea', - component: BeveragesComponent, + path: 'men', component: MenComponent }, + { - path: 'tea$/:id', component: SingleProductComponent + path: 'men/:id', component: ManDetailComponent }, + { - path: 'coffee', - component: BeveragesComponent, + path: 'women', component: WomenComponent }, { - path: 'coffee$/:id', component: SingleProductComponent + path: 'women/:id', component: WomanDetailComponent }, { - path: 'links', - component: ProjectsComponent, + path: 'designers', component: DesignerComponent }, { - path: 'link$/:id', component: SingleProductComponent - }, + path: 'designers/:id', component: DesignerDetailComponent + } ]; diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts index 9b7e7e0..1aa1f49 100644 --- a/src/app/features/products/products.module.ts +++ b/src/app/features/products/products.module.ts @@ -5,51 +5,45 @@ 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'; -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 { 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'; - +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'; +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'; +import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ ProductComponent, - ProductsComponent, - ProductListComponent, - ToursComponent, - SingleProductComponent, - ClothingComponent, - ImportsComponent, - HomeMadeComponent, - BeveragesComponent, - TeaComponent, - CoffeeComponent, - ProjectsComponent + MenComponent, + WomenComponent, + KidsComponent, + KidDetailComponent, + WomanDetailComponent, + ManDetailComponent, + ProductDetailComponent, + DesignerComponent, + DesignerDetailComponent, ], imports: [ CommonModule, ProductsRoutingModule, - MatGridListModule + MatGridListModule, + SharedModule, + FormsModule ], exports: [ ProductComponent, - ToursComponent, - SingleProductComponent, - ClothingComponent, - ImportsComponent, - HomeMadeComponent, - BeveragesComponent, - TeaComponent, - CoffeeComponent, - ProjectsComponent + KidsComponent, + MenComponent, + WomenComponent, + DesignerComponent ] }) export class ProductsModule { } diff --git a/src/app/features/services/scroll.service.spec.ts b/src/app/features/services/api.service.spec.ts similarity index 55% rename from src/app/features/services/scroll.service.spec.ts rename to src/app/features/services/api.service.spec.ts index 725042d..c0310ae 100644 --- a/src/app/features/services/scroll.service.spec.ts +++ b/src/app/features/services/api.service.spec.ts @@ -1,13 +1,13 @@ import { TestBed } from '@angular/core/testing'; -import { ScrollService } from './scroll.service'; +import { ApiService } from './api.service'; -describe('ScrollService', () => { - let service: ScrollService; +describe('ApiService', () => { + let service: ApiService; beforeEach(() => { TestBed.configureTestingModule({}); - service = TestBed.inject(ScrollService); + service = TestBed.inject(ApiService); }); it('should be created', () => { diff --git a/src/app/features/services/api.service.ts b/src/app/features/services/api.service.ts new file mode 100644 index 0000000..964c6ad --- /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:4567'; + + constructor() { } +} 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); + } +} diff --git a/src/app/features/product.service.spec.ts b/src/app/features/services/kids.service.spec.ts similarity index 54% rename from src/app/features/product.service.spec.ts rename to src/app/features/services/kids.service.spec.ts index d5c493e..fb0d941 100644 --- a/src/app/features/product.service.spec.ts +++ b/src/app/features/services/kids.service.spec.ts @@ -1,13 +1,13 @@ import { TestBed } from '@angular/core/testing'; -import { ProductService } from './product.service'; +import { KidsService } from './kids.service'; -describe('ProductService', () => { - let service: ProductService; +describe('KidsService', () => { + let service: KidsService; beforeEach(() => { TestBed.configureTestingModule({}); - service = TestBed.inject(ProductService); + service = TestBed.inject(KidsService); }); it('should be created', () => { 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/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/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); + } +} diff --git a/src/app/home-section/components/banner/banner.component.css b/src/app/home-section/components/banner/banner.component.css new file mode 100644 index 0000000..8b9ed7c --- /dev/null +++ b/src/app/home-section/components/banner/banner.component.css @@ -0,0 +1,113 @@ +/* +--------------------------------------------- +banner +--------------------------------------------- +*/ + +.main-banner { + border-bottom: 3px dotted #eee; + padding-bottom: 30px; +} + +.main-banner .left-content .thumb img { + width: 100%; + overflow: hidden; +} + +.main-banner .left-content .inner-content { + position: absolute; + left: 100px; + top: 50%; + transform: translateY(-50%); +} + +.main-banner .left-content .inner-content h4 { + color: #fff; + margin-top: -10px; + font-size: 52px; + font-weight: 700; + margin-bottom: 20px; +} + +.main-banner .left-content .inner-content span { + font-size: 16px; + color: #fff; + font-weight: 400; + font-style: italic; + display: block; + margin-bottom: 30px; +} + +.main-banner .right-content .right-first-image { + margin-bottom: 28.5px; +} + +.main-banner .right-content .right-first-image .thumb { + position: relative; + text-align: center; +} + +.main-banner .right-content .right-first-image .thumb img { + width: 100%; + overflow: hidden; +} + +.main-banner .right-content .right-first-image .thumb .inner-content { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 100%; + text-align: center; +} + +.main-banner .right-content .right-first-image .thumb .inner-content h4 { + color: #fff; + font-size: 24px; + font-weight: 700; + margin-bottom: 15px; +} + +.main-banner .right-content .right-first-image .thumb .inner-content span { + font-size: 16px; + color: #fff; + font-style: italic; +} + +.main-banner .right-content .right-first-image .thumb .hover-content { + position: absolute; + top: 15px; + right: 15px; + left: 15px; + bottom: 15px; + text-align: center; + background-color: rgba(42, 42, 42, 0.97); + opacity: 0; + visibility: hidden; + transition: all 0.5s; +} + +.main-banner .right-content .right-first-image .thumb:hover .hover-content { + opacity: 1; + visibility: visible; +} + +.main-banner .right-content .right-first-image .thumb .hover-content .inner { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; +} + +.main-banner .right-content .right-first-image .thumb .hover-content h4 { + color: #fff; + font-size: 24px; + font-weight: 700; + margin-bottom: 15px; +} + +.main-banner .right-content .right-first-image .thumb .hover-content p { + color: #fff; + padding: 0px 20px; + margin-bottom: 20px; +} diff --git a/src/app/home-section/components/banner/banner.component.html b/src/app/home-section/components/banner/banner.component.html new file mode 100644 index 0000000..b9e4073 --- /dev/null +++ b/src/app/home-section/components/banner/banner.component.html @@ -0,0 +1,103 @@ +
+
+
+
+
+
+
+

We Are Hexashop

+ Awesome lorem ipsum template html5 +
+ +
+
+
+
+
+
+
+
+
+
+

Women

+ Best Clothes For Women +
+
+
+

Women

+

Lorem ipsum dolor sit amet, conservisii ctetur adipiscing elit incid.

+
+ Discover More +
+
+
+ +
+
+
+
+
+
+
+

Men

+ Best Clothes For Men +
+
+
+

Men

+

Lorem ipsum dolor sit amet, conservisii ctetur adipiscing elit incid.

+
+ Discover More +
+
+
+ +
+
+
+
+
+
+
+

Kids

+ Best Clothes For Kids +
+
+
+

Kids

+

Lorem ipsum dolor sit amet, conservisii ctetur adipiscing elit incid.

+
+ Discover More +
+
+
+ +
+
+
+
+
+
+
+

Accessories

+ Best Trend Accessories +
+
+
+

Accessories

+

Lorem ipsum dolor sit amet, conservisii ctetur adipiscing elit incid.

+
+ Discover More +
+
+
+ +
+
+
+
+
+
+
+
+
diff --git a/src/app/home-section/components/banner/banner.component.spec.ts b/src/app/home-section/components/banner/banner.component.spec.ts new file mode 100644 index 0000000..b7f5c76 --- /dev/null +++ b/src/app/home-section/components/banner/banner.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BannerComponent } from './banner.component'; + +describe('BannerComponent', () => { + let component: BannerComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [BannerComponent] + }); + fixture = TestBed.createComponent(BannerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home-section/components/banner/banner.component.ts b/src/app/home-section/components/banner/banner.component.ts new file mode 100644 index 0000000..7b2339b --- /dev/null +++ b/src/app/home-section/components/banner/banner.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-banner', + templateUrl: './banner.component.html', + styleUrls: ['./banner.component.css'] +}) +export class BannerComponent { + +} diff --git a/src/app/home-section/home-routing.module.ts b/src/app/home-section/home-routing.module.ts new file mode 100644 index 0000000..6d6dbff --- /dev/null +++ b/src/app/home-section/home-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { HomeComponent } from './home/home.component'; +import { MainPageComponent } from './main-page/main-page.component'; + +const routes: Routes = [ +// { path: '', component: MainPageComponent, pathMatch: 'full'}, +// { +// path: 'home', component: HomeComponent +// } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class HomeRoutingModule { } diff --git a/src/app/home-section/home.module.ts b/src/app/home-section/home.module.ts new file mode 100644 index 0000000..50cbeb8 --- /dev/null +++ b/src/app/home-section/home.module.ts @@ -0,0 +1,27 @@ +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/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'; +import { BannerComponent } from './components/banner/banner.component'; + + +@NgModule({ + declarations: [MainPageComponent, HomeComponent, BannerComponent], + imports: [ + CommonModule, + HomeRoutingModule, + CoreModule, + ProductsModule, + SharedModule + ], + exports: [ + HomeComponent, + MainPageComponent + ] +}) +export class HomeModule { } diff --git a/src/app/home-section/home/home-routing.module.ts b/src/app/home-section/home/home-routing.module.ts deleted file mode 100644 index 1ee03a4..0000000 --- a/src/app/home-section/home/home-routing.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { HomeComponent } from './home.component'; - -const routes: Routes = [ - { path: 'home', component: HomeComponent, pathMatch: 'full'}, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class HomeRoutingModule { } diff --git a/src/app/home-section/home/home.component.css b/src/app/home-section/home/home.component.css index 3079841..cb3b052 100644 --- a/src/app/home-section/home/home.component.css +++ b/src/app/home-section/home/home.component.css @@ -3,103 +3,112 @@ height: 80%; } +.banner { + height: 86.7%; +} + .image-container { - position: relative; - overflow: hidden; - height: 100%; - } + position: relative; +} - .sub-image-container { - position: relative; - overflow: hidden; - height: 34vh; - } - - .bio { - position: absolute; - top: 50%; - left: 40%; - transform: translate(-50%, -50%); - text-align: center; - color: white; - } +.sub-image-container { + position: relative; + overflow: hidden; + height: 34vh; +} - .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; +} - .link-button { - text-decoration: none; - color: white; - } +.sub-image-container:hover .overlay { + opacity: 1; +} + +.link-button { + text-decoration: none; + color: white; +} - .products-wrapper { - text-align: left; +@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%; } - @media (max-width: 768px) { - .landing { - height: 205%; - } - .sub-image-container { - margin-left: -3%; - margin-right: -3%; - } + .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 3c69cf4..5c8f35f 100644 --- a/src/app/home-section/home/home.component.html +++ b/src/app/home-section/home/home.component.html @@ -1,97 +1,125 @@
-
-
-
- photo of beach front -
-

We Are CloTours

-

Awesome clean tours website

- Our Products -
+
+
+ -
-
-
-
-
- photo of beach front -
-

Tours

-

Best tour places

-
-
-
-

Tours

-

Best tour places

- Discover More -
-
+
+
+
+
+
+
+ photo of beach front +
+

Kids

+

Best Clothes For Kids

+
+
+
+

Kids

+

Best Clothes For Kids

+ Discover More
-
-
- photo of beach front -
-

Clothes

-

Awesome clean tours website

-
-
-
-

Clothes

-

Awesome clean tours website

- Discover More -
-
+
+
+
+
+ photo of beach front +
+

Men

+

Best Clothes For Men

+
+
+
+

Men

+

Best Clothes For Men

+ Discover More +
+
+
+
+
+ photo of beach front +
+

Women

+

Best Clothes For Women

-
-
- photo of beach front -
-

Beverages

-

Awesome clean tours website

-
-
-
-

Beverages

-

Awesome clean tours website

- Discover More -
-
+
+
+

Women

+

Best Clothes For Women

+ Discover More
-
-
- photo of beach front -
-

Quick Links

-

Awesome clean tours website

-
-
-
-

Quick Links

-

Awesome clean tours website

- Discover More -
-
+
+
+
+
+ photo of beach front +
+

Local Designs

+

Local Designs

+
+
+
+

Local Designs

+

Local Designs

+ Discover More
+
- - -
-
-
- - - -
- - - diff --git a/src/app/home-section/home/home.module.ts b/src/app/home-section/home/home.module.ts deleted file mode 100644 index 779fd88..0000000 --- a/src/app/home-section/home/home.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { HomeRoutingModule } from './home-routing.module'; -import { ProductsModule } from 'src/app/features/products/products.module'; - - -@NgModule({ - declarations: [], - imports: [ - CommonModule, - HomeRoutingModule, - // ProductsModule - ] -}) -export class HomeModule { } 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..03fad8d --- /dev/null +++ b/src/app/home-section/main-page/main-page.component.css @@ -0,0 +1,33 @@ +.border { + margin-bottom: 10%; + border-bottom: dashed; +} + +.borders { + border-top: dashed; + margin-bottom: 2.5%; +} + +@media (max-width: 1024px) { + + .margin-small-devices { + margin-bottom: 6%; + } + + .border { + margin-bottom: 18%; + } + + } + + @media (max-width: 768px) { + + .margin-small-devices { + margin-bottom: 6%; + } + + .border { + margin-bottom: 30%; + } + + } \ 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..3671911 --- /dev/null +++ b/src/app/home-section/main-page/main-page.component.html @@ -0,0 +1,26 @@ +
+
+ +
+
+ + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
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..d72bdd7 --- /dev/null +++ b/src/app/home-section/main-page/main-page.component.ts @@ -0,0 +1,19 @@ +import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; + +@Component({ + selector: 'app-main-page', + templateUrl: './main-page.component.html', + styleUrls: ['./main-page.component.css'], +}) +export class MainPageComponent implements AfterViewInit { + @ViewChild('mainPageContainer') mainPageContainer!: ElementRef; + + ngAfterViewInit(): void { + // Scroll to the top of the component when it is loaded + if (this.mainPageContainer) { + this.mainPageContainer.nativeElement.scrollIntoView({ + behavior: 'smooth', + }); + } + } +} diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html index a282b78..8af32cc 100644 --- a/src/app/shared/components/footer/footer.component.html +++ b/src/app/shared/components/footer/footer.component.html @@ -4,17 +4,17 @@
- +
@@ -37,14 +37,14 @@

Contact

- Facebook + Facebook - Instagram + Instagram Twitter diff --git a/src/app/shared/components/nav-bar/nav-bar-routing.module.ts b/src/app/shared/components/nav-bar/nav-bar-routing.module.ts deleted file mode 100644 index 11749e4..0000000 --- a/src/app/shared/components/nav-bar/nav-bar-routing.module.ts +++ /dev/null @@ -1,10 +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 NavBarRoutingModule { } 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..33fef88 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 @@ diff --git a/src/app/shared/components/nav-bar/nav-bar.component.ts b/src/app/shared/components/nav-bar/nav-bar.component.ts index 79d8656..7705b14 100644 --- a/src/app/shared/components/nav-bar/nav-bar.component.ts +++ b/src/app/shared/components/nav-bar/nav-bar.component.ts @@ -49,4 +49,14 @@ export class NavBarComponent { this.isSearchFormHidden = !this.isSearchFormHidden; } + closeNavbar() { + // Close the navbar when a link is clicked + const navbarToggler = document.querySelector('.navbar-toggler'); + const navbarCollapse = document.querySelector('.navbar-collapse'); + + if (navbarToggler && navbarCollapse) { + navbarToggler.dispatchEvent(new Event('click')); + } + } + } diff --git a/src/app/shared/components/nav-bar/nav-bar.module.ts b/src/app/shared/components/nav-bar/nav-bar.module.ts deleted file mode 100644 index 0d14e14..0000000 --- a/src/app/shared/components/nav-bar/nav-bar.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { NavBarRoutingModule } from './nav-bar-routing.module'; -import { NavBarComponent } from './nav-bar.component'; - - -@NgModule({ - declarations: [ - // NavBarComponent - ], - imports: [ - CommonModule, - NavBarRoutingModule - ], - exports: [ - // NavBarComponent - ] -}) -export class NavBarModule { } diff --git a/src/app/features/products/pages/product-list/product-list.component.css b/src/app/shared/components/shipping/shipping.component.css similarity index 100% rename from src/app/features/products/pages/product-list/product-list.component.css rename to src/app/shared/components/shipping/shipping.component.css diff --git a/src/app/shared/components/shipping/shipping.component.html b/src/app/shared/components/shipping/shipping.component.html new file mode 100644 index 0000000..28d6910 --- /dev/null +++ b/src/app/shared/components/shipping/shipping.component.html @@ -0,0 +1,11 @@ +
+

Shipping Prices

+
+
+
+ {{shipping.type}} + {{shipping.price | currency}} +
+
+
+
diff --git a/src/app/shared/components/shipping/shipping.component.spec.ts b/src/app/shared/components/shipping/shipping.component.spec.ts new file mode 100644 index 0000000..97af682 --- /dev/null +++ b/src/app/shared/components/shipping/shipping.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ShippingComponent } from './shipping.component'; + +describe('ShippingComponent', () => { + let component: ShippingComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ShippingComponent] + }); + fixture = TestBed.createComponent(ShippingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/shipping/shipping.component.ts b/src/app/shared/components/shipping/shipping.component.ts new file mode 100644 index 0000000..30d3daf --- /dev/null +++ b/src/app/shared/components/shipping/shipping.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; +import { CartService } from '../../services/cart.service'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'app-shipping', + templateUrl: './shipping.component.html', + styleUrls: ['./shipping.component.css'] +}) +export class ShippingComponent implements OnInit { + + shippingCosts!: Observable<{type: string, price: number}[]>; + + constructor(private cartService: CartService) {} + + ngOnInit(): void { + this.shippingCosts = this.cartService.getShippingPrices(); + } + +} diff --git a/src/app/shared/images/cart-image/cart-image.component.css b/src/app/shared/images/cart-image/cart-image.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/images/cart-image/cart-image.component.html b/src/app/shared/images/cart-image/cart-image.component.html new file mode 100644 index 0000000..5c8efc0 --- /dev/null +++ b/src/app/shared/images/cart-image/cart-image.component.html @@ -0,0 +1 @@ +

cart-image works!

diff --git a/src/app/shared/images/cart-image/cart-image.component.spec.ts b/src/app/shared/images/cart-image/cart-image.component.spec.ts new file mode 100644 index 0000000..c2bf38b --- /dev/null +++ b/src/app/shared/images/cart-image/cart-image.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CartImageComponent } from './cart-image.component'; + +describe('CartImageComponent', () => { + let component: CartImageComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [CartImageComponent] + }); + fixture = TestBed.createComponent(CartImageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/images/cart-image/cart-image.component.ts b/src/app/shared/images/cart-image/cart-image.component.ts new file mode 100644 index 0000000..cdd265f --- /dev/null +++ b/src/app/shared/images/cart-image/cart-image.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-cart-image', + templateUrl: './cart-image.component.html', + styleUrls: ['./cart-image.component.css'] +}) +export class CartImageComponent { + +} diff --git a/src/app/shared/images/left-banner-image/left-banner-image.component.css b/src/app/shared/images/left-banner-image/left-banner-image.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/images/left-banner-image/left-banner-image.component.html b/src/app/shared/images/left-banner-image/left-banner-image.component.html new file mode 100644 index 0000000..996446b --- /dev/null +++ b/src/app/shared/images/left-banner-image/left-banner-image.component.html @@ -0,0 +1 @@ +

left-banner-image works!

diff --git a/src/app/shared/images/left-banner-image/left-banner-image.component.spec.ts b/src/app/shared/images/left-banner-image/left-banner-image.component.spec.ts new file mode 100644 index 0000000..8ba656b --- /dev/null +++ b/src/app/shared/images/left-banner-image/left-banner-image.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LeftBannerImageComponent } from './left-banner-image.component'; + +describe('LeftBannerImageComponent', () => { + let component: LeftBannerImageComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [LeftBannerImageComponent] + }); + fixture = TestBed.createComponent(LeftBannerImageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/images/left-banner-image/left-banner-image.component.ts b/src/app/shared/images/left-banner-image/left-banner-image.component.ts new file mode 100644 index 0000000..ae3149d --- /dev/null +++ b/src/app/shared/images/left-banner-image/left-banner-image.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-left-banner-image', + templateUrl: './left-banner-image.component.html', + styleUrls: ['./left-banner-image.component.css'] +}) +export class LeftBannerImageComponent { + +} diff --git a/src/app/shared/images/righ-banner-image/righ-banner-image.component.css b/src/app/shared/images/righ-banner-image/righ-banner-image.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/images/righ-banner-image/righ-banner-image.component.html b/src/app/shared/images/righ-banner-image/righ-banner-image.component.html new file mode 100644 index 0000000..466ff70 --- /dev/null +++ b/src/app/shared/images/righ-banner-image/righ-banner-image.component.html @@ -0,0 +1 @@ +

righ-banner-image works!

diff --git a/src/app/shared/images/righ-banner-image/righ-banner-image.component.spec.ts b/src/app/shared/images/righ-banner-image/righ-banner-image.component.spec.ts new file mode 100644 index 0000000..4f1e2af --- /dev/null +++ b/src/app/shared/images/righ-banner-image/righ-banner-image.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RighBannerImageComponent } from './righ-banner-image.component'; + +describe('RighBannerImageComponent', () => { + let component: RighBannerImageComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [RighBannerImageComponent] + }); + fixture = TestBed.createComponent(RighBannerImageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/images/righ-banner-image/righ-banner-image.component.ts b/src/app/shared/images/righ-banner-image/righ-banner-image.component.ts new file mode 100644 index 0000000..7111b32 --- /dev/null +++ b/src/app/shared/images/righ-banner-image/righ-banner-image.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-righ-banner-image', + templateUrl: './righ-banner-image.component.html', + styleUrls: ['./righ-banner-image.component.css'] +}) +export class RighBannerImageComponent { + +} diff --git a/src/app/shared/models/cart-item-group.ts b/src/app/shared/models/cart-item-group.ts new file mode 100644 index 0000000..1b7fb59 --- /dev/null +++ b/src/app/shared/models/cart-item-group.ts @@ -0,0 +1,6 @@ +import { Product } from "src/app/features/models/products.product"; + +export interface CartItemGroup { + product: Product; + quantity: number; +} diff --git a/src/app/shared/models/cart-item.ts b/src/app/shared/models/cart-item.ts new file mode 100644 index 0000000..dfe43e6 --- /dev/null +++ b/src/app/shared/models/cart-item.ts @@ -0,0 +1,6 @@ +import { Product } from "src/app/features/models/products.product"; + +export interface CartItem { + product: Product; + quantity: number; +} 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..0e31f3d --- /dev/null +++ b/src/app/shared/services/cart.service.ts @@ -0,0 +1,42 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Product } from 'src/app/features/models/products.product'; + +@Injectable({ + providedIn: 'root' +}) +export class CartService { + + items: Product [] = []; + + constructor(private http: HttpClient) { } + + addToCart(product: Product) { + this.items.push(product); + } + + getItems() { + return this.items; + } + + clearCart() { + this.items = []; + return this.items; + } + + getShippingPrices() { + return this.http.get<{type: string, price: number}[]> + ('/assets/shipping.json') + } + + getShippingCost(items: any[]): Observable { + // implement your logic to calculate the shipping cost based on the items + // for example, you can use a fixed rate or a weight-based rate + // you can also use different rates for different regions or countries + // you can also use an external API to get the shipping cost from a third-party service + // here we use a simple example of a fixed rate of 10 for any items + return this.http.get('/assets/shipping-cost.json'); + } + +} diff --git a/src/app/shared/shared-routing.module.ts b/src/app/shared/shared-routing.module.ts deleted file mode 100644 index 9894f89..0000000 --- a/src/app/shared/shared-routing.module.ts +++ /dev/null @@ -1,10 +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 SharedRoutingModule { } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index df75e4a..d23c314 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { SharedRoutingModule } from './shared-routing.module'; import { NavBarComponent } from 'src/app/shared/components/nav-bar/nav-bar.component'; import { FooterComponent } from 'src/app/shared/components/footer/footer.component'; import { MatIconModule } from '@angular/material/icon'; @@ -11,18 +10,28 @@ import { ItemQuantityComponent } from './components/item-quantity/item-quantity. import { TitleComponent } from './components/title/title.component'; import { SimplePageComponent } from './components/simple-page/simple-page.component'; import { WordWrapPipe } from './pipes/word-wrap.pipe'; +import { CartComponent } from '../features/cart/cart/cart.component'; +import { ShippingComponent } from './components/shipping/shipping.component'; +import { ReactiveFormsModule } from '@angular/forms'; +import { RighBannerImageComponent } from './images/righ-banner-image/righ-banner-image.component'; +import { LeftBannerImageComponent } from './images/left-banner-image/left-banner-image.component'; +import { CartImageComponent } from './images/cart-image/cart-image.component'; @NgModule({ - declarations: [NavBarComponent, FooterComponent, ItemQuantityComponent, TitleComponent, SimplePageComponent, WordWrapPipe], + declarations: [NavBarComponent, FooterComponent, ItemQuantityComponent, TitleComponent, SimplePageComponent, WordWrapPipe, CartComponent, ShippingComponent, RighBannerImageComponent, LeftBannerImageComponent, CartImageComponent], imports: [ CommonModule, - SharedRoutingModule, MatIconModule, MatIconModule, // MatTooltipModule, MatMenuModule, - RouterModule + RouterModule, + + RouterModule.forChild([ + { path: 'cart', component: CartComponent }, + ]), + ReactiveFormsModule, ], exports: [ NavBarComponent, diff --git a/src/assets/accessories.png b/src/assets/accessories.png deleted file mode 100644 index 18c4bf5..0000000 Binary files a/src/assets/accessories.png and /dev/null differ diff --git a/src/assets/baner-right-image-01.jpg b/src/assets/baner-right-image-01.jpg new file mode 100644 index 0000000..2d51727 Binary files /dev/null and b/src/assets/baner-right-image-01.jpg differ diff --git a/src/assets/baner-right-image-01.png b/src/assets/baner-right-image-01.png new file mode 100644 index 0000000..2d51727 Binary files /dev/null and b/src/assets/baner-right-image-01.png differ diff --git a/src/assets/baner-right-image-02.jpg b/src/assets/baner-right-image-02.jpg new file mode 100644 index 0000000..ecf1b85 Binary files /dev/null and b/src/assets/baner-right-image-02.jpg differ diff --git a/src/assets/baner-right-image-02.png b/src/assets/baner-right-image-02.png new file mode 100644 index 0000000..ecf1b85 Binary files /dev/null and b/src/assets/baner-right-image-02.png differ diff --git a/src/assets/baner-right-image-03.jpg b/src/assets/baner-right-image-03.jpg new file mode 100644 index 0000000..6ccccdc Binary files /dev/null and b/src/assets/baner-right-image-03.jpg differ diff --git a/src/assets/baner-right-image-03.png b/src/assets/baner-right-image-03.png new file mode 100644 index 0000000..6ccccdc Binary files /dev/null and b/src/assets/baner-right-image-03.png differ diff --git a/src/assets/baner-right-image-04.jpg b/src/assets/baner-right-image-04.jpg new file mode 100644 index 0000000..eb578ff Binary files /dev/null and b/src/assets/baner-right-image-04.jpg differ diff --git a/src/assets/baner-right-image-04.png b/src/assets/baner-right-image-04.png new file mode 100644 index 0000000..eb578ff Binary files /dev/null and b/src/assets/baner-right-image-04.png differ diff --git a/src/assets/beach.jpg b/src/assets/beach.jpg deleted file mode 100644 index d99594a..0000000 Binary files a/src/assets/beach.jpg and /dev/null differ diff --git a/src/assets/beverage.png b/src/assets/beverage.png deleted file mode 100644 index 1a93c87..0000000 Binary files a/src/assets/beverage.png and /dev/null differ diff --git a/src/assets/blazer.png b/src/assets/blazer.png deleted file mode 100644 index 0370814..0000000 Binary files a/src/assets/blazer.png and /dev/null differ diff --git a/src/assets/boots.png b/src/assets/boots.png deleted file mode 100644 index bc9db3a..0000000 Binary files a/src/assets/boots.png and /dev/null differ diff --git a/src/assets/city.png b/src/assets/city.png deleted file mode 100644 index c9757ff..0000000 Binary files a/src/assets/city.png and /dev/null differ diff --git a/src/assets/dera.png b/src/assets/dera.png deleted file mode 100644 index ea91369..0000000 Binary files a/src/assets/dera.png and /dev/null differ diff --git a/src/assets/deraa.png b/src/assets/deraa.png deleted file mode 100644 index bfd35d5..0000000 Binary files a/src/assets/deraa.png and /dev/null differ diff --git a/src/assets/fabrics.png b/src/assets/fabrics.png deleted file mode 100644 index 6853f12..0000000 Binary files a/src/assets/fabrics.png and /dev/null differ diff --git a/src/assets/hand-made.png b/src/assets/hand-made.png deleted file mode 100644 index d98c24c..0000000 Binary files a/src/assets/hand-made.png and /dev/null differ diff --git a/src/assets/hexalogo.png b/src/assets/hexalogo.png new file mode 100644 index 0000000..fb6dac9 Binary files /dev/null and b/src/assets/hexalogo.png differ diff --git a/src/assets/island-tour.png b/src/assets/island-tour.png deleted file mode 100644 index d99594a..0000000 Binary files a/src/assets/island-tour.png and /dev/null differ diff --git a/src/assets/island.png b/src/assets/island.png deleted file mode 100644 index ec254be..0000000 Binary files a/src/assets/island.png and /dev/null differ diff --git a/src/assets/jeans.png b/src/assets/jeans.png deleted file mode 100644 index 83215a0..0000000 Binary files a/src/assets/jeans.png and /dev/null differ diff --git a/src/assets/kahawa.png b/src/assets/kahawa.png deleted file mode 100644 index f905cc6..0000000 Binary files a/src/assets/kahawa.png and /dev/null differ diff --git a/src/assets/left-banner-image.jpg b/src/assets/left-banner-image.jpg new file mode 100644 index 0000000..13eb5e2 Binary files /dev/null and b/src/assets/left-banner-image.jpg differ diff --git a/src/assets/left-banner-image.png b/src/assets/left-banner-image.png new file mode 100644 index 0000000..13eb5e2 Binary files /dev/null and b/src/assets/left-banner-image.png differ diff --git a/src/assets/milk-shake.png b/src/assets/milk-shake.png deleted file mode 100644 index 34b356d..0000000 Binary files a/src/assets/milk-shake.png and /dev/null differ diff --git a/src/assets/mnazi.png b/src/assets/mnazi.png deleted file mode 100644 index ba2a013..0000000 Binary files a/src/assets/mnazi.png and /dev/null differ diff --git a/src/assets/palm.jpg b/src/assets/palm.jpg deleted file mode 100644 index 01844fb..0000000 Binary files a/src/assets/palm.jpg and /dev/null differ diff --git a/src/assets/photo-1577805947697-89e18249d767.png b/src/assets/photo-1577805947697-89e18249d767.png deleted file mode 100644 index a0f2718..0000000 Binary files a/src/assets/photo-1577805947697-89e18249d767.png and /dev/null differ diff --git a/src/assets/photo-1594053186687-7788bbcd6ea6.png b/src/assets/photo-1594053186687-7788bbcd6ea6.png deleted file mode 100644 index 2c4c23c..0000000 Binary files a/src/assets/photo-1594053186687-7788bbcd6ea6.png and /dev/null differ diff --git a/src/assets/premium_photo-1673125287084-e90996bad505.png b/src/assets/premium_photo-1673125287084-e90996bad505.png deleted file mode 100644 index b961a93..0000000 Binary files a/src/assets/premium_photo-1673125287084-e90996bad505.png and /dev/null differ diff --git a/src/assets/shipping.json b/src/assets/shipping.json new file mode 100644 index 0000000..255d642 --- /dev/null +++ b/src/assets/shipping.json @@ -0,0 +1,26 @@ +[ + { + "type": "Overnight", + "price": 25.99 + }, + { + "type": "2-Day", + "price": 9.99 + }, + { + "type": "Postal", + "price": 2.99 + }, + { + "type": "Overnight", + "price": 25.99 + }, + { + "type": "2-Day", + "price": 9.99 + }, + { + "type": "Postal", + "price": 2.99 + } +] diff --git a/src/assets/shorts.png b/src/assets/shorts.png deleted file mode 100644 index 6f206e0..0000000 Binary files a/src/assets/shorts.png and /dev/null differ diff --git a/src/assets/smoothie.png b/src/assets/smoothie.png deleted file mode 100644 index 9b96d74..0000000 Binary files a/src/assets/smoothie.png and /dev/null differ diff --git a/src/assets/spices.png b/src/assets/spices.png deleted file mode 100644 index 943cc3b..0000000 Binary files a/src/assets/spices.png and /dev/null differ diff --git a/src/assets/t-shirts.png b/src/assets/t-shirts.png deleted file mode 100644 index dd39301..0000000 Binary files a/src/assets/t-shirts.png and /dev/null differ diff --git a/src/assets/top.png b/src/assets/top.png deleted file mode 100644 index 96007aa..0000000 Binary files a/src/assets/top.png and /dev/null differ diff --git a/src/assets/travel.jpg b/src/assets/travel.jpg deleted file mode 100644 index 1a15952..0000000 Binary files a/src/assets/travel.jpg and /dev/null differ diff --git a/src/assets/tshirts.png b/src/assets/tshirts.png deleted file mode 100644 index 8b46eb0..0000000 Binary files a/src/assets/tshirts.png and /dev/null differ diff --git a/src/assets/ukaju.png b/src/assets/ukaju.png deleted file mode 100644 index 8688ce9..0000000 Binary files a/src/assets/ukaju.png and /dev/null differ diff --git a/src/assets/ukwaju.png b/src/assets/ukwaju.png deleted file mode 100644 index 6e23520..0000000 Binary files a/src/assets/ukwaju.png and /dev/null differ diff --git a/src/assets/water.png b/src/assets/water.png deleted file mode 100644 index f345704..0000000 Binary files a/src/assets/water.png and /dev/null differ 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 {