WIP: editace POI a detail POI na webu.
This commit is contained in:
parent
6cddfd786b
commit
d3c14def4e
116
app.php
116
app.php
|
@ -18,27 +18,26 @@ $singletons['rows'] = function(){
|
||||||
route('', '/', function (){
|
route('', '/', function (){
|
||||||
// if (!user()) return redirect('/login/');
|
// if (!user()) return redirect('/login/');
|
||||||
$rows = di('rows');
|
$rows = di('rows');
|
||||||
|
|
||||||
$Parsedown = new Parsedown();
|
$Parsedown = new Parsedown();
|
||||||
$pois = $rows->more('poi', [], [], 999);
|
$pois = $rows->more('poi', [], [], 999);
|
||||||
$geojson = ['type'=>'FeatureCollection', 'features'=>[]];
|
$geojson = pois2geojson($pois, $Parsedown);
|
||||||
foreach ($pois as $poi) {
|
|
||||||
$geojson['features'][] = [
|
|
||||||
'type' => 'Feature',
|
|
||||||
'properties' => [
|
|
||||||
'name' => $poi['name'],
|
|
||||||
'description' => $Parsedown->text($poi['description']),
|
|
||||||
'cheatsheet' => $Parsedown->text($poi['cheatsheet'])
|
|
||||||
],
|
|
||||||
'geometry'=>[
|
|
||||||
'type'=>'Point',
|
|
||||||
'coordinates'=>[$poi['lon'], $poi['lat']]
|
|
||||||
]
|
|
||||||
];
|
|
||||||
}
|
|
||||||
return render('poi', ['geojson'=>$geojson]);
|
return render('poi', ['geojson'=>$geojson]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
route('', '/poi/{slug}/', function ($req, $params){
|
||||||
|
$rows = di('rows');
|
||||||
|
$poi = $rows->one('poi', ['slug'=>$params['slug']]);
|
||||||
|
if (!$poi) return notFound();
|
||||||
|
$Parsedown = new Parsedown();
|
||||||
|
|
||||||
|
$poi['description'] = $Parsedown->text($poi['description']);
|
||||||
|
$poi['cheatsheet'] = $Parsedown->text($poi['cheatsheet']);
|
||||||
|
|
||||||
|
$pois = $rows->more('poi', [], [], 999);
|
||||||
|
$geojson = pois2geojson($pois, $Parsedown);
|
||||||
|
return render('poi', ['geojson'=>$geojson, 'poi'=>$poi]);
|
||||||
|
});
|
||||||
|
|
||||||
route('', '/login/', function ($req){
|
route('', '/login/', function ($req){
|
||||||
/** @var Psr\Http\Message\ServerRequestInterface $req */
|
/** @var Psr\Http\Message\ServerRequestInterface $req */
|
||||||
/** @var severak\database\rows $rows */
|
/** @var severak\database\rows $rows */
|
||||||
|
@ -109,16 +108,20 @@ route('', '/zmena-hesla/', function ($req){
|
||||||
});
|
});
|
||||||
|
|
||||||
$singletons['poi_form'] = function () {
|
$singletons['poi_form'] = function () {
|
||||||
$form = new severak\forms\form();
|
$form = new severak\forms\form(['method'=>'post']);
|
||||||
$form->field('name', ['label'=>'Název']);
|
$form->field('name', ['label'=>'Název', 'required'=>true]);
|
||||||
$form->field('description', ['label'=>'Popis', 'type'=>'textarea']);
|
$form->field('description', ['label'=>'Popis', 'type'=>'textarea']);
|
||||||
$form->field('cheatsheet', ['label'=>'Tahák', 'type'=>'textarea']);
|
$form->field('cheatsheet', ['label'=>'Tahák', 'type'=>'textarea']);
|
||||||
$form->field('internal', ['label'=>'Poznámka', 'type'=>'textarea']);
|
$form->field('internal', ['label'=>'Poznámka', 'type'=>'textarea']);
|
||||||
$form->field('is_public', ['label'=>'Zveřejněno?', 'type'=>'checkbox']);
|
$form->field('is_public', ['label'=>'Zveřejněno?', 'type'=>'checkbox']);
|
||||||
$form->field('lan', ['type'=>'hidden']);
|
$form->field('lon', ['type'=>'hidden']);
|
||||||
$form->field('lot', ['type'=>'hidden']);
|
$form->field('lat', ['type'=>'hidden']);
|
||||||
$form->field('_sbt', ['label'=>'Uložit?', 'type'=>'submit']);
|
$form->field('_sbt', ['label'=>'Uložit?', 'type'=>'submit']);
|
||||||
|
|
||||||
|
$form->rule('lon', function ($v, $o) {
|
||||||
|
return !empty($o['lon']) && !empty($o['lat']);
|
||||||
|
}, 'Musí být vyplněny souřadnice');
|
||||||
|
|
||||||
return $form;
|
return $form;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -149,15 +152,18 @@ route('', '/pois/add/', function ($req){
|
||||||
if ($req->getMethod()=='POST') {
|
if ($req->getMethod()=='POST') {
|
||||||
$form->fill($req->getParsedBody());
|
$form->fill($req->getParsedBody());
|
||||||
if ($form->validate()) {
|
if ($form->validate()) {
|
||||||
|
$slug = slugify($form->values['name']);
|
||||||
$rows->insert('poi', [
|
$rows->insert('poi', [
|
||||||
'name'=>$form->values['name'],
|
'name'=>$form->values['name'],
|
||||||
'description'=>$form->values['description'],
|
'description'=>$form->values['description'],
|
||||||
'cheatsheet'=>$form->values['cheatsheet'],
|
'cheatsheet'=>$form->values['cheatsheet'],
|
||||||
'internal'=>$form->values['internal'],
|
'internal'=>$form->values['internal'],
|
||||||
'slug'=>slugify($form->values['name']),
|
'slug'=>$slug,
|
||||||
|
'lon'=>$form->values['lon'],
|
||||||
|
'lat'=>$form->values['lat'],
|
||||||
'is_public'=>$form->values['is_public'] ?? 0,
|
'is_public'=>$form->values['is_public'] ?? 0,
|
||||||
]);
|
]);
|
||||||
return redirect('/pois/edit/');
|
return redirect('/poi/' . $slug . '/');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -179,15 +185,18 @@ route('', '/pois/edit/{id}/', function ($req, $params){
|
||||||
if ($req->getMethod()=='POST') {
|
if ($req->getMethod()=='POST') {
|
||||||
$form->fill($req->getParsedBody());
|
$form->fill($req->getParsedBody());
|
||||||
if ($form->validate()) {
|
if ($form->validate()) {
|
||||||
/*$rows->update('items', [
|
$slug = slugify($form->values['name']);
|
||||||
|
$rows->update('poi', [
|
||||||
'name'=>$form->values['name'],
|
'name'=>$form->values['name'],
|
||||||
'price'=>$form->values['price'],
|
'description'=>$form->values['description'],
|
||||||
'note'=>$form->values['note'],
|
'cheatsheet'=>$form->values['cheatsheet'],
|
||||||
'ord'=>$form->values['ord'],
|
'internal'=>$form->values['internal'],
|
||||||
'amount'=>$form->values['amount'],
|
'slug'=>$slug,
|
||||||
'is_amount_tracked'=>$form->values['is_amount_tracked'],
|
'lon'=>$form->values['lon'],
|
||||||
|
'lat'=>$form->values['lat'],
|
||||||
|
'is_public'=>$form->values['is_public'] ?? 0,
|
||||||
], $params['id']);
|
], $params['id']);
|
||||||
return redirect('/sklad/');*/
|
return redirect('/poi/' . $slug . '/');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -345,3 +354,52 @@ route('', '/obsluha/upravit/{id}/', function ($req, $params){
|
||||||
|
|
||||||
return render('form', ['form'=>$form, 'title'=>'Upravit obsluhu']);
|
return render('form', ['form'=>$form, 'title'=>'Upravit obsluhu']);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function pois2geojson($pois, $Parsedown)
|
||||||
|
{
|
||||||
|
$geojson = ['type'=>'FeatureCollection', 'features'=>[]];
|
||||||
|
foreach ($pois as $poi) {
|
||||||
|
$geojson['features'][] = [
|
||||||
|
'type' => 'Feature',
|
||||||
|
'properties' => [
|
||||||
|
'name' => $poi['name'],
|
||||||
|
'description' => $Parsedown->text($poi['description']),
|
||||||
|
'cheatsheet' => $Parsedown->text($poi['cheatsheet']),
|
||||||
|
'slug' => $poi['slug'],
|
||||||
|
'id' => $poi['id'],
|
||||||
|
],
|
||||||
|
'geometry'=>[
|
||||||
|
'type'=>'Point',
|
||||||
|
'coordinates'=>[$poi['lon'], $poi['lat']]
|
||||||
|
]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
return $geojson;
|
||||||
|
}
|
||||||
|
|
||||||
|
function slugify($text, $divider = '-')
|
||||||
|
{
|
||||||
|
// replace non letter or digits by divider
|
||||||
|
$text = preg_replace('~[^\pL\d]+~u', $divider, $text);
|
||||||
|
|
||||||
|
// transliterate
|
||||||
|
$text = iconv('utf-8', 'us-ascii//TRANSLIT', $text);
|
||||||
|
|
||||||
|
// remove unwanted characters
|
||||||
|
$text = preg_replace('~[^-\w]+~', '', $text);
|
||||||
|
|
||||||
|
// trim
|
||||||
|
$text = trim($text, $divider);
|
||||||
|
|
||||||
|
// remove duplicate divider
|
||||||
|
$text = preg_replace('~-+~', $divider, $text);
|
||||||
|
|
||||||
|
// lowercase
|
||||||
|
$text = strtolower($text);
|
||||||
|
|
||||||
|
if (empty($text)) {
|
||||||
|
return 'n-a';
|
||||||
|
}
|
||||||
|
|
||||||
|
return $text;
|
||||||
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
74
tpl/form.php
74
tpl/form.php
|
@ -14,9 +14,75 @@ $F = new severak\forms\html($form);
|
||||||
echo $F->open();
|
echo $F->open();
|
||||||
|
|
||||||
foreach ($F->fields as $fieldName) {
|
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 '<div class="field">';
|
||||||
|
|
||||||
echo $F->label($fieldName, ['class'=>'label']);
|
echo $F->label($fieldName, ['class'=>'label']);
|
||||||
|
|
||||||
echo '<div class="control">';
|
echo '<div class="control">';
|
||||||
|
@ -24,7 +90,7 @@ foreach ($F->fields as $fieldName) {
|
||||||
if ($form->fields[$fieldName]['type']=='submit') $attr['class'] = 'button is-primary';
|
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']=='textarea') $attr['class'] = 'textarea';
|
||||||
if ($form->fields[$fieldName]['type']=='checkbox') $attr['class'] = 'checkbox';
|
if ($form->fields[$fieldName]['type']=='checkbox') $attr['class'] = 'checkbox';
|
||||||
|
|
||||||
echo $F->field($fieldName, $attr);
|
echo $F->field($fieldName, $attr);
|
||||||
if (!empty($form->errors[$fieldName])) {
|
if (!empty($form->errors[$fieldName])) {
|
||||||
echo ' <p class="help is-danger">' . htmlspecialchars($form->errors[$fieldName]) . '</p>';
|
echo ' <p class="help is-danger">' . htmlspecialchars($form->errors[$fieldName]) . '</p>';
|
||||||
|
@ -34,4 +100,4 @@ foreach ($F->fields as $fieldName) {
|
||||||
|
|
||||||
echo $F->close();
|
echo $F->close();
|
||||||
|
|
||||||
echo render('_footer');
|
echo render('_footer');
|
||||||
|
|
18
tpl/poi.php
18
tpl/poi.php
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title><?php if (isset($title)) echo $title . ' - ' ; ?>Průvodce</title>
|
<title><?php if (isset($poi['name'])) echo $poi['name'] . ' - ' ; ?>průvodce Matička Metropolis</title>
|
||||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
||||||
<script src="/static/uboot.js"></script>
|
<script src="/static/uboot.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
|
||||||
|
@ -39,17 +39,23 @@
|
||||||
<div class="sidebar-content">
|
<div class="sidebar-content">
|
||||||
<div class="sidebar-pane" id="home">
|
<div class="sidebar-pane" id="home">
|
||||||
<h1 class="sidebar-header">
|
<h1 class="sidebar-header">
|
||||||
<span id="article-name">Turistický průvodce</span>
|
<span id="article-name"><?php if (isset($poi['name'])) { echo $poi['name']; } else { echo'Turistický průvodce'; } ?></span>
|
||||||
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div id="article-text">
|
<div id="article-text">
|
||||||
|
<?php if (isset($poi['description'])) { echo $poi['description']; } else { ?>
|
||||||
<p>Matička Metropolis...</p>
|
<p>Matička Metropolis...</p>
|
||||||
<p>Stránka je v přípravě.</p>
|
<p>Stránka je v přípravě.</p>
|
||||||
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="article-cheat">
|
<div id="article-cheat">
|
||||||
|
<?php if (isset($poi['description'])) { echo $poi['cheatsheet']; } ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<a href="#" id="article-link">odkaz na stránku</a>
|
||||||
|
<a href="#" id="article-edit-link" <?php if (!user()) echo 'style="display: none;"'; ?>>upravit</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -77,7 +83,7 @@ function detectMob() {
|
||||||
|
|
||||||
whenReady(function () {
|
whenReady(function () {
|
||||||
|
|
||||||
var map = L.map('map').setView([50.08536, 14.42040], 15);
|
var map = L.map('map').setView([<?php if (isset($poi['lon'])) { echo $poi['lat'] . ',' . $poi['lon']; } else { echo '50.08536, 14.42040';} ?>], 15);
|
||||||
|
|
||||||
if (!webgl_support() || detectMob()) {
|
if (!webgl_support() || detectMob()) {
|
||||||
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
@ -100,12 +106,12 @@ whenReady(function () {
|
||||||
document.getElementById('article-name').innerText = layer.layer.feature.properties.name;
|
document.getElementById('article-name').innerText = layer.layer.feature.properties.name;
|
||||||
document.getElementById('article-text').innerHTML = layer.layer.feature.properties.description;
|
document.getElementById('article-text').innerHTML = layer.layer.feature.properties.description;
|
||||||
document.getElementById('article-cheat').innerHTML = layer.layer.feature.properties.cheatsheet;
|
document.getElementById('article-cheat').innerHTML = layer.layer.feature.properties.cheatsheet;
|
||||||
|
document.getElementById('article-link').href = '/poi/' + layer.layer.feature.properties.slug + '/';
|
||||||
|
document.getElementById('article-edit-link').href = '/pois/edit/' + layer.layer.feature.properties.id + '/';
|
||||||
sidebar.open('home');
|
sidebar.open('home');
|
||||||
|
|
||||||
|
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
|
<?php if (isset($poi['name'])) { ?>sidebar.open('home');<?php } ?>
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue