104 lines
3.4 KiB
PHP
104 lines
3.4 KiB
PHP
<?php
|
|
// universal bulma CSS styled form
|
|
// arguments:
|
|
// - title
|
|
// - form
|
|
|
|
echo render('_header', ['title'=>$title ?? null]);
|
|
|
|
if (!empty($title)) {
|
|
echo '<h1>'.$title.'</h1>';
|
|
}
|
|
|
|
$F = new severak\forms\html($form);
|
|
echo $F->open();
|
|
|
|
foreach ($F->fields as $fieldName) {
|
|
if ($form->fields[$fieldName]['type']=='submit' && isset($form->fields['lon']) && isset($form->fields['lat'])) {
|
|
echo <<<MAP
|
|
<div class="field">
|
|
<div id="map"></div>
|
|
</div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
|
|
<script src="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.js"></script>
|
|
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
|
|
<script src="/static/Leaflet.Editable.js"></script>
|
|
<script src="/static/leaflet-sidebar.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
|
|
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.css" />
|
|
<style>
|
|
#map {
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
<script>
|
|
function webgl_support() {
|
|
try {
|
|
var canvas = document.createElement('canvas');
|
|
return !!window.WebGLRenderingContext &&
|
|
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function detectMob() {
|
|
return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
|
|
}
|
|
|
|
var lon = document.getElementById('form_lon').value;
|
|
var lat = document.getElementById('form_lat').value;
|
|
|
|
if (lon == 0 && lat ==0) {
|
|
lat = 50.08536; lon = 14.42040;
|
|
}
|
|
|
|
var map = L.map('map', {editable: true}).setView([lat, lon], 15);
|
|
|
|
if (!webgl_support() || detectMob()) {
|
|
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
} else {
|
|
var gl = L.mapboxGL({
|
|
attribution: "\u003ca href=\"https://svita.cz/\"\u003eSvita.cz\u003c/a\u003e \u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
|
|
style: 'https://api.maptiler.com/maps/28280352-f69a-45fd-8dd7-2f178d7ed64f/style.json?key=lFBi7gs1S6TyJPtVVvOX'
|
|
}).addTo(map);
|
|
}
|
|
var marker = L.marker([lat, lon]).addTo(map);
|
|
marker.enableEdit();
|
|
marker.on('editable:dragend', function(evt) {
|
|
if (evt.distance > 0) {
|
|
var newCoords = evt.layer._latlng;
|
|
document.getElementById('form_lat').value = newCoords.lat;
|
|
document.getElementById('form_lon').value = newCoords.lng;
|
|
}
|
|
})
|
|
</script>
|
|
MAP;
|
|
|
|
}
|
|
|
|
echo '<div class="field">';
|
|
|
|
echo $F->label($fieldName, ['class'=>'label']);
|
|
|
|
echo '<div class="control">';
|
|
$attr = ['class'=>'input'];
|
|
if ($form->fields[$fieldName]['type']=='submit') $attr['class'] = 'button is-primary';
|
|
if ($form->fields[$fieldName]['type']=='textarea') $attr['class'] = 'textarea';
|
|
if ($form->fields[$fieldName]['type']=='checkbox') $attr['class'] = 'checkbox';
|
|
|
|
echo $F->field($fieldName, $attr);
|
|
if (!empty($form->errors[$fieldName])) {
|
|
echo ' <p class="help is-danger">' . htmlspecialchars($form->errors[$fieldName]) . '</p>';
|
|
}
|
|
echo '</div></div>';
|
|
}
|
|
|
|
echo $F->close();
|
|
|
|
echo render('_footer');
|