mirror of https://git.48k.eu/ogcp
307 lines
10 KiB
HTML
307 lines
10 KiB
HTML
{% if selected_disk is defined and setup_data is defined %}
|
|
|
|
<form class="form-inline" method="POST" id="setupForm">
|
|
{{ disk_form.hidden_tag() }}
|
|
{{ disk_form.ips() }}
|
|
|
|
<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="diskTable" class="text-center">
|
|
<tr>
|
|
<td>
|
|
{{ disk_form.disk(class_="form-control", onchange="handleDiskChange(this)") }}
|
|
</td>
|
|
{{ disk_form.hidden_tag() }}
|
|
<td>
|
|
{% if readonly_disk_inspector is defined %}
|
|
{{ disk_form.disk_type(class_="form-control", id="diskType", readonly="readonly") }}
|
|
{% else %}
|
|
{{ disk_form.disk_type(class_="form-control", id="diskType") }}
|
|
{% endif %}
|
|
</td>
|
|
<td id="diskSize">{{ 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>
|
|
{% if show_part_images is defined %}
|
|
<th>{{ _('Image') }}</th>
|
|
{% endif %}
|
|
<th colspan="2"></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody data-target="partitons-fieldset" id="partitionsTable" class="text-center">
|
|
{% for partition in disk_form.partitions %}
|
|
<tr data-toggle="fieldset-entry">
|
|
{{ partition.hidden_tag() }}
|
|
<td>{{ partition.partition.data }}</td>
|
|
<td>
|
|
{% if readonly_disk_inspector is defined %}
|
|
{{ partition.part_type(class_="form-control", readonly="readonly") }}
|
|
{% else %}
|
|
{{ partition.part_type(class_="form-control") }}
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if readonly_disk_inspector is defined %}
|
|
{{ partition.fs(class_="form-control", readonly="readonly") }}
|
|
{% else %}
|
|
{{ partition.fs(class_="form-control") }}
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if readonly_disk_inspector is defined %}
|
|
{{ partition.size(class_="form-control", oninput="handleEdit(this)", readonly="readonly") }}
|
|
{% else %}
|
|
{{ partition.size(class_="form-control", oninput="handleEdit(this)") }}
|
|
{% endif %}
|
|
</td>
|
|
{% if show_part_images is defined %}
|
|
<td></td>
|
|
{% endif %}
|
|
<td>
|
|
<button class="btn btn-danger" type="button" onclick="RemovePartition(this, true)"
|
|
{% if readonly_disk_inspector is defined %}style="display: none;"{% endif %}>
|
|
{{ _('Remove') }}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
|
|
<button class="btn btn-primary" data-target="#partitionsTable" id="addPartButton" onclick="AddPartition(this, true)"
|
|
{% if readonly_disk_inspector is defined %}style="display: none;"{% endif %}>
|
|
{{ _('Add a new partition') }}
|
|
</button>
|
|
|
|
{% if not readonly_disk_inspector is defined %}
|
|
<button class="btn btn-success" form="setupForm">
|
|
{{ _('Submit') }}
|
|
</button>
|
|
{% endif %}
|
|
|
|
<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 selectedDisk = {{selected_disk}};
|
|
let setupData = {{setup_data|tojson|safe}}
|
|
let diskSize = 0;
|
|
|
|
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 updatePartitionChart() {
|
|
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();
|
|
}
|
|
|
|
function handleEdit(element) {
|
|
const numericValue = parseInt(element.value);
|
|
|
|
if (isNaN(numericValue)) {
|
|
updatePartitionChart();
|
|
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;
|
|
}
|
|
|
|
updatePartitionChart();
|
|
}
|
|
|
|
function AddPartition(evt, updateChart) {
|
|
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);
|
|
|
|
if (updateChart) {
|
|
updatePartitionChart();
|
|
}
|
|
}
|
|
|
|
function RemovePartition(evt, updateChart) {
|
|
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");
|
|
});
|
|
});
|
|
}
|
|
if (updateChart) {
|
|
updatePartitionChart();
|
|
}
|
|
}
|
|
|
|
function setDiskData(diskNumber) {
|
|
selectedDisk = diskNumber;
|
|
let partitions = setupData[selectedDisk];
|
|
diskSize = Math.floor(partitions[0].size / 1024);
|
|
|
|
$('#diskSize').text(diskSize);
|
|
$('#diskType').val(partitions[0].code);
|
|
|
|
const partitionsTable = $('#partitionsTable');
|
|
let partNumber = partitionsTable.find('tr').length;
|
|
const targetPartNumber = partitions.length - 1;
|
|
|
|
while (partNumber < targetPartNumber) {
|
|
AddPartition($('#addPartButton'), false);
|
|
partNumber++;
|
|
}
|
|
|
|
while (partNumber > targetPartNumber) {
|
|
RemovePartition(partitionsTable.find('tr:last').find('button'), false);
|
|
partNumber--;
|
|
}
|
|
|
|
for (let i = 1; i < partitions.length; i++) {
|
|
let p = partitions[i];
|
|
|
|
let row = partitionsTable.find('tr').eq(i - 1);
|
|
|
|
row.find('td').eq(0).text(p.partition);
|
|
row.find('td').eq(1).find('select').val(p.code);
|
|
row.find('td').eq(2).find('select').val(p.filesystem);
|
|
row.find('td').eq(3).find('input').val(Math.floor(p.size / 1024));
|
|
{% if show_part_images is defined %}
|
|
row.find('td').eq(4).text(p.image);
|
|
{% endif %}
|
|
}
|
|
|
|
updatePartitionChart();
|
|
}
|
|
|
|
function handleDiskChange(selectElement) {
|
|
setDiskData(selectElement.value);
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
setDiskData(selectedDisk);
|
|
});
|
|
|
|
</script>
|
|
|
|
{% endif %}
|