fix: added values array for options for fancier default labels withou…

…t post processing
jcw780 · Jun 19, 2020 · a1276e0 · a1276e0
1 parent 7e1ce63
commit a1276e0
Showing 1 changed file with 26 additions and 21 deletions.
diff --git a/src/components/DefaultForms.tsx b/src/components/DefaultForms.tsx
@@ -18,15 +18,15 @@ export class DefaultForm extends React.Component
 	}
 	updated = false;
 	form = React.createRef<HTMLSelectElement>();
-	state = {options: this.props.defaultOptions};
+	state = {options: this.props.defaultOptions, values: this.props.defaultOptions};
 	handleChange = (event) => {
 		event.stopPropagation();
 		this.props.handleValueChange(event.target.value, this.props.controlId);
 	}
 
-	updateOptions = (newOptions) => {
+	updateOptions = (newOptions, newValues) => {
 		this.updated = true;
-		this.setState((state) => {return {options: newOptions};});
+		this.setState((state) => {return {options: newOptions, values: newValues};});
 	}
 
 	render(){
@@ -36,7 +36,9 @@ export class DefaultForm extends React.Component
 				<Form.Label column sm="3">{props.children}</Form.Label>
 				<Form.Control as="select" placeholder="" defaultValue={props.defaultValue} aria-label={props.ariaLabel}
 				onChange={this.handleChange} ref={this.form} style={{width: "70%"}}>
-					{this.state.options.map((value,i) => {return (<option aria-label={value} key={i}>{value}</option>);})}
+					{this.state.options.map((value,i) => {
+						return (<option aria-label={value} value={this.state.values[i]} key={i}>{value}</option>);
+					})}
 				</Form.Control>
 			</Form.Group>
 		);
@@ -55,7 +57,6 @@ const dataURL = "https://jcw780.github.io/LiveGameData2/data/"
 const fetchJson = (target, onSucess) => {
     fetch(target)
         .then((response) => {
-			//console.log(response.body);
             if (!response.ok) {
             throw new Error('Network response was not ok');
 			}
@@ -115,64 +116,68 @@ class DefaultShips extends React.Component
 		}
 		if(queryIndex in queries){queries[queryIndex]();}
 	}
-	updateForm = (target, options) => {
+	updateForm = (target, options, values) => {
 		const refCurrent = this.defaultForms[target][singleFormIndex.ref].current;
 		if(refCurrent){ 
 			//apparently prevents async calls from updating deleted refs I guess...
 			//fixes delete ship crash bug
 			this.props.defaultData[target][T.singleDefaultDataIndex.options] = options;
-			refCurrent.updateOptions(options);
+			refCurrent.updateOptions(options, values);
 		}
 	}
 	queryVersion = () => {
 		fetchJson(dataURL + "versions.json", (data) => {
 			let dataSorted = data.reverse();
-			this.updateForm('version', dataSorted);
+			this.updateForm('version', dataSorted, dataSorted);
 		});
 	}
 	queryNation = async () => {
 		const defaultData = this.props.defaultData;
 		const data = await fetchJsonData(`${dataURL}${defaultData.version[T.singleDefaultDataIndex.value]}_s.gz`);
 		this.props.defaultData.queriedData = data;
-		this.updateForm('nation', Object.keys(data.ships));
+		const options =  Object.keys(data.ships);
+		this.updateForm('nation', options, options);
 	}
 	queryType = () => {
 		const dData = this.props.defaultData;
 		const nation = dData.nation[T.singleDefaultDataIndex.value];
 		const qDataS = dData.queriedData.ships;
-		this.updateForm('shipType', Object.keys(qDataS[nation]));
+		const options = Object.keys(qDataS[nation]);
+		this.updateForm('shipType', options, options);
 	}
 	queryShip = async () => {
 		const dData = this.props.defaultData, qDataS = dData.queriedData.ships;
 		const sDI = T.singleDefaultDataIndex.value;
 		const nation = dData.nation[sDI], type = dData.shipType[sDI];
 		const ships = qDataS[nation][type];
-		let sorted = Object.keys(ships);
-		sorted.sort((a, b) => {return ships[a]['Tier'] - ships[b]['Tier']});
-		sorted.forEach((ship, i) => {
-			sorted[i] = `(${ships[ship]['Tier']}) ${ship}`
+		let values = Object.keys(ships);
+		values.sort((a, b) => {return ships[a]['Tier'] - ships[b]['Tier']});
+		let options : string[] = [];
+		values.forEach((ship, i) => {
+			options.push(`(${ships[ship]['Tier']}) ${ship}`);
 		})
-		this.updateForm('ship', sorted);
+		this.updateForm('ship', options, values);
 	}
 	adjustShip = (withTier) => {return withTier.split(' ').splice(1).join(' ');}
 	queryArtillery = () => {
 		const dData = this.props.defaultData, qDataS = dData.queriedData.ships;
 		const sDI = T.singleDefaultDataIndex.value;
-		const nation = dData.nation[sDI], type = dData.shipType[sDI], ship = this.adjustShip(dData.ship[sDI]);
-		console.log(ship, qDataS[nation][type]);
-		this.updateForm('artillery', Object.keys(qDataS[nation][type][ship].artillery));
+		const nation = dData.nation[sDI], type = dData.shipType[sDI], ship = dData.ship[sDI];
+		const options = Object.keys(qDataS[nation][type][ship].artillery);
+		this.updateForm('artillery', options, options);
 	}
 	queryShellType = () => {
 		const dData = this.props.defaultData, qDataS = dData.queriedData.ships;
 		const sDI = T.singleDefaultDataIndex.value;
 		const nation = dData.nation[sDI], type = dData.shipType[sDI];
-		const ship = this.adjustShip(dData.ship[sDI]), artillery = dData.artillery[sDI];
-		this.updateForm('shellType', Object.keys(qDataS[nation][type][ship].artillery[artillery]));
+		const ship = dData.ship[sDI], artillery = dData.artillery[sDI];
+		const options = Object.keys(qDataS[nation][type][ship].artillery[artillery]);
+		this.updateForm('shellType', options, options);
 	}
 	sendData = () => {
 		const dData = this.props.defaultData, qDataS = dData.queriedData.ships;
 		const sDI = T.singleDefaultDataIndex.value;
-		const nation = dData.nation[sDI], type = dData.shipType[sDI], ship = this.adjustShip(dData.ship[sDI]);
+		const nation = dData.nation[sDI], type = dData.shipType[sDI], ship = dData.ship[sDI];
 		const artillery = dData.artillery[sDI], shellType = dData.shellType[sDI];
 		const shellName = qDataS[nation][type][ship].artillery[artillery][shellType];
 		this.props.sendDefault(dData.queriedData.shells[shellName], ship);