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

update to ionic 5 and angular 9

parent e42b1b16
Pipeline #10720 failed
#before_script:
# - which node
# - node --version
# - which npm
# - npm --version
# - npm install
# - which coverage
#stages:
# - test
# - deploy
#coverage:
# stage: test
# script:
# - coverage run --rcfile=.coveragerc tests.py
# - coverage combine
# - coverage report -m
# coverage: '/^TOTAL.+?(\d+\%)$/'
# tags:
# - python
# - pip
# - flask
[![pipeline status](https://scm.cms.hu-berlin.de/callidus/mc_frontend/badges/master/pipeline.svg)](https://scm.cms.hu-berlin.de/callidus/mc_frontend/-/commits/master)
[![coverage report](https://scm.cms.hu-berlin.de/callidus/mc_frontend/badges/master/coverage.svg)](https://scm.cms.hu-berlin.de/callidus/mc_frontend/-/commits/master)
# Installation
## via Docker:
1. Install Docker (https://docs.docker.com/v17.12/install/) and Docker-Compose (https://docs.docker.com/compose/install/)
......@@ -5,9 +8,9 @@
`git clone https://scm.cms.hu-berlin.de/callidus/mc_frontend.git`
3. Move to the newly created folder:
`cd mc_frontend`
4. Run `docker-compose build`.
Make sure to assign at least 4GB RAM (Memory) to the Docker container, otherwise the build will fail.
5. Run `docker-compose up -d` and enjoy!
4. Make sure to assign at least 4GB RAM (Memory) to the Docker engine, otherwise the build will fail.
5. Run `docker-compose build`.
6. Run `docker-compose up -d` and enjoy!
## via Command Line:
1. Clone the repo: `git clone https://scm.cms.hu-berlin.de/callidus/mc_frontend.git`
......@@ -40,3 +43,7 @@ To change the URL for the backend, use the `ionic.config.json` file (proxies > p
Use the `--host 0.0.0.0 --disable-host-check` flag for `ng serve` if you want to use it in a production environment with an Nginx server using proxy_pass.
## Other
For all other kinds of configuration, use `src/configMC.ts`.
----------------------------------------------------------------
# Testing
To test the application and check the code coverage, run `npm run test`.
......@@ -72,7 +72,7 @@
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "app:build",
"proxyConfig": "proxy.conf.json"
......@@ -93,7 +93,7 @@
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"builder": "@angular-builders/custom-webpack:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
......
This diff is collapsed.
{
"name": "mc_frontend",
"version": "1.5.4",
"version": "1.5.6",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve --port 8100",
"build": "ng build",
"test": "ng test",
"test": "ng test --code-coverage --watch=false",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^7.2.10",
"@angular/core": "^7.2.10",
"@angular/forms": "^7.2.10",
"@angular/http": "^7.2.10",
"@angular/platform-browser": "^7.2.10",
"@angular/platform-browser-dynamic": "^7.2.10",
"@angular/router": "^7.2.10",
"@ionic-native/core": "^5.6.0",
"@ionic-native/splash-screen": "^5.6.0",
"@ionic-native/status-bar": "^5.6.0",
"@ionic/angular": "^4.3.1",
"@ionic/core": "^4.4.0",
"@angular-builders/custom-webpack": "^9.0.0",
"@angular/common": "^9.0.4",
"@angular/core": "^9.0.4",
"@angular/forms": "^9.0.4",
"@angular/platform-browser": "^9.0.4",
"@angular/platform-browser-dynamic": "^9.0.4",
"@angular/router": "^9.0.4",
"@ionic-native/core": "^5.21.6",
"@ionic-native/splash-screen": "^5.21.6",
"@ionic-native/status-bar": "^5.21.6",
"@ionic/angular": "^5.0.4",
"@ionic/core": "^4.11.10",
"@ionic/storage": "^2.2.0",
"@ngtools/webpack": "^7.3.9",
"@ngtools/webpack": "^9.0.4",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"cordova-browser": "5.0.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.5.4",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.8.29"
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"core-js": "^2.6.11",
"rxjs": "^6.5.4",
"tslib": "^1.11.1",
"webpack": "^4.42.0",
"zone.js": "^0.10.2"
},
"devDependencies": {
"@angular-devkit/architect": "~0.13.8",
"@angular-devkit/build-angular": "^0.13.9",
"@angular-devkit/build-angular": "^0.900.4",
"@angular-devkit/core": "~7.3.8",
"@angular-devkit/schematics": "~7.3.8",
"@angular/cli": "~7.3.8",
"@angular/compiler": "^7.2.10",
"@angular/compiler-cli": "^7.2.10",
"@angular/language-service": "~7.2.2",
"@angular/cli": "^9.0.4",
"@angular/compiler": "^9.0.4",
"@angular/compiler-cli": "^9.0.4",
"@angular/language-service": "^7.2.16",
"@ionic/angular-toolkit": "~1.5.1",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~12.0.0",
"codelyzer": "~4.5.0",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^12.0.12",
"codelyzer": "^5.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.1.0",
"protractor": "^5.4.3",
"ts-node": "^8.1.1",
"tslint": "~5.16.0",
"typescript": "~3.1.6"
"typescript": "^3.6.5"
},
"description": "An Ionic project",
"cordova": {
......
<ion-app>
<ion-menu contentId="content1" side="end" menuId="{{HelperService.menuId}}">
<ion-menu contentId="content1" side="end" menuId="{{configMC.menuId}}">
<ion-header>
<ion-toolbar>
<ion-title>{{ 'MACHINA_CALLIDA' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="closeMenu(true)">
<ion-icon name="close-circle"></ion-icon>
<ion-icon name="md-close-circle"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-content class="ion-padding">
<ion-grid style="text-align: left">
<ion-row>
<ion-col>
......@@ -73,6 +73,13 @@
</a>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<a (click)="HelperService.goToSourcesPage(navCtrl).then(closeMenu.bind(this))">
{{ 'SOURCES' | translate }}
</a>
</ion-col>
</ion-row>
</ion-grid>
</ion-row>
</ion-grid>
......
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed, async } from '@angular/core/testing';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {TestBed, async} from '@angular/core/testing';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {MenuController, Platform} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import {AppComponent} from './app.component';
import {HttpClientModule} from '@angular/common/http';
import {IonicStorageModule} from '@ionic/storage';
import {AppRoutingModule} from './app-routing.module';
import {TranslateTestingModule} from './translate-testing/translate-testing.module';
import {APP_BASE_HREF} from '@angular/common';
import {Subscription} from 'rxjs';
describe('AppComponent', () => {
class PlatformStub {
backButton = {
subscribeWithPriority(priority: number, callback: () => (Promise<any> | void)): Subscription {
return Subscription.EMPTY;
}
};
wasReadyCalled = false;
let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
beforeEach(async(() => {
statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
platformReadySpy = Promise.resolve();
platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
TestBed.configureTestingModule({
declarations: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{ provide: StatusBar, useValue: statusBarSpy },
{ provide: SplashScreen, useValue: splashScreenSpy },
{ provide: Platform, useValue: platformSpy },
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it('should initialize the app', async () => {
TestBed.createComponent(AppComponent);
expect(platformSpy.ready).toHaveBeenCalled();
await platformReadySpy;
expect(statusBarSpy.styleDefault).toHaveBeenCalled();
expect(splashScreenSpy.hide).toHaveBeenCalled();
});
// TODO: add more tests!
public ready(): Promise<any> {
this.wasReadyCalled = true;
return Promise.resolve();
}
}
let statusBarSpy, splashScreenSpy, platformReadySpy;
beforeEach(async(() => {
platformReadySpy = Promise.resolve();
statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
TestBed.configureTestingModule({
declarations: [AppComponent],
imports: [
AppRoutingModule,
HttpClientModule,
IonicStorageModule.forRoot({name: 'mc_db', driverOrder: ['indexeddb', 'websql', 'localstorage']}),
TranslateTestingModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{provide: StatusBar, useValue: statusBarSpy},
{provide: SplashScreen, useValue: splashScreenSpy},
{provide: Platform, useClass: PlatformStub},
{provide: APP_BASE_HREF, useValue: '/'},
{provide: MenuController}
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it('should initialize the app', async () => {
TestBed.createComponent(AppComponent);
const platformStub: PlatformStub = TestBed.get(Platform);
expect(platformStub.wasReadyCalled).toBeTruthy();
await platformReadySpy;
expect(statusBarSpy.styleDefault).toHaveBeenCalled();
expect(splashScreenSpy.hide).toHaveBeenCalled();
});
// TODO: add more tests!
});
......@@ -4,17 +4,19 @@ import {Config, MenuController, NavController, Platform} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {TranslateService} from '@ngx-translate/core';
import {HelperService} from 'src/app/helper.service';
import configMC from '../configMC';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
public configMC = configMC;
public HelperService = HelperService;
constructor(platform: Platform,
public statusBar: StatusBar,
private translate: TranslateService,
public translate: TranslateService,
private config: Config,
private splashScreen: SplashScreen,
public helperService: HelperService,
......@@ -31,7 +33,7 @@ export class AppComponent {
}
closeMenu(result: boolean) {
this.menuCtrl.close(HelperService.menuId).then();
this.menuCtrl.close(configMC.menuId).then();
}
initTranslate() {
......
......@@ -19,8 +19,8 @@ import {APP_BASE_HREF} from '@angular/common';
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
BrowserModule,
AppRoutingModule,
IonicStorageModule.forRoot({name: 'mc_db', driverOrder: ['indexeddb', 'websql', 'localstorage']}),
HttpClientModule,
......@@ -42,7 +42,7 @@ import {APP_BASE_HREF} from '@angular/common';
SplashScreen,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
})
export class AppModule {
}
......@@ -10,13 +10,15 @@
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title *ngIf="HelperService.applicationState | async as state">{{ state.currentSetup.currentAuthor?.name }}</ion-title>
<ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button>
<ion-menu-button autoHide="false">
<ion-icon name="md-menu"></ion-icon>
</ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-content class="ion-padding">
<ion-list *ngIf="HelperService.applicationState | async as state">
<ion-item *ngFor="let corpus of state.currentSetup.currentAuthor?.corpora">
<button (click)="showPossibleReferences(corpus)">
......
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { AuthorDetailPage } from './author-detail.page';
import {AuthorDetailPage} from './author-detail.page';
import {RouterModule} from '@angular/router';
import {HttpClientModule} from '@angular/common/http';
import {IonicStorageModule} from '@ionic/storage';
import {TranslateTestingModule} from '../translate-testing/translate-testing.module';
import {APP_BASE_HREF} from '@angular/common';
describe('AuthorDetailPage', () => {
let component: AuthorDetailPage;
let fixture: ComponentFixture<AuthorDetailPage>;
let component: AuthorDetailPage;
let fixture: ComponentFixture<AuthorDetailPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AuthorDetailPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AuthorDetailPage],
imports: [
HttpClientModule,
IonicStorageModule.forRoot(),
RouterModule.forRoot([]),
TranslateTestingModule
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'},
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AuthorDetailPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(AuthorDetailPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
......@@ -10,12 +10,14 @@
<ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
<ion-title>{{ 'AUTHOR_SELECT' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button>
<ion-menu-button autoHide="false">
<ion-icon name="md-menu"></ion-icon>
</ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-content class="ion-padding">
<ion-grid>
<ion-row>
<ion-col>
......@@ -50,7 +52,7 @@
<ion-row>
<ion-col size="12">
<label>
<ion-icon name="search" class="search"></ion-icon>
<ion-icon name="md-search" class="search"></ion-icon>
<input type="search" (ngModelChange)="getAuthors($event.toString())"
placeholder="{{ 'AUTHOR_SEARCH' | translate }}" [(ngModel)]="currentSearchValue"/>
</label>
......
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { AuthorPage } from './author.page';
import {AuthorPage} from './author.page';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {HttpClientModule} from '@angular/common/http';
import {IonicStorageModule} from '@ionic/storage';
import {TranslateTestingModule} from '../translate-testing/translate-testing.module';
import {APP_BASE_HREF} from '@angular/common';
describe('AuthorPage', () => {
let component: AuthorPage;
let fixture: ComponentFixture<AuthorPage>;
let component: AuthorPage;
let fixture: ComponentFixture<AuthorPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AuthorPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AuthorPage,
],
imports: [
FormsModule,
HttpClientModule,
IonicStorageModule.forRoot(),
RouterModule.forRoot([]),
TranslateTestingModule,
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'},
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AuthorPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(AuthorPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
......@@ -4,7 +4,7 @@
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-content class="ion-padding">
<ion-grid>
<ion-row>
<ion-col>
......
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ConfirmCancelPage } from './confirm-cancel.page';
import {ConfirmCancelPage} from './confirm-cancel.page';
import {HttpClientModule} from '@angular/common/http';
import {IonicStorageModule} from '@ionic/storage';
import {RouterModule} from '@angular/router';
import {TranslateTestingModule} from '../translate-testing/translate-testing.module';
import {APP_BASE_HREF} from '@angular/common';
describe('ConfirmCancelPage', () => {
let component: ConfirmCancelPage;
let fixture: ComponentFixture<ConfirmCancelPage>;
let component: ConfirmCancelPage;
let fixture: ComponentFixture<ConfirmCancelPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ConfirmCancelPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(async(() => {