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

Target

Select target project
  • kszk/devteam/kszkepzes/old/kszkepzes-frontend
  • kbgergely/kszkepzes-frontend
2 results
Show changes
Showing
with 2167 additions and 809 deletions
src/components/images/kszk_with_shadow.png

251 KiB

import { Button, Container, Header, Item, Label } from 'semantic-ui-react';
import React, { Component } from 'react';
import { Container, Header, Item, Button, Label } 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 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);
}
render() {
const { id, signed, 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>
<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
);
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'>
<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>
<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>
{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}{' '}
</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
);
import React, { Component } from 'react';
import {
Container,
Item,
Button,
Comment,
Container,
Divider,
Form,
Header,
Item,
Segment,
Table,
Icon,
Checkbox,
Popup,
Grid,
} 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 } from '../../actions/notes';
import TraineeTableRow from './TraineeTableRow';
} 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) {
......@@ -27,40 +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;
const note = this.props.actualNote;
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>
);
}
......@@ -69,19 +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>
</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 "";
});
}
......@@ -89,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.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 });
}}
>
Edit
{" "}
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);
}
}
>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>
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>
);
}
......@@ -170,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,
......
import React, { Component } from 'react';
import {
Button,
Comment,
Table,
Dropdown,
Form,
Grid,
Icon,
Popup,
Grid,
Button,
Form,
Dropdown,
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';
import { visitorChange, submitVisitors } from '../../actions/statistics';
import { writeNote, clearWrite, postEventNote } from '../../actions/notes';
const visitStates = [
{
......@@ -25,8 +26,8 @@ const visitStates = [
{
text: 'Nem',
value: 'No',
}
]
},
];
class TraineeTableRow extends Component {
constructor(props) {
......@@ -37,105 +38,129 @@ class TraineeTableRow extends Component {
};
}
triggerAdd = () => this.setState({ ...this.state, showAddPopup: !this.state.showAddPopup})
triggerMore = () => this.setState({ ...this.state, showMorePopup: !this.state.showMorePopup })
// 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, 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);
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>
{trainee.full_name}
</Table.Cell>
{!this.props.edit ?
<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'>
<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={isVisitor ? 'Visitor' : isAbsent ? 'Absent' : 'No'}
defaultValue={visitorStatusDropdown}
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 */}
<Table.Cell>
<Grid>
<Grid.Row>
<Grid.Column floated='left' width={8} textAlign='left'>
{notes.length > 0 ?
{/* Note text */}
<Grid.Column floated="left" width={8}>
{notes.length > 0 ? (
<Comment>
<Comment.Content>
<Comment.Author>{notes[0].created_by_name}</Comment.Author>
<Comment.Text>
{notes[0].note.length > 50 ? notes[0].note.slice(0, 50).concat('...')
:
notes[0].note }
<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
}
) : null}
</Grid.Column>
<Grid.Column floated='right' width={3} textAlign='right'>
{notes.length > 0 ?
{/* 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((note) => {
return (
<Comment.Content>
<Comment.Author>{note.created_by_name}</Comment.Author>
<Comment.Text>
{note.note}
</Comment.Text>
</Comment.Content>
);
})}
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}
) : null}
<Popup
trigger={<Button icon='plus' onClick={this.triggerAdd}/>}
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)}
onChange={(e) => this.props.writeNote(e)}
/>
<Button
onClick={() => {
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'
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>
......@@ -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);
import { Button, Container, Table } from 'semantic-ui-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 { Container, Table, Button } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getStaffEvents, deleteEvent } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
import moment from 'moment';
class Events extends Component {
componentWillMount() {
UNSAFE_componentWillMount() {
this.props.getStaffEvents();
}
renderEvents() {
return this.props.events.map((event) =>
{ return (
<Table.Row>
<Table.Cell>
<Link to={`events/${event.id}`}>
{event.name}
</Link>
return this.props.events.map((event) => (
<Table.Row key={event.id}>
<Table.Cell textAlign="center">
<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>
<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'
color="red"
compact
size='small'
size="small"
>
Delete
Törlés
</Button>
</Table.Cell>
</Table.Row>
);
});
));
}
render() {
return (
<Container textAlign='center'>
<Table color='blue' 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 />
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.events ? this.renderEvents() : 'Nincs még alaklom beírva'}
</Table.Body>
</Table>
<Container textAlign="center">
<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>
);
......@@ -62,4 +76,6 @@ class Events extends Component {
const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(Events);
export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
Events
);
import React, { Component } from 'react';
import { Container, Header, Segment, Divider } from 'semantic-ui-react';
import './Groups.css';
export default class Groups extends Component {
import { Container, Header, Segment } from 'semantic-ui-react';
import React, { Component } from 'react';
import GroupCard from '../extra/GroupCard';
import { connect } from 'react-redux';
import { getGroups } from '../../actions/groups';
class Groups extends Component {
UNSAFE_componentWillMount() {
this.props.getGroups();
}
render() {
return (
<div>
<Segment inverted textAlign='center' vertical>
<Segment inverted textAlign="center" vertical>
<Container>
<Header
as='h1'
content='Köreink'
as="h1"
content="Köreink"
inverted
style={{
fontSize: '3em',
......@@ -22,70 +31,26 @@ export default class Groups extends Component {
</Container>
</Segment>
<Segment style={{ padding: '8em 0em' }} vertical>
<Segment style={{ padding: '1em 0em 5em' }} vertical>
<Container text>
<Header as='h3' style={{ fontSize: '2em' }}>DevTeam</Header>
<p className='paragraph'>
A DevTeam a KSZK fejlesztő köre. Az informatika számos területével foglalkoznak, többek között például alkalmazás- és mobilszoftver fejlesztéssel, weblapkészítéssel. Ezen felül találkozhatsz mikrokontrollerek programozásával, legyen az akár Raspberry Pi vagy Arduino. Saját ötleteid megvalósításában is szívesen nyújtanak segítő kezet, illetve egyes gyűléseiken gyorstalpalókat tartanak, hogy az érdeklődők mielőbb be tudjanak csatlakozni a munkába.
</p>
<p className='paragraph'>
Jelenlegi projektjeik közé tartozik egy Schönherz szintű kölcsönzési rendszer kialakítása, egy gyakorlóoldal készítése, melyen egyetemi tárgyak ZH-ira, vizsgáira lehet készülni, a tanuló helyiségek foglaltságát vizsgáló rendszer bevezetése, de szívesen viszik érdeklődő, lelkes tagjaik új projektötleteit is.
</p>
<p className='paragraph'>
A kör szeretettel vár mindenkit, legyen akár profi fejlesztő, vagy olyan, aki csak most ismerkedik a fejlesztés szépségeivel náluk mindenki talál a képességeinek megfelelő elfoglaltságot.
</p>
<Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
<Header as='h3' style={{ fontSize: '2em' }}>Hallgatói Tudásbázis</Header>
<p className='paragraph'>
A HaT (Hallgatói Tudásbázis) a VIK Wiki adminisztrációjáért, illetve üzemeltetéséért, fejlesztéséért felelős kör. Nekik köszönhető a Wiki rendezett állapota. Odafigyelnek , hogy kövessék a szerkesztői szokásokat, és rendszeresen felmérik, milyen újításra van kereslet. Azoknak a jelentkezését várják, akik nem riadnak vissza egy (rosszabb napjain) napi ötezer oldalmegtekintést produkáló rendszer ápolgatásától.
</p>
<Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
<Header as='h3' style={{ fontSize: '2em' }}>NETeam</Header>
<p className='paragraph'>
A NETeam foglalkozik a kollégiumi hálózati infrastruktúra üzemeltetésével és fejlesztésével. Biztosítják a hálózat folyamatos működését, követik az új hálózati technológiák alakulását, igyekeznek gyakorlatban is kipróbálni őket, alkalomadtán pedig cégekkel kapcsolatot tartva vesznek részt új megoldások tesztelésében is.
</p>
<p className='paragraph'>
A Schönherzben a 90-es évek óta üzemelteti a Házat lefedő hálózatot a KSZK, mely azóta többször teljes cserén esett át. A KSZK reszorttá válása előtt a NETeam egy erre szakosodott csoportja volt, 2014 óta pedig önálló körként folytatja tevékenységét. A kör tagjai hagyományosan a NetAdmin és segéd-NetAdminok, akik a kollégiumi hálózat fenntartásáért felelősek, illetve a Netikai Bizottság elnöke és tagjai, akik a hálózathasználati szabályzatot tartatják be, illetve a hálózathasználati szabályzattal szemben elkövetett kihágásokat felügyelik és szankcionálják.
</p>
<p className='paragraph'>
Az ide kerülőknek lehetőségük van bekapcsolódni az ISO/OSI modell majdnem minden rétegében működő szolgáltatások üzemeltetésébe és fejlesztésébe, amit szolgáltatástól függően akár az egész karon használnak. Ilyen például a Cisco eszközök konfigurációja, WiFi hálózat, VoIP, VPN, DNS/Dinamikus DNS üzemeltetése, fejlesztése, felhasználói adatbázis kezelése, forgalommonitorozás. Ezek széleskörű rálátást engednek egy komplex hálózatra és a használt technológiák működésére. A használt hálózattól függetlenül kialakított router laborban pedig lehetőség van szinte bármilyen, az iparban használt switching/routing megoldás próba szintű felépítésére.
</p>
<p className='paragraph'>
Jelenleg várható legnagyobb projektjük a Házat teljes egészében lefedő WiFi hálózat kiépítése lesz, de a következő évben kilátásban van a Software Defined Networking megoldásokkal való ismerkedés, illetve a router labor továbbfejlesztése is.
</p>
<p className='paragraph'>
Aki csatlakozik a körbe és hálózatot vagy szolgáltatásokat üzemeltet, fejleszt, felelősséggel fog tartozni az általa irányított rendszerért, ezzel pedig fontos része lesz a Schönherzes közéletnek. Ez a felelősség, az ezzel járó nem kizárólag szakmai tapasztalat és technikai tudás pedig egy későbbi önéletrajzban is olyan tényező tud lenni, amivel kevés frissen végzett hálózati szakember rendelkezik.
</p>
<Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
<Header as='h3' style={{ fontSize: '2em' }}>SecurITeam</Header>
<p className='paragraph'>
A SecurITeam-ben te is megismerkedhetsz az IT biztonságban használt technikákkal: weboldalakat, szervereket, zárakat és még hardvereket is törnek.
</p>
<p className='paragraph'>
Csináltál egy weboldalt vagy appot, de nem vagy meggyőződve arról, hogy biztonságos? Náluk mind a támadó, mind a védekező oldal technikáiról tanulhatsz, és ki is próbálhatod a tudásodat élőben. Az SQL injection, programok visszafejtése és exploitálása, webes alkalmazások biztonságának vizsgálata, ismert támadások (pl. Shellshock, Meltdown) kipróbálása, gyenge titkosítások megkerülése, valamint a privacy védelme mind olyan dolgok, amivel ez a kör foglalkozik. A szoftveres témák mellett a fizikai biztonságra is hangsúlyt fektetnek, legyen az Bluetooth sniffing, rádiós lehallgatás, RFID klónozás vagy lockpicking, náluk megtalálod ez ehhez szükséges eszközöket és szaktudást!
</p>
<p className='paragraph'>
A kör előadásokat, tanfolyamokat és workshopokattart, illetve a Schönherzes infrastruktúra biztonságát rendszeresen pentestekkel ellenőrzik.
</p>
<p className='paragraph'>
A körben lehetőséged adódik arra, hogy a korábban felsorolt tevékenységek bármelyikével foglalkozz, tanulj, versenyezz IT biztonsági versenyeken (CTF), illetve a Wargame fejlesztésébe is be tudsz csatlakozni.
</p>
<Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
<Header as='h3' style={{ fontSize: '2em' }}>Sysadmin</Header>
<p className='paragraph'>
A Sysadmin a Schönherz szerverüzemeltetésével foglalkozó öntevékeny köre. A kollégiumban működő IT szolgáltatásokat nyújtó infrastruktúrát ők felügyelik, fejlesztik. Az általuk használt szoftverek között megtalálhatóak Linux, BSD, Solaris valamint Windows alapú megoldások is. Az infrastruktúra VPN szerverének segítségével akár otthonról is hozzáférhetsz azokhoz az erőforrásokhoz, amelyek csak az egyetemi hálózatból elérhetők. 2014 végén indult a legfiatalabb, RemoteApp névre hallgató szolgáltatásuk, mellyel úgy értheted el az oktatásban is használt (és egyéb) szoftvereket, hogy nem szükséges azokat telepítened a gépedre. A felhasználói igények alapján folyamatosan bővítik szolgáltatásaik palettáját.
</p>
<p className='paragraph'>
Minden félévben indítanak új projekteket. Jelenleg és a következő félévekben egy Docker (Kubernetes) alapú container cluster fejlesztésén és üzembe helyezésén, illetve konfiguráció menedzsment bevezetésén dolgoznak. Az új dolgok mellett persze komoly hangsúlyt fektetnek a jelenleg üzemelő szerverek folyamatos karbantartására is. Náluk megtanulhatod, hogyan kell egy több fizikai hosztból álló, körülbelül 150 virtuális szervert kiszolgáló virtualizációs clustert üzemeltetni, de akár a webhosting területén is fejlesztheted tudásod a Ház legnagyobb (~200 weboldat kiszolgáló) szerverének felügyelete során. Ha szeretnél a felszín mögé látni, és releváns szakmai tapasztalatot szerezni a területen, akkor köztük a helyed. Az előismeret nem követelmény, a lelkesedés igen.
</p>
{this.props.groups
// eslint-disable-next-line arrow-body-style
.map((item) => {
return (
<GroupCard
key={item.id}
label={item.name}
value={item.description}
/>
);
})}
</Container>
</Segment>
</div>
);
}
}
const mapStateToProps = ({ groups }) => ({ groups });
export default connect(mapStateToProps, { getGroups })(Groups);
......@@ -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;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
.news-extra {
color: grey;
font-size: 0.75em;
font-style: italic;
font-family: fantasy;
text-align: justify;
color: grey;
font-size: 0.75em;
font-style: italic;
font-family: fantasy;
text-align: justify;
}
.news-text {
font-size: 1.15em;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
font-size: 1.15em;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.