diff options
Diffstat (limited to 'ogcp/templates/actions/setup.html')
| -rw-r--r-- | ogcp/templates/actions/setup.html | 226 |
1 files changed, 1 insertions, 225 deletions
diff --git a/ogcp/templates/actions/setup.html b/ogcp/templates/actions/setup.html index 934d72f..6ae7c15 100644 --- a/ogcp/templates/actions/setup.html +++ b/ogcp/templates/actions/setup.html @@ -9,230 +9,6 @@ <h2 class="mx-5 subhead-heading">{{_('Partition and Format')}}</h2> -<form method="GET" id="changeDiskForm"> - <input type="hidden" name="ips" value="{{ ips }}"/> - <input type="hidden" name="selected_client" value="{{ base_client }}"/> -</form> - -<form class="form-inline" method="POST" id="setupForm"> - <table class="table"> - <thead class="text-center"> - <tr> - <th>{{ _('Disk') }}</th> - <th>{{ _('Partition Table Type') }}</th> - <th>{{ _('Total Disk Size') }} (MiB)</th> - </tr> - </thead> - - <tbody data-target="partitons-fieldset" id="setupTable" class="text-center"> - <tr> - <td> - <select form="changeDiskForm" name="disk" onchange="this.form.submit()"> - {% for disk in disks %} - <option {% if disk == selected_disk %}selected{% endif %} - value="{{ disk }}">{{ disk }}</option> - {% endfor %} - </select> - </td> - {{ form.hidden_tag() }} - <td>{{ form.disk_type(class_="form-control") }}</td> - <td>{{ disk_size }}</td> - </tr> - </tbody> - </table> - <table class="table"> - <thead class="text-center"> - <tr> - <th>{{ _('Partition') }}</th> - <th>{{ _('Type') }}</th> - <th>{{ _('Filesystem') }}</th> - <th>{{ _('Size') }} (MiB)</th> - <th colspan="2"></th> - </tr> - </thead> - - <tbody data-target="partitons-fieldset" id="partitionsTable" class="text-center"> - {% for partition in form.partitions %} - <tr data-toggle="fieldset-entry"> - {{ partition.hidden_tag() }} - <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", oninput="handleEdit(this)") }}</td> - <td> - <button class="btn btn-danger" type="button" onclick="RemovePartition(this)"> - {{ _('Remove') }} - </button> - </td> - </tr> - {% endfor %} - </tbody> - </table> -</form> - -<button class="btn btn-primary" data-target="#partitionsTable" onclick="AddPartition(this)"> - {{ _('Add a new partition') }} -</button> - -<button class="btn btn-success" form="setupForm"> - {{ _('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> +{% include 'disk_inspector.html' %} {% endblock %} |