added serveral improvments e.g language, latest versions, login

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "compodoc": "npx compodoc -p tsconfig.app.json src",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -16,6 +17,7 @@
     "@angular/common": "~10.0.5",
     "@angular/compiler": "~10.0.5",
     "@angular/core": "~10.0.5",
+    "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "~10.0.5",
     "@angular/material": "^10.2.7",
     "@angular/platform-browser": "~10.0.5",
@@ -29,9 +31,10 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1000.8",
+    "@angular-devkit/build-angular": "^0.1100.1",
     "@angular/cli": "~10.0.4",
     "@angular/compiler-cli": "~10.0.5",
+    "@compodoc/compodoc": "^1.1.11",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",

package.json.bak

+{
+  "name": "mit-ws",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+	"compodoc": "npx compodoc -p tsconfig.app.json src",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~10.0.5",
+    "@angular/cdk": "^10.2.7",
+    "@angular/common": "~10.0.5",
+    "@angular/compiler": "~10.0.5",
+    "@angular/core": "~10.0.5",
+	"@angular/flex-layout": "^11.0.0-beta.33",
+    "@angular/forms": "~10.0.5",
+    "@angular/material": "^10.2.7",
+    "@angular/platform-browser": "~10.0.5",
+    "@angular/platform-browser-dynamic": "~10.0.5",
+    "@angular/router": "~10.0.5",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
+    "ngx-translate-cache": "^9.0.2",
+    "rxjs": "~6.5.5",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^0.1100.1",
+    "@angular/cli": "~10.0.4",
+    "@angular/compiler-cli": "~10.0.5",
+	"@compodoc/compodoc": "^1.1.11",
+    "@types/jasmine": "~3.5.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~3.3.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~3.9.5"
+  }
+}

src/app/admin/admin.component.html

 <div style="text-align:center">
-    <h1>
-      Welcome User with E-Mail {{userName}}!
-    </h1>
-    <p>
-      <button mat-button color="warn" (click)="logout()">
-        Logout
-      </button>
-    </p>
-  </div>
-  
\ No newline at end of file
+  <h1>
+    Welcome User with E-Mail {{userName}}!
+  </h1>
+  <p>
+    <button mat-button color="warn" (click)="logout()">
+      Logout
+    </button>
+  </p>
+</div>

src/app/admin/admin.component.html.bak

+<div style="text-align:center">
+    <h1>
+      Welcome User with E-Mail {{userName}}!
+    </h1>
+    <p>
+      <button mat-button color="warn" (click)="logout()">
+        Logout
+      </button>
+    </p>
+  </div>
+  
\ No newline at end of file

src/app/app.component.spec.ts

 import { TestBed, async } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import { TranslateModule } from "@ngx-translate/core";
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -7,6 +8,9 @@ describe('AppComponent', () => {
       declarations: [
         AppComponent
       ],
+      imports: [
+        TranslateModule.forRoot(),
+      ]
     }).compileComponents();
   }));
 

src/app/app.component.spec.ts.bak

+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'mit-ws'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('mit-ws');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('mit-ws app is running!');
+  });
+});

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'mit-ws-20-21';
+  title = 'thd-navi-app';
 }

src/app/international/international.component.html

-<p>international works!</p>
+<p>{{'cInternationalText'|translate}}</p>

src/app/international/international.component.html.bak

+<p>international works!</p>

src/app/international/international.component.spec.ts

@@ -2,15 +2,21 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { InternationalComponent } from './international.component';
 
+import { TranslateModule } from "@ngx-translate/core";
+
 describe('InternationalComponent', () => {
   let component: InternationalComponent;
   let fixture: ComponentFixture<InternationalComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ InternationalComponent ]
+      declarations: [InternationalComponent],
+      imports: [
+        TranslateModule.forRoot(),
+      ]
+      //providers: [TranslateService]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/app/international/international.component.spec.ts.bak

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InternationalComponent } from './international.component';
+
+describe('InternationalComponent', () => {
+  let component: InternationalComponent;
+  let fixture: ComponentFixture<InternationalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InternationalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InternationalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.component.html

+
 <div>
-    <h2>{{'cLoginText'|translate}}</h2>
-    <form [formGroup]="loginForm" (ngSubmit)="login()">
-      <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
-        <input type="email" placeholder="E-Mail" formControlName="email">
-      </p>
-      <div *ngIf="isSubmitted && formControls.email.errors">
-      <div *ngIf="formControls.email.errors.required">E-Mail is required</div>
-      </div>
-      <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
-        <input type="password" placeholder="Password" formControlName="password">
-      </p> 
-      <div *ngIf="isSubmitted && formControls.password.errors">
-      <div *ngIf="formControls.password.errors.required">Password is required</div>
-      </div>
-      <p>
-        <button mat-button type="submit" color="warn">LOGIN</button>
-        <!-- <input type="submit" value="Log in">-->
-      </p>
-    </form>
-  </div>
-  
\ No newline at end of file
+  <h2>{{'cLoginText'|translate}}</h2>
+  <form [formGroup]="loginForm" (ngSubmit)="login()">
+    <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
+      <input type="email" placeholder="E-Mail" formControlName="email">
+    </p>
+    <div *ngIf="isSubmitted && formControls.email.errors">
+    <div *ngIf="formControls.email.errors.required">E-Mail is required</div>
+    </div>
+    <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
+      <input type="password" placeholder="Password" formControlName="password">
+    </p> 
+    <div *ngIf="isSubmitted && formControls.password.errors">
+    <div *ngIf="formControls.password.errors.required">Password is required</div>
+    </div>
+    <p>
+      <button mat-button type="submit" color="warn">LOGIN</button>
+      <!-- <input type="submit" value="Log in">-->
+    </p>
+  </form>
+</div>

src/app/login/login.component.html.bak

+<div>
+    <h2>{{'cLoginText'|translate}}</h2>
+    <form [formGroup]="loginForm" (ngSubmit)="login()">
+      <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
+        <input type="email" placeholder="E-Mail" formControlName="email">
+      </p>
+      <div *ngIf="isSubmitted && formControls.email.errors">
+      <div *ngIf="formControls.email.errors.required">E-Mail is required</div>
+      </div>
+      <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
+        <input type="password" placeholder="Password" formControlName="password">
+      </p> 
+      <div *ngIf="isSubmitted && formControls.password.errors">
+      <div *ngIf="formControls.password.errors.required">Password is required</div>
+      </div>
+      <p>
+        <button mat-button type="submit" color="warn">LOGIN</button>
+        <!-- <input type="submit" value="Log in">-->
+      </p>
+    </form>
+  </div>
+  
\ No newline at end of file

src/app/navigation/navigation.component.html

+<p>{{'cNavigationText'|translate}}</p>
 <div class="rectangle">
     <p align="center">A</p>
 </div>

src/app/navigation/navigation.component.html.bak

+<div class="rectangle">
+    <p align="center">A</p>
+</div>
+
+<div class="rectangle">
+    <p align="center">B</p>
+</div>
+
+<div class="rectangle_big">
+    <p align="center">C</p>
+</div>
+<br>
+<div class="square">
+    <p align="center">C</p>
+</div>

src/app/navigation/navigation.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NavigationComponent } from './navigation.component';
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
 
 describe('NavigationComponent', () => {
   let component: NavigationComponent;
@@ -8,9 +9,13 @@ describe('NavigationComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NavigationComponent ]
+      declarations: [NavigationComponent],
+      imports: [
+        TranslateModule.forRoot(),
+      ]
+      //providers: [TranslateService]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/app/navigation/navigation.component.spec.ts.bak

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationComponent } from './navigation.component';
+
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavigationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/rooms/rooms.component.html

-<p>rooms works!</p>
+<p>{{'cRoomsText'|translate}}</p>
+