Team 2 Implemented Language Translation Model

liquid-prep-app/angular.json

@@ -75,7 +75,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "liquid-prep-app:build"
+            "browserTarget": "liquid-prep-app:build",
+            "proxyConfig": "src/proxy.conf.json"
           },
           "configurations": {
             "production": {

liquid-prep-app/package.json

@@ -29,6 +29,7 @@
     "@angular/platform-browser-dynamic": "^13.2.0",
     "@angular/router": "^13.2.0",
     "@angular/service-worker": "^13.2.0",
+    "cors": "^2.8.5",
     "ng2-search-filter": "^0.5.1",
     "ngx-swiper-wrapper": "^10.0.0",
     "ngx-webstorage-service": "^4.1.0",

liquid-prep-app/src/app/app.module.ts

@@ -62,6 +62,7 @@ const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
     BrowserModule,
     MaterialModule,
     AppRoutingModule,
+    HttpClientModule,
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production,
 }),

liquid-prep-app/src/app/components/advice/advice.component.ts

@@ -6,6 +6,9 @@ import { WaterAdviceService } from 'src/app/service/WaterAdviceService';
 import {Crop} from '../../models/Crop';
 import {CropDataService} from '../../service/CropDataService';
 
+import {LanguageTranslatorService} from '../../service/LanguageTranslatorService';
+import { Subscribable } from 'rxjs';
+
 @Component({
   selector: 'app-advice',
   templateUrl: './advice.component.html',
@@ -35,9 +38,14 @@ export class AdviceComponent implements OnInit {
     ['HIGH', 'color-high']
   ]);
 
+  public selectedLanguage = 'spanish';
+  public text_pos: number[] = [];
+  public text_to_trans: string[] = [];
+  public translations: string[] = [];
+
   constructor(
     private route: ActivatedRoute,
-    private router: Router,
+    private router: Router, private languageService: LanguageTranslatorService,
     private waterAdviceService: WaterAdviceService,
     private cropService: CropDataService
   ) {}
@@ -62,6 +70,30 @@ export class AdviceComponent implements OnInit {
     });
   }
 
+  public translate() {
+
+    var allInBody = document.getElementsByTagName('body')[0];
+    var allElements = allInBody.getElementsByTagName('*');
+
+    for (var i = 0; i < allElements.length; i++) {
+      if (!allElements[i].innerHTML.includes("</") && allElements[i].innerHTML.length != 0) {
+        this.text_pos.push(i);
+        console.log(i + ": " + allElements[i].innerHTML);
+        this.text_to_trans.push(allElements[i].innerHTML);
+      }
+    }
+    this.languageService.getTranslation(this.text_to_trans, this.selectedLanguage).subscribe((response: any) => {
+
+      for (i = 0; i < this.text_pos.length; i++) {
+
+        setTimeout(() => {  console.log("waiting ..."); }, 1000);
+        allElements[this.text_pos[i]].innerHTML = response.translations[i].translation;
+
+      }
+    });
+
+  }
+
   public volumeClicked() {
 
   }

liquid-prep-app/src/app/components/measure-soil/measure-soil.component.ts

@@ -8,6 +8,8 @@ import { SoilMoisture } from '../../models/SoilMoisture';
 import { LineBreakTransformer } from './LineBreakTransformer';
 import { Crop, Stage } from '../../models/Crop';
 import { CropDataService } from '../../service/CropDataService';
+import {LanguageTranslatorService} from '../../service/LanguageTranslatorService';
+import { Subscribable } from 'rxjs';
 
 @Component({
   selector: 'app-measure-soil',
@@ -17,7 +19,7 @@ import { CropDataService } from '../../service/CropDataService';
 export class MeasureSoilComponent implements OnInit, AfterViewInit {
   constructor(
     private route: ActivatedRoute,
-    private router: Router,
+    private router: Router, private languageService: LanguageTranslatorService,
     private location: Location,
     private soilService: SoilMoistureService,
     private cropService: CropDataService
@@ -68,6 +70,11 @@ export class MeasureSoilComponent implements OnInit, AfterViewInit {
     ['HIGH', '/assets/moisture-water/soil_moisture_high.png'],
   ]);
 
+  public selectedLanguage = 'spanish';
+  public text_pos: number[] = [];
+  public text_to_trans: string[] = [];
+  public translations: string[] = [];
+
   ngOnInit(): void {
     const cropId = this.route.snapshot.paramMap.get('id');
     this.crop = this.cropService.getCropFromMyCropById(cropId);
@@ -76,6 +83,30 @@ export class MeasureSoilComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit(): void {}
 
+  public translate() {
+
+    var allInBody = document.getElementsByTagName('body')[0];
+    var allElements = allInBody.getElementsByTagName('*');
+
+    for (var i = 0; i < allElements.length; i++) {
+      if (!allElements[i].innerHTML.includes("</") && allElements[i].innerHTML.length != 0) {
+        this.text_pos.push(i);
+        console.log(i + ": " + allElements[i].innerHTML);
+        this.text_to_trans.push(allElements[i].innerHTML);
+      }
+    }
+    this.languageService.getTranslation(this.text_to_trans, this.selectedLanguage).subscribe((response: any) => {
+
+      for (i = 0; i < this.text_pos.length; i++) {
+
+        setTimeout(() => {  console.log("waiting ..."); }, 1000);
+        allElements[this.text_pos[i]].innerHTML = response.translations[i].translation;
+
+      }
+    });
+
+  }
+
   public onSensorConnect(connectionOption) {
     if (connectionOption === 'usb') {
       this.connectUSB().then((sensorValue) => {

liquid-prep-app/src/app/components/my-crops/my-crops.component.html

@@ -3,7 +3,7 @@
   <div class="toolbarTitle"> <b>Today, </b> {{  currentDate }}</div>
   <div class="imgHolder" *ngIf="!todayWeather">
     <mat-icon class="vertical-align-middle primary-blue" *ngIf="loading">hourglass_empty</mat-icon>
-    <div  *ngIf="!loading" (click)="showError(errorMessage)">
+    <div  *ngIf="!loading" (click)="showError(errorMessage)"> 
       <mat-icon class="vertical-align-middle alert-color">error</mat-icon>
     </div>
   </div>
@@ -26,7 +26,16 @@
     </div>
   </div>
 </div>
-
+<div class="select-language" fxLayoutAlign="center">
+  <button mat-button [matMenuTriggerFor]="menu">Select Language</button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item (click)="translate('en-en')">English</button>
+    <button mat-menu-item (click)="translate('en-es')">Español</button>
+    <button mat-menu-item (click)="translate('en-fr')">Français</button>
+    <button mat-menu-item (click)="translate('en-ko')">한국어</button>
+    <button mat-menu-item (click)="translate('en-zh')">中国</button>
+  </mat-menu>
+</div>
 <div *ngIf="myCropStatus == 'crop-selected'">
 
   <button mat-mini-fab class="md-fab-bottom-right" (click)="fabClicked()">

liquid-prep-app/src/app/components/my-crops/my-crops.component.ts

@@ -9,6 +9,9 @@ import { TodayWeather } from 'src/app/models/TodayWeather';
 import { CropDataService } from 'src/app/service/CropDataService';
 import { DateTimeUtil } from 'src/app/utility/DateTimeUtil';
 
+import {LanguageTranslatorService} from '../../service/LanguageTranslatorService';
+import { Subscribable } from 'rxjs';
+
 @Component({
   selector: 'app-my-crops',
   templateUrl: './my-crops.component.html',
@@ -32,8 +35,13 @@ export class MyCropsComponent implements OnInit {
   public myCropStatus: 'no-crop' | 'crop-selected' = 'no-crop';
   public errorMessage = '';
 
+  public selectedLanguage = 'en-ko';
+  public text_pos: number[] = [];
+  public text_to_trans: string[] = [];
+  public translations: string[] = [];
+
   constructor(
-    private router: Router, private location: Location,
+    private router: Router, private location: Location, private languageService: LanguageTranslatorService,
     private weatherService: WeatherDataService, private cropDataService: CropDataService
     ) {
     this.updateWeatherInfo();
@@ -54,7 +62,30 @@ export class MyCropsComponent implements OnInit {
     /*this.dataService.getWeatherInfo().subscribe((weatherInfo: WeatherResponse) => {
       const todayWeather = WeatherService.getInstance().createTodayWeather(weatherInfo);
     });*/
+  }
 
+  public translate(modelID) {
+
+    var allInBody = document.getElementsByTagName('body')[0];
+    var allElements = allInBody.getElementsByTagName('*');
+
+    for (var i = 0; i < allElements.length; i++) {
+      if (!allElements[i].innerHTML.includes("</") && allElements[i].innerHTML.length != 0) {
+        this.text_pos.push(i);
+        console.log(i + ": " + allElements[i].innerHTML);
+        this.text_to_trans.push(allElements[i].innerHTML);
+      }
+    }
+    this.languageService.getTranslation(this.text_to_trans, modelID).subscribe((response: any) => {
+
+      for (i = 0; i < this.text_pos.length; i++) {
+
+        setTimeout(() => {  console.log("waiting ..."); }, 1000);
+        allElements[this.text_pos[i]].innerHTML = response.translations[i].translation;
+
+      }
+    });
+
   }
 
   public tabClicked(tab) {

liquid-prep-app/src/app/components/seed-date/seed-date.component.html

@@ -12,7 +12,16 @@
       </button>
     </mat-toolbar-row>
   </mat-toolbar>
-
+        <div class="select-language" fxLayoutAlign="center">
+          <button mat-button [matMenuTriggerFor]="menu">Select Language</button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="translate('en-en')">English</button>
+            <button mat-menu-item (click)="translate('en-es')">Español</button>
+            <button mat-menu-item (click)="translate('en-fr')">Français</button>
+            <button mat-menu-item (click)="translate('en-ko')">한국어</button>
+            <button mat-menu-item (click)="translate('en-zh')">中国</button>
+          </mat-menu>
+        </div>
   <div class="select-date-container">
     <img mat-card-image class="cardImg" src="/assets/select-seed.png" alt="select seed date" />
     <label class="label">Select a seed date</label>

liquid-prep-app/src/app/components/seed-date/seed-date.component.ts

@@ -6,6 +6,9 @@ import { Crop, Stage } from '../../models/Crop';
 import { CropDataService } from 'src/app/service/CropDataService';
 import { DateTimeUtil } from 'src/app/utility/DateTimeUtil';
 
+import {LanguageTranslatorService} from '../../service/LanguageTranslatorService';
+import { Subscribable } from 'rxjs';
+
 @Component({
   selector: 'app-seed-date',
   templateUrl: './seed-date.component.html',
@@ -18,14 +21,19 @@ export class SeedDateComponent implements OnInit {
   maxDate = new Date();
 
   constructor(
-    private router: Router,
+    private router: Router, private languageService: LanguageTranslatorService,
     private location: Location,
     private route: ActivatedRoute,
     private cropService: CropDataService
   ) {
     this.userSelectiondate = new Date();
   }
 
+  public selectedLanguage = 'spanish';
+  public text_pos: number[] = [];
+  public text_to_trans: string[] = [];
+  public translations: string[] = [];
+
   ngOnInit(): void {
     const cropId = this.route.snapshot.paramMap.get('id');
     this.cropService.getCropData(cropId)
@@ -39,6 +47,30 @@ export class SeedDateComponent implements OnInit {
         }
     );
   }
+
+  public translate(modelID) {
+
+    var allInBody = document.getElementsByTagName('body')[0];
+    var allElements = allInBody.getElementsByTagName('*');
+
+    for (var i = 0; i < allElements.length; i++) {
+      if (!allElements[i].innerHTML.includes("</") && allElements[i].innerHTML.length != 0) {
+        this.text_pos.push(i);
+        console.log(i + ": " + allElements[i].innerHTML);
+        this.text_to_trans.push(allElements[i].innerHTML);
+      }
+    }
+    this.languageService.getTranslation(this.text_to_trans, modelID).subscribe((response: any) => {
+
+      for (i = 0; i < this.text_pos.length; i++) {
+
+        setTimeout(() => {  console.log("waiting ..."); }, 1000);
+        allElements[this.text_pos[i]].innerHTML = response.translations[i].translation;
+
+      }
+    });
+
+  }
 
   public volumeClicked() {
 

liquid-prep-app/src/app/components/select-crop/select-crop.component.html

@@ -23,6 +23,7 @@
     </mat-toolbar-row>
   </mat-toolbar>
 
+
   <mat-toolbar class="search-block mat-elevation-z4" [class.active]="toggleSearch">
     <mat-toolbar-row style="padding: 0 5px;">
       <button class="search-icon" mat-icon-button disabled>
@@ -35,6 +36,9 @@
     </mat-toolbar-row>
   </mat-toolbar>
 
+  <!-- <button mat-flat-button color="primary" (click)="translate()">LANGUAGE
+  </button> -->
+
   <div *ngIf=cropsList>
     <mat-grid-list class="grid" cols="2" rowHeight="1:1"    gutterSize="2px">
       <mat-grid-tile *ngFor="let crop of filterFunction()">
@@ -53,3 +57,5 @@
       </mat-card>
   </div>
 </div>
+
+

liquid-prep-app/src/app/components/select-crop/select-crop.component.ts

@@ -5,6 +5,8 @@ import {Location} from '@angular/common';
 import { CropListResponse } from '../../models/api/CropListResponse';
 import { Crop } from '../../models/Crop';
 import { CropDataService } from '../../service/CropDataService';
+import {LanguageTranslatorService} from '../../service/LanguageTranslatorService';
+import { Subscribable } from 'rxjs';
 
 @Component({
   selector: 'app-select-crop',
@@ -25,7 +27,12 @@ export class SelectCropComponent implements OnInit{
   NO_NEW_CROPS = '';
   public requestingCrop = true;
 
-  constructor(private router: Router, private location: Location,
+  public selectedLanguage = 'spanish';
+  public text_pos: number[] = [];
+  public text_to_trans: string[] = [];
+  public translations: string[] = [];
+
+  constructor(private router: Router, private location: Location, private languageService: LanguageTranslatorService,
               private cropService: CropDataService) { }
 
   ngOnInit(): void {
@@ -47,6 +54,30 @@ export class SelectCropComponent implements OnInit{
       );
   }
 
+  public translate(modelID) {
+
+    var allInBody = document.getElementsByTagName('body')[0];
+    var allElements = allInBody.getElementsByTagName('*');
+
+    for (var i = 0; i < allElements.length; i++) {
+      if (!allElements[i].innerHTML.includes("</") && allElements[i].innerHTML.length != 0) {
+        this.text_pos.push(i);
+        console.log(i + ": " + allElements[i].innerHTML);
+        this.text_to_trans.push(allElements[i].innerHTML);
+      }
+    }
+    this.languageService.getTranslation(this.text_to_trans, modelID).subscribe((response: any) => {
+
+      for (i = 0; i < this.text_pos.length; i++) {
+
+        setTimeout(() => {  console.log("waiting ..."); }, 1000);
+        allElements[this.text_pos[i]].innerHTML = response.translations[i].translation;
+
+      }
+    });
+
+  }
+
   backToMyCrops(){
     this.location.back();
   }