LeaderBoard

src/components/pages/EventDetail.js

@@ -75,6 +75,7 @@ class EventDetail extends Component {
     return notes.map((note) => {
       if (!note.profile) {
         return (
+          <Segment>
             <Comment key={Math.random()}>
               <Comment.Content>
                 <Comment.Author>{note.created_by_name}</Comment.Author>
@@ -85,7 +86,8 @@ class EventDetail extends Component {
                   {note.note}
                 </Comment.Text>
               </Comment.Content>
-          </Comment>);
+            </Comment>
+          </Segment>);
       }
       return '';
     });

src/components/pages/LeaderBoard.js

+import React, { Component } from 'react';
+import { Container, Table, Icon } from 'semantic-ui-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) => {
+      return (Number(b.homework_bits) + b.events_visited)
+        - (Number(a.homework_bits) + a.events_visited)
+    }).map((trainee) => { 
+      return (
+        <Table.Row>
+          <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)}
+          </Table.Cell>
+          <Table.Cell textAlign='center'>
+            {Number(trainee.homework_bits) + trainee.events_visited}
+          </Table.Cell>
+        </Table.Row>
+      )
+    })
+  }
+
+  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() 
+            : 
+              'Nincsenek képződők'
+            }
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ trainees: { trainees }, user }) => ({ trainees, user });
+
+export default connect(mapStateToProps, { getTrainees })(LeaderBoard);

src/components/pages/Trainees.js → src/components/pages/Presence.js

@@ -3,7 +3,7 @@ import { Container, Table, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { getTrainees, getStaffEvents } from '../../actions/statistics';
 
-class Trainees extends Component {
+class Presence extends Component {
   UNSAFE_componentWillMount() {
     this.props.getTrainees();
     this.props.getStaffEvents();
@@ -79,4 +79,4 @@ class Trainees extends Component {
 
 const mapStateToProps = ({ trainees: { trainees }, events: { events }, user }) => ({ trainees, events, user });
 
-export default connect(mapStateToProps, { getTrainees, getStaffEvents })(Trainees);
+export default connect(mapStateToProps, { getTrainees, getStaffEvents })(Presence);

src/components/pages/Statistics.js

 import React, { Component } from 'react';
 import { Container, Menu } from 'semantic-ui-react';
 import Events from './Events'
-import Trainees from './Trainees'
+import Presence from './Presence'
+import LeaderBoard from './LeaderBoard'
 
 export default class Statistics extends Component {
   state = { activeItem: 'events' }
@@ -28,15 +29,23 @@ export default class Statistics extends Component {
               Alkalmak
             </Menu.Item>
             <Menu.Item
-              name='trainees'
-              active={activeItem === 'trainees'}
+              name='presence'
+              active={activeItem === 'presence'}
               onClick={this.handleItemClick}
             >
-              Képződők
+              Jelenlét
+            </Menu.Item>
+            <Menu.Item
+              name='leaderboard'
+              active={activeItem === 'leaderboard'}
+              onClick={this.handleItemClick}
+            >
+              Ranglista
             </Menu.Item>
           </Menu>
           { activeItem === 'events' ? <Events /> : '' }
-          { activeItem === 'trainees' ? <Trainees /> : '' }
+          { activeItem === 'presence' ? <Presence /> : '' }
+          { activeItem === 'leaderboard' ? <LeaderBoard /> : '' }
         </Container>
       </div>
     );