diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index bac9102..8da7161 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -41,3 +41,13 @@
border-top: 1px solid black;
margin: 35px 30px 25px 30px;
}
+
+#topmenubuttons {
+ a {
+ color: lightgrey;
+ }
+
+ a:hover {
+ color: darkorange;
+ }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 69e2268..e2b8f6e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -14,6 +14,9 @@ import { PosttypepipePipe } from './pipes/posttypepipe.pipe';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import {SimpledatePipe} from './pipes/simpledate.pipe';
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';
@NgModule({
declarations: [
@@ -30,9 +33,11 @@ import { PosttagComponent } from './components/post/posttag/posttag.component';
BrowserModule,
AppRoutingModule,
HttpClientModule,
- TooltipModule.forRoot()
+ FormsModule,
+ TooltipModule.forRoot(),
+ ButtonsModule.forRoot()
],
- providers: [DataloaderService],
+ providers: [DataloaderService, StateService],
bootstrap: [AppComponent]
})
export class AppModule { }
diff --git a/src/app/components/cv/cv.component.scss b/src/app/components/cv/cv.component.scss
index 55e28e6..4dd70c7 100644
--- a/src/app/components/cv/cv.component.scss
+++ b/src/app/components/cv/cv.component.scss
@@ -5,7 +5,7 @@
.blocktitle {
text-align: center;
font-size: 150%;
- border-bottom: 1px dotted black;
+ border-bottom: 1px solid lightgrey;
margin: 0px 30px 0px 30px;
}
diff --git a/src/app/components/cv/cv.component.ts b/src/app/components/cv/cv.component.ts
index ace5256..aacd816 100644
--- a/src/app/components/cv/cv.component.ts
+++ b/src/app/components/cv/cv.component.ts
@@ -19,7 +19,7 @@ export class CvComponent implements OnInit {
.setLanguage("nl")
.setEmployer('Universiteit Gent')
.setTitle('Doctor in de ingenieurswetenschappen: computerwetenschappen')
- .setDescription('Het doctoraatswerk getiteld "XPath-gebaseerde informatie-extractie" behandelt het extraheren van informatie uit semi-gestructureerde documenten zoals HTML, gebruik makend van XPath.')
+ .setDescription('Manuscript: "XPath-gebaseerde informatie-extractie" - informatie extraheren uit semi-gestructureerde documenten zoals HTML, gebruik makend van XPath')
.setFromYear(2010)
.setToYear(2017)
.setIconName("assets/images/ugent-icon.png"),
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 37f4933..5cc6756 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -8,7 +8,7 @@
diff --git a/src/app/components/post/post.component.scss b/src/app/components/post/post.component.scss
index 1ecb304..4b9e7d7 100644
--- a/src/app/components/post/post.component.scss
+++ b/src/app/components/post/post.component.scss
@@ -41,3 +41,12 @@
padding-right: 25px;
text-align: justify;
}
+
+.post-tag {
+
+ color: lightgrey;
+
+ .highlight {
+ color: grey;
+ }
+}
diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index 29b6c81..af43588 100644
--- a/src/app/components/post/post.component.ts
+++ b/src/app/components/post/post.component.ts
@@ -1,6 +1,7 @@
import {Component, OnInit, Input, ViewChild, ElementRef} from '@angular/core';
import { Post } from 'app/model/post';
import { DataloaderService } from 'app/services/dataloader.service';
+import {StateService} from '../../services/state.service';
@Component({
selector: 'app-post',
@@ -12,7 +13,7 @@ export class PostComponent implements OnInit {
@Input() post: Post;
@ViewChild('htmlcontainer') htmlContainer: ElementRef;
- constructor(private dataloaderService: DataloaderService) { }
+ constructor(private dataloaderService: DataloaderService, private stateService:StateService) { }
ngOnInit() {
// TODO load the relevant HTML file!
@@ -30,4 +31,8 @@ export class PostComponent implements OnInit {
console.log('PostComponent.ngOnInit is done.');
}
+
+ isActiveTag(tag:string):boolean {
+ return this.stateService.isActiveTag(tag);
+ }
}
diff --git a/src/app/components/post/posttag/posttag.component.html b/src/app/components/post/posttag/posttag.component.html
index 5d6fb7c..e18de08 100644
--- a/src/app/components/post/posttag/posttag.component.html
+++ b/src/app/components/post/posttag/posttag.component.html
@@ -1,4 +1,4 @@
-
+
diff --git a/src/app/components/post/posttag/posttag.component.ts b/src/app/components/post/posttag/posttag.component.ts
index e88e2b8..e24e721 100644
--- a/src/app/components/post/posttag/posttag.component.ts
+++ b/src/app/components/post/posttag/posttag.component.ts
@@ -1,5 +1,6 @@
import {Component, Input, OnInit} from '@angular/core';
import {Post} from '../../../model/post';
+import {StateService} from '../../../services/state.service';
@Component({
selector: 'app-posttag',
@@ -9,6 +10,7 @@ import {Post} from '../../../model/post';
export class PosttagComponent implements OnInit {
@Input() tag: string;
+ @Input() highlight: boolean;
constructor() {
}
diff --git a/src/app/components/posts/posts.component.css b/src/app/components/posts/posts.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/posts/posts.component.html b/src/app/components/posts/posts.component.html
index 7d5782a..d548c06 100644
--- a/src/app/components/posts/posts.component.html
+++ b/src/app/components/posts/posts.component.html
@@ -1,3 +1,12 @@
-
-
+
+
+
diff --git a/src/app/components/posts/posts.component.scss b/src/app/components/posts/posts.component.scss
new file mode 100644
index 0000000..944aa8a
--- /dev/null
+++ b/src/app/components/posts/posts.component.scss
@@ -0,0 +1,26 @@
+#tag-filter-buttons-container {
+ text-align: center;
+ margin-top: -16pt;
+ margin-bottom: 12pt;
+
+ .btn.active {
+ color: grey;
+ }
+
+ .btn:hover {
+ color: darkorange;
+ }
+
+ .btn.active:hover {
+ color: darkgoldenrod;
+ }
+
+ .btn {
+ color: lightgrey;
+ background-color: white;
+ border: none;
+ padding: 0pt 3pt;
+ }
+
+
+}
diff --git a/src/app/components/posts/posts.component.ts b/src/app/components/posts/posts.component.ts
index 864e289..9bb11af 100644
--- a/src/app/components/posts/posts.component.ts
+++ b/src/app/components/posts/posts.component.ts
@@ -1,5 +1,6 @@
import {Component, OnDestroy, OnInit} from '@angular/core';
import { DataloaderService } from 'app/services/dataloader.service';
+import {StateService} from '../../services/state.service';
import { Post } from '../../model/post';
import 'rxjs/add/operator/map';
@@ -11,7 +12,7 @@ import 'rxjs/add/operator/distinct';
@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
- styleUrls: ['./posts.component.css']
+ styleUrls: ['./posts.component.scss']
})
export class PostsComponent implements OnInit, OnDestroy {
@@ -21,8 +22,9 @@ export class PostsComponent implements OnInit, OnDestroy {
}
posts:Post[];
+ tags = new Array
();
- constructor(private dataloaderService:DataloaderService) { }
+ constructor(private dataloaderService:DataloaderService, private stateService:StateService) { }
ngOnInit() {
console.log('PostsComponent ngOnInit()');
@@ -32,8 +34,18 @@ export class PostsComponent implements OnInit, OnDestroy {
//TODO fix this!!!
posts2.subscribe(p => {
this.posts = p;
- console.log('dataloaderService.getPosts() call got back! '+p);
- console.log('posts size: '+p.length);
+
+ //figure out the different tags so we can filter on them
+ let temptags = new Array();
+ this.posts.forEach(p=>p.tags.forEach(t=>temptags.push(t)));
+ console.log(temptags);
+ //copy the temptags into the tags array, don't include duplicates
+ temptags.forEach(tt=> {
+ if(this.tags.indexOf(tt)==-1)
+ this.tags.push(tt)
+ });
+ //sort the array
+ this.tags.sort((a,b)=>a.localeCompare(b));
});
console.log('PostsComponent ngOnInit() is done');
}
@@ -41,4 +53,26 @@ export class PostsComponent implements OnInit, OnDestroy {
filterOnType(type:String): void {
}
+
+ postsToDisplay():Post[] {
+ //console.log('postsToDisplay called');
+ let res = new Array();
+ if(this.posts == null)
+ return res;
+ for(let post of this.posts) {
+ if(this.stateService.shouldDisplay(post))
+ res.push(post);
+ }
+ //console.log('displaying: '+res.length);
+ return res;
+ }
+
+
+ toggleTag(tag: string) {
+ this.stateService.toggleTag(tag);
+ }
+
+ isActiveTag(tag: string) : boolean {
+ return this.stateService.isActiveTag(tag);
+ }
}
diff --git a/src/app/services/dataloader.service.ts b/src/app/services/dataloader.service.ts
index f6b9f83..2cb6ae6 100644
--- a/src/app/services/dataloader.service.ts
+++ b/src/app/services/dataloader.service.ts
@@ -50,7 +50,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.spec.ts b/src/app/services/state.service.spec.ts
new file mode 100644
index 0000000..08ea821
--- /dev/null
+++ b/src/app/services/state.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { StateService } from './state.service';
+
+describe('StateService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [StateService]
+ });
+ });
+
+ it('should be created', inject([StateService], (service: StateService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/src/app/services/state.service.ts b/src/app/services/state.service.ts
new file mode 100644
index 0000000..7f172a5
--- /dev/null
+++ b/src/app/services/state.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import {Post} from '../model/post';
+
+@Injectable()
+export class StateService {
+
+ //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)
+ foundTrue = true;
+ if(this.tagFilter[tag] === false)
+ foundFalse = true;
+ }
+// console.log('foundFalse: '+foundFalse);
+// console.log('foundTrue: '+foundTrue);
+ if(!foundTrue && foundFalse)
+ return true;
+ 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) {
+ //found the tag and its filter is enabled
+ return true;
+ }
+ }
+
+ return false;
+ }
+
+ isActiveTag(tag:string):boolean {
+ console.log('isActive');
+ console.log(this.tagFilter);
+ return this.tagFilter[tag]===true;
+ }
+
+ toggleTag(tag: string) {
+ console.log('toggle');
+ console.log(this.tagFilter);
+ if(this.tagFilter[tag]==null)
+ this.tagFilter[tag] = true;
+ else
+ this.tagFilter[tag] = !this.tagFilter[tag];
+ }
+}