125 lines
3.0 KiB
TypeScript
125 lines
3.0 KiB
TypeScript
import { getDates } from 'src/utils/date'
|
|
import { shortName } from 'src/models/collective'
|
|
|
|
const now = new Date()
|
|
const dates = getDates(now)
|
|
|
|
const isToday = weekDayIndex => (now.getDay() - 1) === weekDayIndex
|
|
const weekDay = weekDayIndex => dates[weekDayIndex]
|
|
const short = shortName
|
|
|
|
const todayClass = i => isToday(i)
|
|
? 'current'
|
|
: ''
|
|
|
|
const HeadDay = ({ i, children }) => (
|
|
<div className={`schedule-table__head-record ${todayClass(i)}`}>
|
|
<p className="day">{children}</p>
|
|
<p className="date">{weekDay(i)}</p>
|
|
</div>
|
|
)
|
|
|
|
const days = [
|
|
'Понедельник',
|
|
'Вторник',
|
|
'Среда',
|
|
'Четверг',
|
|
'Пятница',
|
|
'Суббота',
|
|
]
|
|
|
|
export const Schedule = ({ groups }) => (
|
|
<div className="schedule-table">
|
|
<div className="schedule-table__body">
|
|
<div className="schedule-table__body-row">
|
|
<div className="schedule-table__body-group">Гр.</div>
|
|
|
|
{days.map((day, index) => (
|
|
<HeadDay
|
|
key={index}
|
|
i={index}
|
|
>
|
|
{day}
|
|
</HeadDay>
|
|
))}
|
|
</div>
|
|
|
|
{groups.map((group, index) => (
|
|
<GroupRow key={index} {...group} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
const GroupRow = ({ name, time, week }) => (
|
|
<div className="schedule-table__body-row">
|
|
<div className="schedule-table__body-group">
|
|
<p className="name">{name}</p>
|
|
<p className="time">{time}</p>
|
|
</div>
|
|
|
|
{week.map((day, index) => (
|
|
<Group key={index} day={day} dayIndex={index} />
|
|
))}
|
|
</div>
|
|
)
|
|
|
|
const Group = ({ day, dayIndex }) => (
|
|
<div className={`schedule-table__record ${todayClass(dayIndex)}`}>
|
|
{day.map((lesson, index) => (
|
|
<Cell key={index} {...lesson} />
|
|
))}
|
|
</div>
|
|
)
|
|
|
|
const Cell = ({ course, teacher, time }) => (
|
|
<div className="schedule-table__course">
|
|
<Lesson {...course} />
|
|
<Teacher {...teacher} />
|
|
|
|
{time
|
|
.map(range => ({ range }))
|
|
.map((range, index) => (
|
|
<TimeRange key={index} {...range} />
|
|
))}
|
|
</div>
|
|
)
|
|
|
|
const Lesson = ({ title, url }) => (
|
|
<p className="lesson">
|
|
{url
|
|
? (
|
|
<a href={url}>
|
|
{title}
|
|
</a>
|
|
)
|
|
: (
|
|
<span>
|
|
{title}
|
|
</span>
|
|
)
|
|
}
|
|
</p>
|
|
)
|
|
|
|
const Teacher = ({ name, url }) => (
|
|
<p className="teacher">
|
|
{url
|
|
? (
|
|
<a href={url}>
|
|
{short(name)}
|
|
</a>
|
|
)
|
|
: (
|
|
<span>
|
|
{short(name)}
|
|
</span>
|
|
)
|
|
}
|
|
</p>
|
|
)
|
|
|
|
const TimeRange = ({ range }) => (
|
|
<p className="time">{(range || []).join(' — ')}</p>
|
|
)
|