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
Hide whitespace changes
Inline Side-by-side
Showing
with 1064 additions and 836 deletions
src/components/pages/Events.js
View file @ 2eef83d2
import { Button, Container, Table } from 'semantic-ui-react';
import React, { Component } from '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 { Link } from 'react-router-dom';
import { Container, Table, Button } from 'semantic-ui-react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getStaffEvents, deleteEvent } from '../../actions/statistics'; import moment from 'moment';
import AddEventForm from '../forms/AddEventForm';
class Events extends Component { class Events extends Component {
UNSAFE_componentWillMount() { UNSAFE_componentWillMount() {
...@@ -12,56 +13,62 @@ class Events extends Component { ...@@ -12,56 +13,62 @@ class Events extends Component {
} }
renderEvents() { renderEvents() {
return this.props.events.map((event) => { return this.props.events.map((event) => (
return ( <Table.Row key={event.id}>
<Table.Row key={event.id}> <Table.Cell textAlign="center">
<Table.Cell textAlign='center'> <Link to={`events/${event.id}`}>{event.name}</Link>
<Link to={`events/${event.id}`}> </Table.Cell>
{event.name} <Table.Cell textAlign="center">
</Link> {moment(event.date).format('LL')}
</Table.Cell> </Table.Cell>
<Table.Cell textAlign='center'> <Table.Cell textAlign="center">{event.visitor_number}</Table.Cell>
{moment(event.date).format('LL')} <Table.Cell textAlign="center">
</Table.Cell> <Button
<Table.Cell textAlign='center'> onClick={() => this.props.deleteEvent(event)}
{event.visitor_number} color="red"
</Table.Cell> compact
<Table.Cell textAlign='center'> size="small"
<Button >
onClick={() => this.props.deleteEvent(event)} Törlés
color='red' </Button>
compact </Table.Cell>
size='small' </Table.Row>
> ));
Törlés
</Button>
</Table.Cell>
</Table.Row>
);
});
} }
render() { render() {
return ( return (
<Container textAlign='center'> <Container textAlign="center">
<div style={{overflowX: 'scroll'}}> <div style={{ overflowX: 'scroll' }}>
<Table color='blue' unstackable celled selectable compact <Table
size='small'> color="blue"
unstackable
celled
selectable
compact
size="small"
>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell textAlign='center'>Alkalom neve</Table.HeaderCell> <Table.HeaderCell textAlign="center">
<Table.HeaderCell textAlign='center'>Dátum</Table.HeaderCell> Alkalom neve
<Table.HeaderCell textAlign='center'>Jelen voltak</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell textAlign="center">Dátum</Table.HeaderCell>
<Table.HeaderCell textAlign="center">
Jelen voltak
</Table.HeaderCell>
<Table.HeaderCell /> <Table.HeaderCell />
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{this.props.events ? this.renderEvents() : 'Nincs még alkalom beírva'} {this.props.events
? this.renderEvents()
: 'Nincs még alkalom beírva'}
</Table.Body> </Table.Body>
</Table> </Table>
</div> </div>
<br /> <br />
<AddEventForm/> <AddEventForm />
</Container> </Container>
); );
} }
...@@ -69,4 +76,6 @@ class Events extends Component { ...@@ -69,4 +76,6 @@ class Events extends Component {
const mapStateToProps = ({ events: { events }, user }) => ({ events, user }); const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(Events); export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
Events
);
src/components/pages/Groups.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Container, Header, Segment } from 'semantic-ui-react';
import './Groups.css'; import './Groups.css';
import GroupCard from '../extra/GroupCard'
import { Container, Header, Segment } from 'semantic-ui-react';
import React, { Component } from 'react';
import GroupCard from '../extra/GroupCard';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getGroups } from '../../actions/groups'; import { getGroups } from '../../actions/groups';
class Groups extends Component { class Groups extends Component {
UNSAFE_componentWillMount() { UNSAFE_componentWillMount() {
this.props.getGroups() this.props.getGroups();
} }
render() { render() {
return ( return (
<div> <div>
<Segment inverted textAlign='center' vertical> <Segment inverted textAlign="center" vertical>
<Container> <Container>
<Header <Header
as='h1' as="h1"
content='Köreink' content="Köreink"
inverted inverted
style={{ style={{
fontSize: '3em', fontSize: '3em',
...@@ -30,12 +30,20 @@ class Groups extends Component { ...@@ -30,12 +30,20 @@ class Groups extends Component {
/> />
</Container> </Container>
</Segment> </Segment>
<Segment style={{ padding: '1em 0em 5em' }} vertical> <Segment style={{ padding: '1em 0em 5em' }} vertical>
<Container text> <Container text>
{ this.props.groups.map(item => { {this.props.groups
return <GroupCard key={item.id} label={item.name} value={item.description}/> // eslint-disable-next-line arrow-body-style
})} .map((item) => {
return (
<GroupCard
key={item.id}
label={item.name}
value={item.description}
/>
);
})}
</Container> </Container>
</Segment> </Segment>
</div> </div>
......
src/components/pages/Home.css
View file @ 2eef83d2
...@@ -10,4 +10,28 @@ ...@@ -10,4 +10,28 @@
-webkit-text-fill-color: white; -webkit-text-fill-color: white;
} }
.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;
}
src/components/pages/Home.js
View file @ 2eef83d2
import React, { Component } from 'react'; import "./Home.css";
import { import {
Button, Button,
Container, Container,
Divider,
Header, Header,
Icon, Icon,
Segment,
Image, Image,
Divider,
Responsive, Responsive,
} from 'semantic-ui-react'; Segment,
import { connect } from 'react-redux'; } from "semantic-ui-react";
import Slider from 'react-slick'; /* eslint-disable react/jsx-props-no-spreading */
import { Link } from 'react-router-dom'; import React, { Component } from "react";
import './Home.css';
import KSZKbiglogo from '../images/kszk_with_shadow.png'; import KSZKbiglogo from "../images/kszk_with_shadow.png";
import { getImages } from '../../actions/home' import { Link } from "react-router-dom";
import Slider from "react-slick";
import { connect } from "react-redux";
import { getImages } from "../../actions/home";
const settings = { const settings = {
dots: false, dots: false,
...@@ -27,7 +30,7 @@ const settings = { ...@@ -27,7 +30,7 @@ const settings = {
slidesToScroll: 1, slidesToScroll: 1,
centerMode: true, centerMode: true,
lazyLoad: true, lazyLoad: true,
initialSlide: Math.floor((Math.random() * 32) + 1), initialSlide: Math.floor(Math.random() * 32 + 1),
}; };
class Home extends Component { class Home extends Component {
...@@ -36,302 +39,375 @@ class Home extends Component { ...@@ -36,302 +39,375 @@ class Home extends Component {
} }
renderSlider(view, imageWidth) { renderSlider(view, imageWidth) {
if(view === 0) { if (view === 0) {
return ( return (
<div> <div>
{!!this.props.images}
<Slider {...settings}> <Slider {...settings}>
{ {this.props.images &&
this.props.images.map(image => ( this.props.images.map((image) => (
<div key={image}> <div key={image}>
<img src={image.image} width={imageWidth} alt='' /> <img src={image.image} width={imageWidth} alt="" />
</div> </div>
)) ))}
}
</Slider> </Slider>
<div className='car-text-kszk'> <div className="car-text-kszk">
<Segment textAlign='center' vertical> <Segment textAlign="center" vertical>
<Header <Header
as='h1' as="h1"
content='Üdvözlünk a' content="Üdvözlünk a"
inverted inverted
style={{ style={{
fontSize: '3vw', fontSize: "3vw",
fontWeight: 'normal', fontWeight: "normal",
marginBottom: 0, marginBottom: 0,
}} }}
/> />
<Header <Header
as='h1' as="h1"
content='Kollégiumi Számítástechnikai Kör' content="Kollégiumi Számítástechnikai Kör"
inverted inverted
style={{ style={{
fontSize: '3.5vw', fontSize: "3.5vw",
fontWeight: 'bold', fontWeight: "bold",
marginBottom: '0.5vw', marginBottom: "0.5vw",
marginTop: '0.5vw', marginTop: "0.5vw",
}} }}
/> />
<Header <Header
as='h1' as="h1"
content='újoncképzésének weboldalán!' content="újoncképzésének weboldalán!"
inverted inverted
style={{ style={{
fontSize: '3vw', fontSize: "3vw",
fontWeight: 'normal', fontWeight: "normal",
marginBottom: 0, marginBottom: 0,
marginTop: '0.5vw', marginTop: "0.5vw",
}} }}
/> />
<Image <Image
verticalAlign='middle' verticalAlign="middle"
src={KSZKbiglogo} src={KSZKbiglogo}
style={{ marginTop: '1vw', width: '17%' }} style={{ marginTop: "1vw", width: "17%" }}
/> />
<Header <Header
as='h1' as="h1"
content='Szeretettel várunk a KSZKépzésre!' content="Szeretettel várunk a KSZKépzésre!"
inverted inverted
style={{ style={{
fontSize: '3vw', fontSize: "3vw",
fontWeight: 'normal', fontWeight: "normal",
marginBottom: 0, marginBottom: 0,
marginTop: '1vw', marginTop: "1vw",
}} }}
/> />
<Container> <Container>
{ {this.props.user.id ? (
this.props.user.id ? <Button
<Button as={Link}
as={Link} to="/profile"
to='/profile' primary
primary size="huge"
size='huge' style={{
style={{ fontSize: "2vw",
fontSize: '2vw', marginTop: "1vw",
marginTop: '1vw', marginBottom: "1vw",
marginBottom: '1vw', fontWeight: "bold",
fontWeight: 'bold', letterSpacing: "0.13vw",
letterSpacing: '0.13vw' }}
}} >
> Jelentkezés
Jelentkezés <Icon name="right arrow" />
<Icon name='right arrow' /> </Button>
</Button> ) : (
: <Button
<Button href="/oidc/authenticate/"
href='/api/v1/login/authsch/' primary
primary size="huge"
size='huge' style={{
style={{ fontSize: "2vw",
fontSize: '2vw', marginTop: "1vw",
marginTop: '1vw', marginBottom: "1vw",
marginBottom: '1vw', fontWeight: "bold",
fontWeight: 'bold', letterSpacing: "0.13vw",
letterSpacing: '0.13vw' }}
}} >
> Bejelentkezés
Bejelentkezés <Icon name="right arrow" />
<Icon name='right arrow' /> </Button>
</Button> )}
}
</Container> </Container>
</Segment> </Segment>
</div> </div>
</div> </div>
) );
} else if (view === 1) { }
if (view === 1) {
return ( return (
<div> <div>
<Slider {...settings}> <Slider {...settings}>
{ {this.props.images.map((image) => (
this.props.images.map(image => ( <div key={image}>
<div key={image}> <img src={image.image} width={imageWidth} alt="" />
<img src={image.image} width={imageWidth} alt='' /> </div>
</div> ))}
))
}
</Slider> </Slider>
<div className='car-text-kszk'> <div className="car-text-kszk">
<Segment textAlign='center' vertical> <Segment textAlign="center" vertical>
<Header <Header
as='h1' as="h1"
content='Üdvözlünk a' content="Üdvözlünk a"
inverted inverted
style={{ style={{
fontSize: '5vw', fontSize: "5vw",
fontWeight: 'bold', fontWeight: "bold",
marginBottom: 0, marginBottom: 0,
}} }}
/> />
<Header <Header
as='h1' as="h1"
content='Kollégiumi Számítástechnikai Kör' content="Kollégiumi Számítástechnikai Kör"
inverted inverted
style={{ style={{
fontSize: '6vw', fontSize: "6vw",
fontWeight: 'bold', fontWeight: "bold",
marginBottom: '0.5vw', marginBottom: "0.5vw",
marginTop: '0.5vw', marginTop: "0.5vw",
}} }}
/> />
<Header <Header
as='h1' as="h1"
content='újoncképzésének weboldalán!' content="újoncképzésének weboldalán!"
inverted inverted
style={{ style={{
fontSize: '5vw', fontSize: "5vw",
fontWeight: 'bold', fontWeight: "bold",
marginBottom: 0, marginBottom: 0,
marginTop: '0.5vw', marginTop: "0.5vw",
}} }}
/> />
<Image <Image
className='kszklogo' className="kszklogo"
verticalAlign='middle' verticalAlign="middle"
src={KSZKbiglogo} src={KSZKbiglogo}
style={{ marginTop: '1vw', width: '20%' }} style={{ marginTop: "1vw", width: "20%" }}
/> />
<Header <Header
as='h1' as="h1"
content='Szeretettel várunk a KSZKépzésre!' content="Szeretettel várunk a KSZKépzésre!"
inverted inverted
style={{ style={{
fontSize: '5vw', fontSize: "5vw",
fontWeight: 'bold', fontWeight: "bold",
marginBottom: 0, marginBottom: 0,
marginTop: '1vw', marginTop: "1vw",
}} }}
/> />
<Container> <Container>
{ {this.props.user.id ? (
this.props.user.id ? <Button
<Button as={Link}
as={Link} to="/profile"
to='/profile' primary
primary size="massive"
size='massive' style={{
style={{ fontSize: "4vw",
fontSize: '4vw', marginTop: "1.5vw",
marginTop: '1.5vw', marginBottom: "1vw",
marginBottom: '1vw', fontWeight: "bold",
fontWeight: 'bold', letterSpacing: "0.15vw",
letterSpacing: '0.15vw' }}
}} >
> Jelentkezés
Jelentkezés <Icon name="right arrow" />
<Icon name='right arrow' /> </Button>
</Button> ) : (
: <Button
<Button href="/oidc/authenticate/"
href='/api/v1/login/authsch/' primary
primary size="massive"
size='massive' style={{
style={{ fontSize: "4vw",
fontSize: '4vw', marginTop: "1vw",
marginTop: '1vw', marginBottom: "1vw",
marginBottom: '1vw', fontWeight: "bold",
fontWeight: 'bold', letterSpacing: "0.15vw",
letterSpacing: '0.15vw' }}
}} >
> Bejelentkezés
Bejelentkezés <Icon name="right arrow" />
<Icon name='right arrow' /> </Button>
</Button> )}
}
</Container> </Container>
</Segment> </Segment>
</div> </div>
</div> </div>
) );
} }
} }
renderText(){ // eslint-disable-next-line class-methods-use-this
const kszk_age = new Date().getFullYear() - 1976 renderText() {
const kszk_age = new Date().getFullYear() - 1976;
return ( return (
<Segment style={{ padding: '8em 0em', fontFamily: 'Arial' }} vertical> <Segment style={{ padding: "1em 0em", fontFamily: "Arial" }} vertical>
<Container text> <Container text>
<Header as='h3' style={{ fontSize: '2em', fontFamily: 'Arial' }}> <Segment inverted color="green" tertiary>
<Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
Bemutatkozó videók
</Header>
<p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
A gólyakörtére készített videóinkat megnézhetitek a{" "}
<a
href="https://www.youtube.com/@kollegiumiszamitastechnika470/videos"
target="_blank"
rel="noopener noreferrer"
style={{ color: "white", textDecoration: "underline" }}
>
YouTube csatornánkon
</a>
!
</p>
</Segment>
<Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
Kik is vagyunk mi? Kik is vagyunk mi?
</Header> </Header>
<p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}> <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
A Kollégiumi Számítástechnikai Kör az Egyetem legrégebben működő A Kollégiumi Számítástechnikai Kör az Egyetem legrégebben működő és
és legnagyobb aktív, informatikával foglalkozó öntevékeny legnagyobb aktív, informatikával foglalkozó öntevékeny
csoportosulása, idén ünnepeljük {kszk_age}. születésnapunkat. A patinás csoportosulása, idén ünnepeljük {kszk_age}. születésnapunkat. A
név mögött vidám hangulatú, alkotó kedvű csapat rejlik, mely a Kar patinás név mögött vidám hangulatú, alkotó kedvű csapat rejlik, mely
jó szakmai képességű, számítástechnika iránt kiemelten érdeklődő a Kar jó szakmai képességű, számítástechnika iránt kiemelten
tagjaiból verbuválódott, és bővül évente új tehetségekkel, lelkes érdeklődő tagjaiból verbuválódott, és bővül évente új tehetségekkel,
informatikusokkal, villamosmérnökökkel. lelkes informatikusokkal, villamosmérnökökkel.
</p> </p>
<Button as={Link} size='large' to='/groups'> <Button as={Link} size="large" to="/groups">
Ismerd meg a köreinket! <Icon name='right arrow' /> Ismerd meg a köreinket! <Icon name="right arrow" />
</Button> </Button>
<Divider as='h4' className='header' style={{ margin: '3em 0em' }} /> <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
<Header as='h3' style={{ fontSize: '2em', fontFamily: 'Arial' }}> <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
Lehetőségek Lehetőségek
</Header> </Header>
<p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}> <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
A KSZK a lehetőségek tárháza, a hely ahol Te – leendő mérnök – A KSZK a lehetőségek tárháza, a hely ahol Te – leendő mérnök –
minden területen kipróbálhatod, továbbképezheted magad. Nálunk minden területen kipróbálhatod, továbbképezheted magad. Nálunk
kibontakoztathatod kreativitásod, tapasztalatot, mérnöki kibontakoztathatod kreativitásod, tapasztalatot, mérnöki szemléletet
szemléletet szerezhetsz, miközben az ún. soft skill-jeidet is szerezhetsz, miközben az ún. soft skill-jeidet is fejlesztheted. Ha
fejlesztheted. Ha számodra a szakma hivatás, ha szeretsz új számodra a szakma hivatás, ha szeretsz új dolgokat alkotni vagy csak
dolgokat alkotni vagy csak jó társaságra vágysz, a legjobb helyre jó társaságra vágysz, a legjobb helyre kerültél. A reszort körei a
kerültél. A reszort körei a szakma egy-egy meghatározó területével szakma egy-egy meghatározó területével foglalkoznak a fejlesztés és
foglalkoznak a fejlesztés és üzemeltetés területén. üzemeltetés területén.
</p> </p>
<Divider as='h4' className='header' style={{ margin: '3em 0em' }} /> <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
<Header as='h3' style={{ fontSize: '2em', fontFamily: 'Arial' }}> <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
Miért jó KSZK-snak lenni?
</Header>
<div
class="quote--container"
style={{ fontSize: "1.5em", fontFamily: "Arial" }}
>
<p class="quote">
Szerintem KSZK-snak jó lenni, mert rengeteget tanulok belőle.
Gyakorlok, hallok újdonságokat, kipróbálhatom magam mindenféle
szerepben, és közben még barátokat is szerzek. Ezek a barátságok,
tapasztalatok egyébként később is nagyon jól jönnek, például a
CV-mben egész erős fegyvertény, hogy ennyi mindent csináltam.
Tényleg rengeteget kaptam a reszorttól, szakmailag és emberileg
is. Ja, és szeretem, hogy a KSZK ilyen szabad, és abba kóstolok
bele, amibe akarok.
</p>
<p class="quote--author">&ndash; Feri</p>
</div>
<div
class="quote--container"
style={{ fontSize: "1.5em", fontFamily: "Arial" }}
>
<p class="quote">
A nulláról kezdtem a képzést és az egyetemi tanulmányaimat is,
semmilyen infós tudásom nem volt, de rengeteget fejlődtem a
KSZK-nak köszönhetően. Ezenkívül nem csak szakmai tudást
szereztem, hanem egy fantasztikus közösség részévé is váltam.
</p>
<p class="quote--author">&ndash; Patrik</p>
</div>
<div
class="quote--container"
style={{ fontSize: "1.5em", fontFamily: "Arial" }}
>
<p class="quote">
Amikor idejöttem egyetemre nem tudtam, hogy mennyire fogom
megtalálni a helyem. Aztán, elkezdtem megismerkedni a kari
közösséggel és barátokat szereztem, akik jelentős részét a
KSZK-ban ismertem meg, vagy velem csatlakozott ide. Együtt
foglalkozgatunk projektekkel, a Ház rendszereinek üzemeltetésével
és egyéb nagyon érdekes ügyes-bajos dolgokkal. Úgy érzem, hogy a
KSZK-ban igazán megtaláltam a helyem, mind emberileg, mind
szakmailag.
</p>
<p class="quote--author">&ndash; Mike</p>
</div>
<div
class="quote--container"
style={{ fontSize: "1.5em", fontFamily: "Arial" }}
>
<p class="quote">
Számtalan dologgal foglalkozunk, és tényleg azt csinálhatom, ami
csak érdekel. Emellett a KSZK-t a szívügyemnek tekintem, szerintem
a legjobb lehetőség a szakmai fejlődésen kívül életre szóló
barátságok alakítására.
</p>
<p class="quote--author">&ndash; Blint</p>
</div>
<Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
<Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
Képzésünk Képzésünk
</Header> </Header>
<p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}> <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
Kilenc alkalmas képzésünk végén Te is igazi KSZK-ssá válhatsz, Képzésünk végén Te is igazi KSZK-ssá válhatsz, hiszen rengeteg
hiszen rengeteg szakmai tudást igyekszünk átadni nektek. szakmai tudást igyekszünk átadni nektek. A képzésalkalmak rendkívül
A képzésalkalmak rendkívül jó hangulatban telnek, és a szociális jó hangulatban telnek, és a szociális irányultságú foglalkozások
irányultságú foglalkozások alatt egy nagyon jó csapat kovácsolódik alatt egy nagyon jó csapat kovácsolódik az érdeklődőkből. Az első
az érdeklődőkből. Az első képzés időpontja február 16. vasárnap 18:00, képzés időpontja február 20. csütörtök 18:00, ettől kezdve pedig
ettől kezdve pedig minden héten találkozunk ugyanabban az időpontban. minden héten egy közösségi és számos szakmai alkalom során
A képzés ideje alatt április 17-19 között rendezünk tábort. találkozunk. A képzésalkalmak után április 11-től 13-ig rendezünk
Az alkalmakon és a táboron kötelező a részvétel. tábort. Az közösségi alkalmakon és a táboron kötelező a részvétel.
</p> </p>
<Divider as='h4' className='header' style={{ margin: '3em 0em' }} /> <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
<Segment inverted color='red' tertiary> <Segment inverted color="red" tertiary>
<Header as='h3' style={{ fontSize: '2em', fontFamily: 'Arial' }}> <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
Korlátos férőhely Korlátos férőhely
</Header> </Header>
<p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}> <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
Általánosságban elmondható, hogy a KSZK tagjai rengeteg dologgal foglalkoznak Általánosságban elmondható, hogy a KSZK tagjai rengeteg dologgal
a hétköznapjaik során, hogy minden informatikai rendszer úgy működjön foglalkoznak a hétköznapjaik során, hogy minden informatikai
a kollégiumban, ahogy kell. Így van ez velünk képzőkkel is, emiatt rendszer úgy működjön a kollégiumban, ahogy kell. Így van ez
hetente csak egy képzésalkalmat tudunk tartani. Mivel az oktatóterem velünk képzőkkel is, emiatt a férőhelyek korlátosak.
férőhelyében korlátozott, ezért a képzésre maximum 35 embert tudunk befogadni.
</p> </p>
<p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}> <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
Sajnos előfordulhat olyan eset, hogy valaki már nem fér be a képzésre, Sajnos előfordulhat olyan eset, hogy valaki már nem fér be a
ezért kérünk titeket, hogy ennek tudatában jelentkezzetek majd. képzésre, ezért kérünk titeket, hogy ennek tudatában
Ilyen esetben reméljük ez nem szegi kedveteket és jövőre újra próbálkoztok majd! jelentkezzetek majd. Ilyen esetben reméljük ez nem szegi
kedveteket és jövőre újra próbálkoztok majd!
</p> </p>
</Segment> </Segment>
</Container> </Container>
</Segment> </Segment>
) );
} }
render() { render() {
return ( return (
<div> <div>
<Responsive minWidth={600} > <Responsive minWidth={600}>
<div className='car-image-kszk'> <div className="car-image-kszk">
<div></div> <div />
{ this.renderSlider(0, '120%') } {this.renderSlider(0, "120%")}
</div> </div>
{ this.renderText() } {this.renderText()}
</Responsive> </Responsive>
<Responsive maxWidth={600} > <Responsive maxWidth={600}>
<div className='car-image-kszk'> <div className="car-image-kszk">{this.renderSlider(1, "200%")}</div>
{ this.renderSlider(1, '200%') } {this.renderText()}
</div>
{ this.renderText() }
</Responsive> </Responsive>
</div> </div>
); );
...@@ -339,7 +415,8 @@ class Home extends Component { ...@@ -339,7 +415,8 @@ class Home extends Component {
} }
const mapStateToProps = ({ user, images }) => ({ const mapStateToProps = ({ user, images }) => ({
user, images user,
images,
}); });
export default connect(mapStateToProps, { getImages })(Home); export default connect(mapStateToProps, { getImages })(Home);
src/components/pages/Homework.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { import {
Button,
Container, Container,
Header, Header,
Segment,
Table,
Icon, Icon,
Message,
Button,
Label, Label,
Message,
Segment,
Table,
} from 'semantic-ui-react'; } from 'semantic-ui-react';
import { connect } from 'react-redux'; /* eslint-disable no-nested-ternary */
import moment from 'moment'; import React, { Component } from 'react';
import { import {
getTasks,
getSolutions,
getDocuments,
addTask, addTask,
setSelectedTask,
deleteTask, deleteTask,
getDocuments,
getProfiles, getProfiles,
getSolutions,
getTasks,
setSelectedTask,
} from '../../actions/homework'; } from '../../actions/homework';
import AddTaskForm from '../forms/AddTaskForm';
import AddSolutionForm from '../forms/AddSolutionForm'; import AddSolutionForm from '../forms/AddSolutionForm';
import SolutionDetailsForm from '../forms/SolutionDetailsForm'; import AddTaskForm from '../forms/AddTaskForm';
import ConfirmModal from '../forms/ConfirmModal';
import EditTaskForm from '../forms/EditTaskForm'; import EditTaskForm from '../forms/EditTaskForm';
import InfoModal from '../forms/InfoModal'; import InfoModal from '../forms/InfoModal';
import ConfirmModal from '../forms/ConfirmModal'; import SolutionDetailsForm from '../forms/SolutionDetailsForm';
import { connect } from 'react-redux';
import moment from 'moment';
// Display type for the Table Semantic UI component // Display type for the Table Semantic UI component
// {icon} {text} - Displayed for the student for each Task // {icon} {text} - Displayed for the student for each Task
...@@ -71,16 +73,17 @@ export const customMessage = (header, text, marginBottom, warning) => ( ...@@ -71,16 +73,17 @@ export const customMessage = (header, text, marginBottom, warning) => (
class Homework extends Component { class Homework extends Component {
componentDidMount() { componentDidMount() {
this.props.getTasks() this.props.getTasks();
this.props.getProfiles() this.props.getProfiles();
this.props.getSolutions() this.props.getSolutions();
this.props.getDocuments() this.props.getDocuments();
} }
// Returns a table style for the given task // Returns a table style for the given task
getTaskDisplayStyle(task) { getTaskDisplayStyle(task) {
const taskSolution = this.props.homeworks.solutions const taskSolution = this.props.homeworks.solutions.filter(
.filter(solution => solution.task === task.id) (solution) => solution.task === task.id
);
if (taskSolution.length === 0) { if (taskSolution.length === 0) {
if (moment().isBefore(task.deadline)) { if (moment().isBefore(task.deadline)) {
...@@ -105,27 +108,27 @@ class Homework extends Component { ...@@ -105,27 +108,27 @@ class Homework extends Component {
// given parameters separates the active/inactive tasks and normal/staff users // given parameters separates the active/inactive tasks and normal/staff users
renderTaskList(active, staff) { renderTaskList(active, staff) {
const { user, homeworks } = this.props; const { user, homeworks } = this.props;
const profileSolutions = homeworks.solutions const profileSolutions = homeworks.solutions.filter(
.filter(solution => solution.created_by === user.id); (solution) => solution.created_by === user.id
);
// Normal user // Normal user
if (!staff) { if (!staff) {
return homeworks.tasks return homeworks.tasks
.filter(task => moment().isBefore(task.deadline) === active) .filter((task) => moment().isBefore(task.deadline) === active)
.map(task => ( .map((task) => (
// Style // Style
<Table.Row <Table.Row
key={task.id} key={task.id}
warning={ warning={
displayTypes[this.getTaskDisplayStyle(task)].rowstyle.warning displayTypes[this.getTaskDisplayStyle(task)].rowstyle.warning
} }
positive={ positive={
displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive
} }
negative={ negative={
displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative
} }
> >
{/* Form component */} {/* Form component */}
<Table.Cell> <Table.Cell>
...@@ -143,68 +146,80 @@ class Homework extends Component { ...@@ -143,68 +146,80 @@ class Homework extends Component {
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Label color={ <Label
displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive ? color={
'green' displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive
: moment().isAfter(task.deadline) ? 'red' ? 'green'
: displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative ? 'red': null}> : moment().isAfter(task.deadline)
{task.bits} bit ? 'red'
: displayTypes[this.getTaskDisplayStyle(task)].rowstyle
.negative
? 'red'
: null
}
>
{task.bits} bit
</Label> </Label>
</Table.Cell> </Table.Cell>
{/* Status (Javításra vár, ...) */} {/* Status (Javításra vár, ...) */}
<Table.Cell> <Table.Cell>
<Icon name={displayTypes[this.getTaskDisplayStyle(task)].icon} />{' '} <Icon name={displayTypes[this.getTaskDisplayStyle(task)].icon} />{' '}
{displayTypes[this.getTaskDisplayStyle(task)].text} {displayTypes[this.getTaskDisplayStyle(task)].text}
{profileSolutions.filter(solution => solution.task === task.id) {profileSolutions.filter(
&& profileSolutions.filter(solution => solution.task === task.id).slice(-1)[0] (solution) => solution.task === task.id
&& profileSolutions.filter(solution => solution.task === task.id).slice(-1)[0].note ) &&
? profileSolutions
<div> .filter((solution) => solution.task === task.id)
<InfoModal .slice(-1)[0] &&
button={ profileSolutions
<button id='tasknote'> .filter((solution) => solution.task === task.id)
(Megjegyzés <Icon name='external' />) .slice(-1)[0].note ? (
</button> <div>
} <InfoModal
title='Megjegyzés a feladathoz' button={
content={profileSolutions.filter(solution => <button type="button" id="tasknote">
solution.task === task.id).slice(-1)[0].note} (Megjegyzés <Icon name="external" />)
onAccept={() => {}} </button>
/> }
</div> title="Megjegyzés a feladathoz"
: '' content={
} profileSolutions
.filter((solution) => solution.task === task.id)
.slice(-1)[0].note
}
onAccept={() => {}}
/>
</div>
) : (
''
)}
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
)); ));
} }
// Staff // Staff
const deleteButton = ( const deleteButton = (
<Button <Button inverted style={{ marginRight: '2em' }} color="red">
inverted <Icon name="x" /> Törlés
style={{ marginRight: '2em' }}
color='red'
>
<Icon name='x' /> Törlés
</Button> </Button>
); );
return this.props.homeworks.tasks return this.props.homeworks.tasks
.filter(task => moment().isBefore(task.deadline) === active) .filter((task) => moment().isBefore(task.deadline) === active)
.map(task => ( .map((task) => (
<Table.Row <Table.Row
key={task.id} key={task.id}
warning={ warning={
displayTypes[this.getTaskDisplayStyle(task)].rowstyle.warning displayTypes[this.getTaskDisplayStyle(task)].rowstyle.warning
} }
positive={ positive={
displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive
} }
negative={ negative={
displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative
} }
> >
{/* Form */} {/* Form */}
<Table.Cell> <Table.Cell>
...@@ -220,16 +235,14 @@ class Homework extends Component { ...@@ -220,16 +235,14 @@ class Homework extends Component {
</Table.Cell> </Table.Cell>
{/* Bits */} {/* Bits */}
<Table.Cell> <Table.Cell>
<Label color={null}> <Label color={null}>{task.bits} bit</Label>
{task.bits} bit </Table.Cell>
</Label>
</Table.Cell>
{/* Admin buttons */} {/* Admin buttons */}
<Table.Cell> <Table.Cell>
<EditTaskForm onClick={() => this.props.setSelectedTask(task)} /> <EditTaskForm onClick={() => this.props.setSelectedTask(task)} />
<ConfirmModal <ConfirmModal
button={deleteButton} button={deleteButton}
text='törlöd a kiválaszott feladatot a már beadott megoldásokkal együtt' text="törlöd a kiválaszott feladatot a már beadott megoldásokkal együtt"
onAccept={() => this.props.deleteTask(task)} onAccept={() => this.props.deleteTask(task)}
/> />
</Table.Cell> </Table.Cell>
...@@ -253,17 +266,16 @@ class Homework extends Component { ...@@ -253,17 +266,16 @@ class Homework extends Component {
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell> <Table.HeaderCell>
<Icon circular name='home' /> <Icon circular name="home" />
Feladat megnevezése / beadása Feladat megnevezése / beadása
</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell> <Table.HeaderCell>
<Icon circular name='calendar' /> <Icon circular name="calendar" />
Beadási határidő Beadási határidő
</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell width={2}> <Table.HeaderCell width={2}></Table.HeaderCell>
</Table.HeaderCell>
<Table.HeaderCell> <Table.HeaderCell>
<Icon circular name='tasks' /> <Icon circular name="tasks" />
Állapot Állapot
</Table.HeaderCell> </Table.HeaderCell>
</Table.Row> </Table.Row>
...@@ -277,17 +289,16 @@ class Homework extends Component { ...@@ -277,17 +289,16 @@ class Homework extends Component {
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell> <Table.HeaderCell>
<Icon circular name='home' /> <Icon circular name="home" />
Feladat megnevezése / Beadások állapota Feladat megnevezése / Beadások állapota
</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell> <Table.HeaderCell>
<Icon circular name='calendar' /> <Icon circular name="calendar" />
Beadási határidő Beadási határidő
</Table.HeaderCell> </Table.HeaderCell>
<Table.HeaderCell width={2}> <Table.HeaderCell width={2}></Table.HeaderCell>
</Table.HeaderCell>
<Table.HeaderCell> <Table.HeaderCell>
<Icon circular name='edit' /> <Icon circular name="edit" />
Módosítás / Törlés Módosítás / Törlés
</Table.HeaderCell> </Table.HeaderCell>
</Table.Row> </Table.Row>
...@@ -309,15 +320,18 @@ class Homework extends Component { ...@@ -309,15 +320,18 @@ class Homework extends Component {
headerText = 'Aktív feladatok kijavítása, módosítása vagy törlése'; headerText = 'Aktív feladatok kijavítása, módosítása vagy törlése';
} }
if (this.props.homeworks.tasks.filter(task => if (
moment().isBefore(task.deadline) === active).length === 0 this.props.homeworks.tasks.filter(
(task) => moment().isBefore(task.deadline) === active
).length === 0
) { ) {
noTask = true; noTask = true;
} }
if (!active) { if (!active) {
if (staff) { if (staff) {
headerText = 'Lejárt határidejű feladatok kijavítása, módosítása vagy törlése'; headerText =
'Lejárt határidejű feladatok kijavítása, módosítása vagy törlése';
} else { } else {
headerText = 'Lejárt határidejű feladatok'; headerText = 'Lejárt határidejű feladatok';
} }
...@@ -329,45 +343,40 @@ class Homework extends Component { ...@@ -329,45 +343,40 @@ class Homework extends Component {
<Segment style={{ padding: '0 0 2em 0' }} vertical basic> <Segment style={{ padding: '0 0 2em 0' }} vertical basic>
<Container> <Container>
<Header <Header
as='h1' as="h1"
dividing dividing
content={ content={headerText}
headerText
}
style={{ style={{
fontSize: '2em', fontSize: '2em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: '0.5em',
}}
/>
{noTask ? (
customMessage(noTaskHeaderText, noTaskText, marginBottom, false)
) : (
<div>{this.renderHomeworksTable(active, staff)}</div>
)}
{!active && !staff ? (
<Header
as="h3"
content={
<div>
Jelenlegi bitjeid száma:
<Label color="green" size="large">
{this.props.user.bits} bit
</Label>
</div>
}
style={{
fontWeight: 'normal', fontWeight: 'normal',
marginBottom: 0,
marginTop: '0.5em', marginTop: '0.5em',
marginBottom: '1em',
}} }}
/> textAlign="right"
{noTask ? />
customMessage(noTaskHeaderText, noTaskText, marginBottom, false) ) : null}
:
<div>
{this.renderHomeworksTable(active, staff)}
</div>
}
{!active && !staff ?
<Header
as='h3'
content={
<div >
Jelenlegi bitjeid száma:
<Label color='green' size='large'>
{this.props.user.bits} bit
</Label>
</div>
}
style={{
fontWeight: 'normal',
marginTop: '0.5em',
marginBottom: '1em'
}}
textAlign='right'
/>
: null
}
</Container> </Container>
</Segment> </Segment>
); );
...@@ -378,24 +387,27 @@ class Homework extends Component { ...@@ -378,24 +387,27 @@ class Homework extends Component {
if (user.role === 'Student') { if (user.role === 'Student') {
return ( return (
<div style={{paddingBottom: '2em'}}> <div style={{ paddingBottom: '2em' }}>
{this.renderHomeworks(true, false)} {this.renderHomeworks(true, false)}
{this.renderHomeworks(false, false)} {this.renderHomeworks(false, false)}
</div> </div>
); );
} else if (user.role === 'Staff') { }
if (user.role === 'Staff') {
return ( return (
<div style={{paddingBottom: '2em'}}> <div style={{ paddingBottom: '2em' }}>
<Segment style={{ padding: '0 0 2em 0' }} vertical basic> <Segment style={{ padding: '0 0 2em 0' }} vertical basic>
<Container> <Container>
<Header dividing as='h1' <Header
content='Új házi feladat létrehozása' dividing
as="h1"
content="Új házi feladat létrehozása"
style={{ style={{
fontSize: '2em', fontSize: '2em',
fontWeight: 'normal', fontWeight: 'normal',
marginBottom: '0.5em', marginBottom: '0.5em',
marginTop: '0.5em', marginTop: '0.5em',
}} }}
/> />
<Button.Group> <Button.Group>
<AddTaskForm /> <AddTaskForm />
...@@ -411,17 +423,18 @@ class Homework extends Component { ...@@ -411,17 +423,18 @@ class Homework extends Component {
} }
} }
const mapStateToProps = ({ selectedTask, homeworks, user }) => ({ selectedTask, homeworks, user }); const mapStateToProps = ({ selectedTask, homeworks, user }) => ({
selectedTask,
homeworks,
user,
});
export default connect( export default connect(mapStateToProps, {
mapStateToProps, getTasks,
{ setSelectedTask,
getTasks, getSolutions,
setSelectedTask, getDocuments,
getSolutions, addTask,
getDocuments, deleteTask,
addTask, getProfiles,
deleteTask, })(Homework);
getProfiles,
},
)(Homework);
src/components/pages/LeaderBoard.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Container, Table } from 'semantic-ui-react'; import { Container, Table } from 'semantic-ui-react';
import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getTrainees } from '../../actions/statistics'; import { getTrainees } from '../../actions/statistics';
...@@ -10,61 +11,48 @@ class LeaderBoard extends Component { ...@@ -10,61 +11,48 @@ class LeaderBoard extends Component {
// Every event rendered // Every event rendered
renderTraineeBits() { renderTraineeBits() {
return this.props.trainees.sort( (a,b) => { return this.props.trainees
return (Number(b.homework_bits) + b.events_visited) .sort(
- (Number(a.homework_bits) + a.events_visited) (a, b) =>
}).map((trainee) => { (Number(b.homework_bits) + Number(b.events_visited) + Number(b.extra_bits)) -
return ( (Number(a.homework_bits) + Number(a.events_visited) + Number(a.extra_bits))
trainee.role === 'Student' ? )
.map((trainee) =>
trainee.role === 'Student' ? (
<Table.Row key={trainee.nick}> <Table.Row key={trainee.nick}>
<Table.Cell textAlign='center'> <Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
{trainee.full_name} <Table.Cell textAlign="center">{trainee.events_visited}</Table.Cell>
<Table.Cell textAlign="center">
{Number(trainee.homework_bits) + Number(trainee.extra_bits)}
</Table.Cell> </Table.Cell>
<Table.Cell textAlign='center' > <Table.Cell textAlign="center">
{trainee.events_visited} {Number(trainee.homework_bits) + trainee.events_visited + Number(trainee.extra_bits)}
</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.Cell>
</Table.Row> </Table.Row>
: null ) : null
) );
})
} }
render() { render() {
return ( return (
<Container textAlign='center' style={{overflowX: 'scroll'}}> <Container textAlign="center" style={{ overflowX: 'scroll' }}>
<Table color='blue' unstackable celled selectable compact> <Table color="blue" unstackable celled selectable compact>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell textAlign='center'> <Table.HeaderCell textAlign="center">Képződők</Table.HeaderCell>
Képződők <Table.HeaderCell textAlign="center">Jelenlét</Table.HeaderCell>
</Table.HeaderCell> <Table.HeaderCell textAlign="center">Bitek</Table.HeaderCell>
<Table.HeaderCell textAlign='center'> <Table.HeaderCell textAlign="center">Szumma</Table.HeaderCell>
Jelenlét
</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>
Bitek
</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>
Szumma
</Table.HeaderCell>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{this.props.trainees ? {this.props.trainees ? (
this.renderTraineeBits() this.renderTraineeBits()
: ) : (
<Table.Row> <Table.Row>
<Table.Cell> <Table.Cell>Nincsenek képződők</Table.Cell>
Nincsenek képződők
</Table.Cell>
</Table.Row> </Table.Row>
} )}
</Table.Body> </Table.Body>
</Table> </Table>
</Container> </Container>
...@@ -72,6 +60,9 @@ class LeaderBoard extends Component { ...@@ -72,6 +60,9 @@ class LeaderBoard extends Component {
} }
} }
const mapStateToProps = ({ trainees: { trainees }, user }) => ({ trainees, user }); const mapStateToProps = ({ trainees: { trainees }, user }) => ({
trainees,
user,
});
export default connect(mapStateToProps, { getTrainees })(LeaderBoard); export default connect(mapStateToProps, { getTrainees })(LeaderBoard);
src/components/pages/Mentors.js
View file @ 2eef83d2
import React, { Component } from 'react' import {
import { Container, Segment, Item, Header, Card, Label, Icon, Responsive, Image } from 'semantic-ui-react' Card,
import { connect } from 'react-redux' Container,
import { getMentors } from '../../actions/mentors' Header,
Icon,
Image,
Item,
Label,
Responsive,
Segment,
} from 'semantic-ui-react';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getMentors } from '../../actions/mentors';
class Mentors extends Component { class Mentors extends Component {
UNSAFE_componentWillMount() { UNSAFE_componentWillMount() {
...@@ -9,45 +20,51 @@ class Mentors extends Component { ...@@ -9,45 +20,51 @@ class Mentors extends Component {
} }
renderMentorsNormal() { renderMentorsNormal() {
return this.props.mentors.map( (item, index) => ( return this.props.mentors.map((item, index) => (
<Card style={{maxWidth: '100%', minWidth: '100%'}}> <Card style={{ maxWidth: '100%', minWidth: '100%' }}>
<Card.Content style={{padding: '0'}}> <Card.Content style={{ padding: '0' }}>
<Item.Group> <Item.Group>
<Item> <Item>
{index%2 === 0 ? {index % 2 === 0 ? (
<Item.Image size='medium' src={item.image} /> : null <Item.Image size="medium" src={item.image} />
} ) : null}
<Item.Content style={{padding: '1rem'}}> <Item.Content style={{ padding: '1rem' }}>
<Item.Header>{item.name}</Item.Header> <Item.Header>{item.name}</Item.Header>
<Item.Description> <Item.Description>
<p>{item.text}</p> <p dangerouslySetInnerHTML={{ __html: item.text }}></p>
</Item.Description> </Item.Description>
<Item.Extra> <Item.Extra>
<Label><Icon name='mail'></Icon>{item.email}</Label> <Label>
</Item.Extra> <Icon name="mail" />
</Item.Content> {item.email}
{index%2 === 1 ? </Label>
<Item.Image size='medium' src={item.image} /> : null </Item.Extra>
} </Item.Content>
</Item> {index % 2 === 1 ? (
</Item.Group> <Item.Image size="medium" src={item.image} />
) : null}
</Item>
</Item.Group>
</Card.Content> </Card.Content>
</Card> </Card>
)); ));
} }
renderMentorsMobile() { renderMentorsMobile() {
return this.props.mentors.map( (item, index) => ( return this.props.mentors.map((item) => (
<Card key={item.id}> <Card key={item.id}>
<Image src={item.image} wrapped ui={false}/> <Image src={item.image} wrapped ui={false} />
<Card.Content> <Card.Content>
<Card.Header>{item.name}</Card.Header> <Card.Header>{item.name}</Card.Header>
<Card.Description> <Card.Description>
{item.text} <p dangerouslySetInnerHTML={{ __html: item.text }}></p>
</Card.Description> </Card.Description>
</Card.Content> </Card.Content>
<Card.Content extra> <Card.Content extra>
<Label><Icon name='mail'></Icon>{item.email}</Label> <Label>
<Icon name="mail" />
{item.email}
</Label>
</Card.Content> </Card.Content>
</Card> </Card>
)); ));
...@@ -56,11 +73,11 @@ class Mentors extends Component { ...@@ -56,11 +73,11 @@ class Mentors extends Component {
render() { render() {
return ( return (
<div> <div>
<Segment inverted textAlign='center' vertical> <Segment inverted textAlign="center" vertical>
<Container> <Container>
<Header <Header
as='h1' as="h1"
content='Mentorok' content="Mentorok"
inverted inverted
style={{ style={{
fontSize: '3em', fontSize: '3em',
...@@ -73,13 +90,13 @@ class Mentors extends Component { ...@@ -73,13 +90,13 @@ class Mentors extends Component {
</Segment> </Segment>
<Responsive minWidth={768}> <Responsive minWidth={768}>
<Container style={{paddingTop: '2em', paddingBottom: '5em'}}> <Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
{this.renderMentorsNormal()} {this.renderMentorsNormal()}
</Container> </Container>
</Responsive> </Responsive>
<Responsive minWidth={551} maxWidth={767}> <Responsive minWidth={551} maxWidth={767}>
<Container style={{paddingTop: '2em', paddingBottom: '5em'}}> <Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
<Card.Group centered itemsPerRow={2}> <Card.Group centered itemsPerRow={2}>
{this.renderMentorsMobile()} {this.renderMentorsMobile()}
</Card.Group> </Card.Group>
...@@ -87,7 +104,7 @@ class Mentors extends Component { ...@@ -87,7 +104,7 @@ class Mentors extends Component {
</Responsive> </Responsive>
<Responsive maxWidth={550}> <Responsive maxWidth={550}>
<Container style={{paddingTop: '2em', paddingBottom: '5em'}}> <Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
<Card.Group centered itemsPerRow={1}> <Card.Group centered itemsPerRow={1}>
{this.renderMentorsMobile()} {this.renderMentorsMobile()}
</Card.Group> </Card.Group>
......
src/components/pages/News.css
View file @ 2eef83d2
.news-extra { .news-extra {
color: grey; color: grey;
font-size: 0.75em; font-size: 0.75em;
font-style: italic; font-style: italic;
font-family: fantasy; font-family: fantasy;
text-align: justify; text-align: justify;
} }
.news-text { .news-text {
font-size: 1.15em; font-size: 1.15em;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
text-align: justify; text-align: justify;
} }
src/components/pages/News.js
View file @ 2eef83d2
import './News.css';
import { Button, Container, Grid, Item, Segment } from 'semantic-ui-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Segment, Item, Button, Grid } from 'semantic-ui-react'; import { deleteNews, getNews, setSelectedNews } from '../../actions/news';
import AddNewsForm from '../forms/AddNewsForm';
import ConfirmModal from '../forms/ConfirmModal';
import EditNewsForm from '../forms/EditNewsForm';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import moment from 'moment'; import moment from 'moment';
import AddNewsForm from '../forms/AddNewsForm' const linkify = (text) => {
import EditNewsForm from '../forms/EditNewsForm' const urlRegex = /(https?:\/\/[^\s]+)/g;
return text.split(urlRegex).map((part, index) =>
import ConfirmModal from '../forms/ConfirmModal' part.match(urlRegex) ? (
<a key={index} href={part} target="_blank" rel="noopener noreferrer">
import { getNews, deleteNews, setSelectedNews } from '../../actions/news'; {part}
</a>
import './News.css'; ) : (
part
)
);
};
class News extends Component { class News extends Component {
UNSAFE_componentWillMount() { UNSAFE_componentWillMount() {
this.props.getNews(); this.props.getNews();
} }
renderNews() { renderNews() {
return this.props.news.map(item => ( return this.props.news.map((item) => (
<Item key={item.id}> <Item key={item.id}>
<Item.Content> <Item.Content>
<Container text textAlign='left'> <Container text textAlign="left">
<Item.Header <Item.Header style={{ fontSize: '2em', width: '100%' }}>
style={{ fontSize: '2em', width: '100%' }}
>
<Grid> <Grid>
<Grid.Column <Grid.Column
floated='left' floated="left"
width={this.props.user.role === 'Staff' ? 12 : 16} width={this.props.user.role === 'Staff' ? 12 : 16}
> >
{item.title} {item.title}
</Grid.Column> </Grid.Column>
{ this.props.user.role === 'Staff' ? {this.props.user.role === 'Staff' ? (
<Grid.Column floated='right' width={4}> <Grid.Column floated="right" width={4}>
<EditNewsForm <EditNewsForm
onClick={() => this.props.setSelectedNews(item)} onClick={() => this.props.setSelectedNews(item)}
/> />
<ConfirmModal <ConfirmModal
text={`törölni akarod a következő hírt: ${item.title}`} text={`törölni akarod a következő hírt: ${item.title}`}
button={ button={
<Button <Button compact color="red" size="mini">
compact Törlés
color='red'
size='mini'
>
Törlés
</Button> </Button>
} }
onAccept={() => this.props.deleteNews(item)} onAccept={() => this.props.deleteNews(item)}
/> />
</Grid.Column> </Grid.Column>
: null } ) : null}
</Grid> </Grid>
</Item.Header> </Item.Header>
<Item.Meta style={{ fontSize: '0.75em', fontStyle: 'italic' }}>Közzétéve: {moment(item.created_at).format('LLLL')}</Item.Meta> <Item.Meta style={{ fontSize: '0.75em', fontStyle: 'italic' }}>
<Item.Description className='news-text' style={{ fontSize: '1em' }}> Közzétéve:
{moment(item.created_at).format('LLLL')}
</Item.Meta>
<Item.Description className="news-text" style={{ fontSize: '1em' }}>
{this.renderMultiLine(item.text)} {this.renderMultiLine(item.text)}
</Item.Description> </Item.Description>
</Container> </Container>
</Item.Content> </Item.Content>
</Item> </Item>
)); ));
} }
renderMultiLine(text) { renderMultiLine = (text) => {
const strings = text.split('\n'); const strings = text.split('\n');
return strings.map(string => <p key={Math.random()}>{string}</p>); return strings.map((string) => <p key={Math.random()}>{linkify(string)}</p>);
} };
render() { render() {
return ( return (
<div style={{paddingTop: '1em', paddingBottom: '5em'}}> <div style={{ paddingTop: '1em', paddingBottom: '5em' }}>
<Segment vertical> <Segment vertical>
{/* { this.props.user.is_superuser ? <AddNewsForm /> : ''} */} {/* { this.props.user.is_superuser ? <AddNewsForm /> : ''} */}
<Container text textAlign='center'> <Container text textAlign="center">
{this.props.user.role === 'Staff' ? {this.props.user.role === 'Staff' ? <AddNewsForm /> : null}
<AddNewsForm /> <Item.Group divided>{this.renderNews()}</Item.Group>
:
null}
<Item.Group divided>
{this.renderNews()}
</Item.Group>
</Container> </Container>
</Segment> </Segment>
</div> </div>
...@@ -88,7 +92,10 @@ class News extends Component { ...@@ -88,7 +92,10 @@ class News extends Component {
} }
} }
const mapStateToProps = ({ news, user }) => ({ news, user }); const mapStateToProps = ({ news, user }) => ({ news, user });
export default connect(mapStateToProps, { getNews, deleteNews, setSelectedNews })(News); export default connect(mapStateToProps, {
\ No newline at end of file getNews,
deleteNews,
setSelectedNews,
})(News);
src/components/pages/NotFound.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Button, Container, Header, Icon, Segment } from 'semantic-ui-react'; import { Button, Container, Header, Icon, Segment } from 'semantic-ui-react';
import React, { Component } from 'react';
export default class NotFound extends Component { export default class NotFound extends Component {
render() { render() {
return ( return (
<div> <div>
<Segment inverted textAlign='center' vertical> <Segment inverted textAlign="center" vertical>
<Container> <Container>
<Header <Header
as='h1' as="h1"
content='404 - A keresett oldal nem található!' content="404 - A keresett oldal nem található!"
inverted inverted
style={{ style={{
fontSize: '3em', fontSize: '3em',
...@@ -19,9 +19,9 @@ export default class NotFound extends Component { ...@@ -19,9 +19,9 @@ export default class NotFound extends Component {
}} }}
/> />
<Button <Button
href='/' href="/"
primary primary
size='huge' size="huge"
style={{ style={{
fontSize: '2em', fontSize: '2em',
marginTop: '1em', marginTop: '1em',
...@@ -29,7 +29,7 @@ export default class NotFound extends Component { ...@@ -29,7 +29,7 @@ export default class NotFound extends Component {
}} }}
> >
Vissza a Főoldalra Vissza a Főoldalra
<Icon name='right arrow' /> <Icon name="right arrow" />
</Button> </Button>
</Container> </Container>
</Segment> </Segment>
......
src/components/pages/Presence.js
View file @ 2eef83d2
import { Container, Icon, Table } from 'semantic-ui-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Table, Icon } from 'semantic-ui-react'; import { getStaffEvents, getTrainees } from '../../actions/statistics';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getTrainees, getStaffEvents } from '../../actions/statistics';
class Presence extends Component { class Presence extends Component {
UNSAFE_componentWillMount() { UNSAFE_componentWillMount() {
...@@ -11,72 +12,61 @@ class Presence extends Component { ...@@ -11,72 +12,61 @@ class Presence extends Component {
// Every event with visit status in table cells // Every event with visit status in table cells
renderVisitedStatus(trainee) { renderVisitedStatus(trainee) {
return (this.props.events.map((event) => { return this.props.events.map((event) => {
if (event.visitors.includes(trainee.id)) { if (event.visitors.includes(trainee.id)) {
return ( return (
<Table.Cell textAlign='center' key={Math.random()}> <Table.Cell textAlign="center" key={Math.random()}>
<Icon color='green' name='checkmark' /> <Icon color="green" name="checkmark" />
</Table.Cell> </Table.Cell>
); );
} }
return ( return (
<Table.Cell textAlign='center' key={Math.random()}> <Table.Cell textAlign="center" key={Math.random()}>
<Icon color='red' name='cancel' /> <Icon color="red" name="cancel" />
</Table.Cell> </Table.Cell>
); );
})); });
} }
// Every event rendered // Every event rendered
renderTraineesWithEvents() { renderTraineesWithEvents() {
return this.props.trainees.map((trainee) => return this.props.trainees.map((trainee) =>
{ return ( trainee.role === 'Student' ? (
trainee.role === 'Student' ?
<Table.Row key={Math.random()}> <Table.Row key={Math.random()}>
<Table.Cell textAlign='center'> <Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
{trainee.full_name}
</Table.Cell>
{this.renderVisitedStatus(trainee)} {this.renderVisitedStatus(trainee)}
</Table.Row> </Table.Row>
: null ) : null
); );
});
} }
// Column for each event // Column for each event
renderTableHeaderEvents() { renderTableHeaderEvents() {
return (this.props.events.map(event => { return this.props.events.map((event) => (
return ( <Table.HeaderCell textAlign="center" key={event.id}>
<Table.HeaderCell textAlign='center' key={event.id}>
{event.name} {event.name}
</Table.HeaderCell> </Table.HeaderCell>
) ));
}));
} }
render() { render() {
return ( return (
<Container textAlign='center' style={{overflowX: 'scroll'}}> <Container textAlign="center" style={{ overflowX: 'scroll' }}>
<Table color='blue' unstackable celled selectable compact> <Table color="blue" unstackable celled selectable compact>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell textAlign='center'> <Table.HeaderCell textAlign="center">Képződők</Table.HeaderCell>
Képződők {this.renderTableHeaderEvents()}
</Table.HeaderCell>
{ this.renderTableHeaderEvents() }
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{this.props.trainees ? (
{this.props.trainees ? this.renderTraineesWithEvents()
this.renderTraineesWithEvents() ) : (
:
<Table.Row> <Table.Row>
<Table.Cell> <Table.Cell>Nincsenek képződők</Table.Cell>
Nincsenek képződők
</Table.Cell>
</Table.Row> </Table.Row>
} )}
</Table.Body> </Table.Body>
</Table> </Table>
</Container> </Container>
...@@ -84,6 +74,12 @@ class Presence extends Component { ...@@ -84,6 +74,12 @@ class Presence extends Component {
} }
} }
const mapStateToProps = ({ trainees: { trainees }, events: { events }, user }) => ({ trainees, events, user }); const mapStateToProps = ({
trainees: { trainees },
events: { events },
user,
}) => ({ trainees, events, user });
export default connect(mapStateToProps, { getTrainees, getStaffEvents })(Presence); export default connect(mapStateToProps, { getTrainees, getStaffEvents })(
Presence
);
src/components/pages/Profile.js
View file @ 2eef83d2
import React, { Component } from 'react'; import { Container, Divider, Dropdown, Form, Segment } from "semantic-ui-react";
import { Container, Form, Dropdown, Divider, Segment } from 'semantic-ui-react'; import React, { Component } from "react";
import { connect } from 'react-redux'; import { groupChange, submitRegistration, textChange } from "../../actions";
import { textChange, submitRegistration, groupChange } from '../../actions';
import { getDeadline } from '../../actions/auth' import HiddenForm from "../forms/HiddenForm";
import HiddenForm from '../forms/HiddenForm' import { connect } from "react-redux";
import { getDeadline } from "../../actions/auth";
const options = [ const options = [
{ key: 'DT', text: 'DevTeam', value: 'DT' }, { key: "DT", text: "DevTeam", value: "DT" },
{ key: 'NET', text: 'NETeam', value: 'NET' }, { key: "NET", text: "NETeam", value: "NET" },
{ key: 'ST', text: 'SecurITeam', value: 'ST' }, { key: "ST", text: "SecurITeam", value: "ST" },
{ key: 'SYS', text: 'SysAdmin', value: 'SYS' }, { key: "SYS", text: "SysAdmin", value: "SYS" },
{ key: 'HAT', text: 'Hallgatói Tudásbázis', value: 'HAT' }, { key: "HAT", text: "Hallgatói Tudásbázis", value: "HAT" },
]; ];
class Profile extends Component { class Profile extends Component {
UNSAFE_componentWillMount() { UNSAFE_componentWillMount() {
this.props.getDeadline() this.props.getDeadline();
if (!this.props.id) { if (!this.props.id) {
this.props.history.push('/home'); this.props.history.push("/home");
} }
} }
render() { render() {
const { const {
nick, groups, motivationAbout, motivationProfession, nick,
motivationExercise, signed, id, deadline, messageBefore, groups,
messageAfter motivationAbout,
motivationProfession,
motivationExercise,
signed,
id,
deadline,
messageBefore,
messageAfter,
} = this.props; } = this.props;
const endDate = new Date(deadline) const endDate = new Date(deadline);
let canEdit = Date.now()<endDate const canEdit = Date.now() < endDate;
return ( return (
<Container <Container
style={{ style={{
marginTop: '1em', marginTop: "1em",
}} }}
> >
{canEdit ? {canEdit ? (
<Segment inverted color='red' tertiary> <Segment inverted color="red" tertiary>
<p style={{ fontSize: '1.3em' }} dangerouslySetInnerHTML={{__html: messageBefore}} /> <p
</Segment> style={{ fontSize: "1.3em" }}
: dangerouslySetInnerHTML={{ __html: messageBefore }}
<Segment inverted color='red' tertiary> />
<p style={{ fontSize: '1.3em' }} dangerouslySetInnerHTML={{__html: messageAfter}} /> </Segment>
</Segment>} ) : (
<Segment inverted color="red" tertiary>
<p
style={{ fontSize: "1.3em" }}
dangerouslySetInnerHTML={{ __html: messageAfter }}
/>
</Segment>
)}
<Form> <Form>
{canEdit ? {canEdit ? (
<Form.Input <Form.Input
fluid fluid
name='nick' name="nick"
label='Becenév' label="Becenév"
onChange={e => this.props.textChange(e)} onChange={(e) => this.props.textChange(e)}
placeholder='Becenév' placeholder="Becenév"
value={nick} value={nick}
/> : />
<HiddenForm fontWeight='bold' label='Becenév' value={nick} /> ) : (
} <HiddenForm fontWeight="bold" label="Becenév" value={nick} />
)}
<Divider horizontal>Motiváció</Divider> <Divider horizontal>Motiváció</Divider>
{canEdit ? {canEdit ? (
<Form.TextArea <Form.TextArea
rows={10} rows={10}
name='motivationAbout' name="motivationAbout"
label='Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?' label="Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?"
onChange={e => this.props.textChange(e)} onChange={(e) => this.props.textChange(e)}
placeholder='Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?' placeholder="Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?"
value={motivationAbout} value={motivationAbout}
/> : />
<HiddenForm ) : (
fontWeight='bold' <HiddenForm
label='Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?' fontWeight="bold"
value={motivationAbout} /> label="Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?"
} value={motivationAbout}
/>
)}
<Divider horizontal /> <Divider horizontal />
{canEdit ? {canEdit ? (
<Form.TextArea <Form.TextArea
rows={10} rows={10}
label='Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?' label="Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?"
name='motivationProfession' name="motivationProfession"
onChange={e => this.props.textChange(e)} onChange={(e) => this.props.textChange(e)}
placeholder='Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?' placeholder="Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?"
value={motivationProfession} value={motivationProfession}
/> : />
) : (
<HiddenForm <HiddenForm
fontWeight='bold' fontWeight="bold"
label='Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?' label="Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?"
value={motivationProfession} /> value={motivationProfession}
} />
)}
<Divider horizontal /> <Divider horizontal />
{canEdit ? {canEdit ? (
<Form.TextArea <Form.TextArea
rows={10} rows={10}
name='motivationExercise' name="motivationExercise"
onChange={e => this.props.textChange(e)} onChange={(e) => this.props.textChange(e)}
placeholder='' placeholder=""
label={ label={
<div> <div>
<b>Alább találsz néhány elgondolkodtató kérdést, megoldandó feladatot. <b>
A kérdések és feladatok elkészítése opcionális, Alább találsz néhány elgondolkodtató kérdést, megoldandó
nem titkolt célunk ezzel a lelkesedés felmérése. feladatot. A kérdések és feladatok elkészítése opcionális,
A válaszokat a kérdések alatti szövegdobozba várjuk. nem titkolt célunk ezzel a lelkesedés felmérése. A
</b> válaszokat a kérdések alatti szövegdobozba várjuk.
<ul> </b>
<li> <ul>
Szeretnéd kedvenc tantárgyad vik.wiki oldalát elérni, <li>
de szomorúan látod, hogy az oldal nem jön be. Szeretnéd kedvenc tantárgyad vik.wiki oldalát elérni, de
A Steam pedig hibátlanul megy a háttérben és az emailek is megérkeznek... szomorúan látod, hogy az oldal nem jön be. A Steam pedig
Szobatársadnak pont megvan a vik.wiki szerverének IP-címe. hibátlanul megy a háttérben és az emailek is
Csodálkozva látod, hogy a böngésző címsorába írva eléred a kiszolgáló webszervert. megérkeznek... Szobatársadnak pont megvan a vik.wiki
Mi lehet a baj? szerverének IP-címe. Csodálkozva látod, hogy a böngésző
</li> címsorába írva eléred a kiszolgáló webszervert. Mi lehet a
<br /> baj?
<li> </li>
Két előadás közti szünetben úgy döntesz, <br />
hogy laptopoddal az index.hu tech cikkeit fogod görgetni. <li>
Ám az oldal nem válaszol, a hiba okát megpróbálod kideríteni. Kicsit hosszúra nyúlt az előadás és lassan rohannod kell
Ekkor veszed észre, hogy az alábbiakat sem éred el: haza, ezért úgy döntesz, hogy megnézed a menetrendet a
sze.hu, 444.hu, corvinus.hu, startlap.hu. menetrendek.hu weboldalon. Ám az oldal nem válaszol, a
Ugyanakkor a Facebook, a Gmail, a YouTube, de még az egyetemi hiba okát megpróbálod kideríteni. Ekkor veszed észre, hogy
oldalak többsége is működik. Szerinted mi lehet a hiba oka? az alábbiakat sem éred el: sze.hu, corvinus.hu,
</li> startlap.hu. Ugyanakkor a Facebook, a Gmail, a YouTube, de
<br /> még az egyetemi oldalak többsége is működik. Szerinted mi
<li> lehet a hiba oka?
Találsz egy értelmetlen szöveget egy honlapon (például: <a href='https://ujonc.kszk.bme.hu/zebra.html'>https://ujonc.kszk.bme.hu/zebra.html</a>), de feltűnik, hogy két egyenlőségjellel fejeződik be. Nyomozz, s a végeredményt (amit találtál) írd ide! </li>
</li> <br />
<br /> <li>
<li> Találsz egy értelmetlen szöveget egy honlapon (például:{" "}
A <b>ujonc.kszk.bme.hu</b> címen elérhető gépen <a href="https://ujonc.kszk.bme.hu/kepzes-media/public/zebra.html">
fut egy szolgáltatás az alapértelmezett <b>5432</b> porton https://ujonc.kszk.bme.hu/kepzes-media/public/zebra.html
(használd az előző feladatban kapott adatokat). </a>
Belépés után keresd meg a feladat megoldását! ), de feltűnik, hogy egyenlőségjellel fejeződik be.
</li> Nyomozz, s a végeredményt (amit találtál) írd ide!
</ul> </li>
</div> <br />
} <li>
value={motivationExercise} A <b>ujonc-gres.kszk.bme.hu</b> címen elérhető gépen fut
/> : egy szolgáltatás az alapértelmezett <b>5432</b> porton
(használd az előző feladatban kapott adatokat). Belépés
után írd le mit találtál!
</li>
</ul>
</div>
}
value={motivationExercise}
/>
) : (
<HiddenForm <HiddenForm
fontWeight='normal' fontWeight="normal"
label={ label={
<div> <div>
<b>Alább találsz néhány elgondolkodtató kérdést, megoldandó feladatot. <b>
A kérdések és feladatok elkészítése opcionális, Alább találsz néhány elgondolkodtató kérdést, megoldandó
nem titkolt célunk ezzel a lelkesedés felmérése. feladatot. A kérdések és feladatok elkészítése opcionális,
A válaszokat a kérdések alatti szövegdobozba várjuk. nem titkolt célunk ezzel a lelkesedés felmérése. A
válaszokat a kérdések alatti szövegdobozba várjuk.
</b> </b>
<ul> <ul>
<li> <li>
Szeretnéd kedvenc tantárgyad vik.wiki oldalát elérni, Szeretnéd kedvenc tantárgyad vik.wiki oldalát elérni, de
de szomorúan látod, hogy az oldal nem jön be. szomorúan látod, hogy az oldal nem jön be. A Steam pedig
A Steam pedig hibátlanul megy a háttérben és az emailek is megérkeznek... hibátlanul megy a háttérben és az emailek is
Szobatársadnak pont megvan a vik.wiki szerverének IP-címe. megérkeznek... Szobatársadnak pont megvan a vik.wiki
Csodálkozva látod, hogy a böngésző címsorába írva eléred a kiszolgáló webszervert. szerverének IP-címe. Csodálkozva látod, hogy a böngésző
Mi lehet a baj? címsorába írva eléred a kiszolgáló webszervert. Mi lehet a
baj?
</li> </li>
<br />
<li> <li>
Két előadás közti szünetben úgy döntesz, Kicsit hosszúra nyúlt az előadás és lassan rohannod kell
hogy laptopoddal az index.hu tech cikkeit fogod görgetni. haza, ezért úgy döntesz, hogy megnézed a menetrendet a
Ám az oldal nem válaszol, a hiba okát megpróbálod kideríteni. menetrendek.hu weboldalon. Ám az oldal nem válaszol, a
Ekkor veszed észre, hogy az alábbiakat sem éred el: hiba okát megpróbálod kideríteni. Ekkor veszed észre, hogy
sze.hu, 444.hu, corvinus.hu, startlap.hu. az alábbiakat sem éred el: sze.hu, corvinus.hu,
Ugyanakkor a Facebook, a Gmail, a YouTube, de még az egyetemi startlap.hu. Ugyanakkor a Facebook, a Gmail, a YouTube, de
oldalak többsége is működik. Szerinted mi lehet a hiba oka? még az egyetemi oldalak többsége is működik. Szerinted mi
lehet a hiba oka?
</li> </li>
<br />
<li> <li>
Találsz egy értelmetlen szöveget egy honlapon (például: <a href='https://ujonc.kszk.bme.hu/zebra.html'>https://ujonc.kszk.bme.hu/zebra.html</a>), de feltűnik, hogy két egyenlőségjellel fejeződik be. Nyomozz, s a végeredményt (amit találtál) írd ide! Találsz egy értelmetlen szöveget egy honlapon (például:{" "}
<a href="https://ujonc.kszk.bme.hu/kepzes-media/public/zebra.html">
https://ujonc.kszk.bme.hu/kepzes-media/public/zebra.html
</a>
), de feltűnik, hogy egyenlőségjellel fejeződik be.
Nyomozz, s a végeredményt (amit találtál) írd ide!
</li> </li>
<br />
<li> <li>
A <b>ujonc.kszk.bme.hu</b> címen elérhető gépen A <b>ujonc-gres.kszk.bme.hu</b> címen elérhető gépen fut
fut egy szolgáltatás az alapértelmezett <b>5432</b> porton egy szolgáltatás az alapértelmezett <b>5432</b> porton
(használd az előző feladatban kapott adatokat). (használd az előző feladatban kapott adatokat). Belépés
Belépés után keresd meg a feladat megoldását! után keresd meg a feladat megoldását!
</li> </li>
</ul> </ul>
</div> </div>
} }
value={motivationExercise} /> value={motivationExercise}
} />
)}
<Divider horizontal>Érdekelődés</Divider> <Divider horizontal>Érdeklődés</Divider>
<Dropdown <Dropdown
fluid fluid
multiple multiple
selection selection
placeholder='DevTeam, ...' placeholder="DevTeam, ..."
onChange={(_, v) => this.props.groupChange(v.value)} onChange={(_, v) => this.props.groupChange(v.value)}
options={options} options={options}
defaultValue={groups} defaultValue={groups}
...@@ -191,26 +232,39 @@ class Profile extends Component { ...@@ -191,26 +232,39 @@ class Profile extends Component {
/> />
<br /> <br />
<Form.Checkbox <Form.Checkbox
name='signed' name="signed"
label='Szeretnék a képzés során emaileket kapni és jelentkezni a KSZKépzésre' label="Szeretnék a képzés során emaileket kapni és jelentkezni a KSZKépzésre"
onChange={(_, v) => onChange={(_, v) =>
this.props.textChange({ target: { name: v.name, value: v.checked } }) this.props.textChange({
target: { name: v.name, value: v.checked },
})
} }
checked={signed} checked={signed}
readOnly={!canEdit} readOnly={!canEdit}
style={ !canEdit ? { marginBottom: '5em' } : null} style={!canEdit ? { marginBottom: "5em" } : null}
/> />
{canEdit ? {canEdit ? (
<Form.Button <Form.Button
primary primary
style={{ marginBottom: '5em' }} disabled={!signed} style={{ marginBottom: "5em" }}
onClick={() => this.props.submitRegistration({ disabled={!signed}
nick, motivationAbout, motivationProfession, motivationExercise, signed, groups, id, onClick={() =>
})} this.props.submitRegistration({
> nick,
Mentés motivationAbout,
</Form.Button> motivationProfession,
: '' } motivationExercise,
signed,
groups,
id,
})
}
>
Mentés
</Form.Button>
) : (
""
)}
</Form> </Form>
</Container> </Container>
); );
...@@ -219,10 +273,17 @@ class Profile extends Component { ...@@ -219,10 +273,17 @@ class Profile extends Component {
const mapStateToProps = ({ const mapStateToProps = ({
user: { user: {
nick, groups, motivationAbout, motivationProfession, nick,
motivationExercise, signed, id, deadline, messageBefore, groups,
messageAfter motivationAbout,
} motivationProfession,
motivationExercise,
signed,
id,
deadline,
messageBefore,
messageAfter,
},
}) => ({ }) => ({
nick, nick,
groups, groups,
...@@ -233,7 +294,12 @@ const mapStateToProps = ({ ...@@ -233,7 +294,12 @@ const mapStateToProps = ({
id, id,
deadline, deadline,
messageBefore, messageBefore,
messageAfter messageAfter,
}); });
export default connect(mapStateToProps, { textChange, submitRegistration, groupChange, getDeadline })(Profile); export default connect(mapStateToProps, {
textChange,
submitRegistration,
groupChange,
getDeadline,
})(Profile);
src/components/pages/Schedule.js
View file @ 2eef83d2
import React, { Component } from 'react'; import "moment/locale/hu";
import { Container, Accordion, Icon, Grid, Header, Segment } from 'semantic-ui-react';
import { connect } from 'react-redux'; import {
import moment from 'moment'; Accordion,
import 'moment/locale/hu'; Container,
import { getStudentEvents } from '../../actions/statistics'; Grid,
Header,
Icon,
Segment,
} from "semantic-ui-react";
import React, { Component } from "react";
import { connect } from "react-redux";
import { getStudentEvents } from "../../actions/statistics";
import moment from "moment";
class Schedule extends Component { class Schedule extends Component {
state = { activeIndex: 0 } // eslint-disable-next-line react/state-in-constructor
state = { activeIndex: 0 };
UNSAFE_componentWillMount() { UNSAFE_componentWillMount() {
this.props.getStudentEvents(); this.props.getStudentEvents();
} }
handleClick = (e, titleProps) => { handleClick = (e, titleProps) => {
const { index } = titleProps const { index } = titleProps;
const { activeIndex } = this.state const { activeIndex } = this.state;
const newIndex = activeIndex === index ? -1 : index const newIndex = activeIndex === index ? -1 : index;
this.setState({ activeIndex: newIndex }) this.setState({ activeIndex: newIndex });
} };
render() { render() {
const { activeIndex } = this.state const { activeIndex } = this.state;
const events = this.props.events; const { events } = this.props;
const panels = events.map(event => ( const panels = events
<Accordion key={Math.random()}> .sort((a, b) => a.date - b.date)
<Accordion.Title .map((event) => (
active={activeIndex === event.id} <Accordion key={Math.random()}>
index={event.id} <Accordion.Title
onClick={this.handleClick} active={activeIndex === event.id}
> index={event.id}
<h2> onClick={this.handleClick}
<Grid> >
<Grid.Column floated='left' width={5} textAlign='left'> <h2>
<Icon name='calendar alternate outline' color='blue' /> {event.name} <Grid>
</Grid.Column> <Grid.Column floated="left" width={5} textAlign="left">
<Grid.Column floated='right' width={8} textAlign='right'> <Icon name="calendar alternate outline" color="blue" />{" "}
{moment(event.date).locale('hu').format('LLLL')} {event.name}
</Grid.Column> </Grid.Column>
</Grid> <Grid.Column floated="right" width={8} textAlign="right">
</h2> {moment(event.date).locale("hu").format("LLLL")}
</Accordion.Title> </Grid.Column>
<Accordion.Content active={activeIndex === event.id} > </Grid>
<Segment textAlign='left' style={{overflowWrap:'break-word'}}> </h2>
{event.description} </Accordion.Title>
</Segment> <Accordion.Content active={activeIndex === event.id}>
</Accordion.Content> <Segment textAlign="left" style={{ overflowWrap: "break-word" }}>
{event.description}
</Segment>
</Accordion.Content>
</Accordion> </Accordion>
)); ));
return ( return (
<div> <div>
<Container textAlign='center'> <Container textAlign="center">
<Header <Header
as='h1' as="h1"
content='Képzés alkalmak' content="Képzés alkalmak"
style={{ style={{
fontSize: '2em', fontSize: "2em",
fontWeight: 'bold', fontWeight: "bold",
marginBottom: '0.5em', marginBottom: "0.5em",
marginTop: '0.5em', marginTop: "0.5em",
}} }}
/> />
<Accordion fluid styled> <Accordion fluid styled>
{panels} {panels}
</Accordion> </Accordion>
<Header <Header
as='h1' as="h1"
content='Tábor' content="Tábor: április 11-13"
style={{ style={{
fontSize: '2em', fontSize: "2em",
fontWeight: 'bold', fontWeight: "bold",
marginBottom: '0.5em', marginBottom: "0.5em",
marginTop: '1.5em', marginTop: "1.5em",
}} }}
/> />
</Container> </Container>
</div> </div>
...@@ -82,7 +95,6 @@ class Schedule extends Component { ...@@ -82,7 +95,6 @@ class Schedule extends Component {
} }
} }
const mapStateToProps = ({ events: { events }, user }) => ({ events, user }); const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
export default connect(mapStateToProps, { getStudentEvents })(Schedule); export default connect(mapStateToProps, { getStudentEvents })(Schedule);
src/components/pages/Statistics.js
View file @ 2eef83d2
import React, { Component } from 'react';
import { Container, Menu } from 'semantic-ui-react'; import { Container, Menu } from 'semantic-ui-react';
import Events from './Events' import React, { Component } from 'react';
import Presence from './Presence'
import LeaderBoard from './LeaderBoard' import Events from './Events';
import LeaderBoard from './LeaderBoard';
import Presence from './Presence';
export default class Statistics extends Component { export default class Statistics extends Component {
state = { activeItem: 'events' } // eslint-disable-next-line react/state-in-constructor
handleItemClick = (e, { name }) => this.setState({ activeItem: name }) state = { activeItem: 'events' };
handleItemClick = (e, { name }) => this.setState({ activeItem: name });
render() { render() {
const { activeItem } = this.state const { activeItem } = this.state;
return ( return (
<div> <div>
<Container <Container
textAlign="center" textAlign="center"
style={{paddingBottom: '5em', paddingTop: '1em'}} style={{ paddingBottom: '5em', paddingTop: '1em' }}
> >
<Menu tabular <Menu tabular attached="top" size="huge" compact>
attached='top'
size='huge'
compact={true}
>
<Menu.Item <Menu.Item
name='events' name="events"
active={activeItem === 'events'} active={activeItem === 'events'}
onClick={this.handleItemClick} onClick={this.handleItemClick}
> >
Alkalmak Alkalmak
</Menu.Item> </Menu.Item>
<Menu.Item <Menu.Item
name='presence' name="presence"
active={activeItem === 'presence'} active={activeItem === 'presence'}
onClick={this.handleItemClick} onClick={this.handleItemClick}
> >
Jelenlét Jelenlét
</Menu.Item> </Menu.Item>
<Menu.Item <Menu.Item
name='leaderboard' name="leaderboard"
active={activeItem === 'leaderboard'} active={activeItem === 'leaderboard'}
onClick={this.handleItemClick} onClick={this.handleItemClick}
> >
Ranglista Ranglista
</Menu.Item> </Menu.Item>
</Menu> </Menu>
{ activeItem === 'events' ? <Events /> : '' } {activeItem === 'events' ? <Events /> : ''}
{ activeItem === 'presence' ? <Presence /> : '' } {activeItem === 'presence' ? <Presence /> : ''}
{ activeItem === 'leaderboard' ? <LeaderBoard /> : '' } {activeItem === 'leaderboard' ? <LeaderBoard /> : ''}
</Container> </Container>
</div> </div>
); );
......
src/configureStore.js
View file @ 2eef83d2
import { createStore, applyMiddleware } from 'redux'; import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
// import { createLogger } from 'redux-logger'; // import { createLogger } from 'redux-logger';
import rootReducer from './reducers'; import rootReducer from './reducers';
import thunkMiddleware from 'redux-thunk';
// const loggerMiddleware = createLogger(); // const loggerMiddleware = createLogger();
...@@ -10,8 +11,8 @@ export default function configureStore(preloadedState) { ...@@ -10,8 +11,8 @@ export default function configureStore(preloadedState) {
rootReducer, rootReducer,
preloadedState, preloadedState,
applyMiddleware( applyMiddleware(
thunkMiddleware, thunkMiddleware
// loggerMiddleware, // loggerMiddleware,
), )
); );
} }
src/containers/TodoContainer.js
View file @ 2eef83d2
/* eslint-disable import/no-unresolved */
/* eslint-disable import/named */
/* eslint-disable import/extensions */
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux';
// eslint-disable-next-line // eslint-disable-next-line
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Todo from '../components/Todo'; import Todo from '../components/Todo';
import { addTodo } from '../actions'; import { addTodo } from '../actions';
import { connect } from 'react-redux';
class TodoContainer extends Component { class TodoContainer extends Component {
render() { render() {
...@@ -11,13 +15,11 @@ class TodoContainer extends Component { ...@@ -11,13 +15,11 @@ class TodoContainer extends Component {
return ( return (
<div> <div>
{ {todos.map((todo) => (
todos.map(todo => ( <Todo onClick={onTodoClick} key={Math.random()}>
<Todo onClick={onTodoClick} key={Math.random()}> {todo.data}
{todo.data} </Todo>
</Todo> ))}
))
}
</div> </div>
); );
} }
...@@ -31,7 +33,7 @@ const mapStateToProps = (state) => { ...@@ -31,7 +33,7 @@ const mapStateToProps = (state) => {
}; };
}; };
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = (dispatch) => ({
onTodoClick: (data) => { onTodoClick: (data) => {
dispatch(addTodo(data)); dispatch(addTodo(data));
}, },
......
src/index.js
View file @ 2eef83d2
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css'; import 'slick-carousel/slick/slick-theme.css';
import 'semantic-ui-css/semantic.min.css'; import 'semantic-ui-css/semantic.min.css';
import moment from 'moment';
import configureStore from './configureStore';
import App from './components/App';
import * as serviceWorker from './registerServiceWorker'; import * as serviceWorker from './registerServiceWorker';
import App from './components/App';
import { Provider } from 'react-redux';
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import configureStore from './configureStore';
import moment from 'moment';
import { render } from 'react-dom';
moment.locale(); moment.locale();
...@@ -21,7 +22,7 @@ render( ...@@ -21,7 +22,7 @@ render(
<App /> <App />
</Router> </Router>
</Provider>, </Provider>,
document.getElementById('root'), document.getElementById('root')
); );
serviceWorker.unregister(); serviceWorker.unregister();
src/reducers/AddNewsReducer.js
View file @ 2eef83d2
import { WRITE_NEWS, CLEAR_WRITE } from '../actions/types'; import { CLEAR_WRITE, WRITE_NEWS } from '../actions/types';
const INITIAL_STATE = { title: '', text: '' }; const INITIAL_STATE = { title: '', text: '' };
......
src/reducers/AddSolutionReducer.js
View file @ 2eef83d2
import { WRITE_SOLUTION, WRITE_SOLUTION_FILE, GET_SOLUTIONS, CLEAR_WRITE } from '../actions/types'; import {
CLEAR_WRITE,
GET_SOLUTIONS,
WRITE_SOLUTION,
WRITE_SOLUTION_FILE,
} from '../actions/types';
const INITIAL_STATE = { const INITIAL_STATE = {
task: '', task: '',
......
src/reducers/AddTaskReducer.js
View file @ 2eef83d2
import { WRITE_TASK, WRITE_TASK_DEADLINE, CLEAR_WRITE } from '../actions/types'; import { CLEAR_WRITE, WRITE_TASK, WRITE_TASK_DEADLINE } from '../actions/types';
const INITIAL_STATE = { title: '', text: '', deadline: '' }; const INITIAL_STATE = { title: '', text: '', deadline: '' };
......

Hosted with :heart: by KSZK