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
  • team-f-2019/source
1 result
Show changes
Commits on Source (4)
Hide whitespace changes
Inline Side-by-side
wearright/src/components/bootstrap/EditProfile.js
View file @ 0e784cfa
import React, { Component } from 'react'; import React, { Component } from "react";
import { Typeahead } from "react-bootstrap-typeahead"; import { Typeahead } from "react-bootstrap-typeahead";
// Bootstrap // Bootstrap
import { Form, Button, Alert, Dropdown } from 'react-bootstrap'; import { Form, Button, Alert, Dropdown, OverlayTrigger } from "react-bootstrap";
import Cookies from 'universal-cookie'; import Cookies from "universal-cookie";
class EditProfile extends Component { class EditProfile extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
cities: [], cities: [],
alert: false, alert: false,
selectedProfile: 0, selectedProfile: 0,
name: this.props.profiles[0].name, name: this.props.profiles[0].name,
age: this.props.profiles[0].age, age: this.props.profiles[0].age,
sex: this.props.profiles[0].sex, sex: this.props.profiles[0].sex,
city: this.props.profiles[0].city, city: this.props.profiles[0].city,
profiles: this.props.profiles profiles: this.props.profiles,
} deleteConfirm: false,
deleteProfile: false
this.getCities = this.getCities.bind(this); };
this.generateAgeRange = this.generateAgeRange.bind(this);
this.dropDownOnSelect = this.dropDownOnSelect.bind(this); this.getCities = this.getCities.bind(this);
this.handleChange = this.handleChange.bind(this); this.generateAgeRange = this.generateAgeRange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this) this.dropDownOnSelect = this.dropDownOnSelect.bind(this);
} this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
componentDidMount(){ this.deleteProfile = this.deleteProfile.bind(this);
this.getCities(); this.deleteProfileConfirmation = this.deleteProfileConfirmation.bind(this);
} }
getCities() {
const tempArr = []; componentDidMount() {
this.getCities();
// Don't allow for multiple gets }
if (this.state.cities.length === 0) { getCities() {
const proxyUrl = "https://cors-anywhere.herokuapp.com/"; const tempArr = [];
fetch(proxyUrl + "http://207.154.210.234/get/cities") // Don't allow for multiple gets
.then(res => res.json()) if (this.state.cities.length === 0) {
.then(result => { const proxyUrl = "https://cors-anywhere.herokuapp.com/";
for (let i = 0; i < result.length; i++) {
tempArr.push(result[i]); fetch(proxyUrl + "http://207.154.210.234/get/cities")
} .then(res => res.json())
.then(result => {
console.log(tempArr); for (let i = 0; i < result.length; i++) {
this.setState({ cities: tempArr }); tempArr.push(result[i]);
}); }
}
} console.log(tempArr);
generateAgeRange() { this.setState({ cities: tempArr });
const tempArr = []; });
}
for (let i = 6; i < 101; i++) { }
tempArr.push(<option key={i}>{i}</option>); generateAgeRange() {
} const tempArr = [];
return tempArr; for (let i = 6; i < 101; i++) {
} tempArr.push(<option key={i}>{i}</option>);
}
dropDownOnSelect(eventKey, e) {
//console.log(eventKey); return tempArr;
this.setState({ }
selectedProfile : eventKey,
name: this.state.profiles[eventKey].name, handleChange(selection, value) {
age : this.state.profiles[eventKey].age, console.log(selection, value);
sex: this.state.profiles[eventKey].sex, if (selection === "name") {
city: this.state.profiles[eventKey].city this.setState({ name: value });
}) } else if (selection === "age") {
this.setState({ age: value });
} } else if (selection === "sex") {
this.setState({ sex: value });
handleChange(selection, value){ }
console.log(selection, value); }
if(selection === "name"){ handleSubmit() {
this.setState({name: value}) if (this.state.name === "" || this.state.city === "") {
} this.setState({ alert: true });
else if(selection === "age"){ return;
this.setState({age: value}) }
}
else if(selection === "sex"){ const c = new Cookies();
this.setState({sex: value})
} const profiles = this.state.profiles;
} const profile = profiles[this.state.selectedProfile];
handleSubmit(){ profile.name = this.state.name;
profile.age = this.state.age;
if(this.state.name === "" || this.state.city === "") profile.sex = this.state.sex;
{ profile.city = this.state.city;
this.setState({alert: true})
return; profiles[this.state.selectedProfile] = profile;
} // Set expiration to 50 years ahead
const d = new Date();
d.setFullYear(d.getFullYear() + 50);
const c = new Cookies(); c.set("profile", profiles, { path: "/", expires: d });
this.setState({ profiles });
const profiles = this.state.profiles; window.location.reload();
const profile = profiles[this.state.selectedProfile]; }
profile.name = this.state.name;
profile.age = this.state.age; dropDownOnSelect(eventKey, e) {
profile.sex = this.state.sex; //console.log(eventKey);
profile.city =this.state.city; this.setState({
selectedProfile: eventKey,
profiles[this.state.selectedProfile] = profile; name: this.state.profiles[eventKey].name,
// Set expiration to 50 years ahead age: this.state.profiles[eventKey].age,
const d = new Date(); sex: this.state.profiles[eventKey].sex,
d.setFullYear(d.getFullYear() + 50); city: this.state.profiles[eventKey].city
c.set('profile', profiles, {path: '/', expires: d}) });
this.setState({ profiles }) console.log(this.state.profiles[eventKey].age);
window.location.reload(); }
}
deleteProfileConfirmation() {
render() { this.setState({ deleteConfirm: true });
const { cities, alert, selectedProfile } = this.state; }
const { profiles} = this.props;
return ( deleteProfile(selection) {
<div> this.setState({ deleteConfirm: false });
<Form> if (selection === "yes") {
<Dropdown onSelect={this.dropDownOnSelect}> const c = new Cookies();
<Dropdown.Toggle variant="primary">
Valitse profiili let profiles = this.state.profiles;
</Dropdown.Toggle> profiles.splice(this.state.selectedProfile, 1);
<Dropdown.Menu> const d = new Date();
{profiles.map((profile, i) => d.setFullYear(d.getFullYear() + 50);
<Dropdown.Item eventKey={i}> {profile.name} </Dropdown.Item> c.set("profile", profiles, { path: "/", expires: d });
)} this.setState({ profiles });
</Dropdown.Menu> window.location.reload();
</Dropdown> }
<Form.Group controlId="editForm.userName"> console.log(selection);
<Form.Label>Nimimerkki</Form.Label> }
<Form.Control onChange={(e) => this.handleChange("name", e.target.value)} defaultValue={profiles[selectedProfile].name} required name="username" type="text"></Form.Control>
<Form.Control.Feedback type="invalid"> render() {
Käyttäjänimi on vaadittu const {
</Form.Control.Feedback> cities,
</Form.Group> alert,
selectedProfile,
<Form.Group controlId="editFormForm.age"> age,
<Form.Label>Ikä</Form.Label> sex,
<Form.Control onChange={(e) => this.handleChange("age", e.target.value)} defaultValue={profiles[selectedProfile].age} required name="age" as="select"> deleteConfirm
{ this.generateAgeRange() } } = this.state;
</Form.Control>
</Form.Group> const { profiles } = this.props;
return (
<Form.Group controlId="editForm.sex"> <div>
<Form.Label>Sukupuoli</Form.Label> {/* Show alert when deleting profile */}
<Form.Control onChange={(e) => this.handleChange("sex", e.target.value)} defaultValue={profiles[selectedProfile].sex} required name="sex" as="select"> <Alert show={deleteConfirm} variant="danger">
<option>Mies</option> <Alert.Heading>Varoitus!</Alert.Heading>
<option>Nainen</option> <p>Poistetaanko profiili pysyvästi?</p>
</Form.Control> <div className="d-flex justify-content-end">
</Form.Group> <Button
<Typeahead onClick={() => this.deleteProfile("yes")}
name="city" variant="outline-danger">
id="requiredId" Kyllä
className="inputField" </Button>
options={cities} <Button
labelKey="name" onClick={() => this.deleteProfile("no")}
placeholder={profiles[selectedProfile].city} variant="outline-success">
onInputChange={ text => Ei
this.setState({ </Button>
city: text, </div>
alert: false </Alert>
}) <Form>
} <Dropdown onSelect={this.dropDownOnSelect}>
onChange={sel => <Dropdown.Toggle variant="primary">
//set selection index to state. sel needs to be formatted first to string, then number Valitse profiili
this.setState({ </Dropdown.Toggle>
city: String(sel), <Dropdown.Menu>
alert: false {profiles.map((profile, i) => (
}) <Dropdown.Item eventKey={i}> {profile.name} </Dropdown.Item>
} ))}
</Dropdown.Menu>
/> </Dropdown>
<Button onClick={ () => this.handleSubmit() }> <Form.Group controlId="editForm.userName">
Tallenna muutokset <Form.Label>Nimimerkki</Form.Label>
</Button> <Form.Control
{} onChange={e => this.handleChange("name", e.target.value)}
<Alert placeholder={profiles[selectedProfile].name}
className="alert" required
key={"alert"} name="username"
variant={"danger"} type="text"
show={alert}> />
Tarkista kentät! <Form.Control.Feedback type="invalid">
</Alert> Käyttäjänimi on vaadittu
</Form> </Form.Control.Feedback>
</div> </Form.Group>
)
} <Form.Group controlId="editFormForm.age">
<Form.Label>Ikä</Form.Label>
<Form.Control
onChange={e => this.handleChange("age", e.target.value)}
value={age}
required
name="age"
as="select">
{this.generateAgeRange()}
</Form.Control>
</Form.Group>
<Form.Group controlId="editForm.sex">
<Form.Label>Sukupuoli</Form.Label>
<Form.Control
onChange={e => this.handleChange("sex", e.target.value)}
value={sex}
required
name="sex"
as="select">
<option>Mies</option>
<option>Nainen</option>
</Form.Control>
</Form.Group>
<Form.Label>Kaupunki</Form.Label>
<Typeahead
name="city"
id="requiredId"
className="inputField"
options={cities}
labelKey="name"
placeholder={profiles[selectedProfile].city}
onInputChange={text =>
this.setState({
city: text,
alert: false
})
}
onChange={sel =>
//set selection index to state. sel needs to be formatted first to string, then number
this.setState({
city: String(sel),
alert: false
})
}
/>
<Button onClick={() => this.handleSubmit()}>
Tallenna muutokset
</Button>
{/* Button disabled when one profile left */}
<Button
variant="danger"
disabled={profiles.length === 1}
onClick={() => this.deleteProfileConfirmation()}>
Poista Profiili
</Button>
{/* Following text appears if only one profile left*/}
{profiles.length === 1 ? (
<p>
<small>
<i>Et voi poistaa viimeistä profiiliasi</i>
</small>
</p>
) : (
<p />
)}
<Alert
className="alert"
key={"alert"}
variant={"danger"}
show={alert}>
Tarkista kentät!
</Alert>
</Form>
</div>
);
}
} }
export default EditProfile; export default EditProfile;
\ No newline at end of file
wearright/src/components/bootstrap/MainCont.js
View file @ 0e784cfa
import React, { Component } from 'react'; import React, { Component } from "react";
import Cookies from 'universal-cookie'; import Cookies from "universal-cookie";
import Menu from './Menu'; import Menu from "./Menu";
import Home from './Home'; import Home from "../bootstrap/Home.js";
import EditProfile from "./EditProfile"; import EditProfile from "./EditProfile";
import AddProfile from "./AddProfile"; import AddProfile from "./AddProfile";
class MainCont extends Component { class MainCont extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
const c = new Cookies(); const c = new Cookies();
const profiles = c.get("profile"); const profiles = c.get("profile");
this.state = { this.state = {
profiles, profiles,
selectedProfile: profiles[0], selectedProfile: profiles[0],
view: "home" view: "home"
} };
this.handleMenuClick = this.handleMenuClick.bind(this); this.handleMenuClick = this.handleMenuClick.bind(this);
} }
handleMenuClick(e) { handleMenuClick(e) {
this.setState({ this.setState({
view: e view: e
}); });
} }
render() { render() {
const { profiles, selectedProfile, view } = this.state; const { profiles, selectedProfile, view } = this.state;
// Decide what view to show // Decide what view to show
let shownView = null; let shownView = null;
if (view === "home") if (view === "home")
shownView = shownView = (
<Home <Home profiles={profiles} currentSelectedProfile={selectedProfile} />
profiles={profiles} );
currentSelectedProfile={selectedProfile} else if (view === "plan") shownView = <h1>TODO Suunnitele Matka</h1>;
/> else if (view === "edit") shownView = <EditProfile profiles={profiles} />;
else if (view === "plan") else if (view === "add") shownView = <AddProfile />;
shownView = return (
<h1> <div>
TODO Suunnitele Matka <Menu handleMenuClick={this.handleMenuClick} />
</h1> <div className="container">{shownView}</div>
else if (view === "edit") </div>
shownView = );
<EditProfile profiles={profiles}/> }
else if (view === "add")
shownView =
<AddProfile />
return (
<div>
<Menu
handleMenuClick={this.handleMenuClick}
/>
<div className="container">
{shownView}
</div>
</div>
)
}
} }
export default MainCont; export default MainCont;
\ No newline at end of file
wearright/src/components/bootstrap/Menu.js
View file @ 0e784cfa
import React, { Component } from 'react'; import React, { Component } from "react";
import { Navbar, Nav } from 'react-bootstrap' import { Navbar, Nav } from "react-bootstrap";
class Menu extends Component { class Menu extends Component {
render() { render() {
const { handleMenuClick } = this.props; const { handleMenuClick } = this.props;
return ( return (
<Navbar bg="light" expand="lg"> <Navbar bg="light" expand="lg">
<Navbar.Brand>Wear Right</Navbar.Brand> <Navbar.Brand>Wear Right</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto"> <Nav className="mr-auto">
<Nav.Link onClick={e => handleMenuClick("home")} href="#">Päänäkymä</Nav.Link> <Nav.Link onClick={e => handleMenuClick("home")} href="#">
<Nav.Link onClick={e => handleMenuClick("plan")} href="#">Suunnittele Matka</Nav.Link> Päänäkymä
<Nav.Link onClick={e => handleMenuClick("edit")} href="#">Muokkaa Profiilejasi</Nav.Link> </Nav.Link>
<Nav.Link onClick={e => handleMenuClick("add")} href="#">Lisää Profiili</Nav.Link> <Nav.Link onClick={e => handleMenuClick("plan")} href="#">
</Nav> Suunnittele Matka
</Navbar.Collapse> </Nav.Link>
</Navbar> <Nav.Link onClick={e => handleMenuClick("edit")} href="#">
) Muokkaa Profiilejasi
} </Nav.Link>
<Nav.Link onClick={e => handleMenuClick("add")} href="#">
Lisää Profiili
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
} }
export default Menu; export default Menu;
\ No newline at end of file