143 lines
5.3 KiB
HTML
143 lines
5.3 KiB
HTML
|
|
{% extends 'pfm/base.html' %}
|
|
{% load staticfiles %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div id="draggable" class="col m4 s12">
|
|
<p class="flow-text">Сумма операций за
|
|
<form method="POST" style="display: inline-block; float:left;"> {% csrf_token %}
|
|
<input type="hidden" name="selected_month" value= "{{ month|add:-1 }}">
|
|
<input type="hidden" name="selected_year" value="{{ datedate.year }}"><nobr>
|
|
<button type="submit" name="action" value="send" class="blue" style="margin: 6px 1px; color: white; width: 40px; height: 40px; float: left; ">
|
|
<i class="material-icons">skip_previous</i>
|
|
</button>
|
|
</form>
|
|
<span class="flow-text" style="display: inline-block; padding: 10px 5px;"> {{ datedate|date:"F Y"|lower}} </span><nobr>
|
|
<form method="POST" style="display: inline-block;"> {% csrf_token %}
|
|
<input type="hidden" name="selected_month" value= "{{ month|add:1 }}">
|
|
<input type="hidden" name="selected_year" value="{{ datedate.year }}">
|
|
<button type="submit" name="action" value="send" class="blue" style="display: block; float: left; margin: 6px 1px; color: white; width: 40px; height: 40px;">
|
|
<i class="material-icons" style="display: block; float: rigth; padding: 1px;">skip_next</i>
|
|
</button>
|
|
</form>
|
|
|
|
<form method="POST"> {% csrf_token %}
|
|
<input type="text" id="search" style="display: none">
|
|
<p><select name="selected_month"><nobr>
|
|
<option selected value="{{ datedate|date:"m" }}">{{ datedate|date:"F" }}</option>
|
|
<option value=""> </option>
|
|
<option value = "1">Январь</option>
|
|
<option value = "2">Февраль</option>
|
|
<option value = "3">Март</option>
|
|
<option value = "4">Апрель</option>
|
|
<option value = "5">Май</option>
|
|
<option value = "6">Июнь</option>
|
|
<option value = "7">Июль</option>
|
|
<option value = "8">Август</option>
|
|
<option value = "9">Сентябрь</option>
|
|
<option value = "10">Октябрь</option>
|
|
<option value = "11">Ноябрь</option>
|
|
<option value = "12">Декабрь</option>
|
|
</select> <nobr>
|
|
<script>
|
|
//$("select").on('click', function(){$("#search").css("display", "block")})
|
|
</script>
|
|
<select name="selected_year">
|
|
<option selected value="{{ datedate|date:"Y" }}">{{ datedate|date:"Y" }}</option>
|
|
<option value=""> </option>
|
|
<option value="2017">2017</option>
|
|
<option value="2016">2016</option>
|
|
<option value="2015">2015</option>
|
|
</select><nobr>
|
|
</form>
|
|
{{ mon_calendar|safe }}
|
|
</div>
|
|
<div class="col m4 s12 offset-m2">
|
|
<table cellpadding=5 width=300 class="bordered">
|
|
<tr>
|
|
<th>Категория</th>
|
|
<th>Сумма</th>
|
|
</tr>
|
|
{% for category in categories %}
|
|
{% if category.sum_cat %}
|
|
<tr> <td>{{ category.cat_name}}</td>
|
|
<td>{{ category.sum_cat}}</td>
|
|
<!--td>{{ category.avg }} </td--> </tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if sum_total %}
|
|
<tr>
|
|
<td align="right">Total:</td>
|
|
<td> {{ sum_total }} </td>
|
|
</tr>
|
|
{% endif %}
|
|
</table> <canvas id="canvas" width="360" height="360" style ="padding: 20px 0px;"></canvas> </div></div>
|
|
|
|
<!--script>
|
|
var data = [{% for cat in categories %} {{ cat.sum_cat|escapejs }}, {% endfor %}];
|
|
var data_cat = [{% for cat in categories %} "{{ cat.cat_name|escapejs }}", {% endfor %}];
|
|
var sum = 0;
|
|
for (var i=0; i < data.length; i++){sum += data[i]}
|
|
var r = 3.6;
|
|
var centerX = 180;
|
|
var centerY = 180;
|
|
var radius = 180;
|
|
var far = 108;
|
|
var start = (Math.PI/180)*0-Math.PI/2;
|
|
var colors = ['#5E35B1', '#43A047', '#E53935', '#1E88E5', '#D81B60', '#C0CA33', '#4e342e', '#00acc1', '#f9a825', '#546e7a', '#7b1fa2', '#689f38', '#ff6f00', '#6d4c41', '#3f51b5', '#00acc1'];
|
|
var canvas = document.getElementById('canvas');
|
|
var total = 0;
|
|
if (canvas.getContext){
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.strokeStyle = '#fff';
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'bevel';
|
|
for (var i=0; i < data.length;i++) {
|
|
ctx.beginPath();
|
|
total += data[i]*100/sum;
|
|
var end = (Math.PI/180)*r*total-Math.PI/2;
|
|
ctx.arc(centerX,centerY,radius, start, end);
|
|
ctx.lineTo(centerX,centerY);
|
|
ctx.fillStyle = colors[i];
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = "white";
|
|
ctx.font = "10pt calibri";
|
|
ctx.fillText(data_cat[i], centerX-15 + far * Math.cos((start + end) / 2), centerY + far * Math.sin((start + end) / 2));
|
|
start = end+0.01;
|
|
}
|
|
ctx.beginPath();
|
|
ctx.shadowBlur = 7;
|
|
ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
|
|
ctx.arc(centerX,centerY,radius, 0, 2*Math.PI);
|
|
ctx.stroke();
|
|
|
|
}
|
|
|
|
</script-->
|
|
<script>
|
|
var data = [{% for cat in categories %} {{ cat.sum_cat|escapejs }}, {% endfor %}];
|
|
var data_cat = [{% for cat in categories %} "{{ cat.cat_name|escapejs }}", {% endfor %}];
|
|
</script>
|
|
<script type="text/javascript" src="{% static 'js/diagram.js' %}"></script>
|
|
<script> console.log("t");
|
|
$(document).ready( function() {
|
|
$('form').on('change', function() {
|
|
var $form = $(this);
|
|
$.ajax({
|
|
type: 'POST',
|
|
data: $form.serialize(),
|
|
success: function(response){$('html').html(response)}
|
|
|
|
}).done(function() {
|
|
console.log('success');
|
|
}).fail(function() {
|
|
console.log('fail');
|
|
});
|
|
});
|
|
}); </script>
|
|
{% endblock content %}
|