1 files changed, 158 insertions, 1 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 %}