Changement structure code html et javascript
FossilOrigin-Name: 5d8368da9ebcec86dbee43bd4b7bf7282afe71cf1b2b28ffa332d935f32411e8
This commit is contained in:
engel
parent
81a5bfb8a9
commit
358becfca7
@ -1,181 +1,126 @@
|
||||
{include file="admin/_head.tpl" title="%s"|args:$plugin.nom current="plugin_%s"|args:$plugin.id}
|
||||
|
||||
{* barre de navigation *}
|
||||
{* barre de navigation
|
||||
<nav class="tabs noprint">
|
||||
<ul>
|
||||
<li><a>Page 1</a></li>
|
||||
<li><a>Page 2</a></li>
|
||||
<li><a>Page 3</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a>Page 1</a></li>
|
||||
<li><a>Page 2</a></li>
|
||||
<li><a>Page 3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
*}
|
||||
{* TODO : Temporaire - à supprimer (?) *}
|
||||
<h2>Liste des activités, cotisations et comptes associés</h2>
|
||||
<table class="list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Description</th>
|
||||
<th>Tarif</th>
|
||||
<th>Description</th>
|
||||
<th>N° Compte</th>
|
||||
<th>Nom Compte</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{foreach from=$activitesTarifsComptes item="activite"}
|
||||
<tr>
|
||||
<td>{$activite.label}</td>
|
||||
<td>{$activite.descService}</td>
|
||||
<td>{$activite.Tarif}</td>
|
||||
<td>{$activite.descTarif}</td>
|
||||
<td>{$activite.numero_cpt}</td>
|
||||
<td>{$activite.nom_cpt}</td>
|
||||
</tr>
|
||||
{/foreach}
|
||||
</tbody>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Description</th>
|
||||
<th>Tarif</th>
|
||||
<th>Description</th>
|
||||
<th>N° Compte</th>
|
||||
<th>Nom Compte</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{foreach from=$activitesTarifsComptes item="activite"}
|
||||
<tr>
|
||||
<td>{$activite.label}</td>
|
||||
<td>{$activite.descService}</td>
|
||||
<td>{$activite.Tarif}</td>
|
||||
<td>{$activite.descTarif}</td>
|
||||
<td>{$activite.numero_cpt}</td>
|
||||
<td>{$activite.nom_cpt}</td>
|
||||
</tr>
|
||||
{/foreach}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Liste des versements par activité et tarif</h2>
|
||||
|
||||
{* TODO : vérifier le détail de ce div *}
|
||||
<div class="year-header noprint">
|
||||
<button type="button" data-icon="↓" class="icn-btn" id="open_details">Déplier toutes les activités</button>
|
||||
<button type="button" data-icon="↑" class="icn-btn" id="close_details">Replier toutes les activités</button>
|
||||
<button type="button" data-icon="↓" class="icn-btn" id="open_details">Déplier toutes les activités</button>
|
||||
<button type="button" data-icon="↑" class="icn-btn" id="close_details">Replier toutes les activités</button>
|
||||
</div>
|
||||
|
||||
<form method="post" action="action.php" class="memberList">
|
||||
|
||||
{* Itération sur les activités *}
|
||||
{foreach from=$listeParActiviteEtTarif item="activite"}
|
||||
{* Itération sur les activités *}
|
||||
{foreach from=$listeParActiviteEtTarif item="activite"}
|
||||
|
||||
{* Itération sur les tarifs de l'activité *}
|
||||
{foreach from=$activite->tarifs item="tarif"}
|
||||
{* Itération sur les tarifs de l'activité *}
|
||||
{foreach from=$activite->tarifs item="tarif"}
|
||||
|
||||
{* TODO : s'inspirer du fonctionnement de <details pour (dé)sélectionner les lignes d'une table *}
|
||||
<details open="open">
|
||||
<summary>
|
||||
<h3>Activité « {$activite->label} »</h3>
|
||||
{if !empty($activite->description)}
|
||||
<h4>{$activite->description}</h4>
|
||||
{/if}
|
||||
<h4>tarif « {$tarif->titreTarif} », montant : {if $tarif->montantTarif > 0}{$tarif->montantTarif}
|
||||
€{else}libre
|
||||
{/if}
|
||||
</h4>
|
||||
</summary>
|
||||
<details open="open">
|
||||
<summary>
|
||||
<h3>Activité « {$activite->label} »</h3>
|
||||
{if !empty($activite->description)}
|
||||
<h4>{$activite->description}</h4>
|
||||
{/if}
|
||||
<h4>tarif « {$tarif->titreTarif} », montant : {if $tarif->montantTarif > 0}{$tarif->montantTarif}
|
||||
€{else}libre
|
||||
{/if}
|
||||
</h4>
|
||||
</summary>
|
||||
|
||||
{*
|
||||
Itération sur les versements d'un tarif d'une activité
|
||||
présentation : une table pour les versements d'une personne
|
||||
TODO : régler la fermeture de table lors du changement de personne
|
||||
*}
|
||||
<?php $currentUser = -1; $firstLine = true; ?>
|
||||
{foreach from=$lesVersements key="rang" item="versement"}
|
||||
{if $versement.idActivite == $activite->id &&
|
||||
$versement.idTarif == $tarif->idTarif}
|
||||
{if $versement.idUser != $currentUser}
|
||||
{* changement de personne *}
|
||||
{if $firstLine}
|
||||
<?php $firstLine = false; ?>
|
||||
{else}
|
||||
{* fermer le tableau précédent *}
|
||||
</tbody>
|
||||
</table>
|
||||
<?php $firstLine = true; ?>
|
||||
{/if}
|
||||
<h3>Versements de {$versement.Nom}</h3>
|
||||
<table class="myList" id="versements_{$versement->idUser}">
|
||||
{* on ne met pas thead pour éviter l'écouteur prédéfini ... *}
|
||||
{* mais du coup, il faut mettre le mien ... *}
|
||||
{* <thead> *}
|
||||
<tbody>
|
||||
<tr style="background: rgba(var(--gSecondColor), 0.5);">
|
||||
{* TODO : voir common/dynamic_list_head.tpl *}
|
||||
<?php $tableau = "check_" . $versement->idUser; ?>
|
||||
<th class="check"><input class="{$tableau}" type="checkbox" title="Tout cocher / décocher" id="f_all" /><label
|
||||
for="f_all"></label>
|
||||
</th>
|
||||
<th>Versement</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
{* </thead> *}
|
||||
{* <tbody> *}
|
||||
<?php $currentUser = $versement->idUser; ?>
|
||||
{/if}
|
||||
<tr>
|
||||
{* TODO : voir admin/membres/index.tpl *}
|
||||
<td class="check">{input class=$tableau type="checkbox" name="selected[]" value=$rang}</td>
|
||||
<td>{$versement.Versement}</td>
|
||||
<td>{$versement.Date|date_format:"%d/%m/%Y"}</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/foreach} {* Itération sur les versements *}
|
||||
</tbody>
|
||||
</table>
|
||||
</details>
|
||||
{/foreach} {* Itération sur les tarifs de l'activité *}
|
||||
{/foreach} {* Itération sur les activités *}
|
||||
{*
|
||||
Itération sur les versements d'un tarif d'une activité
|
||||
présentation : une table pour les versements d'une personne
|
||||
*}
|
||||
<?php $currentUser = -1; $firstUser = true; ?>
|
||||
{foreach from=$lesVersements key="rang" item="versement"}
|
||||
{if $versement.idActivite == $activite->id &&
|
||||
$versement.idTarif == $tarif->idTarif}
|
||||
{if $versement.idUser != $currentUser}
|
||||
{* changement de personne *}
|
||||
{if $firstUser}
|
||||
<?php $firstUser = false; ?>
|
||||
{else}
|
||||
{* fermer le tableau précédent *}
|
||||
</fieldset>
|
||||
{/if}
|
||||
{* Afficher les infos de la personne *}
|
||||
<?php $idVersements = $versement->idTarif."_".$versement->idUser; ?>
|
||||
<h3>Versements de {$versement.Nom} : <span id="total_{$idVersements}">0,00 €</span></h3>
|
||||
<fieldset class="versements" id="versements_{$idVersements}">
|
||||
<input class="check_{$idVersements}" type="checkbox" id="check_{$idVersements}" onclick="cocherDecocherPersonne(check_{$idVersements}, total_{$idVersements})" />
|
||||
<label for="check_{$idVersements}" style="font-weight:bold;">Cliquer ici pour sélectionner toutes les lignes</label><br />
|
||||
<hr>
|
||||
<?php $currentUser = $versement->idUser; ?>
|
||||
{/if}
|
||||
{* afficher les infos du versement de la personne*}
|
||||
<input class="check_{$idVersements}" type="checkbox" name="selected[]" value={$rang}>
|
||||
<label for={$rang}></label>
|
||||
<span class="montant">{$versement.Versement}</span>
|
||||
<span>{$versement.Date|date_format:"%d/%m/%Y"}</span><br />
|
||||
{/if}
|
||||
{/foreach} {* Itération sur les versements *}
|
||||
</fieldset>
|
||||
</details>
|
||||
{/foreach} {* Itération sur les tarifs de l'activité *}
|
||||
{/foreach} {* Itération sur les activités *}
|
||||
</form>
|
||||
|
||||
{* scripts pour cases à cocher *}
|
||||
<script src="script.js"></script>
|
||||
|
||||
{literal}
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* Cocher/décocher toutes les cases d'un tableau
|
||||
* en fonction de l'état de la première (ligne d'entête)
|
||||
* @param evt : événement déclencheur
|
||||
*/
|
||||
function cocherDecocher(evt) {
|
||||
var input = evt.target;
|
||||
console.log("Input = " + input.className);
|
||||
// voir si la case tousCochés est cochée
|
||||
var tousCoches = input.checked;
|
||||
// chercher la table englobante
|
||||
var laTable = input.closest("table");
|
||||
console.log("Table trouvée = " + laTable.id);
|
||||
// et la liste des lignes
|
||||
var rows = laTable.getElementsByTagName("tr");
|
||||
// et modifier les autres cases en fonction de celle-ci
|
||||
for (let i = 1; i < rows.length; ++i) {
|
||||
var input = rows[i].getElementsByTagName("input")[0];
|
||||
input.checked = tousCoches;
|
||||
}
|
||||
}
|
||||
|
||||
// ouvrir/fermer les détails
|
||||
document.querySelector('#open_details').onclick = () => {
|
||||
document.querySelectorAll('details').forEach((e) => {
|
||||
e.setAttribute('open', 'open');
|
||||
});
|
||||
};
|
||||
document.querySelector('#close_details').onclick = () => {
|
||||
document.querySelectorAll('details').forEach((e) => {
|
||||
e.removeAttribute('open');
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Associer un écouteur à la première case à cocher de chaque table
|
||||
*/
|
||||
const lesTables = document.querySelectorAll("table.myList");
|
||||
console.log("Associer un écouteur à la première case à cocher de chaque table");
|
||||
for (let i = 0; i < lesTables.length; ++i) {
|
||||
// vérifier si c'est l'une des tables qui nous intéresse
|
||||
// l'id est du genre : versements_xx où xx est un entier
|
||||
const id = lesTables[i].id;
|
||||
console.log("id de la table = " + id);
|
||||
const re = /^versements_[0-9]+/;
|
||||
if (re.test(id)) {
|
||||
// chercher le premier élément input
|
||||
const premierInput = lesTables[i].querySelector("input");
|
||||
console.log("input trouvé = " + premierInput.className);
|
||||
// supprimer l'écouteur précédent
|
||||
//premierInput.removeAttribute('onchange'); // marche pas
|
||||
// associer un écouteur à la première case à cocher
|
||||
premierInput.addEventListener('change', cocherDecocher); // ok
|
||||
}
|
||||
}
|
||||
// activer l'écouteur sur la première case de chaque table
|
||||
// window.addEventListener("load", activerListener);
|
||||
|
||||
// ouvrir/fermer les détails
|
||||
document.querySelector('#open_details').onclick = () => {
|
||||
document.querySelectorAll('details').forEach((e) => {
|
||||
e.setAttribute('open', 'open');
|
||||
});
|
||||
};
|
||||
document.querySelector('#close_details').onclick = () => {
|
||||
document.querySelectorAll('details').forEach((e) => {
|
||||
e.removeAttribute('open');
|
||||
});
|
||||
};
|
||||
</script>
|
||||
{/literal}
|
||||
|
||||
|
||||
90
www/admin/script.js
Normal file
90
www/admin/script.js
Normal file
@ -0,0 +1,90 @@
|
||||
/**
|
||||
* Fonction appelée quand on (dé)coche la case d'une personne
|
||||
* - (dé)sélectionner toutes les cases à cocher
|
||||
* - faire le total des cases cochées
|
||||
*
|
||||
* @param id de la case qui a été cochée
|
||||
* @param id de l'élément où afficher le total
|
||||
*/
|
||||
function cocherDecocherPersonne(idCase, idTotal) {
|
||||
// chercher le fieldset englobant
|
||||
var fieldset = idCase.closest("fieldset");
|
||||
var listeCheck = fieldset.getElementsByTagName("input");
|
||||
var listeMontants = fieldset.querySelectorAll("span.montant");
|
||||
var total = 0;
|
||||
for (var i = 1; i < listeCheck.length; ++i)
|
||||
{
|
||||
listeCheck[i].checked = listeCheck[0].checked;
|
||||
if (listeCheck[i].checked) {
|
||||
total += Number(listeMontants[i-1].textContent);
|
||||
}
|
||||
}
|
||||
// "afficher" le total
|
||||
idTotal.innerHTML =
|
||||
total.toLocaleString('fr-FR', {style: 'currency', currency: 'EUR',
|
||||
minimumFractionDigits: 2});
|
||||
}
|
||||
|
||||
/**
|
||||
* Cocher/décocher toutes les cases d'un tableau
|
||||
* en fonction de l'état de la première (ligne d'entête)
|
||||
* @param evt : événement déclencheur
|
||||
* @remarks : est remplacé par la foncion cocherDecocher ci-dessus
|
||||
*/
|
||||
function cocherDecocher_old(evt) {
|
||||
console.log("this = " + this.className);
|
||||
console.log("currentTarget = " + evt.currentTarget.className);
|
||||
console.log("evt.target = " + evt.target.className);
|
||||
var composed = evt.composedPath();
|
||||
console.log("composedPath = " + composed);
|
||||
|
||||
var firstInput = evt.target;
|
||||
// voir si la case tousCochés est cochée
|
||||
var tousCoches = firstInput.checked;
|
||||
// chercher la table englobante
|
||||
var laTable = firstInput.closest("table");
|
||||
console.log("Table trouvée = " + laTable.id);
|
||||
// et la liste des lignes
|
||||
var rows = laTable.getElementsByTagName("tr");
|
||||
// modifier les autres cases en fonction de celle-ci
|
||||
for (let i = 1; i < rows.length; ++i) {
|
||||
var input = rows[i].getElementsByTagName("input")[0];
|
||||
input.checked = tousCoches;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Associer un écouteur à la première case à cocher de chaque table
|
||||
* @remarks : n'est plus utile
|
||||
*/
|
||||
function activerListener() {
|
||||
// parcourir les tables
|
||||
const lesTables = document.querySelectorAll("table.list");
|
||||
for (let i = 0; i < lesTables.length; ++i) {
|
||||
// vérifier si c'est l'une des tables qui nous intéresse
|
||||
// l'id est du genre : versements_xx où xx est un entier
|
||||
const id = lesTables[i].id;
|
||||
const re = /^versements_[0-9]+/;
|
||||
console.log("id = " + id + " => " + re.test(id));
|
||||
if (re.test(id)) {
|
||||
// chercher le premier élément input
|
||||
const premierInput = lesTables[i].querySelector("input");
|
||||
// associer un écouteur à la première case à cocher
|
||||
premierInput.addEventListener('change', cocherDecocher);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
// ouvrir/fermer les détails
|
||||
document.querySelector('#open_details').onclick = () => {
|
||||
document.querySelectorAll('details').forEach((e) => {
|
||||
e.setAttribute('open', 'open');
|
||||
});
|
||||
};
|
||||
document.querySelector('#close_details').onclick = () => {
|
||||
document.querySelectorAll('details').forEach((e) => {
|
||||
e.removeAttribute('open');
|
||||
});
|
||||
};
|
||||
*/
|
||||
Loading…
Reference in New Issue
Block a user