application.js.erb

var map;
var region;
var ismap;
var searchMachineIDString;
var numMachinesVal;
var locationTypeVal;
var single_id;
var mapAdjusted = 0;
var mapLoaded = 0;
var search_string;
var zoomLevel;
var markers = new Array();
var locationIDs = new Array();
var searchSections = new Array();
const REDO_TIMEOUT = 1800;

function toggleData(name, id) {
  var main = id ? '_' + id : '';

  $('#' + name + main).toggle();
}

function toggle_machine_data(name, id) {
  if (name == 'add_machine_location') {
    $('#add_machine_location_' + id).toggle();
  } else {
    $('#add_machine_location_' + id).hide();
  }
  if (name == 'add_picture_location') {
    $('#add_picture_location_' + id).toggle();
  } else {
    $('#add_picture_location_' + id).hide();
  }
  if (name == 'recent_location_activity_location') {
    $('#recent_location_activity_location_' + id).toggle();
  } else {
    $('#recent_location_activity_location_' + id).hide();
  }
  if (name == 'former_machines_location') {
    $('#former_machines_location_' + id).toggle();
  } else {
    $('#former_machines_location_' + id).hide();
  }
}

function clearInfoWindows() {
  if (markers) {
    for (i in markers) {
      markers[i].getPopup().remove();
    }
  }
}

function clearMarkers() {
  if (markers) {
    for (i in markers) {
      markers[i].remove();
    }
  }
}

function clearClosest() {
  $(".mask").hide();
}

function showLocations(ids, lats, lons, contents, num_machines, latLng) {
  clearMarkers();
  clearInfoWindows();
  clearClosest();
  markers = new Array();

  locationIDs = ids;

  let protocol = new pmtiles.Protocol();
  maplibregl.addProtocol("pmtiles", protocol.tile);

  var bounds = new maplibregl.LngLatBounds();

  if (window.matchMedia) {
    // Check if the dark-mode Media-Query matches
    if(window.matchMedia('(prefers-color-scheme: dark)').matches){
      var map_style = map_style_obj_dark;
    } else {
      var map_style = map_style_obj;
    }
  } else {
    var map_style = map_style_obj;
  }

  if (mapAdjusted === 0 && mapLoaded == 0) {
    map = new maplibregl.Map({
      container: 'map_canvas',
      style: map_style
    });
    map.addControl(new maplibregl.ScaleControl({unit: 'imperial'}), 'bottom-right');
    map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
    map.addControl(new maplibregl.FullscreenControl(), 'top-right');
    mapLoaded = 1;
  }

  for (i in ids) {

    var el = document.createElement('div');
    el.className = 'marker';
    el.innerHTML = '<span><b>' + num_machines[i] + '</b></span>';

    if (contents.length > 1) {
      (function (el, index) {
        var locationID = locationIDs[index];

        el.id = 'marker_' + locationID;
        el.style.cssText += 'z-index:' + num_machines[i];
        el.innerHTML = '<span><b>' + num_machines[i] + '</b></span>';
        el.addEventListener('touchstart', function () {
          showLocationDetail(locationID);
          showInfowindow(locationID);

          document.getElementById('location_detail_location_' + locationID).scrollIntoView(true);
          window.scrollBy(0, -140);
          el.preventDefault();
        });
        el.addEventListener('click', function () {
          showLocationDetail(locationID);

          document.getElementById('location_detail_location_' + locationID).scrollIntoView(true);
          window.scrollBy(0, -140);
        });
      })(el, i);
    }

    var popup = new maplibregl.Popup({ offset: 25 })
      .setHTML(contents[i]);

    var marker = new maplibregl.Marker({element: el}, { anchor: 'center' })
      .setLngLat([lons[i], lats[i]])
      .setPopup(popup)
      .addTo(map);

    markers.push(marker);
    bounds.extend([lons[i], lats[i]]);
  }

  if (mapAdjusted === 0) {
    if (contents.length === 1) {
      map.setZoom(18);
      map.setCenter([lons[0], lats[0]]);
      zoomCheck();
      if (document.getElementById("not_found")) {
        document.getElementById("not_found").style.display = "none";
      }
    } else if (contents.length == 0 && latLng.length === 1) {
      document.getElementById("map_canvas").innerHTML = "<p id='not_found' class='font28 red bold'>" + "NOT FOUND. PLEASE SEARCH AGAIN." + "<br />" + "Use the dropdown or the autocompleting textbox if you want results." + "</p>";
    } else if (contents.length == 0 && latLng.length === 2) {
      map.fitBounds(bounds, { padding: 50, animate: false });
      map.setZoom(18);
      zoomCheck();
      if (document.getElementById("not_found")) {
        document.getElementById("not_found").style.display = "none";
      }
    } else {
      map.fitBounds(bounds, { padding: 50, animate: false });
      zoomCheck();
      if (document.getElementById("not_found")) {
        document.getElementById("not_found").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";
  }
  mapAdjusted = 1;
  redo();
}

function storeMachineID() {
  searchMachineID = document.getElementById("by_machine_id").value;
  searchMachineIDString = searchMachineID ? ';by_machine_id=' + searchMachineID : ''
}

function redo() {
  var mapupdater;
  zoomLevel = map.getZoom();
  map.on('dragend', function () {
    zoomLevel = map.getZoom();
    if (zoomLevel < 6) {
      document.getElementById("zoom_in_more").style.display = "block";
      zoomLevel = map.getZoom();
    } else if ($("#followCheck").is(':checked')) {
      document.getElementById("zoom_in_more").style.display = "none";
      window.clearTimeout(mapupdater);
      mapupdater = window.setTimeout(function () {

        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();

        var dfd = $.getJSON('/api/v1/locations/within_bounding_box.json?no_details=1;swlat=' + sw.lat + ';swlon=' + sw.lng + ';nelat=' + ne.lat + ';nelon=' + ne.lng + searchMachineIDString + numMachinesVal + locationTypeVal);

        dfd.done(function (response) {
          if (!response.locations) {
            var locationIds = [];
            document.getElementById("locations").innerHTML = "<p id='not_found' class='font28 red bold'>" + "No pinball found in this area." + "</p>";
          } else {
            var locationIds = [];
            for (var i = 0; i < response.locations.length; i++) {
              locationIds.push(response.locations[i].id)
            }
            if (ismap == 1) {
              var url = '/locations?map_location_data=;by_location_id=' + locationIds.join('_');
            }
            else {
              var url = '/locations?region=' + region + '&by_location_id=' + locationIds.join('_');
            }

            document.getElementById('search_link_wrapper').style.display = "none";
            $('#locations').html(loadingHTML());
            $.get(url, function (data) {
              $('#locations').html(data);
            });
          }
        });
      }, REDO_TIMEOUT);
    }
  });

  map.on('zoomend', function () {
    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 () {

        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();

        var dfd = $.getJSON('/api/v1/locations/within_bounding_box.json?no_details=1;swlat=' + sw.lat + ';swlon=' + sw.lng + ';nelat=' + ne.lat + ';nelon=' + ne.lng + searchMachineIDString + numMachinesVal + locationTypeVal);

        dfd.done(function (response) {
          if (!response.locations) {
            var locationIds = [];
            document.getElementById("locations").innerHTML = "<p id='not_found' class='font28 red bold'>" + "No pinball found in this area." + "</p>";
          } else {
            var locationIds = [];
            for (var i = 0; i < response.locations.length; i++) {
              locationIds.push(response.locations[i].id)
            }
            if (ismap == 1) {
              var url = '/locations?map_location_data=;by_location_id=' + locationIds.join('_');
            }
            else {
              var url = '/locations?region=' + region + '&by_location_id=' + locationIds.join('_');
            }

            document.getElementById('search_link_wrapper').style.display = "none";
            $('#locations').html(loadingHTML());
            $.get(url, function (data) {
              $('#locations').html(data);
            });
          }
        });
      }, REDO_TIMEOUT);
    }
  });
}

function scrollToMiddle(id) {
  var elem_position = $(id).offset().top;
  var window_height = $(window).height();
  var y = elem_position - window_height / 2;

  window.scrollTo(0, y);
}

function loadingHTML() {
  return "<div class='loading'><img src='<%= asset_path 'map_loading.gif' %>' /></div>";
}

function setOtherSearchOptions(newSection) {
  var html = "<span class='black_text'>Search:</span>";
  for (section in searchSections) {
    html += "  <button id='" + searchSections[section] + "_section_link' onclick='switchSection(\"" + searchSections[section] + "\");'>" + searchSections[section] + "</button>\n"
  }

  $('#other_search_options').html(html);
}

function switchSection(newSection) {
  setOtherSearchOptions(newSection);
  $("div .section:visible").hide();
  $('#by_' + newSection).toggle();
  $("#" + newSection + "_section_link").toggleClass("active_section_link");
}

function initSearch(userFaved, operatorIDs, locationIDs, locationTypeIDs, zoneIDs, machineIDs, machineID, ipdbIDs, opdbIDs, cityName, machineGroupId, showLocationDistance, lat, lon, byAtLeastMachines, byAtLeastNMachinesCity, byAtLeastNMachinesType, byAtLeastNMachinesZone, region) {
  if (userFaved || operatorIDs || locationIDs || zoneIDs || machineIDs || machineID || ipdbIDs || opdbIDs || cityName || machineGroupId || byAtLeastNMachinesCity || byAtLeastNMachinesType || byAtLeastNMachinesZone || region) {

    if (region && !(userFaved || operatorIDs || locationIDs || locationTypeIDs || zoneIDs || machineIDs || machineID || ipdbIDs || opdbIDs || cityName || machineGroupId || byAtLeastNMachinesCity || byAtLeastNMachinesType || byAtLeastNMachinesZone)) {
      return;
    }

    var url = '/locations?user_faved=' + userFaved + '&by_location_id=' + locationIDs + '&by_operator_id=' + operatorIDs + '&by_type_id=' + locationTypeIDs + '&by_zone_id=' + zoneIDs + '&by_machine_id=' + machineIDs + '&by_machine_single_id=' + machineID + '&by_city_id=' + cityName + '&by_machine_group_id=' + machineGroupId + '&by_ipdb_id=' + ipdbIDs + '&by_opdb_id=' + opdbIDs + '&show_location_distance=' + showLocationDistance + '&lat=' + lat + '&lon=' + lon + '&by_at_least_n_machines_city=' + byAtLeastNMachinesCity + '&by_at_least_n_machines_type=' + byAtLeastNMachinesType + '&by_at_least_n_machines_zone=' + byAtLeastNMachinesZone + '&region=' + region;

    $('#locations').html(loadingHTML());
    $.get(url, function (data) {
      $('#locations').html(data);
    });
  }
}

function findClosestLocations(region) {
  navigator.geolocation.getCurrentPosition(function (position) {
    var dfd = $.getJSON('/api/v1/locations/closest_by_lat_lon.json', { lat: position.coords.latitude, lon: position.coords.longitude, max_distance: 50, send_all_within_distance: 1 });
    dfd.done(function (response) {
      if (!response.locations) {
        var locationIds = [];
        document.getElementById("locations").innerHTML = "<p id='not_found' class='font28 red bold'>" + "No pinball found in this area." + "</p>";
      } else {
        var locationIds = [];
        for (var i = 0; i < response.locations.length; i++) {
          locationIds.push(response.locations[i].id)
        }

        var url = '/locations?show_location_distance=1&lat=' + position.coords.latitude + '&lon=' + position.coords.longitude + '&by_location_id=' + locationIds.join('_');

        $('#locations').html(loadingHTML());
        $.get(url, function (data) {
          $('#locations').html(data);
        });

      }
    });
  }, function () {
    // User has blocked access to their location or something else went wrong
  });
}

function showLocationDetail(locationID) {
  $('.location_detail_location').hide();

  if ($('#location_detail_location_' + locationID).is(":hidden")) {
    $('#show_location_detail_location_' + locationID).hide();
    $('.sub_nav_location').hide();
    $('.back_to_results').show();
    toggleData('location_detail_location', locationID);

    $('#location_detail_location_' + locationID).html(loadingHTML());
    $.get('/locations/' + locationID + '/render_location_detail', function (data) {
      $('#location_detail_location_' + locationID).html(data);
    });
  }
}

function showInfowindow(locationID) {
  var index = jQuery.inArray(locationID, locationIDs);
  clearInfoWindows();
  markers[index].togglePopup();
}

function backToResults() {
  $('.back_to_results').hide();
  $('.sub_nav_location').show("slide", { direction: "left" }, 400);
  $('.location_detail_location').hide();
}

function showSearchModal() {
  $('#form_container').show(400);
}

function hideSearchModal() {
  if ($('.search_modal').css('display') == 'block') {
    $('#form_container').hide(400);
  }
}

function setRegion(regionName) {
  region = regionName;
}

function setSearchSections(newSearchSections) {
  searchSections = newSearchSections;
}

function updateLocationUpdatedText(id) {
  $('#last_updated_location_' + id).load('/locations/' + id + '/render_last_updated');
  $('#stale_' + id).hide();
  return false;
}

var fade_flash = function () {
  $("#flash_notice").delay(2400).fadeOut("slow");
  $("#flash_alert").delay(2400).fadeOut("slow");
  $("#flash_error").delay(2400).fadeOut("slow");
};
fade_flash();

var show_ajax_message = function (msg, type) {
  $("#flash-message").html('<div id="flash_' + type + '">' + msg + '</div>');
  fade_flash();
};

function show_new_machine_message() {
  alert('Please choose a machine from the list. If the machine is not in the list, it is likely a game (e.g., a non-pinball game) that we do not include on Pinball Map. If you think the list is missing a pinball machine, please contact us.');
};