Commit 1c08388c authored by Konstantin Schulz's avatar Konstantin Schulz
Browse files

added text display page

parent 73c10f52
# Willkommen beim Frontend-Projekt für das Projekt CALLIDUS!
# Welcome to the frontend part of the project CALLIDUS!
## Installation:
1. Install Node.js (https://nodejs.org/), including NPM.
2. Clone the git repository: `git clone https://scm.cms.hu-berlin.de/callidus/callidus.git`
2. Clone the git repository: `git clone https://scm.cms.hu-berlin.de/callidus/mc-frontend.git`
3. Go to the new directory: `cd callidus`
4. Run `npm install`
5. Run `ionic serve` and enjoy!
5. Run `sudo npm i -g ionic`
6. 1. Run `ionic serve` and enjoy!
2. To run it in the background, use: `ionic serve --no-interactive &`
{
"name": "mcClient",
"app_id": "",
"type": "ionic-angular",
"integrations": {
"cordova": {}
}
},
"app_id": ""
}
......@@ -11,6 +11,8 @@ import {HomePageModule} from "../pages/home/home.module";
import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AuthorDetailPageModule} from "../pages/author-detail/author-detail.module";
import {CorpusDetailPageModule} from "../pages/corpus-detail/corpus-detail.module";
import {ShowTextPageModule} from "../pages/show-text/show-text.module";
// The translate loader needs to know where to load i18n files
// in Ionic's static asset pipeline.
......@@ -18,6 +20,12 @@ export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
class CustomErrorHandler implements ErrorHandler {
handleError(err: any): void {
// do something with the error
}
}
@NgModule({
declarations: [
MCclient
......@@ -34,7 +42,9 @@ export function createTranslateLoader(http: HttpClient) {
deps: [HttpClient]
}
}),
AuthorDetailPageModule
AuthorDetailPageModule,
CorpusDetailPageModule,
ShowTextPageModule
],
bootstrap: [IonicApp],
entryComponents: [
......@@ -43,7 +53,7 @@ export function createTranslateLoader(http: HttpClient) {
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
{provide: ErrorHandler, useClass: IonicErrorHandler}, // CustomErrorHandler
CorpusProvider
]
})
......
......@@ -2,5 +2,13 @@
"AUTHORS": "Autoren",
"AUTHOR_SEARCH": "Autor suchen...",
"AUTHOR_SELECT": "Autor auswählen",
"CORPUS_SELECT": "Korpus auswählen"
"CORPUS_DETAIL_TITLE": "Korpus-Details",
"CORPUS_SELECT": "Korpus auswählen",
"MC_API_CORPORA_URL": "http://141.20.186.246:5000/mc/api/v1.0/corpora",
"MC_API_RAW_TEXT_URL": "http://141.20.186.246:5000/mc/api/v1.0/rawtext",
"PERSEIDS_CTS_API_BASE_URL": "https://cts.perseids.org/api/cts?request=",
"PERSEIDS_CTS_API_GET_CAPABILITIES": "GetCapabilities",
"PERSEIDS_CTS_API_GET_TEXT_PASSAGE": "GetPassage",
"PERSEIDS_CTS_API_GET_VALID_REFF": "GetValidReff",
"PERSEIDS_CTS_API_URN_SNIPPET": "&urn="
}
\ No newline at end of file
import {GetValidReff} from "./getValidReff";
export class CorpusMC {
public author: string;
public cid: number;
public sourceUrn: string;
public source_urn: string;
public title: string;
public uri: string;
public citation_level_1: string;
public citation_level_2: string;
public citation_level_3: string;
public validReff: GetValidReff;
public subCorpora: {[urn: string] : GetValidReff};
constructor(init?:Partial<CorpusMC>) {
Object.assign(this, init);
}
}
export enum CitationLevel {
default = <any>"default"
}
import {RequestMC} from "./requestMC";
import {Reply} from "./reply";
export class GetValidReff {
public request: RequestMC;
public reply: Reply;
public isVisible = false;
constructor(init?:Partial<GetValidReff>) {
Object.assign(this, init);
}
}
export class Reff {
public urn: string[];
constructor(init?:Partial<Reff>) {
Object.assign(this, init);
}
}
import {Reff} from "./reff";
export class Reply {
public reff: Reff;
constructor(init?:Partial<Reply>) {
Object.assign(this, init);
}
}
export class RequestMC {
public requestLevel: string;
public requestName: string;
public requestUrn: string;
constructor(init?:Partial<RequestMC>) {
Object.assign(this, init);
}
}
......@@ -16,7 +16,7 @@
<ion-content padding>
<ion-list>
<ion-item-sliding *ngFor="let corpus of corpusProvider.currentAuthor.corpora">
<button ion-item (click)="showText(corpus)">
<button ion-item (click)="showPossibleReferences(corpus, 1)">
<p>{{corpus.title}}</p>
</button>
</ion-item-sliding>
......
......@@ -2,6 +2,10 @@ import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {CorpusProvider} from "../../providers/corpus/corpus";
import {CorpusMC} from "../../models/corpusMC";
import {TranslateService} from "@ngx-translate/core";
import {HttpClient} from "@angular/common/http";
import {GetValidReff} from "../../models/getValidReff";
import {CorpusDetailPage} from "../corpus-detail/corpus-detail";
/**
* Generated class for the AuthorDetailPage page.
......@@ -18,10 +22,13 @@ import {CorpusMC} from "../../models/corpusMC";
export class AuthorDetailPage {
constructor(public navCtrl: NavController, public navParams: NavParams,
public corpusProvider: CorpusProvider) {
public corpusProvider: CorpusProvider,
public translate: TranslateService,
public http: HttpClient) {
}
showText(corpus: CorpusMC) {
showPossibleReferences(corpus: CorpusMC, level: number) {
this.corpusProvider.currentCorpus = corpus;
this.navCtrl.push(CorpusDetailPage).then();
}
}
<!--
Generated template for the CorpusDetailPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>{{ 'CORPUS_DETAIL_TITLE' | translate }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let urn1 of corpusProvider.currentCorpus.validReff?.reply.reff.urn">
<button ion-button (click)="showFurtherReferencesOrText(urn1, 1)">
{{corpusProvider.currentCorpus.citation_level_1}}
{{urn1.replace(corpusProvider.currentCorpus.source_urn + ":", "")}}
</button>
<div *ngIf="corpusProvider.currentCorpus.subCorpora[urn1] && corpusProvider.currentCorpus.subCorpora[urn1].isVisible">
<ion-list>
<ion-item *ngFor="let urn2 of corpusProvider.currentCorpus.subCorpora[urn1].reply.reff.urn">
<button ion-button (click)="showFurtherReferencesOrText(urn2, 2)">
{{corpusProvider.currentCorpus.citation_level_2}} {{urn2.replace(urn1 + ".", "")}}
</button>
<div *ngIf="corpusProvider.currentCorpus.subCorpora[urn2] && corpusProvider.currentCorpus.subCorpora[urn2].isVisible">
<ion-list>
<ion-item-sliding
*ngFor="let urn3 of corpusProvider.currentCorpus.subCorpora[urn2].reply.reff.urn">
<button ion-item (click)="showFurtherReferencesOrText(urn3, 3)">
{{corpusProvider.currentCorpus.citation_level_3}} {{urn3.replace(urn2 + ".", "")}}
</button>
</ion-item-sliding>
</ion-list>
</div>
</ion-item>
</ion-list>
</div>
</ion-item>
</ion-list>
</ion-content>
import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {CorpusDetailPage} from './corpus-detail';
import {TranslateModule} from "@ngx-translate/core";
@NgModule({
declarations: [
CorpusDetailPage,
],
imports: [
IonicPageModule.forChild(CorpusDetailPage),
TranslateModule.forChild()
],
})
export class CorpusDetailPageModule {
}
import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {CorpusProvider} from "../../providers/corpus/corpus";
import {GetValidReff} from "../../models/getValidReff";
import {CitationLevel} from "../../models/enum";
import {ShowTextPage} from "../show-text/show-text";
import {HttpErrorResponse} from "@angular/common/http";
/**
* Generated class for the CorpusDetailPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-corpus-detail',
templateUrl: 'corpus-detail.html',
})
export class CorpusDetailPage {
constructor(public navCtrl: NavController, public navParams: NavParams,
public corpusProvider: CorpusProvider) {
if (!this.corpusProvider.currentCorpus.validReff) {
this.corpusProvider.getCTSvalidReff(this.corpusProvider.currentCorpus.source_urn).subscribe((resultXML: string) => {
this.corpusProvider.xml2jsParser.parseString(resultXML, (err, result) => {
let gvr: GetValidReff = this.corpusProvider.ctsJson2mc(result);
gvr.isVisible = true;
this.corpusProvider.currentCorpus.validReff = gvr;
}
);
});
}
}
showFurtherReferencesOrText(urn: string, currentCitationLevel: number) {
if (currentCitationLevel === 1 &&
this.corpusProvider.currentCorpus.citation_level_2 !== CitationLevel[CitationLevel.default]) {
// change display for further references
this.checkFurtherReferences(urn);
}
else if (currentCitationLevel === 2 &&
this.corpusProvider.currentCorpus.citation_level_3 !== CitationLevel[CitationLevel.default]) {
// change display for further references
this.checkFurtherReferences(urn);
}
else {
// go to text display
this.corpusProvider.currentUrn = urn;
this.navCtrl.push(ShowTextPage).then();
}
}
private checkFurtherReferences(urn: string) {
if (urn in this.corpusProvider.currentCorpus.subCorpora) {
this.corpusProvider.currentCorpus.subCorpora[urn].isVisible = !this.corpusProvider.currentCorpus.subCorpora[urn].isVisible;
}
else {
// append new references and make them visible
this.corpusProvider.getCTSvalidReff(urn).subscribe((resultXML: string) => {
this.corpusProvider.xml2jsParser.parseString(resultXML, (err, result) => {
let gvr: GetValidReff = this.corpusProvider.ctsJson2mc(result);
gvr.isVisible = true;
this.corpusProvider.currentCorpus.subCorpora[urn] = gvr;
}
);
}, (error: HttpErrorResponse) => {
// no further references available, go to text display
this.corpusProvider.currentUrn = urn;
this.navCtrl.push(ShowTextPage).then();
});
}
}
}
......@@ -8,7 +8,7 @@
<ion-content padding>
<ion-searchbar (ionInput)="getAuthors($event)" placeholder="{{ 'AUTHOR_SEARCH' | translate }}"></ion-searchbar>
<ion-list>
<ion-list *ngIf="corpusProvider.availableAuthors.length > 0; else loading">
<ion-title>
{{ 'AUTHORS' | translate }}
</ion-title>
......@@ -18,4 +18,7 @@
</button>
</ion-item-sliding>
</ion-list>
<ng-template #loading>
<ion-spinner></ion-spinner>
</ng-template>
</ion-content>
......@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {CorpusProvider} from "../../providers/corpus/corpus";
import {HttpClient} from "@angular/common/http";
import {CorpusMC} from "../../models/corpusMC";
import {TranslateService} from "@ngx-translate/core";
import {Author} from "../../models/author";
import {AuthorDetailPage} from "../author-detail/author-detail";
......@@ -13,7 +12,7 @@ import {AuthorDetailPage} from "../author-detail/author-detail";
})
export class HomePage {
private corpusUrl: string = "http://141.20.186.246:5000/mc/api/v1.0/corpora";
private corpusUrl: string;
public authorsDisplayed: Author[];
constructor(public navCtrl: NavController,
......@@ -23,31 +22,9 @@ export class HomePage {
if (!this.corpusProvider.availableCorpora) {
this.corpusProvider.availableCorpora = [];
this.corpusProvider.availableAuthors = [];
let resultObservable = this.http.get(this.corpusUrl);
resultObservable.subscribe((data: object) => {
let corpusList: CorpusMC[] = data["corpora"] as CorpusMC[];
corpusList.forEach((corpus: CorpusMC) => {
this.corpusProvider.availableCorpora.push(corpus);
let authorIndex = this.corpusProvider.availableAuthors.map(author => author.name).indexOf(corpus.author);
if (authorIndex > -1) {
this.corpusProvider.availableAuthors[authorIndex].corpora.push(corpus);
}
else {
this.corpusProvider.availableAuthors.push(new Author({
name: corpus.author,
corpora: [corpus]
}));
}
});
this.corpusProvider.availableAuthors.sort((author1, author2) => {
if (author1.name < author2.name) {
return -1;
}
else if (author1.name > author2.name) {
return 1;
}
return 0;
});
this.translate.get("MC_API_CORPORA_URL").subscribe((value) => {
this.corpusUrl = value;
this.corpusProvider.getCorpora(this.corpusUrl);
});
}
this.authorsDisplayed = this.corpusProvider.availableAuthors;
......
<!--
Generated template for the ShowTextPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>{{corpusProvider.currentCorpus.author}}: {{corpusProvider.currentCorpus.title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>{{currentTitleMinor}}</h1>
<p *ngIf="currentText.length > 0; else loading">{{currentText}}</p>
<ng-template #loading>
<ion-spinner></ion-spinner>
</ng-template>
</ion-content>
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