Commit 0369d894 authored by Konstantin Schulz's avatar Konstantin Schulz

refactoring for the recent major UI changes

parent 9c34055a
{ {
"name": "mc_frontend", "name": "mc_frontend",
"version": "1.3.9", "version": "1.4.0",
"author": "Ionic Framework", "author": "Ionic Framework",
"homepage": "https://ionicframework.com/", "homepage": "https://ionicframework.com/",
"scripts": { "scripts": {
......
...@@ -6,52 +6,72 @@ ...@@ -6,52 +6,72 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<ion-list> <ion-grid>
<ion-item> <ion-row>
<ion-button (click)="HelperService.goToHomePage(navCtrl).then(closeMenu.bind(this))"> <ion-col>
{{'HOME' | translate}} <a (click)="HelperService.goToHomePage(navCtrl).then(closeMenu.bind(this))">
</ion-button> {{'HOME' | translate}}
</ion-item> </a>
<ion-item> </ion-col>
<ion-button (click)="HelperService.goToAuthorPage(navCtrl).then(closeMenu.bind(this))"> </ion-row>
{{ 'EXERCISE_GENERATE' | translate }}</ion-button> <ion-row>
</ion-item> <ion-col>
<ion-item> <a (click)="HelperService.goToAuthorPage(navCtrl).then(closeMenu.bind(this))">
<ion-button (click)="HelperService.goToExerciseListPage(navCtrl).then(closeMenu.bind(this))"> {{ 'EXERCISE_GENERATE' | translate }}
{{ 'EXERCISE_LIST' | translate }}</ion-button> </a>
</ion-item> </ion-col>
<ion-item> </ion-row>
<ion-button (click)="HelperService.goToTestPage(navCtrl).then(closeMenu.bind(this))"> <ion-row>
{{ 'TEST' | translate }}</ion-button> <ion-col>
</ion-item> <a (click)="HelperService.goToExerciseListPage(navCtrl).then(closeMenu.bind(this))">
<ion-item> {{ 'EXERCISE_LIST' | translate }}
<ion-list> </a>
<ion-label> </ion-col>
</ion-row>
<ion-row>
<ion-col>
<a (click)="HelperService.goToTestPage(navCtrl).then(closeMenu.bind(this))">
{{ 'TEST' | translate }}
</a>
</ion-col>
</ion-row>
<ion-row>
<ion-grid>
<ion-title>
<h2>{{ 'DOCUMENTATION' | translate }}</h2> <h2>{{ 'DOCUMENTATION' | translate }}</h2>
</ion-label> </ion-title>
<ion-item> <ion-row>
<ion-button (click)="HelperService.goToInfoPage(navCtrl).then(closeMenu.bind(this))"> <ion-col>
{{ 'ABOUT' | translate }}</ion-button> <a (click)="HelperService.goToInfoPage(navCtrl).then(closeMenu.bind(this))">
</ion-item> {{ 'ABOUT' | translate }}
<ion-item> </a>
<ion-button (click)="HelperService.goToDocSoftwarePage(navCtrl).then(closeMenu.bind(this))"> </ion-col>
{{ 'DOC_SOFTWARE' | translate }}</ion-button> </ion-row>
</ion-item> <ion-row>
<ion-item> <ion-col>
<ion-button <a (click)="HelperService.goToDocSoftwarePage(navCtrl).then(closeMenu.bind(this))">
(click)="HelperService.goToDocExercisesPage(navCtrl).then(closeMenu.bind(this))"> {{ 'DOC_SOFTWARE' | translate }}
{{ 'DOC_EXERCISES' | translate }}</ion-button> </a>
</ion-item> </ion-col>
<ion-item> </ion-row>
<ion-button <ion-row>
(click)="HelperService.goToDocVocUnitPage(navCtrl).then(closeMenu.bind(this))"> <ion-col>
{{ 'DOC_VOC_UNIT' | translate }}</ion-button> <a (click)="HelperService.goToDocExercisesPage(navCtrl).then(closeMenu.bind(this))">
</ion-item> {{ 'DOC_EXERCISES' | translate }}
</a>
</ion-list> </ion-col>
</ion-item> </ion-row>
</ion-list> <ion-row>
<ion-col>
<a (click)="HelperService.goToDocVocUnitPage(navCtrl).then(closeMenu.bind(this))">
{{ 'DOC_VOC_UNIT' | translate }}
</a>
</ion-col>
</ion-row>
</ion-grid>
</ion-row>
</ion-grid>
</ion-content> </ion-content>
</ion-menu> </ion-menu>
<ion-router-outlet id="content1"></ion-router-outlet> <ion-router-outlet id="content1"></ion-router-outlet>
</ion-app> </ion-app>
\ No newline at end of file
...@@ -2,15 +2,13 @@ ...@@ -2,15 +2,13 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<div class="home-logo"> <div class="home-logo">
<a href="../home"> <a (click)="HelperService.goToHomePage(navCtrl)">
<img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo"> <img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo">
</a> </a>
</div> </div>
<div>
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title>{{ corpusService.currentAuthor.name }}</ion-title>
</div>
</ion-buttons> </ion-buttons>
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title>{{ corpusService.currentAuthor?.name }}</ion-title>
<ion-buttons slot="end"> <ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button> <ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
...@@ -21,11 +19,11 @@ ...@@ -21,11 +19,11 @@
<ion-content padding> <ion-content padding>
<ion-list> <ion-list>
<ion-item *ngFor="let corpus of corpusService.currentAuthor.corpora"> <ion-item *ngFor="let corpus of corpusService.currentAuthor?.corpora">
<button (click)="showPossibleReferences(corpus)"> <button (click)="showPossibleReferences(corpus)">
<span>{{corpus.title}}</span> <span>{{corpus.title}}</span>
</button> </button>
</ion-item> </ion-item>
</ion-list> </ion-list>
<ion-button (click)="HelperService.goToAuthorPage(navCtrl)">{{ 'BACK' | translate }}</ion-button> <ion-button (click)="navCtrl.pop()">{{ 'BACK' | translate }}</ion-button>
</ion-content> </ion-content>
\ No newline at end of file
button {
color: var(--ion-color-primary-shade);
}
...@@ -2,15 +2,13 @@ ...@@ -2,15 +2,13 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<div class="home-logo"> <div class="home-logo">
<a href="../home"> <a (click)="HelperService.goToHomePage(navCtrl)">
<img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo"> <img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo">
</a> </a>
</div> </div>
<div>
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title>{{ 'AUTHOR_SELECT' | translate }}</ion-title>
</div>
</ion-buttons> </ion-buttons>
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title>{{ 'AUTHOR_SELECT' | translate }}</ion-title>
<ion-buttons slot="end"> <ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button> <ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
...@@ -36,7 +34,7 @@ ...@@ -36,7 +34,7 @@
<ion-row> <ion-row>
<ion-col> <ion-col>
<label> <label>
<input type="checkbox" [(ngModel)]="showOnlyTreebanks" (change)="toggleTreebankAuthors()" /> <input type="checkbox" [(ngModel)]="showOnlyTreebanks" (change)="toggleTreebankAuthors()"/>
<span class="checkbox">{{ 'AUTHOR_SHOW_ONLY_TREEBANKS' | translate}}</span> <span class="checkbox">{{ 'AUTHOR_SHOW_ONLY_TREEBANKS' | translate}}</span>
</label> </label>
</ion-col> </ion-col>
...@@ -46,13 +44,11 @@ ...@@ -46,13 +44,11 @@
<label> <label>
<ion-icon name="search" class="search"></ion-icon> <ion-icon name="search" class="search"></ion-icon>
<input type="search" (ngModelChange)="getAuthors($event.toString())" <input type="search" (ngModelChange)="getAuthors($event.toString())"
placeholder="{{ 'AUTHOR_SEARCH' | translate }}" [(ngModel)]="currentSearchValue" /> placeholder="{{ 'AUTHOR_SEARCH' | translate }}" [(ngModel)]="currentSearchValue"/>
</label> </label>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col>
</ion-col>
<ion-col> <ion-col>
<h2>{{'AUTHOR' | translate}}</h2> <h2>{{'AUTHOR' | translate}}</h2>
<ion-grid *ngIf="corpusService.availableAuthors.length > 0; else loading" class="author"> <ion-grid *ngIf="corpusService.availableAuthors.length > 0; else loading" class="author">
...@@ -66,7 +62,6 @@ ...@@ -66,7 +62,6 @@
<ion-spinner></ion-spinner> <ion-spinner></ion-spinner>
</ng-template> </ng-template>
</ion-col> </ion-col>
<ion-col></ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-content> </ion-content>
\ No newline at end of file
.author { .author {
text-align: left; text-align: center;
font-size: 0.9em; font-size: 0.9em;
} }
......
...@@ -25,7 +25,8 @@ export class AuthorPage { ...@@ -25,7 +25,8 @@ export class AuthorPage {
public translate: TranslateService, public translate: TranslateService,
public corpusService: CorpusService, public corpusService: CorpusService,
public http: HttpClient, public http: HttpClient,
public exerciseService: ExerciseService) { public exerciseService: ExerciseService,
public helperService: HelperService) {
if (!this.corpusService.availableAuthors) { if (!this.corpusService.availableAuthors) {
this.corpusService.loadCorporaFromLocalStorage(); this.corpusService.loadCorporaFromLocalStorage();
} }
...@@ -70,6 +71,8 @@ export class AuthorPage { ...@@ -70,6 +71,8 @@ export class AuthorPage {
showCorpora(author: Author) { showCorpora(author: Author) {
this.corpusService.currentAuthor = author; this.corpusService.currentAuthor = author;
HelperService.mostRecentSetup.currentAuthor = author;
this.helperService.saveMostRecentSetup().then();
this.navCtrl.navigateForward('/author-detail').then(); this.navCtrl.navigateForward('/author-detail').then();
} }
......
...@@ -55,6 +55,7 @@ export class CorpusService { ...@@ -55,6 +55,7 @@ export class CorpusService {
instructionsTranslation: '' instructionsTranslation: ''
}); });
public invalidTextRangeString: string; public invalidTextRangeString: string;
public isMostRecentSetupLoaded = false;
public isTextRangeCorrect = false; public isTextRangeCorrect = false;
public phenomenonMap: PhenomenonMap = new PhenomenonMap({ public phenomenonMap: PhenomenonMap = new PhenomenonMap({
case: new PhenomenonMapContent({translationObject: CaseTranslations}), case: new PhenomenonMapContent({translationObject: CaseTranslations}),
...@@ -69,10 +70,12 @@ export class CorpusService { ...@@ -69,10 +70,12 @@ export class CorpusService {
public toastCtrl: ToastController, public toastCtrl: ToastController,
public helperService: HelperService, public helperService: HelperService,
) { ) {
this.isMostRecentSetupLoaded = false;
HelperService.waitForConfig().then(() => { HelperService.waitForConfig().then(() => {
this.checkForUpdates().then(() => { this.checkForUpdates().then(() => {
this.checkAnnisResponse().then(() => { this.checkAnnisResponse().then(() => {
this.restoreLastCorpus().then(() => { this.restoreLastCorpus().then(() => {
this.isMostRecentSetupLoaded = true;
}, () => { }, () => {
}); });
}, () => { }, () => {
...@@ -121,6 +124,7 @@ export class CorpusService { ...@@ -121,6 +124,7 @@ export class CorpusService {
} }
this.helperService.loadMostRecentSetup().then(() => { this.helperService.loadMostRecentSetup().then(() => {
this.annisResponse = HelperService.mostRecentSetup.annisResponse; this.annisResponse = HelperService.mostRecentSetup.annisResponse;
this.currentAuthor = HelperService.mostRecentSetup.currentAuthor;
this.currentUrn = HelperService.mostRecentSetup.currentUrn; this.currentUrn = HelperService.mostRecentSetup.currentUrn;
this.currentCorpus = HelperService.mostRecentSetup.currentCorpus; this.currentCorpus = HelperService.mostRecentSetup.currentCorpus;
return outerResolve(); return outerResolve();
......
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<div class="home-logo"> <div class="home-logo">
<a href="../home"> <a (click)="HelperService.goToHomePage(navCtrl)">
<img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo"> <img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo">
</a> </a>
</div> </div>
<div> <div>
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner> <ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title>{{ 'DOC_EXERCISES' | translate }} <ion-title>{{ 'DOC_EXERCISES' | translate }}
</ion-title> </ion-title>
</div> </div>
</ion-buttons> </ion-buttons>
<ion-buttons slot="end"> <ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button> <ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-grid>
<ion-grid> <ion-row>
<ion-row> <ion-col>
<ion-col> <h2 style="text-align:center;">{{'TEST' | translate}}</h2>
<h2 style="text-align:center;">{{'TEST' | translate}}</h2> </ion-col>
</ion-col> </ion-row>
</ion-row> <ion-row>
<ion-row> <ion-col style="text-align:left; padding-left: 10px;">
<ion-col style="text-align:left; padding-left: 10px;"> {{'DOC_EXERCISES_VOC_UNIT_INTRO' | translate}}
{{'DOC_EXERCISES_VOC_UNIT_INTRO' | translate}} </ion-col>
</ion-col> </ion-row>
</ion-row> <ion-row>
<ion-row> <ion-col size="1">
<ion-col size="1"> <h4>ID</h4>
<h4>ID</h4> </ion-col>
</ion-col> <ion-col size="3">
<ion-col size="3"> <h4>{{'DOC_EXERCISES_NAME' | translate}}</h4>
<h4>{{'DOC_EXERCISES_NAME' | translate}}</h4> </ion-col>
</ion-col> <ion-col size="2">
<ion-col size="2"> <h4>{{'DOC_EXERCISES_TYPE' | translate}}</h4>
<h4>{{'DOC_EXERCISES_TYPE' | translate}}</h4> </ion-col>
</ion-col> <ion-col size="2">
<ion-col size="2"> <h4>{{'DOC_EXERCISES_LEVEL' | translate}}</h4>
<h4>{{'DOC_EXERCISES_LEVEL' | translate}}</h4> </ion-col>
</ion-col> <ion-col size="4">
<ion-col size="4"> <h4>{{'DOC_EXERCISES_FUNCTION' | translate}}</h4>
<h4>{{'DOC_EXERCISES_FUNCTION' | translate}}</h4> </ion-col>
</ion-col> </ion-row>
</ion-row> <!-- Vocabulary unit, first exercise type to appear-->
<!-- Vocabulary unit, first exercise type to appear--> <ion-row *ngFor="let vud of vocUnitDocs; let i = index">
<ion-row> <ion-col size="1">{{i + 1}}</ion-col>
<ion-col size="1"> <ion-col size="3">
1 {{ vud.name | translate}}
</ion-col> </ion-col>
<ion-col size="3"> <ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_1' | translate}} {{ vud.type | translate}}
</ion-col> </ion-col>
<ion-col size="2"> <ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_1_TYPE' | translate}} {{ vud.level | translate}}
</ion-col> </ion-col>
<ion-col size="2"> <ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_1_LEVEL' | translate}} {{ vud.function | translate}}
</ion-col> </ion-col>
<ion-col size="4"> </ion-row>
{{'DOC_EXERCISES_VOC_UNIT_1_FUNCTION' | translate}} <ion-row>
</ion-col> <br>
</ion-row> <br>
<ion-row></ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col size="1"> <ion-col>
2 <h2 style="text-align:center;">{{'EXERCISE_GENERATE' | translate}}</h2>
</ion-col> </ion-col>
<ion-col size="3"> </ion-row>
{{'DOC_EXERCISES_VOC_UNIT_2' | translate}} <ion-row>
</ion-col> <ion-col size="1">
<ion-col size="2"> <h4>ID</h4>
{{'DOC_EXERCISES_VOC_UNIT_2_TYPE' | translate}} </ion-col>
</ion-col> <ion-col size="3">
<ion-col size="2"> <h4>{{'DOC_EXERCISES_NAME' | translate}}</h4>
{{'DOC_EXERCISES_VOC_UNIT_2_LEVEL' | translate}} </ion-col>
</ion-col> <ion-col size="2">
<ion-col size="4"> <h4>{{'DOC_EXERCISES_TYPE' | translate}}</h4>
{{'DOC_EXERCISES_VOC_UNIT_2_FUNCTION' | translate}} </ion-col>
</ion-col> <ion-col size="2">
</ion-row> <h4>{{'DOC_EXERCISES_LEVEL' | translate}}</h4>
<ion-row></ion-row> </ion-col>
<ion-row> <ion-col size="4">
<ion-col size="1"> <h4>{{'DOC_EXERCISES_FUNCTION' | translate}}</h4>
3 </ion-col>
</ion-col> </ion-row>
<ion-col size="3"> <!-- Exercise types of the exercise generator -->
{{'DOC_EXERCISES_VOC_UNIT_3' | translate}} <ion-row *ngFor="let egd of exerciseGenDocs; let i = index">
</ion-col> <ion-col size="1">{{i + 1}}</ion-col>
<ion-col size="2"> <ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_3_TYPE' | translate}} {{ egd.name | translate}}
</ion-col> </ion-col>
<ion-col size="2"> <ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_3_LEVEL' | translate}} {{ egd.type | translate}}
</ion-col> </ion-col>
<ion-col size="4"> <ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_3_FUNCTION' | translate}} {{ egd.level | translate}}
</ion-col> </ion-col>
</ion-row> <ion-col size="4">
<ion-row></ion-row> {{ egd.function | translate}}
<ion-row> </ion-col>
<ion-col size="1"> </ion-row>
4 <ion-row>
</ion-col> <ion-col><br></ion-col>
<ion-col size="3"> </ion-row>
{{'DOC_EXERCISES_VOC_UNIT_4' | translate}} </ion-grid>
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_4_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_4_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_4_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col size="1">
5
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_5' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_5_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_5_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_5_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col size="1">
6
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_6' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_6_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_6_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_6_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col size="1">
7
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_7' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_7_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_7_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
<