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
Select Git revision

Target

Select target project
  • kszk/devteam/kszkepzes/old/kszkepzes-frontend
  • kbgergely/kszkepzes-frontend
2 results
Select Git revision
Show changes
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1786 additions and 927 deletions
src/components/pages/Applications.js
View file @ 2eef83d2
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> </Table.Cell>
{ profile.signed ? {format.role === 'Staff' ? null : (
<Table.Cell textAlign='center'> <Table.Cell textAlign="center">
{ profile.role === 'Student' ? <ConfirmModal
<Label color='green'>Elfogadva</Label> button={
: <Button color="blue" size="tiny">
null ADD STAFF STATUS
} </Button>
{ 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
} }
text="staff jogot adsz neki"
onAccept={() => this.props.setStatus(profile.id, 'Staff')}
/>
</Table.Cell> </Table.Cell>
: )}
<Table.Cell textAlign='center'> </Table.Row>
<Label color='red'>Nem jelentkezett</Label> ) : null
</Table.Cell> );
} }
<Table.Cell>
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>
{format.role === 'Staff' ? null : (
<Table.Cell textAlign="center">
<ConfirmModal <ConfirmModal
button = {<Button button={
color='blue' <Button color="blue" size="tiny">
size='tiny'
>
ADD STAFF STATUS ADD STAFF STATUS
</Button>} </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
); );
});
} }
render() { renderTable(format) {
return ( return (
<Container <Table color="blue" unstackable celled selectable compact>
textAlign='center'
style={{
padding: '80px'
}}
>
<Table color='blue' celled selectable compact>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell>Jelentkezettek</Table.HeaderCell> <Table.HeaderCell textAlign="center">
<Table.HeaderCell textAlign='center'>Jelentkezés státusza:</Table.HeaderCell> <Label color={format.color}>{format.text}</Label>
<Table.HeaderCell /> </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.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{this.renderApplicants()} {format.role === 'no'
? this.renderNotApplicants(format)
: this.renderApplicants(format)}
</Table.Body> </Table.Body>
</Table> </Table>
);
}
render() {
return (
<Container
textAlign="center"
style={{ paddingTop: '1em', paddingBottom: '5em' }}
>
{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> </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
);
src/components/pages/EventDetail.js
View file @ 2eef83d2
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();
if (nameA < nameB)
//sort string ascending
return -1;
if (nameA > nameB) return 1;
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 <TraineeTableRow
selectedEvent={event} selectedEvent={event}
notes={notes} notes={notes}
trainee={item} trainee={item}
edit={this.state.edit} 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 (
<Segment>
<Item> <Item>
<Item.Header as='h2'>{name}</Item.Header> <Divider style={{ fontSize: "2em" }} horizontal>
<Item.Header as='h3'>Dátum: {moment(date).format('LL')}</Item.Header> <Header as="h1">
<Container textAlign='justified'> {name}
<Item.Header as='h3'>Leírás</Item.Header> <Item.Header style={{ fontSize: "0.6em" }}>
{moment(date).format("LL")}
</Item.Header>
</Header>
</Divider>
<Container textAlign="justified">
<Item.Header as="h3">Leírás</Item.Header>
<Item.Content>{description}</Item.Content> <Item.Content>{description}</Item.Content>
</Container> </Container>
</Item> </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 key={Math.random()}>
<Comment.Content> <Comment.Content>
<Comment.Author>{note.created_by_name}</Comment.Author> <Comment.Author>{note.created_by_name}</Comment.Author>
<Comment.Metadata> <Comment.Metadata>
{moment(note.created_at).format('LL')} {moment(note.created_at).format("LL")}
</Comment.Metadata> </Comment.Metadata>
<Comment.Text> <Comment.Text>{note.note}</Comment.Text>
{note.note}
</Comment.Text>
</Comment.Content> </Comment.Content>
</Comment>); </Comment>
</Segment>
);
} }
return ''; return "";
}); });
} }
...@@ -89,75 +117,57 @@ class EventDetail extends Component { ...@@ -89,75 +117,57 @@ 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>
{!this.state.edit ? (
<Button onClick={() => this.setState({ edit: true })}>
Módosítás
</Button>
) : (
<Button
onClick={() => {
this.setState({ edit: false });
}} }}
> >
<Container textAlign='center'> {" "}
{ this.props.selectedEvent && this.props.trainees ? Kész
this.renderEvent() </Button>
: )}
'' <Table celled unstackable>
}
</Container>
<Table celled centered>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row textAlign="center">
<Table.HeaderCell>Név</Table.HeaderCell> <Table.HeaderCell>Név</Table.HeaderCell>
<Table.HeaderCell>Jelen volt</Table.HeaderCell> <Table.HeaderCell>Jelen volt</Table.HeaderCell>
<Table.HeaderCell>Megjegyzések</Table.HeaderCell> <Table.HeaderCell>Megjegyzések</Table.HeaderCell>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{ this.props.selectedEvent ? {this.props.selectedEvent ? this.renderTrainees() : null}
this.renderTrainees()
:
''
}
</Table.Body> </Table.Body>
</Table> </Table>
<Button
onClick={() => this.setState({ edit: true })}
>
Edit
</Button>
{ this.state.edit ?
<Button
onClick={() => {
this.setState({ edit: false });
this.props.submitVisitors(this.props.selectedEvent);
}
}
>Save
</Button>
:
''
}
<Comment.Group> <Comment.Group>
<Header dividing> <Header dividing>Megjegyzések</Header>
Megjegyzések {this.props.eventNotes ? this.renderComments() : ""}
</Header>
{this.props.eventNotes ?
this.renderComments()
:
''
}
<Form reply> <Form reply>
<Form.TextArea <Form.TextArea
value={note.note} value={note.note}
onChange={e => this.props.writeNote(e)} onChange={(e) => this.props.writeNote(e)}
/> />
<Button <Button
onClick={() => { onClick={() => {
this.props.postEventNote({ eventid: event.id, this.props.postEventNote({
note: note.note }); eventid: event.id,
note: note.note,
});
this.props.clearWrite(); this.props.clearWrite();
} }}
} content="Megjegyzés hozzáadása"
content='Megjegyzés hozzáadása' labelPosition="left"
labelPosition='left' icon="edit"
icon='edit'
primary primary
/> />
</Form> </Form>
...@@ -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,
......
src/components/pages/TraineeTableRow.js → src/components/pages/EventDetailTableRow.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { import {
Button,
Comment, Comment,
Table, Dropdown,
Form,
Grid,
Icon, Icon,
Popup, Popup,
Grid, Table,
Button,
Form,
Dropdown,
} from 'semantic-ui-react'; } from 'semantic-ui-react';
import React, { Component } from 'react';
import { clearWrite, postEventNote, writeNote } from '../../actions/notes';
import { submitVisitors, visitorChange } from '../../actions/statistics';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { visitorChange, submitVisitors } from '../../actions/statistics';
import { writeNote, clearWrite, postEventNote } from '../../actions/notes';
const visitStates = [ const visitStates = [
{ {
...@@ -25,8 +26,8 @@ const visitStates = [ ...@@ -25,8 +26,8 @@ const visitStates = [
{ {
text: 'Nem', text: 'Nem',
value: 'No', value: 'No',
} },
] ];
class TraineeTableRow extends Component { class TraineeTableRow extends Component {
constructor(props) { constructor(props) {
...@@ -37,102 +38,126 @@ class TraineeTableRow extends Component { ...@@ -37,102 +38,126 @@ class TraineeTableRow extends Component {
}; };
} }
triggerAdd = () => this.setState({ ...this.state, showAddPopup: !this.state.showAddPopup}) // Hides and shows the Add and More popup
triggerMore = () => this.setState({ ...this.state, showMorePopup: !this.state.showMorePopup }) triggerAdd = () =>
this.setState({ ...this.state, showAddPopup: !this.state.showAddPopup });
triggerMore = () =>
this.setState({ ...this.state, showMorePopup: !this.state.showMorePopup });
render() { render() {
const note = this.props.actualNote; const note = this.props.actualNote;
const { trainee, edit, actualNote, selectedEvent, notes } = this.props; const { trainee, selectedEvent, notes } = this.props;
const isVisitor = selectedEvent.visitors.includes(trainee.id); const isVisitor = selectedEvent.visitors.includes(trainee.id);
const isAbsent = selectedEvent.absent.includes(trainee.id); const isAbsent = selectedEvent.absent.includes(trainee.id);
let visitorStatusIcon;
let visitorStatusDropdown;
if (isVisitor) {
visitorStatusIcon = <Icon color="green" name="checkmark" />;
visitorStatusDropdown = 'Visitor';
} else if (isAbsent) {
visitorStatusIcon = <Icon color="orange" name="minus" />;
visitorStatusDropdown = 'Absent';
} else {
visitorStatusIcon = <Icon color="red" name="cancel" />;
visitorStatusDropdown = 'No';
}
return ( return (
<Table.Row> <Table.Row>
<Table.Cell> <Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
{trainee.full_name} {/* Show and change Visitors status */}
</Table.Cell> {!this.props.edit ? (
{!this.props.edit ? <Table.Cell textAlign="center">{visitorStatusIcon}</Table.Cell>
<Table.Cell textAlign='center'> ) : (
{ <Table.Cell textAlign="center">
isVisitor ?
<Icon color='green' name='checkmark' />
:
isAbsent ?
<Icon color='orange' name='minus' />
:
<Icon color='red' name='cancel' />
}
</Table.Cell>
:
<Table.Cell textAlign='center'>
<Dropdown <Dropdown
defaultValue={isVisitor ? 'Visitor' : isAbsent ? 'Absent' : 'No'} defaultValue={visitorStatusDropdown}
selection selection
options={visitStates} options={visitStates}
onChange={(_, v) => this.props.visitorChange({ id : trainee.id, value: v.value })} onChange={(_, v) => {
this.props.visitorChange({ id: trainee.id, value: v.value });
// Submit with error check
this.props
.submitVisitors(this.props.selectedEvent)
.then((value) => {
if (value === true) {
console.log('success');
} else {
console.log('error');
}
});
}}
/> />
</Table.Cell> </Table.Cell>
} )}
{/* Notes for trainees */}
<Table.Cell> <Table.Cell>
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column floated='left' width={8} textAlign='left'> {/* Note text */}
<Grid.Column floated="left" width={8}>
{notes.length > 0 ? {notes.length > 0 ? (
<Comment> <Comment>
<Comment.Content> <Comment.Content>
<Comment.Author>{notes[0].created_by_name}</Comment.Author> <Comment.Author>
<Comment.Text> <b>{notes[0].created_by_name}:</b>
{notes[0].note.length > 50 ? notes[0].note.slice(0, 50).concat('...') </Comment.Author>
: <Comment.Text style={{ wordWrap: 'break-word' }}>
notes[0].note } {notes[0].note.length > 25
? notes[0].note.slice(0, 25).concat('...')
: notes[0].note}
</Comment.Text> </Comment.Text>
</Comment.Content> </Comment.Content>
</Comment> </Comment>
: ) : null}
null
}
</Grid.Column> </Grid.Column>
<Grid.Column floated='right' width={3} textAlign='right'> {/* Note buttons */}
{notes.length > 0 ? <Grid.Column floated="right" width={6} textAlign="right">
{notes.length > 0 ? (
<Popup <Popup
basic basic
open={this.state.showMorePopup} open={this.state.showMorePopup}
trigger={<Button icon='comment alternate outline' onClick={this.triggerMore} />} trigger={
content={notes.map((note) => { <Button
return ( icon="comment alternate outline"
onClick={this.triggerMore}
/>
}
content={notes.map((oneNote) => (
<Comment.Content> <Comment.Content>
<Comment.Author>{note.created_by_name}</Comment.Author> <Comment.Author>
<Comment.Text> <b>{oneNote.created_by_name}:</b>
{note.note} </Comment.Author>
</Comment.Text> <Comment.Text>{oneNote.note}</Comment.Text>
</Comment.Content> </Comment.Content>
); ))}
})}
/> />
: ) : null}
null}
<Popup <Popup
trigger={<Button icon='plus' onClick={this.triggerAdd}/>}
basic basic
trigger={<Button icon="plus" onClick={this.triggerAdd} />}
open={this.state.showAddPopup} open={this.state.showAddPopup}
content={ content={
<Form reply> <Form reply>
<Form.TextArea <Form.TextArea
value={note.note} value={note.note}
onChange={e => this.props.writeNote(e)} onChange={(e) => this.props.writeNote(e)}
/> />
<Button <Button
primary
onClick={() => { onClick={() => {
this.props.postEventNote({ eventid:selectedEvent.id, this.triggerAdd();
this.props.postEventNote({
eventid: selectedEvent.id,
userid: trainee.id, userid: trainee.id,
note: note.note }); note: note.note,
});
this.props.clearWrite(); this.props.clearWrite();
} }}
} content="Megjegyzés hozzáadása"
content='Megjegyzés hozzáadása' labelPosition="left"
labelPosition='left' icon="edit"
icon='edit'
primary
/> />
</Form> </Form>
} }
...@@ -145,6 +170,12 @@ class TraineeTableRow extends Component { ...@@ -145,6 +170,12 @@ class TraineeTableRow extends Component {
); );
} }
} }
const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote }) const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote });
export default connect(mapStateToProps, { writeNote, clearWrite, postEventNote, visitorChange})(TraineeTableRow) export default connect(mapStateToProps, {
writeNote,
clearWrite,
postEventNote,
visitorChange,
submitVisitors,
})(TraineeTableRow);
src/components/pages/Events.js
View file @ 2eef83d2
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
color="blue"
unstackable
celled
selectable
compact
size="small"
>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell>Alkalom neve</Table.HeaderCell> <Table.HeaderCell textAlign="center">
<Table.HeaderCell>Dátum</Table.HeaderCell> Alkalom neve
<Table.HeaderCell>Jelen voltak</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell textAlign="center">Dátum</Table.HeaderCell>
<Table.HeaderCell textAlign="center">
Jelen voltak
</Table.HeaderCell>
<Table.HeaderCell /> <Table.HeaderCell />
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{this.props.events ? this.renderEvents() : 'Nincs még alaklom beírva'} {this.props.events
? this.renderEvents()
: 'Nincs még alkalom beírva'}
</Table.Body> </Table.Body>
</Table> </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
);
src/components/pages/Groups.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Container, Header, Segment, Divider } from 'semantic-ui-react';
import './Groups.css'; import './Groups.css';
import GrouCard from '../extra/GroupCard'
import { Container, Header, Segment } from 'semantic-ui-react';
import React, { Component } from 'react';
import GroupCard from '../extra/GroupCard';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getGroups } from '../../actions/groups'; import { getGroups } from '../../actions/groups';
class Groups extends Component { class Groups extends Component {
componentWillMount() { UNSAFE_componentWillMount() {
this.props.getGroups() this.props.getGroups();
} }
render() { render() {
return ( return (
<div> <div>
<Segment inverted textAlign='center' vertical> <Segment inverted textAlign="center" vertical>
<Container> <Container>
<Header <Header
as='h1' as="h1"
content='Köreink' content="Köreink"
inverted inverted
style={{ style={{
fontSize: '3em', fontSize: '3em',
...@@ -33,8 +33,16 @@ class Groups extends Component { ...@@ -33,8 +33,16 @@ class Groups extends Component {
<Segment style={{ padding: '1em 0em 5em' }} vertical> <Segment style={{ padding: '1em 0em 5em' }} vertical>
<Container text> <Container text>
{ this.props.groups.map(item => { {this.props.groups
return <GrouCard key={item.id} label={item.name} value={item.description}/> // eslint-disable-next-line arrow-body-style
.map((item) => {
return (
<GroupCard
key={item.id}
label={item.name}
value={item.description}
/>
);
})} })}
</Container> </Container>
</Segment> </Segment>
...@@ -46,4 +54,3 @@ class Groups extends Component { ...@@ -46,4 +54,3 @@ class Groups extends Component {
const mapStateToProps = ({ groups }) => ({ groups }); const mapStateToProps = ({ groups }) => ({ groups });
export default connect(mapStateToProps, { getGroups })(Groups); export default connect(mapStateToProps, { getGroups })(Groups);
src/components/pages/Home.css
View file @ 2eef83d2
...@@ -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;
} }
src/components/pages/Home.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Homework.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/LeaderBoard.js 0 → 100644
View file @ 2eef83d2
import { Container, Table } from 'semantic-ui-react';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getTrainees } from '../../actions/statistics';
class LeaderBoard extends Component {
UNSAFE_componentWillMount() {
this.props.getTrainees();
}
// Every event rendered
renderTraineeBits() {
return this.props.trainees
.sort(
(a, b) =>
(Number(b.homework_bits) + Number(b.events_visited) + Number(b.extra_bits)) -
(Number(a.homework_bits) + Number(a.events_visited) + Number(a.extra_bits))
)
.map((trainee) =>
trainee.role === 'Student' ? (
<Table.Row key={trainee.nick}>
<Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
<Table.Cell textAlign="center">{trainee.events_visited}</Table.Cell>
<Table.Cell textAlign="center">
{Number(trainee.homework_bits) + Number(trainee.extra_bits)}
</Table.Cell>
<Table.Cell textAlign="center">
{Number(trainee.homework_bits) + trainee.events_visited + Number(trainee.extra_bits)}
</Table.Cell>
</Table.Row>
) : null
);
}
render() {
return (
<Container textAlign="center" style={{ overflowX: 'scroll' }}>
<Table color="blue" unstackable celled selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign="center">Képződők</Table.HeaderCell>
<Table.HeaderCell textAlign="center">Jelenlét</Table.HeaderCell>
<Table.HeaderCell textAlign="center">Bitek</Table.HeaderCell>
<Table.HeaderCell textAlign="center">Szumma</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.trainees ? (
this.renderTraineeBits()
) : (
<Table.Row>
<Table.Cell>Nincsenek képződők</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
</Container>
);
}
}
const mapStateToProps = ({ trainees: { trainees }, user }) => ({
trainees,
user,
});
export default connect(mapStateToProps, { getTrainees })(LeaderBoard);
src/components/pages/Mentors.js 0 → 100644
View file @ 2eef83d2
import {
Card,
Container,
Header,
Icon,
Image,
Item,
Label,
Responsive,
Segment,
} from 'semantic-ui-react';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getMentors } from '../../actions/mentors';
class Mentors extends Component {
UNSAFE_componentWillMount() {
this.props.getMentors();
}
renderMentorsNormal() {
return this.props.mentors.map((item, index) => (
<Card style={{ maxWidth: '100%', minWidth: '100%' }}>
<Card.Content style={{ padding: '0' }}>
<Item.Group>
<Item>
{index % 2 === 0 ? (
<Item.Image size="medium" src={item.image} />
) : null}
<Item.Content style={{ padding: '1rem' }}>
<Item.Header>{item.name}</Item.Header>
<Item.Description>
<p dangerouslySetInnerHTML={{ __html: item.text }}></p>
</Item.Description>
<Item.Extra>
<Label>
<Icon name="mail" />
{item.email}
</Label>
</Item.Extra>
</Item.Content>
{index % 2 === 1 ? (
<Item.Image size="medium" src={item.image} />
) : null}
</Item>
</Item.Group>
</Card.Content>
</Card>
));
}
renderMentorsMobile() {
return this.props.mentors.map((item) => (
<Card key={item.id}>
<Image src={item.image} wrapped ui={false} />
<Card.Content>
<Card.Header>{item.name}</Card.Header>
<Card.Description>
<p dangerouslySetInnerHTML={{ __html: item.text }}></p>
</Card.Description>
</Card.Content>
<Card.Content extra>
<Label>
<Icon name="mail" />
{item.email}
</Label>
</Card.Content>
</Card>
));
}
render() {
return (
<div>
<Segment inverted textAlign="center" vertical>
<Container>
<Header
as="h1"
content="Mentorok"
inverted
style={{
fontSize: '3em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: '0.5em',
}}
/>
</Container>
</Segment>
<Responsive minWidth={768}>
<Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
{this.renderMentorsNormal()}
</Container>
</Responsive>
<Responsive minWidth={551} maxWidth={767}>
<Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
<Card.Group centered itemsPerRow={2}>
{this.renderMentorsMobile()}
</Card.Group>
</Container>
</Responsive>
<Responsive maxWidth={550}>
<Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
<Card.Group centered itemsPerRow={1}>
{this.renderMentorsMobile()}
</Card.Group>
</Container>
</Responsive>
</div>
);
}
}
const mapStateToProps = ({ mentors, user }) => ({ mentors, user });
export default connect(mapStateToProps, { getMentors })(Mentors);
src/components/pages/News.css
View file @ 2eef83d2
src/components/pages/News.js
View file @ 2eef83d2
import './News.css';
import { Button, Container, Grid, Item, Segment } from 'semantic-ui-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Segment, Item, Button, Grid } from 'semantic-ui-react'; import { deleteNews, getNews, setSelectedNews } from '../../actions/news';
import { connect } from 'react-redux';
import moment from 'moment';
import AddNewsForm from '../forms/AddNewsForm'; import AddNewsForm from '../forms/AddNewsForm';
import ConfirmModal from '../forms/ConfirmModal';
import EditNewsForm from '../forms/EditNewsForm'; import EditNewsForm from '../forms/EditNewsForm';
import { connect } from 'react-redux';
import moment from 'moment';
import { getNews, deleteNews, setSelectedNews } from '../../actions/news'; const linkify = (text) => {
const urlRegex = /(https?:\/\/[^\s]+)/g;
import './News.css'; return text.split(urlRegex).map((part, index) =>
part.match(urlRegex) ? (
<a key={index} href={part} target="_blank" rel="noopener noreferrer">
{part}
</a>
) : (
part
)
);
};
class News extends Component { class News extends Component {
componentWillMount() { UNSAFE_componentWillMount() {
this.props.getNews(); this.props.getNews();
} }
renderNews() { renderNews() {
return this.props.news.map(item => ( return this.props.news.map((item) => (
<Item key={item.id}> <Item key={item.id}>
<Item.Content> <Item.Content>
<Item.Header <Container text textAlign="left">
style={{ fontSize: '2em', width: '100%' }} <Item.Header style={{ fontSize: '2em', width: '100%' }}>
>
<Grid> <Grid>
<Grid.Column floated='center' width={12}> <Grid.Column
floated="left"
width={this.props.user.role === 'Staff' ? 12 : 16}
>
{item.title} {item.title}
</Grid.Column> </Grid.Column>
{ this.props.user.role === 'Staff' ? {this.props.user.role === 'Staff' ? (
<Grid.Column floated='right' width={4}> <Grid.Column floated="right" width={4}>
<EditNewsForm <EditNewsForm
onClick={() => { onClick={() => this.props.setSelectedNews(item)}
this.props.setSelectedNews(item)
}}
/> />
<Button <ConfirmModal
compact text={`törölni akarod a következő hírt: ${item.title}`}
color='red' button={
size='mini' <Button compact color="red" size="mini">
onClick={() => this.props.deleteNews(item)} Törlés
>
Delete
</Button> </Button>
}
onAccept={() => this.props.deleteNews(item)}
/>
</Grid.Column> </Grid.Column>
: null } ) : null}
</Grid> </Grid>
</Item.Header> </Item.Header>
<Item.Description className='news-text' style={{ fontSize: '1.33em' }}> <Item.Meta style={{ fontSize: '0.75em', fontStyle: 'italic' }}>
Közzétéve:
{moment(item.created_at).format('LLLL')}
</Item.Meta>
<Item.Description className="news-text" style={{ fontSize: '1em' }}>
{this.renderMultiLine(item.text)} {this.renderMultiLine(item.text)}
</Item.Description> </Item.Description>
<Item.Extra> </Container>
<Grid>
<Grid.Row className='news-extra'>
<Grid.Column floated='left' width={10}>
<p> Készült: {moment(item.created_at).format('LLLL')} </p>
<p> Szerkesztve: {moment(item.updated_at).format('LLLL')}</p>
</Grid.Column>
<Grid.Column floated='right' width={5}>
<p> Írta: <strong>{item.author}</strong></p>
{/* TODO get the edited by name */}
<p> Szerkesztette: {item.last_update_by}</p>
</Grid.Column>
</Grid.Row>
</Grid>
</Item.Extra>
</Item.Content> </Item.Content>
</Item> </Item>
)); ));
} }
renderMultiLine(text) { renderMultiLine = (text) => {
const strings = text.split('\n'); const strings = text.split('\n');
return strings.map(string => <p>{string}</p>); return strings.map((string) => <p key={Math.random()}>{linkify(string)}</p>);
} };
render() { render() {
return ( return (
<div> <div style={{ paddingTop: '1em', paddingBottom: '5em' }}>
<Segment style={{ padding: '3em 3em' }} vertical> <Segment vertical>
{/* { this.props.user.is_superuser ? <AddNewsForm /> : ''} */} {/* { this.props.user.is_superuser ? <AddNewsForm /> : ''} */}
<Container text textAlign='center'> <Container text textAlign="center">
{this.props.user.role === 'Staff' ? {this.props.user.role === 'Staff' ? <AddNewsForm /> : null}
<AddNewsForm /> <Item.Group divided>{this.renderNews()}</Item.Group>
:
null}
<Item.Group divided>
{this.renderNews()}
</Item.Group>
</Container> </Container>
</Segment> </Segment>
</div> </div>
...@@ -93,7 +92,10 @@ class News extends Component { ...@@ -93,7 +92,10 @@ class News extends Component {
} }
} }
const mapStateToProps = ({ news, user }) => ({ news, user }); const mapStateToProps = ({ news, user }) => ({ news, user });
export default connect(mapStateToProps, { getNews, deleteNews, setSelectedNews })(News); export default connect(mapStateToProps, {
getNews,
deleteNews,
setSelectedNews,
})(News);
src/components/pages/NotFound.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Presence.js 0 → 100644
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Profile.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Schedule.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Statistics.js
View file @ 2eef83d2
This diff is collapsed.
src/components/pages/Trainees.js deleted 100644 → 0
View file @ 8e19b908
This diff is collapsed.
src/components/pages/Trainers.js deleted 100644 → 0
View file @ 8e19b908
import React, { Component } from 'react';
import { Container, Header, Segment } from 'semantic-ui-react';
export default class Trainers extends Component {
render() {
return (
<div>
<Segment inverted textAlign='center' vertical>
<Container>
<Header
as='h1'
content='Képzők - Hamarosan'
inverted
style={{
fontSize: '3em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: '0.5em',
}}
/>
</Container>
</Segment>
</div>
);
}
}
src/configureStore.js
View file @ 2eef83d2
This diff is collapsed.

Hosted with :heart: by KSZK