Implemented support for component parameters in class attribute for #44

src/views/products/ProductContentRenderer.tsx

@@ -62,13 +62,30 @@ import { isViewContent } from "./types/ViewContent";
  */
 export class ProductContentRenderer {
 
+    private static ComponentParamPrefix = "Component.Param.";
+
     /**
      *
      * @param value
+     * @param context
      */
-    public static prepareClassName (value: readonly string[] | undefined) : string {
+    public static prepareClassName (
+        value: readonly string[] | undefined,
+        context : RendererContext,
+    ) : string {
         if (!value) return "";
-        return value.join(' ');
+        return value.map((item: string) : string => {
+            if (item.startsWith(this.ComponentParamPrefix) && context?.componentContent && context?.stateContent) {
+                const key = item.substring(this.ComponentParamPrefix.length)
+                const data : {[key: string]: Content | readonly Content[] | null | undefined} = context.stateContent as unknown as {[key: string]: Content | readonly Content[] | null | undefined};
+                if (Object.prototype.hasOwnProperty.call(data, key) && data[key]) {
+                    if (isString(data[key])) {
+                        return data[key] as unknown as string
+                    }
+                }
+            }
+            return item
+        }).join(' ');
     }
 
     /**
@@ -83,7 +100,7 @@ export class ProductContentRenderer {
         return {
             imageSrc     : value?.image,
             imageLink    : value?.imageLink,
-            imageClasses : this.prepareClassName(value?.classes),
+            imageClasses : this.prepareClassName(value?.classes, context),
             description  : this.render(value.description, context),
             note         : this.render(value.note, context)
         };
@@ -119,8 +136,8 @@ export class ProductContentRenderer {
 
         if (isString(content)) {
 
-            if (content.startsWith("Component.Param.") && context?.componentContent && context?.stateContent) {
-                const key = content.substring("Component.Param.".length)
+            if (content.startsWith(this.ComponentParamPrefix) && context?.componentContent && context?.stateContent) {
+                const key = content.substring(this.ComponentParamPrefix.length)
                 const data : {[key: string]: Content | readonly Content[] | null | undefined} = context.stateContent as unknown as {[key: string]: Content | readonly Content[] | null | undefined};
                 if (Object.prototype.hasOwnProperty.call(data, key) && data[key]) {
                     return this.render(data[key], context);
@@ -221,7 +238,7 @@ export class ProductContentRenderer {
                 title={this.render(content.title, context)}
                 steps={content.steps ? this.prepareSteps(content.steps ?? [], context) : undefined}
                 content={content.content ? this.render(content.content, context) : undefined}
-                styling={content?.classes ? this.prepareClassName(content?.classes ?? []) : undefined}
+                styling={content?.classes ? this.prepareClassName(content?.classes ?? [], context) : undefined}
                 initialOpen={content?.initialOpen}
             >{this.render(content?.body, context)}</UnfoldableCard2>;
         }
@@ -237,7 +254,7 @@ export class ProductContentRenderer {
                             context.contentActions[action]()
                         }
                     }}
-                    styling={this.prepareClassName(content.classes)}
+                    styling={this.prepareClassName(content.classes, context)}
                 >{this.render(content?.body, context)}</Button>
             }
 
@@ -246,7 +263,7 @@ export class ProductContentRenderer {
                 return <Button
                     variant={content.variant}
                     onClick={() => context.navigate(where)}
-                    styling={this.prepareClassName(content.classes)}
+                    styling={this.prepareClassName(content.classes, context)}
                 >{this.render(content?.body, context)}</Button>
             }
 
@@ -262,7 +279,7 @@ export class ProductContentRenderer {
                             console.log(`Opening modal: ${modal}: `, item);
                             context.openDownloadModal(item)
                         }}
-                        styling={this.prepareClassName(content.classes)}
+                        styling={this.prepareClassName(content.classes, context)}
                     >{this.render(content?.body, context)}</Button>
                 }
 
@@ -273,7 +290,7 @@ export class ProductContentRenderer {
                     onClick={() => {
                         console.warn(`Warning! The modal was unknown type: ${modal}: `, item);
                     }}
-                    styling={this.prepareClassName(content.classes)}
+                    styling={this.prepareClassName(content.classes, context)}
                 >{this.render(content?.body, context)}</Button>
             }
 
@@ -283,7 +300,7 @@ export class ProductContentRenderer {
                 onClick={() => {
                     console.warn(`Warning! Button did not have any action defined: `, content);
                 }}
-                styling={this.prepareClassName(content.classes)}
+                styling={this.prepareClassName(content.classes, context)}
             >{this.render(content?.body, context)}</Button>
 
         }
@@ -299,80 +316,80 @@ export class ProductContentRenderer {
         if (isBaseParentContent(content)) {
 
             if (content?.type === ContentType.DIV) {
-                return <div className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</div>
+                return <div className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</div>
             }
 
             if (content?.type === ContentType.SPAN) {
-                return <span className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</span>
+                return <span className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</span>
             }
 
             if (content?.type === ContentType.H1) {
-                return <h1 className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</h1>
+                return <h1 className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</h1>
             }
 
             if (content?.type === ContentType.H2) {
-                return <h2 className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</h2>
+                return <h2 className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</h2>
             }
 
             if (content?.type === ContentType.H3) {
-                return <h3 className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</h3>
+                return <h3 className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</h3>
             }
 
             if (content?.type === ContentType.H4) {
-                return <h4 className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</h4>
+                return <h4 className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</h4>
             }
 
             if (content?.type === ContentType.H5) {
-                return <h5 className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</h5>
+                return <h5 className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</h5>
             }
 
             if (content?.type === ContentType.H6) {
-                return <h6 className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</h6>
+                return <h6 className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</h6>
             }
 
             if (content?.type === ContentType.UL) {
-                return <ul className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</ul>
+                return <ul className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</ul>
             }
 
             if (content?.type === ContentType.LI) {
-                return <li className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</li>
+                return <li className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</li>
             }
 
             if (content?.type === ContentType.I) {
-                return <i className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</i>
+                return <i className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</i>
             }
 
             if (content?.type === ContentType.P) {
-                return <p className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</p>
+                return <p className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</p>
             }
 
             if (content?.type === ContentType.EM) {
-                return <em className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</em>
+                return <em className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</em>
             }
 
             if (content?.type === ContentType.STRONG) {
-                return <strong className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</strong>
+                return <strong className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</strong>
             }
 
             if (content?.type === ContentType.A) {
-                return <a className={this.prepareClassName(content.classes)}>{this.render(content?.body, context)}</a>
+                return <a className={this.prepareClassName(content.classes, context)}>{this.render(content?.body, context)}</a>
             }
 
         }
 
         if (isBaseContent(content)) {
 
             if (content?.type === ContentType.HR) {
-                return <hr className={this.prepareClassName(content.classes)} />
+                return <hr className={this.prepareClassName(content.classes, context)} />
             }
 
             if (content?.type === ContentType.BR) {
-                return <br className={this.prepareClassName(content.classes)} />
+                return <br className={this.prepareClassName(content.classes, context)} />
             }
 
             if (content?.type === ContentType.IMG) {
                 return <img
-                    className={this.prepareClassName(content.classes)}
+                    className={this.prepareClassName(content.classes, context)}
                     alt={(content as unknown as {alt ?: string}).alt}
                     src={(content as unknown as {src ?: string}).src}
                 />

src/views/products/data/TakQuickstartAndroid2.html

@@ -1 +1,71 @@
-<View name="TakQuickstartAndroid2" path="quickstart/android2"></View>
+<View name="TakQuickstartAndroid2" path="quickstart/android2">
+  <div class="pb-20">
+    <Layout
+      showNavbar="true"
+      showFooter="false"
+      navbarTitle="TakQuickstartAndroid2.navbarTitle"
+      backUrl="/app/services/tak/quickstart"
+    >
+      <StatusBar
+        title="TakQuickstartAndroid2.statusBarTitle"
+        progressMax="5"
+        progressNow="2"
+      ></StatusBar>
+      <CardsContainer>
+        <div class="flex flex-col items-center w-full gap-2 justify-center p-5">
+          <ServiceInfoCard
+            title="ATAK"
+            image="../../../assets/icons/tak-logo.png"
+            details="TakQuickstartAndroid2.serviceInfoCard.details"
+          ></ServiceInfoCard>
+          <UnfoldableCard
+            title="TakQuickstartAndroid2.unfoldableCard1.title"
+            class="bg-backgroundLight"
+          >
+            <Description>TakQuickstartAndroid2.unfoldableCard1.description1</Description>
+            <Image class="m-3 w-[300px]"
+                  src="../../../assets/takguides/atak/02-DataPackage.png"
+            ></Image>
+            <Description>TakQuickstartAndroid2.unfoldableCard1.description2</Description>
+          </UnfoldableCard>
+          <UnfoldableCard
+            title="TakQuickstartAndroid2.unfoldableCard2.title"
+            class="bg-backgroundLight"
+          >
+            <Image
+              src="../../../assets/takguides/atak/03-EtsiKansio.png"
+              class="m-3 w-[300px]"
+            ></Image>
+            <Description>TakQuickstartAndroid2.unfoldableCard2.description2</Description>
+            <Description>TakQuickstartAndroid2.unfoldableCard2.description3</Description>
+          </UnfoldableCard>
+          <UnfoldableCard
+            title="TakQuickstartAndroid2.unfoldableCard3.title"
+            class="bg-backgroundLight"
+          >
+            <Description>TakQuickstartAndroid2.unfoldableCard3.description1</Description>
+            <Image
+              src="../../../assets/takguides/atak/04-Done.png"
+              class="m-3 w-[300px]"
+            ></Image>
+            <Description>TakQuickstartAndroid2.unfoldableCard3.description2</Description>
+            <Image
+              src="../../../assets/takguides/atak/05-SaatIlmoituksen.png"
+              class="m-3 w-[300px]"
+            ></Image>
+            <Description>TakQuickstartAndroid2.unfoldableCard3.description3</Description>
+            <Image
+              src="../../../assets/takguides/atak/06-VarmistaYhteys.png"
+              class="m-3 w-[300px]"
+            ></Image>
+            <Description>TakQuickstartAndroid2.unfoldableCard3.description4</Description>
+          </UnfoldableCard>
+        </div>
+      </CardsContainer>
+      <NavigateButtons
+        backUrl="/app/services/tak/quickstart/android1"
+        forwardUrl="/app/services/tak/quickstart/android3"
+      ></NavigateButtons>
+    </Layout>
+  </div>
+</View>

src/views/products/data/translations/ServiceTak.en.json

@@ -29,5 +29,19 @@
   "takQuickstartAndroid1.unfoldableCard3.title": "3. Open the ATAK app and grant it the requested permissions",
   "takQuickstartAndroid1.unfoldableCard3.description1": "Open the app. Grant all permissions the application requests.",
   "takQuickstartAndroid1.unfoldableCard3.description2": "<em>If the application gives an error message, select Wait.</em>",
-  "takQuickstartAndroid1.serviceInfoCardTitle": "ATAK"
+  "takQuickstartAndroid1.serviceInfoCardTitle": "ATAK",
+  "TakQuickstartAndroid2.navbarTitle": "ATAK Quickstart",
+  "TakQuickstartAndroid2.statusBarTitle": "Import your Client Package (2/5)",
+  "TakQuickstartAndroid2.serviceInfoCard.details": "ATAK Quickstart - phase 2: <strong>Import your Client Package</strong><br>Recommendation: Pair up - one displays the instructions, the other follows them. The ATAK application should be open at this stage.",
+  "TakQuickstartAndroid2.unfoldableCard1.title": "1. In TAK, <strong>Open</strong> the <em>Select Data Package</em> menu.",
+  "TakQuickstartAndroid2.unfoldableCard1.description1": "When opening the app for the first time, the TAK Device Setup appears. <br>Select <strong>Data Package</strong>.",
+  "TakQuickstartAndroid2.unfoldableCard1.description2": "The <strong><em>Select Data Package</em></strong> menu will open.",
+  "TakQuickstartAndroid2.unfoldableCard2.title": "2. <strong>Find</strong> and <strong>select</strong> the message base zip",
+  "TakQuickstartAndroid2.unfoldableCard2.description2": "Find the folder where you downloaded your Client Package file '<strong>Name.zip</strong>' <br>Tip: Press <strong>Date</strong> to see the most recently downloaded file, likely your client package.",
+  "TakQuickstartAndroid2.unfoldableCard2.description3": "Select the file.",
+  "TakQuickstartAndroid2.unfoldableCard3.title": "3. Press <strong>Done</strong> - settings will load",
+  "TakQuickstartAndroid2.unfoldableCard3.description1": "Press <strong>Done</strong>.",
+  "TakQuickstartAndroid2.unfoldableCard3.description2": "You will receive several notifications about the loading of configuration files.",
+  "TakQuickstartAndroid2.unfoldableCard3.description3": "The initial configuration is complete.",
+  "TakQuickstartAndroid2.unfoldableCard3.description4": "Check from the bottom right corner that your server connection has been activated (green light)."
 }

src/views/products/data/translations/ServiceTak.fi.json

@@ -29,5 +29,19 @@
   "takQuickstartAndroid1.unfoldableCard3.title": "3. Avaa sovellus ja anna sille sen kysymät oikeudet",
   "takQuickstartAndroid1.unfoldableCard3.description1": "Avaa sovellus. Anna kaikki oikeudet, mitä applikaatio pyytää.",
   "takQuickstartAndroid1.unfoldableCard3.description2": "<em>Jos applikaatio antaa virheilmoituksen, valitse Wait.</em>",
-  "takQuickstartAndroid1.serviceInfoCardTitle": "ATAK"
+  "takQuickstartAndroid1.serviceInfoCardTitle": "ATAK",
+  "TakQuickstartAndroid2.navbarTitle": "ATAK käyttöönotto",
+  "TakQuickstartAndroid2.statusBarTitle": "Aseta viestiperusteet (2/5)",
+  "TakQuickstartAndroid2.serviceInfoCard.details": "ATAK käyttöönotto - vaihe 2: <strong>aseta viestiperusteet</strong><br>Suositus: Aseta parin kanssa - toinen näyttää ohjeita, toinen tekee. Tässä vaiheessa ATAK-sovelluksen tulee olla auki.",
+  "TakQuickstartAndroid2.unfoldableCard1.title": "1. <strong>Avaa</strong> <em>Select Data Package</em> -valikko",
+  "TakQuickstartAndroid2.unfoldableCard1.description1": "Avatessa sovellus ensimmäistä kertaa, aukeaa TAK Device Setup. <br>Valitse <strong>Data Package</strong>.",
+  "TakQuickstartAndroid2.unfoldableCard1.description2": "<strong><em>Select Data Package</em></strong>-valikko aukeaa.",
+  "TakQuickstartAndroid2.unfoldableCard2.title": "2. <strong>Etsi</strong> ja <strong>valitse</strong> viestiperuste-zip",
+  "TakQuickstartAndroid2.unfoldableCard2.description2": "Etsi kansio, johon latasit viestiperustetiedostosi <strong>Nimi.zip</strong><br>Vinkki: Paina <strong>Date</strong> nähdäksesi viimeisimpänä ladatun tiedoston, todennäköisesti viestiperusteesi.",
+  "TakQuickstartAndroid2.unfoldableCard2.description3": "Valitse tiedosto.",
+  "TakQuickstartAndroid2.unfoldableCard3.title": "3. Paina <strong>Done</strong> - asetukset latautuu",
+  "TakQuickstartAndroid2.unfoldableCard3.description1": "Paina <strong>Done</strong>.",
+  "TakQuickstartAndroid2.unfoldableCard3.description2": "Saat muutaman ilmoituksen konfiguraatiotiedostojen latautumisesta.",
+  "TakQuickstartAndroid2.unfoldableCard3.description3": "Alkukonfiguraatio on valmis.",
+  "TakQuickstartAndroid2.unfoldableCard3.description4": "Tarkista oikeasta alakulmasta, että palvelinyhteytesi on aktivoitunut (vihreä merkkivalo)."
 }