forked from DGNum/gestioCOF
Frontend tout en JS
This commit is contained in:
parent
46f343b1ab
commit
0fcb29252b
7 changed files with 205 additions and 313 deletions
|
@ -14,14 +14,12 @@
|
|||
<script type="text/javascript" src="{% static 'kfet/js/Chart.bundle.js' %}"></script>
|
||||
<script type="text/javascript" src="{% static 'kfet/js/statistic.js' %}"></script>
|
||||
<script>
|
||||
jQuery(document).ready(function() {
|
||||
var stat_last = $("#stat_last");
|
||||
var stat_balance = $("#stat_balance");
|
||||
var stat_last_url = "{% url 'kfet.account.stat.last' trigramme=account.trigramme %}";
|
||||
var stat_balance_url = "{% url 'kfet.account.stat.balance' trigramme=account.trigramme %}";
|
||||
STAT.get_thing(stat_last_url, stat_last, "Stat non trouvées :(");
|
||||
STAT.get_thing(stat_balance_url, stat_balance, "Stat non trouvées :(");
|
||||
});
|
||||
jQuery(document).ready(function() {
|
||||
var stat_last = new StatsGroup("{% url 'kfet.account.stat.last' trigramme=account.trigramme %}",
|
||||
$("#stat_last"));
|
||||
var stat_balance = new StatsGroup("{% url 'kfet.account.stat.balance' trigramme=account.trigramme %}",
|
||||
$("#stat_balance"));
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
@ -1,91 +0,0 @@
|
|||
<!doctype html>
|
||||
{% load dictionary_extras %}
|
||||
|
||||
<body>
|
||||
<canvas id="{{ chart_id }}" height="100"></canvas>
|
||||
{% comment %}
|
||||
<ul>
|
||||
{% for change in changes %}
|
||||
<li>
|
||||
{{ change | get_item:'label'}}
|
||||
| {{ change | get_item:'at'}}
|
||||
| ({{ change | get_item:'amount'}})
|
||||
| balance {{ change | get_item:'balance'}}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcomment %}
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function() {
|
||||
var ctx1 = $({{ chart_id }});
|
||||
var myChart = new Chart(ctx1, {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Balance',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.5)',
|
||||
data: [
|
||||
{% for change in changes %}
|
||||
{
|
||||
x: new Date("{{ change | get_item:'at'}}"),
|
||||
y: {{ change | get_item:'balance'| stringformat:"f" }},
|
||||
label: "{{change|get_item:'label'}}"
|
||||
}{% if not forloop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
fill: true,
|
||||
steppedLine: true,
|
||||
lineTension: 0,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: "time",
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: 'Date'
|
||||
},
|
||||
time: {
|
||||
tooltipFormat: 'll HH:mm',
|
||||
min: new Date("{{ min_date }}"),
|
||||
max: new Date("{{ max_date }}"),
|
||||
displayFormats: {
|
||||
'millisecond': 'SSS [ms]',
|
||||
'second': 'mm:ss a',
|
||||
'minute': 'DD MMM',
|
||||
'hour': 'ddd h[h]',
|
||||
'day': 'DD MMM',
|
||||
'week': 'DD MMM',
|
||||
'month': 'MMM',
|
||||
'quarter': 'MMM',
|
||||
'year': 'YYYY',
|
||||
}
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: 'value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
|
@ -1,52 +0,0 @@
|
|||
<!doctype html>
|
||||
|
||||
<body>
|
||||
<canvas id="{{ chart_id }}" height="100" ></canvas>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function() {
|
||||
var ctx1 = $({{ chart_id }});
|
||||
var myChart = new Chart(ctx1, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [
|
||||
{% for k,label in labels.items %}
|
||||
{% if forloop.last %}
|
||||
"{{ label }}"
|
||||
{% else %}
|
||||
"{{ label }}",
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
datasets: [{
|
||||
label: 'Nb items achetés',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
data: [
|
||||
{% for k,nb in nb_ventes.items %}
|
||||
{% if forloop.last %}
|
||||
"{{ nb }}"
|
||||
{% else %}
|
||||
"{{ nb }}",
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
fill: false,
|
||||
lineTension: 0,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: false,
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
|
@ -1,82 +0,0 @@
|
|||
<!doctype html>
|
||||
|
||||
<body>
|
||||
<canvas id="{{ chart_id }}" height="100" ></canvas>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function() {
|
||||
var ctx1 = $({{ chart_id }});
|
||||
var myChart = new Chart(ctx1, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [
|
||||
{% for k,label in labels.items %}
|
||||
{% if forloop.last %}
|
||||
"{{ label }}"
|
||||
{% else %}
|
||||
"{{ label }}",
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
datasets: [{
|
||||
label: 'Toutes consommations',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
data: [
|
||||
{% for k,nb in nb_ventes.items %}
|
||||
{% if forloop.last %}
|
||||
"{{ nb }}"
|
||||
{% else %}
|
||||
"{{ nb }}",
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
fill: false,
|
||||
lineTension: 0,
|
||||
} , {
|
||||
label: 'LIQ',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
backgroundColor: 'rgb(54, 162, 235)',
|
||||
data: [
|
||||
{% for k,nb in nb_liq.items %}
|
||||
{% if forloop.last %}
|
||||
"{{ nb }}"
|
||||
{% else %}
|
||||
"{{ nb }}",
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
fill: false,
|
||||
lineTension: 0,
|
||||
} , {
|
||||
label: 'Comptes K-Fêt',
|
||||
borderColor: 'rgb(255, 205, 86)',
|
||||
backgroundColor: 'rgb(255, 205, 86)',
|
||||
data: [
|
||||
{% for k,nb in nb_accounts.items %}
|
||||
{% if forloop.last %}
|
||||
"{{ nb }}"
|
||||
{% else %}
|
||||
"{{ nb }}",
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
fill: false,
|
||||
lineTension: 0,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: false,
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
|
@ -1,35 +0,0 @@
|
|||
<!doctype html>
|
||||
{% load staticfiles %}
|
||||
{% load dictionary_extras %}
|
||||
<body>
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="select-period">
|
||||
{% for k,stat in stats.items %}
|
||||
<div class="btn-group" role="group">
|
||||
<button id="{{ stat | get_item:'btn' }}" type="button" class="btn btn-primary {{ id_prefix }}-btn {%if k == default_stat%} focus{%endif%}">{{ stat | get_item:'label' }}</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div><!-- /boutons -->
|
||||
<div id="{{ content_id}}">
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function() {
|
||||
// VARIABLES
|
||||
{{id_prefix}}_content_id = $("#{{content_id}}");
|
||||
{{id_prefix}}_btns = $(".{{id_prefix}}-btn");
|
||||
{% for k,stat in stats.items %}
|
||||
{% if k == default_stat %}
|
||||
{{id_prefix}}_default_url = "{{ stat | get_item:'url' }}";
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
// INIT
|
||||
STAT.get_thing({{id_prefix}}_default_url, {{id_prefix}}_content_id, "Ouppss ?");
|
||||
{% for k,stat in stats.items %}
|
||||
$("#{{stat|get_item:'btn'}}").on('click', function() {
|
||||
STAT.get_thing("{{stat|get_item:'url'}}", {{id_prefix}}_content_id, "Ouuups ?");
|
||||
{{id_prefix}}_btns.removeClass("focus");
|
||||
$("#{{stat|get_item:'btn'}}").addClass("focus");
|
||||
});
|
||||
{% endfor %}
|
||||
});
|
||||
</script>
|
||||
</body>
|
Loading…
Add table
Add a link
Reference in a new issue