Changeset 91


Ignore:
Timestamp:
09/20/2005 08:07:33 PM (7 years ago)
Author:
Winner
Message:

Add: Gmap - Always display selected node with different color. (Closes #42)
Optimize: Gmap display items time 5%-50% faster.
Optimize: Gmap takes one time each data required from xml.
Change: Client links blue color and 2 pixel width. (Closes #8)
Fix: Gmap new window now opens always on IE. (Closes #21)
Fix: Gmap client links are now diplayed only if APs are checked also.

Location:
trunk
Files:
2 added
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/includes/pages/gmap/gmap_js.php

    r76 r91  
    7171                         
    7272                } 
    73                 $this->tpl['link_xml_page'] = makelink(array("page" => "gmap", "subpage" => "xml"), FALSE, TRUE, FALSE); 
     73                $this->tpl['link_xml_page'] = makelink(array("page" => "gmap", "subpage" => "xml", "node" => get('node')), FALSE, TRUE, FALSE); 
    7474                 
    7575                echo template($this->tpl, __FILE__); 

  • trunk/includes/pages/gmap/gmap_xml.php

    r64 r91  
    3232                $node = $node[0]; 
    3333                 
     34                if (get('node') != '') $having .= ($having!=''?' OR ':'')."id = '".get('node')."'"; 
    3435                if (get('show_p2p') == 1) $having .= ($having!=''?' OR ':'').'total_p2p > 0'; 
    3536                if (get('show_aps') == 1) $having .= ($having!=''?' OR ':'').'total_aps > 0'; 
    36                 if (get('show_clients') == 1) $having .= ($having!=''?' OR ':'').'total_client_on_ap > 0'; 
    37                 if (get('show_unlinked') == 1) $having .= ($having!=''?' OR ':'').'(total_p2p = 0 AND total_client_on_ap = 0)'; 
    38                 $nodes = $db->get( 
     37                if (get('show_clients') == 1) $having .= ($having!=''?' OR ':'').'(total_p2p = 0 AND total_aps = 0 AND total_client_on_ap > 0)'; 
     38                if (get('show_unlinked') == 1) $having .= ($having!=''?' OR ':'').'(total_p2p = 0 AND total_aps = 0 AND total_client_on_ap = 0)'; 
     39                if ($having != '') $nodes = $db->get( 
    3940                        'nodes.id, nodes.latitude, nodes.longitude, nodes.name AS nodes__name, areas.name AS areas__name, COUNT(DISTINCT p2p.id) AS total_p2p, COUNT(DISTINCT aps.id) AS total_aps, COUNT(DISTINCT clients.id) AS total_clients, COUNT(DISTINCT client_ap.id) AS total_client_on_ap', 
    4041                        'nodes 
    … …  
    5455                $xml .= "<nodes>\r"; 
    5556                foreach ((array) $nodes as $key => $value) { 
    56                         $xml .= "<node"; 
     57                        $xml .= "<"; 
     58                        if (get('node') == $value['id']) { 
     59                                $xml .= 'selected'; 
     60                        } elseif ($value['total_aps'] != 0 && $value['total_p2p'] != 0) { 
     61                                $xml .= 'p2p-ap'; 
     62                        } elseif ($value['total_aps'] != 0) { 
     63                                $xml .= 'ap'; 
     64                        } elseif ($value['total_p2p'] != 0) { 
     65                                $xml .= 'p2p'; 
     66                        } elseif ($value['total_client_on_ap'] != 0) { 
     67                                $xml .= 'client'; 
     68                        } else { 
     69                                $xml .= 'unlinked'; 
     70                        } 
    5771                        $xml .= ' id="'.$value['id'].'"'; 
    5872                        $xml .= ' name="'.htmlspecialchars($value['nodes__name']).'"'; 
    … …  
    6983                $xml .= "</nodes>\r"; 
    7084                 
    71                 if (get('show_p2p') == 1) $where .= ($where!=''?' OR ':'')."l2.type = 'p2p'"; 
    72                 if (get('show_clients') == 1) $where .= ($where!=''?' OR ':'')."l2.type = 'client'"; 
    73                 $links = $db->get( 
    74                         'l2.type AS type, n1.latitude AS n1_lat, n1.longitude AS n1_lon, n2.latitude AS n2_lat, n2.longitude AS n2_lon, l1.status AS l1_status, l2.status AS l2_status', 
     85                if (get('show_links_p2p') == 1) $where .= ($where!=''?' OR ':'')."l2.type = 'p2p'"; 
     86                if (get('show_links_client') == 1) $where .= ($where!=''?' OR ':'')."l2.type = 'client'"; 
     87                if ($where != '') $links = $db->get( 
     88                        'l2.id AS id, l2.type AS type, n1.latitude AS n1_lat, n1.longitude AS n1_lon, n2.latitude AS n2_lat, n2.longitude AS n2_lon, l1.status AS l1_status, l2.status AS l2_status', 
    7589                        'links AS l1 ' . 
    7690                        "INNER JOIN links AS l2 ON (l1.id < l2.id AND l1.type = 'p2p' AND l2.type = 'p2p' AND l1.node_id = l2.peer_node_id AND l2.node_id = l1.peer_node_id) OR (l1.type = 'ap' AND l2.type = 'client' AND l1.id = l2.peer_ap_id) " . 
    … …  
    8195                $xml .= "<links>\r"; 
    8296                foreach ((array) $links as $key => $value) { 
    83                         $xml .= "<link"; 
    84                         $xml .= ' type="'.$value['type'].'"'; 
     97                        $xml .= "<link_".$value['type']; 
     98                        $xml .= ' id="'.$value['id'].'"'; 
    8599                        $xml .= ' lat1="'.$value['n1_lat'].'"'; 
    86100                        $xml .= ' lon1="'.$value['n1_lon'].'"'; 

  • trunk/templates/basic/includes/pages/gmap/gmap_js.tpl

    r64 r91  
    2121{literal} 
    2222var map; 
    23 var nodes = Array(); 
    24 var links = Array(); 
     23var selected = Array(); 
     24var p2p_ap = Array(); 
     25var p2p = Array(); 
     26var aps = Array(); 
     27var clients = Array(); 
     28var unlinked = Array(); 
     29var links_p2p = Array(); 
     30var links_client = Array(); 
    2531var markers = Array(); 
    2632var polylines = Array(); 
     33var ch_p2p; 
     34var ch_aps; 
     35var ch_clients; 
     36var ch_unlinked; 
    2737 
    2838// Markers Optimization 
    … …  
    102112icon_red[1].infoWindowAnchor = new GPoint(10, 1); 
    103113 
     114var icon_grey = Array(new GIcon(), new GIcon()); 
     115icon_grey[0].image = "{$img_dir}gmap/mm_20_grey.png"; 
     116icon_grey[0].shadow = "{$img_dir}gmap/mm_20_shadow.png"; 
     117icon_grey[0].iconSize = new GSize(12, 20); 
     118icon_grey[0].shadowSize = new GSize(22, 20); 
     119icon_grey[0].iconAnchor = new GPoint(6, 20); 
     120icon_grey[0].infoWindowAnchor = new GPoint(5, 1); 
     121 
     122icon_grey[1].image = "{$img_dir}gmap/mm_50_grey.png"; 
     123icon_grey[1].shadow = "{$img_dir}gmap/mm_50_shadow.png"; 
     124icon_grey[1].iconSize = new GSize(20, 34); 
     125icon_grey[1].shadowSize = new GSize(37, 34); 
     126icon_grey[1].iconAnchor = new GPoint(9, 32); 
     127icon_grey[1].infoWindowAnchor = new GPoint(10, 1); 
     128 
    104129{literal} 
    105130function gmap_onload() { 
     131        ch_p2p = document.getElementsByName("p2p")[0]; 
     132        ch_aps = document.getElementsByName("aps")[0]; 
     133        ch_clients = document.getElementsByName("clients")[0]; 
     134        ch_unlinked = document.getElementsByName("unlinked")[0]; 
    106135        if (GBrowserIsCompatible()) { 
    107136                map = new GMap(document.getElementById("map")); 
    … …  
    135164 
    136165function gmap_reload() { 
    137         var markers_t = Array(); 
    138         var polylines_t = Array(); 
    139         var bounds = map.getBoundsLatLng(); 
     166 
     167        if (ch_aps.checked == true && ch_clients.checked == true) makePolylines(links_client, "#00ffff", "#ff0000", 2); 
     168        if (ch_p2p.checked == true) makePolylines(links_p2p, "#00ff00", "#ff0000", 3); 
     169 
     170        if (ch_unlinked.checked == true) makeMarkers(unlinked, icon_red, -1); 
     171        if (ch_clients.checked == true) makeMarkers(clients, icon_blue, -1); 
     172        if (ch_aps.checked == true) makeMarkers(aps, icon_green, 3); 
     173        if (ch_p2p.checked == true) makeMarkers(p2p, icon_orange, 3); 
     174        if (ch_p2p.checked == true || ch_aps.checked == true) makeMarkers(p2p_ap, icon_green, 3); 
     175        makeMarkers(selected, icon_grey, 3); 
     176                 
     177} 
     178 
     179function gmap_refresh() { 
    140180        var ch_p2p = document.getElementsByName("p2p")[0]; 
    141181        var ch_aps = document.getElementsByName("aps")[0]; 
    142182        var ch_clients = document.getElementsByName("clients")[0]; 
    143183        var ch_unlinked = document.getElementsByName("unlinked")[0]; 
     184        if (((ch_p2p.checked == true && p2p.length > 0) || ch_p2p.checked == false) &&  
     185                ((ch_aps.checked == true && aps.length > 0) || ch_aps.checked == false) && 
     186                ((ch_clients.checked == true && clients.length > 0) || ch_clients.checked == false) &&  
     187                ((ch_unlinked.checked == true && unlinked.length > 0) || ch_unlinked.checked == false)) { 
     188                        map.clearOverlays(); 
     189                        markers = Array(); 
     190                        polylines = Array(); 
     191                        gmap_reload(); 
     192                        return; 
     193        } 
     194        var request = GXmlHttp.create(); 
     195        var xml_url = "{/literal}{$link_xml_page}{literal}" + 
     196                                        (ch_p2p.checked == true && p2p.length == 0?"&show_p2p=1":"") + 
     197                                        (ch_aps.checked == true && aps.length == 0?"&show_aps=1":"") + 
     198                                        (ch_clients.checked == true && clients.length == 0?"&show_clients=1":"") + 
     199                                        (ch_unlinked.checked == true && unlinked.length == 0?"&show_unlinked=1":"") + 
     200                                        (ch_p2p.checked == true && links_p2p.length == 0?"&show_links_p2p=1":"") + 
     201                                        (ch_aps.checked == true && ch_clients.checked == true && links_client.length == 0?"&show_links_client=1":""); 
     202        request.open("GET", xml_url, true); 
     203        request.onreadystatechange =  
     204                        function() { 
     205                                if (request.readyState == 4) { 
     206                                        var xmlDoc = request.responseXML; 
     207                                        selected = xmlDoc.documentElement.getElementsByTagName("selected"); 
     208                                        if ((ch_p2p.checked == true || ch_aps.checked == true) && p2p_ap.length == 0) p2p_ap = xmlDoc.documentElement.getElementsByTagName("p2p-ap"); 
     209                                        if (ch_aps.checked == true && aps.length == 0) aps = xmlDoc.documentElement.getElementsByTagName("ap"); 
     210                                        if (ch_p2p.checked == true && p2p.length == 0) p2p = xmlDoc.documentElement.getElementsByTagName("p2p"); 
     211                                        if (ch_clients.checked == true && clients.length == 0) clients = xmlDoc.documentElement.getElementsByTagName("client"); 
     212                                        if (ch_unlinked.checked == true && unlinked.length == 0) unlinked = xmlDoc.documentElement.getElementsByTagName("unlinked"); 
     213                                        if (ch_p2p.checked == true && links_p2p.length == 0) links_p2p = xmlDoc.documentElement.getElementsByTagName("link_p2p"); 
     214                                        if (ch_aps.checked == true && ch_clients.checked == true && links_client.length == 0) links_client = xmlDoc.documentElement.getElementsByTagName("link_client"); 
     215                                        map.clearOverlays(); 
     216                                        markers = Array(); 
     217                                        polylines = Array(); 
     218                                        gmap_reload(); 
     219                                } 
     220                        } 
     221        request.send(null); 
     222} 
     223 
     224function createMarker(point, html, icon) { 
     225        var marker = new GMarker(point, icon); 
     226        GEvent.addListener(marker, "click", 
     227                function() { 
     228                        marker.openInfoWindowHtml(html); 
     229                }); 
     230 
     231        return marker; 
     232} 
     233 
     234function makeMarkers(nodes, icon_image, icon_zoom) { 
     235        var markers_t = Array(); 
     236        var bounds = map.getBoundsLatLng(); 
    144237        for (var i = 0; i < nodes.length; i++) { 
    145                 if (markers[i] != undefined) continue; 
    146  
    147238                var node_id = nodes[i].getAttribute("id"); 
    148                 var node_name = nodes[i].getAttribute("name"); 
    149                 var node_area = nodes[i].getAttribute("area"); 
    150                 var node_p2p = nodes[i].getAttribute("p2p") * 1; 
    151                 var node_aps = nodes[i].getAttribute("aps") * 1; 
    152                 var node_client_on_ap = nodes[i].getAttribute("client_on_ap") * 1; 
    153                 var node_clients = nodes[i].getAttribute("clients") * 1; 
    154239                var node_lat = nodes[i].getAttribute("lat"); 
    155240                var node_lon = nodes[i].getAttribute("lon"); 
    156                 var node_url = nodes[i].getAttribute("url"); 
    157  
    158                 var show_p2p = node_p2p > 0 && 
    159                                                 ch_p2p.checked == true; 
    160                 var show_aps = node_aps > 0 && 
    161                                                 ch_aps.checked == true; 
    162                 var show_clients = node_client_on_ap > 0 && 
    163                                                         ch_clients.checked == true; 
    164                 var show_unl = node_p2p == 0 &&  
    165                                                 node_client_on_ap == 0 && 
    166                                                 ch_unlinked.checked == true; 
    167                 var show_nodes = show_p2p || show_aps || show_clients || show_unl; 
     241                 
     242                if (markers[node_id] != undefined) continue; 
     243 
    168244                var inbounds = node_lat >= bounds.minY && 
    169245                                                node_lat <= bounds.maxY && 
    170246                                                node_lon >= bounds.minX && 
    171247                                                node_lon <= bounds.maxX; 
    172                 if (show_nodes && inbounds) { 
     248                if (inbounds) { 
     249                        var node_name = nodes[i].getAttribute("name"); 
     250                        var node_area = nodes[i].getAttribute("area"); 
     251                        var node_p2p = nodes[i].getAttribute("p2p") * 1; 
     252                        var node_aps = nodes[i].getAttribute("aps") * 1; 
     253                        var node_client_on_ap = nodes[i].getAttribute("client_on_ap") * 1; 
     254                        var node_clients = nodes[i].getAttribute("clients") * 1; 
     255                        var node_url = nodes[i].getAttribute("url"); 
     256                 
    173257                var point = new GPoint(node_lon,  
    174258                                                                node_lat); 
    175259                        var icon; var icon_s; 
    176                         if (map.getZoomLevel() <= 3) { 
     260                        if (map.getZoomLevel() <= icon_zoom) { 
    177261                                var icon_scale = 1; 
    178262                    } else { 
    179263                                var icon_scale = 0; 
    180264                    } 
    181                         if (node_aps > 0) { 
    182                                 icon = icon_green[icon_scale]; 
    183                                 icon_s = icon_green[0]; 
    184                         } else if (node_p2p > 0) { 
    185                                 icon = icon_orange[icon_scale]; 
    186                                 icon_s = icon_orange[0]; 
    187                         } else if (node_client_on_ap > 0) { 
    188                                 icon = icon_blue[0]; 
    189                                 icon_s = icon_blue[0]; 
    190                         } else { 
    191                                 icon = icon_red[0]; 
    192                                 icon_s = icon_red[0]; 
    193                         } 
     265                        icon = icon_image[icon_scale]; 
     266                        icon_s = icon_image[0]; 
    194267                        var html = "<div style=\"text-align:left; font-size:12px;font-weight:bold;\"><img src=\"" + icon_s.image + "\" alt=\"\" />" + node_name + " (#" + node_id + ")</div><br />" + 
    195268                                                "<div style=\"text-align:left; font-size:10px;\">" + 
    … …  
    200273                        var marker = createMarker(point, html, icon); 
    201274                        markers_t.push(marker); 
    202                         markers[i] = true; 
     275                        markers[node_id] = true; 
    203276                } 
    204277        } 
     278        map.addOverlays(markers_t); 
     279} 
     280 
     281function makePolylines(links, color_active, color_inactive, size) { 
     282        var polylines_t = Array(); 
     283        var bounds = map.getBoundsLatLng(); 
    205284        for (var i = 0; i < links.length; i++) { 
    206                 if (polylines[i] != undefined) continue; 
    207                 var show_l_p2p = links[i].getAttribute("type") == "p2p" && 
    208                                                         ch_p2p.checked == true; 
    209                 var show_l_clients = links[i].getAttribute("type") == "client" && 
    210                                                                 ch_clients.checked == true; 
    211                 var show_links = show_l_p2p || show_l_clients; 
    212                 var l_inbound_1 = links[i].getAttribute("lat1") >= bounds.minY && 
    213                                                         links[i].getAttribute("lat1") <= bounds.maxY && 
    214                                                         links[i].getAttribute("lon1") >= bounds.minX && 
    215                                                         links[i].getAttribute("lon1") <= bounds.maxX; 
    216                 var l_inbound_2 = links[i].getAttribute("lat2") >= bounds.minY && 
    217                                                         links[i].getAttribute("lat2") <= bounds.maxY && 
    218                                                         links[i].getAttribute("lon2") >= bounds.minX && 
    219                                                         links[i].getAttribute("lon2") <= bounds.maxX; 
    220                 var l_inbounds = l_inbound_1 || l_inbound_2 
    221                 if (show_links && l_inbounds) { 
     285                var link_id = links[i].getAttribute("id"); 
     286                if (polylines[link_id] != undefined) continue; 
     287                var link_lat1 = links[i].getAttribute("lat1"); 
     288                var link_lon1 = links[i].getAttribute("lon1"); 
     289                var link_lat2 = links[i].getAttribute("lat2"); 
     290                var link_lon2 = links[i].getAttribute("lon2"); 
     291                var l_inbound_1 = link_lat1 >= bounds.minY && 
     292                                                        link_lat1 <= bounds.maxY && 
     293                                                        link_lon1 >= bounds.minX && 
     294                                                        link_lon1 <= bounds.maxX; 
     295                var l_inbound_2 = link_lat2 >= bounds.minY && 
     296                                                        link_lat2 <= bounds.maxY && 
     297                                                        link_lon2 >= bounds.minX && 
     298                                                        link_lon2 <= bounds.maxX; 
     299                if (l_inbound_1 || l_inbound_2) { 
    222300                        if (links[i].getAttribute("status") == 'active') { 
    223                                 var color = "#00ff00"; 
     301                                var color = color_active; 
    224302                        } else { 
    225                                 var color = "#ff0000"; 
     303                                var color = color_inactive; 
    226304                        } 
    227                         var point1 = new GPoint(links[i].getAttribute("lon1"), 
    228                                                                         links[i].getAttribute("lat1")); 
    229                         var point2 = new GPoint(links[i].getAttribute("lon2"), 
    230                                                                         links[i].getAttribute("lat2")); 
    231                         var polyline = new GPolyline([point1, point2], color, 
    232                                                         (links[i].getAttribute("type")=="p2p"?3:1)); 
     305                        var point1 = new GPoint(link_lon1, 
     306                                                                        link_lat1); 
     307                        var point2 = new GPoint(link_lon2, 
     308                                                                        link_lat2); 
     309                        var polyline = new GPolyline([point1, point2], color, size); 
    233310                        polylines_t.push(polyline); 
    234                         polylines[i] = true; 
     311                        polylines[link_id] = true; 
    235312                } 
    236313    } 
    237         map.addOverlays(markers_t); 
    238         map.addOverlays(polylines_t); 
    239 } 
    240  
    241 function gmap_refresh() { 
    242         var ch_p2p = document.getElementsByName("p2p")[0]; 
    243         var ch_aps = document.getElementsByName("aps")[0]; 
    244         var ch_clients = document.getElementsByName("clients")[0]; 
    245         var ch_unlinked = document.getElementsByName("unlinked")[0]; 
    246         var request = GXmlHttp.create(); 
    247         var xml_url = "{/literal}{$link_xml_page}{literal}" +  
    248                                         (ch_p2p.checked == true?"&show_p2p=1":"") + 
    249                                         (ch_aps.checked == true?"&show_aps=1":"") + 
    250                                         (ch_clients.checked == true?"&show_clients=1":"") + 
    251                                         (ch_unlinked.checked == true?"&show_unlinked=1":""); 
    252         request.open("GET", xml_url, true); 
    253         request.onreadystatechange =  
    254                         function() { 
    255                                 if (request.readyState == 4) { 
    256                                         var xmlDoc = request.responseXML; 
    257                                         nodes = xmlDoc.documentElement.getElementsByTagName("node"); 
    258                                         links = xmlDoc.documentElement.getElementsByTagName("link"); 
    259                                         map.clearOverlays(); 
    260                                         markers = Array(); 
    261                                         polylines = Array(); 
    262                                         gmap_reload(); 
    263                                 } 
    264                         } 
    265         request.send(null); 
    266 } 
    267  
    268 function createMarker(point, html, icon) { 
    269         var marker = new GMarker(point, icon); 
    270         GEvent.addListener(marker, "click", 
    271                 function() { 
    272                         marker.openInfoWindowHtml(html); 
    273                 }); 
    274  
    275         return marker; 
     314    map.addOverlays(polylines_t); 
    276315} 
    277316{/literal} 
Note: See TracChangeset for help on using the changeset viewer.