From 23f8c0bdd7ae5405aa6ba8af07b443c7b1d00293 Mon Sep 17 00:00:00 2001
From: checktheroads <mtt.lov@gmail.com>
Date: Thu, 23 May 2019 00:39:11 -0700
Subject: [PATCH] added display_name attr to routers

---
 hyperglass/configuration/__init__.py   |  6 ++++++
 hyperglass/hyperglass.py               |  2 ++
 hyperglass/render/templates/index.html | 10 +++++-----
 hyperglass/static/js/hyperglass.js     | 12 +++++++++++-
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/hyperglass/configuration/__init__.py b/hyperglass/configuration/__init__.py
index 374f981..d2d9f72 100644
--- a/hyperglass/configuration/__init__.py
+++ b/hyperglass/configuration/__init__.py
@@ -66,6 +66,12 @@ class dev:
             list.append(str(r["name"]))
         return list
 
+    def display_name():
+        list = []
+        for r in routers_list:
+            list.appen(str(r["display_name"]))
+        return list
+
 
 class gen:
     """Functions to import config variables and return default values if undefined"""
diff --git a/hyperglass/hyperglass.py b/hyperglass/hyperglass.py
index f20a5bc..d79a354 100644
--- a/hyperglass/hyperglass.py
+++ b/hyperglass/hyperglass.py
@@ -110,6 +110,7 @@ def get_routers(asn):
                     dict(
                         location=r["location"],
                         hostname=r["name"],
+                        display_name=r["display_name"],
                         type=r["type"],
                         requiresIP6Cidr=True,
                     )
@@ -119,6 +120,7 @@ def get_routers(asn):
                     dict(
                         location=r["location"],
                         hostname=r["name"],
+                        display_name=r["display_name"],
                         type=r["type"],
                         requiresIP6Cidr=False,
                     )
diff --git a/hyperglass/render/templates/index.html b/hyperglass/render/templates/index.html
index b01b43e..12a31d0 100644
--- a/hyperglass/render/templates/index.html
+++ b/hyperglass/render/templates/index.html
@@ -88,10 +88,10 @@
               </div>
             </div>
             <br>
-            <div class="field has-addons has-addons-centered">
-              <div class="control has-icons-left">
+            <div class="field has-addons has-addons-centered" id="lg-netlocdropdown">
+              <div class="control has-icons-left" id="network-control">
                 <div class="select is-medium is-rounded">
-                  <select id="network" name="network">
+                  <select id="network" name="network" style="width: 256px">
                     <!-- <option value="" disabled></option> -->
                     {% for net in device_networks %}
                     <option value="{{ net }}">AS{{ net }}</option>
@@ -100,9 +100,9 @@
                 </div>
                 <span class="icon is-left"><i class="icofont-cloudapp"></i></span>
               </div>
-              <div class="control has-icons-left">
+              <div class="control has-icons-left" id="router-control">
                 <div class="select is-medium is-rounded">
-                  <select id="router">
+                  <select id="router" style="width: 256px">
                     <option id="text_location" selected disabled>{{ text_location }}</option>
                   </select>
                 </div>
diff --git a/hyperglass/static/js/hyperglass.js b/hyperglass/static/js/hyperglass.js
index 12e94bb..d4a7777 100644
--- a/hyperglass/static/js/hyperglass.js
+++ b/hyperglass/static/js/hyperglass.js
@@ -4,6 +4,7 @@ var progress = ($('#progress'));
 var resultsbox = ($('#resultsbox'));
 resultsbox.hide();
 progress.hide();
+adjustDropdowns();
 
 // Bulma Toggable Dropdown - help text
 let dropdown = document.querySelector('#help-dropdown');
@@ -21,6 +22,15 @@ function adjustHeight() {
   }
 }
 
+function adjustDropdowns() {
+  var actual_width = window.innerWidth;
+  if (actual_width < 1024) {
+    $('#lg-netlocdropdown').removeClass('has-addons').removeClass('has-addons-centered').addClass('is-grouped').addClass('is-grouped-centered').addClass('is-grouped-multiline');
+    $('#network').css('width', actual_width * 0.85);
+    $('#router').css('width', actual_width * 0.85);
+  }
+}
+
 $(document).ready(function() {
   var defaultasn = $("#network").val();
   $.ajax({
@@ -56,7 +66,7 @@ $('#network').on('change', () => {
 
 function updateRouters(routers) {
   routers.forEach(function(r) {
-    $('#router').append($("<option>").attr('value', r.location).attr('type', r.type).text(r.location))
+    $('#router').append($("<option>").attr('value', r.location).attr('type', r.type).text(r.display_name))
   })
 }