From 5b3ac66d6295bbd169c147e181efe95df59847da Mon Sep 17 00:00:00 2001 From: Joachim Nielandt Date: Sun, 25 Mar 2018 09:52:01 +0200 Subject: [PATCH] Homepage is now language-sensitive. --- src/app/app.module.ts | 4 +- src/app/components/home/home.component.html | 14 ++++++- src/app/components/home/home.component.ts | 9 ++-- .../languagetoggle.component.html | 1 + .../languagetoggle.component.scss | 0 .../languagetoggle.component.spec.ts | 25 +++++++++++ .../languagetoggle.component.ts | 41 +++++++++++++++++++ src/app/services/state.service.ts | 27 ++++++++---- 8 files changed, 105 insertions(+), 16 deletions(-) create mode 100644 src/app/components/languagetoggle/languagetoggle.component.html create mode 100644 src/app/components/languagetoggle/languagetoggle.component.scss create mode 100644 src/app/components/languagetoggle/languagetoggle.component.spec.ts create mode 100644 src/app/components/languagetoggle/languagetoggle.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index acba568..eee0411 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -19,6 +19,7 @@ import {FormsModule} from '@angular/forms'; import {StateService} from './services/state.service'; import { ContactComponent } from './components/contact/contact.component'; import { RootComponent } from './components/root/root.component'; +import { LanguagetoggleComponent } from './components/languagetoggle/languagetoggle.component'; @NgModule({ declarations: [ @@ -31,7 +32,8 @@ import { RootComponent } from './components/root/root.component'; SimpledatePipe, PosttagComponent, ContactComponent, - RootComponent + RootComponent, + LanguagetoggleComponent ], imports: [ BrowserModule, diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 986c0f0..46a3b41 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -1,5 +1,15 @@
- These pages are a mish-mash of things that I'd like to keep safe. Descriptions and photos of projects, so I don't forget about them. Blog-style recollections of pieces of code, so I don't forget about them. Consider it a notepad of some kind. + + These pages are a mish-mash of things that I'd like to keep safe. Descriptions and photos of projects, so I don't + forget about them. Blog-style recollections of pieces of code, so I don't forget about them. Consider it a notepad + of some kind. + + + Deze web pagina's zijn een samenraapsel van verschillende dingen: notities over technische oplossingen die ik niet + opnieuw wil opzoeken, foto's en beschrijvingen van projecten die ik gedaan heb en nog zou willen doen, curriculum + vitae ... Kortom, alles wat je op een typische social media website zou vinden, maar dan in eigen beheer. Het is + ineens ook een excuus om wat met web technologie te prutsen, dat is altijd meegenomen. +
-
\ No newline at end of file + diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 717b20c..89f52f4 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import {ActivatedRoute, ParamMap} from '@angular/router'; +import {StateService} from '../../services/state.service'; @Component({ selector: 'app-home', @@ -8,15 +9,11 @@ import {ActivatedRoute, ParamMap} from '@angular/router'; }) export class HomeComponent implements OnInit { - constructor(private route: ActivatedRoute) { } + constructor(private route: ActivatedRoute, private stateService: StateService) { } ngOnInit() { - console.log('homecomponent onInit') // fix up the language, fetch it from the route! - this.route.parent.paramMap.subscribe((params: ParamMap) => { - console.log(params); - console.log(params.get('language')); - }); + this.stateService.getLanguageFromRoute(this.route).subscribe(language => {console.log('homecomp gets: ' + language); }); } } diff --git a/src/app/components/languagetoggle/languagetoggle.component.html b/src/app/components/languagetoggle/languagetoggle.component.html new file mode 100644 index 0000000..90a8339 --- /dev/null +++ b/src/app/components/languagetoggle/languagetoggle.component.html @@ -0,0 +1 @@ + diff --git a/src/app/components/languagetoggle/languagetoggle.component.scss b/src/app/components/languagetoggle/languagetoggle.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/languagetoggle/languagetoggle.component.spec.ts b/src/app/components/languagetoggle/languagetoggle.component.spec.ts new file mode 100644 index 0000000..c9fa687 --- /dev/null +++ b/src/app/components/languagetoggle/languagetoggle.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LanguagetoggleComponent } from './languagetoggle.component'; + +describe('LanguagetoggleComponent', () => { + let component: LanguagetoggleComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LanguagetoggleComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LanguagetoggleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/languagetoggle/languagetoggle.component.ts b/src/app/components/languagetoggle/languagetoggle.component.ts new file mode 100644 index 0000000..8ce445e --- /dev/null +++ b/src/app/components/languagetoggle/languagetoggle.component.ts @@ -0,0 +1,41 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {StateService} from '../../services/state.service'; + +@Component({ + selector: 'app-languagetoggle', + templateUrl: './languagetoggle.component.html', + styleUrls: ['./languagetoggle.component.scss'] +}) +export class LanguagetoggleComponent implements OnInit { + + /** + * This is the language for which the component is defined. Typically, when the currently set language is equal to this variable, + * the component will be visible. + */ + @Input() + private language: string; + + /** + * if this is set to true, the component will be visible + */ + private show: boolean; + + constructor(private route: ActivatedRoute, private stateService: StateService) { + } + + ngOnInit() { + this.stateService.getLanguageFromRoute(this.route).subscribe(lang => { + console.log('languagetoggle gets this language: '+ lang); + console.log('('+this.language+')') + if (lang === this.language) { + console.log('equalled! showing the component'); + this.show = true; + } else { + console.log('not equalled! not showing the component'); + this.show = false; + } + }); + } + +} diff --git a/src/app/services/state.service.ts b/src/app/services/state.service.ts index a76c439..1f57ebd 100644 --- a/src/app/services/state.service.ts +++ b/src/app/services/state.service.ts @@ -1,11 +1,11 @@ -import { Injectable } from '@angular/core'; +import {Injectable, OnInit} from '@angular/core'; import {Post} from '../model/post'; import {ActivatedRoute, ParamMap} from '@angular/router'; import 'rxjs/add/operator/filter'; +import {Observable} from 'rxjs/Observable'; @Injectable() export class StateService { - // this keeps track of which type is enabled / disabled tagFilter: any = []; @@ -13,6 +13,19 @@ export class StateService { } + /** + * Get the language currently set in the router. + * + * @param {ActivatedRoute} route + * @returns {Observable} + */ + getLanguageFromRoute(route: ActivatedRoute): Observable { + return route.parent.paramMap.map((params: ParamMap) => { + const temp = params.get('language'); + return temp; + }); + } + shouldDisplay(post: Post): boolean { // check whether all filters are true or false: that case, just show everything let foundTrue = false; @@ -31,7 +44,7 @@ export class StateService { return true; } if (!foundTrue && !foundFalse) { - // some weird case, just show everything + // some weird case, just show everything return true; } @@ -47,14 +60,14 @@ export class StateService { } isActiveTag(tag: string): boolean { - // console.log('isActive'); - // console.log(this.tagFilter); + // console.log('isActive'); + // console.log(this.tagFilter); return this.tagFilter[tag] === true; } toggleTag(tag: string) { - // console.log('toggle'); - // console.log(this.tagFilter); + // console.log('toggle'); + // console.log(this.tagFilter); if (this.tagFilter[tag] == null) { this.tagFilter[tag] = true; } else {