From 634f47b24758629c57f6b5f763fabfd6451a6789 Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Wed, 29 Jan 2020 13:07:06 +0100
Subject: [PATCH] responsive statistics page
---
src/components/pages/EventDetail.js | 2 +-
src/components/pages/Events.js | 56 +++++++++++++-----------
src/components/pages/Statistics.js | 16 +++----
src/components/pages/Trainees.js | 67 ++++++++++++++++++++++-------
4 files changed, 91 insertions(+), 50 deletions(-)
diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index e48fe9b..ad0c766 100644
--- a/src/components/pages/EventDetail.js
+++ b/src/components/pages/EventDetail.js
@@ -101,7 +101,7 @@ class EventDetail extends Component {
''
}
</Container>
- <Table celled centered>
+ <Table celled centered unstackable>
<Table.Header>
<Table.Row>
<Table.HeaderCell>NĂŠv</Table.HeaderCell>
diff --git a/src/components/pages/Events.js b/src/components/pages/Events.js
index 3d5c8fc..923def7 100644
--- a/src/components/pages/Events.js
+++ b/src/components/pages/Events.js
@@ -12,40 +12,44 @@ class Events extends Component {
}
renderEvents() {
- return this.props.events.map((event) =>
- { return (
- <Table.Row>
- <Table.Cell>
- <Link to={`events/${event.id}`}>
- {event.name}
- </Link>
- </Table.Cell>
- <Table.Cell>{moment(event.date).format('LL')}</Table.Cell>
- <Table.Cell>{event.visitor_number}</Table.Cell>
- <Table.Cell>
- <Button
- onClick={() => this.props.deleteEvent(event)}
- color='red'
- compact
- size='small'
- >
- Delete
- </Button>
- </Table.Cell>
- </Table.Row>
- );
+ return this.props.events.map((event) => {
+ return (
+ <Table.Row >
+ <Table.Cell textAlign='center'>
+ <Link to={`events/${event.id}`}>
+ {event.name}
+ </Link>
+ </Table.Cell>
+ <Table.Cell textAlign='center'>
+ {moment(event.date).format('LL')}
+ </Table.Cell>
+ <Table.Cell textAlign='center'>
+ {event.visitor_number}
+ </Table.Cell>
+ <Table.Cell textAlign='center'>
+ <Button
+ onClick={() => this.props.deleteEvent(event)}
+ color='red'
+ compact
+ size='small'
+ >
+ TĂśrlĂŠs
+ </Button>
+ </Table.Cell>
+ </Table.Row>
+ );
});
}
render() {
return (
<Container textAlign='center'>
- <Table color='blue' celled selectable compact>
+ <Table color='blue' unstackable celled selectable compact>
<Table.Header>
<Table.Row>
- <Table.HeaderCell>Alkalom neve</Table.HeaderCell>
- <Table.HeaderCell>DĂĄtum</Table.HeaderCell>
- <Table.HeaderCell>Jelen voltak</Table.HeaderCell>
+ <Table.HeaderCell textAlign='center'>Alkalom neve</Table.HeaderCell>
+ <Table.HeaderCell textAlign='center'>DĂĄtum</Table.HeaderCell>
+ <Table.HeaderCell textAlign='center'>Jelen voltak</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
</Table.Header>
diff --git a/src/components/pages/Statistics.js b/src/components/pages/Statistics.js
index 44a4cdd..8e59dc5 100644
--- a/src/components/pages/Statistics.js
+++ b/src/components/pages/Statistics.js
@@ -13,26 +13,26 @@ export default class Statistics extends Component {
<div>
<Container
textAlign="center"
- style={{
- padding: '60px',
- }}
+ style={{paddingBottom: '5em', paddingTop: '1em'}}
>
- <Menu
+ <Menu tabular
attached='top'
- tabular
size='huge'
- compact={true}>
+ compact={true}
+ >
<Menu.Item
name='events'
active={activeItem === 'events'}
onClick={this.handleItemClick}
- >Alkalmak
+ >
+ Alkalmak
</Menu.Item>
<Menu.Item
name='trainees'
active={activeItem === 'trainees'}
onClick={this.handleItemClick}
- >KĂŠpzĹdĹk
+ >
+ KĂŠpzĹdĹk
</Menu.Item>
</Menu>
{ activeItem === 'events' ? <Events /> : '' }
diff --git a/src/components/pages/Trainees.js b/src/components/pages/Trainees.js
index 804c801..466ab69 100644
--- a/src/components/pages/Trainees.js
+++ b/src/components/pages/Trainees.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import { Container, Table, Icon } from 'semantic-ui-react';
+import { Container, Table, Icon, Responsive } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getTrainees, getStaffEvents } from '../../actions/statistics';
@@ -9,6 +9,12 @@ class Trainees extends Component {
this.props.getStaffEvents();
}
+ VisitedStatusNumber(trainee) {
+ return (this.props.events.filter((event) => {
+ return event.visitors.includes(trainee.id)
+ })).length;
+ }
+
renderVisitedStatus(trainee) {
return (this.props.events.map((event) => {
if (event.visitors.includes(trainee.id)) {
@@ -24,11 +30,11 @@ class Trainees extends Component {
}));
}
- renderTrainees() {
+ renderTraineesWithEvents() {
return this.props.trainees.map((trainee) =>
{ return (
<Table.Row>
- <Table.Cell>
+ <Table.Cell textAlign='center'>
{trainee.full_name}
</Table.Cell>
{this.renderVisitedStatus(trainee)}
@@ -36,10 +42,24 @@ class Trainees extends Component {
);
});
}
+ renderTraineesWithPoints() {
+ return this.props.trainees.map((trainee) =>
+ { return (
+ <Table.Row textAlign='center'>
+ <Table.Cell>
+ {trainee.full_name}
+ </Table.Cell>
+ <Table.Cell textAlign='center'>
+ {`${this.VisitedStatusNumber(trainee)} / ${this.props.events.length}`}
+ </Table.Cell>
+ </Table.Row>
+ );
+ });
+ }
renderTableHeader() {
return (this.props.events.map(event => (
- <Table.HeaderCell>
+ <Table.HeaderCell textAlign='center'>
{event.name}
</Table.HeaderCell>)));
}
@@ -47,18 +67,35 @@ class Trainees extends Component {
render() {
return (
<Container textAlign='center'>
- <Table color='blue' celled selectable compact>
- <Table.Header>
- <Table.Row>
- <Table.HeaderCell>KĂŠpzĹdĹk</Table.HeaderCell>
- { this.renderTableHeader() }
- </Table.Row>
- </Table.Header>
+ <Responsive minWidth={600} >
+ <Table color='blue' unstackable celled selectable compact>
+ <Table.Header>
+ <Table.Row>
+ <Table.HeaderCell textAlign='center'>KĂŠpzĹdĹk</Table.HeaderCell>
+ { this.renderTableHeader() }
+ </Table.Row>
+ </Table.Header>
- <Table.Body>
- {this.props.trainees ? this.renderTrainees() : 'Nincsenek kĂŠpzĹdĹk'}
- </Table.Body>
- </Table>
+ <Table.Body>
+ {this.props.trainees ? this.renderTraineesWithEvents() : 'Nincsenek kĂŠpzĹdĹk'}
+ </Table.Body>
+ </Table>
+ </Responsive>
+ <Responsive maxWidth={599} >
+ <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'>
+ RĂŠszvĂŠteli arĂĄny
+ </Table.HeaderCell>
+ </Table.Row>
+ </Table.Header>
+ <Table.Body>
+ {this.props.trainees ? this.renderTraineesWithPoints() : 'Nincsenek kĂŠpzĹdĹk'}
+ </Table.Body>
+ </Table>
+ </Responsive>
</Container>
);
}
--
GitLab