' + branch.phoneNumber + '';
+ var branchAddress = document.createElement("h5");
+ branchAddress.classList.add("text-sm");
+ branchAddress.textContent = branch.address;
- var phone = document.createElement('a');
- phone.href = 'tel:' + branch.phoneNumber;
- phone.classList.add('mt-auto', 'hidden', 'lg:block');
- phone.innerHTML = '' + branch.phoneNumber;
+ var accessibilityList = document.createElement("ul");
+ accessibilityList.classList.add("text-sm", "mt-4");
+ branch.accessibilityFeatures.split(", ").forEach((feature) => {
+ var listItem = document.createElement("li");
+ listItem.innerHTML =
+ '' +
+ feature;
+ accessibilityList.appendChild(listItem);
+ });
+ // Populate additional details based on branch or ATM
+ if (branch.type === "ATM") {
+ // Add ATM-specific details
+ var atmServices = document.createElement("div");
+ atmServices.classList.add(
+ "flex",
+ "items-center",
+ "gap-x-2",
+ "justify-end"
+ );
+ var wifiIcon = document.createElement("i");
+ wifiIcon.classList.add(
+ "fa-solid",
+ "fa-wifi",
+ "text-green-500",
+ "mr-1"
+ );
+ var wifiLabel = document.createElement("label");
+ wifiLabel.textContent = "Wi-Fi";
+ atmServices.appendChild(wifiIcon);
+ atmServices.appendChild(wifiLabel);
+
+ detailsColumn.appendChild(atmServices);
+ } else {
+ // Add Branch-specific details
+ // You can add additional details based on your data structure
+
+ // Populate opening hours
+ var openingHours = document.createElement("div");
+ openingHours.classList.add(
+ "lg:font-medium",
+ "text-sm",
+ "lg:text-base"
+ );
+
+ var openHoursText =
+ branch.openingHours || "Opening hours not available";
+ openingHours.innerHTML = openHoursText.replace(/;/g, "' +
+ branch.phoneNumber +
+ "";
+
+ var phone = document.createElement("a");
+ phone.href = "tel:" + branch.phoneNumber;
+ phone.classList.add("mt-auto", "hidden", "lg:block");
+ phone.innerHTML =
+ '' + branch.phoneNumber;
+
+ // Append the elements to the detailsColumn
+ detailsColumn.appendChild(openingHours);
+ detailsColumn.appendChild(wifi);
+ detailsColumn.appendChild(phone);
+ }
+
+ // Append created elements to the list view
+ infoColumn.appendChild(branchName);
+ infoColumn.appendChild(branchAddress);
+ infoColumn.appendChild(accessibilityList);
+ branchDetails.appendChild(infoColumn);
+ branchDetails.appendChild(detailsColumn);
+ listItem.appendChild(branchDetails);
+ listViewContainer.appendChild(listItem);
+
+ if (branch.type === "Branch") {
+ detailsColumn.appendChild(openingHours);
+ detailsColumn.appendChild(wifi);
+ detailsColumn.appendChild(phone);
+ }
+
+ var longitude = branch.coordinates.Longitude;
+ var latitude = branch.coordinates.Latitude;
+
+ if (branch.type == "ATM") {
+ if (longitude || latitude != undefined) {
+ var marker = L.marker([latitude, longitude], {
+ icon: greyIcon,
+ }).addTo(map);
+ }
+ } else {
+ if (longitude || latitude != undefined) {
+ var marker = L.marker([latitude, longitude]).addTo(map);
+ }
+ }
+ // Create the toMapButton
+ var toMapButton = document.createElement("button");
+ toMapButton.classList.add("map-btn");
+ toMapButton.innerHTML = "Open in Google Maps";
+
+ // Add a click event listener to open Google Maps with the specific latitude and longitude
+ toMapButton.addEventListener("click", function () {
+ var query; // Initialize query variable
+ if (branch.type === "ATM") {
+ // For ATMs, use only the address
+ query = branch.address;
+ } else {
+ // For branches, use the branch name and address for specificity
+ query = "Santander Branch " + branch.address;
+ }
- // Append the elements to the detailsColumn
- detailsColumn.appendChild(openingHours);
- detailsColumn.appendChild(wifi);
- detailsColumn.appendChild(phone);
+ var encodedQuery = encodeURIComponent(query); // Encode the query for URL
+ var googleMapsUrl =
+ "https://www.google.com/maps?q=" + encodedQuery;
+ window.open(googleMapsUrl, "_blank");
+ });
- }
+ detailsColumn.appendChild(toMapButton);
- // Append created elements to the list view
- infoColumn.appendChild(branchName);
- infoColumn.appendChild(branchAddress);
- infoColumn.appendChild(accessibilityList);
- branchDetails.appendChild(infoColumn);
- branchDetails.appendChild(detailsColumn);
- listItem.appendChild(branchDetails);
- listViewContainer.appendChild(listItem);
+ marker.addEventListener("click", function () {
+ listView = document.getElementById("list-view");
+ if (listView.classList.contains("hidden")) {
+ toggleListView();
+ }
+ var listItems = document.querySelectorAll(".list-item");
+ // Remove the 'selected' class from all list items
+ listItems.forEach((item) => {
+ item.classList.remove("selected");
+ });
- if (branch.type === 'Branch') {
- detailsColumn.appendChild(openingHours);
- detailsColumn.appendChild(wifi);
- detailsColumn.appendChild(phone);
- }
+ var listItem = document.querySelector(
+ '[data-marker="' + branch.name + '"]'
+ );
+ if (listItem) {
+ listItem.classList.add("selected");
+ listItem.scrollIntoView({ behavior: "smooth" });
+ }
+ });
+ });
+ })
+ .catch((error) => console.error("Error fetching data:", error));
- var longitude = branch.coordinates.Longitude;
- var latitude = branch.coordinates.Latitude;
-
- if (branch.type == 'ATM') {
- if (longitude || latitude != undefined) {
- var marker = L.marker([
- latitude,
- longitude
- ], { icon: greyIcon }).addTo(map);
- }
- } else {
- if (longitude || latitude != undefined) {
- var marker = L.marker([
- latitude,
- longitude
- ]).addTo(map);
- }
- }
- // Create the toMapButton
- var toMapButton = document.createElement('button');
- toMapButton.classList.add(
- 'map-btn'
- );
- toMapButton.innerHTML = 'Open in Google Maps';
-
- // Add a click event listener to open Google Maps with the specific latitude and longitude
- toMapButton.addEventListener('click', function () {
- var query; // Initialize query variable
- if (branch.type === 'ATM') {
- // For ATMs, use only the address
- query = branch.address;
- } else {
- // For branches, use the branch name and address for specificity
- query = "Santander Branch " + branch.address;
- }
-
- var encodedQuery = encodeURIComponent(query); // Encode the query for URL
- var googleMapsUrl = 'https://www.google.com/maps?q=' + encodedQuery;
- window.open(googleMapsUrl, '_blank');
- });
-
-
-
-
- detailsColumn.appendChild(toMapButton);
-
- marker.addEventListener('click', function () {
- listView = document.getElementById("list-view");
- if (listView.classList.contains("hidden")) {
- toggleListView();
- }
-
- var listItems = document.querySelectorAll('.list-item');
-
- // Remove the 'selected' class from all list items
- listItems.forEach(item => {
- item.classList.remove('selected');
- });
-
- var listItem = document.querySelector('[data-marker="' + branch.name + '"]');
-
- if (listItem) {
- listItem.classList.add('selected');
- listItem.scrollIntoView({ behavior: 'smooth' });
- }
- })
- })
- })
- .catch((error) => console.error("Error fetching data:", error));
-
- /*var defaultRadius = -1; // in meters, cannot make the inital default circle not appear.
+ /*var defaultRadius = -1; // in meters, cannot make the inital default circle not appear.
var circle = L.circle(
[position.coords.latitude, position.coords.longitude],
{
@@ -217,91 +237,91 @@ if ("geolocation" in navigator) {
}
).addTo(map);*/
- var slider = document.getElementById("radius-range");
- var output = document.getElementById("radius");
-
- output.innerHTML = slider.value + " miles";
-
- slider.oninput = function () {
- // Convert slider value to meters (Leaflet uses meters for radius)
- var radiusInMeters = this.value * 1609.34; // 1 mile = 1609.34 meters
-
- // Update the circle radius
- circle.setRadius(radiusInMeters);
- if (this.value == 0) {
- map.removeLayer(circle);
- } else {
- // If the slider value is not 0, show or add the circle
- if (!map.hasLayer(circle)) {
- map.addLayer(circle);
- }
- }
- // Update the output text
- if (this.value == 1) {
- output.innerHTML = this.value + " mile";
- } else {
- output.innerHTML = this.value + " miles";
- }
- };
- } catch {
- // display error if unable to load map
- var map = document.getElementById("map");
- map.innerHTML = "There was an error loading the map
"; + var slider = document.getElementById("radius-range"); + var output = document.getElementById("radius"); + + output.innerHTML = slider.value + " miles"; + + slider.oninput = function () { + // Convert slider value to meters (Leaflet uses meters for radius) + var radiusInMeters = this.value * 1609.34; // 1 mile = 1609.34 meters + + // Update the circle radius + circle.setRadius(radiusInMeters); + if (this.value == 0) { + map.removeLayer(circle); + } else { + // If the slider value is not 0, show or add the circle + if (!map.hasLayer(circle)) { + map.addLayer(circle); + } } - }); + // Update the output text + if (this.value == 1) { + output.innerHTML = this.value + " mile"; + } else { + output.innerHTML = this.value + " miles"; + } + }; + } catch { + // display error if unable to load map + var map = document.getElementById("map"); + map.innerHTML = "There was an error loading the map
"; + } + }); } else { - var map = document.getElementById("map"); - map.innerHTML = - 'Geolocation is unavailable for your browser
'; + var map = document.getElementById("map"); + map.innerHTML = + 'Geolocation is unavailable for your browser
'; } function toggleListView() { - listView = document.getElementById("list-view"); - if (listView.classList.contains("hidden")) { - listView.classList.remove("hidden"); - setTimeout(function () { - listView.classList.add("visible"); - }, 10); - } else { - listView.classList.remove("visible"); - setTimeout(function () { - listView.classList.add("hidden"); - }, 300); - } + listView = document.getElementById("list-view"); + if (listView.classList.contains("hidden")) { + listView.classList.remove("hidden"); + setTimeout(function () { + listView.classList.add("visible"); + }, 10); + } else { + listView.classList.remove("visible"); + setTimeout(function () { + listView.classList.add("hidden"); + }, 300); + } } function toggleFilterBox() { - filterBox = document.getElementById("filter-box"); - - if (filterBox.classList.contains("hidden")) { - filterBox.classList.remove("hidden"); - setTimeout(function () { - filterBox.classList.add("visible"); - }, 10); // Delay the addition of 'visible' class - } else { - filterBox.classList.remove("visible"); - setTimeout(function () { - filterBox.classList.add("hidden"); - }, 300); // Delay the addition of 'hidden' class to allow the animation to complete - } + filterBox = document.getElementById("filter-box"); + + if (filterBox.classList.contains("hidden")) { + filterBox.classList.remove("hidden"); + setTimeout(function () { + filterBox.classList.add("visible"); + }, 10); // Delay the addition of 'visible' class + } else { + filterBox.classList.remove("visible"); + setTimeout(function () { + filterBox.classList.add("hidden"); + }, 300); // Delay the addition of 'hidden' class to allow the animation to complete + } } function updateFilters() { - filterType = document.getElementById("filter-type"); - atmFilters = document.getElementById("atm-filters"); - branchFilters = document.getElementById("branch-filters"); - if (filterType.value == "branches") { - atmFilters.classList.add("hidden"); - branchFilters.classList.remove("hidden"); - branchFilters.style.borderBottom = "0px"; - } else if (filterType.value == "atms") { - branchFilters.classList.add("hidden"); - atmFilters.classList.remove("hidden"); - } else { - atmFilters.classList.remove("hidden"); - branchFilters.classList.remove("hidden"); - branchFilters.style.borderBottom = "1px solid #E5E7EB"; - } + filterType = document.getElementById("filter-type"); + atmFilters = document.getElementById("atm-filters"); + branchFilters = document.getElementById("branch-filters"); + if (filterType.value == "branches") { + atmFilters.classList.add("hidden"); + branchFilters.classList.remove("hidden"); + branchFilters.style.borderBottom = "0px"; + } else if (filterType.value == "atms") { + branchFilters.classList.add("hidden"); + atmFilters.classList.remove("hidden"); + } else { + atmFilters.classList.remove("hidden"); + branchFilters.classList.remove("hidden"); + branchFilters.style.borderBottom = "1px solid #E5E7EB"; + } } var slider = document.getElementById("radius-range"); @@ -309,9 +329,9 @@ var output = document.getElementById("radius"); output.innerHTML = slider.value + " miles"; slider.oninput = function () { - if (this.value == 1) { - output.innerHTML = this.value + " mile"; - } else { - output.innerHTML = this.value + " miles"; - } -}; \ No newline at end of file + if (this.value == 1) { + output.innerHTML = this.value + " mile"; + } else { + output.innerHTML = this.value + " miles"; + } +};