Browse Source

loads lol

pull/1/head
Victor Giers 4 years ago
parent
commit
95c6a9ab0e
6 changed files with 295 additions and 118 deletions
  1. 27
    0
      expose.php
  2. BIN
      img/gui/pen.png
  3. BIN
      img/gui/x_725772.png
  4. 219
    112
      index.php
  5. 5
    3
      server/server.php
  6. 44
    3
      styles/style.css

+ 27
- 0
expose.php View File

@@ -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;
}
?>

BIN
img/gui/pen.png View File


BIN
img/gui/x_725772.png View File


+ 219
- 112
index.php View File

@@ -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>
<script src="scripts/leaflet/leaflet.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>
-->
@@ -45,14 +52,17 @@ include('server/server.php');

<body>
<script>
let newWindow = false;
let overlayWindow = false;
var newWindow = 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').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();



$('#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();
}

@@ -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,119 +306,158 @@ 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>
</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>-->
<!--<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>
</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}', {
//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>',
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;
/*L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Kartendaten &copy; <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 &copy; <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: &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;
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();
}
var markerBoot = L.marker(points[i][3].split(','), {icon: thisIcon});
markerBoot.bindTooltip(points[i][1],{
offset: [0,-30]
// 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?
});
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

var locs = (e.latlng.lat).toFixed(4) + ", " + (e.latlng.lng).toFixed(4);
$('#loc').val(locs);
} else if (overlayWindow){
closeOverlay();
}
mymap.setView([48.799, 9.794], 4);



var overlayWidth = $('#overlay').width();
var overlayHeight = $('#overlayBody').height();
function onResize(){
overlayWidth = $('#overlay').width();
overlayHeight = $('#overlayBody').height();
}
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;
}
window.addEventListener('resize', onResize);
}

var overlayWidth = $('#overlay').width();
var overlayHeight = $('#overlayBody').height();
function onResize(){
overlayWidth = $('#overlay').width();
overlayHeight = $('#overlayBody').height();
}
window.addEventListener('resize', onResize);

</script>


+ 5
- 3
server/server.php View File

@@ -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.");";
//echo("<script>console.log('".$query."');</script>");
if (isset($_POST['edit'])){
$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'])){

+ 44
- 3
styles/style.css View File

@@ -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%;
max-width:20%;
min-width:25%;
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;

Loading…
Cancel
Save