470 lines
16 KiB
PHP
470 lines
16 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">
|
|
<script src="scripts/jquery-3.3.1.min.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
|
crossorigin=""/>
|
|
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
|
|
crossorigin=""></script>
|
|
|
|
<!-- <link rel="stylesheet" type="text/css" href="scripts/leaflet/leaflet.css">
|
|
<script src="scripts/leaflet/leaflet.js"></script>-->
|
|
|
|
<!--
|
|
<script src="sketch.js"></script>
|
|
-->
|
|
</head>
|
|
|
|
<body>
|
|
<script>
|
|
var newWindow = false;
|
|
var overlayWindow = false;
|
|
var entry;
|
|
var edit = true;
|
|
var selected = 0;
|
|
|
|
function overlay(leaflet_id){
|
|
if (newWindow){
|
|
newWindowToggle();
|
|
}
|
|
overlayWindow = true;
|
|
for(var i = 0; i < pointList.length; i++){
|
|
if(leaflet_id == pointList[i][1]){
|
|
entry = points[i];
|
|
selected = entry[0];
|
|
break;
|
|
}
|
|
}
|
|
console.log(entry);
|
|
$('#overlayTitle').html('<h2>' + entry[1] + '</h2>');
|
|
|
|
$('#overlayBody').attr('src','');
|
|
|
|
$('#overlayFooter').empty();
|
|
var initLoad;
|
|
if(entry[4] != ""){
|
|
$('#overlayFooter').append('<div class="networkButton" onClick="loadWebsite(0)">facebook</div>');
|
|
initLoad = 0;
|
|
}
|
|
if(entry[5] != ""){
|
|
$('#overlayFooter').append('<div class="networkButton" onClick="loadWebsite(1)">instagram</div>');
|
|
initLoad = 1;
|
|
}
|
|
if(entry[6] != ""){
|
|
$('#overlayFooter').append('<div class="networkButton" onClick="loadWebsite(2)">twitter</div>');
|
|
initLoad = 2;
|
|
}
|
|
if(entry[8] != ""){
|
|
$('#overlayFooter').append('<div class="networkButton" onClick="loadWebsite(3)">website</div>');
|
|
initLoad = 3;
|
|
}
|
|
//$('#overlayBody').attr('src', 'facebook.php?page=HBKsaar&height=' + overlayHeight.toString());
|
|
$('#overlay').show();
|
|
$('#entryListe').hide();
|
|
$('#mapmenu').hide();
|
|
loadWebsite(initLoad);
|
|
}
|
|
|
|
function loadWebsite(type){
|
|
switch(type){
|
|
case(0):
|
|
//$('#overlayBody').attr('src', 'expose.php?type=fb&page=' + entry[4] + '&height=' + overlayHeight.toString());
|
|
$('#overlayBody').attr('src', 'https://www.facebook.com/' + entry[4] + '/');
|
|
break;
|
|
case(1):
|
|
//$('#overlayBody').attr('src', 'expose.php?type=insta&page=' + entry[5] + '&height=' + overlayHeight.toString());
|
|
$('#overlayBody').attr('src', 'https://www.instagram.com/' + entry[5] + '/');
|
|
break;
|
|
case(2):
|
|
//$('#overlayBody').attr('src', 'expose.php?type=twitter&page=' + entry[6] + '&height=' + overlayHeight.toString());
|
|
$('#overlayBody').attr('src', 'https://www.twitter.com/' + entry[6] + '/');
|
|
break;
|
|
case(3):
|
|
$('#overlayBody').attr('src', entry[8]);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
function trash(){
|
|
location.href = "server/server.php?delete=" + selected;
|
|
}
|
|
|
|
function editInstitute(){
|
|
closeOverlay();
|
|
newWindowToggle();
|
|
edit = true;
|
|
console.log(entry);
|
|
$('form#institutionForm').append('<input id="edit" type="hidden" value="' + entry[0] + '" name="edit"></input>');
|
|
$('#name').val(entry[1]);
|
|
$('#loc').val(entry[3]);
|
|
$('option').eq(entry[9]).prop('selected', true);
|
|
$('#fb').val(entry[4]);
|
|
$('#insta').val(entry[5]);
|
|
$('#twitter').val(entry[6]);
|
|
$('#web').val(entry[8]);
|
|
}
|
|
|
|
function closeOverlay(){
|
|
overlayWindow = false;
|
|
$('#overlay').hide();
|
|
$('#entryListe').show();
|
|
$('#mapmenu').show();
|
|
}
|
|
|
|
|
|
function map(){
|
|
$('#map').show();
|
|
$('#mapLink').hide();
|
|
$('#listLink').show();
|
|
$('#entryListe').show();
|
|
$('#mapmenu').show();
|
|
$('#listmenu').hide();
|
|
overlayWindow = false;
|
|
$('#overlay').hide();
|
|
}
|
|
|
|
function listings(){
|
|
$('#map').hide();
|
|
$('#listLink').hide();
|
|
$('#mapLink').show();
|
|
$('#entryListe').hide();
|
|
$('#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(){
|
|
$('#edit').remove();
|
|
edit = false;
|
|
$('#institutionForm')[0].reset();
|
|
$('#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)">Events<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" id="institutionForm" 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">Event</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>
|
|
<p><input id="edit" value="edit" name="edit"></input></p>
|
|
</div>
|
|
<input type="submit" value="Speichern" id="newSubmit"></input>
|
|
</form>
|
|
<a href="#" onClick="newWindowToggle()"><img src="img/gui/x.png" class="newMenuIcon"></img></a>
|
|
</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="editInstitute()"><img src="img/gui/pen.png" class="overlayMenuIcon"></img></a>
|
|
<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>
|
|
</div>
|
|
<div id="entryListe">
|
|
<div id="museumListe">Museen<ul></ul></div>
|
|
<div id="galerieListe">Galerien<ul></ul></div>
|
|
<div id="akademieListe">Akademien<ul></ul></div>
|
|
<div id="venueListe">Venues<ul></ul></div>
|
|
<div id="stiftungListe">Stiftungen<ul></ul></div>
|
|
<div id="eventListe">Events<ul></ul></div>
|
|
<div id="künstlerListe">Künstler<ul></ul></div>
|
|
</div>
|
|
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
var mymap = L.map('map');
|
|
mymap.zoomControl.setPosition('topright');
|
|
/*L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
'attribution': 'Kartendaten © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
|
|
'useCache': true
|
|
}).addTo(mymap);*/
|
|
/*L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg', {
|
|
'attribution': 'Kartendaten © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
|
|
'useCache': true
|
|
}).addTo(mymap);*/
|
|
L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 17,
|
|
attribution: 'Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
|
|
}).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);
|
|
|
|
|
|
for (var i = 0; i < pointList.length; i++){
|
|
console.log(pointList[i]);
|
|
switch(pointList[i][3]){
|
|
case('0'):
|
|
$('#museumListe ul').append("<li onclick='overlay(" + pointList[i][1] + ")'>" + pointList[i][0] + "</li>");
|
|
break;
|
|
case('1'):
|
|
$('#galerieListe ul').append("<li onclick='overlay(" + pointList[i][1] + ")'>" + pointList[i][0] + "</li>");
|
|
break;
|
|
case('2'):
|
|
$('#akademieListe ul').append("<li onclick='overlay(" + pointList[i][1] + ")'>" + pointList[i][0] + "</li>");
|
|
break;
|
|
case('3'):
|
|
$('#venueListe ul').append("<li onclick='overlay(" + pointList[i][1] + ")'>" + pointList[i][0] + "</li>");
|
|
break;
|
|
case('4'):
|
|
$('#stiftungListe ul').append("<li onclick='overlay(" + pointList[i][1] + ")'>" + pointList[i][0] + "</li>");
|
|
break;
|
|
case('5'):
|
|
$('#eventListe ul').append("<li onclick='overlay(" + pointList[i][1] + ")'>" + pointList[i][0] + "</li>");
|
|
break;
|
|
case('6'):
|
|
$('#künstlerListe ul').append("<li onclick='overlay(" + pointList[i][1] + ")'>" + pointList[i][0] + "</li>");
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
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');
|
|
?>
|