-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #129 from tritonuas/feat/takeoff
Input mechanism to request takeoff mode.
- Loading branch information
Showing
11 changed files
with
238 additions
and
38 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| .emergency_button_outer_div { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| width: auto; | ||
| border-radius: 5px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .emergency_button_submit_button { | ||
| background-color: initial; | ||
| background-image: linear-gradient(-180deg, #FF7E31, #E62C03); | ||
| border-radius: 6px; | ||
| box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px; | ||
| color: #FFFFFF; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif; | ||
| height: 40px; | ||
| line-height: 40px; | ||
| outline: 0; | ||
| overflow: hidden; | ||
| padding: 0 20px; | ||
| pointer-events: auto; | ||
| position: relative; | ||
| text-align: center; | ||
| touch-action: manipulation; | ||
| user-select: none; | ||
| -webkit-user-select: none; | ||
| vertical-align: top; | ||
| white-space: nowrap; | ||
| width: 20%; | ||
| z-index: 9; | ||
| border: 0; | ||
| transition: box-shadow .2s; | ||
| margin-top: 5px; | ||
| } | ||
|
|
||
| .emergency_button_submit_button:hover { | ||
| box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px; | ||
| } | ||
|
|
||
| .emergency_button_takeoff_option { | ||
| background-color: gold; | ||
| width: 100%; | ||
| text-align: center; | ||
| font-size: 35px; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| box-shadow: rgba(207, 242, 11, 0.5) 0 3px 8px; | ||
| margin: 5px; | ||
| } | ||
|
|
||
| .emergency_button_takeoff_option.select { | ||
| background-color: rgba(255, 215, 0, 0.8); | ||
| transition: inset 0.2s ease; | ||
| box-shadow: inset rgba(0, 0, 0, 0.5) 0 3px 8px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { useState } from "react"; | ||
| import MyModal from "./MyModal"; | ||
| import { useMyModal } from "./UseMyModal"; | ||
|
|
||
| import "./TakeoffSelector.css" | ||
|
|
||
|
|
||
| interface props{ | ||
| modalVisible: boolean; | ||
| closeModal: ( ) => void; | ||
| } | ||
|
|
||
| /** | ||
| * A modal with two options. Manual Takeoff and Autonomous Takeoff. When selected, | ||
| * sends signal to obc in order to pick the TakeoffTick or ActiveTakeoffTick. | ||
| * @param props - The properties of TakeoffSelector | ||
| * @param props.modalVisible - A Boolean that dictates the visibility of the TakeoffSelector | ||
| * @param props.closeModal - A void function to close the PlanePicker. | ||
| * @returns A modal with two options. | ||
| */ | ||
| function TakeoffSelector({modalVisible, closeModal}:props){ | ||
|
|
||
| const {modalVisible: fetchModalVisible, openModal:fetchOpenModal, closeModal:fetchCloseModal} = useMyModal(); | ||
| const [selectedTakeoff, setSelectedTakeoff] = useState(0); | ||
| const [fetchStatus, setFetchStatus] = useState(''); | ||
| const [fetchLog, setFetchLog] = useState('default'); | ||
| const [isLoadingFetch, setIsLoadingFetch] = useState(true); | ||
|
|
||
| /** | ||
| * Helper function that sends a post request to obc | ||
| * to set the takeoff option and opens a modal to display | ||
| * the response. | ||
| * @param option - A string that specifies manual or autonomous. | ||
| */ | ||
| function submitTakeoffOption(option:string) { | ||
| setIsLoadingFetch(true); | ||
| fetchOpenModal(); | ||
|
|
||
| fetch(`/api/takeoff/${option}`, {method: "POST"}) | ||
| .then(async resp => { | ||
| if(resp.status == 200){ | ||
| setFetchStatus("default") | ||
| setFetchLog(await resp.text()); | ||
| setIsLoadingFetch(false); | ||
| } | ||
| else { | ||
| setFetchStatus("error") | ||
| setFetchLog(await resp.text()); | ||
| setIsLoadingFetch(false); | ||
| } | ||
| }) | ||
| .catch(err => { | ||
| console.error(err); | ||
| setFetchStatus("error") | ||
| setFetchLog(err); | ||
| setIsLoadingFetch(false); | ||
| }) | ||
| } | ||
|
|
||
| return( | ||
| <MyModal modalVisible={modalVisible} closeModal={closeModal}> | ||
| <div className='emergency_button_outer_div'> | ||
| <div | ||
| onClick={() => setSelectedTakeoff(1)} | ||
| className={`emergency_button_takeoff_option ${selectedTakeoff === 1 ? 'select' : ''}`}> | ||
| Manual Takeoff | ||
| </div> | ||
| <div | ||
| onClick={() => setSelectedTakeoff(2)} | ||
| className= {`emergency_button_takeoff_option ${selectedTakeoff === 2 ? 'select' : ''}`}> | ||
| Autonomous Takeoff | ||
| </div> | ||
| <button | ||
| className='emergency_button_submit_button' | ||
| onClick={() => { | ||
| if(selectedTakeoff === 1) { | ||
| submitTakeoffOption("manual"); | ||
| } | ||
| if(selectedTakeoff === 2){ | ||
| submitTakeoffOption("autonomous"); | ||
| } | ||
| }} | ||
| > | ||
| submit | ||
| </button> | ||
| </div> | ||
| <MyModal modalVisible={fetchModalVisible} closeModal={fetchCloseModal} type={fetchStatus} loading={isLoadingFetch}> | ||
| {fetchLog} | ||
| </MyModal> | ||
| </MyModal> | ||
| ) | ||
|
|
||
| } | ||
|
|
||
| export default TakeoffSelector; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.