-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #53 from Genio2003/feat/classroomFullScreen
Feat/classroom full screen
- Loading branch information
Showing
7 changed files
with
213 additions
and
9 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,4 +15,10 @@ h4, | |
| h5, | ||
| h6 { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| @keyframes marqueeScroll { | ||
| to { | ||
| transform: translate3d(0, 0, 0); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| import { Body1, Card, CardHeader, Divider, Spinner, Subtitle2, Title1, makeStyles, mergeClasses, tokens, webLightTheme } from "@fluentui/react-components"; | ||
| import { useContext, useEffect, useState } from "react"; | ||
| import { ClassroomStatus } from "../dto/ClassroomStatus"; | ||
| import { useGlobalStyles } from "../globalStyles"; | ||
| import { EventDto } from "../dto/EventDto"; | ||
| import EventDetails from "../components/EventDetails"; | ||
| import { ThemeContext } from "../context/ThemeContext"; | ||
| import useRequests from "../libraries/requests/requests"; | ||
|
|
||
| const useLightStyles = makeStyles({ | ||
| cardFree: { | ||
| backgroundColor: tokens.colorPaletteLightGreenBackground2, | ||
| }, | ||
| cardAboutToBeBusy: { | ||
| backgroundColor: tokens.colorStatusWarningBackground2, | ||
| }, | ||
| cardBusy: { | ||
| backgroundColor: tokens.colorPaletteRedBackground2, | ||
| }, | ||
| }); | ||
|
|
||
| const useDarkStyles = makeStyles({ | ||
| cardFree: { | ||
| backgroundColor: tokens.colorPaletteLightGreenBackground2, | ||
| }, | ||
| cardAboutToBeBusy: { | ||
| backgroundColor: tokens.colorStatusWarningBackground2, | ||
| }, | ||
| cardBusy: { | ||
| backgroundColor: tokens.colorPaletteRedBackground2, | ||
| } | ||
| }); | ||
|
|
||
| export function ClassroomViewer() { | ||
| const theme = useContext(ThemeContext).themeValue; | ||
| const globalStyles = useGlobalStyles(); | ||
| const themeStyles = theme === webLightTheme ? useLightStyles() : useDarkStyles(); | ||
|
|
||
| const requests = useRequests(); | ||
|
|
||
| const [now, setNow] = useState(new Date()); | ||
| const [classrooms, setClassrooms] = useState<ClassroomStatus[] | null>(null); | ||
| const [currentFloor, setCurrentFloor] = useState(1); | ||
|
|
||
| useEffect(() => { | ||
| // First data fetch | ||
| getClassroomsStatus(); | ||
|
|
||
| // Fetch classrooms status every 10 seconds | ||
| const interval = setInterval(() => { | ||
| setCurrentFloor((oldValue) => { | ||
| if (oldValue === 3) { | ||
| getClassroomsStatus(); // Refresh when all data has been shown | ||
| setNow(new Date()); | ||
| } | ||
| return oldValue === 3 ? 1 : oldValue + 1; | ||
| }); | ||
| }, 15000); | ||
|
|
||
| return () => clearInterval(interval); | ||
| }, []); | ||
|
|
||
| const getClassroomsStatus = () => { | ||
| requests.classroom.status(now) | ||
| .then(setClassrooms) | ||
| .catch(console.error); | ||
| }; | ||
|
|
||
| const renderFloor = (floor: number, classrooms: ClassroomStatus[]) => { | ||
| const filtered = classrooms.filter((item) => item.classroom.name[0] === floor.toString()); | ||
|
|
||
| return ( | ||
| <> | ||
| <Card className={globalStyles.card}> | ||
| <CardHeader | ||
| header={<Title1>🏢 {floor}° Piano</Title1>} | ||
| /> | ||
| </Card> | ||
| <div className={globalStyles.grid}> | ||
| {renderClassrooms(filtered)} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const renderClassrooms = (filtered: ClassroomStatus[]) => { | ||
| const getBackgroundColor = (item: ClassroomStatus) => { | ||
| if (!item.status.isFree) { | ||
| return themeStyles.cardBusy; | ||
| } | ||
| else if (item.status.currentOrNextEvent && | ||
| item.status.currentOrNextEvent.start.getDate() === now.getDate() && | ||
| (now.getTime() >= (item.status.currentOrNextEvent.start.getTime() - 10 * 60 * 1000)) && | ||
| (now.getTime() <= item.status.currentOrNextEvent.start.getTime())) { | ||
| return themeStyles.cardAboutToBeBusy; | ||
| } else { | ||
| return themeStyles.cardFree; | ||
| } | ||
| }; | ||
|
|
||
| return filtered.map((item) => { | ||
| const getDividerText = () => { | ||
| if (item.status.statusChangeAt && item.status.statusChangeAt.getDate() === now.getDate()) | ||
| return `${item.status.isFree ? "Libera" : "Occupata"} fino alle ${item.status.statusChangeAt.toLocaleTimeString([], { timeStyle: "short" })}`; | ||
| else | ||
| return "Libera"; | ||
| }; | ||
|
|
||
| return ( | ||
| <Card key={item.classroom.id} className={mergeClasses(globalStyles.card, getBackgroundColor(item))}> | ||
| <CardHeader | ||
| header={<Title1>Aula {item.classroom.name.split(" ")[0]}</Title1>} | ||
| /> | ||
| <div> | ||
| <Divider><Body1>{getDividerText()}</Body1></Divider> | ||
| {renderEvent(item.status.currentOrNextEvent)} | ||
| </div> | ||
| </Card> | ||
| ); | ||
| }); | ||
| }; | ||
|
|
||
| const renderEvent = (event: EventDto | null) => { | ||
| if (event && event.start.getDate() === now.getDate() && event.end > now) { | ||
| return <EventDetails | ||
| event={event} | ||
| titleSize="large" | ||
| subtitle={event.course.name} | ||
| hide={["classroom", "course"]} | ||
| title="custom" | ||
| customTitle={event.course.code} | ||
| />; | ||
| } | ||
| else { | ||
| return <Subtitle2>Nessuna lezione</Subtitle2>; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={globalStyles.container}> | ||
| {classrooms ? renderFloor(currentFloor, classrooms) : <Spinner label="Caricamento..." />} | ||
| </div> | ||
| ); | ||
| } |