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

src/app/app-routing.module.ts

@@ -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' },
 
 
 

src/app/app.component.html

 <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

src/app/author-detail/author-detail.page.html

 <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

src/app/author/author.page.html

 <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

src/app/doc-exercises/doc-exercises.module.ts

+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 {}

src/app/doc-exercises/doc-exercises.page.html

+<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

src/app/doc-exercises/doc-exercises.page.spec.ts

+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();
+  });
+});

src/app/doc-exercises/doc-exercises.page.ts

+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();
+  }
+
+}

src/app/doc-software/doc-software.module.ts

+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';