ProjetRIOT/components/school.riot

153 lines
6.0 KiB
Plaintext
Raw Normal View History

2023-03-28 10:15:32 +02:00
<school>
<div if={props.shouldShowInfos} class="box p-2 m-2" disabled="true">
2023-03-31 17:07:25 +02:00
<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">
2023-03-31 14:22:25 +02:00
<input class="input" onkeyup={filterSearch} type="search" placeholder="Établissement">
2023-03-29 16:50:48 +02:00
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</div>
2023-03-31 17:07:25 +02:00
<table class="table is-fullwidth is-hoverable is-narrow">
2023-03-28 10:15:32 +02:00
<thead>
<tr>
2023-03-31 14:22:25 +02:00
<th each={sortField in sortFields}>
2023-03-30 19:28:40 +02:00
{sortField.name}
2023-03-31 14:22:25 +02:00
<a id={sortField.id} onclick={() => sortList(sortField.id, true)}>
2023-03-30 19:28:40 +02:00
<span class="icon"><i class="fas fa-sort"></i></span>
</a>
</th>
2023-03-28 10:15:32 +02:00
</tr>
</thead>
2023-03-28 16:51:44 +02:00
<tbody>
2023-03-31 14:22:25 +02:00
<tr each={school in state.filteredSchoolList}>
2023-03-31 14:54:13 +02:00
<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>
2023-03-28 16:51:44 +02:00
</tr>
</tbody>
</table>
2023-03-29 16:50:48 +02:00
</div>
2023-03-31 14:22:25 +02:00
<script>
const SORT_TABLE = [
{name: "Nom", id: "g_ea_lib_vx"},
{name: "Ville", id: "ville_etab"},
2023-03-31 17:07:25 +02:00
{name: "Dept.", id: "dep"},
2023-03-31 14:22:25 +02:00
{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.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()
},
onBeforeUpdate(props, state) {
if (props.schoolListUpdating) {
state.schoolList = [...props.schoolList]
state.filteredSchoolList = [...state.schoolList]
if (this.$("input")) this.$("input").value = ""
}
},
2023-03-31 17:07:25 +02:00
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);
} else (state.map) {
state.markers.clearLayers()
for (let school of 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)
state.markers.addLayer(marker)
}
state.map.addLayer(state.markers)
}
},
2023-03-31 14:22:25 +02:00
onBeforeMount(props, state) {
this.state = {
sortBy: null,
schoolList: [],
filteredSchoolList: []
}
},
sortFields: SORT_TABLE
}
</script>
2023-03-28 10:15:32 +02:00
</school>