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
Showing
with 1644 additions and 1105 deletions
import { Button, Header, Icon, Modal } from 'semantic-ui-react';
import React, { Component } from 'react';
class InfoModal extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
};
}
close = () => this.setState({ showModal: false });
open = () => this.setState({ showModal: true });
render() {
const { button, title, content } = this.props;
const open = this.state.showModal;
return (
<Modal
open={open}
closeOnDimmerClick
trigger={button}
onOpen={this.open}
onClose={this.close}
size="small"
basic
>
<Header icon="info" content={title} />
<Modal.Content>
{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>
</Modal.Actions>
</Modal>
);
}
}
export default InfoModal;
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 { emptyMessage } from '../pages/Homework';
import './Forms.css';
import { connect } from 'react-redux';
import { customMessage } from '../pages/Homework';
class SolutionDetailsForm extends Component {
constructor(props) {
......@@ -14,97 +17,143 @@ 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 = [];
const noAcceptStudents = [];
const acceptedStudents = [];
for (let i = 0; i < this.props.homeworks.profiles.length; i += 1) {
const profileSolutions = taskSolutions.filter(solution =>
solution.created_by === this.props.homeworks.profiles[i].id);
this.props.homeworks.profiles.forEach((profile) => {
const profileSolutions = taskSolutions.filter(
(solution) => solution.created_by === profile.id
);
if (this.props.homeworks.profiles[i].role === 'Student') {
if (profile.role === 'Student') {
if (profileSolutions.length === 0) {
noSubmitStudents.push(this.props.homeworks.profiles[i]);
} else if (taskSolutions[taskSolutions.length - 1].corrected === false) {
waitForCorrectionStudents.push(this.props.homeworks.profiles[i]);
} else if (taskSolutions[taskSolutions.length - 1].accepted === false) {
noAcceptStudents.push(this.props.homeworks.profiles[i]);
noSubmitStudents.push(profile);
} else if (
profileSolutions[profileSolutions.length - 1].corrected === false
) {
waitForCorrectionStudents.push(profile);
} else if (
profileSolutions[profileSolutions.length - 1].accepted === false
) {
noAcceptStudents.push(profile);
} else {
acceptedStudents.push(this.props.homeworks.profiles[i]);
acceptedStudents.push(profile);
}
}
}
});
const emptyStudentText = 'Nincs ilyen képződő jelenleg.';
const noStudentText = 'Nincs ilyen képződő jelenleg.';
return (
<Modal
open={this.state.showModal}
closeOnDimmerClick
onClose={() => this.setState({ showModal: false })}
trigger={
<button id='task' onClick={() => { this.setState({ showModal: true }); }}>
<Icon name='external' />
<button
type="button"
id="task"
onClick={() => {
this.setState({ showModal: true });
this.props.getSolutions();
this.props.getDocuments();
}}
>
<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>{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 ?
emptyMessage(emptyStudentText) :
noSubmitStudents.map(student => (
<Button 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 ?
emptyMessage(emptyStudentText) :
waitForCorrectionStudents.map(student => (
<CorrectSolutionForm
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ó:</Header>
{noAcceptStudents.length === 0 ?
emptyMessage(emptyStudentText) :
noAcceptStudents.map(student => (
<Button color='red' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
))
}
<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:</Header>
{acceptedStudents.length === 0 ?
emptyMessage(emptyStudentText) :
acceptedStudents.map(student => (
<Button color='green' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
))
}
<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>
......@@ -115,4 +164,6 @@ class SolutionDetailsForm extends Component {
const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
export default connect(mapStateToProps, {
getSolutions,
getDocuments,
})(SolutionDetailsForm);
src/components/images/kszk_with_shadow.png

251 KiB

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
Menu,
Container,
Button,
Segment,
Visibility,
Responsive,
} from 'semantic-ui-react';
const FixedMenu = ({ user, menuItems }) => (
<Menu fixed='top' size='large' pointing>
<Container>
{menuItems.map((item, i) =>
(user.permission >= item.permissionLevel ||
(item.permissionLevel === 0)
?
<Menu.Item key={i} as={Link} to={item.to}>{item.text}</Menu.Item>
:
null))}
<Menu.Menu position='right'>
<Menu.Item className='item'>
{
user.id ?
<Button.Group>
<Button primary as={Link} to='/profile'>Profilom</Button>
<Button as='a' href='/api/v1/logout/'icon='sign out' />
</Button.Group>
:
<Button as='a' href='/api/v1/login/authsch/' >Bejelentkezés</Button>
}
</Menu.Item>
</Menu.Menu>
</Container>
</Menu>
);
class DesktopContainer extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
};
}
componentWillMount() {
this.props.getUserData();
}
hideFixedMenu() {
this.setState({ visible: false });
}
showFixedMenu() {
this.setState({ visible: true });
}
render() {
const { visible } = this.state;
const { children, user, menuItems } = this.props;
return (
<Responsive minWidth={768}>
{visible ? <FixedMenu user={this.props.user} menuItems={menuItems} /> : null}
<Visibility
onBottomPassed={() => this.showFixedMenu()}
onBottomVisible={() => this.hideFixedMenu()}
once={false}
>
<Segment inverted textAlign='center' vertical>
<Container>
<Menu inverted secondary stackable size='large'>
{menuItems.map((item, i) =>
(this.props.user.permission >= item.permissionLevel ||
(item.permissionLevel === 0) ?
<Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
:
null))}
<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.Group>
:
<Button as='a' href='/api/v1/login/authsch/' inverted>Bejelentkezés</Button>
}
</Menu.Item>
</Menu>
</Container>
</Segment>
</Visibility>
{children}
</Responsive>
);
}
}
export default DesktopContainer;
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
Menu,
Container,
Button,
Segment,
Image,
Responsive,
Sidebar,
Icon,
} from 'semantic-ui-react';
import KSZKlogo from '../images/kszk_logo.svg';
class MobileContainer extends Component {
constructor(props) {
super(props);
this.state = {
sidebarVisible: false,
};
}
componentWillMount() {
this.props.getUserData();
}
render() {
const visible = this.state.sidebarVisible;
const { children, user, menuItems } = this.props;
return(
<Responsive maxWidth={767}>
<Segment inverted textAlign='center' vertical>
<Container>
<Menu inverted secondary>
<Menu.Item onClick={visible ? this.handleHideClick : this.handleShowClick}><Icon name='sidebar'/></Menu.Item>
<Image size='mini' src={KSZKlogo} style={{ marginRight: '1.5em' }} />
<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.Group>
:
<Button as='a' href='/api/v1/login/authsch/' inverted>Bejelentkezés</Button>
}
</Menu.Item>
</Menu>
</Container>
</Segment>
<Sidebar.Pushable>
<Sidebar
as={Menu}
animation='overlay'
icon='labeled'
inverted
vertical
visible={visible}
width='thin'
>
{menuItems.map((item, i) =>
(this.props.user.permission >= item.permissionLevel ||
(item.permissionLevel === 0) ?
<Menu.Item key={i} as={Link} to={item.to} onClick={this.handleSidebarHide}>{item.text}</Menu.Item>
:
null))}
</Sidebar>
<Sidebar.Pusher onClick={this.handleSidebarHide}>
{children}
</Sidebar.Pusher>
</Sidebar.Pushable>
</Responsive>);
}
handleShowClick = () => this.setState({ sidebarVisible: true })
handleHideClick = () => this.setState({ sidebarVisible: false })
handleSidebarHide = () => this.setState({ sidebarVisible: false })
}
export default MobileContainer;
import { Button, Container, Header, Item, Label } from 'semantic-ui-react';
import React, { Component } from 'react';
import {
Container,
Header,
Item,
Button,
Label,
List,
Form,
Comment,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getSelectedProfile, setStatus } from '../../actions/statistics';
import { getNotesByProfile, writeNote, clearWrite, postNote, deleteNote } from '../../actions/notes';
import ConfirmModal from '../forms/ConfirmModal';
import moment from 'moment';
import ConfirmModal from '../forms/ConfirmModal';
import { connect } from 'react-redux';
const options = [
{ key: 'DT', text: 'DevTeam' },
{ key: 'NET', text: 'NETeam' },
{ key: 'ST', text: 'SecurITeam' },
{ key: 'SYS', text: 'SysAdmin' },
{ key: 'HAT', text: 'Hallgatói Tudásbázis' },
];
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 {
componentWillMount() {
UNSAFE_componentWillMount() {
this.props.getSelectedProfile(this.props.match.params.id);
this.props.getNotesByProfile(this.props.match.params.id);
}
renderGroups() {
const { groups } = this.props.selectedProfile;
const groupNames = options.map(item => (groups.includes(item.key) ? item.text : null));
return groupNames.map(item => (
<List.Item>
<List.Content>
<List.Header>{item}</List.Header>
</List.Content>
</List.Item>
));
}
renderComments() {
const notes = this.props.profileNotes;
return notes.map((note) => {
if (!note.event) {
return (
<Comment>
<Comment.Content>
<Comment.Author>{note.created_by_name}</Comment.Author>
<Comment.Metadata>
{moment(note.created_at).format('LL')}
</Comment.Metadata>
<Comment.Text>
{note.note}
</Comment.Text>
</Comment.Content>
{ this.props.user.fullName === note.created_by_name ?
<ConfirmModal
text='törölni akarod a megjegyzést'
button={
<Button
compact
color='red'
size='mini'
>
Delete
</Button>
}
onAccept={() => this.props.deleteNote(note)}
/>
:
null }
</Comment>);
}
return '';
});
}
render() {
const note = this.props.actualNote;
const { id, signed, groups, 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={{ padding: '60px' }}>
<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: '30px' }}>
<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>
<Header as='h3'>Érdeklődés:</Header>
{ groups ?
<List horizontal>
{this.renderGroups()}
</List>
:
null
}
<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: '20px' }}>
<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>
<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'
onAccept={() => this.props.setStatus(id, 'Denied')}
/>
</Container>
<Comment.Group>
<Header dividing>
Megjegyzések
</Header>
{this.renderComments()}
<Form reply>
<Form.TextArea
value={note.note}
onChange={e => this.props.writeNote(e)}
/>
<Button
onClick={() => {
this.props.postNote({ userid: id,
note: note.note });
this.props.clearWrite();
}
}
content='Megjegyzés hozzáadása'
labelPosition='left'
icon='edit'
primary
/>
</Form>
</Comment.Group>
{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"
onAccept={() => this.props.setStatus(id, 'Denied')}
/>
</Container>
:
null
}
) : null}
</Container>
);
}
}
const mapStateToProps = ({
user,
trainees: { selectedProfile },
notes: { profileNotes, actualNote }
}) => ({ user, selectedProfile, profileNotes, actualNote });
const mapStateToProps = ({ trainees: { selectedProfile } }) => ({
selectedProfile,
});
export default connect(mapStateToProps, {
getSelectedProfile,
setStatus,
postNote,
getNotesByProfile,
writeNote,
deleteNote,
clearWrite,
})(ApplicantProfile);
export default connect(mapStateToProps, { getSelectedProfile, setStatus })(
ApplicantProfile
);
This diff is collapsed.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Comment, Modal } from 'semantic-ui-react';
import { deleteNote } from '../../actions/notes';
import ConfirmModal from '../forms/ConfirmModal';
class CommentModal extends Component {
renderComments() {
const { notes, user } = this.props;
return notes.map((note) => {
return (
<Comment style={{ padding: '1em' }} stylekey={note.id}>
<Comment.Content>
<Comment.Author><strong>{note.created_by_name}</strong></Comment.Author>
<Comment.Text>
{note.note}
</Comment.Text>
{ note.created_by_name === user.fullName ?
<ConfirmModal
text='törölni akarod a megjegyzést'
button={
<Button
compact
color='red'
size='mini'
>
Delete
</Button>
}
onAccept={() => this.props.deleteNote(note)}
/>
:
null }
</Comment.Content>
</Comment>
);
});
}
render() {
return (
<Modal
closeIcon
trigger={
<Button icon='comment alternate outline' />
}
>
<Modal.Header>Megjegyzések:</Modal.Header>
<Modal.Content>
{this.renderComments()}
</Modal.Content>
</Modal>
);
}
}
const mapStateToProps = ({ user }) => ({ user });
export default connect(mapStateToProps, { deleteNote })(CommentModal);
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -5,9 +5,33 @@
.car-text-kszk {
position: absolute;
width: 100%;
top: 0px;
top: 1vw;
text-shadow: black 0px 0px 10px, black 0px 0px 6px;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
/*-webkit-text-stroke-width: 0.1vw;*/
text-shadow: 2px 2px 2px black;
}
.quote {
position: relative;
margin-bottom: 0.5rem;
}
.quote:before {
content: '“';
position: absolute;
left: -0.45em;
}
.quote::after {
content: '”';
margin-right: -1rem;
}
.quote--container {
margin: 2rem auto 0;
padding-bottom: 0.7rem;
}
.quote--author {
text-align: right;
font-weight: 300;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
.news-extra {
color: grey;
font-size: 0.75em;
font-style: italic;
font-family: fantasy;
text-align: justify;
color: grey;
font-size: 0.75em;
font-style: italic;
font-family: fantasy;
text-align: justify;
}
.news-text {
font-size: 1.15em;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
font-size: 1.15em;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}
This diff is collapsed.
This diff is collapsed.