summaryrefslogtreecommitdiff
path: root/client/components
diff options
context:
space:
mode:
Diffstat (limited to 'client/components')
-rw-r--r--client/components/LoggedInView.jsx26
-rw-r--r--client/components/LoggedOutView.jsx32
-rw-r--r--client/components/MealFilter.jsx2
-rw-r--r--client/components/MealList.jsx5
-rw-r--r--client/components/Menu.jsx13
-rw-r--r--client/components/UserList.jsx57
6 files changed, 91 insertions, 44 deletions
diff --git a/client/components/LoggedInView.jsx b/client/components/LoggedInView.jsx
index 3fa3e8b..ecf1356 100644
--- a/client/components/LoggedInView.jsx
+++ b/client/components/LoggedInView.jsx
@@ -11,26 +11,44 @@ export default class LoggedInView extends React.Component {
super()
this.state = {
user: Object.assign({}, props.user),
+ meals: [],
mode: 'meals',
}
this.updateUser = this.updateUser.bind(this)
+ this.updateMeals = this.updateMeals.bind(this)
this.toggleMode = this.toggleMode.bind(this)
}
toggleMode(){
- this.state.mode = this.state.mode == 'meals' ? 'users' : 'meals'
+ this.setState({ mode: this.state.mode == 'meals' ? 'users' : 'meals' })
}
updateUser(user) {
this.setState({
- user: user
+ user: user,
+ mode: 'meals',
+ })
+ }
+ updateMeals(user) {
+ this.setState({
+ meals: meals,
})
}
render() {
let activity = null
if (this.state.mode == 'meals') {
- activity = (<MealList user={this.state.user} currentUser={this.props.user} />)
+ activity = (
+ <MealList user={this.state.user}
+ currentUser={this.props.user}
+ onUpdate={this.updateMeals}
+ />
+ )
}
else {
- activity = (<UserList user={this.state.user} currentUser={this.props.user} updateUser={this.updateUser} />)
+ activity = (
+ <UserList user={this.state.user}
+ currentUser={this.props.user}
+ updateUser={this.updateUser}
+ />
+ )
}
return (
<div>
diff --git a/client/components/LoggedOutView.jsx b/client/components/LoggedOutView.jsx
index 0773059..b176edb 100644
--- a/client/components/LoggedOutView.jsx
+++ b/client/components/LoggedOutView.jsx
@@ -20,21 +20,27 @@ export default class LoggedOutView extends React.Component {
this.setState({ modal: '' })
}
render() {
- const loginVisible = this.state.modal == 'login'
- const signupVisible = this.state.modal == 'signup'
- return (
- <div>
- <Welcome
- onLoginClick={this.showLogin}
- onSignupClick={this.showSignup} />
+ if (this.state.modal == 'login') {
+ return (
<LoginForm
- visible={loginVisible}
+ visible={true}
onClose={this.closeModal} />
+ )
+ }
+ else if (this.state.modal == 'signup') {
+ return (
<SignupForm
- visible={signupVisible}
+ visible={true}
onClose={this.closeModal} />
- </div>
- )
+ )
+ }
+ else {
+ return (
+ <Welcome
+ onLoginClick={this.showLogin}
+ onSignupClick={this.showSignup} />
+ )
+ }
}
}
@@ -95,6 +101,7 @@ class LoginForm extends React.Component {
<form onSubmit={this.handleSubmit}>
<input type='email'
name='email'
+ autoFocus
placeholder='Email address'
onChange={this.updateState}
/><br/>
@@ -159,6 +166,7 @@ class SignupForm extends React.Component {
<form onSubmit={this.handleSubmit}>
<input type='email'
name='email'
+ autoFocus
placeholder='Email address'
onChange={this.updateState}
/><br/>
@@ -171,7 +179,7 @@ class SignupForm extends React.Component {
name='goal'
min='0'
max='100000'
- placeholder='Calorie Goal'
+ placeholder='Goal'
onChange={this.updateState}
/><br/>
<input type='submit'
diff --git a/client/components/MealFilter.jsx b/client/components/MealFilter.jsx
index e326b4b..c62f232 100644
--- a/client/components/MealFilter.jsx
+++ b/client/components/MealFilter.jsx
@@ -91,7 +91,7 @@ export default class MealFilter extends React.Component {
var times = [
[0, 11, 'Breakfast'],
[12, 15, 'Lunch'],
- [15, 23, 'Dinner'],
+ [16, 23, 'Dinner'],
[0, 23, 'All'],
].map( (r,i) => {
const start = r[0]
diff --git a/client/components/MealList.jsx b/client/components/MealList.jsx
index 7a46c6d..7efbf4d 100644
--- a/client/components/MealList.jsx
+++ b/client/components/MealList.jsx
@@ -48,7 +48,6 @@ export default class MealList extends React.Component {
this.mealForm.pick(meal)
}
loadMeals(meals) {
- console.log(meals)
this.setState({ data: meals })
}
render() {
@@ -64,18 +63,16 @@ export default class MealList extends React.Component {
onDelete={this.handleDelete} />
)
})
- console.log(this.props.user.goal, group.calories)
const isOverLimit = group.calories > this.props.user.goal ? 'isOverLimit' : 'isUnderLimit'
return (
<div key={group.date} className='group'>
<span className='groupDate'>{group.date}</span>
- <span className={'calories ' + isOverLimit}>{group.calories} cal.</span>
+ <span className={'calories ' + isOverLimit}>{group.calories} cal</span>
<br />
{mealitems}
</div>
)
})
- console.log(items)
if (! items.length) {
items.push(
<div className='quiet' key='nomeals'>No meals found</div>
diff --git a/client/components/Menu.jsx b/client/components/Menu.jsx
index d53803d..471336e 100644
--- a/client/components/Menu.jsx
+++ b/client/components/Menu.jsx
@@ -27,10 +27,17 @@ export default class Menu extends React.Component {
}
render() {
const user = this.props.user
+ const currentUser = this.props.currentUser
+ const observing = user.id !== currentUser.id
const items = []
- items.push( <li key='hello'>Hello {user.email}</li> )
- items.push( <li key='goal' onClick={this.setGoal}><a href='#'>Goal</a>: {user.goal}</li> )
- switch (user.role) {
+ if (observing) {
+ items.push( <li key='observing'><i>Viewing</i> {user.email}</li> )
+ }
+ else {
+ items.push( <li key='hello'>Hello {currentUser.email}</li> )
+ }
+ items.push( <li key='goal' onMouseDown={this.setGoal}><a href='#'>Goal</a>: {user.goal} cal</li> )
+ switch (currentUser.role) {
case 'admin':
if (this.props.user.id !== this.props.currentUser.id) {
items.push( <li key='resetUser'><a href='#' onClick={this.resetUser}>Reset User</a></li> )
diff --git a/client/components/UserList.jsx b/client/components/UserList.jsx
index fb93b9f..3e87ec5 100644
--- a/client/components/UserList.jsx
+++ b/client/components/UserList.jsx
@@ -5,30 +5,37 @@ import client from '../client'
export default class UserList extends React.Component {
constructor(props){
super()
- console.log("WHAT")
+ console.log("USER")
this.state = {
- users: [],
+ data: [],
}
-// client.service('users').find({
-// query: {
-// '$sort': { 'date': '-1' },
-// token: client.get('token'),
-// },
-// }).then((data) => {
-// this.setState(data)
-// }).catch((error) => {
-// console.error(error)
-// })
+ client.service('users').find({
+ query: {
+ '$sort': { 'email': '1' },
+ token: client.get('token'),
+ },
+ }).then((data) => {
+ this.setState(data)
+ }).catch((error) => {
+ console.error(error)
+ })
this.pick.bind(this)
+ console.log(props)
}
- pick(){
+ pick(user){
+ // bubble this up..
+ console.log(user)
+ console.log(this)
+ this.props.updateUser(user)
}
render() {
- const items = this.state.users.map((item,i) => {
+ console.log(this.state.data)
+ const items = this.state.data.map((user,i) => {
return (
<UserItem key={user.id}
user={user}
- onClick={this.pick}
+ activeUser={this.props.user}
+ onClick={(user) => this.pick(user)}
onDelete={this.handleDelete} />
)
})
@@ -59,13 +66,15 @@ class UserItem extends React.Component {
render() {
const user = this.props.user
// const canEdit = this.props.user.userid === this.props.currentUser.id ? 'canEdit' : ''
+ const userClass = this.props.user.id == this.props.activeUser.id ? 'active' : ''
const canEdit = 'canEdit'
- const date = parseDate(meal.date)
- const time = parseTime(meal.date)
+ const date = parseDate(user.updatedAt)
+ const time = parseTime(user.updatedAt)
return (
- <div className={'user row ' + canEdit} onClick={() => this.props.onClick(meal)}>
- <div className='name'>{meal.name}</div>
- <div className='calories'>{meal.calories} cal</div>
+ <div className={'user row ' + canEdit} onClick={() => this.props.onClick(this.props.user)}>
+ <div className={'email ' + userClass}>{user.email}</div>
+ <div className='calories'>{user.goal} cal</div>
+ <div className={'role ' + user.role}>{user.role}</div>
<div className='date'>{date}</div>
<div className='time'>{time}</div>
<div className='remove' onClick={this.remove}>x</div>
@@ -73,3 +82,11 @@ class UserItem extends React.Component {
)
}
}
+
+function parseDate(d){
+ return new Date(d).toISOString().substr(0, 10)
+}
+
+function parseTime(d){
+ return new Date(d).toISOString().substr(11, 5)
+}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 09:10:38 +0000