From 77d42e98d8c7541223431cffdbadbafaf60bc02f Mon Sep 17 00:00:00 2001
From: devdatt <devdatt.bhatt@dbhatt.org>
Date: Sun, 21 Jun 2026 12:58:37 +0000
Subject: [PATCH] ui update

---
 html/input.php   | 63 ++++++++++++++++++++++++++++--------------------
 html/network.php | 27 +++++++++++----------
 2 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/html/input.php b/html/input.php
index 955e7c9..89ead82 100755
--- a/html/input.php
+++ b/html/input.php
@@ -458,17 +458,11 @@ file_put_contents($jsonFile, json_encode($data, JSON_PRETTY_PRINT));
                 <thead>
                     <tr>
                         <th>No</th>
-                        <th>ID</th>
-                        <th>Service Name</th>
-                        <th>Input</th>
-                        <th>Output</th>
-                        <th>Video</th>
-                        <th>Audio</th>
-                        <th>Resolution</th>
-                        <th>V-Bitrate</th>
-                        <th>A-Bitrate</th>
-                        <th>Volume (dB)</th>
                         <th>Status</th>
+                        <th>Service Name</th>
+                        <th>UDP</th>
+                        <th>Video Info</th>
+                        <th>Audio Info</th>
                         <th>Actions</th>
                     </tr>
                 </thead>
@@ -477,19 +471,36 @@ file_put_contents($jsonFile, json_encode($data, JSON_PRETTY_PRINT));
                     <?php foreach ($data as $row): ?>
                         <tr>
                             <td><?= $i++ ?></td>
-                            <td><?= $row['id'] ?></td>
-                            <td><?= $row["service_name"] ?></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["volume"] ?> dB</td>
-                            <td><?= $row["service"] ?></td>
                             <td>
-                                <div class="action-buttons">
+                                <div><?= $row['id'] ?> </div>
+                                <div><?php if (isset($row["service"]) && $row["service"] === "enable"): ?>
+                                        <span style="color: green;">(Running)</span>
+                                    <?php else: ?>
+                                        <span style="color: red;">(Stopped)</span>
+                                    <?php endif; ?>
+                                </div>
+                            </td>
+                            <td><?= $row["service_name"] ?></td>
+                            <td>
+                                <div><strong>In:</strong> <?= $row["input_udp"] ?></div>
+                                <div><strong>Out:</strong> <?= $row["output_udp"] ?></div>
+                            </td>
+                            <td>
+                                <div style="display: flex; flex-direction: column;">
+                                    <div><strong>Video:</strong> <?= $row["video_format"] ?></div>
+                                    <div><strong>Resolution:</strong> <?= $row["resolution"] ?></div>
+                                    <div><strong>Bitrate:</strong> <?= $row["video_bitrate"] ?> kbps</div>
+                                </div>
+                            </td>
+                            <td>
+                                <div style="display: flex; flex-direction: column;">
+                                    <div><strong>Audio:</strong> <?= $row["audio_format"] ?></div>
+                                    <div><strong>Bitrate:</strong> <?= $row["audio_bitrate"] ?> kbps</div>
+                                    <div><strong>Volume:</strong> <?= $row["volume"] ?> dB</div>
+                                </div>
+                            </td>
+                            <td>
+                                <div class="action-buttons" style="display: flex; flex-direction: column;">
                                     <button class="edit-btn" onclick='openEditPopup(<?= json_encode($row) ?>)'>Edit</button>
                                     <button class="restart-btn" onclick="restartService(<?= $row['id'] ?>)">Restart</button>
                                     <button class="delete-btn" onclick="deleteService(<?= $row['id'] ?>)">Delete</button>
@@ -524,7 +535,7 @@ file_put_contents($jsonFile, json_encode($data, JSON_PRETTY_PRINT));
     </select>
 
     <select id="resolution">
-        <option value="720x480" selected>720x480</option>
+        <option value="720x576" selected>720x576</option>
         <option value="1280x720">1280x720</option>
         <option value="1920x1080">1920x1080</option>
     </select>
@@ -568,7 +579,7 @@ file_put_contents($jsonFile, json_encode($data, JSON_PRETTY_PRINT));
         document.getElementById('out_udp').value = '';
         document.getElementById('video_format').value = 'mpeg2video';
         document.getElementById('audio_format').value = 'mp2';
-        document.getElementById('resolution').value = '720x480';
+        document.getElementById('resolution').value = '720x576';
         document.getElementById('video_bitrate').value = '2048';
         document.getElementById('audio_bitrate').value = '128';
         document.getElementById('volume').value = '0';
@@ -586,7 +597,7 @@ file_put_contents($jsonFile, json_encode($data, JSON_PRETTY_PRINT));
         document.getElementById('out_udp').value = serviceData.output_udp || '';
         document.getElementById('video_format').value = serviceData.video_format || 'mpeg2video';
         document.getElementById('audio_format').value = serviceData.audio_format || 'mp2';
-        document.getElementById('resolution').value = serviceData.resolution || '720x480';
+        document.getElementById('resolution').value = serviceData.resolution || '720x576';
         document.getElementById('video_bitrate').value = serviceData.video_bitrate || '2048';
         document.getElementById('audio_bitrate').value = serviceData.audio_bitrate || '128';
         document.getElementById('volume').value = serviceData.volume || '0';
@@ -646,7 +657,7 @@ file_put_contents($jsonFile, json_encode($data, JSON_PRETTY_PRINT));
             form.submit();
         }
     }
-    
+
     document.getElementById('saveBtn').addEventListener('click', function() {
         const id = document.getElementById('service_id').value;
         const serviceData = {
diff --git a/html/network.php b/html/network.php
index 1d09b62..3bee05a 100755
--- a/html/network.php
+++ b/html/network.php
@@ -28,7 +28,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         if ($action === 'save') {
             // Save configuration
             $config = [
-                'interface' => $interface,
+                'interface_nickname' => $_POST['interface_nickname'] ?? $interface,
                 'method' => $_POST['method'] ?? '',
                 'ip' => $_POST['ip'] ?? '',
                 'gateway' => $_POST['gateway'] ?? '',
@@ -66,14 +66,14 @@ function generate_netplan_config($config)
 
     $netplan_content = "network:\n  version: 2\n  ethernets:\n";
 
-    foreach ($config as $interface => $settings) {
+    foreach ($config as $interface_name => $settings) {
         // Skip virtual interfaces and loopback
         if (
-            strpos($interface, 'enx') === 0 ||
-            strpos($interface, 'docker') === 0 ||
-            strpos($interface, 'br-') === 0 ||
-            strpos($interface, 'veth') === 0 ||
-            $interface === 'lo'
+            strpos($interface_name, 'enx') === 0 ||
+            strpos($interface_name, 'docker') === 0 ||
+            strpos($interface_name, 'br-') === 0 ||
+            strpos($interface_name, 'veth') === 0 ||
+            $interface_name === 'lo'
         ) {
             continue;
         }
@@ -83,7 +83,8 @@ function generate_netplan_config($config)
             continue;
         }
 
-        $netplan_content .= "    $interface:\n";
+        // Use actual interface name for netplan configuration
+        $netplan_content .= "    $interface_name:\n";
 
         switch ($settings['method']) {
             case 'dhcp':
@@ -240,7 +241,7 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
                         <button type="button"
                             class="tab-button <?php echo $selected_interface === $interface['name'] ? 'active' : ''; ?>"
                             data-interface="<?php echo htmlspecialchars($interface['name']); ?>">
-                            <?php echo htmlspecialchars($interface['name']); ?>
+                            <?php echo htmlspecialchars($interface['config']['interface_nickname'] ?? $interface['name']); ?>
                         </button>
                     <?php endforeach; ?>
                 </div>
@@ -265,10 +266,10 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
                             <input type="hidden" name="action" value="save">
 
                             <div class="mb-3">
-                                <label class="form-label">Interface Name</label>
-                                <input type="text" class="form-control" name="interface"
-                                    value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['interface'] ?? $selected_interface); ?>"
-                                    placeholder="Enter interface name">
+                                <label class="form-label">Interface Nickname</label>
+                                <input type="text" class="form-control" name="interface_nickname"
+                                    value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['interface_nickname'] ?? $selected_interface); ?>"
+                                    placeholder="Enter interface nickname">
                             </div>
 
                             <div class="mb-3">