From 39083e6488e15bdb5ee02713e62c37718b0a4301 Mon Sep 17 00:00:00 2001 From: syn Date: Mon, 13 Jan 2020 22:16:16 +0300 Subject: [DIRTY AS FUCK] very initial commit --- src/App.css | 48 ----------------- src/App.js | 40 +++++++++++--- src/RuzCard.js | 94 ++++++++++++++++++++++++++++++++ src/RuzDialog.js | 138 +++++++++++++++++++++++++++++++++++++++++++++++ src/RuzList.js | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/index.html | 1 + src/signin.js | 117 ++++++++++++++++++++++++++++++++++++++++ 7 files changed, 542 insertions(+), 55 deletions(-) create mode 100644 src/RuzCard.js create mode 100644 src/RuzDialog.js create mode 100644 src/RuzList.js create mode 100644 src/signin.js (limited to 'src') diff --git a/src/App.css b/src/App.css index 3837551..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,48 +0,0 @@ -.App { - height: 100%; - min-height: 400px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: stretch; -} - -.App-flex { - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.App-heading { - background-color: #222; - color: #f8f8f8; - font-size: 6vh; - box-shadow: 0px 4px 4vh 4px rgba(34,34,34,0.9); - z-index: 2; -} - -.App-react { - color: #00d8ff; - text-decoration: overline underline; -} - -.App-logo { - max-height: 30vh; - max-width: 30vh; -} - -.App-instructions { - background-color: #f8f8f8; - color: #222; - font-size: 3vh; - line-height: 1.5; - padding: 0 1em; -} - -.App-instructions code { - background-color: #222; - color: #00d8ff; - padding: .2em .3em; - border-radius: .2em; -} diff --git a/src/App.js b/src/App.js index b890840..21e9763 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,42 @@ -import './App.css' +import SignIn from './signin.js'; +import Container from '@material-ui/core/Container'; +import Grid from '@material-ui/core/Grid'; +import RuzList from './RuzList.js'; +//import RuzSearch from './RuzSearch.js'; +import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles'; import React, {Component} from 'react' +const theme = createMuiTheme({ + palette: { + type: 'dark', + background: { + paper: '#121212', + default: '#121212', + }, + primary: { + main: '#BB86FC', + }, + secondary: { + main: '#03DAC6', + }, + } +}); + class App extends Component { render() { - return
-
-

Welcome to React

-
+ return
+ + + + + + + {/* */} + + +
- -

Edit src/App.js and save to hot reload your changes.

} diff --git a/src/RuzCard.js b/src/RuzCard.js new file mode 100644 index 0000000..4b0a39a --- /dev/null +++ b/src/RuzCard.js @@ -0,0 +1,94 @@ +import React, { useState } from 'react'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import CardMedia from '@material-ui/core/CardMedia'; +import Typography from '@material-ui/core/Typography'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import ListItemText from '@material-ui/core/ListItemText'; +import { Button, useMediaQuery, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core'; + + +const useStyles = makeStyles(theme => ({ + card: { + display: 'flex', + }, + details: { + display: 'flex', + flexDirection: 'column', + }, + content: { + flex: '1 0 auto', + }, + inline: { + display: 'inline', + }, + seminarCard: { + color: 'limegreen', + }, + examCard: { + color: 'red', + }, +})); + + +function class_by_type (type, classes) { + let classname = null; + switch (type) { + case 'Семинар': + classname = classes.seminarCard; + break; + case 'Экзамен': + classname = classes.examCard; + break; + default: + return; + } + + return classname; +} + + +export default function RuzCard(props) { + const classes = useStyles(); + const theme = useTheme(); + const dialogFullScreen = useMediaQuery(theme.breakpoints.down('sm')); + const [open, setOpen] = useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + + return ( + + +
+ {props.item.beginLesson}
+ {props.item.endLesson} +
+ + + {props.item.auditorium}
+ + {props.item.kindOfWork} + + + } + /> + + ) +} \ No newline at end of file diff --git a/src/RuzDialog.js b/src/RuzDialog.js new file mode 100644 index 0000000..5a8e8ea --- /dev/null +++ b/src/RuzDialog.js @@ -0,0 +1,138 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, Button, List } from '@material-ui/core'; +import { useMediaQuery, useTheme } from '@material-ui/core'; +import { Divider, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'; +import { AppBar, Toolbar, IconButton, Typography } from '@material-ui/core'; +import CloseIcon from '@material-ui/icons/Close'; + + +const useStyles = makeStyles(theme => ({ + paper: { + marginTop: theme.spacing(3), + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + width: '100%', + }, + schedule: { + width: '100%', + backgroundColor: theme.palette.background.paper, + }, + avatar: { + margin: theme.spacing(1), + backgroundColor: theme.palette.secondary.main, + }, + stickyHeader: { + background: 'inherit', + }, + fixUl: { + padding: 0, + background: 'inherit', + }, + centerProgress: { + position: 'absolute', + top: '50%', + verticalAlign: 'middle', + }, + dateHeader: { + textTransform: 'capitalize', + color: 'teal', + }, + mobileBar: { + position: 'relative', + }, + mobileTitle: { + marginLeft: theme.spacing(2), + flex: 1, + }, +})); + +function RuzDialogCard(props) { + + return ( + + + + ) +} + +function RuzDialogList(props) { + const item = props.item; + const classes = useStyles(); + + const entries = [ + { description: `${item.building}` }, + { description: `${item.lecturer}` }, + ]; + + return ( + + {entries.map(entry => { + return ( + + + + + );} + )} + + ) +} + +function MobileNavBar(props) { + + const classes = useStyles(); + const closeAction = props.closeAction; + const title = props.title; + + return ( + + + + + + + {title} + + + + ); +} + +export default function RuzDialog(props) { + if (!props.open) + return + + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const closeAction = props.dialogCloseAction; + + return ( + + { + isMobile ? + + : + {props.dialog.discipline} + } + + + + + + + + ); +} diff --git a/src/RuzList.js b/src/RuzList.js new file mode 100644 index 0000000..c31c4aa --- /dev/null +++ b/src/RuzList.js @@ -0,0 +1,159 @@ +import React, { useState } from 'react'; +import Avatar from '@material-ui/core/Avatar'; +import Button from '@material-ui/core/Button'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import TextField from '@material-ui/core/TextField'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Checkbox from '@material-ui/core/Checkbox'; +import Link from '@material-ui/core/Link'; +import Grid from '@material-ui/core/Grid'; +import Box from '@material-ui/core/Box'; +import ScheduleIcon from '@material-ui/icons/Schedule'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; +import Container from '@material-ui/core/Container'; +import Divider from '@material-ui/core/Divider'; +import List from '@material-ui/core/List'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import { CircularProgress } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; +import { useMediaQuery, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core'; + +import axios from 'axios'; + +import RuzCard from './RuzCard.js'; +import RuzDialog from './RuzDialog.js'; + + +const useStyles = makeStyles(theme => ({ + paper: { + marginTop: theme.spacing(3), + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + width: '100%', + }, + schedule: { + width: '100%', + backgroundColor: theme.palette.background.paper, + }, + avatar: { + margin: theme.spacing(1), + backgroundColor: theme.palette.secondary.main, + }, + stickyHeader: { + background: 'inherit', + }, + fixUl: { + padding: 0, + background: 'inherit', + }, + centerProgress: { + position: 'absolute', + top: '50%', + verticalAlign: 'middle', + }, + dateHeader: { + textTransform: 'capitalize', + color: 'teal', + }, +})); + + +function RuzListDate(props) { + const items = props.items; + const date = new Date(props.date); + const datestring = date.toLocaleDateString('ru-RU', {weekday: 'short', day: 'numeric', month: 'long'}) + const classes = useStyles(); + + return ( + + + {datestring} + + { + items.map(item => { + return ( + + props.onClickForward(item)} item={item} /> + + + ); + }) + } + + ); +} + + +export default function RuzList(props) { + const classes = useStyles(); + + const [ items, setItems ] = useState([]); + const [ needUpdate, setNeedUpdate ] = useState(true); + const [ openDialog, setOpenDialog ] = useState(null); + + if (needUpdate) { + axios({ + method: 'GET', + url: 'http://cors.hell.fcked.net/api/schedule/group/11235', + params: { + start: '2019.12.16', + finish: '2019.12.23', + lng: '1', + }, + }).then(resp => { + setNeedUpdate(false); + + const data = {}; + for (let [id, item] of resp.data.entries()) { + if (!item) continue; + item.id = id; + item.date in data + ? + data[item.date].push(item) + : + data[item.date] = [item]; + } + setItems(data); + }); + } + + console.log(openDialog); + const dialogCloseAction = () => { + setOpenDialog(null); + } + + let progressBar = (); + if (needUpdate) { + progressBar = (); + } + + const dates = [...Object.keys(items)].sort(); + + return ( + + + +
+ + + + {progressBar} + +
+ + ); +} diff --git a/src/index.html b/src/index.html index d0bdd15..4c8a34e 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,7 @@ + fcked-rt diff --git a/src/signin.js b/src/signin.js new file mode 100644 index 0000000..4d7ed4f --- /dev/null +++ b/src/signin.js @@ -0,0 +1,117 @@ +import React from 'react'; +import Avatar from '@material-ui/core/Avatar'; +import Button from '@material-ui/core/Button'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import TextField from '@material-ui/core/TextField'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Checkbox from '@material-ui/core/Checkbox'; +import Link from '@material-ui/core/Link'; +import Grid from '@material-ui/core/Grid'; +import Box from '@material-ui/core/Box'; +import LockOutlinedIcon from '@material-ui/icons/LockOutlined'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; +import Container from '@material-ui/core/Container'; + +function Copyright() { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); +} + +const useStyles = makeStyles(theme => ({ + paper: { + marginTop: theme.spacing(8), + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }, + avatar: { + margin: theme.spacing(1), + backgroundColor: theme.palette.secondary.main, + }, + form: { + width: '100%', // Fix IE 11 issue. + marginTop: theme.spacing(1), + }, + submit: { + margin: theme.spacing(3, 0, 2), + }, +})); + +export default function SignIn() { + const classes = useStyles(); + + return ( + + +
+ + + + + Sign in + +
+ + + } + label="Remember me" + /> + + + + + Forgot password? + + + + + {"Don't have an account? Sign Up"} + + + + +
+ + + + + ); +} -- cgit v1.2.1-18-gbd029