PR (RO-2394) Language support for all components

src/components/varsom-attachment/varsom-attachment.tsx

@@ -1,5 +1,6 @@
 import { Component, Prop, h } from '@stencil/core';
-
+import { Element } from '@stencil/core';
+import { getLocaleComponentStrings } from '../../utils/locale';
 
 @Component({
   tag: 'varsom-attachment',
@@ -9,12 +10,12 @@ import { Component, Prop, h } from '@stencil/core';
 })
 export class VarsomAttachment {
 
+  private strings: any
   @Prop() RegistrationName: any;
   @Prop() Comment: any;
   @Prop() Url: any;
   @Prop() Photographer: any;
   @Prop() Copyright: any;
-  @Prop() strings?: any;
   @Prop() AttachmentId?: any;
   @Prop() GeoHazardName?: any;
   @Prop() GeoHazardTID?: any;
@@ -23,6 +24,7 @@ export class VarsomAttachment {
   @Prop() AttachmentMimeType?: any;
   @Prop() IsMainAttachment?: any;
   @Prop() CropImage?: boolean;
+  @Element() elem: HTMLElement;
 
   modal: HTMLElement;
   closeBtn: HTMLElement;
@@ -33,6 +35,10 @@ export class VarsomAttachment {
   popup.document.write(image);
  }
 
+ async componentWillLoad(){
+  this.strings = await getLocaleComponentStrings(this.elem);
+    }
+
   render(){
     return <div class="images-container">
 <figure>

src/components/varsom-avalanche-activity-obs/varsom-avalanche-activity-obs.tsx

@@ -1,8 +1,10 @@
 import { Component, Prop, h } from '@stencil/core';
 import { Attachment } from '../varsom-observation/observation-model';
-import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale';
 
 
+import { Element } from '@stencil/core';
+import { getLocaleComponentStrings } from '../../utils/locale';
+
 @Component({
   tag: 'varsom-avalanche-activity-obs',
   styleUrl: 'varsom-avalanche-activity-obs.css',
@@ -11,7 +13,7 @@ import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale'
 })
 export class VarsomAvalancheActivityObs {
 
-  @Prop({mutable: true}) strings: any;
+  private strings: any
   @Prop() header: any;
   @Prop() shortVersion: any;
   @Prop() AvalancheActivityObsID: any;
@@ -34,9 +36,10 @@ export class VarsomAvalancheActivityObs {
   @Prop() Comment: any;
   @Prop() Attachments: Attachment[];
 
-  async componentWillLoad(){
-    if (!this.strings)
-    this.strings = await getLocaleComponentStrings(getLocaleFromDom());
+  @Element() elem: HTMLElement;
+
+async componentWillLoad(){
+ this.strings = await getLocaleComponentStrings(this.elem);
   }
 
   render(){

src/components/varsom-avalanche-activity-obs2/varsom-avalanche-activity-obs2.tsx

@@ -2,8 +2,7 @@ import { Component, Prop, h} from '@stencil/core';
 import { Attachment } from '../varsom-observation/observation-model';
 import { valueIsNotGiven } from '../../utils/utils';
 import { getStartEndTimeFormatted } from '../../utils/date-utils';
-import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale';
-
+import { Element } from '@stencil/core';
 
 @Component({
   tag: 'varsom-avalanche-activity-obs2',
@@ -13,7 +12,7 @@ import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale'
 })
 export class VarsomAvalancheActivityObs2 {
 
-  @Prop({mutable: true}) strings: any;
+  private strings: any
   @Prop() Comment: any;
   @Prop() shortVersion: any;
   @Prop() AvalCauseName: any;
@@ -44,10 +43,6 @@ export class VarsomAvalancheActivityObs2 {
 
   }
 
-  async componentWillLoad(){
-    if (!this.strings)
-    this.strings = await getLocaleComponentStrings(getLocaleFromDom());
-  }
 
   render(){
     return <div>

src/components/varsom-avalanche-danger-obs/varsom-avalanche-danger-obs.tsx

@@ -1,7 +1,7 @@
 import { Component, Prop, h } from '@stencil/core';
 import { Attachment } from '../varsom-observation/observation-model';
-import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale';
-
+import { getLocaleComponentStrings} from '../../utils/locale';
+import { Element } from '@stencil/core';
 
 @Component({
   tag: 'varsom-avalanche-danger-obs',
@@ -11,17 +11,18 @@ import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale'
 })
 export class VarsomAvalancheDangerObs {
 
-  @Prop({mutable: true}) strings: any;
+  private strings: any
   @Prop() shortVersion: any;
   @Prop() DangerSignName: any;
   @Prop() AvalancheDangerObsID: any;
   @Prop() Comment: any;
   @Prop() DangerSignTID: any;
   @Prop() Attachments: Attachment[];
 
-  async componentWillLoad(){
-    if (!this.strings)
-    this.strings = await getLocaleComponentStrings(getLocaleFromDom());
+  @Element() elem: HTMLElement;
+
+async componentWillLoad(){
+ this.strings = await getLocaleComponentStrings(this.elem);
   }
 
   render(){

src/components/varsom-avalanche-eval-problem/varsom-avalanche-eval-problem.tsx

@@ -1,8 +1,10 @@
 import { Component, Prop, h } from '@stencil/core';
 import { Attachment } from '../varsom-observation/observation-model';
-import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale';
+import { getLocaleComponentStrings } from '../../utils/locale';
 
 
+import { Element } from '@stencil/core';
+
 @Component({
   tag: 'varsom-avalanche-eval-problem',
   styleUrl: 'varsom-avalanche-eval-problem.css',
@@ -11,7 +13,7 @@ import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale'
 })
 export class VarsomAvalancheEvalProblem {
 
-  @Prop({mutable: true}) strings: any;
+  private strings: any
   @Prop() shortVersion: any;
   @Prop() AvalancheEvalProblemID: any;
   @Prop() AvalProbabilityTID: any;
@@ -33,9 +35,10 @@ export class VarsomAvalancheEvalProblem {
   @Prop() Comment: any;
   @Prop() Attachments: Attachment[];
 
-  async componentWillLoad(){
-    if (!this.strings)
-    this.strings = await getLocaleComponentStrings(getLocaleFromDom());
+  @Element() elem: HTMLElement;
+
+async componentWillLoad(){
+ this.strings = await getLocaleComponentStrings(this.elem);
   }  
 
   render(){

src/components/varsom-avalanche-eval-problem2/varsom-avalanche-eval-problem2.tsx

@@ -1,7 +1,7 @@
 import { Component, Prop, h} from '@stencil/core';
 import { Attachment } from '../varsom-observation/observation-model';
-import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale';
-
+import { getLocaleComponentStrings } from '../../utils/locale';
+import { Element } from '@stencil/core';
 
 @Component({
   tag: 'varsom-avalanche-eval-problem2',
@@ -11,7 +11,7 @@ import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale'
 })
 export class VarsomAvalancheEvalProblem2 {
 
-  @Prop({mutable: true}) strings: any;
+  private strings: any
   @Prop() shortVersion: any;
   @Prop() AvalProbabilityTID: any;
   @Prop() AvalProbabilityName: any;
@@ -43,9 +43,10 @@ export class VarsomAvalancheEvalProblem2 {
   @Prop() Comment: any;
   @Prop() Attachments: Attachment[];
 
-  async componentWillLoad(){
-    if (!this.strings)
-    this.strings = await getLocaleComponentStrings(getLocaleFromDom());
+  @Element() elem: HTMLElement;
+
+async componentWillLoad(){
+ this.strings = await getLocaleComponentStrings(this.elem);
   }
 
   render(){

src/components/varsom-avalanche-evaluation/varsom-avalanche-evaluation.tsx

@@ -1,7 +1,9 @@
 import { Component, Prop, h } from '@stencil/core';
 import { getDangerTypeSvg } from '../../utils/utils';
 import { Attachment } from '../varsom-observation/observation-model';
-import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale';
+
+import { Element } from '@stencil/core';
+import { getLocaleComponentStrings } from '../../utils/locale';
 
 @Component({
   tag: 'varsom-avalanche-evaluation',
@@ -11,7 +13,7 @@ import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale'
 })
 export class VarsomAvalancheEvaluation {
 
-  @Prop({mutable: true}) strings: any;
+  private strings: any
   @Prop() shortVersion: any;
   @Prop() RegID: any;
   @Prop() CanPublish: any;
@@ -31,9 +33,10 @@ export class VarsomAvalancheEvaluation {
   @Prop() Comment: any;
   @Prop() Attachments: Attachment[];
 
-  async componentWillLoad(){
-    if (!this.strings)
-    this.strings = await getLocaleComponentStrings(getLocaleFromDom());
+  @Element() elem: HTMLElement;
+
+async componentWillLoad(){
+ this.strings = await getLocaleComponentStrings(this.elem);
   }
 
   render(){

src/components/varsom-avalanche-evaluation2/varsom-avalanche-evaluation2.tsx

@@ -2,8 +2,9 @@ import { Component, Prop, h} from '@stencil/core';
 import { getDangerTypeSvg } from '../../utils/utils';
 
 import { Attachment, AvalancheEvalProblem } from '../varsom-observation/observation-model';
-import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale';
 
+import { Element } from '@stencil/core';
+import { getLocaleComponentStrings } from '../../utils/locale';
 
 @Component({
   tag: 'varsom-avalanche-evaluation2',
@@ -13,7 +14,7 @@ import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale'
 })
 export class VarsomAvalancheEvaluation2 {
 
-  @Prop({mutable: true}) strings: any;
+  private strings: any
   @Prop() shortVersion: any;
   @Prop() AvalancheDangerName: any;
   @Prop() ValidExposition: any;
@@ -30,9 +31,10 @@ export class VarsomAvalancheEvaluation2 {
   @Prop() AvalancheEvalProblems: any[];
   @Prop() Attachments: Attachment[];
 
-  async componentWillLoad(){
-    if (!this.strings)
-    this.strings = await getLocaleComponentStrings(getLocaleFromDom());
+  @Element() elem: HTMLElement;
+
+async componentWillLoad(){
+ this.strings = await getLocaleComponentStrings(this.elem);
   }
 
   render(){
@@ -78,7 +80,7 @@ export class VarsomAvalancheEvaluation2 {
       <div>
       {this.AvalancheEvalProblems.map((el: AvalancheEvalProblem = {}) =>{
             return <varsom-avalanche-eval-problem
-            strings={this.strings}
+
             shortVersion={this.shortVersion ? this.shortVersion : null}
             AvalancheEvalProblemID={el.AvalancheEvalProblemID ? el.AvalancheEvalProblemID : null}
             AvalProbabilityTID={el.AvalProbabilityTID ? el.AvalProbabilityTID : null}

src/components/varsom-avalanche-evaluation3/varsom-avalanche-evaluation3.tsx

@@ -1,8 +1,8 @@
 import { Component, Prop, h} from '@stencil/core';
 import { getDangerTypeSvg, valueIsNotGiven } from '../../utils/utils';
 import { Attachment } from '../varsom-observation/observation-model';
-import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale';
-
+import { getLocaleComponentStrings } from '../../utils/locale';
+import { Element } from '@stencil/core';
 
 @Component({
   tag: 'varsom-avalanche-evaluation3',
@@ -12,7 +12,7 @@ import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale'
 })
 export class VarsomAvalancheEvaluation3 {
 
-  @Prop({mutable: true}) strings: any;
+  private strings: any
   @Prop() shortVersion: any;
   @Prop() AvalancheDangerName: any;
   @Prop() ForecastCorrectName: any;
@@ -22,11 +22,10 @@ export class VarsomAvalancheEvaluation3 {
   @Prop() ForecastCorrectTID: any;
   @Prop() ForecastComment: any;
   @Prop() Attachments: Attachment[];
-
+  @Element () elem: HTMLElement;
 
   async componentWillLoad(){
-    if (!this.strings)
-    this.strings = await getLocaleComponentStrings(getLocaleFromDom());
+ this.strings = await getLocaleComponentStrings(this.elem);
   }
 
   render(){

src/components/varsom-avalanche-obs/varsom-avalanche-obs.tsx

@@ -1,8 +1,8 @@
 import { Component, Prop, h} from '@stencil/core';
 import { Attachment, Observation } from '../varsom-observation/observation-model';
 import { getStartEndTimeFormatted } from '../../utils/date-utils';
-import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale';
-
+import { getLocaleComponentStrings } from '../../utils/locale';
+import { Element } from '@stencil/core';
 
 @Component({
   tag: 'varsom-avalanche-obs',
@@ -12,7 +12,7 @@ import { getLocaleComponentStrings, getLocaleFromDom } from '../../utils/locale'
 })
 export class VarsomAvalancheObs {
 
-  @Prop({mutable: true}) strings: any;
+  private strings: any
   @Prop() shortVersion: any;
   @Prop() DestructiveSizeName: any;
   @Prop() AvalancheTriggerName: any;
@@ -45,15 +45,36 @@ export class VarsomAvalancheObs {
   @Element() elem: HTMLElement;
 
   get avalancheTimeFormatted(): string {
-    return getStartEndTimeFormatted(this.DtAvalancheTime, null);
+    return getStartEndTimeFormatted(this.DtAvalancheTime, null, this.elem);
   }
 
   async componentWillLoad(){
-    if (!this.strings)
-    this.strings = await getLocaleComponentStrings(getLocaleFromDom());
+ this.strings = await getLocaleComponentStrings(this.elem);
+  }
+
+  get formatStartStopInfo(): string {
+
+    if (this.HeightStartZone === -1){  //start height not given. It wil only show stop height
+      return `${this.strings.Observations.AvalancheObs.Avalanche} ${this.strings.Observations.AvalancheObs.HeightStopZoneText}
+      ${this.HeightStopZone} ${this.strings.Observations.AvalancheObs.MetersAboveSeaLevel}
+    `
+    }
+
+    if (this.HeightStopZone === -1){  //stop height not given. It wil only show start height
+      return `${this.strings.Observations.AvalancheObs.Avalanche} ${this.strings.Observations.AvalancheObs.HeightStartZoneText} ${this.HeightStartZone} 
+      ${this.strings.Observations.AvalancheObs.MetersAboveSeaLevel} 
+     `
+    }
+    else       //both values given. Shows start and stop values
+      return `${this.strings.Observations.AvalancheObs.Avalanche} ${this.strings.Observations.AvalancheObs.HeightStartZoneText} ${this.HeightStartZone} 
+      ${this.strings.Observations.AvalancheObs.MetersAboveSeaLevel} ${this.strings.Observations.AvalancheObs.And} ${this.strings.Observations.AvalancheObs.HeightStopZoneText}
+      ${this.HeightStopZone} ${this.strings.Observations.AvalancheObs.MetersAboveSeaLevel}
+    `
   }
 
   render(){
+
+
     return <div class="obs-container"> 
 
     <varsom-label