\n
\n \n \n {this.getCourseDescrSwitch()}\n \n \n $&\"\n ),\n }}\n />{\" \"}\n -{\" \"}\n $&\"\n ),\n }}\n />\n ({this.props.cls.CR} credit hours)\n \n {addToCompareButton}\n
\n \n {/*YO: Winter Intersession image 10/19/2023 */} \n
\n \n );\n }\n}\n\nexport default ClassCardBig;\n","import React from 'react';\n//import Cls from './Cls';\nimport PageButton from './PageButton';\nimport ClassCardBig from './ClassCardBig';\n\nclass ClassesList extends React.Component {\n buttonToLink = {\n fontSize: '1em',\n textAlign: 'left',\n color: 'black',\n fontWeight: 'bold',\n background: 'none',\n margin: 0,\n padding: 0,\n border: 'none',\n cursor: 'pointer'\n\n }\n\n state = {\n courseSort: \"NONE\",\n classNumberSort: \"NONE\",\n dateSort: \"ASC\",\n locationSort: \"NONE\",\n page: 0,\n itemsPerPage: 25,\n }\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.gotoPage = this.gotoPage.bind(this);\n }\n\n getNextSortMode(sortmode) {\n switch (sortmode) {\n case \"ASC\":\n return \"DESC\";\n case \"DESC\":\n return \"NONE\";\n case \"NONE\":\n return \"ASC\";\n default:\n }\n }\n\n gotoPage(page) {\n this.setState({ page: page });\n }\n\n updateSort(sort) {\n let newState = {};\n for (const [key, value] of Object.entries(this.state)) {\n if (key.slice(-4) === \"Sort\") {\n if (key === sort) {\n newState[key] = this.getNextSortMode(value);\n } else {\n newState[key] = \"NONE\";\n }\n }\n }\n this.setState(newState);\n }\n\n handleChange(e) {\n switch (e.target.id) {\n case \"btnCourseSort\":\n this.updateSort(\"courseSort\");\n break;\n case \"btnClassNumberSort\":\n this.updateSort(\"classNumberSort\");\n break;\n case \"btnDateSort\":\n this.updateSort(\"dateSort\");\n break;\n case \"btnLocationSort\":\n this.updateSort(\"locationSort\");\n break;\n default:\n console.log(e.target.id);\n }\n }\n\n getSortedBy() {\n for (const [key, value] of Object.entries(this.state)) {\n if (key.slice(-4) === \"Sort\") {\n if (value !== \"NONE\") {\n return key;\n }\n }\n }\n }\n\n render() {\n\n let classes = this.props.classes;\n //sort\n switch (this.getSortedBy()) {\n case \"courseSort\":\n if (this.state.courseSort === \"ASC\") {\n classes.sort((a, b) => (a.S + a.CN > b.S + b.CN) ? 1 : ((b.S + b.CN > a.S + a.CN) ? -1 : 0));\n } else {\n classes.sort((b, a) => (a.S + a.CN > b.S + b.CN) ? 1 : ((b.S + b.CN > a.S + a.CN) ? -1 : 0));\n }\n break;\n case \"classNumberSort\":\n if (this.state.classNumberSort === \"ASC\") {\n classes.sort((a, b) => (a.CLASS_NBR > b.CLASS_NBR) ? 1 : ((b.CLASS_NBR > a.CLASS_NBR) ? -1 : 0));\n } else {\n classes.sort((b, a) => (a.CLASS_NBR > b.CLASS_NBR) ? 1 : ((b.CLASS_NBR > a.CLASS_NBR) ? -1 : 0));\n }\n break;\n case \"dateSort\":\n if (this.state.dateSort === \"ASC\") {\n classes.sort((a, b) => (new Date(a.START_DT) > new Date(b.START_DT)) ? 1 : ((new Date(b.START_DT) > new Date(a.START_DT)) ? -1 : 0));\n } else {\n classes.sort((b, a) => (new Date(a.START_DT) > new Date(b.START_DT)) ? 1 : ((new Date(b.START_DT) > new Date(a.START_DT)) ? -1 : 0));\n }\n break;\n case \"locationSort\":\n if (this.state.locationSort === \"ASC\") {\n classes.sort((a, b) => (a.LOC_D > b.LOC_D) ? 1 : ((b.LOC_D > a.LOC_D) ? -1 : 0));\n } else {\n classes.sort((b, a) => (a.LOC_D > b.LOC_D) ? 1 : ((b.LOC_D > a.LOC_D) ? -1 : 0));\n }\n break;\n default:\n }\n\n //page\n let i;\n let classesOnThisPage = [];\n let currentPage = this.state.page;\n\n if (currentPage * this.state.itemsPerPage > this.props.classes.length) {\n currentPage = Math.ceil(this.props.classes.length / this.state.itemsPerPage) - 1;\n }\n\n for (i = currentPage * this.state.itemsPerPage; i < (currentPage * this.state.itemsPerPage) + this.state.itemsPerPage; i++) {\n if (classes[i]) {\n classesOnThisPage.push(classes[i]);\n } else {\n break;\n }\n }\n\n //page selector\n let totalPages = Math.ceil(classes.length / this.state.itemsPerPage);\n let pages = [];\n for (i = 0; i < totalPages; i++) {\n pages.push(i);\n }\n\n return (\n \n {this.props.cls.NT.length > 1 && this.props.cls.NT.includes(\"intersession\") ? (\n <>\n \n \n \n ) : null}\n \n \n
\n {this.props.cls.NT.length > 1 && this.props.cls.NT.includes(\"Newly Added!\") ? (\n <>\n \n \n \n ) : null}\n \n \n
\n {this.props.cls.SEATS <=5 && this.props.cls.SEATS > 0 ? (\n <>\n \n \n \n ) : null}\n \n \n
\n {this.state.starterCourses.includes(\n this.props.cls.S + this.props.cls.CN\n ) ? (\n
\n \n \n {\" \"}\n * This class is\n great for new students.\n \n
\n ) : (\n \"\"\n )}\n\n
\n \n Location: \n $&\"\n ),\n }}\n />\n
\n Class number: \n {this.props.cls.CLASS_NBR}\n
\n Section: \n {this.props.cls.CS}\n {/*
\n {this.props.cls.IM === \"\" ? null : 'Instruction mode: '}\n {instructionMode} */}\n
\n \n Class number: \n {this.props.cls.CLASS_NBR}\n
\n Section: \n {this.props.cls.CS}\n {/*
\n {this.props.cls.IM === \"\" ? null : 'Instruction mode: '}\n {instructionMode} */}\n
\n Faculty: \n $&\"\n ),\n }}\n />\n
\n Status: \n {this.props.cls.ES === \"O\"\n ? \"Open\"\n : this.props.cls.LOC === \"WEB\"\n ? \"Closed\"\n : \"Waitlist available\"}\n
\n {new Date().setDate(new Date().getDate() + 21) >=\n new Date(this.props.cls.START_DT) ? (\n\n Syllabus\n \n ) : (\n Syllabus 3 wks prior to start\n )}\n
\n {/* {this.props.cls.LOC.substring(0, 1) === \"E\" ? null : this.props.cls.SEATS === -99 ? null : 'Seats available: ' + Math.max(this.props.cls.SEATS, 0)}
*/}\n
\n \n Status: \n {this.props.cls.ES === \"O\"\n ? \"Open\"\n : this.props.cls.LOC === \"WEB\"\n ? \"Closed\"\n : \"Waitlist available\"}\n
\n {new Date().setDate(new Date().getDate() + 21) >=\n new Date(this.props.cls.START_DT) ? (\n
\n {/* {this.props.cls.LOC.substring(0, 1) === \"E\" ? null : this.props.cls.SEATS === -99 ? null : 'Seats available: ' + Math.max(this.props.cls.SEATS, 0)}
*/}\n
\n {new Date(this.props.cls.START_DT).toLocaleDateString(\"en-US\")} -{\" \"}\n {new Date(this.props.cls.END_DT).toLocaleDateString(\"en-US\")}\n
\n {this.props.cls.MON === \"Y\" ||\n this.props.cls.TUES === \"Y\" ||\n this.props.cls.WED === \"Y\" ||\n this.props.cls.THURS === \"Y\" ||\n this.props.cls.FRI === \"Y\" ||\n this.props.cls.SAT === \"Y\" ||\n this.props.cls.SUN === \"Y\" ? (\n Days: \n ) : null}\n {this.props.cls.MON === \"Y\" ? \"Mon \" : \"\"}\n {this.props.cls.TUES === \"Y\" ? \"Tue \" : \"\"}\n {this.props.cls.WED === \"Y\" ? \"Wed \" : \"\"}\n {this.props.cls.THURS === \"Y\" ? \"Thu \" : \"\"}\n {this.props.cls.FRI === \"Y\" ? \"Fri \" : \"\"}\n {this.props.cls.SAT === \"Y\" ? \"Sat \" : \"\"}\n {this.props.cls.SUN === \"Y\" ? \"Sun \" : \"\"}\n
\n \n {this.props.cls.MON === \"Y\" ||\n this.props.cls.TUES === \"Y\" ||\n this.props.cls.WED === \"Y\" ||\n this.props.cls.THURS === \"Y\" ||\n this.props.cls.FRI === \"Y\" ||\n this.props.cls.SAT === \"Y\" ||\n this.props.cls.SUN === \"Y\" ? (\n Days: \n ) : null}\n {this.props.cls.MON === \"Y\" ? \"Mon \" : \"\"}\n {this.props.cls.TUES === \"Y\" ? \"Tue \" : \"\"}\n {this.props.cls.WED === \"Y\" ? \"Wed \" : \"\"}\n {this.props.cls.THURS === \"Y\" ? \"Thu \" : \"\"}\n {this.props.cls.FRI === \"Y\" ? \"Fri \" : \"\"}\n {this.props.cls.SAT === \"Y\" ? \"Sat \" : \"\"}\n {this.props.cls.SUN === \"Y\" ? \"Sun \" : \"\"}\n
\n
\n \n {/* Combine Instruction mode and notes on one line */}\n {/* {this.props.cls.IM === \"\" ? null : \"Instruction mode: \"}\n {instructionMode}\n {this.props.cls.IM === \"\" ? null : \" / \"} */}\n\n \n {this.props.cls.NT.length > 1 ? (\n <>\n Note: \n \n ) : null}\n \n $&\"\n ),\n }}\n />\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n );\n }\n}\n\nexport default ClassesList;","import React from 'react';\n\nclass NoClassesToDisplay extends React.Component {\n\n render() {\n return (\n \n Sort by:\n \n \n \n \n
\n\n {classesOnThisPage.map(cls => (\n \n
\n );\n }\n}\n\nexport default NoClassesToDisplay;","import React from 'react';\nimport TimeWithPopUp from './TimeWithPopup';\n\nclass ClassCard extends React.Component {\n\n render() {\n\n return (\n No classes were found using your current selection.
\nTry to add more locations, subjects, or instruction modes, or expand the date range.
\nDo you need help finding a class? Visit one of our Virtual Offices to speak to a person!
\n VIRTUAL OFFICE: CLICK HERE TO VISIT US 7 DAYS PER WEEK\n\n
\n );\n }\n}\n\nexport default ClassCard;","import React from 'react';\nimport ClassCard from './ClassCard';\n\n\nclass Compare extends React.Component {\n \n render() {\n return (\n \n {this.props.cls.S} {this.props.cls.CN} {this.props.cls.CS}
\n {this.props.cls.T}\n
\n \n {this.props.cls.T}\n
\n \n
\n \n \n \n
\n
\n | Location: | \n{this.props.cls.LOC_D} | \n
| Class number: | \n{this.props.cls.CLASS_NBR} | \n
| Credits: | \n{this.props.cls.CR} | \n
| Dates: | \n{new Date(this.props.cls.START_DT).toLocaleDateString('en-US')} - {new Date(this.props.cls.END_DT).toLocaleDateString('en-US')} | \n
| Time: | \n|
| Days: | \n\n {this.props.cls.MON === \"Y\" ? \"Mon \" : \"\"}\n {this.props.cls.TUES === \"Y\" ? \"Tue \" : \"\"}\n {this.props.cls.WED === \"Y\" ? \"Wed \" : \"\"}\n {this.props.cls.THURS === \"Y\" ? \"Thu \" : \"\"}\n {this.props.cls.FRI === \"Y\" ? \"Fri \" : \"\"}\n {this.props.cls.SAT === \"Y\" ? \"Sat \" : \"\"}\n {this.props.cls.SUN === \"Y\" ? \"Sun \" : \"\"}\n | \n
| Faculty: | \n{this.props.cls.FAC.replace(\",\",\", \")} | \n
| {this.props.cls.UC_DESCR254_NOTES} | \n|
| {this.props.cls.DESCRIPTION} | \n
\n {this.props.compares.map((compare) => {\n return (\n
\n );\n }\n}\n\nexport default Compare;","import React from 'react';\nimport ClassesList from './ClassesList';\nimport NoClassesToDisplay from './NoClassesToDisplay';\nimport Compare from './Compare';\n\nclass ResultPanel extends React.Component {\n\n render() {\n switch (this.props.status) {\n case \"NO_CLASSES_FOUND\":\n return (\n \n \n
\n );\n })}\n \n
\n );\n case \"SHOW_COMPARES\":\n return (\n \n Loading...\n
\n )\n }\n }\n}\n\nexport default ResultPanel;","import React from 'react';\n\nclass LoadingProgressBar extends React.Component {\n render() {\n return (\n \n
\n );\n }\n}\n\nexport default LoadingProgressBar;","/*\nSchedule of Classes - React \n\nJeroen Soeurt jeroen.soeurt@umgc.edu\n-------------------------------------\nThis was created as a more or less temp solution because the current\nSOC from 2006 no longer met the needs of UMGC Europe, and there were\nas of Spring 2021 not finalized plans to replace it. The approach is to \ngenerate one big JSON object containing the schedule that is loaded\nup-front, instead of doing AJAX calls to search server-side and\ndownload a sub-set of the schedule to the client. This was done for \ntwo reasons:\n1: \tThe server runs an old version of Cold Fusion and there were\n worries about the stability/robustness of it. This approach \n limits server-side processing, as the query can be cached.\n2: \tThis approach allows for faster client-side filtering and \n searching.\n3:\tThis approach does not require parameters to be passed from\n client to server, and thus prevents SQL injection attacks.\nFeedback indicated that the load-time of about 7 seconds of the app\nwas acceptable. If this changes in the future, then an AJAX-based\napproach is recommended. In that case, only the loading methods\nand filter method in App.js in the client need to be adjusted (and\neuropapi.cfm of course).\n\n----------------------------------------------------------------\n04/27/2021 JS: Original deployment. Ran into issue where prod servers did not return content-length header.\n Applied temp workaround that assumes a content-length as of today so progress bar works in\n loadClasses().\n04/28/2021 JS: Bug fixes: \n -Date filter does not include start date due to GMT vs CEST 2 hr time difference.\n -Compare button overlaps notes on mobile on long notes on specific phones.\n -Link on logo or title goes to wrong location\n -Search term disappears after comparing classes.\n Enhancements:\n -Checkbox label indent on second line.\n -Syllabus availability notice if not available\n -Added subject codes\n -Subjects adjust to career\n05/03/2021 JS: -Switched to AJAX per search instead of all data up front. This did not end up\n working. ColdFusion is just too slow.\n05/04/2021 JS: -Optimized by making descriptions a seperate load, and minifying/uglyfying field names\n in JSON. 8.5 mb to 2.9 mb. Stale cache load time from 45s to 11s.\n05/06/2021 JS: -Added \"credit hours\" after credits indicator.\n06/01/2021 JS: -Added session for staff version\n06/16/2021 JS: -A new delivery method was added without letting me know, and the question was raised why\n it does not work on the SOC. Making changes to facilitate this. The new delivery method\n is coded as location E700. The approach is to deal with it the same was as online classes\n (which are entered as location WEB).\n07/19/2021 JS -Made online the first option. \n -Changed europeapi.cfm to include a field that shows if it\n should be the current default term. \n -Changed loadTerms to find the default term and set it\n as termFilter in state. \n -Updated virtual office link.\n07/26/2021 JS: -Remove virtual as a delivery for which locations are an option in FilterPanel.js.\n -Classes at E994 are now the same as WEB.\n -A social work class is now identified by the career instead of the subject.\n*/\n\nimport './App.scss';\nimport Header from './components/Header';\nimport Footer from './components/Footer';\nimport FilterPanel from './components/FilterPanel';\nimport ResultPanel from './components/ResultPanel';\nimport React, { Component } from 'react';\nimport LoadingProgressBar from './components/LoadingProgressBar';\n\nexport const environment = {\n hostUrl: window.location.hostname\n};\n\nclass App extends Component {\n\n // Local development will still have to comment out above and uncomment below\n //default this value in cause env files are jacked\n apiUrl = \"https://webappsdev.umgc.edu/soc/europeapi.cfm\"\n\n state = {\n classes: [],\n unfilteredClasses: [],\n searchFilter: \"\",\n subjects: [],\n terms: [],\n careerFilter: ['UFSU', 'UGRD', 'USAL'],\n instructionModeFilter: ['ONSITE', 'REMOTE', 'FIELDSTUDY', 'VIRTUAL'],\n status: \"LOADING\",\n termFilter: \"\",\n locationFilter: [],\n subjectFilter: [],\n locationCheckboxes: [],\n subjectCheckboxes: [],\n ignoreFiltersFilter: false,\n startDateFirstFilter: null,\n startDateSecondFilter: null,\n oneCreditOnly: false,\n area: \"EUROPE\",\n downrangeLocations: [\"E993\", \"E687\", \"E983\", \"E482\", \"E966\", \"E967\", \"E968\", \"E976\", \"E402\", \"E441\", \"E702\", \"E974\", \"E696\", \"E484\"],\n compares: [],\n downloadProgress: 0,\n showClassesStarted: false,\n sessionFilter: \"\",\n sessions: []\n }\n\n componentDidMount() {\n this.loadLocations();\n }\n\n constructor(props) {\n super(props);\n this.clearDates = this.clearDates.bind(this);\n this.addCompare = this.addCompare.bind(this);\n this.showCompares = this.showCompares.bind(this);\n this.showResults = this.showResults.bind(this);\n this.removeCompare = this.removeCompare.bind(this);\n this.checkAllLocations = this.checkAllLocations.bind(this);\n this.checkAllSubjects = this.checkAllSubjects.bind(this);\n\n //make sure value isn't undefined\n if (process.env.REACT_APP_API_ENDPOINT && process.env.NODE_ENV !== 'production') {\n console.log('setting url');\n console.log(process.env.REACT_APP_API_ENDPOINT);\n this.apiUrl = process.env.REACT_APP_API_ENDPOINT;\n } else {\n this.apiUrl = \"//\" + environment.hostUrl + \"/soc/europeapi.cfm\"\n }\n\n }\n\n\n showCompares() {\n this.setState({ status: \"SHOW_COMPARES\" });\n }\n\n showResults() {\n if (this.state.classes.length > 0) {\n this.setState({ status: \"CLASSES_FOUND\" });\n } else {\n this.setState({ status: \"NO_CLASSES_FOUND\" });\n }\n }\n\n removeCompare(e) {\n let newCompares = this.state.compares.filter(cls => cls.CLASS_NBR !== parseInt(e.target.id));\n this.setState({ compares: newCompares });\n if (newCompares.length === 0) {\n this.showResults();\n }\n }\n\n addCompare(e) {\n if (this.state.compares.length < 3) {\n let newCompares = this.state.compares;\n let classToBeAdded = this.state.classes.filter(cls => cls.CLASS_NBR === parseInt(e.target.id));\n newCompares = newCompares.concat(classToBeAdded);\n this.setState({ compares: newCompares });\n }\n }\n\n loadLocations() {\n fetch(this.apiUrl + \"?f=locations\")\n .then(res => res.json())\n .then((data) => {\n data.sort((a, b) => (a.COUNTRY > b.COUNTRY) ? 1 : ((b.COUNTRY > a.COUNTRY) ? -1 : 0));\n this.setState({\n locationCheckboxes: data.map((location) => { return { id: location.LOC, value: location.LOC_D, isChecked: true, country: location.COUNTRY, isVisible: !this.state.downrangeLocations.includes(location.LOC) } }),\n locationFilter: data.map((location) => { return location.LOC }),\n }, this.loadSubjects);\n }).catch(console.log);\n }\n\n loadSubjects() {\n fetch(this.apiUrl + \"?f=subjects\")\n .then(res => res.json())\n .then((data) => {\n this.setState({\n subjectCheckboxes: data.map((subject) => { return { id: subject.S, value: subject.SD, career: subject.AC, isChecked: true } }),\n subjectFilter: data.map((subject) => { return subject.S }),\n }, this.loadTerms);\n }).catch(console.log);\n }\n\n loadTerms() {\n fetch(this.apiUrl + \"?f=terms\")\n .then(res => res.json())\n .then((data) => {\n //Add || data[0].STRM as default to the following in case a DEFAULT_DATE_AFTER not set in Admin for terms being sent.\n this.setState({ terms: data, termFilter: data.find(term => { return term.SELECTED === 1 })?.STRM || data[0].STRM }, this.loadSessions); //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining\n }).catch(console.log);\n }\n\n loadSessions() {\n fetch(this.apiUrl + \"?f=sessions\")\n .then(res => res.json())\n .then((data) => {\n this.setState({ sessions: data }, this.loadDescriptions);\n }).catch(console.log);\n }\n\n async loadDescriptions() {\n this.setState({ loadingText: \"Loading course descriptions....\" });\n this.setState({ downloadProgress: 0 });\n\n let xhr = new XMLHttpRequest();\n xhr.open(\"GET\", this.apiUrl + \"?f=descriptions\");\n\n xhr.onprogress = event => {\n /*Jeroen Soeurt, 04/27/2021\n Workaround. On 04/27/2021 when first deploying the prod server did not return\n a content length header. The content length as of right now should be 450000,\n so if there is no content-length, assume this is it. This way the progress bar\n works more or less. When the server config is fixed, it will start using the\n real content. In that case remove this workaround during the next deployment. */\n let total = event.total ? event.total : 535000;\n if (this.state.downloadProgress <= ((event.loaded / total) * 100) - 5) {\n this.setState({ downloadProgress: 10 + (event.loaded / total) * 100 });\n }\n };\n\n xhr.onload = () => {\n if (xhr.status !== 200) {\n console.log(`Error ${xhr.status}: ${xhr.statusText}`);\n } else {\n let response = JSON.parse(xhr.response);\n this.setState({ descriptions: response }, this.loadClasses);\n }\n };\n\n xhr.send();\n }\n\n async loadClasses() {\n this.setState({ loadingText: \"Loading schedule of classes....\" });\n this.setState({ downloadProgress: 0 });\n\n let xhr = new XMLHttpRequest();\n xhr.open(\"GET\", this.apiUrl + \"?f=schedule\");\n\n xhr.onprogress = event => {\n /*Jeroen Soeurt, 04/27/2021\n Workaround. On 04/27/2021 when first deploying the prod server did not return\n a content length header. The content length as of right now should be 8320357,\n so if there is no content-length, assume this is it. This way the progress bar\n works more or less. When the server config is fixed, it will start using the\n real content. In that case remove this workaround during the next deployment. */\n let total = event.total ? event.total : 4000000;\n if (this.state.downloadProgress <= ((event.loaded / total) * 100) - 5) {\n this.setState({ downloadProgress: 10 + (event.loaded / total) * 100 });\n }\n };\n\n xhr.onload = () => {\n if (xhr.status !== 200) {\n console.log(`Error ${xhr.status}: ${xhr.statusText}`);\n } else {\n let response = JSON.parse(xhr.response);\n\n this.setState({ unfilteredClasses: response }, this.compileSchedule);\n }\n };\n\n xhr.send();\n }\n\n compileSchedule() {\n let newUnfilteredClasses = this.state.unfilteredClasses.map((scheduledClass) => {\n scheduledClass.DESCRIPTION = this.state.descriptions.find((descr) => { return descr.COURSE === (scheduledClass.S + scheduledClass.CN) && descr.STRM === scheduledClass.STRM }).DESCRIPTION;\n return scheduledClass;\n });\n\n this.setState({ unfilteredClasses: newUnfilteredClasses }, this.updateClasses);\n }\n\n //Adds an instruction mode to state.instructionMode if it does not already exists.\n addInstructionMode(instructionMode) {\n if (!this.state.instructionModeFilter.includes(instructionMode)) {\n let newInstructionModeFilter = this.state.instructionModeFilter;\n newInstructionModeFilter.push(instructionMode);\n this.setState({ instructionModeFilter: newInstructionModeFilter }, this.updateClasses);\n }\n }\n\n //Remove an instruction mode from state.instructionMode.\n removeInstructionMode(instructionMode) {\n if (this.state.instructionModeFilter.length > 1) {\n this.setState({ instructionModeFilter: this.state.instructionModeFilter.filter((mode) => { return mode !== instructionMode }) }, this.updateClasses);\n }\n }\n\n //Adds a credit filter to state.creditFIlter if it does not already exists.\n addCredit(credit) {\n if (!this.state.creditFilter.includes(credit)) {\n let newCreditFilter = this.state.creditFilter;\n newCreditFilter.push(credit);\n this.setState({ creditFilter: newCreditFilter }, this.updateClasses);\n }\n }\n\n //Remove a credit filter from state.creditFIlter.\n removeCredit(credit) {\n this.setState({ creditFilter: this.state.creditFilter.filter((cr) => { return cr !== credit }) }, this.updateClasses);\n }\n\n //Clears data limitations.\n clearDates() {\n this.setState({ startDateFirstFilter: null, startDateSecondFilter: null }, this.updateClasses);\n }\n\n //Set area to Europe or downrange\n setArea(area) {\n if (area === \"EUROPE\") {\n let newLocationCheckboxes = this.state.locationCheckboxes.map((location) => { return { id: location.id, value: location.value, isChecked: true, country: location.country, isVisible: !this.state.downrangeLocations.includes(location.id) } });\n this.setState({ locationCheckboxes: newLocationCheckboxes }, this.updateClasses);\n this.setState({ area: \"EUROPE\" });\n } else {\n let newLocationCheckboxes = this.state.locationCheckboxes.map((location) => { return { id: location.id, value: location.value, isChecked: true, country: location.country, isVisible: this.state.downrangeLocations.includes(location.id) } });\n this.setState({ locationCheckboxes: newLocationCheckboxes }, this.updateClasses);\n this.setState({ area: \"DOWNRANGE\" });\n }\n }\n\n //Checks or unchecks all locations in the currently select area.\n checkAllLocations(e) {\n let newLocationCheckboxes = this.state.locationCheckboxes.map((location) => {\n if (this.state.area === \"EUROPE\") {\n return { id: location.id, value: location.value, isChecked: e.target.checked, country: location.country, isVisible: !this.state.downrangeLocations.includes(location.id) }\n } else {\n return { id: location.id, value: location.value, isChecked: e.target.checked, country: location.country, isVisible: this.state.downrangeLocations.includes(location.id) }\n }\n });\n this.setState({ locationCheckboxes: newLocationCheckboxes }, this.updateClasses);\n }\n\n //Checks or unchecks all subject checkboxes.\n checkAllSubjects(e) {\n let newSubjectCheckboxes = this.state.subjectCheckboxes.map(subject => {\n return { id: subject.id, value: subject.value, career: subject.career, isChecked: e.target.checked }\n });\n\n this.setState({ subjectCheckboxes: newSubjectCheckboxes }, this.updateClasses);\n }\n\n //Change handler for filter panel.\n onChange = (e) => {\n if (e.target.id === \"chkOnline\") {\n e.currentTarget.checked ? this.addInstructionMode('ONLINE') : this.removeInstructionMode('ONLINE');\n }\n else if (e.target.id === \"chkOnsite\") {\n e.currentTarget.checked ? this.addInstructionMode('ONSITE') : this.removeInstructionMode('ONSITE');\n }\n else if (e.target.id === \"chkRemote\") {\n e.currentTarget.checked ? this.addInstructionMode('REMOTE') : this.removeInstructionMode('REMOTE');\n }\n else if (e.target.id === \"chkVirtual\") {\n e.currentTarget.checked ? this.addInstructionMode('VIRTUAL') : this.removeInstructionMode('VIRTUAL');\n }\n else if (e.target.id === \"chkFieldStudy\") {\n e.currentTarget.checked ? this.addInstructionMode('FIELDSTUDY') : this.removeInstructionMode('FIELDSTUDY');\n }\n else if (e.target.id === \"radioUndergrad\") {\n this.setState({ sessionFilter: \"\" }, //Reset session when career changes\n this.setState({ careerFilter: ['UFSU', 'UGRD', 'USAL'] }, this.updateClasses));\n }\n else if (e.target.id === \"radioGrad\") {\n this.setState({ sessionFilter: \"\" }, //Reset session when career changes\n this.setState({ careerFilter: ['GBSU', 'GR4T', 'GRAD', 'GSAL'] }, this.updateClasses));\n }\n else if (e.target.id === \"dtFirst\") {\n this.setState({ startDateFirstFilter: Date.parse(e.target.value) }, this.updateClasses);\n }\n else if (e.target.id === \"dtSecond\") {\n this.setState({ startDateSecondFilter: Date.parse(e.target.value) }, this.updateClasses);\n }\n else if (e.target.id === \"selectTerm\") {\n\n //Uncheck remote if term is greater than Summer 21\n if (parseInt(e.target.value) > 2215) {\n this.removeInstructionMode('REMOTE');\n }\n this.setState({ sessionFilter: \"\" }, //Reset session when term changes\n this.setState({ termFilter: parseInt(e.target.value) }, this.updateClasses));\n }\n else if (e.target.id === \"selectSession\") {\n this.setState({ sessionFilter: e.target.value }, this.updateClasses);\n }\n else if (e.target.name === \"chkLocation\") {\n let newLocationCheckboxes = this.state.locationCheckboxes.map((location) => {\n if (location.id === e.target.id) {\n return { id: location.id, value: location.value, isChecked: !location.isChecked, country: location.country, isVisible: location.isVisible }\n } else {\n return location;\n }\n });\n this.setState({ locationCheckboxes: newLocationCheckboxes }, this.updateClasses);\n }\n else if (e.target.name === \"chkSubject\") {\n let newSubjectCheckboxes = this.state.subjectCheckboxes.map((subject) => {\n if (subject.id === e.target.id) {\n return { id: subject.id, value: subject.value, career: subject.career, isChecked: !subject.isChecked }\n } else {\n return subject;\n }\n });\n this.setState({ subjectCheckboxes: newSubjectCheckboxes }, this.updateClasses);\n }\n else if (e.target.name === \"search\") {\n this.setState({ searchFilter: e.target.value.replaceAll(/([\\^\\$\\(\\)\\*\\?\\+\\|\\[\\]\\.\\{\\}\\=\\\\])/g, '\\\\$&') }, this.updateClasses);\n }\n else if (e.target.name === \"chkIgnoreFilters\") {\n this.setState({ ignoreFiltersFilter: e.target.checked }, this.updateClasses);\n }\n else if (e.target.name === \"chkAllLocations\") {\n if (e.target.checked) {\n this.setState({ locationFilter: this.state.locationCheckboxes.map((location) => { return location.id }) }, this.updateClasses);\n } else {\n this.setState({ locationFilter: ['WEB'] }, this.updateClasses); //Always keep location web. If the user doens't want online classes then the instruction mode filter will remove it from the results.\n }\n }\n else if (e.target.name === \"chkAllSubjects\") {\n if (e.target.checked) {\n this.setState({ subjectFilter: this.state.subjectCheckboxes.map((subject) => { return subject.id }) }, this.updateClasses);\n } else {\n this.setState({ subjectFilter: [] }, this.updateClasses);\n }\n }\n else if (e.target.name === \"chk1Credit\") {\n if (e.target.checked) {\n this.setState({ oneCreditOnly: true }, this.updateClasses);\n } else {\n this.setState({ oneCreditOnly: false }, this.updateClasses);\n }\n }\n else if (e.target.name === \"chkClassesStarted\") {\n if (e.target.checked) {\n this.setState({ showClassesStarted: true }, this.updateClasses);\n } else {\n this.setState({ showClassesStarted: false }, this.updateClasses);\n }\n }\n //9/28/2023 Check Newly Added Filter\n else if (e.target.name === \"chkNewlyAdded\") {\n if (e.target.checked) {\n this.setState({ showNewlyAdded: true }, this.updateClasses);\n } else {\n this.setState({ showNewlyAdded: false }, this.updateClasses);\n }\n }\n // 10/19/2023 Intersession Filter\n else if (e.target.name === \"chkIntersession\") {\n if (e.target.checked) {\n this.setState({ showIntersession: true }, this.updateClasses);\n \n \n } else {\n this.setState({ showIntersession: false }, this.updateClasses);\n }\n }\n else if (e.target.id === \"radioEurope\") {\n this.setArea(\"EUROPE\");\n }\n else if (e.target.id === \"radioDownrange\") {\n this.setArea(\"DOWNRANGE\");\n }\n else {\n console.log(e.target.name);\n console.log(e.target.id);\n console.log(e.target.value);\n console.log(e.target.checked);\n }\n }\n\n //Runs filters on classes and update this in state. React pushes updates\n //to child component automatically. Result panel get classes as prop, so\n //updates by itself.\n //\n //The approach is to first apply filters that remove as many classes as \n //possible and that are cheap. The more expensive functions will come \n //later and will have less classes left to filter through.\n updateClasses() {\n\n this.setState({ 'status': \"LOADING\" })\n let filteredClasses = this.state.unfilteredClasses;\n\n //Never show social work classes for downrange for contract compliance reasons. \n //This even applies when the ignoreFilters button is checked.\n if (this.state.area === \"DOWNRANGE\") {\n filteredClasses = filteredClasses.filter((cls) => {\n return cls.AC !== \"USAL\" && cls.AC !== \"GSAL\";\n });\n }\n\n if (!this.state.ignoreFiltersFilter) {\n\n //Term\n filteredClasses = filteredClasses.filter((cls) => {\n // Somewhere the term 2222 is getting converted to a number so convert to string to safeguard. JP 20211013\n // Need to trace back on why when selecting term, 2222 is being converted to a number when it comes over as a string.\n return cls.STRM === this.state.termFilter.toString();\n });\n\n //Career\n filteredClasses = filteredClasses.filter((cls) => {\n return this.state.careerFilter.includes(cls.AC);\n });\n\n //Session \n if (this.state.sessionFilter !== \"\") {\n filteredClasses = filteredClasses.filter((cls) => {\n return (this.state.sessionFilter.replace(/\\s/g, '').split(\",\").includes(cls.SC)\n &&\n new Date(this.state.sessions.find(s => { return s.SESSION_CODE === this.state.sessionFilter && s.STRM === this.state.termFilter }).SESSION_START_DATE) <= new Date(cls.START_DT)\n &&\n new Date(this.state.sessions.find(s => { return s.SESSION_CODE === this.state.sessionFilter && s.STRM === this.state.termFilter }).SESSION_END_DATE) >= new Date(cls.END_DT)\n );\n });\n\n }\n\n //Instruction mode\n filteredClasses = filteredClasses.filter((cls) => {\n return (this.state.instructionModeFilter.includes(\"ONLINE\") && (cls.LOC === \"WEB\" || cls.LOC === \"E994\"))\n || (this.state.instructionModeFilter.includes(\"VIRTUAL\") && cls.LOC === \"E700\")\n || (this.state.instructionModeFilter.includes(\"FIELDSTUDY\") && cls.LOC === \"E998\")\n || (this.state.instructionModeFilter.includes(\"ONSITE\") && !(cls.LOC === \"E701\") && !(cls.LOC === \"E702\") && !(cls.LOC === \"WEB\") && !(cls.LOC === \"E994\") && !(cls.LOC === \"E998\") && !(cls.LOC === \"E700\"))\n || (this.state.instructionModeFilter.includes(\"REMOTE\") && (cls.LOC === \"E701\" || cls.LOC === \"E702\"))\n ;\n });\n\n //Area\n filteredClasses = filteredClasses.filter((cls) => {\n return ((cls.LOC === \"WEB\") || (cls.LOC === \"E994\") || (cls.LOC === \"E998\") || (cls.LOC === \"E700\") || (this.state.area === \"EUROPE\" && !this.state.downrangeLocations.includes(cls.LOC)) || (this.state.area === \"DOWNRANGE\" && this.state.downrangeLocations.includes(cls.LOC)));\n });\n\n //Credits\n if (this.state.oneCreditOnly) {\n filteredClasses = filteredClasses.filter((cls) => {\n return cls.CR === 1;\n });\n }\n\n //Show classes that already started\n if (!(this.state.showClassesStarted)) {\n filteredClasses = filteredClasses.filter((cls) => {\n return Date.parse(cls.START_DT) + 86400000 >= new Date();\n });\n }\n //Show newly added classes 9/27/23 YO\n if (this.state.showNewlyAdded) {\n filteredClasses = filteredClasses.filter((cls) => {\n return cls.NT.length > 1 && cls.NT.includes(\"Newly Added!\");\n });\n }\n //Show Intersession only 10/19/23 YO\n if (this.state.showIntersession) {\n filteredClasses = filteredClasses.filter((cls) => {\n return cls.NT.length > 1 && cls.NT.includes(\"intersession\");\n \n });\n }\n\n //Start date begin\n if (this.state.startDateFirstFilter) {\n filteredClasses = filteredClasses.filter((cls) => {\n return Date.parse(cls.START_DT) + 86400000 >= this.state.startDateFirstFilter;\n });\n }\n\n //Start date end \n if (this.state.startDateSecondFilter) {\n filteredClasses = filteredClasses.filter((cls) => {\n return Date.parse(cls.START_DT) <= this.state.startDateSecondFilter;\n });\n }\n\n //Location\n filteredClasses = filteredClasses.filter((cls) => {\n return this.state.locationCheckboxes.some(location => location['id'] === cls.LOC && location['isChecked']) || (cls.LOC === \"E700\") || (cls.LOC === \"WEB\") || (cls.LOC === \"E702\") || (cls.LOC === \"E701\");\n });\n\n //Subject\n filteredClasses = filteredClasses.filter((cls) => {\n return this.state.subjectCheckboxes.some(subject => subject['id'] === cls.S && subject['isChecked']);\n });\n }\n\n if (this.state.searchFilter) {\n filteredClasses = filteredClasses.filter((cls) => {\n return (cls.S + cls.CN + \"|\" + cls.T + \"|\" + cls.FAC + \"|\" + cls.SD + \"|\" + cls.LOC_D + \"|\" + cls.CS + \"|\" + cls.CLASS_NBR + \"|\" + cls.NT).toUpperCase().includes(this.state.searchFilter.toUpperCase())\n });\n }\n\n if (filteredClasses.length === 0) {\n this.setState({ status: \"NO_CLASSES_FOUND\" });\n } else {\n this.setState({ status: \"CLASSES_FOUND\" });\n }\n\n this.setState({ classes: filteredClasses });\n }\n\n render() {\n if (this.state.status === \"LOADING\") {\n return (\n \n \n \n \n
\n \n
\n {this.props.loadingText}
\n{Math.round(this.props.downloadProgress) > 100 ? 100 : Math.round(this.props.downloadProgress)}%
\n\n
\n );\n } else {\n return (\n \n
\n \n \n
\n );\n }\n }\n}\n\nexport default App;","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","//import $ from 'jquery';\n//import Popper from 'popper.js';\nimport 'bootstrap/dist/js/bootstrap.bundle.min';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\n\n\n\nReactDOM.render(\n \n
\n \n \n
\n \n
\n \n
\n