diff --git a/src/components/ControlPanel/controlPanel.js b/src/components/ControlPanel/controlPanel.js index 3f1405f..9426c79 100644 --- a/src/components/ControlPanel/controlPanel.js +++ b/src/components/ControlPanel/controlPanel.js @@ -1,5 +1,6 @@ import React from 'react'; import Button from 'components/Button'; +import Event from './event' export default class ControlPanelComponent extends React.Component { render() { @@ -41,7 +42,7 @@ export default class ControlPanelComponent extends React.Component { - + ); diff --git a/src/components/ControlPanel/event.js b/src/components/ControlPanel/event.js new file mode 100644 index 0000000..46687fc --- /dev/null +++ b/src/components/ControlPanel/event.js @@ -0,0 +1,33 @@ +import React from 'react' +import EventAnalytics from './eventAnalytics' +import Config from 'config' +import { translate } from 'utils' + +export default class EventCard extends React.Component { + + render() { + const yearData = { 1: 100, 2: 50, 3: 25, 4: 10, 5: 3 }; + const majorData= { "CS/CSE": 300, "Ling CS": 100, "Math": 25 }; + + return( +
+
+

Event Title

+

Event Committee

+ +
+
100
+
attendees
+
+ +
+ 7:00 am — 11:00 am +

Event Location

+
+ + +
+
+ ); + } +} diff --git a/src/components/ControlPanel/eventAnalytics.js b/src/components/ControlPanel/eventAnalytics.js new file mode 100644 index 0000000..8b4ba98 --- /dev/null +++ b/src/components/ControlPanel/eventAnalytics.js @@ -0,0 +1,68 @@ +import React from 'react'; +import Button from 'components/Button'; +import Event from './event.js'; +import { Chart } from 'chart.js' +import { Bar } from 'react-chartjs-2' + + + +export default class EventAnalytics extends React.Component { + + render() { + const yearData = { + labels: ["1", "2", "3", "4", "5+"], + datasets: [{ + label: 'Attendees', + data: Object.values(this.props.yearData), + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(255, 159, 64, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(54, 162, 235, 0.2)' + ], + borderColor: [ + 'rgba(255,99,132,1)', + 'rgba(255, 159, 64, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(54, 162, 235, 1)' + ], + borderWidth: 1 + }], + options: { + legend: { + display: false + } + } + }; + + const majorData = { + labels: Object.keys(this.props.majorData), + datasets: [{ + label: 'Attendees', + data: Object.values(this.props.majorData), + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(54, 162, 235, 0.2)' + ], + borderColor: [ + 'rgba(255,99,132,1)', + 'rgba(75, 192, 192, 1)', + 'rgba(54, 162, 235, 1)' + ], + borderWidth: 1 + }] + }; + + return ( +
+

Attendees By Year

+ +

Attendees By Major

+ +
+ ); + } +} \ No newline at end of file diff --git a/src/components/ControlPanel/style.scss b/src/components/ControlPanel/style.scss index 8c21755..fede92e 100644 --- a/src/components/ControlPanel/style.scss +++ b/src/components/ControlPanel/style.scss @@ -68,4 +68,115 @@ padding: 5px 0px; } } -} + + .event-card { + display: inline-block; + vertical-align: top; + text-align: left; + width: calc((100vw - 550px)/2); + margin: 20px; + border-radius: 4px; + box-shadow: 0px 0px 3px #D2D2D2; + background-color: white; + transition: 0.125s ease-in-out; + // border: 3px solid $light-green; + + @media (max-width: 1224px) { + width: calc((100vw - 500px)); + } + + @media (max-width: 690px) { + margin: 20px 0px; + } + + @media (max-width: 340px) { + width: 300px; + } + + &.selected { + transform: scale(1.02, 1.02); + } + + &.selected:hover { + background: white; + } + + &.admin-card { + margin-left: 10px; + } + + .content { + padding: 20px; + position: relative; + + h2 { + margin-right: 100px; + } + + .points-container { + position: absolute; + height: 60px; + width: 85px; + border-radius: 50px; + line-height: 50px; + right: 12px; + top: 12px; + border: 1px solid #DADADA; + background-color: white; + text-align: center; + + .label { + line-height: 0px; + margin-top: -10px; + font-size: 0.85em; + } + + .points { + font-size: 1.1em; + } + } + + .chartWrapper { + margin-top: 20px; + + .chart-title { + text-align: center; + } + } + } + + h2 { + color: #333333; + margin: 0; + } + + h3 { + text-transform: uppercase; + font-size: 1.0em; + font-weight: 400; + color: #555555; + margin: 5px 0px; + } + + p { + padding-top: 5px; + } + + .subcontent { + border-top: 1px solid #F2F2F2; + margin-top: 10px; + padding-top: 10px; + color: #666666; + font-weight: 300; + font-size: 0.8em; + + .time { + font-weight: 400; + } + + .location { + padding-bottom: 0px; + } + } + } +} \ No newline at end of file diff --git a/src/components/Leaderboard/leaderboard.js b/src/components/Leaderboard/leaderboard.js index cbd0649..9cf8099 100644 --- a/src/components/Leaderboard/leaderboard.js +++ b/src/components/Leaderboard/leaderboard.js @@ -83,4 +83,4 @@ export default class Leaderboard extends React.Component { ); } } -} \ No newline at end of file +} diff --git a/src/components/Topbar/index.js b/src/components/Topbar/index.js index 3ae5c44..778e5b1 100644 --- a/src/components/Topbar/index.js +++ b/src/components/Topbar/index.js @@ -22,6 +22,7 @@ export default class Topbar extends React.Component { + } diff --git a/src/config.js b/src/config.js index 158f664..b000395 100644 --- a/src/config.js +++ b/src/config.js @@ -141,4 +141,129 @@ export default { { startsAt: 500, rank: "Constant Cheetah" }, { startsAt: 800, rank: "Extraterrestrial Eagle" }, ], -}; + majorMap: [ //order of majors are significant + { + major: "Ling CS", + criteria: [ + { type: "regex", val: /ling.*comp.*sci/ }, + { type: "regex", val: /ling.*cs/ } + ] + }, + { + major: "Ling", + criteria: [ + { type: "regex", val: /ling/ } + ] + }, + { + major: "Math CS", + criteria: [ + { type: "regex", val: /math.*comp/ }, + { type: "regex", val: /comp.*math/ }, + { type: "regex", val: /math .*cs/ } + ] + }, + { + major: "CS/CSE/CE", + criteria: [ + { type: "regex", val: /comp.*sci/ }, + { type: "regex", val: /^cs$/ }, + { type: "regex", val: /^cse$/ }, + { type: "regex", val: /comp.*eng./ } + ] + }, + { + major: "EE", + criteria: [ + { type: "regex", val: /elec.*eng/ }, + { type: "regex", val: /^ee$/ } + ] + }, + { + major: "Cog Sci", + criteria: [ + { type: "regex", val: /cog.*sci/ } + ] + }, + { + major: "CS Bio", + criteria: [ + { type: "regex", val: /comp.*bio/ }, + { type: "regex", val: /cs.*bio/ }, + ] + }, + { + major: "Stats", + criteria: [ + { type: "regex", val: /stat/ }, + ] + }, + { + major: "Math", + criteria: [ + { type: "regex", val: /.*math/ } + ] + }, + { + major: "Econ", + criteria: [ + { type: "regex", val: /econ/ }, + ] + }, + { + major: "Undeclared", + criteria: [ + { type: "regex", val: /undeclared/ }, + { type: "regex", val: /undecided/ } + ] + }, + { + major: "physics", + criteria: [ + { type: "regex", val: /physics/ } + ] + }, + { + major: "BioE", + criteria: [ + { type: "regex", val: /bioe.*/ } + ] + }, + { + major: "Biochem", + criteria: [ + { type: "regex", val: /bio.*chem/ } + ] + }, + { + major: "ChemE", + criteria: [ + { type: "regex", val: /chem.*e/ } + ] + }, + { + major: "MechE", + criteria: [ + { type: "regex", val: /mech.*e/ } + ] + }, + { + major: "CivilE", + criteria: [ + { type: "regex", val: /civil.*e/ } + ] + }, + { + major: "Chem", + criteria: [ + { type: "regex", val: /chem/ } + ] + }, + { + major: "Neuro", + criteria: [ + { type: "regex", val: /neuro/ } + ] + } + ] +}; \ No newline at end of file diff --git a/src/reducers/leaderboard.js b/src/reducers/leaderboard.js index 34fb0b1..6cdab01 100644 --- a/src/reducers/leaderboard.js +++ b/src/reducers/leaderboard.js @@ -53,7 +53,7 @@ const FetchLeaderboard = () => { }); const status = await response.status; - if (status === 401 || status === 403) { + if (status === 401 || status === 403) { return dispatch(LogoutUser()); } diff --git a/src/utils.js b/src/utils.js index c33f8d2..708178b 100644 --- a/src/utils.js +++ b/src/utils.js @@ -17,5 +17,23 @@ const getLevel = points => { return { currLevel, nextLevel, currLevelNumber }; } +const translate = majors => { + const majorMap = Config.majorMap; + + const decideMajor = inputMajor => { + for (const { major, criteria } of majorMap) { + const output = criteria.find(({ val }) => inputMajor.match(val)); + if (output) { + return major; + } + } + return "Other" + } + + let reducedMajors = majors.map(decideMajor); + return reducedMajors; +} + export { getLevel }; +export { translate }; export default { getLevel }; \ No newline at end of file