<?php
/** *****************************
 * Ideenmelder
 * Autor: Walter Hupfeld, Hamm
 * E-Mail: info@hupfeld-software.de
 * Version: 1.0
 * Datum: 18.05.2021
 ******************************** */

 session_start(); 

 if (!isset($_SESSION['district'])) { header("Location: start.php");}
 $strDistrict=$_SESSION['district'];
 require("config.php");
 if ($strDistrict=="unkown")  { header("Location: start.php");}
?>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Walter Hupfeld, info@hupfeld-software.de">
    <meta name="description" content="Georeferenzieter Ideenmelder">

    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/leaflet.css" />
    <link rel="stylesheet" href="css/leaflet.awesome-markers.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="vendor/DataTables/DataTables-2.0.2/css/dataTables.dataTables.min.css">
    <link rel="stylesheet" href="vendor/DataTables/DataTables-2.0.2/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="css/jquery.fancybox.min.css" />

    <title>Eintragsliste</title>
    
    <script src="js/jquery.min.js"></script>
    <script src="js/leaflet.js"></script>
    <script src="js/leaflet.ajax.js"></script>
    <script src="js/leaflet.awesome-markers.js"></script>
    <script src="vendor/DataTables/DataTables-2.0.2/js/dataTables.min.js"></script>
    <script src="vendor/DataTables/DataTables-2.0.2/js/dataTables.bootstrap4.min.js"></script>
    <script src="js/jquery.fancybox.min.js"></script>
    <script src="js/jquery.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>


    <style>
      #whmap { display:none; position:absolute; top:150px; left:400px; }
      #detailmap { height:450px; width:400px;}
      .comment {  border-top: 1px solid darkgrey; padding: 3px 0 3px 0; }
    </style>
</head>
<body>
 <!--  Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <?php if (!$boolSidebar): ?>
        <a href="start.php"><img class="logo_navbar" src="<?=$strLogo?>" alt="Logo"></a>
    <?php endif; ?>
         <a class="navbar-brand" href="#"><?= $strTitle ?> &raquo; <?=$strDistrictTitle?></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
        <div class="collapse navbar-collapse" id="navbars">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="index.php?ref=1">Karte</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="liste.php">Liste <span class="sr-only">(current)</span></a>
                </li>
                <!-- District -->    
            <?php if ($boolDistrictSelection):  ?>
            <form method="GET" action="index.php">       
                <select name="d" style="float:left;margin-top:0.5em;margin-right:0.5em;" onchange="this.form.submit()">
                    <?php foreach ($arrDistrict as $key => $strMTitle):
                            $strActive =  ($strDistrict==$key) ? "selected=\"selected\"" : ""; ?>
                    <option value="<?=$key?>" <?=$strActive?>><?=$strMTitle?></option>
                    <?php  endforeach;  ?>
                </select>
            </form>
            <?php endif; ?>
            </ul>
                </ul>
            
            <div>
             <ul class="navbar-nav mr-auto right">
                <li class="nav-item">
                    <a class="nav-link" href="impressum.php">Impressum</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="datenschutz.php">Datenschutzerklärung</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="login.php">Login</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- Ende Navbar -->

<div class="container-fluid main" style="max-width:1360px;">
    <p>&nbsp;</p>
<h2>Liste der Einträge für <?=$strDistrictTitle?></h2>

<table id="list" class="display">
    <thead>
        <tr><th>Nr.</th><th>Name</th>
           <?= ($boolUserinfo) ? "<th>Alter</th><th>Verkehrsmittel</th>" : ""; ?>
            <th>Topic</th>
            <th>Beschreibung</th>
           <?= ($boolComment) ? "<th>Kommentare</th>" : "" ?> 
           <?= ($boolDefect) ? "<th>Mängelkategorie</th>" : ""; ?>
           <?= ($boolRating) ? "<th><i class=\"fa fa-thumbs-up\"></i></th><th><i class=\"fa fa-thumbs-down\"></i></th>" : "" ?>
           <th>Datum</th>
           <?= ($boolUpload) ? "<th>Bild</th>": "" ?>
            <th>Ort</th></tr>
    </thead>
    <tbody>

    <?php

        $strSQL="SELECT loc.*,f.filename 
                FROM location loc LEFT JOIN  files f ON loc.id=f.loc_id 
                WHERE district='$strDistrict'
                ORDER BY created_at DESC";
        $result = $db->query($strSQL);
        $numCounter=1;
        $arrPoint = array();
        while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
            $numDatum= strtotime($row['created_at']);
            $id=$row['id'];
            $datum= date("d.m.Y",$numDatum);
            $arrPoint[]= array ('id'=>$id,'lat'=>$row['lat'],'lng'=>$row['lng'],$row['description']);
            $boolShow=((!$boolApprove) || ($boolApprove && $row['approval']));
            echo "<tr>";
            //echo "<td>".$numCounter." <a href='mailto:".$contactEmail."?subject=Ideenmelder Eintrag ".$id."'><i class='fa fa-envelope-o'></i>"."</td>";
            echo "<td>".$id."</td>";
            echo "<td>". stripslashes($row['username']) ."</td>";
            if ($boolUserinfo) {
                echo "<td>".$row['age']."</td>";
                echo "<td>".$row['transport']."</td>";
            }
            echo "<td>".$arrIcon[$row['topic']]." ".$arrTopic[$row['topic']]."</td>";
            if ($boolShow) {
                echo "<td>" . nl2br(stripslashes($row['description']))."</td>";
            } else {
                echo "<td class='not_approved'>Freigabe erfolgt in Kürze.</td>";
            }
            if ($boolComment) {
                echo "<td>";
                $strSQL = "SELECT username,comment,created_at FROM comment WHERE loc_id=".$id;
                $comments = $db->query($strSQL);
                while ($comment = $comments->fetch(PDO::FETCH_ASSOC)) {
                    echo "<div class='comment'>";
                    echo "<em>".$comment['username']." schrieb am ";
                    $numDatum =  strtotime($comment['created_at']);
                    $strDatum = date("d.m.Y",$numDatum);
                    echo $strDatum."</em><br>";
            
                    echo nl2br(stripslashes($comment['comment']));
                    echo "</div>";
                }
                echo "</td>";
            }
            if  ($boolDefect) {
                $strDefect = (isset($row['defect']) && $row['defect']>=0) ? $arrDefect[$row['defect']] : "";
                // Hindenismelder - default Poller - keine leere Eingabe
                echo "<td>".$strDefect."</td>";
            }
            if ($boolRating) {
                echo "<td>".$row['thumb_ups']."</td>";
                echo "<td>".$row['thumb_downs']."</td>";
            }
            echo  "<td>".$datum."</td>";
            if ($boolUpload) {
                if ($boolShow) {
                    echo "<td>";
                    if (isset($row['filename'])) {
                        echo "<a href='images/".$row['filename']."'  data-fancybox data-caption='".$strDefect."'>";
                        echo "<img style='width:120px' src='images/".$row['filename']."'></a>";
                    }
                    echo "</td>";
                } else {echo "<td></td>";}
            }
            echo "<td><a class='maplink' name='".$id."' href='#'>Karte</a><!--".round($row['lat'],4)." / ".round($row['lng'],4)."--></td>";
            echo "</tr>\n";
            $numCounter++;
        }
    ?>
</tbody>
</table> 
<a class="btn btn-primary" href="index.php?ref=1">zurück</a>   
</div>

    <div id="whmap">
      <div id="whmap-header"> <span id="close" type="button" class="close right text-danger">
            <i class="fa fa-window-close"></i>
          </span>
      </div>
      <div id="detailmap"></div>
    </div>

</body>
<script>
jQuery(document).ready(function(){


   let dataTable = new DataTable( 
    "#list",
    {   language: {url: 'vendor/DataTables/de_DE.json'},
        lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, 'Alle'] ]
    });


<?php
   echo "   var points = [];\n";
   foreach ($arrPoint as $point) {
       echo "   points[".$point['id']."]= {lat: ".$point['lat'].",lng: ".$point['lng']." }\n";
   }
?>
   var mymap = L.map('detailmap').setView([51.66, 7.82], 17);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<?=$mapbox_key?>', {
        maxZoom: 18,
        minZoom:12,
        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>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

   $('.maplink').click(function(e){
        $('#whmap').hide();
        $('#whmap').css({'top':e.pageY-90,'left':e.pageX-420});
        $('#whmap').show();
        id = $(this)[0].name;
        console.log(points[id].lat+" "+points[id].lng)
        mymap.setView([points[id].lat,points[id].lng],16);
        L.marker([points[id].lat, points[id].lng],  ).addTo(mymap);
        mymap.invalidateSize();
        e.preventDefault();
   });
   $('#close').click(function(e){
        $('#whmap').hide();
    });
});

</script>
</html>