main blocks read

angular.json

@@ -23,7 +23,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -123,5 +123,10 @@
       }
     }
   },
-  "defaultProject": "koersepublicfrontend"
+  "defaultProject": "koersepublicfrontend",
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  }
 }

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",

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",

src/app/app.component.html

@@ -1,20 +1,14 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<div id="appcontainer">
 
+  <!--this is the menu containing the high level menu items-->
+  <app-topmenu></app-topmenu>
+
+  <!--this is where the router's stuff will be-->
+  <div #routerContent>
+    <router-outlet></router-outlet>
+  </div>
+
+  <!--reclame spinner altijd zichtbaar-->
+  <app-reclamespinner></app-reclamespinner>
+
+</div>

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;
+}
+

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';

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 {
+}

src/app/poule/poule.component.html

@@ -0,0 +1,3 @@
+<p>
+  poule works!
+</p>

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<PouleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PouleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PouleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+  }
+
+}

src/app/reclamespinner/reclamespinner.component.html

@@ -0,0 +1,3 @@
+<div>
+ KOOP MEER WORST
+</div>

src/app/reclamespinner/reclamespinner.component.scss

@@ -0,0 +1,5 @@
+div {
+  background-color: greenyellow;
+  width: 100%;
+  height: 100%;
+}

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<ReclamespinnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReclamespinnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReclamespinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+  }
+
+}

src/app/tier/tier.component.html

@@ -0,0 +1,3 @@
+<p>
+  tier works!
+</p>

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<TierComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TierComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+  }
+
+}

src/app/topmenu/topmenu.component.html

@@ -0,0 +1,9 @@
+<div class="button-row">
+  <!--pick a year-->
+  <button mat-raised-button>Jaar 2018</button>
+  <button mat-raised-button color="primary">Tier 1</button>
+  <button mat-raised-button color="accent">Tier 2</button>
+  <button mat-raised-button color="warn">Tier 3</button>
+  <button mat-raised-button disabled>Disabled</button>
+  <a mat-button routerLink=".">Link</a>
+</div>

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<TopmenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TopmenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopmenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+  }
+
+}

src/styles.css

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

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;
+}