diff --git a/nietzsche-beta-app/src/app/tln-edition/constants.ts b/nietzsche-beta-app/src/app/tln-edition/constants.ts index 75d02b6..00c002b 100644 --- a/nietzsche-beta-app/src/app/tln-edition/constants.ts +++ b/nietzsche-beta-app/src/app/tln-edition/constants.ts @@ -1,70 +1,74 @@ export {HIGHTLIGHT_CASES} from '../page-view/highlight_status'; export enum VIEW_OPTIONS { TRANSKRIPTION = 'Transkription', FAKSIMILE = 'Faksimile', SYNOPSIS = 'Transkription/Faksimile', SYNOPSIS_B = 'Faksimile/Transkription' } export const DEFAULT_VIEW_OPTION: string = VIEW_OPTIONS.SYNOPSIS_B; export const ONTOLOTY_PREFIX: string = 'http://www.nie.org/ontology/nietzsche#' /** * Route for TlnCrossrefComponent **/ export const TLN_CROSSREF_ROUTE: string = 'tln-crossref'; /** * Route for TlnFulltextComponent **/ export const TLN_SEARCH_ROUTE: string = 'tln-search'; /** * Route for TlnManuscriptViewComponent **/ export const TLN_MANUSCRIPT_ROUTE: string = 'tln-manuscript'; /** * Route for TlnViewerComponent **/ export const TLN_VIEWER_ROUTE: string = 'tln-viewer'; /** * Param that refers to the context that should be shown, i.e. 'page' or 'manuscript'. **/ export const TLN_CONTEXT_VIEW_PARAM: string = 'contextView'; /** * Param that toggles fullscreen, value type: boolean. **/ export const TLN_FULLSCREEN_PARAM: string = 'fullscreen'; /** * Param for find text in page. **/ export const TLN_FIND_PARAM: string = 'find'; -/** - * Param for page iri. - **/ -export const TLN_PAGE_PARAM: string = 'page'; /** * Param for manuscript iri. **/ export const TLN_MANUSCRIPT_PARAM: string = 'manuscript'; /** * Param for navigation bar open state. **/ export const TLN_NAV_BAR_OPEN_STATE_PARAM: string = 'navBarOpenState'; +/** + * Param for page iri. + **/ +export const TLN_PAGE_PARAM: string = 'page'; +/** + * Param for result index, type: number. + **/ +export const TLN_RESULT_INDEX_PARAM: string = 'resutlIndex'; /** * Param for selected lines. **/ export const TLN_SELECTED_LINES_PARAM: string = 'selectedLines'; /** * Param for selected lines. **/ export const TLN_SELECTED_WORDS_PARAM: string = 'selectedWords'; /** * Param for iri of a genetic order of text versions. **/ export const TLN_TEXT_GENETIC_ORDER_PARAM: string = 'geneticOrder'; /** * Param for selected view option, e.g. 'Transkription', 'Faksimile', etc. **/ export const TLN_VIEW_OPTION_PARAM: string = 'viewMode'; /** * Param for zoom. **/ export const TLN_ZOOM_PARAM: string = 'zoom'; diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-edition.module.ts b/nietzsche-beta-app/src/app/tln-edition/tln-edition.module.ts index 759203f..0bc6cfb 100644 --- a/nietzsche-beta-app/src/app/tln-edition/tln-edition.module.ts +++ b/nietzsche-beta-app/src/app/tln-edition/tln-edition.module.ts @@ -1,83 +1,84 @@ import { BrowserModule } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from "@angular/common/http"; import { NgModule } from '@angular/core'; import { MatProgressSpinnerModule,MatBottomSheetModule,MatButtonModule,MatCheckboxModule,MatDialogModule,MatExpansionModule,MatFormFieldModule,MatInputModule,MatListModule,MatPaginatorModule,MatRadioModule,MatSelectModule,MatSidenavModule,MatSortModule,MatTableModule,MatToolbarModule,MatButtonToggleModule,MatCardModule,MatIconModule,MatMenuModule,MatTabsModule,MatTooltipModule } from '@angular/material'; import { NgxMatStandoffMarkupModule } from '../lib/ngx-mat-standoff-markup.module'; import { PageViewService } from '../page-view/page-view.service'; import { PageViewModule } from '../page-view/page-view.module'; import { TlnPageViewComponent } from './tln-page-view.component'; import { TlnQueryService } from './tln-query.service'; import { ToolTipComponent } from './tooltip/tool-tip.component'; import { TlnViewerNavigation } from './tln-viewer-navigation/tln-viewer-navigation.component'; import { TlnInformationComponent } from './tln-information/tln-information.component'; import { TlnCrossrefComponent } from './tln-crossref/tln-crossref.component'; import { VersionViewComponent } from './tln-crossref/version-view/version-view.component'; import { PageVersionViewComponent } from './tln-crossref/page-version-view/page-version-view.component'; import { NavigationComponent } from './tln-crossref/navigation/navigation.component'; import { FilterPipe } from './tln-crossref/page-version-view/filter.pipe'; import { TlnPageVersionViewComponent } from './tln-crossref/page-version-view/tln-page-version-view.component'; import { TlnManuscriptViewComponent } from './tln-manuscript-view/tln-manuscript-view.component'; import { TlnFulltextComponent } from './tln-fulltext/tln-fulltext.component'; import { FulltextNavigationComponent } from './tln-fulltext/navigation/navigation.component'; import { ResultPipePipe } from './tln-fulltext/result-pipe.pipe'; import { SearchComponent } from './tln-navigation-elements/search.component'; import { ToggleNavigationComponent } from './tln-navigation-elements/toggle-navigation.component'; import { ZoomComponent } from './tln-navigation-elements/zoom.component'; import { ZoomPipe } from './tln-navigation-elements/zoom.pipe'; import { OpenInViewerComponent } from './tln-navigation-elements/open-in-viewer.component'; import { DebugPipe } from './debug.pipe'; import { TlnHeightDirective } from './tln-height.directive'; +import { PageResultFilterPipe } from './tln-fulltext/page-result-filter.pipe'; @NgModule({ - declarations: [FulltextNavigationComponent, TlnPageViewComponent, ToolTipComponent, TlnViewerNavigation, TlnInformationComponent, TlnCrossrefComponent, VersionViewComponent, PageVersionViewComponent, NavigationComponent, FilterPipe, TlnPageVersionViewComponent, TlnManuscriptViewComponent, TlnFulltextComponent, ResultPipePipe, SearchComponent, ToggleNavigationComponent, ZoomComponent, ZoomPipe, OpenInViewerComponent, DebugPipe, TlnHeightDirective], + declarations: [FulltextNavigationComponent, TlnPageViewComponent, ToolTipComponent, TlnViewerNavigation, TlnInformationComponent, TlnCrossrefComponent, VersionViewComponent, PageVersionViewComponent, NavigationComponent, FilterPipe, TlnPageVersionViewComponent, TlnManuscriptViewComponent, TlnFulltextComponent, ResultPipePipe, SearchComponent, ToggleNavigationComponent, ZoomComponent, ZoomPipe, OpenInViewerComponent, DebugPipe, TlnHeightDirective, PageResultFilterPipe], imports: [ MatBottomSheetModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressSpinnerModule, MatPaginatorModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, BrowserModule, CommonModule, FormsModule, NgxMatStandoffMarkupModule, PageViewModule ], exports: [ DebugPipe, FulltextNavigationComponent, NavigationComponent, ToolTipComponent, TlnCrossrefComponent, TlnHeightDirective, TlnManuscriptViewComponent, TlnPageViewComponent, TlnViewerNavigation ], providers: [ PageViewService, TlnQueryService ], entryComponents: [TlnInformationComponent] }) export class TlnEditionModule { } diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/page-result-filter.pipe.spec.ts b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/page-result-filter.pipe.spec.ts new file mode 100644 index 0000000..05e195d --- /dev/null +++ b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/page-result-filter.pipe.spec.ts @@ -0,0 +1,8 @@ +import { PageResultFilterPipe } from './page-result-filter.pipe'; + +describe('PageResultFilterPipe', () => { + it('create an instance', () => { + const pipe = new PageResultFilterPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/page-result-filter.pipe.ts b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/page-result-filter.pipe.ts new file mode 100644 index 0000000..f850bc7 --- /dev/null +++ b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/page-result-filter.pipe.ts @@ -0,0 +1,21 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { FoundPage} from '../datatypes/search'; + +export interface ResultRange { + start: number; + end: number; +} + +@Pipe({ + name: 'pageResultFilter' +}) +export class PageResultFilterPipe implements PipeTransform { + + transform(results: FoundPage[], range: ResultRange): FoundPage[] { + if (results.length <= range.start){ + return results; + } + return results.slice(range.start, range.end); + } + +} diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.html b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.html index 0970987..9907834 100644 --- a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.html +++ b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.html @@ -1,44 +1,56 @@
-
+
{{page.title}}, {{page.number}}
+ +
diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.ts b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.ts index b544caf..2776e04 100644 --- a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.ts +++ b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.ts @@ -1,84 +1,110 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { Router, ActivatedRoute, Params } from '@angular/router'; +import {PageEvent} from '@angular/material/paginator'; import { TLN_CROSSREF_ROUTE, TLN_SEARCH_ROUTE, TLN_MANUSCRIPT_ROUTE, TLN_VIEWER_ROUTE, TLN_CONTEXT_VIEW_PARAM, TLN_FULLSCREEN_PARAM, TLN_FIND_PARAM, TLN_PAGE_PARAM, TLN_MANUSCRIPT_PARAM, -TLN_SELECTED_LINES_PARAM, TLN_TEXT_GENETIC_ORDER_PARAM, TLN_VIEW_OPTION_PARAM, TLN_ZOOM_PARAM, VIEW_OPTIONS, ONTOLOTY_PREFIX } from '../constants'; + TLN_RESULT_INDEX_PARAM,TLN_SELECTED_LINES_PARAM, TLN_TEXT_GENETIC_ORDER_PARAM, TLN_VIEW_OPTION_PARAM, TLN_ZOOM_PARAM, VIEW_OPTIONS, ONTOLOTY_PREFIX } from '../constants'; import { DataHandler } from '../data_handler'; import { FoundPage} from '../datatypes/search'; import { Mapping } from '../route-reader'; import { RouteUpdater } from '../route-updater'; import { TlnQueryService } from '../services'; +import { ResultRange } from './page-result-filter.pipe'; +//TODO: german language support for paginator, see: https://github.com/ngx-translate/core @Component({ selector: 'tln-fulltext', templateUrl: './tln-fulltext.component.html', styleUrls: ['./tln-fulltext.component.css'] }) export class TlnFulltextComponent extends RouteUpdater implements OnInit { protected currentRoute: string = TLN_SEARCH_ROUTE; current_page_iri: string; current_manuscript_unity: string; dataHandler: DataHandler = new DataHandler(this); fullscreen: boolean; max_width: number = -1; max_height: number = -1; searchTerm: string; + resultIndex: number = 0; + resultLength: number = 5; + resultRange: ResultRange = { start: 0, end: 4 }; resultsReceived: boolean = false; selectedViewOption: string = VIEW_OPTIONS.TRANSKRIPTION startSearch: boolean = false; protected mapping: Mapping = { current_page_iri: { param: TLN_PAGE_PARAM, type: "string" }, + resultIndex: { param: TLN_RESULT_INDEX_PARAM, type: "number" }, searchTerm: { param: TLN_FIND_PARAM, type: "string" }, current_manuscript_unity: { param: TLN_MANUSCRIPT_PARAM, type: "string" }, fullscreen: { param: TLN_FULLSCREEN_PARAM, type: "boolean" }, } pages: FoundPage[] = []; private readonly margin_width: number = 280; private readonly initialPreviewWidth : number = 300; previewWidth: number = this.initialPreviewWidth; constructor(private tlnQueryService: TlnQueryService, protected router: Router, protected activatedRoute: ActivatedRoute ) { super(router, activatedRoute); } ngOnInit() { if (screen.availWidth - this.initialPreviewWidth - this.margin_width > 1000){ this.previewWidth = screen.availWidth - this.initialPreviewWidth - 1000; } this.max_width = screen.availWidth - this.previewWidth - this.margin_width; this.max_height = screen.availHeight - 200; this.dataHandler.addHandler('pages', { 'handler': FoundPage}); this.dataHandler['pages']['service'] = this this.dataHandler.setQueryService(this.tlnQueryService); this.dataHandler.start_processing.subscribe( (started: boolean) =>{ this.resultsReceived = false; this.startSearch = true; }); this.dataHandler.processing_finished.subscribe( (finished: boolean) =>{ this.resultsReceived = true; this.startSearch = false; }); super.ngOnInit(); } private clearFindText() { this.searchTerm = ''; this.pages = []; + this.resultIndex = 0; super.updateParams(); } private search(){ + this.resultIndex = 0; + this.updateResultRange(); super.updateParams(); if (this.searchTerm != undefined && this.searchTerm != null && this.searchTerm != ''){ + this.dataHandler.resetData('pages'); this.dataHandler.getData('pages', this.searchTerm); } } protected readParams(params: Params){ let oldSearchTerm = this.searchTerm; + let oldResultIndex = this.resultIndex; super.readParams(params); if (this.searchTerm != undefined && this.searchTerm != null && this.searchTerm != '' && this.searchTerm != oldSearchTerm){ + this.resultIndex = 0; this.dataHandler.getData('pages', this.searchTerm); + } + if(oldResultIndex != this.resultIndex){ + this.updateResultRange(); } } getSearchTerms(): string[] { return this.searchTerm.split(' '); } + showResults(event: PageEvent){ + this.resultIndex = event.pageIndex; + this.updateResultRange(); + this.updateParams() + } + private updateResultRange(){ + let newStart = this.resultIndex*this.resultLength + let newEnd = newStart+this.resultLength; + this.resultRange = { start: newStart, end: newEnd }; + } }