From 5b3b8e6aa8b7cb4678a0038993cca84e331a7001 Mon Sep 17 00:00:00 2001 From: Krzysztof Nazar Date: Wed, 5 Jun 2024 20:52:09 +0200 Subject: [PATCH 1/7] RSWW-138 set up connection with backend and receive data --- .../screens/TOUpdates.tsx | 86 ++++++++++++------- 1 file changed, 56 insertions(+), 30 deletions(-) diff --git a/src/tour-operator-updates/screens/TOUpdates.tsx b/src/tour-operator-updates/screens/TOUpdates.tsx index 91c3457..b1a1e05 100644 --- a/src/tour-operator-updates/screens/TOUpdates.tsx +++ b/src/tour-operator-updates/screens/TOUpdates.tsx @@ -1,6 +1,15 @@ -import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material"; -import {ConnectingAirports, Hotel} from "@mui/icons-material"; -import React from "react"; +import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"; +import { ConnectingAirports, Hotel } from "@mui/icons-material"; +import React, { useEffect, useState } from "react"; + +type HotelUpdate = { + updateDateTime: string; + updateType: string; + hotelName: string; + roomName: string; + priceChange: number; + capacityChange: number; +}; const TOUpdates = () => { @@ -14,30 +23,47 @@ const TOUpdates = () => { capacityDiff: -20, priceDiff: -48, } - }, - { - date: new Date(), - locationFrom: {idLocation: '124', region: 'Gdańsk', country: 'Polska'}, - locationTo: {idLocation: '345', region: 'Durres', country: 'Albania'}, - type: 'PLANE', - changes: { - capacityDiff: 34, - priceDiff: 125, - } - }, + } ] - const hotelChanges = [ - { - date: new Date(), - hotelName: 'Grand Fafa Blue', - roomName: 'Pokój 2 os.', - changes: { - guestCapacityDiff: 1, - priceDiff: 27, + const [hotelUpdates, setHotelUpdates] = useState([]); + + useEffect(() => { + const ws = new WebSocket(`ws://localhost:8086/data-generator/ws/hotel`); + + ws.onmessage = (event) => { + console.log("Received message: " + event.data); + + const messageType = event.data.split(':')[0]; + const messageData = event.data.split(': ')[1]; + + switch (messageType) { + case "SingleHotel": + const hotelUpdate = JSON.parse(messageData); + + // Convert the updateDateTime array to a Date object + hotelUpdate.updateDateTime = new Date( + hotelUpdate.updateDateTime[0], + hotelUpdate.updateDateTime[1] - 1, // JavaScript months are 0-based + hotelUpdate.updateDateTime[2], + hotelUpdate.updateDateTime[3], + hotelUpdate.updateDateTime[4] + ); + + setHotelUpdates((prevUpdates) => [hotelUpdate, ...prevUpdates]); + break; + default: + console.log("Unexpected message type"); + break; } - }, - ] + }; + + return () => { + ws.close(); + console.error("WebSocket connection closed"); + }; + }, []); + return (
@@ -79,9 +105,9 @@ const TOUpdates = () => { - +
- +

Aktualizacje hoteli

@@ -96,15 +122,15 @@ const TOUpdates = () => { - {hotelChanges.map((hotel, index) => ( + {hotelUpdates.map((hotel, index) => ( - {hotel.date.toDateString()} + {new Date(hotel.updateDateTime).toLocaleString()} {hotel.hotelName} {hotel.roomName}
-

Cena: {hotel.changes.priceDiff >= 0 ? '+' : ''}{hotel.changes.priceDiff}

-

Miejsca: {hotel.changes.guestCapacityDiff >= 0 ? '+' : ''}{hotel.changes.guestCapacityDiff}

+

Cena: {hotel.priceChange >= 0 ? '+' : ''}{hotel.priceChange}

+

Miejsca: {hotel.capacityChange >= 0 ? '+' : ''}{hotel.capacityChange}

 From f23a184032e7aaf23678e0025177e2635f95adf6 Mon Sep 17 00:00:00 2001 From: Krzysztof Nazar Date: Wed, 5 Jun 2024 20:54:36 +0200 Subject: [PATCH 2/7] RSWW-138 add update type to table --- src/tour-operator-updates/screens/TOUpdates.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/tour-operator-updates/screens/TOUpdates.tsx b/src/tour-operator-updates/screens/TOUpdates.tsx index b1a1e05..aac4dd9 100644 --- a/src/tour-operator-updates/screens/TOUpdates.tsx +++ b/src/tour-operator-updates/screens/TOUpdates.tsx @@ -116,6 +116,7 @@ const TOUpdates = () => { Data + Typ zmiany Hotel Pokój Zmiany @@ -125,12 +126,13 @@ const TOUpdates = () => { {hotelUpdates.map((hotel, index) => ( {new Date(hotel.updateDateTime).toLocaleString()} + {hotel.updateType} {hotel.hotelName} {hotel.roomName}
-

Cena: {hotel.priceChange >= 0 ? '+' : ''}{hotel.priceChange}

-

Miejsca: {hotel.capacityChange >= 0 ? '+' : ''}{hotel.capacityChange}

+

Cena: {hotel.priceChange > 0 ? '+' : ''}{hotel.priceChange}

+

Miejsca: {hotel.capacityChange > 0 ? '+' : ''}{hotel.capacityChange}

 From 005f67961cb428650c21390d1863c14453e13b4e Mon Sep 17 00:00:00 2001 From: Krzysztof Nazar Date: Wed, 5 Jun 2024 22:08:56 +0200 Subject: [PATCH 3/7] RSWW-138 receiving transport updates from backend works --- .../screens/TOUpdates.tsx | 80 ++++++++++++------- 1 file changed, 53 insertions(+), 27 deletions(-) diff --git a/src/tour-operator-updates/screens/TOUpdates.tsx b/src/tour-operator-updates/screens/TOUpdates.tsx index aac4dd9..915fecc 100644 --- a/src/tour-operator-updates/screens/TOUpdates.tsx +++ b/src/tour-operator-updates/screens/TOUpdates.tsx @@ -11,28 +11,27 @@ type HotelUpdate = { capacityChange: number; }; -const TOUpdates = () => { +type TransportUpdate = { + updateDateTime: string; + updateType: string; + departureRegionAndCountry: string; + arrivalRegionAndCountry: string; + transportTypeName: string; + priceChange: number; + capacityChange: number; +}; - const transportChanges = [ - { - date: new Date(), - locationFrom: {idLocation: '123', region: 'Gdańsk', country: 'Polska'}, - locationTo: {idLocation: '345', region: 'Warszawa', country: 'Polska'}, - type: 'BUS', - changes: { - capacityDiff: -20, - priceDiff: -48, - } - } - ] +const TOUpdates = () => { const [hotelUpdates, setHotelUpdates] = useState([]); + const [transportUpdates, setTransportUpdates] = useState([]); useEffect(() => { - const ws = new WebSocket(`ws://localhost:8086/data-generator/ws/hotel`); + const hotelWs = new WebSocket(`ws://localhost:8086/data-generator/ws/hotel`); + const transportWs = new WebSocket(`ws://localhost:8086/data-generator/ws/transport`); - ws.onmessage = (event) => { - console.log("Received message: " + event.data); + hotelWs.onmessage = (event) => { + console.log("Received hotel message: " + event.data); const messageType = event.data.split(':')[0]; const messageData = event.data.split(': ')[1]; @@ -48,7 +47,7 @@ const TOUpdates = () => { hotelUpdate.updateDateTime[2], hotelUpdate.updateDateTime[3], hotelUpdate.updateDateTime[4] - ); + ).toISOString(); setHotelUpdates((prevUpdates) => [hotelUpdate, ...prevUpdates]); break; @@ -56,15 +55,42 @@ const TOUpdates = () => { console.log("Unexpected message type"); break; } - }; + }; + + transportWs.onmessage = (event) => { + console.log("Received transport message: " + event.data); + + const messageType = event.data.split(':')[0]; + const messageData = event.data.split(': ')[1]; + + switch (messageType) { + case "SingleTransport": + const transportUpdate = JSON.parse(messageData); + + // Convert the updateDateTime array to a Date object + transportUpdate.updateDateTime = new Date( + transportUpdate.updateDateTime[0], + transportUpdate.updateDateTime[1] - 1, // JavaScript months are 0-based + transportUpdate.updateDateTime[2], + transportUpdate.updateDateTime[3], + transportUpdate.updateDateTime[4] + ).toISOString(); + + setTransportUpdates((prevUpdates) => [transportUpdate, ...prevUpdates]); + break; + default: + console.log("Unexpected message type"); + break; + } + }; return () => { - ws.close(); + hotelWs.close(); + transportWs.close(); console.error("WebSocket connection closed"); }; }, []); - return (
@@ -86,16 +112,16 @@ const TOUpdates = () => { - {transportChanges.map((transport, index) => ( + {transportUpdates.map((transport, index) => ( - {transport.date.toDateString()} - {transport.locationFrom.country}, {transport.locationFrom.region} - {transport.locationTo.country}, {transport.locationTo.region} - {transport.type === 'PLANE' ? 'Samolot' : 'Bus'} + {new Date(transport.updateDateTime).toLocaleString()} + {transport.departureRegionAndCountry} + {transport.arrivalRegionAndCountry} + {transport.transportTypeName}
-

Cena: {transport.changes.priceDiff >= 0 ? '+' : ''}{transport.changes.priceDiff}

-

Miejsca: {transport.changes.capacityDiff >= 0 ? '+' : ''}{transport.changes.capacityDiff}

+

Cena: {transport.priceChange > 0 ? '+' : ''}{transport.priceChange}

+

Miejsca: {transport.capacityChange > 0 ? '+' : ''}{transport.capacityChange}

 From 88dca9367ab9f45067cac264ab97ce150f62f1fe Mon Sep 17 00:00:00 2001 From: Krzysztof Nazar Date: Wed, 5 Jun 2024 22:11:19 +0200 Subject: [PATCH 4/7] RSWW-138 update layout of tables --- src/tour-operator-updates/screens/TOUpdates.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/tour-operator-updates/screens/TOUpdates.tsx b/src/tour-operator-updates/screens/TOUpdates.tsx index 915fecc..68d1688 100644 --- a/src/tour-operator-updates/screens/TOUpdates.tsx +++ b/src/tour-operator-updates/screens/TOUpdates.tsx @@ -27,8 +27,8 @@ const TOUpdates = () => { const [transportUpdates, setTransportUpdates] = useState([]); useEffect(() => { - const hotelWs = new WebSocket(`ws://localhost:8086/data-generator/ws/hotel`); - const transportWs = new WebSocket(`ws://localhost:8086/data-generator/ws/transport`); + const hotelWs = new WebSocket(`ws://localhost:8082/data-generator/ws/hotel`); + const transportWs = new WebSocket(`ws://localhost:8082/data-generator/ws/transport`); hotelWs.onmessage = (event) => { console.log("Received hotel message: " + event.data); @@ -104,10 +104,11 @@ const TOUpdates = () => { - Data + Data zmiany Skąd Dokąd Typ transportu + Typ zmiany Zmiany @@ -118,6 +119,7 @@ const TOUpdates = () => { {transport.departureRegionAndCountry}{transport.arrivalRegionAndCountry}{transport.transportTypeName} + {transport.updateType}

Cena: {transport.priceChange > 0 ? '+' : ''}{transport.priceChange}

@@ -141,20 +143,20 @@ const TOUpdates = () => {
- Data - Typ zmiany + Data zmiany Hotel Pokój Zmiany + Typ zmiany {hotelUpdates.map((hotel, index) => ( {new Date(hotel.updateDateTime).toLocaleString()} - {hotel.updateType} {hotel.hotelName} {hotel.roomName} + {hotel.updateType}

Cena: {hotel.priceChange > 0 ? '+' : ''}{hotel.priceChange}

From e38b08831cf3e42e1f37e93bed79f159f3c47809 Mon Sep 17 00:00:00 2001 From: Krzysztof Nazar Date: Fri, 7 Jun 2024 08:32:15 +0200 Subject: [PATCH 5/7] RSWW-138 on create show empty cell in "update info" --- .../screens/TOUpdates.tsx | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/src/tour-operator-updates/screens/TOUpdates.tsx b/src/tour-operator-updates/screens/TOUpdates.tsx index 68d1688..cff0e40 100644 --- a/src/tour-operator-updates/screens/TOUpdates.tsx +++ b/src/tour-operator-updates/screens/TOUpdates.tsx @@ -121,10 +121,16 @@ const TOUpdates = () => { {transport.transportTypeName} {transport.updateType} -
-

Cena: {transport.priceChange > 0 ? '+' : ''}{transport.priceChange}

-

Miejsca: {transport.capacityChange > 0 ? '+' : ''}{transport.capacityChange}

-
+ {transport.updateType === 'CREATE' ? ( +
+ {} +
+ ) : ( +
+

Cena: {transport.priceChange > 0 ? '+' : ''}{transport.priceChange}

+

Miejsca: {transport.capacityChange > 0 ? '+' : ''}{transport.capacityChange}

+
+ )} ))} @@ -158,10 +164,16 @@ const TOUpdates = () => { {hotel.roomName} {hotel.updateType} -
-

Cena: {hotel.priceChange > 0 ? '+' : ''}{hotel.priceChange}

-

Miejsca: {hotel.capacityChange > 0 ? '+' : ''}{hotel.capacityChange}

-
+ {hotel.updateType === 'CREATE' ? ( +
+ {} +
+ ) : ( +
+

Cena: {hotel.priceChange > 0 ? '+' : ''}{hotel.priceChange}

+

Miejsca: {hotel.capacityChange > 0 ? '+' : ''}{hotel.capacityChange}

+
+ )} ))} From 3d689996a3cb12d79b9abdd57b18890486d03590 Mon Sep 17 00:00:00 2001 From: Krzysztof Nazar Date: Fri, 7 Jun 2024 08:33:16 +0200 Subject: [PATCH 6/7] RSWW-138 change console log when closing WebSocket connection --- src/tour-operator-updates/screens/TOUpdates.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tour-operator-updates/screens/TOUpdates.tsx b/src/tour-operator-updates/screens/TOUpdates.tsx index cff0e40..af18a77 100644 --- a/src/tour-operator-updates/screens/TOUpdates.tsx +++ b/src/tour-operator-updates/screens/TOUpdates.tsx @@ -87,7 +87,7 @@ const TOUpdates = () => { return () => { hotelWs.close(); transportWs.close(); - console.error("WebSocket connection closed"); + console.log("WebSocket connection closed"); }; }, []); From e5ead3856dc256991492138e5a42b33d621803b9 Mon Sep 17 00:00:00 2001 From: Krzysztof Nazar Date: Fri, 7 Jun 2024 09:39:11 +0200 Subject: [PATCH 7/7] RSWW-138 update columns headers --- src/tour-operator-updates/screens/TOUpdates.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tour-operator-updates/screens/TOUpdates.tsx b/src/tour-operator-updates/screens/TOUpdates.tsx index af18a77..0045f1e 100644 --- a/src/tour-operator-updates/screens/TOUpdates.tsx +++ b/src/tour-operator-updates/screens/TOUpdates.tsx @@ -152,8 +152,8 @@ const TOUpdates = () => { Data zmiany Hotel Pokój - Zmiany Typ zmiany + Zmiany