drop schedule from app
This commit is contained in:
tmshv committed
1 parent
46009ef8f4
commit
3fa1763913
9 files changed
-367
No files matched your search
@@ -1,44 +0,0 @@
|
||||
import Head from 'next/head'
|
||||
import { App } from 'src/components/App'
|
||||
import { Schedule } from 'src/components/Schedule'
|
||||
import { Share } from 'src/components/Share'
|
||||
import { createApiUrl, requestGet } from 'src/next-lib'
|
||||
import { NextPage } from 'next'
|
||||
|
||||
type Props = {
|
||||
title: string
|
||||
data: any //(schedule)
|
||||
}
|
||||
|
||||
const Page: NextPage<Props> = props => (
|
||||
<App
|
||||
showAuthor={true}
|
||||
wide={true}
|
||||
>
|
||||
<Head>
|
||||
<title>{props.title}</title>
|
||||
</Head>
|
||||
|
||||
<Schedule {...props.data} />
|
||||
|
||||
<Share />
|
||||
</App>
|
||||
)
|
||||
|
||||
export const unstable_getStaticProps = async (ctx: any) => {
|
||||
const period = '2016-2017'
|
||||
const semester = 'spring'
|
||||
const data = await requestGet(createApiUrl(`/api/schedule?period=${period}&semester=${semester}`), null)
|
||||
if (!data) {
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
data,
|
||||
title: 'Расписание',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Page
|
||||
@@ -11,7 +11,6 @@ const api = axios.create({
|
||||
async function getMenuUrls(frequency = 'daily') {
|
||||
const menu = [
|
||||
'/',
|
||||
'/schedule',
|
||||
'/collective',
|
||||
]
|
||||
return menu
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
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>
|
||||
)
|
||||
@@ -1,27 +0,0 @@
|
||||
/**
|
||||
*
|
||||
* "First Middle Last" -> "F. M. Last"
|
||||
*
|
||||
* @param name
|
||||
* @returns {string}
|
||||
*/
|
||||
export function shortName(name) {
|
||||
try {
|
||||
const f = i => i.replace(/^(.).+/, '$1')
|
||||
const [, first, middle, last] = splitName(name)
|
||||
return `${f(first)}. ${f(middle)}. ${last}`
|
||||
} catch (e) {
|
||||
return name
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* "First Middle Last" -> ["First", "Middle", "Last"]
|
||||
*
|
||||
* @param {string} name
|
||||
* @returns {Array|{index: number, input: string}}
|
||||
*/
|
||||
export function splitName(name) {
|
||||
return /(.+)\s(.+)\s(.+)/.exec(name)
|
||||
}
|
||||
@@ -58,8 +58,6 @@
|
||||
|
||||
--inactive-link-color: var(--light-color);
|
||||
|
||||
--schedule-row-color: hsl(210, 55%, 90%);
|
||||
|
||||
/* TEXT COLOR */
|
||||
--color-text: #202020;
|
||||
--color-text-second: #9090a0;
|
||||
|
||||
@@ -1,123 +0,0 @@
|
||||
.schedule-table {
|
||||
--current-week-day-color: var(--blue-color);
|
||||
|
||||
--cell-width: 9em;
|
||||
--cell-tablet-width: 7.5em;
|
||||
|
||||
--group-cell-width: 4em;
|
||||
--group-cell-tablet-width: 3em;
|
||||
|
||||
--row-padding: var(--single-margin) 0;
|
||||
--current-day-column-border-thickness: 3px;
|
||||
|
||||
margin-bottom: var(--double-margin);
|
||||
|
||||
max-width: 70em;
|
||||
overflow-x: auto;
|
||||
|
||||
a{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.lesson {
|
||||
margin-bottom: var(--half-margin);
|
||||
}
|
||||
|
||||
.teacher {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.current {
|
||||
border-left: var(--current-day-column-border-thickness) solid;
|
||||
border-right: var(--current-day-column-border-thickness) solid;
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__body-row{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__body-group{
|
||||
min-width: var(--group-cell-width);
|
||||
padding: var(--row-padding);
|
||||
|
||||
text-align: center;
|
||||
|
||||
p.name {
|
||||
font-size: 1.25em;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
&__head-record {
|
||||
min-width: var(--cell-width);
|
||||
max-width: var(--cell-width);
|
||||
padding: var(--row-padding);
|
||||
|
||||
text-align: center;
|
||||
|
||||
& > .group {
|
||||
min-width: var(--group-cell-width);
|
||||
}
|
||||
|
||||
.date {
|
||||
margin: .5em 0 0;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&__record{
|
||||
min-width: var(--cell-width);
|
||||
max-width: var(--cell-width);
|
||||
padding: var(--row-padding);
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__course{
|
||||
margin-bottom: var(--half-margin);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
|
||||
.schedule-table {
|
||||
min-width: 900px;
|
||||
|
||||
.lesson {
|
||||
font-size: .9em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.teacher {
|
||||
font-size: .9em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&__head{
|
||||
& > div{
|
||||
min-width: var(--cell-tablet-width);
|
||||
}
|
||||
|
||||
& > .group{
|
||||
min-width: var(--group-cell-tablet-width);
|
||||
}
|
||||
}
|
||||
|
||||
&__body-group{
|
||||
min-width: var(--group-cell-tablet-width);
|
||||
|
||||
p.name {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__record{
|
||||
min-width: var(--cell-tablet-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,6 @@
|
||||
@import "components/document";
|
||||
@import "components/document-row";
|
||||
@import "components/documents-container";
|
||||
@import "components/schedule-table";
|
||||
@import "components/Article";
|
||||
|
||||
// THEMES
|
||||
|
||||
@import "themes/theme-default";
|
||||
|
||||
@import "marker/MarkerTable";
|
||||
@@ -1,25 +0,0 @@
|
||||
.schedule-table {
|
||||
a {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.lesson {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.current {
|
||||
border-color: var(--current-week-day-color);
|
||||
}
|
||||
|
||||
&__head {
|
||||
.group {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
&__body-row {
|
||||
&:nth-child(even) {
|
||||
background-color: var(--schedule-row-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { range } from 'lodash'
|
||||
|
||||
export function getDates(start: Date) {
|
||||
const oneDay = (1000 * 60 * 60 * 24);
|
||||
const startTime = start.getTime();
|
||||
const startDay = start.getDay();
|
||||
|
||||
return range(0, 6)
|
||||
.reduce((dates, weekDay) => {
|
||||
let delta = 1 + weekDay - startDay;
|
||||
let time = startTime + (oneDay * delta);
|
||||
|
||||
return dates.concat([new Date(time)]);
|
||||
}, [])
|
||||
.map(i => i.getDate());
|
||||
}
|
||||
Reference in new issue
Block a user