mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-09 19:40:19 +00:00
introduce djhtml as jinja+scss formater
This commit is contained in:
thomas girod
committed by
Bartuccio Antoine
Bartuccio Antoine
parent
13d0d2a300
commit
b25805e0a1
@ -1,136 +1,136 @@
|
||||
{% extends "core/base.jinja" %}
|
||||
|
||||
{% block title %}
|
||||
{% trans %}Subscription stats{% endtrans %}
|
||||
{% trans %}Subscription stats{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<script type="text/javascript" src="{{ static('core/js/Chart.bundle.min.js') }}"></script>
|
||||
{{ super() }}
|
||||
<script type="text/javascript" src="{{ static('core/js/Chart.bundle.min.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<p>
|
||||
<p>
|
||||
{{ form.start_date.label }}<br>
|
||||
{{ form.start_date }}<br><br>
|
||||
{{ form.end_date.label }}<br>
|
||||
{{ form.end_date }}<br>
|
||||
<p><input type="submit" value="{% trans %}Go{% endtrans %}" /></p>
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<canvas id="statsChart" width="400" height="200"></canvas>
|
||||
<canvas id="statsChart" width="400" height="200"></canvas>
|
||||
|
||||
<p>
|
||||
<p>
|
||||
{% trans %}Total subscriptions{% endtrans %} : {{ subscriptions_total.count() }}<br><br>
|
||||
{% trans %}Subscriptions by type{% endtrans %}<br><br>
|
||||
{% for location in locations %}
|
||||
{{ location[1] }} : <i class="nb">{{ subscriptions_total.filter(location=location[0]).count() }}</i><br>
|
||||
{{ location[1] }} : <i class="nb">{{ subscriptions_total.filter(location=location[0]).count() }}</i><br>
|
||||
{% endfor %}
|
||||
<p>
|
||||
<p>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>{% trans %}Subscription type{% endtrans %}</th>
|
||||
{% for location in locations %}
|
||||
<th>{{ location[1] }}</th>
|
||||
{% endfor %}
|
||||
<th id="graphLabel">{% trans %}Total{% endtrans %}</th>
|
||||
{% for type in subscriptions_types %}
|
||||
<table>
|
||||
<tr>
|
||||
<td><i class="types" >{{ subscriptions_types[type]['name'] }}</i></td>
|
||||
{% set subscriptions_total_type = subscriptions_total.filter(subscription_type=type) %}
|
||||
{% for location in locations %}
|
||||
<th>{% trans %}Subscription type{% endtrans %}</th>
|
||||
{% for location in locations %}
|
||||
<th>{{ location[1] }}</th>
|
||||
{% endfor %}
|
||||
<th id="graphLabel">{% trans %}Total{% endtrans %}</th>
|
||||
{% for type in subscriptions_types %}
|
||||
<tr>
|
||||
<td><i class="types" >{{ subscriptions_types[type]['name'] }}</i></td>
|
||||
{% set subscriptions_total_type = subscriptions_total.filter(subscription_type=type) %}
|
||||
{% for location in locations %}
|
||||
<td>
|
||||
{% set subscriptions_total_type_location = subscriptions_total_type.filter(location=location[0]) %}
|
||||
{% trans %}Total{% endtrans %} : {{ subscriptions_total_type_location.count()}}<br>
|
||||
{% for p_type in payment_types %}
|
||||
{{ p_type[1] }} : <i class="nb">{{ subscriptions_total_type_location.filter(payment_method=p_type[0]).count()}}</i><br>
|
||||
{% endfor %}
|
||||
{% set subscriptions_total_type_location = subscriptions_total_type.filter(location=location[0]) %}
|
||||
{% trans %}Total{% endtrans %} : {{ subscriptions_total_type_location.count()}}<br>
|
||||
{% for p_type in payment_types %}
|
||||
{{ p_type[1] }} : <i class="nb">{{ subscriptions_total_type_location.filter(payment_method=p_type[0]).count()}}</i><br>
|
||||
{% endfor %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
<td class="total"><i class="nb">{{subscriptions_total_type.count()}}</i>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% endfor %}
|
||||
<td class="total"><i class="nb">{{subscriptions_total_type.count()}}</i>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
function getRandomColor() {
|
||||
var letters = '0123456789ABCDEF';
|
||||
var color = '#';
|
||||
for (var i = 0; i < 6; i++ ) {
|
||||
{{ super() }}
|
||||
<script>
|
||||
function getRandomColor() {
|
||||
var letters = '0123456789ABCDEF';
|
||||
var color = '#';
|
||||
for (var i = 0; i < 6; i++ ) {
|
||||
color += letters[Math.floor(Math.random() * 16)];
|
||||
}
|
||||
return color;
|
||||
}
|
||||
return color;
|
||||
}
|
||||
function getRandomColorUniq(list) {
|
||||
var color = getRandomColor();
|
||||
while (list.includes(color)){
|
||||
function getRandomColorUniq(list) {
|
||||
var color = getRandomColor();
|
||||
while (list.includes(color)){
|
||||
color = getRandomColor();
|
||||
}
|
||||
return color;
|
||||
}
|
||||
return color;
|
||||
}
|
||||
function hexToRgb(hex) {
|
||||
function hexToRgb(hex) {
|
||||
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
||||
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
||||
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
||||
return r + r + g + g + b + b;
|
||||
});
|
||||
});
|
||||
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
} : null;
|
||||
}
|
||||
|
||||
var ctx = document.getElementById("statsChart").getContext('2d');
|
||||
var labels = [];
|
||||
var total = [];
|
||||
var colors = [];
|
||||
var colors_dimmed = [];
|
||||
Array.from(document.getElementsByClassName("types")).forEach(function(element){
|
||||
labels.push(element.childNodes[0].data);
|
||||
});
|
||||
Array.from(document.getElementsByClassName("total")).forEach(function(element){
|
||||
total.push(element.childNodes[0].childNodes[0].data);
|
||||
});
|
||||
labels.forEach(function(element){
|
||||
colors.push(getRandomColorUniq(colors));
|
||||
});
|
||||
colors.forEach(function(element){
|
||||
var rgb_color = hexToRgb(element);
|
||||
colors_dimmed.push('rgba(' + rgb_color.r + ', ' + rgb_color.g + ', ' + rgb_color.b + ', 0.2)');
|
||||
});
|
||||
console.log(colors);console.log(colors_dimmed);
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
var ctx = document.getElementById("statsChart").getContext('2d');
|
||||
var labels = [];
|
||||
var total = [];
|
||||
var colors = [];
|
||||
var colors_dimmed = [];
|
||||
Array.from(document.getElementsByClassName("types")).forEach(function(element){
|
||||
labels.push(element.childNodes[0].data);
|
||||
});
|
||||
Array.from(document.getElementsByClassName("total")).forEach(function(element){
|
||||
total.push(element.childNodes[0].childNodes[0].data);
|
||||
});
|
||||
labels.forEach(function(element){
|
||||
colors.push(getRandomColorUniq(colors));
|
||||
});
|
||||
colors.forEach(function(element){
|
||||
var rgb_color = hexToRgb(element);
|
||||
colors_dimmed.push('rgba(' + rgb_color.r + ', ' + rgb_color.g + ', ' + rgb_color.b + ', 0.2)');
|
||||
});
|
||||
console.log(colors);console.log(colors_dimmed);
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: document.getElementById("graphLabel").childNodes[0].data,
|
||||
data: total,
|
||||
backgroundColor: colors_dimmed,
|
||||
borderColor: colors,
|
||||
borderWidth: 1
|
||||
label: document.getElementById("graphLabel").childNodes[0].data,
|
||||
data: total,
|
||||
backgroundColor: colors_dimmed,
|
||||
borderColor: colors,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -1,62 +1,62 @@
|
||||
{% extends "core/base.jinja" %}
|
||||
|
||||
{% block title %}
|
||||
{% trans %}New subscription{% endtrans %}
|
||||
{% trans %}New subscription{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h3>{% trans %}New subscription{% endtrans %}</h3>
|
||||
<div id="user_info"></div>
|
||||
<form action="" method="post" id="subscription_form">
|
||||
<h3>{% trans %}New subscription{% endtrans %}</h3>
|
||||
<div id="user_info"></div>
|
||||
<form action="" method="post" id="subscription_form">
|
||||
{% csrf_token %}
|
||||
{{ form.non_field_errors() }}
|
||||
<p>{{ form.member.errors }}<label for="{{ form.member.name }}">{{ form.member.label }}</label> {{ form.member }}</p>
|
||||
<div id="new_member">
|
||||
<p>{{ form.first_name.errors }}<label for="{{ form.first_name.name }}">{{ form.first_name.label }}</label> {{ form.first_name }}</p>
|
||||
<p>{{ form.last_name.errors }}<label for="{{ form.last_name.name }}">{{ form.last_name.label }}</label> {{ form.last_name }}</p>
|
||||
<p>{{ form.email.errors }}<label for="{{ form.email.name }}">{{ form.email.label }}</label> {{ form.email }}</p>
|
||||
<p>{{ form.date_of_birth.errors }}<label for="{{ form.date_of_birth.name }}">{{ form.date_of_birth.label}}</label> {{ form.date_of_birth }}</p>
|
||||
<p>{{ form.first_name.errors }}<label for="{{ form.first_name.name }}">{{ form.first_name.label }}</label> {{ form.first_name }}</p>
|
||||
<p>{{ form.last_name.errors }}<label for="{{ form.last_name.name }}">{{ form.last_name.label }}</label> {{ form.last_name }}</p>
|
||||
<p>{{ form.email.errors }}<label for="{{ form.email.name }}">{{ form.email.label }}</label> {{ form.email }}</p>
|
||||
<p>{{ form.date_of_birth.errors }}<label for="{{ form.date_of_birth.name }}">{{ form.date_of_birth.label}}</label> {{ form.date_of_birth }}</p>
|
||||
</div>
|
||||
<p>{{ form.subscription_type.errors }}<label for="{{ form.subscription_type.name }}">{{ form.subscription_type.label }}</label> {{ form.subscription_type }}</p>
|
||||
<p>{{ form.payment_method.errors }}<label for="{{ form.payment_method.name }}">{{ form.payment_method.label }}</label> {{
|
||||
form.payment_method }}</p>
|
||||
form.payment_method }}</p>
|
||||
<p>{% trans %}Eboutic is reserved to specific users. In doubt, don't use it.{% endtrans %}</p>
|
||||
<p>{{ form.location.errors }}<label for="{{ form.location.name }}">{{ form.location.label }}</label> {{ form.location }}</p>
|
||||
<p><input type="submit" value="{% trans %}Save{% endtrans %}" /></p>
|
||||
</form>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$( function() {
|
||||
select = $("#id_member");
|
||||
member_block = $("#subscription_form #new_member");
|
||||
user_info = $("#user_info");
|
||||
function display_new_member() {
|
||||
{{ super() }}
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$( function() {
|
||||
select = $("#id_member");
|
||||
member_block = $("#subscription_form #new_member");
|
||||
user_info = $("#user_info");
|
||||
function display_new_member() {
|
||||
if (select.val()) {
|
||||
member_block.hide();
|
||||
member_block.children().each(function() {
|
||||
$(this).children().each(function() {
|
||||
$(this).removeAttr('required');
|
||||
});
|
||||
member_block.hide();
|
||||
member_block.children().each(function() {
|
||||
$(this).children().each(function() {
|
||||
$(this).removeAttr('required');
|
||||
});
|
||||
user_info.load("/user/"+select.val()+"/mini");
|
||||
user_info.show();
|
||||
});
|
||||
user_info.load("/user/"+select.val()+"/mini");
|
||||
user_info.show();
|
||||
} else {
|
||||
member_block.show();
|
||||
member_block.children().each(function() {
|
||||
$(this).children().each(function() {
|
||||
$(this).prop('required', true);
|
||||
});
|
||||
member_block.show();
|
||||
member_block.children().each(function() {
|
||||
$(this).children().each(function() {
|
||||
$(this).prop('required', true);
|
||||
});
|
||||
});
|
||||
|
||||
user_info.empty();
|
||||
user_info.hide();
|
||||
user_info.empty();
|
||||
user_info.hide();
|
||||
}
|
||||
}
|
||||
select.on("change", display_new_member);
|
||||
display_new_member();
|
||||
} );
|
||||
</script>
|
||||
}
|
||||
select.on("change", display_new_member);
|
||||
display_new_member();
|
||||
} );
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user