rdkartono/EWS_POC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Commit 12/08/2025

Browse Source
This commit is contained in:
rdkartono
2025-08-12 09:44:11 +07:00
parent f4c9fa8730
commit 60e8524c8f
33 changed files with 385 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
html/webpage/assets/bootstrap/css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
html/webpage/assets/bootstrap/js/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

57
html/webpage/assets/css/Navbar-With-Button-icons.css Normal file
View File

@@ -0,0 +1,57 @@
.bs-icon {
--bs-icon-size: .75rem;
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: var(--bs-icon-size);
width: calc(var(--bs-icon-size) * 2);
height: calc(var(--bs-icon-size) * 2);
color: var(--bs-primary);
}
.bs-icon-xs {
--bs-icon-size: 1rem;
width: calc(var(--bs-icon-size) * 1.5);
height: calc(var(--bs-icon-size) * 1.5);
}
.bs-icon-sm {
--bs-icon-size: 1rem;
}
.bs-icon-md {
--bs-icon-size: 1.5rem;
}
.bs-icon-lg {
--bs-icon-size: 2rem;
}
.bs-icon-xl {
--bs-icon-size: 2.5rem;
}
.bs-icon.bs-icon-primary {
color: var(--bs-white);
background: var(--bs-primary);
}
.bs-icon.bs-icon-primary-light {
color: var(--bs-primary);
background: rgba(var(--bs-primary-rgb), .2);
}
.bs-icon.bs-icon-semi-white {
color: var(--bs-primary);
background: rgba(255, 255, 255, .5);
}
.bs-icon.bs-icon-rounded {
border-radius: .5rem;
}
.bs-icon.bs-icon-circle {
border-radius: 50%;
}

2
html/webpage/assets/js/jquery-3.7.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

50
html/webpage/assets/js/pocreceiver.js Normal file
View File

@@ -0,0 +1,50 @@
$(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() {
sendCommand({ command: "getZelloStatus" });
}, 1000);
};
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);
}
};
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(command) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(command));
} else {
console.error('WebSocket is not open. Unable to send command:', command);
}
}
});

114
html/webpage/assets/js/prerecordedbroadcast.js Normal file
View File

@@ -0,0 +1,114 @@
$(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" });
}, 1000); // every second
};
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 && msg.reply.length > 0 && msg.data && msg.data.length > 0) {
switch (msg.reply) {
case "playMessage":
if (msg.data !== "success")
{alert(msg.data);}
else{
$('#playbackStatus').text('Playback started');
}
break;
case "stopMessage":
if (msg.data !== "success")
{alert(msg.data);}
else{
$('#playbackStatus').text('Playback stopped');
}
break;
case "getMessageConfig":
const messageConfigdata = JSON.parse(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}`];
if (fileInput && fileInput.length > 0) {
filetitle.text(fileInput);
playButton.prop('disabled', false);
stopButton.prop('disabled', false);
playButton.removeClass('invisible');
stopButton.removeClass('invisible');
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 {
filetitle.text('Not configured');
playButton.addClass('invisible');
stopButton.addClass('invisible');
}
}
break;
case "getPlaybackStatus":
$('#playbackStatus').text(msg.data);
break;
}
}
};
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(JSON.stringify(cmd));
} else {
console.error('WebSocket is not open. Unable to send command:', JSON.stringify(cmd));
}
}
});

212
html/webpage/assets/js/setting.js Normal file
View File

@@ -0,0 +1,212 @@
$(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 && msg.reply.length > 0) {
switch (msg.reply) {
case "getConfig":
const configData = JSON.parse(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('');
}
}
break;
case "setZelloConfig":
if (msg.data === "success") {
alert('Zello configuration updated successfully.');
} else {
alert('Failed to update Zello configuration: ' + msg.data);
}
sendCommand({ command: "getConfig" }); // Refresh config after update
break;
case "setMessageConfig":
if (msg.data === "success") {
alert('Message configuration updated successfully.');
} else {
alert('Failed to update Message configuration: ' + msg.data);
}
sendCommand({ command: "getConfig" }); // Refresh config after update
break;
}
}
};
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 xx = {
command: "setZelloConfig"
};
let data = {
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();
}
xx.data = JSON.stringify(data);
sendCommand(xx);
} else {
console.warn('WebSocket is not open.');
}
});
$('#btnApplyMessage').on('click', function () {
if (ws.readyState === WebSocket.OPEN) {
let data = {
command: "setMessageConfig",
data: JSON.stringify({
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.');
sendCommand({ command: "getConfig" }); // Refresh config after upload
} 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(JSON.stringify(cmd));
} else {
console.error('WebSocket is not open. Unable to send command:', JSON.stringify(cmd));
}
}
});

43
html/webpage/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>EWS_POC</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Navbar-With-Button-icons.css">
</head>
<body>
<section class="position-relative py-4 py-xl-5">
<div class="container">
<div class="row mb-5">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<h2>Log in</h2>
<p>Early Warning System Receiver</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="card mb-5">
<div class="card-body d-flex flex-column align-items-center">
<div class="bs-icon-xl bs-icon-circle bs-icon-primary my-4 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-person">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664z"></path>
</svg></div>
<form class="text-center" method="post">
<div class="mb-3"><input class="form-control" type="text" name="username" placeholder="Username"></div>
<div class="mb-3"><input class="form-control" type="password" name="password" placeholder="Password"></div>
<div class="mb-3"><button class="btn btn-primary w-100 d-block" type="submit">Login</button></div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
</body>
</html>

46
html/webpage/pocreceiver.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>EWS_POC</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Navbar-With-Button-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-md bg-body py-3">
<div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
<path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
<path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
</svg></span><span>Early Warning System Receiver</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav me-auto">
<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<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>
<div class="container">
<div class="row">
<h1 class="text-center">Zello Status</h1>
</div>
<div class="row">
<p class="d-flex justify-content-center" id="zelloStatus">Paragraph</p>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/pocreceiver.js"></script>
</body>
</html>

150
html/webpage/prerecordedbroadcast.html Normal file
View File

@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>EWS_POC</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Navbar-With-Button-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-md bg-body py-3">
<div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
<path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
<path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
</svg></span><span>Early Warning System Receiver</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav me-auto">
<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<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>
<div class="container">
<div class="row w-100">
<h1 class="text-center">Playback Status</h1>
</div>
<div class="row text-center w-100 h-100">
<p id="playbackStatus">No Status</p>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body" id="cardM1">
<h4 class="d-flex justify-content-center card-title">Message1</h4>
<p class="d-flex justify-content-center 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" 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" id="cardM2">
<h4 class="d-flex justify-content-center card-title">Message2</h4>
<p class="d-flex justify-content-center 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" 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>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body" id="cardM3">
<h4 class="d-flex justify-content-center card-title">Message3</h4>
<p class="d-flex justify-content-center 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" 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" id="cardM4">
<h4 class="d-flex justify-content-center card-title">Message4</h4>
<p class="d-flex justify-content-center 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" 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>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body" id="cardM5">
<h4 class="d-flex justify-content-center card-title">Message5</h4>
<p class="d-flex justify-content-center 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" 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" id="cardM6">
<h4 class="d-flex justify-content-center card-title">Message6</h4>
<p class="d-flex justify-content-center 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" 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>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body" id="cardM7">
<h4 class="d-flex justify-content-center card-title">Message7</h4>
<p class="d-flex justify-content-center 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" 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" id="cardM8">
<h4 class="d-flex justify-content-center card-title">Message8</h4>
<p class="d-flex justify-content-center 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" 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>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/prerecordedbroadcast.js"></script>
</body>
</html>

186
html/webpage/setting.html Normal file
View File

@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>EWS_POC</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Navbar-With-Button-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-md bg-body py-3">
<div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
<path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
<path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
</svg></span><span>Early Warning System Receiver</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav me-auto">
<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<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>
<div class="container">
<div class="row">
<h1 class="text-center w-100">Zello Client</h1>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Username</p>
</div>
<div class="col"><input class="w-100" type="text" id="zelloUsername"></div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Password</p>
</div>
<div class="col"><input class="w-100" type="password" id="zelloPassword"></div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Channel</p>
</div>
<div class="col"><input class="w-100" type="text" id="zelloChannel"></div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Server Type</p>
</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="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="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="zelloenterprise">Enterprise Server</label></div>
</div>
<div class="row"><input class="w-100" type="text" id="zelloEnterpriseServerDomain" placeholder="Server Domain"></div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center"><button class="btn btn-primary w-75 mt-2 mb-2" id="btnApplyZello" type="button">Apply Zello Setting</button></div>
</div>
<div class="container">
<div class="row">
<div class="col w-100">
<h1 class="text-center">Pre-Recorded Setting</h1>
</div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message1 (M1)</p>
</div>
<div class="col">
<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>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message2 (M2)</p>
</div>
<div class="col">
<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>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message3 (M3)</p>
</div>
<div class="col">
<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>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message4 (M4)</p>
</div>
<div class="col">
<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>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message5 (M5)</p>
</div>
<div class="col">
<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>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message6 (M6)</p>
</div>
<div class="col">
<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>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message7 (M7)</p>
</div>
<div class="col">
<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>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message8 (M8)</p>
</div>
<div class="col">
<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>
</div>
<div class="row d-flex justify-content-center"><button class="btn btn-primary w-75 mt-2 mb-2" id="btnApplyMessage" type="button">Apply Message Setting</button></div>
</div>
<div class="container">
<div class="row w-100">
<h1 class="text-center">Content Upload</h1>
</div>
<div class="row"><input type="file" id="chosenFile"></div>
<div class="row">
<div class="col">
<div class="progress h-100" id="contentUploadProgress">
<div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
</div>
</div>
<div class="col-2"><button class="btn btn-primary mt-2 mb-2" id="btnUploadContent" type="button">Upload</button></div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/setting.js"></script>
</body>
</html>