maj
This commit is contained in:
@@ -2,37 +2,37 @@
|
||||
|
||||
<!-- Bouton connexion dans le header (utilisateur non connecté) -->
|
||||
<div class="auth-header-btn" if={ !props.user }>
|
||||
<button class="btn btn-auth" onclick={ openModal }>
|
||||
<span class="auth-icon">👤</span> Connexion
|
||||
<button class="btn btn-auth" onclick={ ouvrirModale }>
|
||||
<span class="auth-icon"></span> Connexion
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Email + bouton déconnexion dans le header (utilisateur connecté) -->
|
||||
<div class="auth-user-info" if={ props.user }>
|
||||
<span class="auth-email">{ props.user.email }</span>
|
||||
<button class="btn btn-auth-logout" onclick={ handleLogout }>Déconnexion</button>
|
||||
<button class="btn btn-auth-logout" onclick={ seDeconnecter }>Déconnexion</button>
|
||||
</div>
|
||||
|
||||
<!-- Modale d'authentification -->
|
||||
<div class="auth-modal-overlay" if={ state.open } onclick={ closeOnOverlay }>
|
||||
<div class="auth-modal-overlay" if={ state.visible } onclick={ cliquerFond }>
|
||||
<div class="auth-modal">
|
||||
|
||||
<button class="auth-modal-close" onclick={ closeModal }>✕</button>
|
||||
<button class="auth-modal-close" onclick={ fermerModale }>✕</button>
|
||||
|
||||
<h2 class="auth-modal-title">{ state.titre }</h2>
|
||||
|
||||
<!-- Onglets Connexion / Inscription -->
|
||||
<div class="auth-tabs">
|
||||
<button class={ state.classBtnLogin } onclick={ switchToLogin }>
|
||||
<button class={ state.classBtnConnexion } onclick={ afficherConnexion }>
|
||||
Connexion
|
||||
</button>
|
||||
<button class={ state.classBtnRegister } onclick={ switchToRegister }>
|
||||
<button class={ state.classBtnInscription } onclick={ afficherInscription }>
|
||||
Inscription
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire -->
|
||||
<form onsubmit={ handleSubmit } class="auth-form">
|
||||
<form onsubmit={ validerFormulaire } class="auth-form">
|
||||
|
||||
<div class="auth-field">
|
||||
<label>Adresse e-mail</label>
|
||||
@@ -56,11 +56,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Message d'erreur -->
|
||||
<div class="auth-error" if={ state.error }>
|
||||
{ state.error }
|
||||
<div class="auth-error" if={ state.erreur }>
|
||||
{ state.erreur }
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary auth-submit" disabled={ state.loading }>
|
||||
<button type="submit" class="btn btn-primary auth-submit" disabled={ state.chargement }>
|
||||
{ state.labelBouton }
|
||||
</button>
|
||||
|
||||
@@ -72,93 +72,94 @@
|
||||
export default {
|
||||
|
||||
state: {
|
||||
open: false,
|
||||
mode: 'login',
|
||||
loading: false,
|
||||
error: null,
|
||||
titre: 'Connexion',
|
||||
labelBouton: 'Se connecter',
|
||||
classBtnLogin: 'auth-tab active',
|
||||
classBtnRegister: 'auth-tab'
|
||||
visible: false,
|
||||
mode: 'connexion',
|
||||
chargement: false,
|
||||
erreur: null,
|
||||
titre: 'Connexion',
|
||||
labelBouton: 'Se connecter',
|
||||
classBtnConnexion: 'auth-tab active',
|
||||
classBtnInscription: 'auth-tab'
|
||||
},
|
||||
|
||||
openModal() {
|
||||
this.update({ open: true, error: null })
|
||||
ouvrirModale() {
|
||||
this.update({ visible: true, erreur: null })
|
||||
},
|
||||
|
||||
closeModal() {
|
||||
this.update({ open: false, error: null })
|
||||
fermerModale() {
|
||||
this.update({ visible: false, erreur: null })
|
||||
},
|
||||
|
||||
closeOnOverlay(e) {
|
||||
// Fermer si l'utilisateur clique en dehors de la modale
|
||||
cliquerFond(e) {
|
||||
if (e.target === e.currentTarget) {
|
||||
this.closeModal()
|
||||
this.fermerModale()
|
||||
}
|
||||
},
|
||||
|
||||
switchToLogin() {
|
||||
afficherConnexion() {
|
||||
this.update({
|
||||
mode: 'login',
|
||||
error: null,
|
||||
titre: 'Connexion',
|
||||
labelBouton: 'Se connecter',
|
||||
classBtnLogin: 'auth-tab active',
|
||||
classBtnRegister: 'auth-tab'
|
||||
mode: 'connexion',
|
||||
erreur: null,
|
||||
titre: 'Connexion',
|
||||
labelBouton: 'Se connecter',
|
||||
classBtnConnexion: 'auth-tab active',
|
||||
classBtnInscription: 'auth-tab'
|
||||
})
|
||||
},
|
||||
|
||||
switchToRegister() {
|
||||
afficherInscription() {
|
||||
this.update({
|
||||
mode: 'register',
|
||||
error: null,
|
||||
titre: 'Créer un compte',
|
||||
labelBouton: 'Créer le compte',
|
||||
classBtnLogin: 'auth-tab',
|
||||
classBtnRegister: 'auth-tab active'
|
||||
mode: 'inscription',
|
||||
erreur: null,
|
||||
titre: 'Créer un compte',
|
||||
labelBouton: 'Créer le compte',
|
||||
classBtnConnexion: 'auth-tab',
|
||||
classBtnInscription: 'auth-tab active'
|
||||
})
|
||||
},
|
||||
|
||||
async handleSubmit(e) {
|
||||
async validerFormulaire(e) {
|
||||
e.preventDefault()
|
||||
|
||||
var email = e.target.email.value.trim()
|
||||
var password = e.target.password.value
|
||||
var services = window.firebaseServices
|
||||
var email = e.target.email.value.trim()
|
||||
var password = e.target.password.value
|
||||
var services = window.firebaseServices
|
||||
|
||||
this.update({ loading: true, error: null })
|
||||
this.update({ chargement: true, erreur: null })
|
||||
|
||||
try {
|
||||
|
||||
if (this.state.mode === 'register') {
|
||||
if (this.state.mode === 'inscription') {
|
||||
await services.createAccount(email, password)
|
||||
} else {
|
||||
await services.login(email, password)
|
||||
}
|
||||
|
||||
this.update({ open: false, loading: false })
|
||||
this.update({ visible: false, chargement: false })
|
||||
this.props.onauth && this.props.onauth()
|
||||
|
||||
} catch (err) {
|
||||
|
||||
var message = 'Une erreur est survenue.'
|
||||
var messageErreur = 'Une erreur est survenue.'
|
||||
|
||||
if (err.code === 'auth/email-already-in-use') {
|
||||
message = 'Cet e-mail est déjà utilisé.'
|
||||
messageErreur = 'Cet e-mail est déjà utilisé.'
|
||||
} else if (err.code === 'auth/invalid-email') {
|
||||
message = 'Adresse e-mail invalide.'
|
||||
messageErreur = 'Adresse e-mail invalide.'
|
||||
} else if (err.code === 'auth/wrong-password' || err.code === 'auth/invalid-credential') {
|
||||
message = 'E-mail ou mot de passe incorrect.'
|
||||
messageErreur = 'E-mail ou mot de passe incorrect.'
|
||||
} else if (err.code === 'auth/weak-password') {
|
||||
message = 'Le mot de passe doit faire au moins 6 caractères.'
|
||||
messageErreur = 'Le mot de passe doit faire au moins 6 caractères.'
|
||||
} else if (err.code === 'auth/user-not-found') {
|
||||
message = 'Aucun compte trouvé avec cet e-mail.'
|
||||
messageErreur = 'Aucun compte trouvé avec cet e-mail.'
|
||||
}
|
||||
|
||||
this.update({ loading: false, error: message })
|
||||
this.update({ chargement: false, erreur: messageErreur })
|
||||
}
|
||||
},
|
||||
|
||||
async handleLogout() {
|
||||
async seDeconnecter() {
|
||||
try {
|
||||
await window.firebaseServices.logout()
|
||||
this.props.onlogout && this.props.onlogout()
|
||||
|
||||
@@ -141,257 +141,288 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- ===================== GRAPHIQUES CHARTS.CSS ===================== -->
|
||||
<!-- ==================== GRAPHIQUES CHARTS.CSS ==================== -->
|
||||
|
||||
<h2 class="charts-heading">Profil des admis</h2>
|
||||
|
||||
<div class="charts-section">
|
||||
<div class="chart-wrapper">
|
||||
<h3>Répartition par type de bac</h3>
|
||||
<div id="chart-bac" ref="chartBac"></div>
|
||||
<div id="chart-bac" ref="graphBac"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper">
|
||||
<h3>Mentions au bac des admis</h3>
|
||||
<div id="chart-mentions" ref="chartMentions"></div>
|
||||
<div id="chart-mentions" ref="graphMentions"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper chart-full">
|
||||
<h3>Profil sociologique</h3>
|
||||
<div id="chart-profil" ref="chartProfil"></div>
|
||||
<div id="chart-profil" ref="graphProfil"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== ÉVOLUTION HISTORIQUE ===================== -->
|
||||
<!-- ==================== ÉVOLUTION HISTORIQUE ==================== -->
|
||||
|
||||
<h2 class="charts-heading">Évolution depuis 2020</h2>
|
||||
|
||||
<div if={ state.loadingHistory } class="message">
|
||||
<div if={ state.chargementHistorique } class="message">
|
||||
Chargement de l'historique...
|
||||
</div>
|
||||
|
||||
<div if={ !state.loadingHistory && state.history.length === 0 } class="message">
|
||||
<div if={ !state.chargementHistorique && state.historique.length === 0 } class="message">
|
||||
Aucune donnée historique disponible pour cette formation.
|
||||
</div>
|
||||
|
||||
<div class="charts-section" if={ state.history.length > 0 }>
|
||||
<div class="charts-section" if={ state.historique.length > 0 }>
|
||||
<div class="chart-wrapper">
|
||||
<h3>Taux d'accès par année</h3>
|
||||
<div id="chart-evolution-taux" ref="chartTaux"></div>
|
||||
<div id="chart-evolution-taux" ref="graphTaux"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper">
|
||||
<h3>Nombre de candidats et admis</h3>
|
||||
<div id="chart-evolution-candidats" ref="chartCandidats"></div>
|
||||
<div id="chart-evolution-candidats" ref="graphCandidats"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper chart-full">
|
||||
<h3>Évolution des mentions au bac</h3>
|
||||
<div ref="chartMentionsHist"></div>
|
||||
<div ref="graphMentionsHist"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick={ goBack } class="btn-retour">Retour à la liste</button>
|
||||
<button onclick={ retourListe } class="btn-retour">Retour à la liste</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
state: {
|
||||
history: [],
|
||||
loadingHistory: false
|
||||
},
|
||||
|
||||
safe(val) {
|
||||
if (val === null || val === undefined || isNaN(val)) return 0
|
||||
var v = val / 100
|
||||
if (v > 1) return 1
|
||||
if (v < 0) return 0
|
||||
return Math.round(v * 100) / 100
|
||||
state: {
|
||||
historique: [],
|
||||
chargementHistorique: false
|
||||
},
|
||||
|
||||
onMounted() {
|
||||
this.renderCharts()
|
||||
this.loadHistory()
|
||||
this.afficherGraphiques()
|
||||
this.chargerHistorique()
|
||||
},
|
||||
|
||||
onUpdated() {
|
||||
this.renderCharts()
|
||||
if (this.state.history.length > 0) {
|
||||
this.renderHistoryCharts()
|
||||
this.afficherGraphiques()
|
||||
|
||||
if (this.state.historique.length > 0) {
|
||||
this.afficherGraphiquesHistoriques()
|
||||
}
|
||||
},
|
||||
|
||||
// Retour à la liste des résultats
|
||||
goBack() {
|
||||
retourListe() {
|
||||
this.props.onback()
|
||||
},
|
||||
|
||||
renderCharts() {
|
||||
// Limiter une valeur entre 0 et 1 pour Charts.css
|
||||
limiterValeur(val) {
|
||||
if (val === null || val === undefined || isNaN(val)) {
|
||||
return 0
|
||||
}
|
||||
|
||||
var v = val / 100
|
||||
|
||||
if (v > 1) {
|
||||
return 1
|
||||
}
|
||||
if (v < 0) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return Math.round(v * 100) / 100
|
||||
},
|
||||
|
||||
afficherGraphiques() {
|
||||
var f = this.props.formation
|
||||
if (!f) return
|
||||
if (!f) {
|
||||
return
|
||||
}
|
||||
|
||||
var chartBac = this.$('[ref="chartBac"]')
|
||||
var chartMentions = this.$('[ref="chartMentions"]')
|
||||
var chartProfil = this.$('[ref="chartProfil"]')
|
||||
var graphBac = this.$('[ref="graphBac"]')
|
||||
var graphMentions = this.$('[ref="graphMentions"]')
|
||||
var graphProfil = this.$('[ref="graphProfil"]')
|
||||
|
||||
if (chartBac) {
|
||||
chartBac.innerHTML = this.buildColumnChart([
|
||||
{ label: 'Général', value: f.pctGeneral, color: '#3d7fff' },
|
||||
{ label: 'Techno', value: f.pctTechno, color: '#f59e0b' },
|
||||
{ label: 'Pro', value: f.pctPro, color: '#10b981' }
|
||||
if (graphBac) {
|
||||
graphBac.innerHTML = this.construireGraphiqueColonnes([
|
||||
{ label: 'Général', valeur: f.pctGeneral, couleur: '#3d7fff' },
|
||||
{ label: 'Techno', valeur: f.pctTechno, couleur: '#f59e0b' },
|
||||
{ label: 'Pro', valeur: f.pctPro, couleur: '#10b981' }
|
||||
])
|
||||
}
|
||||
|
||||
if (chartMentions) {
|
||||
chartMentions.innerHTML = this.buildColumnChart([
|
||||
{ label: 'Sans', value: f.pctSansMention, color: '#94a3b8' },
|
||||
{ label: 'AB', value: f.pctAB, color: '#60a5fa' },
|
||||
{ label: 'Bien', value: f.pctB, color: '#34d399' },
|
||||
{ label: 'TB', value: f.pctTB, color: '#fbbf24' },
|
||||
{ label: 'TB Féli.', value: f.pctTBF, color: '#f472b6' }
|
||||
if (graphMentions) {
|
||||
graphMentions.innerHTML = this.construireGraphiqueColonnes([
|
||||
{ label: 'Sans', valeur: f.pctSansMention, couleur: '#94a3b8' },
|
||||
{ label: 'AB', valeur: f.pctAB, couleur: '#60a5fa' },
|
||||
{ label: 'Bien', valeur: f.pctB, couleur: '#34d399' },
|
||||
{ label: 'TB', valeur: f.pctTB, couleur: '#fbbf24' },
|
||||
{ label: 'TB Féli.', valeur: f.pctTBF, couleur: '#f472b6' }
|
||||
])
|
||||
}
|
||||
|
||||
if (chartProfil) {
|
||||
chartProfil.innerHTML = this.buildBarChart([
|
||||
{ label: 'Femmes', value: f.pctFemmes, color: '#a78bfa' },
|
||||
{ label: 'Boursiers', value: f.pctBoursiers, color: '#fb923c' },
|
||||
{ label: 'Néo-bac', value: f.pctNeoBac, color: '#2dd4bf' }
|
||||
if (graphProfil) {
|
||||
graphProfil.innerHTML = this.construireGraphiqueBarres([
|
||||
{ label: 'Femmes', valeur: f.pctFemmes, couleur: '#a78bfa' },
|
||||
{ label: 'Boursiers', valeur: f.pctBoursiers, couleur: '#fb923c' },
|
||||
{ label: 'Néo-bac', valeur: f.pctNeoBac, couleur: '#2dd4bf' }
|
||||
])
|
||||
}
|
||||
},
|
||||
|
||||
async loadHistory() {
|
||||
async chargerHistorique() {
|
||||
var f = this.props.formation
|
||||
if (!f) return
|
||||
if (!f) {
|
||||
return
|
||||
}
|
||||
|
||||
// Extraire le cod_uai de l'id (format: codUai-nomFormation)
|
||||
var codUai = f.id.split('-')[0]
|
||||
|
||||
if (!codUai || !window.fetchFormationHistory) return
|
||||
if (!codUai || !window.chargerHistoriqueFormation) {
|
||||
return
|
||||
}
|
||||
|
||||
this.update({ loadingHistory: true })
|
||||
this.update({ chargementHistorique: true })
|
||||
|
||||
try {
|
||||
var history = await window.fetchFormationHistory(codUai, f.nom)
|
||||
this.update({ history: history, loadingHistory: false })
|
||||
var historique = await window.chargerHistoriqueFormation(codUai, f.nom)
|
||||
this.update({ historique: historique, chargementHistorique: false })
|
||||
} catch (e) {
|
||||
console.error('Erreur historique:', e)
|
||||
this.update({ history: [], loadingHistory: false })
|
||||
console.error('Erreur chargement historique :', e)
|
||||
this.update({ historique: [], chargementHistorique: false })
|
||||
}
|
||||
},
|
||||
|
||||
renderHistoryCharts() {
|
||||
var hist = this.state.history
|
||||
if (!hist || hist.length === 0) return
|
||||
|
||||
var chartTaux = this.$('[ref="chartTaux"]')
|
||||
var chartCandidats = this.$('[ref="chartCandidats"]')
|
||||
var chartMentionsHist = this.$('[ref="chartMentionsHist"]')
|
||||
|
||||
// Graphique : taux d'accès par année
|
||||
if (chartTaux) {
|
||||
var items = []
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
items.push({
|
||||
label: '' + hist[i].annee,
|
||||
value: hist[i].tauxAcces,
|
||||
color: '#1a936f'
|
||||
})
|
||||
}
|
||||
chartTaux.innerHTML = this.buildColumnChart(items)
|
||||
afficherGraphiquesHistoriques() {
|
||||
var historique = this.state.historique
|
||||
if (!historique || historique.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// Graphique : candidats vs admis (normalisé sur le max)
|
||||
if (chartCandidats) {
|
||||
var maxCandidats = 0
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
if (hist[i].candidats > maxCandidats) maxCandidats = hist[i].candidats
|
||||
var graphTaux = this.$('[ref="graphTaux"]')
|
||||
var graphCandidats = this.$('[ref="graphCandidats"]')
|
||||
var graphMentionsHist = this.$('[ref="graphMentionsHist"]')
|
||||
|
||||
// Graphique : taux d'accès par année
|
||||
if (graphTaux) {
|
||||
var elementsAnnee = []
|
||||
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
elementsAnnee.push({
|
||||
label: '' + historique[i].annee,
|
||||
valeur: historique[i].tauxAcces,
|
||||
couleur: '#1a936f'
|
||||
})
|
||||
}
|
||||
|
||||
var rows = ''
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
var h = hist[i]
|
||||
var sizeCand = 0
|
||||
var sizeAdmis = 0
|
||||
graphTaux.innerHTML = this.construireGraphiqueColonnes(elementsAnnee)
|
||||
}
|
||||
|
||||
// Graphique : candidats vs admis
|
||||
if (graphCandidats) {
|
||||
var maxCandidats = 0
|
||||
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
if (historique[i].candidats > maxCandidats) {
|
||||
maxCandidats = historique[i].candidats
|
||||
}
|
||||
}
|
||||
|
||||
var lignes = ''
|
||||
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
var h = historique[i]
|
||||
var tailleCand = 0
|
||||
var tailleAdmis = 0
|
||||
|
||||
if (maxCandidats > 0) {
|
||||
sizeCand = Math.round((h.candidats / maxCandidats) * 100) / 100
|
||||
sizeAdmis = Math.round((h.admis / maxCandidats) * 100) / 100
|
||||
tailleCand = Math.round((h.candidats / maxCandidats) * 100) / 100
|
||||
tailleAdmis = Math.round((h.admis / maxCandidats) * 100) / 100
|
||||
}
|
||||
|
||||
rows += '<tr>'
|
||||
rows += '<th scope="row">' + h.annee + '</th>'
|
||||
rows += '<td style="--size: ' + sizeCand + '; --color: #2a5298;">'
|
||||
rows += '<span class="data">' + h.candidats + '</span></td>'
|
||||
rows += '<td style="--size: ' + sizeAdmis + '; --color: #1a936f;">'
|
||||
rows += '<span class="data">' + h.admis + '</span></td>'
|
||||
rows += '</tr>'
|
||||
lignes += '<tr>'
|
||||
lignes += '<th scope="row">' + h.annee + '</th>'
|
||||
lignes += '<td style="--size: ' + tailleCand + '; --color: #2a5298;">'
|
||||
lignes += '<span class="data">' + h.candidats + '</span></td>'
|
||||
lignes += '<td style="--size: ' + tailleAdmis + '; --color: #1a936f;">'
|
||||
lignes += '<span class="data">' + h.admis + '</span></td>'
|
||||
lignes += '</tr>'
|
||||
}
|
||||
|
||||
chartCandidats.innerHTML = '<table class="charts-css column multiple show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
|
||||
graphCandidats.innerHTML = '<table class="charts-css column multiple show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
|
||||
+ '<thead><tr><th scope="col">Année</th><th scope="col">Candidats</th><th scope="col">Admis</th></tr></thead>'
|
||||
+ '<tbody>' + rows + '</tbody></table>'
|
||||
+ '<tbody>' + lignes + '</tbody></table>'
|
||||
}
|
||||
|
||||
// Tableau : évolution des mentions
|
||||
if (chartMentionsHist) {
|
||||
var table = '<table class="detail-table">'
|
||||
table += '<thead><tr><th>Année</th><th>Sans mention</th><th>AB</th><th>Bien</th><th>TB</th><th>TB Féli.</th></tr></thead>'
|
||||
table += '<tbody>'
|
||||
if (graphMentionsHist) {
|
||||
var tableau = '<table class="detail-table">'
|
||||
tableau += '<thead><tr><th>Année</th><th>Sans mention</th><th>AB</th><th>Bien</th><th>TB</th><th>TB Féli.</th></tr></thead>'
|
||||
tableau += '<tbody>'
|
||||
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
var h = hist[i]
|
||||
table += '<tr>'
|
||||
table += '<td><b>' + h.annee + '</b></td>'
|
||||
table += '<td>' + h.pctSansMention + '%</td>'
|
||||
table += '<td>' + h.pctAB + '%</td>'
|
||||
table += '<td>' + h.pctB + '%</td>'
|
||||
table += '<td>' + h.pctTB + '%</td>'
|
||||
table += '<td>' + h.pctTBF + '%</td>'
|
||||
table += '</tr>'
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
var h = historique[i]
|
||||
tableau += '<tr>'
|
||||
tableau += '<td><b>' + h.annee + '</b></td>'
|
||||
tableau += '<td>' + h.pctSansMention + '%</td>'
|
||||
tableau += '<td>' + h.pctAB + '%</td>'
|
||||
tableau += '<td>' + h.pctB + '%</td>'
|
||||
tableau += '<td>' + h.pctTB + '%</td>'
|
||||
tableau += '<td>' + h.pctTBF + '%</td>'
|
||||
tableau += '</tr>'
|
||||
}
|
||||
|
||||
table += '</tbody></table>'
|
||||
chartMentionsHist.innerHTML = table
|
||||
tableau += '</tbody></table>'
|
||||
graphMentionsHist.innerHTML = tableau
|
||||
}
|
||||
},
|
||||
|
||||
buildColumnChart(items) {
|
||||
var rows = ''
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i]
|
||||
var val = this.safe(item.value)
|
||||
var display = item.value || 0
|
||||
rows += '<tr>'
|
||||
rows += '<th scope="row">' + item.label + '</th>'
|
||||
rows += '<td style="--size: ' + val + '; --color: ' + item.color + ';">'
|
||||
rows += '<span class="data">' + display + '%</span>'
|
||||
rows += '</td></tr>'
|
||||
construireGraphiqueColonnes(elements) {
|
||||
var lignes = ''
|
||||
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var el = elements[i]
|
||||
var taille = this.limiterValeur(el.valeur)
|
||||
var affiche = el.valeur || 0
|
||||
|
||||
lignes += '<tr>'
|
||||
lignes += '<th scope="row">' + el.label + '</th>'
|
||||
lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">'
|
||||
lignes += '<span class="data">' + affiche + '%</span>'
|
||||
lignes += '</td></tr>'
|
||||
}
|
||||
|
||||
return '<table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
|
||||
+ '<thead><tr><th scope="col">Type</th><th scope="col">%</th></tr></thead>'
|
||||
+ '<tbody>' + rows + '</tbody></table>'
|
||||
+ '<tbody>' + lignes + '</tbody></table>'
|
||||
},
|
||||
|
||||
buildBarChart(items) {
|
||||
var rows = ''
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i]
|
||||
var val = this.safe(item.value)
|
||||
var display = item.value || 0
|
||||
rows += '<tr>'
|
||||
rows += '<th scope="row">' + item.label + '</th>'
|
||||
rows += '<td style="--size: ' + val + '; --color: ' + item.color + ';">'
|
||||
rows += '<span class="data">' + display + '%</span>'
|
||||
rows += '</td></tr>'
|
||||
construireGraphiqueBarres(elements) {
|
||||
var lignes = ''
|
||||
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var el = elements[i]
|
||||
var taille = this.limiterValeur(el.valeur)
|
||||
var affiche = el.valeur || 0
|
||||
|
||||
lignes += '<tr>'
|
||||
lignes += '<th scope="row">' + el.label + '</th>'
|
||||
lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">'
|
||||
lignes += '<span class="data">' + affiche + '%</span>'
|
||||
lignes += '</td></tr>'
|
||||
}
|
||||
|
||||
return '<table class="charts-css bar show-labels show-primary-axis show-4-secondary-axes data-spacing-14">'
|
||||
+ '<thead><tr><th scope="col">Catégorie</th><th scope="col">%</th></tr></thead>'
|
||||
+ '<tbody>' + rows + '</tbody></table>'
|
||||
+ '<tbody>' + lignes + '</tbody></table>'
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</detail-view>
|
||||
|
||||
@@ -1,112 +1,120 @@
|
||||
<map-view>
|
||||
<div class="map-box">
|
||||
<h3>Carte des formations</h3>
|
||||
<div class="map" ref="map"></div>
|
||||
<div class="map" ref="carte"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onMounted() {
|
||||
var mapElement = this.$('div[ref="map"]')
|
||||
|
||||
this.map = L.map(mapElement).setView([46.8, 2.5], 6)
|
||||
onMounted() {
|
||||
var divCarte = this.$('div[ref="carte"]')
|
||||
|
||||
this.carte = L.map(divCarte).setView([46.8, 2.5], 6)
|
||||
this.groupeMarqueurs = L.layerGroup().addTo(this.carte)
|
||||
this.marqueursIndex = {}
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
}).addTo(this.map)
|
||||
}).addTo(this.carte)
|
||||
|
||||
this.markersLayer = L.layerGroup().addTo(this.map)
|
||||
this.markersById = {}
|
||||
this.refreshMarkers()
|
||||
this.afficherMarqueurs()
|
||||
|
||||
var self = this
|
||||
var composant = this
|
||||
|
||||
setTimeout(function() {
|
||||
if (self.map) self.map.invalidateSize()
|
||||
if (composant.carte) {
|
||||
composant.carte.invalidateSize()
|
||||
}
|
||||
}, 200)
|
||||
|
||||
setTimeout(function() {
|
||||
if (self.map) self.map.invalidateSize()
|
||||
if (composant.carte) {
|
||||
composant.carte.invalidateSize()
|
||||
}
|
||||
}, 500)
|
||||
|
||||
window.mapFocus = function(id) {
|
||||
self.focusFormation(id)
|
||||
composant.centrerSurFormation(id)
|
||||
}
|
||||
},
|
||||
|
||||
onUpdated() {
|
||||
this.refreshMarkers()
|
||||
this.afficherMarqueurs()
|
||||
|
||||
var self = this
|
||||
var composant = this
|
||||
|
||||
if (this.map) {
|
||||
if (this.carte) {
|
||||
setTimeout(function() {
|
||||
self.map.invalidateSize()
|
||||
composant.carte.invalidateSize()
|
||||
}, 100)
|
||||
|
||||
setTimeout(function() {
|
||||
self.map.invalidateSize()
|
||||
composant.carte.invalidateSize()
|
||||
}, 300)
|
||||
}
|
||||
},
|
||||
|
||||
onBeforeUnmount() {
|
||||
if (this.map) {
|
||||
this.map.remove()
|
||||
this.map = null
|
||||
if (this.carte) {
|
||||
this.carte.remove()
|
||||
this.carte = null
|
||||
}
|
||||
window.mapFocus = null
|
||||
},
|
||||
|
||||
refreshMarkers() {
|
||||
if (!this.map || !this.markersLayer) {
|
||||
afficherMarqueurs() {
|
||||
if (!this.carte || !this.groupeMarqueurs) {
|
||||
return
|
||||
}
|
||||
|
||||
this.markersLayer.clearLayers()
|
||||
this.markersById = {}
|
||||
this.groupeMarqueurs.clearLayers()
|
||||
this.marqueursIndex = {}
|
||||
|
||||
var points = []
|
||||
var results = this.props.results || []
|
||||
var coordonnees = []
|
||||
var formations = this.props.results || []
|
||||
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
var f = results[i]
|
||||
for (var i = 0; i < formations.length; i++) {
|
||||
var f = formations[i]
|
||||
|
||||
if (f.latitude != null && f.longitude != null) {
|
||||
var marker = L.marker([f.latitude, f.longitude])
|
||||
marker.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
|
||||
marker.addTo(this.markersLayer)
|
||||
var marqueur = L.marker([f.latitude, f.longitude])
|
||||
marqueur.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
|
||||
marqueur.addTo(this.groupeMarqueurs)
|
||||
|
||||
this.markersById[f.id] = marker
|
||||
points.push([f.latitude, f.longitude])
|
||||
this.marqueursIndex[f.id] = marqueur
|
||||
coordonnees.push([f.latitude, f.longitude])
|
||||
}
|
||||
}
|
||||
|
||||
if (points.length > 0) {
|
||||
this.map.fitBounds(points, { padding: [20, 20] })
|
||||
if (coordonnees.length > 0) {
|
||||
this.carte.fitBounds(coordonnees, { padding: [20, 20] })
|
||||
} else {
|
||||
this.map.setView([46.8, 2.5], 6)
|
||||
this.carte.setView([46.8, 2.5], 6)
|
||||
}
|
||||
},
|
||||
|
||||
focusFormation(id) {
|
||||
var marker = this.markersById[id]
|
||||
centrerSurFormation(id) {
|
||||
var marqueur = this.marqueursIndex[id]
|
||||
|
||||
if (marker && this.map) {
|
||||
var mapEl = this.$('div[ref="map"]')
|
||||
if (mapEl) {
|
||||
mapEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
if (marqueur && this.carte) {
|
||||
var divCarte = this.$('div[ref="carte"]')
|
||||
|
||||
if (divCarte) {
|
||||
divCarte.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
|
||||
var self = this
|
||||
var composant = this
|
||||
|
||||
setTimeout(function() {
|
||||
self.map.invalidateSize()
|
||||
self.map.setView(marker.getLatLng(), 13, { animate: true })
|
||||
marker.openPopup()
|
||||
composant.carte.invalidateSize()
|
||||
composant.carte.setView(marqueur.getLatLng(), 13, { animate: true })
|
||||
marqueur.openPopup()
|
||||
}, 400)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</map-view>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<result-list>
|
||||
<div class="results">
|
||||
|
||||
<div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
|
||||
Aucun résultat trouvé
|
||||
</div>
|
||||
@@ -8,26 +9,41 @@
|
||||
Chargement...
|
||||
</div>
|
||||
|
||||
<div each={ (f, i) in props.results } key={ f.id } class="card">
|
||||
<h3>{ f.nom }</h3>
|
||||
<p><b>Établissement :</b> { f.etablissement }</p>
|
||||
<p><b>Ville :</b> { f.ville } ({ f.departement })</p>
|
||||
<p><b>Filière :</b> { f.filiere }</p>
|
||||
<p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
|
||||
<div each={ (formation, index) in props.results } key={ formation.id } class="card">
|
||||
<h3>{ formation.nom }</h3>
|
||||
<p><b>Établissement :</b> { formation.etablissement }</p>
|
||||
<p><b>Ville :</b> { formation.ville } ({ formation.departement })</p>
|
||||
<p><b>Filière :</b> { formation.filiere }</p>
|
||||
<p><b>Taux d'accès :</b> { formation.tauxAcces }%</p>
|
||||
|
||||
<button onclick={ () => props.ondetail(i) }>Voir détail</button>
|
||||
<button onclick={ () => props.onselect(i) }>Ajouter à la sélection</button>
|
||||
<button onclick={ () => locateOnMap(f) } if={ f.latitude != null }>Localiser</button>
|
||||
<button onclick={ afficherDetail.bind(this, index) }>Voir détail</button>
|
||||
<button onclick={ ajouterALaSelection.bind(this, index) }>Ajouter à la sélection</button>
|
||||
<button onclick={ localiserSurCarte.bind(this, formation) } if={ formation.latitude != null }>Localiser</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
locateOnMap(f) {
|
||||
|
||||
// Déclencher l'affichage du détail d'une formation
|
||||
afficherDetail(index) {
|
||||
this.props.ondetail(index)
|
||||
},
|
||||
|
||||
// Ajouter une formation à la sélection
|
||||
ajouterALaSelection(index) {
|
||||
this.props.onselect(index)
|
||||
},
|
||||
|
||||
// Centrer la carte sur la formation
|
||||
localiserSurCarte(formation) {
|
||||
if (window.mapFocus) {
|
||||
window.mapFocus(f.id)
|
||||
window.mapFocus(formation.id)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</result-list>
|
||||
|
||||
Reference in New Issue
Block a user