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

Commit 04/08/2025

Browse Source
This commit is contained in:
rdkartono
2025-08-04 13:21:06 +07:00
parent 38882a2b72
commit 8290418100
7 changed files with 379 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
html/assets/js/pocreceiver.js
View File

@@ -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);
};
});

87
html/assets/js/prerecordedbroadcast.js
View File

@@ -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));
}
}
});

184
html/assets/js/setting.js
View File

@@ -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));
}
}
});

8
html/pocreceiver.html
View File

@@ -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>

72
html/prerecordedbroadcast.html
View File

@@ -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>

32
html/setting.html
View File

@@ -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">