ProjetRIOT/components/school.riot
2023-03-31 22:27:45 +02:00

159 lines
6.1 KiB
Plaintext

<school>
<div if={props.shouldShowInfos} class="box p-2 m-2" disabled="true">
<div id="map" width="100%" style="border-radius: 5px"></div>
<div class="mt-2 mb-2 control has-icons-left is-inline-block is-pulled-right">
<input class="input" onkeyup={filterSearch} type="search" placeholder="Établissement">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</div>
<table class="table is-fullwidth is-hoverable is-narrow">
<thead>
<tr>
<th each={sortField in sortFields}>
{sortField.name}
<a id={sortField.id} onclick={() => sortList(sortField.id, true)}>
<span class="icon"><i class="fas fa-sort"></i></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr each={school in state.filteredSchoolList}>
<td><a onclick={() => props.popup(school)}>{school.fields.g_ea_lib_vx}</a></td>
<td>{school.fields.ville_etab}</td>
<td>{school.fields.dep}</td>
<td>{school.fields.moyenne}</td>
<td><title-progress value={school.fields.taux_acces_ens} max="100" style="margin: auto"></title-progress></td>
</tr>
</tbody>
</table>
</div>
<script>
const SORT_TABLE = [
{name: "Nom", id: "g_ea_lib_vx"},
{name: "Ville", id: "ville_etab"},
{name: "Dept.", id: "dep"},
{name: "Moyenne", id: "moyenne"},
{name: "Sélectivité", id: "taux_acces_ens"}
]
export default {
filterSearch() {
let input = this.$("input")
if (!input) return
let finalArray = []
//On évite de trier avant d'avoir plus de 1 lettres.
if (input.value.length > 1) {
finalArray = this.state.schoolList.filter((item) => {
return item.fields.g_ea_lib_vx.toLowerCase().includes(input.value.toLowerCase())
})
} else {
finalArray = this.state.schoolList
}
this.updateMap()
this.update({
filteredSchoolList: finalArray
})
},
sortList(sortBy, shouldUpdate) {
//Si la liste est déjà triée par la bonne catégorie, on l'inverse
if (sortBy == this.state.sortBy) {
this.state.filteredSchoolList.reverse()
}
//Sinon on l'ordonne par la nouvelle catégorie (ascendant par défaut)
else {
this.state.sortBy = sortBy
switch (sortBy) {
case SORT_TABLE[3].id:
case SORT_TABLE[4].id: {
this.state.filteredSchoolList.sort((a, b) => {
if (a.fields[sortBy] > b.fields[sortBy]) return 1
else return -1
})
break
}
default: {
this.state.filteredSchoolList.sort((a, b) => {
return (a.fields[sortBy]).localeCompare(b.fields[sortBy])
})
break
}
}
}
this.update()
},
updateMap() {
if (this.state.map && this.props.shouldShowInfos) {
this.state.markers.clearLayers()
for (let school of this.state.filteredSchoolList) {
let fields = school.fields
let pos = fields.g_olocalisation_des_formations
let popupHTML = document.createElement("div")
let title = document.createElement("span")
title.textContent = fields.g_ea_lib_vx
title.class = "is-primary"
let linkToForma = document.createElement("a")
linkToForma.onclick = () => props.popup(school)
linkToForma.textContent = "Voir les infos de l'établissement"
popupHTML.appendChild(title)
popupHTML.appendChild(document.createElement("br"))
popupHTML.appendChild(linkToForma)
let marker = L.marker(pos)
marker.bindPopup(popupHTML)
this.state.markers.addLayer(marker)
}
this.state.map.addLayer(this.state.markers)
}
},
onBeforeUpdate(props, state) {
if (props.schoolListUpdating) {
state.schoolList = [...props.schoolList]
state.filteredSchoolList = [...state.schoolList]
if (this.$("input")) this.$("input").value = ""
this.updateMap()
}
},
onUpdated(props, state) {
if (!state.map && props.shouldShowInfos) {
state.map = L.map("map").setView([47, 2.5], 5)
state.markers = L.markerClusterGroup()
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(state.map)
}
},
onBeforeMount(props, state) {
this.state = {
sortBy: null,
schoolList: [],
filteredSchoolList: []
}
},
sortFields: SORT_TABLE
}
</script>
</school>