[chronojump-server] Introducing Player Detail

[Marcos Venteo Garcia <mventeo src gnome org>]

commit 773cf0a8e9365e048c612302816271dc737b6c91
Author: Marcos Venteo <mventeo gmail com>
Date:   Wed May 31 21:17:30 2017 +0200

    Introducing Player Detail

 chronojump-flask/chronojump_server.py         |   54 +++++++++++++++++--------
 chronojump-flask/templates/player_detail.html |   46 +++++++++++++++++++++
 chronojump-flask/templates/player_list.html   |   14 ++++---
 chronojump-flask/templates/results.html       |   17 ++------
 4 files changed, 95 insertions(+), 36 deletions(-)
---
diff --git a/chronojump-flask/chronojump_server.py b/chronojump-flask/chronojump_server.py
index 766ac3a..042d352 100644
--- a/chronojump-flask/chronojump_server.py
+++ b/chronojump-flask/chronojump_server.py
@@ -1,7 +1,8 @@
-from flask import Flask, render_template, request, jsonify, url_for
+"""Chronojump Server implementation."""
+import subprocess
+from flask import Flask, render_template, request, jsonify
 from flask_restful import Resource, Api
 from flaskext.mysql import MySQL
-import subprocess
 from datetime import datetime
 import os
 from werkzeug import secure_filename
@@ -41,6 +42,7 @@ def Results():
     """Show results list."""
     return render_template('results.html')
 
+
 @app.route('/player_list', methods=['POST', 'GET'])
 def list():
     cursor = mysql.connect().cursor()
@@ -163,6 +165,20 @@ def uploader():
             return render_template("player_list.html", header=getHeader("Llistat de jugadors"), rows=rows)
 
 
+@app.route('/player/<player_id>', methods=['GET', 'POST'])
+def player_detail(player_id):
+    """Show the detail of the player."""
+    sql = "select * from person where id="+player_id
+
+    cursor = mysql.connect().cursor()
+    cursor.execute(sql)
+    row = cursor.fetchone()
+    if row:
+        return render_template('player_detail.html', player=row)
+    else:
+        raise AssertionError('The player does not exists')
+
+
 def get_all_results():
     """Get all the results to serve via ajax."""
     sql = "select results.id, results.dt, person.name, station.name, " \
@@ -196,6 +212,7 @@ def get_all_results():
         })
     return _results
 
+
 def get_all_players():
     """Get all the players, with the tasks associated with them."""
     sql = "select person.id as person_id, person.imageName, person.name, person.weight,"
@@ -211,22 +228,23 @@ def get_all_players():
         player_id = row[0]
         if player_id not in player_tasks.keys():
             # Add the player
-            player_tasks[player_id] = { 'id': player_id,
-                                        'imageName': row[1],
-                                        'name': row[2],
-                                        'weight': row[3],
-                                        'height': row[4],
-                                        'rfid': row[5],
-                                        'tasks': []
-                                      }
+            player_tasks[player_id] = {'id': player_id,
+                                       'imageName': row[1],
+                                       'name': row[2],
+                                       'weight': row[3],
+                                       'height': row[4],
+                                       'rfid': row[5],
+                                       'tasks': []
+                                       }
             # Avoid null tasks
         if row[7]:
-            player_tasks[player_id]['tasks'].append({ 'id': row[6],
-                                                      'description' : row[7]})
+            player_tasks[player_id]['tasks'].append({'id': row[6],
+                                                     'description': row[7]})
 
-    _rows =  [ val for key,val in player_tasks.iteritems()]
+    _rows = [val for key, val in player_tasks.iteritems()]
     return _rows
 
+
 class ResultsAPI(Resource):
     """Results resource."""
 
@@ -234,6 +252,7 @@ class ResultsAPI(Resource):
         results = get_all_results()
         return jsonify(data=results)
 
+
 class PlayerList(Resource):
     """Player resource"""
 
@@ -241,6 +260,7 @@ class PlayerList(Resource):
         players = get_all_players()
         return jsonify(data=players)
 
+
 class Player(Resource):
 
     def get(self, player_id):
@@ -261,25 +281,24 @@ class TaskList(Resource):
             sql = "insert into task values(NULL,"
             sql += "'" + dt.strftime('%y-%m-%d %H:%M:%S') + "',"
             sql += str(player_id) + ","
-            sql += "'" + description.encode('utf-8')+ "', 0)"
+            sql += "'" + description.encode('utf-8') + "', 0)"
         else:
             sql = "update task set "
             sql += "comment='" + description.encode('utf-8') + "' "
-            sql += "where id="+task_id
+            sql += "where id=" + task_id
         print sql
         db = mysql.connect()
         cursor = db.cursor()
         cursor.execute(sql)
         db.commit()
 
-
         return jsonify(msg="Success")
 
     def delete(self):
         task_id = request.form['task_id']
 
         sql = "delete from task "
-        sql += "where id="+task_id
+        sql += "where id=" + task_id
 
         db = mysql.connect()
         cursor = db.cursor()
@@ -288,6 +307,7 @@ class TaskList(Resource):
 
         return jsonify(msg="Success")
 
+
 api.add_resource(ResultsAPI, '/api/v1/results')
 api.add_resource(PlayerList, '/api/v1/players')
 api.add_resource(Player, '/api/v1/player/<player_id>')
diff --git a/chronojump-flask/templates/player_detail.html b/chronojump-flask/templates/player_detail.html
new file mode 100644
index 0000000..8a3c5d1
--- /dev/null
+++ b/chronojump-flask/templates/player_detail.html
@@ -0,0 +1,46 @@
+{% extends 'base.html' %} {% block extra_stylesheet %} {% endblock %} {% block main_content %}
+<div class="row">
+  <h1>Dades del jugador {{player[1]}}</h1>
+</div>
+<div class="row" style="margin-top:20px">
+  <form class="form">
+    <div class="col-sm-4">
+      <img class="img-rounded" src="/static/images/{{player[5]}}">
+    </div>
+    <div class="col-sm-8">
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="form-group">
+            <label for="player-name">Nom del jugador</label>
+            <input id="player-name" class="form-control" type="text" value="{{player[1]}}" />
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="form-group">
+            <label for="player-height">Alçada</label>
+            <input id="player-heigth" class="form-control" type="text" value="{{player[3]}}" />
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="form-group">
+            <label for="player-weight">Pes</label>
+            <input id="player-weight" class="form-control" type="text" value="{{player[2]}}" />
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="form-group">
+            <label for="player-rfid">RFID</label>
+            <input id="player-rfid" class="form-control" type="text" value="{{player[4]}}" />
+          </div>
+        </div>
+
+      </div>
+      <button class="btn btn-default">RFID Perduda</button>
+
+      <button class="btn btn-danger ">Eliminar el Jugador</button>
+      <button class="btn btn-primary pull-right">Desar els canvis</button>
+    </div>
+
+  </form>
+</div>
+{% endblock %}
diff --git a/chronojump-flask/templates/player_list.html b/chronojump-flask/templates/player_list.html
index 34ac822..ea8e246 100644
--- a/chronojump-flask/templates/player_list.html
+++ b/chronojump-flask/templates/player_list.html
@@ -1,5 +1,4 @@
-{% extends 'base.html' %}
-{% block extra_stylesheet %}
+{% extends 'base.html' %} {% block extra_stylesheet %}
 <link href="{{ url_for('static', filename='DataTables/media/css/dataTables.bootstrap.min.css') }}" 
rel="stylesheet" /> {% endblock %}
 {% block extra_js %}
 <script src="{{ url_for('static', filename='DataTables/media/js/jquery.dataTables.min.js') }}"></script>
@@ -51,14 +50,17 @@ function addModifyDeleteTask(action) {
                                        render: function(value){
                                                var href='/static/images/'+ value;
                                                var src = '/static/images/'+ value;
-                                               var html='<a href="'+href+'"><img src="'+src+'" 
class="img-circle" height="60"></a>';
+                                               var html='<a href="'+href+'" class="player-link"><img 
src="'+src+'" class="img-circle" height="60"></a>';
                                                return html;
                                        }
                                },
                                {
                                        type: "html",
                                        data: "name",
-                                       title: "Nom"
+                                       title: "Nom",
+                                       render: function(data, type, row) {
+                                               return '<a href="/player/' +row.id+ '">'+data+'</a>';
+                                       }
                                },
                                {
                                        type: "num",
@@ -106,7 +108,7 @@ function addModifyDeleteTask(action) {
                        ],
                        "pageLength": 10,
                        "order": [ 
-                               [0, 'desc']
+                               [2, 'asc']
                        ],
                        "ajax": "/api/v1/players",
                        "processing": true,
@@ -143,7 +145,7 @@ function addModifyDeleteTask(action) {
                                $('#btnAddTask').removeClass('hidden').addClass('show');
            } );
 
-               $('#players').on('click', 'a', function() {
+               $('#players').on('click', 'a.task-link', function() {
                        var player = table.row( $(this).parents('tr') ).data();
                        console.log('Modify task '+ $(this).text());
                        $('#task-comment').val($(this).text());
diff --git a/chronojump-flask/templates/results.html b/chronojump-flask/templates/results.html
index b03ef8e..50e6a2a 100644
--- a/chronojump-flask/templates/results.html
+++ b/chronojump-flask/templates/results.html
@@ -5,23 +5,14 @@
 <script src="{{ url_for('static', filename='DataTables/media/js/dataTables.bootstrap.min.js') }}"></script>
 <script type="text/javascript">
 
-$.fn.dataTableExt.oSort["customdate-desc"] = function (x, y) {
-       var table = $('#results').DataTable();
+       $.fn.dataTableExt.oSort["customdate-desc"] = function (x, y) {
 
+       };
 
+       $.fn.dataTableExt.oSort["customdate-asc"] = function (x, y) {
 
-       console.log('Order by id desc');
-};
+               }
 
-$.fn.dataTableExt.oSort["customdate-asc"] = function (x, y) {
-       var table = $('#results').DataTable();
-
-
-
-                       console.log('Order by id asc');
-       }
-
-       $
 
        $(document).ready(function() {
                // Initialize datatable with results