Commit 999da8c5 authored by beyeranq's avatar beyeranq

layout design, buttons, menu, translation of project pages (extended json-files)

parent 55c7bcaf
......@@ -19,6 +19,9 @@ const routes: Routes = [
{ path: 'text-range', loadChildren: './text-range/text-range.module#TextRangePageModule' },
{ path: 'vocabulary-check', loadChildren: './vocabulary-check/vocabulary-check.module#VocabularyCheckPageModule' },
{ path: 'exercise', loadChildren: './exercise/exercise.module#ExercisePageModule' }, { path: 'exercise-list', loadChildren: './exercise-list/exercise-list.module#ExerciseListPageModule' },
{ path: 'doc-voc-unit', loadChildren: './doc-voc-unit/doc-voc-unit.module#DocVocUnitPageModule' },
{ path: 'doc-exercises', loadChildren: './doc-exercises/doc-exercises.module#DocExercisesPageModule' },
{ path: 'doc-software', loadChildren: './doc-software/doc-software.module#DocSoftwarePageModule' },
......
<ion-app>
<ion-menu contentId="content1" side="start" menuId="{{HelperService.menuId}}">
<ion-menu contentId="content1" side="end" menuId="{{HelperService.menuId}}">
<ion-header>
<ion-toolbar>
<ion-title>{{ 'MACHINA_CALLIDA' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button
(click)="HelperService.goToAuthorPage(navCtrl).then(closeMenu.bind(this))">{{ 'EXERCISE_GENERATE' | translate }}</ion-button>
<ion-content padding>
<ion-list>
<ion-item>
<ion-button (click)="HelperService.goToHomePage(navCtrl).then(closeMenu.bind(this))">
{{'HOME' | translate}}
</ion-button>
</ion-item>
<ion-item>
<ion-button (click)="HelperService.goToAuthorPage(navCtrl).then(closeMenu.bind(this))">
{{ 'EXERCISE_GENERATE' | translate }}</ion-button>
</ion-item>
<ion-item>
<ion-button (click)="HelperService.goToExerciseListPage(navCtrl).then(closeMenu.bind(this))">
{{ 'EXERCISE_LIST' | translate }}</ion-button>
</ion-item>
<ion-item>
<ion-button (click)="HelperService.goToTestPage(navCtrl).then(closeMenu.bind(this))">
{{ 'TEST' | translate }}</ion-button>
</ion-item>
<ion-item>
<ion-list>
<ion-label>
<h2>{{ 'DOCUMENTATION' | translate }}</h2>
</ion-label>
<ion-item>
<ion-button (click)="HelperService.goToInfoPage(navCtrl).then(closeMenu.bind(this))">
{{ 'ABOUT' | translate }}</ion-button>
</ion-item>
<ion-item>
<ion-button (click)="HelperService.goToDocSoftwarePage(navCtrl).then(closeMenu.bind(this))">
{{ 'DOC_SOFTWARE' | translate }}</ion-button>
</ion-item>
<ion-item>
<ion-button
(click)="HelperService.goToDocExercisesPage(navCtrl).then(closeMenu.bind(this))">
{{ 'DOC_EXERCISES' | translate }}</ion-button>
</ion-item>
<ion-item>
<ion-button
(click)="HelperService.goToDocVocUnitPage(navCtrl).then(closeMenu.bind(this))">
{{ 'DOC_VOC_UNIT' | translate }}</ion-button>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1"></ion-router-outlet>
</ion-app>
</ion-app>
\ No newline at end of file
<ion-header>
<ion-toolbar>
<div class="toolbar-left">
<ion-back-button icon="arrow-round-back" defaultHref="home"></ion-back-button>
<ion-title>{{ corpusService.currentAuthor.name }}</ion-title>
</div>
<div class="toolbar-right">
<button (click)="HelperService.goToHomePage(navCtrl)">
<ion-icon name="home"></ion-icon>
</button>
</div>
<ion-buttons slot="start">
<div class="home-logo">
<a href="../home">
<img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo">
</a>
</div>
<div>
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title>{{ corpusService.currentAuthor.name }}</ion-title>
</div>
</ion-buttons>
<ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let corpus of corpusService.currentAuthor.corpora">
<button (click)="showPossibleReferences(corpus)">
<span>{{corpus.title}}</span>
</button>
</ion-item>
</ion-item>
</ion-list>
</ion-content>
<ion-button (click)="HelperService.goToAuthorPage(navCtrl)">{{ 'BACK' | translate }}</ion-button>
</ion-content>
\ No newline at end of file
<ion-header>
<ion-toolbar>
<div class="toolbar-left">
<ion-back-button icon="arrow-round-back" defaultHref="home"></ion-back-button>
<ion-title>{{ 'AUTHOR_SELECT' | translate }}</ion-title>
</div>
<div class="toolbar-right">
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<button (click)="HelperService.goToHomePage(navCtrl)">
<ion-icon name="home"></ion-icon>
</button>
</div>
<ion-buttons slot="start">
<div class="home-logo">
<a href="../home">
<img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo">
</a>
</div>
<div>
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title>{{ 'AUTHOR_SELECT' | translate }}</ion-title>
</div>
</ion-buttons>
<ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
......@@ -19,6 +23,7 @@
<ion-col>
<b>{{ 'MOST_RECENT_SETUP' | translate }}:</b>
<br>
<br>
</ion-col>
</ion-row>
<ion-row *ngIf="HelperService.mostRecentSetup?.currentCorpus && HelperService.mostRecentSetup?.currentUrn">
......@@ -31,8 +36,8 @@
<ion-row>
<ion-col>
<label>
<input type="checkbox" [(ngModel)]="showOnlyTreebanks" (change)="toggleTreebankAuthors()"/>
<span class="checkbox">{{ "AUTHOR_SHOW_ONLY_TREEBANKS" | translate}}</span>
<input type="checkbox" [(ngModel)]="showOnlyTreebanks" (change)="toggleTreebankAuthors()" />
<span class="checkbox">{{ 'AUTHOR_SHOW_ONLY_TREEBANKS' | translate}}</span>
</label>
</ion-col>
</ion-row>
......@@ -41,12 +46,15 @@
<label>
<ion-icon name="search" class="search"></ion-icon>
<input type="search" (ngModelChange)="getAuthors($event.toString())"
placeholder="{{ 'AUTHOR_SEARCH' | translate }}" [(ngModel)]="currentSearchValue"/>
placeholder="{{ 'AUTHOR_SEARCH' | translate }}" [(ngModel)]="currentSearchValue" />
</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
</ion-col>
<ion-col>
<h2>{{'AUTHOR' | translate}}</h2>
<ion-grid *ngIf="corpusService.availableAuthors.length > 0; else loading" class="author">
<ion-row *ngFor="let author of authorsDisplayed">
<ion-col>
......@@ -58,6 +66,7 @@
<ion-spinner></ion-spinner>
</ng-template>
</ion-col>
<ion-col></ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { DocExercisesPage } from './doc-exercises.page';
const routes: Routes = [
{
path: '',
component: DocExercisesPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes),
TranslateModule.forChild()
],
declarations: [DocExercisesPage]
})
export class DocExercisesPageModule {}
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<div class="home-logo">
<a href="../home">
<img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo">
</a>
</div>
<div>
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title>{{ 'DOC_EXERCISES' | translate }}
</ion-title>
</div>
</ion-buttons>
<ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col>
<h2 style="text-align:center;">{{'TEST' | translate}}</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="text-align:left; padding-left: 10px;">
{{'DOC_EXERCISES_VOC_UNIT_INTRO' | translate}}
</ion-col>
</ion-row>
<ion-row>
<ion-col size="1">
<h4>ID</h4>
</ion-col>
<ion-col size="3">
<h4>{{'DOC_EXERCISES_NAME' | translate}}</h4>
</ion-col>
<ion-col size="2">
<h4>{{'DOC_EXERCISES_TYPE' | translate}}</h4>
</ion-col>
<ion-col size="2">
<h4>{{'DOC_EXERCISES_LEVEL' | translate}}</h4>
</ion-col>
<ion-col size="4">
<h4>{{'DOC_EXERCISES_FUNCTION' | translate}}</h4>
</ion-col>
</ion-row>
<!-- Vocabulary unit, first exercise type to appear-->
<ion-row>
<ion-col size="1">
1
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_1' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_1_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_1_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_1_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col size="1">
2
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_2' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_2_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_2_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_2_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col size="1">
3
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_3' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_3_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_3_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_3_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col size="1">
4
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_4' | translate}}
</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">
{{'DOC_EXERCISES_VOC_UNIT_7_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col size="1">
8
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_8' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_8_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_8_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_8_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col size="1">
9
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_9' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_9_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_9_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_9_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col size="1">
10
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_VOC_UNIT_10' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_10_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_VOC_UNIT_10_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_VOC_UNIT_10_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<br>
<br>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2 style="text-align:center;">{{'EXERCISE_GENERATE' | translate}}</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="1">
<h4>ID</h4>
</ion-col>
<ion-col size="3">
<h4>{{'DOC_EXERCISES_NAME' | translate}}</h4>
</ion-col>
<ion-col size="2">
<h4>{{'DOC_EXERCISES_TYPE' | translate}}</h4>
</ion-col>
<ion-col size="2">
<h4>{{'DOC_EXERCISES_LEVEL' | translate}}</h4>
</ion-col>
<ion-col size="4">
<h4>{{'DOC_EXERCISES_FUNCTION' | translate}}</h4>
</ion-col>
</ion-row>
<!-- Exercise types of the exercise generator -->
<ion-row>
<ion-col size="1">
1
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_GEN_1' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_GEN_1_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_GEN_1_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_GEN_1_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row>
<ion-col size="1">
2
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_GEN_2' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_GEN_2_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_GEN_2_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_GEN_2_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row>
<ion-col size="1">
3
</ion-col>
<ion-col size="3">
{{'DOC_EXERCISES_GEN_3' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_GEN_3_TYPE' | translate}}
</ion-col>
<ion-col size="2">
{{'DOC_EXERCISES_GEN_3_LEVEL' | translate}}
</ion-col>
<ion-col size="4">
{{'DOC_EXERCISES_GEN_3_FUNCTION' | translate}}
</ion-col>
</ion-row>
<ion-row>
<ion-col><br></ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button (click)="HelperService.goToInfoPage(navCtrl)">
<ion-icon name="information-circle"></ion-icon>
<ion-label>{{ 'ABOUT' | translate }}</ion-label>
</ion-tab-button>
<ion-tab-button (click)="HelperService.goToDocSoftwarePage(navCtrl)">
<ion-icon name="code"></ion-icon>
<ion-label>{{ 'DOC_SOFTWARE' | translate}}</ion-label>
</ion-tab-button>
<ion-tab-button (click)="HelperService.goToDocVocUnitPage(navCtrl)">
<ion-icon name="school"></ion-icon>
<ion-label>{{'DOC_VOC_UNIT' | translate}}</ion-label>
</ion-tab-button>
<ion-tab-button (click)="HelperService.goToImprintPage(navCtrl)">
<ion-icon name="today"></ion-icon>
<ion-label>{{ 'IMPRINT' | translate }}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-toolbar>
</ion-footer>
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DocExercisesPage } from './doc-exercises.page';
describe('DocExercisesPage', () => {
let component: DocExercisesPage;
let fixture: ComponentFixture<DocExercisesPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DocExercisesPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DocExercisesPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import {HelperService} from 'src/app/helper.service';
import {NavController} from '@ionic/angular';
import {HttpClient} from '@angular/common/http';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-doc-exercises',
templateUrl: './doc-exercises.page.html',
styleUrls: ['./doc-exercises.page.scss'],
})
export class DocExercisesPage {
HelperService = HelperService;
constructor(public navCtrl: NavController,
public http: HttpClient,
public translate: TranslateService) { }
goToHomePage() {
this.navCtrl.navigateForward('/home').then();
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';