142 lines
4.6 KiB
HTML
142 lines
4.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<title>KPR chmod - Calculadora de permisos</title>
|
|||
|
|
<style>
|
|||
|
|
.container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
width: 50%;
|
|||
|
|
margin: 2rem auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row label {
|
|||
|
|
width: 5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bits {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<label for="octal">Octal:</label>
|
|||
|
|
<input id="octal" type="number" min="0" max="777" step="1" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<label>Owner:</label>
|
|||
|
|
<div class="bits">
|
|||
|
|
<label><input type="checkbox" id="owner-read" /> r</label>
|
|||
|
|
<label><input type="checkbox" id="owner-write" /> w</label>
|
|||
|
|
<label><input type="checkbox" id="owner-execute" /> x</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<label>Group:</label>
|
|||
|
|
<div class="bits">
|
|||
|
|
<label><input type="checkbox" id="group-read" /> r</label>
|
|||
|
|
<label><input type="checkbox" id="group-write" /> w</label>
|
|||
|
|
<label><input type="checkbox" id="group-execute" /> x</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<label>Others:</label>
|
|||
|
|
<div class="bits">
|
|||
|
|
<label><input type="checkbox" id="others-read" /> r</label>
|
|||
|
|
<label><input type="checkbox" id="others-write" /> w</label>
|
|||
|
|
<label><input type="checkbox" id="others-execute" /> x</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// grab references
|
|||
|
|
const octalInput = document.getElementById('octal');
|
|||
|
|
const bits = {
|
|||
|
|
owner: {
|
|||
|
|
read: document.getElementById('owner-read'),
|
|||
|
|
write: document.getElementById('owner-write'),
|
|||
|
|
execute: document.getElementById('owner-execute'),
|
|||
|
|
},
|
|||
|
|
group: {
|
|||
|
|
read: document.getElementById('group-read'),
|
|||
|
|
write: document.getElementById('group-write'),
|
|||
|
|
execute: document.getElementById('group-execute'),
|
|||
|
|
},
|
|||
|
|
others: {
|
|||
|
|
read: document.getElementById('others-read'),
|
|||
|
|
write: document.getElementById('others-write'),
|
|||
|
|
execute: document.getElementById('others-execute'),
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// helper: from digit 0–7 set the three checkboxes
|
|||
|
|
function setBitsFromDigit(digit, checkboxes) {
|
|||
|
|
checkboxes.read.checked = !!(digit & 4);
|
|||
|
|
checkboxes.write.checked = !!(digit & 2);
|
|||
|
|
checkboxes.execute.checked = !!(digit & 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// helper: read three checkboxes to produce 0–7
|
|||
|
|
function getDigitFromBits(checkboxes) {
|
|||
|
|
return (checkboxes.read.checked ? 4 : 0)
|
|||
|
|
+ (checkboxes.write.checked ? 2 : 0)
|
|||
|
|
+ (checkboxes.execute.checked ? 1 : 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// when octal input changes, update all checkboxes
|
|||
|
|
function updateCheckboxesFromOctal() {
|
|||
|
|
let v = octalInput.value.toString();
|
|||
|
|
// pad or trim to exactly 3 digits
|
|||
|
|
v = v.padStart(3, '0').slice(-3);
|
|||
|
|
const ownerDigit = parseInt(v[0], 10) || 0;
|
|||
|
|
const groupDigit = parseInt(v[1], 10) || 0;
|
|||
|
|
const othersDigit = parseInt(v[2], 10) || 0;
|
|||
|
|
|
|||
|
|
setBitsFromDigit(ownerDigit, bits.owner);
|
|||
|
|
setBitsFromDigit(groupDigit, bits.group);
|
|||
|
|
setBitsFromDigit(othersDigit, bits.others);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// when any checkbox changes, recompute octal
|
|||
|
|
function updateOctalFromCheckboxes() {
|
|||
|
|
const owner = getDigitFromBits(bits.owner);
|
|||
|
|
const group = getDigitFromBits(bits.group);
|
|||
|
|
const others = getDigitFromBits(bits.others);
|
|||
|
|
octalInput.value = `${owner}${group}${others}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// wire up events
|
|||
|
|
octalInput.addEventListener('input', updateCheckboxesFromOctal);
|
|||
|
|
|
|||
|
|
for (const scope of Object.values(bits)) {
|
|||
|
|
for (const cb of Object.values(scope)) {
|
|||
|
|
cb.addEventListener('change', updateOctalFromCheckboxes);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// initialize on load
|
|||
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
// default to 644
|
|||
|
|
octalInput.value = '644';
|
|||
|
|
updateCheckboxesFromOctal();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|