pruvodce/tpl/form.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: '&copy; <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');