Commit 95d27740 authored by hypsug0's avatar hypsug0
Browse files

refactor: contrib page, change js var to const

parent e7eea9a0
{% extends "base.html" %}
{% block title %}En synthèse{% endblock %}
{% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<h1><i class="{{ icon|safe }}"></i> {{ title }}</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<h1><i class="{{ icon|safe }}"></i> {{ title }}</h1>
<div class="row" style="text-align:center;font-size:2rem;">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="statBlock">
<i class="text-muted fas fa-map-marked-alt fa-2x"></i><br>
<span class="statCount">{{ placescount }}</span><br>
<span class="statDesc text-muted"> {{ placestext }}</span><br>
<div class="row" style="text-align: center; font-size: 2rem">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="statBlock">
<i class="text-muted fas fa-map-marked-alt fa-2x"></i><br />
<span class="statCount">{{ placescount }}</span><br />
<span class="statDesc text-muted"> {{ placestext }}</span><br />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="statBlock">
<i class="text-muted fas fa-calendar-check fa-2x "></i><br>
<span class="statCount">{{ sessionscount }}</span><br>
<span class="statDesc text-muted"> {{ sessionstext }}</span><br>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="statBlock">
<i class="text-muted fas fa-calendar-check fa-2x"></i><br />
<span class="statCount">{{ sessionscount }}</span><br />
<span class="statDesc text-muted"> {{ sessionstext }}</span><br />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="statBlock">
<i class="text-muted fas fa-eye fa-2x"></i><br>
<span class="statCount">{{ sightingscount }}</span><br>
<span class="statDesc text-muted"> {{ sightingstext }}</span><br>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="statBlock">
<i class="text-muted fas fa-eye fa-2x"></i><br />
<span class="statCount">{{ sightingscount }}</span><br />
<span class="statDesc text-muted"> {{ sightingstext }}</span><br />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="statBlock">
<i class="text-muted fas fa-users fa-2x"></i><br>
<span class="statCount">{{ observerscount }}</span><br>
<span class="statDesc text-muted"> {{ observerstext }}</span><br>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="statBlock">
<i class="text-muted fas fa-users fa-2x"></i><br />
<span class="statCount">{{ observerscount }}</span><br />
<span class="statDesc text-muted"> {{ observerstext }}</span><br />
</div>
</div>
</div>
</div>
<div class="row" style="text-align:center;font-size:1.5rem;padding-top:10px;">
{# <div class="col-lg-12">#}
{# <div class="panel panel-default panel-primary">#}
{# <div class="panel-heading">#}
{# <h3 class="panel-title">{{ month_contrib_title }}</h3>#}
{# </div>#}
{# <div class="panel-body">#}
{# <canvas id="monthcontrib"></canvas>#}
{# </div>#}
{# </div>#}
{# </div>#}
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ month_contrib_title }}</h3>
</div>
<div class="panel-body">
<canvas id="monthcontrib"></canvas>
</div>
<div
class="row"
style="text-align: center; font-size: 1.5rem; padding-top: 10px"
>
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ month_contrib_title }}</h3>
</div>
<div class="panel-body">
<canvas id="monthcontrib"></canvas>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ year_contrib_title }}</h3>
</div>
<div class="panel-body">
<canvas id="yearcontrib"></canvas>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ year_contrib_title }}</h3>
</div>
<div class="panel-body">
<canvas id="yearcontrib"></canvas>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ contact_contrib_title }}</h3>
</div>
<div class="panel-body">
<canvas id="contactcontrib"></canvas>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ contact_contrib_title }}</h3>
</div>
<div class="panel-body">
<canvas id="contactcontrib"></canvas>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ territory_contrib_title }}</h3>
</div>
<div class="panel-body">
<canvas id="territorycontrib"></canvas>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ territory_contrib_title }}</h3>
</div>
<div class="panel-body">
<canvas id="territorycontrib"></canvas>
</div>
</div>
</div>
<script>
var ctx = document.getElementById('yearcontrib').getContext('2d');
var yearcontrib = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: {{ list_year|safe }},
datasets: [{
label: "{{ sight_date_label|safe }}",
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
data: {{ year_sights }},
},
]
},
// Configuration options go here
})
;
</div>
<script>
const dynamicColors = () => {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
return `rgb(${r},${g},${b})`;
};
const dynamicColorsArray = (arrayForColors) => {
return [...arrayForColors.map(e => dynamicColors())]
};
var ctx = document.getElementById('monthcontrib').getContext('2d');
var monthcontrib = new Chart(ctx, {
const yearcontribCtx = document.getElementById('yearcontrib').getContext('2d');
const yearcontrib = new Chart(yearcontribCtx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: {{ list_month|safe }},
labels: {{ list_year|safe }},
datasets: [{
label: "{{ create_date_label|safe }}",
label: "{{ sight_date_label|safe }}",
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
data: {{ month_contrib }}
}, {
label: "{{ sight_date_label|safe }}",
backgroundColor: 'rgba(46, 138, 138, 0.5)',
borderColor: 'rgb(46, 138, 138)',
data: {{ month_sights }},
data: {{ year_sights }},
},
]
},
// Configuration options go here
})
;
});
const monthcontribCtx = document.getElementById('monthcontrib').getContext('2d');
const monthcontrib = new Chart(monthcontribCtx, {
// The type of chart we want to create
type: 'line',
var ctx = document.getElementById('contactcontrib').getContext('2d');
var contactcontrib = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: {{ list_contact|safe }},
datasets: [{
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
data: {{ contact_contrib }},
}]
// The data for our dataset
data: {
labels: {{ list_month|safe }},
datasets: [{
label: "{{ create_date_label|safe }}",
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
data: {{ month_contrib }}
}, {
label: "{{ sight_date_label|safe }}",
backgroundColor: 'rgba(46, 138, 138, 0.5)',
borderColor: 'rgb(46, 138, 138)',
data: {{ month_sights }},
},
]
},
// Configuration options go here
options: {
legend: [{
display: false,
}],
}
});
// Configuration options go here
var ctx = document.getElementById('territorycontrib').getContext('2d');
var territorycontrib = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
});
// The data for our dataset
data: {
labels: {{ list_territory|safe }},
datasets: [{
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
data: {{ territory_contrib }},
}]
},
// Configuration options go here
options: {
legend: [{
display: false,
}],
}
});
</script>
const contactcontribCtx = document.getElementById('contactcontrib').getContext('2d');
const contactcontrib = new Chart(contactcontribCtx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: {{ list_contact|safe }},
datasets: [{
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
data: {{ contact_contrib }},
}]
},
// Configuration options go here
options: {
legend: [{
display: false,
}],
}
});
const territorycontribCtx = document.getElementById('territorycontrib').getContext('2d');
const territorycontrib = new Chart(territorycontribCtx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: {{ list_territory|safe }},
datasets: [{
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
data: {{ territory_contrib }},
}]
},
// Configuration options go here
options: {
legend: [{
display: false,
}],
}
});
</script>
{% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment