grpc????

.gitignore

@@ -23,5 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 
-generated
 proto

package.json

@@ -8,9 +8,12 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "build:protos": "protoc --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts --ts_out=service=grpc-web:./src/generated -I ./AIS-protobuf ./AIS-protobuf/ais.proto"
+    "build:protos": "protoc --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts --ts_out=service=grpc-web:./proto -I ./AIS-protobuf ./AIS-protobuf/ais.proto",
+    "generate-proto": "protoc --ts_out ./proto --proto_path AIS-protobuf AIS-protobuf/ais.proto"
   },
   "dependencies": {
+    "@protobuf-ts/grpcweb-transport": "^2.9.4",
+    "@protobuf-ts/plugin": "^2.9.4",
     "google-protobuf": "^3.21.4",
     "grpc-web": "^1.5.0",
     "react": "^18.3.1",

src/components/popup.tsx

@@ -5,5 +5,14 @@ interface IPopupProps {
 }
 
 export default function Popup({ vessel }: IPopupProps) {
-	return <h1>popup</h1>;
+	return (
+		<div>
+			<h2>ID: {vessel.id}</h2>
+			<p>Name: {vessel.name}</p>
+			<p>Callsign: {vessel.callSign}</p>
+			<p>Length: {vessel.length}</p>
+			<p>pos fixing device: {vessel.positionFixingDevice}</p>
+			<p>MMSI: {vessel.mmsi}</p>
+		</div>
+	);
 }

src/components/timeline.tsx

@@ -3,5 +3,5 @@ interface ITimelineProps {
 }
 
 export default function Timeline({ timestamps }: ITimelineProps) {
-	return <h1>timestamp</h1>;
+	return <h1>timeline component</h1>;
 }

src/components/vessel.tsx

@@ -5,6 +5,10 @@ import { IDetailedVessel } from '../models/detailedVessel';
 import Popup from './popup';
 import Timeline from './timeline';
 import Path from './path';
+import { AISServiceClient } from '../../proto/ais.client';
+import { VesselInfoRequest } from '../../proto/ais';
+import { GrpcWebClientBase } from 'grpc-web';
+import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport';
 
 interface IVesselProps {
 	vessel: ISimpleVessel | IDetailedVessel;
@@ -21,10 +25,29 @@ export default function Vessel({ vessel, isMonitored }: IVesselProps) {
 		//fetch history
 		return [];
 	}
+	async function popupClick() {
+		if (vesselDetail) {
+			setVesselDetail(undefined);
+			return;
+		}
+
+		const transport = new GrpcWebFetchTransport({
+			baseUrl: 'http://127.0.0.1:50000'
+		});
+		const client = new AISServiceClient(transport);
+		const request: VesselInfoRequest = {
+			mmsi: 123n,
+			timestamp: 12312n
+		};
+
+		const response = client.getVesselInfo(request);
+		console.log(response);
+	}
 
 	return (
 		<>
-			<h1>Vessel</h1>
+			<h1>Vessel component</h1>
+			<button onClick={popupClick}>Shop popup</button>
 			{vesselDetail && <Popup vessel={vesselDetail}></Popup>}
 			<Timeline timestamps={vesselTimestamps()}></Timeline>
 			{history && <Path history={history}></Path>}