From 79c3b86034efc6e90c8dc88501dd6d6a4c36320d Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 24 Nov 2017 09:41:01 +0100
Subject: [PATCH] added glue to templates

---
 rowers/templates/advancededit.html  | 369 +++++++++++++++-------------
 rowers/templates/advancedotw.html   |  31 ++-
 rowers/templates/list_workouts.html |   7 +-
 3 files changed, 222 insertions(+), 185 deletions(-)

diff --git a/rowers/templates/advancededit.html b/rowers/templates/advancededit.html
index 0df1fff3..a43e0c04 100644
--- a/rowers/templates/advancededit.html
+++ b/rowers/templates/advancededit.html
@@ -6,198 +6,217 @@
 
 {% block content %}
 <div id="workouts" class="grid_6 alpha">
-
-  {% if form.errors %}
-  <p style="color: red;">
-    Please correct the error{{ form.errors|pluralize }} below.
-  </p>
-  {% endif %}
-
-  <h1>{{ workout.name }} - Advanced</h1>
-  {% if user.rower.rowerplan == 'basic' %}
-  <p>This is a preview of the page with advanced functionality for Pro users.
-    See
-    <a href="/rowers/promembership">the page about Pro membership</a> for more information and to sign up for Pro Membership</a>
-{% endif %}
-<div class="grid_2 alpha">
-  <p>
-    <a class="button gray small" href="/rowers/workout/{{ workout.id }}/edit">Edit Workout</a>
-  </p>
-</div>
-<div class="grid_2">
-  <p>
-    <a class="button gray small" href="/rowers/workout/{{ workout.id }}/workflow">Workflow View</a>
-  </p>
-</div>
-<div class="grid_2 omega">
-  <p>
-    <a class="button gray small" href="/rowers/workout/{{ workout.id }}/export">Export</a>
-  </p>
-
-</div>
-<div class="grid_6  alpha">
-
-  <table width=100%>
-    <tr>
-      <th>Date:</th><td>{{ workout.date }}</td>
-    </tr><tr>
-      <th>Time:</th><td>{{ workout.starttime }}</td>
-    </tr><tr>
-      <th>Distance:</th><td>{{ workout.distance }}m</td>
-    </tr><tr>
-      <th>Duration:</th><td>{{ workout.duration |durationprint:"%H:%M:%S.%f" }}</td>
-    </tr>
-    <th>Public link to this workout</th>
-    <td>
-      <a href="/rowers/workout/{{ workout.id }}">https://rowsandall.com/rowers/workout/{{ workout.id }}</a>
-    <td>
-  </table>
-</div>
-
-<div class="grid_6 alpha">
-  <div class="grid_2 alpha">
-    {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
-    <a class="button blue small" href="/rowers/workout/compare/{{ workout.id }}">Compare Workouts</a>
-    {% else %}
-    <a class="button blue small" href="/rowers/promembership/">Compare Workouts</a>
+  <div class="grid_6 alpha">
+    {% if form.errors %}
+    <p style="color: red;">
+      Please correct the error{{ form.errors|pluralize }} below.
+    </p>
+    {% endif %}
+    
+    <h1>{{ workout.name }} - Advanced</h1>
+    {% if user.rower.rowerplan == 'basic' %}
+    <p>This is a preview of the page with advanced functionality for Pro users.
+      See
+      <a href="/rowers/promembership">the page about Pro membership</a>
+      for more information and to sign up for Pro Membership</a></p>
     {% endif %}
-    <p>
-      Compare this workout to other workouts. Plot HR, SPM, or pace vs time or distance for the two workouts.
-    </p>
   </div>
-  <div class="grid_2">
-    <a class="button blue small" href="/rowers/workout/{{ workout.id }}/flexchart">
-      Flexible Interactive Plot
-    </a>
-    <p>
-      Flexible Interactive plot. Pick your own X and Y axis parameters.
-    </p>
+  <div class="grid_6 alpha">
+    <div class="grid_2 alpha">
+      <p>
+        <a class="button gray small" href="/rowers/workout/{{ workout.id }}/edit">Edit Workout</a>
+      </p>
+    </div>
+    <div class="grid_2">
+      <p>
+        <a class="button gray small" href="/rowers/workout/{{ workout.id }}/workflow">Workflow View</a>
+      </p>
+    </div>
+    <div class="grid_2 omega">
+      <p>
+        <a class="button gray small" href="/rowers/workout/{{ workout.id }}/export">Export</a>
+      </p>
+    </div>
   </div>
 
-  <div class="grid_2 omega tooltip">
-    <p>
+  <div class="grid_6 alpha">
+  
+    <table width=100%>
+      <tr>
+        <th>Date:</th><td>{{ workout.date }}</td>
+      </tr><tr>
+        <th>Time:</th><td>{{ workout.starttime }}</td>
+      </tr><tr>
+        <th>Distance:</th><td>{{ workout.distance }}m</td>
+      </tr><tr>
+        <th>Duration:</th><td>{{ workout.duration |durationprint:"%H:%M:%S.%f" }}</td>
+      </tr>
+      <th>Public link to this workout</th>
+      <td>
+        <a href="/rowers/workout/{{ workout.id }}">https://rowsandall.com/rowers/workout/{{ workout.id }}</a>
+      <td>
+    </table>
+  </div>
+  
+  <div class="grid_6 alpha">
+    <div class="grid_2 alpha">
       {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
-      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/editintervals">Edit Intervals</a>
+      <a class="button blue small" href="/rowers/workout/compare/{{ workout.id }}">Compare Workouts</a>
       {% else %}
-      <a class="button blue small" href="/rowers/promembership">Edit Intervals</a>
+      <a class="button blue small" href="/rowers/promembership/">Compare Workouts</a>
       {% endif %}
-    </p>
-    <span class="tooltiptext">Enter or change the interval and summary data for your workout</span>
-
-    <p>
-      Enter or change the interval and summary data for your workout
-    </p>
+      <p>
+        Compare this workout to other workouts. Plot HR, SPM, or pace vs time or distance for the two workouts.
+      </p>
+    </div>
+    <div class="grid_2">
+      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/flexchart">
+        Flexible Interactive Plot
+      </a>
+      <p>
+        Flexible Interactive plot. Pick your own X and Y axis parameters.
+      </p>
+    </div>
+    
+    <div class="grid_2 omega tooltip">
+      <p>
+        {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
+        <a class="button blue small" href="/rowers/workout/{{ workout.id }}/editintervals">Edit Intervals</a>
+        {% else %}
+        <a class="button blue small" href="/rowers/promembership">Edit Intervals</a>
+        {% endif %}
+      </p>
+      <span class="tooltiptext">Enter or change the interval and summary data for your workout</span>
+      
+      <p>
+        Enter or change the interval and summary data for your workout
+      </p>
+    </div>
   </div>
-</div>
-<div class="grid_6 alpha">
-
-  <div class="grid_2 alpha">
-    <p>
-      {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
-      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/adddistanceplot2">Dist Metrics Plot</a>
-      {% else %}
-      <a class="button blue small" href="/rowers/promembership">Dist Metrics Plot</a>
-      {% endif %}
-    </p>
-    <p>
-      Various advanced stroke metrics plotted versus distance.
-    </p>
+  <div class="grid_6 alpha">
+    
+    <div class="grid_2 alpha">
+      <p>
+        {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
+        <a class="button blue small" href="/rowers/workout/{{ workout.id }}/adddistanceplot2">Dist Metrics Plot</a>
+        {% else %}
+        <a class="button blue small" href="/rowers/promembership">Dist Metrics Plot</a>
+        {% endif %}
+      </p>
+      <p>
+        Various advanced stroke metrics plotted versus distance.
+      </p>
+    </div>
+    <div class="grid_2">
+      <p>
+        {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
+        <a class="button blue small" href="/rowers/workout/{{ workout.id }}/addtimeplot2">Time Metrics Plot</a>
+        {% else %}
+        <a class="button blue small" href="/rowers/promembership">Time Metrics Plot</a>
+        {% endif %}
+      </p>
+      <p>
+        Various advanced stroke metrics plotted versus time.
+      </p>
+    </div>
+    <div class="grid_2 omega">
+      <p>
+        {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
+        <a class="button blue small" href="/rowers/workout/{{ workout.id }}/histo">Power Histogram</a>
+        {% else %}
+        <a class="button blue small" href="/rowers/promembership">Power Histogram</a>
+        {% endif %}
+      </p>
+      <p>
+        Plot the Power Histogram of this workout
+      </p>
+    </div>
   </div>
-  <div class="grid_2">
-    <p>
-      {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
-      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/addtimeplot2">Time Metrics Plot</a>
-      {% else %}
-      <a class="button blue small" href="/rowers/promembership">Time Metrics Plot</a>
-      {% endif %}
-    </p>
-    <p>
-      Various advanced stroke metrics plotted versus time.
-    </p>
+  <div class="grid_6 alpha">
+    <div class="grid_2 alpha">
+      <p>
+        {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
+        <a class="button blue small" href="/rowers/workouts-join-select">Glue</a>
+        {% else %}
+        <a class="button blue small" href="/rowers/promembership">Glue</a>
+        {% endif %}
+      </p>
+      <p>
+        Glue multiple workouts together (into one workout). For example, to combine separately recorded intervals.
+      </p>
+    </div>
+    
+    <div class="grid_2">
+      <p>
+        {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
+        <a class="button blue small" href="/rowers/workout/fusion/{{ workout.id }}/">Sensor Fusion</a>
+        {% else %}
+        <a class="button blue small" href="/rowers/promembership">Sensor Fusion</a>
+        {% endif %}
+      </p>
+      <p>
+        Merge data from another source into this workout
+      </p>
+    </div>
+    <div class="grid_2 omega">
+      <p>
+        {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
+        <a class="button blue small" href="/rowers/workout/{{ workout.id }}/split">Split Workout</a>
+        {% else %}
+        <a class="button blue small" href="/rowers/promembership">Split Workout</a>
+        {% endif %}
+      </p>
+      <p>
+        Split workout into two seperate workouts
+      </p>
+    </div>
   </div>
-  <div class="grid_2 omega">
-    <p>
-      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/interactiveplot">Big Interactive Plot</a>
-    </p>
-    <p>
-      See (and save) the big interactive plot
-    </p>
+  <div class="grid_6 alpha">
+        <div class="grid_2 alpha">
+      <p>
+        <a class="button blue small" href="/rowers/workout/{{ workout.id }}/interactiveplot">Big Interactive Plot</a>
+      </p>
+      <p>
+        See (and save) the big interactive plot
+      </p>
+    </div>
   </div>
 </div>
-<div class="grid_6 alpha">
-
-  <div class="grid_2 alpha">
-    <p>
-      {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
-      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/histo">Power Histogram</a>
-      {% else %}
-      <a class="button blue small" href="/rowers/promembership">Dist Metrics Plot</a>
-      {% endif %}
-    </p>
-    <p>
-      Plot the Power Histogram of this workout
-    </p>
-  </div>
-  <div class="grid_2">
-    <p>
-    {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
-    <a class="button blue small" href="/rowers/workout/fusion/{{ workout.id }}/">Sensor Fusion</a>
-    {% else %}
-      <a class="button blue small" href="/rowers/promembership">Sensor Fusion</a>
-      {% endif %}
-    </p>
-    <p>
-      Merge data from another source into this workout
-    </p>
-  </div>
-  <div class="grid_2 omega">
-    <p>
-    {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
-    <a class="button blue small" href="/rowers/workout/{{ workout.id }}/split">Split Workout</a>
-    {% else %}
-      <a class="button blue small" href="/rowers/promembership">Split Workout</a>
-      {% endif %}
-    </p>
-    <p>
-      Split workout into two seperate workouts
-    </p>
-  </div>
-</div>
-</div>
 <div id="advancedplots" class="grid_6 omega">
-      <div class="grid_6 alpha">
-
-	<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
-	<script async="true" type="text/javascript">
-    Bokeh.set_log_level("info");
-	</script>
-
-	{{ interactiveplot |safe }}
-
+  <div class="grid_6 alpha">
+    
+    <script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
+    <script async="true" type="text/javascript">
+      Bokeh.set_log_level("info");
+    </script>
+    
+    {{ interactiveplot |safe }}
+    
     <script>
-    // Set things up to resize the plot on a window resize. You can play with
-    // the arguments of resize_width_height() to change the plot's behavior.
-    var plot_resize_setup = function () {
-        var plotid = Object.keys(Bokeh.index)[0]; // assume we have just one plot
-        var plot = Bokeh.index[plotid];
-        var plotresizer = function() {
-            // arguments: use width, use height, maintain aspect ratio
-            plot.resize_width_height(true, true, true);
-        };
-        window.addEventListener('resize', plotresizer);
-        plotresizer();
-    };
-    window.addEventListener('load', plot_resize_setup);
+      // Set things up to resize the plot on a window resize. You can play with
+      // the arguments of resize_width_height() to change the plot's behavior.
+      var plot_resize_setup = function () {
+      var plotid = Object.keys(Bokeh.index)[0]; // assume we have just one plot
+      var plot = Bokeh.index[plotid];
+      var plotresizer = function() {
+      // arguments: use width, use height, maintain aspect ratio
+      plot.resize_width_height(true, true, true);
+      };
+      window.addEventListener('resize', plotresizer);
+      plotresizer();
+      };
+      window.addEventListener('load', plot_resize_setup);
     </script>
     <style>
-    /* Need this to get the page in "desktop mode"; not having an infinite height.*/
-    html, body {height: 100%; margin:5px;}
+      /* Need this to get the page in "desktop mode"; not having an infinite height.*/
+      html, body {height: 100%; margin:5px;}
     </style>
-
-
-<div id="interactiveplot" class="grid_6 omega">
-	{{ the_div |safe }}
-</div>
+    
+    
+    <div id="interactiveplot" class="grid_6 omega">
+      {{ the_div |safe }}
+    </div>
+  </div>
 </div>
 
 {% endblock %}
diff --git a/rowers/templates/advancedotw.html b/rowers/templates/advancedotw.html
index 3c4999fc..0f54ff2b 100644
--- a/rowers/templates/advancedotw.html
+++ b/rowers/templates/advancedotw.html
@@ -187,14 +187,18 @@
 </div>
 
 <div class="grid_6 alpha">
-  <div class="grid_2 alpha">
-    <p>
-      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/interactiveplot">Big Interactive Plot</a>
-    </p>
-    <p>
-      See (and save) the big interactive plot
-    </p>
-  </div>
+    <div class="grid_2 alpha">
+      <p>
+        {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
+        <a class="button blue small" href="/rowers/workouts-join-select">Glue</a>
+        {% else %}
+        <a class="button blue small" href="/rowers/promembership">Glue</a>
+        {% endif %}
+      </p>
+      <p>
+        Glue multiple workouts together (into one workout). For example, to combine separately recorded intervals.
+      </p>
+    </div>
   <div class="grid_2">
     <p>
     {% if user.rower.rowerplan == 'pro' or user.rower.rowerplan == 'coach' %}
@@ -220,6 +224,17 @@
     </p>
   </div>
 
+</div>
+<div class="grid_6 alpha">
+  <div class="grid_2 alpha">
+    <p>
+      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/interactiveplot">Big Interactive Plot</a>
+    </p>
+    <p>
+      See (and save) the big interactive plot
+    </p>
+  </div>
+
 </div>
 </div>
 <div id="advancedplots" class="grid_6 omega">
diff --git a/rowers/templates/list_workouts.html b/rowers/templates/list_workouts.html
index c04b7727..e051f0b6 100644
--- a/rowers/templates/list_workouts.html
+++ b/rowers/templates/list_workouts.html
@@ -195,7 +195,7 @@
 </div>
 
 
-<div class="grid_5 alpha">
+<div class="grid_6 alpha">
   {% if rankingonly and not team %}
     <div class="grid_2 prefix_1 alpha">
       <a class="button small green" href="/rowers/list-workouts">All Workouts</a>
@@ -205,6 +205,9 @@
       <a class="button small green" href="/rowers/list-workouts/ranking">Ranking Pieces Only</a>
     </div>    
     {% endif %}
+    <div class="grid_2 suffix_1 omega">
+      <a class="button small gray" href="/rowers/workouts-join-select">Glue Workouts</a>
+    </div>
     <p>&nbsp;</p>
   {% if team %}
   <form id="searchform" action="/rowers/list-workouts/team/{{ team.id }}/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}"
@@ -223,7 +226,7 @@
     </div>
   </form>
 </div>
-<div class="grid_2 prefix_1 omega">
+<div class="grid_2 omega">
   <span class="button gray small">
     {% if workouts.has_previous %}
     {% if request.GET.q %}