From 9eded5ebfde22ea23b573c1896a7cdcb8f6a46ea Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Wed, 24 Jan 2018 19:16:45 +0100
Subject: UI: work on dashboards

---
 .../ishtar/dashboards/dashboard_main.html          | 49 ++++++++++++++--------
 1 file changed, 32 insertions(+), 17 deletions(-)

(limited to 'ishtar_common/templates/ishtar/dashboards/dashboard_main.html')

diff --git a/ishtar_common/templates/ishtar/dashboards/dashboard_main.html b/ishtar_common/templates/ishtar/dashboards/dashboard_main.html
index 827fcf02d..f2eefd6d3 100644
--- a/ishtar_common/templates/ishtar/dashboards/dashboard_main.html
+++ b/ishtar_common/templates/ishtar/dashboards/dashboard_main.html
@@ -13,25 +13,40 @@
 <link rel="stylesheet" href="{{STATIC_URL}}js/jqplot/jquery.jqplot.min.css?ver={{VERSION}}" />
 {% endblock %}
 {% block content %}
- <script>
+<script type="text/javascript">
 $(function() {
- $( "#dash-tabs" ).tabs({
-   beforeActivate: function( event, ui ) {
-    $('.modal-progress').modal('show');
-   },
-   load: function( event, ui ) {
-    $('.modal-progress').modal('hide');
-   }
- });
+    $('#dashboard .nav-link').click(function () {
+        var url = $(this).attr('data-url');
+        $("#dashboard .card-body").load(url);
+        $('#dashboard li').removeClass('active');
+        $('#dashboard li').removeClass('show');
+        $(this).parent().tab('show');
+    })
+    $('#dashboard li:first-child a').click();
 });
+
 </script>
-<div id='dashboard'>
- <div id="dash-tabs">
-  <ul>
-    {% for label, app in app_list %}
-   <li><a href="{% url 'dashboard-main-detail' app %}">{{label}}</a></li>{% endfor %}
-   <li><a href="{% url 'dashboard-main-detail' 'users' %}">{% trans "Users" %}</a></li>
-  </ul>
- </div>
+<div id='dashboard' class="card">
+    <div class="card-header">
+        <ul class="nav nav-tabs card-header-tabs">
+            {% for label, app in app_list %}
+            <li class="nav-item" id="{{app}}-tab">
+                <a class="nav-link" href="#{{app}}-pane"
+                   data-url="{% url 'dashboard-main-detail' app %}">{{label}}</a>
+            </li>{% endfor %}
+            <li class="nav-item" id="users-tab">
+                <a class="nav-link" href="#users-pane"
+                   data-url="{% url 'dashboard-main-detail' 'users' %}">{% trans "Users" %}</a>
+            </li>
+        </ul>
+    </div>
+    <div class="card-body tab-content">
+        {% for label, app in app_list %}
+        <div class="tab-pane{% if forloop.counter0 == 0%} active{% endif %}" id="{{app}}-pane"
+             role="tabpanel" aria-labelledby="{{app}}-tab"></div>{% endfor %}
+        <div class="tab-pane" id="users-pane" role="tabpanel"
+             aria-labelledby="users-tab"></div>
+    </div>
 </div>
+
 {% endblock %}
-- 
cgit v1.2.3