Phase 4 M1: Entry enrichment — location, weather, gallery, hero image
This commit is contained in:
@@ -4,11 +4,29 @@
|
||||
<div class="post-form-wrap">
|
||||
<h1>{{ page.title }}</h1>
|
||||
{% include 'forms/form.html.twig' ignore missing %}
|
||||
<button type="button" id="get-location" class="btn-location">Get Current Location</button>
|
||||
<p id="location-status" class="location-status"></p>
|
||||
|
||||
<div class="form-actions-extra">
|
||||
<button type="button" id="get-location" class="btn-extra">📍 Get Current Location</button>
|
||||
<button type="button" id="get-weather" class="btn-extra">🌤 Get Weather</button>
|
||||
</div>
|
||||
<p id="location-status" class="field-status"></p>
|
||||
<p id="weather-status" class="field-status"></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var WMO_MAP = {
|
||||
0:'Sunny',1:'Partly cloudy',2:'Partly cloudy',3:'Cloudy',
|
||||
45:'Foggy',48:'Foggy',
|
||||
51:'Drizzle',53:'Drizzle',55:'Drizzle',56:'Drizzle',57:'Drizzle',
|
||||
61:'Rain',63:'Rain',65:'Rain',66:'Rain',67:'Rain',80:'Rain',81:'Rain',82:'Rain',
|
||||
71:'Snow',73:'Snow',75:'Snow',77:'Snow',85:'Snow',86:'Snow',
|
||||
95:'Thunderstorm',96:'Thunderstorm',99:'Thunderstorm'
|
||||
};
|
||||
|
||||
function getField(name) {
|
||||
return document.querySelector('input[name="data[' + name + ']"]');
|
||||
}
|
||||
|
||||
document.getElementById('get-location').addEventListener('click', function() {
|
||||
var status = document.getElementById('location-status');
|
||||
status.textContent = 'Getting location…';
|
||||
@@ -19,14 +37,45 @@ document.getElementById('get-location').addEventListener('click', function() {
|
||||
navigator.geolocation.getCurrentPosition(function(pos) {
|
||||
var lat = pos.coords.latitude.toFixed(6);
|
||||
var lng = pos.coords.longitude.toFixed(6);
|
||||
var latField = document.querySelector('input[name="data[lat]"]');
|
||||
var lngField = document.querySelector('input[name="data[lng]"]');
|
||||
var latField = getField('lat');
|
||||
var lngField = getField('lng');
|
||||
if (latField) latField.value = lat;
|
||||
if (lngField) lngField.value = lng;
|
||||
status.textContent = 'Location set: ' + lat + ', ' + lng;
|
||||
status.textContent = '📍 Location set: ' + lat + ', ' + lng;
|
||||
}, function(err) {
|
||||
status.textContent = 'Could not get location: ' + err.message;
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('get-weather').addEventListener('click', function() {
|
||||
var status = document.getElementById('weather-status');
|
||||
var latField = getField('lat');
|
||||
var lngField = getField('lng');
|
||||
var lat = latField ? latField.value.trim() : '';
|
||||
var lng = lngField ? lngField.value.trim() : '';
|
||||
if (!lat || !lng) {
|
||||
status.textContent = 'Enter or get coordinates first.';
|
||||
return;
|
||||
}
|
||||
status.textContent = 'Fetching weather…';
|
||||
var url = 'https://api.open-meteo.com/v1/forecast?latitude=' + lat +
|
||||
'&longitude=' + lng +
|
||||
'¤t=temperature_2m,weather_code&temperature_unit=celsius';
|
||||
fetch(url)
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(data) {
|
||||
var temp = Math.round(data.current.temperature_2m);
|
||||
var code = data.current.weather_code;
|
||||
var desc = WMO_MAP[code] || 'Cloudy';
|
||||
var tempField = getField('weather_temp_c');
|
||||
var descField = getField('weather_desc');
|
||||
if (tempField) tempField.value = temp;
|
||||
if (descField) descField.value = desc;
|
||||
status.textContent = '🌤 Weather set: ' + desc + ' · ' + temp + '°C';
|
||||
})
|
||||
.catch(function() {
|
||||
status.textContent = 'Could not fetch weather — enter manually if needed.';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user