Release 1.2 - tussensprint (kostenbaten en genestheid)

Zenmo · Mar 8, 2023 · e660be8 · e660be8
2 parents 24ab69d + 7e033c3
commit e660be8
Show file tree

Hide file tree

Showing 71 changed files with 12,188 additions and 818 deletions.
diff --git a/.devcontainer/docker-entrypoint.sh b/.devcontainer/docker-entrypoint.sh
@@ -46,6 +46,7 @@ load_fixture_data() {
   python manage.py loaddata holon/fixtures/holon-fixture.json
   python manage.py loaddata holon/fixtures/api-fixture.json
   python manage.py loaddata holon/fixtures/main-casusfilter-fixture.json
+  python manage.py loaddata holon/fixtures/graph-colors-fixture.json
 }
 
 setup_frontend () {

diff --git a/.github/workflows/build-push-images-azure.yml b/.github/workflows/build-push-images-azure.yml
@@ -24,6 +24,7 @@ on:
     branches:
       - main
       - production
+      - acceptance
   workflow_dispatch:
 
 permissions:

diff --git a/frontend/api/holon.ts b/frontend/api/holon.ts
@@ -1,6 +1,6 @@
-import { InteractiveElement } from "@/components/Blocks/SectionBlock/KPIS";
 import * as Cookies from "es-cookie";
 import { postRequest } from "./wagtail";
+import { httpGet } from "@/utils/Http";
 
 const API_URL = process.env.NEXT_PUBLIC_WAGTAIL_API_URL || "/wt/api/nextjs";
 
@@ -18,3 +18,15 @@ export async function getHolonKPIs(data: { interactiveElements: InteractiveEleme
 
   return json;
 }
+
+export async function getHolonDataSegments() {
+  return await httpGet(`/api/dummy-kosten-baten`);
+}
+
+export async function getHolonDataSegmentsDetail() {
+  return await httpGet(`/api/dummy-kosten-baten`);
+}
+
+export async function getHolonGraphColor() {
+  return await httpGet(`${API_URL}/v1/graph-colors/`);
+}
diff --git a/frontend/components/Blocks/ButtonsAndMediaBlock/ButtonsAndMediaBlock.tsx b/frontend/components/Blocks/ButtonsAndMediaBlock/ButtonsAndMediaBlock.tsx
@@ -2,15 +2,13 @@ import React from "react";
 import MediaContent from "@/components/MediaContent/MediaContent";
 import { CardItem } from "../../Card/types";
 import Card from "../../Card/Card";
+import { Background } from "../types";
 
 type Props = {
   data: {
     type: string;
     value: {
-      background: {
-        color: string;
-        size: string;
-      };
+      background: Background;
       buttons: CardItem[];
       media: React.ComponentProps<typeof MediaContent>["media"];
       altText: string;

diff --git a/frontend/components/Blocks/ChallengeFeedbackModal/ChallengeFeedbackModal.tsx b/frontend/components/Blocks/ChallengeFeedbackModal/ChallengeFeedbackModal.tsx
@@ -2,71 +2,23 @@ import React, { Fragment, useEffect, useState } from "react";
 import Confetti from "react-confetti";
 import { Dialog, Transition } from "@headlessui/react";
 import Button from "@/components/Button/Button";
+import { FeedbackModal } from "./types";
+import { KPIData } from "../../KPIDashboard/types";
+import { Content } from "../SectionBlock/types";
 
-export type StaticImage = {
-  id?: number;
-  title?: string;
-  img: {
-    alt: string;
-    height: number;
-    width: number;
-    src: string;
-  };
-};
-
-type KPIDashboardProps = {
-  data: Data;
+type ChallengeFeedbackModalProps = {
+  kpis: KPIData;
   loading: boolean;
   dashboardId: string;
-  feedbackmodals: [
-    {
-      id: string;
-      type: string;
-      value: {
-        modaltitle: string;
-        modaltext: string;
-        modaltheme: string;
-        imageSelector: {
-          id: string;
-          title: string;
-          img: StaticImage;
-        };
-        conditions: [
-          {
-            id: string;
-            type: string;
-            value: {
-              parameter: string;
-              operator: string;
-              value: string;
-            };
-          }
-        ];
-      };
-    }
-  ];
-};
-
-type Data = {
-  local: {
-    netload: number;
-    costs: number;
-    sustainability: number;
-    selfSufficiency: number;
-  };
-  national: {
-    netload: number;
-    costs: number;
-    sustainability: number;
-    selfSufficiency: number;
-  };
+  content: Content;
+  feedbackmodals: FeedbackModal[];
 };
 
 export default function ChallengeFeedbackModal({
   kpis,
   content,
   feedbackmodals,
-}: KPIDashboardProps) {
+}: ChallengeFeedbackModalProps) {
   const [modal, setModal] = useState<{
     isOpen: boolean;
   }>({
@@ -91,7 +43,7 @@ export default function ChallengeFeedbackModal({
               conditionItem.type == "interactive_input_condition"
                 ? content?.find(
                     content => content.value.id == parseFloat(conditionItem.value.parameter)
-                  ).currentValue
+                  )?.currentValue
                 : kpis[splittedParameter[0]][splittedParameter[1]];
 
             const conditionValue = parseFloat(conditionItem.value.value);
@@ -132,8 +84,6 @@ export default function ChallengeFeedbackModal({
 
   const modalstyling =
     selectedModal?.value?.modaltheme === "green"
-      ? "bg-holon-green"
-      : selectedModal?.value?.modaltheme === "greenwithconfetti"
       ? "bg-holon-green"
       : selectedModal?.value?.modaltheme === "orange"
       ? "bg-holon-orange"
@@ -167,7 +117,7 @@ export default function ChallengeFeedbackModal({
                   leaveTo="opacity-0 scale-95">
                   <Dialog.Panel
                     className={`w-full p-relative max-w-md min-w-[50vw] transform overflow-hidden rounded p-6 text-center align-middle shadow-xl transition-all text-white flex flex-col gap-4 ${modalstyling}`}>
-                    {selectedModal.value.modaltheme === "greenwithconfetti" && <Confetti />}
+                    {selectedModal.value.modaltheme === "green" && <Confetti />}
                     <Dialog.Title as="h2" className="leading-6 text-2xl font-bold">
                       {selectedModal.value.modaltitle}
                     </Dialog.Title>

diff --git a/frontend/components/Blocks/ChallengeFeedbackModal/types.ts b/frontend/components/Blocks/ChallengeFeedbackModal/types.ts
@@ -0,0 +1,27 @@
+import { StaticImage } from "@/components/ImageSelector/types";
+
+export type FeedbackModal = {
+    id: string;
+    type: string;
+    value: {
+      modaltitle: string;
+      modaltext: string;
+      modaltheme: string;
+      imageSelector: {
+        id: string;
+        title: string;
+        img: StaticImage;
+      };
+      conditions: [
+        {
+          id: string;
+          type: string;
+          value: {
+            parameter: string;
+            operator: string;
+            value: string;
+          };
+        }
+      ];
+    };
+  }
diff --git a/frontend/components/Blocks/ContentBlocks.tsx b/frontend/components/Blocks/ContentBlocks.tsx
@@ -16,50 +16,22 @@ import HeaderFullImageBlock from "./HeaderFullImageBlock/HeaderFullImageBlock";
 import ParagraphBlock from "./ParagraphBlock";
 import TableBlock from "./TableBlock/TableBlock";
 import SectionBlock from "./SectionBlock/SectionBlock";
+import { FeedbackModal } from "./ChallengeFeedbackModal/types";
 
-export type Feedbackmodals = [
-  {
-    id: string;
-    type: string;
-    value: {
-      modaltitle: string;
-      modaltext: string;
-      modaltheme: string;
-      imageSelector: {
-        id: number;
-        title: string;
-        img: {
-          src: string;
-          width: number;
-          height: number;
-          alt: string;
-        };
-      };
-    };
-    conditions: [
-      {
-        id: string;
-        type: string;
-        value: {
-          parameter: string;
-          oparator: string;
-          value: string;
-        };
-      }
-    ];
-  }
-];
+export type Feedbackmodals = [FeedbackModal];
 
 type ContentBlockProps = PageProps<
   TextAndMediaVariant | HeroBlockVariant | TitleBlockVariant | CardBlockVariant
 >;
 
 const ContentBlocks = ({
   content,
+  pagetype,
   feedbackmodals,
 }: {
   content: ContentBlockProps[];
-  feedbackmodals: Feedbackmodals[];
+  feedbackmodals?: Feedbackmodals[];
+  pagetype?: string;
 }) => {
   return (
     <React.Fragment>
@@ -88,6 +60,7 @@ const ContentBlocks = ({
               <SectionBlock
                 key={`section ${contentItem.id}`}
                 data={contentItem}
+                pagetype={pagetype}
                 feedbackmodals={feedbackmodals}
               />
             );

diff --git a/frontend/components/Blocks/HeaderFullImageBlock/HeaderFullImageBlock.tsx b/frontend/components/Blocks/HeaderFullImageBlock/HeaderFullImageBlock.tsx
@@ -1,20 +1,13 @@
+import { StaticImage } from "../../ImageSelector/types";
+
 /* eslint-disable @next/next/no-img-element */
 type Props = {
   data: {
     type: string;
     value: {
       title: string;
       size: React.ElementType;
-      imageSelector: {
-        id: number;
-        title: string;
-        img: {
-          src: string;
-          width: number;
-          height: number;
-          alt: string;
-        };
-      };
+      imageSelector: StaticImage;
       altText: string;
     };
     id: string;

diff --git a/frontend/components/Blocks/HolarchyFeedbackImage/HolarchyFeedbackImage.tsx b/frontend/components/Blocks/HolarchyFeedbackImage/HolarchyFeedbackImage.tsx
@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from "react";
+import { StaticImage } from "@/components/ImageSelector/types";
+import { Content } from "@/components/Blocks/SectionBlock/types";
+
+export type HolarchyFeedbackImageProps = {
+  id: string;
+  type: string;
+  value: {
+    imageSelector: {
+      id: string;
+      title: string;
+      img: StaticImage;
+    };
+    conditions: [
+      {
+        id: string;
+        type: string;
+        value: {
+          parameter: string;
+          operator: string;
+          value: string;
+        };
+      }
+    ];
+  };
+};
+
+type Props = {
+  content: Array<Content>;
+  holarchyfeedbackimages: Array<HolarchyFeedbackImageProps>;
+};
+
+export default function HolarchyFeedbackImage({ content, holarchyfeedbackimages }: Props) {
+  const [selectedImage, setSelectedImage] = useState({});
+
+  useEffect(() => {
+    setSelectedImage({});
+
+    setSelectedImage(
+      //loop through al configured images
+      holarchyfeedbackimages.filter(feedbackimage => {
+        if (feedbackimage.value.conditions.length > 0 && content.length) {
+          //loop through all conditions within image...
+          for (const conditionItem of feedbackimage.value.conditions) {
+            //inputvalue is the vaule of the assessed validator
+            const inputvalue = content?.find(
+              content => content.value.id == parseFloat(conditionItem.value.parameter)
+            )?.currentValue;
+
+            const conditionValue = parseFloat(conditionItem.value.value);
+
+            if (inputvalue == null || inputvalue == undefined) {
+              return false;
+            } else if (conditionItem.value.operator == "bigger" && inputvalue <= conditionValue) {
+              return false;
+            } else if (
+              conditionItem.value.operator == "biggerequal" &&
+              inputvalue < conditionValue
+            ) {
+              return false;
+            } else if (
+              conditionItem.value.operator == "equal" &&
+              inputvalue != conditionItem.value.value
+            ) {
+              return false;
+            } else if (
+              conditionItem.value.operator == "notequal" &&
+              inputvalue == conditionItem.value.value
+            ) {
+              return false;
+            } else if (conditionItem.value.operator == "lower" && inputvalue >= conditionValue) {
+              return false;
+            } else if (
+              conditionItem.value.operator == "lowerequal" &&
+              inputvalue > conditionValue
+            ) {
+              return false;
+            } else {
+            }
+          }
+          return true;
+        }
+      })[0]
+    );
+  }, [content, holarchyfeedbackimages]);
+
+  return (
+    <React.Fragment>
+      {selectedImage && selectedImage.value ? (
+        <img
+          src={selectedImage?.value.imageSelector?.img?.src}
+          alt={selectedImage?.value.imageSelector?.img?.alt}
+          className="image z-10 absolute translate-x-[-50%] translate-y-[-50%] top-1/2 left-1/2 h-[300%] object-contain max-w-none"
+        />
+      ) : (
+        <img
+          src={holarchyfeedbackimages[0]?.value.imageSelector?.img?.src}
+          alt={holarchyfeedbackimages[0].value.imageSelector?.img?.alt}
+          className="image z-10 absolute translate-x-[-50%] translate-y-[-50%] top-1/2 left-1/2	 h-[300%] object-contain max-w-none"
+        />
+      )}
+    </React.Fragment>
+  );
+}