initial structure

Author: tarekziade

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react"]
+}

.bowerrc

@@ -0,0 +1 @@
+{"directory": "dashboard/static"}

Makefile

@@ -0,0 +1,5 @@
+build:
+	npm install
+	bower install
+	node_modules/.bin/babel dashboard/static/*.jsx > dashboard/static/dashboard.js
+

bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "dashboard",
+  "authors": [
+    "Tarek Ziade <[email protected]>"
+  ],
+  "description": "A ReactJS based Dashboard for Runnerly",
+  "main": "",
+  "license": "MIT",
+  "homepage": "",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "^3.2.1",
+    "react": "^15.4.2"
+  }
+}

dashboard/app.py

@@ -0,0 +1,22 @@
+from flask import Flask, render_template, jsonify
+
+app = Flask(__name__)
+
+
+@app.route('/api/runs.json')
+@app.route('/api/training.json')
+@app.route('/api/races.json')
+def _runs():
+    run1 = {'title': 'Endurance', 'type': 'training'}
+    run2 = {'title': '10K de chalon', 'type': 'race'}
+    _data = [run1, run2]
+    return jsonify(_data)
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+if __name__ == '__main__':
+    app.run()

dashboard/static/races.jsx

@@ -0,0 +1,58 @@
+var RacesBox = React.createClass( {
+    loadRacesFromServer: function()  {
+        var xhr = new XMLHttpRequest();
+        xhr.open('get', this.props.url, true);
+        xhr.onload = function()  {
+            var data = JSON.parse(xhr.responseText);
+            this.setState( { data: data } );
+        } .bind(this);
+        xhr.send();
+    } ,
+
+    getInitialState: function()  {
+        return  {data: []} ;
+    } ,
+
+    componentDidMount: function()  {
+        this.loadRacesFromServer();
+    } ,
+
+    render: function()  {
+        return (
+            <div>
+                <h2>Races</h2>
+                <Races data= {this.state.data}  />
+            </div>
+      );
+    }
+} );
+
+var Races = React.createClass( {
+    render: function()  {
+        var runNodes = this.props.data.map(function (run)  {
+            return (
+              <Race
+                title= {run.title}
+                type= {run.type}
+              />
+      );
+} );
+
+return (
+  <div>
+     {runNodes}
+  </div>
+);
+}
+} );
+
+
+// Here we decide what goes in a Thing node, which we defined above.
+var Race = React.createClass( {
+    render: function()  {
+        return (
+          <div>{this.props.title} ({this.props.type})</div>
+      );
+    }
+} );
+

dashboard/static/runs.jsx

@@ -0,0 +1,59 @@
+var RunsBox = React.createClass( {
+  loadRunsFromServer: function()  {
+    var xhr = new XMLHttpRequest();
+    xhr.open('get', this.props.url, true);
+    xhr.onload = function()  {
+      var data = JSON.parse(xhr.responseText);
+      this.setState( { data: data } );
+    } .bind(this);
+    xhr.send();
+  } ,
+
+  getInitialState: function()  {
+    return  {data: []} ;
+  } ,
+
+  componentDidMount: function()  {
+    this.loadRunsFromServer();
+  } ,
+
+  render: function()  {
+    return (
+      <div>
+        <h2>Runs</h2>
+        <Runs data= {this.state.data}  />
+      </div>
+    );
+  }
+} );
+
+var Runs = React.createClass( {
+  render: function()  {
+    var runNodes = this.props.data.map(function (run)  {
+      return (
+        <Run
+          title= {run.title}
+          type= {run.type}
+        />
+      );
+    } );
+
+    return (
+      <div>
+        {runNodes}
+      </div>
+    );
+  }
+} );
+
+
+var Run = React.createClass( {
+  render: function()  {
+    return (
+      <div>{this.props.title} ({this.props.type})</div>
+    );
+  }
+} );
+
+
+window.RunsBox = RunsBox;

dashboard/static/training.jsx

@@ -0,0 +1,58 @@
+var TrainingRunsBox = React.createClass( {
+    loadTrainingRunsFromServer: function()  {
+        var xhr = new XMLHttpRequest();
+        xhr.open('get', this.props.url, true);
+        xhr.onload = function()  {
+            var data = JSON.parse(xhr.responseText);
+            this.setState( { data: data } );
+        } .bind(this);
+        xhr.send();
+    } ,
+
+    getInitialState: function()  {
+        return  {data: []} ;
+    } ,
+
+    componentDidMount: function()  {
+        this.loadTrainingRunsFromServer();
+    } ,
+
+    render: function()  {
+        return (
+            <div>
+                <h2>TrainingRuns</h2>
+                <TrainingRuns data= {this.state.data}  />
+            </div>
+      );
+    }
+} );
+
+var TrainingRuns = React.createClass( {
+    render: function()  {
+        var runNodes = this.props.data.map(function (run)  {
+            return (
+              <TrainingRun
+                title= {run.title}
+                type= {run.type}
+              />
+      );
+} );
+
+return (
+  <div>
+     {runNodes}
+  </div>
+);
+}
+} );
+
+
+// Here we decide what goes in a Thing node, which we defined above.
+var TrainingRun = React.createClass( {
+    render: function()  {
+        return (
+          <div>{this.props.title} ({this.props.type})</div>
+      );
+    }
+} );
+

dashboard/templates/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="UTF-8">
+    <title>Runnerly Dashboard</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Runnerly Dashboard</h1>
+      <br>
+      <div id="runs"></div>
+      <div id="races"></div>
+      <div id="training"></div>
+    </div>
+
+    <script src="/static/react/react.js"></script>
+    <script src="/static/react/react-dom.js"></script>
+    <script src="/static/babel/browser.js"></script>
+    <script src="/static/dashboard.js"></script>
+
+    <script type="text/babel">
+    ReactDOM.render(
+      <RunsBox url="/api/runs.json" />,
+      document.getElementById('runs')
+    );
+    ReactDOM.render(
+      <RacesBox url="/api/races.json" />,
+      document.getElementById('races')
+    );
+    ReactDOM.render(
+      <TrainingRunsBox url="/api/training.json" />,
+      document.getElementById('training')
+    );
+    </script>
+  </body>
+</html>

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "dashboard",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-cli": "^6.24.0",
+    "bower": "^1.8.0"
+  }
+}