navigation-service.service.ts
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Wed, Apr 24, 12:24

navigation-service.service.ts
View Options

	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<string>();

	selectedManuscriptChange = new EventEmitter<TlnManuscript>();
	selectedPageChange = new EventEmitter<TlnPage>();
	selectedRowChange = new EventEmitter<TlnRow>();
	selectedWordChange = new EventEmitter<TlnWord>();

	activeTreeData: Array<NavigationEntity>;
	activeTreeDataChange = new EventEmitter<Array<NavigationEntity>>(); // if the active tree data changes

	navTreeIndex: Array<NavTree>;
	navTreeIndexChange = new EventEmitter<Array<NavTree>>(); // Weather only the index changes

	manuscriptNavTree: Array<NavigationEntity> = [];
	manuscriptNavTreeChange = new EventEmitter<Array<NavigationEntity>>(); // internally used
	pageNavTree: Array<NavigationEntity> = [];
	pageNavTreeChange = new EventEmitter<Array<NavigationEntity>>(); // internally used
	wordNavTree: Array<NavigationEntity> = [];

	/**
	* 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 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, 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);
	if (index + 1 === convolutes.length) {
	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, 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);
	if (index + 1 === pages.length) {
	this.pageNavTreeChange.emit(this.pageNavTree);
	this.addImagesToPageTree();
	this.setSelectedPageIfNone();
	}});
	});
	}

	createManuscriptNavTreeFromUrl(params) {
	if (params.man) {
	this.createManuscriptNavTree();
	this.manuscriptNavTreeChange.subscribe(tree => {
	tree.forEach(navEntity => {
	if (navEntity.tlnEntity.id === params.man) {
	this.setSelectedManuscript(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 ) {
	// 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.setSelectedManuscript(item.tlnEntity);
	this.setQueryParam('man', this.selectedManuscript.entity.id );
	// also routing according to the chosen thing
	break;
	}
	case 'page': {
	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.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);
	}
	}

	// gets the thumbnail and updates pageNavTree
	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', () => {
	if ( this.pageNavTree[index] ) {
	this.pageNavTree[index].img = reader.result;
	} else {console.log('noooooo'); }
	}, 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();
	}
	}

navigation-service.service.tsNo OneTemporaryActions

File Metadata

navigation-service.service.tsView Options

Event Timeline

navigation-service.service.ts
No OneTemporary
Actions

navigation-service.service.ts
View Options