100 lines
4.7 KiB
PHP
100 lines
4.7 KiB
PHP
<!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> |