OpenIPC
/
firmware
mirror of https://github.com/OpenIPC/firmware.git
1
0
Fork 0
Code Activity

wifibroadcast-ng: simplify setup page

pull/1696/head
viktorxda 2025-01-31 08:16:44 +01:00
parent 3d6d14e699
commit 2608e66f86
2 changed files with 34 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
general/package/wifibroadcast-ng/www/index.html
View File

@ -78,12 +78,12 @@
<body>
<header>
<img src="logo.svg" width="20%">
<img src="logo.svg" width="10%">
</header>
<div class="container">
<section>
<img id="camera-preview" src="/mjpeg" alt="Stream" />
<video poster="/mjpeg" style="background:url(stream.svg); background-size:cover; width:100%; max-width:1200px;"></video>
</section>
<section class="form-section">
@ -233,73 +233,58 @@
});
}
function populateFormFields() {
const populate = (data, formPrefix) => {
Object.keys(data).forEach((section) => {
Object.keys(data[section]).forEach((key) => {
const field = document.querySelector(`[name="${formPrefix}.${section}.${key}"]`);
if (field) {
function syncForm(data, formPrefix, mode) {
Object.keys(data).forEach((section) => {
Object.keys(data[section]).forEach((key) => {
const field = document.querySelector(`[name="${formPrefix}.${section}.${key}"]`);
if (field) {
if (mode === "setup") {
field.value = data[section][key];
}
});
});
};
if (configData.majestic) {
populate(configData.majestic, 'majestic');
}
if (configData.wfb) {
populate(configData.wfb, 'wfb');
}
}
function updateData() {
const update = (data, formPrefix) => {
Object.keys(data).forEach((section) => {
Object.keys(data[section]).forEach((key) => {
const field = document.querySelector(`[name="${formPrefix}.${section}.${key}"]`);
if (field) {
} else if (mode === "update") {
data[section][key] = field.value;
}
});
}
});
};
update(configData.majestic, 'majestic');
update(configData.wfb, 'wfb');
});
}
document.getElementById('apply-majestic-button').addEventListener('click', () => {
function executeDelay(button, command) {
button.disabled = true;
runCommand(command);
setTimeout(() => {
button.disabled = false;
location.reload();
}, 1000);
}
document.getElementById('apply-majestic-button').addEventListener('click', function() {
if (configData.majestic) {
updateData();
syncForm(configData.majestic, 'majestic', "update");
uploadYAML(configData.majestic, '/etc/majestic.yaml');
runCommand('killall -1 majestic');
setTimeout(() => location.reload(), 1000);
executeDelay(this, 'killall -1 majestic');
}
});
document.getElementById('apply-wfb-button').addEventListener('click', () => {
document.getElementById('apply-wfb-button').addEventListener('click', function() {
if (configData.wfb) {
updateData();
syncForm(configData.wfb, 'wfb', "update");
uploadYAML(configData.wfb, '/etc/wfb.yaml');
runCommand('wifibroadcast restart');
setTimeout(() => location.reload(), 1000);
executeDelay(this, 'wifibroadcast restart');
}
});
document.getElementById('reset-button').addEventListener('click', () => {
runCommand('wifibroadcast reset');
setTimeout(() => location.reload(), 1000);
document.getElementById('reset-button').addEventListener('click', function() {
executeDelay(this, 'wifibroadcast reset');
});
loadYAML('/etc/majestic.yaml', (data) => {
configData.majestic = data;
populateFormFields();
syncForm(configData.majestic, 'majestic', "setup");
});
loadYAML('/etc/wfb.yaml', (data) => {
configData.wfb = data;
populateFormFields();
syncForm(configData.wfb, 'wfb', "setup");
});
</script>

4
general/package/wifibroadcast-ng/www/stream.svg 100644
View File

@ -0,0 +1,4 @@
<svg width="400" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" fill="#ddd">
<path d="M99.806 0C44.912 0 0 44.912 0 99.806s44.912 99.806 99.806 99.806S199.612 154.7 199.612 99.806 154.698 0 99.806 0m0 6.656c24.58 0 47.018 9.654 63.708 25.354l-25.47 25.264 -7.298 -18.678c-0.332 -0.998 -1.664 -1.996 -2.994 -1.996H72.526q-2 -0.002 -2.994 1.996l-8.32 21.29H42.25a11.93 11.93 0 0 0 -11.978 11.978v65.87A11.93 11.93 0 0 0 42.25 149.708h2.596L31.49 162.956c-15.394 -16.632 -24.834 -38.842 -24.834 -63.15 0 -51.232 41.918 -93.15 93.15 -93.15m23.286 93.15c0 12.974 -10.312 23.286 -23.286 23.286 -5.286 0 -10.132 -1.712 -14.02 -4.62l32.798 -32.53a23.3 23.3 0 0 1 4.506 13.862m-46.574 0c0 -12.974 10.312 -23.286 23.286 -23.286 5.33 0 10.202 1.74 14.106 4.688l-32.818 32.552a23.28 23.28 0 0 1 -4.574 -13.952m42.144 -23.314a29.86 29.86 0 0 0 -18.856 -6.628 29.82 29.82 0 0 0 -29.942 29.942c0 7.084 2.42 13.558 6.476 18.668l-24.786 24.58H41.918a5.252 5.252 0 0 1 -5.322 -5.322V71.86a5.252 5.252 0 0 1 5.322 -5.322h21.29c1.332 0 2.662 -0.998 2.994 -1.996l8.32 -21.296h50.564l7.568 19.368zm-37.626 46.694a29.86 29.86 0 0 0 18.772 6.56 29.82 29.82 0 0 0 29.942 -29.942c0 -7.044 -2.394 -13.484 -6.408 -18.58l14.81 -14.686h19.214a5.252 5.252 0 0 1 5.322 5.322v65.87a5.252 5.252 0 0 1 -5.322 5.322H61zm18.772 69.77c-24.542 0 -46.948 -9.622 -63.628 -25.278l18.116 -17.97h103.4c6.656 0 11.978 -5.322 12.308 -11.978V71.86a11.925 11.925 0 0 0 -11.978 -11.978h-13.166l23.342 -23.15c15.346 16.624 24.758 38.804 24.758 63.074 0 51.232 -41.918 93.15 -93.15 93.15"/>
<path d="M149.708 73.188c-3.662 0 -6.656 2.994 -6.656 6.656S146.046 86.5 149.708 86.5s6.656 -2.994 6.656 -6.656 -2.994 -6.656 -6.656 -6.656"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB