display links in location details

src/c3nav/mapdata/models/geometry/level.py

@@ -50,7 +50,9 @@ class LevelGeometryMixin(GeometryMixin):
 
     def details_display(self):
         result = super().details_display()
-        result['display'].insert(3, (str(_('Level')), {'slug': self.level.get_slug(), 'title': self.level.title}))
+        result['display'].insert(3, (str(_('Level')), {'id': self.level_id,
+                                                       'slug': self.level.get_slug(),
+                                                       'title': self.level.title}))
         return result
 
     @property

src/c3nav/mapdata/models/geometry/space.py

@@ -55,7 +55,9 @@ class SpaceGeometryMixin(GeometryMixin):
 
     def details_display(self):
         result = super().details_display()
-        result['display'].insert(3, (str(_('Space')), {'slug': self.space.get_slug(), 'title': self.space.title}))
+        result['display'].insert(3, (str(_('Space')), {'id': self.space_id,
+                                                       'slug': self.space.get_slug(),
+                                                       'title': self.space.title}))
         return result
 
     def register_delete(self):

src/c3nav/mapdata/models/locations.py

@@ -163,7 +163,7 @@ class SpecificLocation(Location, models.Model):
 
         for category, groups in sorted(groupcategories.items(), key=lambda item: item[0].priority):
             result['display'].insert(3, (category.title, tuple(
-                {'slug': group.get_slug(), 'title': group.title}
+                {'id': group.pk, 'slug': group.get_slug(), 'title': group.title}
                 for group in sorted(groups, key=attrgetter('priority'), reverse=True)
             )))
 

src/c3nav/site/static/site/js/c3nav.js

@@ -61,15 +61,7 @@ c3nav = {
     },
 
     state: {},
-    toggle_details: function(details) {
+    update_state: function(routing, replace, details) {
-        c3nav._push_state({
-            details: (details === undefined) ? !c3nav.state.details : details,
-            sidebar: true
-        });
-        c3nav._sidebar_state_updated(c3nav.state);
-        c3nav.set_max_bounds();
-    },
-    update_state: function(routing, replace) {
         if (typeof routing !== "boolean") routing = c3nav.state.routing;
 
         var destination = $('#destination-input').data('location'),
@@ -79,7 +71,7 @@ c3nav = {
                 origin: origin,
                 destination: destination,
                 sidebar: true,
-                details: false
+                details: !!details
             };
 
         c3nav._push_state(new_state, replace);
@@ -110,25 +102,7 @@ c3nav = {
         c3nav._view = view;
 
         if (view === 'location' && state.details) {
-            var $location_details = $('#location-details');
+            this.load_location_details(state.destination);
-            var location_id = state.destination.id;
-            if (parseInt($location_details.attr('data-id')) !== location_id) {
-                $location_details.addClass('loading').attr('data-id', location_id);
-                $.getJSON('/api/locations/'+state.destination.slug+'/display', function (data) {
-                    if (parseInt($location_details.attr('data-id')) !== location_id) {
-                        // loaded too late, information no longer needed
-                        return;
-                    }
-                    var line, elem = $('<dl>');
-                    for (var i = 0; i < data.display.length; i++) {
-                        line = data.display[i];
-                        elem.append($('<dt>').text(line[0]));
-                        elem.append($('<dd>').text(line[1]));
-                    }
-                    $location_details.find('.details-body').html('').append(elem);
-                    $location_details.removeClass('loading').find('.editor').attr('href', data.editor_url);
-                });
-            }
         }
 
         $('main').attr('data-view', view).toggleClass('show-details', state.details);
@@ -145,6 +119,41 @@ c3nav = {
 
         c3nav.update_map_locations();
     },
+
+    load_location_details: function (location) {
+        var $location_details = $('#location-details');
+        if (parseInt($location_details.attr('data-id')) !== location.id) {
+            $location_details.addClass('loading').attr('data-id', location.id);
+            var location_id = location.id;
+            $.getJSON('/api/locations/'+location.slug+'/display', function (data) {
+                if (parseInt($location_details.attr('data-id')) !== location_id) {
+                    // loaded too late, information no longer needed
+                    return;
+                }
+                var line, dest, link, elem = $('<dl>');
+                for (var i = 0; i < data.display.length; i++) {
+                    line = data.display[i];
+                    elem.append($('<dt>').text(line[0]));
+                    if (typeof line[1] === 'string') {
+                        elem.append($('<dd>').text(line[1]));
+                    } else if (line[1] === null) {
+                        elem.append($('<dd>').text('-'));
+                    } else {
+                        dest = line[1];
+                        link = $('<a>').attr('href', '/l/'+dest.slug+'/details/').attr('data-id', dest.id).click(function (e) {
+                            e.preventDefault();
+                            c3nav._locationinput_set($('#destination-input'), c3nav.locations_by_id[parseInt($(this).attr('data-id'))]);
+                            c3nav.update_state(false, false, true);
+                        }).text(dest.title);
+                        elem.append($('<dd>').append(link));
+                    }
+
+                }
+                $location_details.find('.details-body').html('').append(elem);
+                $location_details.removeClass('loading').find('.editor').attr('href', data.editor_url);
+            });
+        }
+    },
     _equal_states: function (a, b) {
         if (a.routing !== b.routing || a.details !== b.details) return false;
         if ((a.origin && a.origin.id) !== (b.origin && b.origin.id)) return false;
@@ -208,7 +217,7 @@ c3nav = {
 
     // button handlers
     _location_buttons_details_click: function () {
-        c3nav.toggle_details();
+        c3nav.update_state(null, null, !c3nav.state.details);
     },
     _location_buttons_route_click: function () {
         c3nav.update_state(true);