martins/S4WEB
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ajout map et filtrage des formations par celle visible sur la map

Browse Source
This commit is contained in:
martins 2023-03-30 22:25:02 +02:00
parent be3dd2006d
commit 03f8dd6d58
8 changed files with 785 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

656
css/leaftlet.css Normal file
View File

File diff suppressed because it is too large Load Diff

5
css/style.css
View File

@ -1,2 +1,5 @@
@import url(./bulam.css); @import url(./bulam.css);
@import url(./fontawesome-free-6.4.0-web/css/all.css); @import url(./fontawesome-free-6.4.0-web/css/all.css);
@import url(./leaftlet.css);
#map { height: 150vh; }

10
index.html
View File

@ -5,6 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="./js/leaftlet.js"></script>
<script src="./riot/maMap.riot" type="riot"></script>
<script src="./riot/suiviformation.riot" type="riot"></script> <script src="./riot/suiviformation.riot" type="riot"></script>
<script src="./riot/choixformation.riot" type="riot"></script> <script src="./riot/choixformation.riot" type="riot"></script>
<script src="./riot/app.riot" type="riot"></script> <script src="./riot/app.riot" type="riot"></script>
@ -12,7 +20,7 @@
<script src="./riot/statistiqueFormation.riot" type="riot"></script> <script src="./riot/statistiqueFormation.riot" type="riot"></script>
<script src="./riot/tableuFormation.riot" type="riot"></script> <script src="./riot/tableuFormation.riot" type="riot"></script>
<script src="./riot/modaleEcole.riot" type="riot"></script> <script src="./riot/modaleEcole.riot" type="riot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/7.1.0/riot+compiler.min.js" integrity="sha512-sSGKGR9MvL0bUx3CScaBb56crXwspwDkL/JnB0IrLFQfw3uvSUlITQtsTtDZctshhv5wdwIt+qZeN8zThRF4Dw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="./js/riot+compiler.min.js"></script>
<title>S4WEB</title> <title>S4WEB</title>
</head> </head>
<body> <body>

6
js/leaftlet.js Normal file
View File

File diff suppressed because one or more lines are too long

1
js/riot+compiler.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
riot/app.riot
View File

@ -252,6 +252,8 @@
}) })
}, },
calcule(){ calcule(){
this.getSelectivite(this.state.statistique.records) this.getSelectivite(this.state.statistique.records)
this.getMoyenne(this.state.statistique.records) this.getMoyenne(this.state.statistique.records)

91
riot/maMap.riot Normal file
View File

@ -0,0 +1,91 @@
<maMap>
<script>
export default function maMap() {
let markers = [];
let map;
return {
onBeforeMount(props, state) {
// création de la carte Leaflet
map = L.map("map");
map.fitWorld();
// ajout d'un calque de tuiles OpenStreetMap
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
}).addTo(map);
// écouteur pour l'événement "moveend"
map.on("moveend", this.onMoveEnd);
},
onUpdated() {
if (this.props.records) {
this.removeMarks();
this.afficheMarks(this.getLoc(this.props.records));
this.onMoveEnd();
}
},
removeMarks() {
markers.forEach((marker) => {
marker.remove();
});
},
afficheMarks(loc) {
loc.forEach((coord) => {
var marker = L.marker([coord[0], coord[1]]).addTo(map);
markers.push(marker);
});
},
getVisibleMarkers() {
let visibleMarkers = [];
map.eachLayer((layer) => {
if (layer instanceof L.Marker && map.getBounds().contains(layer.getLatLng())) {
visibleMarkers.push(layer);
}
});
return visibleMarkers;
},
getLoc(records) {
let loc = [];
records.forEach((formation) => {
loc.push(formation.fields.g_olocalisation_des_formations);
});
return loc;
},
// méthode pour gérer l'événement "moveend"
onMoveEnd() {
let visibleMarkers = this.getVisibleMarkers();
// filtrer les éléments du tableau records qui ont une localisation correspondant à un marker visible
let recordsWithLoc = this.props.records.filter((record) => {
let loc = record.fields.g_olocalisation_des_formations;
for (let marker of visibleMarkers) {
if (marker.getLatLng().equals(L.latLng(loc[0], loc[1]))) {
return true;
}
}
return false;
});
let fin=[];
recordsWithLoc.forEach((forma) => {
fin.push(forma.recordid)
})
this.props.modifyByLoc(fin);
},
};
}
</script>
</maMap>

19
riot/tableuFormation.riot
View File

@ -1,5 +1,6 @@
<tableuFormation> <tableuFormation>
<div id="map"></div>
<maMap if={props.records} records={props.records} modifyByLoc={modifyByLoc}></maMap>
<div class="field is-flex is-justify-content-space-between mt-5" > <div class="field is-flex is-justify-content-space-between mt-5" >
<input class="input" type="search" placeholder="nom de l'établissement" id="myInput" oninput={search}> <input class="input" type="search" placeholder="nom de l'établissement" id="myInput" oninput={search}>
</div> </div>
@ -51,7 +52,7 @@
</tr> </tr>
</thead> </thead>
<tbody each={item in props.records}> <tbody each={item in props.records}>
<tr class="is-clickable animate" style="transform: translateY(0px); opacity: 1;" if={item.fields.lib_comp_voe_ins.includes(state.recherche)} onclick={() => afficherModal(item)}> <tr class="is-clickable animate" style="transform: translateY(0px); opacity: 1;" if={item.fields.lib_comp_voe_ins.includes(state.recherche) && locInclude(item.recordid)} onclick={() => afficherModal(item)}>
<td>{item.fields.lib_comp_voe_ins}</td><td>{item.fields.ville_etab}</td><td>{item.fields.dep}</td><td>{getMoyenne(item)}</td><td> <td>{item.fields.lib_comp_voe_ins}</td><td>{item.fields.ville_etab}</td><td>{item.fields.dep}</td><td>{getMoyenne(item)}</td><td>
<progress-bar select="{getSelectivite(item)}"> <progress-bar select="{getSelectivite(item)}">
<div class="columns is-mobile is-vcentered"> <div class="columns is-mobile is-vcentered">
@ -90,7 +91,8 @@ export default function todos() {
recherche: '', recherche: '',
trie: '', trie: '',
records: '', records: '',
modal: '' modal: '',
loc: []
}; };
}, },
@ -235,6 +237,17 @@ export default function todos() {
modal: item.fields modal: item.fields
}) })
} }
},
modifyByLoc(newRecords){
this.update({
loc: newRecords
});
},
locInclude(geolocalisation){
return this.state.loc.find((str) => str === geolocalisation);
} }
} }