89 lines
3.9 KiB
TypeScript
89 lines
3.9 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { useAuth } from "react-oidc-context";
|
||
|
|
|
||
|
|
export function Parameters() {
|
||
|
|
const [data, setData] = useState({});
|
||
|
|
const [error, setError] = useState('')
|
||
|
|
const [isLoading, setIsLoading] = useState(false)
|
||
|
|
const { user } = useAuth(); // Get user data (includes token)
|
||
|
|
const fetchData = async () => {
|
||
|
|
setIsLoading(true);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const accessToken = user?.access_token;
|
||
|
|
const response = await fetch('/api/listing',
|
||
|
|
{
|
||
|
|
method: 'GET',
|
||
|
|
headers: {
|
||
|
|
'Authorization': `Bearer ${accessToken}`, // Pass the token
|
||
|
|
'Content-Type': 'application/json',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
);
|
||
|
|
if (!response.ok) throw new Error('Error: ' + response.json());
|
||
|
|
const data: Response = await response.json();
|
||
|
|
setData(data);
|
||
|
|
} catch (err) {
|
||
|
|
setError('Failed to fetch data: ' + err);
|
||
|
|
} finally {
|
||
|
|
setIsLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
console.log(data)
|
||
|
|
|
||
|
|
return <>
|
||
|
|
<div className="modal modal-open" id="modal_overlay">
|
||
|
|
<div className="modal-inner">
|
||
|
|
<div className="modal-content">
|
||
|
|
<div className="modal-close-icon">
|
||
|
|
<a href="javascript:void(0)" className="close-modal"><i className="fa fa-times"
|
||
|
|
aria-hidden="true"></i></a>
|
||
|
|
</div>
|
||
|
|
<div className="modal-content-inner">
|
||
|
|
<h4>Visualization Parameters</h4>
|
||
|
|
<p>Conflicting parameters will yield zero results.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="row">
|
||
|
|
<div className="five columns">
|
||
|
|
<label >City</label>
|
||
|
|
<input type="search" className="u-full-width" id="city_input" placeholder="London"
|
||
|
|
rv-value="filter.city" /> <br />
|
||
|
|
<div>
|
||
|
|
<div className="one columns">
|
||
|
|
<p></p>
|
||
|
|
<p></p>
|
||
|
|
<p>or</p>Squaremeter
|
||
|
|
</div>
|
||
|
|
<div className="five columns">
|
||
|
|
<label >Country</label>
|
||
|
|
<select className="u-full-width" id="country_input" rv-value="filter.country">
|
||
|
|
<option rv-each-country="filter.countries" rv-value="country">country placeholder</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr className="modal-buttons-seperator" />
|
||
|
|
<label >What to visualize?</label>
|
||
|
|
|
||
|
|
<select className="u-full-width" id="heatmap_type" rv-value="filter.mode">
|
||
|
|
<option selected={true} value="qmprice">Price per squaremeter</option>
|
||
|
|
<option value="rooms">Number of rooms</option>
|
||
|
|
<option value="qm">Squaremeter</option>
|
||
|
|
<option value="total_price">Price</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<hr className="modal-buttons-seperator" />
|
||
|
|
<div className="modal-buttons">
|
||
|
|
<button className="button-primary close-modal" disabled={isLoading} onClick={() => {
|
||
|
|
fetchData()
|
||
|
|
}}>Load Data</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
|