[chronojump-server] Airport Mode finished. Each 15 seconds the next page is shown.

[Marcos Venteo Garcia <mventeo src gnome org>]

commit 6663f1c0d59b47b0ccb583434281390971c56fe8
Author: Marcos Venteo García <mventeo gmail com>
Date:   Thu Jun 29 08:10:30 2017 +0200

    Airport Mode finished. Each 15 seconds the next page is shown.

 chronojumpserver/js/airport.js          |   29 ++++++++++++++-
 chronojumpserver/static/style.css       |   55 ++++++++++++++++++++++++++--
 chronojumpserver/templates/airport.html |   61 +++++++++++++++++++++----------
 chronojumpserver/templates/layout.html  |    2 +-
 chronojumpserver/views.py               |   12 ++++++-
 5 files changed, 133 insertions(+), 26 deletions(-)
---
diff --git a/chronojumpserver/js/airport.js b/chronojumpserver/js/airport.js
index 10155bf..6b96d03 100644
--- a/chronojumpserver/js/airport.js
+++ b/chronojumpserver/js/airport.js
@@ -20,7 +20,11 @@
 
 $(document).ready(function() {
 
-
+    var num = $("table#airportTable tr:first-child > td").length;
+    var width = (100 / num) + "%";
+    console.log(width);
+    //$("td").css("width", width);​
+    $('td').css('width', width);
 
     $.ajax({
         url: '/api/v1/station/active_tasks_player'
@@ -40,5 +44,28 @@ $(document).ready(function() {
         alert(err.msg);
     });
 
+    setInterval(function() {
+       /* Set the interval for refresh */
+       var pageId = parseInt($('#airportPageId').val());
+       var totalPages = parseInt($('#totalPages').val());
+       console.log(pageId);
+       console.log(totalPages);
+       var nextPageId = pageId + 1;
+       if (nextPageId > totalPages) {
+           nextPageId = 1;
+       }
+       console.log(nextPageId)
+       window.location.href = "/airport/"+nextPageId;
+   }, 15000);
+
+   $('li.pageIndicator').on('click', function() {
+       var pageId = parseInt($(this).attr('data-slide-to'));
+       var currentPageId = parseInt($('#airportPageId').val());
+       if (pageId != currentPageId) {
+            // Go to the page selected
+            window.location.href = "/airport/"+pageId;
+       }
+
+   })
 
 });
diff --git a/chronojumpserver/static/style.css b/chronojumpserver/static/style.css
index d8e7a5a..05a244e 100755
--- a/chronojumpserver/static/style.css
+++ b/chronojumpserver/static/style.css
@@ -11,6 +11,10 @@ body {
   margin-top: 50px;
 }
 
+body.airport {
+    padding-bottom: 0px;
+}
+
 body.home {
   margin-top: 0px;
 }
@@ -76,18 +80,61 @@ body.home {
 * AIRPORT PAGE
 */
 
-#airportStationTable thead tr th {
+#airportTable {
+    border: none;
+}
+
+#airportTable thead tr th {
     /*border-bottom: none;*/
 }
 
-#airportStationTable tbody tr td {
+#airportTable tbody tr td {
     /*border-top: none;*/
 }
 
-.airportPlayerStationCell {
+.playerStationCell {
 
 }
 
 .playerWithActiveTasks {
-    background-color: green;
+    /* Permalink - use to edit and share this gradient: 
http://colorzilla.com/gradient-editor/#00894e+0,006e2e+100 */
+background: #00894e; /* Old browsers */
+background: -moz-linear-gradient(top, #00894e 0%, #006e2e 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(top, #00894e 0%,#006e2e 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(to bottom, #00894e 0%,#006e2e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, 
Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00894e', 
endColorstr='#006e2e',GradientType=0 ); /* IE6-9 */
+}
+
+#airportTable td.playerName {
+    font-size: 18px;
+    font-weight: bold;
+    text-align: right;
+    vertical-align: middle;
+    border-left: none;
+    border-bottom: none;
+    border-top: none;
+}
+#airportTable th.stationName {
+    text-align: center;
+    background-color: #eee;
+
+}
+
+.carousel-indicators {
+    bottom: 10px;
+}
+
+.carousel-indicators li {
+    border-color: #000;
+}
+
+.carousel-indicators li.active {
+    background-color: gray;
+}
+
+.navbar-text.airport-title {
+    color: #fff;
+    font-size: 1.5em;
+    font-weight: bold;
+    padding-top: 10px;
 }
diff --git a/chronojumpserver/templates/airport.html b/chronojumpserver/templates/airport.html
index 6f3315d..00f2917 100644
--- a/chronojumpserver/templates/airport.html
+++ b/chronojumpserver/templates/airport.html
@@ -4,33 +4,46 @@
 <link href="{{ url_for('assets', filename='DataTables/media/css/dataTables.bootstrap.min.css') }}" 
rel="stylesheet" />
 {% endblock %}
 
+{% block title %}Quadre de jugadors i estacions{% endblock %}
+
 {% block nav %}
 <nav class="navbar navbar-default navbar-fixed-top">
-    <div class="container-fluid">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-            <a class="navbar-brand" href="/">
-                <img alt="Brand" src="{{ url_for('static', filename='images/chronojump-logo.png')}}" 
height="48px">
-            </a>
+    <div class="container">
+        <div style="margin-left: 180px">
+
+            <div class="navbar-header" >
+              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+              </button>
+
+            </div>
+        <a class="navbar-brand" href="/">
+            <img alt="Brand" src="{{ url_for('static', filename='images/chronojump-logo.png')}}" 
height="48px">
+        </a>
+        <p class="navbar-text airport-title">Quadre de jugadors i estacions</p>
+        <a class="navbar-brand" href="/">
+            <img alt="Brand" src="{{ url_for('static', filename='images/logo_club.png')}}" height="48px">
+        </a>
         </div>
+
     </div>
 </nav>
 {% endblock %}
 
+{%block body_class %}airport{% endblock %}
+
 {% block content_fluid %}
-<table id="airportStationTable" class="table table-hovered" style="margin-top: 40px">
+<input type="hidden" id="airportPageId" value="{{airportPageId}}"  />
+<input type="hidden" id="totalPages" value="{{totalPages}}"  />
+<table id="airportTable" class="table table-bordered table-hover" style="margin-top: 40px">
     <thead>
         <tr>
-            <th width="100">
-                Jugador
-            </th>
+            <th style="border:none;"></th>
         {% for station in stations %}
-            <th>
+            <th class="stationName">
                 {{ station.name }}
             </th>
         {% endfor %}
@@ -38,19 +51,29 @@
         <tbody>
                 {% for player in players %}
                 <tr>
-                    <td>
+                    <td class="playerName">
                         {{player.name}}
+                        {%if player.imageName %}
+                            <img src="/static/images/photos/{{player.imageName}}" class="img-circle" 
height="42">
+                        {% endif %}
+
                     </td>
                     {% for station in stations %}
-                        <td id="cell_{{station.id}}_{{player.id}}" class="airportPlayerStationCell">
+                        <td id="cell_{{station.id}}_{{player.id}}" class="playerStationCell">
                         </td>
                     {% endfor %}
                 </tr>
                 {% endfor %}
-            </tr>
         </tbody>
     </thead>
 </table>
+
+<ol class="carousel-indicators">
+    {% for n in range(totalPages) %}
+
+        <li ©="{{n+1}}" class="pageIndicator {% if (n+1 == airportPageId) %}active{% endif %}"></li>
+    {% endfor %}
+  </ol>
 {% endblock %}
 
 {% block footer %}
diff --git a/chronojumpserver/templates/layout.html b/chronojumpserver/templates/layout.html
index e4ef16d..877ff93 100755
--- a/chronojumpserver/templates/layout.html
+++ b/chronojumpserver/templates/layout.html
@@ -2,7 +2,7 @@
 <html lang="ca">
 
 <head>
-    <title>Chronojump Server - {{club_name}}</title>
+    <title>{% block title %}Chronojump Server{% endblock %}</title>
     {% block head %}
     <link rel="stylesheet" type="text/css" href="{{ url_for('assets', 
filename='bootstrap/css/bootstrap.min.css')}}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('assets', 
filename='font-awesome/css/font-awesome.min.css')}}" />
diff --git a/chronojumpserver/views.py b/chronojumpserver/views.py
index bf10cf8..1fa0547 100755
--- a/chronojumpserver/views.py
+++ b/chronojumpserver/views.py
@@ -19,9 +19,19 @@ def index():
 @app.route('/airport')
 def airport():
     """Airport mode."""
+    redirect('/airport/1')
+
+@app.route('/airport/<pageId>')
+def airport_page(pageId):
+    """Airport mode."""
+
     stations = [ station.serialize for station in Station.query.filter(Station.type != 'S')]
     players =  [ player.serialize for player in Person.query.all()]
-    return render_template('airport.html', stations=stations, players=players)
+    totalPages = len(players) / 15
+    _min = (int(pageId) -1) * 15;
+    _max =  _min + 15
+    return render_template('airport.html', stations=stations, players=players[_min:_max],
+                           airportPageId=int(pageId), totalPages=totalPages+1)
 
 @app.route('/results')
 def show_results():