Skip to content

Commit

Permalink
v2.6
Browse files Browse the repository at this point in the history 
Added History and Favourites
  • Loading branch information
@Jev1337
Jev1337 committed Dec 24, 2024
1 parent e625588 commit ca5e568
Show file tree
Hide file tree
Showing 2 changed files with 214 additions and 5 deletions.
60 changes: 55 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<!-- Put to the rightest side the image -->
<a href="https://github.com/Jev1337" target="_blank" style="float: right">
<img src="reps.png" alt="reps" width="70" height="53" style="margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px; float: right;" />
<span style="float: right; margin-top: 20px; margin-right: 10px; color: #ffffff;">Release v2.4</span>
<span style="float: right; margin-top: 20px; margin-right: 10px; color: #ffffff;">Release v2.6</span>
</a>
</nav>
<div id="panel">
Expand Down Expand Up @@ -81,10 +81,13 @@ <h4>Potential:</h4>
<hr>
<div style="text-align: center;">
<p><b>Tools</b></p>
<a id="xycord" class="btn" style="background-color:transparent"><i class="bi bi-search" style="color: #00426b; font-size: 20px;"></i></a>
<a id="copy" class="btn" style="background-color:transparent" > <i class="bi bi-copy" style="color: #00426b; font-size: 20px;"></i></a>
<a id="share" class="btn" style="background-color:transparent"> <i class="bi bi-share" style="color: #00426b; font-size: 20px;"></i></a>
<a id="googlemaps" class="btn" style="background-color:transparent"><i class="bi bi-geo-alt" style="color: #00426b; font-size: 20px;"></i></a>
<a id="xycord" class="btn" style="background-color:transparent"><i class="bi bi-search" style="color: #00426b; font-size: 28px;"></i></a>
<a id="copy" class="btn" style="background-color:transparent" > <i class="bi bi-copy" style="color: #00426b; font-size: 28px;"></i></a>
<a id="share" class="btn" style="background-color:transparent"> <i class="bi bi-share" style="color: #00426b; font-size: 28px;"></i></a>
<a id="googlemaps" class="btn" style="background-color:transparent"><i class="bi bi-geo-alt" style="color: #00426b; font-size: 28px;"></i></a>
<a id="history" class="btn" style="background-color:transparent"><i class="bi bi-clock-history" style="color: #00426b; font-size: 28px;"></i></a>
<a id="fav" class="btn" style="background-color:transparent"><i class="bi bi-star" style="color: #00426b; font-size: 28px;"></i></a>
<a id="clearhistory" class="btn" style="background-color:transparent"><i class="bi bi-trash" style="color: #00426b; font-size: 28px;"></i></a>
</div>
</div>
</div>
Expand All @@ -104,6 +107,53 @@ <h4>Potential:</h4>
<i class="bi bi-crosshair"></i>
</button>
<div id="map-display" class="dark"></div>
<div class="modal fade" id="favouritesModal" tabindex="-1" aria-labelledby="favouritesModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="favouritesModalLabel">Favourites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul id="favouritesList" class="list-group">
<!-- List of favourite locations will be appended here -->
</ul>
<hr>
<div class="mb-3">
<label for="favLat" class="form-label">Latitude</label>
<input type="text" class="form-control" id="favLat" placeholder="Example: 36.806495">
</div>
<div class="mb-3">
<label for="favLng" class="form-label">Longitude</label>
<input type="text" class="form-control" id="favLng" placeholder="Example: 10.181532">
</div>
<button type="button" class="btn btn-primary" id="addFavourite">Add Favourite</button>
<button type="button" class="btn btn-secondary" id="addCurrentLocation">Add Current Location</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="historyModalLabel">Search History</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul id="historyList" class="list-group">
<!-- List of recently searched locations will be appended here -->
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="coordinateModal" tabindex="-1" aria-labelledby="coordinateModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
Expand Down
159 changes: 159 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,14 @@ const urlParams = new URLSearchParams(window.location.search);
const lati = urlParams.get('lat');
const lngi = urlParams.get('lng');
if (lati && lngi) {
if (typeof circleMarker !== "undefined" ){
mymap.removeLayer(circleMarker);
mymap.eachLayer(function (layer) {
if (layer instanceof L.Tooltip) {
mymap.removeLayer(layer);
}
});
}
mymap.setView([lati, lngi], 17);
circleMarker = new L.circle([lati, lngi], 8, {
color: 'red',
Expand Down Expand Up @@ -160,6 +168,14 @@ document.getElementById("xycord").onclick = function() {
return;
}
coordinateModal.hide();
if (typeof circleMarker !== "undefined" ){
mymap.removeLayer(circleMarker);
mymap.eachLayer(function (layer) {
if (layer instanceof L.Tooltip) {
mymap.removeLayer(layer);
}
});
}
mymap.setView([lt, lg], 17);
circleMarker = new L.circle([lt, lg], 8, {
color: 'red',
Expand Down Expand Up @@ -363,4 +379,147 @@ async function taghtia(){
document.getElementById("more").innerHTML = "";

circleMarker.bindTooltip(stat, {permanent: true, className: 'stats'});
var history = JSON.parse(localStorage.getItem('history')) || [];
var newEntry = { lat: circleMarker._latlng.lat, lng: circleMarker._latlng.lng };
history.push(newEntry);
localStorage.setItem('history', JSON.stringify(history));
}

document.getElementById("history").onclick = function() {
var historyModal = new bootstrap.Modal(document.getElementById('historyModal'), {
keyboard: false
});

historyModal.show();

var historyList = document.getElementById('historyList');
historyList.innerHTML = '';

var history = JSON.parse(localStorage.getItem('history')) || [];

history.forEach(function(entry, index) {
var listItem = document.createElement('li');
listItem.className = 'list-group-item d-flex justify-content-between align-items-center';
var lat = Math.round(entry.lat * 10000) / 10000;
var lng = Math.round(entry.lng * 10000) / 10000;
listItem.innerHTML = `Lat: ${lat}, Lng: ${lng}`;

var goToButton = document.createElement('button');
goToButton.className = 'btn btn-primary btn-sm';
goToButton.innerHTML = '<i class="bi bi-geo-alt"></i> Go';

goToButton.onclick = function() {
if (typeof circleMarker !== "undefined" ){
mymap.removeLayer(circleMarker);
mymap.eachLayer(function (layer) {
if (layer instanceof L.Tooltip) {
mymap.removeLayer(layer);
}
});
}
mymap.setView([entry.lat, entry.lng], 17);
circleMarker = new L.circle([entry.lat, entry.lng], 8, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap);
historyModal.hide();
taghtia();
};

listItem.appendChild(goToButton);
historyList.appendChild(listItem);
});
}

document.getElementById("fav").onclick = function() {
//show favouritesModal
var favourites = JSON.parse(localStorage.getItem('favourites')) || [];

var favouritesList = document.getElementById('favouritesList');
favouritesList.innerHTML = '';

favourites.forEach(function(entry, index) {
var listItem = document.createElement('li');
listItem.className = 'list-group-item d-flex justify-content-between align-items-center';
var lat = Math.round(entry.lat * 10000) / 10000;
var lng = Math.round(entry.lng * 10000) / 10000;
listItem.innerHTML = `Lat: ${lat}, Lng: ${lng}`;

var buttonGroup = document.createElement('div');
buttonGroup.className = 'btn-group';

var goToButton = document.createElement('button');
goToButton.className = 'btn btn-primary btn-sm';
goToButton.innerHTML = '<i class="bi bi-geo-alt"></i> Go';
goToButton.onclick = function() {
if (typeof circleMarker !== "undefined" ){
mymap.removeLayer(circleMarker);
mymap.eachLayer(function (layer) {
if (layer instanceof L.Tooltip) {
mymap.removeLayer(layer);
}
});
}
mymap.setView([entry.lat, entry.lng], 17);
circleMarker = new L.circle([entry.lat, entry.lng], 8, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap);
favouritesModal.hide();
taghtia();
};

var deleteButton = document.createElement('button');
deleteButton.className = 'btn btn-danger btn-sm';
deleteButton.innerHTML = '<i class="bi bi-trash"></i> Delete';
deleteButton.onclick = function() {
favourites.splice(index, 1);
localStorage.setItem('favourites', JSON.stringify(favourites));
favouritesList.removeChild(listItem);
};

buttonGroup.appendChild(goToButton);
buttonGroup.appendChild(deleteButton);
listItem.appendChild(buttonGroup);

favouritesList.appendChild(listItem);
});

document.getElementById('addFavourite').onclick = function() {
var lat = parseFloat(document.getElementById('favLat').value);
var lng = parseFloat(document.getElementById('favLng').value);
if (isNaN(lat) || isNaN(lng)) {
alert("Please enter valid coordinates");
return;
}
var newFavourite = { lat: lat, lng: lng };
favourites.push(newFavourite);
localStorage.setItem('favourites', JSON.stringify(favourites));
favouritesModal.hide();
};

document.getElementById('addCurrentLocation').onclick = function() {
if (typeof circleMarker === "undefined") {
alert("Please select a location on the map");
return;
}
var lat = circleMarker._latlng.lat;
var lng = circleMarker._latlng.lng;
var newFavourite = { lat: lat, lng: lng };
favourites.push(newFavourite);
localStorage.setItem('favourites', JSON.stringify(favourites));
favouritesModal.hide();
};
var favouritesModal = new bootstrap.Modal(document.getElementById('favouritesModal'), {
keyboard: false
});
favouritesModal.show();

}

document.getElementById("clearhistory").onclick = function() {
localStorage.removeItem('history');
location.reload();
}

0 comments on commit ca5e568

Please sign in to comment.