Skip to content
Snippets Groups Projects
Commit 9f7700b4 authored by Pierre-Jean CHANCELLIER's avatar Pierre-Jean CHANCELLIER
Browse files

explorateur de wot

parent aba000ea
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 167 additions and 150 deletions
assets/css/style.scss
+ 2
− 2
View file @ 9f7700b4
......@@ -11,8 +11,8 @@ $body-bg: var(--background-color-primary);
$body-color: var(--text-primary-color);
// Tables
$table-bg: var(--text-primary-color);
$table-color: var(--background-color-primary);
$table-bg: var(--background-color-primary);
$table-color: var(--text-primary-color);
$table-head-bg: red;
// Breadcrumb
......
components/chart.vue → components/Graph.vue
+ 0
− 0
View file @ 9f7700b4
File moved
components/badge/Status.vue 0 → 100644
+ 36
− 0
View file @ 9f7700b4
<template>
<small>
<span class="badge badge-secondary"
:class="{
'badge-danger' : statut == 'REVOKED',
'badge-success' : statut == 'MEMBER',
'badge-info' : statut == 'NEWCOMER',
'badge-warning' : statut == 'MISSING'
}">{{ this.statut | formatStatus }}</span>
</small>
</template>
<script>
const statuses = [
'NEWCOMER',
'MISSING',
'MEMBER',
'REVOKED'
]
export default {
props: {
statut: {
type: String,
required: true,
validator: function (value) {
return statuses.indexOf(value) !== -1
}
}
}
}
</script>
<style>
</style>
\ No newline at end of file
components/certif/List.vue
+ 15
− 1
View file @ 9f7700b4
<template>
<div class="list-group">
<NuxtLink :to="'/hash/'+getNeighbor(certif).hash" class="list-group-item list-group-item-action" v-for="certif in certifs" :key="getNeighbor(certif).uid">
<NuxtLink
:to="'/hash/'+getNeighbor(certif).hash"
class="list-group-item list-group-item-action"
:class="'list-group-item-'+ $options.filters.dateStatus(certif.expires_on)"
v-for="certif in certifsTriees"
:key="getNeighbor(certif).uid">
{{ getNeighbor(certif).uid }}
<BadgeStatus :statut="getNeighbor(certif).status" />
<small class="text-muted">Expire le {{ certif.expires_on | formatDate }}</small>
</NuxtLink>
</div>
......@@ -24,6 +30,14 @@ export default {
getNeighbor(certif) {
return this.type == "recieved" ? certif.from : certif.to
}
},
computed : {
certifsTriees() {
return this.certifs.sort(
(a, b) => a.expires_on - b.expires_on
)
}
}
}
</script>
......
components/member/Card.vue 0 → 100644
+ 75
− 0
View file @ 9f7700b4
<template>
<div class="card member">
<div class="card-body">
<h2 class="card-title">
{{ hash.uid }}
<BadgeStatus :statut="hash.status" />
</h2>
<div class="card-subtitle mb-2 text-muted">{{ hash.pubkey }}</div>
<table class="table table-sm" v-if="hash.status != 'REVOKED'">
<tbody>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">Référent :</th>
<td :class="{'table-success': isReferent, 'table-danger': !isReferent}">{{ isReferent ? 'Oui' : 'Non' }}</td>
</tr>
<tr v-if="hash.status != 'NEWCOMER'">
<th scope="row">Qualité :</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 v-if="hash.status != 'NEWCOMER'">
<th scope="row">Distance :</th>
<td :class="{
'table-success': hash.distance.value.ratio >= 80,
'table-danger': hash.distance.value.ratio < 80,
}">{{ Math.round(hash.distance.value.ratio*100)/100 }}</td>
</tr>
<tr>
<th scope="row">Date limite d'adhésion :</th>
<td :class="'table-'+ $options.filters.dateStatus(hash.limitDate)">{{ hash.limitDate | formatDate }}</td>
</tr>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">Date avant de manquer de certifs :</th>
<td :class="'table-'+ $options.filters.dateStatus(hash.received_certifications.limit)">{{ hash.received_certifications.limit | formatDate }}</td>
</tr>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">Disponible pour certifier :</th>
<td :class="{
'table-success': hash.minDatePassed,
'table-danger': !hash.minDatePassed,
}">{{ hash.minDatePassed ? 'Oui' : 'Non' }} <small v-if="!hash.minDatePassed">( > {{ hash.minDate | formatDate }} )</small></td>
</tr>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">Nbre de certifs disponibles :</th>
<td :class="{
'table-success': hash.sent_certifications.length<=80,
'table-warning': hash.sent_certifications.length>80,
'table-danger': hash.sent_certifications.length>90,
}">{{ 100-hash.sent_certifications.length }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
props: {
hash: Object
},
computed: {
isReferent () {
const nb_certifs_referent = 5
return this.hash.received_certifications.certifications.length > nb_certifs_referent && this.hash.sent_certifications.length > nb_certifs_referent
}
},
}
</script>
<style lang="sass" scoped>
.member th
text-align: right
</style>
\ No newline at end of file
components/navigation/Bar.vue
+ 2
− 4
View file @ 9f7700b4
......@@ -103,10 +103,8 @@ nav.breadcrumb {
h1 {color: var(--text-primary-color);}
.list-group-item {
background: var(--background-color-primary);
&-action:not(.active):hover {background: transparent;}
.list-group-item {
&-action:not(.active) {background: transparent;}
div {
transition: left .3s ease-in-out;
......
layouts/default.vue
+ 0
− 1
View file @ 9f7700b4
......@@ -14,7 +14,6 @@ export default {
{
title: 'Développement',
items : [
{path: '/appolo',title: 'Appolo'},
{path: '/chartjs',title: 'ChartJS'},
{path: '/membres',title: 'Membres'}
]},
......
pages/appolo.vue deleted 100644 → 0
+ 0
− 112
View file @ aba000ea
<template>
<main class="content">
<h2 class="display-2 text-center mb-5">Test Appolo</h2>
<div class="row mb-4">
<div class="col-6 m-auto text-center">
<p>Cette page uilise la bibliothèque <a href="https://apollo.vuejs.org/" target="_blank">Apollo</a> pour requêter graphQL</p>
<p>Le endpoint se configure dans le fichier <code>./nuxt.config.js</code></p>
<p>Il est possible de <a href="https://apollo.vuejs.org/guide/components/query.html#query-with-gql-files" target="_blank">mettre les requêtes dans des fichiers séparés</a> et de faire <a href="https://apollo.vuejs.org/guide/apollo/pagination.html" target="_blank">de la pagination</a></p>
<label for="rech" class="form-label">Votre recherche</label>
<input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="param" autocomplete="off">
<small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
</div>
</div>
<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" class="d-block mx-auto" />
<div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
<div class="col-8 m-auto">
<div class="table-responsive">
<table class="table striped">
<thead>
<tr>
<th scope="col">UID</th>
<th scope="col" class="d-none d-xl-table-cell">PUBKEY</th>
<th scope="col" class="d-none d-sm-table-cell">STATUS</th>
</tr>
</thead>
<tbody>
<tr v-for="member in idSearch.ids" :key="member.uid"
@click="redirect('/hash/' + member.hash)"
:class="{
'table-danger' : member.status == 'REVOKED',
'table-success' : member.status == 'MEMBER',
'table-info' : member.status == 'NEWCOMER',
'table-warning' : member.status == 'MISSING',
}">
<th scope="row">{{ member.uid }}</th>
<td class="d-none d-xl-table-cell">{{ member.pubkey }}</td>
<td class="d-none d-sm-table-cell">{{ member.status }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</template>
<script>
import gql from 'graphql-tag'
export default {
data() {
// Variables locales
return {
// Fil d'ariane
breadcrumb: [
{
text: 'Accueil',
to: '/'
},
{
text: 'Appolo',
active: true
}
],
// Requête graphQL
param: '',
}
},
// Fonctions locales
methods: {
redirect(path) {
this.$router.push({ path: path })
}
},
apollo: {
idSearch : {
query: gql`
query Search($hint: String) {
idSearch(with: {hint: $hint}) {
ids {
pubkey
uid
status
hash
}
}
} `,
variables(){return {hint:this.param}},
skip() {return this.param.length < 3}
}
},
mounted () {
// Mise à jour du fil d'ariane au chargement
$nuxt.$emit('changeRoute',this.breadcrumb)
}
}
</script>
<style lang="sass" scoped>
// CSS Lié au composant
.table.striped tbody
color: var(--dark)
tr
opacity: .9
cursor: pointer
&:nth-child(2n+1)
opacity: .7
&:hover
opacity: 1
</style>
\ No newline at end of file
pages/chartjs.vue
+ 2
− 2
View file @ 9f7700b4
......@@ -6,13 +6,13 @@
<option v-for="type in allTypes" :key="type">{{ type }}</option>
</select>
<button @click="fillData()" class="btn btn-primary mb-5">Randomize</button>
<LazyChart id="monGraph" :type="chartType" :data="data" :options="options" />
<LazyGraph id="monGraph" :type="chartType" :data="data" :options="options" />
</div>
</main>
</template>
<script>
import {chartTypes} from "@/components/chart.vue"
import {chartTypes} from "~/components/Graph.vue"
export default {
data () {
......
pages/hash/_hash.vue
+ 3
− 23
View file @ 9f7700b4
......@@ -4,20 +4,7 @@
<div v-if="!$apollo.queries.idFromHash.loading">
<div class="row">
<div class="col-6 mx-auto mt-3">
<div class="card">
<div class="card-body">
<h2 class="card-title">{{ idFromHash.uid }} <small><span class="badge badge-secondary">{{ idFromHash.status }}</span></small></h2>
<div v-if="idFromHash.status != 'REVOKED'">
<div class="card-subtitle mb-2 text-muted">{{ idFromHash.pubkey }}</div>
<div> Référent : {{ isReferent ? 'Oui' : 'Non' }}</div>
<div> Qualité : {{ Math.round(idFromHash.quality.ratio*100)/100 }}</div>
<div> Date limite d'adhésion : {{ idFromHash.limitDate | formatDate }}</div>
<div v-if="idFromHash.status != 'NEWCOMER'"> Date avant de manquer de certifs : {{ idFromHash.received_certifications.limit | formatDate }}</div>
<div v-if="idFromHash.status != 'NEWCOMER'"> Pourra certifier à partir du : {{ idFromHash.minDatePassed || 'Déjà dispo' }}</div>
<div> Nbre de certifs disponibles : {{ 100-idFromHash.sent_certifications.length }}</div>
</div>
</div>
</div>
<MemberCard :hash="idFromHash" />
</div>
</div>
<div class="row mt-3" v-if="idFromHash.status != 'REVOKED' && idFromHash.status != 'NEWCOMER'">
......@@ -58,8 +45,7 @@ export default {
};
},
// Fonctions locales
methods: {
},
methods: {},
apollo: {
idFromHash: {
query: gql`
......@@ -113,12 +99,6 @@ export default {
},
},
},
computed: {
isReferent () {
const nb_certifs_referent = 5
return this.idFromHash.received_certifications.certifications.length > nb_certifs_referent && this.idFromHash.sent_certifications.length > nb_certifs_referent
}
},
watch: {
idFromHash: {
handler(n,o) {
......@@ -131,5 +111,5 @@ export default {
</script>
<style lang="sass" scoped>
// CSS Lié au composant
</style>
pages/membres.vue
+ 3
− 3
View file @ 9f7700b4
......@@ -17,7 +17,7 @@
<tr>
<th scope="col">UID</th>
<th scope="col" class="d-none d-xl-table-cell">PUBKEY</th>
<th scope="col" class="d-none d-sm-table-cell">STATUS</th>
<th scope="col" class="d-none d-sm-table-cell">STATUT</th>
</tr>
</thead>
<tbody>
......@@ -26,12 +26,12 @@
:class="{
'table-danger' : member.status == 'REVOKED',
'table-success' : member.status == 'MEMBER',
'table-info' : member.status == 'NEWCOMER',
'table-warning' : member.status == 'MISSING',
'table-info' : member.status == 'NEWCOMER'
}">
<th scope="row">{{ member.uid }}</th>
<td class="d-none d-xl-table-cell">{{ member.pubkey }}</td>
<td class="d-none d-sm-table-cell">{{ member.status }}</td>
<td class="d-none d-sm-table-cell">{{ member.status | formatStatus }}</td>
</tr>
</tbody>
</table>
......
plugins/filters.js
+ 29
− 2
View file @ 9f7700b4
......@@ -4,6 +4,33 @@ import 'dayjs/locale/fr'
dayjs.locale('fr')
Vue.filter('formatDate', (value) => {
return dayjs(value*1000).format('D MMMM YYYY')
Vue.filter('formatDate', (val) => {
return dayjs(val*1000).format('D MMMM YYYY')
})
Vue.filter('dateStatus', (val) => {
const diff = val - dayjs().unix()
switch (true) {
case diff<2592000:
return 'danger'
case diff<5184000:
return 'warning'
case diff>=5184000:
return 'success'
}
})
Vue.filter('formatStatus', (val) => {
switch (val) {
case 'NEWCOMER':
return 'Futur membre'
case 'MISSING':
return 'Adhésion perdue'
case 'MEMBER':
return 'Membre'
case 'REVOKED':
return 'Membre revoqué'
default:
return 'N/A'
}
})
\ No newline at end of file
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