From 30899a2534226a6fc6ad2b64f533d92bff2c04c1 Mon Sep 17 00:00:00 2001 From: lenovo Date: Thu, 10 Nov 2022 17:48:38 +0100 Subject: [PATCH] print filters menu names --- srcs/plugins/map_prof/map_prof_hooks.php | 8 ++- srcs/plugins/map_prof/mp_get_filters.php | 4 +- .../map_prof/scripts/mp_create_filters.js | 49 +++++++++++++++++++ srcs/plugins/map_prof/scripts/mp_init_map.js | 40 ++++++++++++++- srcs/plugins/map_prof/styles/mp_filters.css | 10 +++- 5 files changed, 103 insertions(+), 8 deletions(-) create mode 100644 srcs/plugins/map_prof/scripts/mp_create_filters.js diff --git a/srcs/plugins/map_prof/map_prof_hooks.php b/srcs/plugins/map_prof/map_prof_hooks.php index 227edc7..089f81f 100644 --- a/srcs/plugins/map_prof/map_prof_hooks.php +++ b/srcs/plugins/map_prof/map_prof_hooks.php @@ -53,10 +53,14 @@ function mp_ljdp_map() { wp_enqueue_style('mp__style', plugins_url('styles/mp__style.css', __FILE__), '', '', false); + // enqueue header wp_enqueue_script('mp_info_window', plugins_url('scripts/mp_info_window.js', __FILE__), '', '', false); wp_enqueue_script('mp_errors_map', plugins_url('scripts/mp_errors_map.js', __FILE__), '', '', false); + wp_enqueue_script('mp_create_filters', plugins_url('scripts/mp_create_filters.js', __FILE__), '', '', false); wp_enqueue_script('mp_create_markers', plugins_url('scripts/mp_create_markers.js', __FILE__), '', '', false); wp_enqueue_script('mp_draw_clusters', plugins_url('scripts/mp_draw_clusters.js', __FILE__), '', '', false); + + // enqueue footer wp_enqueue_script('mp_marker_clusterer', $marker_clusterer, '', '', true); wp_enqueue_script('mp_init_map', plugins_url('scripts/mp_init_map.js', __FILE__), ['mp_marker_clusterer'],'', true); wp_enqueue_script('mp_google_api', mp_url_api(), ['mp_init_map'], '', true); @@ -75,8 +79,8 @@ function mp_ljdp_map() { //mp_console_log($locations); $filters = mp_get_filters($events); - mp_console_log("php filters:"); - mp_console_log($filters); + //mp_console_log("php filters:"); + //mp_console_log($filters); $to_add = array( "locations" => $locations, diff --git a/srcs/plugins/map_prof/mp_get_filters.php b/srcs/plugins/map_prof/mp_get_filters.php index 293cbff..ff85500 100644 --- a/srcs/plugins/map_prof/mp_get_filters.php +++ b/srcs/plugins/map_prof/mp_get_filters.php @@ -56,8 +56,8 @@ function mp_get_filters($events) { foreach ($events as $event) { $fields = array( - "countries" => $event->location->country, - "cities" => $event->location->city, + "pays" => $event->location->country, + "villes" => $event->location->city, "categories" => $event->categorie, "mode" => ($event->irl)? "En présentiel" : "En ligne", ); diff --git a/srcs/plugins/map_prof/scripts/mp_create_filters.js b/srcs/plugins/map_prof/scripts/mp_create_filters.js new file mode 100644 index 0000000..fc01daf --- /dev/null +++ b/srcs/plugins/map_prof/scripts/mp_create_filters.js @@ -0,0 +1,49 @@ +function fill_filters(filters_div) { + + /* + * following variable are created by mp_add_to_script.php + * + * { } + * { [ ] } + * - filters: { - pays : [ { - _name : "" } ] } + * { [ { - villes : [] } ] } + * { [ { - categories: [] } ] } + * { [ { - mode : [] }, ...] } + * { [ ] } + * { } + * { [ ] } + * { - villes : [ { - _name : "" } ] } + * { [ { - pays : [] } ] } + * { [ { - categories: [] } ] } + * { [ { - mode : [] }, ...] } + * { [ ] } + * { } + * { [ ] } + * { - categories: [ { - _name : "" } ] } + * { [ { - pays : [] } ] } + * { [ { - villes : [] } ] } + * { [ { - mode : [] }, ...] } + * { [ ] } + * { } + * { } + * { [ ] } + * { - mode : [ { - _name : "" } ] } + * { [ { - pays : [] } ] } + * { [ { - villes : [] } ] } + * { [ { - categories: [] }, ...] } + * { [ ] } + * { } + * + */ + + let content = ""; + for (key in filters) { + if (! filters.hasOwnProperty(key)) + continue; + content += '
'; + content += key; + content += '
'; + } + + filters_div.innerHTML = content; +} diff --git a/srcs/plugins/map_prof/scripts/mp_init_map.js b/srcs/plugins/map_prof/scripts/mp_init_map.js index 99cddc7..a75d568 100644 --- a/srcs/plugins/map_prof/scripts/mp_init_map.js +++ b/srcs/plugins/map_prof/scripts/mp_init_map.js @@ -9,6 +9,39 @@ function mp_init_map() { * }, * ... * ] + * + * { } + * { [ ] } + * - filters: { - pays : [ { - _name : "" } ] } + * { [ { - villes : [] } ] } + * { [ { - categories: [] } ] } + * { [ { - mode : [] }, ...] } + * { [ ] } + * { } + * { [ ] } + * { - villes : [ { - _name : "" } ] } + * { [ { - pays : [] } ] } + * { [ { - categories: [] } ] } + * { [ { - mode : [] }, ...] } + * { [ ] } + * { } + * { [ ] } + * { - categories: [ { - _name : "" } ] } + * { [ { - pays : [] } ] } + * { [ { - villes : [] } ] } + * { [ { - mode : [] }, ...] } + * { [ ] } + * { } + * { } + * { [ ] } + * { - mode : [ { - _name : "" } ] } + * { [ { - pays : [] } ] } + * { [ { - villes : [] } ] } + * { [ { - categories: [] }, ...] } + * { [ ] } + * { } + * + * - let filters * - let coordinates_default = {lat: ,lng: } * - let icon_color = "" * - let icon_color_back = "" @@ -18,8 +51,8 @@ function mp_init_map() { //console.log("locations:"); //console.log(locations); - //console.log("filters:"); - //console.log(filters); + console.log("filters:"); + console.log(filters); // default map center to france let map_center = coordinates_default; @@ -58,6 +91,9 @@ function mp_init_map() { let markers = create_markers(map, locations, infowindow); draw_clusters(map, markers); + let filters_div = document.getElementById("ljdp_map_filters"); + fill_filters(filters_div); + // add listener to close infowindow at any click on map map.addListener('click', function() { infowindow.close(); diff --git a/srcs/plugins/map_prof/styles/mp_filters.css b/srcs/plugins/map_prof/styles/mp_filters.css index 7777ea6..09405c2 100644 --- a/srcs/plugins/map_prof/styles/mp_filters.css +++ b/srcs/plugins/map_prof/styles/mp_filters.css @@ -4,11 +4,17 @@ */ - #ljdp_map_filters { + display: flex; border: 1px solid red; width: 100%; - height: 30px; +} + +#ljdp_map_filters > .filter_menu { + display: flex; + margin: auto; + width: auto; + border: 1px solid blue; }