From 8891df36b0bc402eec43aab62d7479235aa2c01b Mon Sep 17 00:00:00 2001 From: RyanTG Date: Sun, 8 Dec 2024 13:32:30 -0800 Subject: [PATCH] Refresh map button instead of toggle --- app/assets/javascripts/application.js.erb | 59 ++++++++++--------- app/assets/stylesheets/application.scss.erb | 30 ++++++++-- .../stylesheets/mobile-application.scss.erb | 13 +++- app/views/locations/_form.html.haml | 5 +- app/views/locations/_locations.html.haml | 2 +- app/views/pages/map.html.haml | 16 +++-- app/views/pages/region.html.haml | 11 ++-- 7 files changed, 81 insertions(+), 55 deletions(-) diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index 17386637..e9c8ab3b 100644 --- a/app/assets/javascripts/application.js.erb +++ b/app/assets/javascripts/application.js.erb @@ -12,7 +12,7 @@ var zoomLevel; var markers = new Array(); var locationIDs = new Array(); var searchSections = new Array(); -const REDO_TIMEOUT = 1800; +const REDO_TIMEOUT = 200; function toggleData(name, id) { var main = id ? '_' + id : ''; @@ -105,11 +105,7 @@ function showLocations(ids, lats, lons, num_machines, latLng) { el.addEventListener('touchstart', function () { showLocationDetail(locationID); - var x = document.getElementsByClassName("marker2 maplibregl-marker maplibregl-marker-anchor-center"); - var g; - for (g = 0; g < x.length; g++) { - x[g].className = "marker maplibregl-marker maplibregl-marker-anchor-center"; - } + clearSelectedMarker(); el.className = 'marker2 maplibregl-marker maplibregl-marker-anchor-center'; document.getElementById('location_detail_location_' + locationID).scrollIntoView(true); @@ -119,11 +115,7 @@ function showLocations(ids, lats, lons, num_machines, latLng) { el.addEventListener('click', function () { showLocationDetail(locationID); - var x = document.getElementsByClassName("marker2 maplibregl-marker maplibregl-marker-anchor-center"); - var g; - for (g = 0; g < x.length; g++) { - x[g].className = "marker maplibregl-marker maplibregl-marker-anchor-center"; - } + clearSelectedMarker(); el.className = 'marker2 maplibregl-marker maplibregl-marker-anchor-center'; document.getElementById('location_detail_location_' + locationID).scrollIntoView(true); @@ -144,7 +136,8 @@ function showLocations(ids, lats, lons, num_machines, latLng) { if (locationIDs.length === 1) { map.setZoom(18); map.setCenter([lons[0], lats[0]]); - zoomCheck(); + hideRefresh(); + refreshButton(); if (document.getElementById("not_found")) { document.getElementById("not_found").style.display = "none"; } @@ -153,13 +146,14 @@ function showLocations(ids, lats, lons, num_machines, latLng) { } else if (locationIDs.length == 0 && latLng.length === 2) { map.fitBounds(bounds, { padding: 50, animate: false }); map.setZoom(18); - zoomCheck(); + hideRefresh(); + refreshButton(); if (document.getElementById("not_found")) { document.getElementById("not_found").style.display = "none"; } } else { map.fitBounds(bounds, { padding: 50, animate: false }); - zoomCheck(); + hideRefresh(); if (document.getElementById("not_found")) { document.getElementById("not_found").style.display = "none"; } @@ -167,15 +161,27 @@ function showLocations(ids, lats, lons, num_machines, latLng) { } } +function clearSelectedMarker() { + var x = document.getElementsByClassName("marker2 maplibregl-marker maplibregl-marker-anchor-center"); + var g; + for (g = 0; g < x.length; g++) { + x[g].className = "marker maplibregl-marker maplibregl-marker-anchor-center"; + } +} + +function hideRefresh() { + document.getElementById("refresh_button").style.display = "none"; +} + function zoomCheck() { zoomLevel = map.getZoom(); if (zoomLevel < 6) { document.getElementById("zoom_in_more").style.display = "block"; } else { document.getElementById("zoom_in_more").style.display = "none"; + redone(); } mapAdjusted = 1; - redo(); } function storeMachineID() { @@ -183,23 +189,16 @@ function storeMachineID() { searchMachineIDString = searchMachineID ? ';by_machine_id=' + searchMachineID : '' } -function redo() { - zoomLevel = map.getZoom(); - map.on('zoomend', redone); - map.on('dragend', redone); +function refreshButton() { + map.on('zoomend', function () { document.getElementById("refresh_button").style.display = "block"; }); + map.on('dragend', function () { document.getElementById("refresh_button").style.display = "block"; }); } function redone() { + hideRefresh(); var mapupdater; zoomLevel = map.getZoom(); - if (zoomLevel < 6) { - document.getElementById("zoom_in_more").style.display = "block"; - zoomLevel = map.getZoom(); - } else if (zoomLevel >= 6) { - document.getElementById("zoom_in_more").style.display = "none"; - zoomLevel = map.getZoom(); - } - if ($("#followCheck").is(':checked') && (zoomLevel >= 6)) { + document.getElementById("zoom_in_more").style.display = "none"; window.clearTimeout(mapupdater); mapupdater = window.setTimeout(function () { @@ -234,7 +233,6 @@ function redone() { } }); }, REDO_TIMEOUT); - } } function scrollToMiddle(id) { @@ -310,11 +308,13 @@ function findClosestLocations(region) { function showLocationDetail(locationID) { $('.location_detail_location').hide(); + clearSelectedMarker(); if ($('#location_detail_location_' + locationID).is(":hidden")) { $('#show_location_detail_location_' + locationID).hide(); $('.sub_nav_location').hide(); $('.back_to_results').show(); + $('#marker_' + locationID).removeClass('marker').addClass('marker2'); toggleData('location_detail_location', locationID); $('#location_detail_location_' + locationID).html(loadingHTML()); @@ -326,8 +326,9 @@ function showLocationDetail(locationID) { function backToResults() { $('.back_to_results').hide(); - $('.sub_nav_location').show("slide", { direction: "left" }, 400); + $('.sub_nav_location').show("slide", { direction: "left" }, 200); $('.location_detail_location').hide(); + clearSelectedMarker(); } function showSearchModal() { diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb index 10796f7e..3f39affa 100644 --- a/app/assets/stylesheets/application.scss.erb +++ b/app/assets/stylesheets/application.scss.erb @@ -1316,10 +1316,10 @@ input.single_hide { margin-left: 8px; } -#mapFollow_wrapper, +#refresh_button, +#zoom_in_more, #search_link_wrapper { position: fixed; - top: 100px; width: 110px; background: var(--lightpink); text-align: center; @@ -1331,7 +1331,7 @@ input.single_hide { #search_link_wrapper { padding-top: 5px; - top: 160px; + top: 60px; } #search_link_wrapper a { @@ -1345,12 +1345,29 @@ input.single_hide { cursor: pointer; } -#mapFollow_wrapper { +#refresh_button { top: 220px; + color: #440152; + background-color: #e3fae5; + font-family: $Nunito_700Bold; +} + +#zoom_in_more { + top: 280px; color: var(--darkgrey); background-color: var(--lightpink); } +#refresh_button, +#zoom_in_more { + display: none; +} + +#refresh_button:hover, +#zoom_in_more:hover { + cursor: pointer; +} + .toggle_btn_reg { left: 43%; } @@ -1993,7 +2010,6 @@ br.clear { } .search_result { - background: var(--container); height: 100%; @include radius(10px); box-shadow: 2px 5px 10px var(--shadow); @@ -2005,6 +2021,10 @@ br.clear { font-size: 14px; } +.location_details_container { + background: var(--container); +} + #form select, form select { border: 2px solid var(--border); diff --git a/app/assets/stylesheets/mobile-application.scss.erb b/app/assets/stylesheets/mobile-application.scss.erb index b6c568d3..7cc8c0f8 100644 --- a/app/assets/stylesheets/mobile-application.scss.erb +++ b/app/assets/stylesheets/mobile-application.scss.erb @@ -632,8 +632,7 @@ input.single_hide { margin: 5px 0 5px 20%; } -#mapFollow_wrapper, -#search_link_wrapper { +#zoom_in_more { position: relative; padding: 0px 5px 10px; font-size: 20px; @@ -645,9 +644,19 @@ input.single_hide { background: none; } +#refresh_button { + z-index: 100; + top: 440px; + left: 50% !important; + margin-left: -55px; +} + #search_link_wrapper { border: none; font-size: 16px; + z-index: 100; + top: 105px; + left: 20px !important; } #search_link_wrapper a { diff --git a/app/views/locations/_form.html.haml b/app/views/locations/_form.html.haml index a8b42f0b..fa1b5a0e 100644 --- a/app/views/locations/_form.html.haml +++ b/app/views/locations/_form.html.haml @@ -52,10 +52,7 @@ hideSearchModal(); $(".mask").hide(); ismap = 0; - if (mapAdjusted = 1) { //reset checkbox - mapAdjusted = 0; - $('#followCheck').prop('checked', false); - } + mapAdjusted = 0; $('#search_link_wrapper').css('display','block'); e.preventDefault(); search_string = $(this).children(":input").filter(function(index, element) { return $(element).val() != ''; }).serialize(); diff --git a/app/views/locations/_locations.html.haml b/app/views/locations/_locations.html.haml index e431c2c4..c1832afb 100644 --- a/app/views/locations/_locations.html.haml +++ b/app/views/locations/_locations.html.haml @@ -3,7 +3,7 @@ :javascript clearMarkers(); - $("#mapFollow_wrapper,#search_link_wrapper,#min_lookup_wrapper").removeClass("hide_button"); + $("#search_link_wrapper,#min_lookup_wrapper").removeClass("hide_button"); showLocations( [#{@location_data[0].join(', ')}], diff --git a/app/views/pages/map.html.haml b/app/views/pages/map.html.haml index 880b4f35..592b1e65 100644 --- a/app/views/pages/map.html.haml +++ b/app/views/pages/map.html.haml @@ -39,12 +39,13 @@ #search_link_wrapper.hide_button.toggle_btn_reg =link_to "Link to this Search Result", "", :id => "search_link" - #mapFollow_wrapper.hide_button.toggle_btn_reg - %span.red.font14.p_5{:id => "zoom_in_more"} + #refresh_button.toggle_btn_reg + %div.refresh_button{:onclick => "zoomCheck();"} + Refresh this map area + #zoom_in_more.toggle_btn_reg + %span.red.font14.p_5 Zoom in further to refresh results! - %input{:type => "checkbox", :id => "followCheck", :name => "followCheck", :class => "m_0"} - %label{ for: "followCheck" } - %span.font16.semiBold.pointer Redo results when map is moved? + %button#top_button{onclick: "topFunction()", title: "Go to top"} Top #lookup.map_lookup @@ -183,10 +184,7 @@ hideSearchModal(); $(".mask").hide(); - if (mapAdjusted = 1) { //reset checkbox - mapAdjusted = 0; - $('#followCheck').prop('checked', false); - } + mapAdjusted = 0; $('#search_link_wrapper').css('display','block'); e.preventDefault(); search_string = $("#address_search_form :input").filter(function(index, element) { return $(element).val() != ''; }).serialize(); diff --git a/app/views/pages/region.html.haml b/app/views/pages/region.html.haml index c91f518b..3e08a010 100644 --- a/app/views/pages/region.html.haml +++ b/app/views/pages/region.html.haml @@ -10,12 +10,13 @@ = render :partial => 'locations/map' #search_link_wrapper.hide_button.toggle_btn_reg =link_to "Link to this Search Result", "", :id => "search_link" - #mapFollow_wrapper.hide_button.toggle_btn_reg - %span.red.font14.p_5{:id => "zoom_in_more"} + #refresh_button.toggle_btn_reg + %div.refresh_button{:onclick => "zoomCheck();"} + Refresh this map area + #zoom_in_more.toggle_btn_reg + %span.red.font14.p_5 Zoom in further to refresh results! - %input{:type => "checkbox", :id => "followCheck", :name => "followCheck", :class => "m_0"} - %label{ for: "followCheck" } - %span.font16.semiBold.pointer Redo results when map is moved? + %button#top_button{onclick: "topFunction()", title: "Go to top"} Top #lookup #locations