diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b65c47c..a75b164 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,30 +1,36 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; + +import {AppComponent} from './app.component'; +import {HomeComponent} from './components/home/home.component'; +import {PostsComponent} from './components/posts/posts.component'; +import {CvComponent} from './components/cv/cv.component'; +import {RootComponent} from './components/root/root.component'; -import { AppComponent } from './app.component'; -import { HomeComponent } from './components/home/home.component'; -import { PostsComponent } from './components/posts/posts.component'; -import { CvComponent } from './components/cv/cv.component'; - const appRoutes: Routes = [ -// { path: 'crisis-center', component: CrisisListComponent }, - { path: 'home', component: HomeComponent }, - { path: 'posts', component: PostsComponent }, - { path: 'cv', component: CvComponent }, - { path: '', redirectTo: '/home', pathMatch: 'full' }, - { path: '*', redirectTo: '/home', pathMatch: 'full' }, - // { path: '**', component: AppComponent } -]; - + { + path: ':language', + component: RootComponent, + children: [ + {path: 'home', component: HomeComponent}, + {path: 'posts', component: PostsComponent}, + {path: 'cv', component: CvComponent}, + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: '*', redirectTo: 'home', pathMatch: 'full'} + ] + } + ] +; + @NgModule({ imports: [ RouterModule.forRoot( appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) + {enableTracing: false}) // <-- debugging purposes only ) ], exports: [ RouterModule ] }) -export class AppRoutingModule {} \ No newline at end of file +export class AppRoutingModule { +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 88fe98a..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,45 +1 @@ - -
- -
-
-
- Joachim.Nielandt -
- -
-
- - -
-
-
-
- - - - -
-
-
- -
- -
-
-
- {{getPageType()}} -
-
-
- - -
-
- -
-
- -
+ diff --git a/src/app/app.component.scss b/src/app/app.component.scss index fa683e9..8b13789 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,81 +1 @@ -@import "../globals"; -#namerow { - height: 66pt; -} - -.centercontents { - text-align: center; - margin-left: auto; - margin-right: auto -} - -#topname { - //font-family: $mainFont; - margin-top: 25px; - padding-bottom: 9px; - font-size: 80%; - transition: font-size 0.15s ease; -} -#topname.active { - font-size: 100%; - transition: font-size 0.15s ease; -} - -#topname #first { - font-size: 250% -} - -#topname #dot { - line-height: 20pt; - font-size: 600%; -} - -#topname #last { - font-size: 150%; -} - -#topmenubuttons, #topname { - //border-left: 1px solid black; - //border-right: 1px solid black; -} - -//this is the row below the name, will use this for styling -.row.below-name { -} - -.pagetype { - text-align: center; - font-size: 200%; - border-bottom: 1px solid black; - border-top: 1px solid black; - margin: 35px 30px 25px 30px; -} - -#topmenubuttons { - a { - color: lightgrey; - } - - a:hover { - color: darkorange; - } -} - -#highlightedlink { - color: gray; - opacity: 0; - //background-color: aqua; - position: absolute; - width: 100%; - bottom: -3px; - left: 0px; - font-size: 89%; - text-align: center; - transition: opacity 0.5s ease-in-out; -} - -#highlightedlink.active { - opacity: 1; - transition: opacity 0.5s ease-in-out; -} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1da1c41..64bdb45 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit, AfterViewChecked } from "@angular/core"; -import {Router} from '@angular/router'; -declare var $: any; +import { Component, OnInit} from '@angular/core'; +import 'rxjs/add/operator/switchMap'; +import {ActivatedRoute} from '@angular/router'; @Component({ selector: 'app-root', @@ -8,29 +8,12 @@ declare var $: any; styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { - title = 'Joachim Homepage'; - mousingOver: string = null; - constructor(private router:Router) {} + constructor() { + } ngOnInit() { } - getPageType() { - switch (this.router.url) { - case '/posts': return 'Posts'; - case '/cv': return 'Curriculum Vitae'; - case '/home': return 'Home'; - default: return 'Unknown path'; - } - } - mouseOver(s: string) { - console.log('mouseover!'+s); - this.mousingOver = s; - } - - mouseOut(s: string) { - this.mousingOver = null; - } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e2b8f6e..acba568 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,6 +17,8 @@ import { PosttagComponent } from './components/post/posttag/posttag.component'; import { ButtonsModule } from 'ngx-bootstrap/buttons'; 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'; @NgModule({ declarations: [ @@ -27,7 +29,9 @@ import {StateService} from './services/state.service'; CvComponent, PosttypepipePipe, SimpledatePipe, - PosttagComponent + PosttagComponent, + ContactComponent, + RootComponent ], imports: [ BrowserModule, @@ -38,6 +42,8 @@ import {StateService} from './services/state.service'; ButtonsModule.forRoot() ], providers: [DataloaderService, StateService], - bootstrap: [AppComponent] + bootstrap: [ + AppComponent + ] }) export class AppModule { } diff --git a/src/app/components/contact/contact.component.html b/src/app/components/contact/contact.component.html new file mode 100644 index 0000000..0be0885 --- /dev/null +++ b/src/app/components/contact/contact.component.html @@ -0,0 +1,3 @@ +

+ contact works! +

diff --git a/src/app/components/contact/contact.component.scss b/src/app/components/contact/contact.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/contact/contact.component.spec.ts b/src/app/components/contact/contact.component.spec.ts new file mode 100644 index 0000000..427633e --- /dev/null +++ b/src/app/components/contact/contact.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContactComponent } from './contact.component'; + +describe('ContactComponent', () => { + let component: ContactComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContactComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/contact/contact.component.ts b/src/app/components/contact/contact.component.ts new file mode 100644 index 0000000..7f6bb1e --- /dev/null +++ b/src/app/components/contact/contact.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-contact', + templateUrl: './contact.component.html', + styleUrls: ['./contact.component.scss'] +}) +export class ContactComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 33fd770..717b20c 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import {ActivatedRoute, ParamMap} from '@angular/router'; @Component({ selector: 'app-home', @@ -7,9 +8,15 @@ import { Component, OnInit } from '@angular/core'; }) export class HomeComponent implements OnInit { - constructor() { } + constructor(private route: ActivatedRoute) { } 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')); + }); } } diff --git a/src/app/components/root/root.component.html b/src/app/components/root/root.component.html new file mode 100644 index 0000000..88fe98a --- /dev/null +++ b/src/app/components/root/root.component.html @@ -0,0 +1,45 @@ + +
+ +
+
+
+ Joachim.Nielandt +
+ +
+
+ + +
+
+
+
+ + + + +
+
+
+ +
+ +
+
+
+ {{getPageType()}} +
+
+
+ + +
+
+ +
+
+ +
diff --git a/src/app/components/root/root.component.scss b/src/app/components/root/root.component.scss new file mode 100644 index 0000000..58fe3b4 --- /dev/null +++ b/src/app/components/root/root.component.scss @@ -0,0 +1,82 @@ +@import "../../../globals"; + +#namerow { + height: 66pt; +} + +.centercontents { + text-align: center; + margin-left: auto; + margin-right: auto +} + +#topname { + //font-family: $mainFont; + margin-top: 25px; + padding-bottom: 9px; + font-size: 80%; + transition: font-size 0.15s ease; +} + +#topname.active { + font-size: 100%; + transition: font-size 0.15s ease; +} + +#topname #first { + font-size: 250% +} + +#topname #dot { + line-height: 20pt; + font-size: 600%; +} + +#topname #last { + font-size: 150%; +} + +#topmenubuttons, #topname { + //border-left: 1px solid black; + //border-right: 1px solid black; +} + +//this is the row below the name, will use this for styling +.row.below-name { +} + +.pagetype { + text-align: center; + font-size: 200%; + border-bottom: 1px solid black; + border-top: 1px solid black; + margin: 35px 30px 25px 30px; +} + +#topmenubuttons { + a { + color: lightgrey; + } + + a:hover { + color: darkorange; + } +} + +#highlightedlink { + color: gray; + opacity: 0; + //background-color: aqua; + position: absolute; + width: 100%; + bottom: -3px; + left: 0px; + font-size: 89%; + text-align: center; + transition: opacity 0.5s ease-in-out; +} + +#highlightedlink.active { + opacity: 1; + transition: opacity 0.5s ease-in-out; +} diff --git a/src/app/components/root/root.component.spec.ts b/src/app/components/root/root.component.spec.ts new file mode 100644 index 0000000..a2612fe --- /dev/null +++ b/src/app/components/root/root.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RootComponent } from './root.component'; + +describe('RootComponent', () => { + let component: RootComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RootComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RootComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/root/root.component.ts b/src/app/components/root/root.component.ts new file mode 100644 index 0000000..aad00b8 --- /dev/null +++ b/src/app/components/root/root.component.ts @@ -0,0 +1,41 @@ +import { Component, OnInit } from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; + +@Component({ + selector: 'app-root', + templateUrl: './root.component.html', + styleUrls: ['./root.component.scss'] +}) +export class RootComponent implements OnInit { + + title = 'Joachim Homepage'; + mousingOver: string = null; + + constructor(private router: Router, private route: ActivatedRoute) { } + + ngOnInit() { + console.log('oninit of root component'); + this.route.paramMap.subscribe(val => console.log(val)); + } + getPageType() { + if (this.router.url.endsWith('posts')) { + return 'Posts'; + } + if (this.router.url.endsWith('cv')) { + return 'Curricululm Vitae'; + } + if ( this.router.url.endsWith('home')) { + return 'Home'; + } + return 'Joa did something wrong...' + } + + mouseOver(s: string) { + console.log('mouseover!' + s); + this.mousingOver = s; + } + + mouseOut(s: string) { + this.mousingOver = null; + } +} diff --git a/src/app/services/dataloader.service.ts b/src/app/services/dataloader.service.ts index 2cb6ae6..3c835b9 100644 --- a/src/app/services/dataloader.service.ts +++ b/src/app/services/dataloader.service.ts @@ -12,26 +12,22 @@ export class DataloaderService { constructor(private http: HttpClient) { } getPosts(): Observable { - console.log('DataLoader.getPosts() called'); return this.http.get('assets/posts.json').map(posts => { const res: Post[] = []; // fill it up for (const index in posts) { - console.log('DataLoader.getPosts() index '+index); const post: any = posts[index]; - console.log('got this key: '+post); console.log(post); const temp: Post = new Post(post.id); temp.title = post.info.title; temp.type = post.type; temp.tags = post.info.tags; - console.log('got this timestamp: ' + post.info.created_timestamp); + // console.log('got this timestamp: ' + post.info.created_timestamp); temp.created_timestamp = new Date(post.info.created_timestamp * 1000); - console.log('converted it to this: ' + temp.created_timestamp); + // console.log('converted it to this: ' + temp.created_timestamp); res.push(temp); } // console.log('these are the posts...'); - console.log('DataLoader.getPosts() result: '+res); // console.log(res); return res; }); @@ -50,7 +46,7 @@ export class DataloaderService { const url = 'assets/post/' + id + '/full.html'; // console.log('fetching: '+url); - //console.log('getPost called: '+url); + // console.log('getPost called: '+url); return this.http.get(url, {responseType: 'text'}); } diff --git a/src/app/services/state.service.ts b/src/app/services/state.service.ts index 6d12c0c..a76c439 100644 --- a/src/app/services/state.service.ts +++ b/src/app/services/state.service.ts @@ -1,37 +1,43 @@ import { Injectable } from '@angular/core'; import {Post} from '../model/post'; +import {ActivatedRoute, ParamMap} from '@angular/router'; +import 'rxjs/add/operator/filter'; @Injectable() export class StateService { - //this keeps track of which type is enabled / disabled - tagFilter:any = []; + // this keeps track of which type is enabled / disabled + tagFilter: any = []; constructor() { } - shouldDisplay(post:Post): boolean { - //check whether all filters are true or false: that case, just show everything - let foundTrue:boolean = false; - let foundFalse:boolean = false; - for(let tag of Object.keys(this.tagFilter)) { - if(this.tagFilter[tag] === true) + shouldDisplay(post: Post): boolean { + // check whether all filters are true or false: that case, just show everything + let foundTrue = false; + let foundFalse = false; + for (const tag of Object.keys(this.tagFilter)) { + if (this.tagFilter[tag] === true) { foundTrue = true; - if(this.tagFilter[tag] === false) + } + if (this.tagFilter[tag] === false) { foundFalse = true; + } } // console.log('foundFalse: '+foundFalse); // console.log('foundTrue: '+foundTrue); - if(!foundTrue && foundFalse) + if (!foundTrue && foundFalse) { return true; - if(!foundTrue && !foundFalse) - //some weird case, just show everything + } + if (!foundTrue && !foundFalse) { + // some weird case, just show everything return true; + } //check whether the post should be displayed - for(let tag of Object.keys(this.tagFilter)) { - if(post.tags.indexOf(tag)!=-1 && this.tagFilter[tag]===true) { + for (const tag of Object.keys(this.tagFilter)) { + if (post.tags.indexOf(tag) != -1 && this.tagFilter[tag] === true) { //found the tag and its filter is enabled return true; } @@ -40,18 +46,19 @@ export class StateService { return false; } - isActiveTag(tag:string):boolean { + isActiveTag(tag: string): boolean { // console.log('isActive'); // console.log(this.tagFilter); - return this.tagFilter[tag]===true; + return this.tagFilter[tag] === true; } toggleTag(tag: string) { // console.log('toggle'); // console.log(this.tagFilter); - if(this.tagFilter[tag]==null) + if (this.tagFilter[tag] == null) { this.tagFilter[tag] = true; - else + } else { this.tagFilter[tag] = !this.tagFilter[tag]; + } } } diff --git a/src/assets/post/cupboard1/full.html b/src/assets/post/cupboard1/full.html index 2046893..658879f 100644 --- a/src/assets/post/cupboard1/full.html +++ b/src/assets/post/cupboard1/full.html @@ -1 +1 @@ -

The cupboard is great, the cupboard is powerful!

+

This post is about the first cupboard project.