Frontend tout en JS

This commit is contained in:
Evarin 2017-02-15 21:01:54 +01:00
parent 46f343b1ab
commit 0fcb29252b
7 changed files with 205 additions and 313 deletions

View file

@ -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 %}

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>