Adjusted popoutpanel filter UI, fixed comparison rendering with extra brackets
This commit is contained in:
parent
48219a464c
commit
75d1b160d8
@ -11,6 +11,7 @@
|
||||
transform: translateX(0); /* Ensure visibility by default */
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: 1000; /* Ensures it is above other elements */
|
||||
box-sizing: border-box; /* Ensures padding is included in width calculation */
|
||||
}
|
||||
|
||||
.popout-panel.hidden {
|
||||
@ -100,69 +101,39 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Filter controls syling*/
|
||||
.filter-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
/* Specific styles for Popout Panel */
|
||||
.popout-panel .filter-container {
|
||||
display: block;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-controls input[type="radio"] {
|
||||
margin-right: 5px; /* Make radio buttons closer to the label */
|
||||
vertical-align: middle;
|
||||
.popout-panel .filter-group {
|
||||
display: block;
|
||||
gap: 5px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.filter-controls label {
|
||||
.popout-panel .filter-group label {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Adjust radio button alignment */
|
||||
.filter-controls label {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.filter-controls input[type="radio"] {
|
||||
margin-right: 5px; /* Make radio buttons closer to the label */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Space between Tuition and Distance sliders */
|
||||
.slider-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
gap: 30px; /* Add space between the sliders */
|
||||
}
|
||||
|
||||
.slider-container input[type="range"] {
|
||||
width: 45%; /* Allow equal width for both sliders */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.range-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Style for the range slider to show min/max values */
|
||||
.range-slider-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.popout-panel .filter-group input[type="range"] {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Space between Tuition and Distance sliders */
|
||||
.range-slider-wrapper input {
|
||||
width: 48%; /* Make both sliders occupy 48% space to leave space between them */
|
||||
.popout-panel .range-labels {
|
||||
display: flex;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Schools section: Grid layout with clear separation */
|
||||
|
||||
@ -17,8 +17,8 @@ function PopoutPanel({
|
||||
const [loadingCalculation, setLoadingCalculation] = useState(false);
|
||||
const [persistedROI, setPersistedROI] = useState({});
|
||||
const [sortBy, setSortBy] = useState('tuition'); // Default sorting
|
||||
const [tuitionRange, setTuitionRange] = useState([0, 50000]);
|
||||
const [distanceRange, setDistanceRange] = useState([0, 200]);
|
||||
const [maxTuition, setMaxTuition] = useState(50000); // Set default max tuition value
|
||||
const [maxDistance, setMaxDistance] = useState(200); // Set default max distance value
|
||||
|
||||
const {
|
||||
jobDescription = null,
|
||||
@ -32,7 +32,7 @@ function PopoutPanel({
|
||||
useEffect(() => {
|
||||
setResults([]);
|
||||
setIsCalculated(false);
|
||||
}, [sortBy, tuitionRange, distanceRange]);
|
||||
}, [sortBy, maxTuition, maxDistance]);
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
@ -66,19 +66,12 @@ function PopoutPanel({
|
||||
/** 🔹 Apply Sorting & Filtering Directly at Render Time **/
|
||||
const filteredAndSortedSchools = [...schools]
|
||||
.filter(school => {
|
||||
// Convert tuition to a number
|
||||
const inStateCost = parseFloat(school['In_state cost']);
|
||||
|
||||
// Remove " mi" from distance and convert it to a number
|
||||
const distance = parseFloat(school['distance'].replace(' mi', ''));
|
||||
|
||||
console.log(`Filtering School: ${school['INSTNM']} | Tuition: ${inStateCost} | Distance: ${distance}`);
|
||||
|
||||
return (
|
||||
inStateCost >= tuitionRange[0] &&
|
||||
inStateCost <= tuitionRange[1] &&
|
||||
distance >= distanceRange[0] &&
|
||||
distance <= distanceRange[1]
|
||||
inStateCost <= maxTuition &&
|
||||
distance <= maxDistance
|
||||
);
|
||||
})
|
||||
.sort((a, b) => {
|
||||
@ -153,62 +146,48 @@ function PopoutPanel({
|
||||
</div>
|
||||
|
||||
{/* Sorting & Filtering UI */}
|
||||
<div className="filter-controls">
|
||||
<div>
|
||||
<label>Sort by:</label>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort"
|
||||
value="tuition"
|
||||
checked={sortBy === 'tuition'}
|
||||
onChange={() => setSortBy('tuition')}
|
||||
/> Tuition
|
||||
<input
|
||||
type="radio"
|
||||
name="sort"
|
||||
value="distance"
|
||||
checked={sortBy === 'distance'}
|
||||
onChange={() => setSortBy('distance')}
|
||||
/> Distance
|
||||
{/* Sorting UI */}
|
||||
<div className="filter-container">
|
||||
<div className="filter-group">
|
||||
<label htmlFor="sort-by">Sort by:</label>
|
||||
<select
|
||||
id="sort-by"
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
>
|
||||
<option value="tuition">Tuition</option>
|
||||
<option value="distance">Distance</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label>Tuition Range: ${tuitionRange[0]} - ${tuitionRange[1]}</label>
|
||||
<div className="filter-group">
|
||||
<label htmlFor="tuition-range">Max Tuition:</label>
|
||||
<input
|
||||
type="range"
|
||||
id="tuition-range"
|
||||
min="0"
|
||||
max="50000"
|
||||
step="500"
|
||||
value={tuitionRange[0]}
|
||||
onChange={(e) => setTuitionRange([Number(e.target.value), tuitionRange[1]])}
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="50000"
|
||||
step="500"
|
||||
value={tuitionRange[1]}
|
||||
onChange={(e) => setTuitionRange([tuitionRange[0], Number(e.target.value)])}
|
||||
/>
|
||||
|
||||
<label>Distance Range: {distanceRange[0]} - {distanceRange[1]} mi</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="200"
|
||||
step="5"
|
||||
value={distanceRange[0]}
|
||||
onChange={(e) => setDistanceRange([Number(e.target.value), distanceRange[1]])}
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="200"
|
||||
step="5"
|
||||
value={distanceRange[1]}
|
||||
onChange={(e) => setDistanceRange([distanceRange[0], Number(e.target.value)])}
|
||||
max="100000"
|
||||
step="1000"
|
||||
value={maxTuition}
|
||||
onChange={(e) => setMaxTuition(Number(e.target.value))}
|
||||
/>
|
||||
<span>{`$0 - $${maxTuition.toLocaleString()}`}</span>
|
||||
</div>
|
||||
|
||||
<div className="filter-group">
|
||||
<label htmlFor="distance-range">Max Distance (mi):</label>
|
||||
<input
|
||||
type="range"
|
||||
id="distance-range"
|
||||
min="0"
|
||||
max="1000"
|
||||
step="10"
|
||||
value={maxDistance}
|
||||
onChange={(e) => setMaxDistance(Number(e.target.value))}
|
||||
/>
|
||||
<span>{`${maxDistance} mi`}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Schools Offering Programs Section */}
|
||||
<h3>Schools Offering Programs</h3>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user