Skip to content

Commit

Permalink
Merge pull request #14 from Microarchitecturovisco/RSWW-138-Websocket…
Browse files Browse the repository at this point in the history 
…-in-DataGenerator-module

 RSWW-138 websocket in data generator module
  • Loading branch information
@Danzigerrr
Danzigerrr authored Jun 8, 2024
2 parents e90af46 + e5ead38 commit 80a7f93
Showing 1 changed file with 122 additions and 54 deletions.
176 changes: 122 additions & 54 deletions src/tour-operator-updates/screens/TOUpdates.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,95 @@
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;
};

type TransportUpdate = {
updateDateTime: string;
updateType: string;
departureRegionAndCountry: string;
arrivalRegionAndCountry: string;
transportTypeName: string;
priceChange: number;
capacityChange: number;
};

const TOUpdates = () => {

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,
}
},
{
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 [hotelUpdates, setHotelUpdates] = useState<HotelUpdate[]>([]);
const [transportUpdates, setTransportUpdates] = useState<TransportUpdate[]>([]);

useEffect(() => {
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);

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]
).toISOString();

setHotelUpdates((prevUpdates) => [hotelUpdate, ...prevUpdates]);
break;
default:
console.log("Unexpected message type");
break;
}
},
]

const hotelChanges = [
{
date: new Date(),
hotelName: 'Grand Fafa Blue',
roomName: 'Pokój 2 os.',
changes: {
guestCapacityDiff: 1,
priceDiff: 27,
};

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 () => {
hotelWs.close();
transportWs.close();
console.log("WebSocket connection closed");
};
}, []);

return (
<div className='flex flex-col px-16 py-24'>
Expand All @@ -52,25 +104,33 @@ const TOUpdates = () => {
<Table>
<TableHead>
<TableRow>
<TableCell className='border border-gray-300 p-2'>Data</TableCell>
<TableCell className='border border-gray-300 p-2'>Data zmiany</TableCell>
<TableCell className='border border-gray-300 p-2'>Skąd</TableCell>
<TableCell className='border border-gray-300 p-2'>Dokąd</TableCell>
<TableCell className='border border-gray-300 p-2'>Typ transportu</TableCell>
<TableCell className='border border-gray-300 p-2'>Typ zmiany</TableCell>
<TableCell className='border border-gray-300 p-2'>Zmiany</TableCell>
</TableRow>
</TableHead>
<TableBody>
{transportChanges.map((transport, index) => (
{transportUpdates.map((transport, index) => (
<TableRow key={index}>
<TableCell className='border border-gray-300 p-2'>{transport.date.toDateString()}</TableCell>
<TableCell className='border border-gray-300 p-2'>{transport.locationFrom.country}, {transport.locationFrom.region}</TableCell>
<TableCell className='border border-gray-300 p-2'>{transport.locationTo.country}, {transport.locationTo.region}</TableCell>
<TableCell className='border border-gray-300 p-2'>{transport.type === 'PLANE' ? 'Samolot' : 'Bus'}</TableCell>
<TableCell className='border border-gray-300 p-2'>{new Date(transport.updateDateTime).toLocaleString()}</TableCell>
<TableCell className='border border-gray-300 p-2'>{transport.departureRegionAndCountry}</TableCell>
<TableCell className='border border-gray-300 p-2'>{transport.arrivalRegionAndCountry}</TableCell>
<TableCell className='border border-gray-300 p-2'>{transport.transportTypeName}</TableCell>
<TableCell className='border border-gray-300 p-2'>{transport.updateType}</TableCell>
<TableCell className='border border-gray-300 p-2'>
<div className='flex flex-col gap-1'>
<p>Cena: {transport.changes.priceDiff >= 0 ? '+' : ''}{transport.changes.priceDiff}</p>
<p>Miejsca: {transport.changes.capacityDiff >= 0 ? '+' : ''}{transport.changes.capacityDiff}</p>
</div>
{transport.updateType === 'CREATE' ? (
<div className='flex flex-col gap-1'>
{}
</div>
) : (
<div className='flex flex-col gap-1'>
<p>Cena: {transport.priceChange > 0 ? '+' : ''}{transport.priceChange}</p>
<p>Miejsca: {transport.capacityChange > 0 ? '+' : ''}{transport.capacityChange}</p>
</div>
)}
</TableCell>
</TableRow>
))}
Expand All @@ -79,33 +139,41 @@ const TOUpdates = () => {
</TableContainer>
</Paper>

<Paper elevation={2} style={{height: 'fit-content'}}>
<Paper elevation={2} style={{ height: 'fit-content' }}>
<div className='mt-4 mb-6 flex flex-row gap-2 items-center justify-center'>
<Hotel style={{fontSize: 18}}/>
<Hotel style={{ fontSize: 18 }} />
<h3 className='text-xl'>Aktualizacje hoteli</h3>
</div>

<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell className='border border-gray-300 p-2'>Data</TableCell>
<TableCell className='border border-gray-300 p-2'>Data zmiany</TableCell>
<TableCell className='border border-gray-300 p-2'>Hotel</TableCell>
<TableCell className='border border-gray-300 p-2'>Pokój</TableCell>
<TableCell className='border border-gray-300 p-2'>Typ zmiany</TableCell>
<TableCell className='border border-gray-300 p-2'>Zmiany</TableCell>
</TableRow>
</TableHead>
<TableBody>
{hotelChanges.map((hotel, index) => (
{hotelUpdates.map((hotel, index) => (
<TableRow key={index}>
<TableCell className='border border-gray-300 p-2'>{hotel.date.toDateString()}</TableCell>
<TableCell className='border border-gray-300 p-2'>{new Date(hotel.updateDateTime).toLocaleString()}</TableCell>
<TableCell className='border border-gray-300 p-2'>{hotel.hotelName}</TableCell>
<TableCell className='border border-gray-300 p-2'>{hotel.roomName}</TableCell>
<TableCell className='border border-gray-300 p-2'>{hotel.updateType}</TableCell>
<TableCell className='border border-gray-300 p-2'>
<div className='flex flex-col gap-1'>
<p>Cena: {hotel.changes.priceDiff >= 0 ? '+' : ''}{hotel.changes.priceDiff}</p>
<p>Miejsca: {hotel.changes.guestCapacityDiff >= 0 ? '+' : ''}{hotel.changes.guestCapacityDiff}</p>
</div>
{hotel.updateType === 'CREATE' ? (
<div className='flex flex-col gap-1'>
{}
</div>
) : (
<div className='flex flex-col gap-1'>
<p>Cena: {hotel.priceChange > 0 ? '+' : ''}{hotel.priceChange}</p>
<p>Miejsca: {hotel.capacityChange > 0 ? '+' : ''}{hotel.capacityChange}</p>
</div>
)}
</TableCell>
</TableRow>
))}
Expand Down

0 comments on commit 80a7f93

Please sign in to comment.