refactor: Remove js part -> model
This commit is contained in:
parent
0397311f6e
commit
b400db603a
@ -26,77 +26,10 @@
|
|||||||
<input name="inputB" maxlength="200" id="inputB">
|
<input name="inputB" maxlength="200" id="inputB">
|
||||||
<label for="id_location_string">Ort</label>
|
<label for="id_location_string">Ort</label>
|
||||||
<input name="location_string" id="id_location_string">
|
<input name="location_string" id="id_location_string">
|
||||||
<ul id="results"></ul>
|
|
||||||
<div class="container-edit-buttons">
|
|
||||||
<button class="btn" type="submit" value="search" name="search">
|
|
||||||
<i class="fas fa-search"></i> {% trans 'Suchen' %}
|
|
||||||
</button>
|
|
||||||
{% if searched %}
|
|
||||||
{% if subscribed_search %}
|
|
||||||
<button class="btn" type="submit" value="{{ subscribed_search.pk }}"
|
|
||||||
name="unsubscribe_to_search">
|
|
||||||
<i class="fas fa-bell-slash"></i> {% trans 'Suche nicht mehr abonnieren' %}
|
|
||||||
</button>
|
|
||||||
{% else %}
|
|
||||||
<button class="btn" type="submit" name="subscribe_to_search">
|
|
||||||
<i class="fas fa-bell"></i> {% trans 'Suche abonnieren' %}
|
|
||||||
</button>
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% if place_not_found %}
|
|
||||||
<p class="error">
|
|
||||||
{% trans 'Ort nicht gefunden' %}
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
</form>
|
</form>
|
||||||
<div class="card half">
|
<div class="card half">
|
||||||
{% include "fellchensammlung/partials/partial-map.html" %}
|
{% include "fellchensammlung/partials/partial-map.html" %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% include "fellchensammlung/lists/list-adoption-notices.html" %}
|
{% include "fellchensammlung/lists/list-adoption-notices.html" %}
|
||||||
|
|
||||||
<script>
|
|
||||||
const locationInput = document.getElementById('id_location_string');
|
|
||||||
const resultsList = document.getElementById('results');
|
|
||||||
const placeIdInput = document.getElementById('place_id');
|
|
||||||
|
|
||||||
locationInput.addEventListener('input', async function () {
|
|
||||||
const query = locationInput.value.trim();
|
|
||||||
|
|
||||||
if (query.length < 3) {
|
|
||||||
resultsList.innerHTML = ''; // Don't search for or show results if input is less than 3 characters
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`{{ geocoding_api_url }}/?q=${encodeURIComponent(query)}&limit=5&lang=de`);
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (data && data.features) {
|
|
||||||
resultsList.innerHTML = ''; // Clear previous results
|
|
||||||
|
|
||||||
const locations = data.features.slice(0, 5); // Show only the first 5 results
|
|
||||||
|
|
||||||
locations.forEach(location => {
|
|
||||||
const listItem = document.createElement('li');
|
|
||||||
listItem.classList.add('result-item');
|
|
||||||
listItem.textContent = geojson_to_summary(location);
|
|
||||||
|
|
||||||
// Add event when user clicks on a result location
|
|
||||||
listItem.addEventListener('click', () => {
|
|
||||||
|
|
||||||
locationInput.value = geojson_to_searchable_string(location); // Set input field to selected location
|
|
||||||
resultsList.innerHTML = ''; // Clear the results after selecting a location
|
|
||||||
});
|
|
||||||
|
|
||||||
resultsList.appendChild(listItem);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching location data:', error);
|
|
||||||
resultsList.innerHTML = '<li class="result-item">Error fetching data. Please try again.</li>';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user