summaryrefslogtreecommitdiffstats
path: root/ogcp/templates
diff options
context:
space:
mode:
Diffstat (limited to 'ogcp/templates')
-rw-r--r--ogcp/templates/actions/setup.html159
-rw-r--r--ogcp/templates/base.html2
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