joachim/homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Figured out the param map... goddamnit.

Browse Source
This commit is contained in:
Joachim Nielandt 2018-03-24 21:30:33 +01:00
parent 9b9b2176fe
commit ef8a8e2f11
17 changed files with 312 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/app-routing.module.ts
View File

@ -5,26 +5,32 @@ 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';
const appRoutes: Routes = [
// { path: 'crisis-center', component: CrisisListComponent },
{
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' },
// { path: '**', component: AppComponent }
];
{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 {}
export class AppRoutingModule {
}

44
src/app/app.component.html
View File

@ -1,45 +1 @@
<!--this is bootstrap super container-->
<div class="container-fluid">
<div class="row" id="namerow">
<div class="col-md-8 offset-md-2">
<div class="centercontents" id="topname" [class.active]="mousingOver === null">
<span class="display-1" id="first">Joachim</span><span id="dot">.</span><span id="last" class="display-1">Nielandt</span>
</div>
<div class="" id="highlightedlink" [class.active]="mousingOver !== null">
{{mousingOver}}
</div>
</div>
</div>
<!--the top menu... should be always visible, everywhere-->
<div class="row">
<div class="col-md-8 offset-md-2 centercontents">
<div id="topmenubuttons">
<div class="btn-group mx-auto" role="group">
<!--removed this from the <i: tooltip="Huis" placement="bottom"-->
<a routerLink="/home" (mouseout)="mouseOut('home')" (mouseover)="mouseOver('home')"><i class="fa fa-home fa-fw fa-2x" aria-hidden="true"></i></a>
<a routerLink="/posts" (mouseout)="mouseOut('posts')" (mouseover)="mouseOver('posts')"><i class="fa fa-sticky-note fa-fw fa-2x" aria-hidden="true"></i></a>
<a routerLink="/cv" (mouseout)="mouseOut('cv')" (mouseover)="mouseOver('cv')"><i class="fa fa-id-badge fa-fw fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</div>
<!--row-->
</div>
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="pagetype">
{{getPageType()}}
</div>
</div>
</div>
<!--this shows the current route's content-->
<div class="row">
<div class="col-md-8 offset-md-2">
<router-outlet></router-outlet>
</div>
</div>
</div>

80
src/app/app.component.scss
View File

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

27
src/app/app.component.ts
View File

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

10
src/app/app.module.ts
View File

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

3
src/app/components/contact/contact.component.html Normal file
View File

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

0
src/app/components/contact/contact.component.scss Normal file
View File

25
src/app/components/contact/contact.component.spec.ts Normal file
View File

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

15
src/app/components/contact/contact.component.ts Normal file
View File

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

9
src/app/components/home/home.component.ts
View File

@ -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'));
});
}
}

45
src/app/components/root/root.component.html Normal file
View File

@ -0,0 +1,45 @@
<!--this is bootstrap super container-->
<div class="container-fluid">
<div class="row" id="namerow">
<div class="col-md-8 offset-md-2">
<div class="centercontents" id="topname" [class.active]="mousingOver === null">
<span class="display-1" id="first">Joachim</span><span id="dot">.</span><span id="last" class="display-1">Nielandt</span>
</div>
<div class="" id="highlightedlink" [class.active]="mousingOver !== null">
{{mousingOver}}
</div>
</div>
</div>
<!--the top menu... should be always visible, everywhere-->
<div class="row">
<div class="col-md-8 offset-md-2 centercontents">
<div id="topmenubuttons">
<div class="btn-group mx-auto" role="group">
<!--removed this from the <i: tooltip="Huis" placement="bottom"-->
<a routerLink="/home" (mouseout)="mouseOut('home')" (mouseover)="mouseOver('home')"><i class="fa fa-home fa-fw fa-2x" aria-hidden="true"></i></a>
<a routerLink="/posts" (mouseout)="mouseOut('posts')" (mouseover)="mouseOver('posts')"><i class="fa fa-sticky-note fa-fw fa-2x" aria-hidden="true"></i></a>
<a routerLink="/cv" (mouseout)="mouseOut('cv')" (mouseover)="mouseOver('cv')"><i class="fa fa-id-badge fa-fw fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</div>
<!--row-->
</div>
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="pagetype">
{{getPageType()}}
</div>
</div>
</div>
<!--this shows the current route's content-->
<div class="row">
<div class="col-md-8 offset-md-2">
<router-outlet></router-outlet>
</div>
</div>
</div>

82
src/app/components/root/root.component.scss Normal file
View File

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

25
src/app/components/root/root.component.spec.ts Normal file
View File

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

41
src/app/components/root/root.component.ts Normal file
View File

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

8
src/app/services/dataloader.service.ts
View File

@ -12,26 +12,22 @@ export class DataloaderService {
constructor(private http: HttpClient) { }
getPosts(): Observable<Post[]> {
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;
});

27
src/app/services/state.service.ts
View File

@ -1,5 +1,7 @@
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 {
@ -13,24 +15,28 @@ export class StateService {
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)
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)
}
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)) {
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;
@ -49,9 +55,10 @@ export class StateService {
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];
}
}
}

2
src/assets/post/cupboard1/full.html
View File

@ -1 +1 @@
<p>The cupboard is great, the cupboard is powerful!</p>
<p>This post is about the first cupboard project.</p>