+
+
+
+
+
+
\ 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
new file mode 100644
index 000000000..49193a85d
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.scss
@@ -0,0 +1,2 @@
+@import './_variables.scss';
+
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts
new file mode 100644
index 000000000..fcd39952e
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts
@@ -0,0 +1,37 @@
+import { Title } from '@angular/platform-browser';
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateService } from 'ng2-translate/ng2-translate';
+
+import { DataService } from './shared/services/data.service';
+
+/*
+ * App Component
+ * Top Level Component
+ */
+
+@Component({
+ selector: 'appc-app',
+ styleUrls: ['./app.component.scss'],
+ templateUrl: './app.component.html'
+})
+export class AppComponent implements OnInit {
+
+
+ constructor(private translate: TranslateService, private titleService: Title) {
+ // this language will be used as a fallback when a translation isn't found in the current language
+ translate.setDefaultLang('en');
+
+ // the lang to use, if the lang isn't available, it will use the current loader to get them
+ translate.use('en');
+ }
+
+ ngOnInit() {
+ this.translate.get('title')
+ .subscribe(title => this.setTitle(title));
+ }
+
+ public setTitle(newTitle: string) {
+ this.titleService.setTitle(newTitle);
+ }
+}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.module.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.module.ts
new file mode 100644
index 000000000..2716bb5a7
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.module.ts
@@ -0,0 +1,29 @@
+import { NgModule, NgModuleFactoryLoader } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/Router';
+
+import { routing } from './app.routes';
+import { AppService } from './app.service';
+import { AppComponent } from './app.component';
+import { SharedModule } from './shared/shared.module';
+import { CatalogModule } from './catalog/catalog.module';
+
+@NgModule({
+ declarations: [AppComponent],
+ imports: [
+ BrowserModule,
+ routing,
+ // FormsModule,
+ HttpModule,
+ // Only module that app module loads
+ SharedModule.forRoot(),
+ CatalogModule
+ ],
+ providers: [
+ AppService
+ ],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts
new file mode 100644
index 000000000..ea0087ca7
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts
@@ -0,0 +1,15 @@
+import { Routes, RouterModule } from '@angular/router';
+
+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);
+ // });
+ // })
+ // }
+];
+
+export const routing = RouterModule.forRoot(routes);
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.service.ts
new file mode 100644
index 000000000..44cfc1653
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AppService {
+ constructor() { }
+}
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
new file mode 100644
index 000000000..ccfbe5e48
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html
@@ -0,0 +1,42 @@
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ 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
new file mode 100644
index 000000000..d12fa6a9f
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss
@@ -0,0 +1,55 @@
+@import '../_variables.scss';
+
+.catalog{
+ &-banner {
+ height: 258px;
+ vertical-align:middle;
+
+ &-image {
+ width: 100%;
+ position: absolute;
+ left: 0;
+ height: 258px;
+ }
+
+ &-text {
+ position:relative;
+ top: 75px;
+ }
+ }
+
+ &-filter {
+ height: 65px;
+
+ &-container {
+ position:absolute;
+ width:100%;
+ background-color: $primary-colour;
+ left:0;
+ height: 65px;
+ }
+ }
+
+ &-content{
+ margin-top: 10px;
+
+ &-item {
+ text-align: center;
+
+ &-image{
+
+ }
+
+ &-button {
+ width: 255px;
+ height: 45px;
+ padding: 10px 20px 10px 20px;
+ background-color: $primary-accent;
+ color: white;
+ font-size: 16px;
+ margin: 10px 0;
+ border:none;
+ }
+ }
+ }
+}
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
new file mode 100644
index 000000000..53ca23abe
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'appc-catalog',
+ styleUrls: ['./catalog.component.scss'],
+ templateUrl: './catalog.component.html'
+})
+export class CatalogComponent implements OnInit {
+ constructor() { }
+
+ ngOnInit() {
+ console.log('catalog component loaded');
+ }
+
+}
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
new file mode 100644
index 000000000..95e541939
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+import { CatalogComponent } from './catalog.component';
+import { routing } from './catalog.routes';
+
+
+@NgModule({
+ imports: [routing],
+ declarations: [CatalogComponent]
+})
+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
new file mode 100644
index 000000000..83e9b3663
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.routes.ts
@@ -0,0 +1,9 @@
+import { Routes, RouterModule } from '@angular/router';
+
+import { CatalogComponent } from './catalog.component';
+
+const routes: Routes = [
+ { path: 'catalog', component: CatalogComponent }
+];
+
+export const routing = RouterModule.forChild(routes);
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.html
new file mode 100644
index 000000000..5d2786ccd
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.html
@@ -0,0 +1,3 @@
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+404!
+ +Page you are looking for does not exists.
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.spec.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.spec.ts new file mode 100644 index 000000000..72384fb48 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.spec.ts @@ -0,0 +1,11 @@ +/* tslint:disable:no-unused-variable */ + +import { TestBed, async } from '@angular/core/testing'; +import { PageNotFoundComponent } from './page-not-found.component'; + +describe('Component: PageNotFound', () => { + it('should create an instance', () => { + let component = new PageNotFoundComponent(); + expect(component).toBeTruthy(); + }); +}); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.ts new file mode 100644 index 000000000..ff5f9a4b0 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/page-not-found/page-not-found.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'appc-page-not-found', + templateUrl: './page-not-found.component.html', + styleUrls: ['./page-not-found.component.scss'] +}) +export class PageNotFoundComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/directives/page-heading.directive.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/directives/page-heading.directive.ts new file mode 100644 index 000000000..b0d707f45 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/directives/page-heading.directive.ts @@ -0,0 +1,10 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'appc-page-heading', + template: `{{text}}
` +}) +export class PageHeadingComponent { + @Input() text: string; + constructor() { } +} diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/directives/x-large.directive.spec.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/directives/x-large.directive.spec.ts new file mode 100644 index 000000000..1dbb9e44d --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/directives/x-large.directive.spec.ts @@ -0,0 +1,41 @@ +import { + fakeAsync, + tick, + TestBed +} from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { By } from '@angular/platform-browser/src/dom/debug/by'; + +// Load the implementations that should be tested +import { XLargeDirective } from './x-large.directive'; + +describe('x-large directive', () => { + // Create a test component to test directives + @Component({ + template: 'Content
'
+ })
+ class TestComponent { }
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ XLargeDirective,
+ TestComponent
+ ]
+ });
+ });
+
+ it('should sent font-size to x-large', fakeAsync(() => {
+ TestBed.compileComponents().then(() => {
+
+ const fixture = TestBed.createComponent(TestComponent);
+ fixture.detectChanges();
+ tick();
+ const element = fixture.debugElement.query(By.css('div'));
+
+ // expect(element.nativeElement.style.fontSize).toBe('x-large');
+
+ });
+ }));
+
+});
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/directives/x-large.directive.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/directives/x-large.directive.ts
new file mode 100644
index 000000000..0cf58bcc5
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/directives/x-large.directive.ts
@@ -0,0 +1,18 @@
+import { Directive, ElementRef, Renderer } from '@angular/core';
+/*
+ * Directive
+ * XLarge is a simple directive to show how one is made
+ */
+@Directive({
+ selector: '[appdXlarge]' // using [ ] means selecting attributes
+})
+export class XLargeDirective {
+ constructor(element: ElementRef, renderer: Renderer) {
+ // simple DOM manipulation to set font size to x-large
+ // `nativeElement` is the direct reference to the DOM element
+ // element.nativeElement.style.fontSize = 'x-large';
+
+ // for server/webworker support use the renderer
+ renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
+ }
+}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/control-base.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/control-base.ts
new file mode 100644
index 000000000..97ffcf111
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/control-base.ts
@@ -0,0 +1,36 @@
+export class ControlBase
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/dynamic-form-control.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/dynamic-form-control.component.ts
new file mode 100644
index 000000000..8df976694
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/dynamic-form-control.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ControlBase } from './control-base';
+import { ErrorMessageComponent } from './error-message.component';
+
+@Component({
+ selector: 'appc-dynamic-control',
+ templateUrl: './dynamic-form-control.component.html'
+})
+export class DynamicFormControlComponent {
+ @Input() control;
+ @Input() form;
+
+ constructor() {
+ this.control = undefined;
+ this.form = undefined;
+ }
+
+ get valid() {
+ return this.form.controls[this.control.key].valid;
+ }
+
+ get invalid() {
+ return !this.form.controls[this.control.key].valid && this.form.controls[this.control.key].touched;
+ }
+}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/dynamic-form.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/dynamic-form.component.html
new file mode 100644
index 000000000..a3660cb01
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/dynamic-form.component.html
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/dynamic-form.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/dynamic-form.component.ts
new file mode 100644
index 000000000..bf2874d48
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/dynamic-form.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { ControlBase } from './control-base';
+import { FormControlService } from './form-control.service';
+
+@Component({
+ selector: 'appc-dynamic-form',
+ templateUrl: './dynamic-form.component.html'
+})
+export class DynamicFormComponent implements OnInit {
+
+ @Input() controls: ControlBase {{errorMessage}}
`
+})
+export class ErrorMessageComponent {
+ @Input() control: ControlBase
+
\ No newline at end of file
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/error-summary.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/error-summary.component.ts
new file mode 100644
index 000000000..24d31a2ea
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/error-summary.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'appc-error-summary',
+ templateUrl: './error-summary.component.html'
+})
+export class ErrorSummaryComponent {
+ @Input() errors: string | string[];
+
+ constructor() { }
+}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/form-control.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/form-control.service.ts
new file mode 100644
index 000000000..36c8ba92c
--- /dev/null
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/forms/form-control.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+import { ControlBase } from './control-base';
+import { ValidationService } from './validation.service';
+
+@Injectable()
+export class FormControlService {
+ constructor() { }
+
+ toControlGroup(controls: ControlBase-
+
- + {{error}} + +
+
+
+
+
+
+