thetool/Layout/default/Pop/Index.php

<?php
$pagination_baseurl = $this->getUrl($Mod, "Index");
$pagination_baseurl_params = ["filter" => $filter];
$pagination_entity_name = "Pops";
?>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
    <link href="<?= self::getResourcePath() ?>assets/css/datatables-std.css" rel="stylesheet" type="text/css"/>
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="<?= self::getUrl("Dashboard") ?>"><?= MFAPPNAME_SLUG ?></a>
                        </li>
                        <li class="breadcrumb-item active">Pops</li>
                    </ol>
                </div>
                <h4 class="page-title">Pops</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->


    <div class="card">
        <div class="card-body mb-3">
            <div class="row">
                <div class="col-12">
                    <div class="float-left">
                        <h4 class="header-title">Liste aller Pops</h4>
                    </div>
                    <div class="float-right">
                        <a class="btn btn-primary mb-2" href="<?= self::getUrl("Pop", "add", ['returnto' => "pop"]) ?>"><i
                                    class="fas fa-plus"></i> Neuen Pop anlegen</a>
                    </div>
                </div>
            </div>

            <!--            --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination.php"); ?>
            <!--            --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination-summary.php"); ?>

            <table id="datatable" class="table table-striped table-hover table-sm">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Netgebiet</th>
                    <th>Zutritt</th>
                    <th>Vlan Public/Nat/IPv6</th>
                    <th>Koordinaten</th>
                    <th class="edit-width"></th>

                </tr>
                <tr id="filterrow">
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>

                </tr>
                </thead>
                <tbody>
                <?php foreach ($pops as $pop):
                    $vlans = "";

                    if (!empty(trim($pop->vlan_public)))
                        $vlans .= ' <span class="order-date-pill active mb-0">Public: <span class="font-weight-500">' . $pop->vlan_public . '</span class="font-weight-500"></span>';
                    if (!empty(trim($pop->vlan_nat)))
                        $vlans .= ' <span class="order-date-pill active mb-0">Nat: <span class="font-weight-500">' . $pop->vlan_nat . '</span></span>';
                    if (!empty(trim($pop->vlan_ipv6)))
                        $vlans .= ' <span class="order-date-pill active mb-0">IPv6: <span class="font-weight-500">' . $pop->vlan_ipv6 . '</span></span>';
                    ?>

                    <tr>
                        <td><a href="<?= self::getUrl("Pop", "Detail", ["id" => $pop->id]) ?>"><?= $pop->name ?></a>
                        </td>
                        <td><?= $pop->network->name ?></td>
                        <td><?= $pop->location ?></td>
                        <td class="text-center"><?= trim($vlans) ?></td>
                        <td class="text-center"><a
                                    title="Google-Maps: <?= rtrim($pop->gps_lat, '0') ?> , <?= $pop->gps_long ?>"
                                    class="mapsLink"
                                    href="http://maps.google.com/?q=<?= $pop->gps_lat ?> , <?= $pop->gps_long ?>"
                                    target="_blank"><?= rtrim($pop->gps_lat, '0') ?>
                                , <?= rtrim($pop->gps_long, 0) ?></a></td>

                        <td style="text-align: left; letter-spacing: 4px; font-size: 1.1em;">
                            <a href="<?= self::getUrl("Pop", "edit", ["id" => $pop->id, 'returnto' => "pop"]) ?>"><i
                                        class="far fa-edit" title="Bearbeiten"></i></a>
                            <a href="<?= self::getUrl("Pop", "index") ?>" class="text-danger" title="Löschen"><i
                                        class="fas fa-trash"></i></a>
                        </td>
                    </tr>

                <?php endforeach; ?>
                </tbody>
            </table>

            <!--            --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination-summary.php"); ?>
            <!--            --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination.php"); ?>
            <!---->

        </div>
    </div>

    </div>
    </div>


    <script type="text/javascript">

        function toggleBuilding(id) {
            $('#building-detail-' + id).toggle();
            if ($('#building-detail-' + id).is(":hidden")) {
                $('#building-' + id).removeClass("table-info");
                $('#building-' + id).removeClass("text-info");
            } else {
                $('#building-' + id).addClass("text-info");
                $('#building-' + id).addClass("table-info");
            }
        }

        function toggleTerminationControl(id, type) {
            $("#term-" + type + "-" + id + "-text").toggle();
            $("#term-" + type + "-" + id + "-input").toggle();
            $("#term-" + type + "-" + id + "-edit").toggle();
        }

        function saveTerminationControl(id, type) {
            if (!Number.isInteger(id) || id < 1) {
                return false;
            }

            var value = $("#term-" + type + "-" + id + "-input input[type=text]").val();

            $.post("<?=self::getUrl("Termination", "Api")?>",
                {
                    'do': "setValue",
                    id: id,
                    type: type,
                    value: value
                },
                function (success) {
                    if (success.status == "OK") {
                        $("#term-" + type + "-" + id + "-text").text(value);
                    } else {
                        console.log("error saving (" + type + ", '" + value + "')");
                    }

                    toggleTerminationControl(id, type);
                },
                'json');
        }

        /*
         * Globals for map display
         */

        var buildingMap;
        var buildings = [];
        var markers = [];
        var markerState = true;
        var mapCenterPos = [<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>];

        function refreshMap() {
            // get buildings and render map
            $('#map-link').hide();
            $('#map-row').show();
            getMapdata();
        }

        function renderMap() {
            if (buildingMap) {
                markers.forEach(function (m) {
                    buildingMap.removeLayer(m);
                });
            } else {
                buildingMap = L.map('building-map').setView([<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>], 12);
            }

            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{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>',
                minZoom: 4,
                maxZoom: 22,
                id: 'mapbox/streets-v11',
                accessToken: '<?=TT_MAPBOX_TILE_API_TOKEN?>'
            }).addTo(buildingMap);

            addMarkers();
        }

        function addMarkers() {
            if (!Array.isArray(buildings) | !buildings.length) {
                return false;
            }
            // draw markers and calculate center position
            var all_coords = [];
            buildings.forEach(function (building) {
                if (!building.gps_lat || !building.gps_long) {
                    return;
                }
                var gps = [building.gps_lat, building.gps_long];
                all_coords.push(gps);
                var marker = L.marker(gps).addTo(buildingMap);
                markers[building.id] = marker;
            });

            console.log(all_coords);
            // calculate center position
            mapCenterPos = GetCenterFromDegrees(all_coords);
            console.log(mapCenterPos);
            buildingMap.setView(mapCenterPos, 12);

            return true;
        }

        function centerMap() {
            buildingMap.setView(mapCenterPos, 12);
        }

        // gets buildings and calls renderMap()
        function getMapdata() {
            filter = getFilter();

            $.post('<?=self::getUrl("Building", "Api")?>', {
                    'do': "getFilteredBuildings",
                    filter: filter
                }, function (success) {
                    if (success.status == "OK") {
                        console.log(success);

                        if (Array.isArray(success.result.buildings)) {
                            buildings = success.result.buildings;
                            renderMap();
                        }
                    }
                },
                'json'
            );

        }

        function getFilter() {
            var fields = ['network_id', 'networksection_id', 'status_id', 'code', 'street'];
            var filter = {};
            fields.forEach(function (field) {
                if (!field) {
                    return;
                }
                let val = $('#filter_' + field).val();
                if (val.length) {
                    filter[field] = val;
                }
            });

            return filter;
        }

        // navigation
        var building;
        var hash = window.location.hash.substr(1);
        var match = hash.match(/building=(\d+)/);
        if (match && match[1]) {
            building = match[1]
            toggleBuilding(building);

            //$('body').scrollTop($('#building-' + building).offset() - 50);
        }

        <?php if(is_array($filter) && count($filter)): ?>
        //refreshMap();
        <?php endif; ?>
        var hidesearch = [5];
        $(document).ready(function () {

        });
    </script>
    <script type="text/javascript" src="<?= self::getResourcePath() ?>assets/js/datatables-std.js"></script>

<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>