Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-23 05:19:37 +02:00
Code Issues Releases Wiki Activity

Weather settings form update functionality. API: update multiple values in one Config query

Browse source
This commit is contained in:
unknown 2021-05-27 13:21:11 +02:00
parent 316bc49f5c
commit 88c8eee982
4 changed files with 95 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

140
client/src/components/Settings/WeatherSettings/WeatherSettings.tsx
View file

@ -1,4 +1,4 @@
import { useState, ChangeEvent, Fragment, useEffect } from 'react';
import { useState, ChangeEvent, Fragment, useEffect, FormEvent } from 'react';
import axios from 'axios';
import { ApiResponse, Config } from '../../../interfaces';
@ -55,73 +55,79 @@ const WeatherSettings = (): JSX.Element => {
.catch(err => console.log(err));
}, []);
const formSubmitHandler = (e: FormEvent) => {
e.preventDefault();
axios.put<ApiResponse<{}>>('/api/config', formData)
.then(data => console.log(data.data.success))
.catch(err => console.log(err));
}
return (
<div>
<Fragment>
<InputGroup>
<label htmlFor='WEATHER_API_KEY'>API Key</label>
<input
type='text'
id='WEATHER_API_KEY'
name='WEATHER_API_KEY'
placeholder='secret'
value={formData.WEATHER_API_KEY}
onChange={(e) => inputChangeHandler(e)}
/>
<span>
Using
<a
href='https://www.weatherapi.com/pricing.aspx'
target='blank'>
{' '}Weather API
</a>
</span>
</InputGroup>
<InputGroup>
<label htmlFor='lat'>Location Latitude</label>
<input
type='number'
id='lat'
name='lat'
placeholder='52.22'
value={formData.lat}
onChange={(e) => inputChangeHandler(e, true)}
/>
<span>
You can use
<a
href='https://www.latlong.net/convert-address-to-lat-long.html'
target='blank'>
{' '}latlong.net
</a>
</span>
</InputGroup>
<InputGroup>
<label htmlFor='long'>Location Longitude</label>
<input
type='number'
id='long'
name='long'
placeholder='21.01'
value={formData.long}
onChange={(e) => inputChangeHandler(e, true)}
/>
</InputGroup>
<InputGroup>
<label htmlFor='isCelsius'>Temperature Unit</label>
<select
id='isCelsius'
name='isCelsius'
onChange={(e) => inputChangeHandler(e, true)}
value={formData.isCelsius}
>
<option value={1}>Celsius</option>
<option value={0}>Fahrenheit</option>
</select>
</InputGroup>
</Fragment>
<Button>Save changes</Button>
</div>
<form onSubmit={(e) => formSubmitHandler(e)}>
<InputGroup>
<label htmlFor='WEATHER_API_KEY'>API Key</label>
<input
type='text'
id='WEATHER_API_KEY'
name='WEATHER_API_KEY'
placeholder='secret'
value={formData.WEATHER_API_KEY}
onChange={(e) => inputChangeHandler(e)}
/>
<span>
Using
<a
href='https://www.weatherapi.com/pricing.aspx'
target='blank'>
{' '}Weather API
</a>
</span>
</InputGroup>
<InputGroup>
<label htmlFor='lat'>Location Latitude</label>
<input
type='number'
id='lat'
name='lat'
placeholder='52.22'
value={formData.lat}
onChange={(e) => inputChangeHandler(e, true)}
/>
<span>
You can use
<a
href='https://www.latlong.net/convert-address-to-lat-long.html'
target='blank'>
{' '}latlong.net
</a>
</span>
</InputGroup>
<InputGroup>
<label htmlFor='long'>Location Longitude</label>
<input
type='number'
id='long'
name='long'
placeholder='21.01'
value={formData.long}
onChange={(e) => inputChangeHandler(e, true)}
/>
</InputGroup>
<InputGroup>
<label htmlFor='isCelsius'>Temperature Unit</label>
<select
id='isCelsius'
name='isCelsius'
onChange={(e) => inputChangeHandler(e, true)}
value={formData.isCelsius}
>
<option value={1}>Celsius</option>
<option value={0}>Fahrenheit</option>
</select>
</InputGroup>
<Button>Save changes</Button>
</form>
)
}