diff --git a/src/Services/Catalog/Catalog.API/Startup.cs b/src/Services/Catalog/Catalog.API/Startup.cs index 58b5ac7df..8815a6843 100644 --- a/src/Services/Catalog/Catalog.API/Startup.cs +++ b/src/Services/Catalog/Catalog.API/Startup.cs @@ -53,7 +53,14 @@ }); }); - services.AddCors(); + services.AddCors(options => + { + options.AddPolicy("CorsPolicy", + builder => builder.AllowAnyOrigin() + .AllowAnyMethod() + .AllowAnyHeader() + .AllowCredentials()); + }); services.AddMvc(mvcoptions => { @@ -78,7 +85,7 @@ .Wait(); // Use frameworks - app.UseCors(policyBuilder => policyBuilder.AllowAnyOrigin()); + app.UseCors("CorsPolicy"); app.UseMvc(); diff --git a/src/Services/Catalog/Catalog.API/docker-compose.yml b/src/Services/Catalog/Catalog.API/docker-compose.yml index 4079f6edf..2a8432ccc 100644 --- a/src/Services/Catalog/Catalog.API/docker-compose.yml +++ b/src/Services/Catalog/Catalog.API/docker-compose.yml @@ -16,7 +16,7 @@ services: - catalog.data catalog.data: - image: eshop/mssql-server-private-preview + image: microsoft/mssql-server-linux environment: - SA_PASSWORD=Pass@word - ACCEPT_EULA=Y diff --git a/src/Services/Catalog/Catalog.API/settings.json b/src/Services/Catalog/Catalog.API/settings.json index 2ca24aa6c..f7b554148 100644 --- a/src/Services/Catalog/Catalog.API/settings.json +++ b/src/Services/Catalog/Catalog.API/settings.json @@ -1,5 +1,5 @@ { - "ConnectionString": "Server=tcp:127.0.0.1,1455;Initial Catalog=CatalogDB;User Id=sa;Password=Pass@word", + "ConnectionString": "Server=tcp:127.0.0.1,1433;Initial Catalog=CatalogDB;User Id=sa;Password=Pass@word", "Logging": { "IncludeScopes": false, "LogLevel": { diff --git a/src/Web/WebMVC/docker-compose.yml b/src/Web/WebMVC/docker-compose.yml index 22bf093ea..96b3fa40c 100644 --- a/src/Web/WebMVC/docker-compose.yml +++ b/src/Web/WebMVC/docker-compose.yml @@ -27,7 +27,7 @@ services: - catalog.data catalog.data: - image: eshop/mssql-server-private-preview + image: microsoft/mssql-server-linux environment: - SA_PASSWORD=Pass@word - ACCEPT_EULA=Y @@ -55,7 +55,7 @@ services: - "5432:1433" identity.data: - image: eshop/mssql-server-private-preview + image: microsoft/mssql-server-linux environment: - SA_PASSWORD=Pass@word - ACCEPT_EULA=Y diff --git a/src/Web/WebMVC/wwwroot/css/site.css b/src/Web/WebMVC/wwwroot/css/site.css index 5482341ef..efda10e62 100644 --- a/src/Web/WebMVC/wwwroot/css/site.css +++ b/src/Web/WebMVC/wwwroot/css/site.css @@ -825,6 +825,7 @@ form .col-md-4 { text-transform: uppercase; } + .navbar-nav { margin-top: 10px; margin-bottom: 7.5px; diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.eot b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.eot new file mode 100644 index 000000000..1c57e5d95 Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.eot differ diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.svg b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.svg new file mode 100644 index 000000000..b0cb0aeb6 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.svg @@ -0,0 +1,1933 @@ + + + + +Created by FontForge 20120731 at Mon Sep 12 19:08:28 2016 + By ,,, +Copyright (c) 2011-2012, Julieta Ulanovsky (julieta.ulanovsky@gmail.com), with Reserved Font Names 'Montserrat' + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.ttf b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.ttf new file mode 100644 index 000000000..ae33a4538 Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.ttf differ diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.woff b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.woff new file mode 100644 index 000000000..8ce1effc9 Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.woff differ diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.woff2 b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.woff2 new file mode 100644 index 000000000..16cf34a7c Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Bold.woff2 differ diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.eot b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.eot new file mode 100644 index 000000000..64912c701 Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.eot differ diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.svg b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.svg new file mode 100644 index 000000000..8f2b72f12 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.svg @@ -0,0 +1,1743 @@ + + + + +Created by FontForge 20120731 at Mon Sep 12 19:08:52 2016 + By ,,, +Copyright (c) 2011-2012, Julieta Ulanovsky (julieta.ulanovsky@gmail.com), with Reserved Font Names 'Montserrat' + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.ttf b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.ttf new file mode 100644 index 000000000..5b4b5afe6 Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.ttf differ diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.woff b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.woff new file mode 100644 index 000000000..930c783d1 Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.woff differ diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.woff2 b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.woff2 new file mode 100644 index 000000000..136ab68e9 Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/fonts/Montserrat-Regular.woff2 differ diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/arrow-right.svg b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/arrow-right.svg new file mode 100644 index 000000000..1258243c3 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/cart.png b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/cart.png new file mode 100644 index 000000000..158bcf797 Binary files /dev/null and b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/cart.png differ diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html index 1d2f5908e..8bf2ffeb1 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html @@ -1,14 +1,41 @@ - - +
+
+
+
+ + + +
+
+ +
+
+
+
-
- - -
-
- - + + + + + + -
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.scss index 49193a85d..f3436abe6 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.scss @@ -1,2 +1,49 @@ @import './_variables.scss'; +@font-face { + font-family: Montserrat; + font-weight: 400; + src: url("../fonts/Montserrat-Regular.eot?") format("eot"),url("../fonts/Montserrat-Regular.woff") format("woff"),url("../fonts/Montserrat-Regular.ttf") format("truetype"),url("../fonts/Montserrat-Regular.svg#Montserrat") format("svg") +} + +@font-face { + font-family: Montserrat; + font-weight: 700; + src: url("../fonts/Montserrat-Bold.eot?") format("eot"),url("../fonts/Montserrat-Bold.woff") format("woff"),url("../fonts/Montserrat-Bold.ttf") format("truetype"),url("../fonts/Montserrat-Bold.svg#Montserrat") format("svg") +} + +body { + padding-top: 80px; + /*padding-bottom: 20px;*/ + font-family: Montserrat,sans-serif; + min-width:480px; +} + +.app { + &-footer { + padding-top: 40px; + padding-bottom: 40px; + margin-top: 40px; + border-top: 1px solid #eee; + background-color: black; + width: 100%; + + &-brand { + margin-top: 25px; + max-width: 231px; + height: 52px; + margin-left: 0px !important; + } + + &-text { + text-align: right; + width: 100%; + height: 100%; + color: #83d01b; + margin-top: 10px; + } + } +} + + + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.module.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.module.ts index 458999ebf..bdad19f82 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.module.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.module.ts @@ -9,6 +9,7 @@ import { AppService } from './app.service'; import { AppComponent } from './app.component'; import { SharedModule } from './shared/shared.module'; import { CatalogModule } from './catalog/catalog.module'; +import { BasketModule } from './basket/basket.module'; @NgModule({ declarations: [AppComponent], @@ -18,7 +19,8 @@ import { CatalogModule } from './catalog/catalog.module'; HttpModule, // Only module that app module loads SharedModule.forRoot(), - CatalogModule + CatalogModule, + BasketModule ], providers: [ AppService diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts index ea0087ca7..3ce3eda19 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts @@ -1,15 +1,17 @@ import { Routes, RouterModule } from '@angular/router'; +import { BasketComponent } from './basket/basket.component'; +import { CatalogComponent } from './catalog/catalog.component'; + export const routes: Routes = [ - { path: '', redirectTo: 'catalog', pathMatch: 'full' } - // Lazy async modules - // { - // path: 'login', loadChildren: () => new Promise(resolve => { - // (require as any).ensure([], (require: any) => { - // resolve(require('./+login/login.module').LoginModule); - // }); - // }) - // } + { path: '', redirectTo: 'catalog', pathMatch: 'full' }, + { path: 'basket', component: BasketComponent }, + { path: 'catalog', component: CatalogComponent } + //Lazy async modules (angular-loader-router) and enable a router in each module. + //{ + // path: 'basket', loadChildren: '/basket/basket.module' }); + // }) + //} ]; export const routing = RouterModule.forRoot(routes); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html new file mode 100644 index 000000000..0fad8fcb0 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html @@ -0,0 +1,8 @@ +
+
+ +
+
+ {{badge}} +
+
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss new file mode 100644 index 000000000..a820a44a4 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss @@ -0,0 +1,24 @@ +@import '../../_variables.scss'; + +.esh-basketstatus { + + &-image { + height: 36px; + margin-top: 5px; + } + + &-badge { + position: absolute; + margin-top: 2px; + margin-left: 14px; + background-color: #83d01b; + padding: 1px; + color: white; + border-radius: 50%; + width: 18px; + height: 18px; + font-size: 12px; + cursor: pointer; + top: 0; + } +} diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts new file mode 100644 index 000000000..3d40f7c84 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; + +import { Subscription } from 'rxjs/Subscription'; + +import { BasketService } from '../basket.service'; +import { BasketWrapperService } from '../../shared/services/basket.wrapper.service'; + +@Component({ + selector: 'esh-basket-status', + styleUrls: ['./basket-status.component.scss'], + templateUrl: './basket-status.component.html' +}) +export class BasketStatusComponent implements OnInit { + subscription: Subscription; + badge: number = 0; + + constructor(private service: BasketService, private basketEvents: BasketWrapperService) { } + + ngOnInit() { + this.subscription = this.basketEvents.addItemToBasket$.subscribe( + item => { + console.log(item); + this.service.setBasket(item); + this.badge = this.service.getBasket().length; + }); + } + +} + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html new file mode 100644 index 000000000..8afe01a74 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html @@ -0,0 +1,63 @@ +
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ PRODUCT + + + + BRAND + + PRICE + + QUANTITY + + COST +
{{item.productName}}ROSLYN$ {{item.unitPrice}} + + $ {{item.unitPrice * item.quantity}}
+ +
+
TOTAL
+ $ {{totalPrice}} +
+
+
+
+
+
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss new file mode 100644 index 000000000..e7cbdbf7d --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss @@ -0,0 +1,80 @@ +@import '../_variables.scss'; + +.esh-basket { + &-header { + background-color: #00A69C; + height: 63px; + + li { + list-style: none; + display: inline; + opacity: 0.5; + margin-top: 25px; + margin-left: 10px; + float: right; + cursor: pointer; + color: white; + } + + li a { + color: white; + } + + &-back { + float: left !important; + margin-top: 20px !important; + text-transform: uppercase; + } + + li a:hover { + text-decoration: none; + } + } + + &-container { + min-height: 70vh; + padding-top: 40px; + margin-bottom: 30px; + min-width: 992px; + } + + &-product-column { + max-width: 120px; + text-transform: uppercase; + vertical-align: middle !important; + } + + &-product-image { + max-width: 210px; + } + + &-total-value { + font-size: 20px; + color: #00a69c; + } + + &-total-label { + font-size: 14px; + color: #404040; + margin-top: 10px; + } + + &-totals { + border-bottom:none!important; + } +} + +.table td { + border-top: solid 1px #ddd; +} + +.table thead th { + border: none !important; +} + + + + + + + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts new file mode 100644 index 000000000..ca909f9cd --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit } from '@angular/core'; + +import { BasketService } from './basket.service'; +import { IBasket } from '../shared/models/basket.model'; +import { IBasketItem } from '../shared/models/basketItem.model'; + +@Component({ + selector: 'esh-basket', + styleUrls: ['./basket.component.scss'], + templateUrl: './basket.component.html' +}) +export class BasketComponent implements OnInit { + basket: IBasket; + totalPrice: number = 0; + + constructor(private service: BasketService) { } + + ngOnInit() { + this.basket = this.service.getBasket() + this.service.basket.items.forEach(item => { + this.totalPrice += (item.unitPrice * item.quantity) + }); + } + + itemQuantityChanged(item: IBasketItem) { + this.calculateTotalPrice(); + } + + private calculateTotalPrice() { + this.basket = this.service.basket.items; + this.service.basket.items.forEach(item => { + this.totalPrice += (item.unitPrice * item.quantity) + }); + } +} + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.module.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.module.ts new file mode 100644 index 000000000..5f954e332 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.module.ts @@ -0,0 +1,26 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { SharedModule } from '../shared/shared.module'; +import { BasketComponent } from './basket.component'; +import { BasketStatusComponent } from './basket-status/basket-status.component'; +//import { routing } from './basket.routes'; +import { BasketService } from './basket.service'; + +@NgModule({ + imports: [SharedModule], + declarations: [BasketComponent, BasketStatusComponent], + providers: [BasketService], + exports: [BasketStatusComponent] +}) +export class BasketModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: BasketModule, + providers: [ + // Providers + BasketService + ] + }; + } +} diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.routes.ts new file mode 100644 index 000000000..3ed2bc003 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.routes.ts @@ -0,0 +1,9 @@ +//import { Routes, RouterModule } from '@angular/router'; + +//import { BasketComponent } from './basket.component'; + +//const routes: Routes = [ +// { path: '', component: BasketComponent } +//]; + +//export const routing = RouterModule.forChild(routes); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts new file mode 100644 index 000000000..a294f8c87 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts @@ -0,0 +1,40 @@ +import { Injectable } from '@angular/core'; +import { Response } from '@angular/http'; + +import { DataService } from '../shared/services/data.service'; +import { IBasket } from '../shared/models/basket.model'; +import { IBasketItem } from '../shared/models/basketItem.model'; + +import 'rxjs/Rx'; +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/observable/throw'; +import { Observer } from 'rxjs/Observer'; +import 'rxjs/add/operator/map'; + +@Injectable() +export class BasketService { + private basketUrl: string = 'http://eshopcontainers:5103'; + basket: IBasket = { + buyerId: 'fakeIdentity', + items: [] + }; + + constructor(private service: DataService) { + this.basket.items = []; + } + + setBasket(item) { + this.basket.items.push(item); + this.service.post(this.basket.buyerId, this.basket.items); + } + + getBasket(): Observable { + return this.service.get(this.basketUrl + '/' + this.basket.buyerId).map((response: Response) => { + return response.json(); + }); + } + + dropBasket() { + //TODO.. + } +} \ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html index 81fa2fb73..d963d060d 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html @@ -1,27 +1,41 @@ -
- -
- -
-
-
-
+
+
+
- - + +
+
+
+
+
+
+ +
+
+ +
+ +
-
-
- -
-
- - + +
+
+ + +
+ {{item.name}} +
+
+ {{item.price}} +
+
-
- \ No newline at end of file + +
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss index d12fa6a9f..1602f1a69 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss @@ -1,9 +1,13 @@ @import '../_variables.scss'; -.catalog{ +select::-ms-expand { + display: none; +} + +.catalog { &-banner { height: 258px; - vertical-align:middle; + vertical-align: middle; &-image { width: 100%; @@ -13,7 +17,7 @@ } &-text { - position:relative; + position: relative; top: 75px; } } @@ -22,22 +26,70 @@ height: 65px; &-container { - position:absolute; - width:100%; + position: absolute; + width: 100%; background-color: $primary-colour; - left:0; + left: 0; height: 65px; } + + &-button { + width: 45px; + height: 45px; + padding: 6px 20px 10px 8px; + background-color: $primary-accent; + color: white; + font-size: 16px; + margin: 10px 0; + border: none; + position: absolute; + } + + &-select { + background-color: transparent; + padding: 10px; + margin: 10px; + margin-right: 20px; + color: #fff; + padding-top: 20px; + padding-bottom: 3px; + min-width: 140px; + border-color: #37c7ca; + max-height: 43px; + -webkit-appearance: none; + + & option { + background-color: #00a69c; + } + } + + &-wrapper { + z-index: 0; + display: inline-block; + margin-left: -10px; + } + + &-wrapper::before { + content: attr(data-name); + opacity: 0.5; + z-index: 1; + text-transform: uppercase; + position: absolute; + font-size: 10px; + margin-top: 15px; + margin-left: 21px; + color: white; + } } - &-content{ + &-content { margin-top: 10px; &-item { text-align: center; + margin-bottom: 20px; - &-image{ - + &-image { } &-button { @@ -48,7 +100,26 @@ color: white; font-size: 16px; margin: 10px 0; - border:none; + border: none; + cursor: pointer; + } + + &-title { + text-align: center; + text-transform: uppercase; + font-weight: 300; + font-size: 16px; + /*margin-top: 20px;*/ + } + + &-price { + text-align: center; + font-weight: 900; + font-size: 28px; + } + + &-price::before { + content: '$'; } } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts index e4ec52ef0..c953d23ed 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts @@ -5,6 +5,7 @@ import { ICatalogItem } from '../shared/models/catalogItem.model'; import { ICatalogType } from '../shared/models/catalogType.model'; import { ICatalogBrand } from '../shared/models/catalogBrand.model'; import { IPager } from '../shared/models/pager.model'; +import { BasketWrapperService} from '../shared/services/basket.wrapper.service'; @Component({ selector: 'esh-catalog', @@ -19,11 +20,11 @@ export class CatalogComponent implements OnInit { typeSelected: number; paginationInfo: IPager; - constructor(private service: CatalogService) { } + constructor(private service: CatalogService, private basketService: BasketWrapperService) { } ngOnInit() { this.getBrands(); - this.getCatalog(10,0); + this.getCatalog(10, 0); this.getTypes(); } @@ -49,8 +50,12 @@ export class CatalogComponent implements OnInit { this.getCatalog(this.paginationInfo.itemsPage, value); } + addToCart(item: ICatalogItem) { + this.basketService.addItemToBasket(item); + } + getCatalog(pageSize:number, pageIndex: number, brand?: number, type?: number) { - this.service.getCatalog(brand, type).subscribe(catalog => { + this.service.getCatalog(pageIndex, pageSize, brand, type).subscribe(catalog => { this.catalog = catalog; console.log('catalog items retrieved: ' + catalog.count); @@ -58,7 +63,8 @@ export class CatalogComponent implements OnInit { actualPage : catalog.pageIndex, itemsPage : catalog.pageSize, totalItems : catalog.count, - totalPages : (catalog.count / catalog.pageSize) + totalPages: Math.ceil(catalog.count / catalog.pageSize), + items: catalog.pageSize }; console.log(this.paginationInfo); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.module.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.module.ts index 64e961d03..d520db097 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.module.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.module.ts @@ -3,15 +3,13 @@ import { BrowserModule } from '@angular/platform-browser'; import { SharedModule } from '../shared/shared.module'; import { CatalogComponent } from './catalog.component'; -import { routing } from './catalog.routes'; +//import { routing } from './catalog.routes'; import { CatalogService } from './catalog.service'; import { Pager } from '../shared/components/pager/pager'; - - @NgModule({ - imports: [routing, BrowserModule, SharedModule], - declarations: [CatalogComponent], + imports: [BrowserModule, SharedModule], + declarations: [CatalogComponent], providers: [CatalogService] }) export class CatalogModule { } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts index 83e9b3663..cee81b259 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts @@ -1,9 +1,9 @@ -import { Routes, RouterModule } from '@angular/router'; +//import { Routes, RouterModule } from '@angular/router'; -import { CatalogComponent } from './catalog.component'; +//import { CatalogComponent } from './catalog.component'; -const routes: Routes = [ - { path: 'catalog', component: CatalogComponent } -]; +//const routes: Routes = [ +// { path: '', component: CatalogComponent } +//]; -export const routing = RouterModule.forChild(routes); +//export const routing = RouterModule.forChild(routes); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html index 3aa344d6f..ce352ef08 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html @@ -1,9 +1,10 @@ -
+
-
Showing {{model?.itemsPage}} of {{model?.totalItems}} products - Page {{model?.actualPage}} - {{model?.totalPages}}
+
Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}