adrien/ipam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip2

Browse Source
This commit is contained in:
Adrien MALINGREY
2025-05-27 02:08:54 +02:00
parent d6da7a6a2e
commit 55ac3e1d44
10 changed files with 441 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
index.php
View File

@ -1,100 +1,46 @@
<?php
require_once "load-networks.php";
if (isset($_SERVER["QUERY_STRING"]) && preg_match(
"/^$namePtn$/", $_SERVER["QUERY_STRING"], $matches
)) {
$tag = $matches[0];
if (isset($networks[$tag])) {
include("show-network.php");
} else {
header("Location: edit.php?$tag");
}
exit();
}
?>
<!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>
<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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="ui inverted teal menu">
<a class="header item">IP<em>AM</em></a>
</nav>
<main class="ui container">
<h1>Réseaux</h1>
<ul class="ui link list">
<?php foreach ($networks as $tag => $options) : ?>
<li class="item">
<a class="header" href="?<?=$tag?>"><?=$tag?></a>
<div class="description"><?=long2ip($options["network-addr"])?>/<?=$options["cidr_mask"]?></div>
</li>
<?php endforeach; ?>
<li class="item">
<a class='header' href="edit.php">Nouveau réseau...</a>
</li>
</ul>
</main>
</body>
</html>