loads lol

expose.php

@@ -0,0 +1,27 @@
+<?php
+switch($_GET['type']){
+  case("fb"):
+  ?>
+  <!DOCTYPE html>
+  <head>
+  </head>
+  <body>
+    <div id="fb-root"></div>
+    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v5.0"></script>
+    <center>  <div class="fb-page" data-href="https://www.facebook.com/pg/<?= $_GET['page'] ?>/" data-tabs="timeline" data-width="500" data-height="" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>
+    </center>
+  </body>
+  <?php
+  break;
+  case("insta"):
+  header('location: https://www.instagram.com/' + $_GET['page'] + '/');
+  break;
+  case("twitter"):
+  ?>
+
+  <?php
+  break;
+  default:
+  break;
+}
+?>

index.php

@@ -34,10 +34,17 @@ include('server/server.php');
   <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>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
-  <script src="scripts/leaflet/leaflet.js"></script>
+  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>
 -->
@@ -45,14 +52,17 @@ include('server/server.php');
 
 <body>
   <script>
-  let newWindow = false;
+  var newWindow = false;
-  let overlayWindow = false;
+  var overlayWindow = false;
-
+  var entry;
-
+  var edit = true;
   var selected = 0;
+
   function overlay(leaflet_id){
+    if (newWindow){
+      newWindowToggle();
+    }
     overlayWindow = true;
-    let entry;
     for(var i = 0; i < pointList.length; i++){
       if(leaflet_id == pointList[i][1]){
         entry = points[i];
@@ -61,29 +71,80 @@ include('server/server.php');
       }
     }
     console.log(entry);
-    //$('#overlay').empty();
-
     $('#overlayTitle').html('<h2>' + entry[1] + '</h2>');
-    //$('#overlayBody').empty();
+
-    //if entry[4] is not null ...
+    $('#overlayBody').attr('src','');
-    //$('#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');
+    $('#overlayFooter').empty();
-    $('#overlayBody').attr('src', 'facebook.php?page=HBKsaar&height=' + overlayHeight.toString());
+    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();
   }
 
@@ -92,6 +153,7 @@ include('server/server.php');
     $('#map').show();
     $('#mapLink').hide();
     $('#listLink').show();
+    $('#entryListe').show();
     $('#mapmenu').show();
     $('#listmenu').hide();
     overlayWindow = false;
@@ -102,6 +164,7 @@ include('server/server.php');
     $('#map').hide();
     $('#listLink').hide();
     $('#mapLink').show();
+    $('#entryListe').hide();
     $('#mapmenu').hide();
     overlayWindow = false;
     $('#overlay').hide();
@@ -165,6 +228,9 @@ include('server/server.php');
 
 
   function newWindowToggle(){
+    $('#edit').remove();
+    edit = false;
+    $('#institutionForm')[0].reset();
     $('#new').toggle();
     newWindow = !newWindow;
     if(newWindow == false){
@@ -191,14 +257,14 @@ include('server/server.php');
       <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(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" onsubmit="return validateForm()" action="">
+      <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>
@@ -208,7 +274,7 @@ include('server/server.php');
             <option value="akademie">Akademie</option>
             <option value="venue">Venue</option>
             <option value="stiftung">Stiftung</option>
-            <option value="festival">Festival</option>
+            <option value="festival">Event</option>
             <option value="kunstler">Künstler</option>
           </select>
         </div>
@@ -217,9 +283,11 @@ include('server/server.php');
           <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>
 
@@ -238,6 +306,7 @@ include('server/server.php');
       <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>
@@ -249,36 +318,46 @@ include('server/server.php');
 
     </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="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://api.mapbox.com/styles/v1/pr1est0r/ck2zdlu690te41cl4xuonp8o3/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
+  /*L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    //attribution: 'Map data &copy; <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>',
+  'attribution':  'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
-    maxZoom: 18,
+  'useCache': true
-    zoomControl: true,
+}).addTo(mymap);*/
-    id: 'mapbox.streets',
+/*L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg', {
-    accessToken: 'pk.eyJ1IjoicHIxZXN0MHIiLCJhIjoiY2syejltOWwyMGM0ZzNuczA0cml5c2VzZyJ9.Yg9alT_uU0iy5dOQUi670g'
+'attribution':  'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
-  }).addTo(mymap);
+'useCache': true
+}).addTo(mymap);*/
+L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+  maxZoom: 17,
+  attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <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;
+let newMarker;
-  var museumIcon = L.divIcon({className: 'museum-marker', iconSize: [25, 41],iconAnchor: [14, 47], popupAnchor: [-3, -76],});
+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 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 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 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 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 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],});
+var kunstlerIcon = L.divIcon({className: 'kunstler-marker', iconSize: [25, 41],iconAnchor: [14, 47], popupAnchor: [-3, -76],});
-  function onMapClick(e) {
+function onMapClick(e) {
   if(newWindow){
     if(newMarker != null){
       newMarker.remove();
@@ -294,14 +373,14 @@ include('server/server.php');
   } else if (overlayWindow){
     closeOverlay();
   }
-  }
+}
-  mymap.on('click', onMapClick);
+mymap.on('click', onMapClick);
 
 
-  <?php $entries = json_encode(fetch_all($db, "SELECT * FROM `institut`")); ?>
+<?php $entries = json_encode(fetch_all($db, "SELECT * FROM `institut`")); ?>
-  var points = <?=$entries ?>;
+var points = <?=$entries ?>;
-  var pointList = [];
+var pointList = [];
-  for (i= 0; i < points.length; i++){
+for (i= 0; i < points.length; i++){
   var thisIcon;
   switch (points[i][9]) {
     case "0":
@@ -339,18 +418,46 @@ include('server/server.php');
   });
   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;
   }
-  mymap.setView([48.799, 9.794], 4);
+}
 
-
+var overlayWidth = $('#overlay').width();
-
+var overlayHeight = $('#overlayBody').height();
-  var overlayWidth = $('#overlay').width();
+function onResize(){
-  var overlayHeight = $('#overlayBody').height();
-  function onResize(){
   overlayWidth = $('#overlay').width();
   overlayHeight = $('#overlayBody').height();
-  }
+}
-  window.addEventListener('resize', onResize);
+window.addEventListener('resize', onResize);
 
 </script>
 

server/server.php

@@ -19,10 +19,12 @@ if (isset($_POST['name']) && isset($_POST['loc']) && isset($_POST['typ'])){
   if ($_POST['typ'] == 'stiftung') { $typNo = 4; }
   if ($_POST['typ'] == 'festival') { $typNo = 5; }
   if ($_POST['typ'] == 'kunstler') { $typNo = 6; }
-  $query = "INSERT INTO `institut`(`name`, `location`, `facebook`, `twitter`, `instagram`, `web`, `typ`) VALUES (\"".$_POST['name']."\",\"".$_POST['loc']."\",\"".$_POST['fb']."\",\"".$_POST['twitter']."\",\"".$_POST['insta']."\",\"".$_POST['web']."\",".$typNo.");";
+  if (isset($_POST['edit'])){
-  //echo("<script>console.log('".$query."');</script>");
+    $query = "UPDATE `institut` SET `name` = '".$_POST['name']."', `location` = '".$_POST['loc']."', `facebook` = '".$_POST['fb']."', `twitter` = '".$_POST['insta']."', `instagram` = '".$_POST['twitter']."', `web` = '".$_POST['web']."', `typ` = '".$typNo."' WHERE `institut`.`id` = " . $_POST['edit'] . ";";
+  } else {
+    $query = "INSERT INTO `institut`(`name`, `location`, `facebook`, `twitter`, `instagram`, `web`, `typ`) VALUES (\"".$_POST['name']."\",\"".$_POST['loc']."\",\"".$_POST['fb']."\",\"".$_POST['insta']."\",\"".$_POST['twitter']."\",\"".$_POST['web']."\",".$typNo.");";
+  }
   mysqli_query($db, $query);
-  //header("location: #");
 }
 
 if (isset($_GET['delete'])){

styles/style.css

@@ -66,6 +66,41 @@ select{
 .leaflet-popup-tip{
   display: none;
 }
+#entryListe{
+  font-family: 'Work Sans';
+  font-size: 14px;
+  position:absolute;
+  max-width:15%;
+  /*min-height:80%;*/
+  max-height:65%;
+  top:80px;
+  right:70px;
+  z-index: 401;
+  padding: 20px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  overflow: auto;
+  margin: 0;
+  background-color:rgba(255,255,255,.75);
+  border-radius: 3px;
+}
+#entryListe ul{
+  list-style-type: none;
+  padding: 0px;
+  padding-left: 20px;
+  margin-top: 4px;
+}
+#entryListe li{
+  color:rgba(0,0,0,.75);
+  padding-bottom: 3px;
+  transition: color .2s;
+  cursor: default;
+  text-decoration: none;
+}
+#entryListe li:hover{
+  color:rgba(0,0,0,1);
+  transition: color .2s;
+}
 
 #overlay{
   position:absolute;
@@ -114,8 +149,8 @@ padding-top:12px;
 }
 .networkButton{
   min-height:4vh;
-  min-width:20%;
+  min-width:25%;
-  max-width:20%;
+  max-width:25%;
   background-color:rgba(255,255,255,.6);
   transition: background-color .5s;
   color:black;
@@ -144,7 +179,13 @@ padding-top:12px;
   left:40px;
   top:61px;
   width:370px;
-  height:202px;
+  height:232px;
+}
+.newMenuIcon{
+  position: absolute;
+  right: 15px;
+  width:25px;
+  height:25px;
 }
 #new p{
   padding:5px;