Commit f6af262d authored by Thibault Ehrhart's avatar Thibault Ehrhart

Display wikidata properties on details page

parent 1bb73fb5
......@@ -26,21 +26,21 @@
<li class="infobox-item" *ngIf="selectedItem.locality || selectedItem.country"><b>Location:</b> {{ selectedItem.locality }} - {{ getCountryName(selectedItem.country) }}</li>
<li class="infobox-item" *ngIf="selectedItem.dateCreated"><b>Date:</b> {{ selectedItem.dateCreated | date: 'dd/MM/yyyy' }}</li>
<li class="infobox-item" *ngIf="selectedItem.subject"><b>Subject:</b> <a [href]="selectedItem.subject" target="_blank">{{ selectedItem.subjectLabel }}</a></li>
<li class="infobox-item" *ngIf="selectedItem.genre"><b>Genre:</b> <a [href]="selectedItem.genre" target="_blank">{{ selectedItem.genreLabel }}</a></li>
<li class="infobox-item" *ngIf="selectedItem.genre && selectedItem.genreLabel"><b>Genre:</b> <a [href]="selectedItem.genre" target="_blank">{{ selectedItem.genreLabel }}</a></li>
<li *ngIf="selectedItem.annotations && selectedItem.annotations.length > 0">
<div class="infobox-item" *ngFor="let annotation of selectedItem.annotations">
<span [ngClass]="['colorize', 'color-' + getAnnotationColor(annotation.type)]">{{ getAnnotationName(annotation.type) }}:</span>
<span><b>{{ getAnnotationName(annotation.type) }}:</b></span>
<span *ngFor="let value of annotation.values; let last = last">
<a [href]="value.source" target="_blank" [ngStyle]="{ 'font-weight': value.source === search.searchParams.annotations[annotation.type] ? 'bold' : 'normal' }">{{ value.label }}</a><span *ngIf="!last">,</span>
<a [href]="value.source" target="_blank" [ngStyle]="{ 'font-weight': value.source === search.searchParams.annotations[annotation.type] ? 'bold' : 'normal' }"><span [ngClass]="['colorize', 'color-' + getAnnotationColor(annotation.type)]">{{ value.label }}</span></a><span *ngIf="!last">,</span>
</span>
</div>
</li>
<li class="infobox-item" *ngIf="selectedItem.p1561"><b>Number of survivors:</b> {{ selectedItem.p1561 }}</li>
<li class="infobox-item" *ngIf="selectedItem.p1339"><b>Number of injured:</b> {{ selectedItem.p1339 }}</li>
<li class="infobox-item" *ngIf="selectedItem.p1120"><b>Number of deaths:</b> {{ selectedItem.p1120 }}</li>
<li class="infobox-item" *ngIf="selectedItem.p137"><b>Operator:</b> {{ selectedItem.p137 }}</li>
<li class="infobox-item" *ngIf="selectedItem.p426"><b>Aircraft registration:</b> {{ selectedItem.p426 }}</li>
<li class="infobox-item" *ngIf="selectedItem.p3090"><b>Flight number:</b> {{ selectedItem.p3090 }}</li>
<li *ngIf="selectedItem.props && selectedItem.props.length > 0">
<div class="infobox-item" *ngFor="let prop of selectedItem.props">
<span><a [href]="prop.key"><b>{{ getPropName(prop) }}:</b></a></span>
<span>{{ prop.value }}</span>
</div>
</li>
</ul>
</div>
<div class="image" *ngIf="selectedItem.associatedMedias && selectedItem.associatedMedias.length > 0" [ngStyle]="{ 'background-image': 'url(' + selectedItem.associatedMedias[0] + ')' }"></div>
......
import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core';
import { Component, Input, ViewChild, ElementRef, OnInit, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { finalize } from 'rxjs/operators';
import { NewsService, NewsContext } from '../../services/news/news.service';
......@@ -20,13 +20,29 @@ export class HomeDetailsComponent implements OnInit {
selectedItem: any;
isLoading: boolean = false;
isFullscreen: boolean = false;
schemasCache: any = [];
propertiesCache: any = {};
constructor(
private newsService: NewsService,
private route: ActivatedRoute,
private router: Router,
private search: SearchService
private search: SearchService,
private ref: ChangeDetectorRef
) {
// Cache schemas and properties
this.newsService.getSchemas().subscribe((data: any) => {
this.schemasCache = data;
Object.keys(this.schemasCache).forEach((schemaID: any) => {
const schema = this.schemasCache[schemaID];
if (schema.properties) {
schema.properties.forEach((property: any) => {
this.propertiesCache[property.property_ID] = property;
});
//this.ref.markForCheck();
}
});
});
}
ngOnInit() {
......@@ -80,6 +96,20 @@ export class HomeDetailsComponent implements OnInit {
}, (error: any) => {
this.selectedItem.sources = [];
});
this.newsService.getNewsWikiProps(this.selectedItem.s).subscribe((props: any) => {
this.selectedItem.props = [];
if (props && props.results && props.results.bindings) {
this.selectedItem.props = props.results.bindings.map((bind: any) => {
return {
key: bind.p.value,
value: bind.o.value
};
});
}
}, (error: any) => {
this.selectedItem.props = [];
});
});
}
});
......@@ -163,4 +193,17 @@ export class HomeDetailsComponent implements OnInit {
return NewsService.getAnnotationColor(annotationType);
}
getPropName(prop: any) {
const propID = prop.key.split('/').pop(); // extract property ID from property URL
const property = this.propertiesCache[propID];
if (property && property.property) {
const propName = property.property.toLowerCase().replace(/_/g, ' ').split(' ').map((s: any) => s.charAt(0).toUpperCase() + s.substring(1)).join(' ');
return propName;
}
return propID;
}
formatPropertyName(propName: string) {
return ;
}
}
......@@ -20,7 +20,7 @@
<hr><br>
<div class="form-group" *ngFor="let prop of selectedSchema.data.properties">
<label>{{ prop.property }}</label>
<label>{{ formatPropertyName(prop.property) }}</label>
<input type="text" class="form-control" placeholder="Enter a value" [formControlName]="'schema_property_' + prop.property_ID">
</div>
</div>
......
......@@ -288,4 +288,8 @@ export class HomeComponent implements OnInit {
return i18nIsoCountries.getName(alpha3code, "en");
}
formatPropertyName(propName: string) {
return propName.toLowerCase().replace(/_/g, ' ').split(' ').map((s) => s.charAt(0).toUpperCase() + s.substring(1)).join(' ');
}
}
......@@ -317,6 +317,25 @@ export class NewsService {
return Observable.fromPromise(client.query(query));
}
getNewsWikiProps(newsURI: string): Observable<any> {
let client = new Client(environment.virtuosoAddress);
client.setOptions('application/json');
let query = `
${this.getPrefixes()}
SELECT DISTINCT *
FROM <http://asrael.eurecom.fr/agencefrancepresse/news>
WHERE {
<${newsURI}> ?p ?o .
FILTER(STRSTARTS(STR(?p), STR(wdt:)))
}
`;
console.debug(query);
return Observable.fromPromise(client.query(query));
}
getAnnotationsByContext(context: string): Observable<any> {
let client = new Client(environment.virtuosoAddress);
client.setOptions('application/json');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment