Sun Jun 21 13:26:09 HKT 2015

code4hk · Jun 21, 2015 · bcd9c44 · bcd9c44
1 parent 8d00d89
commit bcd9c44
Show file tree

Hide file tree

Showing 17 changed files with 488 additions and 29 deletions.
diff --git a/src/jsx/partial/Event.jsx b/src/jsx/partial/Event.jsx
@@ -0,0 +1,96 @@
+var React = require('react');
+
+function formatDate(d){
+  var pad = function(n){
+    var s = n.toString();
+    if( s.length === 1 ) return '0' + s;
+    return s;
+  };
+  var y = d.getFullYear();
+  var m = pad(d.getMonth()+1);
+  var dd = pad(d.getDate());
+  var val = [y,m,dd].join('-');
+  return val;
+}
+
+//
+//function formatTime(n){
+//  if( n <= 0 ) return '00:00:00';
+//  var pad = function(x){
+//    return x < 10 ? '0' + x : x.toString();
+//  };
+//  n = Math.round(n/1000);
+//  var ss = n % 60;
+//  n = (n-ss)/60;
+//  var mm = n % 60;
+//  n = (n-mm)/60;
+//  var hh = n % 60;
+//  return pad(hh) + ':' + pad(mm) + ':' + pad(ss);
+//}
+
+var LeaderBoard = React.createClass({
+  mixins: [],
+  getDefaultProps: function(){
+    // must user
+    return {};
+  }
+  ,
+  getInitialState: function(){
+    return {
+      events: []
+    };
+  }
+  ,
+  componentDidMount: function(){
+    var self = this;
+    api.Event.list(function(err, events){
+      self.setState({ events: events });
+    })
+  }
+  ,
+  componentWillUnmount: function(){
+  }
+  ,
+  render: function(){
+    var board = [];
+    return <div className="leader-board">
+      <div>
+        <div>Leader Board</div>
+        {
+          board.map(function(x){
+            return <div>
+            </div>
+          })
+        }
+      </div>
+
+    </div>
+  }
+});
+
+//<table className="ui table">
+//  <thead>
+//  <tr>
+//    <th>Title</th>
+//    <th>From</th>
+//    <th>To</th>
+//    <th></th>
+//  </tr>
+//  </thead>
+//  <tbody>
+//  {
+//    this.state.events.map(function(e){
+//      return <tr key={e.id}>
+//        <td>{e.name}</td>
+//        <td>{formatDate(new Date(e.start_time))}</td>
+//        <td>{formatDate(new Date(e.end_time))}</td>
+//        <td>
+//          <div className="ui purple button">join</div>
+//        </td>
+//      </tr>
+//    })
+//  }
+//  </tbody>
+//</table>
+
+module.exports = Event;
diff --git a/src/jsx/partial/Events.jsx b/src/jsx/partial/Events.jsx
@@ -0,0 +1,107 @@
+var React = require('react');
+
+function formatDate(d){
+  var pad = function(n){
+    var s = n.toString();
+    if( s.length === 1 ) return '0' + s;
+    return s;
+  };
+  var y = d.getFullYear();
+  var m = pad(d.getMonth()+1);
+  var dd = pad(d.getDate());
+  var val = [y,m,dd].join('-');
+  return val;
+}
+
+//
+//function formatTime(n){
+//  if( n <= 0 ) return '00:00:00';
+//  var pad = function(x){
+//    return x < 10 ? '0' + x : x.toString();
+//  };
+//  n = Math.round(n/1000);
+//  var ss = n % 60;
+//  n = (n-ss)/60;
+//  var mm = n % 60;
+//  n = (n-mm)/60;
+//  var hh = n % 60;
+//  return pad(hh) + ':' + pad(mm) + ':' + pad(ss);
+//}
+
+var Event = React.createClass({
+  mixins: [],
+  getDefaultProps: function(){
+    // must user
+    return {};
+  }
+  ,
+  getInitialState: function(){
+    return {
+      events: []
+    };
+  }
+  ,
+  componentDidMount: function(){
+    var self = this;
+    api.Event.list(function(err, events){
+      self.setState({ events: events });
+    })
+  }
+  ,
+  componentWillUnmount: function(){
+  }
+  ,
+  render: function(){
+    return <div className="events">
+      <div className="container">
+        <div className="ui cards">
+          {
+            this.state.events.map(function(e) {
+              var st = formatDate(new Date(e.start_time));
+              var et = formatDate(new Date(e.end_time));
+              return <div key={e.id} className="card">
+                <div className="image">
+                  <img src="/img/ph200.png"/>
+                </div>
+                <div className="content">
+                  <a className="header">{e.name}</a>
+                  <div className="meta">
+                    <span className="date">{st}</span>
+                  </div>
+                  <div className="description">{e.description}</div>
+                </div>
+              </div>
+            })
+          }
+        </div>
+      </div>
+    </div>
+  }
+});
+
+//<table className="ui table">
+//  <thead>
+//  <tr>
+//    <th>Title</th>
+//    <th>From</th>
+//    <th>To</th>
+//    <th></th>
+//  </tr>
+//  </thead>
+//  <tbody>
+//  {
+//    this.state.events.map(function(e){
+//      return <tr key={e.id}>
+//        <td>{e.name}</td>
+//        <td>{formatDate(new Date(e.start_time))}</td>
+//        <td>{formatDate(new Date(e.end_time))}</td>
+//        <td>
+//          <div className="ui purple button">join</div>
+//        </td>
+//      </tr>
+//    })
+//  }
+//  </tbody>
+//</table>
+
+module.exports = Event;
diff --git a/src/jsx/partial/Frame.jsx b/src/jsx/partial/Frame.jsx
@@ -2,6 +2,8 @@ var React = require('react');
 var If = require('../component/If.jsx');
 var SignIn = require('./SignIn.jsx');
 var Profile = require('./Profile.jsx');
+var Events = require('./Events.jsx');
+var Home = require('./Home.jsx');
 
 var Frame = React.createClass({
   mixins: [],
@@ -12,52 +14,68 @@ var Frame = React.createClass({
   getInitialState: function(){
     return {
       user: null,
-      tab: 'profile'
+      tab: 'home'
     };
   }
   ,
   componentDidMount: function(){
     // testing
-    this._onSignIn('user1', '');
+    //this._onSignIn('user1', '');
   }
   ,
   componentWillUnmount: function(){
   }
   ,
+  _tab: function(name){
+    var self = this;
+    return function(){
+      self.setState({ tab: name });
+    }
+  }
+  ,
   _onSignIn: function(username, password){
     var self = this;
     api.User.getByUsername(username, password, function(err, profile){
       if(err) log(err);
-      else self.setState({ user: profile });
+      else self.setState({ user: profile, tab: 'profile' });
     })
   }
   ,
+  _logout: function(){
+    this.setState({ user: null, tab: 'event' });
+  }
+  ,
   render: function(){
     var login = this.state.user !== null;
 
     //<If value={this.state.user === null} >Sign In</If>
     return <div className="frame">
       <header>
         <div className="container">
-          <div className="title">Hike4hk</div>
-          <If className="tabs" value={this.state.user !== null}>
-            <div>Profile</div>
-            <div>Events</div>
-            <div>Log out</div>
-          </If>
+          <div className="title" onClick={this._tab('home')} >Hike4hk</div>
+            <div className="tabs">
+              <div onClick={this._tab('event')}>Events</div>
+              <If value={this.state.user !== null} onClick={this._tab('profile')}>Profile</If>
+              <If value={this.state.user !== null} onClick={this._logout} >Log out</If>
+              <If value={this.state.user === null} onClick={this._tab('sign_in')}>Sign In</If>
+            </div>
         </div>
       </header>
 
-      <If className="sign-in-box" value={!login}>
+      <If value={this.state.tab === 'home'}>
+        <Home />
+      </If>
+
+      <If className="sign-in-box" value={this.state.tab === 'sign_in'}>
         <SignIn onSignIn={this._onSignIn} />
       </If>
 
       <If value={login && this.state.tab === 'profile'}>
         <Profile user={this.state.user} />
       </If>
 
-      <If value={login && this.state.tab  === 'event'}>
-
+      <If value={this.state.tab  === 'event'}>
+        <Events />
       </If>
 
       <footer></footer>

diff --git a/src/jsx/partial/Home.jsx b/src/jsx/partial/Home.jsx
@@ -0,0 +1,85 @@
+var React = require('react');
+
+function formatDate(d){
+  var pad = function(n){
+    var s = n.toString();
+    if( s.length === 1 ) return '0' + s;
+    return s;
+  };
+  var y = d.getFullYear();
+  var m = pad(d.getMonth()+1);
+  var dd = pad(d.getDate());
+  var val = [y,m,dd].join('-');
+  return val;
+}
+
+//
+//function formatTime(n){
+//  if( n <= 0 ) return '00:00:00';
+//  var pad = function(x){
+//    return x < 10 ? '0' + x : x.toString();
+//  };
+//  n = Math.round(n/1000);
+//  var ss = n % 60;
+//  n = (n-ss)/60;
+//  var mm = n % 60;
+//  n = (n-mm)/60;
+//  var hh = n % 60;
+//  return pad(hh) + ':' + pad(mm) + ':' + pad(ss);
+//}
+
+var Home = React.createClass({
+  mixins: [],
+  getDefaultProps: function(){
+    // must user
+    return {};
+  }
+  ,
+  getInitialState: function(){
+    return {
+      events: []
+    };
+  }
+  ,
+  componentDidMount: function(){
+    var self = this;
+    api.Event.list(function(err, events){
+      self.setState({ events: events });
+    })
+  }
+  ,
+  componentWillUnmount: function(){
+  }
+  ,
+  render: function(){
+    return <div className="home">
+      <div className="banner">
+        <h1>Hike better, Together for hk</h1>
+      </div>
+      <div className="how-it-works">
+        <h1>How it works?</h1>
+        <div className="steps">
+          <div className="step">
+            <header>Step 1</header>
+            <p>Go Hiking</p>
+          </div>
+          <div className="step">
+            <header>Step 2</header>
+            <p>Record Your Activity</p>
+          </div>
+          <div className="step">
+            <header>Step 3</header>
+            <p>Donate!</p>
+          </div>
+        </div>
+      </div>
+      <div className="get-started">
+        <h1>Create Your Own ❤ Hike</h1>
+        <div className="ui green big button">Get Started</div>
+      </div>
+    </div>
+  }
+});
+
+
+module.exports = Home;