Report Page Functionality

[Tyler-Lentz]

🚀 Feature

We want to add the actual backend connection for the reports page.

User Perspective

• When the page is loaded, all of the data should be queried from the Hub backend and displayed.
• After reassigning bottles in the top left container, there should be an additional button which posts to Hub the updated bottle assignments. (So clicking reassign doesn't do anything on the backend until you click a confirm or send button)

Implementation

You'll have to start writing the backend routes that the frontend has to query. The backend routes are all in internal/server/server.go. If you're unfamiliar with Go syntax or anything going on in the backend dont feel bad about asking Anthony or I any questions. You should add your routes in the initBackend function, which currently looks like this:

func (server *Server) initBackend(router *gin.Engine) {
	api := router.Group("/api")
	{
		api.GET("/connections", server.testConnections())

		api.GET("/mission", server.getMission())
		api.POST("/mission", server.postMission())
		api.POST("/airdrop", server.postAirdropTargets())
		api.GET("/path/initial", server.getInitialPath())
		api.GET("/path/initial/new", server.getInitialPathNew())

		plane := api.Group("/plane")
		{
			plane.GET("/telemetry/history", server.getTelemetryHistory())
			plane.GET("/telemetry", server.getTelemetry())

			plane.GET("/position/history", server.getPositionHistory())
			plane.GET("/position", server.getPosition())

			plane.GET("/voltage", server.getBatteryVoltages())
		}

		mavlink := api.Group("/mavlink")
		{
			mavlink.GET("/endpoints", server.getMavlinkEndpoints())
			mavlink.PUT("/endpoints", server.putMavlinkEndpoints())
		}
	}
}

You'll have to add these routes:

GET /api/targets/all
GET /api/targets/matched
POST /api/targets/matched

For any structs/json objects that are being transferred between the frontend/backend/obc, we are using protobufs. You can check out the protobufs repo here. I'm not entirely sold on how we have the definitions divided between the two different files, but for now anything you need to add you can just put in obc.proto, even though you're not working on the OBC. (Because eventually these will be sent to the OBC). Basically, if there is data you want to send between the frontend/backend you should make a protobuf definition in the obc.proto file in the protos repo. (That is, clone the protos repo, make a PR to add whatever definitions you need). Then in the gcs repo you can run git pull from inside the high level protos directory, which is a git submodule, to get what you pushed to the protos repo. Then finally the make build-protos make command will take what is in the .proto files and compile them for both the frontend and backend.

You'll probably want to create protobuf definitions somewhat like these:

First, a struct that represents an identified target. The picture should be a string, encoded in base64.

IdentifiedTarget:
    string Picture
    GPSCoord coordinate
    ODLCColor AlphanumericColor
    string Alphanumeric
    ODLCShape Shape
    ODLCColor ShapeColor
    bool IsMannikin

Note that this matches closely with the Bottle definition which already exists in obc.proto.

We already have an AirdropTarget definition, but I don't think how it is set up makes sense, so you should delete it. Instead, you should replace it with a MatchedTarget definition

MatchedTarget
    Bottle Bottle
    IdentifiedTarget Target

So this combines a Bottle with an IdentifiedTarget.

Sending a GET request to /api/targets/all should return a list of IdentifiedTargets. Sending a GET request to /api/targets/matched should return a list of MatchedTargets. The POST request to /api/targets/matched should have a request body which takes a list of MatchedTargets.

Currently, the report page has hard coded target information inside of the typescript itself. The main purpose of this PR is to now offload that to the backend. Because the OBC code isn't entirely done at the moment, you'll essentially be moving this hardcoded target information to the backend. The routes that you write in the backend should be seeded with hardcoded information, which the user can then reassign as they want.

In the future there will be another task to actually make the backend communicate with the OBC, but for now we are just focusing on finishing the functionality of the frontend. After this PR, the frontend functionality for the report page will be done, and future work will just be in the backend and OBC.

Running

Since we're having it communicate with the backend now, you'll have to run everything through docker compose so that the backend and frontend are both running. You can still use the npm dev server to test anything you don't need the backend for, though, like making sure css and the layout is good.

TLDR

1. Take some time to read the protobuf documentation, and add the two protobuf definitions i mentioned above to obc.proto in the other protos repo we have on the github organization
2. Compile the protobufs for the GCS
3. (interchangable with 4) Write the backend routes which provide the hardcoded target information
4. (interchangeable with 3) Write the frontend code to query the new backend routes, removing the hardcoded values from the typescript. Also add the button I mentioned above that sends the POST request to update the matchings.
5. Test to make sure all of the following works
   • when you load the page, the hardcoded values in the backend are displayed on the frontend
   • you can reassign bottle assignments, such that that if you leave the webapp then reopen the page it still remembers the old assignments.