Rework partition page a bit

src/yasi_applets/disks/disks.html

@@ -88,33 +88,54 @@ fssize: {{ child['fssize'] }}
 <div style=""> <!-- partition bars -->
 <div style="background-color: gray; padding: 4px 6px 7px 6px; border-radius: 10px;">
 <p> <span style="width: 100%; border-radius: 8px 8px 0 0;" class="tag is-black">
-    <small><small>{{ disk['name'] }} ({{(disk['size']/1024000000)|round(0)|int }} GB) - Serial: {{ disk['serial'] }}</small></small>
+	<b>{{ disk['name'] }}: &nbsp; </b>  {{ disk['model'] }} - {{ disk['tran'] }} disk ({{(disk['size']/1024000000)|round(0)|int }} GB) - Serial: {{ disk['serial'] }} </p>
-<div class="columns">
+    <center style="padding: 5px; padding-bottom: 5px;">
-{% for child in disk['children'] %}
+      <td><a hx-get="/disks/todo }}" hx-swap="outerHTML"><span class="tag is-link"> New Partition Table </span></a></td>
-  <a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML"/>
+      <td><a hx-get="/disks/todo }}" hx-swap="outerHTML"><span class="tag is-link"> Disk Details </span></a></td>
-  <div class="column is-narrow is-primary">
+      <td><a hx-get="/disks/todo }}" hx-swap="outerHTML"><span class="tag is-link"> Replicate Layout </span></a></td>
-    <div class="box" style="min-width: 220px; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px;">
+    </center>
-    <p class="is-tiny">{{ child['name'] }} ({{ (child['size']/1024000000)|round(2) }} GiB)  </p>
+
-    <p class="title is-5"><span class="tag is-black">{{ child['mountpoint'] }}</span>
-    <span class="tag is-link">{{ child['fstype'] }}</span>
-    </p>
-    </div>
-  </div>
-  </a>
-{% endfor %}
   {% if disk['maj:min'] == "252:0" %}
-  <div class="column is-narrow is-primary">
+  <div class="column">
     <div class="box" style="width: 100%; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px; right: 0px;">
-    <p class="is-tiny"> {{ disk['name'] }} ({{ (disk['size']/1024000000)|round(2) }} GiB)  </p>
-    <p class="title is-5"><span class="tag is-black">/dev/{{ disk['name'] }}</span>
     <span class="tag is-link">swap</span>
     </p>
     </div>
     </div>
   {% endif %}
+
+{% set colors = ['teal', '#E69F00', '#56B4E9', '#009E73', '#0072B2', '#D55E00', '#CC79A7'] %}
+
+<div id="percentagebar" style="width: 100%; height: 20px; background-color: white; display: inline-block; margin: 5; padding: 5; overflow: hidden; display: flex;">
+	{% for child in disk['children'] %}
+	<div style="min-width: 100px; width: {{ (((child['size'] / disk['size'])*100)|round(0)|int) }}%; height: 100%; background-color: {{ colors[loop.index0 % colors|length] }}; display: inline-block; margin: 1; padding: 1; corners: rounded;">
+            &nbsp; {{ child['name'] }}
+	</div>
+	{% endfor %}
+</div>
+
+<table width="100%">
+	<th>Partition</th>
+	<th>Type</th>
+	<th>Mount Point</th>
+	<th>Label</th>
+	<th>Size</th>
+	<th>Used</th>
+{% for child in disk['children'] %}
+<tr>
+    <td><a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML"><span class="tag is-link">{{ child['name'] }}</span></a></td>
+    <td>{{ child['fstype'] }}</td>
+    <td>{{ child['mountpoint'] }}</td>
+    <td>{{ child['label'] }} </td>
+    <td>{{ (child['size']/1024000000)|round(2) }} GiB </td>
+</tr>
+{% endfor %}
+</table>
+
 </div>
 </div>
 
+<br />
 <!--
 <p> Diskname: {{ disk['name'] }} </p>
 <p> Model: {{ disk['model'] }} </p>
@@ -128,6 +149,7 @@ fssize: {{ child['fssize'] }}
 <p> There are {{ disk['children']|count }} Children </p>
 -->
 
+
 <!--
 {% for child in disk['children'] %}
 <br>