ogcp: add disk restrictions in partition and format

Use common disk space across all the selected clients.

Show dynamic disk partition graph in the partition view.

Limit partition sizes dynamically in the form.

Move js code to handle the addition and removal of
partitions into the html file to debloat ogcp.js and keep
the functions local to the only file they manipulate.

2 files changed, 159 insertions, 2 deletions

diff --git a/ogcp/templates/actions/setup.html b/ogcp/templates/actions/setup.html
index fafcb87..934d72f 100644
--- a/ogcp/templates/actions/setup.html
+++ b/ogcp/templates/actions/setup.html
@@ -58,7 +58,7 @@
                         <td>{{ partition.partition.data }}</td>
                         <td>{{ partition.part_type(class_="form-control") }}</td>
                         <td>{{ partition.fs(class_="form-control") }}</td>
-                        <td>{{ partition.size(class_="form-control") }}</td>
+                        <td>{{ partition.size(class_="form-control", oninput="handleEdit(this)") }}</td>
                         <td>
                             <button class="btn btn-danger" type="button" onclick="RemovePartition(this)">
                                 {{ _('Remove') }}
@@ -78,4 +78,161 @@
     {{ _('Accept') }}
 </button>
 
+<div class="card text-center">
+    <div class="card-header">
+      {{ _('Partition graph') }}
+    </div>
+    <div class="card-body mx-auto col-7">
+        <canvas id="partitionChart" class="mb-2"></canvas>
+    </div>
+</div>
+
+<!-- jQuery -->
+<script src="{{ url_for('static', filename='AdminLTE/plugins/jquery/jquery.min.js') }}"></script>
+<!-- ChartJS -->
+<script src="{{ url_for('static', filename='AdminLTE/plugins/chart.js/Chart.min.js') }}"></script>
+<script>
+    const usedColor = 'rgb(255, 99, 132)';
+    const freeColor = 'rgb(54, 162, 235)';
+    let diskSize = {{ disk_size }};
+
+    let chartConfig = {
+        type: 'doughnut',
+        data: {
+            labels: [],
+            datasets: [
+            {
+                label: 'Partitions',
+                data: [],
+                backgroundColor: [],
+            },
+            ],
+        },
+        options: {
+            responsive: true,
+            plugins: {
+            legend: {
+                position: 'top',
+            },
+            title: {
+                display: true,
+                text: 'Chart.js Doughnut Chart'
+            },
+            },
+        },
+    };
+
+    let partitionChart = new Chart(
+      document.getElementById('partitionChart'),
+      chartConfig,
+    );
+
+    function addPartitionToChart(chart, label, value, bgColor) {
+        chart.data.labels.push(label)
+        chart.data.datasets[0].data.push(value);
+        chart.data.datasets[0].backgroundColor.push(bgColor);
+    }
+
+    function resetChart() {
+        partitionChart.data.labels = [];
+        partitionChart.data.datasets[0].data = [];
+        partitionChart.data.datasets[0].backgroundColor = [];
+    }
+
+    function updateChart() {
+        resetChart();
+
+        let freeSpace = diskSize;
+        let partNum = 1;
+        $('#partitionsTable tr').each(function() {
+            let partitionSize = parseInt($(this).find('td').eq(3).find('input').val().trim());
+            if (isNaN(partitionSize)) {
+                partitionSize = 0;
+            }
+            freeSpace -= partitionSize;
+            addPartitionToChart(partitionChart, 'Partition ' + partNum, partitionSize, usedColor);
+            partNum++;
+        });
+
+        addPartitionToChart(partitionChart, 'Free', Math.max(freeSpace, 0), freeColor);
+        partitionChart.update();
+    }
+
+    $(document).ready(function() {
+        updateChart();
+    });
+
+    function handleEdit(element) {
+        const numericValue = parseInt(element.value);
+
+        if (isNaN(numericValue)) {
+            updateChart();
+            return;
+        }
+
+        let freeSpace = diskSize;
+        $('#partitionsTable tr').each(function() {
+            let partitionSize = parseInt($(this).find('td').eq(3).find('input').val().trim());
+            if (isNaN(partitionSize)) {
+                partitionSize = 0;
+            }
+            freeSpace -= partitionSize;
+        });
+
+        if (freeSpace < 0) {
+            element.value = numericValue + freeSpace;
+        }
+
+        updateChart();
+    }
+
+    function AddPartition(evt) {
+        const target = $($(evt).data("target"));
+        const oldrow = target.find("[data-toggle=fieldset-entry]:last");
+        const row = oldrow.clone(true, true);
+        const elem_id = row.find(".form-control")[0].id;
+        const elem_num = parseInt(elem_id.replace(/(.*)-(\d{1,4})/m, '$2')) + 1;
+        // Increment WTForms unique identifiers
+        row.find('.form-control').each(function() {
+            const id = $(this).attr('id').replace(/(.*)-(\d{1,4})-(.*)/, `$1-${elem_num}-$3`);
+            $(this).attr('name', id).attr('id', id).val('').removeAttr("checked");
+        });
+        let part_field = row.find('td').filter(':first')[0];
+        part_field.innerText = elem_num + 1;
+        row.show();
+        oldrow.after(row);
+
+        updateChart();
+    }
+
+    function RemovePartition(evt) {
+        const target = $(evt).parent().parent();
+        const table = target.parent();
+
+        if (table[0].children.length > 1) {
+            target.remove();
+            // Reassign rows ids
+            table.find('tr').each(function(index) {
+                function update_references() {
+                    const id = $(this).attr('id').replace(/(.*)-(\d{1,4})-(.*)/, `$1-${index}-$3`);
+                    $(this).attr('name', id).attr('id', id);
+                }
+
+                let part_field = $(this).find('td').filter(':first')[0];
+                part_field.innerText = index + 1;
+                $(this).find('input').filter(':first').each(update_references);
+                $(this).find('.form-control').each(update_references);
+            });
+        } else {
+            table.find('tr').each(function(index) {
+                $(this).find('.form-control').each(function() {
+                    $(this).val('').removeAttr("checked");
+                });
+            });
+        }
+        updateChart();
+    }
+
+</script>
+
 {% endblock %}
diff --git a/ogcp/templates/base.html b/ogcp/templates/base.html
index 0099c27..cd030e8 100644
--- a/ogcp/templates/base.html
+++ b/ogcp/templates/base.html
@@ -108,7 +108,7 @@
     <!-- ChartJS -->
     <script src="{{ url_for('static', filename='AdminLTE/plugins/chart.js/Chart.min.js') }}"></script>
 
-    <script src="{{ url_for('static', filename='js/ogcp.js') }}?v=15"></script>
+    <script src="{{ url_for('static', filename='js/ogcp.js') }}?v=16"></script>
 
     <script>
         // error messages