From 47a4725dfc33caf5788e007de2d20778aabb0c9d Mon Sep 17 00:00:00 2001 From: Arno Date: Fri, 15 Sep 2023 09:44:23 +0200 Subject: [PATCH] Fixed rendering of stall icon on dashboard --- .../dashboard-page.component.ts | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 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 index 77db4152..9a91d687 100644 --- a/libs/app/components/src/lib/dashboard-page/dashboard-page.component.ts +++ b/libs/app/components/src/lib/dashboard-page/dashboard-page.component.ts @@ -70,7 +70,8 @@ export class DashboardPageComponent implements OnInit { showStatsOnSide = false; largeScreen = false; mediumScreen = false; - floorlayoutSnapshot: string | null = null; + floorlayoutSnapshot: string | null = null; + STALL_IMAGE_URL = 'assets/stall-icon.png'; // Functional eventStartTime: Date = new Date(); @@ -646,7 +647,6 @@ export class DashboardPageComponent implements OnInit { // create node from JSON string this.heatmapLayer = Konva.Node.create(response, 'floormap'); - console.log(this.heatmapLayer) if (this.heatmapLayer) { this.heatmapLayer?.setAttr('name', 'floorlayoutLayer'); @@ -667,6 +667,22 @@ export class DashboardPageComponent implements OnInit { 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; + } + }); + } + }); // // add the node to the layer this.floorlayoutStage.add(this.heatmapLayer);