From 14e3119307dad3b321a4eb0dd8ef5b0b1b8480e9 Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Sat, 1 Feb 2020 23:05:00 +0100
Subject: [PATCH] better statistics and fixes
---
public/manifest.json | 1 -
src/actions/statistics.js | 13 +-
src/components/pages/EventDetail.js | 115 +++++++++---------
...ineeTableRow.js => EventDetailTableRow.js} | 21 +++-
src/components/pages/Events.js | 33 ++---
src/components/pages/Homework.js | 4 +-
src/components/pages/Trainees.js | 86 +++----------
7 files changed, 123 insertions(+), 150 deletions(-)
rename src/components/pages/{TraineeTableRow.js => EventDetailTableRow.js} (87%)
diff --git a/public/manifest.json b/public/manifest.json
index be607e4..08a4b72 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -4,7 +4,6 @@
"icons": [
{
"src": "favicon.ico",
- "sizes": "192x192",
"type": "image/png"
}
],
diff --git a/src/actions/statistics.js b/src/actions/statistics.js
index ce574c2..a2b3f81 100644
--- a/src/actions/statistics.js
+++ b/src/actions/statistics.js
@@ -82,14 +82,21 @@ export const visitorChange = ({ id, value }) => {
}
};
-export const submitVisitors = ({ id, visitors }) => (
+export const submitVisitors = ({ id, visitors, absent }) => (
async () => {
try {
const response = await axios.patch(`/api/v1/staff_events/${id}/`, {
- visitors
- });
+ visitors: visitors,
+ absent: absent
+ })
+ if(response.data.id === id) {
+ return true
+ } else {
+ return false
+ }
} catch (e) {
console.log(e);
+ return false
}
}
);
diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index 420e4a3..4cb9d1a 100644
--- a/src/components/pages/EventDetail.js
+++ b/src/components/pages/EventDetail.js
@@ -14,7 +14,7 @@ import { connect } from 'react-redux';
import moment from 'moment';
import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics';
import { getNotesByEvent, writeNote, clearWrite, postEventNote } from '../../actions/notes';
-import TraineeTableRow from './TraineeTableRow';
+import TraineeTableRow from './EventDetailTableRow';
class EventDetail extends Component {
@@ -34,7 +34,6 @@ class EventDetail extends Component {
renderTrainees() {
const event = this.props.selectedEvent;
- const note = this.props.actualNote;
return this.props.trainees?.map((item) => {
const notes = this.props.eventNotes?.filter(note => note.profile === item.id);
return (
@@ -43,6 +42,7 @@ class EventDetail extends Component {
notes={notes}
trainee={item}
edit={this.state.edit}
+ key={Math.random()}
/>
);
});
@@ -56,7 +56,7 @@ class EventDetail extends Component {
<Divider style={{ fontSize: '2em'}} horizontal>
<Header as='h1'>
{name}
- <Item.Header as='h5'>
+ <Item.Header style={{ fontSize: '0.6em'}}>
{moment(date).format('LL')}
</Item.Header>
</Header>
@@ -75,7 +75,7 @@ class EventDetail extends Component {
return notes.map((note) => {
if (!note.profile) {
return (
- <Comment>
+ <Comment key={Math.random()}>
<Comment.Content>
<Comment.Author>{note.created_by_name}</Comment.Author>
<Comment.Metadata>
@@ -103,67 +103,62 @@ class EventDetail extends Component {
''
}
</Container>
- <Table celled centered 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()
- :
- ''
- }
- </Table.Body>
- </Table>
- <Button
- onClick={() => this.setState({ edit: true })}
- >
- 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>
+ {!this.state.edit ?
+ <Button onClick={() => this.setState({ edit: true })}>
+ MĂłdosĂtĂĄs
+ </Button>
+ :
+ <Button onClick={() => {
+ this.setState({ edit: false });
+ this.props.submitVisitors(this.props.selectedEvent);
+ }}
+ > KĂŠsz
</Button>
- { this.state.edit ?
+ }
+ <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);
+ this.props.postEventNote({ eventid: event.id,
+ note: note.note });
+ this.props.clearWrite();
}
}
- >Save
- </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>
+ content='MegjegyzĂŠs hozzĂĄadĂĄsa'
+ labelPosition='left'
+ icon='edit'
+ primary
+ />
+ </Form>
+ </Comment.Group>
</Container>
);
}
diff --git a/src/components/pages/TraineeTableRow.js b/src/components/pages/EventDetailTableRow.js
similarity index 87%
rename from src/components/pages/TraineeTableRow.js
rename to src/components/pages/EventDetailTableRow.js
index 312ecf9..ce5988f 100644
--- a/src/components/pages/TraineeTableRow.js
+++ b/src/components/pages/EventDetailTableRow.js
@@ -43,7 +43,7 @@ class TraineeTableRow extends Component {
render() {
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 isAbsent = selectedEvent.absent.includes(trainee.id);
return (
@@ -70,8 +70,20 @@ class TraineeTableRow extends Component {
defaultValue={isVisitor ? 'Visitor' : isAbsent ? 'Absent' : 'No'}
selection
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>
}
{/* Notes for trainees */}
@@ -157,4 +169,7 @@ class TraineeTableRow extends Component {
}
const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote })
-export default connect(mapStateToProps, { writeNote, clearWrite, postEventNote, visitorChange})(TraineeTableRow)
+export default connect(mapStateToProps,
+ { writeNote, clearWrite, postEventNote,
+ visitorChange, submitVisitors})
+ (TraineeTableRow)
diff --git a/src/components/pages/Events.js b/src/components/pages/Events.js
index 75cc794..306ef77 100644
--- a/src/components/pages/Events.js
+++ b/src/components/pages/Events.js
@@ -44,21 +44,24 @@ class Events extends Component {
render() {
return (
<Container textAlign='center'>
- <Table color='blue' unstackable celled selectable compact>
- <Table.Header>
- <Table.Row>
- <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>
-
- <Table.Body>
- {this.props.events ? this.renderEvents() : 'Nincs mĂŠg alaklom beĂrva'}
- </Table.Body>
- </Table>
- <AddEventForm />
+ <div style={{overflowX: 'scroll'}}>
+ <Table color='blue' unstackable celled selectable compact
+ size='small'>
+ <Table.Header>
+ <Table.Row>
+ <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>
+ <Table.Body>
+ {this.props.events ? this.renderEvents() : 'Nincs mĂŠg alkalom beĂrva'}
+ </Table.Body>
+ </Table>
+ </div>
+ <br />
+ <AddEventForm/>
</Container>
);
}
diff --git a/src/components/pages/Homework.js b/src/components/pages/Homework.js
index 5ef69b3..3729780 100644
--- a/src/components/pages/Homework.js
+++ b/src/components/pages/Homework.js
@@ -338,7 +338,7 @@ class Homework extends Component {
:
<div>
{this.renderHomeworksTable(active, staff)}
- {!active ?
+ {!active && !staff ?
<Header
as='h3'
content={
@@ -377,7 +377,7 @@ class Homework extends Component {
);
} else if (user.role === 'Staff') {
return (
- <div>
+ <div style={{paddingBottom: '2em'}}>
<Segment style={{ padding: '0 0 2em 0' }} vertical basic>
<Container>
<Header dividing as='h1'
diff --git a/src/components/pages/Trainees.js b/src/components/pages/Trainees.js
index 7010e37..b508458 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, Responsive } from 'semantic-ui-react';
+import { Container, Table, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getTrainees, getStaffEvents } from '../../actions/statistics';
@@ -9,13 +9,6 @@ class Trainees extends Component {
this.props.getStaffEvents();
}
- // Number of visited events
- VisitedStatusNumber(trainee) {
- return (this.props.events.filter((event) => {
- return event.visitors.includes(trainee.id)
- })).length;
- }
-
// Every event with visit status in table cells
renderVisitedStatus(trainee) {
return (this.props.events.map((event) => {
@@ -47,21 +40,6 @@ class Trainees extends Component {
);
});
}
- // Only visit number rendered
- renderTraineesWithVisitNum() {
- 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>
- );
- });
- }
// Column for each event
renderTableHeaderEvents() {
@@ -75,49 +53,25 @@ class Trainees extends Component {
render() {
return (
- <Container textAlign='center'>
- {/* Rendered on larger screens */}
- <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.renderTableHeaderEvents() }
- </Table.Row>
- </Table.Header>
- <Table.Body>
- {this.props.trainees ?
- this.renderTraineesWithEvents()
- :
- 'Nincsenek kĂŠpzĹdĹk'
- }
- </Table.Body>
- </Table>
- </Responsive>
- {/* Rendered on mobile */}
- <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.renderTraineesWithVisitNum()
- :
- 'Nincsenek kĂŠpzĹdĹk'
- }
- </Table.Body>
- </Table>
- </Responsive>
+ <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>
+ { this.renderTableHeaderEvents() }
+ </Table.Row>
+ </Table.Header>
+ <Table.Body>
+
+ {this.props.trainees ?
+ this.renderTraineesWithEvents()
+ :
+ 'Nincsenek kĂŠpzĹdĹk'
+ }
+ </Table.Body>
+ </Table>
</Container>
);
}
--
GitLab