diff --git a/angular.json b/angular.json index 1efc187..95ac678 100644 --- a/angular.json +++ b/angular.json @@ -23,7 +23,7 @@ "src/assets" ], "styles": [ - "src/styles.css" + "src/styles.scss" ], "scripts": [] }, @@ -123,5 +123,10 @@ } } }, - "defaultProject": "koersepublicfrontend" -} \ No newline at end of file + "defaultProject": "koersepublicfrontend", + "schematics": { + "@schematics/angular:component": { + "styleext": "scss" + } + } +} diff --git a/package-lock.json b/package-lock.json index 2c8b42f..3747363 100644 --- a/package-lock.json +++ b/package-lock.json @@ -132,6 +132,14 @@ "tslib": "^1.9.0" } }, + "@angular/cdk": { + "version": "6.4.7", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.4.7.tgz", + "integrity": "sha512-18x0U66fLD5kGQWZ9n3nb75xQouXlWs7kUDaTd8HTrHpT1s2QIAqlLd1KxfrYiVhsEC2jPQaoiae7VnBlcvkBg==", + "requires": { + "tslib": "^1.7.1" + } + }, "@angular/cli": { "version": "6.1.5", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.1.5.tgz", @@ -358,6 +366,23 @@ "integrity": "sha512-EEtM6mJtiEgmmm3VjzJxv5BavvonaBFtBrPUcevIW851DtIqn4CS8yDcLcGFiSvSLtAYxRX8dkacPv9vvM1Khg==", "dev": true }, + "@angular/material": { + "version": "6.4.6", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.4.6.tgz", + "integrity": "sha512-SUSg9MhLv4IZj6Nh8qoCLDImZugCQ+Jvvt+/cDIaTn6TrT6ZenDHc6jOhbGFesU6FuBDBFIXMiuBPD9kBr7vaA==", + "requires": { + "parse5": "^5.0.0", + "tslib": "^1.7.1" + }, + "dependencies": { + "parse5": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz", + "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==", + "optional": true + } + } + }, "@angular/platform-browser": { "version": "6.1.6", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.1.6.tgz", diff --git a/package.json b/package.json index 2833706..f5e6489 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,14 @@ }, "private": true, "dependencies": { - "@angular/animations": "^6.1.0", + "@angular/animations": "^6.1.6", + "@angular/cdk": "^6.4.7", "@angular/common": "^6.1.0", "@angular/compiler": "^6.1.0", "@angular/core": "^6.1.0", "@angular/forms": "^6.1.0", "@angular/http": "^6.1.0", + "@angular/material": "^6.4.6", "@angular/platform-browser": "^6.1.0", "@angular/platform-browser-dynamic": "^6.1.0", "@angular/router": "^6.1.0", diff --git a/src/app/app.component.html b/src/app/app.component.html index fa2706a..cbba46f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,14 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- +
+ + + + +
+ +
+ + + + +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss new file mode 100644 index 0000000..8dfea3a --- /dev/null +++ b/src/app/app.component.scss @@ -0,0 +1,23 @@ +#appcontainer { + height: 100vh; + width: 100vw; + background-color: #0000ff40; + display: grid; + grid-template-areas: + "topmenu" + "content" + "reclame"; +} + +app-reclamespinner { + grid-area: reclame; +} + +app-topmenu { + grid-area: topmenu; +} + +#routerContent { + grid-area: content; +} + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d62fe05..270ea4e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'koersepublicfrontend'; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..4048ca9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,16 +1,50 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {MatButtonModule, MatCheckboxModule} from '@angular/material'; +import {RouterModule, Routes} from '@angular/router'; +import { TopmenuComponent } from './topmenu/topmenu.component'; +import { ReclamespinnerComponent } from './reclamespinner/reclamespinner.component'; +import { PouleComponent } from './poule/poule.component'; +import { TierComponent } from './tier/tier.component'; + +const appRoutes: Routes = [ + { path: 'year/:year/tier/:tier', component: TierComponent }, + // { path: 'hero/:id', component: HeroDetailComponent }, + // { + // path: 'heroes', + // component: HeroListComponent, + // data: { title: 'Heroes List' } + // }, + // { path: '', + // redirectTo: '/heroes', + // pathMatch: 'full' + // }, + // { path: '**', component: PageNotFoundComponent } +]; @NgModule({ declarations: [ - AppComponent + AppComponent, + TopmenuComponent, + ReclamespinnerComponent, + PouleComponent, + TierComponent ], imports: [ - BrowserModule + BrowserModule, + BrowserAnimationsModule, + MatButtonModule, + MatCheckboxModule, + RouterModule.forRoot( + appRoutes + // { enableTracing: true } // <-- debugging purposes only + ) ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +} diff --git a/src/app/poule/poule.component.html b/src/app/poule/poule.component.html new file mode 100644 index 0000000..2461d1e --- /dev/null +++ b/src/app/poule/poule.component.html @@ -0,0 +1,3 @@ +

+ poule works! +

diff --git a/src/app/app.component.css b/src/app/poule/poule.component.scss similarity index 100% rename from src/app/app.component.css rename to src/app/poule/poule.component.scss diff --git a/src/app/poule/poule.component.spec.ts b/src/app/poule/poule.component.spec.ts new file mode 100644 index 0000000..a56663d --- /dev/null +++ b/src/app/poule/poule.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PouleComponent } from './poule.component'; + +describe('PouleComponent', () => { + let component: PouleComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PouleComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PouleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/poule/poule.component.ts b/src/app/poule/poule.component.ts new file mode 100644 index 0000000..84f6b79 --- /dev/null +++ b/src/app/poule/poule.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-poule', + templateUrl: './poule.component.html', + styleUrls: ['./poule.component.scss'] +}) +export class PouleComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/reclamespinner/reclamespinner.component.html b/src/app/reclamespinner/reclamespinner.component.html new file mode 100644 index 0000000..bfe9e57 --- /dev/null +++ b/src/app/reclamespinner/reclamespinner.component.html @@ -0,0 +1,3 @@ +
+ KOOP MEER WORST +
diff --git a/src/app/reclamespinner/reclamespinner.component.scss b/src/app/reclamespinner/reclamespinner.component.scss new file mode 100644 index 0000000..33f6c85 --- /dev/null +++ b/src/app/reclamespinner/reclamespinner.component.scss @@ -0,0 +1,5 @@ +div { + background-color: greenyellow; + width: 100%; + height: 100%; +} diff --git a/src/app/reclamespinner/reclamespinner.component.spec.ts b/src/app/reclamespinner/reclamespinner.component.spec.ts new file mode 100644 index 0000000..daf575d --- /dev/null +++ b/src/app/reclamespinner/reclamespinner.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ReclamespinnerComponent } from './reclamespinner.component'; + +describe('ReclamespinnerComponent', () => { + let component: ReclamespinnerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ReclamespinnerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ReclamespinnerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/reclamespinner/reclamespinner.component.ts b/src/app/reclamespinner/reclamespinner.component.ts new file mode 100644 index 0000000..13fcc0b --- /dev/null +++ b/src/app/reclamespinner/reclamespinner.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-reclamespinner', + templateUrl: './reclamespinner.component.html', + styleUrls: ['./reclamespinner.component.scss'] +}) +export class ReclamespinnerComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/tier/tier.component.html b/src/app/tier/tier.component.html new file mode 100644 index 0000000..58955ae --- /dev/null +++ b/src/app/tier/tier.component.html @@ -0,0 +1,3 @@ +

+ tier works! +

diff --git a/src/app/tier/tier.component.scss b/src/app/tier/tier.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/tier/tier.component.spec.ts b/src/app/tier/tier.component.spec.ts new file mode 100644 index 0000000..7e48d3b --- /dev/null +++ b/src/app/tier/tier.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TierComponent } from './tier.component'; + +describe('TierComponent', () => { + let component: TierComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TierComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TierComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tier/tier.component.ts b/src/app/tier/tier.component.ts new file mode 100644 index 0000000..2d0a417 --- /dev/null +++ b/src/app/tier/tier.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-tier', + templateUrl: './tier.component.html', + styleUrls: ['./tier.component.scss'] +}) +export class TierComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/topmenu/topmenu.component.html b/src/app/topmenu/topmenu.component.html new file mode 100644 index 0000000..333b68c --- /dev/null +++ b/src/app/topmenu/topmenu.component.html @@ -0,0 +1,9 @@ +
+ + + + + + + Link +
diff --git a/src/app/topmenu/topmenu.component.scss b/src/app/topmenu/topmenu.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/topmenu/topmenu.component.spec.ts b/src/app/topmenu/topmenu.component.spec.ts new file mode 100644 index 0000000..97953b9 --- /dev/null +++ b/src/app/topmenu/topmenu.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TopmenuComponent } from './topmenu.component'; + +describe('TopmenuComponent', () => { + let component: TopmenuComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TopmenuComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TopmenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/topmenu/topmenu.component.ts b/src/app/topmenu/topmenu.component.ts new file mode 100644 index 0000000..8e43b6c --- /dev/null +++ b/src/app/topmenu/topmenu.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-topmenu', + templateUrl: './topmenu.component.html', + styleUrls: ['./topmenu.component.scss'] +}) +export class TopmenuComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/styles.css b/src/styles.css deleted file mode 100644 index 90d4ee0..0000000 --- a/src/styles.css +++ /dev/null @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..4ba7580 --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,6 @@ +/* You can add global styles to this file, and also import other style files */ +@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; + +body { + margin: 0px; +}