Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Pop Feature Updates

Browse Source 
* Vorbereitung für erweiterte Faserdarstellungen
* Pop Map Übersicht
* Leere Pop Kategorien werden nun als Unbekannt dargestellt
This commit is contained in:
Daniel Spitzer
2025-12-27 19:31:08 +01:00
parent 04cc5d2e9a
commit bb07cd1fb2
12 changed files with 1566 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Layout/default/Device/Detail.php
View File

@@ -367,7 +367,7 @@ foreach ($devicesall as $deviceall) {
<h4 class="float-left">Config Backups</h4>
<span><i class="fa-sharp fa-solid fa-arrows-spin fa-backup-check <?= ($devices->backup_check) ? '' : 'fa-backup-check-uncheck' ?>"
title=" <?= ($devices->backup_check) ? 'Backup Check aktiv' : 'Backup Check inaktiv' ?>"></i></span>
<?php if ($devices->devicetype->devicemanufactor->config_backup > count()): ?>
<?php if ($devices->devicetype->devicemanufactor->config_backup): ?>
<span><i title="Switch config" class="fa-light fa-rectangle-code code-ico"
data-toggle="modal" data-target="#configCode"></i></span>
<?php endif;

10
Layout/default/Pop/Detail.php
View File

@@ -722,12 +722,12 @@ if (!empty(trim($pops->vlan_ipv6)))
$('[data-toggle="popover"]').popover();
});
</script>
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>-->
<script type="text/javascript" src="<?= self::getResourcePath() ?>assets/js/print.min.js?<?= $git_merge_ts ?>"></script>
<script type="text/javascript" src="<?= self::getResourcePath() ?>js/pages/pop/detail.js?<?= $git_merge_ts ?>"></script>
<script type="text/javascript" src="<?= self::getResourcePath() ?>js/pages/pop/fiber.js?<?= $git_merge_ts ?>"></script>
<script type="text/javascript"
src="<?= self::getResourcePath() ?>js/pages/pop/fibertable.js?<?= $git_merge_ts ?>"></script>
<script type="text/javascript" src="<?= self::getResourcePath() ?>js/pages/Pop/detail/detail.js?<?= $git_merge_ts ?>"></script>
<script type="text/javascript" src="<?= self::getResourcePath() ?>js/pages/Pop/detail/fiber.js?<?= $git_merge_ts ?>"></script>
<!--script type="text/javascript"
src="<?= self::getResourcePath() ?>js/pages/pop/fibertable.js?<?= $git_merge_ts ?>"></script-->
<script type="text/javascript"
src="<?= self::getResourcePath() ?>assets/js/datatables-std.js?<?= $git_merge_ts ?>"></script>

529
application/Pop/PopController.php
View File

@@ -17,6 +17,25 @@ class PopController extends mfBaseController
}
}
private function getMapCategories()
{
$categories = [];
foreach (PopModel::$categoryArray as $id => $cat) {
$categories[] = [
'id' => $id,
'name' => $cat['name'],
'icon' => 'assets/img/markers/pop_' . $id . '.png',
];
}
$categories[] = [
'id' => null,
'name' => 'Unbekannt',
'icon' => 'assets/img/markers/pop_unknown.png',
];
return $categories;
}
protected function indexAction()
{
$networks = array_map(function ($network) {
@@ -30,7 +49,7 @@ class PopController extends mfBaseController
return [
"id" => $pop->id,
"name" => $pop->name,
"category" => $pop->category,
"category" => $pop->category ?: 99,
"networkArea" => $pop->networks,
"location" => $pop->location,
"state" => $pop->state,
@@ -45,6 +64,8 @@ class PopController extends mfBaseController
];
}, PopModel::getAlladv());
$categories = $this->getMapCategories();
$JSGlobals = ["BASE_URL" => self::getUrl(""),
"DASHBOARD_URL" => self::getUrl("Dashboard"),
"MFAPPNAME" => MFAPPNAME_SLUG,
@@ -55,11 +76,20 @@ class PopController extends mfBaseController
],
"NETWORKS" => $networks,
"POPS" => $pops,
"CATEGORIES" => $categories,
"IS_ADMIN" => $this->me->is("Admin"),
"MAPBOX_TOKEN" => TT_MAPBOX_TILE_API_TOKEN,
];
$this->layout()->set("vueViewName", "Pop");
$this->layout()->set("JSGlobals", $JSGlobals);
$this->layout()->set("additionalCSS", [
"assets/css/leaflet.css",
]);
$this->layout()->set("additionalJS", [
"assets/js/leaflet.js",
"assets/js/leaflet.MakiMarkers.js"
]);
$this->layout()->setTemplate("VueViews/Vue");
}
@@ -112,6 +142,7 @@ class PopController extends mfBaseController
{
$network_id = 90;
$this->layout()->set("network_id", $network_id);
$this->layout()->set("categories", $this->getMapCategories());
$this->layout()->setTemplate("Pop/Map");
}
@@ -258,28 +289,220 @@ class PopController extends mfBaseController
$home_id = $this->request->home_id;
if (!$fiber_id && !$home_id) {
return mfBaseController::returnJson(mfResponse::BadRequest(['message' => 'Ungültige Faser-ID oder Home-ID']));
return mfBaseController::returnJson(mfResponse::BadRequest(['message' => 'Ungültige ID']));
}
if ($home_id) {
if ($home_id && !$fiber_id) {
$sql = "SELECT id FROM FiberPlanFiber WHERE home_id = '" . $db->escape($home_id) . "' LIMIT 1";
$res = $db->query($sql);
if ($db->num_rows($res)) {
$row = $db->fetch_array($res);
$fiber_id = $row['id'];
} else {
return mfBaseController::returnJson(mfResponse::NotFound(['message' => 'Keine Faser für Home-ID gefunden']));
}
}
$fiber = new FiberPlanFiber($fiber_id);
if (!$fiber->id) {
return mfBaseController::returnJson(mfResponse::NotFound(['message' => 'Faser nicht gefunden']));
}
$this->log->debug("Lade Faser-Strecke für Faser ID: $fiber_id");
$details = $fiber->toArray();
$details['customer_cable_type'] = $fiber->customer_cable_type;
$details['customer_cable_fiber_nr'] = $fiber->customer_cable_fiber_nr;
$details['customer_connector_type'] = $fiber->customer_connector_type;
$details['customer_cable_spec'] = $fiber->customer_cable_spec;
$details['customer_fiber_range'] = $fiber->customer_fiber_range;
$details['bundle_nr'] = $fiber->bundle_nr;
$details['bundle_color'] = $fiber->bundle_color;
$details['bundle_color_hex'] = $fiber->bundle_color_hex;
$details['fiber_nr_bundle'] = $fiber->fiber_nr_bundle;
if ($fiber->address || $fiber->home_id) {
$customerGps = $this->geocodeAddress($fiber->address, $fiber->home_id);
if ($customerGps) $details['customer_gps'] = $customerGps;
}
$debug = [];
if ($home_id) {
$cableChain = $this->buildCompleteCableChain($fiber);
if (count($cableChain) > 0) {
$mainCable = $cableChain[0]['cable'];
$mainFiber = $cableChain[0]['fiber'];
$cable_route_data = FiberPlanCableModel::getCableRoute($mainCable->id);
$cable_route_array = [];
foreach ($cable_route_data as $station) $cable_route_array[] = $station['name'];
$allFibers = FiberPlanFiberModel::getByCableAndSheet($mainCable->id, null);
$fibersArray = [];
foreach ($allFibers as $f) {
$fibersArray[] = [
'id' => $f->id, 'fiber_nr_cable' => $f->fiber_nr_cable,
'fiber_color' => $f->fiber_color, 'fiber_color_hex' => $f->fiber_color_hex,
'bundle_nr' => $f->bundle_nr, 'bundle_color' => $f->bundle_color, 'bundle_color_hex' => $f->bundle_color_hex,
'branch_type' => $f->branch_type, 'branch_cable_nr' => $f->branch_cable_nr,
'branch_from_location' => $f->branch_from_location, 'branch_fiber_nr' => $f->branch_fiber_nr
];
}
$branchPoints = [];
$sql = "SELECT id, description as name, gps_lat, gps_long, object_type, 'dispatcher' as type
FROM FiberPlanDispatcher WHERE network_id = 90 AND object_type = 4 AND gps_lat IS NOT NULL";
$res = $db->query($sql);
while ($data = $db->fetch_array($res)) {
$branchPoints[] = ['id' => $data['id'], 'name' => $data['name'], 'gps_lat' => $data['gps_lat'], 'gps_long' => $data['gps_long'], 'object_type' => intval($data['object_type']), 'type' => $data['type']];
}
$details['cable_info'] = [
'id' => $mainCable->id, 'description' => $mainCable->description, 'fibers' => $fibersArray,
'diameter' => $mainCable->diameter, 'cable_route_array' => $cable_route_array,
'cable_route_full' => $cable_route_data, 'coordinates' => $mainCable->coordinates,
'location' => $mainFiber->location, 'branch_points' => $branchPoints
];
$allCablesForMatching = [];
foreach ($cableChain as $chainItem) {
$c = $chainItem['cable'];
$coords = json_decode($c->coordinates, true);
if ($coords) $allCablesForMatching[] = ['id' => $c->id, 'description' => $c->description, 'coordinates' => $coords];
}
$sql = "SELECT id, description, coordinates FROM FiberPlanCable WHERE network_id = 90 AND coordinates IS NOT NULL AND coordinates != '' AND coordinates != '[]'";
$res = $db->query($sql);
while ($c = $db->fetch_array($res)) {
$coords = json_decode($c['coordinates'], true);
if ($coords) {
$exists = false; foreach($allCablesForMatching as $ex) { if($ex['id'] == $c['id']) $exists=true; }
if(!$exists) $allCablesForMatching[] = ['id' => $c['id'], 'description' => $c['description'], 'coordinates' => $coords];
}
}
$details['all_cables'] = $allCablesForMatching;
}
if (count($cableChain) > 1) {
$details['branch_path'] = $this->buildBranchPathFromChain($cableChain, 1, $debug);
}
} else {
$this->log->debug("=== MODUS: Vorwärts-Trace ===");
if ($fiber->cable_id) {
$cable = new FiberPlanCable($fiber->cable_id);
if ($cable->id) {
$cable_route_data = FiberPlanCableModel::getCableRoute($cable->id);
$cable_route_array = [];
foreach ($cable_route_data as $station) $cable_route_array[] = $station['name'];
$branchPoints = [];
$sql = "SELECT id, description as name, gps_lat, gps_long, object_type, 'dispatcher' as type
FROM FiberPlanDispatcher WHERE network_id = 90 AND object_type = 4 AND gps_lat IS NOT NULL";
$res = $db->query($sql);
while ($data = $db->fetch_array($res)) {
$branchPoints[] = ['id' => $data['id'], 'name' => $data['name'], 'gps_lat' => $data['gps_lat'], 'gps_long' => $data['gps_long'], 'object_type' => intval($data['object_type']), 'type' => $data['type']];
}
$allFibers = FiberPlanFiberModel::getByCableAndSheet($cable->id, null);
$fibersArray = [];
foreach ($allFibers as $f) {
$fibersArray[] = [
'id' => $f->id, 'fiber_nr_cable' => $f->fiber_nr_cable, 'fiber_color' => $f->fiber_color, 'fiber_color_hex' => $f->fiber_color_hex,
'bundle_nr' => $f->bundle_nr, 'bundle_color' => $f->bundle_color, 'bundle_color_hex' => $f->bundle_color_hex,
'branch_type' => $f->branch_type, 'branch_cable_nr' => $f->branch_cable_nr,
'branch_from_location' => $f->branch_from_location, 'branch_fiber_nr' => $f->branch_fiber_nr
];
}
$details['cable_info'] = [
'id' => $cable->id, 'description' => $cable->description, 'fibers' => $fibersArray,
'diameter' => $cable->diameter, 'cable_route_array' => $cable_route_array,
'cable_route_full' => $cable_route_data, 'coordinates' => $cable->coordinates,
'location' => $fiber->location, 'branch_points' => $branchPoints
];
}
}
if ($fiber->branch_type === 'Abzweigkabel' && $fiber->branch_cable_nr) {
$details['branch_path'] = $this->traceBranchPath($fiber, 0, 10, $debug);
}
$allCablesForMatching = [];
$sql = "SELECT id, description, coordinates FROM FiberPlanCable WHERE network_id = 90 AND coordinates IS NOT NULL AND coordinates != '' AND coordinates != '[]'";
$res = $db->query($sql);
while ($c = $db->fetch_array($res)) {
$coords = json_decode($c['coordinates'], true);
if ($coords) $allCablesForMatching[] = ['id' => $c['id'], 'description' => $c['description'], 'coordinates' => $coords];
}
$details['all_cables'] = $allCablesForMatching;
}
$details['debug'] = $debug;
return mfBaseController::returnJson(mfResponse::Ok(['fiber' => $details]));
}
protected function getAllFiberPathsForHomeAction()
{
$db = FronkDB::singleton();
$home_id = $this->request->home_id;
if (!$home_id) {
return mfBaseController::returnJson(mfResponse::BadRequest(['message' => 'Ungültige Home-ID']));
}
$sql = "SELECT id FROM FiberPlanFiber WHERE home_id = '" . $db->escape($home_id) . "'";
$res = $db->query($sql);
$fiberIds = [];
if ($db->num_rows($res)) {
while ($row = $db->fetch_array($res)) {
$fiberIds[] = $row['id'];
}
}
if (empty($fiberIds)) {
return mfBaseController::returnJson(mfResponse::NotFound(['message' => 'Keine Fasern für Home-ID gefunden']));
}
$globalBranchPoints = [];
$sqlBP = "SELECT id, description as name, gps_lat, gps_long, object_type, 'dispatcher' as type
FROM FiberPlanDispatcher
WHERE network_id = 90 AND object_type IN (1,2,3,4)
AND gps_lat IS NOT NULL AND gps_long IS NOT NULL";
$resBP = $db->query($sqlBP);
if ($db->num_rows($resBP)) {
while ($data = $db->fetch_array($resBP)) {
$globalBranchPoints[] = [
'id' => $data['id'],
'name' => $data['name'],
'gps_lat' => $data['gps_lat'],
'gps_long' => $data['gps_long'],
'object_type' => intval($data['object_type']),
'type' => $data['type']
];
}
}
$globalCablesWithCoords = [];
$sqlCables = "SELECT id, description, coordinates
FROM FiberPlanCable
WHERE network_id = 90
AND coordinates IS NOT NULL
AND coordinates != ''
AND coordinates != '[]'";
$resCables = $db->query($sqlCables);
while ($cableData = $db->fetch_array($resCables)) {
$coords = json_decode($cableData['coordinates'], true);
if ($coords && is_array($coords) && count($coords) > 0) {
$globalCablesWithCoords[] = [
'id' => $cableData['id'],
'description' => $cableData['description'],
'coordinates' => $coords
];
}
}
$allPaths = [];
foreach ($fiberIds as $fiber_id) {
$fiber = new FiberPlanFiber($fiber_id);
if (!$fiber->id) continue;
$details = $fiber->toArray();
$details['customer_cable_type'] = $fiber->customer_cable_type;
$details['customer_cable_fiber_nr'] = $fiber->customer_cable_fiber_nr;
@@ -295,7 +518,6 @@ class PopController extends mfBaseController
$customerGps = $this->geocodeAddress($fiber->address, $fiber->home_id);
if ($customerGps) {
$details['customer_gps'] = $customerGps;
$this->log->debug("GPS für Kunde gefunden: " . json_encode($customerGps));
}
}
@@ -303,16 +525,11 @@ class PopController extends mfBaseController
$debug['start_fiber'] = [
'id' => $fiber->id,
'fiber_nr_cable' => $fiber->fiber_nr_cable,
'branch_type' => $fiber->branch_type,
'branch_cable_nr' => $fiber->branch_cable_nr,
'branch_fiber_nr' => $fiber->branch_fiber_nr
'branch_type' => $fiber->branch_type
];
if ($home_id) {
$this->log->debug("=== MODUS: Rückwärts-Trace (von home_id) ===");
$cableChain = $this->buildCompleteCableChain($fiber);
$debug['cable_chain_count'] = count($cableChain);
$debug['cable_chain'] = array_map(function($item) {
return [
'cable_id' => $item['cable']->id,
@@ -333,12 +550,17 @@ class PopController extends mfBaseController
$cable_route_array[] = $station['name'];
}
$allFibers = FiberPlanFiberModel::getByCableAndSheet($mainCable->id, null);
$allMainFibers = FiberPlanFiberModel::getByCableAndSheet($mainCable->id, null);
$fibersArray = [];
foreach ($allFibers as $f) {
foreach ($allMainFibers as $f) {
$fibersArray[] = [
'id' => $f->id,
'fiber_nr_cable' => $f->fiber_nr_cable,
'fiber_color' => $f->fiber_color,
'fiber_color_hex' => $f->fiber_color_hex,
'bundle_nr' => $f->bundle_nr,
'bundle_color' => $f->bundle_color,
'bundle_color_hex' => $f->bundle_color_hex,
'branch_type' => $f->branch_type,
'branch_cable_nr' => $f->branch_cable_nr,
'branch_from_location' => $f->branch_from_location,
@@ -346,26 +568,6 @@ class PopController extends mfBaseController
];
}
$branchPoints = [];
$sql = "SELECT id, description as name, gps_lat, gps_long, object_type, 'dispatcher' as type
FROM FiberPlanDispatcher
WHERE network_id = 90 AND object_type = 4
AND gps_lat IS NOT NULL AND gps_long IS NOT NULL";
$res = $db->query($sql);
if ($db->num_rows($res)) {
while ($data = $db->fetch_array($res)) {
$branchPoints[] = [
'id' => $data['id'],
'name' => $data['name'],
'gps_lat' => $data['gps_lat'],
'gps_long' => $data['gps_long'],
'object_type' => intval($data['object_type']),
'type' => $data['type']
];
}
}
$details['cable_info'] = [
'id' => $mainCable->id,
'description' => $mainCable->description,
@@ -375,139 +577,54 @@ class PopController extends mfBaseController
'cable_route_full' => $cable_route_data,
'coordinates' => $mainCable->coordinates,
'location' => $mainFiber->location,
'branch_points' => $branchPoints
'branch_points' => $globalBranchPoints
];
$allCablesForMatching = [];
foreach ($cableChain as $chainItem) {
$cable = $chainItem['cable'];
$coords = $cable->coordinates;
$c = $chainItem['cable'];
$coords = $c->coordinates;
if (is_string($coords)) {
$coords = json_decode($coords, true);
}
if ($coords && is_array($coords) && count($coords) > 0) {
$allCablesForMatching[] = [
'id' => $cable->id,
'description' => $cable->description,
'id' => $c->id,
'description' => $c->description,
'coordinates' => $coords
];
}
}
$sql = "SELECT id, description, coordinates
FROM FiberPlanCable
WHERE network_id = 90
AND coordinates IS NOT NULL
AND coordinates != ''
AND coordinates != '[]'";
$res = $db->query($sql);
while ($cableData = $db->fetch_array($res)) {
$coords = json_decode($cableData['coordinates'], true);
if ($coords && is_array($coords) && count($coords) > 0) {
foreach ($globalCablesWithCoords as $gc) {
$exists = false;
foreach ($allCablesForMatching as $existing) {
if ($existing['id'] == $cableData['id']) {
if ($existing['id'] == $gc['id']) {
$exists = true;
break;
}
}
if (!$exists) {
$allCablesForMatching[] = [
'id' => $cableData['id'],
'description' => $cableData['description'],
'coordinates' => $coords
];
}
$allCablesForMatching[] = $gc;
}
}
$details['all_cables'] = $allCablesForMatching;
$this->log->debug("Hausanschluss-Matching: " . count($allCablesForMatching) . " Kabel verfügbar");
}
if (count($cableChain) > 1) {
$details['branch_path'] = $this->buildBranchPathFromChain($cableChain, 1, $debug);
}
} else {
$this->log->debug("=== MODUS: Vorwärts-Trace (von fiber_id) ===");
if ($fiber->cable_id) {
$cable = new FiberPlanCable($fiber->cable_id);
if ($cable->id) {
$cable_route_data = FiberPlanCableModel::getCableRoute($cable->id);
$cable_route_array = [];
foreach ($cable_route_data as $station) {
$cable_route_array[] = $station['name'];
}
$branchPoints = [];
$sql = "SELECT id, description as name, gps_lat, gps_long, object_type, 'dispatcher' as type
FROM FiberPlanDispatcher
WHERE network_id = 90 AND object_type = 4
AND gps_lat IS NOT NULL AND gps_long IS NOT NULL";
$res = $db->query($sql);
if ($db->num_rows($res)) {
while ($data = $db->fetch_array($res)) {
$branchPoints[] = [
'id' => $data['id'],
'name' => $data['name'],
'gps_lat' => $data['gps_lat'],
'gps_long' => $data['gps_long'],
'object_type' => intval($data['object_type']),
'type' => $data['type']
];
}
}
$allFibers = FiberPlanFiberModel::getByCableAndSheet($cable->id, null);
$fibersArray = [];
foreach ($allFibers as $f) {
$fibersArray[] = [
'id' => $f->id,
'fiber_nr_cable' => $f->fiber_nr_cable,
'branch_type' => $f->branch_type,
'branch_cable_nr' => $f->branch_cable_nr,
'branch_from_location' => $f->branch_from_location,
'branch_fiber_nr' => $f->branch_fiber_nr
];
}
$details['cable_info'] = [
'id' => $cable->id,
'description' => $cable->description,
'fibers' => $fibersArray,
'diameter' => $cable->diameter,
'cable_route_array' => $cable_route_array,
'cable_route_full' => $cable_route_data,
'coordinates' => $cable->coordinates,
'location' => $fiber->location,
'branch_points' => $branchPoints
];
if ($cable->cable_route) {
$routeArray = json_decode($cable->cable_route, true);
if (is_array($routeArray)) {
$details['cable_info']['cable_route_array'] = $routeArray;
}
}
}
}
if ($fiber->branch_type === 'Abzweigkabel' && $fiber->branch_cable_nr) {
$details['branch_path'] = $this->traceBranchPath($fiber, 0, 10, $debug);
}
}
$details['debug'] = $debug;
return mfBaseController::returnJson(mfResponse::Ok(['fiber' => $details]));
$allPaths[] = [
'fiber' => $details
];
}
return mfBaseController::returnJson(mfResponse::Ok(['paths' => $allPaths]));
}
private function buildCompleteCableChain($endFiber)
@@ -530,9 +647,12 @@ class PopController extends mfBaseController
]);
while ($depth < $maxDepth) {
$currentFiberNr = intval($currentFiber->fiber_nr_cable);
$sql = "SELECT * FROM FiberPlanFiber
WHERE branch_type = 'Abzweigkabel'
AND branch_cable_nr = '" . $db->escape($currentCable->description) . "'
AND branch_fiber_nr = $currentFiberNr
LIMIT 1";
$this->log->debug("Depth $depth: Suche Parent-Faser für Kabel: {$currentCable->description}");
@@ -1267,6 +1387,9 @@ class PopController extends mfBaseController
case "getFiberPath":
return $this->getFiberPathAction();
break;
case "getAllFiberPathsForHome":
return $this->getAllFiberPathsForHomeAction();
break;
case "saveCableFibers":
return $this->saveCableFibersAction();
break;
@@ -1276,6 +1399,9 @@ class PopController extends mfBaseController
case "getNetworkMapData":
return $this->getNetworkMapDataAction();
break;
case "getSplicePlanForElement":
return $this->getSplicePlanForElementAction();
break;
default:
$return = false;
}
@@ -1459,7 +1585,7 @@ class PopController extends mfBaseController
$cables = [];
$cableRes = $db->select(
"FiberPlanCable",
"id, description, fibers, diameter, state, coordinates",
"id, description, fibers, diameter, state, coordinates, level, cable_type, status",
"network_id=$network_id"
);
@@ -1491,7 +1617,10 @@ class PopController extends mfBaseController
'coordinates' => $convertedCoords,
'fibers' => $cableData->fibers,
'diameter' => $cableData->diameter,
'state' => $cableData->state
'state' => $cableData->state,
'level' => $cableData->level,
'cable_type' => $cableData->cable_type,
'status' => $cableData->status
];
}
}
@@ -1648,4 +1777,126 @@ class PopController extends mfBaseController
'customerConnections' => $customerConnections
]));
}
protected function getSplicePlanForElementAction()
{
$id = $this->request->id;
if (!is_numeric($id)) {
return mfBaseController::returnJson(mfResponse::BadRequest(['message' => 'Invalid ID']));
}
$db = FronkDB::singleton();
$dispatcherRes = $db->select("FiberPlanDispatcher", "*", "id=$id");
if (!$db->num_rows($dispatcherRes)) {
return mfBaseController::returnJson(mfResponse::NotFound(['message' => 'Verteiler nicht gefunden']));
}
$dispatcher = $db->fetch_object($dispatcherRes);
$dispatcherName = $dispatcher->description;
$cableIds = [];
$sql = "SELECT DISTINCT cable_id FROM FiberPlanCableStation WHERE station_type='dispatcher' AND station_id=$id";
$res = $db->query($sql);
if ($db->num_rows($res)) {
while ($row = $db->fetch_array($res)) {
$cableIds[] = $row['cable_id'];
}
}
$result = [];
if (!empty($cableIds)) {
$cableIdsStr = implode(',', $cableIds);
$cableMap = [];
$cableRes = $db->select("FiberPlanCable", "id, description", "id IN ($cableIdsStr)");
while ($c = $db->fetch_object($cableRes)) {
$cableMap[$c->id] = $c->description;
}
$escapedName = $db->escape($dispatcherName);
$sqlFibers = "SELECT * FROM FiberPlanFiber WHERE cable_id IN ($cableIdsStr) AND (branch_from_location = '$escapedName' OR location = '$escapedName')";
$fiberRes = $db->query($sqlFibers);
$rawFibers = [];
$targetCableNames = [];
while ($fiber = $db->fetch_object($fiberRes)) {
$rawFibers[] = $fiber;
if ($fiber->branch_cable_nr) {
$targetCableNames[$fiber->branch_cable_nr] = true;
}
}
$targetColorMap = [];
if (!empty($targetCableNames)) {
$namesList = [];
foreach (array_keys($targetCableNames) as $name) {
$namesList[] = "'" . $db->escape($name) . "'";
}
$namesStr = implode(',', $namesList);
$targetCablesRes = $db->select("FiberPlanCable", "id, description", "description IN ($namesStr)");
$targetCableIds = [];
$targetCableIdToName = [];
while ($tc = $db->fetch_object($targetCablesRes)) {
$targetCableIds[] = $tc->id;
$targetCableIdToName[$tc->id] = $tc->description;
}
if (!empty($targetCableIds)) {
$tcIdsStr = implode(',', $targetCableIds);
$targetFibersRes = $db->select("FiberPlanFiber", "cable_id, fiber_nr_cable, fiber_color, fiber_color_hex", "cable_id IN ($tcIdsStr)");
while ($tf = $db->fetch_object($targetFibersRes)) {
$cName = $targetCableIdToName[$tf->cable_id] ?? null;
if ($cName) {
$targetColorMap[$cName][$tf->fiber_nr_cable] = [
'color' => $tf->fiber_color,
'hex' => $tf->fiber_color_hex
];
}
}
}
}
foreach ($rawFibers as $fiber) {
$targetColorInfo = null;
if ($fiber->branch_cable_nr && $fiber->branch_fiber_nr) {
$targetColorInfo = $targetColorMap[$fiber->branch_cable_nr][$fiber->branch_fiber_nr] ?? null;
}
$result[] = [
'cable_name' => $cableMap[$fiber->cable_id] ?? 'Unknown',
'fiber_nr' => $fiber->fiber_nr_cable,
'fiber_color' => $fiber->fiber_color,
'fiber_color_hex' => $fiber->fiber_color_hex,
'bundle_color' => $fiber->bundle_color,
'bundle_color_hex' => $fiber->bundle_color_hex,
'target_cable' => $fiber->branch_cable_nr,
'target_fiber' => $fiber->branch_fiber_nr,
'target_fiber_color' => $targetColorInfo['color'] ?? null,
'target_fiber_color_hex' => $targetColorInfo['hex'] ?? null,
'target_bundle_color' => $fiber->branch_bundle_color,
'target_bundle_color_hex' => $fiber->branch_bundle_color_hex,
'connector' => $fiber->connector_nr,
'description' => $fiber->comment,
'home_id' => $fiber->home_id,
'address' => $fiber->address ?? null,
'customer_cable_type' => $fiber->customer_cable_type ?? null,
'customer_cable_fiber_nr' => $fiber->customer_cable_fiber_nr ?? null,
'customer_connector_type' => $fiber->customer_connector_type ?? null,
'customer_cable_spec' => $fiber->customer_cable_spec ?? null,
'customer_fiber_range' => $fiber->customer_fiber_range ?? null,
];
}
}
return mfBaseController::returnJson(mfResponse::Ok([
'dispatcher' => $dispatcher,
'connections' => $result
]));
}
}

BIN
public/img/markers/marker-pop-b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/img/markers/marker-pop-bl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/img/markers/marker-pop-o.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/img/markers/marker-pop-v.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

10
public/js/pages/Pop/Pop.css Normal file
View File

@@ -0,0 +1,10 @@
.fa-map-location-dot:before
{
color: #d80000;
}
.fa-map-location-dot:after
{
color: #147d00;
opacity: 0.9;
}

353
public/js/pages/Pop/PopMap.js Normal file
View File

@@ -0,0 +1,353 @@
Vue.component('pop-map-modal', {
template: `
<div>
<div class="modal fade" id="popMapModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 95vw;">
<div class="modal-content" style="height: 90vh;">
<div class="modal-header bg-dark text-white">
<h5 class="modal-title"><i class="fas fa-map-marked-alt"></i><span class="text-light mt-1 d-inline-block"> POP Übersicht</span></h5>
<div class="d-flex align-items-center ml-auto">
<div class="input-group mr-3 position-relative" style="width: 300px;">
<input type="text" class="form-control form-control-sm"
v-model="searchQuery"
@input="filterPops"
@keydown.down.prevent="moveSelection(1)"
@keydown.up.prevent="moveSelection(-1)"
@keydown.enter.prevent="handleEnter"
placeholder="POP suchen...">
<div class="input-group-append">
<button class="btn btn-primary btn-sm" @click="searchPop"><i class="fas fa-search"></i></button>
<button v-if="searchQuery" class="btn btn-secondary btn-sm" @click="clearSearch"><i class="fas fa-times"></i></button>
</div>
<div v-if="filteredPops.length > 0 && showSuggestions" class="list-group position-absolute w-100" style="top: 100%; z-index: 1050; max-height: 300px; overflow-y: auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<a href="#" v-for="(pop, index) in filteredPops" :key="pop.id"
class="list-group-item list-group-item-action py-2"
:class="{ 'active': index === selectedIndex }"
@click.prevent="selectPop(pop)">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" :class="{ 'text-white': index === selectedIndex }">{{ pop.name }}</h6>
</div>
<small :class="index === selectedIndex ? 'text-white' : 'text-muted'">{{ categories[pop.category || 99] }} | {{ pop.location }}</small>
</a>
</div>
</div>
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
<div class="modal-body p-0 position-relative">
<div id="pop-map" style="width: 100%; height: 100%;"></div>
<div class="legend-box" style="position: absolute; bottom: 30px; right: 20px; background: white; padding: 15px; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,0.2); z-index: 1000; min-width: 200px;">
<h6 class="border-bottom p-0 pb-2 mb-2 mt-0"><strong>Kategorien</strong></h6>
<div v-for="(label, key) in categories" :key="key" class="mb-1 d-flex align-items-center">
<div class="custom-control custom-checkbox mr-2">
<input type="checkbox" class="custom-control-input" :id="'cat-'+key" v-model="visibleCategories[key]" @change="updateMap(false)">
<label class="custom-control-label" :for="'cat-'+key" style="cursor: pointer;">
</label>
</div>
<img :src="window.TT_CONFIG.BASE_URL + '/' + categoryImages[key]" style="height: 20px; margin-right: 5px;">
<label :for="'cat-'+key" style="cursor: pointer; margin-bottom: 0;">{{ label }} ({{ categoryCounts[key] || 0 }})</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`,
data() {
return {
map: null,
popLayer: null,
searchQuery: '',
filteredPops: [],
showSuggestions: false,
selectedIndex: -1,
categories: {
1: 'Outdoor (Kasten/Schrank)',
2: 'Indoor (Keller Gebäude)',
3: 'Sender/Funk (Sendemast)',
4: 'Container (Garage, Container)',
99: 'Unbekannt'
},
states: {
1: "Planung (Innenleben)",
2: "Bauphase (Schrank)",
3: "Grobdoku",
4: "in Betrieb",
5: "von Techniker abgenommen (Altbestand)"
},
categoryImages: {
1: 'img/markers/marker-pop.png',
2: 'img/markers/marker-pop-o.png',
3: 'img/markers/marker-pop-b.png',
4: 'img/markers/marker-pop-v.png',
99: 'img/markers/marker-pop-bl.png'
},
categoryColors: {
1: '#a1dfa0', // Outdoor - Green
2: '#f8b767', // Indoor - Orange
3: '#a9b8ec', // Sender - Blue
4: '#f89797', // Container - Yellow
99: '#808080' // Unbekannt - Gray
},
visibleCategories: {
1: true,
2: true,
3: true,
4: true,
99: true
},
categoryCounts: {
1: 0,
2: 0,
3: 0,
4: 0,
99: 0
},
allPops: [],
markers: []
};
},
mounted() {
// Prepare data
const popsObj = window.TT_CONFIG.POPS || {};
this.allPops = Object.values(popsObj);
this.calculateCounts();
// Listen to modal open event to init map correctly (fix render issues)
$(document).on('shown.bs.modal', '#popMapModal', this.initMap);
// Close suggestions when clicking outside
document.addEventListener('click', this.handleClickOutside);
},
beforeDestroy() {
$(document).off('shown.bs.modal', '#popMapModal', this.initMap);
document.removeEventListener('click', this.handleClickOutside);
},
methods: {
calculateCounts() {
// Reset counts
for (let key in this.categoryCounts) {
this.categoryCounts[key] = 0;
}
this.allPops.forEach(pop => {
const category = pop.category || 99;
if (this.categoryCounts.hasOwnProperty(category)) {
this.categoryCounts[category]++;
} else {
// Just in case we have a category not in our list, count it as 99 or ignore
this.categoryCounts[99]++;
}
});
},
open() {
$('#popMapModal').modal('show');
},
initMap() {
if (this.map) {
setTimeout(() => {
this.map.invalidateSize();
}, 100);
return;
}
if (typeof L === 'undefined' || !L.MakiMarkers) {
console.error('Leaflet or MakiMarkers not loaded');
return;
}
L.MakiMarkers.accessToken = window.TT_CONFIG.MAPBOX_TOKEN;
this.map = L.map('pop-map').setView([51.1657, 10.4515], 6);
const standardLayer = L.tileLayer('https://mapsneu.wien.gv.at/basemap/{id}/normal/google3857/{z}/{y}/{x}.{imgtype}', {
maxZoom: 19,
id: "geolandbasemap",
imgtype: "png",
attribution: 'Basemap.at'
});
const satelliteLayer = L.tileLayer('https://mapsneu.wien.gv.at/basemap/{id}/normal/google3857/{z}/{y}/{x}.{imgtype}', {
maxZoom: 19,
id: "bmaporthofoto30cm",
imgtype: "jpeg",
attribution: 'Basemap.at'
});
standardLayer.addTo(this.map);
const baseMaps = {
"Karte": standardLayer,
"Satellit": satelliteLayer
};
L.control.layers(baseMaps).addTo(this.map);
this.popLayer = L.featureGroup().addTo(this.map);
this.updateMap();
},
updateMap(shouldFit = true) {
if (!this.map) return;
this.popLayer.clearLayers();
this.markers = [];
const bounds = L.latLngBounds();
let hasMarkers = false;
this.allPops.forEach(pop => {
const category = pop.category || 99;
if (!this.visibleCategories[category]) return;
const gps = pop.gps;
if (!gps) return;
const parts = gps.split(',');
if (parts.length !== 2) return;
const lat = parseFloat(parts[0]);
const lng = parseFloat(parts[1]);
if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) return;
let iconUrl = this.categoryImages[category] || this.categoryImages[99];
let color = this.categoryColors[category] || '#808080';
const marker = L.marker([lat, lng], {
icon: L.MakiMarkers.icon({
icon: 'village',
color: color,
size: 'l'
})
});
let categoryName = this.categories[category] || 'Unbekannt';
let stateText = this.states[pop.state] || pop.state || '-';
const popupContent = `
<div style="min-width: 200px;">
<h6 class="p-0"><i class="fas fa-building"></i> <strong>${pop.name}</strong></h6>
<hr class="my-2">
<div><strong>Kategorie:</strong> ${categoryName}</div>
<div><strong>Status:</strong> ${stateText}</div>
<div><strong>Zutritt:</strong> ${pop.location || '-'}</div>
<div class="mt-2">
<a target="_blank" href="${window.TT_CONFIG.BASE_URL}/Pop/Detail?id=${pop.id}" class="btn btn-sm btn-info btn-block text-light"><i class="fas fa-info-circle"></i> Details</a>
</div>
</div>
`;
marker.bindPopup(popupContent);
marker.popData = pop;
this.popLayer.addLayer(marker);
this.markers.push(marker);
bounds.extend([lat, lng]);
hasMarkers = true;
});
if (shouldFit === true && hasMarkers && !this.searchQuery) {
this.map.fitBounds(bounds, {padding: [50, 50]});
}
},
filterPops() {
const query = this.searchQuery.toLowerCase().trim();
this.selectedIndex = -1;
if (query.length < 1) {
this.filteredPops = [];
this.showSuggestions = false;
return;
}
this.filteredPops = this.allPops.filter(pop =>
pop.name.toLowerCase().includes(query) ||
(pop.location && pop.location.toLowerCase().includes(query))
).slice(0, 10);
this.showSuggestions = true;
},
moveSelection(step) {
if (!this.showSuggestions || this.filteredPops.length === 0) return;
this.selectedIndex += step;
if (this.selectedIndex < 0) {
this.selectedIndex = this.filteredPops.length - 1;
} else if (this.selectedIndex >= this.filteredPops.length) {
this.selectedIndex = 0;
}
},
handleEnter() {
if (this.showSuggestions && this.selectedIndex >= 0 && this.selectedIndex < this.filteredPops.length) {
this.selectPop(this.filteredPops[this.selectedIndex]);
} else {
this.searchPop();
}
},
selectPop(pop) {
this.searchQuery = pop.name;
this.showSuggestions = false;
this.selectedIndex = -1;
this.searchPop();
},
handleClickOutside(event) {
if (!event.target.closest('.input-group')) {
this.showSuggestions = false;
this.selectedIndex = -1;
}
},
searchPop() {
const query = this.searchQuery.toLowerCase().trim();
if (!query) {
this.clearSearch();
return;
}
this.showSuggestions = false;
this.selectedIndex = -1;
let found = this.markers.find(m => m.popData.name.toLowerCase().includes(query));
if (!found) {
const hiddenPop = this.allPops.find(p => p.name.toLowerCase().includes(query));
if (hiddenPop) {
const category = hiddenPop.category || 99;
if (!this.visibleCategories[category]) {
this.visibleCategories[category] = true;
this.updateMap(false);
found = this.markers.find(m => m.popData.id === hiddenPop.id);
}
}
}
if (found) {
this.map.flyTo(found.getLatLng(), 15);
setTimeout(() => {
found.openPopup();
}, 500);
} else {
alert('Kein POP gefunden (oder keine GPS Koordinaten).');
}
},
clearSearch() {
this.searchQuery = '';
this.filteredPops = [];
this.showSuggestions = false;
this.selectedIndex = -1;
const bounds = L.latLngBounds();
this.markers.forEach(m => bounds.extend(m.getLatLng()));
if (this.markers.length > 0) {
this.map.fitBounds(bounds, {padding: [50, 50]});
}
}
}
});

11
public/js/pages/Pop/Pop.js → public/js/pages/Pop/PopView.js
View File

@@ -11,12 +11,19 @@ Vue.component('Pop', {
<i class="fas fa-plus"></i>
Pop hinzufügen
</button>
<button type="button" class="btn btn-light mr-2" @click="$refs.mapModal.open()">
<i class="fa-duotone fa-regular fa-map-location-dot"></i> <span class="font-weight-semibold">Übersichtskarte</span>
</button>
</template>
<template v-slot:name="{ row }">
<a target="_blank" :href="window['TT_CONFIG']['BASE_URL'] +'/Pop/Detail?id=' + row.id">{{row.name}}</a>
</template>
<template v-slot:category="{ row }">
{{ {1: 'Outdoor', 2: 'Indoor', 3: 'Sender/Funk', 4: 'Container', 99: 'Unbekannt'}[row.category] || 'Unbekannt' }}
</template>
<template v-slot:doku_date="{ row }">
<span>{{row.doku_date ? window.moment.unix(row.doku_date).format('DD.MM.YYYY') : ''}}</span>
</template>
@@ -45,6 +52,7 @@ Vue.component('Pop', {
</tt-table>
<pop-map-modal ref="mapModal"></pop-map-modal>
</tt-card>
`,
data() {
@@ -60,7 +68,8 @@ Vue.component('Pop', {
{value: '1', text: 'Outdoor (Kasten/Schrank)'},
{value: '2', text: 'Indoor (Keller Gebäude)'},
{value: '3', text: 'Sender/Funk (Sendemast)'},
{value: '4', text: 'Container (Garage, Container)'}]},
{value: '4', text: 'Container (Garage, Container)'},
{value: '99', text: 'Unbekannt'}]},
{text: 'Netzgebiet', key: 'networkArea', class: 'text-center',
// TODO: fix autocomplete Filter
// filter: 'autocomplete',

0
public/js/pages/pop/detail.js → public/js/pages/Pop/detail/detail.js
View File

774
public/js/pages/Pop/fiber.js → public/js/pages/Pop/detail/fiber.js
View File

@@ -308,7 +308,7 @@ $(document).ready(function () {
initCableSearch();
});
function loadFiberPlanCableDetails(cableName, fiberStart = null, fiberEnd = null) {
function loadFiberPlanCableDetails(cableName, fiberStart = null, fiberEnd = null, homeId = null) {
if (cableName) {
cableName = cableName.split(' ')[0];
}
@@ -316,7 +316,8 @@ function loadFiberPlanCableDetails(cableName, fiberStart = null, fiberEnd = null
const modalBody = $('#fiberPlanCableModalBody');
modalHistory.push({
type: 'cable',
data: cableName
data: cableName,
homeId: homeId
});
modalBody.html(`
@@ -352,7 +353,7 @@ function loadFiberPlanCableDetails(cableName, fiberStart = null, fiberEnd = null
editBtn.attr('data-cable-id', cable.id);
editBtn.attr('data-cable-name', cable.description);
editBtn.show();
renderFiberPlanCableDetails(response.result.cable, fiberStart, fiberEnd);
renderFiberPlanCableDetails(response.result.cable, fiberStart, fiberEnd, homeId);
} else {
$('#modal-edit-cable-btn').hide();
modalBody.html(`
@@ -374,9 +375,19 @@ function loadFiberPlanCableDetails(cableName, fiberStart = null, fiberEnd = null
});
}
function renderFiberPlanCableDetails(cable, fiberStart = null, fiberEnd = null) {
function renderFiberPlanCableDetails(cable, fiberStart = null, fiberEnd = null, homeId = null) {
const modalBody = $('#fiberPlanCableModalBody');
let displayFibers = cable.fiber_list;
if (homeId) {
displayFibers = displayFibers.filter(f => f.home_id === homeId);
$('#fiberPlanCableModal .modal-title').html('<i class="fa fa-home"></i> Fasern für Hausanschluss: ' + homeId +
'<button class="btn btn-primary btn-sm ml-3" id="modal-edit-cable-btn" style="display: none;"><i class="fas fa-table"></i> Excel-Editor</button>');
} else {
$('#fiberPlanCableModal .modal-title').html('<i class="fa fa-cable"></i> Kabel-Details' +
'<button class="btn btn-primary btn-sm ml-3" id="modal-edit-cable-btn" style="display: none;"><i class="fas fa-table"></i> Excel-Editor</button>');
}
const usedFibers = cable.fiber_list.filter(f => f.home_id || f.branch_type).length;
const freeFibers = cable.fiber_list.filter(f => !f.home_id && !f.branch_type).length;
@@ -486,7 +497,7 @@ function renderFiberPlanCableDetails(cable, fiberStart = null, fiberEnd = null)
<div class="row">
<div class="col-md-12">
<h6 class="mb-3">
<i class="fa fa-list"></i> Fasern (${cable.fiber_list.length})
<i class="fa fa-list"></i> Fasern (${displayFibers.length})
</h6>
<div class="table-responsive">
<table id="fiber-details-table" class="table table-sm table-hover table-striped fiber-list-table" style="width: 100%">
@@ -506,8 +517,8 @@ function renderFiberPlanCableDetails(cable, fiberStart = null, fiberEnd = null)
<tbody>
`;
if (cable.fiber_list.length > 0) {
cable.fiber_list.forEach(fiber => {
if (displayFibers.length > 0) {
displayFibers.forEach(fiber => {
const colorStyle = fiber.fiber_color_hex ? `style="background-color: ${fiber.fiber_color_hex}"` : '';
const statusBadge = getFiberStatusBadge(fiber);
const info = getFiberShortInfo(fiber);
@@ -559,7 +570,7 @@ function renderFiberPlanCableDetails(cable, fiberStart = null, fiberEnd = null)
`;
modalBody.html(html);
if (cable.fiber_list.length > 0) {
if (displayFibers.length > 0) {
$('#fiber-details-table thead tr').clone(true).addClass('filters').appendTo('#fiber-details-table thead');
$('#fiber-details-table').DataTable({
@@ -609,6 +620,331 @@ function renderFiberPlanCableDetails(cable, fiberStart = null, fiberEnd = null)
}
}
function showCustomerFibers(homeId, cableName) {
if (!homeId) {
alert('Keine Home-ID vorhanden.');
return;
}
showAllCustomerFiberRoutes(homeId);
}
function showAllCustomerFiberRoutes(homeId) {
const mapModalHtml = `
<div class="modal fade" id="fiberRouteMapModal" tabindex="-1" role="dialog" style="z-index: 100000;" data-backdrop="false">
<div class="modal-dialog modal-fullscreen-map" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i class="fa fa-map-marked-alt"></i>
Faserstrecken für Hausanschluss: ${homeId}
</h5>
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body p-0" style="display: flex; flex-direction: column;">
<div id="fiber-route-map" style="flex: 0 0 70%; width: 100%; min-height: 400px;"></div>
<div id="fiber-route-schema" style="flex: 1; overflow-y: auto; border-top: 3px solid #007bff; background: #ffffff; padding: 20px;" class="pt-0"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Schließen
</button>
</div>
</div>
</div>
</div>
`;
$('#fiberRouteMapModal').remove();
const fsElement = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
if (fsElement) {
$(fsElement).append(mapModalHtml);
} else {
$('body').append(mapModalHtml);
}
$('#fiberRouteMapModal').modal('show');
$('#fiber-route-map').html(`
<div class="text-center py-5">
<div class="spinner-border text-primary" role="status"></div>
<p class="mt-3">Lade Strecken...</p>
</div>
`);
$.ajax({
url: linkGetAllFiberPathsForHome,
method: 'GET',
data: {home_id: homeId},
dataType: 'json',
success: function (response) {
if (response.status === 'OK' && response.result.paths) {
initializeMultiFiberMap(response.result.paths);
renderMultiCableRouteSchema(response.result.paths);
} else {
$('#fiber-route-map').html(`
<div class="alert alert-warning m-3">
<i class="fa fa-exclamation-triangle"></i>
Keine Strecken gefunden.
</div>
`);
}
},
error: function () {
$('#fiber-route-map').html(`
<div class="alert alert-danger m-3">
<i class="fa fa-exclamation-circle"></i>
Fehler beim Laden der Daten.
</div>
`);
}
});
}
function initializeMultiFiberMap(paths) {
setTimeout(function () {
// 1. Alte Karte sauber entfernen
if (window.fiberRouteMapInstance) {
window.fiberRouteMapInstance.remove();
window.fiberRouteMapInstance = null;
}
const mapContainer = document.getElementById('fiber-route-map');
if (!mapContainer) return;
mapContainer.innerHTML = ''; // Spinner entfernen
const allBounds = L.featureGroup();
let hasData = false;
// 2. Neue Karte initialisieren
const map = L.map('fiber-route-map');
window.fiberRouteMapInstance = map;
L.tileLayer('https://mapsneu.wien.gv.at/basemap/{id}/normal/google3857/{z}/{y}/{x}.{imgtype}', {
maxZoom: 22,
id: "geolandbasemap",
imgtype: "png"
}).addTo(map);
// 3. Daten durchlaufen und zeichnen
paths.forEach((path, pathIndex) => {
const fiber = path.fiber;
// WICHTIG: Hier holen wir die Kabeldaten.
// Entweder aus 'all_cables' (neues PHP) oder 'chain' (altes Fallback)
let segmentsToDraw = [];
if (fiber && fiber.all_cables) {
segmentsToDraw = fiber.all_cables;
} else if (path.chain) {
segmentsToDraw = path.chain;
}
// Zufallsfarbe oder basierend auf Index, falls keine Farbe da ist
const defaultColor = ['#3388ff', '#ff3333', '#33ff33', '#ffaa00'][pathIndex % 4];
segmentsToDraw.forEach(segment => {
let routePoints = [];
// Koordinaten parsen
if (segment.coordinates) {
let coords = segment.coordinates;
if (typeof coords === 'string') {
try { coords = JSON.parse(coords); } catch (e) {}
}
if (Array.isArray(coords) && coords.length > 0) {
routePoints = coords.map(c => [parseFloat(c.gps_lat), parseFloat(c.gps_long)]);
}
}
if (routePoints.length > 0) {
hasData = true;
// Linie zeichnen
const polyline = L.polyline(routePoints, {
color: fiber.fiber_color_hex || defaultColor,
weight: 4,
opacity: 0.7
}).bindTooltip(`
<strong>${segment.description || segment.cable_name || 'Kabel'}</strong><br>
Faser: ${fiber.fiber_nr_cable} (${fiber.fiber_color})
`, { sticky: true });
allBounds.addLayer(polyline);
}
});
// Stationen (Verteiler/POP) zeichnen, falls vorhanden (im Hauptkabel-Info)
if (fiber.cable_info && fiber.cable_info.cable_route_full) {
fiber.cable_info.cable_route_full.forEach(station => {
if (station.gps_lat && station.gps_long) {
const lat = parseFloat(station.gps_lat);
const lng = parseFloat(station.gps_long);
// Icon Logik
let iconColor = '#3388ff';
let iconName = 'circle';
if (station.type === 'pop') { iconColor = '#acf0ab'; iconName = 'village'; }
else if (station.object_type == 4) { iconColor = '#FF6B6B'; iconName = 'cross'; } // Abzweig
else if (station.object_type == 2) { iconColor = '#ffa726'; iconName = 'square'; } // Schacht
const marker = L.marker([lat, lng], {
icon: L.MakiMarkers.icon({ icon: iconName, color: iconColor, size: 's' })
}).bindPopup(`<strong>${station.name}</strong>`);
allBounds.addLayer(marker);
}
});
}
});
if (hasData) {
allBounds.addTo(map);
map.fitBounds(allBounds.getBounds(), { padding: [50, 50] });
} else {
// Fallback: Wenn keine Geodaten da sind, leere Karte auf Wien zentrieren
map.setView([48.2082, 16.3738], 12);
// Optional: Nachricht anzeigen, aber Karte nicht killen
// L.popup().setLatLng([48.2082, 16.3738]).setContent("Keine GPS-Daten für diese Fasern.").openOn(map);
}
}, 300); // Timeout lassen, damit das Modal sicher offen ist
}
function renderMultiCableRouteSchema(paths) {
const container = $('#fiber-route-schema');
container.empty();
if (!paths || paths.length === 0) {
container.html('<div class="text-center text-muted">Keine Daten verfügbar</div>');
return;
}
paths.forEach((path, pathIndex) => {
const fiber = path.fiber;
const chain = path.chain; // Chain is [POP-Side ... Home-Side]
let html = `
<div class="mb-4 border rounded p-3 bg-light">
<h6 class="border-bottom pb-2 mb-3">
<span class="fiber-color-badge-modal" style="background-color: ${fiber.fiber_color_hex || '#ccc'}"></span>
<strong>Faser #${fiber.fiber_nr_cable}</strong>
<small class="text-muted">(Bündel ${fiber.bundle_nr}) - HomeID: ${fiber.home_id || '?'}</small>
</h6>
<div class="schema-flow-horizontal">
`;
// 1. Start Node: POP
// Attempt to find POP name from the first segment's route
let popName = 'POP';
if (chain.length > 0 && chain[0].cable_route_full) {
const popStation = chain[0].cable_route_full.find(s => s.type === 'pop');
if (popStation) popName = popStation.name;
}
html += `
<div class="schema-node-horizontal station-pop">
<div class="schema-node-icon-horizontal" style="color: #246902;">
<i class="fa fa-building"></i>
</div>
<div class="schema-node-label-horizontal">
<strong>${popName}</strong>
</div>
</div>
`;
chain.forEach((segment, segIndex) => {
const isLast = segIndex === chain.length - 1;
const segmentColor = segment.fiber_color_hex || '#666';
const fiberInfo = `F${segment.fiber_nr} / B${segment.bundle_nr}`;
const lineClass = (segment.type === 'branch') ? 'schema-line-dashed-horizontal' : 'schema-line-horizontal';
// Cable Line
html += `
<div class="schema-connection-horizontal" style="color: ${segmentColor};">
<div class="${lineClass}" style="${lineClass === 'schema-line-horizontal' ? `background-color: ${segmentColor};` : ''}">
<div class="schema-cable-label">
<strong>${segment.cable_name}</strong><br>
<small>${fiberInfo}</small>
</div>
</div>
</div>
`;
// Next Node
let nodeClass = 'station-distributor';
let icon = 'fa-sitemap';
let iconColor = '#3388ff';
let label = 'Verteiler';
if (isLast) {
// Destination of the last cable is the Home
nodeClass = 'station-customer';
icon = 'fa-home';
iconColor = '#c62828';
label = 'Haus';
if (fiber.address) {
label += `<br><span class="small">${fiber.address}</span>`;
}
} else {
// Intermediate Node (Distributor/Branch)
// We check the next segment to see where this one ends,
// or check this segment's destination info if available.
// Often the cable route of the current segment ends at the distributor where the next segment starts.
// We can try to get the name of the last station of this cable.
if (segment.cable_route_full && segment.cable_route_full.length > 0) {
const lastStation = segment.cable_route_full[segment.cable_route_full.length - 1];
if (lastStation) {
label = lastStation.name;
if (lastStation.object_type == 4) {
nodeClass = 'station-branch';
icon = 'fa-code-branch';
iconColor = '#b71c1c';
} else if (lastStation.object_type == 2) {
nodeClass = 'station-manhole';
icon = 'fa-square';
iconColor = '#e65100';
}
}
}
if (segment.type === 'branch' && nodeClass === 'station-distributor') {
// Fallback for branch cable end if not clear
nodeClass = 'station-branch';
icon = 'fa-code-branch';
iconColor = '#b71c1c';
label = 'Abzweig';
}
}
html += `
<div class="schema-node-horizontal ${nodeClass}">
<div class="schema-node-icon-horizontal" style="color: ${iconColor};">
<i class="fa ${icon}"></i>
</div>
<div class="schema-node-label-horizontal">
<strong>${label}</strong>
</div>
</div>
`;
});
html += `
</div>
</div>
`;
container.append(html);
});
}
function loadFiberPath(fiberId) {
const modal = $('#fiberPlanCableModal');
const modalBody = $('#fiberPlanCableModalBody');
@@ -1448,6 +1784,7 @@ function initializeCableRouteMap(cable) {
}, 300);
}
function renderCableRouteSchema(cable) {
const schemaContainer = $('#cable-route-schema');
@@ -1536,6 +1873,7 @@ function renderCableRouteSchema(cable) {
$station.popover('show');
});
}
function showFiberRouteMap(fiberId) {
const mapModalHtml = `
<div class="modal fade" id="fiberRouteMapModal" tabindex="-1" role="dialog">
@@ -1626,8 +1964,7 @@ function findNearestBranchPoint(customerLat, customerLng, allSegments) {
type: 'branch_point'
};
}
}
else if (station.type === 'dispatcher' && (station.object_type == 1 || station.object_type == 2 || station.object_type === '1' || station.object_type === '2')) {
} else if (station.type === 'dispatcher' && (station.object_type == 1 || station.object_type == 2 || station.object_type === '1' || station.object_type === '2')) {
if (distance < minDispatcherDistance) {
minDispatcherDistance = distance;
nearestDispatcher = {
@@ -1644,8 +1981,7 @@ function findNearestBranchPoint(customerLat, customerLng, allSegments) {
});
if (nearestBranchPoint) {
return nearestBranchPoint;
}
else if (nearestDispatcher) {
} else if (nearestDispatcher) {
return nearestDispatcher;
}
return null;
@@ -1730,8 +2066,10 @@ function initializeFiberRouteMap(fiber, isLinework = false) {
foundSourceFiber = candidates[0];
}
}
console.log(foundSourceFiber);
if (foundSourceFiber) {
console.log("✅ Gefundene Source-Faser (Rohdaten):", foundSourceFiber);
console.log("Verfügbare Keys:", Object.keys(foundSourceFiber));
const correctFiberNr = foundSourceFiber.fiber_nr_cable || foundSourceFiber.fiber_nr;
// console.log("🔧 Hauptkabel-Faser gefunden:", correctFiberNr, foundSourceFiber);
@@ -1744,6 +2082,7 @@ function initializeFiberRouteMap(fiber, isLinework = false) {
bundle_color: foundSourceFiber.bundle_color || foundSourceFiber.bundle_color_name,
bundle_color_hex: foundSourceFiber.bundle_color_hex
};
console.log(branchSource);
}
}
}
@@ -1927,6 +2266,7 @@ function initializeFiberRouteMap(fiber, isLinework = false) {
// console.log(`${window.allBranchPoints.length} Abzweigpunkte aus Backend geladen`);
}
const allBounds = L.featureGroup();
function getBranchConnectionsAtStation(stationName, currentSegment, allSegs) {
const connections = [];
if (currentSegment.type === 'main' && currentSegment.branch_dropouts) {
@@ -2021,6 +2361,7 @@ function initializeFiberRouteMap(fiber, isLinework = false) {
return connections;
}
const drawnStations = new Map();
allSegments.forEach((segment, segmentIndex) => {
@@ -2961,7 +3302,12 @@ function initializeFiberRouteMap(fiber, isLinework = false) {
allBounds.addLayer(fallbackLabelMarker);
const connectionMarker = L.circleMarker([connectionPoint.lat, connectionPoint.lng], {
radius: 8, fillColor: '#FFD700', fillOpacity: 0.9, color: '#FF6B6B', weight: 3, opacity: 1
radius: 8,
fillColor: '#FFD700',
fillOpacity: 0.9,
color: '#FF6B6B',
weight: 3,
opacity: 1
}).bindPopup(`
<div style="min-width: 200px;">
<h6><i class="fa fa-plug"></i> <strong>Verbindungspunkt</strong></h6>
@@ -3063,6 +3409,7 @@ function initializeFiberRouteMap(fiber, isLinework = false) {
}
});
}
updateTooltipVisibility();
map.on('zoomend', updateTooltipVisibility);
@@ -3122,6 +3469,7 @@ function initializeFiberRouteMap(fiber, isLinework = false) {
}, 300);
}
function renderFiberPathSchema(fiber, allSegments) {
const schemaContainer = $('#fiber-route-schema');
if (!fiber || allSegments.length === 0) {
@@ -3370,12 +3718,10 @@ function renderFiberPathSchema(fiber, allSegments) {
if (isDuplicate && isSegmentChange) {
// console.log(`⏭️ Branch beginnt an ${station.name} → Station überspringen, aber ${segment.name}-Linie zeichnen`);
previousSegment = segment;
}
else if (isDuplicate) {
} else if (isDuplicate) {
// console.log(`⏭️ Skipping duplicate within segment: ${station.name}`);
return;
}
else {
} else {
// console.log(`📍 Drawing station ${station.name}: segment=${segment.name}, isDropout=${isDropoutPoint}`);
const stationInfo = getStationInfo(station, isDropoutPoint, segment, allSegments);
const showTransition = isDropoutPoint && isSegmentChange;
@@ -3579,8 +3925,8 @@ function renderFiberPathSchema(fiber, allSegments) {
});
}
function renderFiberPathSchemaLinework(fiber, allSegments) {
const schemaContainer = $('#fiber-route-schema');
function renderFiberPathSchemaLinework(fiber, allSegments, targetContainer = null) {
const schemaContainer = targetContainer ? $(targetContainer) : $('#fiber-route-schema');
if (!fiber || allSegments.length === 0) {
schemaContainer.html('<div class="text-center text-muted">Keine Daten verfügbar</div>');
@@ -3841,10 +4187,13 @@ function renderFiberPathSchemaLinework(fiber, allSegments) {
if (!lineColor) lineColor = '#FF0000';
const lineClass = isBranchLine ? 'schema-line-dashed-horizontal' : 'schema-line-horizontal';
const lineStyle = isBranchLine
const isDashed = nextNode.level > 0;
const lineClass = isDashed ? 'schema-line-dashed-horizontal' : 'schema-line-horizontal';
const lineStyle = isDashed
? `color: ${lineColor};`
: `background-color: ${lineColor}; height: 4px;`;
// ÄNDERUNG ENDE
html += `
<div class="schema-connection-horizontal">
@@ -3912,10 +4261,21 @@ function renderFiberPathSchemaLinework(fiber, allSegments) {
function getLineworkStationStyle(node) {
if (node.type === 'pop') return {icon: 'fa-building', cssClass: 'station-pop', color: '#4caf50', typeLabel: 'POP'};
if (node.object_type == 4) return { icon: 'fa-code-branch', cssClass: 'station-branch', color: '#9c27b0', typeLabel: 'Abzweig' };
if (node.object_type == 2) return { icon: 'fa-archive', cssClass: 'station-manhole', color: '#ffa726', typeLabel: 'Schacht' };
if (node.object_type == 4) return {
icon: 'fa-code-branch',
cssClass: 'station-branch',
color: '#9c27b0',
typeLabel: 'Abzweig'
};
if (node.object_type == 2) return {
icon: 'fa-archive',
cssClass: 'station-manhole',
color: '#ffa726',
typeLabel: 'Schacht'
};
return {icon: 'fa-sitemap', cssClass: 'station-distributor', color: '#3388ff', typeLabel: 'Verteiler'};
}
function getBranchColor(level) {
const colors = [
'#FF6B6B',
@@ -3936,6 +4296,7 @@ function hexToColorName(hex) {
'#9B59B6': 'Violett',
'#E91E63': 'Pink',
'#3388ff': 'Blau',
'#0070C0': 'Blau',
'#FF0000': 'Rot',
'#00FF00': 'Grün',
'#0000FF': 'Blau',
@@ -4005,6 +4366,7 @@ function findTargetFiberAtLevel(branchPath, targetLevel, currentLevel = 1) {
return null;
}
function findCableForCustomerConnection(customerLat, customerLng, cables) {
const tolerance = 0.00001;
@@ -4033,6 +4395,7 @@ function findCableForCustomerConnection(customerLat, customerLng, cables) {
return null;
}
$('body').on('click', '#toggle-fiber-view', function () {
const btn = $(this);
const cableName = btn.data('cable-name');
@@ -4080,3 +4443,366 @@ $(document).ready(function() {
showCableRouteMap(cableId, cableName);
});
});
function openFiberSelectionModal(homeId) {
$('#fiberRouteMapModal').modal('show');
const modalHeader = $('#fiberRouteMapModal .modal-header');
// Container für Dropdown und Button erstellen
if ($('#fiber-select-container').length === 0) {
const controlsHtml = `
<div id="fiber-select-container" class="ml-3 d-flex align-items-center" style="flex-grow: 1; max-width: 600px;">
<div style="flex-grow: 1; max-width: 350px;">
<select id="fiber-path-selector" class="form-control form-control-sm" style="width: 100%;">
<option value="">Lade Fasern...</option>
</select>
</div>
<button class="btn btn-sm btn-outline-primary ml-2 text-nowrap" id="btn-show-all-details">
<i class="fa fa-layer-group"></i> Alle Schemata
</button>
</div>
`;
modalHeader.find('.modal-title').after(controlsHtml);
}
// Spinner anzeigen
$('#fiber-route-map').html('<div class="text-center py-5"><div class="spinner-border text-primary"></div></div>');
$('#fiber-route-schema').empty();
$.ajax({
url: linkGetAllFiberPathsForHome,
method: 'GET',
data: { home_id: homeId },
dataType: 'json',
success: function (response) {
if (response.status === 'OK' && response.result.paths && response.result.paths.length > 0) {
const paths = response.result.paths;
const count = paths.length;
modalHeader.find('.modal-title').html(`
<i class="fa fa-map-marked-alt"></i> ${homeId}
<span class="badge badge-secondary ml-2" style="font-size: 0.6em; vertical-align: middle;">${count} Fasern</span>
`);
populateFiberDropdown(paths, homeId);
// --- KLICK-EVENT FÜR DEN "ALLE" BUTTON ---
$('#btn-show-all-details').off('click').on('click', function() {
renderAllDetailedSchemas(paths);
});
} else {
$('#fiber-route-map').html('<div class="alert alert-warning m-3">Keine Fasern gefunden.</div>');
}
},
error: function () {
$('#fiber-route-map').html('<div class="alert alert-danger m-3">Fehler beim Laden.</div>');
}
});
}
function populateFiberDropdown(paths, homeId) {
const selector = $('#fiber-path-selector');
// Falls Select2 schon existiert, zerstören um sauber neu zu bauen
if (selector.data('select2')) {
selector.select2('destroy');
}
selector.empty();
paths.forEach((path, index) => {
const f = path.fiber;
// Farben und Texte vorbereiten
const fHex = f.fiber_color_hex || '#cccccc';
const fName = f.fiber_color || '';
const bHex = f.bundle_color_hex || '#cccccc';
const bNr = f.bundle_nr || '';
// Wir speichern die Infos in Data-Attributen für den Formatter
const option = $('<option>', {
value: f.id,
text: `Faser ${f.fiber_nr_cable}`, // Fallback Text
'data-fiber-nr': f.fiber_nr_cable,
'data-fiber-hex': fHex,
'data-fiber-name': fName,
'data-bundle-nr': bNr,
'data-bundle-hex': bHex
});
selector.append(option);
});
// --- NEU: Select2 initialisieren ---
selector.select2({
dropdownParent: $('#fiberRouteMapModal'), // Wichtig damit es im Modal funktioniert
minimumResultsForSearch: 10, // Suche erst ab 10 Einträgen anzeigen
templateResult: formatFiberOption, // Custom HTML für die Liste
templateSelection: formatFiberOption, // Custom HTML für die Auswahl
width: '100%',
escapeMarkup: function(m) { return m; } // HTML erlauben
});
// Event Listener für Wechsel
selector.off('change').on('change', function() {
const selectedFiberId = $(this).val();
loadSingleFiberDetailToMap(selectedFiberId, homeId);
});
// Erste Faser automatisch wählen
if (paths.length > 0) {
selector.val(paths[0].fiber.id).trigger('change');
}
}
/**
* Hilfsfunktion: Baut das HTML für die Select2 Optionen mit Farbpunkten
*/
/**
* Hilfsfunktion: Baut das HTML für die Select2 Optionen
* Zeigt Faser-Nummer, Farb-Punkt und Farb-NAMEN an.
*/
function formatFiberOption(state) {
if (!state.id) {
return state.text;
}
const element = $(state.element);
const fiberNr = element.data('fiber-nr');
const fiberHex = element.data('fiber-hex') || '#cccccc';
let fiberName = element.data('fiber-name'); // Name aus DB (kann leer sein)
const bundleNr = element.data('bundle-nr');
const bundleHex = element.data('bundle-hex') || '#cccccc';
// 1. FALLBACK: Wenn kein Faser-Name da ist, aus Hex-Code berechnen
if (!fiberName && fiberHex) {
// hexToColorName ist in fiber.js vorhanden
if (typeof hexToColorName === 'function') {
fiberName = hexToColorName(fiberHex);
}
}
// Styling für die Punkte
const dotStyle = `display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #666; vertical-align: middle; margin-right: 4px;`;
let html = `<div style="display: flex; align-items: center; justify-content: space-between;">`;
// Linke Seite: Faser
html += `<div>`;
html += `<span style="${dotStyle} background-color: ${fiberHex};"></span>`;
html += `<strong>Faser ${fiberNr}</strong>`;
// Name anzeigen (jetzt sicher befüllt durch Fallback)
if (fiberName) {
html += ` <span class="text-muted small">(${fiberName})</span>`;
}
html += `</div>`;
// Rechte Seite: Bündel
if (bundleNr) {
// Optional: Auch Bündel-Farbe berechnen
let bundleName = '';
if (typeof hexToColorName === 'function' && bundleHex) {
bundleName = hexToColorName(bundleHex);
}
html += `<div class="ml-3" style="font-size: 0.9em; opacity: 0.8;">`;
html += `<span style="${dotStyle} background-color: ${bundleHex}; width: 8px; height: 8px;"></span>`;
html += `Bündel ${bundleNr}`;
if (bundleName) {
html += ` <span class="text-muted small">(${bundleName})</span>`;
}
html += `</div>`;
}
html += `</div>`;
return $(html); // Wichtig: Als jQuery-Objekt zurückgeben für Select2
}
function loadSingleFiberDetailToMap(fiberId, homeId) {
if (!fiberId) return;
$('#fiber-route-map').html(`
<div class="text-center py-5" style="z-index:9999; position:relative;">
<div class="spinner-border text-primary" role="status"></div>
<p class="mt-3">Lade Details...</p>
</div>
`);
// Wir senden home_id mit, damit das Backend weiß: "Das ist ein Hausanschluss -> Rückwärts suchen"
const requestData = { fiber_id: fiberId };
if (homeId) {
requestData.home_id = homeId;
}
$.ajax({
url: linkGetFiberPath,
method: 'GET',
data: requestData,
dataType: 'json',
success: function (response) {
if (response.status === 'OK' && response.result.fiber) {
if (response.result.fiber.all_cables) {
window.allCables = response.result.fiber.all_cables;
}
// true = Linework Modus
initializeFiberRouteMap(response.result.fiber, true);
} else {
$('#fiber-route-map').html('<div class="alert alert-warning m-3">Details konnten nicht geladen werden.</div>');
}
},
error: function () {
$('#fiber-route-map').html('<div class="alert alert-danger m-3">API Fehler.</div>');
}
});
}
/**
* Berechnet die Segmente für eine Faser (ohne Karte zu zeichnen).
* Extrahiert aus initializeFiberRouteMap.
*/
function calculateSegmentsFromFiber(fiber) {
const allSegments = [];
// 1. Hauptkabel
if (fiber.cable_info && fiber.cable_info.cable_route_full) {
let mainFiberNr = fiber.fiber_nr_cable;
let mainFiberColorHex = fiber.fiber_color_hex;
// ... (hier können weitere Fallbacks für Farben rein, falls nötig)
allSegments.push({
name: fiber.cable_info.description,
stations: fiber.cable_info.cable_route_full,
color: mainFiberColorHex || '#3388ff',
level: 0,
type: 'main',
fiber_nr: mainFiberNr,
fiber_color_hex: mainFiberColorHex,
bundle_nr: fiber.bundle_nr,
bundle_color_hex: fiber.bundle_color_hex,
location: fiber.location || fiber.cable_info.location,
cable: fiber.cable_info
});
}
// 2. Branch Points (optional, für Schema nicht zwingend, aber gut für Vollständigkeit)
if (fiber.cable_info && fiber.cable_info.branch_points) {
allSegments.push({
name: 'Abzweigpunkte Netzwerk',
stations: fiber.cable_info.branch_points,
type: 'branch_points',
cable: null
});
}
// 3. Rekursive Branch-Strecken sammeln
function collectBranchRoutes(branchPath, level = 1) {
if (!branchPath || branchPath.error) return;
if (branchPath.cable && branchPath.cable.cable_route_full) {
const targetFiber = branchPath.target_fiber;
const fiberColor = targetFiber?.fiber_color_hex || getBranchColor(level);
allSegments.push({
name: branchPath.cable.description,
stations: branchPath.cable.cable_route_full,
color: fiberColor,
level: level,
type: 'branch',
location: branchPath.cable.location,
cable: branchPath.cable,
fiber_nr: targetFiber?.fiber_nr_cable,
fiber_color_hex: targetFiber?.fiber_color_hex,
bundle_nr: targetFiber?.bundle_nr,
bundle_color_hex: targetFiber?.bundle_color_hex,
target_fiber: targetFiber
});
}
if (branchPath.next_branch) {
collectBranchRoutes(branchPath.next_branch, level + 1);
}
}
if (fiber.branch_path) {
collectBranchRoutes(fiber.branch_path);
}
// Branch Dropouts auf Main mappen (für korrekte Darstellung der Übergänge)
if (allSegments.length > 1) {
const mainSegment = allSegments.find(seg => seg.type === 'main');
const branchSegments = allSegments.filter(seg => seg.type === 'branch');
if (mainSegment && branchSegments.length > 0 && fiber.cable_info && fiber.cable_info.fibers) {
branchSegments.forEach(branchSeg => {
const branchFiber = fiber.cable_info.fibers.find(f =>
f.branch_type === 'Abzweigkabel' &&
f.branch_cable_nr === branchSeg.name
);
if (branchFiber && branchFiber.branch_from_location) {
if (!mainSegment.branch_dropouts) mainSegment.branch_dropouts = [];
mainSegment.branch_dropouts.push(branchFiber.branch_from_location);
}
});
}
}
return allSegments;
}
function renderAllDetailedSchemas(paths) {
const schemaContainer = $('#fiber-route-schema');
schemaContainer.empty();
// 1. Karte aktualisieren (Multi-Map)
// if (typeof initializeMultiFiberMap === 'function') {
// $('#fiber-route-map').html('<div class="text-center py-5"><div class="spinner-border text-primary"></div></div>');
// initializeMultiFiberMap(paths);
// }
// 2. Schemata rendern (Gestapelt)
paths.forEach((path, index) => {
const fiber = path.fiber;
// Berechne Details (ohne Karte)
const segments = calculateSegmentsFromFiber(fiber);
// --- FARBNAMEN BERECHNEN (NEU) ---
let fName = fiber.fiber_color;
// Wenn kein Name da ist oder der Name mit '#' beginnt (also ein Hex-Code ist)
if ((!fName || fName.startsWith('#')) && fiber.fiber_color_hex) {
fName = hexToColorName(fiber.fiber_color_hex);
}
let bName = fiber.bundle_color;
// Gleiches für Bündel
if ((!bName || bName.startsWith('#')) && fiber.bundle_color_hex) {
bName = hexToColorName(fiber.bundle_color_hex);
}
// ----------------------------------
// Header für dieses Schema bauen
const headerHtml = `
<div class="mt-4 mb-2 d-flex align-items-center p-2 bg-light border rounded">
<span class="badge badge-primary mr-2">Pfad ${index + 1}</span>
<strong>Faser ${fiber.fiber_nr_cable}</strong>
${fiber.fiber_color_hex ? `<span class="fiber-color-dot ml-2" style="background:${fiber.fiber_color_hex}"></span>` : ''}
${fName ? `<span class="text-muted small ml-1">(${fName})</span>` : ''}
<span class="ml-3 text-muted small border-left pl-3">
Bündel: ${fiber.bundle_nr || '-'}
${fiber.bundle_color_hex ? `<span class="fiber-color-dot ml-1" style="background:${fiber.bundle_color_hex}; width: 8px; height: 8px;"></span>` : ''}
${bName ? `(${bName})` : ''}
</span>
</div>
<div id="schema-container-${fiber.id}"></div>
`;
schemaContainer.append(headerHtml);
// Rendere das Detail-Schema in den spezifischen Container
renderFiberPathSchemaLinework(fiber, segments, $(`#schema-container-${fiber.id}`));
});
}
$('#fiberRouteMapModal').on('hidden.bs.modal', function () {
$('#fiber-select-container').remove();
});