From 563dc8dc4c335f8eb0412121766fe39c8e57ae34 Mon Sep 17 00:00:00 2001
From: Tasio Mendez <tm.tasio@gmail.com>
Date: Wed, 31 Jan 2018 11:33:36 +0100
Subject: [PATCH] Navbar controls

---
 server.py                | 19 ++++++++++---------
 templates/css/main.css   | 31 ++++++++++++++++++++++++++-----
 templates/index.html     | 38 +++++++++++++++++++++++++++-----------
 templates/js/socket.js   |  4 ++--
 templates/js/template.js |  4 ++--
 5 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/server.py b/server.py
index f62c95a..d649965 100644
--- a/server.py
+++ b/server.py
@@ -89,15 +89,6 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
 				self.send_log('INFO.soil', 'Using config: {name}'.format(name=config['name']))
 
 			self.name = config['name']
-			
-			with self.logging(self.application.model.name):
-				self.application.model.run(config)
-
-			trials = []
-			for i in range(config['num_trials']):
-				trials.append('{}_trial_{}'.format(self.name, i))
-			self.write_message({'type': 'trials',
-				'data': trials })
 
 			settings = []
 			for key in config['environment_params']: 
@@ -116,6 +107,16 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
 
 			self.write_message({'type': 'settings',
 				'data': settings})
+			
+			# Run simulation and capture logs
+			with self.logging(self.application.model.name):
+				self.application.model.run(config)
+
+			trials = []
+			for i in range(config['num_trials']):
+				trials.append('{}_trial_{}'.format(self.name, i))
+			self.write_message({'type': 'trials',
+				'data': trials })
 
 		elif msg['type'] == 'get_trial':
 			if self.application.verbose:
diff --git a/templates/css/main.css b/templates/css/main.css
index c430c30..f67a731 100644
--- a/templates/css/main.css
+++ b/templates/css/main.css
@@ -1,5 +1,5 @@
 
-html, body, .carousel-inner {
+html, body {
   height: 100%;
 }
 
@@ -7,12 +7,17 @@ html, body, .carousel-inner {
   height: calc(100% - 150px);
 }
 
-.carousel-indicators li {
-  border-color: black;
+.carousel-inner {
+  height: calc(100% - 50px) !important;
 }
 
-.carousel-indicators li.active {
-  background-color: black;
+.carousel-inner .item,
+.carousel-inner .item .container-fluid {
+  height: 100%;
+}
+
+.navbar {
+  box-shadow: 0px -2px 5px 3px rgba(0, 0, 0, .3);
 }
 
 .node {
@@ -297,6 +302,8 @@ table#link-distance .max {
 
 #wrapper-settings {
   padding: 15px !important;
+  height: 100%;
+  overflow-y: auto;
 }
 
 #wrapper-settings .btn-group button:focus {
@@ -308,3 +315,17 @@ table#link-distance .max {
   font-size: xx-small;
   padding: 3px 6px;
 }
+
+.item.settings .container-fluid {
+  padding-top: 10px !important;
+}
+
+#wrapper-settings::-webkit-scrollbar {
+  width: 6px;
+  background-color: #F5F5F5;
+}
+
+#wrapper-settings::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+  background-color: #ccc;
+}
diff --git a/templates/index.html b/templates/index.html
index 70838c2..20ddfeb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -138,13 +138,30 @@
 
 </div>
 
-<div id="myCarousel" class="carousel slide">
+<nav class="navbar navbar-default navbar-fixed-bottom">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="#">Brand</a>
+        </div>
+        <div class="collapse navbar-collapse">
+            <ul class="nav navbar-nav">
+                <li data-target="#myCarousel" data-slide-to="0" class="active"><a href='#'>Home</a></li>
+                <li data-target="#myCarousel" data-slide-to="1"><a href="#" onclick="">Settings</a></li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+                <li><a href="#">Run simulation</a></li>
+            </ul>
+        </div>
+        <script type="text/javascript">
+            $('.nav li').click(function() {
+                $('.nav li').removeClass('active');
+                $(this).addClass('active');
+            });
+        </script>
+    </div>
+</nav>
 
-    <!-- Indicators -->
-    <ol class="carousel-indicators">
-        <li data-target="#myCarousel" data-slide-to="0" class="active" data-toggle="tooltip" title="Graph" data-placement="top"></li>
-        <li data-target="#myCarousel" data-slide-to="1" data-toggle="tooltip" title="Settings" data-placement="top"></li>
-    </ol>
+<div id="myCarousel" class="carousel slide">
 
     <!-- Wrapper for slides -->
     <div class="carousel-inner">
@@ -254,11 +271,10 @@
         <!-- //Wrapper Graph Container -->
 
         <!-- Wrapper Settings -->
-        <div class="item">
-            <div class="container-fluid" id="wrapper-settings">
-
-                
-
+        <div class="item settings">
+            <div class="container-fluid">
+                <div class="col-sm-6" id="charts"></div>
+                <div class="col-sm-6" id="wrapper-settings"></div>
             </div>
         </div>
 
diff --git a/templates/js/socket.js b/templates/js/socket.js
index ce66ba4..9683273 100755
--- a/templates/js/socket.js
+++ b/templates/js/socket.js
@@ -161,7 +161,7 @@ var reset_configuration = function() {
 
 var set_timeline = function(graph) {
 	// 'Timeline' slider
-	var [min, max] = get_min_and_max(graph);
+	var [min, max] = get_limits(graph);
 
 	var stepUnix = (max - min) / 200;
 	var minUnix  = (min !== Math.min()) ? min : 0;
@@ -253,7 +253,7 @@ var reset_timeline = function() {
     $('button#button_zoomFit').off();
 }
 
-var get_min_and_max = function(graph) {
+var get_limits = function(graph) {
 	var max = Math.max();
 	var min = Math.min()
 	graph.links.forEach(function(link) {
diff --git a/templates/js/template.js b/templates/js/template.js
index c320a89..e72cbbe 100644
--- a/templates/js/template.js
+++ b/templates/js/template.js
@@ -8,7 +8,7 @@ var initGUI = function(model_params) {
     var addBooleanInput = function(name, value) {
         var checked = (value) ? 'checked' : 'value';
 
-        var wrapper     = $('<div>').attr('class', 'col-sm-4').height('110px');
+        var wrapper     = $('<div>').attr('class', 'col-sm-6').height('110px');
         var input_group = $('<div>').attr('class', 'input-group').appendTo(wrapper);
         var label       = $('<label>').attr('for', name).attr('class', 'checkbox').appendTo(input_group);
         var input       = $('<input>') .attr('class', 'form-check-input').attr('id', name).attr('type', 'checkbox').attr(checked, checked).appendTo(label);
@@ -19,7 +19,7 @@ var initGUI = function(model_params) {
 
     var addSliderInput = function(name, value) {
 
-        var wrapper = $('<div>').attr('class', 'col-sm-4').height('110px');
+        var wrapper = $('<div>').attr('class', 'col-sm-6').height('110px');
         var label   = $('<div>').width('100%').text(name).css('text-align', 'center').css('font-weight', 'bolder').appendTo(wrapper);
         var input   = $('<input>').attr('id', name).attr('type', 'text').attr('data-slider-min', '0.001').attr('data-slider-max', '1').attr('data-slider-step', '0.001').attr('data-slider-value', value).attr('data-slider-tooltip', 'hide').css('padding', '0 10px').appendTo(wrapper);