diff --git a/src/app/services/navigation-service.service.ts b/src/app/services/navigation-service.service.ts
index 2165aa0..e72e44b 100644
--- a/src/app/services/navigation-service.service.ts
+++ b/src/app/services/navigation-service.service.ts
@@ -1,306 +1,341 @@
import {EventEmitter, Injectable, OnDestroy} from '@angular/core';
import {
TlnManuscript, NavigationEntity, TlnPage, TlnEntity, TlnWord, Image, TlnQueryParams,
NavTree, Svg, TlnRow
} from '../models/models';
import {NietzscheSourceSeviceService} from "./nietzsche-source-sevice.service";
import {Subscription} from "rxjs/index";
import {ActivatedRoute, Params, Router} from "@angular/router";
import {QueryService} from "./query.service";
import {ExistDbSvgService, SvgService} from "./svg.service";
import {DomSanitizer} from '@angular/platform-browser';
@Injectable({
providedIn: 'root'
})
export class NavigationServiceService implements OnDestroy {
selectedManuscript: TlnManuscript;
selectedPage: TlnPage;
selectedRow: TlnRow;
selectedWord: TlnWord;
queryParams: TlnQueryParams;
// Listening to the queries entered actively (so also if page is refreshed or a url loaded)
queryParamSubscription: Subscription;
constructor(private nietzscheSourceService: NietzscheSourceSeviceService,
private router: Router,
private sanitizer: DomSanitizer,
private activatedRoute: ActivatedRoute,
private queryService: QueryService,
private svgService: ExistDbSvgService) {
this.queryParams = new TlnQueryParams('', '', '', '', false, 0);
// Listening to the queries entered actively (so also if page is refreshed or a url loaded)
this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => {
this.queryParams = new TlnQueryParams(queryparams.man,
queryparams.page,
queryparams.row,
queryparams.word,
queryparams.navBarOpenState,
queryparams.navTreeIndex ); }
);
this.navTreeIndex = [
{
idx: 0,
isActive: true,
label: 'Manuskripte',
treeClass: 'Tln:Manuscript'
}, {
idx: 1,
isActive: false,
label: 'Seiten',
treeClass: 'TlnPage'
- }, {
+ }/*, {
idx: 2,
isActive: false,
label: 'Worte',
treeClass: 'TlnWord'
- }
+ }*/
];
}
resourceOfInterest: string; // simple iri for Databrowser and rdf stuff to come
resourceOfInterestChange = new EventEmitter();
selectedManuscriptChange = new EventEmitter();
selectedPageChange = new EventEmitter();
selectedRowChange = new EventEmitter();
selectedWordChange = new EventEmitter();
activeTreeData: Array;
activeTreeDataChange = new EventEmitter>(); // if the active tree data changes
navTreeIndex: Array;
navTreeIndexChange = new EventEmitter>(); // Weather only the index changes
manuscriptNavTree: Array = [];
manuscriptNavTreeChange = new EventEmitter>(); // internally used
pageNavTree: Array = [];
pageNavTreeChange = new EventEmitter>(); // internally used
wordNavTree: Array = [];
/**
* setActiveTreeData
* Set the active tree data and emits it back to navigation list component,
* param: idx:number : the index of the tree data to be displayed.
*/
setActiveTreeData(idx: number) {
switch (idx) {
case 0: // Manuscript
this.activeTreeData = this.manuscriptNavTree;
break;
case 1: // Page
this.activeTreeData = this.pageNavTree;
break;
}
this.activeTreeDataChange.emit(this.activeTreeData);
}
updateRoute() {
const activeUrl = this.router.url.split('?')[0]; // seems workaroundish, but easy
this.router.navigate([activeUrl], { queryParams: this.queryParams });
}
/**
* changeActiveTreeIndex
* Simply changing the active tree index for the navBar in
* param: idx:number : the index of the tree which should be displayed.
*/
changeActiveTreeIndex(idx: number) {
// setting all to false first
for (const tree of this.navTreeIndex ) {
tree.isActive = false; }
this.navTreeIndex[idx].isActive = true;
this.navTreeIndexChange.emit(this.navTreeIndex);
this.setQueryParam('navTreeIndex', idx.toString() );
// also routing according to the chosen thing
this.updateRoute();
}
/**
- * createNavTreesOnInit creates the first trees if no query param is available:
+ * createNavTreesOnInit creates the first trees if no query params are available in the url:
* It ceates the manuscripNavTree and the pageNavTree of the first manuscript per default.
*
*/
createNavTreesOnInit() {
this.createManuscriptNavTree();
// create the pageNavTree with the first item of manuscriptNavTree AFTER the first TlnManuscript is in the manuscriptNavTree
this.manuscriptNavTreeChange.subscribe(tree => {
this.createPageNavTree(tree[0].tlnEntity.id);
this.activeTreeData = tree;
this.setActiveTreeData(0);
this.changeActiveTreeIndex(0);
});
// TODO: Change to RDF for all entry points
// this.createManuscriptNavTreeFromRdf();
+ this.setSelectedManuscriptIfNone();
}
createManuscriptNavTreeFromRdf() {
// TODO: implement this further for switch to RDF data only
this.queryService.getQueryfromFilename('getConvolutes.rq').subscribe(qString => {
this.queryService.getData(qString, 'SELECT').subscribe(data => {
console.log('convolute data: ', data);
});
});
}
createManuscriptNavTree() {
this.nietzscheSourceService.getConvolutes().subscribe( res => {
const convolutes = res.result.children;
- convolutes.forEach(x => {
- const entity = new TlnEntity(x.id, x.api_retrieve_content, 'man', x.id);
- const man = new NavigationEntity(x.id, entity, '');
+ convolutes.forEach(( x, index ) => {
+ const entity = new TlnEntity(x.id, x.api_retrieve_content, 'man', index, x.id);
+ const man = new NavigationEntity(index, entity, '');
this.manuscriptNavTree.push(man); });
this.manuscriptNavTreeChange.emit(this.manuscriptNavTree);
}
);
}
// If no bookId passed, pages of the first book entry will be loaded
createPageNavTree(bookId: string) {
this.pageNavTree = [];
this.nietzscheSourceService.getPages(bookId).subscribe( res => {
const pages = res.result.children;
- pages.forEach(x => {
- const entity = new TlnEntity(x.id, x.api_retrieve_content, 'page', x.id); // TODO: change from static 'TlnPage' to rdfs:sth
- const pageEntity = new NavigationEntity(x.id, entity, '');
+ pages.forEach((x, index) => {
+ const entity = new TlnEntity(x.id, x.api_retrieve_content, 'page', index, x.id ); // TODO: change from static 'TlnPage' to rdfs:sth
+ const pageEntity = new NavigationEntity(index, entity, '');
this.pageNavTree.push(pageEntity); });
this.addImagesToPageTree();
this.pageNavTreeChange.emit(this.pageNavTree);
+ this.setSelectedPageIfNone();
});
}
createManuscriptNavTreeFromUrl(params) {
if (params.man) {
this.createManuscriptNavTree();
this.manuscriptNavTreeChange.subscribe(tree => {
tree.forEach(navEntity => {
if (navEntity.tlnEntity.id === params.man) {
this.selectedManuscript = new TlnManuscript(navEntity.tlnEntity);
// resetting the a
if (params.navTreeIndex === '0' ) {
this.setActiveTreeData(Number(params.navTreeIndex));
}
}});
});
}
}
createNavTreesFromUrl(params) {
// change active
this.changeActiveTreeIndex(Number(params.navTreeIndex));
this.createManuscriptNavTreeFromUrl(params);
this.createPageNavTreeFromUrl(params);
+ }
+
+ setSelectedManuscript(man: TlnEntity) {
+ this.selectedManuscript = new TlnManuscript(man);
+ this.selectedManuscriptChange.emit(this.selectedManuscript);
+ }
+
+ setSelectedManuscriptIfNone() {
+ if (!this.selectedManuscript) {
+ this.manuscriptNavTreeChange.subscribe(manTree => this.setSelectedManuscript(manTree[0].tlnEntity));
}
+ }
+
+ setSelectedPage(pageData: TlnEntity ) {
+ this.selectedPage = new TlnPage(pageData);
+ this.addPageData(pageData.iri);
+ }
+
+ // sets the first page as selected if no selectedPage
+ setSelectedPageIfNone() {
+ if (!this.selectedPage) {
+ this.pageNavTreeChange.subscribe(pageTree => this.setSelectedPage(pageTree[0].tlnEntity));
+ }
+ }
+
+ turnPage(modifier: number) {
+ const newPageIndex = this.selectedPage.entity.navIndex + modifier;
+ this.setSelectedPage(this.pageNavTree[newPageIndex].tlnEntity);
+ }
/**
* createPageNavTreeFromUrl: Loads all navigation navigation trees according to the given queryParams passed
* param: manId:number: the index of the chosen manuscript to be displayed.
*
*/
createPageNavTreeFromUrl(params) {
if (params.man) {
this.createPageNavTree(params.man);
this.pageNavTreeChange.subscribe(tree => {
- tree.forEach(navEntity => {
- if (navEntity.tlnEntity.id === params.page) {
- this.selectedPage = new TlnPage(navEntity.tlnEntity);
- this.addPageData(navEntity.tlnEntity.iri);
- if (params.navTreeIndex === '1' ) {
- this.setActiveTreeData(Number(params.navTreeIndex));
- }
- }});
+ tree.forEach( navEntity => {
+ if (navEntity.tlnEntity.id === params.page ) {
+ // TODO: outsource creation of selectedPage into own method and get also its arrayIndex in pageNavTree via method.
+ this.setSelectedPage(navEntity.tlnEntity);
+ }
+ // if the active tree === '1' we have to set pageNavTree as active tree
+ if (params.navTreeIndex === '1' ) {
+ // set pageTree as active tree
+ this.setActiveTreeData(Number(params.navTreeIndex));
+ }
+ });
});
}
}
switchTreeIfPageView(activeTab: string) {
if ( activeTab === 'page') {
this.setActiveTreeData(1);
this.changeActiveTreeIndex(1);
+ this.setSelectedPageIfNone();
}
}
onSelectedItem(item: NavigationEntity) {
const activeTab = this.activatedRoute.snapshot['_urlSegment'].children.primary.segments[1].path;
switch (item.tlnEntity.type) {
case 'man': {
// set the new url with the chose man parameter
this.createPageNavTree(item.tlnEntity.id);
+ // If the active tab is the page view we switch automatically to page tree in navigation
this.switchTreeIfPageView(activeTab);
- this.selectedManuscript = new TlnManuscript(item.tlnEntity);
- this.selectedManuscriptChange.emit(this.selectedManuscript);
+ this.setSelectedManuscript(item.tlnEntity);
this.setQueryParam('man', this.selectedManuscript.entity.id );
// also routing according to the chosen thing
break;
}
case 'page': {
- this.selectedPage = new TlnPage(item.tlnEntity);
+ this.setSelectedPage(item.tlnEntity);
this.selectedPageChange.emit(this.selectedPage);
this.setQueryParam('page', this.selectedPage.entity.id );
// also routing according to the chosen thing
break;
}
case 'word': {
this.selectedWord = new TlnWord(item.tlnEntity);
this.selectedWordChange.emit(this.selectedWord);
this.navTreeIndex[2].selectedItem = item.tlnEntity;
// this.navTreeIndexChange.emit(this.navTreeIndex);
this.setQueryParam('word', this.selectedWord.entity.id );
// also routing according to the chosen thing
break;
}
default: {
console.log('unknown item.tlnEntity.type: ', item.tlnEntity.type);
}
}
this.updateRoute();
}
setResourceOfInterest(res: string) {
this.resourceOfInterest = res;
this.resourceOfInterestChange.emit(res);
}
addImagesToPageTree() {
for (let i = 0; i < this.pageNavTree.length; i++) {
this.getThumb(this.pageNavTree[i].tlnEntity.iri, i);
}
}
getThumb(pageIri: string, index) {
this.nietzscheSourceService.getPageData(pageIri).subscribe(data => {
this.nietzscheSourceService.getImageFromUrl(data.result.metadata.download_version.thumb).subscribe(img => {
const reader = new FileReader();
reader.addEventListener('load', () => {
this.pageNavTree[index].img = reader.result;
}, false);
if (img) { reader.readAsDataURL(img); }
this.pageNavTreeChange.emit(this.pageNavTree);
});
});
}
addPageData(pageIri: string) {
this.nietzscheSourceService.getPageData(pageIri).subscribe(data => {
const url = this.svgService.getSvgUrl(data.result.metadata.related_resource_identifier);
+ // TODO: Ŝetting the selected page only only onSelectItem?
this.selectedPage.svg = new Svg(data.result.metadata.related_resource_identifier, url);
this.selectedPageChange.emit(this.selectedPage);
});
}
// sets queryParams: to the queryParam object
setQueryParam(type: string, value: string) {
this.queryParams[type] = value;
// this.queryParamsChange.emit(this.queryParams);
}
ngOnDestroy() {
// unsubscribe to subscriptions if component change so there is no memory leak
this.queryParamSubscription.unsubscribe();
}
}