translate

README.md

@@ -44,3 +44,6 @@
 - https://openapi-generator.tech/docs/installation
 - https://www.kevinboosten.dev/how-i-use-an-openapi-spec-in-my-angular-projects
 
+- https://material.angular.io/
+- https://ng-bootstrap.github.io/#/home
+

matsen-tool/package.json

@@ -22,6 +22,8 @@
     "@angular/platform-browser-dynamic": "^17.0.0",
     "@angular/router": "^17.0.0",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0-rc.2",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.2",

matsen-tool/src/app/app.component.html

@@ -1,9 +1,14 @@
 <!-- nav -->
 <nav class="navbar navbar-expand navbar-dark bg-dark px-3" *ngIf="user">
-    <div class="navbar-nav">
-        <a class="nav-item nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
-        <a class="nav-item nav-link" routerLink="/users" routerLinkActive="active">Users</a>
-        <button class="btn btn-link nav-item nav-link" (click)="logout()">Logout</button>
+    <div class="container-fluid">
+        <div class="navbar-nav">
+            <a class="nav-item nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
+                <img src="./assets/images/specific/matsen_logo.svg" width="247" height="94" alt="{{'basic.company-name' | translate}}" />
+            </a>
+        </div>
+        <div class="navbar-nav">
+            <button class="btn btn-link nav-item nav-link" (click)="logout()">{{'basic.logout' | translate}}</button>
+        </div>
     </div>
 </nav>
 

matsen-tool/src/app/app.component.ts

@@ -4,6 +4,7 @@ import {AccountService} from './_services';
 import {User} from './_models';
 import {Subscription} from "rxjs";
 import {PostJsonld, PostService} from "@app/core/api/v1";
+import {TranslateService} from "@ngx-translate/core";
 
 @Component({
     selector: 'app-root',
@@ -14,7 +15,9 @@ export class AppComponent implements OnInit {
     user?: User | null;
 
 
-    constructor(private postService: PostService, private accountService: AccountService) {
+    constructor(private postService: PostService, private accountService: AccountService, translate: TranslateService) {
+        translate.setDefaultLang('de');
+        translate.use('de');
         this.accountService.user.subscribe(x => this.user = x);
     }
 

matsen-tool/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {ReactiveFormsModule} from '@angular/forms';
-import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
+import {HttpClientModule, HTTP_INTERCEPTORS, HttpClient} from '@angular/common/http';
 
 // used to create fake backend
 import {fakeBackendProvider} from './_helpers';
@@ -15,6 +15,9 @@ import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {ApiModule, Configuration, ConfigurationParameters} from "@app/core/api/v1";
 import {environment} from "@environments/environment";
 import {MatCardModule} from "@angular/material/card";
+import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
+import {TranslateHttpLoader} from "@ngx-translate/http-loader";
+import {NgOptimizedImage} from "@angular/common";
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -24,15 +27,29 @@ export function apiConfigFactory(): Configuration {
     return new Configuration(params);
 }
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+    return new TranslateHttpLoader(http);
+}
+
 @NgModule({
     imports: [
         ApiModule.forRoot(apiConfigFactory),
         BrowserModule,
+        TranslateModule.forRoot({
+            defaultLanguage: 'de',
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient]
+            }
+        }),
         ReactiveFormsModule,
         HttpClientModule,
         NgbModule,
         AppRoutingModule,
-        MatCardModule
+        MatCardModule,
+        NgOptimizedImage
     ],
     declarations: [
         AppComponent,

matsen-tool/src/assets/i18n/de.json

@@ -0,0 +1,7 @@
+{
+  "basic":
+  {
+    "logout": "Logout",
+    "company-name": "MATSEN CHEMIE AG"
+  }
+}

matsen-tool/src/assets/images/specific/matsen_logo.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 493.9 187.1" style="enable-background:new 0 0 493.9 187.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E5271E;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#E5261E;}
+	.st3{clip-path:url(#SVGID_2_);fill:#2B3A43;}
+</style>
+<g>
+	<g>
+		<g>
+			<path class="st0" d="M48.7,152.3c-26.3,0-48.5-17.9-48.7-41.5l0,0V41.5C0.2,17.9,22.4,0,48.7,0l0,0h396.6
+				c13.2,0,25.2,4.5,34.1,11.9l0,0c8.9,7.4,14.6,17.9,14.6,29.6l0,0v69.3c-0.2,23.6-22.4,41.4-48.7,41.5l0,0H48.7L48.7,152.3z"/>
+			<path class="st1" d="M20.6,19.1c-7,5.9-11.2,13.8-11.2,22.3l0,0v69.3c0,8.6,4.1,16.4,11.2,22.3l0,0c7,5.9,17,9.7,28,9.6l0,0
+				h396.6c11.1,0,21-3.8,28-9.6l0,0c7-5.9,11.2-13.8,11.2-22.3l0,0V41.5c0-8.6-4.1-16.4-11.2-22.3l0,0c-7-5.9-17-9.7-28-9.7l0,0
+				H48.7c0,0,0,0,0,0l0,0C37.6,9.5,27.7,13.2,20.6,19.1L20.6,19.1z"/>
+		</g>
+		<g>
+			<g>
+				<path class="st2" d="M50.1,112.4H30.9V40.3h30.4L75,85.6h0.7l13.1-45.3H120v72.1h-19.2l1.9-55.4H102l-18.2,55.4H67.1L48.7,57
+					h-0.6L50.1,112.4z"/>
+				<path class="st2" d="M148.1,100l-3.6,12.4h-20l21.6-72.1h29.2l21.9,72.1h-19.6l-3.7-12.4H148.1z M161.1,54.7H161L152.2,86h17.9
+					L161.1,54.7z"/>
+				<path class="st2" d="M233.8,112.4h-19.2V57h-18.4V40.3h57V57h-19.4V112.4z"/>
+				<path class="st2" d="M292.1,68.5c5.3,0.4,9.7,0.9,13.2,1.6c3.5,0.7,6.2,1.7,8.2,3.2c2,1.4,3.4,3.4,4.1,6c0.8,2.6,1.2,5.9,1.2,10
+					c0,2,0,4-0.1,5.9c-0.1,2-0.4,3.8-1,5.5c-0.6,1.7-1.5,3.4-2.7,4.9c-1.2,1.5-3,2.8-5.3,3.9c-2.3,1.1-5.3,1.9-8.9,2.6
+					c-3.6,0.6-8,0.9-13.3,0.9c-4.6,0-8.8-0.1-12.5-0.4c-3.7-0.3-6.9-1.2-9.6-2.7c-2.7-1.5-4.7-3.9-6.2-7.2
+					c-1.5-3.2-2.2-7.8-2.2-13.7h18.4c0,1.9,0.2,3.3,0.6,4.4c0.4,1.1,1,1.9,2,2.5c0.9,0.6,2.2,0.9,3.7,1.1c1.5,0.2,3.5,0.2,5.9,0.2
+					c2.2,0,4.1-0.1,5.7-0.2c1.5-0.1,2.8-0.4,3.7-0.9c0.9-0.4,1.6-1.1,2-2c0.4-0.9,0.6-2.1,0.6-3.6c0-1.5-0.1-2.7-0.3-3.6
+					c-0.2-0.9-0.6-1.5-1.3-1.9c-0.7-0.4-1.7-0.7-3.1-0.8c-1.3-0.1-3.1-0.3-5.4-0.4l-4.2-0.3c-4.4-0.3-8.4-0.7-11.9-1.1
+					c-3.5-0.4-6.4-1.2-8.8-2.6c-2.4-1.3-4.2-3.4-5.5-6.2c-1.3-2.8-1.9-6.8-1.9-12c0-5.2,0.7-9.2,2.1-12.2c1.4-2.9,3.4-5.1,6-6.6
+					c2.6-1.5,5.8-2.4,9.6-2.7c3.7-0.4,8-0.5,12.7-0.5c3.9,0,7.6,0.1,11.2,0.3c3.6,0.2,6.7,1,9.3,2.3c2.7,1.3,4.8,3.3,6.3,6
+					c1.6,2.7,2.4,6.6,2.4,11.6v3h-18.4c0-1.9-0.2-3.3-0.6-4.3c-0.4-1-1.1-1.7-1.9-2.2c-0.9-0.5-2-0.8-3.3-0.8
+					c-1.3-0.1-3-0.1-4.9-0.1c-2.6,0-4.7,0.1-6.1,0.4c-1.5,0.3-2.6,0.6-3.4,1.2c-0.8,0.5-1.2,1.2-1.4,1.9c-0.2,0.8-0.3,1.7-0.3,2.7
+					c0,1.5,0.2,2.6,0.5,3.4c0.3,0.8,0.9,1.4,1.5,1.8c0.7,0.4,1.5,0.7,2.4,0.8c1,0.2,2.1,0.3,3.4,0.3L292.1,68.5z"/>
+				<path class="st2" d="M347.5,69.2h30.7v13.4h-30.7v14h33.4v15.8h-52.6V40.3h51.9V56h-32.7V69.2z"/>
+				<path class="st2" d="M412.3,112.4h-19.2V40.3h32.5l20.6,55.4h0.8l-1.2-55.4H465v72.1h-32.7L411.9,57h-0.8L412.3,112.4z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="224.7" y="169.4" width="240.3" height="18.4"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<path class="st3" d="M447.3,173.3l5.6,9.5v4.8h3.7v-4.8l5.7-9.5h-4l-3.5,6.4l-3.5-6.4H447.3z M437.6,176.5h3.3
+			c0.4,0,0.8,0.2,1.2,0.5s0.5,0.7,0.5,1.3s-0.2,1-0.5,1.3c-0.3,0.3-0.7,0.5-1.1,0.5h-3.4V176.5z M437.6,187.6v-4.5h2.5l3.2,4.5h4.2
+			l-3.7-5.3c0.8-0.4,1.5-1,1.9-1.7c0.5-0.7,0.7-1.5,0.7-2.4c0-0.6-0.1-1.2-0.4-1.8c-0.3-0.6-0.6-1.1-1.1-1.6c-0.5-0.5-1-0.8-1.6-1.1
+			c-0.6-0.3-1.3-0.4-2.1-0.4H434v14.3H437.6z M432,173.3h-13.5v3.2h4.9v11.2h3.7v-11.2h4.9V173.3z M417,174.7
+			c-0.7-0.4-1.5-0.7-2.5-1.1c-1-0.3-2-0.5-3.1-0.5c-0.8,0-1.5,0.1-2.2,0.3c-0.7,0.2-1.3,0.5-1.8,0.9c-0.5,0.4-0.9,0.9-1.2,1.5
+			c-0.3,0.6-0.5,1.2-0.5,2c0,1.1,0.3,2,1,2.6c0.7,0.6,1.7,1.1,3.1,1.5c0.5,0.2,1,0.3,1.5,0.4c0.5,0.1,0.8,0.2,1.2,0.4
+			c0.3,0.1,0.6,0.3,0.8,0.4c0.2,0.2,0.3,0.3,0.3,0.6c0,0.6-0.6,0.9-1.8,0.9c-0.6,0-1.2-0.1-1.7-0.2s-1.1-0.3-1.5-0.4
+			c-0.5-0.2-0.8-0.4-1.2-0.5c-0.3-0.2-0.5-0.3-0.7-0.5l-1.6,3.2c0.9,0.5,2,0.9,3.1,1.3c1.2,0.3,2.3,0.5,3.5,0.5
+			c0.7,0,1.4-0.1,2.2-0.2c0.7-0.2,1.3-0.4,1.9-0.8c0.5-0.3,1-0.8,1.3-1.4c0.3-0.6,0.5-1.3,0.5-2.1c0-0.7-0.1-1.2-0.3-1.7
+			c-0.2-0.5-0.6-0.9-1-1.2c-0.4-0.3-0.9-0.6-1.5-0.8c-0.6-0.2-1.3-0.4-2-0.7c-0.5-0.1-1-0.3-1.4-0.4c-0.4-0.1-0.7-0.2-1-0.3
+			c-0.3-0.1-0.5-0.2-0.6-0.4c-0.1-0.1-0.2-0.3-0.2-0.5c0-0.6,0.6-0.9,1.8-0.9c0.5,0,0.9,0.1,1.4,0.2c0.4,0.1,0.9,0.2,1.2,0.4
+			c0.4,0.1,0.7,0.3,1,0.4c0.3,0.2,0.4,0.3,0.5,0.4L417,174.7z M402.9,173.3h-3.7v14.3h3.7V173.3z M396.1,187.6v-14.3h-4l-4.2,7.1
+			l-4.2-7.1h-4v14.3h3.7v-8l3.5,5.7h2l3.5-5.7v8H396.1z M369.8,184.4v-2.6h6.3v-3h-6.3v-2.4h7.4v-3.2h-11.1v14.3h11.3v-3.2H369.8z
+			 M359.3,173.3v5.4h-6.4v-5.4h-3.7v14.3h3.7v-5.7h6.4v5.7h3.6v-14.3H359.3z M331.4,181.8c0.4,1.1,1,2.1,1.8,3
+			c0.8,0.9,1.7,1.6,2.8,2.1c1.1,0.5,2.3,0.8,3.6,0.8c0.7,0,1.5-0.1,2.3-0.3c0.8-0.2,1.5-0.5,2.2-0.8c0.7-0.4,1.3-0.8,1.8-1.3
+			c0.5-0.5,0.9-1.1,1.2-1.8l-3.4-2c-0.2,0.5-0.4,0.8-0.7,1.2c-0.3,0.3-0.6,0.6-1,0.8c-0.4,0.2-0.7,0.3-1.1,0.4
+			c-0.4,0.1-0.8,0.1-1.2,0.1c-0.7,0-1.4-0.1-2-0.4c-0.6-0.3-1.1-0.7-1.5-1.2c-0.4-0.5-0.7-1.1-1-1.8c-0.2-0.7-0.3-1.4-0.3-2.1
+			c0-0.7,0.1-1.3,0.3-2c0.2-0.6,0.5-1.2,0.9-1.7c0.4-0.5,0.9-0.9,1.5-1.2c0.6-0.3,1.3-0.5,2.1-0.5c0.4,0,0.8,0,1.1,0.1
+			c0.4,0.1,0.8,0.2,1.1,0.4c0.4,0.2,0.7,0.4,1,0.8c0.3,0.3,0.6,0.7,0.8,1.2l3.2-2.2c-0.6-1.2-1.5-2.1-2.8-2.9
+			c-1.2-0.7-2.7-1.1-4.4-1.1c-1.4,0-2.7,0.3-3.8,0.8c-1.1,0.5-2.1,1.2-2.9,2.1c-0.8,0.8-1.4,1.8-1.8,2.9c-0.4,1.1-0.6,2.2-0.6,3.2
+			C330.7,179.6,331,180.7,331.4,181.8 M319.6,187.6h2.9v-14.3h-3.7v7.8l-7.5-7.8h-2.9v14.3h3.7v-7.6L319.6,187.6z M296.8,176.5h3.3
+			c0.4,0,0.8,0.2,1.2,0.5c0.4,0.3,0.5,0.7,0.5,1.3s-0.2,1-0.5,1.3c-0.3,0.3-0.7,0.5-1.1,0.5h-3.4V176.5z M296.8,187.6v-4.5h2.5
+			l3.2,4.5h4.2l-3.7-5.3c0.8-0.4,1.5-1,1.9-1.7c0.5-0.7,0.7-1.5,0.7-2.4c0-0.6-0.1-1.2-0.4-1.8c-0.3-0.6-0.6-1.1-1.1-1.6
+			c-0.5-0.5-1-0.8-1.6-1.1s-1.3-0.4-2.1-0.4h-7.2v14.3H296.8z M283.1,184.4v-2.6h6.3v-3h-6.3v-2.4h7.4v-3.2h-11.1v14.3h11.3v-3.2
+			H283.1z M273.1,182c-0.2,0.5-0.5,0.9-0.8,1.3s-0.8,0.6-1.4,0.8c-0.5,0.2-1.1,0.3-1.8,0.3h-2.3v-8h2.3c1.4,0,2.4,0.4,3.2,1.1
+			c0.7,0.7,1.1,1.7,1.1,2.9C273.4,181,273.3,181.5,273.1,182 M269.1,187.6c1.2,0,2.3-0.2,3.3-0.5c1-0.3,1.8-0.8,2.5-1.5
+			c0.7-0.6,1.2-1.4,1.6-2.3c0.4-0.9,0.6-1.9,0.6-3c0-1-0.2-1.9-0.5-2.8c-0.3-0.9-0.8-1.6-1.5-2.3s-1.5-1.2-2.5-1.5
+			c-1-0.4-2.2-0.6-3.5-0.6h-6v14.3H269.1z M249.6,179c0.2-0.5,0.4-0.9,0.8-1.3c0.3-0.4,0.7-0.7,1.2-0.9c0.5-0.2,1-0.3,1.7-0.3
+			c0.6,0,1.2,0.1,1.7,0.3c0.5,0.2,0.9,0.5,1.2,0.9c0.3,0.4,0.6,0.8,0.8,1.3c0.2,0.5,0.3,1,0.3,1.5c0,0.5-0.1,1-0.2,1.5
+			s-0.4,0.9-0.7,1.3c-0.3,0.4-0.7,0.7-1.2,0.9c-0.5,0.2-1,0.4-1.7,0.4c-0.6,0-1.2-0.1-1.7-0.3c-0.5-0.2-0.9-0.5-1.2-0.9
+			c-0.3-0.4-0.6-0.8-0.8-1.3c-0.2-0.5-0.3-1-0.3-1.5C249.3,180,249.4,179.5,249.6,179 M256.3,187.2c0.9-0.4,1.7-0.9,2.4-1.6
+			c0.7-0.7,1.2-1.4,1.6-2.3c0.4-0.9,0.6-1.8,0.6-2.7c0-0.9-0.2-1.8-0.5-2.7c-0.4-0.9-0.9-1.7-1.5-2.3s-1.5-1.2-2.4-1.7
+			c-0.9-0.4-2-0.6-3.1-0.6c-1.1,0-2.1,0.2-3.1,0.6c-0.9,0.4-1.8,0.9-2.4,1.6s-1.2,1.4-1.6,2.3c-0.4,0.9-0.6,1.8-0.6,2.7
+			c0,0.9,0.2,1.8,0.5,2.7c0.4,0.9,0.9,1.7,1.6,2.3c0.7,0.7,1.5,1.2,2.4,1.6c0.9,0.4,2,0.6,3.1,0.6
+			C254.3,187.8,255.4,187.6,256.3,187.2 M243.2,187.6v-18.1h-4.5l-4.7,9.5l-4.7-9.5h-4.5v18.1h4.2v-10.8l3.9,7.9h2.2l3.9-7.9v10.8
+			H243.2z"/>
+	</g>
+</g>
+</svg>