diff --git a/nietzsche-beta-app/src/app/app.component.ts b/nietzsche-beta-app/src/app/app.component.ts index c1e9b38..e29ef17 100644 --- a/nietzsche-beta-app/src/app/app.component.ts +++ b/nietzsche-beta-app/src/app/app.component.ts @@ -1,33 +1,32 @@ import {Component, OnInit} from '@angular/core'; import { OverlayContainer} from '@angular/cdk/overlay'; -import {TlnQueryParams} from './models/models'; import {Subscription} from 'rxjs'; import {ActivatedRoute, Params} from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'nietzsche app'; theme = 'standard-theme'; fullScreen: string; queryParamSub: Subscription; constructor(private overlayContainer: OverlayContainer, private activatedRoute: ActivatedRoute) { } ngOnInit() { this.overlayContainer.getContainerElement().classList.add(this.theme); this.queryParamSub = this.activatedRoute.queryParams.subscribe( (queryParams: Params ) => { this.fullScreen = queryParams.fullscreen; }); } onThemeChange() { this.overlayContainer.getContainerElement().classList.add(this.theme); } } diff --git a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.html b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.html index d5121fe..ac7bcd0 100644 --- a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.html +++ b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.html @@ -1,22 +1,22 @@ - - + +
diff --git a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.scss b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.scss index 9d1ca6f..7b482f1 100644 --- a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.scss +++ b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.scss @@ -1,13 +1,22 @@ // the navigation drawer on the very left containing the items to choose from +.mat-drawer-container { + width: 100%; +} + .mat-drawer { overflow: hidden; padding: 10px; + margin-right: 10px; height: 100vh; min-height: 100vh; } -mat-drawer-content { +.mat-card { + width: 100%; +} + +.mat-drawer-content { + width: 100%; height: 100vh; - display: flex; overflow: hidden; } diff --git a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts index 30de933..5ed9cac 100644 --- a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts +++ b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts @@ -1,83 +1,86 @@ -import {Component, OnInit} from '@angular/core'; +import {AfterViewInit, Component, OnInit} from '@angular/core'; import {ActivatedRoute, Params, Router} from '@angular/router'; import {Subscription} from "rxjs/index"; import {NavigationServiceService} from "../services/navigation-service.service"; import { TLN_CROSSREF_ROUTE, TLN_MANUSCRIPT_ROUTE, TLN_VIEWER_ROUTE } from '../tln-edition/constants'; @Component({ selector: 'app-content-view-tab-component', templateUrl: './content-view-tab-component.component.html', styleUrls: ['./content-view-tab-component.component.scss'], providers: [ NavigationServiceService ] }) -export class ContentViewTabComponentComponent implements OnInit { +export class ContentViewTabComponentComponent implements OnInit, AfterViewInit { // navigation tabs for the content view (manuscript view, page view, rhizome view) navTabLinks: any[]; // navbar on th left for navigating - navBarOpenState: boolean; - fullscreen: boolean = false; + navBarOpenState = false; + fullscreen = false; navBarOpenMode: string; queryParams: Params = {}; queryParamSubscription: Subscription; constructor(private router: Router, private activatedRoute: ActivatedRoute, private naviService: NavigationServiceService) { + + // The links/tabs for routing the correct view-component this.navTabLinks = [ { label: 'Manuskriptansicht', link: TLN_MANUSCRIPT_ROUTE, index: 0 }, { label: 'Seitenansicht', link: TLN_VIEWER_ROUTE, index: 1 }, { label: 'Querverweise', link: TLN_CROSSREF_ROUTE, index: 2 }, ]; } ngOnInit() { - // this.mesurePerformance(); - this.setParamsOnInit(); - // The links/tabs for routing the correct view-component - - - this.navBarOpenMode = 'push'; // side || over || push + // this.mesurePerformance(); + this.navBarOpenMode = 'side'; // side || over || push + // this.setParamsOnInit(); // If url pasted or page refreshed --> resetting this.queryparams to the query params of the url; // needed for active routing in the nav tabs & for general use in the template this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryParams: Params ) => { + console.log('new qParams in contentview', queryParams); this.queryParams = queryParams; this.navBarOpenState = JSON.parse(queryParams.navBarOpenState.toLowerCase()); - console.log('new navBaropenstate in content-view ', this.navBarOpenState); this.fullscreen = JSON.parse(queryParams.fullscreen.toLowerCase()); }); } + ngAfterViewInit() { + this.navBarOpenState = JSON.parse(this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState')); + } + mesurePerformance() { const perfData = window.performance.timing; const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart; console.log('content load performance is: ', pageLoadTime); } setParamsOnInit() { const qParams: Params = {}; // Set the NavBarOpenstate to true if it is not defined explicitely as false in the url query param onInit. if (this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState') !== 'false') { - console.log('setQParamsOnInit', this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState')) - this.navBarOpenState = true; - qParams.navBarOpenState = 'true'; } + // console.log('setQParamsOnInit', this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState')) + this.navBarOpenState = true; + qParams.navBarOpenState = 'true'; } // viewMode if (!this.activatedRoute.snapshot.queryParamMap.get('viewMode')) { qParams.viewMode = 'Transkription/Faksimile'; } this.naviService.updateRoute(qParams); } } diff --git a/nietzsche-beta-app/src/app/models/models.ts b/nietzsche-beta-app/src/app/models/models.ts index 2a120f4..e3aa3a1 100644 --- a/nietzsche-beta-app/src/app/models/models.ts +++ b/nietzsche-beta-app/src/app/models/models.ts @@ -1,104 +1,117 @@ // class for Everything: extended by NavigationEntity, Manuscript, Page, Word with all common properties import {SafeUrl} from '@angular/platform-browser'; export class TlnEntity { id: string; // Short id, iri in most cases iri: string; // iri type: string; // rdfs:type navContext: string; label?: string; + description?: string; - constructor(id: string, iri: string, type: string, navContext: string, label?: string) { + constructor(id: string, iri: string, type: string, navContext: string, label?: string, description?: string) { this.id = id; this.iri = iri; this.type = type; this.navContext = navContext; this.label = label; + this.description = description; } } export class TlnQueryParams { navBarOpenState: boolean; navContext: string; manuscript: string; page: string; selectedLines: string; selectedWords: string; viewMode: string; // ' fullscreen: boolean; zoom: number; constructor(navBarOpenState: boolean, navContext: string, manuscript: string, page: string, selectedLines: string, selectedWords: string, viewMode: string, fullscreen: boolean, zoom: number ) { this.navBarOpenState = navBarOpenState; //proposed solution: JSON.parse(navBarOpenState) this.navContext = navContext; // proposed solution: Number(navTabIndex) this.manuscript = manuscript; this.page = page; this.selectedLines = selectedLines; this.selectedWords = selectedWords; this.viewMode = viewMode; this.fullscreen = fullscreen; // proposed solution: JSON.parse(fullscreen) this.zoom = zoom; // proposed solution: Number(zoom) // console.log('TlnQueryParams.fullscreen typeof:', typeof this.fullscreen, 'TlnQueryParams.zoom typeof:', typeof this.zoom); } } // The navigation entries in each tree for each viewtab (TlnManuscript, TlnPage, PositionalEntity) used by navigation // export class NavigationEntity { idx: number; tlnEntity: TlnEntity; thumb?: SafeUrl; // url of image (Thumbnail) img?: SafeUrl; // full image url svg?: SafeUrl; // svg url + avatar?: SafeUrl; // img for avatar - constructor(idx: number, tlnEntity: TlnEntity, thumb?: string, img?, svg?: SafeUrl) { + constructor(idx: number, tlnEntity: TlnEntity, thumb?: string, img?, svg?: SafeUrl, avatar?: SafeUrl) { this.idx = idx; this.tlnEntity = tlnEntity; this.thumb = thumb; this.img = img; this.svg = svg; + this.avatar = avatar; } } export interface NavTreeDef { id: string; // name of the tree, also set as queryParam idx: number; // order label: string; itemQParam: string; entries: NavigationEntity[]; description?: string; apiDef?: ApiDef; isActive?: boolean; } export class ApiDef { type: number; // 0 === sparql 1.1., 1 === nietzscheSource API, 2 === existDB baseUrl: string; dataArray: string; query?: string; mapping?: TlnEntityMapping; // positive Filter ids: only these id's should be loaded into manuscript nav tree constructor( type: number, baseUrl: string, dataArray: string, query?: string, mapping?: TlnEntityMapping) { this.type = type; this.baseUrl = baseUrl; this.dataArray = dataArray; this.query = query; this.mapping = mapping; } } export class TlnEntityMapping { // Is used for mapping the response from any given apiDef/response to a TlnEntity Instance id: string; // Short id, iri in most cases iri?: string; // iri idx?: string; type?: string; // rdfs:type label?: string; - img?: string; + description?: string; + avatar?: string; svg?: string; thumb?: string; - constructor(id: string, iri?: string, idx?: string, type?: string, label?: string, img?: string, svg?: string, thumb?: string) { - this.id = id; this.iri = iri; this.idx = idx; this.type = type; this.label = label; this.img = img; this.svg = svg, this.thumb = thumb; + constructor(id: string, iri?: string, idx?: string, type?: string, label?: string, description?: string, avatar?: string, svg?: string, thumb?: string) { + this.id = id; + this.iri = iri; + this.idx = idx; + this.type = type; + this.label = label; + this.description = description; + this.avatar = avatar; + this.svg = svg; + this.thumb = thumb; } } diff --git a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.html b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.html index 81ad015..e640631 100644 --- a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.html +++ b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.html @@ -1,33 +1,35 @@ Navigation - diff --git a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.scss b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.scss index d60b022..1c6d004 100644 --- a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.scss +++ b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.scss @@ -1,30 +1,39 @@ .fixed-nav-header { position: sticky; } .navlist-container { overflow-x: hidden; } #navlist { scroll-behavior: smooth; } -.mat-divider { - padding: 2px; -} - -.active-item { - background-color: #dadada !important; +.mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content { + padding: 0 !important; } .mat-nav-list .mat-list-item { - // flex: none; + width: 100%; min-height: 72px; height: 100%; /* default is 72px */ + padding: 0 !important;; + margin: 0 !important; } .thumbnail { max-width: 100px; max-height: 100px; } + +.card-item { + width: 100%; + min-width: 100%; + margin-top: 5px; + background-color: rgba(255, 255, 255, 0) !important; +} + +.active-item { + background: linear-gradient(to right, rgba(255, 255, 255, 0) , #dadada); +} diff --git a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.ts b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.ts index c342e71..335e5c2 100644 --- a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.ts +++ b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.ts @@ -1,268 +1,271 @@ import {Component, ElementRef, EventEmitter, OnInit, ViewChildren} from '@angular/core'; import {NavigationServiceService} from '../services/navigation-service.service'; import {NavigationEntity, NavTreeDef, TlnQueryParams} from '../models/models'; import {Subscription} from 'rxjs/index'; import {ActivatedRoute, Params, Router} from '@angular/router'; import {QueryService} from '../services/query.service'; import {NavTree} from './navtree-directive.directive'; import * as _ from 'lodash'; @Component({ selector: 'app-navigation-list-component', templateUrl: './navigation-list-component.component.html', styleUrls: ['./navigation-list-component.component.scss'] }) /** * NavigationListComponent * Does sinply consume data coming from naviservice && activated route. triggers click event to service. */ export class NavigationListComponentComponent implements OnInit { navigationTreeDefs: NavTreeDef[]; navTrees: NavTree[]; // The actual Navtrees which are displayed oldQueryParams: Params; + queryParams: Params; queryParamSubscription: Subscription; navTabIndex: number; constructor( public naviService: NavigationServiceService, private router: Router, private activatedRoute: ActivatedRoute, private queryService: QueryService) { this.navigationTreeDefs = [ { id: 'manuscript', idx: 0, isActive: true, label: 'Manuskripte', itemQParam: 'manuscript', - description: '', entries: [], apiDef: { type: 0, // rdf baseUrl: 'https://nietzsche.fuseki.services.dasch.swiss/nietzsche',//'http://fuseki.nie-ine.ch/nietzsche-rw/query', dataArray: 'results.bindings', query: 'manuscripts.rq', mapping: { // maps the properties of the reponse to tha NavTabDef properties, which are displayed id: 'manuscript.value', // Short id, iri in most cases iri: 'manuscript.value', // iri type: 'type.value', label: 'title.value', + description: 'gsaSignature.value', + avatar: 'thumbImage.value' } } }, { id: 'page', idx: 1, isActive: false, label: 'Seiten', itemQParam: 'page', - description: '', entries: [], apiDef: { type: 0, // rdf baseUrl: 'https://nietzsche.fuseki.services.dasch.swiss/nietzsche',//'http://fuseki.nie-ine.ch/nietzsche-rw/query', dataArray: 'results.bindings', query: 'getPageData.rq', mapping: { id: 'page.value', // Short id, iri in most cases iri: 'page.value', // iri label: 'pageNumber.value', thumb: 'thumb.value', idx: 'pageNumber.value', svg: 'svgFileName.value', } } } ]; // If url pasted or page refreshed --> resetting this.queryparams to the query params of the url; // needed for the template hence service instances can not be accessed in the template this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryParams: Params ) => { const navTabIndex = this.getActiveNavTabIndex(queryParams.navContext); - this.reactOnContextChange(queryParams.navContext, navTabIndex ); - this.reactOnItemChange('page', queryParams.page, navTabIndex); - this.reactOnItemChange('manuscript', queryParams.manuscript, navTabIndex); - + if (this.oldQueryParams) { // only if there are any oldParams + this.reactOnContextChange(queryParams.navContext, this.oldQueryParams.navContext, navTabIndex ); + this.reactOnItemChange('page', queryParams.page, this.oldQueryParams.page); + this.reactOnItemChange('manuscript', queryParams.manuscript, this.oldQueryParams.manuscript); + } this.oldQueryParams = queryParams; }); } async ngOnInit() { await this.createTreesOnInit(); this.navTabIndex = await this.getActiveNavTabIndex(); await this.populateNavTrees(); // set selected things in url this.navTrees.forEach(tree => { - tree.selectedItemSet.subscribe(item => { - this.setSelectedItemAndRoute(item.itemId, item.tabId); + // if there is no selected item for each tree, we have to listen to the selectedItemSet/tree population and set them per default + if (!this.activatedRoute.snapshot.queryParamMap.get(tree.qParam)) { + tree.selectedItemSet.subscribe(item => { + this.setSelectedItemAndRoute(item.itemId, item.tabId, 'this.ngOnInit()'); }); + } }); // change navTree according to chosen route per default // set NavContext if unset according to selected component: manuscriptView, tln-page view - if (this.activatedRoute.snapshot.firstChild.url[0].path === 'tln-viewer' && !this.activatedRoute.snapshot.queryParamMap.get('navContext')) { + if (this.activatedRoute.snapshot.firstChild.url[0].path === 'tln-viewer' + && !this.activatedRoute.snapshot.queryParamMap.get('navContext')) { this.naviService.updateRoute({navContext: 'page'}); } } - reactOnItemChange(param: string, itemId: string, activeTab) { - if (itemId && itemId !== '') { - if (this.oldQueryParams && itemId !== this.oldQueryParams[param]) { + reactOnItemChange(param: string, itemId: string, oldItemId) { + if (itemId && itemId !== '' && oldItemId) { + if (itemId !== oldItemId) { const tab = this.navTrees.findIndex(tree => tree.id === param); this.setSelectedItem(itemId, tab); if (tab === this.navTabIndex) { window.setTimeout(() => this.scrollOnToSelectedItem(itemId), 100); } } } } - reactOnContextChange(context: string, activeTab: number) { - if (context && context !== '') { - if (this.oldQueryParams && context !== this.oldQueryParams.navContext) { + reactOnContextChange(context: string, oldContext: string, activeTab: number) { + if (context !== oldContext) { this.navTabIndex = activeTab; // must time out here hence document is not ready to scroll window.setTimeout(() => this.scrollOnToSelectedItem(this.oldQueryParams[context]), 100); } - } } scrollOnToSelectedItem(itemId: string ) { const itemToScrollTo = document.getElementById(itemId); const topPos = itemToScrollTo.offsetTop; if (topPos) { if (document.getElementById('navlist')) { document.getElementById('navlist').scrollTop = topPos; } } } /** * getActiveNavTabIndexOnInit * gets the active navTabIndex either from a passed navConText, from active qParam or or from definition */ getActiveNavTabIndex(con?: string) { let navConText; if (!con || con === '') { navConText = this.activatedRoute.snapshot.queryParamMap.get('navContext'); } else { navConText = con; } let navTabIndex = 0; if (navConText && navConText !== '') { const nIndex = this.navigationTreeDefs.findIndex(tree => tree.id === navConText); navTabIndex = this.navigationTreeDefs[nIndex].idx; } else { navTabIndex = 0; } return navTabIndex; } createTreesOnInit() { this.navTrees = []; this.navigationTreeDefs.forEach( def => - this.navTrees.push(new NavTree(def.id, def.idx, def.label, [], def.description, def.apiDef))); + this.navTrees.push(new NavTree(def.id, def.idx, def.label, [], def.itemQParam, def.description, def.apiDef))); } async onSelectNavItem(item: NavigationEntity) { // For scrolling to the selected item (manuscript, page) into view const activeTab = this.getActiveNavTabIndex(); - this.emptyChildTrees(activeTab); - this.setSelectedItemAndRoute(item.tlnEntity.id, activeTab); - this.removeAllChildTreeQParams(activeTab); - this.populateChildren(activeTab, item.tlnEntity.id); + if (this.navTrees[activeTab].selectedItem !== item.tlnEntity.id) { + // only get new data for subTrees and set new params if the clicked item is not already the selected item + this.emptyChildTrees(activeTab); + this.setSelectedItemAndRoute(item.tlnEntity.id, activeTab, 'RRRRRRRRRRRRRRRRR onSelectNavItem'); + this.removeAllChildTreeQParams(activeTab); + this.populateChildren(activeTab, item.tlnEntity.id); + } this.changeNavTreeAndRoute(activeTab + 1); window.setTimeout(() => this.scrollOnToSelectedItem(item.tlnEntity.id), 100); } removeAllChildTreeQParams(tabId) { this.navigationTreeDefs.forEach(tree => { if (tree.id > tabId) { - const qParam = this.navigationTreeDefs[tree.id].itemQParam; + const qParam = this.navigationTreeDefs[tabId].itemQParam; this.naviService.updateRoute({[qParam]: null}); } }); } emptyChildTrees(parentIdx) { this.navTrees.forEach(tree => { if (tree.idx > parentIdx) { tree.entries = []; } }); } setSelectedItem(navItemId: string, tabId: number) { this.navTrees[tabId].selectedItem = navItemId; } - setSelectedItemAndRoute(navItemId: string, tabId: number) { + setSelectedItemAndRoute(navItemId: string, tabId: number, me?: string) { this.navTrees[tabId].selectedItem = navItemId; const idx = this.navigationTreeDefs.findIndex(tree => tree.idx === tabId); // set new qParam const newParams = {}; const qParam = this.navigationTreeDefs[idx].itemQParam; newParams[qParam] = navItemId; // null all childrens qParams, e-g. if another manuscript is selected, the selectedPage must be nulled this.navigationTreeDefs.forEach(def => { if (def.idx > idx) { newParams[def.itemQParam] = null; } }); this.naviService.updateRoute(newParams); } populateChildren(activeTab, itemId?: string) { if (activeTab + 1 < this.navigationTreeDefs.length) { // if an item in a tab with sub tabs is selected, the subtree should be loaded according to that selection and the tab should change this.populateNavTrees(activeTab + 1, itemId ); } } // switches tabs in navtab ov navigation bar changeNavTreeAndRoute(idx: number) { if (idx < this.navTrees.length) { this.naviService.updateRoute({navContext: this.navigationTreeDefs[idx].id}); } } /** * populateNavTrees creates the first trees if no query params are available in the url: * It ceates the manuscripNavTree and the activePageNavTreeData of the first manuscript per default. * */ async populateNavTrees(tabIdx?: number, itemId?: string) { const tabStartIndex = tabIdx || 0; // where to start refreshing navtrees - for ( const treeDef of this.navigationTreeDefs.sort(def => (def.idx ))) { if (treeDef.idx >= tabStartIndex) { // only create trees if needed this.queryService.getQueryfromFilename(treeDef.apiDef.query).subscribe(async query => { let queryToRun: string; // If there is a selectedItem we have to parametrize the query if (treeDef.idx > 0) { // so we have to parametrize the query if (itemId) { queryToRun = this.queryService.parametrizeQueryWithItem(query, itemId); this.populateNavTree(treeDef, queryToRun); } else { // wait for selected item of the previous tab and parametrize then the query this.navTrees[treeDef.idx - 1].selectedItemSet.subscribe(item => { if (item.tabId === treeDef.idx - 1) { queryToRun = this.queryService.parametrizeQueryWithItem(query, item.itemId); this.populateNavTree(treeDef, queryToRun); } }); } } else { this.populateNavTree(treeDef, query); } }); } } } populateNavTree(def: NavTreeDef, query) { const idx = this.navTrees.findIndex(item => item.id === def.id); let parentLabel; - if (idx > 0) { parentLabel = this.navTrees[idx - 1].selectedItemLabel; }// this.activatedRoute.snapshot.queryParamMap.get(this.navTrees[idx - 1].); } + if (idx > 0) { parentLabel = this.navTrees[idx - 1].selectedItemLabel; } if (idx !== -1) { this.queryService.getData(def.apiDef.baseUrl, query, 'SELECT').subscribe(data => { - this.navTrees[idx].setNavTreeData(_.get(data, def.apiDef.dataArray), def.itemQParam, this.activatedRoute.snapshot.queryParams, parentLabel); }); + this.navTrees[idx].setNavTreeData(_.get(data, def.apiDef.dataArray), + this.activatedRoute.snapshot.queryParams, parentLabel); }); } } - toggleNavDrawer() { - console.log('closing'); - this.naviService.updateRoute({navBarOpenState: 'false'}); - } } diff --git a/nietzsche-beta-app/src/app/navigation-list-component/navtree-directive.directive.ts b/nietzsche-beta-app/src/app/navigation-list-component/navtree-directive.directive.ts index 0c46282..849ddd9 100644 --- a/nietzsche-beta-app/src/app/navigation-list-component/navtree-directive.directive.ts +++ b/nietzsche-beta-app/src/app/navigation-list-component/navtree-directive.directive.ts @@ -1,77 +1,81 @@ import {Directive, EventEmitter} from '@angular/core'; import {Params} from '@angular/router'; import {ApiDef, NavigationEntity, TlnEntity} from '../models/models'; import * as _ from 'lodash'; @Directive({ selector: '[appNavtreeDirective]' }) export class NavTree { id: string; idx: number; label: string; entries: NavigationEntity[]; + qParam: string; description?: string; apiDef?: ApiDef; selectedItem?: string; selectedItemLabel?: string; parentLabel?: string; selectedItemSet: EventEmitter constructor(id: string, idx: number, label: string, entries: NavigationEntity[], + qParam: string, description?: string, apiDef?: ApiDef, selectedItem?: string, selectedItemLabel?: string, parentLabel?: string) { this.id = id; this.idx = idx; this.label = label; + this.qParam = qParam; this.entries = entries || []; this.description = description; this.apiDef = apiDef; this.selectedItem = selectedItem; this.selectedItemLabel = selectedItemLabel; this.selectedItemSet = new EventEmitter(); this.parentLabel = parentLabel; } - setNavTreeData(data: any, qParam: string, queryParams: Params, parentLabel?: string) { + setNavTreeData(data: any, queryParams: Params, parentLabel?: string) { this.parentLabel = parentLabel; this.selectedItemLabel = _.get(data[0], this.apiDef.mapping.label); - if (queryParams[qParam] && queryParams[qParam] !== '') { - this.setSelected(queryParams[qParam]); } else { + if (queryParams[this.qParam] && queryParams[this.qParam] !== '') { + this.setSelected(queryParams[this.qParam]); } else { this.setSelected(_.get(data[0], this.apiDef.mapping.id)); } this.entries = []; // resetting tree data of the given tab data.forEach((entry, index) => { // (id: string, iri: string, type: string, navIndex: number, label?: string) const entity = new TlnEntity(_.get(entry, this.apiDef.mapping.id), _.get(entry, this.apiDef.mapping.iri), _.get(entry, this.apiDef.mapping.type) || - null, index , _.get(entry, this.apiDef.mapping.label) || ''); + null, index , _.get(entry, this.apiDef.mapping.label) || '', _.get(entry, this.apiDef.mapping.description || '')); const thumb = _.get(entry, this.apiDef.mapping.thumb); let svg; if (_.get(entry, this.apiDef.mapping.svg)) { svg = 'http://existdb-test.dasch.swiss/exist/rest/db/storage/nietzsche/' + _.get(entry, this.apiDef.mapping.svg); } - const navEntity = new NavigationEntity(index, entity, thumb, '', svg); + const avatar = _.get(entry, this.apiDef.mapping.avatar); + const navEntity = new NavigationEntity(index, entity, thumb, '', svg, avatar); this.entries.push(navEntity); }); } setSelected(itemId: string) { this.selectedItem = itemId; this.selectedItemSet.emit({tabId: this.idx, itemId}); } } export interface SelectedItem { tabId: number; itemId: string; } diff --git a/nietzsche-beta-app/src/assets/queries/manuscripts.rq b/nietzsche-beta-app/src/assets/queries/manuscripts.rq index 07305a1..bda74ff 100644 --- a/nietzsche-beta-app/src/assets/queries/manuscripts.rq +++ b/nietzsche-beta-app/src/assets/queries/manuscripts.rq @@ -1,7 +1,10 @@ PREFIX data: PREFIX tln: -SELECT ?manuscript ?title WHERE { +PREFIX rdf: +SELECT ?manuscript ?title ?thumbImage ?gsaSignature WHERE { ?manuscript a tln:ManuscriptUnity; tln:hasTitle ?title; - tln:hasManuscriptType "Mappe". + tln:hasManuscriptType "Mappe"; + tln:hasPages/rdf:first/tln:hasFaksimileImage/tln:hasThumburl ?thumbImage ; + tln:hasGsaSignature ?gsaSignature . }