src/components/forms/InfoModal.js

+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;

src/components/forms/SolutionDetailsForm.js

+import './Forms.css';
+
+import { Button, Divider, Header, Icon, Modal } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { getDocuments, getSolutions } from '../../actions/homework';
+
+import CorrectSolutionForm from './CorrectSolutionForm';
+import { connect } from 'react-redux';
+import { customMessage } from '../pages/Homework';
+
+class SolutionDetailsForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  render() {
+    const taskSolutions = this.props.homeworks.solutions.filter(
+      (solution) => solution.task === this.props.taskid
+    );
+
+    const noSubmitStudents = [];
+    const waitForCorrectionStudents = [];
+    const noAcceptStudents = [];
+    const acceptedStudents = [];
+
+    this.props.homeworks.profiles.forEach((profile) => {
+      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
+        ) {
+          waitForCorrectionStudents.push(profile);
+        } else if (
+          profileSolutions[profileSolutions.length - 1].accepted === false
+        ) {
+          noAcceptStudents.push(profile);
+        } else {
+          acceptedStudents.push(profile);
+        }
+      }
+    });
+
+    const noStudentText = 'Nincs ilyen képződő jelenleg.';
+
+    return (
+      <Modal
+        open={this.state.showModal}
+        closeOnDimmerClick
+        onClose={() => this.setState({ showModal: false })}
+        trigger={
+          <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:
+        </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>
+          ))}
+          <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>
+              ))}
+          <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}
+                />
+              ))}
+          <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}
+                />
+              ))}
+          <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}
+                />
+              ))}
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            inverted
+            color="green"
+            onClick={() => {
+              this.setState({ showModal: false });
+            }}
+          >
+            <Icon name="checkmark" /> Kész
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
+
+export default connect(mapStateToProps, {
+  getSolutions,
+  getDocuments,
+})(SolutionDetailsForm);

src/components/pages/ApplicantProfile.js

+import { Button, Container, Header, Item, Label } from 'semantic-ui-react';
 import React, { Component } from 'react';
-import { Container, Header, Item, Button, Label, List } 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 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);
   }
 
-  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>
-    ));
-  }
-
   render() {
-    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 textAlign='center'>
+        {signed && role !== 'Staff' ? (
+          <Container textAlign="center">
             <ConfirmModal
-              button={
-                <Button
-                  color='green'
-                >Jelentkezés elfogadása
-                </Button>}
-              text='elfogadod a jelentkezést'
+              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'
+              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

+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 {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.getProfiles();
   }
 
-  renderApplicants() {
+  renderApplicants(format) {
     return this.props.profiles.map((profile) =>
-    { return (
-      <Table.Row>
-        <Table.Cell>
-          <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'>
-            { profile.role === 'Staff' ?
-              <Label color='blue'>Staff</Label>
-              :
-              <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>
-          { profile.role !== 'Staff' ?
-            <ConfirmModal
-              button={<Button
-                color='blue'
-                size='tiny'
-              >
-              Staff jog adás
-            </Button>}
-            text='staff jogot adsz neki'
-            onAccept={() => this.props.setStatus(profile.id, 'Staff')}
-            />
-          :
-          null }
-        </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={{
-          padding: '80px'
-        }}
+        textAlign="center"
+        style={{ paddingTop: '1em', paddingBottom: '5em' }}
       >
-        <Table color='blue' 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
+);

src/components/pages/CommentModal.js

-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);

src/components/pages/EventDetail.js

-import React, { Component } from 'react';
 import {
-  Container,
-  Item,
   Button,
   Comment,
+  Container,
+  Divider,
   Form,
   Header,
+  Item,
+  Segment,
   Table,
-} from 'semantic-ui-react';
-import { connect } from 'react-redux';
-import moment from 'moment';
-import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics';
-import { getNotesByEvent, writeNote, clearWrite, postEventNote, deleteNote } from '../../actions/notes';
-import TraineeTableRow from './TraineeTableRow';
-import ConfirmModal from '../forms/ConfirmModal';
+} from "semantic-ui-react";
+import React, { Component } from "react";
+import {
+  clearWrite,
+  getNotesByEvent,
+  postEventNote,
+  writeNote,
+} from "../../actions/notes";
+import {
+  getEventById,
+  getTrainees,
+  submitVisitors,
+  visitorChange,
+} from "../../actions/statistics";
+
+import TraineeTableRow from "./EventDetailTableRow";
+import { connect } from "react-redux";
+import moment from "moment";
 
 class EventDetail extends Component {
   constructor(props) {
@@ -23,39 +35,59 @@ class EventDetail extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.getEventById(this.props.match.params.id);
     this.props.getTrainees();
     this.props.getNotesByEvent(this.props.match.params.id);
   }
 
-
   renderTrainees() {
     const event = this.props.selectedEvent;
-    return this.props.trainees.map((item) => {
-      const notes = this.props.eventNotes.filter(note => note.profile === item.id);
-      return (
-        <TraineeTableRow
-          selectedEvent={event}
-          notes={notes}
-          trainee={item}
-          edit={this.state.edit}
-        />
-      );
-    });
+    return this.props.trainees
+      ?.sort(function (a, b) {
+        var nameA = a.full_name.toLowerCase(),
+          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
+            selectedEvent={event}
+            notes={notes}
+            trainee={item}
+            edit={this.state.edit}
+            key={item.id}
+          />
+        ) : null;
+      });
   }
 
   renderEvent() {
     const { name, date, description } = this.props.selectedEvent;
     return (
-      <Item>
-        <Item.Header as='h2'>{name}</Item.Header>
-        <Item.Header as='h3'>Dátum: {moment(date).format('LL')}</Item.Header>
-        <Container textAlign='justified'>
-          <Item.Header as='h3'>Leírás</Item.Header>
-          <Item.Content>{description}</Item.Content>
-        </Container>
-      </Item>
+      <Segment>
+        <Item>
+          <Divider style={{ fontSize: "2em" }} horizontal>
+            <Header as="h1">
+              {name}
+              <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>
+          </Container>
+        </Item>
+      </Segment>
     );
   }
 
@@ -64,32 +96,20 @@ class EventDetail extends Component {
     return notes.map((note) => {
       if (!note.profile) {
         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>
-            <ConfirmModal
-              text='törölni akarod a megjegyzést'
-              button={
-                <Button
-                  compact
-                  color='red'
-                  size='mini'
-                >
-                  Delete
-                </Button>
-              }
-              onAccept={() => this.props.deleteNote(note)}
-            />
-          </Comment>);
+          <Segment>
+            <Comment key={Math.random()}>
+              <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>
+            </Comment>
+          </Segment>
+        );
       }
-      return '';
+      return "";
     });
   }
 
@@ -97,79 +117,61 @@ class EventDetail extends Component {
     const event = this.props.selectedEvent;
     const note = this.props.actualNote;
     return (
-      <Container
-        style={{
-          padding: '80px'
-        }}
-      >
-        <Container textAlign='center'>
-          { this.props.selectedEvent && this.props.trainees ?
-            this.renderEvent()
-            :
-            ''
-        }
+      <Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
+        <Container textAlign="center">
+          {this.props.selectedEvent && this.props.trainees
+            ? this.renderEvent()
+            : ""}
         </Container>
-          <Table celled centered>
-            <Table.Header>
-              <Table.Row>
-                <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.props.trainees ?
-                this.renderTrainees()
-                :
-                ''
-              }
-            </Table.Body>
-          </Table>
+        {!this.state.edit ? (
+          <Button onClick={() => this.setState({ edit: true })}>
+            Módosítás
+          </Button>
+        ) : (
           <Button
-            onClick={() => this.setState({ edit: true })}
+            onClick={() => {
+              this.setState({ edit: false });
+            }}
           >
-          Szerkeszt
+            {" "}
+            Kész
           </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
               onClick={() => {
-                              this.setState({ edit: false });
-                              this.props.submitVisitors(this.props.selectedEvent);
-                            }
-                      }
-            >Mentés
-            </Button>
-            :
-            ''
-          }
-          <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
-                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>
+                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>
     );
   }
@@ -178,8 +180,13 @@ class EventDetail extends Component {
 const mapStateToProps = ({
   notes: { eventNotes, actualNote },
   events: { selectedEvent },
-  trainees: { trainees }
-}) => ({ eventNotes, selectedEvent, trainees, actualNote });
+  trainees: { trainees },
+}) => ({
+  eventNotes,
+  selectedEvent,
+  trainees,
+  actualNote,
+});
 
 export default connect(mapStateToProps, {
   getEventById,
@@ -190,5 +197,4 @@ export default connect(mapStateToProps, {
   writeNote,
   clearWrite,
   postEventNote,
-  deleteNote,
 })(EventDetail);

src/components/pages/EventDetailTableRow.js

+import {
+  Button,
+  Comment,
+  Dropdown,
+  Form,
+  Grid,
+  Icon,
+  Popup,
+  Table,
+} 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';
+
+const visitStates = [
+  {
+    text: 'Igen',
+    value: 'Visitor',
+  },
+  {
+    text: 'Szólt h nem',
+    value: 'Absent',
+  },
+  {
+    text: 'Nem',
+    value: 'No',
+  },
+];
+
+class TraineeTableRow extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showAddPopup: false,
+      showMorePopup: false,
+    };
+  }
+
+  // Hides and shows the Add and More popup
+  triggerAdd = () =>
+    this.setState({ ...this.state, showAddPopup: !this.state.showAddPopup });
+
+  triggerMore = () =>
+    this.setState({ ...this.state, showMorePopup: !this.state.showMorePopup });
+
+  render() {
+    const note = this.props.actualNote;
+    const { trainee, selectedEvent, notes } = this.props;
+    const isVisitor = selectedEvent.visitors.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 (
+      <Table.Row>
+        <Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
+        {/* Show and change Visitors status  */}
+        {!this.props.edit ? (
+          <Table.Cell textAlign="center">{visitorStatusIcon}</Table.Cell>
+        ) : (
+          <Table.Cell textAlign="center">
+            <Dropdown
+              defaultValue={visitorStatusDropdown}
+              selection
+              options={visitStates}
+              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>
+        )}
+        {/* Notes for trainees */}
+        <Table.Cell>
+          <Grid>
+            <Grid.Row>
+              {/* Note text */}
+              <Grid.Column floated="left" width={8}>
+                {notes.length > 0 ? (
+                  <Comment>
+                    <Comment.Content>
+                      <Comment.Author>
+                        <b>{notes[0].created_by_name}:</b>
+                      </Comment.Author>
+                      <Comment.Text style={{ wordWrap: 'break-word' }}>
+                        {notes[0].note.length > 25
+                          ? notes[0].note.slice(0, 25).concat('...')
+                          : notes[0].note}
+                      </Comment.Text>
+                    </Comment.Content>
+                  </Comment>
+                ) : null}
+              </Grid.Column>
+              {/* Note buttons */}
+              <Grid.Column floated="right" width={6} textAlign="right">
+                {notes.length > 0 ? (
+                  <Popup
+                    basic
+                    open={this.state.showMorePopup}
+                    trigger={
+                      <Button
+                        icon="comment alternate outline"
+                        onClick={this.triggerMore}
+                      />
+                    }
+                    content={notes.map((oneNote) => (
+                      <Comment.Content>
+                        <Comment.Author>
+                          <b>{oneNote.created_by_name}:</b>
+                        </Comment.Author>
+                        <Comment.Text>{oneNote.note}</Comment.Text>
+                      </Comment.Content>
+                    ))}
+                  />
+                ) : null}
+                <Popup
+                  basic
+                  trigger={<Button icon="plus" onClick={this.triggerAdd} />}
+                  open={this.state.showAddPopup}
+                  content={
+                    <Form reply>
+                      <Form.TextArea
+                        value={note.note}
+                        onChange={(e) => this.props.writeNote(e)}
+                      />
+                      <Button
+                        primary
+                        onClick={() => {
+                          this.triggerAdd();
+                          this.props.postEventNote({
+                            eventid: selectedEvent.id,
+                            userid: trainee.id,
+                            note: note.note,
+                          });
+                          this.props.clearWrite();
+                        }}
+                        content="Megjegyzés hozzáadása"
+                        labelPosition="left"
+                        icon="edit"
+                      />
+                    </Form>
+                  }
+                />
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Table.Cell>
+      </Table.Row>
+    );
+  }
+}
+const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote });
+
+export default connect(mapStateToProps, {
+  writeNote,
+  clearWrite,
+  postEventNote,
+  visitorChange,
+  submitVisitors,
+})(TraineeTableRow);

src/components/pages/Home.css

@@ -5,8 +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.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;
 }