BenoitCier
/
Opendistrib
geforked van Laclic/Souke
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

[backend] Rapports : interactivité JS sections Utilisateurs / Points de vente / Distributions

dev
Guillaume Bourgeois 5 jaren geleden
bovenliggende
69088dba5a
commit
d576e9dc4e
9 gewijzigde bestanden met toevoegingen van 340 en 120 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. +62
    -0
      backend/assets/VuejsReportIndexAsset.php
  2. +24
    -9
      backend/controllers/ReportController.php
  3. +56
    -65
      backend/views/report/index.php
  4. +50
    -39
      backend/web/css/screen.css
  5. +35
    -0
      backend/web/js/vuejs/distribution-index.js
  6. +36
    -0
      backend/web/js/vuejs/producer-update.js
  7. +48
    -0
      backend/web/js/vuejs/report-index.js
  8. +1
    -0
      backend/web/sass/_adminlte.scss
  9. +28
    -7
      backend/web/sass/report/_index.scss

+ 62
- 0
backend/assets/VuejsReportIndexAsset.php Bestand weergeven

@@ -0,0 +1,62 @@
<?php
/**
Copyright distrib (2018)

contact@opendistrib.net

Ce logiciel est un programme informatique servant à aider les producteurs
à distribuer leur production en circuits courts.

Ce logiciel est régi par la licence CeCILL soumise au droit français et
respectant les principes de diffusion des logiciels libres. Vous pouvez
utiliser, modifier et/ou redistribuer ce programme sous les conditions
de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA
sur le site "http://www.cecill.info".

En contrepartie de l'accessibilité au code source et des droits de copie,
de modification et de redistribution accordés par cette licence, il n'est
offert aux utilisateurs qu'une garantie limitée. Pour les mêmes raisons,
seule une responsabilité restreinte pèse sur l'auteur du programme, le
titulaire des droits patrimoniaux et les concédants successifs.

A cet égard l'attention de l'utilisateur est attirée sur les risques
associés au chargement, à l'utilisation, à la modification et/ou au
développement et à la reproduction du logiciel par l'utilisateur étant
donné sa spécificité de logiciel libre, qui peut le rendre complexe à
manipuler et qui le réserve donc à des développeurs et des professionnels
avertis possédant des connaissances informatiques approfondies. Les
utilisateurs sont donc invités à charger et tester l'adéquation du
logiciel à leurs besoins dans des conditions permettant d'assurer la
sécurité de leurs systèmes et ou de leurs données et, plus généralement,
à l'utiliser et l'exploiter dans les mêmes conditions de sécurité.

Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
pris connaissance de la licence CeCILL, et que vous en avez accepté les
termes.
*/

namespace backend\assets;

use yii\web\AssetBundle;
use yii ;

/**
* @author Qiang Xue <qiang.xue@gmail.com>
* @since 2.0
*/
class VuejsReportIndexAsset extends \common\components\MyAssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [];
public $js = [];
public $depends = [
'common\assets\CommonAsset'
];
public function __construct()
{
parent::__construct() ;
$this->addAsset('js','js/vuejs/report-index.js') ;
}
}

+ 24
- 9
backend/controllers/ReportController.php Bestand weergeven

@@ -67,7 +67,13 @@ class ReportController extends BackendController
public function actionIndex()
{
$this->checkProductsPointsSale() ;
return $this->render('index') ;
}
public function actionAjaxInit()
{
\Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
$usersArray = User::findBy()->all() ;
$pointsSaleArray = PointSale::searchAll() ;
@@ -78,10 +84,17 @@ class ReportController extends BackendController
$lastDistribution = Distribution::searchOne([], [
'orderby' => 'id DESC'
]) ;
$firstYear = date('Y',strtotime($firstDistribution->date)) ;
$lastYear = date('Y',strtotime($lastDistribution->date)) ;
$distributionYearsArray = [] ;
for($year = $firstYear; $year <= $lastYear; $year ++) {
$distributionYearsArray[] = $year ;
}
$distributionsArray = Distribution::searchAll([], [
$distributionsArray = Distribution::searchAll([
'distribution.active' => 1
], [
'orderby' => 'date ASC',
]) ;
$distributionsByMonthArray = [] ;
@@ -89,20 +102,22 @@ class ReportController extends BackendController
$month = date('Y-m', strtotime($distribution->date)) ;
if(!isset($distributionsByMonthArray[$month])) {
$distributionsByMonthArray[$month] = [
'month' => strftime('%B %Y', strtotime($distribution->date)),
'display' => 0,
'year' => date('Y',strtotime($distribution->date)),
'month' => strftime('%B', strtotime($distribution->date)),
'distributions' => []
] ;
}
$distribution->date = strftime('%A %d %B', strtotime($distribution->date)) ;
$distributionsByMonthArray[$month]['distributions'][] = $distribution ;
}
return $this->render('index', [
return [
'usersArray' => $usersArray,
'pointsSaleArray' => $pointsSaleArray,
'firstYear' => $firstYear,
'lastYear' => $lastYear,
'distributionByMonthArray' => $distributionsByMonthArray
]) ;
'distributionYearsArray' => $distributionYearsArray,
'distributionsByMonthArray' => $distributionsByMonthArray
] ;
}
}

+ 56
- 65
backend/views/report/index.php Bestand weergeven

@@ -36,88 +36,79 @@ pris connaissance de la licence CeCILL, et que vous en avez accepté les
termes.
*/

\backend\assets\VuejsReportIndexAsset::register($this);

$this->setTitle('Rapports') ;
$this->addBreadcrumb('Rapports') ;

?>

<div class="col-md-6">
<div id="nav-sections-report">
<a href="#" class="btn btn-primary">Utilisateurs <span class="glyphicon glyphicon-triangle-bottom"></span></a>
<a href="#" class="btn btn-default">Points de vente</a>
<a href="#" class="btn btn-default">Distributions</a>
</div>
<div id="section-users" class="panel panel-default section">
<div class="panel-body">
<div id="wrapper-search-user">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" id="input-search-user" placeholder="Rechercher" />
</div>
<div class="content-max-height">
<ul id="list-users">
<?php foreach($usersArray as $user): ?>
<li>
<input type="checkbox" id="user_<?= $user['user_id']; ?>" />
<label for="user_<?= $user['user_id'] ?>"><?= Html::encode($user['lastname'].' '.$user['name']); ?></label>
<div id="app-report-index">
<div class="col-md-6">
<div id="nav-sections-report">
<a v-for="section in sections" :class="'btn-section btn '+(currentSection == section.id ? 'btn-primary' : 'btn-default')" @click="changeSection(section)">{{ section.name }}<span v-if="currentSection == section.id"> <span class="glyphicon glyphicon-triangle-bottom"></span></span></a>
</div>
<div id="section-users" class="panel panel-default section" v-show="currentSection == 'users'">
<div class="panel-body">
<div id="wrapper-search-user">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" id="input-search-user" placeholder="Rechercher" v-model="termSearchUser" />
</div>
<div class="content-max-height">
<ul id="list-users">
<li v-for="user in usersArray" v-if="!termSearchUser.length || (termSearchUser.length && (user.lastname.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 || user.name.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 ))">
<input type="checkbox" :id="'user_'+user.user_id" />
<label :for="'user_'+user.user_id" v-html="user.lastname+' '+user.name"></label>
</li>
<?php endforeach; ?>
</ul>
</ul>
</div>
</div>
</div>
</div>
<div id="section-points-sale" class="panel panel-default section">
<div class="panel-body">
<div class="content-max-height">
<ul class="list" id="list-points-sale">
<?php foreach($pointsSaleArray as $pointSale): ?>
<li>
<input type="checkbox" id="pointsale_<?= $pointSale->id; ?>" />
<label for="pointsale_<?= $pointSale->id ?>"><?= Html::encode($pointSale->name); ?></label>
<div id="section-points-sale" class="panel panel-default section" v-show="currentSection == 'points-sale'">
<div class="panel-body">
<div class="content-max-height">
<ul class="list" id="list-points-sale">
<li v-for="pointSale in pointsSaleArray">
<input type="checkbox" :id="'pointsale_'+pointSale.id" />
<label :for="'pointsale_'+pointSale.id" v-html="pointSale.name"></label>
</li>
<?php endforeach; ?>
</ul>
</ul>
</div>
</div>
</div>
</div>
<div id="section-distributions" class="panel panel-default section">
<div class="panel-body">
<div id="wrapper-select-year">
<select class="form-control">
<?php for($i = $firstYear ; $i <= $lastYear ; $i++): ?>
<option value="<?= $i ?>"><?= $i ?></option>
<?php endfor; ?>
</select>
</div>
<div class="content-max-height">
<?php foreach($distributionByMonthArray as $distributionsMonth): ?>
<a href="#" class="btn btn-default month-distribution"><?= $distributionsMonth['month']; ?></a>
<?php if(count($distributionsMonth['distributions'])): ?>
<ul>
<?php foreach($distributionsMonth['distributions'] as $distribution): ?>
<li>
<input type="checkbox" id="distribution_<?= $distribution->id ?>" />
<label for="distribution_<?= $distribution->id ?>"><?= strftime('%A %d %B', strtotime($distribution->date)); ?></label>
<div id="section-distributions" class="panel panel-default section" v-show="currentSection == 'distributions'">
<div class="panel-body">
<div id="wrapper-select-year">
<select class="form-control" v-model="distributionYear">
<option v-for="year in distributionYearsArray">{{ year }}</option>
</select>
</div>
<div class="content-max-height">
<div class="distribution-month" v-for="distributionsMonth in distributionsByMonthArray" v-if="distributionsMonth.year == distributionYear && distributionsMonth.distributions.length > 0">
<a class="btn btn-default link-month-distribution" @click="distributionsMonth.display = !distributionsMonth.display">{{ distributionsMonth.month }} <span class="glyphicon glyphicon-menu-down"></span></a>
<ul v-if="distributionsMonth.display">
<li v-for="distribution in distributionsMonth.distributions">
<input type="checkbox" :id="'distribution_'+distribution.id" />
<label :for="'distribution_'+distribution.id">{{ distribution.date }}</label>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-6">
<div id="report" class="panel panel-default">
<div class="panel-heading">
Rapport
</div>
<div class="panel-body">
<div id="summary">
Résumé
<div class="col-md-6">
<div id="report" class="panel panel-default">
<div class="panel-heading">
Rapport
</div>
<div id="report">
<a href="#" class="btn btn-primary">Générer</a>
<div class="panel-body">
<div id="summary">
Résumé
</div>
<div id="report">
<a href="#" class="btn btn-primary">Générer</a>
</div>
</div>
</div>
</div>

+ 50
- 39
backend/web/css/screen.css Bestand weergeven

@@ -1476,97 +1476,98 @@ body.skin-black .content-wrapper .btn {
/* line 122, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .btn-default {
color: #333;
background-color: white;
}
/* line 126, ../sass/_adminlte.scss */
/* line 127, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .btn-primary {
background-color: #FF7F00;
color: white;
border-color: #FF7F00;
}
/* line 133, ../sass/_adminlte.scss */
/* line 134, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .alert a {
color: white;
}
/* line 136, ../sass/_adminlte.scss */
/* line 137, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .alert a.btn {
color: #333;
text-decoration: none;
}
/* line 143, ../sass/_adminlte.scss */
/* line 144, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .callout h4 .fa {
margin-right: 7px;
}
/* line 146, ../sass/_adminlte.scss */
/* line 147, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .callout a {
color: white;
}
/* line 149, ../sass/_adminlte.scss */
/* line 150, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .callout .btn {
color: #333;
text-decoration: none;
}
/* line 156, ../sass/_adminlte.scss */
/* line 157, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .table th {
font-size: 13px;
}
/* line 159, ../sass/_adminlte.scss */
/* line 160, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .table th.column-actions, body.skin-black .content-wrapper .table td.column-actions {
width: 150px;
text-align: right;
}
/* line 163, ../sass/_adminlte.scss */
/* line 164, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .table td.text-small, body.skin-black .content-wrapper .table th.text-small {
font-size: 12px;
}
/* line 168, ../sass/_adminlte.scss */
/* line 169, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .pagination > .active > a, body.skin-black .content-wrapper .pagination > .active > span, body.skin-black .content-wrapper .pagination > .active > a:hover, body.skin-black .content-wrapper .pagination > .active > span:hover, body.skin-black .content-wrapper .pagination > .active > a:focus, body.skin-black .content-wrapper .pagination > .active > span:focus {
background-color: #FF7F00;
border: solid 1px #FF7F00;
color: white;
}
/* line 173, ../sass/_adminlte.scss */
/* line 174, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .pagination > li > a, body.skin-black .content-wrapper .pagination > li > span {
color: #FF7F00;
}
/* line 175, ../sass/_adminlte.scss */
/* line 176, ../sass/_adminlte.scss */
body.skin-black .content-wrapper .pagination > li > a:hover, body.skin-black .content-wrapper .pagination > li > span:hover {
color: #cc6600;
}
/* line 182, ../sass/_adminlte.scss */
/* line 183, ../sass/_adminlte.scss */
body.skin-black .main-footer a {
color: #FF7F00;
}

/* line 188, ../sass/_adminlte.scss */
/* line 189, ../sass/_adminlte.scss */
body.login-page {
background: none;
background-color: white;
}
/* line 192, ../sass/_adminlte.scss */
/* line 193, ../sass/_adminlte.scss */
body.login-page .login-box .login-logo {
text-align: center;
font-family: "comfortaalight";
}
/* line 195, ../sass/_adminlte.scss */
/* line 196, ../sass/_adminlte.scss */
body.login-page .login-box .login-logo img {
width: 50px;
}
/* line 200, ../sass/_adminlte.scss */
/* line 201, ../sass/_adminlte.scss */
body.login-page .login-box .login-box-body .btn-primary {
background-color: #FF7F00;
border-color: #FF7F00;
padding: 5px 10px;
}
/* line 205, ../sass/_adminlte.scss */
/* line 206, ../sass/_adminlte.scss */
body.login-page .login-box .login-box-body .btn-primary:active {
background-color: #ff8c1a;
border-color: #FF7F00;
}
/* line 211, ../sass/_adminlte.scss */
/* line 212, ../sass/_adminlte.scss */
body.login-page .login-box .login-box-body a {
color: #FF7F00;
}
/* line 213, ../sass/_adminlte.scss */
/* line 214, ../sass/_adminlte.scss */
body.login-page .login-box .login-box-body a:hover {
color: #ff8c1a;
}
@@ -2071,56 +2072,66 @@ Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
pris connaissance de la licence CeCILL, et que vous en avez accepté les
termes.
*/
/* line 38, ../sass/report/_index.scss */
/* line 40, ../sass/report/_index.scss */
.report-index #nav-sections-report .btn-section {
margin-right: 5px;
}
/* line 45, ../sass/report/_index.scss */
.report-index .section {
margin-top: 10px;
}
/* line 40, ../sass/report/_index.scss */
/* line 47, ../sass/report/_index.scss */
.report-index .section .content-max-height {
max-height: 300px;
max-height: 400px;
overflow-y: scroll;
}
/* line 44, ../sass/report/_index.scss */
/* line 51, ../sass/report/_index.scss */
.report-index .section .content-max-height ul {
list-style-type: none;
margin-left: 0px;
padding-left: 5px;
}
/* line 50, ../sass/report/_index.scss */
/* line 57, ../sass/report/_index.scss */
.report-index .section .content-max-height ul li input {
position: relative;
top: 2px;
}
/* line 61, ../sass/report/_index.scss */
.report-index .section .content-max-height ul li label {
font-weight: normal;
margin-bottom: 0px;
}
/* line 57, ../sass/report/_index.scss */
.report-index #section-users {
display: none;
}
/* line 59, ../sass/report/_index.scss */
/* line 70, ../sass/report/_index.scss */
.report-index #section-users #wrapper-search-user {
margin-bottom: 10px;
position: relative;
}
/* line 62, ../sass/report/_index.scss */
/* line 73, ../sass/report/_index.scss */
.report-index #section-users #wrapper-search-user .glyphicon-search {
position: absolute;
top: 10px;
right: 16px;
color: gray;
}
/* line 70, ../sass/report/_index.scss */
.report-index #section-points-sale {
display: none;
}
/* line 74, ../sass/report/_index.scss */
/* line 85, ../sass/report/_index.scss */
.report-index #section-distributions #wrapper-select-year {
margin-bottom: 10px;
}
/* line 77, ../sass/report/_index.scss */
.report-index #section-distributions .month-distribution {
/* line 89, ../sass/report/_index.scss */
.report-index #section-distributions .distribution-month {
margin-bottom: 10px;
}
/* line 91, ../sass/report/_index.scss */
.report-index #section-distributions .distribution-month .link-month-distribution {
display: block;
text-transform: capitalize;
text-align: left;
}
/* line 84, ../sass/report/_index.scss */
/* line 96, ../sass/report/_index.scss */
.report-index #section-distributions .distribution-month .link-month-distribution .glyphicon {
float: right;
}
/* line 105, ../sass/report/_index.scss */
.report-index #report {
margin-top: 43px;
}

+ 35
- 0
backend/web/js/vuejs/distribution-index.js Bestand weergeven

@@ -1,4 +1,39 @@

/**
Copyright distrib (2018)

contact@opendistrib.net

Ce logiciel est un programme informatique servant à aider les producteurs
à distribuer leur production en circuits courts.

Ce logiciel est régi par la licence CeCILL soumise au droit français et
respectant les principes de diffusion des logiciels libres. Vous pouvez
utiliser, modifier et/ou redistribuer ce programme sous les conditions
de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA
sur le site "http://www.cecill.info".

En contrepartie de l'accessibilité au code source et des droits de copie,
de modification et de redistribution accordés par cette licence, il n'est
offert aux utilisateurs qu'une garantie limitée. Pour les mêmes raisons,
seule une responsabilité restreinte pèse sur l'auteur du programme, le
titulaire des droits patrimoniaux et les concédants successifs.

A cet égard l'attention de l'utilisateur est attirée sur les risques
associés au chargement, à l'utilisation, à la modification et/ou au
développement et à la reproduction du logiciel par l'utilisateur étant
donné sa spécificité de logiciel libre, qui peut le rendre complexe à
manipuler et qui le réserve donc à des développeurs et des professionnels
avertis possédant des connaissances informatiques approfondies. Les
utilisateurs sont donc invités à charger et tester l'adéquation du
logiciel à leurs besoins dans des conditions permettant d'assurer la
sécurité de leurs systèmes et ou de leurs données et, plus généralement,
à l'utiliser et l'exploiter dans les mêmes conditions de sécurité.

Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
pris connaissance de la licence CeCILL, et que vous en avez accepté les
termes.
*/

var app = new Vue({
el: '#app-distribution-index',

+ 36
- 0
backend/web/js/vuejs/producer-update.js Bestand weergeven

@@ -1,4 +1,40 @@

/**
Copyright distrib (2018)

contact@opendistrib.net

Ce logiciel est un programme informatique servant à aider les producteurs
à distribuer leur production en circuits courts.

Ce logiciel est régi par la licence CeCILL soumise au droit français et
respectant les principes de diffusion des logiciels libres. Vous pouvez
utiliser, modifier et/ou redistribuer ce programme sous les conditions
de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA
sur le site "http://www.cecill.info".

En contrepartie de l'accessibilité au code source et des droits de copie,
de modification et de redistribution accordés par cette licence, il n'est
offert aux utilisateurs qu'une garantie limitée. Pour les mêmes raisons,
seule une responsabilité restreinte pèse sur l'auteur du programme, le
titulaire des droits patrimoniaux et les concédants successifs.

A cet égard l'attention de l'utilisateur est attirée sur les risques
associés au chargement, à l'utilisation, à la modification et/ou au
développement et à la reproduction du logiciel par l'utilisateur étant
donné sa spécificité de logiciel libre, qui peut le rendre complexe à
manipuler et qui le réserve donc à des développeurs et des professionnels
avertis possédant des connaissances informatiques approfondies. Les
utilisateurs sont donc invités à charger et tester l'adéquation du
logiciel à leurs besoins dans des conditions permettant d'assurer la
sécurité de leurs systèmes et ou de leurs données et, plus généralement,
à l'utiliser et l'exploiter dans les mêmes conditions de sécurité.

Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
pris connaissance de la licence CeCILL, et que vous en avez accepté les
termes.
*/

var app = new Vue({
el: '#app-producer-update',
data: {

+ 48
- 0
backend/web/js/vuejs/report-index.js Bestand weergeven

@@ -0,0 +1,48 @@

var app = new Vue({
el: '#app-report-index',
data: {
currentSection: 'users',
sections: [
{
name: 'Utilisateurs',
id: 'users',
},
{
name: 'Points de vente',
id: 'points-sale',
},
{
name: 'Distributions',
id: 'distributions',
}
],
termSearchUser: '',
usersArray: [],
pointsSaleArray: [],
distributionYearsArray: [],
distributionYear: null,
distributionsByMonthArray: []
},
mounted: function() {
this.init() ;
},
methods: {
init: function() {
var app = this ;
axios.get("ajax-init",{params: {}})
.then(function(response) {
app.usersArray = response.data.usersArray ;
app.pointsSaleArray = response.data.pointsSaleArray ;
app.distributionYearsArray = response.data.distributionYearsArray ;
app.distributionYear = app.distributionYearsArray[app.distributionYearsArray.length - 1] ;
app.distributionsByMonthArray = response.data.distributionsByMonthArray ;
});
},
changeSection: function(section) {
this.currentSection = section.id ;
}
}
});



+ 1
- 0
backend/web/sass/_adminlte.scss Bestand weergeven

@@ -121,6 +121,7 @@ body.skin-black {
.btn-default {
color: #333 ;
background-color: white ;
}
.btn-primary {

+ 28
- 7
backend/web/sass/report/_index.scss Bestand weergeven

@@ -35,10 +35,17 @@ termes.
*/

.report-index {
#nav-sections-report {
.btn-section {
margin-right: 5px ;
}
}
.section {
margin-top: 10px ;
.content-max-height {
max-height: 300px ;
max-height: 400px ;
overflow-y: scroll ;
ul {
@@ -47,15 +54,19 @@ termes.
padding-left: 5px ;

li {
input {
position: relative ;
top: 2px ;
}
label {
font-weight: normal;
margin-bottom: 0px ;
}
}
}
}
}
#section-users {
display: none ;
#wrapper-search-user {
margin-bottom: 10px ;
position: relative ;
@@ -68,17 +79,27 @@ termes.
}
}
#section-points-sale {
display: none ;
}
#section-distributions {
#wrapper-select-year {
margin-bottom: 10px ;
}
.month-distribution {
display: block ;
text-transform: capitalize ;
text-align: left ;
.distribution-month {
margin-bottom: 10px ;
.link-month-distribution {
display: block ;
text-transform: capitalize ;
text-align: left ;
.glyphicon {
float: right ;
}
}
}
}
#report {

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan