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