Skip to content

Commit

Permalink
Map fixes
Browse files Browse the repository at this point in the history 
Added delete / restore to keyboard help
Goto time no longer remembers last time input
  • Loading branch information
@Mattk70
Mattk70 committed Nov 11, 2023
1 parent a5cf4a0 commit 0e25e3a
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 127 deletions.
13 changes: 12 additions & 1 deletion Help/keyboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,18 @@
<tr>
<td><b>Ctrl-F</b></td>
<td>Toggle Fullscreen mode</td>
</tr>
</tr>
<tr>
<td colspan="2" class="text-center bg-dark text-white"><h5>Records</h5></td>
</tr>
<tr>
<td><b>Delete</b> or <b>Backspace</b></td>
<td>Delete current record</td>
</tr>
<tr>
<td><b>Ctrl-Z</b></td>
<td>Restore deleted record(s)</td>
</tr>
</table>

</body>
Expand Down
4 changes: 4 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ body {
padding-bottom: 0;
}

.leaflet-marker-icon-default {
filter: hue-rotate(150deg)
}

.navbar {
z-index: 5;
}
Expand Down
145 changes: 78 additions & 67 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1112,6 +1112,82 @@ <h5 class="modal-title" id="gotoModalLabel">Set Location</h5>
<script defer src="./js/ui.js"></script>
<script>
let map, marker;
async function onMapClick(e) {
const {lat, lng} = e.latlng;
const target = map.getContainer().id;
if (target === 'settingsMap'){
const latEl = document.getElementById('latitude')
const lonEl = document.getElementById('longitude')
latEl.value = config.latitude = lat.toFixed(2);
lonEl.value = config.longitude = lng.toFixed(2);
const placeEl = document.getElementById('place');
placeEl.innerHTML = 'Fetching...'
} else {
const latEl = document.getElementById('customLat')
const lonEl = document.getElementById('customLon')
latEl.value = lat.toFixed(2);
lonEl.value = lng.toFixed(2);
const customPlaceEl = document.getElementById('customPlace');
customPlaceEl.value = 'Fetching...'
}
updateMap(lat, lng);
displayLocationAddress(target);
// Stop propagation of the click event to the map
L.DomEvent.stopPropagation(e);
}

const showMap = (where) => {
if (where === 'customLocationMap' && LOCATIONS.length){
const markerGroup = L.featureGroup(); // Create a feature group to hold the markers
const bounds = L.latLngBounds(); // Create bounds to include all markers
// Add default location
const marker = L.marker([config.latitude, config.longitude]).addTo(markerGroup);

bounds.extend(marker.getLatLng()); // Extend the bounds to include this marker

LOCATIONS.forEach(markerData => {
const { lat, lon } = markerData;

const marker = L.marker([lat, lon]).addTo(markerGroup);

bounds.extend(marker.getLatLng()); // Extend the bounds to include this marker
});

map.fitBounds(bounds)
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 15,
minZoom: 3,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
markerGroup.addTo(map)
const firstMarkerEl = document.querySelector('.leaflet-marker-icon')
firstMarkerEl.classList.add('leaflet-marker-icon-default')
markerGroup.on('click', function (e) {
onMapClick(e)
});
} else{
map.setView([config.latitude, config.longitude], 11);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 15,
minZoom: 3,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
if (!marker) marker = L.marker([config.latitude, config.longitude]).addTo(map);
const firstMarkerEl = document.querySelector('.leaflet-marker-icon')
firstMarkerEl.classList.add('leaflet-marker-icon-default')
marker.on('click', onMapClick);
}
}
const latLonElements = ['latitude', 'longitude', 'customLat', 'customLon'];
latLonElements.forEach(el => {
const where = el.indexOf('custom') > -1 ? 'customLocationMap' : 'settingsMap';
el = document.getElementById(el);
el.addEventListener('change', () => {
showMap(where);
displayLocationAddress(where);
});
})

function updateMap(lat,lng){
// Update the marker's position
if (!marker) marker = L.marker([lat, lng]).addTo(map);
Expand All @@ -1129,77 +1205,12 @@ <h5 class="modal-title" id="gotoModalLabel">Set Location</h5>
latTxt = 'customLat';
lonTxt = 'customLon';
}
const showMap = (where) => {
if (where === 'customLocationMap' && LOCATIONS.length){
const markerGroup = L.featureGroup(); // Create a feature group to hold the markers

const bounds = L.latLngBounds(); // Create bounds to include all markers

LOCATIONS.forEach(markerData => {
const { lat, lon } = markerData;

const marker = L.marker([lat, lon]).addTo(markerGroup);

bounds.extend(marker.getLatLng()); // Extend the bounds to include this marker
});
map.fitBounds(bounds)
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 15,
minZoom: 3,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
markerGroup.addTo(map)
markerGroup.on('click', function (e) {
onMapClick(e)
});

} else{
const latEl = document.getElementById(latTxt);
const lonEl = document.getElementById(lonTxt);

// Ensure lat and lon values are parsed as floats
const latValue = parseFloat(latEl.value);
const lonValue = parseFloat(lonEl.value);

map.setView([latValue, lonValue], 11);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 15,
minZoom: 3,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
if (!marker) marker = L.marker([latValue, lonValue]).addTo(map);
marker.on('click', onMapClick);
}
}

const latEl = document.getElementById(latTxt);
const lonEl = document.getElementById(lonTxt);

latEl.addEventListener('change', showMap);
lonEl.addEventListener('change', showMap);
// const settingMenu = document.getElementById('navbarSettings')
// settingMenu.addEventListener('click', showMap);
showMap(divID);
async function onMapClick(e) {
const {lat, lng} = e.latlng;
const target = e.originalEvent.srcElement.id;
if (target === 'settingsMap'){
latEl.value = config.latitude = lat.toFixed(2);
lonEl.value = config.longitude = lng.toFixed(2);
} else {
latEl.value = lat.toFixed(2);
lonEl.value = lng.toFixed(2);
}

const address = await fetchLocationAddress(lat.toFixed(2), lng.toFixed(2));
fillLocation(address, lat, lng, target);
updateMap(lat, lng)
// Stop propagation of the click event to the map
L.DomEvent.stopPropagation(e);
updatePrefs();
}
showMap(divID);
map.on('click', onMapClick);

}

</script>
Expand Down
96 changes: 38 additions & 58 deletions js/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -583,26 +583,46 @@ const showLocation = async (fromSelect) => {
if (id) {
newLocation = LOCATIONS.find(obj => obj.id === id);
//locationSelect.value = id;
latEl.value = newLocation.lat, lonEl.value = newLocation.lon, customPlaceEl.value = newLocation.place;
updateMap(newLocation.lat, newLocation.lon)
if (newLocation){
latEl.value = newLocation.lat, lonEl.value = newLocation.lon, customPlaceEl.value = newLocation.place;
} else {
latEl.value = config.latitude, lonEl.value = config.longitude, customPlaceEl.value = config.location;
}
}
else { //Default location
const savedLocationSelect = await generateLocationList('savedLocations');
latEl.value = config.latitude, lonEl.value = config.longitude, customPlaceEl.value = config.location;
}
// make sure the map is initialised
if (!map) placeMap('customLocationMap')
updateMap(latEl.value, lonEl.value)
}

const displayLocationAddress = async () => {
const latEl = document.getElementById('customLat');
const lonEl = document.getElementById('customLon');
const customPlaceEl = document.getElementById('customPlace');
const place = await fetchLocationAddress(latEl.value, lonEl.value, false);
if (place) {
customPlaceEl.value = place;
}
else {
customPlaceEl.value = 'Location not available';
customPlaceEl.ariaPlaceholder = 'Location not available';
const displayLocationAddress = async (where) => {
const custom = where.indexOf('custom') > -1;
let latEl, lonEl, placeEl, place;
if (custom){
latEl = document.getElementById('customLat');
lonEl = document.getElementById('customLon');
placeEl = document.getElementById('customPlace');
address = await fetchLocationAddress(latEl.value, lonEl.value, false);
placeEl.value = address ? address : 'Location not available';
} else {
latEl = document.getElementById('latitude');
lonEl = document.getElementById('longitude');
placeEl = document.getElementById('place');
address = await fetchLocationAddress(latEl.value, lonEl.value, false);
const content = '<span class="material-symbols-outlined">fmd_good</span> ' + address;
placeEl.innerHTML = content;
config.latitude = parseFloat(latEl.value).toFixed(2);
config.longitude = parseFloat(lonEl.value).toFixed(2);
config.location = address;
updatePrefs();
worker.postMessage({
action: 'update-state',
lat: config.latitude,
lon: config.longitude,
});
}
}

Expand Down Expand Up @@ -641,11 +661,6 @@ async function setLocation() {
const locationForm = document.getElementById('locationForm');



[latEl, lonEl].forEach(el => {
el.addEventListener('blur', displayLocationAddress)
})

const addLocation = () => {
locationID = parseInt(savedLocationSelect.value);
const batch = document.getElementById('batchLocations').checked;
Expand Down Expand Up @@ -718,6 +733,8 @@ function resetDiagnostics() {
delete DIAGNOSTICS['Audio Duration'];
delete DIAGNOSTICS['Analysis Rate'];
delete DIAGNOSTICS['Analysis Duration'];
//reset delete history too
DELETE_HISTORY = [];
}

// Worker listeners
Expand Down Expand Up @@ -839,12 +856,6 @@ function postAnalyseMessage(args) {
}


/// Lat / lon
// const place = document.getElementById('place')
// $('#latitude, #longitude').on('focus', function () {
// document.removeEventListener('keydown', handleKeyDownDeBounce, true);
// })

function fetchLocationAddress(lat, lon) {
return new Promise(async (resolve, reject) => {
if (!LOCATIONS) {
Expand Down Expand Up @@ -872,39 +883,6 @@ function fetchLocationAddress(lat, lon) {
})
})
}
$('#latitude, #longitude').on('blur', async function () {
const lat = parseFloat(document.getElementById('latitude').value).toFixed(2);
const lon = parseFloat(document.getElementById('longitude').value).toFixed(2);
const address = await fetchLocationAddress(lat, lon, true);
fillLocation(address, lat, lon)
updateMap
})

const fillLocation = (address, lat, lon, divID) =>{

if (divID === 'settingsMap') {
const content = '<span class="material-symbols-outlined">fmd_good</span> ' + address;
place.innerHTML = content;
config.latitude = lat.toFixed(2);
config.longitude = lon.toFixed(2);
config.location = address;
updatePrefs();
worker.postMessage({
action: 'update-state',
lat: config.latitude,
lon: config.longitude,
});
} else {
const latEl = document.getElementById('customLat');
const lonEl = document.getElementById('customLon');
const customPlaceEl = document.getElementById('customPlace');
latEl.value = lat.toFixed(2);
lonEl.value = lon.toFixed(2);
customPlaceEl.value = address;
updateMap(lat, lon);
}

}


// Menu bar functions
Expand Down Expand Up @@ -2391,7 +2369,9 @@ const gotoModal = document.getElementById('gotoModal')
//gotoModal.addEventListener('hidden.bs.modal', enableKeyDownEvent)

gotoModal.addEventListener('shown.bs.modal', () => {
document.getElementById('timeInput').focus()
const timeInput = document.getElementById('timeInput')
timeInput.value = '';
timeInput.focus()
})


Expand Down
2 changes: 1 addition & 1 deletion js/worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1795,7 +1795,7 @@ const parsePredictions = async (response) => {
console.log(`Prediction done ${filesBeingProcessed.length} files to go`);
console.log('Analysis took ' + (new Date() - predictionStart) / 1000 + ' seconds.');
}
getSummary({ interim: true });
if (!STATE.selection) getSummary({ interim: true });
return response.worker
}

Expand Down

0 comments on commit 0e25e3a

Please sign in to comment.