Start adding translation strings

database/readme.txt

@@ -0,0 +1 @@
+Postal codes is pulled from https://download.geonames.org/export/zip/

src/Client/angular.json

@@ -19,7 +19,7 @@
             "assets": [
               {
                 "glob": "**/*",
-                "input": "public"
+                "input": "src/assets"
               }
             ],
             "styles": [

src/Client/src/app/app.ts

@@ -4,6 +4,7 @@ import { Authentication } from './services/Authentication';
 import { CommonModule, Location } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { isDevMode } from '@angular/core';
+import { TranslationService } from './services/translations';
 
 @Component({
   selector: 'app-root',
@@ -16,7 +17,8 @@ export class App {
   devMode: boolean = false;
   loginToken: string | null = null;
 
-  constructor( private http: HttpClient, public auth: Authentication, private router: Router, private route: ActivatedRoute, private location: Location){
+  constructor( private http: HttpClient, public auth: Authentication, private router: Router, private route: ActivatedRoute, private location: Location, public strings: TranslationService){
+    strings.setLanguage("en");
     this.devMode = isDevMode();
     this.route.queryParams.subscribe(params => {
       this.loginToken = params['LoginToken'];

src/Client/src/app/pages/applicationviewer/appviewer.component.html

@@ -7,9 +7,9 @@
             <h1>{{ application.rating }}</h1>
             <h1>{{ application.responseStatus }}</h1>
 
-            <h1>Date Applied: </h1><h1>{{ application.dateApplied }}</h1>
+            <h1>{{ strings.translate("application/viewer", "s Date Applied") }}</h1><h1>{{ application.dateApplied }}</h1>
 
-            <button type="button" (click)="viewResume(application)" >VIEW RESUME</button>
+            <button type="button" (click)="viewResume(application)" >{{ strings.translate("application/viewer", "b View Resume") }}</button>
         </div>
     }
 </div>

src/Client/src/app/pages/applicationviewer/appviewer.component.ts

@@ -6,6 +6,7 @@ import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { Authentication } from 'app/services/Authentication';
 import { Application } from 'app/models/Application';
+import { TranslationService } from 'app/services/translations';
 
 @Component({
   selector: 'App-Viewer',
@@ -18,7 +19,7 @@ export class AppViewerComponent {
 
   public List: Application[] = [];
 
-  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication  ) {
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication, public strings: TranslationService  ) {
     this.title.setTitle("Applications | BoredCareers");
     if (!auth.isLoggedIn){
       router.navigate(["/"]);

src/Client/src/app/pages/company/company.component.html

@@ -46,7 +46,7 @@
                             <div class="center-text">
                                 <h1>{{ listing.title }}</h1>
                             </div>
-                            <button [routerLink]="['/application/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW LISTING</button>
+                            <button [routerLink]="['/application/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW Applicants</button>
                             <button [routerLink]="['/jobs/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW LISTING</button>
                             <button [routerLink]="['/jobs/editor']" [queryParams]="{ JobID: listing.id }" >EDIT LISTING</button>
                             <button (click)="RemoveJobListing(listing.id!)">DELETE LISTING</button>

src/Client/src/app/pages/home/home.component.html

@@ -2,7 +2,7 @@
 
     <div class="center-frame center-text border">
         <h1>Bored Careers</h1>
-        <h2>The Anti-AI Job Board</h2>
+        <h2>{{ strings.translate("home", "s subTitle") }}</h2>
     </div>
 
     <div class="content-frame border">

src/Client/src/app/pages/home/home.component.ts

@@ -4,6 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
+import { TranslationService } from 'app/services/translations';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'main-home',
@@ -13,8 +15,12 @@ import { CommonModule } from '@angular/common';
 })
 export class HomeComponent {
 
-  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title ) {
+  Loaded$: Observable<boolean>;
+
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public strings: TranslationService ) {
     this.title.setTitle("Home | BoredCareers");
+    this.Loaded$ = this.strings.changed$;
+
   };
 
 }

src/Client/src/app/services/translations.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TranslationService {
+
+  private _translations: any = {};
+  private _translationsLoaded: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  constructor(private http: HttpClient) {}
+
+  // Change language dynamically
+  setLanguage(lang: string) {
+    this.http.get(`/lang/${lang}.json`).subscribe({
+      next: data => {
+        this._translations = data;
+        this._translationsLoaded.next(true);
+      },
+      error: err => {
+        this._translations = [];
+        this._translationsLoaded.next(true);
+      }
+    })
+  }
+
+  // Observable for checking if language is loaded
+  get changed$(): Observable<boolean> {
+    return this._translationsLoaded.asObservable();
+  }
+
+  // Get a specific translation
+  translate(page: string, key: string): string {
+    return this._translations[page][key] || key;
+  }
+}

src/Client/src/assets/lang/en.json

@@ -0,0 +1,16 @@
+{
+    "home": {
+        "s subTitle": "The Anti AI Job Board",
+        "emailPlaceholder": "Enter your email",
+        "passwordPlaceholder": "Enter your password",
+        "loginButton": "Login"
+    },
+    "application/viewer": {
+        "s Date Applied": "Date Applied: ",
+        "b View Resume": "VIEW RESUME"
+    },
+    "profile": {
+        "pageTitle": "Your Profile",
+        "editButton": "Edit Profile"
+    }
+}