Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • kszk/devteam/kszkepzes/old/kszkepzes-frontend
  • kbgergely/kszkepzes-frontend
2 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 1090 additions and 731 deletions
src/components/App.js
View file @ 2eef83d2
import React from 'react';
import Footer from './Footer';
import Header from './Header';
import Main from './Main';
import Footer from './Footer';
import React from 'react';
const App = () => (
<div style={{ minHeight: '100%', position: 'relative' }}>
<header id='header' >
<div style={{ minHeight: '100%', position: 'relative', paddingBottom: '3em' }}>
<header id="header">
<Header />
</header>
<main id='main' style={{ minHeight: '100%', position: 'relative' }}>
<main id="main" style={{ minHeight: '100%', position: 'relative' }}>
<Main />
</main>
<footer id='footer' style={{ position: 'absolute', width: '100%', bottom: '0' }}>
<footer
id="footer"
style={{ position: 'absolute', width: '100%', bottom: '0' }}
>
<Footer />
</footer>
</div>
......
src/components/Footer.js
View file @ 2eef83d2
import React from 'react';
import { Container, Segment } from 'semantic-ui-react';
import { Container, Segment } from "semantic-ui-react";
import React from "react";
const Footer = () => (
<Segment inverted vertical textAlign='center' >
<Segment inverted vertical textAlign="center">
<Container>
<p textalign='center' >Created by DevTeam &copy; 2018-2020.</p>
<p textalign="center">Created by DevTeam &copy; 2018-2025.</p>
</Container>
</Segment>
);
export default Footer;
src/components/Header.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
Menu,
Container,
Button,
Segment,
Container,
Icon,
Image,
Menu,
Popup,
Icon,
Responsive,
} from 'semantic-ui-react';
Segment,
} from "semantic-ui-react";
import React, { Component } from "react";
import { connect } from 'react-redux';
import { getUserData } from '../actions';
import KSZKlogo from './images/kszk_logo.svg';
import KSZKlogo from "./images/kszk_logo.svg";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { getUserData } from "../actions";
// Objects that will be converted to menu items in the render method
const menuItems = [
{
text: 'Főoldal',
to: '/home',
prefix: <Image size='mini' src={KSZKlogo} style={{ marginRight: '1.5em' }} />,
text: "Főoldal",
to: "/home",
prefix: (
<Image size="mini" src={KSZKlogo} style={{ marginRight: "1.5em" }} />
),
permissionLevel: 0,
},
{
text: 'Hírek',
to: '/news',
prefix: '',
text: "Hírek",
to: "/news",
prefix: "",
permissionLevel: 0,
},
{
text: 'Köreink',
to: '/groups',
prefix: '',
text: "Köreink",
to: "/groups",
prefix: "",
permissionLevel: 0,
},
{
text: 'Ütemterv',
to: '/schedule',
prefix: '',
text: "Ütemterv",
to: "/schedule",
prefix: "",
permissionLevel: 1,
},
{
text: 'Mentorok',
to: '/mentors',
prefix: '',
text: "Mentorok",
to: "/mentors",
prefix: "",
permissionLevel: 1,
},
{
text: 'Statisztika',
to: '/statistics',
prefix: '',
text: "Statisztika",
to: "/statistics",
prefix: "",
permissionLevel: 3,
},
{
text: 'Jelentkezések',
to: '/applications',
prefix: '',
text: "Jelentkezések",
to: "/applications",
prefix: "",
permissionLevel: 3,
},
{
text: 'Házi feladatok',
to: '/homework',
prefix: '',
text: "Házi feladatok",
to: "/homework",
prefix: "",
permissionLevel: 2,
},
];
......@@ -74,6 +76,7 @@ class Header extends Component {
isOpen: false,
};
}
// Fetch the userData-s
UNSAFE_componentWillMount() {
this.props.getUserData();
......@@ -82,100 +85,106 @@ class Header extends Component {
// Hide the menu after clicking an item on mobile
handleOpen = () => {
this.setState({ isOpen: true });
}
};
handleClose = () => {
this.setState({ isOpen: false });
}
};
renderHeader(inHeader, hasArrowMenu) {
let renderedItemNum = 0
let current = 0
let maxNum = 0
if(this.props.user.id) {
maxNum = menuItems.filter(item => {
return this.props.user.permission >= item.permissionLevel
}).length
renderHeader(inHeader) {
let renderedItemNum = 0;
let current = 0;
let maxNum = 0;
if (this.props.user.id) {
maxNum = menuItems.filter(
(item) => this.props.user.permission >= item.permissionLevel,
).length;
} else {
maxNum = 3
maxNum = 3;
}
return (
<Segment inverted textAlign='center' vertical>
<Segment inverted textAlign="center" vertical>
<Container>
<Menu inverted secondary size='large'>
<Menu inverted secondary size="large">
{/* Default Menu items */}
{menuItems.map((item, i) => {
{menuItems.map((item) => {
if (item.permissionLevel === 0) {
renderedItemNum += 1
renderedItemNum += 1;
return (
<Menu.Item key={i} as={Link} to={item.to}>
{item.prefix}{item.text}
</Menu.Item>
)
}else {
return null
<Menu.Item key={Math.random()} as={Link} to={item.to}>
{item.prefix}
{item.text}
</Menu.Item>
);
}
})
}
return null;
})}
{/* After default menu items */}
{menuItems.map((item, i) => {
if (this.props.user.permission >= item.permissionLevel
&& item.permissionLevel > 0
&& renderedItemNum < inHeader
&& current < i) {
renderedItemNum += 1
current = i
if (
this.props.user.permission >= item.permissionLevel &&
item.permissionLevel > 0 &&
renderedItemNum < inHeader &&
current < i
) {
renderedItemNum += 1;
current = i;
return (
<Menu.Item key={i} as={Link} to={item.to}>
{item.prefix}{item.text}
<Menu.Item key={Math.random()} as={Link} to={item.to}>
{item.prefix}
{item.text}
</Menu.Item>
)
} else {
return null
);
}
})
}
return null;
})}
{/* Arrow menu */}
{ this.props.user.id && (current + 1) < maxNum ?
<Popup flowing hoverable inverted
{this.props.user.id && current + 1 < maxNum ? (
<Popup
flowing
hoverable
inverted
trigger={
<Menu.Item>
<Icon name='angle down' size='large' />
<Icon name="angle down" size="large" />
</Menu.Item>
}
position='top center'
position="top center"
>
<Menu inverted secondary size='large'>
{menuItems.map((item, i) => {
return (this.props.user.permission >= item.permissionLevel
&& item.permissionLevel > 0
&& current < i ?
<Menu.Item key={i} as={Link} to={item.to}>
{item.prefix}{item.text}
</Menu.Item>
: null
)})
}
<Menu inverted secondary size="large">
{menuItems.map((item, i) =>
this.props.user.permission >= item.permissionLevel &&
item.permissionLevel > 0 &&
current < i ? (
<Menu.Item key={Math.random()} as={Link} to={item.to}>
{item.prefix}
{item.text}
</Menu.Item>
) : null,
)}
</Menu>
</Popup>
: null
}
) : null}
{/* Login Button */}
<Menu.Item position='right'>
{this.props.user.id ?
<Menu.Item position="right">
{this.props.user.id ? (
<Button.Group>
<Button inverted as={Link} to='/profile'>Profilom</Button>
<Button as='a' href='/api/v1/logout/' icon='sign out' />
<Button inverted as={Link} to="/profile">
Profilom
</Button>
<Button as="a" href="/oidc/logout/" icon="sign out" />
</Button.Group>
:
<Button as='a' href='/api/v1/login/authsch/' inverted>Bejelentkezés</Button>
}
) : (
<Button as="a" href="/oidc/authenticate/" inverted>
Bejelentkezés
</Button>
)}
</Menu.Item>
</Menu>
</Container>
</Segment>
)
);
}
render() {
......@@ -197,51 +206,77 @@ class Header extends Component {
<Responsive minWidth={1101} maxWidth={1200}>
{this.renderHeader(7)}
</Responsive>
<Responsive minWidth={1201}>
{this.renderHeader(8)}
</Responsive>
<Responsive minWidth={1201}>{this.renderHeader(8)}</Responsive>
{/* Mobile view */}
<Responsive maxWidth={599}>
<Segment inverted textAlign='center' vertical>
<Segment inverted textAlign="center" vertical>
<Container>
<Menu inverted secondary size='large'>
<Menu inverted secondary size="large">
{/* kszk logo + home link */}
<Menu.Item as={Link} to={menuItems[0].to}>
{menuItems[0].prefix}{menuItems[0].text}
</Menu.Item>
{menuItems[0].prefix}
{menuItems[0].text}
</Menu.Item>
{/* Sandwich menu */}
<Popup flowing hoverable inverted trigger={
<Menu.Item onClick={this.handleClose}
position='right'>
<Icon name='bars' size='large' />
<Popup
flowing
hoverable
inverted
trigger={
<Menu.Item onClick={this.handleClose} position="right">
<Icon name="bars" size="large" />
</Menu.Item>
}
position='top center'
position="top center"
open={this.state.isOpen}
onOpen={this.handleOpen}
on='click'
size='huge'
on="click"
size="huge"
>
<Menu vertical inverted secondary size='large'>
<Menu vertical inverted secondary size="large">
{menuItems.map((item, i) =>
((this.props.user.permission >= item.permissionLevel
||item.permissionLevel === 0) && i>0?
<Menu.Item onClick={this.handleClose}
key={i} as={Link} to={item.to}>
{item.prefix}{item.text}
</Menu.Item>
: null
))
}
(this.props.user.permission >= item.permissionLevel ||
item.permissionLevel === 0) &&
i > 0 ? (
<Menu.Item
onClick={this.handleClose}
key={Math.random()}
as={Link}
to={item.to}
>
{item.prefix}
{item.text}
</Menu.Item>
) : null,
)}
<Menu.Item>
{this.props.user.id ?
{this.props.user.id ? (
<Button.Group>
<Button onClick={this.handleClose} inverted as={Link} to='/profile'>Profilom</Button>
<Button onClick={this.handleClose} as='a' href='/api/v1/logout/' icon='sign out' />
<Button
onClick={this.handleClose}
inverted
as={Link}
to="/profile"
>
Profilom
</Button>
<Button
onClick={this.handleClose}
as="a"
href="/oidc/logout/"
icon="sign out"
/>
</Button.Group>
:
<Button onClick={this.handleClose} as='a' href='/api/v1/login/authsch/' inverted>Bejelentkezés</Button>
}
) : (
<Button
onClick={this.handleClose}
as="a"
href="/oidc/authenticate/"
inverted
>
Bejelentkezés
</Button>
)}
</Menu.Item>
</Menu>
</Popup>
......@@ -258,4 +293,4 @@ const mapStateToProps = ({ user }) => ({
user,
});
export default connect(mapStateToProps, { getUserData })(Header);
\ No newline at end of file
export default connect(mapStateToProps, { getUserData })(Header);
src/components/Main.js
View file @ 2eef83d2
import React from 'react';
import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import ApplicantProfile from './pages/ApplicantProfile';
import Applications from './pages/Applications';
import EventDetail from './pages/EventDetail';
import Groups from './pages/Groups';
import Home from './pages/Home';
import Homework from './pages/Homework';
import Mentors from './pages/Mentors';
import Schedule from './pages/Schedule';
import News from './pages/News';
import NotFound from './pages/NotFound';
import Profile from './pages/Profile';
import React from 'react';
import Schedule from './pages/Schedule';
import Statistics from './pages/Statistics';
import Groups from './pages/Groups';
import News from './pages/News';
import Homework from './pages/Homework';
import Applications from './pages/Applications';
import EventDetail from './pages/EventDetail';
import ApplicantProfile from './pages/ApplicantProfile';
const Main = () => (
<Switch>
<Redirect exact from='/' to='/home' />
<Route exact path='/home' component={Home} />
<Route path='/news' component={News} />
<Route path='/mentors' component={Mentors} />
<Route path='/schedule' component={Schedule} />
<Route path='/profile' component={withRouter(Profile)} />
<Route path='/statistics' component={Statistics} />
<Route path='/groups' component={Groups} />
<Route path='/homework' component={Homework} />
<Route path='/events/:id' component={EventDetail} />
<Route path='/applications' component={Applications} />
<Route path='/applicant/:id' component={ApplicantProfile} />
<Redirect exact from="/" to="/home" />
<Route exact path="/home" component={Home} />
<Route path="/news" component={News} />
<Route path="/mentors" component={Mentors} />
<Route path="/schedule" component={Schedule} />
<Route path="/profile" component={withRouter(Profile)} />
<Route path="/statistics" component={Statistics} />
<Route path="/groups" component={Groups} />
<Route path="/homework" component={Homework} />
<Route path="/events/:id" component={EventDetail} />
<Route path="/applications" component={Applications} />
<Route path="/applicant/:id" component={ApplicantProfile} />
<Route component={NotFound} />
</Switch>
);
......
src/components/extra/GroupCard.js
View file @ 2eef83d2
import React, {Component} from 'react'
import { Segment, Header, Divider } from 'semantic-ui-react';
import { Divider, Header, Segment } from 'semantic-ui-react';
import React, { Component } from 'react';
class GroupCard extends Component {
render(){
return (
<Segment style={{ marginTop: 0 }}>
<Divider style={{ fontSize: '2em'}} horizontal><Header as='h3' style={{ fontSize: '1.2em'}}>{this.props.label}</Header></Divider>
<div className='paragraph' dangerouslySetInnerHTML={{__html: this.props.value}}>
</div>
</Segment>
)
}
render() {
return (
<Segment style={{ marginTop: 0 }}>
<Divider style={{ fontSize: '2em' }} horizontal>
<Header as="h3" style={{ fontSize: '1.2em' }}>
{this.props.label}
</Header>
</Divider>
<div
className="paragraph"
dangerouslySetInnerHTML={{ __html: this.props.value }}
/>
</Segment>
);
}
}
export default GroupCard
\ No newline at end of file
export default GroupCard;
src/components/forms/AddEventForm.js
View file @ 2eef83d2
import { Button, Form, Icon, Input, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { addEvent, eventDate, writeEvent } from '../../actions/statistics';
import { DateTimeInput } from 'semantic-ui-calendar-react';
import { writeEvent, eventDate, addEvent } from '../../actions/statistics'
import { clearWrite } from '../../actions/news'
import { clearWrite } from '../../actions/news';
import { connect } from 'react-redux';
class AddEventForm extends Component {
constructor(props) {
......@@ -14,26 +15,28 @@ class AddEventForm extends Component {
};
}
// Handling change in redux action creator throws an exception
// Temporal solotion using the components state to display, instead redux state
handleChange = (event, {name, value}) => {
handleChange = (event, { name, value }) => {
if (this.state.hasOwnProperty(name)) {
this.setState({ [name]: value });
}
this.props.eventDate(name, value)
}
this.props.eventDate(name, value);
};
render() {
const { name, date, description } = this.props.newEvent;
const { name, description } = this.props.newEvent;
return (
<Modal
open={this.state.showModal}
trigger={
<Button
size='big'
onClick={() => { this.setState({ showModal: true }); }}
>Alkalom hozzáadása
size="big"
onClick={() => {
this.setState({ showModal: true });
}}
>
Alkalom hozzáadása
</Button>
}
>
......@@ -46,26 +49,26 @@ class AddEventForm extends Component {
<Form>
<Form.Field
control={Input}
label='Név'
name='name'
onChange={e => this.props.writeEvent(e)}
label="Név"
name="name"
onChange={(e) => this.props.writeEvent(e)}
value={name}
style={{
marginBottom: '20px',
}}
placeholder='Title'
placeholder="Title"
/>
<Form.TextArea
name='description'
label='Leírás:'
placeholder='Rövid leírás'
name="description"
label="Leírás:"
placeholder="Rövid leírás"
value={description}
onChange={e => this.props.writeEvent(e)}
onChange={(e) => this.props.writeEvent(e)}
/>
<DateTimeInput
name="date"
label="Dátum:"
dateFormat='YYYY-MM-DD'
dateFormat="YYYY-MM-DD"
placeholder="Date"
value={this.state.date}
iconPosition="left"
......@@ -76,22 +79,24 @@ class AddEventForm extends Component {
<Modal.Actions>
<Button
inverted
color='red'
onClick={() => { this.setState({ showModal: false });
this.props.clearWrite();}}
color="red"
onClick={() => {
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='remove' />
<Icon name="remove" />
Cancel
</Button>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.props.addEvent(this.props.newEvent);
this.setState({ showModal: false, date: '' });
}}
this.props.addEvent(this.props.newEvent);
this.setState({ showModal: false, date: '' });
}}
>
<Icon name='checkmark' /> Add
<Icon name="checkmark" /> Add
</Button>
</Modal.Actions>
</Modal>
......@@ -101,4 +106,9 @@ class AddEventForm extends Component {
const mapStateToProps = ({ events: { newEvent } }) => ({ newEvent });
export default connect(mapStateToProps, { writeEvent, addEvent, eventDate, clearWrite })(AddEventForm);
export default connect(mapStateToProps, {
writeEvent,
addEvent,
eventDate,
clearWrite,
})(AddEventForm);
src/components/forms/AddNewsForm.js
View file @ 2eef83d2
import { Button, Form, Icon, Input, Modal, TextArea } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { clearWrite, postNews, writeNews } from '../../actions/news';
import { postNews, writeNews, clearWrite } from '../../actions/news';
import { connect } from 'react-redux';
class AddNewsForm extends Component {
constructor(props) {
......@@ -20,9 +20,12 @@ class AddNewsForm extends Component {
open={this.state.showModal}
trigger={
<Button
size='big'
onClick={() => { this.setState({ showModal: true }); }}
>Hír hozzáadása
size="big"
onClick={() => {
this.setState({ showModal: true });
}}
>
Hír hozzáadása
</Button>
}
>
......@@ -31,41 +34,43 @@ class AddNewsForm extends Component {
<Form>
<Form.Field
control={Input}
label='Title'
name='title'
onChange={e => this.props.writeNews(e)}
label="Title"
name="title"
onChange={(e) => this.props.writeNews(e)}
value={title}
placeholder='Title'
placeholder="Title"
/>
<Form.Field
control={TextArea}
label='Text'
name='text'
onChange={e => this.props.writeNews(e)}
label="Text"
name="text"
onChange={(e) => this.props.writeNews(e)}
value={text}
placeholder='Tell us what you want...'
placeholder="Tell us what you want..."
/>
</Form>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
onClick={() => { this.setState({ showModal: false }); }}
color="red"
onClick={() => {
this.setState({ showModal: false });
}}
>
<Icon name='remove' />
<Icon name="remove" />
Cancel
</Button>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.props.postNews({ title, text, updated_by });
this.setState({ showModal: false });
this.props.clearWrite();
}}
this.props.postNews({ title, text, updated_by });
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='checkmark' /> Add
<Icon name="checkmark" /> Add
</Button>
</Modal.Actions>
</Modal>
......@@ -75,4 +80,6 @@ class AddNewsForm extends Component {
const mapStateToProps = ({ newNews, user }) => ({ newNews, user });
export default connect(mapStateToProps, { postNews, writeNews, clearWrite })(AddNewsForm);
export default connect(mapStateToProps, { postNews, writeNews, clearWrite })(
AddNewsForm
);
src/components/forms/AddSolutionForm.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Modal, Button, Form, Input, TextArea, Icon, Header, Segment, Divider } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { addSolution, writeSolution, writeSolutionFile, addDocument, clearWrite } from '../../actions/homework';
import './Forms.css';
import ConfirmModal from '../forms/ConfirmModal';
import { customMessage } from '../pages/Homework';
import {
Button,
Dimmer,
Divider,
Form,
Header,
Icon,
Input,
Loader,
Modal,
Segment,
TextArea,
} from 'semantic-ui-react';
import React, { Component } from 'react';
import {
addDocument,
addSolution,
clearWrite,
getDocuments,
getSolutions,
writeSolution,
writeSolutionFile,
} from '../../actions/homework';
import ConfirmModal from './ConfirmModal';
import { connect } from 'react-redux';
import { customMessage } from '../pages/Homework';
const allowedFileTypes = [
'image/jpeg',
'image/png',
'application/x-zip-compressed',
'application/zip',
'application/x-zip',
];
const allowedFileEnds = ['.zip', '.jpeg', '.jpg', '.jpe', '.png'];
function validateFileName(fileNameToValidate) {
return (
allowedFileEnds.find((typeName) => {
return fileNameToValidate.toLowerCase().endsWith(typeName);
}).length > 0
);
}
// in megabytes
const maxFileSize = 50;
class AddSolutionForm extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
loading: false,
};
}
render() {
const {
name, description, file
} = this.props.newSolution
const { name, description, file } = this.props.newSolution;
const task = this.props.taskid;
const thisTaskSolution = this.props.homeworks.solutions
.filter(solution => solution.task === task)
const thisTaskDocument = this.props.homeworks.documents
.filter(document => document.solution === thisTaskSolution[0]?.id)
const thisTaskSolution = this.props.homeworks.solutions.filter(
(solution) => solution.task === task
);
const thisTaskDocument = this.props.homeworks.documents.filter(
(document) => document.solution === thisTaskSolution[0]?.id
);
const lastName = thisTaskDocument[0]?.name
const lastDesc = thisTaskDocument[0]?.description
const lastFile = thisTaskDocument[0]?.file
const lastName = thisTaskDocument[0]?.name;
const lastDesc = thisTaskDocument[0]?.description;
const lastFile = thisTaskDocument[0]?.file_url;
const corrected = false;
const accepted = false;
......@@ -57,166 +86,231 @@ class AddSolutionForm extends Component {
onClose={() => this.setState({ showModal: false })}
trigger={
<button
id='task'
onClick={() => {
type="button"
id="task"
onClick={() => {
this.setState({ showModal: true });
}}
>
<Icon name='external' />
<Icon name="external" />
{this.props.tasktitle}
</button>
}
>
<Modal.Header>
{this.props.multiple ? 'Másik megoldás' : 'Megoldás'} beadása a(z) {this.props.tasktitle} nevű feladathoz:
{this.props.multiple ? 'Másik megoldás' : 'Megoldás'} beadása a(z)
{this.props.tasktitle} nevű feladathoz:
</Modal.Header>
<Modal.Content>
<Modal.Description style={{ marginBottom: '2em' }}>
<Header as='h5'>Feladat leírása:</Header>
{sentences.map(s => (<p key={Math.random()}>{s}</p>))}
<Header as="h5">Feladat leírása:</Header>
{sentences.map((s) => (
<p key={Math.random()}>{s}</p>
))}
</Modal.Description>
{this.props.disabled ?
{this.props.disabled ? (
<div>
{lastName ?
<div style={{paddingBottom: '1em'}}>
<div style={{ marginBottom: '1em', fontWeight: 'bold' }}>Legutóbbi megoldásod:</div>
<Segment attached='top'>
<h5 style={{paddingBottom: '0.4em'}}>Cím:</h5>
{lastName ? (
<div style={{ paddingBottom: '1em' }}>
<div style={{ marginBottom: '1em', fontWeight: 'bold' }}>
Legutóbbi megoldásod:
</div>
<Segment attached="top">
<h5 style={{ paddingBottom: '0.4em' }}>Cím:</h5>
{lastName}
</Segment>
<Segment attached>
<h5 style={{paddingBottom: '0.4em'}}>Leírás:</h5>
<h5 style={{ paddingBottom: '0.4em' }}>Leírás:</h5>
{lastDesc}
</Segment>
<Segment attached='bottom'>
<Segment attached="bottom">
<h5>Beadott fájl:</h5>
{lastFile ?
<a href={lastFile} rel='noreferrer noopener' target='_blank'>Fájl letöltése</a>
:
{lastFile ? (
<a href={lastFile} rel="noreferrer noopener" download>
Fájl letöltése
</a>
) : (
<span>-</span>
}
)}
</Segment>
</div>
:
customMessage(disabledText, undefined, undefined, this.props.disabled)
}
) : (
customMessage(
disabledText,
undefined,
undefined,
this.props.disabled
)
)}
</div>
:
) : (
<Form>
{lastName ?
<div style={{paddingBottom: '1em'}}>
<div style={{ fontWeight: 'bold' }}>Legutóbbi megoldásod:</div>
<Segment attached='top'>
<h5 style={{paddingBottom: '0.4em'}}>Cím:</h5>
{lastName ? (
<div style={{ paddingBottom: '1em' }}>
<div style={{ fontWeight: 'bold' }}>
Legutóbbi megoldásod:
</div>
<Segment attached="top">
<h5 style={{ paddingBottom: '0.4em' }}>Cím:</h5>
{lastName}
</Segment>
<Segment attached>
<h5 style={{paddingBottom: '0.4em'}}>Leírás:</h5>
<h5 style={{ paddingBottom: '0.4em' }}>Leírás:</h5>
{lastDesc}
</Segment>
<Segment attached='bottom'>
<Segment attached="bottom">
<h5>Beadott fájl:</h5>
{lastFile ?
<a href={lastFile} rel='noreferrer noopener' target='_blank'>Fájl letöltése</a>
:
{lastFile ? (
<a href={lastFile} rel="noreferrer noopener" download>
Fájl letöltése
</a>
) : (
<span>-</span>
}
)}
</Segment>
</div>
:
null
}
) : null}
<Divider />
<Form.Field
control={Input}
label='Megoldás címe:'
name='name'
onChange={e => this.props.writeSolution(e)}
label="Megoldás címe:"
name="name"
onChange={(e) => this.props.writeSolution(e)}
value={name}
placeholder='Adj meg egy címet a beadandó megoldásodnak...'
placeholder="Adj meg egy címet a beadandó megoldásodnak..."
/>
<Form.Field
control={TextArea}
label='Megoldás leírása:'
name='description'
onChange={e => this.props.writeSolution(e)}
label="Megoldás leírása:"
name="description"
onChange={(e) => this.props.writeSolution(e)}
value={description}
placeholder='Add meg a megoldás leírását...'
placeholder="Add meg a megoldás leírását..."
/>
<Form.Field>
<label>Fájl (Megengedett fájltípusok: png, jpeg, jpg, zip. Maximum 50 MB.):</label>
<Input type='file' onChange={e => this.props.writeSolutionFile(e)} />
<label>
Fájl (Megengedett fájltípusok: png, jpeg, jpg, zip. Maximum 50
MB.):
</label>
<Input
type="file"
accept={allowedFileTypes.join(',')}
onChange={(e) => this.props.writeSolutionFile(e)}
/>
</Form.Field>
</Form>
}
)}
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
color="red"
onClick={() => {
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='remove' /> Mégse
<Icon name="remove" /> Mégse
</Button>
{this.props.multiple
?
<ConfirmModal
button={
<Button
disabled={
!name || !description ||
(!file ? false : !allowedFileTypes.includes(file.type) ||
file.size > (maxFileSize) * (1024 ** 2))
}
inverted
color='green'
>
<Icon name='checkmark' /> Beadás
</Button>
}
text='beadod az új megoldást, ami felülírja az előzőt'
onAccept={() => {
this.props.addSolution({
task, accepted, corrected, note, name, description, file,
});
this.setState({ showModal: false });
this.props.clearWrite();
{this.props.multiple ? (
<ConfirmModal
button={
<Button
disabled={
!name ||
!description ||
(!file
? false
: !validateFileName(file.name) ||
file.size > maxFileSize * 1024 ** 2)
}
}
/>
:
<Button
inverted
color='green'
disabled={
!name || !description ||
(!file ? false : !allowedFileTypes.includes(file.type) ||
file.size > (maxFileSize) * (1024 ** 2))
}
onClick={() => {
this.props.addSolution({
task, accepted, corrected, note, name, description, file,
inverted
color="green"
>
<Icon name="checkmark" />
Beadás
{this.state.loading ? (
<Dimmer active>
<Loader size="massive" />
</Dimmer>
) : null}
</Button>
}
text="beadod az új megoldást, ami felülírja az előzőt"
onAccept={() => {
this.setState({
loading: true,
});
this.props
.addSolution({
task,
accepted,
corrected,
note,
name,
description,
file,
})
.then(
() => {
this.setState({
loading: false,
showModal: false,
});
this.props.clearWrite();
},
() => {
this.setState({
loading: false,
});
alert('Sikertelen feltöltés!');
}
)
.finally(() => {
window.location.reload(false);
});
}}
/>
) : (
<Button
inverted
color="green"
disabled={
!name ||
!description ||
(!file
? false
: !validateFileName(file.name) ||
file.size > maxFileSize * 1024 ** 2)
}
onClick={() => {
this.props.addSolution({
task,
accepted,
corrected,
note,
name,
description,
file,
});
this.setState({ showModal: false });
this.props.clearWrite();
}
}
>
<Icon name='checkmark' /> Beadás
</Button>
}
}}
>
<Icon name="checkmark" /> Beadás
</Button>
)}
</Modal.Actions>
</Modal>
);
}
}
const mapStateToProps = ({ newSolution, homeworks, user }) => ({ newSolution, homeworks, user });
const mapStateToProps = ({ newSolution, homeworks, user }) => ({
newSolution,
homeworks,
user,
});
export default connect(mapStateToProps, {
addSolution,
......
src/components/forms/AddTaskForm.js
View file @ 2eef83d2
import {
Button,
Form,
Icon,
Input,
Modal,
TextArea,
} from 'semantic-ui-react';
import React, { Component } from 'react';
import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import {
addTask,
clearWrite,
writeTask,
writeTaskDeadline,
} from '../../actions/homework';
import { DateTimeInput } from 'semantic-ui-calendar-react';
import { connect } from 'react-redux';
import moment from 'moment';
import { addTask, writeTask, writeTaskDeadline, clearWrite } from '../../actions/homework';
class AddTaskForm extends Component {
constructor(props) {
......@@ -14,22 +27,26 @@ class AddTaskForm extends Component {
}
render() {
const { title, text, deadline } = this.props.newTask;
const {
title, text, deadline, bits = 1,
} = this.props.newTask;
return (
<Modal
open={this.state.showModal}
closeOnDimmerClick
onClose={() => this.setState({ showModal: false })}
trigger={
trigger={(
<Button
inverted
style={{ marginRight: '2em' }}
color='blue'
onClick={() => { this.setState({ showModal: true }); }}
>
<Icon name='plus' /> Új feladat hozzáadása
<Icon name='plus' />
{' '}
Új feladat hozzáadása
</Button>
}
)}
>
<Modal.Header>Új feladat:</Modal.Header>
<Modal.Content>
......@@ -38,7 +55,7 @@ class AddTaskForm extends Component {
control={Input}
label='Cím:'
name='title'
onChange={e => this.props.writeTask(e)}
onChange={(e) => this.props.writeTask(e)}
value={title}
placeholder='Add meg a feladat címét.'
/>
......@@ -46,7 +63,7 @@ class AddTaskForm extends Component {
control={TextArea}
label='Leírás:'
name='text'
onChange={e => this.props.writeTask(e)}
onChange={(e) => this.props.writeTask(e)}
value={text}
placeholder='Add meg a feladat leírását...'
/>
......@@ -62,6 +79,15 @@ class AddTaskForm extends Component {
}}
value={deadline}
/>
<Form.Field
control={Input}
type='number'
label='Bitek száma:'
name='bits'
onChange={(e) => this.props.writeTask(e)}
value={bits}
placeholder='Add meg a feladatért kapható bitek számát ...'
/>
</Form>
</Modal.Content>
<Modal.Actions>
......@@ -73,24 +99,30 @@ class AddTaskForm extends Component {
this.props.clearWrite();
}}
>
<Icon name='remove' /> Mégse
<Icon name='remove' />
{' '}
Mégse
</Button>
<Button
inverted
color='green'
disabled={
title === '' ||
title.length > 150 ||
text === '' ||
deadline === '' || moment().isAfter(deadline)
title === ''
|| title.length > 150
|| text === ''
|| deadline === '' || moment().isAfter(deadline)
}
onClick={() => {
this.props.addTask({ title, text, deadline });
this.props.addTask({
title, text, deadline, bits,
});
this.setState({ showModal: false });
this.props.clearWrite();
}}
}}
>
<Icon name='checkmark' /> Hozzáadás
<Icon name='checkmark' />
{' '}
Hozzáadás
</Button>
</Modal.Actions>
</Modal>
......
src/components/forms/ConfirmModal.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Button, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
class ConfirmModal extends Component {
constructor(props) {
......@@ -9,9 +9,9 @@ class ConfirmModal extends Component {
};
}
close = () => this.setState({ showModal: false })
close = () => this.setState({ showModal: false });
open = () => this.setState({ showModal: true})
open = () => this.setState({ showModal: true });
render() {
const { button, text, onAccept } = this.props;
......@@ -23,31 +23,26 @@ class ConfirmModal extends Component {
trigger={button}
onOpen={this.open}
onClose={this.close}
size='small'
size="small"
basic
>
<Header icon='question' content='Megerősítés' />
<Header icon="question" content="Megerősítés" />
<Modal.Content>
<p>
Biztos hogy {text}?
</p>
<p>Biztos hogy {text}?</p>
</Modal.Content>
<Modal.Actions>
<Button
basic
color='red'
inverted
inverted
onClick={() => this.close()}
>
<Icon name='remove' /> Nem
<Button basic color="red" inverted onClick={() => this.close()}>
<Icon name="remove" /> Nem
</Button>
<Button
color='green'
color="green"
inverted
onClick={() => { onAccept(); this.close(); }}
onClick={() => {
onAccept();
this.close();
}}
>
<Icon name='checkmark' /> Igen
<Icon name="checkmark" /> Igen
</Button>
</Modal.Actions>
</Modal>
......
src/components/forms/CorrectSolutionForm.js
View file @ 2eef83d2
import {
Button,
Checkbox,
Form,
Header,
Icon,
Modal,
TextArea,
} from 'semantic-ui-react';
import React, { Component } from 'react';
import { Modal, Button, Icon, Checkbox, Form, TextArea, Header } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { correctSolution,
writeSolution,
import {
check,
clearWrite,
getSolutions,
correctSolution,
getDocuments,
selectSolution } from '../../actions/homework';
getSolutions,
selectSolution,
setchecktrue,
writeSolution,
} from '../../actions/homework';
import { connect } from 'react-redux';
class CorrectSolutionForm extends Component {
constructor(props) {
......@@ -18,27 +30,22 @@ class CorrectSolutionForm extends Component {
}
render() {
const {
studentFullName, studentId, taskTitle, taskSolutions,
} = this.props;
const taskSolutionsProfile =
taskSolutions.filter(solution => solution.created_by === studentId);
const { studentFullName, studentId, taskTitle, taskSolutions } = this.props;
const taskSolutionsProfile = taskSolutions.filter(
(solution) => solution.created_by === studentId
);
const relevantSolution = taskSolutionsProfile.slice(-1)[0];
const relevantDocuments = this.props.homeworks.documents.filter(document =>
document.solution === relevantSolution.id).filter(document =>
document.uploaded_by_name === studentFullName);
const relevantDocuments = this.props.homeworks.documents
.filter((document) => document.solution === relevantSolution.id)
.filter((document) => document.uploaded_by_name === studentFullName);
const relevantDocument = relevantDocuments.slice(-1)[0];
let fileLink;
if (relevantDocument && relevantDocument.file) {
fileLink = `/media${relevantDocument.file.split('media')[1]}`;
if (relevantDocument && relevantDocument.file_url) {
fileLink = `${relevantDocument.file_url}`;
} else {
fileLink = null;
}
const {
corrected,
accepted,
note,
} = this.props.correction;
const { corrected, accepted, note } = this.props.correction;
return (
<Modal
open={this.state.showModal}
......@@ -59,93 +66,95 @@ class CorrectSolutionForm extends Component {
}
>
<Modal.Header>
A(z) {taskTitle} nevű feladat {studentFullName} által beadott megoldásának kijavítása:
A(z) {taskTitle} nevű feladat {studentFullName} által beadott
megoldásának kijavítása:
</Modal.Header>
<Modal.Content>
<Header as='h5'>A megoldás címe:</Header>
{(relevantDocument && relevantDocument.description)
? <p>{relevantDocument.name}</p>
: <p>Nincs cím.</p>
}
<Header as='h5'>A megoldás leírása:</Header>
{(relevantDocument && relevantDocument.description)
? relevantDocument.description.split('\n').map(s => (<p key={Math.random()}>{s}</p>))
: <p>Nincs leírás.</p>
}
<Header as='h5'>A beadott dokumentum:</Header>
{fileLink
? <a href={fileLink} rel='noreferrer noopener' target='_blank'>Fájl letöltése</a>
: <p>Nincs fájl.</p>
}
<Header as='h5'>Kijavítás állapotának változtatása:</Header>
<Header as="h5">A megoldás címe:</Header>
{relevantDocument && relevantDocument.description ? (
<p>{relevantDocument.name}</p>
) : (
<p>Nincs cím.</p>
)}
<Header as="h5">A megoldás leírása:</Header>
{relevantDocument && relevantDocument.description ? (
relevantDocument.description
.split('\n')
.map((s) => <p key={Math.random()}>{s}</p>)
) : (
<p>Nincs leírás.</p>
)}
<Header as="h5">A beadott dokumentum:</Header>
{fileLink ? (
<a href={fileLink} rel="noreferrer noopener" target>
Fájl letöltése
</a>
) : (
<p>Nincs fájl.</p>
)}
<Header as="h5">Kijavítás állapotának változtatása:</Header>
<Button
color='orange'
color="orange"
inverted={corrected}
onClick={() => this.props.check('corrected')}
>
<Checkbox
label='Nincs kijavítva'
checked={!corrected}
/>
<Checkbox label="Nincs kijavítva" checked={!corrected} />
</Button>
<Header as='h5'>Elfogadás/elutasítás:</Header>
<Header as="h5">Elfogadás/elutasítás:</Header>
<Button
color='green'
color="green"
inverted={!accepted}
onClick={() => this.props.check('accepted')}
onClick={() => {
this.props.check('accepted');
this.props.setchecktrue('corrected');
}}
>
<Checkbox
label='Elfogadható'
checked={accepted}
/>
<Checkbox label="Elfogadható" checked={accepted} />
</Button>
<Button
color='red'
color="red"
inverted={accepted}
onClick={() => this.props.check('accepted')}
>
<Checkbox
label='Nem elfogadható'
checked={!accepted}
/>
<Checkbox label="Nem elfogadható" checked={!accepted} />
</Button>
<Header as='h5'>A feladat megoldásának szöveges értékelése:</Header>
<Header as="h5">A feladat megoldásának szöveges értékelése:</Header>
<Form>
<Form.Field
control={TextArea}
name='note'
onChange={e => this.props.writeSolution(e)}
name="note"
onChange={(e) => this.props.writeSolution(e)}
value={note}
placeholder='Írhatsz megjegyzést a megoldásra...'
placeholder="Írhatsz megjegyzést a megoldásra..."
/>
</Form>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
color="red"
onClick={() => {
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='remove' /> Mégse
<Icon name="remove" /> Mégse
</Button>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.props.correctSolution(
relevantSolution.id,
corrected,
accepted,
note,
note
);
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='checkmark' /> Beadás
<Icon name="checkmark" /> Beadás
</Button>
</Modal.Actions>
</Modal>
......@@ -153,12 +162,17 @@ class CorrectSolutionForm extends Component {
}
}
const mapStateToProps = ({ homeworks, correction, user }) => ({ homeworks, correction, user });
const mapStateToProps = ({ homeworks, correction, user }) => ({
homeworks,
correction,
user,
});
export default connect(mapStateToProps, {
correctSolution,
writeSolution,
check,
setchecktrue,
clearWrite,
getSolutions,
getDocuments,
......
src/components/forms/EditNewsForm.js
View file @ 2eef83d2
import { Button, Form, Icon, Input, Modal, TextArea } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { clearWrite, editNews, writeNews } from '../../actions/news';
import { writeNews, editNews, clearWrite } from '../../actions/news';
import { connect } from 'react-redux';
import moment from 'moment';
class EditNewsForm extends Component {
constructor(props) {
......@@ -13,7 +14,15 @@ class EditNewsForm extends Component {
}
render() {
const { id, title, text } = this.props.selectedNews;
const {
id,
title,
text,
author,
last_update_by,
created_at,
updated_at,
} = this.props.selectedNews;
const updated_by = this.props.user.id;
return (
<Modal
......@@ -22,8 +31,10 @@ class EditNewsForm extends Component {
trigger={
<Button
compact
onClick={() => { this.setState({ showModal: true }); }}
size='mini'
onClick={() => {
this.setState({ showModal: true });
}}
size="mini"
>
Edit
</Button>
......@@ -31,45 +42,56 @@ class EditNewsForm extends Component {
>
<Modal.Header>Szerkesztés:</Modal.Header>
<Modal.Content>
<p style={{ fontStyle: 'italic' }}>
<b>Közzétéve:</b> {moment(created_at).format('LLLL')} <br />
<b>Írta:</b> {author} <br />
<b>Szerkesztve:</b> {moment(updated_at).format('LLLL')} <br />
<b>Szerkesztette:</b> {last_update_by}
</p>
<Form>
<Form.Field
control={Input}
label='Title'
name='title'
onChange={e => this.props.writeNews(e)}
label="Title"
name="title"
onChange={(e) => this.props.writeNews(e)}
value={title}
placeholder='Title'
placeholder="Title"
/>
<Form.Field
control={TextArea}
label='Text'
name='text'
onChange={e => this.props.writeNews(e)}
label="Text"
name="text"
onChange={(e) => this.props.writeNews(e)}
value={text}
placeholder='Tell us what you want...'
placeholder="Tell us what you want..."
/>
</Form>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
onClick={() => { this.setState({ showModal: false }); }}
color="red"
onClick={() => {
this.setState({ showModal: false });
}}
>
<Icon name='remove' /> Cancel
<Icon name="remove" /> Cancel
</Button>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.props.editNews({
id, title, text, updated_by,
});
this.setState({ showModal: false });
this.props.clearWrite();
}}
this.props.editNews({
id,
title,
text,
updated_by,
});
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='checkmark' /> Edit
<Icon name="checkmark" /> Edit
</Button>
</Modal.Actions>
</Modal>
......@@ -80,5 +102,7 @@ class EditNewsForm extends Component {
const mapStateToProps = ({ user, selectedNews }) => ({ user, selectedNews });
export default connect(mapStateToProps, {
editNews, writeNews, clearWrite,
editNews,
writeNews,
clearWrite,
})(EditNewsForm);
src/components/forms/EditTaskForm.js
View file @ 2eef83d2
import { Button, Form, Icon, Input, Modal, TextArea } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import {
clearWrite,
editTask,
writeTask,
writeTaskDeadline,
} from '../../actions/homework';
import { DateTimeInput } from 'semantic-ui-calendar-react';
import { connect } from 'react-redux';
import moment from 'moment';
import { writeTask, writeTaskDeadline, editTask, clearWrite } from '../../actions/homework';
class EditTaskForm extends Component {
constructor(props) {
......@@ -14,12 +20,7 @@ class EditTaskForm extends Component {
}
render() {
const {
id,
title,
text,
deadline,
} = this.props.selectedTask;
const { id, title, text, deadline, bits } = this.props.selectedTask;
return (
<Modal
open={this.state.showModal}
......@@ -30,65 +31,77 @@ class EditTaskForm extends Component {
<Button
inverted
style={{ marginRight: '2em' }}
color='orange'
onClick={() => { this.setState({ showModal: true }); }}
color="orange"
onClick={() => {
this.setState({ showModal: true });
}}
>
<Icon name='edit' /> Módosítás
<Icon name="edit" /> Módosítás
</Button>
}
>
<Modal.Header>A {title} nevű feladat módosítása:</Modal.Header>
<Modal.Header>A{title} nevű feladat módosítása:</Modal.Header>
<Modal.Content>
<Form>
<Form.Field
control={Input}
label='Cím:'
name='title'
onChange={e => this.props.writeTask(e)}
label="Cím:"
name="title"
onChange={(e) => this.props.writeTask(e)}
value={title}
placeholder='Add meg a feladat címét.'
placeholder="Add meg a feladat címét."
/>
<Form.Field
control={TextArea}
label='Leírás:'
name='text'
onChange={e => this.props.writeTask(e)}
label="Leírás:"
name="text"
onChange={(e) => this.props.writeTask(e)}
value={text}
placeholder='Add meg a feladat leírását...'
placeholder="Add meg a feladat leírását..."
/>
<Form.Field
control={DateTimeInput}
label='Beadási határidő (a jelenlegi időnél későbbi időpont):'
name='deadline'
placeholder='Beadási határidő'
iconPosition='left'
dateTimeFormat='YYYY-MM-DDTHH:mm'
label="Beadási határidő (a jelenlegi időnél későbbi időpont):"
name="deadline"
placeholder="Beadási határidő"
iconPosition="left"
dateTimeFormat="YYYY-MM-DDTHH:mm"
onChange={(e, { name, value }) => {
this.props.writeTaskDeadline({ name, value });
}}
value={deadline}
/>
<Form.Field
control={Input}
type="number"
label="Bitek száma:"
name="bits"
onChange={(e) => this.props.writeTask(e)}
value={bits}
placeholder="Add meg a feladatért kapható bitek számát ..."
/>
</Form>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='red'
color="red"
onClick={() => {
this.setState({ showModal: false });
this.props.clearWrite();
}}
>
<Icon name='remove' /> Mégse
<Icon name="remove" /> Mégse
</Button>
<Button
inverted
color='green'
color="green"
disabled={
title === '' ||
(title !== undefined ? title.length > 150 : false) ||
text === '' ||
deadline === '' || moment().isAfter(deadline)
deadline === '' ||
moment().isAfter(deadline)
}
onClick={() => {
this.props.editTask({
......@@ -96,12 +109,13 @@ class EditTaskForm extends Component {
title,
text,
deadline,
bits,
});
this.setState({ showModal: false });
this.props.clearWrite();
}}
}}
>
<Icon name='checkmark' /> Módosítás
<Icon name="checkmark" /> Módosítás
</Button>
</Modal.Actions>
</Modal>
......
src/components/forms/Forms.css
View file @ 2eef83d2
#task, #tasknote{
#task,
#tasknote {
border: none;
background-color: inherit;
color: teal;
......@@ -8,7 +9,8 @@
color: black;
}
#task:hover, #tasknote:hover {
#task:hover,
#tasknote:hover {
color: red;
cursor: pointer;
}
src/components/forms/HiddenForm.js
View file @ 2eef83d2
import React, {Component} from 'react'
import React, { Component } from 'react';
import { Segment } from 'semantic-ui-react';
class HiddenForm extends Component {
render(){
return (
<div>
<div style={{ marginBottom: 0, fontWeight: this.props.fontWeight }}>{this.props.label}</div>
<Segment style={{ marginTop: 0 }}>
<div>
{this.props.value}
</div>
</Segment>
</div>
)
}
render() {
return (
<div>
<div style={{ marginBottom: 0, fontWeight: this.props.fontWeight }}>
{this.props.label}
</div>
<Segment style={{ marginTop: 0 }}>
<div>{this.props.value}</div>
</Segment>
</div>
);
}
}
export default HiddenForm
\ No newline at end of file
export default HiddenForm;
src/components/forms/InfoModal.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Button, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
class InfoModal extends Component {
constructor(props) {
......@@ -9,9 +9,9 @@ class InfoModal extends Component {
};
}
close = () => this.setState({ showModal: false })
close = () => this.setState({ showModal: false });
open = () => this.setState({ showModal: true})
open = () => this.setState({ showModal: true });
render() {
const { button, title, content } = this.props;
......@@ -23,20 +23,18 @@ class InfoModal extends Component {
trigger={button}
onOpen={this.open}
onClose={this.close}
size='small'
size="small"
basic
>
<Header icon='info' content={title} />
<Header icon="info" content={title} />
<Modal.Content>
{content.split('\n').map(s => (<p key={Math.random()}>{s}</p>))}
{content.split('\n').map((s) => (
<p key={Math.random()}>{s}</p>
))}
</Modal.Content>
<Modal.Actions>
<Button
color='green'
inverted
onClick= {() => this.close()}
>
<Icon name='checkmark' /> Rendben
<Button color="green" inverted onClick={() => this.close()}>
<Icon name="checkmark" /> Rendben
</Button>
</Modal.Actions>
</Modal>
......
src/components/forms/SolutionDetailsForm.js
View file @ 2eef83d2
import './Forms.css';
import { Button, Divider, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Modal, Button, Header, Icon, Divider } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getDocuments, getSolutions } from '../../actions/homework';
import CorrectSolutionForm from './CorrectSolutionForm';
import { connect } from 'react-redux';
import { customMessage } from '../pages/Homework';
import './Forms.css';
import {
getSolutions,
getDocuments,
} from '../../actions/homework';
class SolutionDetailsForm extends Component {
constructor(props) {
......@@ -18,8 +17,9 @@ class SolutionDetailsForm extends Component {
}
render() {
const taskSolutions = this.props.homeworks.solutions.filter(solution =>
solution.task === this.props.taskid);
const taskSolutions = this.props.homeworks.solutions.filter(
(solution) => solution.task === this.props.taskid
);
const noSubmitStudents = [];
const waitForCorrectionStudents = [];
......@@ -27,15 +27,20 @@ class SolutionDetailsForm extends Component {
const acceptedStudents = [];
this.props.homeworks.profiles.forEach((profile) => {
const profileSolutions = taskSolutions.filter(solution =>
solution.created_by === profile.id);
const profileSolutions = taskSolutions.filter(
(solution) => solution.created_by === profile.id
);
if (profile.role === 'Student') {
if (profileSolutions.length === 0) {
noSubmitStudents.push(profile);
} else if (profileSolutions[profileSolutions.length - 1].corrected === false) {
} else if (
profileSolutions[profileSolutions.length - 1].corrected === false
) {
waitForCorrectionStudents.push(profile);
} else if (profileSolutions[profileSolutions.length - 1].accepted === false) {
} else if (
profileSolutions[profileSolutions.length - 1].accepted === false
) {
noAcceptStudents.push(profile);
} else {
acceptedStudents.push(profile);
......@@ -52,90 +57,103 @@ class SolutionDetailsForm extends Component {
onClose={() => this.setState({ showModal: false })}
trigger={
<button
id='task'
type="button"
id="task"
onClick={() => {
this.setState({ showModal: true });
this.props.getSolutions();
this.props.getDocuments();
}}
>
<Icon name='external' />
<Icon name="external" />
{this.props.tasktitle}
</button>
}
>
<Modal.Header>
A megoldások beadásának állapota a(z) {this.props.tasktitle} nevű feladatnál:
A megoldások beadásának állapota a(z) {this.props.tasktitle} nevű
feladatnál:
</Modal.Header>
<Modal.Content>
<Header as='h3'>A feladat leírása:</Header>
{this.props.taskdesc.split('\n').map(s => (<p key={Math.random()}>{s}</p>))}
<Header as="h3">A feladat leírása:</Header>
{this.props.taskdesc.split('\n').map((s) => (
<p key={Math.random()}>{s}</p>
))}
<Divider />
<Header as='h3'>Nem érkezett még megoldás:</Header>
{noSubmitStudents.length === 0 ?
customMessage(noStudentText) :
noSubmitStudents.map(student => (
<Button key={Math.random()} color='blue' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
))
}
<Header as="h3">Nem érkezett még megoldás:</Header>
{noSubmitStudents.length === 0
? customMessage(noStudentText)
: noSubmitStudents.map((student) => (
<Button
key={Math.random()}
color="blue"
style={{ marginRight: '1.5em', marginTop: '1.5em' }}
>
{student.full_name}
</Button>
))}
<Divider />
<Header as='h3'>Javításra vár (A névre kattintva kijavítható a megoldás):</Header>
{waitForCorrectionStudents.length === 0 ?
customMessage(noStudentText) :
waitForCorrectionStudents.map(student => (
<CorrectSolutionForm
key={Math.random()}
color='orange'
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))
}
<Header as="h3">
Javításra vár (A névre kattintva kijavítható a megoldás):
</Header>
{waitForCorrectionStudents.length === 0
? customMessage(noStudentText)
: waitForCorrectionStudents.map((student) => (
<CorrectSolutionForm
key={Math.random()}
color="orange"
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
<Divider />
<Header as='h3'>A megoldás nem elfogadható (A névre kattintva módosítható a javítás):</Header>
{noAcceptStudents.length === 0 ?
customMessage(noStudentText) :
noAcceptStudents.map(student => (
<CorrectSolutionForm
key={Math.random()}
color='red'
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))
}
<Header as="h3">
A megoldás nem elfogadható (A névre kattintva módosítható a
javítás):
</Header>
{noAcceptStudents.length === 0
? customMessage(noStudentText)
: noAcceptStudents.map((student) => (
<CorrectSolutionForm
key={Math.random()}
color="red"
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
<Divider />
<Header as='h3'>Elfogadva (A névre kattintva módosítható a javítás):</Header>
{acceptedStudents.length === 0 ?
customMessage(noStudentText) :
acceptedStudents.map(student => (
<CorrectSolutionForm
key={Math.random()}
color='green'
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))
}
<Header as="h3">
Elfogadva (A névre kattintva módosítható a javítás):
</Header>
{acceptedStudents.length === 0
? customMessage(noStudentText)
: acceptedStudents.map((student) => (
<CorrectSolutionForm
key={Math.random()}
color="green"
studentName={student.nick}
studentFullName={student.full_name}
studentId={student.id}
taskTitle={this.props.tasktitle}
taskSolutions={taskSolutions}
/>
))}
</Modal.Content>
<Modal.Actions>
<Button
inverted
color='green'
color="green"
onClick={() => {
this.setState({ showModal: false });
}}
}}
>
<Icon name='checkmark' /> Kész
<Icon name="checkmark" /> Kész
</Button>
</Modal.Actions>
</Modal>
......@@ -146,5 +164,6 @@ class SolutionDetailsForm extends Component {
const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
export default connect(mapStateToProps, {
getSolutions, getDocuments,
})(SolutionDetailsForm);
\ No newline at end of file
getSolutions,
getDocuments,
})(SolutionDetailsForm);
src/components/images/kszk_with_shadow.png 0 → 100644
View file @ 2eef83d2
src/components/images/kszk_with_shadow.png

251 KiB

src/components/pages/ApplicantProfile.js
View file @ 2eef83d2
import { Button, Container, Header, Item, Label } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Container, Header, Item, Button, Label } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getSelectedProfile, setStatus } from '../../actions/statistics';
import ConfirmModal from '../forms/ConfirmModal';
import { connect } from 'react-redux';
const groupTypes = {
HAT: {
name: 'Hallgatói Tudásbázis',
color: 'purple',
},
SYS: {
name: 'Sysadmin',
color: 'violet',
},
NET: {
name: 'NETeam',
color: 'blue',
},
ST: {
name: 'SecurITeam',
color: 'teal',
},
DT: {
name: 'DevTeam',
color: 'green',
},
};
class ApplicantProfile extends Component {
UNSAFE_componentWillMount() {
......@@ -10,86 +34,110 @@ class ApplicantProfile extends Component {
}
render() {
const { id, signed, role, full_name, nick, motivation_about, motivation_exercise, motivation_profession }
= this.props.selectedProfile;
const {
id,
signed,
role,
full_name,
nick,
motivation_about,
motivation_exercise,
motivation_profession,
groups,
} = this.props.selectedProfile;
return (
<Container style={{ paddingTop: '3em', paddingBottom: '6em' }}>
<Item>
<Item.Content>
<Container textAlign='center'>
<Header as='h2'>{full_name}</Header>
<Container textAlign="center" style={{ paddingBottom: '2em' }}>
<Header as="h2">{full_name}</Header>
<Item.Meta>{nick}</Item.Meta>
<Header as="h2">
{groups?.map((group) => (
<Label color={groupTypes[group].color}>
{groupTypes[group].name}
</Label>
))}
</Header>
</Container>
<Item.Description>
<Container textAlign='justified' style={{ padding: '1em' }}>
<Header as='h3'>Magamról, eddigi tevékenységem:</Header>
<p>{motivation_about}</p>
<Header as='h3'>Szakmai motiváció:</Header>
<p>{motivation_profession}</p>
<Header as='h3'>Feladatok megoldása:</Header>
<p>{motivation_exercise}</p>
<Container textAlign="justified" style={{ padding: '1em' }}>
<Header as="h3">Magamról, eddigi tevékenységem:</Header>
<p>
{motivation_about?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
<Header as="h3">Szakmai motiváció:</Header>
<p>
{motivation_profession?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
<Header as="h3">Feladatok megoldása:</Header>
<p>
{motivation_exercise?.split('\n').map((item, i) => (
<div key={i}>{item}</div>
))}
</p>
</Container>
<Container textAlign='center' style={{ padding: '1em' }}>
<Header as='h3'>Státusz:</Header>
{ signed ?
<Container textAlign="center" style={{ padding: '1em' }}>
<Header as="h3">Státusz:</Header>
{signed ? (
<div>
{ role === 'Student' ?
<Label color='green' size='huge'>Elfogadva</Label>
:
null
}
{ role === 'Staff' ?
<Label color='blue' size='huge'>Staff</Label>
:
null
}
{ role === 'Applicant' ?
<Label color='orange' size='huge'>Jelentkezett</Label>
:
null
}
{ role === 'Denied' ?
<Label color='red' size='huge'>Elutasítva</Label>
:
null
}
{role === 'Student' ? (
<Label color="green" size="huge">
Elfogadva
</Label>
) : null}
{role === 'Staff' ? (
<Label color="blue" size="huge">
Staff
</Label>
) : null}
{role === 'Applicant' ? (
<Label color="orange" size="huge">
Jelentkezett
</Label>
) : null}
{role === 'Denied' ? (
<Label color="red" size="huge">
Elutasítva
</Label>
) : null}
</div>
:
<Label color='red' size='huge'>Nem jelentkezett</Label>
}
) : (
<Label color="red" size="huge">
Nem jelentkezett
</Label>
)}
</Container>
</Item.Description>
</Item.Content>
</Item>
{ signed && role !== 'Staff' ?
<Container textAlign='center'>
<ConfirmModal
button={
<Button
color='green'
>Jelentkezés elfogadása
</Button>}
text='elfogadod a jelentkezést'
{signed && role !== 'Staff' ? (
<Container textAlign="center">
<ConfirmModal
button={<Button color="green">Jelentkezés elfogadása</Button>}
text="elfogadod a jelentkezést"
onAccept={() => this.props.setStatus(id, 'Student')}
/>
<ConfirmModal
button={
<Button
color='red'
>Jelentkezés elutasítása
</Button>}
text='elutasítod a jelentkezést'
<ConfirmModal
button={<Button color="red">Jelentkezés elutasítása</Button>}
text="elutasítod a jelentkezést"
onAccept={() => this.props.setStatus(id, 'Denied')}
/>
</Container>
:
null
}
) : null}
</Container>
);
}
}
const mapStateToProps = ({ trainees: { selectedProfile } }) => ({ selectedProfile });
const mapStateToProps = ({ trainees: { selectedProfile } }) => ({
selectedProfile,
});
export default connect(mapStateToProps, { getSelectedProfile, setStatus })(ApplicantProfile);
export default connect(mapStateToProps, { getSelectedProfile, setStatus })(
ApplicantProfile
);
src/components/pages/Applications.js
View file @ 2eef83d2
import { Button, Container, Label, Table } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Container, Table, Label, Button } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getProfiles, setStatus } from '../../actions/statistics';
import ConfirmModal from '../forms/ConfirmModal';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
const role = [
{
role: 'Staff',
text: 'Staff',
color: 'blue',
},
{
role: 'Student',
text: 'Elfogadott',
color: 'green',
},
{
role: 'Applicant',
text: 'Jelentkezett',
color: 'orange',
},
{
role: 'Denied',
text: 'Elutasított',
color: 'red',
},
{
role: 'no',
text: 'Nem jelentkezett',
color: 'red',
},
];
class Applications extends Component {
UNSAFE_componentWillMount() {
this.props.getProfiles();
}
renderApplicants() {
renderApplicants(format) {
return this.props.profiles.map((profile) =>
{ return (
<Table.Row>
<Table.Cell textAlign='center'>
<Link to={`applicant/${profile.id}`}>
{profile.full_name}
</Link>
</Table.Cell>
{ profile.signed ?
<Table.Cell textAlign='center'>
{ profile.role === 'Student' ?
<Label color='green'>Elfogadva</Label>
:
null
}
{ profile.role === 'Staff' ?
<Label color='blue'>Staff</Label>
:
null
}
{ profile.role === 'Applicant' ?
<Label color='orange'>Jelentkezett</Label>
:
null
}
{ profile.role === 'Denied' ?
<Label color='red'>Elutasítva</Label>
:
null
}
profile.role === format.role &&
(profile.signed === true || profile.role === 'Staff') ? (
<Table.Row key={profile.id}>
<Table.Cell textAlign="center">
<Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
</Table.Cell>
:
<Table.Cell textAlign='center'>
<Label color='red'>Nem jelentkezett</Label>
{format.role === 'Staff' ? null : (
<Table.Cell textAlign="center">
<ConfirmModal
button={
<Button color="blue" size="tiny">
ADD STAFF STATUS
</Button>
}
text="staff jogot adsz neki"
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell>
)}
</Table.Row>
) : null
);
}
renderNotApplicants(format) {
return this.props.profiles.map((profile) =>
profile.signed === false && profile.role !== 'Staff' ? (
<Table.Row key={profile.id}>
<Table.Cell textAlign="center">
<Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
</Table.Cell>
}
<Table.Cell textAlign='center'>
<ConfirmModal
button = {<Button
color='blue'
size='tiny'
>
ADD STAFF STATUS
</Button>}
text='staff jogot adsz neki'
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell>
</Table.Row>
{format.role === 'Staff' ? null : (
<Table.Cell textAlign="center">
<ConfirmModal
button={
<Button color="blue" size="tiny">
ADD STAFF STATUS
</Button>
}
text="staff jogot adsz neki"
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell>
)}
</Table.Row>
) : null
);
}
renderTable(format) {
return (
<Table color="blue" unstackable celled selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign="center">
<Label color={format.color}>{format.text}</Label>
</Table.HeaderCell>
{format.role !== 'Staff' ? (
<Table.HeaderCell width={3} textAlign="center">
<Label color={null}>
{format.role === 'no'
? this.props.profiles.filter(
(profile) =>
profile.signed === false && profile.role !== 'Staff'
).length
: this.props.profiles.filter(
(profile) =>
profile.role === format.role &&
(profile.signed === true || profile.role === 'Staff')
).length}{' '}
fő
</Label>
</Table.HeaderCell>
) : null}
</Table.Row>
</Table.Header>
<Table.Body>
{format.role === 'no'
? this.renderNotApplicants(format)
: this.renderApplicants(format)}
</Table.Body>
</Table>
);
});
}
render() {
return (
<Container
textAlign='center' style={{paddingTop: '1em', paddingBottom: '3em'}}
textAlign="center"
style={{ paddingTop: '1em', paddingBottom: '5em' }}
>
<Table color='blue' unstackable celled selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Jelentkezettek</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>Jelentkezés státusza:</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{this.renderApplicants()}
</Table.Body>
</Table>
{this.renderTable(role[2])} {/* Applicant */}
{this.renderTable(role[1])} {/* Student */}
{this.renderTable(role[0])} {/* Staff */}
{this.renderTable(role[3])} {/* Denied */}
{this.renderTable(role[4])} {/* Not Signed */}
</Container>
);
}
}
const mapStateToProps = ({ trainees: { profiles }, user }) => ({ profiles, user });
const mapStateToProps = ({ trainees: { profiles }, user }) => ({
profiles,
user,
});
export default connect(mapStateToProps, { getProfiles, setStatus })(Applications);
export default connect(mapStateToProps, { getProfiles, setStatus })(
Applications
);

Hosted with :heart: by KSZK