Skip to content
Snippets Groups Projects

A bit of everything

Merged L5047 requested to merge ABitOfEverything into develop
5 files
+ 317
97
Compare changes
  • Side-by-side
  • Inline
Files
5
import React, { Component } from 'react';
import { Row, Col } from 'react-bootstrap';
import { Row, Col, Figure } from 'react-bootstrap';
class Clothes extends Component {
render() {
const { clothing } = this.props;
constructor(props) {
super(props);
this.manageClothes = this.manageClothes.bind(this);
}
manageClothes(clothing, profile) {
let cl = clothing;
// If age is between 18 and 70 filter by gender
if (profile.age >= 18 && profile.age <= 70) {
cl = cl.filter(t => t.Henkilo === profile.sex);
}
const retClothes = {};
for (let i = 0; i < cl.length; i++) {
const c = cl[i];
if (!retClothes[c.Kategoria])
retClothes[c.Kategoria] = [];
retClothes[c.Kategoria].push(c);
}
let cList =
<ul>
Lataa...
</ul>
return (
<div>
{retClothes["head"] ? this.manageSubCategories("Päähineet", retClothes["head"]) : null}
{retClothes["body"] ? this.manageSubCategories("Vartalo", retClothes["body"]) : null}
{retClothes["hands"] ? this.manageSubCategories("Käsineet", retClothes["hands"]) : null}
{retClothes["legs"] ? this.manageSubCategories("Housut", retClothes["legs"]) : null}
{retClothes["feet"] ? this.manageSubCategories("Jalkineet", retClothes["feet"]) : null}
{retClothes["accessory"] ? this.manageSubCategories("Lisävarusteet", retClothes["accessory"]) : null}
</div>
)
}
manageSubCategories(titleName, arr) {
return (
<div>
<h3>{titleName}</h3>
<Row>
{arr.map((t, i) =>
<Col key={i} xl={2} lg={3} md={4} sm={4} xs={6}>
<Figure>
<Figure.Image
fluid={true}
alt={t.Vaatenimi}
src="https://i.imgur.com/C9N8qhi.png"
/>
<Figure.Caption>
{t.Vaatenimi}
</Figure.Caption>
</Figure>
</Col>
)}
</Row>
</div>
)
}
render() {
const { clothing, profile } = this.props;
let cList = null;
if (clothing)
cList =
<ul>
{clothing.map((t, i) => <li key={i}>{t.Vaatenimi}</li>)}
</ul>
if (clothing) {
cList = this.manageClothes(clothing, profile);
}
return (
<Row>
<Col>
<h2>Sinun kannattaisi pukea jotain seuraavista: </h2>
{cList}
</Col>
</Row>
<div>
<h1>Sinun kannattaisi pukea jotain seuraavista:</h1>
{cList}
</div>
)
}
}
Loading