rename frontend directory to frontend

crawler/frontend/src/components/Map.tsx

@@ -0,0 +1,10 @@
+export function Map() {
+    return <>
+        <div id='map'></div>
+
+        <div id="legend">
+            <svg id="svg">
+            </svg>
+        </div>
+    </>
+}

crawler/frontend/src/components/Parameters.tsx

@@ -0,0 +1,88 @@
+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>
+    </>
+}
+