input updtae
This commit is contained in:
parent
961e56de48
commit
0679d64287
184
html/input.php
184
html/input.php
|
|
@ -5,23 +5,24 @@ $jsonFile = __DIR__ . "/input.json";
|
||||||
if (!file_exists($jsonFile)) {
|
if (!file_exists($jsonFile)) {
|
||||||
file_put_contents($jsonFile, json_encode([]));
|
file_put_contents($jsonFile, json_encode([]));
|
||||||
}
|
}
|
||||||
|
|
||||||
$data = json_decode(file_get_contents($jsonFile), true);
|
$data = json_decode(file_get_contents($jsonFile), true);
|
||||||
|
|
||||||
if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST["action"]) && $_POST["action"] === "add") {
|
if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST["action"]) && $_POST["action"] === "add") {
|
||||||
$new = [
|
$new = [
|
||||||
"id" => time(),
|
"id" => time(),
|
||||||
"input_udp" => $_POST["input_udp"],
|
"input_udp" => $_POST["input_udp"] ?? "",
|
||||||
"output_udp" => $_POST["output_udp"],
|
"output_udp" => $_POST["output_udp"] ?? "",
|
||||||
"video_format" => $_POST["video_format"],
|
"video_format" => $_POST["video_format"] ?? "",
|
||||||
"audio_format" => $_POST["audio_format"],
|
"audio_format" => $_POST["audio_format"] ?? "",
|
||||||
"resolution" => $_POST["resolution"],
|
"resolution" => $_POST["resolution"] ?? "",
|
||||||
"video_bitrate" => $_POST["video_bitrate"],
|
"video_bitrate" => $_POST["video_bitrate"] ?? "",
|
||||||
"audio_bitrate" => $_POST["audio_bitrate"],
|
"audio_bitrate" => $_POST["audio_bitrate"] ?? "",
|
||||||
"status" => $_POST["status"]
|
"status" => $_POST["status"] ?? ""
|
||||||
];
|
];
|
||||||
|
|
||||||
$data[] = $new;
|
$data[] = $new;
|
||||||
file_put_contents($jsonFile, json_encode($data, JSON_PRETTY_PRINT));
|
file_put_contents($jsonFile, json_encode($data, JSON_PRETTY_PRINT));
|
||||||
|
|
||||||
echo "OK";
|
echo "OK";
|
||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
|
|
@ -29,7 +30,7 @@ if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST["action"]) && $_POST["
|
||||||
?>
|
?>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -50,119 +51,112 @@ if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST["action"]) && $_POST["
|
||||||
width: 350px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#popup input,
|
|
||||||
#popup select {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay {
|
#overlay {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
inset: 0;
|
||||||
left: 0;
|
background: rgba(0, 0, 0, 0.5);
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
input,
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 6px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table th,
|
th,
|
||||||
.table td {
|
td {
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
text-align: left;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
|
||||||
<div class="containerindex">
|
|
||||||
<div class="grid">
|
|
||||||
<h2>Service List</h2>
|
|
||||||
<button onclick="openPopup()">Add Service</button>
|
|
||||||
|
|
||||||
<!-- TABLE LIST -->
|
<h2>Service List</h2>
|
||||||
<table class="table">
|
<button onclick="openPopup()">Add Service</button>
|
||||||
<tr>
|
|
||||||
<th>ID</th>
|
|
||||||
<th>Input UDP</th>
|
|
||||||
<th>Output UDP</th>
|
|
||||||
<th>Video Format</th>
|
|
||||||
<th>Audio Format</th>
|
|
||||||
<th>Resolution</th>
|
|
||||||
<th>Video Bitrate</th>
|
|
||||||
<th>Audio Bitrate</th>
|
|
||||||
<th>Status</th>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<?php foreach ($data as $row): ?>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td><?= htmlspecialchars($row["id"]) ?></td>
|
<th>ID</th>
|
||||||
<td><?= htmlspecialchars($row["input_udp"]) ?></td>
|
<th>Input UDP</th>
|
||||||
<td><?= htmlspecialchars($row["output_udp"]) ?></td>
|
<th>Output UDP</th>
|
||||||
<td><?= htmlspecialchars($row["video_format"]) ?></td>
|
<th>Video Format</th>
|
||||||
<td><?= htmlspecialchars($row["audio_format"]) ?></td>
|
<th>Audio Format</th>
|
||||||
<td><?= htmlspecialchars($row["resolution"]) ?></td>
|
<th>Resolution</th>
|
||||||
<td><?= htmlspecialchars($row["video_bitrate"]) ?></td>
|
<th>Video Bitrate</th>
|
||||||
<td><?= htmlspecialchars($row["audio_bitrate"]) ?></td>
|
<th>Audio Bitrate</th>
|
||||||
<td><?= htmlspecialchars($row["status"]) ?></td>
|
<th>Status</th>
|
||||||
</tr>
|
</tr>
|
||||||
<?php endforeach; ?>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- POPUP -->
|
<?php foreach ($data as $row): ?>
|
||||||
<div id="overlay"></div>
|
<tr>
|
||||||
|
<td><?= $row["id"] ?></td>
|
||||||
|
<td><?= $row["input_udp"] ?></td>
|
||||||
|
<td><?= $row["output_udp"] ?></td>
|
||||||
|
<td><?= $row["video_format"] ?></td>
|
||||||
|
<td><?= $row["audio_format"] ?></td>
|
||||||
|
<td><?= $row["resolution"] ?></td>
|
||||||
|
<td><?= $row["video_bitrate"] ?></td>
|
||||||
|
<td><?= $row["audio_bitrate"] ?></td>
|
||||||
|
<td><?= $row["status"] ?></td>
|
||||||
|
</tr>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
|
||||||
<div id="popup">
|
</table>
|
||||||
<h3>Add Service</h3>
|
|
||||||
|
|
||||||
<input type="text" id="in_udp" placeholder="Input UDP">
|
<!-- Overlay -->
|
||||||
<input type="text" id="out_udp" placeholder="Output UDP">
|
<div id="overlay"></div>
|
||||||
|
|
||||||
<select id="video_format">
|
<!-- Popup form -->
|
||||||
<option value="h264">H.264</option>
|
<div id="popup">
|
||||||
<option value="h265">H.265</option>
|
<h3>Add Service</h3>
|
||||||
</select>
|
|
||||||
|
|
||||||
<select id="audio_format">
|
<input type="text" id="in_udp" name="input_udp" placeholder="Input UDP">
|
||||||
<option value="aac">AAC</option>
|
<input type="text" id="out_udp" name="output_udp" placeholder="Output UDP">
|
||||||
<option value="mp3">MP3</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<select id="resolution">
|
<select id="video_format" name="video_format">
|
||||||
<option value="1920x1080">1920x1080</option>
|
<option value="h264">H.264</option>
|
||||||
<option value="1280x720">1280x720</option>
|
<option value="h265">H.265</option>
|
||||||
<option value="720x576">720x576</option>
|
</select>
|
||||||
</select>
|
|
||||||
|
|
||||||
<input type="text" id="video_bitrate" placeholder="Video Bitrate (kbps)">
|
<select id="audio_format" name="audio_format">
|
||||||
<input type="text" id="audio_bitrate" placeholder="Audio Bitrate (kbps)">
|
<option value="aac">AAC</option>
|
||||||
|
<option value="mp3">MP3</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
<select id="status">
|
<select id="resolution" name="resolution">
|
||||||
<option value="enable">Enable</option>
|
<option value="1920x1080">1920x1080</option>
|
||||||
<option value="disable">Disable</option>
|
<option value="1280x720">1280x720</option>
|
||||||
</select>
|
<option value="720x576">720x576</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
<button onclick="saveService()">Save</button>
|
<input type="text" id="video_bitrate" name="video_bitrate" placeholder="Video Bitrate (kbps)">
|
||||||
<button onclick="closePopup()">Close</button>
|
<input type="text" id="audio_bitrate" name="audio_bitrate" placeholder="Audio Bitrate (kbps)">
|
||||||
</div>
|
|
||||||
</div>
|
<select id="status" name="status">
|
||||||
|
<option value="enable">Enable</option>
|
||||||
|
<option value="disable">Disable</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<button onclick="saveService()">Save</button>
|
||||||
|
<button onclick="closePopup()">Close</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function openPopup() {
|
function openPopup() {
|
||||||
document.getElementById("popup").style.display = "block";
|
|
||||||
document.getElementById("overlay").style.display = "block";
|
document.getElementById("overlay").style.display = "block";
|
||||||
|
document.getElementById("popup").style.display = "block";
|
||||||
}
|
}
|
||||||
|
|
||||||
function closePopup() {
|
function closePopup() {
|
||||||
document.getElementById("popup").style.display = "none";
|
|
||||||
document.getElementById("overlay").style.display = "none";
|
document.getElementById("overlay").style.display = "none";
|
||||||
|
document.getElementById("popup").style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
function saveService() {
|
function saveService() {
|
||||||
|
|
@ -179,11 +173,17 @@ if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST["action"]) && $_POST["
|
||||||
|
|
||||||
fetch("input.php", {
|
fetch("input.php", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: form
|
body: form,
|
||||||
|
credentials: "same-origin"
|
||||||
})
|
})
|
||||||
.then(r => r.text())
|
.then(r => r.text())
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (res === "OK") location.reload();
|
if (res.trim() === "OK") {
|
||||||
|
location.reload();
|
||||||
|
} else {
|
||||||
|
console.log("Server response:", res);
|
||||||
|
alert("Error saving data");
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue