diff --git a/my-app/src/presenters/SidebarPresenter.jsx b/my-app/src/presenters/SidebarPresenter.jsx
index c62615a..1d7691f 100644
--- a/my-app/src/presenters/SidebarPresenter.jsx
+++ b/my-app/src/presenters/SidebarPresenter.jsx
@@ -3,22 +3,16 @@ import { observer } from "mobx-react-lite";
import SidebarView from "../views/SidebarView.jsx";
import transcriptScraperFunction from "./UploadTranscriptPresenter.jsx";
import { useState } from "react";
+import { use } from 'react';
const SidebarPresenter = observer(({ model }) => {
-
- let currentLanguageSet = model.filterOptions.language;
- let currentLevelSet = model.filterOptions.level;
- let currentPeriodSet = model.filterOptions.period;
- let currentDepartmentSet = model.filterOptions.department;
- let currentLocationSet = model.filterOptions.location;
-
-
useEffect(() => {
model.setFiltersChange();
},[model]);
function handleLanguageFilterChange(param) {
+ let currentLanguageSet = model.filterOptions.language;
if (param === "English") {
switch (currentLanguageSet) {
case "none":
@@ -57,7 +51,9 @@ const SidebarPresenter = observer(({ model }) => {
model.updateLanguageFilter(currentLanguageSet);
}
function handleLevelFilterChange(param) {
-
+
+ let currentLevelSet = model.filterOptions.level;
+
if (!currentLevelSet.includes(param)) {
currentLevelSet.push(param);
} else {
@@ -70,6 +66,9 @@ const SidebarPresenter = observer(({ model }) => {
}
function handleDepartmentFilterChange(param) {
+
+ let currentDepartmentSet = model.filterOptions.department;
+
if (currentDepartmentSet.includes(param)) {
const index = currentDepartmentSet.indexOf(param);
if (index > -1) {
@@ -83,12 +82,18 @@ const SidebarPresenter = observer(({ model }) => {
}
function handlePeriodFilterChange(param) {
+
+ let currentPeriodSet = model.filterOptions.period;
+
currentPeriodSet[param] = !currentPeriodSet[param];
model.updatePeriodFilter(currentPeriodSet);
model.setFiltersChange();
}
function handleLocationFilterChange(param) {
+
+ let currentLocationSet = model.filterOptions.location;
+
if (currentLocationSet.includes(param)) {
const index = currentLocationSet.indexOf(param);
if (index > -1) {
@@ -226,6 +231,11 @@ const SidebarPresenter = observer(({ model }) => {
};
+
+ const [initialSliderValues, setInitialSliderValues] = useState([0.5,45]);
+ useEffect(()=>{
+ setInitialSliderValues([model.filterOptions.creditMin, model.filterOptions.creditMax]);
+ }, [])
//==========================================================
return (
@@ -237,20 +247,20 @@ const SidebarPresenter = observer(({ model }) => {
initialApplyTranscriptFilter={model.filterOptions.applyTranscriptFilter}
initialTranscriptElegiblityValue={model.filterOptions.eligibility}
- initialLanguageFilterOptions={currentLanguageSet}
+ initialLanguageFilterOptions={model.filterOptions.language}
initialLanguageFilterEnable={model.filterOptions.applyLanguageFilter}
- initialLevelFilterOptions={currentLevelSet}
+ initialLevelFilterOptions={model.filterOptions.level}
initialLevelFilterEnable={model.filterOptions.applyLevelFilter}
- initialPeriodFilterOptions={currentPeriodSet}
+ initialPeriodFilterOptions={model.filterOptions.period}
initialPeriodFilterEnable={model.filterOptions.applyPeriodFilter}
- initialDepartmentFilterOptions={formatDepartmentSet(currentDepartmentSet.filter(item => item !== "undefined/undefined"))}
+ initialDepartmentFilterOptions={formatDepartmentSet(model.filterOptions.department.filter(item => item !== "undefined/undefined"))}
initialDepartmentFilterEnable={model.filterOptions.applyDepartmentFilter}
DepartmentFilterField = {model.formatDepartments()}
- initialLocationFilterOptions={currentLocationSet}
+ initialLocationFilterOptions={model.filterOptions.location}
initialLocationFilterEnable={model.filterOptions.applyLocationFilter}
LocationFilterField = {model.locations}
diff --git a/my-app/src/views/Components/SideBarComponents/ResetButtonField.jsx b/my-app/src/views/Components/SideBarComponents/ResetButtonField.jsx
new file mode 100644
index 0000000..f157ed9
--- /dev/null
+++ b/my-app/src/views/Components/SideBarComponents/ResetButtonField.jsx
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { useRef, useEffect } from "react";
+import FilterEnableCheckbox from "./FilterEnableCheckbox";
+import Tooltip from "./ToolTip";
+
+export default function DropDownField(props) {
+
+ const resetFiltersFunction = () => {
+ console.log("meow.");
+ };
+
+ return(
+
+
+
+ );
+
+
+}
\ No newline at end of file
diff --git a/my-app/src/views/Components/SideBarComponents/SliderField.jsx b/my-app/src/views/Components/SideBarComponents/SliderField.jsx
index 82ccd65..d929550 100644
--- a/my-app/src/views/Components/SideBarComponents/SliderField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/SliderField.jsx
@@ -1,6 +1,7 @@
-import React, { useState, useRef, useEffect, useMemo } from "react";
+import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import FilterEnableCheckbox from "./FilterEnableCheckbox";
import Tooltip from "./ToolTip";
+import Slider from '@mui/material/Slider';
/**
@@ -11,20 +12,33 @@ import Tooltip from "./ToolTip";
export default function UploadField(props) {
let paramFieldType = "slider";
-
const values = useMemo(() => [
- 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5,
+ 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5,
6, 7, 7.5, 8, 8.5, 9, 10, 11, 12, 13.5,
14, 15, 20, 22.5, 30, 45
], []);
+ const [value, setValue] = useState([0,values.length-1]);
+
const [minIndex, setMinIndex] = useState(0);
const [maxIndex, setMaxIndex] = useState(values.length - 1);
const [filterEnabled, setFilterEnabled] = useState(props.filterEnable);
const sliderRef = useRef(null);
const checkboxRef = useRef(null);
- useEffect(() => {
+ const [isChanging, setChanging] = useState(false);
+
+ useEffect(()=>{
+
+ if (!isChanging && props.initialValues && props.initialValues[0] != 0) {
+ console.log(props.initialValues);
+ setValue([values.indexOf(values.find((c) => c == props.initialValues[0])), values.indexOf(values.find((c) => c == props.initialValues[1]))]);
+ setChanging(true);
+ }
+ }, [props.initialValues, isChanging])
+
+ /* useState(() => {
+ setValue(props.initialValues);
for (let i = 0; i < values.length; i++) {
if (values[i] === props?.initialValues[0]) {
setMinIndex(i);
@@ -33,9 +47,22 @@ export default function UploadField(props) {
setMaxIndex(i);
}
}
- }, [props?.initialValues, values]); // Empty dependency array ensures this runs only once
+
+ }, [props.initialValues]); // Empty dependency array ensures this runs only once*/
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ const [min, max] = [...newValue];
+ setMinIndex(min);
+ setMaxIndex(max);
+ };
+
+ const handleCommit = (event, newValue) => {
+ const [minIndex, maxIndex] = newValue;
+ props.HandleFilterChange([paramFieldType, props.filterName, [values[minIndex], values[maxIndex]]]);
+ };
+
const handleDrag = (e, thumbType) => {
const slider = sliderRef.current;
@@ -86,83 +113,42 @@ export default function UploadField(props) {
}}>
- Credits: {values[minIndex]} – {values[maxIndex]}
+ Credits: {(values[minIndex]==props.initialValues[0]) ? values[minIndex] : props.initialValues[0]} – {(values[maxIndex]==props.initialValues[1]) ? values[maxIndex] : props.initialValues[1]}
{/* SLIDER */}
-
handleDrag(e, "bar")}
- onTouchStart={(e) => handleDrag(e, "bar")}
- >
- {/* Selected range bar */}
-
-
- {/* Min thumb */}
-
{
- e.stopPropagation();
- const move = (ev) => handleDrag(ev, "min");
- const up = () => {
- window.removeEventListener("mousemove", move);
- window.removeEventListener("mouseup", up);
- //props.HandleFilterChange([paramFieldType, props.filterName, [values[minIndex], values[maxIndex]]]);
- };
- window.addEventListener("mousemove", move);
- window.addEventListener("mouseup", up);
- }}
- onTouchStart={() => {
- const move = (ev) => handleDrag(ev, "min");
- const end = () => {
- window.removeEventListener("touchmove", move);
- window.removeEventListener("touchend", end);
- //props.HandleFilterChange([paramFieldType, props.filterName, [values[minIndex], values[maxIndex]]]);
- };
- window.addEventListener("touchmove", move);
- window.addEventListener("touchend", end);
- }}
- onMouseUp={() => props.HandleFilterChange([paramFieldType, props.filterName, [values[minIndex], values[maxIndex]]])}
- className="absolute top-1/2 -translate-y-1/2 bg-violet-600 h-4 w-4 rounded-full z-20"
- style={{
- left: `calc(${(minIndex / (values.length - 1)) * 100}% - 8px)`
- }}
- />
-
- {/* Max thumb */}
-
{
- e.stopPropagation();
- const move = (ev) => handleDrag(ev, "max");
- const up = () => {
- window.removeEventListener("mousemove", move);
- window.removeEventListener("mouseup", up);
- };
- window.addEventListener("mousemove", move);
- window.addEventListener("mouseup", up);
- }}
- onTouchStart={() => {
- const move = (ev) => handleDrag(ev, "max");
- const end = () => {
- window.removeEventListener("touchmove", move);
- window.removeEventListener("touchend", end);
- };
- window.addEventListener("touchmove", move);
- window.addEventListener("touchend", end);
- }}
- onMouseUp={() => props.HandleFilterChange([paramFieldType, props.filterName, [values[minIndex], values[maxIndex]]])}
- className="absolute top-1/2 -translate-y-1/2 bg-violet-600 h-4 w-4 rounded-full z-20"
- style={{
- left: `calc(${(maxIndex / (values.length - 1)) * 100}% - 8px)`
- }}
- />
-
+
'Temperature range'}
+ value={value}
+ min={0}
+ max={values.length - 1}
+ onChange={handleChange}
+ onChangeCommitted={handleCommit}
+
+ marks={values.slice(0, 45 + 1).map((_, idx) => ({ value: idx }))}
+ step={1}
+
+
+ sx={{
+ boxSizing: 'border-box',
+ width: '100%',
+ color: '#8e51ff',
+ height: 8,
+ '& .MuiSlider-thumb': {
+ width: 20,
+ height: 20,
+ backgroundColor: '#8e51ff',
+ },
+ '& .MuiSlider-track': {
+ border: 'none',
+ },
+ '& .MuiSlider-rail': {
+ opacity: 0.3,
+ backgroundColor: '#8e51ff',
+ },
+ }}
+ />
diff --git a/my-app/src/views/Components/SideBarComponents/ToggleField.jsx b/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
index 78709a0..1c0e19a 100644
--- a/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
@@ -12,9 +12,9 @@ export default function ToggleField(props) {
let paramFieldType = "toggle";
const [filterEnabled, setFilterEnabled] = useState(props.filterEnable);
- // eslint-disable-next-line no-unused-vars
- const [prop1Set, setprop1Set] = useState((props.initialValues=="both") || (props.initialValues==String(props.fields[0]).charAt(0).toLowerCase() + String(props.fields[0]).slice(1)));
- // eslint-disable-next-line no-unused-vars
+ //eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [prop1Set, setprop1Set] = useState((props.initialValues == "both") || (props.initialValues == String(props.fields[0]).charAt(0).toLowerCase() + String(props.fields[0]).slice(1)));
+ //eslint-disable-next-line @typescript-eslint/no-unused-vars
const [prop2Set, setprop2Set] = useState((props.initialValues=="both") || (props.initialValues==String(props.fields[1]).charAt(0).toLowerCase() + String(props.fields[1]).slice(1)));
const checkboxRef = useRef(null);
diff --git a/my-app/src/views/Components/SideBarComponents/UploadField.jsx b/my-app/src/views/Components/SideBarComponents/UploadField.jsx
index ee91630..0c74c82 100644
--- a/my-app/src/views/Components/SideBarComponents/UploadField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/UploadField.jsx
@@ -15,7 +15,7 @@ export default function UploadField(props) {
const [isDragging, setIsDragging] = useState(false);
const [filterEnabled, setFilterEnabled] = useState(props.filterEnable);
- const [fileUploaded, setfileUploaded] = useState(false);
+ const [fileUploaded, setfileUploaded] = useState(localStorage.getItem("completedCourses"));
const checkboxRef = useRef(null);
diff --git a/my-app/src/views/ListView.jsx b/my-app/src/views/ListView.jsx
index 33a1868..b5b2337 100644
--- a/my-app/src/views/ListView.jsx
+++ b/my-app/src/views/ListView.jsx
@@ -111,7 +111,7 @@ function ListView(props) {