Implement Dropdown for Download Format Selection (JSON/CSV)

[JordanChen123]

Purpose

Enhance the download functionality by allowing users to choose the file format (JSON or CSV for now, but likely adding more later on) before downloading the sensor data. This will provide users with more flexibility and improve the overall usability of the data export feature.

Description

Currently, the download button triggers a download of sensor data in JSON format. We want to add a feature where the word "JSON" acts as a button. When clicked, it should show a dropdown menu with two options: JSON and CSV. The user should be able to select their preferred format. When the format is set to CSV, the download action should export the data in CSV format instead of JSON.

General Steps:

1. Modify the Dataset component in https://github.com/UBCSailbot/sailbot_workspace/blob/main/src/website/views/components/Dataset/Dataset.tsx to include a button for the file format (defaulted to JSON).

2. Implement a dropdown menu that appears when the format button is clicked, allowing the user to select either JSON or CSV.

3. Update the customContents array to reflect the current state of the format selection.

4. Update the download functions to handle both JSON and CSV formats.

5. Ensure that the selected format is used when the user clicks the download button.

Resources

• Dropdown Library: https://react-select.com/home
• Download Data Function File: https://github.com/UBCSailbot/sailbot_workspace/blob/main/src/website/utils/DownloadData.js