-
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.
refactored code into components; introduced trends based on linear re…
…gression; recent (1 week) means are now approximated.
- Loading branch information
1 parent
f84aa16
commit d15dd86
Showing
9 changed files
with
217 additions
and
155 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { getDateHistory, getMonthHistory, getOpenMeteoData, getWeekHistory } from "../shared/openMeteoInterface"; | ||
| import { formState } from "../shared/utils"; | ||
| import styles from './form.module.css' | ||
|
|
||
| export function GenerateButtons({ state, setState }: { state: formState, setState: React.Dispatch<React.SetStateAction<formState>> }) { | ||
| return ( | ||
| <div className={styles.generateButtons}> | ||
| <p>Show Data For:</p> | ||
| <button type="button" onClick={() => getDateHistory(state, setState)} disabled={validateDateHistoryInput()}>History of Target Date</button> | ||
| <button type="button" onClick={() => getWeekHistory(state, setState)} disabled={validateWeekHistoryInput()}>History of Target Week</button> | ||
| <button type="button" onClick={() => getMonthHistory(state, setState)} disabled={validateDateHistoryInput()}>History of Target Month</button> | ||
| <button type="button" onClick={() => getOpenMeteoData(state, setState)} disabled={validateIntervalInput()}>Whole Interval (max 10 years)</button> | ||
| </div> | ||
| ) | ||
|
|
||
| function validateIntervalInput() { | ||
| // validate input | ||
| if (state.latitude == undefined || state.longitude == undefined) { | ||
| return true | ||
| } | ||
| if (!(!Number.isNaN(state.latitude) && !Number.isNaN(state.longitude) && state.startDate && state.endDate && Number(state.endDate.slice(0, 4)) - Number(state.startDate.slice(0, 4)) <= 10)) { | ||
| return true | ||
| } | ||
| return false | ||
| } | ||
|
|
||
| // this is also the function used for monthly history | ||
| function validateDateHistoryInput() { | ||
| // validate input | ||
| if (state.latitude == undefined || state.longitude == undefined) { | ||
| return true | ||
| } | ||
| if (!(!Number.isNaN(state.latitude) && !Number.isNaN(state.longitude) && state.targetDate && state.startDate && state.endDate)) { | ||
| return true | ||
| } | ||
| return false | ||
| } | ||
|
|
||
| function validateWeekHistoryInput() { | ||
| // validate input | ||
| if (state.latitude == undefined || state.longitude == undefined) { | ||
| return true | ||
| } | ||
| if (!(!Number.isNaN(state.latitude) && !Number.isNaN(state.longitude) && state.targetWeek && state.startDate && state.endDate)) { | ||
| return true | ||
| } | ||
| return false | ||
| } | ||
| } |
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,35 @@ | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" | ||
| import { formState, myColors } from "../shared/utils" | ||
| import CollapsibleMap from "./collapsibleMap" | ||
| import styles from './form.module.css' | ||
| import { faLocationCrosshairs } from "@fortawesome/free-solid-svg-icons" | ||
|
|
||
| export function InputSpace({ state, setState }: { state: formState, setState: React.Dispatch<React.SetStateAction<formState>> }) { | ||
| return ( | ||
| <div className={styles.inputSpace}> | ||
| <form className={styles.settingForm}> | ||
| <button className={styles.locationButton} type="button" onClick={getUserLocation}><FontAwesomeIcon icon={faLocationCrosshairs} color={myColors.IconBlue} /></button> | ||
| <label htmlFor="lat">Latitude:</label> | ||
| <input type="number" id="lat" name="lat" value={state.latitude} min={-90} max={90} onChange={(e) => { setState({ ...state, latitude: parseFloat(e.target.value) }) }} /> | ||
| <label htmlFor="long">Longitude:</label> | ||
| <input type="number" id="long" name="long" value={state.longitude} min={-180} max={180} onChange={(e) => { setState({ ...state, longitude: parseFloat(e.target.value) }) }} /> | ||
| <label htmlFor="targetdate">Target Date:</label> | ||
| <input type="date" id="targetdate" name="targetdate" value={state.targetDate} min={state.startDate} max={state.endDate} onChange={(e) => { setState({ ...state, targetDate: e.target.value }) }} /> | ||
| <label htmlFor="targetweek">Target Week:</label> | ||
| <input type="week" id="targetweek" name="targetweek" value={state.targetWeek} min="1940-W01" onChange={(e) => { setState({ ...state, targetWeek: e.target.value }) }} /> | ||
| <label htmlFor="startdate">Start Date:</label> | ||
| <input type="date" id="startdate" name="startdate" value={state.startDate} min="1940-01-01" max={state.endDate} onChange={(e) => { setState({ ...state, startDate: e.target.value }) }} /> | ||
| <label htmlFor="enddate">End Date:</label> | ||
| <input type="date" id="enddate" name="enddate" value={state.endDate} min={state.startDate} max={new Date().toISOString().slice(0, -14)} onChange={(e) => { setState({ ...state, endDate: e.target.value }) }} /> | ||
| </form> | ||
| <CollapsibleMap state={state} setState={setState} /> | ||
| </div > | ||
| ) | ||
|
|
||
| function getUserLocation() { | ||
| if (navigator.geolocation) { | ||
| navigator.geolocation.getCurrentPosition((position) => { setState({ ...state, latitude: Number(position.coords.latitude.toFixed(2)), longitude: Number(position.coords.longitude.toFixed(2)) }) }/*, errorFunction*/); | ||
| } | ||
| /** Todo: handle errors. getCurrentPosition takes an error function as second argument */ | ||
| } | ||
| } |
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,27 @@ | ||
| import styles from './form.module.css' | ||
| import FormLegend from './legend' | ||
| import { formState } from '../shared/utils' | ||
|
|
||
| export function PlotControls({ props, state, setState, width }: { props: any, state: formState, setState: React.Dispatch<React.SetStateAction<formState>>, width: any }) { | ||
| return ( | ||
| <div className={styles.figureControls}> | ||
| <form> | ||
| <input type="checkbox" id={"checkmax" + props.formId} name="checkmax" checked={state.showMax} onChange={(e) => { setState({ ...state, showMax: e.target.checked }) }} /> | ||
| <label htmlFor={"checkmax" + props.formId}> Show maximum temp</label><br></br> | ||
| <input type="checkbox" id={"checkmean" + props.formId} name="checkmean" checked={state.showMean} onChange={(e) => { setState({ ...state, showMean: e.target.checked }) }} /> | ||
| <label htmlFor={"checkmean" + props.formId}> Show mean temps and the overall median</label><br></br> | ||
| <input type="checkbox" id={"checkmin" + props.formId} name="checkmin" checked={state.showMin} onChange={(e) => { setState({ ...state, showMin: e.target.checked }) }} /> | ||
| <label htmlFor={"checkmin" + props.formId}> Show minimum temp</label> | ||
| </form> | ||
| <FormLegend width={width}></FormLegend> | ||
| {props.hook[0].length > 1 ? <button type="button" onClick={selfRemove} className={styles.removeButton}>— Remove series</button> : null} | ||
|
|
||
| </div> | ||
| ) | ||
|
|
||
| function selfRemove() { | ||
| let copy = props.hook[0].slice(0) | ||
| copy = copy.filter((i: number) => i !== props.formId) | ||
| props.hook[1](copy) | ||
| } | ||
| } |
Oops, something went wrong.