Skip to content

Commit

Permalink
Added integration for image uploading
Browse files Browse the repository at this point in the history
  • Loading branch information
@08Arno30
08Arno30 committed Sep 11, 2023
1 parent 38ca6f9 commit b909582
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 14 deletions.
18 changes: 18 additions & 0 deletions libs/app/api/src/lib/app-api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,14 @@ import {
IGetAllEventCategoriesResponse,
IGetAllEventsResponse,
IGetEventDevicePositionResponse,
IGetEventFloorlayoutImageResponse,
IGetEventFloorlayoutResponse,
IGetEventResponse,
IGetFloorplanBoundariesResponse,
IGetManagedEventCategoriesResponse,
IGetManagedEventsResponse,
IGetUserViewingEventsResponse,
IImage,
IImageUploadRequest,
IImageUploadResponse,
IPosition,
Expand Down Expand Up @@ -376,6 +378,22 @@ export class AppApiService {
return response.status || Status.FAILURE;
}

async getFloorLayoutImages(
eventId: string
): Promise<IImage[]> {
const response = await firstValueFrom(
this.http.get<IGetEventFloorlayoutImageResponse>(
`/api/event/getFloorLayoutImage?eventId=${eventId}`,
{
headers: {
'x-csrf-token': this.cookieService.get('csrf'),
},
}
)
);
return response.images || [];
}

async getNewEventSensorId(): Promise<string> {
const response = await firstValueFrom(
this.http.get<IgetNewEventSensorIdResponse>(
Expand Down
93 changes: 79 additions & 14 deletions libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -720,10 +720,65 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
});
this.initialHeight = this.canvasContainer.height();

const newCanvas = new Konva.Layer();
const apiPromises: Promise<any>[] = [];

this.route.queryParams.subscribe(params => {
const newCanvas = new Konva.Layer();
let uploadedImagesLayer = new Konva.Layer();

const firstPromise = this.appApiService.getFloorLayoutImages(this.eventId).then((response: any) => {
if (response === null || response === '' || response.length === 0) return;

response.forEach((obj: any) => {
const imageObjects = obj.imageObj;
const imageBase64 = obj.imageBase64;
const imageType = obj.imageType;
const imageScale = obj.imageScale;

if (imageObjects && imageBase64) {
uploadedImagesLayer = Konva.Node.create(JSON.parse(imageObjects), 'next-container');

const group = new Konva.Group(uploadedImagesLayer.getAttrs());
group.setAttrs({
x: uploadedImagesLayer.getAttr('x') ? uploadedImagesLayer.getAttr('x') : 0,
y: uploadedImagesLayer.getAttr('y') ? uploadedImagesLayer.getAttr('y') : 0,
draggable: true,
cursor: 'move',
});

uploadedImagesLayer.children?.forEach(child => {
const image = new Konva.Image(child.getAttrs());
const img = new Image();
img.src = imageBase64;
image.setAttr('image', img);
image.setAttr('x', child.getAttr('x') ? child.getAttr('x') : 0);
image.setAttr('y', child.getAttr('y') ? child.getAttr('y') : 0);

const uploadedImage: UploadedImage = {
id: image.id(),
type: imageType,
scale: imageScale,
base64: imageBase64
};
this.uploadedImages.push(uploadedImage);

group.add(image);
this.setMouseEvents(group);
const newDroppedItem = {
name: 'uploadedFloorplan',
konvaObject: group,
};
this.canvasItems.push(newDroppedItem);
newCanvas.add(group);
});
}
});
// this.reorderCanvasItems();
});

this.appApiService.getEventFloorLayout(this.eventId).then((res: any) => {
apiPromises.push(firstPromise);

const secondPromise = this.appApiService.getEventFloorLayout(this.eventId).then((res: any) => {
if (res === null || res === '') {
this.defaultBehaviour(newCanvas);
return;
Expand All @@ -736,7 +791,7 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
width: width*0.995, //was 0.9783
height: window.innerHeight-40,
});
this.canvas = Konva.Node.create(json, 'container');
this.canvas = Konva.Node.create(json, 'container');

this.canvas.children?.forEach(child => {
let type : KonvaTypes;
Expand Down Expand Up @@ -774,11 +829,18 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{

this.canvasItems.push({name: child.getAttr('name'), konvaObject: type});
});
});

this.defaultBehaviour(newCanvas);
this.moveSensorsAndTooltipsToTop();
this.centerFloorPlan();
});
apiPromises.push(secondPromise);

Promise.all(apiPromises).then(() => {

this.defaultBehaviour(newCanvas);
this.moveSensorsAndTooltipsToTop();
this.centerFloorPlan();
this.reorderCanvasItems();
});

});
}, 6);

Expand Down Expand Up @@ -2349,11 +2411,6 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
}

onFloorplanUploaded(floorplan: Konva.Image): void {
console.log({
type: this.uploadedImageType,
scale: this.uploadedImageScale,
base64: this.uploadedImageBase64
})
const newFloorplanImage = new Konva.Image({
x: 0,
y: 0,
Expand Down Expand Up @@ -2400,7 +2457,16 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
reorderCanvasItems() : void {
//take the canvas layer and reorder the items such that the uploaded floorplan is at the bottom, stalls, walls and textboxes are one level above
// and the sensors then one level above that and finally the tooltips are at the top
const canvasItems = this.canvas.children;

let canvasItems = null;
if (!this.canvas || !this.canvas.children) {
this.canvas = this.canvasContainer.getLayers()[0];
canvasItems = this.canvas.children;
}
else {
canvasItems = this.canvas.children;
}

const newCanvas = new Konva.Layer();

if (!canvasItems) return;
Expand Down Expand Up @@ -2512,7 +2578,6 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
});
this.canvasContainer.add(newCanvas);
this.canvas.draw();
console.log(this.canvas);
}

adjustJSONData(json: Record<string, any>): void {
Expand Down

0 comments on commit b909582

Please sign in to comment.