Cambios de Device model

Templates/Sistemas/Xclientes/detail.html

@@ -6,8 +6,84 @@
     
 
 {% block content %}
-    <h1>{{object.cliente}}</h1>        
-    {{object.id_sistema}} <br>
-    {{object.num_licencias}}
+<style>
+    @import url('https://fonts.googleapis.com/css?family=Assistant');
+
+body {
+    background: #eee;
+    font-family: Assistant, sans-serif
+}
+
+.cell-1 {
+  border-collapse: separate;
+  border-spacing: 0 4em;
+  background: #ffffff;
+  border-bottom: 5px solid transparent;
+  /*background-color: gold;*/
+  background-clip: padding-box;
+  cursor: pointer;
+}
+
+thead {
+  background: #dddcdc;
+}
+
+
+.table-elipse {
+  cursor: pointer;
+}
+
+#demo {
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s 0.1s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+.row-child {
+  background-color: rgb(113, 178, 238);
+  color: rgb(0, 0, 0);
+}
+</style>
+
+
+
+<h1>{{object.cliente}}</h1>        
+
+<div class="table-responsive table-borderless">
+    <table class="table">
+        <thead>
+            <tr>
+                <th class="text-center">Num. Licencias contratadas</th>
+                <th>Sistema</th>
+                <th>-</th>
+                <th>Estatus</th>
+                <th>-</th>
+                <th>-</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody class="table-body">
+            <tr class="cell-1" data-toggle="collapse" data-target="#demo">
+                <td class="text-center">{{object.num_licencias}}</td>
+                <td>{{object.id_sistema}}</td>
+                <td>-</td>
+                <td><span class="badge badge-{% if object.cliente.Activo %}success{%else%}danger{% endif %}">{% if object.cliente.Activo %}Activo{%else%}Inactivo{% endif %}</span></td>
+                <td>-</td>
+                <td>click me</td>
+                <td class="table-elipse" data-toggle="collapse" data-target="#demo"><i class="fa fa-ellipsis-h text-black-50"></i></td>
+            </tr>
+            {% for sistema in  object.id_sistema.device_set.all %}                
+                <tr id="demo" class="collapse cell-1 row-child">
+                    <td class="text-center" colspan="1"><i class="fa fa-angle-up"></i></td>
+                    <td colspan="1">Dispositivo: <strong>{{sistema}}</strong> </td>
+                    <td colspan="3"></td>
+                    <td colspan="1">-</td>
+                    <td colspan="2">-</td>
+                </tr>
+            {% endfor %}            
+        </tbody>
+    </table>
+</div>      
 {% endblock content %}