[chronojump-server] Exercises can be added from Station/Exercises page.\nShow player name and station name instead of id

[Marcos Venteo Garcia <mventeo src gnome org>]

commit f899349986753e2420f4ea5f1492d6012d26e0eb
Author: Marcos Venteo <mventeo gmail com>
Date:   Mon Jun 26 20:56:01 2017 +0200

    Exercises can be added from Station/Exercises page.\nShow player name and station name instead of ids. 
Same for sprints.\nCheck if photos folder exists or create otherwise.

 chronojumpserver/__init__.py                 |    6 ++
 chronojumpserver/api.py                      |   20 ++++++++-
 chronojumpserver/js/results.js               |    4 +-
 chronojumpserver/js/sprints.js               |    2 +-
 chronojumpserver/js/stations.js              |   65 ++++++++++++++++++++++++--
 chronojumpserver/templates/station_list.html |   37 +++++++++++++--
 6 files changed, 121 insertions(+), 13 deletions(-)
---
diff --git a/chronojumpserver/__init__.py b/chronojumpserver/__init__.py
index 57f2002..3b15f7d 100755
--- a/chronojumpserver/__init__.py
+++ b/chronojumpserver/__init__.py
@@ -6,6 +6,7 @@ Chronojump Server Main application...
 import click
 from flask import Flask, send_from_directory
 import ConfigParser
+import os
 
 # Read the config file
 config = ConfigParser.ConfigParser()
@@ -24,6 +25,11 @@ app.secret_key = config.get("security", "secret_key")
 app.config['SECRET_KEY'] = app.secret_key
 app.config['UPLOAD_FOLDER'] = "static/images/photos"
 
+# Check if the UPLOAD_FOLDER exists
+_path = os.path.join('chronojumpserver', app.config['UPLOAD_FOLDER'] )
+if not os.path.exists(_path):
+    os.mkdir(_path)
+
 
 @app.route('/js/<path:filename>')
 def js(filename):
diff --git a/chronojumpserver/api.py b/chronojumpserver/api.py
index f75245e..fbfed01 100755
--- a/chronojumpserver/api.py
+++ b/chronojumpserver/api.py
@@ -6,7 +6,7 @@
 from chronojumpserver import app
 from chronojumpserver.database import db_session
 from chronojumpserver.models import Person, ResultEncoder, Station, Task
-from chronojumpserver.models import ResultSprint
+from chronojumpserver.models import ResultSprint, Exercise
 from flask import jsonify, request
 from time import sleep
 import os
@@ -167,6 +167,7 @@ def add_modify_delete_task():
 
     return jsonify(msg='Task has been successfully added')
 
+
 @app.route('/api/v1/stations', methods=['PUT', 'DELETE'])
 def add_modify_delete_stations():
     if request.method == "PUT":
@@ -181,3 +182,20 @@ def add_modify_delete_stations():
             db_session.commit()
 
     return jsonify(msg="Success")
+
+@app.route('/api/v1/exercise/add', methods=['PUT', 'DELETE'])
+def add_modify_delete_exercises():
+    if request.method == "PUT":
+        exerciseId = request.form['id']
+        stationId = request.form['stationId']
+        name = request.form['name']
+        percentBodyMassDisplaced = request.form['percentBodyMassDisplaced']
+
+        if int(exerciseId) == -1:
+            # New station
+            e = Exercise(name=name, stationId=stationId,
+                         percentBodyMassDisplaced=percentBodyMassDisplaced)
+            db_session.add(e)
+            db_session.commit()
+
+    return jsonify(msg="Success")
diff --git a/chronojumpserver/js/results.js b/chronojumpserver/js/results.js
index a7d8118..270df59 100755
--- a/chronojumpserver/js/results.js
+++ b/chronojumpserver/js/results.js
@@ -90,12 +90,12 @@ $(document).ready(function() {
       },
       {
         type: "html",
-        data: "personId",
+        data: "personName",
         title: "Jugador"
       },
       {
         type: "html",
-        data: "stationId",
+        data: "stationName",
         title: "Estació"
       },
       {
diff --git a/chronojumpserver/js/sprints.js b/chronojumpserver/js/sprints.js
index 49f5450..608c7dc 100644
--- a/chronojumpserver/js/sprints.js
+++ b/chronojumpserver/js/sprints.js
@@ -88,7 +88,7 @@ $(document).ready(function() {
       },
       {
         type: "html",
-        data: "personId",
+        data: "personName",
         title: "Jugador"
       },
       {
diff --git a/chronojumpserver/js/stations.js b/chronojumpserver/js/stations.js
index b99e2df..dd24c98 100644
--- a/chronojumpserver/js/stations.js
+++ b/chronojumpserver/js/stations.js
@@ -24,7 +24,7 @@ $('#btnShowStationModalForm').on('click', function() {
   $('#stationModalForm').modal();
 });
 
-/* Show exerciseModalForm to create a new exercise */
+/* Add / Modify or Delete stations */
 $('#btnAddStation').on('click', function() {
   var stationName = $('#stationName').val();
   var stationType = $('#stationType').val();
@@ -50,7 +50,38 @@ $('#btnAddStation').on('click', function() {
   });
 });
 
+/* Show execiseModalForm to create a new exercise */
+$('#btnShowExerciseModalForm').on('click', function() {
+  $('#exerciseModalForm').modal();
+});
+
+
+/* Add / Modify or Delete stations */
+$('#btnAddExercise').on('click', function() {
 
+  var name = $('#exerciseName').val();
+  var percentBodyMassDisplaced = $('#exercisePercentBodyMassDisplaced').val();
+  // Hide the modal form
+
+  $.ajax({
+      url: '/api/v1/exercise/add',
+      method: 'PUT',
+      data: {
+          id: -1,
+          stationId: getStationSelected(),
+          name: name,
+          percentBodyMassDisplaced: percentBodyMassDisplaced
+      }
+  }).done(function(data) {
+
+      $('#exerciseModalForm').modal('hide');
+      // Reload the table
+      var table = $('#exercises').DataTable();
+      table.ajax.reload(null, false);
+  }).fail(function(xhr, status, error){
+      alert(error);
+  });
+});
 
 /* Load exercises from the station selected creating a datatable and loading
    the exercises via Ajax */
@@ -74,7 +105,7 @@ function loadExercises(station_id, first=false) {
             {
                 type: "num",
                 data: 'percentBodyMassDisplaced',
-                title: "% Masa de Cos Desplaçada",
+                title: "% Masa de cos desplaçada",
                 render: $.fn.dataTable.render.number('', ',', 2)
             }
         ],
@@ -114,14 +145,38 @@ function loadExercises(station_id, first=false) {
 
 }
 
+/* return the station selected in this moment */
+function getStationSelected() {
+  var stationselected = $('li.list-group-item.active');
+
+  if (stationselected) {
+    return $(stationselected).attr('data-station-id');
+  } else {
+    return -1;
+  }
+
+}
+
+/* Refresh Exercises from the station selected in the list */
+$('li.list-group-item').on('click', function() {
+  if (!$(this).hasClass('active')) {
+
+    var stationId = $(this).attr('data-station-id');
+    $('li.list-group-item.active').removeClass('active');
+    $(this).addClass('active');
+    loadExercises(stationId);
+  }
+})
 
 /*
   Load Players and tasks
 */
 $(document).ready(function() {
-    var stationSelected = 1;
+    var stationSelected = getStationSelected();
 
-    // Load the exercises of first station
-    //loadExercises(stationSelected, true);
+    if (stationSelected != -1) {
+      // Load the exercises of first station in the list
+      loadExercises(stationSelected, true);
+    }
 
 });
diff --git a/chronojumpserver/templates/station_list.html b/chronojumpserver/templates/station_list.html
index fe0bdfc..43bb66b 100644
--- a/chronojumpserver/templates/station_list.html
+++ b/chronojumpserver/templates/station_list.html
@@ -5,15 +5,16 @@
 {% endblock %}
 
 {% block content %}
+<h2>Estacions i Exercicis</h2>
 <div class="row">
     <div class="col-sm-4">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <h3 class="panel-title">Estacions</h3><button id="btnShowStationModalForm" class="btn 
btn-default btn-sm">Afegir Estació</button>
             </div>
-            <ul id="stationList" class="list-group">
+            <ul class="list-group">
                 {% for station in stations %}
-                <li id="station-{{station.id}}" class="list-group-item"><a 
onclick="loadExercises({{station.id}});">{{station.name}}</a></li>
+                <li data-station-id="{{station.id}}" class="list-group-item{% if loop.first %} active{% 
endif %}">{{station.name}} ({{station.type}})</li>
                 {% endfor %}
             </ul>
         </div>
@@ -22,7 +23,7 @@
         {% if stations|length > 0 %}
         <div class="panel panel-default">
             <div class="panel-heading">
-                <h3 class="panel-title">Exercisis de l'Estació</h3><button id="btnShowExerciseModalForm" 
class="btn btn-default btn-sm">Afegir Exercisi</button>
+                <h3 class="panel-title">Exercicis de l'Estació</h3><button id="btnShowExerciseModalForm" 
class="btn btn-default btn-sm">Afegir Exercici</button>
             </div>
             <table id="exercises" class="table table-hovered">
                </table>
@@ -60,7 +61,35 @@
                </div>
                <!-- /.modal-content -->
        </div>
-       <!-- /.modal-dialog -->
+       <!-- /.modal-dialog Station-->
+</div>
+<div id="exerciseModalForm" class="modal fade" tabindex="-1" role="dialog">
+       <div class="modal-dialog" role="document">
+               <div class="modal-content">
+                       <div class="modal-header">
+                               <button type="button" class="close" data-dismiss="modal" 
aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                               <h4 id="modal-title" class="modal-title">Nou Exercici</h4>
+                       </div>
+                       <div class="modal-body">
+        <form class="form">
+            <div class="form-group">
+              <label for="exerciseName" class="control-label">Nom</label>
+              <input id="exerciseName" name="exerciseName" type="text" class="form-control"/>
+            </div>
+            <div class="form-group">
+              <label for="exercisePercentBodyMassDisplaced" class="control-label">Masa de cos 
desplaçada</label>
+              <input id="exercisePercentBodyMassDisplaced" name="exercisePercentBodyMassDisplaced" 
type="number" class="form-control"/>
+            </div>
+        </form>
+                       </div> <!-- .modal-body -->
+                       <div class="modal-footer">
+                               <button type="button" class="pull-left btn btn-default" 
data-dismiss="modal">Cancelar</button>
+                               <button id="btnAddExercise" type="button" class="pull-right btn 
btn-primary">Afegir</button>
+                       </div>
+               </div>
+               <!-- /.modal-content -->
+       </div>
+       <!-- /.modal-dialog Exercice-->
 </div>
 {% endblock %}