Dynamic TAK content from a Rune tool generated JSON file

src/Router.tsx

@@ -8,7 +8,7 @@ import { NotFoundView } from "./views/NotFoundView";
 import { MtlsCreateView } from "./views/mtls/MtlsCreateView";
 import { AdminRouteWrapper } from "./AdminRoutes";
 import { UserRouteWrapper } from "./UserRoutes";
-import { TakRouteWrapper } from "./TakRoutes";
+import { ServiceRouteWrapper } from "./ServiceRoutes";
 
 const router = createBrowserRouter([
   {
@@ -75,7 +75,31 @@ const router = createBrowserRouter([
         requireAuthType="mtls"
         allowedUserTypes={["user", "admin"]}
       >
-        <TakRouteWrapper />
+        <ServiceRouteWrapper serviceName={'tak'} />
+      </ProtectedRoute>
+    ),
+  },
+  {
+    path: "/app/services/livelog/*",
+    element: (
+      <ProtectedRoute
+        requireValidUser={true}
+        requireAuthType="mtls"
+        allowedUserTypes={["user", "admin"]}
+      >
+        <ServiceRouteWrapper serviceName={'livelog'} />
+      </ProtectedRoute>
+    ),
+  },
+  {
+    path: "/app/services/rune/*",
+    element: (
+      <ProtectedRoute
+        requireValidUser={true}
+        requireAuthType="mtls"
+        allowedUserTypes={["user", "admin"]}
+      >
+        <ServiceRouteWrapper serviceName={'rune'} />
       </ProtectedRoute>
     ),
   },

src/ServiceRoutes.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+import { Routes, Route } from "react-router-dom";
+import LoadingComponent from "./components/Loading/LoadingComponent";
+import { useDownloadTakZipModal } from "./components/tak/DownloadTakZipModal";
+import { ContentService } from "./views/products/ContentService";
+import { ServiceView } from "./views/products/ServiceView";
+
+export function ServiceRouteWrapper( props: { serviceName : string }) {
+    const serviceName = props.serviceName;
+    const contentService = ContentService.getProductContentService(serviceName);
+    const viewNames = contentService ? contentService.getAllViewNames() : [];
+    const { t } = useTranslation();
+    const { openDownloadModal, loading } = useDownloadTakZipModal();
+    if (loading) {
+        return <LoadingComponent text={t("takZipDownload.iAmDownloading")} />;
+    }
+    const handleDownloadButtonClick = () => {
+        (openDownloadModal as () => void)();
+    };
+    return (
+        <Routes>{viewNames.map(
+            (viewName: string, index: number) => {
+                const view = contentService?.getView(viewName);
+                const path : string = view?.path ?? viewName;
+                return <Route key={index} path={path} element={
+                    <ServiceView
+                        serviceName={serviceName}
+                        viewName={viewName}
+                        actions={{
+                            'downloadZip': handleDownloadButtonClick,
+                        }}
+                    />
+                } />;
+            })}</Routes>
+    );
+}

src/components/CardsContainer.tsx

@@ -6,7 +6,7 @@ interface CardsContainerProps {
 
 export function CardsContainer({ children }: CardsContainerProps) {
   return (
-    <div className="flex flex-col items-center justify-center mx-2 h-[calc(100vh - 4rem)] md:px-[20%] lg:px-[32%]">
+    <div className="cards-container flex flex-col items-center justify-center mx-2 h-[calc(100vh - 4rem)] md:px-[20%] lg:px-[32%]">
       {children}
     </div>
   );

src/components/DropdownMenu.tsx

@@ -8,7 +8,7 @@ interface DropdownItem {
 
 interface DropdownMenuProps {
   triggerLabel: string;
-  items: DropdownItem[];
+  items: readonly DropdownItem[];
   onSelect: (value: string) => void;
   contentStyle?: string;
   triggerStyle?: string;

src/components/FoldableCard.tsx

@@ -1,12 +1,18 @@
-import React, { useState, useRef } from "react";
+import React, {
+  useState,
+  useRef,
+  ReactNode,
+} from "react";
+import { useTranslation } from "react-i18next";
 
 interface FoldableCardProps {
-  title: string;
+  title: string | ReactNode;
   imageSrc?: string;
   children?: React.ReactNode;
 }
 
 export function FoldableCard({ title, imageSrc, children }: FoldableCardProps) {
+  const { t } = useTranslation(["common", "dynamic"]);
   const [isOpen, setIsOpen] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
 
@@ -32,19 +38,19 @@ export function FoldableCard({ title, imageSrc, children }: FoldableCardProps) {
 
   return (
     <div
-      className="relative flex flex-col w-full p-0 rounded-md cursor-pointer m-2 bg-backgroundLight"
+      className="foldable-card relative flex flex-col w-full p-0 rounded-md cursor-pointer m-2 bg-backgroundLight"
       onClick={handleClick}
     >
       {!isOpen && imageSrc && (
         <img
           src={imageSrc}
-          alt={title}
+          alt={typeof title === 'string' ? title : 'product image'}
           className="w-16 h-16 object-contain self-center mt-2 mb-2"
         />
       )}
 
       <div className="absolute top-0 right-0 flex items-center space-x-2 bg-primary p-2 rounded-tl-lg">
-        <h3 className="text-l text-white">{title}</h3>
+        <h3 className="text-l text-white">{typeof title === 'string' ? t(title) : title}</h3>
         <span
           className={`transform transition-transform duration-300 text-white ${
             isOpen ? "rotate-180" : ""

src/components/NavigateButtons.tsx

@@ -1,9 +1,10 @@
+
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "./Button";
 import { useTranslation } from "react-i18next";
 
-interface NavigateButtonsProps {
+export interface NavigateButtonsProps {
   backUrl: string;
   forwardUrl: string;
   alterBack?: string;
@@ -36,7 +37,7 @@ export function NavigateButtons({
   return (
     <div style={{ marginTop: "95px" }}>
       <div className="fixed bottom-2 left-0 right-0 flex justify-center">
-        <section className="items-start rounded bg-zinc-800 flex rounded-lg max-w min-h-[105px] max-w-full gap-2.5 mt-24 p-2.5 max-md:justify-center">
+        <section className="items-start rounded bg-zinc-800 flex rounded-lg max-w min-h-[105px] max-w-full gap-2.5 p-2.5 max-md:justify-center">
           <Button
             styling={`transform transition-transform duration-200 justify-center items-center rounded ${
               backClicked ? "scale-95" : "scale-100"
@@ -60,7 +61,7 @@ export function NavigateButtons({
             onPointerUp={() => setContinueClicked(false)}
             onClick={handleContinueClick}
           >
-            {alterForward || t("navigateButtons.continue")}
+            {alterForward ? t(alterForward) : t("navigateButtons.continue")}
           </Button>
         </section>
       </div>

src/components/ServiceInfoCard.tsx

@@ -14,7 +14,7 @@ export function ServiceInfoCard({
   children,
 }: ServiceInfoCardProps) {
   return (
-    <div className="flex flex-col items-center justify-center bg-backgroundLight rounded-lg w-full p-2 mb-2 overflow-hidden">
+    <div className="service-info-card flex flex-col items-center justify-center bg-backgroundLight rounded-lg w-full p-2 mb-2 overflow-hidden">
       {title && (
         <h3 className="text-white text-xl font-bold mt-1 mb-1">{title}</h3>
       )}

src/components/StatusBar.tsx

@@ -1,5 +1,7 @@
-interface StatusBarProps {
-  title: string;
+import { ReactNode } from "react";
+
+export interface StatusBarProps {
+  title: ReactNode;
   progressMax: number;
   progressNow: number;
 }

src/components/UnfoldableCard2.tsx

@@ -3,7 +3,7 @@ import { Step, StepProps } from "./Step";
 
 interface UnfoldableCardProps {
   title: React.ReactNode;
-  steps?: StepProps[];
+  steps?: readonly StepProps[];
   content?: React.ReactNode;
   children?: React.ReactNode;
   styling?: string;
@@ -26,7 +26,7 @@ export function UnfoldableCard({
 
   return (
     <div
-      className={`flex flex-col w-full p-4 rounded-md cursor-pointer bg-background ${styling}`}
+      className={`unfoldable-card-2 flex flex-col w-full p-4 rounded-md cursor-pointer bg-background ${styling}`}
       onClick={handleClick}
     >
       <div className="flex justify-between items-center">