From f95c8d450d5bd9cab72a8338cf7426209a381fec Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Mon, 20 Jul 2020 17:53:50 +0200 Subject: [PATCH] dropdown+scheduler --- src/App.scss | 5 +- src/App.tsx | 5 +- src/components/Calendar/appointments.ts | 30 ------- src/components/Calendar/index.tsx | 87 ------------------- .../{Calendar => Scheduler/Cell}/index.scss | 0 src/components/Scheduler/Cell/index.tsx | 23 +++++ src/components/Scheduler/Column/index.scss | 0 src/components/Scheduler/Column/index.tsx | 33 +++++++ .../Scheduler/SchedulerEvent/index.scss | 0 .../Scheduler/SchedulerEvent/index.tsx | 38 ++++++++ src/components/Scheduler/index.scss | 30 +++++++ src/components/Scheduler/index.tsx | 76 ++++++++++++++++ 12 files changed, 204 insertions(+), 123 deletions(-) delete mode 100644 src/components/Calendar/appointments.ts delete mode 100644 src/components/Calendar/index.tsx rename src/components/{Calendar => Scheduler/Cell}/index.scss (100%) create mode 100644 src/components/Scheduler/Cell/index.tsx create mode 100644 src/components/Scheduler/Column/index.scss create mode 100644 src/components/Scheduler/Column/index.tsx create mode 100644 src/components/Scheduler/SchedulerEvent/index.scss create mode 100644 src/components/Scheduler/SchedulerEvent/index.tsx create mode 100644 src/components/Scheduler/index.scss create mode 100644 src/components/Scheduler/index.tsx diff --git a/src/App.scss b/src/App.scss index aa31b26..7113279 100644 --- a/src/App.scss +++ b/src/App.scss @@ -7,9 +7,8 @@ body { } .wraper{ display: flex; - &__rightbar{ - width: 80%; + &__calendar{ + flex-grow: 3; } - } diff --git a/src/App.tsx b/src/App.tsx index ad8b52b..8a8318e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,8 +2,7 @@ import React, { useState } from "react"; import TopBar from "./components/TopBar/"; import Transfer from "./components/Transfer/"; import "./App.scss"; -import Schedule from "./components/Calendar/"; -import { appointments } from "./components/Calendar/appointments"; +import {Scheduler} from "./components/Scheduler"; import RightBar from "./components/RightBar"; import { lectures } from "./lectures"; @@ -39,7 +38,7 @@ function App() { />
- +
; -} - -interface CalendarState { - currentDate: Date; -} - -const formatDayScaleDate = (date: moment.MomentInput, nextOptions: Intl.DateTimeFormatOptions): string => { - const momentDate = moment(date).locale("pl"); - return momentDate.format(nextOptions.weekday ? "dddd" : " ").toUpperCase(); -}; - -const useStyles = makeStyles(() => - createStyles({ - dayScaleCell: { - paddingTop: 10, - paddingBottom: 10, - }, - timeTableLayout: { - border: "1px solid rgba(224, 224, 224, 1);", - borderCollapse: "separate", - }, - appointmentLayer: { - borderRadius: 15, - marginLeft: 5, - textAlign: "center", - }, - }) -); - -const DayScaleCell = ({ formatDate, ...restProps }: WeekView.DayScaleCellProps) => { - const classes = useStyles(); - return ( - - ); -}; - -const TimeTableLayout = ({ ...restProps }: WeekView.TimeTableLayoutProps) => { - const classes = useStyles(); - return ; -}; - -const Appointment = ({ ...restProps }: Appointments.AppointmentProps) => { - const classes = useStyles(); - return ; -}; - -export default class Calendar extends React.PureComponent { - constructor(props: CalendarProps) { - super(props); - - this.state = { - currentDate: new Date("2020-06-01"), - }; - } - - render() { - const { data } = this.props; - const { currentDate } = this.state; - - return ( - - - - - - - ); - } -} diff --git a/src/components/Calendar/index.scss b/src/components/Scheduler/Cell/index.scss similarity index 100% rename from src/components/Calendar/index.scss rename to src/components/Scheduler/Cell/index.scss diff --git a/src/components/Scheduler/Cell/index.tsx b/src/components/Scheduler/Cell/index.tsx new file mode 100644 index 0000000..09bc0bc --- /dev/null +++ b/src/components/Scheduler/Cell/index.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +interface CellProps { + colIndex: number; + index: number; + term?: string; + handleClick?: (e: React.MouseEvent) => void; + isEventable?: boolean; +} + +export const Cell = ({ + colIndex, + index, + term, + handleClick, + isEventable, +}: CellProps) => { + return ( +
+ {isEventable || term} +
+ ); +}; diff --git a/src/components/Scheduler/Column/index.scss b/src/components/Scheduler/Column/index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Scheduler/Column/index.tsx b/src/components/Scheduler/Column/index.tsx new file mode 100644 index 0000000..e200b65 --- /dev/null +++ b/src/components/Scheduler/Column/index.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { Cell } from "../Cell"; + +interface ColumnProps { + hours: Array; + handleClick?: (e: React.MouseEvent) => void; + children?: React.ReactNode; + colIndex?: number; + isEventable?: boolean; +} + +export const Column = ({ + hours, + colIndex, + isEventable, + children, + ...rest +}: ColumnProps) => { + return ( +
+ {hours.map((hour, index) => ( + + ))} + {children} +
+ ); +}; diff --git a/src/components/Scheduler/SchedulerEvent/index.scss b/src/components/Scheduler/SchedulerEvent/index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Scheduler/SchedulerEvent/index.tsx b/src/components/Scheduler/SchedulerEvent/index.tsx new file mode 100644 index 0000000..57b03ab --- /dev/null +++ b/src/components/Scheduler/SchedulerEvent/index.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +interface SchedulerEventProps { + events: Array; + colIndex: number; +} + +export const SchedulerEvent = ({ events, colIndex }: SchedulerEventProps) => { + const handleEventClick = (e: React.MouseEvent) => { + const eventDiv = e.target as HTMLDivElement; + eventDiv.style.backgroundColor = "#1547C5"; + }; + + return ( + <> + {events.map((event, index) => ( +
+ :) +
+ ))} + + ); +}; diff --git a/src/components/Scheduler/index.scss b/src/components/Scheduler/index.scss new file mode 100644 index 0000000..ef5e92d --- /dev/null +++ b/src/components/Scheduler/index.scss @@ -0,0 +1,30 @@ +.scheduler { + margin-top: 20px; + border-collapse: collapse; + + .thead { + display: flex; + width: 100%; + } + + .tbody { + display: flex; + &__column { + display: flex; + flex-direction: column; + position: relative; + flex: 1; + } + } + + .td, + .th { + border: 1px solid #ddd; + padding: 10px; + text-align: center; + flex: 1; + } + .td:hover { + background-color: #ddd; + } +} diff --git a/src/components/Scheduler/index.tsx b/src/components/Scheduler/index.tsx new file mode 100644 index 0000000..68d261c --- /dev/null +++ b/src/components/Scheduler/index.tsx @@ -0,0 +1,76 @@ +import React, { useEffect } from "react"; +import { useState } from "react"; +import "./index.scss"; +import { SchedulerEvent } from "./SchedulerEvent"; +import { Column } from "./Column"; +const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"]; + +const hours = [ + "8:00", + "9:00", + "10:00", + "11:00", + "12:00", + "13:00", + "14:00", + "15:00", + "16:00", + "17:00", + "18:00", + "19:00", + "20:00", + "21:00", +]; + +let events: Array = []; +for (let i = 0; i < hours.length / 2; i++) { + events.push(i); +} + +let terms = ["Zawsze", "jest pora", "na kurde", "lody", "koral"]; + +export const Scheduler = () => { + const [currentEventsIds, setCurrentEventsIds] = useState>([]); + useEffect(() => { + const displayEvents = () => { + currentEventsIds.map((eventId: string) => { + const event = document.getElementById(eventId); + event!.style.display = "block"; + }); + }; + displayEvents(); + }, [currentEventsIds]); + + const handleClick = (e: React.MouseEvent) => { + const cellId = e.currentTarget.id; + const column = cellId.slice(0, 1); + const row = cellId.slice(1); + const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`; + + setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]); + }; + + return ( + <> +
+
+ {days.map((day, index) => ( +
+ {day} +
+ ))} +
+
+ + {terms.map((_, colIndex) => ( + + + + ))} +
+ + +
+ + ); +};