From 5461d4649f284a5c07963b8fee16cd7ef0268eaf Mon Sep 17 00:00:00 2001 From: paidge <paidge_cs@hotmail.com> Date: Wed, 23 Feb 2022 00:31:27 +0100 Subject: [PATCH] add tooltips on memberCard --- assets/css/style.scss | 9 ++ components/btn/Clipboard.vue | 2 +- components/btn/Favori.vue | 2 +- components/member/Card.vue | 220 +++++++++++++++-------------------- components/member/List.vue | 2 +- components/member/Prop.vue | 36 ++++++ graphql/queries.js | 1 + i18n/locales/de.json | 35 ++++-- i18n/locales/en.json | 29 +++-- i18n/locales/es.json | 29 +++-- i18n/locales/fr.json | 29 +++-- pages/index.vue | 14 ++- plugins/bootstrap.js | 13 ++- 13 files changed, 261 insertions(+), 160 deletions(-) create mode 100644 components/member/Prop.vue diff --git a/assets/css/style.scss b/assets/css/style.scss index 089d7bc..daa286b 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -72,6 +72,15 @@ $pagination-disabled-border-color: $pagination-border-color; $pagination-disabled-bg: var(--bg-menu-color); $pagination-disabled-color: var(--txt-secondary-color); +// Tooltips +$tooltip-max-width: 300px; +$tooltip-opacity: 1; +$tooltip-bg: var(--bg-menu-color); +$tooltip-color: var(--txt-secondary-color); +$tooltip-font-size: 1rem; +$tooltip-arrow-height: 1rem; +$tooltip-arrow-width: 1.5rem; + @import "font"; @import "bootstrap"; diff --git a/components/btn/Clipboard.vue b/components/btn/Clipboard.vue index 2663b3c..c44c792 100644 --- a/components/btn/Clipboard.vue +++ b/components/btn/Clipboard.vue @@ -4,7 +4,7 @@ id="btncopy" class="btn btn-secondary px-4 py-1" type="button" - v-tooltip="$t('copie') + ' !'" + v-tooltip-click="$t('copie') + ' !'" @click="copyText"> <solid-share-icon class="icon" aria-hidden="true" /> <span class="visually-hidden">{{ $t("aria.clipboard") }}</span> diff --git a/components/btn/Favori.vue b/components/btn/Favori.vue index e3c4f5d..4699f24 100644 --- a/components/btn/Favori.vue +++ b/components/btn/Favori.vue @@ -2,7 +2,7 @@ <button id="favori" class="btn btn-secondary" - v-tooltip=" + v-tooltip-click=" $favourites.list.includes(uid) ? $t('favoris.enregistre') : $t('favoris.supprime') diff --git a/components/member/Card.vue b/components/member/Card.vue index b0594f3..545c51e 100644 --- a/components/member/Card.vue +++ b/components/member/Card.vue @@ -19,108 +19,92 @@ class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'"> <tbody> - <tr v-if="hash.status == 'MEMBER'"> - <th scope="row" class="fw-normal"> - {{ $t("membre.referent.title") }} : - </th> - <td - :class="{ - 'table-success': hash.sentry, - 'table-warning': !hash.sentry - }"> - {{ hash.sentry ? $t("oui") : $t("non") }} - </td> - </tr> - <tr v-if="hash.status != 'NEWCOMER'"> - <th scope="row" class="fw-normal"> - {{ $t("membre.qualite.title") }} : - </th> - <td - :class="{ - 'table-success': hash.quality.ratio >= 80, - 'table-warning': hash.quality.ratio < 80 - }"> - {{ Math.round(hash.quality.ratio * 100) / 100 }} - </td> - </tr> - <tr> - <th scope="row" class="fw-normal"> - {{ $t("membre.distance.title") }} : - </th> - <td - :class="{ - 'table-success': - hash.status != 'NEWCOMER' - ? hash.distance.dist_ok - : hash.distanceE.dist_ok, - 'table-danger': - hash.status != 'NEWCOMER' - ? !hash.distance.dist_ok - : !hash.distanceE.dist_ok - }"> - {{ - hash.status != "NEWCOMER" - ? Math.round(hash.distance.value.ratio * 100) / 100 - : Math.round(hash.distanceE.value.ratio * 100) / 100 - }} - </td> - </tr> - <tr> - <th scope="row" class="fw-normal"> - {{ - hash.status != "MISSING" - ? $t("membre.datelimadhesion") - : $t("membre.datelimrevoc") - }} : - </th> - <td - :class=" - hash.status != 'MISSING' - ? 'table-' + $options.filters.dateStatus(hash.limitDate) - : 'table-danger' - "> - {{ $d(new Date(hash.limitDate * 1000), "long") }} - </td> - </tr> - <tr v-if="hash.status == 'MEMBER'"> - <th scope="row" class="fw-normal"> - {{ $t("membre.datemanquecertifs") }} : - </th> - <td - :class=" - 'table-' + $options.filters.dateStatus(hash.certsLimit) - "> - {{ $d(new Date(hash.certsLimit * 1000), "long") }} - </td> - </tr> - <tr v-if="hash.status == 'MEMBER'"> - <th scope="row" class="fw-normal"> - {{ $t("membre.dispocertif") }} : - </th> - <td - :class="{ - 'table-success': hash.minDatePassed, - 'table-danger': !hash.minDatePassed - }"> - {{ hash.minDatePassed ? $t("oui") : $t("non") }} - <small v-if="!hash.minDatePassed" - >( > {{ $d(new Date(hash.minDate * 1000), "long") }} )</small - > - </td> - </tr> - <tr v-if="hash.status == 'MEMBER'"> - <th scope="row" class="fw-normal"> - {{ $t("membre.nb_certifs") }} : - </th> - <td - :class="{ - 'table-success': sentCertNotExpired.length <= 80, - 'table-warning': sentCertNotExpired.length > 80, - 'table-danger': sentCertNotExpired.length > 90 - }"> - {{ 100 - sentCertNotExpired.length }} - </td> - </tr> + <MemberProp + v-if="hash.status == 'MEMBER'" + :title="$t('membre.referent.title')" + :tooltip="$t('membre.referent.desc')" + :classClor="{ + 'table-success': hash.sentry, + 'table-warning': !hash.sentry + }"> + {{ hash.sentry ? $t("oui") : $t("non") }} + </MemberProp> + <MemberProp + v-if="hash.status != 'NEWCOMER'" + :title="$t('membre.qualite.title')" + :tooltip="$t('membre.qualite.desc')" + :classClor="{ + 'table-success': hash.quality.ratio >= 80, + 'table-warning': hash.quality.ratio < 80 + }"> + {{ Math.round(hash.quality.ratio * 100) / 100 }}</MemberProp + > + <MemberProp + :title="$t('membre.distance.title')" + :tooltip="$t('membre.distance.desc')" + :classClor="{ + 'table-success': + hash.status != 'NEWCOMER' + ? hash.distance.dist_ok + : hash.distanceE.dist_ok, + 'table-danger': + hash.status != 'NEWCOMER' + ? !hash.distance.dist_ok + : !hash.distanceE.dist_ok + }"> + {{ Math.round(hash.distanceE.value.ratio * 100) / 100 }} + </MemberProp> + <MemberProp + :title=" + hash.status != 'MISSING' + ? $t('membre.datelimadhesion.title') + : $t('membre.datelimrevoc.title') + " + :tooltip=" + hash.status != 'MISSING' + ? $t('membre.datelimadhesion.desc') + : $t('membre.datelimrevoc.desc') + " + :classClor=" + hash.status != 'MISSING' + ? 'table-' + $options.filters.dateStatus(hash.limitDate) + : 'table-danger' + "> + {{ $d(new Date(hash.limitDate * 1000), "long") }} + </MemberProp> + <MemberProp + v-if="hash.status == 'MEMBER'" + :title="$t('membre.datemanquecertifs.title')" + :tooltip="$t('membre.datemanquecertifs.desc')" + :classClor=" + 'table-' + $options.filters.dateStatus(hash.certsLimit) + "> + {{ $d(new Date(hash.certsLimit * 1000), "long") }} + </MemberProp> + <MemberProp + v-if="hash.status == 'MEMBER'" + :title="$t('membre.dispocertif.title')" + :tooltip="$t('membre.dispocertif.desc')" + :classClor="{ + 'table-success': hash.minDatePassed, + 'table-danger': !hash.minDatePassed + }"> + {{ hash.minDatePassed ? $t("oui") : $t("non") }} + <small v-if="!hash.minDatePassed" + >( > {{ $d(new Date(hash.minDate * 1000), "long") }} )</small + > + </MemberProp> + <MemberProp + v-if="hash.status == 'MEMBER'" + :title="$t('membre.nb_certifs.title')" + :tooltip="$t('membre.nb_certifs.desc')" + :classClor="{ + 'table-success': sentCertNotExpired.length <= 80, + 'table-warning': sentCertNotExpired.length > 80, + 'table-danger': sentCertNotExpired.length > 90 + }"> + {{ 100 - sentCertNotExpired.length }} + </MemberProp> </tbody> </table> </div> @@ -147,31 +131,19 @@ export default { </script> <style lang="scss"> -.member { - .table { - text-align: center; - width: auto; - margin: auto; - - tr { - display: flex; - flex-direction: column; - } - } +.member .table { + text-align: center; + width: auto; + margin: auto; } @media (min-width: 576px) { - .member { - .table { - tr { - display: table-row; - } - th { - text-align: right; - } - td { - text-align: left; - } + .member .table { + th { + text-align: right; + } + td { + text-align: left; } } } diff --git a/components/member/List.vue b/components/member/List.vue index 0e9538c..1fe5e2a 100644 --- a/components/member/List.vue +++ b/components/member/List.vue @@ -82,7 +82,7 @@ :title=" ['certif', 'adhesion'].includes(id) ? $t('date') - : $t('membre.datemanquecertifs') + : $t('membre.datemanquecertifs.title') " :currentSort="currentSort" :currentSortDir="currentSortDir" /> diff --git a/components/member/Prop.vue b/components/member/Prop.vue new file mode 100644 index 0000000..10cab61 --- /dev/null +++ b/components/member/Prop.vue @@ -0,0 +1,36 @@ +<template> + <tr v-tooltip="{ title: tooltip, placement: 'right' }"> + <th scope="row" class="fw-normal">{{ title }} :</th> + <td :class="classClor"> + <slot></slot> + </td> + </tr> +</template> + +<script> +export default { + props: { + title: String, + tooltip: { + type: String, + default: "" + }, + classClor: [String, Object] + } +} +</script> + +<style lang="scss" scoped> +tr { + display: flex; + flex-direction: column; + cursor: default; + user-select: none; +} + +@media (min-width: 576px) { + tr { + display: table-row; + } +} +</style> diff --git a/graphql/queries.js b/graphql/queries.js index 671ff50..0fe8e80 100644 --- a/graphql/queries.js +++ b/graphql/queries.js @@ -56,6 +56,7 @@ export const LAST_EVENTS = gql` __typename number } + number } } ` diff --git a/i18n/locales/de.json b/i18n/locales/de.json index e3ab65f..7835453 100644 --- a/i18n/locales/de.json +++ b/i18n/locales/de.json @@ -131,26 +131,41 @@ "desc": "Mitglied, das seinen privaten Schlüssel zum Schürfen von Blöcken mithilfe von Duniter verwendet.", "title": "Berechnendes Mitglied" }, - "datelimadhesion": "Beitrittsfrist", + "datelimadhesion": { + "desc": "Datum, vor dem das Konto seinen Mitgliedsstatus verliert, wenn keine Verlängerungsanfrage gestellt wurde", + "title": "Beitrittsfrist" + }, "datelimpertestatut": "Verlust der Mitgliedschaft", - "datelimrevoc": "Frist vor dem Widerruf", - "datemanquecertifs": "Fehlende Zertifizierungen", - "desc": "Einzelperson, die in das Vertrauensnetz beigetreten ist, die die fünf erforderlichen Zertifizierungen erhalten hat und die Distanzregel einhält. Ein Mitglied schöpft die Währung über seine Universaldividende mit.", + "datelimrevoc": { + "desc": "Datum, vor dem das Konto automatisch gesperrt wird, wenn keine Verlängerungsanfrage gestellt wurde", + "title": "Frist vor dem Widerruf" + }, + "datemanquecertifs": { + "desc": "Datum, an dem das Konto keine Zertifizierungen mehr hat", + "title": "Fehlende Zertifizierungen" + }, + "desc": "Einzelperson, die in das Vertrauensnetz beigetreten ist, die die fünf erforderlichen Zertifizierungen erhalten hat und die Distanzregel einhält. Ein Mitglied schöpft die Währung über seine Universaldividende mit", "dispo": "Kann zertifizieren", - "dispocertif": "Verfügbarkeit", + "dispocertif": { + "desc": "Ein Mitglied kann eine Bescheinigung erst 5 Tage nach Bearbeitung der letzten ausstellen. Senden Sie jeweils nur eine Bescheinigung, um den Beitritt neuer Mitglieder zu erleichtern", + "title": "Verfügbarkeit" + }, "disponibilite": "Disponibilidad", "distance": { - "desc": "Anteil der referierenden Mitglieder, die in höchstens 5 Sprüngen im Vertrauensnetz erreichbar sind. Um Mitglied zu werden, muss man mindestens 5 Zertifizierungen sammeln, mit denen man 80% der referierenden Mitglieder in max. 5 Sprüngen erreichen kann.", + "desc": "Anteil der referierenden Mitglieder, die in höchstens 5 Sprüngen im Vertrauensnetz erreichbar sind. Um Mitglied zu werden, diese Rate muss größer oder gleich 80 % sein", "title": "Distanz" }, - "nb_certifs": "Anzahl verfügbare Zertifizierungen", + "nb_certifs": { + "desc": "Jedes Mitglied hat einen Bestand von 100 gültigen Zertifizierungen", + "title": "Anzahl verfügbare Zertifizierungen" + }, "nodispo": "Kann nicht zertifizieren", "qualite": { - "desc": "Anteil der referierenden Mitglieder, die in 4 oder weniger Sprüngen im Vertrauensnetz erreichbar sind. Ein Mitglied, dessen Qualität über 80% liegt, kann sicherstellen, dass seine Zertifizierten die Distanzregel einhalten.", + "desc": "Anteil der referierenden Mitglieder, die in 4 oder weniger Sprüngen im Vertrauensnetz erreichbar sind. Ein Mitglied, dessen Qualität über 80% liegt, kann sicherstellen, dass seine Zertifizierten die Distanzregel einhalten", "title": "Qualität" }, "referent": { - "desc": "Mitglied, das eine bestimmte Anzahl von Zertifizierungen ausgestellt UND erhalten hat, die von der Gesamtzahl der Mitglieder abhängt. Dieser Status bietet keine Vorteile, ermöglicht aber die Sicherung des Vertrauensnetzes, insbesondere durch die Distanzregel.", + "desc": "Mitglied, das <code>CEIL(N<sup>(1/stepMax)</sup>)</code> Zertifizierungen ausgestellt UND erhalten hat, die von der Gesamtzahl der Mitglieder abhängt. Dieser Status bietet keine Vorteile, ermöglicht aber die Sicherung des Vertrauensnetzes, insbesondere durch die Distanzregel", "title": "Referierendes Mitglied" }, "title": "Mitglied", @@ -159,7 +174,7 @@ "membres": "Mitglieder", "mot": "Wort oder Ausdruck", "noeud": { - "desc": "Computer, der die Duniter-Software verwendet, um an der Blockchain teilzunehmen. Ein Mitgliedsknoten kann neue Blöcke erstellen und wird von einem rechnenden Mitglied zur Verfügung gestellt, während ein Nicht-Mitgliedsknoten keine neuen Blöcke erstellen kann und an der Ausfallsicherheit des Netzwerks teilnimmt.", + "desc": "Computer, der die Duniter-Software verwendet, um an der Blockchain teilzunehmen. Ein Mitgliedsknoten kann neue Blöcke erstellen und wird von einem rechnenden Mitglied zur Verfügung gestellt, während ein Nicht-Mitgliedsknoten keine neuen Blöcke erstellen kann und an der Ausfallsicherheit des Netzwerks teilnimmt", "title": "Knoten" }, "nom": "Name", diff --git a/i18n/locales/en.json b/i18n/locales/en.json index ad91e7a..c1bf691 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -132,26 +132,41 @@ "desc": "Member using his private key to forge blocks thanks to Duniter installed on a node accessible on the Internet network", "title": "Calculating member" }, - "datelimadhesion": "Membership deadline", + "datelimadhesion": { + "desc": "Date before which the account will lose its membership status if no renewal request has been made", + "title": "Membership deadline" + }, "datelimpertestatut": "Loss of Membership", - "datelimrevoc": "Deadline before revocation ", - "datemanquecertifs": "Lack of certifications", + "datelimrevoc": { + "desc": "Date before which the account will be automatically revoked if there has been no renewal request", + "title": "Deadline before revocation" + }, + "datemanquecertifs": { + "desc": "Date the account will run out of certifications", + "title": "Lack of certifications" + }, "desc": "Individual whose membership is in progress and who has received the 5 necessary certifications allowing him to respect the distance rule. Which allows him to be co-creator of the currency via his Universal Dividend", "dispo": "Available", - "dispocertif": "Available to certify", + "dispocertif": { + "desc": "A member can only issue a certification 5 days after the last one has been processed. Send only one certification at a time to facilitate the entry of new members", + "title": "Available to certify" + }, "disponibilite": "Availablity", "distance": { - "desc": "% of referring members reachable in 5 hops or less in the web of trust. To become a member, you must collect at least 5 certifications allowing you to reach 80% of the referring members in 5 jumps max.", + "desc": "% of referring members reachable in 5 hops or less in the web of trust. To become a member, this rate must be greater than or equal to 80%", "title": "Distance" }, - "nb_certifs": "Nb of available certs", + "nb_certifs": { + "desc": "Each member has a stock of 100 valid certifications", + "title": "Nb of available certs" + }, "nodispo": "Unavailable", "qualite": { "desc": "% of referring members reachable in 4 hops or less in the web of trust. A member whose quality is greater than 80% will be able to ensure that his certified members will respect the distance rule", "title": "Quality" }, "referent": { - "desc": "Member having issued AND received a certain number of certifications, variable according to the number of total members. This status does not offer any advantages but allows the security of the web of trust in particular thanks to the distance rule", + "desc": "Member having issued AND received <code>CEIL(N<sup>(1/stepMax)</sup>)</code> certifications, N being the total number of members. This status does not offer any advantages but allows the security of the web of trust in particular thanks to the distance rule", "title": "Referring member" }, "title": "Member", diff --git a/i18n/locales/es.json b/i18n/locales/es.json index 2146232..d08a247 100644 --- a/i18n/locales/es.json +++ b/i18n/locales/es.json @@ -132,26 +132,41 @@ "desc": "Miembro usando su llave privada para forjar bloques gracias a Duniter instalado en un nodo accesible en la red de Internet", "title": "Miembro forjador" }, - "datelimadhesion": "Fecha lÃmite de membresÃa", + "datelimadhesion": { + "desc": "Fecha antes de la cual la cuenta perderá su estado de membresÃa si no se ha realizado una solicitud de renovación", + "title": "Fecha lÃmite de membresÃa" + }, "datelimpertestatut": "Pérdida de MembresÃa", - "datelimrevoc": "Fecha lÃmite de la autorevocación", - "datemanquecertifs": "Falta de certificaciones", + "datelimrevoc": { + "desc": "Fecha antes de la cual se revocará automáticamente la cuenta si no ha habido solicitud de renovación", + "title": "Fecha lÃmite de la autorevocación" + }, + "datemanquecertifs": { + "desc": "Fecha en que la cuenta se quedará sin certificaciones", + "title": "Falta de certificaciones" + }, "desc": "Individuo cuya candidatura está en curso y que ha recibido las 5 certificaciones necesarias y que le permitan respetar la regla de la distancia. Lo que le permite ser co-creador de la moneda a través de su Dividendo Universal", "dispo": "Disponible", - "dispocertif": "Disponible para certificar", + "dispocertif": { + "desc": "Un miembro solo puede emitir una certificación 5 dÃas después de que se haya procesado la última. EnvÃe solo una certificación a la vez para facilitar el ingreso de nuevos miembros", + "title": "Disponible para certificar" + }, "disponibilite": "Disponibilidad", "distance": { - "desc": "% de miembros de referencia o control accesibles en 5 pasos o menos en la Red de Confianza. Para convertirse en miembro, debe obtener al menos 5 certificaciones que le permitan llegar al 80% de los miembros de referencia o control en 5 pasos como máximo.", + "desc": "% de miembros de referencia o control accesibles en 5 pasos o menos en la Red de Confianza. Para convertirse en miembro, esta tasa debe ser mayor o igual al 80%", "title": "Distancia" }, - "nb_certifs": "Núm. de certificaciones disponibles", + "nb_certifs": { + "desc": "Cada miembro tiene un stock de 100 certificaciones válidas", + "title": "Núm. de certificaciones disponibles" + }, "nodispo": "No disponible", "qualite": { "desc": "% de miembros de referencia accesibles en 4 saltos o menos en la red de confianza. Un miembro cuya calidad sea superior al 80% podrá asegurarse de que sus miembros certificados respetarán la regla de distancia", "title": "Calidad de enlace" }, "referent": { - "desc": "Miembro que haya emitido Y recibido un número determinado de certificaciones, variable según el número total de miembros. Este estatus no ofrece ninguna ventaja o privilegio personal pero permite la seguridad de la red de confianza en particular gracias a la regla de distancia", + "desc": "Miembro que haya emitido Y recibido <code>CEIL(N<sup>(1/stepMax)</sup>)</code> certificaciones, siendo N el número total de miembros. Este estatus no ofrece ninguna ventaja o privilegio personal pero permite la seguridad de la red de confianza en particular gracias a la regla de distancia", "title": "Miembro de referencia o control" }, "title": "Miembro", diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json index 6d9e057..183f82a 100644 --- a/i18n/locales/fr.json +++ b/i18n/locales/fr.json @@ -132,26 +132,41 @@ "desc": "Membre utilisant sa clé privée pour forger des blocs grâce à Duniter installé sur un noeud accessible sur le réseau Internet", "title": "Membre calculant" }, - "datelimadhesion": "Date limite d'adhésion", + "datelimadhesion": { + "desc": "Date avant laquelle le compte perdra son statut de membre si il n'y a pas eu de demande de renouvellement effectuée", + "title": "Date limite d'adhésion" + }, "datelimpertestatut": "Perte d'adhesion", - "datelimrevoc": "Date limite avant révocation ", - "datemanquecertifs": "Manque de certifications", + "datelimrevoc": { + "desc": "Date avant laquelle le compte sera automatiquement révoqué si il n'y a pas eu de demande de renouvellement", + "title": "Date limite avant révocation" + }, + "datemanquecertifs": { + "desc": "Date à laquelle le compte va manquer de certifications", + "title": "Manque de certifications" + }, "desc": "Individu dont l'adhésion est en cours et ayant reçu les 5 certifications nécessaires lui permettant de respecter la règle de distance. Ce qui lui permet d'être co-créateur de la monnaie via son Dividende Universel", "dispo": "Disponible", - "dispocertif": "Disponible pour certifier", + "dispocertif": { + "desc": "Un membre ne peut émettre une certification que 5 jours après que la dernière ait été traitée. N'envoyez qu'une seule certification à la fois pour faciliter l'entrée des nouveaux membres", + "title": "Disponible pour certifier" + }, "disponibilite": "Disponibilité", "distance": { - "desc": "% des membres référents atteignables en 5 sauts ou moins dans la toile de confiance. Pour devenir membre, il faut récolter au minimum 5 certifications permettant de rejoindre 80% des membres référents en 5 sauts max", + "desc": "% des membres référents atteignables en 5 sauts ou moins dans la toile de confiance. Pour devenir membre, ce taux doit être supérieur ou égal à 80%", "title": "Distance" }, - "nb_certifs": "Nbre de certifs disponibles", + "nb_certifs": { + "desc": "Chaque membre dispose d'un stock de 100 certifications en cours de validité", + "title": "Nbre de certifs disponibles" + }, "nodispo": "Indisponible", "qualite": { "desc": "% des membres référents atteignables en 4 sauts ou moins dans la toile de confiance. Un membre dont la qualité est supérieure à 80% pourra assurer que ses certifiés respecteront la règle de distance", "title": "Qualité" }, "referent": { - "desc": "Membre ayant émis ET reçu un certain nombre de certifications, variable en fonction du nombre de membres total. Ce statut n'offre pas d'avantages mais permet la sécurisation de la toile de confiance notammen grâce à la règle de distance", + "desc": "Membre ayant émis ET reçu <code>ARRONDI_SUP(N<sup>(1/stepMax)</sup>)</code> certifications, N étant le nombre de membres total. Ce statut n'offre pas d'avantages mais permet la sécurisation de la toile de confiance notamment grâce à la règle de distance", "title": "Membre référent" }, "title": "Membre", diff --git a/pages/index.vue b/pages/index.vue index dd7acdb..4923ffd 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -11,6 +11,11 @@ </transition> <transition name="fade"> <div class="result" v-if="newMembers"> + <p class="lead text-center"> + Il y a actuellement + <span class="badge bg-secondary">{{ newMembers.totalMembers }}</span> + membres dans la toile de confiance + </p> <div class="row text-center"> <div class="col-md-6 col-lg-4 mb-5"> <h2 class="h4 text-success"> @@ -80,8 +85,12 @@ export default { update(data) { let result = { entrees: [], sorties: [], renew: [] } let users = [] + let totalMembers = 0 for (let i = 0; i < data.membersCount.length; i++) { + if (i == data.membersCount.length - 1) + totalMembers = data.membersCount[i].number + for (let j = 0; j < data.membersCount[i].idList.length; j++) { let member = data.membersCount[i].idList[j] member.member.inOut = member.inOut @@ -106,7 +115,10 @@ export default { ) } - return result + return { + ...result, + totalMembers: totalMembers + } }, error(err) { this.error = err.message diff --git a/plugins/bootstrap.js b/plugins/bootstrap.js index 86f2fc2..da7c3d7 100644 --- a/plugins/bootstrap.js +++ b/plugins/bootstrap.js @@ -3,7 +3,7 @@ import Tooltip from "~/node_modules/bootstrap/js/dist/tooltip" import Collapse from "~/node_modules/bootstrap/js/dist/collapse" import Alert from "~/node_modules/bootstrap/js/dist/alert" -Vue.directive("tooltip", function (el, binding) { +Vue.directive("tooltip-click", function (el, binding) { let tooltip = new Tooltip(el, { title: binding.value, html: true, @@ -17,3 +17,14 @@ Vue.directive("tooltip", function (el, binding) { }, 1000) } }) + +Vue.directive("tooltip", function (el, binding) { + if (binding.value.title != "") { + let tooltip = new Tooltip(el, { + title: binding.value.title, + html: true, + placement: binding.value.placement, + trigger: "hover" + }) + } +}) -- GitLab