118 lines
2.9 KiB
HTML
118 lines
2.9 KiB
HTML
{% extends "newbase.html" %}
|
|
{% load static %}
|
|
{% load rowerfilters %}
|
|
|
|
{% block title %}Advanced Features {% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script type='text/javascript'
|
|
src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
|
|
</script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery UI Slider - Range slider</title>
|
|
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
|
|
<link rel="stylesheet" href="/resources/demos/style.css">
|
|
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
|
|
|
|
<script>
|
|
function submit_form() {
|
|
console.log("form changed");
|
|
var frm = $("#instrokeform");
|
|
var data = new FormData(frm[0]);
|
|
|
|
$.ajax({
|
|
url:"/rowers/workout/{{ workout.id|encode }}/instroke/interactive/",
|
|
type: "POST",
|
|
contentType: false,
|
|
processData: false,
|
|
data: data,
|
|
dataType: 'json',
|
|
|
|
success: function(data) {
|
|
console.log(data);
|
|
$("#id_script").replaceWith('<div id="id_script">'+data.script+'</d'+'iv>');
|
|
$("#id_chart").replaceWith('<div id="id_chart">'+data.div+'</d'+'iv>');
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
|
|
function csrfSafeMethod(method) {
|
|
return(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
|
|
}
|
|
$.ajaxSetup({
|
|
beforeSend: function(xhr, settings) {
|
|
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
|
|
xhr.setRequestHeader("X-CSRFToken", csrftoken);
|
|
}
|
|
}
|
|
});
|
|
$("#instrokeform").on('change', function(evt) {
|
|
submit_form();
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$( function() {
|
|
$( "#slider-range" ).slider({
|
|
range: true,
|
|
min: 0,
|
|
max: 60,
|
|
values: [ 15, 45 ],
|
|
slide: function( event, ui ) {
|
|
$( "#id_spm_min" ).val( ui.values[ 0 ]);
|
|
$( "#id_spm_max" ).val(ui.values[ 1 ] );
|
|
}
|
|
|
|
});
|
|
$("#instrokeform").mouseup(function() {
|
|
submit_form();
|
|
});
|
|
|
|
} );
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
|
|
<script src="https://cdn.pydata.org/bokeh/release/bokeh-2.2.3.min.js"></script>
|
|
|
|
<script async="true" type="text/javascript">
|
|
Bokeh.set_log_level("info");
|
|
</script>
|
|
|
|
<div id="id_script">
|
|
{{ the_script |safe }}
|
|
</div>
|
|
|
|
<h1>In Stroke Metrics</h1>
|
|
<ul class="main-content">
|
|
<li class="grid_4">
|
|
<div id="id_chart" class="flexplot">
|
|
{{ the_div|safe }}
|
|
</div>
|
|
</li>
|
|
<li class="grid_4">
|
|
<form id="instrokeform" enctype="multipart/form-data" action="" method="post">
|
|
{% csrf_token %}
|
|
<table>
|
|
{{ form.as_table }}
|
|
</table>
|
|
<div id="slider-container">
|
|
<span>Stroke Rate Slider</span>
|
|
<hr id="slider-range" />
|
|
</div>
|
|
<input name='form' class="button" type="submit" value="Submit">
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
{% endblock %}
|
|
|
|
{% block sidebar %}
|
|
{% include 'menu_workout.html' %}
|
|
{% endblock %}
|