Added fix to display uploaded images to dashboard

COS301-SE-2023 · Sep 15, 2023 · 3514d48 · 3514d48
1 parent 47a4725
commit 3514d48
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 43 deletions.
diff --git a/libs/app/components/src/lib/dashboard-page/dashboard-page.component.ts b/libs/app/components/src/lib/dashboard-page/dashboard-page.component.ts
@@ -11,7 +11,7 @@ import 'chartjs-plugin-datalabels';
 import ChartStreaming from 'chartjs-plugin-streaming';
 import { AppApiService } from '@event-participation-trends/app/api';
 import { ActivatedRoute, Router } from '@angular/router';
-import { IGetEventDevicePositionResponse, IGetEventFloorlayoutResponse, IGetEventResponse, IPosition } from '@event-participation-trends/api/event/util';
+import { IGetEventDevicePositionResponse, IGetEventFloorlayoutResponse, IGetEventResponse, IImage, IPosition } from '@event-participation-trends/api/event/util';
 import { set } from 'mongoose';
 
 import { matKeyboardDoubleArrowUp, matKeyboardDoubleArrowDown } from "@ng-icons/material-icons/baseline";
@@ -71,6 +71,7 @@ export class DashboardPageComponent implements OnInit {
   largeScreen = false;
   mediumScreen = false;
   floorlayoutSnapshot: string | null = null;  
+  floorlayoutImages: IImage[] = [];
   STALL_IMAGE_URL = 'assets/stall-icon.png';
 
   // Functional
@@ -181,6 +182,9 @@ export class DashboardPageComponent implements OnInit {
     const layout = await this.appApiService.getEventFloorLayout(this.id);
     this.floorlayoutSnapshot = layout;
 
+    const images = await this.appApiService.getFloorLayoutImages(this.id);
+    this.floorlayoutImages = images;
+
     const eventStartDate = this.event.event.StartDate;
     const eventEndDate = this.event.event.EndDate;
 
@@ -583,7 +587,9 @@ export class DashboardPageComponent implements OnInit {
 
   async getImageFromJSONData(eventId: string) {
     const response = this.floorlayoutSnapshot;
-    if (response) {
+    const imageResponse = this.floorlayoutImages;
+
+    if (response || imageResponse) {
       // use the response to create an image
       this.floorlayoutStage = new Konva.Stage({
         container: 'floormap',
@@ -645,48 +651,73 @@ export class DashboardPageComponent implements OnInit {
 
       // this.floorlayoutStage.add(new Konva.Layer().add(rect));
 
-      // create node from JSON string
-      this.heatmapLayer = Konva.Node.create(response, 'floormap');
-      if (this.heatmapLayer) {
-        this.heatmapLayer?.setAttr('name', 'floorlayoutLayer');
-
-        // run through the layer and set the components not to be draggable
-        this.heatmapLayer?.children?.forEach(element => {
-          element.draggable(false);
-        });
-
-        // run through the layer and change the colors of the walls
-        this.heatmapLayer?.find('Path').forEach((path) => {
-          if (path.name() == 'wall') {
-            path.attrs.stroke = this.chartColors['ept-blue-grey'];
-          }
-        });
-        // run through the layer and change the colors of the border of the sensors
-        this.heatmapLayer?.find('Circle').forEach((circle) => {
-          if (circle.name() == 'sensor') {
-            circle.attrs.stroke = this.chartColors['ept-blue-grey'];
-          }
-        });
-        // run through the layer and change the image attribute for the stalls
-        this.heatmapLayer?.find('Group').forEach((group) => {
-          if (group.name() == 'stall') {
-            (group as Konva.Group).children?.forEach((child) => {
-              if (child instanceof Konva.Image) {
-                const image = new Image();
-                image.onload = () => {
-                  // This code will execute once the image has finished loading.
-                  child.attrs.image = image;
-                  this.heatmapLayer?.draw();
-                };
-                image.src = this.STALL_IMAGE_URL;
-              }
+      if (response) {
+        this.heatmapLayer = Konva.Node.create(response, 'floormap');
+        if (this.heatmapLayer) {
+          this.heatmapLayer?.setAttr('name', 'floorlayoutLayer');
+
+          // run through the layer and set the components not to be draggable
+          this.heatmapLayer?.children?.forEach(element => {
+            element.draggable(false);
+          });
+
+          // run through the layer and change the colors of the walls
+          this.heatmapLayer?.find('Path').forEach((path) => {
+            if (path.name() == 'wall') {
+              path.attrs.stroke = this.chartColors['ept-blue-grey'];
+            }
+          });
+          // run through the layer and change the colors of the border of the sensors
+          this.heatmapLayer?.find('Circle').forEach((circle) => {
+            if (circle.name() == 'sensor') {
+              circle.attrs.stroke = this.chartColors['ept-blue-grey'];
+            }
+          });
+          // run through the layer and change the image attribute for the stalls
+          this.heatmapLayer?.find('Group').forEach((group) => {
+            if (group.name() == 'stall') {
+              (group as Konva.Group).children?.forEach((child) => {
+                if (child instanceof Konva.Image) {
+                  const image = new Image();
+                  image.onload = () => {
+                    // This code will execute once the image has finished loading.
+                    child.attrs.image = image;
+                    this.heatmapLayer?.draw();
+                  };
+                  image.src = this.STALL_IMAGE_URL;
+                }
+              });
+            }
+          });
+
+          imageResponse.forEach((image: any) => {
+            const imageID = image._id;
+            const imageSrc = image.imageBase64;
+
+            this.heatmapLayer?.find('Group').forEach((group) => {
+              if (group.name() === 'uploadedFloorplan') {
+                if (group.getAttr('databaseID') === imageID) {
+                    (group as Konva.Group).children?.forEach((child) => {
+                      if (child instanceof Konva.Image) {
+                        const image = new Image();
+                        image.onload = () => {
+                          // This code will execute once the image has finished loading.
+                          child.attrs.image = image;
+                          this.heatmapLayer?.draw();
+                        };
+                        image.src = imageSrc;
+                      }
+                    });
+                  }
+                }
+              });
             });
-          }
-        });
-
-        // // add the node to the layer
-        this.floorlayoutStage.add(this.heatmapLayer);
+
+          // // add the node to the layer
+          this.floorlayoutStage.add(this.heatmapLayer);
+        }
       }
+
 
       // add event listener to the layer for scrolling
       const zoomFactor = 1.2; // Adjust this as needed

diff --git a/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.ts b/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.ts
@@ -2629,7 +2629,7 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
 
         // remove the grid lines, transformers and groups from the JSON data
         json.children = json.children.filter((child: any) => {
-          return child.attrs.name === 'wall' || child.attrs.name === 'stall' || child.attrs.name === 'sensor' || child.attrs.name === 'textBox';
+          return child.attrs.name === 'wall' || child.attrs.name === 'stall' || child.attrs.name === 'sensor' || child.attrs.name === 'textBox' || child.attrs.name === 'uploadedFloorplan';
         });
 
         const adjustedJson = JSON.parse(JSON.stringify(json));