From 8290418100ac3d7610d8a206ce40fd0cc065d1a9 Mon Sep 17 00:00:00 2001
From: rdkartono <rdkartono@galva.co.id>
Date: Mon, 4 Aug 2025 13:21:06 +0700
Subject: [PATCH] Commit 04/08/2025

---
 .idea/inspectionProfiles/Project_Default.xml |   1 +
 html/assets/js/pocreceiver.js                |  42 +++++
 html/assets/js/prerecordedbroadcast.js       |  87 +++++++++
 html/assets/js/setting.js                    | 184 +++++++++++++++++++
 html/pocreceiver.html                        |   8 +-
 html/prerecordedbroadcast.html               |  72 ++++----
 html/setting.html                            |  32 ++--
 7 files changed, 379 insertions(+), 47 deletions(-)

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index eefd497..640d31b 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -3,6 +3,7 @@
     <option name="myName" value="Project Default" />
     <inspection_tool class="AiaStyle" enabled="false" level="TYPO" enabled_by_default="false" />
     <inspection_tool class="ClassName" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="FunctionName" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="GrazieInspection" enabled="false" level="GRAMMAR_ERROR" enabled_by_default="false" />
     <inspection_tool class="LanguageDetectionInspection" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
diff --git a/html/assets/js/pocreceiver.js b/html/assets/js/pocreceiver.js
index e69de29..bece86c 100644
--- a/html/assets/js/pocreceiver.js
+++ b/html/assets/js/pocreceiver.js
@@ -0,0 +1,42 @@
+$(document).ready(function() {
+    // Your code here
+    console.log('pocreceiver.js is ready!');
+    const path = window.location.pathname;
+    const ws = new WebSocket('ws://' + window.location.host + path + '/ws');
+
+    ws.onopen = function() {
+        console.log('WebSocket connection opened');
+        $('#indicatorDisconnected').addClass('visually-hidden');
+        $('#indicatorConnected').removeClass('visually-hidden');
+        setInterval(function() {
+            ws.send(JSON.stringify({ command: "getZelloStatus" }));
+        }, 5000);
+    };
+
+    ws.onmessage = function(event) {
+        console.log('WebSocket message received:', event.data);
+        let msg = {};
+        try {
+            msg = JSON.parse(event.data);
+        } catch (e) {
+            console.error('Invalid JSON:', event.data);
+            $('#zelloStatus').text('Status Not Available');
+            return;
+        }
+        if (msg.reply === "getZelloStatus" && msg.data !== undefined && msg.data.length > 0) {
+            const zelloData = msg.data;
+            console.log('Zello Status Data:', zelloData);
+            $('#zelloStatus').text(zelloData.status);
+        }
+    };
+
+    ws.onclose = function() {
+        console.log('WebSocket connection closed');
+        $('#indicatorDisconnected').removeClass('visually-hidden');
+        $('#indicatorConnected').addClass('visually-hidden');
+    };
+
+    ws.onerror = function(error) {
+        console.error('WebSocket error:', error);
+    };
+});
\ No newline at end of file
diff --git a/html/assets/js/prerecordedbroadcast.js b/html/assets/js/prerecordedbroadcast.js
index e69de29..023091d 100644
--- a/html/assets/js/prerecordedbroadcast.js
+++ b/html/assets/js/prerecordedbroadcast.js
@@ -0,0 +1,87 @@
+$(document).ready(function() {
+    // Your code here
+    console.log('precordedbroadcast.js is ready!');
+    const path = window.location.pathname;
+    const ws = new WebSocket('ws://' + window.location.host + path + '/ws');
+    for(let i = 1; i<=8; i++){
+        $(`#fileM${i}`).val('');
+        $(`#playM${i}`).prop('disabled', true);
+        $(`#stopM${i}`).prop('disabled', true);
+    }
+
+    ws.onopen = function() {
+        console.log('WebSocket connection opened');
+        $('#indicatorDisconnected').addClass('visually-hidden');
+        $('#indicatorConnected').removeClass('visually-hidden');
+
+        sendCommand({ command: "getMessageConfig" });
+        setInterval(function() {
+            sendCommand({ command: "getPlaybackStatus" });
+        }, 5000);
+    };
+
+    ws.onmessage = function(event) {
+        console.log('WebSocket message received:', event.data);
+        let msg = {};
+        try {
+            msg = JSON.parse(event.data);
+        } catch (e) {
+            return;
+        }
+        if (msg.reply === "getMessageConfig" && msg.data !== undefined) {
+           const messageConfigdata = msg.data;
+           console.log('Message Config Data:', messageConfigdata);
+           for(let i=1; i<=8; i++){
+            let filetitle = $(`#fileM${i}`);
+            let playButton = $(`#playM${i}`);
+            let stopButton = $(`#stopM${i}`);
+            let fileInput = messageConfigdata[`M${i}`] || '';
+            filetitle.val(fileInput);
+            if (fileInput.length>0){
+                playButton.prop('disabled', false);
+                stopButton.prop('disabled', false);
+                playButton.on('click', function() {
+                    let cmd = {
+                        command: "playMessage",
+                        data: `M${i}`
+                    }
+                    
+                    sendCommand(cmd);
+                });
+                stopButton.on('click', function() {
+                    let cmd = {
+                        command: "stopMessage",
+                        data: `M${i}`
+                    }
+                    sendCommand(cmd);
+                });
+            } else {
+                playButton.prop('disabled', true);
+                stopButton.prop('disabled', true);
+            }
+           }
+            
+        } else if (msg.reply === "getPlaybackStatus" && msg.data !== undefined && msg.data.length > 0) {
+            const playbackData = msg.data;
+            $('#playbackStatus').text(playbackData.status);
+        }
+    };
+
+    ws.onclose = function() {
+        console.log('WebSocket connection closed');
+        $('#indicatorDisconnected').removeClass('visually-hidden');
+        $('#indicatorConnected').addClass('visually-hidden');
+    };
+
+    ws.onerror = function(error) {
+        console.error('WebSocket error:', error);
+    };
+
+    function sendCommand(cmd) {
+        if (ws.readyState === WebSocket.OPEN) {
+            ws.send(cmd);
+        } else {
+            console.error('WebSocket is not open. Unable to send command:', JSON.stringify(cmd));
+        }
+    }
+});
\ No newline at end of file
diff --git a/html/assets/js/setting.js b/html/assets/js/setting.js
index e69de29..3ee2af6 100644
--- a/html/assets/js/setting.js
+++ b/html/assets/js/setting.js
@@ -0,0 +1,184 @@
+$(document).ready(function() {
+    // Your initialization code here
+    console.log('setting.js is ready!');
+    $('#dropdownM1 button').text('');
+    $('#dropdownM2 button').text('');
+    $('#dropdownM3 button').text('');
+    $('#dropdownM4 button').text('');
+    $('#dropdownM5 button').text('');
+    $('#dropdownM6 button').text('');
+    $('#dropdownM7 button').text('');
+    $('#dropdownM8 button').text('');
+
+    $('#dropdownM1 .dropdown-menu').empty();
+    $('#dropdownM2 .dropdown-menu').empty();
+    $('#dropdownM3 .dropdown-menu').empty();
+    $('#dropdownM4 .dropdown-menu').empty();
+    $('#dropdownM5 .dropdown-menu').empty();
+    $('#dropdownM6 .dropdown-menu').empty();
+    $('#dropdownM7 .dropdown-menu').empty();
+    $('#dropdownM8 .dropdown-menu').empty();
+
+    // Connect to WebSocket at "<current html file>/ws"
+    const path = window.location.pathname;
+    const ws = new WebSocket('ws://' + window.location.host + path + '/ws');
+
+    ws.onopen = function() {
+        console.log('WebSocket connection opened');
+        $('#indicatorDisconnected').addClass('visually-hidden');
+        $('#indicatorConnected').removeClass('visually-hidden');
+        sendCommand({ command: "getConfig" });
+
+    };
+
+    ws.onmessage = function(event) {
+        console.log('WebSocket message received:', event.data);
+        let msg = {};
+        try {
+            msg = JSON.parse(event.data);
+        } catch (e) {
+            return;
+        }
+        if (msg.reply === "getConfig" && msg.data !== undefined ) {
+            const configData = msg.data;
+            console.log('Config Data:', configData);
+            $('#zelloUsername').val(configData.ZelloUsername || '');
+            $('#zelloPassword').val(configData.ZelloPassword || '');
+            $('#zelloChannel').val(configData.ZelloChannel || '');
+            if ("community" === configData.ZelloServer) {
+                $('#zellocommunity').prop('checked', true);
+                $('#zelloWorkNetworkName').val('').prop('disabled', true);
+                $('#zelloEnterpriseServerDomain').val('').prop('disabled', true);
+            } else if ("work" === configData.ZelloServer) {
+                $('#zellowork').prop('checked', true);
+                $('#zelloWorkNetworkName').val(configData.ZelloWorkNetworkName || '').prop('disabled', false);
+                $('#zelloEnterpriseServerDomain').val('').prop('disabled', true);
+            } else if ("enterprise" === configData.ZelloServer) {
+                $('#zelloenterprise').prop('checked', true);
+                $('#zelloWorkNetworkName').val('').prop('disabled', true);
+                $('#zelloEnterpriseServerDomain').val(configData.ZelloEnterpriseServerDomain || '').prop('disabled', false);
+            }
+
+            for (let i = 1; i <= 8; i++) {
+                const dropdownMenu = $(`#dropdownM${i} .dropdown-menu`);
+                const dropdownButton = $(`#dropdownM${i} button`);
+                dropdownMenu.empty();
+                const messages = configData[`MessageList`] || [];
+                messages.forEach((msg, idx) => {
+                    const item = $('<a class="dropdown-item" href="#"></a>').text(msg);
+                    item.on('click', function() {
+                        dropdownButton.text(msg);
+                    });
+                    dropdownMenu.append(item);
+                });
+                // Set button text to selected message if present
+                if (configData[`M${i}`]) {
+                    dropdownButton.text(configData[`M${i}`]);
+                }  else {
+                    dropdownButton.text('');
+                }
+            }
+            
+        }
+    };
+
+    ws.onclose = function() {
+        console.log('WebSocket connection closed');
+        $('#indicatorDisconnected').removeClass('visually-hidden');
+        $('#indicatorConnected').addClass('visually-hidden');
+    };
+
+    ws.onerror = function(error) {
+        console.error('WebSocket error:', error);
+    };
+
+    $('#zellocommunity').on('click', function() {
+        $('#zelloWorkNetworkName').val('').prop('disabled', true);
+        $('#zelloEnterpriseServerDomain').val('').prop('disabled', true);
+    });
+    $('#zellowork').on('click', function() {
+        $('#zelloWorkNetworkName').prop('disabled', false);
+        $('#zelloEnterpriseServerDomain').val('').prop('disabled', true);
+    });
+    $('#zelloenterprise').on('click', function() {
+        $('#zelloWorkNetworkName').val('').prop('disabled', true);
+        $('#zelloEnterpriseServerDomain').prop('disabled', false);
+    });
+
+
+    $('#btnApplyZello').on('click', function() {
+        if (ws.readyState === WebSocket.OPEN) {
+            let data = {
+                command: "setZelloConfig",
+                ZelloUsername: $('#zelloUsername').val(),
+                ZelloPassword: $('#zelloPassword').val(),
+                ZelloChannel: $('#zelloChannel').val(),
+                ZelloServer: $('#zellocommunity').is(':checked') ? 'community' :
+                             $('#zellowork').is(':checked') ? 'work' :
+                             $('#zelloenterprise').is(':checked') ? 'enterprise' : ''
+            };
+            if ($('#zellowork').is(':checked')) {
+                data.ZelloWorkNetworkName = $('#zelloWorkNetworkName').val();
+            }
+            if ($('#zelloenterprise').is(':checked')) {
+                data.ZelloEnterpriseServerDomain = $('#zelloEnterpriseServerDomain').val();
+            }
+            sendCommand(data);
+        } else {
+            console.warn('WebSocket is not open.');
+        }
+    });
+    $('#btnApplyMessage').on('click', function() {
+        if (ws.readyState === WebSocket.OPEN) {
+            let data = {
+                command: "setMessageConfig",
+                M1: $('#dropdownM1 button').text(),
+                M2: $('#dropdownM2 button').text(),
+                M3: $('#dropdownM3 button').text(),
+                M4: $('#dropdownM4 button').text(),
+                M5: $('#dropdownM5 button').text(),
+                M6: $('#dropdownM6 button').text(),
+                M7: $('#dropdownM7 button').text(),
+                M8: $('#dropdownM8 button').text()
+            };
+            sendCommand(data);
+        } else {
+            console.warn('WebSocket is not open.');
+        }
+    });
+
+    $('#btnUploadContent').on('click', function() {
+        const fileInput = document.getElementById('chosenFile');
+        if (!fileInput || !fileInput.files.length) {
+            alert('Please select a file to upload.');
+            return;
+        }
+        const file = fileInput.files[0];
+        const formData = new FormData();
+        formData.append('file', file);
+
+        fetch(window.location.pathname + '/upload', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => {
+            if (response.ok) {
+                alert('File uploaded successfully.');
+            } else {
+                alert('File upload failed.');
+            }
+        })
+        .catch(error => {
+            console.error('Upload error:', error);
+            alert('An error occurred during upload.');
+        });
+    });
+
+    function sendCommand(cmd) {
+        if (ws.readyState === WebSocket.OPEN) {
+            ws.send(cmd);
+        } else {
+            console.error('WebSocket is not open. Unable to send command:', JSON.stringify(cmd));
+        }
+    }
+});
\ No newline at end of file
diff --git a/html/pocreceiver.html b/html/pocreceiver.html
index 6070e5a..c063d53 100644
--- a/html/pocreceiver.html
+++ b/html/pocreceiver.html
@@ -20,7 +20,13 @@
                     <li class="nav-item"><a class="nav-link active" href="#">POC Receiver</a></li>
                     <li class="nav-item"><a class="nav-link" href="prerecordedbroadcast.html">Pre-Recorded Broadcast</a></li>
                     <li class="nav-item"><a class="nav-link" href="setting.html">Setting and Content</a></li>
-                </ul><a class="btn btn-primary" role="button" href="index.html">Logout</a>
+                </ul><a class="btn btn-primary" role="button" href="index.html">Logout<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorDisconnected" style="color: var(--bs-danger);width: 26px;height: 26px;font-weight: bold;">
+                        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
+                        <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path>
+                    </svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorConnected" style="color: var(--bs-success);width: 26px;height: 26px;font-weight: bold;">
+                        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
+                        <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"></path>
+                    </svg></a>
             </div>
         </div>
     </nav>
diff --git a/html/prerecordedbroadcast.html b/html/prerecordedbroadcast.html
index b760770..00b7eb4 100644
--- a/html/prerecordedbroadcast.html
+++ b/html/prerecordedbroadcast.html
@@ -20,7 +20,13 @@
                     <li class="nav-item"><a class="nav-link" href="pocreceiver.html">POC Receiver</a></li>
                     <li class="nav-item"><a class="nav-link active" href="#">Pre-Recorded Broadcast</a></li>
                     <li class="nav-item"><a class="nav-link" href="setting.html">Setting and Content</a></li>
-                </ul><a class="btn btn-primary" role="button" href="index.html">Logout</a>
+                </ul><a class="btn btn-primary" role="button" href="index.html">Logout<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorDisconnected" style="color: var(--bs-danger);width: 26px;height: 26px;font-weight: bold;">
+                        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
+                        <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path>
+                    </svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorConnected" style="color: var(--bs-success);width: 26px;height: 26px;font-weight: bold;">
+                        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
+                        <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"></path>
+                    </svg></a>
             </div>
         </div>
     </nav>
@@ -35,24 +41,24 @@
     <div class="row">
         <div class="col">
             <div class="card">
-                <div class="card-body">
+                <div class="card-body" id="cardM1">
                     <h4 class="d-flex justify-content-center card-title">Message1</h4>
-                    <p class="text-start card-text">File 01</p>
+                    <p class="text-start card-text" id="fileM1">File 01</p>
                     <div class="row">
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="playM1" type="button">Play</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="stopM1" type="button">Stop</button></div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col">
             <div class="card">
-                <div class="card-body">
+                <div class="card-body" id="cardM2">
                     <h4 class="d-flex justify-content-center card-title">Message2</h4>
-                    <p class="text-start card-text">File 02</p>
+                    <p class="text-start card-text" id="fileM2">File 02</p>
                     <div class="row">
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="playM2" type="button">Play</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="stopM2" type="button">Stop</button></div>
                     </div>
                 </div>
             </div>
@@ -61,24 +67,24 @@
     <div class="row">
         <div class="col">
             <div class="card">
-                <div class="card-body">
+                <div class="card-body" id="cardM3">
                     <h4 class="d-flex justify-content-center card-title">Message3</h4>
-                    <p class="text-start card-text">File 03</p>
+                    <p class="text-start card-text" id="fileM3">File 03</p>
                     <div class="row">
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="playM3" type="button">Play</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="stopM3" type="button">Stop</button></div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col">
             <div class="card">
-                <div class="card-body">
+                <div class="card-body" id="cardM4">
                     <h4 class="d-flex justify-content-center card-title">Message4</h4>
-                    <p class="text-start card-text">File 04</p>
+                    <p class="text-start card-text" id="fileM4">File 04</p>
                     <div class="row">
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="playM4" type="button">Play</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="stopM4" type="button">Stop</button></div>
                     </div>
                 </div>
             </div>
@@ -87,24 +93,24 @@
     <div class="row">
         <div class="col">
             <div class="card">
-                <div class="card-body">
+                <div class="card-body" id="cardM5">
                     <h4 class="d-flex justify-content-center card-title">Message5</h4>
-                    <p class="text-start card-text">File 05</p>
+                    <p class="text-start card-text" id="fileM5">File 05</p>
                     <div class="row">
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="playM5" type="button">Play</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="stopM5" type="button">Stop</button></div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col">
             <div class="card">
-                <div class="card-body">
+                <div class="card-body" id="cardM6">
                     <h4 class="d-flex justify-content-center card-title">Message6</h4>
-                    <p class="text-start card-text">File 06</p>
+                    <p class="text-start card-text" id="fileM6">File 06</p>
                     <div class="row">
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="playM6" type="button">Play</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="stopM6" type="button">Stop</button></div>
                     </div>
                 </div>
             </div>
@@ -113,24 +119,24 @@
     <div class="row">
         <div class="col">
             <div class="card">
-                <div class="card-body">
+                <div class="card-body" id="cardM7">
                     <h4 class="d-flex justify-content-center card-title">Message7</h4>
-                    <p class="text-start card-text">File 07</p>
+                    <p class="text-start card-text" id="fileM7">File 07</p>
                     <div class="row">
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="playM7" type="button">Play</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="stopM7" type="button">Stop</button></div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col">
             <div class="card">
-                <div class="card-body">
+                <div class="card-body" id="cardM8">
                     <h4 class="d-flex justify-content-center card-title">Message8</h4>
-                    <p class="text-start card-text">File 08</p>
+                    <p class="text-start card-text" id="fileM8">File 08</p>
                     <div class="row">
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
-                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="playM8" type="button">Play</button></div>
+                        <div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" id="stopM8" type="button">Stop</button></div>
                     </div>
                 </div>
             </div>
diff --git a/html/setting.html b/html/setting.html
index 6cc4e79..9353efa 100644
--- a/html/setting.html
+++ b/html/setting.html
@@ -20,7 +20,13 @@
                     <li class="nav-item"><a class="nav-link" href="pocreceiver.html">POC Receiver</a></li>
                     <li class="nav-item"><a class="nav-link" href="prerecordedbroadcast.html">Pre-Recorded Broadcast</a></li>
                     <li class="nav-item"><a class="nav-link active" href="#">Setting and Content</a></li>
-                </ul><a class="btn btn-primary" role="button" href="index.html">Logout</a>
+                </ul><a class="btn btn-primary" role="button" href="index.html">Logout<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorDisconnected" style="color: var(--bs-danger);width: 26px;height: 26px;font-weight: bold;">
+                        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
+                        <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path>
+                    </svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="visually-hidden" id="indicatorConnected" style="color: var(--bs-success);width: 26px;height: 26px;font-weight: bold;">
+                        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
+                        <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"></path>
+                    </svg></a>
             </div>
         </div>
     </nav>
@@ -52,17 +58,17 @@
             </div>
             <div class="col">
                 <div class="row">
-                    <div class="form-check"><input class="form-check-input" type="radio" id="zellocommunity" name="zellotype"><label class="form-check-label" for="formCheck-1">Community</label></div>
+                    <div class="form-check"><input class="form-check-input" type="radio" id="zellocommunity" name="zellotype"><label class="form-check-label" for="zellocommunity">Community</label></div>
                 </div>
                 <div class="row">
                     <div class="row">
-                        <div class="form-check"><input class="form-check-input" type="radio" id="zellowork" name="zellotype"><label class="form-check-label" for="formCheck-2">Work</label></div>
+                        <div class="form-check"><input class="form-check-input" type="radio" id="zellowork" name="zellotype"><label class="form-check-label" for="zellowork">Work</label></div>
                     </div>
                     <div class="row"><input class="w-100" type="text" id="zelloWorkNetworkName" placeholder="Network Name"></div>
                 </div>
                 <div class="row">
                     <div class="row">
-                        <div class="form-check"><input class="form-check-input" type="radio" id="zelloenterprise" name="zellotype"><label class="form-check-label" for="formCheck-3">Enterprise Server</label></div>
+                        <div class="form-check"><input class="form-check-input" type="radio" id="zelloenterprise" name="zellotype"><label class="form-check-label" for="zelloenterprise">Enterprise Server</label></div>
                     </div>
                     <div class="row"><input class="w-100" type="text" id="zelloEnterpriseServerDomain" placeholder="Server Domain"></div>
                 </div>
@@ -81,7 +87,7 @@
                 <p class="d-flex w-100 h-100 align-items-center">Message1 (M1)</p>
             </div>
             <div class="col">
-                <div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
+                <div class="dropdown w-100" id="dropdownM1"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
                     <div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                 </div>
             </div>
@@ -91,7 +97,7 @@
                 <p class="d-flex w-100 h-100 align-items-center">Message2 (M2)</p>
             </div>
             <div class="col">
-                <div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
+                <div class="dropdown w-100" id="dropdownM2"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
                     <div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                 </div>
             </div>
@@ -101,7 +107,7 @@
                 <p class="d-flex w-100 h-100 align-items-center">Message3 (M3)</p>
             </div>
             <div class="col">
-                <div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
+                <div class="dropdown w-100" id="dropdownM3"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
                     <div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                 </div>
             </div>
@@ -111,7 +117,7 @@
                 <p class="d-flex w-100 h-100 align-items-center">Message4 (M4)</p>
             </div>
             <div class="col">
-                <div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
+                <div class="dropdown w-100" id="dropdownM4"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
                     <div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                 </div>
             </div>
@@ -121,7 +127,7 @@
                 <p class="d-flex w-100 h-100 align-items-center">Message5 (M5)</p>
             </div>
             <div class="col">
-                <div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
+                <div class="dropdown w-100" id="dropdownM5"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
                     <div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                 </div>
             </div>
@@ -131,7 +137,7 @@
                 <p class="d-flex w-100 h-100 align-items-center">Message6 (M6)</p>
             </div>
             <div class="col">
-                <div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
+                <div class="dropdown w-100" id="dropdownM6"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
                     <div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                 </div>
             </div>
@@ -141,7 +147,7 @@
                 <p class="d-flex w-100 h-100 align-items-center">Message7 (M7)</p>
             </div>
             <div class="col">
-                <div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
+                <div class="dropdown w-100" id="dropdownM7"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
                     <div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                 </div>
             </div>
@@ -151,7 +157,7 @@
                 <p class="d-flex w-100 h-100 align-items-center">Message8 (M8)</p>
             </div>
             <div class="col">
-                <div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
+                <div class="dropdown w-100" id="dropdownM8"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
                     <div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                 </div>
             </div>
@@ -162,7 +168,7 @@
         <div class="row w-100">
             <h1 class="text-center">Content Upload</h1>
         </div>
-        <div class="row"><input type="file"></div>
+        <div class="row"><input type="file" id="chosenFile"></div>
         <div class="row">
             <div class="col">
                 <div class="progress h-100" id="contentUploadProgress">