Skip to content
Extraits de code Groupes Projets
Valider 71d4b7e1 rédigé par Benjamin - Le Filament's avatar Benjamin - Le Filament
Parcourir les fichiers

[ADD] period navigation and update template

parent 11e5df44
Branches
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Afficher les modifications d'espaces
En ligne Côte à côte
static/src/css/style.css
+ 2
− 7
Voir le fichier @ 71d4b7e1
.daterange-content {
margin: auto;
padding-left: 15px;
padding-right: 15px;
max-width: 350px;
padding-top: 10px;
max-width: 300px;
}
.daterange-content .form-control {
text-align: center;
}
static/src/js/canvas.js
+ 62
− 8
Voir le fichier @ 71d4b7e1
......@@ -14,6 +14,8 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
selector: ".oe_website_canvas",
events: {
"click .btn-period": "_onBtnPeriodClick",
"click #previous-period": "_onPreviousPeriod",
"click #next-period": "_onNextPeriod",
"change select[name='endpoint']": "_onChangePrm",
},
......@@ -61,7 +63,10 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
self.maxDate = data.date_max;
self.render_daterangepicker();
});
$('select[name="endpoint"]').select2({placeholder: 'Select an option'})
$('select[name="endpoint"]').select2({placeholder: "Sélectionner"});
$('button[id="next-period"]').prop("disabled",true);
return this._super().then(function () {
// Récupération des dates de début et fin
var $btnWeekVal = $('button[name="week"]').val();
......@@ -654,6 +659,18 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
$(".js_curv_line").addClass("d-none");
}
// Disable buttons if first or last date
if (this.last_day == this.maxDate) {
$('button[id="next-period"]').prop("disabled",true);
} else {
$('button[id="next-period"]').prop("disabled",false);
}
if (this.first_day == this.minDate) {
$('button[id="previous-period"]').prop("disabled",true);
} else {
$('button[id="previous-period"]').prop("disabled",false);
}
if (self.chart_line_conso !== null) {
self.chart_line_conso.data = self._getLineChartData("cons");
self.chart_line_conso.options.scales.xAxes[0].time.unit =
......@@ -693,20 +710,18 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
},
_onBtnPeriodClick: function (ev) {
var self = this;
var $iframe = $(ev.currentTarget).val();
var objquote = $iframe.replaceAll("'", '"');
const obj = JSON.parse(objquote);
self.first_day = obj.first_day;
self.last_day = obj.last_day;
this.first_day = obj.first_day;
this.last_day = obj.last_day;
this.date_range_picker
.data("daterangepicker")
.setStartDate(self.first_day);
.setStartDate(this.first_day);
this.date_range_picker
.data("daterangepicker")
.setEndDate(self.last_day);
this._updateChartData(self.title_name);
.setEndDate(this.last_day);
this._updateChartData(this.title_name);
},
_onChangePrm: function (ev) {
......@@ -716,5 +731,44 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
this.prm_id = parseInt(selected.data("prm-id"));
this._updateChartData(this.title_name);
},
_onPreviousPeriod: function (ev) {
this._onChangePeriod("previous");
},
_onNextPeriod: function (ev) {
this._onChangePeriod("next");
},
_onChangePeriod: function (type) {
const delta_days = moment(this.last_day, "DD/MM/YYYY") - moment(this.first_day, "DD/MM/YYYY");
if (type == "previous") {
// Compare for first day
let next_first = moment(this.first_day, "DD/MM/YYYY").subtract(delta_days).subtract(1, 'd');
let moment_min = moment(this.minDate, "DD/MM/YYYY");
this.first_day = moment_min < next_first ? next_first.format("DD/MM/YYYY") : moment_min.format("DD/MM/YYYY");
this.last_day = moment(this.last_day, "DD/MM/YYYY").subtract(delta_days).subtract(1, 'd').format("DD/MM/YYYY");
this.date_range_picker
.data("daterangepicker")
.setStartDate(this.first_day);
this.date_range_picker
.data("daterangepicker")
.setEndDate(this.last_day);
}
if (type == "next") {
// Compare for last day
let next_last = moment(this.last_day, "DD/MM/YYYY").add(delta_days).add(1, 'd');
let moment_max = moment(this.maxDate, "DD/MM/YYYY");
this.first_day = moment(this.first_day, "DD/MM/YYYY").add(delta_days).subtract(1, 'd').format("DD/MM/YYYY");
this.last_day = moment_max > next_last ? next_last.format("DD/MM/YYYY") : moment_max.format("DD/MM/YYYY");
this.date_range_picker
.data("daterangepicker")
.setStartDate(this.first_day);
this.date_range_picker
.data("daterangepicker")
.setEndDate(this.last_day);
}
this._updateChartData(this.title_name);
},
});
});
templates/operation_templates_page.xml
+ 161
− 140
Voir le fichier @ 71d4b7e1
......@@ -6,15 +6,15 @@
<t t-call="oacc_portal.layout_op">
<t t-set="type_data" t-value="'pmo'" />
<div
class="oe_website_canvas text-center mb-5"
class="oe_website_canvas mb-5"
t-att-data-name="type_data"
t-att-data-id="operation.id"
>
<div class="row mt-4 text-center">
<div class="row text-center">
<t t-call="oacc_portal_overview_cdc.nav_button" />
</div>
<div class="row bg-white pt-3 pb-3">
<div class="col-6">
<div class="row bg-white pt-3 pb-3 text-center">
<div class="col-12 col-md-6">
<h2>La consommation</h2>
<t
t-call="oacc_portal_overview_cdc.profil_conso"
......@@ -27,7 +27,7 @@
/>
</div>
<div class="col-6 ">
<div class="col-12 col-md-6">
<h2>La Production</h2>
<t
t-call="oacc_portal_overview_cdc.profil_prod"
......@@ -115,27 +115,33 @@
</template>
<template id="nav_button">
<div class="col-12 text-center mb-3 bg-white p-3">
<div class="col-12 mb-3 bg-white">
<t t-if="type_data == 'cons' and len(partners) > 1">
<div class="title_cdc">
<h3 class="title_cdc mt-2 mb-3">Consommation globale</h3>
<h3 class="title_cdc mt-2">Consommation globale</h3>
</div>
</t>
<t t-elif="type_data == 'prod' and len(partners) > 1">
<div class="title_cdc">
<h3 class="title_cdc mt-2 mb-3">Production globale</h3>
<h3 class="title_cdc mt-2">Production globale</h3>
</div>
</t>
<t t-elif="type_data in ('cons', 'prod') and len(partners) == 1">
<div class="title_cdc">
<h3 class="title_cdc mt-2 mb-3">
<h3 class="title_cdc mt-2">
<t t-out="partners[0].sudo().name" />
</h3>
</div>
</t>
</div>
<div class="col-12 col-md-6">
<p class="text-center">Sélection de la plage de temps</p>
<div class="col-12">
<div class="row">
<div class="col-2 col-xl-1 align-self-center">
Période
</div>
<div class="col-10 col-xl-5">
<!-- Buttons period -->
<div class="btn-period-group">
<button
t-att-value="{'first_day': data_values['date_day_start'] or '', 'last_day': data_values['date_day_end' or '']}"
name="day"
......@@ -176,12 +182,23 @@
>
Cette année
</button>
<div class="daterange-content text-center mt-3">
<input type="text" name="daterange" class="form-control" />
</div>
<!-- Daterange picker -->
<div class="input-group daterange-content">
<button id="previous-period" class="btn btn-light">
<i class="fa fa-angle-double-left" />
</button>
<input type="text" name="daterange" class="form-control text-center" />
<button id="next-period" class="btn btn-light">
<i class="fa fa-angle-double-right" />
</button>
</div>
<div class="col-12 col-md-6">
<p class="text-center">Sélection du PRM</p>
</div>
<div class="col-2 col-xl-1 align-self-center mt-4 mt-lg-0" t-if="partners">
PRM ou contact
</div>
<div class="col-10 col-xl-5 align-self-center mt-4 mt-lg-0" t-if="partners">
<div class="prm-selection align-items-center d-flex">
<select
class="form-select"
aria-label="prm-selection"
......@@ -191,7 +208,7 @@
<option
value="all"
t-att-data-name="'Consommation globale' if type_data == 'cons' else 'Production globale'"
>Globale</option>
>Tous</option>
</t>
<t t-foreach="partners" t-as="p">
<option
......@@ -215,21 +232,25 @@
/>
<t t-foreach="prm_ids" t-as="prm" class="nav-item">
<option
t-att-value="p.id"
t-att-data-name="prm.name"
t-att-value="prm.id"
t-att-data-name="'PRM n°' + prm.name"
t-att-data-prm-id="prm.id"
>
- <t t-out="(prm.street + ' - ' + prm.name) if prm.street else prm.name" />
&#160;&#160;&#160;- <t t-out="(prm.street + ' - ' + prm.name) if prm.street else prm.name" />
</option>
</t>
</t>
</select>
</div>
</div>
</div>
<hr/>
</div>
</template>
<template id="profil_conso">
<div class="text-center mt-4">
<div class="text-center mb-4">
<h3>Profil</h3>
<p
>Cliquez sur les termes « Autoconso » ou « AlloConso » pour faire apparaître ou disparaître les données correspondantes.</p>
......@@ -243,7 +264,7 @@
</template>
<template id="bilan_conso">
<div class="text-center mt-4 ">
<div class="text-center mb-4">
<h3>Bilan</h3>
<br /><br />
<canvas
......@@ -256,7 +277,7 @@
</template>
<template id="cdc_conso">
<div class="js_curv_line text-center mt-5">
<div class="js_curv_line text-center">
<h3>Courbe de charge</h3>
<p
>Cliquez sur les termes « Conso », « Production solaire » ou « Autoconso » pour faire apparaître ou disparaître les courbes correspondantes.</p>
......@@ -270,7 +291,7 @@
</template>
<template id="profil_prod">
<div class="text-center mt-4">
<div class="text-center mb-4">
<h3>Profil</h3>
<p
>Cliquez sur les termes « AutoConso » ou « Surplus » pour faire apparaître ou disparaître les données correspondantes.</p>
......@@ -284,7 +305,7 @@
</template>
<template id="bilan_prod">
<div class="text-center mt-4 ">
<div class="text-center mb-4">
<h3>Bilan</h3>
<br /><br />
<canvas
......
templates/portal_layout.xml
+ 1
− 1
Voir le fichier @ 71d4b7e1
......@@ -10,7 +10,7 @@
>
<a
t-attf-href="/operation/#{slug(operation)}/pmo"
t-att-class="'nav-link %s' % ('active' if page_name == 'pmo' else '')"
t-att-class="'nav-link %s' % ('active' if page_name == 'Vue globale' else '')"
>
Vue Globale
</a>
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter