Skip to content

Commit

Permalink
Merge branch 'dev' of https://github.com/COS301-SE-2023/Event-Partici…
Browse files Browse the repository at this point in the history 
…pation-Trends into dev
  • Loading branch information
@JsteReubsSoftware
JsteReubsSoftware committed Sep 16, 2023
2 parents 2f7d377 + f3b9840 commit af8fa6d
Show file tree
Hide file tree
Showing 4 changed files with 237 additions and 75 deletions.
7 changes: 7 additions & 0 deletions apps/app/src/assets/blueprint-svgrepo-com-blue-grey.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 11 additions & 1 deletion libs/app/components/src/lib/dashboard-page/dashboard-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,14 @@
<div class="mt-16 lg:mt-0 top-0 left-0 w-full h-screen overflow-y-scroll">
<div *ngIf="isLoading" class="top-0 left-0 w-full h-screen flex">
<div class="m-auto flex justify-between">
<h1 class="sm:text-sm md:text-md lg:text-lg xl:text-xl text-ept-blue-grey">Fetching floor plan data</h1>
<span class="loading loading-dots loading-lg ml-3 text-ept-blue-grey ept-of"></span>
</div>
</div>
<div [ngClass]="{'hidden':!noFloorPlan}" class="z-50 mt-16 lg:mt-0 top-0 left-0 w-full h-screen flex flex-col justify-center items-center">
<img src="assets/blueprint-svgrepo-com-blue-grey.svg" class="pointer-events-none rounded-full w-32 h-32 sm:w-36 sm:h-36 lg:w-44 lg:h-44 xl:w-52 xl:h-52" alt="Empty state"/>
<h1 class="sm:text-xl lg:text-2xl xl:text-3xl mt-10">There seems to be no floor plan to provide any data.</h1>
</div>
<div [ngClass]="{'hidden': noFloorPlan}" class="mt-16 lg:mt-0 top-0 left-0 w-full h-screen overflow-y-scroll">
<div class="grid grid-rows-3 w-full h-full" [ngClass]="{'grid-cols-3': !showStatsOnSide, 'grid-cols-4': showStatsOnSide || mediumScreen}">
<div #heatmapContainer class="border-ept-blue-grey border-2 border-solid rounded-2xl relative" [ngClass]="{'col-span-4 md:row-span-2 m-2 lg:m-5 lg:ml-2': !showStatsOnSide, 'col-span-3 row-span-3 m-5 ml-2': showStatsOnSide}" (mouseleave)="hideToggleButton()" (mouseover)="showToggleButton()">
<div
Expand Down
122 changes: 88 additions & 34 deletions libs/app/components/src/lib/dashboard-page/dashboard-page.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CommonModule } from "@angular/common";
import { NgIconsModule, provideIcons } from "@ng-icons/core";
import { Component, OnInit, ViewChild, ElementRef, HostListener } from '@angular/core';
import { Component, OnInit, ViewChild, ElementRef, HostListener, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet.heat';
import Chart, { ChartConfiguration } from 'chart.js/auto';
Expand All @@ -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";
Expand Down Expand Up @@ -45,7 +45,7 @@ interface IHeatmapData {
provideIcons({heroUserGroupSolid, heroBackward, matKeyboardDoubleArrowUp, matKeyboardDoubleArrowDown, matFilterCenterFocus, matZoomIn, matZoomOut})
]
})
export class DashboardPageComponent implements OnInit {
export class DashboardPageComponent implements OnInit, AfterViewInit {
@ViewChild('heatmapContainer') heatmapContainer!: ElementRef<HTMLDivElement>;
@ViewChild('totalUserCountChart') totalUserCountChart!: ElementRef<HTMLCanvasElement>;
@ViewChild('totalDeviceCountChart') totalDeviceCountChart!: ElementRef<HTMLCanvasElement>;
Expand All @@ -70,7 +70,10 @@ export class DashboardPageComponent implements OnInit {
showStatsOnSide = false;
largeScreen = false;
mediumScreen = false;
floorlayoutSnapshot: string | null = null;
floorlayoutSnapshot: string | null = null;
floorlayoutImages: IImage[] = [];
STALL_IMAGE_URL = 'assets/stall-icon.png';
noFloorPlan = false;

// Functional
eventStartTime: Date = new Date();
Expand Down Expand Up @@ -174,11 +177,17 @@ export class DashboardPageComponent implements OnInit {

// get the boundaries from the floorlayout
const response = await this.appApiService.getFloorplanBoundaries(this.id);
this.floorlayoutBounds = response.boundaries;
this.floorlayoutBounds = response?.boundaries;

//get event floorplan
const layout = await this.appApiService.getEventFloorLayout(this.id);
this.floorlayoutSnapshot = layout;
if (!layout) {
this.noFloorPlan = true;
}

const images = await this.appApiService.getFloorLayoutImages(this.id);
this.floorlayoutImages = images;

const eventStartDate = this.event.event.StartDate;
const eventEndDate = this.event.event.EndDate;
Expand Down Expand Up @@ -212,10 +221,10 @@ export class DashboardPageComponent implements OnInit {
this.mediumScreen = false;
}

this.loading = false;
setTimeout(() => {
this.show = true;
}, 200);
this.loading = false;
}, 1600);
}

@HostListener('window:resize', ['$event'])
Expand Down Expand Up @@ -272,6 +281,9 @@ export class DashboardPageComponent implements OnInit {
}

async ngAfterViewInit() {
setTimeout(() => {
this.isLoading = false;
}, 1500);
// wait until the heatmap container is rendered
setTimeout(() => {
// set the number of hours of the event
Expand Down Expand Up @@ -582,7 +594,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',
Expand Down Expand Up @@ -644,33 +658,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');
console.log(this.heatmapLayer)
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'];
}
});

// // add the node to the layer
this.floorlayoutStage.add(this.heatmapLayer);
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 event listener to the layer for scrolling
const zoomFactor = 1.2; // Adjust this as needed
Expand Down
Loading

0 comments on commit af8fa6d

Please sign in to comment.