From 9cbf760ef38f363a7325d71af4fa90ccf30f8eb3 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Tue, 25 Feb 2020 21:17:59 +0100
Subject: [PATCH] update device and computer details to bootstrap4

---
 .../templates/computers/computer_details.html | 206 +++++++++---------
 .../devices/device_details_block.html         |  76 ++++---
 devices/templates/devices/ip_block.html       |  32 +--
 devices/templates/devices/warranty_block.html |  55 ++---
 .../templates/licenses/license_block.html     |  12 +-
 5 files changed, 197 insertions(+), 184 deletions(-)

diff --git a/computers/templates/computers/computer_details.html b/computers/templates/computers/computer_details.html
index b934cf3..9af3fe2 100644
--- a/computers/templates/computers/computer_details.html
+++ b/computers/templates/computers/computer_details.html
@@ -1,7 +1,7 @@
 {% extends "core/base.html" %}
 {% block section_title %}{{ device }}{% endblock %}
 {% block content %}
-<div class="row">
+<div class="row row-cols-3">
     <div class="col">
     {% block device_details %}
         {% include "devices/device_details_block.html" %}
@@ -19,123 +19,125 @@
         {% include "devices/ip_block.html" %}
     {% endblock %}
     </div>
-</div>
 
-<div class="row">
     {% if device.os or software_relations or backup_relations or license_list or device.host %}
     <div class="col">
-    {% if device.host %}
-    <h2>Host</h2>
-    <ul>
-        <li><a href="{% url 'device' device.host.id %}">{{ device.host }}</a></li>
-    </ul>
-    {% endif %}
+        <div class="card">
+            <div class="card-body">
+                {% if device.host %}
+                <h2>Host</h2>
+                <ul>
+                    <li><a href="{% url 'device' device.host.id %}">{{ device.host }}</a></li>
+                </ul>
+                {% endif %}
 
+                {% if device.os %}
+                <h2>Operating System</h2>
+                <ul>
+                    <li>{{ device.os }}</li>
+                </ul>
+                {% endif %}
 
-    {% if device.os %}
-    <h2>Operating System</h2>
-    <ul>
-        <li>{{ device.os }}</li>
-    </ul>
-    {% endif %}
+                {% if software_relations %}
+                <h2>Software</h2>
+                <ul>
+                {% for relation in software_relations %}
+                    <li>{{ relation.software }}</li>
+                {% endfor %}
+                </ul>
+                {% endif %}
 
-    {% if software_relations %}
-    <h2>Software</h2>
-    <ul>
-    {% for relation in software_relations %}
-        <li>{{ relation.software }}</li>
-    {% endfor %}
-    </ul>
-    {% endif %}
+                {% if license_list %}
+                {% block license %}
+                    {% include "licenses/license_block.html" %}
+                {% endblock %}
+                {% endif %}
 
-    {% if license_list %}
-    {% block license %}
-        {% include "licenses/license_block.html" %}
-    {% endblock %}
-    {% endif %}
-
-    {% if backup_relations %}
-    <h2>Backup</h2>
-    <ul>
-        {% for backup in backup_relations %}
-        <li><a href="{% url 'backup' backup.id %}">{{ backup }}</a></li>
-        {% endfor %}
-    </ul>
-    {% endif %}
+                {% if backup_relations %}
+                <h2>Backup</h2>
+                <ul>
+                    {% for backup in backup_relations %}
+                    <li><a href="{% url 'backup' backup.id %}">{{ backup }}</a></li>
+                    {% endfor %}
+                </ul>
+                {% endif %}
+            </div>
+        </div>
     </div>
     {% endif %}
 
     {% if cpu_relations or ram_relations or disks_relations or raid_disk_pairs %}
     <div class="col">
-    {% if cpu_relations or ram_relations or disks_relations or device.host %}
-    <h2>Hardware</h2>
-    <table class="table table-bordered">
+        <div class="card">
+            <h2 class="card-header">Hardware</h2>
+            <div class="card-body">
+                {% if cpu_relations or ram_relations or disks_relations or device.host %}
+                <table class="table table-bordered">
+                    {% if cpu_relations %}
+                    <tr>
+                        <td><b>CPUs:</b></td>
+                        <td>
+                        {% for cpu in cpu_relations %}
+                            {{ cpu.amount }}x {{ cpu.cpu }}<br>
+                        {% endfor %}
+                        </td>
+                    </tr>
+                    {% endif %}
 
-    {% if cpu_relations %}
-        <tr>
-            <td><b>CPUs:</b></td>
-            <td>
-            {% for cpu in cpu_relations %}
-                {{ cpu.amount }}x {{ cpu.cpu }}<br>
-            {% endfor %}
-            </td>
-        </tr>
-    {% endif %}
+                    {% if ram_relations %}
+                    <tr>
+                        <td><b>RAM Modules:</b></td>
+                        <td>
+                        {% for module in ram_relations %}
+                            {{ module.amount }}x {{ module.ram }}<br>
+                        {% endfor %}
+                        </td>
+                    </tr>
+                    {% endif %}
 
-    {% if ram_relations %}
-        <tr>
-        <td><b>RAM Modules:</b></td>
-        <td>
-            {% for module in ram_relations %}
-                {{ module.amount }}x {{ module.ram }}<br>
-            {% endfor %}
-        </td>
-    </tr>
-    {% endif %}
-
-    {% if disks_relations %}
-    <tr>
-    <td><b>Disks:</b></td>
-    <td>
-            {% for disk in disks_relations %}
-                {{ disk.amount }}x {{ disk.disk }}<br>
-            {% endfor %}
-    </td>
-    </tr>
-    {% endif %}
-    </table>
-    {% endif %}
-
-    {% if raid_disk_pairs %}
-    <h2>RAID</h2>
-    {% for raid, disks in raid_disk_pairs.items %}
-    <table class="table table-bordered">
-        <tr>
-            <td><b>Type:</b></td>
-            <td>{{ raid.raid_type }}</td>
-        </tr>
-        <tr>
-            <td><b>Usable Space</b></td>
-            <td>{{ raid.usable_space }}</td>
-        </tr>
-        {% if disks %}
-        {% for disk in disks %}
-        <tr>
-            <td><b>Disk Type</b></td>
-            <td>{{ disk.disk }}</td>
-        </tr>
-        <tr>
-            <td><b>Amount</b></td>
-            <td>{{ disk.disk_amount }}</td>
-        </tr>
-        {% endfor %}
-        {% endif %}
-    </table>
-    {% endfor %}
-    {% endif %}
+                    {% if disks_relations %}
+                    <tr>
+                        <td><b>Disks:</b></td>
+                        <td>
+                        {% for disk in disks_relations %}
+                            {{ disk.amount }}x {{ disk.disk }}<br>
+                        {% endfor %}
+                        </td>
+                    </tr>
+                    {% endif %}
+                </table>
+                {% endif %}
 
+                {% if raid_disk_pairs %}
+                <h3>RAID</h3>
+                {% for raid, disks in raid_disk_pairs.items %}
+                <table class="table table-bordered">
+                    <tr>
+                        <td><b>Type:</b></td>
+                        <td>{{ raid.raid_type }}</td>
+                    </tr>
+                    <tr>
+                        <td><b>Usable Space</b></td>
+                        <td>{{ raid.usable_space }}</td>
+                    </tr>
+                    {% if disks %}
+                    {% for disk in disks %}
+                    <tr>
+                        <td><b>Disk Type</b></td>
+                        <td>{{ disk.disk }}</td>
+                    </tr>
+                    <tr>
+                        <td><b>Amount</b></td>
+                        <td>{{ disk.disk_amount }}</td>
+                    </tr>
+                    {% endfor %}
+                    {% endif %}
+                </table>
+                {% endfor %}
+                {% endif %}
+            </div>
+        </div>
     {% endif %}
     </div>
-
 </div>
 {% endblock %}
diff --git a/devices/templates/devices/device_details_block.html b/devices/templates/devices/device_details_block.html
index 2e2317e..3046273 100644
--- a/devices/templates/devices/device_details_block.html
+++ b/devices/templates/devices/device_details_block.html
@@ -1,37 +1,41 @@
-    <h2>Description</h2>
-    <div class="description"><p>{{ device.description }}</p></div>
-    <table class="table table-bordered">
-        <tr>
-            <td><b>Serial Number:</b></td>
-            <td><code>{{ device.serialnumber }}</code></td>
-        </tr>
-        <tr>
-            <td><b>Category:</b></td>
-            <td>{{ device.category }}</td>
-        </tr>
-        <tr>
-            <td><b>Owner:</b></td>
-            <td>{{ device.owner }}</td>
-        </tr>
-        <tr>
-            <td><b>Customer:</b></td>
-            <td><a href="{% url 'customer' device.customer.id %}">{{ device.customer }}</a></td>
-        </tr>
-        <tr>
-            <td><b>Manufacturer:</b></td>
-            <td>{{ device.manufacturer }}</td>
-        </tr>
-        <tr>
-            <td><b>Model:</b></td>
-            <td>{{ device.model }}</td>
-        </tr>
+<div class="card">
+    <div class="card-body">
+        <h4>Description</h4>
+        <div class="card-text"><p>{{ device.description }}</p></div>
+        <table class="table table-bordered">
+            <tr>
+                <td><b>Serial Number:</b></td>
+                <td><code>{{ device.serialnumber }}</code></td>
+            </tr>
+            <tr>
+                <td><b>Category:</b></td>
+                <td>{{ device.category }}</td>
+            </tr>
+            <tr>
+                <td><b>Owner:</b></td>
+                <td>{{ device.owner }}</td>
+            </tr>
+            <tr>
+                <td><b>Customer:</b></td>
+                <td><a href="{% url 'customer' device.customer.id %}">{{ device.customer }}</a></td>
+            </tr>
+            <tr>
+                <td><b>Manufacturer:</b></td>
+                <td>{{ device.manufacturer }}</td>
+            </tr>
+            <tr>
+                <td><b>Model:</b></td>
+                <td>{{ device.model }}</td>
+            </tr>
 
-        <tr>
-            <td><b>Location:</b></td>
-            <td>{{ device.location }}</td>
-        </tr>
-        <tr>
-            <td><b>Installation Date:</b></td>
-            <td>{{ device.installation_date }}</td>
-        </tr>
-    </table>
+            <tr>
+                <td><b>Location:</b></td>
+                <td>{{ device.location }}</td>
+            </tr>
+            <tr>
+                <td><b>Installation Date:</b></td>
+                <td>{{ device.installation_date }}</td>
+            </tr>
+        </table>
+    </div>
+</div>
diff --git a/devices/templates/devices/ip_block.html b/devices/templates/devices/ip_block.html
index 8826c98..ecc62f3 100644
--- a/devices/templates/devices/ip_block.html
+++ b/devices/templates/devices/ip_block.html
@@ -1,19 +1,21 @@
 {% if device.nets %}
-    <div class="col">
-    <h2>IPs</h2>
-    <table class="table table-bordered">
-        {% regroup device.nets by name as nets_list %}
-        {% for net in nets_list %}
-        <tr>
-            <td><b>{{ net.grouper }}</b></td>
-            <td>
-                {% for ip in net.list %}
-                    <a href="{% url 'net' ip.net_id %}">{{ ip.ip }}</a><br>
-                {% endfor %}
-            </td>
-        </tr>
-        {% endfor %}
-    </table>
+<div class="card">
+    <h2 class="card-header">IPs</h2>
+    <div class="card-body">
+        <table class="table table-bordered">
+            {% regroup device.nets by name as nets_list %}
+            {% for net in nets_list %}
+            <tr>
+                <td><b>{{ net.grouper }}</b></td>
+                <td>
+                    {% for ip in net.list %}
+                        <a href="{% url 'net' ip.net_id %}">{{ ip.ip }}</a><br>
+                    {% endfor %}
+                </td>
+            </tr>
+            {% endfor %}
+        </table>
     </div>
+</div>
 {% endif %}
 
diff --git a/devices/templates/devices/warranty_block.html b/devices/templates/devices/warranty_block.html
index 01e1801..bccd3c0 100644
--- a/devices/templates/devices/warranty_block.html
+++ b/devices/templates/devices/warranty_block.html
@@ -1,30 +1,35 @@
-    {% if warranty_relations %}
-    <div class="col">
-    <h2>Warranty</h2>
+{% if warranty_relations %}
+<div class="card">
+    <h2 class="card-header">Warranty</h2>
+    <div class="card-body">
         {% for warranty in warranty_relations %}
         <table class="table table-bordered">
-        <tr>
-        <td><b>Valid From:</b></td>
-        <td>
-            {{ warranty.valid_from }}<br>
-        </td>
-        <tr>
-        <td><b>Valid Until:</b></td>
-        <td>
-            {{ warranty.valid_until }}<br>
-        </td>
-        <tr>
-        <td><b>Duration:</b></td>
-        <td>
-            {{ warranty.duration_in_years }}<br>
-        </td>
-        <tr>
-        <td><b>Type:</b></td>
-        <td>
-            {{ warranty.warranty_type }}<br>
-        </td>
-        </tr>
+            <tr>
+            <td><b>Valid From:</b></td>
+            <td>
+                {{ warranty.valid_from }}<br>
+            </td>
+            </tr>
+            <tr>
+            <td><b>Valid Until:</b></td>
+            <td>
+                {{ warranty.valid_until }}<br>
+            </td>
+            </tr>
+            <tr>
+            <td><b>Duration:</b></td>
+            <td>
+                {{ warranty.duration_in_years }}<br>
+            </td>
+            </tr>
+            <tr>
+            <td><b>Type:</b></td>
+            <td>
+                {{ warranty.warranty_type }}<br>
+            </td>
+            </tr>
         </table>
         {% endfor %}
     </div>
-    {% endif %}
+</div>
+{% endif %}
diff --git a/licenses/templates/licenses/license_block.html b/licenses/templates/licenses/license_block.html
index fbb8f22..ab286fe 100644
--- a/licenses/templates/licenses/license_block.html
+++ b/licenses/templates/licenses/license_block.html
@@ -1,9 +1,9 @@
 <h2>Licenses</h2>
 <table class="table table-bordered">
-{% for license in license_list %}
-<tr>
-    <td>{{ license.license.software }}</td>
-    <td><code>{{ license.license.key }}</code></td>
-</tr>
-{% endfor %}
+    {% for license in license_list %}
+    <tr>
+        <td>{{ license.license.software }}</td>
+        <td><code>{{ license.license.key }}</code></td>
+    </tr>
+    {% endfor %}
 </table>