UI with ambiguity resolution => graphhopper#146 fixed

karussell · Jan 21, 2014 · 6dc5b9a · 6dc5b9a
1 parent f7ccabe
commit 6dc5b9a
Show file tree

Hide file tree

Showing 13 changed files with 1,335 additions and 159 deletions.
diff --git a/core/files/licenses/autocomplete-license.txt b/core/files/licenses/autocomplete-license.txt
@@ -0,0 +1,21 @@
+Copyright 2012 DevBridge and other contributors
+http://www.devbridge.com/projects/autocomplete/jquery/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/index.html b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+    <head>        
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <meta name="keywords" content="road routing,shortest path,maps,openstreetmap,android,navigation,routenplaner,gis"/>
+        <link type="image/png" rel="icon" href="/favicon.ico"/>        
+        <link rel="search" type="application/opensearchdescription+xml" title="GraphHopper Maps" href="opensearch.xml"/>
+        <title>GraphHopper Maps</title>
+
+        <link rel="stylesheet" href="css/leaflet.css" />
+        <!--[if lte IE 8]>
+            <link rel="stylesheet" href="css/leaflet.ie.css" />
+        <![endif]-->
+        <script type="text/javascript" src="js/leaflet.js?v=0.6.4"></script>
+        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
+        <script type="text/javascript" src="js/jquery.history.js"></script>
+<!--        <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>-->
+        <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
+        <script type="text/javascript" src="js/ghrequest.js?v=3"></script>
+        <script type="text/javascript" src="js/main.js?v=14"></script>
+        <link rel="stylesheet" type="text/css" href="css/style.css" />
+    </head>
+    <body>
+        <div id="input">
+            <div id="header_img">
+                <a class="no_link" href="http://graphhopper.com">
+                    <img alt="GraphHopper" src="http://graphhopper.com/img/header.png"/>                    
+                </a>
+            </div>
+            <div id="options">
+                <span id="vehicles">
+
+                </span>
+            </div>
+            <form id="locationform">
+                <div id="fromDiv">
+                    <img id="fromIndicator" class="hidden" src="img/indicator.gif"/>
+                    <img id="fromFlag" src="img/marker-small-green.png"/>
+                    <input id="fromInput" type="text" placeholder="From"/>
+                    <div id="fromFound"></div>
+                </div>
+                <div id="toDiv">
+                    <img id="toIndicator" class="hidden" src="img/indicator.gif"/>
+                    <img id="toFlag" src="img/marker-small-red.png"/>                    
+                    <input id="toInput" type="text" placeholder="To"/>
+                    <div id="toFound"></div>
+                </div>
+                <div id="exportLink" class="left"><a href="/maps"><img src='img/link.png'></a></div>
+                <input id="searchButton" type="submit" value="Search">
+            </form>      
+            <div class="clear"> </div>
+            <div id="info" class="small_text">
+            </div>
+            <div id="error" class="error">
+            </div>
+        </div>
+
+        <div id="map">
+        </div>
+        <!-- Piwik -->
+        <script type="text/javascript">
+            PIWIK=false;
+            if(PIWIK) {
+                var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.pannous.info/piwik/" : "http://www.pannous.info/piwik/");
+                document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
+            }
+        </script>
+        <script type="text/javascript">
+            if(PIWIK)
+                try { 
+                    var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 7);
+                    piwikTracker.trackPageView();
+                    piwikTracker.enableLinkTracking();
+                } catch( err ) {}
+        </script>
+        <noscript><p><img src="http://www.pannous.info/piwik/piwik.php?idsite=7" style="border:0" alt="" /></p></noscript>
+        <!-- End Piwik Tracking Code -->
+    </body>
+</html>
diff --git a/web/src/main/webapp/css/style.css b/web/src/main/webapp/css/style.css
@@ -31,20 +31,41 @@ body {
     width: 255px;
 }
 #fromInput, #toInput {
-    width: 230px;
+    width: 225px;
+    float: right;    
+}
+
+#fromResolveFound a, #toResolveFound a {
+    background-color: white;
+    padding-left: 4px;
+    padding-right: 2px;
 }
-#fromFound, #toFound {
+#fromResolveFound, #toResolveFound {
     overflow: hidden;
     max-height: 24px;
     font-size: 10px;
-    color: gray;
-    padding-top: 4px;
-    padding-bottom: 5px;
+    color: blue;
+    float: right;
+    cursor: pointer;    
+    margin-top: -20px;
+    margin-right: 3px;    
+}
+
+#fromResolveError, #toResolveError {
+    float: right;
+    font-size: 12px;
+    padding-bottom: 4px;
+}
+
+.boxSizingBorder {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 .warn {
     color: orange;
 }
-.error {
+.error, #fromResolveError, #toResolveError {
     color: red;
 }
 #moreattribution a {
@@ -165,4 +186,16 @@ tr.instruction td {
     -moz-border-radius: 0px;
     -webkit-border-radius: 0px;
     background-image: linear-gradient(to bottom, #9f9f9f, #e7e7e7);    
-}
+}
+
+.complete-1, .complete-2 { border: 1px solid #999; background: #FFF; overflow: auto; }
+.complete-1 strong, .complete-2 strong { font-weight: normal; /*color: #3399FF;*/; color: #04B431; }
+.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; font-size: 12px; }
+.autocomplete-selected { background: #e7e7e7; }
+.light { font-weight: lighter; color: #9f9f9f; font-size: smaller }
+.wikilink { float: right; }
+.wikilink img { max-width: 16px; }
+
+.roadseg {}
+.cityseg {}
+.moreseg { font-size: 9px; }
diff --git a/web/src/main/webapp/img/marker-icon-green.png b/web/src/main/webapp/img/marker-icon-green.png
diff --git a/web/src/main/webapp/img/marker-icon-red.png b/web/src/main/webapp/img/marker-icon-red.png
diff --git a/web/src/main/webapp/img/marker-small-green.png b/web/src/main/webapp/img/marker-small-green.png
diff --git a/web/src/main/webapp/img/marker-small-red.png b/web/src/main/webapp/img/marker-small-red.png
diff --git a/web/src/main/webapp/index.html b/web/src/main/webapp/index.html
@@ -15,6 +15,8 @@
         <script type="text/javascript" src="js/leaflet.js?v=0.6.4"></script>
         <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
         <script type="text/javascript" src="js/jquery.history.js"></script>
+        <!--        <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>-->
+        <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
         <script type="text/javascript" src="js/ghrequest.js?v=3"></script>
         <script type="text/javascript" src="js/main.js?v=14"></script>
         <link rel="stylesheet" type="text/css" href="css/style.css" />
@@ -32,21 +34,29 @@
                 </span>
             </div>
             <form id="locationform">
-                <div id="fromDiv">
-                    <img id="fromIndicator" class="hidden" src="img/indicator.gif"/>
-                    <img id="fromFlag" src="img/marker-from.png"/>
-                    <input id="fromInput" type="text" placeholder="From"/>
-                    <div id="fromFound"></div>
-                </div>
-                <div id="toDiv">
-                    <img id="toIndicator" class="hidden" src="img/indicator.gif"/>
-                    <img id="toFlag" src="img/marker-to.png"/>                    
-                    <input id="toInput" type="text" placeholder="To"/>
-                    <div id="toFound"></div>
+                <div id="locationpoints">
+                    <div id="fromDiv">
+                        <img id="fromIndicator" class="hidden" src="img/indicator.gif"/>
+                        <img id="fromFlag" src="img/marker-small-green.png"/>
+                        <input id="fromInput" type="text" placeholder="From"/>
+                        <div class="clear"> </div>
+                        <div id="fromResolveFound"></div>
+                        <div id="fromResolveError"></div>
+                    </div>
+                    <div class="clear"> </div>
+                    <div id="toDiv">
+                        <img id="toIndicator" class="hidden" src="img/indicator.gif"/>
+                        <img id="toFlag" src="img/marker-small-red.png"/>                    
+                        <input id="toInput" type="text" placeholder="To"/>
+                        <div class="clear"> </div>
+                        <div id="toResolveFound"></div>
+                        <div id="toResolveError"></div>
+                    </div>
                 </div>
+                <div class="clear"> </div>
                 <div id="exportLink" title="Static Link" class="left"><a href="/maps"><img src='img/link.png'></a></div>
                 <input id="searchButton" type="submit" value="Search">
-            </form>
+            </form>      
             <div id="gpxExportButton" title="GPX Download"><a href=""><img alt="gpx" src='img/gpx.png'></a></div>
             <div class="clear"> </div>
             <div id="info" class="small_text">
@@ -59,19 +69,20 @@
         </div>
         <!-- Piwik -->
         <script type="text/javascript">
-            PIWIK=false;
-            if(PIWIK) {
+            PIWIK = false;
+            if (PIWIK) {
                 var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.pannous.info/piwik/" : "http://www.pannous.info/piwik/");
                 document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
             }
         </script>
         <script type="text/javascript">
-            if(PIWIK)
-                try { 
+            if (PIWIK)
+                try {
                     var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 7);
                     piwikTracker.trackPageView();
                     piwikTracker.enableLinkTracking();
-                } catch( err ) {}
+                } catch (err) {
+                }
         </script>
         <noscript><p><img src="http://www.pannous.info/piwik/piwik.php?idsite=7" style="border:0" alt="" /></p></noscript>
         <!-- End Piwik Tracking Code -->

diff --git a/web/src/main/webapp/js/ghrequest.js b/web/src/main/webapp/js/ghrequest.js
@@ -216,7 +216,6 @@ GHRequest.prototype.getInfo = function() {
 GHInput = function(str) {
     // either text or coordinates
     this.input = str;
-    this.resolvedText = "";
     try {
         var index = str.indexOf(",");
         if (index >= 0) {
@@ -238,7 +237,6 @@ GHInput.prototype.isResolved = function() {
 };
 
 GHInput.prototype.setCoord = function(lat, lng) {
-    this.resolvedText = "";
     this.lat = round(lat);
     this.lng = round(lng);
     this.input = this.lat + "," + this.lng;