Added: - Fixed Header - Accordeon Structure in Thabella - Language Selection

package-lock.json

@@ -1557,6 +1557,22 @@
         "webpack-sources": "1.4.3"
       }
     },
+    "@ngx-translate/core": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-13.0.0.tgz",
+      "integrity": "sha512-+tzEp8wlqEnw0Gc7jtVRAJ6RteUjXw6JJR4O65KlnxOmJrCGPI0xjV/lKRnQeU0w4i96PQs/jtpL921Wrb7PWg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@ngx-translate/http-loader": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-6.0.0.tgz",
+      "integrity": "sha512-LCekn6qCbeXWlhESCxU1rAbZz33WzDG0lI7Ig0pYC1o5YxJWrkU9y3Y4tNi+jakQ7R6YhTR2D3ox6APxDtA0wA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -7785,6 +7801,11 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ngx-translate-cache": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/ngx-translate-cache/-/ngx-translate-cache-9.0.2.tgz",
+      "integrity": "sha512-DHIIJMw1KaDSwwAvBVMVWS6LQHKwNGJpXyFEh/j5Yohh5sLNvD/dUD3X7UF1qmlGnGoeuBjlDh9NEmKYbkywcQ=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

package.json

@@ -21,6 +21,9 @@
     "@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"

src/app/app.component.css

@@ -10,9 +10,25 @@
   bottom: 0;
   height: 45px;
   line-height: 45px;
-  width: 99%;
-  background-color: darkgrey;
+  width: 99.%;
+  background-color: #313131;
   text-align: center;
 }
 
+footer p {
+  font-size: 13px;
+  color: #CCC;
+  padding-bottom: 0px;
+  margin: 4px 0 0 0;
+}
+
+.app-toolbar {
+  position: sticky;
+  position: -webkit-sticky; 
+  top: 0; 
+  z-index: 1000;
+}
 
+.spacer {
+  flex: 1 1 auto;
+}
\ No newline at end of file

src/app/app.component.html

-<mat-toolbar color="primary">
-  <mat-toolbar-row>
-    <span><a href=""><img src="/assets/THD-Logo.png" height="50"></a></span>
-  </mat-toolbar-row>
-</mat-toolbar>
+<div class="app-toolbar">
+  <mat-toolbar color="primary">
+    <mat-toolbar-row>
+      <span><a href=""><img src="/assets/THD-Logo.png" height="50"></a></span>
+      <span class="spacer"></span>
+      <app-select-language></app-select-language>    
+    </mat-toolbar-row>
+  </mat-toolbar>
 
-<nav mat-tab-nav-bar backgroundColor="primary">
-  <a mat-tab-link routerLink="/navigation">Navigation</a>
-  <a mat-tab-link routerLink="/events">Events</a>
-  <a mat-tab-link routerLink="/international">News</a>
-  <a mat-tab-link routerLink="/thabella">Thabella</a>
-  <a mat-tab-link routerLink="/login">Login</a>
-</nav>
+  <nav mat-tab-nav-bar backgroundColor="primary">
+    <a mat-tab-link routerLink="/navigation">{{'cNavigation'|translate}}</a>
+    <a mat-tab-link routerLink="/events">Events</a>
+    <a mat-tab-link routerLink="/international">News</a>
+    <a mat-tab-link routerLink="/thabella">Thabella</a>
+    <a mat-tab-link routerLink="/login">Login</a>
+  </nav>
+</div>
+
+<img src="/assets/THD_Background.jpg" width="100%" height="30%">
 
 <div class="main">
   <router-outlet></router-outlet>

src/app/app.module.ts

@@ -20,10 +20,16 @@ import { LoginComponent } from './login/login.component';
 import { EventComponent } from './events/event.component';
 import { ThabellaComponent } from './thabella/thabella.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatExpansionModule } from '@angular/material/expansion';
 // Material Components
 import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTabsModule } from  '@angular/material/tabs';
+import { I18nModule } from './i18n/i18n.module';
+import { SelectLanguageComponent } from './select-language/select-language.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
 
 @NgModule({
   declarations: [
@@ -34,7 +40,8 @@ import { MatTabsModule } from  '@angular/material/tabs';
     InternationalComponent,
     LoginComponent,
     EventComponent,
-    ThabellaComponent
+    ThabellaComponent,
+    SelectLanguageComponent
   ],
   imports: [
     BrowserModule,
@@ -50,7 +57,13 @@ import { MatTabsModule } from  '@angular/material/tabs';
     MatButtonModule,
     MatToolbarModule,
     MatTabsModule,
-    BrowserAnimationsModule],
+    BrowserAnimationsModule,
+    MatExpansionModule,
+    I18nModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    ReactiveFormsModule],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/i18n/i18n.module.ts

+/**
+ * Module for I18n, used by Select Language Component
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { TranslateLoader, TranslateModule, TranslateService } from
+  '@ngx-translate/core';
+import {
+  TranslateCacheModule, TranslateCacheSettings,
+  TranslateCacheService
+} from 'ngx-translate-cache';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: translateLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
+    TranslateCacheModule.forRoot({
+      cacheService: {
+        provide: TranslateCacheService,
+        useFactory: translateCacheFactory,
+        deps: [TranslateService, TranslateCacheSettings]
+      },
+      //cacheMechanism: 'Cookie'
+      cacheMechanism: 'LocalStorage'
+    })
+  ],
+  exports: [TranslateModule]
+})
+export class I18nModule {
+  constructor(translate: TranslateService,
+    translateCacheService: TranslateCacheService) {
+    translateCacheService.init();
+    translate.addLangs(['en', 'de']);
+    const browserLang = translateCacheService.getCachedLanguage()
+      || translate.getBrowserLang();
+  }
+}
+
+export function translateLoaderFactory(httpClient: HttpClient) {
+  return new TranslateHttpLoader(httpClient);
+}
+
+export function translateCacheFactory(
+  translateService: TranslateService,
+  translateCacheSettings: TranslateCacheSettings
+) {
+  return new TranslateCacheService(translateService, translateCacheSettings);
+}

src/app/navigation/navigation.component.css

+.rectangle {
+    height: 50px;
+    width: 100px;
+    background-color: #555;
+    float: left;
+    margin-right: 3.33333%;
+  }
+
+.rectangle_big {
+    height: 50px;
+    width: 200px;
+    background-color: #555;
+    float: left;
+    margin-right: 3.33333%;    
+}
+
+.square {
+    height: 70px;
+    width: 70px;
+    background-color: #555;
+    margin-right: 3.33333%;   
+    margin-bottom: 80px;
+    margin-top: 80px;  
+}
+
+p {
+    font-size: 20px;
+    color: #CCC;
+    margin: 4px 4px 4px 4px;
+    margin-top: 10px;
+}

src/app/navigation/navigation.component.html

-<p>navigation works!</p>
+<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/select-language/select-language.component.css

+.mat-form-field {
+    margin-top: 10px;
+}
\ No newline at end of file

src/app/select-language/select-language.component.html

+<mat-form-field #langFormField appearance="fill">
+    <mat-label>{{langView}}</mat-label>
+        <mat-select #langSelect [(value)]="currLangViewValue" (selectionChange)="changeLanguage($event.value)">
+        <mat-option *ngFor="let lang of languages" [value]="lang.value"
+            [attr.selected]='de'
+        >
+        {{lang.viewValue}}
+        </mat-option>
+    </mat-select>
+</mat-form-field>
\ No newline at end of file

src/app/select-language/select-language.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectLanguageComponent } from './select-language.component';
+import { TranslateFakeLoader, TranslateLoader, TranslateModule } from "@ngx-translate/core";
+
+describe('SelectLanguageComponent', () => {
+  let component: SelectLanguageComponent;
+  let fixture: ComponentFixture<SelectLanguageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SelectLanguageComponent],
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateFakeLoader
+          }
+        })
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectLanguageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  /*
+  it('#changeLanguage() should change #langView',
+    () => {
+      fixture = TestBed.createComponent(SelectLanguageComponent);
+      component = fixture.componentInstance;
+      expect(component.langView).toBeTruthy();
+      expect(typeof component.langView).toEqual('string');
+      // toMatch(/is off/i, 'off at first');
+    })
+    */
+});
\ No newline at end of file

src/app/select-language/select-language.component.ts

+/**
+ * Select Language Component
+ * Defines Interface Languages
+ * Method changeLanguage
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+
+interface Languages {
+  value: string;
+  viewValue: string;
+}
+
+@Component({
+  selector: 'app-select-language',
+  templateUrl: './select-language.component.html',
+  styleUrls: ['./select-language.component.css']
+})
+
+
+export class SelectLanguageComponent implements OnInit {
+
+  ngOnInit() {
+    console.log("SelectLanguageComponent OnInit: " + this.translate.currentLang);
+    switch (this.translate.currentLang) {
+      case 'de':
+        this.langView = "Sprache";
+        this.currLangViewValue = 'DE';
+        break;
+
+      default:
+        this.langView = "Language";
+        this.currLangViewValue = 'EN';
+        break;
+    }
+    console.log("SelectLanguageComponent OnInit: " + this.currLangViewValue);
+  }
+
+  constructor(public translate: TranslateService) { }
+
+  languages: Languages[] = [
+    { value: 'en', viewValue: 'EN' },
+    { value: 'de', viewValue: 'DE' }
+  ]
+
+
+
+  langView = 'Language'; // default language is English
+  currLangViewValue = 'EN';
+
+
+  /**
+   * 
+   * @param l {string}: language string in lower case
+   * sets langView, which is shown in the template
+   */
+  changeLanguage(l: string): void {
+    this.translate.use(l);
+    console.log("changeLanguage: " + l);
+    switch (l) {
+      case 'de': this.langView = 'Sprache'; break;
+      default: this.langView = 'Language'
+    }
+  }
+}

src/app/thabella/thabella.component.css

@@ -21,4 +21,9 @@
 .container_middle {
     margin-left: 50px;
     margin-right: 50px;
-}
\ No newline at end of file
+}
+
+.mat-form-field + .mat-form-field {
+    margin-left: 8px;
+    height: 25px;
+  }
\ No newline at end of file

src/app/thabella/thabella.component.html

@@ -39,24 +39,61 @@
     </div>
 </div>
 
+
+
 <div id="Bauingenieurwesen"> 
-    <h3><b><u> Vorlesungspläne Bauingenieurwesen und Umwelttechnik</u></b></h3>
-    <h3>Bachelor Bauingenieurwesen:</h3>
-    <ul>
-        <li>1. Semester</li>
-        <li>3. Semester</li>
-        <li>7. Semester</li>
-    </ul>
-    <h3>Bachelor Umweltingenieurwesen:</h3>
-    <ul>
-        <li>1. Semester</li>
-        <li>3. Semester</li>
-        <li>7. Semester</li>
-    </ul>
-    <h3>Master Bauingenieurwesen und Umweltingenieurwesen:</h3>
-    <ul>
-        <li>1. Semester</li>
-    </ul>
+    <h3><b><u>Bauingenieurwesen und Umwelttechnik</u></b></h3>
+    <mat-accordion>
+        <mat-expansion-panel (opened)="panelOpenState = true"
+                             (closed)="panelOpenState = false">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h3>Bachelor Bauingenieurwesen:</h3>
+                </mat-panel-title>
+                <mat-panel-description>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <ul>
+                <li>1. Semester</li>
+                <li>3. Semester</li>
+                <li>7. Semester</li>
+            </ul>
+        </mat-expansion-panel>
+    </mat-accordion>
+    <br>
+    <mat-accordion>
+        <mat-expansion-panel (opened)="panelOpenState = true"
+                             (closed)="panelOpenState = false">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h3>Bachelor Umweltingenieurwesen:</h3>
+                </mat-panel-title>
+                <mat-panel-description>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <ul>
+                <li>1. Semester</li>
+                <li>3. Semester</li>
+                <li>7. Semester</li>
+            </ul>
+        </mat-expansion-panel>
+    </mat-accordion>
+    <br>
+    <mat-accordion>
+        <mat-expansion-panel (opened)="panelOpenState = true"
+                             (closed)="panelOpenState = false">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h3>Master Bauingenieurwesen/Umweltingenieurwesen:</h3>
+                </mat-panel-title>
+                <mat-panel-description>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <ul>
+                <li>1. Semester</li>
+            </ul>
+        </mat-expansion-panel>
+    </mat-accordion>
 </div>
 <br><br>
 <div id="Wirtschaftswissenschaften"> 
@@ -98,4 +135,3 @@
         <li>1. Semester</li>
     </ul>
 </div>
-

src/app/thabella/thabella.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./thabella.component.css']
 })
 export class ThabellaComponent implements OnInit {
-
+  panelOpenState = false;
   constructor() { }
 
   ngOnInit(): void {

src/assets/i18n/de.json

+{
+    "languageView": "Sprache",
+    "currentLanguage": "Deutsch",
+    "cStartText": "Willkommen!",
+    "cRooms": "Räume",
+    "cRoomsText": "Räume funktionieren",
+    "cNavigation": "Navigation",
+    "cNavigationText": "Navigation funktioniert",
+    "cInternational": "International",
+    "cInternationalText": "International funktioniert",
+    "cLogin": "Login",
+    "cLoginText": "Bitte geben Sie Ihre E-Mail und das Passwort ein:"
+}
\ No newline at end of file

src/assets/i18n/en.json

+{
+    "languageView": "Language",
+    "currentLanguage": "English",
+    "cStartText": "Welcome!",
+    "cRooms": "Rooms",
+    "cRoomsText": "Rooms works",
+    "cNavigation": "Navigation",
+    "cNavigationText": "Navigation works",
+    "cInternational": "International",
+    "cInternationalText": "International works",
+    "cLogin": "Login",
+    "cLoginText": "Please login with your e-mail and password:"
+}
\ No newline at end of file