<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPAM</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.js"></script>
<style>
.ui.form input[type="number"].textfield {
appearance: textfield;
}
.ui.form input[type="number"].textfield ::-webkit-inner-spin-button,
.ui.form input[type="number"].textfield ::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ui.input.address input {
text-align: right;
}
.address :not(:first-child):not(:last-child) {
border-radius: 0 !important;
}
.address :first-child {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.address :last-child {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
</style>
</head>
<body>
<main class="ui container">
<div class="ui segment">
<form action="add-network.php" method="post" class="ui form">
<div class="field">
<label for="name">Nom</label>
<input type="text" id="name" name="name">
</div>
<div class="fields">
<div class="field">
<label for="address">Adresse</label>
<div class="ui labeled address input">
<input type="number" id="octet1Input" min="0" max="255" step="1" required class="textfield">
<div class="ui label">.</div>
<input type="number" id="octet2Input" min="0" max="255" step="1" required class="textfield">
<div class="ui label">.</div>
<input type="number" id="octet3Input" min="0" max="255" step="1" required class="textfield">
<div class="ui label">.</div>
<input type="number" id="octet4Input" min="0" max="255" step="1" required class="textfield">
</div>
</div>
<input type="hidden" id="addressInput" name="address">
<div class="field">
<label>Masque</label>
<div class="ui labeled input">
<div class="ui label">/</div>
<input type="number" id="maskInput" name="mask" min="0" max="32" step="1" required class="textfield" title="Masque au format CIDR">
</div>
</div>
<script>
let otctetInputs = [octet1Input, octet2Input, octet3Input, octet4Input]
console.log(otctetInputs.forEach)
otctetInputs.forEach(input => {
input.oninput = () => {
o1 = octet1Input.valueAsNumber || 0;
o2 = octet2Input.valueAsNumber || 0;
o3 = octet3Input.valueAsNumber || 0;
o4 = octet4Input.valueAsNumber || 0;
addressInput.value = ((o1 << 24) | (o2 << 16) | (o3 << 8) | o4) >>> 0
}
input.onfocus = () => {
input.select();
}
});
[octet1Input, octet2Input, octet3Input].forEach((input, index) => {
input.onkeydown = function (event) {
if (event.key == ".") {
event.preventDefault();
otctetInputs[index + 1].focus()
}
}
})
octet4Input.onkeydown = function (event) {
if (event.key == "/") {
event.preventDefault();
maskInput.focus()
}
}
</script>
</div>
<button type="submit" class="ui button">Ajouter</button>
</form>
</div>
</main>
</body>
</html>