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

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