[gnome-maps/wip/routing2] More sidebar work

[Mattias Bengtsson <mattiasb src gnome org>]

commit 860f91b5f8bc1c32fca397f54bf8af9de72e0f0f
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Sun May 25 02:50:14 2014 +0100

    More sidebar work

 src/application.js              |   15 +++++--
 src/gnome-maps.js.gresource.xml |    1 +
 src/main-window.ui              |   31 +++++++++----
 src/mainWindow.js               |   24 ++++++++--
 src/sidebar.js                  |   90 +++++++++++++++++++++++++++++++++++----
 5 files changed, 133 insertions(+), 28 deletions(-)
---
diff --git a/src/application.js b/src/application.js
index 01cb7a1..ef4aac3 100644
--- a/src/application.js
+++ b/src/application.js
@@ -35,6 +35,7 @@ const GLib = imports.gi.GLib;
 const Main = imports.main;
 const Format = imports.format;
 const Geoclue = imports.geoclue;
+// const GeocodeService = imports.geocode;
 const MainWindow = imports.mainWindow;
 const Notification = imports.notification;
 const NotificationManager = imports.notificationManager;
@@ -51,6 +52,7 @@ let placeStore = null;
 let notificationManager = null;
 let routeService = null;
 let geoclue = null;
+let geocodeService = null;
 
 const Application = new Lang.Class({
     Name: 'Application',
@@ -97,10 +99,8 @@ const Application = new Lang.Class({
         Utils.loadStyleSheet(Gio.file_new_for_uri('resource:///org/gnome/maps/application.css'));
 
         application = this;
-        settings = new Settings.Settings('org.gnome.maps');
-        routeService = new RouteService.GraphHopper();
-        geoclue =  new Geoclue.Geoclue();
-
+        this._initServices();
+        
         Utils.initActions(this, [{
             properties: { name: 'quit' },
             signalHandlers: { activate: this._onQuitActivate }
@@ -109,6 +109,13 @@ const Application = new Lang.Class({
         this._initPlaceStore();
         this._initAppMenu();
     },
+    
+    _initServices: function() {
+        settings       = new Settings.Settings('org.gnome.maps');
+        routeService   = new RouteService.GraphHopper();
+        geoclue        = new Geoclue.Geoclue();
+        geocodeService = new GeocodeService.GeocodeService();
+    },
 
     _createWindow: function() {
         if (this._mainWindow)
diff --git a/src/gnome-maps.js.gresource.xml b/src/gnome-maps.js.gresource.xml
index 9c5598c..5a24857 100644
--- a/src/gnome-maps.js.gresource.xml
+++ b/src/gnome-maps.js.gresource.xml
@@ -6,6 +6,7 @@
     <file>contextMenu.js</file>
     <file>epaf.js</file>
     <file>geoclue.js</file>
+    <file>geocodeService.js</file>
     <file>http.js</file>
     <file>layersPopover.js</file>
     <file>main.js</file>
diff --git a/src/main-window.ui b/src/main-window.ui
index bea1340..6832b53 100644
--- a/src/main-window.ui
+++ b/src/main-window.ui
@@ -81,16 +81,27 @@
             </child>
           </object>
         </child>
-      </object>
-    </child>
-    <child>
-      <object class="GtkGrid" id="main-grid">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <!-- <property name="margin_left">7</property> -->
-        <!-- <property name="margin_right">7</property> -->
-        <property name="orientation">horizontal</property>
-        <!-- <property name="row_spacing">10</property> -->
+        <child>
+          <object class="GtkToggleButton" id="toggle-sidebar-button">
+            <property name="visible">True</property>
+            <property name="can-focus">True</property>
+            <property name="valign">center</property>
+            <property name="action-name">win.toggle-sidebar</property>
+            <style>
+              <class name="image-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="toggle-sidebar-button-image">
+                <property name="visible">True</property>
+                <property name="icon-size">1</property>
+                <property name="icon-name">route-symbolic</property>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="pack-type">end</property>
+          </packing>
+        </child>
       </object>
     </child>
   </object>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index f4c262c..bbd4720 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -62,12 +62,12 @@ const MainWindow = new Lang.Class({
         this.window = ui.appWindow;
         this.window.application = app;
         this._placeStore = Application.placeStore;
+
         this._overlay = overlay;
+        ui.appWindow.add(this._overlay);
 
-        ui.mainGrid.add(this._overlay);
-        let sidebar = new Sidebar.Sidebar();
-        ui.mainGrid.add(sidebar);
-        sidebar.reveal_child = true;
+        this._sidebar = new Sidebar.Sidebar();
+        overlay.add_overlay(this._sidebar);
         
         this.mapView = new MapView.MapView();
         overlay.add(this.mapView);
@@ -152,13 +152,21 @@ const MainWindow = new Lang.Class({
             }, {
                 properties: { name: 'goto-user-location' },
                 signalHandlers: { activate: this._onGotoUserLocationActivate }
+            }, {
+                properties: {
+                    name: 'toggle-sidebar',
+                    state: GLib.Variant.new('b', false)
+                },
+                signalHandlers: { activate: this._onToggleSidebarActivate }
             }
         ], this);
 
         let action = this.window.lookup_action('goto-user-location');
         Application.geoclue.bind_property('connected',
-                                          action, 'enabled',
+                                          action,
+                                          'enabled',
                                           GObject.BindingFlags.SYNC_CREATE);
+
     },
 
     _initSignals: function() {
@@ -309,6 +317,12 @@ const MainWindow = new Lang.Class({
         let [mapType, len] = value.get_string();
         this.mapView.setMapType(MapView.MapType[mapType]);
     },
+    
+    _onToggleSidebarActivate: function(action) {
+        let newState = !action.get_state().get_boolean();
+        action.set_state(GLib.Variant.new('b', newState));
+        this._sidebar.set_reveal_child(newState);
+    },
 
     _onAboutActivate: function() {
         let aboutDialog = new Gtk.AboutDialog({
diff --git a/src/sidebar.js b/src/sidebar.js
index 07d9b73..99f5e4f 100644
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -25,9 +25,11 @@ const Lang  = imports.lang;
 const Gtk   = imports.gi.Gtk;
 const GLib  = imports.gi.GLib;
 
+const Application = imports.application;
+const PlaceStore = imports.placeStore;
+const SearchPopup = imports.searchPopup;
 const Utils = imports.utils;
 
-
 const Sidebar = new Lang.Class({
     Name: 'Sidebar',
     Extends: Gtk.Revealer,
@@ -35,12 +37,10 @@ const Sidebar = new Lang.Class({
     _init: function() {
         this.parent({ name: "sidebar",
                       visible: true,
-                      width_request: 100,
                       transition_type: Gtk.RevealerTransitionType.SLIDE_LEFT,
                       transition_duration: 400,
-                      vexpand: true,
-                      hexpand: false,
-                      halign: Gtk.Align.START
+                      halign: Gtk.Align.END,
+                      valign: Gtk.Align.FILL
                     });
         this._ui = Utils.getUIObject('sidebar', [ 'form',
                                                   'instruction-list-scrolled',
@@ -53,11 +53,83 @@ const Sidebar = new Lang.Class({
                                                   'mode-bike-toggle',
                                                   'mode-car-toggle']);
 
-        // this._ui.instructionList.connect('row-activated', (function(list, row) {
-        //     this.emit('instruction-selected', row.instruction);
-        // }).bind(this));
+        this._ui.instructionList.connect('row-activated', (function(list, row) {
+            this.emit('instruction-selected', row.instruction);
+        }).bind(this));
+
+        this._initCompletion(this._ui.toCompletion);
+        this._initCompletion(this._ui.fromCompletion);
+
+        this._initSearchEntries();
 
         this.add(this._ui.form);
-        this.add(this._ui.instructionListScrolled);
+    },
+
+    _initCompletion: function(completion) {
+        completion.model = Application.placeStore;
+        completion.set_match_func(PlaceStore.completionMatchFunc);
+        completion.connect('match-selected',
+                           this._onPlaceSelected.bind(this));
+    },
+
+    _initSearchEntries: function() {
+        this._fromPopover = new SearchPopup.SearchPopup(this._ui.fromEntry, 5);
+        this._fromPopover.connect('selected',
+                                  this._onSearchPopupSelected.bind(this));
+        this._ui.fromEntry.connect('activate', this._onSearchActivate.bind(this));
+
+        this._toPopover = new SearchPopup.SearchPopup(this._ui.toEntry,   5);
+        this._toPopover.connect('selected',
+                                this._onSearchPopupSelected.bind(this));
+        this._ui.toEntry.connect('activate', this._onSearchActivate.bind(this));
+    },
+
+    _onPlaceSelected: function(completion, model, iter) {
+        let entry;
+        let place = model.get_value(iter, PlaceStore.Columns.PLACE);
+
+        if (completion === this._ui.fromCompletion) {
+            entry = this._ui.fromEntry;
+            this._fromPlace = place;
+        } else {
+            entry = this._ui.toEntry;
+            this._toPlace = place;
+        }
+        entry.text = place.name;
+
+        return true;
+    },
+
+    _onSearchPopupSelected: function(popover, place) {
+        let entry;
+
+        if (popover === this._fromPopover) {
+            entry = this._ui.fromEntry;
+            this._fromPlace = place;
+        } else {
+            entry = this._ui.toEntry;
+            this._toPlace = place;
+        }
+        entry.text = place.name;
+        popover.hide();
+    },
+
+    _onSearchActivate: function(entry) {
+        let searchString = entry.get_text();
+
+        if (searchString.length > 0) {
+            let popover = (entry === this._ui.toEntry)
+                    ? this._toPopover
+                    : this._fromPopover;
+
+            popover.showSpinner();
+            Application.geocodeService.search(searchString, null, function(places) {
+                if (places === null)
+                    popover.hide();
+
+                popover.update(places, searchString);
+                popover.showResult();
+            });
+        }
     }
 });