close simulator modal

zdmwi · Jul 9, 2020 · 0f7d107 · 0f7d107
1 parent 8392d05
commit 0f7d107
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/client/src/pages/Simulator.tsx b/client/src/pages/Simulator.tsx
@@ -6,18 +6,22 @@ import {
 	IonTitle,
 	IonContent,
 	IonButton,
+	IonButtons,
+	IonIcon,
 } from '@ionic/react';
 import { GraphResponse, State, SimulationResponse } from '../models';
 import API from '../api';
 import data from '../assets/response.json';
+import { close } from 'ionicons/icons';
 
 interface SimulatorPage {
 	photoName: string;
+	closeModal(): void;
 }
 
 const stringsToTest = ['000000', '111111', '111101', '1111010', '010100'];
 
-const Simulator: React.FC<SimulatorPage> = ({ photoName }) => {
+const Simulator: React.FC<SimulatorPage> = ({ photoName, closeModal }) => {
 	const [root, setRoot] = useState<State>();
 	const [stateList, setStateList] = useState<State[]>([]);
 	const [testStrings, setTestStrings] = useState<string[]>(stringsToTest);
@@ -26,10 +30,10 @@ const Simulator: React.FC<SimulatorPage> = ({ photoName }) => {
 	useEffect(() => {
 		// send api call
 		(async () => {
-			// const resp = await API.get('/associate-features/' + photoName);
-			// const graph: GraphResponse = resp.data;
+			const resp = await API.get('/associate-features/' + photoName);
+			const graph: GraphResponse = resp.data;
 
-			const graph: GraphResponse = data;
+			// const graph: GraphResponse = data;
 
 			// convert resp into stateList
 			let stateArr: State[] = graph.graph.map(g => {
@@ -105,6 +109,11 @@ const Simulator: React.FC<SimulatorPage> = ({ photoName }) => {
 			<IonHeader>
 				<IonToolbar>
 					<IonTitle>Simulator</IonTitle>
+					<IonButtons slot="primary">
+						<IonButton onClick={closeModal}>
+							<IonIcon slot="icon-only" icon={close}></IonIcon>
+						</IonButton>
+					</IonButtons>
 				</IonToolbar>
 			</IonHeader>
 			<IonContent>

diff --git a/client/src/pages/TweakParams.tsx b/client/src/pages/TweakParams.tsx
@@ -71,6 +71,10 @@ const TweakParams: React.FC<TweakParamsProps> = ({ photo, rectCoords }) => {
 		setSentFirstPic(true);
 	};
 
+	const closeModal = () => {
+		setShowModal(false);
+	};
+
 	return (
 		<IonPage>
 			<IonHeader>
@@ -94,7 +98,7 @@ const TweakParams: React.FC<TweakParamsProps> = ({ photo, rectCoords }) => {
 						<IonRange
 							min={0}
 							step={1}
-							max={500}
+							max={1000}
 							value={maxArea}
 							onIonChange={e => setMaxArea(e.detail.value as number)}
 						>
@@ -122,7 +126,7 @@ const TweakParams: React.FC<TweakParamsProps> = ({ photo, rectCoords }) => {
 						<IonRange
 							min={0}
 							step={1}
-							max={300}
+							max={1000}
 							value={maxRadius}
 							onIonChange={e => setMaxRadius(e.detail.value as number)}
 						>
@@ -150,7 +154,7 @@ const TweakParams: React.FC<TweakParamsProps> = ({ photo, rectCoords }) => {
 						<IonRange
 							min={0}
 							max={1}
-							step={0.1}
+							step={0.01}
 							value={quality}
 							onIonChange={e => setQuality(e.detail.value as number)}
 						>
@@ -173,7 +177,7 @@ const TweakParams: React.FC<TweakParamsProps> = ({ photo, rectCoords }) => {
 					</IonItem>
 				</IonList>
 				<IonModal isOpen={showModal}>
-					<Simulator photoName={photo.filepath} />
+					<Simulator closeModal={closeModal} photoName={photo.filepath} />
 				</IonModal>
 			</IonContent>
 			<IonFooter>