Changeset 7756 for trunk/src

Timestamp:

Apr 14, 2010, 10:02:45 AM (15 years ago)

Author:

janveeden

Message:

Selecting nodes for clusters done. For single nodes background still has to turn yellow

Location:

trunk/src/map

Files:

• inc/node_info.php (modified) (4 diffs)
• inc/nodemapWL.js (modified) (5 diffs)
• index.php (modified) (1 diff)
• style/stylesheet.css (modified) (3 diffs)

trunk/src/map/inc/node_info.php

@@ +1 @@
+
 <?php
 if(isset($_GET['view']))
@@ -13 +14 @@
         else
                 $view = "gebruiker";
+}
+
+if(isset($_GET['sel']))
+{
+        $selected = $_GET['sel'];
+}
+else
+{
+        $selected = "";
 }
 
@@ -87 +97 @@
                 <h2>
                 Lijst met nodes in deze cluster<br/>
-                <div id="clusterlist">
+                <div id="clusterlist$selected">
                 <select multiple>
 EOF;
@@ -106 +116 @@
 EOF;
 }       
+?>

trunk/src/map/inc/nodemapWL.js

@@ -6 +6 @@
 var xmlhttp;
 var targetDiv = "infotop";
+var selected;
+var overNode;
 
 //This function is called from index.php
@@ -24 +26 @@
         }
         
+        GEvent.addListener(map, "click", function() {
+                if(!overNode == true)
+                        deSelect();
+        });
+        
         var markerClusterer = new MarkerClusterer(map, markerArray);
   }
@@ -39 +46 @@
         //Added mouseover listener that calls on our mouseOver function when the mouse moves over a marker on the map
         GEvent.addListener(marker, 'mouseover', function() {
-        mouseOver(current.id, current.name[0]);
-        });
+        mouseOverNode(current.id, current.name[0]);
+        });
+        GEvent.addListener(marker, 'click', function() {
+        mouseClickNode(current.id, current.name[0]);
+        });
+        GEvent.addListener(marker, 'mouseout', function() {
+        mouseOutNode(current.id, current.name[0]);
+        });
+        
         markerArray[i] = marker;
         return marker;
 }
 
+
 //Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
-function mouseOver(id, name)
-{
-        //this.obj = document.getElementById("infotop");
-        loadXMLDoc("inc/node_info.php?type=single")
-        //We will replace this function with a httprequest to a php file in the future
-        
-        
+function mouseClickNode(id, name)
+{
+        selected = true;
+        loadXMLDoc("inc/node_info.php?type=single");
         /*
         *Hieronder verdergaan met dekking
         */
+
+}
+//Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
+function mouseOverNode(id, name)
+{
+        if(!selected == true)
+        {
+                overNode = true;
+                loadXMLDoc("inc/node_info.php?type=single");
+                /*
+                *Hieronder verdergaan met dekking
+                */
+                
+        }       
+}
+
+function mouseOutNode(id, name)
+{
+        overNode = false;
 }
 
@@ -61 +92 @@
 function mouseOverCluster(markers)
 {
+        if(!selected == true)
+        {
+                //Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
+                var markerTitles = new Array;
+                for(var i=0; i<markers.length; i++) {
+                        markerTitles.push(markers[i].marker.getTitle());
+                }
+
+                var markerTitleSerialized;
+
+                //start
+                var a_php = "";
+                var total = 0;
+
+                for (var i=0; i<markerTitles.length; i++)
+                {
+                        ++ total;
+                        a_php = a_php + "s:" +
+                                        String(i).length + ":\"" + String(i) + "\";s:" +
+                                        String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
+                }
+                a_php = "a:" + total + ":{" + a_php + "}";
+                //end
+
+                loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"")
+                /*
+                *Hieronder verdergaan met dekking
+                */
+        }
+}
+
+//Our click function for Cluster nodes. 'markers' is an array containing all markers within the cluster
+function clickCluster(markers)
+{
+        //Let the rest of the program know that something is selected
+        select();
+
         //Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
         var markerTitles = new Array;
@@ -83 +151 @@
         //end
         
-        loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"")
-        /*
-        *Hieronder verdergaan met dekking
-        */
-}
-
-//Our click function for Cluster nodes. 'markers' is an array containing all markers within the cluster
-function clickCluster(markers)
-{
-        
-}
-
+        loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"&sel=selected")
+}
+
+function select()
+{
+        selected = true;
+}
+
+function deSelect()
+{
+        selected = false;
+        loadXMLDoc("inc/node_info.php");
+}
 
 //Code from w3schools. http://www.w3schools.com/dom/dom_http.asp

trunk/src/map/index.php

@@ -51 +51 @@
                 <!-- Top information space -->
                 <div id="infotop">
-                        <!-- Calling on the node information from an external php file. inc/node_info.php -->
+                <!-- Calling on the node information from an external php file. inc/node_info.php -->
                         <?php include("inc/node_info.php") ?>
-                </div>          
+                </div>
 
                 <!-- Bottom information space -->

trunk/src/map/style/stylesheet.css

@@ -23 +23 @@
 }
 
+#infotopselected {
+border: 2px solid black;
+height: 243px;
+width: 100%;
+background-color: yellow;
+}
+
 #clusterlist {
 margin-top: 10px;
@@ -31 +38 @@
 width: 100%;
 height: 130px;
+}
+
+#clusterlistselected {
+margin-top: 10px;
+overflow: hidden;
+background-color: yellow;
+}
+
+#clusterlistselected select {
+width: 100%;
+height: 130px;
+background-color: yellow;
 }
 
@@ -47 +66 @@
 margin-left: 5px;
 }
+
 #timestamp {
 margin-right: 2px;