363 lines
12 KiB
PHP
363 lines
12 KiB
PHP
|
<?php
|
||
|
|
ini_set('display_errors', 1);
|
||
|
|
ini_set('display_startup_errors', 1);
|
||
|
|
|
||
|
|
if(!isset($_SESSION)) session_start();
|
||
|
|
|
||
|
|
$GLOBALS['debugData'] = "";
|
||
|
|
$GLOBALS['phpErrors'] = "";
|
||
|
|
$GLOBALS['sqlErrors'] = "";
|
||
|
|
include('server/debugfunctions.php');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
mysqli_report(MYSQLI_REPORT_ERROR);
|
||
|
|
set_error_handler("errorhandler", E_ALL);
|
||
|
|
|
||
|
|
include('server/server.php');
|
||
|
|
|
||
|
|
|
||
|
|
// 0 = museum, 1 = galerie, 2 = akademie, 3 = venue, 4 = stiftung
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
?>
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="keywords" content="">
|
||
|
|
<meta name="author" content="">
|
||
|
|
<meta name="date" content="" scheme="YYYY-MM-DD">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title></title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="styles/style.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="scripts/leaflet/leaflet.css">
|
||
|
|
<script src="scripts/jquery-3.3.1.min.js"></script>
|
||
|
|
<script src="scripts/p5.min.js"></script>
|
||
|
|
<script src="scripts/leaflet/leaflet.js"></script>
|
||
|
|
<!--
|
||
|
|
<script src="sketch.js"></script>
|
||
|
|
-->
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<script>
|
||
|
|
let newWindow = false;
|
||
|
|
let overlayWindow = false;
|
||
|
|
|
||
|
|
|
||
|
|
var selected = 0;
|
||
|
|
function overlay(leaflet_id){
|
||
|
|
overlayWindow = true;
|
||
|
|
let entry;
|
||
|
|
for(var i = 0; i < pointList.length; i++){
|
||
|
|
if(leaflet_id == pointList[i][1]){
|
||
|
|
entry = points[i];
|
||
|
|
selected = entry[0];
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
console.log(entry);
|
||
|
|
//$('#overlay').empty();
|
||
|
|
|
||
|
|
$('#overlayTitle').html('<h2>' + entry[1] + '</h2>');
|
||
|
|
//$('#overlayBody').empty();
|
||
|
|
//if entry[4] is not null ...
|
||
|
|
//$('#overlayBody').html('<div class="fb-page" data-href="https://www.facebook.com/pg/' + entry[4] + '/" data-tabs="timeline" data-width="' + overlayWidth + '" data-height="' + overlayHeight + '" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>');
|
||
|
|
//$('#overlayBody').load('facebook.php?page=HBKsaar');
|
||
|
|
$('#overlayBody').attr('src', 'facebook.php?page=HBKsaar&height=' + overlayHeight.toString());
|
||
|
|
$('#overlay').show();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$('#mapmenu').hide();
|
||
|
|
}
|
||
|
|
|
||
|
|
function trash(){
|
||
|
|
location.href = "server/server.php?delete=" + selected;
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeOverlay(){
|
||
|
|
overlayWindow = false;
|
||
|
|
$('#overlay').hide();
|
||
|
|
$('#mapmenu').show();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function map(){
|
||
|
|
$('#map').show();
|
||
|
|
$('#mapLink').hide();
|
||
|
|
$('#listLink').show();
|
||
|
|
$('#mapmenu').show();
|
||
|
|
$('#listmenu').hide();
|
||
|
|
overlayWindow = false;
|
||
|
|
$('#overlay').hide();
|
||
|
|
}
|
||
|
|
|
||
|
|
function listings(){
|
||
|
|
$('#map').hide();
|
||
|
|
$('#listLink').hide();
|
||
|
|
$('#mapLink').show();
|
||
|
|
$('#mapmenu').hide();
|
||
|
|
overlayWindow = false;
|
||
|
|
$('#overlay').hide();
|
||
|
|
$('#listmenu').show();
|
||
|
|
}
|
||
|
|
|
||
|
|
function markerClass(type){
|
||
|
|
switch(type){
|
||
|
|
case(0):
|
||
|
|
return '.museum-marker';
|
||
|
|
//$('.museum-marker').hide();
|
||
|
|
break;
|
||
|
|
case(1):
|
||
|
|
return '.galerie-marker';
|
||
|
|
//$('.galerie-marker').hide();
|
||
|
|
break;
|
||
|
|
case(2):
|
||
|
|
return '.akademie-marker';
|
||
|
|
//$('.akademie-marker').hide();
|
||
|
|
break;
|
||
|
|
case(3):
|
||
|
|
return '.venue-marker';
|
||
|
|
//$('.venue-marker').hide();
|
||
|
|
break;
|
||
|
|
case(4):
|
||
|
|
return '.stiftung-marker';
|
||
|
|
//$('.stiftung-marker').hide();
|
||
|
|
case(5):
|
||
|
|
return '.festival-marker';
|
||
|
|
//$('.festival-marker').hide();
|
||
|
|
case(6):
|
||
|
|
return '.kunstler-marker';
|
||
|
|
//$('.kunstler-marker').hide();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function toggleClass(o){
|
||
|
|
if ( $('.eyeIcon').eq(o).attr("src") == "img/gui/eye-closed-icon.png" ){
|
||
|
|
$('.eyeIcon').eq(o).attr("src","img/gui/eye-open-icon.png");
|
||
|
|
$(markerClass(o)).show();
|
||
|
|
} else {
|
||
|
|
$('.eyeIcon').eq(o).attr("src","img/gui/eye-closed-icon.png");
|
||
|
|
$(markerClass(o)).hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function validateForm(){
|
||
|
|
var a = document.forms["newInstitution"]["name"].value;
|
||
|
|
var b = document.forms["newInstitution"]["loc"].value;
|
||
|
|
var c = document.forms["newInstitution"]["typ"].value;
|
||
|
|
if (a == null || a == "" || b == null || b == "" || c == null || c == "" ) {
|
||
|
|
alert("Please Fill All Required Fields");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
//return true;
|
||
|
|
|
||
|
|
//INSERT INTO `institut`(`name`, `typ`, `location`, `facebook`, `twitter`, `instagram`, `web`) VALUES ("ZKM", "museum", "48.9874, -351.672", "http://fb.com/", "https://www.twitter.com/", "http://instagram.com/", "http://www.zkm.de");
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function newWindowToggle(){
|
||
|
|
$('#new').toggle();
|
||
|
|
newWindow = !newWindow;
|
||
|
|
if(newWindow == false){
|
||
|
|
if(newMarker != null){
|
||
|
|
newMarker.remove();
|
||
|
|
$('#loc').val("");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//console.log(newWindow);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<div id="globalmenu" class="menu">
|
||
|
|
<ul>
|
||
|
|
<li onclick="map()" id="mapLink" hidden>Karte</li>
|
||
|
|
<li onclick="listings()" id="listLink">Calls</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="mapmenu" class="menu">
|
||
|
|
<ul>
|
||
|
|
<li onclick="toggleClass(0)">Museen<img class="eyeIcon" src="img/gui/eye-open-icon.png"></img><img class="markerIcon" src="img/gui/museum-icon.png"></img></li>
|
||
|
|
<li onclick="toggleClass(1)">Galerien<img class="eyeIcon" src="img/gui/eye-open-icon.png"></img><img class="markerIcon" src="img/gui/galerie-icon.png"></img></li>
|
||
|
|
<li onclick="toggleClass(2)">Akademien<img class="eyeIcon" src="img/gui/eye-open-icon.png"></img><img class="markerIcon" src="img/gui/akademie-icon.png"></img></li>
|
||
|
|
<li onclick="toggleClass(3)">Venues<img class="eyeIcon" src="img/gui/eye-open-icon.png"></img><img class="markerIcon" src="img/gui/venue-icon.png"></img></li>
|
||
|
|
<li onclick="toggleClass(4)">Stiftungen<img class="eyeIcon" src="img/gui/eye-open-icon.png"></img><img class="markerIcon" src="img/gui/stiftung-icon.png"></img></li>
|
||
|
|
<li onclick="toggleClass(5)">Festivals<img class="eyeIcon" src="img/gui/eye-open-icon.png"></img><img class="markerIcon" src="img/gui/festival-icon.png"></img></li>
|
||
|
|
<li onclick="toggleClass(6)">Künstler<img class="eyeIcon" src="img/gui/eye-open-icon.png"></img><img class="markerIcon" src="img/gui/kunstler-icon.png"></img></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<ul><li onclick="newWindowToggle()">Neues Institut</li></ul>
|
||
|
|
|
||
|
|
<div id="new" style="display:none;">
|
||
|
|
<form method="post" name="newInstitution" onsubmit="return validateForm()" action="">
|
||
|
|
<div id="newleft">
|
||
|
|
<p><label for="name">Name:*</label><input name="name" id="name"></input></p>
|
||
|
|
<p><label for="loc">Location:*</label><input name="loc" id="loc" readonly></input></p>
|
||
|
|
<p><label for="typ">Typ:*</label><select name="typ" id="typ">
|
||
|
|
<option value="museum">Museum</option>
|
||
|
|
<option value="galerie">Galerie</option>
|
||
|
|
<option value="akademie">Akademie</option>
|
||
|
|
<option value="venue">Venue</option>
|
||
|
|
<option value="stiftung">Stiftung</option>
|
||
|
|
<option value="festival">Festival</option>
|
||
|
|
<option value="kunstler">Künstler</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div id="newright">
|
||
|
|
<p><label for="fb">Facebook:</label><input name="fb" id="fb"></input></p>
|
||
|
|
<p><label for="insta">Instagram:</label><input name="insta" id="insta"></input></p>
|
||
|
|
<p><label for="twitter">Twitter:</label><input name="twitter" id="twitter"></input></p>
|
||
|
|
<p><label for="web">Web:</label><input name="web" id="web"></input></p>
|
||
|
|
</div>
|
||
|
|
<input type="submit" value="Speichern" id="newSubmit"></input>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="listmenu" class="menu" style="display:none;">
|
||
|
|
<ul>
|
||
|
|
<li onclick="()">Calls</li>
|
||
|
|
<li onclick="()">Residencies</li>
|
||
|
|
<li onclick="()">Stipendien</li>
|
||
|
|
<li onclick="()">Wettbewerbe</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="overlay" hidden>
|
||
|
|
<div id="overlayHeader">
|
||
|
|
<div id="overlayTitle">
|
||
|
|
</div>
|
||
|
|
<div id="overlayMenu">
|
||
|
|
<a href="#" onClick="if (confirm('Sicher löschen?')) trash(); return false"><img src="img/gui/bin.png" class="overlayMenuIcon"></img></a>
|
||
|
|
<a href="#" onClick="closeOverlay()"><img src="img/gui/x.png" class="overlayMenuIcon"></img></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<iframe id="overlayBody">
|
||
|
|
|
||
|
|
<!--<div class="fb-page" data-href="https://www.facebook.com/pg/HBKsaar/" data-tabs="timeline" data-width="1152" data-height="573" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>-->
|
||
|
|
|
||
|
|
|
||
|
|
</iframe>
|
||
|
|
<div id="overlayFooter">
|
||
|
|
<div class="networkButton">twitter</div>
|
||
|
|
<div class="networkButton">instagram</div>
|
||
|
|
<div class="networkButton">facebook</div>
|
||
|
|
<div class="networkButton">rss</div>
|
||
|
|
<div class="networkButton">website</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="map"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var mymap = L.map('map');
|
||
|
|
mymap.zoomControl.setPosition('topright');
|
||
|
|
L.tileLayer('https://api.mapbox.com/styles/v1/pr1est0r/ck2zdlu690te41cl4xuonp8o3/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
|
||
|
|
//attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||
|
|
maxZoom: 18,
|
||
|
|
zoomControl: true,
|
||
|
|
id: 'mapbox.streets',
|
||
|
|
accessToken: 'pk.eyJ1IjoicHIxZXN0MHIiLCJhIjoiY2syejltOWwyMGM0ZzNuczA0cml5c2VzZyJ9.Yg9alT_uU0iy5dOQUi670g'
|
||
|
|
}).addTo(mymap);
|
||
|
|
|
||
|
|
let newMarker;
|
||
|
|
var museumIcon = L.divIcon({className: 'museum-marker', iconSize: [25, 41],iconAnchor: [14, 47], popupAnchor: [-3, -76],});
|
||
|
|
var galerieIcon = L.divIcon({className: 'galerie-marker', iconSize: [25, 41],iconAnchor: [14, 47], popupAnchor: [-3, -76],});
|
||
|
|
var akademieIcon = L.divIcon({className: 'akademie-marker', iconSize: [25, 41],iconAnchor: [14, 47], popupAnchor: [-3, -76],});
|
||
|
|
var venueIcon = L.divIcon({className: 'venue-marker', iconSize: [25, 41],iconAnchor: [14, 47], popupAnchor: [-3, -76],});
|
||
|
|
var stiftungIcon = L.divIcon({className: 'stiftung-marker', iconSize: [25, 41],iconAnchor: [14, 47], popupAnchor: [-3, -76],});
|
||
|
|
var festivalIcon = L.divIcon({className: 'festival-marker', iconSize: [25, 41],iconAnchor: [14, 47], popupAnchor: [-3, -76],});
|
||
|
|
var kunstlerIcon = L.divIcon({className: 'kunstler-marker', iconSize: [25, 41],iconAnchor: [14, 47], popupAnchor: [-3, -76],});
|
||
|
|
function onMapClick(e) {
|
||
|
|
if(newWindow){
|
||
|
|
if(newMarker != null){
|
||
|
|
newMarker.remove();
|
||
|
|
}
|
||
|
|
// newMarker = L.marker(e.latlng, {icon: museumIcon});
|
||
|
|
newMarker = L.marker(e.latlng, {icon: museumIcon});
|
||
|
|
newMarker.addTo(mymap).on('click', function(e) {
|
||
|
|
console.log(e.target._leaflet_id); //or sourceTarget?
|
||
|
|
});
|
||
|
|
|
||
|
|
var locs = (e.latlng.lat).toFixed(4) + ", " + (e.latlng.lng).toFixed(4);
|
||
|
|
$('#loc').val(locs);
|
||
|
|
} else if (overlayWindow){
|
||
|
|
closeOverlay();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
mymap.on('click', onMapClick);
|
||
|
|
|
||
|
|
|
||
|
|
<?php $entries = json_encode(fetch_all($db, "SELECT * FROM `institut`")); ?>
|
||
|
|
var points = <?=$entries ?>;
|
||
|
|
var pointList = [];
|
||
|
|
for (i= 0; i < points.length; i++){
|
||
|
|
var thisIcon;
|
||
|
|
switch (points[i][9]) {
|
||
|
|
case "0":
|
||
|
|
thisIcon = museumIcon;
|
||
|
|
break;
|
||
|
|
case "1":
|
||
|
|
thisIcon = galerieIcon;
|
||
|
|
break;
|
||
|
|
case "2":
|
||
|
|
thisIcon = akademieIcon;
|
||
|
|
break;
|
||
|
|
case "3":
|
||
|
|
thisIcon = venueIcon;
|
||
|
|
break;
|
||
|
|
case "4":
|
||
|
|
thisIcon = stiftungIcon;
|
||
|
|
break;
|
||
|
|
case "5":
|
||
|
|
thisIcon = festivalIcon;
|
||
|
|
break;
|
||
|
|
case "6":
|
||
|
|
thisIcon = kunstlerIcon;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
thisIcon = stiftungIcon;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
var markerBoot = L.marker(points[i][3].split(','), {icon: thisIcon});
|
||
|
|
|
||
|
|
markerBoot.bindTooltip(points[i][1],{
|
||
|
|
offset: [0,-30]
|
||
|
|
});
|
||
|
|
markerBoot.addTo(mymap).on('click', function(e) {
|
||
|
|
overlay(e.target._leaflet_id);
|
||
|
|
});
|
||
|
|
pointList.push([points[i][1], markerBoot._leaflet_id, points[i][0], points[i][9]]); //name, leaflet id, sql id, type
|
||
|
|
|
||
|
|
}
|
||
|
|
mymap.setView([48.799, 9.794], 4);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var overlayWidth = $('#overlay').width();
|
||
|
|
var overlayHeight = $('#overlayBody').height();
|
||
|
|
function onResize(){
|
||
|
|
overlayWidth = $('#overlay').width();
|
||
|
|
overlayHeight = $('#overlayBody').height();
|
||
|
|
}
|
||
|
|
window.addEventListener('resize', onResize);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<?php
|
||
|
|
//include('server/debug.php');
|
||
|
|
?>
|