Many, many changes

Summary: - fixed (hopefully) elements jumping around when family tree is traversed - added iframe prevention measures - removed spurious console logs - made search filters a grid for better display on thinner screens - added a loading icon when data is being downloaded for the first time - added keyboard shortcut for accessing main search bar - made it so that search bar is focused on opening page - added an icon in family tree view for students that were student guides (i.e. had bacchas) - fixed results not being sorted in order of roll number - added credits section
DAG100 · Mar 10, 2024 · 417841c · 417841c
1 parent efdf025
commit 417841c
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 82 deletions.
diff --git a/components/Display.tsx b/components/Display.tsx
@@ -55,7 +55,12 @@ function Display(props: DisplayProps) {
 // 	)
 
 	if (props.loading) return (
-		<div><div id="count"><Card>Loading...</Card></div></div>
+		<div>
+			<div id="count">
+				<Card>Loading...</Card>
+				<div className="loader"></div>
+			</div>
+		</div>
 	);
 
 	return (

diff --git a/components/Options.tsx b/components/Options.tsx
@@ -1,5 +1,5 @@
-import React, {useState, useCallback, useEffect} from "react";
-import {InputLabel, TextField, Select, MenuItem, Paper, FormControl, InputAdornment, IconButton} from "@mui/material"
+import React, {useState, useCallback, useEffect, forwardRef} from "react";
+import {Grid, InputLabel, TextField, Select, MenuItem, Paper, FormControl, InputAdornment, IconButton} from "@mui/material"
 import {ClearRounded} from "@mui/icons-material"
 import MultiSelectField from "./msf";
 // import {data as listOpts} from "../components/student_data_getter.tsx";
@@ -30,7 +30,9 @@ interface OptionsProps {
 	loading: boolean;
 }
 
-function Options(props: OptionsProps) {
+
+
+function PreOptions (props: OptionsProps, ref: any) {
 // 	const [listOpts, setOpts]:[OptionsType, Function]= useState({
 // 		batch:[],
 // 		hall:[],
@@ -71,41 +73,45 @@ function Options(props: OptionsProps) {
 
 	return (
 		<Paper className="options">
-			<div className="row">
+			<Grid container rowSpacing={4} columnSpacing={4} sx={{width:"100%"}}>
+			<Grid item xs={12} sm={6} md={4}>
 				<MultiSelectField 
 					disabled={props.loading} 
 					query={query}
 					name="batch"
 					options={props.listOpts.batch}
 					setQuery={setQuery}
 				/>
-
-				<FormControl variant="filled" disabled={props.loading}>
+			</Grid>
+			<Grid item xs={12} sm={6} md={4}>
+				<div className="field">
+				<FormControl variant="filled" disabled={props.loading} sx={{width:"100%"}}>
 					<InputLabel id="gender-label">Gender</InputLabel>
 					<Select
 						className="field"
 						labelId="gender-label"
 						value={query.gender}
 						onChange={(event) => {
 							setQuery({...query, gender:event.target.value});
-// 							props.sendQuery({...query, gender:event.target.value});
 						}}
 					>
 						<MenuItem value="">Any</MenuItem>
 						<MenuItem value="F">Female</MenuItem>
 						<MenuItem value="M">Male</MenuItem>
 					</Select>
 				</FormControl>
-
+				</div>
+			</Grid>
+			<Grid item xs={12} sm={6} md={4}>
 				<MultiSelectField 
 					disabled={props.loading} 
 					query={query}
 					name="hall"
 					options={props.listOpts.hall}
 					setQuery={setQuery}
 				/>
-			</div>
-			<div className="row">
+			</Grid>
+			<Grid item xs={12} sm={6} md={4}>
 				<MultiSelectField 
 					disabled={props.loading} 
 					query={query}
@@ -114,7 +120,8 @@ function Options(props: OptionsProps) {
 					options={props.listOpts.prog}
 					setQuery={setQuery}
 				/>
-
+			</Grid>
+			<Grid item xs={12} sm={6} md={4}>
 				<MultiSelectField 
 					disabled={props.loading} 
 					query={query}
@@ -123,7 +130,8 @@ function Options(props: OptionsProps) {
 					options={props.listOpts.dept}
 					setQuery={setQuery}
 				/>
-
+			</Grid>
+			<Grid item xs={12} sm={6} md={4}>
 				<MultiSelectField 
 					disabled={props.loading} 
 					query={query}
@@ -132,9 +140,9 @@ function Options(props: OptionsProps) {
 					options={props.listOpts.bloodgrp}
 					setQuery={setQuery}
 				/>
-			</div>
-
-			<div className="row">
+			</Grid>
+			<Grid item xs={12}>
+				<div style={{margin:"auto", width:"fit-content"}}>
 				<FormControl variant="filled" disabled={props.loading}>
 					<TextField
 						disabled={props.loading}
@@ -147,8 +155,10 @@ function Options(props: OptionsProps) {
 						}}
 					/>
 				</FormControl>
-			</div>
-			<FormControl variant="filled" disabled={props.loading} className="row">
+				</div>
+			</Grid>
+			<Grid item xs={12}>
+			<FormControl variant="filled" disabled={props.loading} style={{width:"100%"}}>
 				<TextField
 					disabled={props.loading}
 					className="field main-text"
@@ -171,9 +181,15 @@ function Options(props: OptionsProps) {
 						setQuery({...query, name:event.target.value});
 // 						newsendQuery({...query, name:event.target.value});
 					}}
+					inputRef={ref}
+					autoFocus
 				/>
 			</FormControl>
+			</Grid>
+			</Grid>
 		</Paper>);
 }
 
+const Options = forwardRef(PreOptions);
+
 export default Options;
diff --git a/components/Overlay.tsx b/components/Overlay.tsx
@@ -39,7 +39,8 @@ export default function Overlay(props: OverlayProps) {
 		<Modal
 			style={{
 				display:"flex",
-				overflow:"auto"
+				overflowY:"scroll",
+				scrollBehavior: "smooth",
 			}}
 			open={open}
 			onClick={closeModal}

diff --git a/components/SCard.tsx b/components/SCard.tsx
@@ -3,7 +3,7 @@ import Card from "@mui/material/Card";
 import Button from "@mui/material/Button";
 import Image from "./UserImage";
 import {Student} from "./commontypes";
-import {EmailRounded, InvertColorsRounded, HomeRounded, AccountBalanceRounded, Public } from "@mui/icons-material";
+import {EmailRounded, InvertColorsRounded, HomeRounded, AccountBalanceRounded, Public, PeopleOutlineRounded } from "@mui/icons-material";
 //import "styles/SCard.css";
 
 
@@ -37,7 +37,14 @@ const SCard = React.forwardRef((props: SCardProps, ref:any) => {
 					<div className="data">
 						<p>{props.data.n}</p>
 						<p>{props.data.i}</p>
+						{Array.isArray(props.data.c) && props.data.c.length > 0 && <div style={{
+							width: "20px",
+							height: "20px"
+						}}>
+						<PeopleOutlineRounded />
+						</div>}
 					</div>
+
 				</Card>
 			);
 		case true:

diff --git a/components/UserImage.tsx b/components/UserImage.tsx
@@ -15,15 +15,6 @@ interface ImageProps {
 // console.log(Female);
 
 export default function Image(props: ImageProps) {
-// 	return (
-// 		<Avatar style={props.style} src={`http://home.iitk.ac.in/~${props.u}/dp`}>
-// 		<Avatar style={props.style} src={`https://oa.cc.iitk.ac.in/Oa/Jsp/Photo/${props.i}_0.jpg`}>
-// 		<Avatar style={props.style} src={`${props.g === "M" ? Male.src : Female.src}`}>
-// 		</Avatar>
-// 		</Avatar>
-// 		</Avatar>
-// 	);
-	console.log(Male);
 	return (
 		<div style={{
 			width:"150px",

diff --git a/components/fadeAnim.tsx b/components/fadeAnim.tsx
@@ -9,26 +9,6 @@ interface FadeAnimProps {
 }
 
 const  FadeAnim = React.forwardRef((props: FadeAnimProps, ref) => {
-// 	return (
-// 		<TransitionGroup 
-// 			style={props.style} 
-// 			className={props.myname}
-// 		>
-// 		{React.Children.map(props.children, (child) => {
-// 			return (
-// 				<CSSTransition
-// 					classNames="fade"
-// 					timeout={300}
-// 					mountOnEnter={true}
-// 					unmountOnExit={true}
-// 				>
-// 				{child}
-// 				</CSSTransition>
-// 			);
-// 		})}
-// 		</TransitionGroup>
-// 	);
-
 	return (
 		<TransitionGroup 
 			style={props.style} 

diff --git a/components/msf.tsx b/components/msf.tsx
@@ -19,7 +19,8 @@ export default function MultiSelectField(props: MSFProps) {
 
 
 	return (//idea behind taking "query" from options is to lift state up
-	<FormControl variant="filled" className="field" disabled={props.disabled}>
+	<div className="field">
+	<FormControl variant="filled" disabled={props.disabled} sx={{width:"100%"}}>
 		<InputLabel id={`${props.name}-label`}>
 		{props.label === undefined 
 		? props.name[0].toUpperCase() + props.name.slice(1,props.name.length).toLowerCase()
@@ -40,5 +41,6 @@ export default function MultiSelectField(props: MSFProps) {
 			))}
 		</Select>
 	</FormControl>
+	</div>
 	);
 }
diff --git a/components/treeSCard.tsx b/components/treeSCard.tsx
@@ -44,7 +44,16 @@ function TreeCard(props: TreeCardProps) {
 					compact={"ultra"}
 					data={el}
 					key={el.i}
-					onClick={()=>{
+					onClick={(e)=>{
+						//smoothly scroll to top
+						document.getElementsByClassName("MuiModal-root")[0].scrollTo(0,0);
+// 						let start = null;
+// 						let scroll = window
+// 						window.requestAnimationFrame(function step(currentTime) {
+// 							if (!start) start = currentTime;
+// 							
+// 						});
+						//actually show the card
 						props.displayCard(el);
 					}}
 				/>