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> |