viktor/wrongmove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

setup map component to render correctly and visualize all listings in scrollable components

Browse source
This commit is contained in:
Viktor Barzin 2025-06-15 21:06:10 +00:00
parent a8ee95b9d9
commit 8e41032c6c
No known key found for this signature in database
GPG key ID: 4056458DBDBF8863
23 changed files with 2183 additions and 342 deletions
Download patch file Download diff file Expand all files Collapse all files

114
crawler/frontend/src/components/Parameters.tsx
View file

@ -1,91 +1,41 @@
import { useState } from "react";
import { useAuth } from "react-oidc-context";
import { Button } from "./ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
export function Parameters(
props: {
setListingData: (data: any) => void,
isOpen: boolean,
onSubmit: () => void,
}
) {
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_geojson',
{
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();
props.setListingData(data);
} catch (err) {
setError('Failed to fetch data: ' + err);
alert(error)
} finally {
setIsLoading(false);
}
};
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 defaultValue={'qmprice'} className="u-full-width" id="heatmap_type" rv-value="filter.mode">
<option 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>
{/* <Dialog open={props.isOpen}> */}
<Dialog >
<form>
<DialogTrigger asChild>
<Button variant="outline">Open Parameters</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Parameters</DialogTitle>
</DialogHeader>
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Metric to Visualize" />
</SelectTrigger>
<SelectContent>
<SelectItem value="qmprice">Price per squaremeter</SelectItem>
<SelectItem value="rooms">Number of rooms</SelectItem>
<SelectItem value="qm">Area</SelectItem>
<SelectItem value="total_price">Price</SelectItem>
</SelectContent>
</Select>
<DialogFooter>
<Button onClick={() => props.onSubmit()}>Fetch Data</Button>
</DialogFooter>
</DialogContent>
</form>
</Dialog>
</>
}