alter page title when viewing device details

Netdisco/public/css/netdisco.css

@@ -177,7 +177,7 @@ td {
   margin-bottom: 10px;
 }
 
-.nd_device_name {
+#nd_device_name {
   float: right;
   margin-bottom: 0px;
   margin-top: 9px;

Netdisco/public/javascripts/netdisco.js

@@ -7,6 +7,12 @@ function do_search (event, tab) {
   // stop form from submitting normally
   event.preventDefault();
 
+  // page title
+  var pgtitle = 'Netdisco';
+  if ($('#nd_device_name').text().length) {
+    var pgtitle = $('#nd_device_name').text() +' - '+ $('#'+ tab + '_link').text();
+  }
+
   // each sidebar search form has a hidden copy of the main navbar search
   // query. when the tab query takes place, copy the navbar locally, then
   // replicate to all other tabs.
@@ -42,10 +48,7 @@ function do_search (event, tab) {
     is_from_history_plugin = 1;
     window.History.replaceState(
       {name: tab, fields: $(form).serializeArray()},
-      'Netdisco '
-        + path.charAt(0).toUpperCase() + path.slice(1) + ' - '
-        + tab.charAt(0).toUpperCase() + tab.slice(1),
-      uri_base + '/' + path + '?' + query
+      pgtitle, uri_base + '/' + path + '?' + query
     );
     is_from_history_plugin = 0;
   }
@@ -98,14 +101,17 @@ function update_content(from, to) {
   var to_form = '#' + to + '_form';
   var from_form = '#' + from + '_form';
 
+  // page title
+  var pgtitle = 'Netdisco';
+  if ($('#nd_device_name').text().length) {
+    var pgtitle = $('#nd_device_name').text() +' - '+ $('#'+ to + '_link').text();
+  }
+
   if (window.History && window.History.enabled && is_from_state_event == 0) {
     is_from_history_plugin = 1;
     window.History.pushState(
       {name: to, fields: $(to_form).serializeArray()},
-      'Netdisco '
-        + path.charAt(0).toUpperCase() + path.slice(1) + ' - '
-        + to.charAt(0).toUpperCase() + to.slice(1),
-      uri_base + '/' + path + '?' + $(to_form).serialize()
+      pgtitle, uri_base + '/' + path + '?' + $(to_form).serialize()
     );
     is_from_history_plugin = 0;
   }

Netdisco/views/device.tt

@@ -45,7 +45,7 @@
       [% FOREACH tab IN vars.tabs %]
       <li[% ' class="active"' IF params.tab == tab.id %]><a id="[% tab.id %]_link" href="#[% tab.id %]_pane">[% tab.label %]</a></li>
       [% END %]
-      <span class="nd_device_name">[% d.dns || d.name %]</span>
+      <span id="nd_device_name">[% d.dns || d.name %]</span>
     </ul>
     <div class="tab-content">
       [% FOREACH tab IN vars.tabs %]

Netdisco/views/js/device.js

@@ -3,6 +3,10 @@
   var path = 'device';
 
   function inner_view_processing(tab) {
+    // LT wanted the page title to reflect what's on the page :)
+    document.title = $('#nd_device_name').text()
+      +' - '+ $('#'+ tab + '_link').text();
+
     // VLANs column list collapser trigger
     // it's a bit of a faff because we can't easily use Bootstrap's collapser
     $('.nd_collapse_vlans').toggle(function() {