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 1817 additions and 918 deletions
import { Button, Container, Label, Table } from 'semantic-ui-react';
import React, { Component } from '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 { getProfiles, setStatus } from '../../actions/statistics';
import ConfirmModal from '../forms/ConfirmModal'; 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 { class Applications extends Component {
componentWillMount() { UNSAFE_componentWillMount() {
this.props.getProfiles(); this.props.getProfiles();
} }
renderApplicants() { renderApplicants(format) {
return this.props.profiles.map((profile) => return this.props.profiles.map((profile) =>
{ return ( profile.role === format.role &&
<Table.Row> (profile.signed === true || profile.role === 'Staff') ? (
<Table.Cell> <Table.Row key={profile.id}>
<Link to={`applicant/${profile.id}`}> <Table.Cell textAlign="center">
{profile.full_name} <Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
</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
}
</Table.Cell> </Table.Cell>
: {format.role === 'Staff' ? null : (
<Table.Cell textAlign='center'> <Table.Cell textAlign="center">
<Label color='red'>Nem jelentkezett</Label> <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>
} {format.role === 'Staff' ? null : (
<Table.Cell> <Table.Cell textAlign="center">
<ConfirmModal <ConfirmModal
button = {<Button button={
color='blue' <Button color="blue" size="tiny">
size='tiny' ADD STAFF STATUS
> </Button>
ADD STAFF STATUS }
</Button>} text="staff jogot adsz neki"
text='staff jogot adsz neki' onAccept={() => this.props.setStatus(profile.id, 'Staff')}
onAccept={() => this.props.setStatus(profile.id, 'Staff')} />
/> </Table.Cell>
</Table.Cell> )}
</Table.Row> </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}{' '}
</Label>
</Table.HeaderCell>
) : null}
</Table.Row>
</Table.Header>
<Table.Body>
{format.role === 'no'
? this.renderNotApplicants(format)
: this.renderApplicants(format)}
</Table.Body>
</Table>
); );
});
} }
render() { render() {
return ( return (
<Container <Container
textAlign='center' textAlign="center"
style={{ style={{ paddingTop: '1em', paddingBottom: '5em' }}
padding: '80px'
}}
> >
<Table color='blue' celled selectable compact> {this.renderTable(role[2])} {/* Applicant */}
<Table.Header> {this.renderTable(role[1])} {/* Student */}
<Table.Row> {this.renderTable(role[0])} {/* Staff */}
<Table.HeaderCell>Jelentkezettek</Table.HeaderCell> {this.renderTable(role[3])} {/* Denied */}
<Table.HeaderCell textAlign='center'>Jelentkezés státusza:</Table.HeaderCell> {this.renderTable(role[4])} {/* Not Signed */}
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{this.renderApplicants()}
</Table.Body>
</Table>
</Container> </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
);
import React, { Component } from 'react';
import { import {
Container,
Item,
Button, Button,
Comment, Comment,
Container,
Divider,
Form, Form,
Header, Header,
Item,
Segment,
Table, Table,
Icon, } from "semantic-ui-react";
Checkbox, import React, { Component } from "react";
Popup, import {
Grid, clearWrite,
} from 'semantic-ui-react'; getNotesByEvent,
import { connect } from 'react-redux'; postEventNote,
import moment from 'moment'; writeNote,
import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics'; } from "../../actions/notes";
import { getNotesByEvent, writeNote, clearWrite, postEventNote } from '../../actions/notes'; import {
import TraineeTableRow from './TraineeTableRow'; getEventById,
getTrainees,
submitVisitors,
visitorChange,
} from "../../actions/statistics";
import TraineeTableRow from "./EventDetailTableRow";
import { connect } from "react-redux";
import moment from "moment";
class EventDetail extends Component { class EventDetail extends Component {
constructor(props) { constructor(props) {
...@@ -27,40 +35,59 @@ class EventDetail extends Component { ...@@ -27,40 +35,59 @@ class EventDetail extends Component {
}; };
} }
componentWillMount() { UNSAFE_componentWillMount() {
this.props.getEventById(this.props.match.params.id); this.props.getEventById(this.props.match.params.id);
this.props.getTrainees(); this.props.getTrainees();
this.props.getNotesByEvent(this.props.match.params.id); this.props.getNotesByEvent(this.props.match.params.id);
} }
renderTrainees() { renderTrainees() {
const event = this.props.selectedEvent; const event = this.props.selectedEvent;
const note = this.props.actualNote; return this.props.trainees
return this.props.trainees.map((item) => { ?.sort(function (a, b) {
const notes = this.props.eventNotes.filter(note => note.profile === item.id); var nameA = a.full_name.toLowerCase(),
return ( nameB = b.full_name.toLowerCase();
<TraineeTableRow if (nameA < nameB)
selectedEvent={event} //sort string ascending
notes={notes} return -1;
trainee={item} if (nameA > nameB) return 1;
edit={this.state.edit} return 0; //default return value (no sorting)
/> })
); .map((item) => {
}); const notes = this.props.eventNotes?.filter(
(note) => note.profile === item.id
);
return item.role === "Student" ? (
<TraineeTableRow
selectedEvent={event}
notes={notes}
trainee={item}
edit={this.state.edit}
key={item.id}
/>
) : null;
});
} }
renderEvent() { renderEvent() {
const { name, date, description } = this.props.selectedEvent; const { name, date, description } = this.props.selectedEvent;
return ( return (
<Item> <Segment>
<Item.Header as='h2'>{name}</Item.Header> <Item>
<Item.Header as='h3'>Dátum: {moment(date).format('LL')}</Item.Header> <Divider style={{ fontSize: "2em" }} horizontal>
<Container textAlign='justified'> <Header as="h1">
<Item.Header as='h3'>Leírás</Item.Header> {name}
<Item.Content>{description}</Item.Content> <Item.Header style={{ fontSize: "0.6em" }}>
</Container> {moment(date).format("LL")}
</Item> </Item.Header>
</Header>
</Divider>
<Container textAlign="justified">
<Item.Header as="h3">Leírás</Item.Header>
<Item.Content>{description}</Item.Content>
</Container>
</Item>
</Segment>
); );
} }
...@@ -69,19 +96,20 @@ class EventDetail extends Component { ...@@ -69,19 +96,20 @@ class EventDetail extends Component {
return notes.map((note) => { return notes.map((note) => {
if (!note.profile) { if (!note.profile) {
return ( return (
<Comment> <Segment>
<Comment.Content> <Comment key={Math.random()}>
<Comment.Author>{note.created_by_name}</Comment.Author> <Comment.Content>
<Comment.Metadata> <Comment.Author>{note.created_by_name}</Comment.Author>
{moment(note.created_at).format('LL')} <Comment.Metadata>
</Comment.Metadata> {moment(note.created_at).format("LL")}
<Comment.Text> </Comment.Metadata>
{note.note} <Comment.Text>{note.note}</Comment.Text>
</Comment.Text> </Comment.Content>
</Comment.Content> </Comment>
</Comment>); </Segment>
);
} }
return ''; return "";
}); });
} }
...@@ -89,79 +117,61 @@ class EventDetail extends Component { ...@@ -89,79 +117,61 @@ class EventDetail extends Component {
const event = this.props.selectedEvent; const event = this.props.selectedEvent;
const note = this.props.actualNote; const note = this.props.actualNote;
return ( return (
<Container <Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
style={{ <Container textAlign="center">
padding: '80px' {this.props.selectedEvent && this.props.trainees
}} ? this.renderEvent()
> : ""}
<Container textAlign='center'>
{ this.props.selectedEvent && this.props.trainees ?
this.renderEvent()
:
''
}
</Container> </Container>
<Table celled centered> {!this.state.edit ? (
<Table.Header> <Button onClick={() => this.setState({ edit: true })}>
<Table.Row> Módosítás
<Table.HeaderCell>Név</Table.HeaderCell> </Button>
<Table.HeaderCell>Jelen volt</Table.HeaderCell> ) : (
<Table.HeaderCell>Megjegyzések</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{ this.props.selectedEvent ?
this.renderTrainees()
:
''
}
</Table.Body>
</Table>
<Button <Button
onClick={() => this.setState({ edit: true })} onClick={() => {
this.setState({ edit: false });
}}
> >
Edit {" "}
Kész
</Button> </Button>
{ this.state.edit ? )}
<Table celled unstackable>
<Table.Header>
<Table.Row textAlign="center">
<Table.HeaderCell>Név</Table.HeaderCell>
<Table.HeaderCell>Jelen volt</Table.HeaderCell>
<Table.HeaderCell>Megjegyzések</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.selectedEvent ? this.renderTrainees() : null}
</Table.Body>
</Table>
<Comment.Group>
<Header dividing>Megjegyzések</Header>
{this.props.eventNotes ? this.renderComments() : ""}
<Form reply>
<Form.TextArea
value={note.note}
onChange={(e) => this.props.writeNote(e)}
/>
<Button <Button
onClick={() => { onClick={() => {
this.setState({ edit: false }); this.props.postEventNote({
this.props.submitVisitors(this.props.selectedEvent); eventid: event.id,
} note: note.note,
} });
>Save this.props.clearWrite();
</Button> }}
: content="Megjegyzés hozzáadása"
'' labelPosition="left"
} icon="edit"
<Comment.Group> primary
<Header dividing> />
Megjegyzések </Form>
</Header> </Comment.Group>
{this.props.eventNotes ?
this.renderComments()
:
''
}
<Form reply>
<Form.TextArea
value={note.note}
onChange={e => this.props.writeNote(e)}
/>
<Button
onClick={() => {
this.props.postEventNote({ eventid: event.id,
note: note.note });
this.props.clearWrite();
}
}
content='Megjegyzés hozzáadása'
labelPosition='left'
icon='edit'
primary
/>
</Form>
</Comment.Group>
</Container> </Container>
); );
} }
...@@ -170,8 +180,13 @@ class EventDetail extends Component { ...@@ -170,8 +180,13 @@ class EventDetail extends Component {
const mapStateToProps = ({ const mapStateToProps = ({
notes: { eventNotes, actualNote }, notes: { eventNotes, actualNote },
events: { selectedEvent }, events: { selectedEvent },
trainees: { trainees } trainees: { trainees },
}) => ({ eventNotes, selectedEvent, trainees, actualNote }); }) => ({
eventNotes,
selectedEvent,
trainees,
actualNote,
});
export default connect(mapStateToProps, { export default connect(mapStateToProps, {
getEventById, getEventById,
......
import { Button, Container, Table } from 'semantic-ui-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import moment from 'moment'; import { deleteEvent, getStaffEvents } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Container, Table, Button } from 'semantic-ui-react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getStaffEvents, deleteEvent } from '../../actions/statistics'; import moment from 'moment';
import AddEventForm from '../forms/AddEventForm';
class Events extends Component { class Events extends Component {
componentWillMount() { UNSAFE_componentWillMount() {
this.props.getStaffEvents(); this.props.getStaffEvents();
} }
renderEvents() { renderEvents() {
return this.props.events.map((event) => return this.props.events.map((event) => (
{ return ( <Table.Row key={event.id}>
<Table.Row> <Table.Cell textAlign="center">
<Table.Cell> <Link to={`events/${event.id}`}>{event.name}</Link>
<Link to={`events/${event.id}`}>
{event.name}
</Link>
</Table.Cell> </Table.Cell>
<Table.Cell>{moment(event.date).format('LL')}</Table.Cell> <Table.Cell textAlign="center">
<Table.Cell>{event.visitor_number}</Table.Cell> {moment(event.date).format('LL')}
<Table.Cell> </Table.Cell>
<Table.Cell textAlign="center">{event.visitor_number}</Table.Cell>
<Table.Cell textAlign="center">
<Button <Button
onClick={() => this.props.deleteEvent(event)} onClick={() => this.props.deleteEvent(event)}
color='red' color="red"
compact compact
size='small' size="small"
> >
Delete Törlés
</Button> </Button>
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
); ));
});
} }
render() { render() {
return ( return (
<Container textAlign='center'> <Container textAlign="center">
<Table color='blue' celled selectable compact> <div style={{ overflowX: 'scroll' }}>
<Table.Header> <Table
<Table.Row> color="blue"
<Table.HeaderCell>Alkalom neve</Table.HeaderCell> unstackable
<Table.HeaderCell>Dátum</Table.HeaderCell> celled
<Table.HeaderCell>Jelen voltak</Table.HeaderCell> selectable
<Table.HeaderCell /> compact
</Table.Row> size="small"
</Table.Header> >
<Table.Header>
<Table.Body> <Table.Row>
{this.props.events ? this.renderEvents() : 'Nincs még alaklom beírva'} <Table.HeaderCell textAlign="center">
</Table.Body> Alkalom neve
</Table> </Table.HeaderCell>
<Table.HeaderCell textAlign="center">Dátum</Table.HeaderCell>
<Table.HeaderCell textAlign="center">
Jelen voltak
</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.events
? this.renderEvents()
: 'Nincs még alkalom beírva'}
</Table.Body>
</Table>
</div>
<br />
<AddEventForm /> <AddEventForm />
</Container> </Container>
); );
...@@ -62,4 +76,6 @@ class Events extends Component { ...@@ -62,4 +76,6 @@ class Events extends Component {
const mapStateToProps = ({ events: { events }, user }) => ({ events, user }); const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(Events); export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
Events
);
This diff is collapsed.
...@@ -5,8 +5,33 @@ ...@@ -5,8 +5,33 @@
.car-text-kszk { .car-text-kszk {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 0px; top: 1vw;
text-shadow: black 0px 0px 10px, black 0px 0px 6px;
-webkit-text-fill-color: white; -webkit-text-fill-color: white;
-webkit-text-stroke-color: black; }
-webkit-text-stroke-width: 0.75px;
.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 { .news-extra {
color: grey; color: grey;
font-size: 0.75em; font-size: 0.75em;
font-style: italic; font-style: italic;
font-family: fantasy; font-family: fantasy;
text-align: justify; text-align: justify;
} }
.news-text { .news-text {
font-size: 1.15em; font-size: 1.15em;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
text-align: justify; text-align: justify;
} }
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.