Skip to content

GitLab

Commit 68157959 authored by Eric - kg6wxc's avatar Eric - kg6wxc
Browse files

Merge branch 'marker_tabs' into 'master' 

enhancement: station popups now have tabs

See merge request kg6wxc/meshmap!3
parents 8ec9aa8b faedddcf
Hide whitespace changes
Inline Side-by-side
scripts/map_functions.inc
View file @ 68157959
...@@ -163,11 +163,12 @@ function load_ServiceList($serviceList) ...@@ -163,11 +163,12 @@ function load_ServiceList($serviceList)
{ {
//WXC 6-30-2017: removed links for services that have no link //WXC 6-30-2017: removed links for services that have no link
if ($value == NULL) { if ($value == NULL) {
$serviceList .= '<br>'. $key; //$serviceList .= "<br>". $key;
$serviceList .= $key;
}else { }else {
//WXC 6-30-2017: Moved <br> from after link to before the link, //WXC 6-30-2017: Moved <br> from after link to before the link,
//made the pop up look better. //made the pop up look better.
$serviceList .= "<br><a href='" . $value . "' target='service'>" . $key . "</a>"; $serviceList .= "<br><a href=\"" . $value . "\" target=\"service\">" . $key . "</a>";
} }
} }
} }
...@@ -446,7 +447,7 @@ function build_Marker($node_info, $node_ServiceList, $node_LinkedList, $node_Fir ...@@ -446,7 +447,7 @@ function build_Marker($node_info, $node_ServiceList, $node_LinkedList, $node_Fir
$markerList = ''; $markerList = '';
$nodeUrl = "<NodeTitle><a href='http://" . $node_info['node'] . ".local.mesh:8080' target='node'>" . $node_info['node'] . $nodeUrl = "<NodeTitle><a href=\"http://" . $node_info['node'] . ".local.mesh:8080\" target=\"node\">" . $node_info['node'] .
"</a></NodeTitle>"; "</a></NodeTitle>";
//Now we look at the 'channel' value, for each node, from the node_info database. //Now we look at the 'channel' value, for each node, from the node_info database.
...@@ -511,42 +512,87 @@ function build_Marker($node_info, $node_ServiceList, $node_LinkedList, $node_Fir ...@@ -511,42 +512,87 @@ function build_Marker($node_info, $node_ServiceList, $node_LinkedList, $node_Fir
/* /*
* Now build the marker * Now build the marker
*/ */
if ($node_ServiceList)
{
$node_ServiceList = '<hr><Strong>Services:</Strong>' . $node_ServiceList;
}
if ($node_LinkedList) if ($node_LinkedList)
{ {
$node_LinkedList = $node_LinkedList = '<Strong>Node Name (cost to/from) distance bearing</Strong><br>' . $node_LinkedList;
'<hr><Strong>Linked to:<br>Node Name (cost to/from) distance bearing</Strong><br>' . $node_LinkedList;
} }
$markerList .= "L.marker([" . $node_info['lat'] . "," . $node_info['lon'] . "], {title: '" . $node_info['node'] .
"', icon: " . $icon . "}).bindPopup(\" " . $nodeUrl . " (" . $band . ")<br>" . $node_info['lat'] . //add java variable to hold the "main tab" info
", " . $node_info['lon'] . "<br>SSID: " . $node_info['ssid'] . "<br>Channel: " . $node_info['channel'] . //*** node names used in these variables must have all dashes converted to underscores!! ***
", Bandwidth: " . $node_info['chanbw'] . "<br>" . $node_info['model'] . "<br>" . $firmware . //*** they also must be outside of the $markerList, just echo them out for now since it'll just work! ***
//"<br>Last Polled: " . $node_info['last_seen'] . '<br>' . "Uptime: " . $node_info['uptime'] . '<br>'; // TODO: remove these echos and do it properly
echo "<script>\n";
//timezone fixes - wxc 11-26-2018 echo "var popupTabs_" . str_replace("-", "_", $node_info['node']) . " = '<div class=\"popupTabs\"><div class=\"popupTab\" id=\"popupTab-Main\">" .
"<br>Last Polled: " . date_format($nodeLastSeen, 'Y-m-d H:i:s T') . '<br>' . "Uptime: " . $node_info['uptime'] . '<br>'; "<div class=\"popupTabContent\">" . $nodeUrl . " (" . $band . ")<br>" .
//dot $node_info['lat'] . ", " . $node_info['lon'] . "<br>SSID: " . $node_info['ssid'] . "<br>Channel: " . $node_info['channel'] .
if ($node_info['loadavg'] !== "Not Available") { ", Bandwidth: " . $node_info['chanbw'] . "<br>" . $node_info['model'] . "<br>" . $firmware .
$loadavgs = unserialize($node_info['loadavg']); "<br>Last Polled: ". date_format($nodeLastSeen, 'Y-m-d H:i:s T') . "<br>" . "Uptime: " . $node_info['uptime'] . "<br>";
//var_dump($loadavgs); if ($node_info['loadavg'] !== "Not Available") {
$markerList .= 'LoadAvg: 1 min ' . $loadavgs[0] . ', 5 min ' . $loadavgs[1] . ', 15 min ' . $loadavgs[2] . "<br>"; $loadavgs = unserialize($node_info['loadavg']);
//var_dump($loadavgs);
echo 'LoadAvg: 1 min ' . $loadavgs[0] . ', 5 min ' . $loadavgs[1] . ', 15 min ' . $loadavgs[2] . "<br></div></div>';" . "\n";
}else {
echo "</div></div>';" . "\n";
}
//add the "services tab" info to the java variable if it is available
if ($node_ServiceList) {
echo "popupTabs_" . str_replace("-", "_", $node_info['node']) .
" += '<div class=\"popupTab\" id=\"popupTab-Services\"><div class=\"popupTabContent\">" .
$node_ServiceList . "</div></div>';" . "\n";
} }
$markerList .= $node_ServiceList . $node_LinkedList . "\",{ maxWidth: 500 } ).addTo(" . $AssignedLayer . ") ,\n"; // Close out this node
/* //add the "links tab" info to the java variable if it is available
* If Upgrade Suggested add Node to that layer if ($node_LinkedList) {
*/ echo "popupTabs_" . str_replace("-", "_", $node_info['node']) .
" += '<div class=\"popupTab\" id=\"popupTab-Links\"><div class=\"popupTabContent\">" .
$node_LinkedList . "</div></div>';" . "\n";
}else {
echo "popupTabs_" . str_replace("-", "_", $node_info['node']) .
" += '<div class=\"popupTab\" id=\"popupTab-Links\"><div class=\"popupTabContent\">" .
"This node has no links, it may be powered off, old data, no longer linked to the network or otherwise having problems" .
"</div></div>';" . "\n";
}
//complete the popup div stuff
echo "popupTabs_" . str_replace("-", "_", $node_info['node']) . " += '<ul class=\"popupTabs-link\">" .
"<li class=\"popupTab-link\"><a href=\"#popupTab-Main\"><span>Main</span></a></li>";
if ($node_ServiceList) {
echo "<li class=\"popupTab-link\"><a href=\"#popupTab-Services\"><span>Services</span></a></li>";
}
echo "<li class=\"popupTab-link\"><a href=\"#popupTab-Links\"><span>Links</span></a></li></ul></div>';\n";
//*** close the additional <script> tag! ***
echo "</script>\n";
//*now* create the marker
$markerList .= "L.marker([" . $node_info['lat'] . "," . $node_info['lon'] . "], {title: '" . $node_info['node'] .
"', icon: " . $icon . "}).bindPopup(popupTabs_" . str_replace("-", "_", $node_info['node']) .
", { maxWidth: 500 } ).addTo(" . $AssignedLayer . ") ,\n";
//
// If Upgrade Suggested add Node to that layer and change the popup
//
if ($node_FirmwareStatus > 0) if ($node_FirmwareStatus > 0)
{ {
$markerList .= "L.marker([" . $node_info['lat'] . "," . $node_info['lon'] . "], {title: '" . $markerList .= "L.marker([" . $node_info['lat'] . "," . $node_info['lon'] . "], {title: '" .
$node_info['node'] . "', icon: " . (($node_FirmwareStatus == 1) ? "redCircle" : $node_info['node'] . "', icon: " . (($node_FirmwareStatus == 1) ? "redCircle" :
"orangeCircle") . "}).bindPopup(\" " . $nodeUrl . " (" . $band . ")<br>" . $node_info['model'] . "orangeCircle") . "}).bindPopup('<div class=\"popupTabs-fw\">" .
(($node_FirmwareStatus == 1) ? "**** FIRMWARE UPDATE NEEDED ****" : "**** EXPERIMENTAL FIRMWARE ****") .
"<div class=\"popupTab\"><div class=\"popupTabContent-fw\"> " .
$nodeUrl . " (" . $band . ")<br>" . $node_info['model'] .
"<br>" . $firmware . "<br>" . (($node_FirmwareStatus == 1) ? "<br>" . $firmware . "<br>" . (($node_FirmwareStatus == 1) ?
"Software upgrade is highly recommended" : "Experimental") . " \").addTo(upgradeStations) ,\n"; "<br><strong>Software upgrade is <em>highly</em> recommended!</strong><br>" .
"<br>Current Stable AREDN version is: " . $GLOBALS['USER_SETTINGS']['current_stable_fw_version'] . "<br>" .
"<br>Please visit: <a href=\"http://downloads.arednmesh.org/firmware/html/stable.html\">" .
"arednmesh.org</a> to find the proper firmware." : "Experimental Firmware<br><br>" .
"The most recent nightly build can be found at:<br><a href=\"http://downloads.arednmesh.org/snapshots/trunk/\">" .
"http://downloads.arednmesh.org/snapshots/trunk/</a>") .
"</div></div></div>').addTo(upgradeStations) ,\n";
} }
return $markerList; return $markerList;
} }
......
webpage/css/meshmap-default.css
View file @ 68157959
...@@ -189,7 +189,6 @@ MAP_DETAILS { ...@@ -189,7 +189,6 @@ MAP_DETAILS {
display: inline; display: inline;
} }
.welcomeMsg { .welcomeMsg {
/* color: Blue; */
font-weight:bold; font-weight:bold;
font-size: 1.5em; font-size: 1.5em;
text-align: center; text-align: center;
...@@ -210,4 +209,113 @@ MAP_DETAILS { ...@@ -210,4 +209,113 @@ MAP_DETAILS {
} }
.leaflet-control-layers-expanded, .leaflet-control-layers-list { .leaflet-control-layers-expanded, .leaflet-control-layers-list {
height: 200px !important; height: 200px !important;
}
/** New stuff for the popup tabs **/
.leaflet-popup-content{
width: 350px;
margin: 13px 13px;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
background: #0000009c !important;
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.popupTabs {
position: relative;
min-height: 250px;
clear: both;
margin: 18px 0;
}
.popupTab {
float: left;
display: none;
}
.popupTab:first-of-type {
display: inline-block;
}
.popupTabs-link {
position: relative;
top: -2px;
height: 20px;
left: -40px;
}
.popupTab-link {
background:#eee;
display: inline-block;
padding:4px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border:1px solid #ccc;
margin-left:-1px;
position:relative;
list-style-type: none;
top:1px;
cursor:pointer;
}
.popupTab-link {
background: #f8f8f8;
}
.popupTabContent {
background:#f8f8f8;
position:absolute;
overflow: auto;
top:25px;
left:0;
right:0;
bottom:0;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
padding-left: 5px;
border-top-color: rgb(204, 204, 204);
border-top-style: solid;
border-top-width: 1px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
}
.popupTabs-fw {
position: relative;
min-height: 250px;
color: red;
font-weight: 900;
text-align: center;
clear: both;
margin: 18px 0;
}
.popupTabContent-fw {
text-align: left;
font-weight: normal;
color: black;
background:#f8f8f8;
position:absolute;
overflow: auto;
top:25px;
left:0;
right:0;
bottom:0;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
padding-left: 5px;
border-top-color: rgb(204, 204, 204);
border-top-style: solid;
border-top-width: 1px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.popupTab:target {
display: block;
} }
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment