From c190f6d48ac289284698ef2dc2057836558dbdd8 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Thu, 28 Aug 2014 12:43:15 +0200
Subject: [PATCH] add tabs for profile & data + button group

---
 css/style.css         | 18 ++++++++++++++++--
 index.html            | 29 ++++++++++++++++++++++-------
 js/control/Profile.js |  5 ++++-
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6a947c6..7e4ce18 100644
--- a/css/style.css
+++ b/css/style.css
@@ -132,16 +132,21 @@ td {
     bottom: 0px;
 }
 
+.tab-content {
+    padding: 5px 0px;
+}
+/*
 #profile_upload input {
     position: absolute;
     top: 6px;
     right: 8px;
 }
+*/
 
 /* http://snook.ca/archives/html_and_css/absolute-position-textarea */
 #textarea_container {
     position: absolute;
-    top: 32px;
+    top: 64px;
     bottom: 6px;
     left: 8px;
     right: 8px;
@@ -186,6 +191,10 @@ textarea:focus {
   }
 }
 
+/*
+ * Bootstrap
+ */
+
 /* override Bootstrap label for Leaflet layer switcher */
 .leaflet-control-layers label {
     max-width: none;
@@ -196,4 +205,9 @@ textarea:focus {
        Leaflet only | 21      | 20     |
        Bootstrap    | 23      | 22     |*/
     height: 21px;
-}
\ No newline at end of file
+}
+
+/* smaller tab height */
+.nav > li > a {
+    padding: 2px 15px;
+}
diff --git a/index.html b/index.html
index 919430d..d35c197 100644
--- a/index.html
+++ b/index.html
@@ -51,14 +51,29 @@
         </table>
     </div>
     <div id="profile_div" class="hidden">
-        <form id="profile_upload" name="profile_upload">
-            <button id="clear">Clear</button>&nbsp;
-            <a href="http://brouter.de/brouter/costfunctions.html" target="_blank">Help</a>
-            <input type="submit" value="Upload" />
-            <div id="textarea_container">
-                <textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
+      
+        <ul id="tab" class="nav nav-tabs" role="tablist">
+            <li class="active"><a href="#tab_profile" role="tab">Profile</a></li>
+            <li><a href="#tab_data" role="tab">Data</a></li>
+        </ul>
+
+        <div class="tab-content">
+            <div class="tab-pane active" id="tab_profile">
+                <form id="profile_upload" name="profile_upload">
+                    &nbsp;<div class="btn-group">
+                        <button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-upload"></span> Upload</button>
+                        <!-- TODO type="reset" -->
+                        <button id="clear" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>
+                    </div>
+                    <a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn-xs">Help</a>
+                    <div id="textarea_container">
+                        <textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
+                    </div>
+                </form>
             </div>
-        </form>
+            <div class="tab-pane" id="tab_data">
+            </div>
+        </div>
     </div>
 
     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>
diff --git a/js/control/Profile.js b/js/control/Profile.js
index 888b6ba..5892655 100644
--- a/js/control/Profile.js
+++ b/js/control/Profile.js
@@ -1,6 +1,5 @@
 BR.Profile = BR.Control.extend({
     options: {
-        heading: 'Profile',
         divId: 'profile_div'
     },
 
@@ -8,6 +7,10 @@ BR.Profile = BR.Control.extend({
         L.DomUtil.get('profile_upload').onsubmit = L.bind(this._submit, this);
         L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
 
+        $('#tab a').click(function (e) {
+          e.preventDefault();
+          $(this).tab('show');
+        });
 
         return BR.Control.prototype.onAdd.call(this, map);
     },