MQTT rework v0.1 + Settings UI improvements ⚙

This commit is contained in:
Jokob-sk
2023-10-14 15:35:09 +11:00
parent a3702fed94
commit 8ad63ba07d
34 changed files with 704 additions and 114 deletions

View File

@@ -72,8 +72,30 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
</h1>
<div class="settingsImported"><?= lang("settings_imported");?> <span id="lastImportedTime"></span></div>
</section>
<div class="content settingswrap" id='accordion_gen'>
<!-- PLACEHOLDER -->
<div class="content settingswrap col-sm-12" id="accordion_gen">
<div class ="settings-group col-sm-12" >
<?= lang("Plugins_type_core");?> (<i class="<?= lang("Plugins_type_core_icon");?>"></i>)
</div>
<div class =" col-sm-12" id="core_content"></div>
<div class ="settings-group col-sm-12" >
<?= lang("Plugins_type_system");?> (<i class="<?= lang("Plugins_type_system_icon");?>"></i>)
</div>
<div class =" col-sm-12" id="system_content"></div>
<div class ="settings-group col-sm-12" >
<?= lang("Plugins_type_scanner");?> (<i class="<?= lang("Plugins_type_scanner_icon");?>"></i>)
</div>
<div class =" col-sm-12" id="scanner_content"></div>
<div class ="settings-group col-sm-12" >
<?= lang("Plugins_type_publisher");?> (<i class="<?= lang("Plugins_type_publisher_icon");?>"></i>)
</div>
<div class =" col-sm-12" id="publisher_content"></div>
</div>
<!-- /.content -->
@@ -96,6 +118,25 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
<script>
// Get plugin type base on prefix
function getPluginType(pluginsData, prefix)
{
result = "core_content"
pluginsData.forEach((plug) => {
if (plug.unique_prefix == prefix ) {
id = plug.plugin_type + "_content"
console.log(id)
result = plug.plugin_type + "_content";
}
});
return result;
}
function getData(){
@@ -103,18 +144,23 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
settingsData = res["data"];
initSettingsPage(settingsData);
$.get('api/plugins.json?nocache=' + Date.now(), function(res) {
pluginsData = res["data"];
initSettingsPage(settingsData, pluginsData);
})
})
}
function initSettingsPage(settingsData){
function initSettingsPage(settingsData, pluginsData){
const settingGroups = [];
const pluginTypes = [];
const settingKeyOfLists = [];
// core groups are the ones not generated by plugins
const settingCoreGroups = ['General'];
// Loop through the settingsArray and collect unique settingGroups
settingsData.forEach((set) => {
if (!settingGroups.includes(set.Group)) {
@@ -125,7 +171,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
console.log(settingGroups);
let headersHtml = '';
let pluginHtml = `
<div class="row table_row">
<div class="table_cell bold">
@@ -140,19 +186,11 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
for (const group of settingGroups) {
let isPlugin = false;
let settingGroupTypeHtml = '';
if (settingCoreGroups.includes(group)) {
settingGroupTypeHtml = '';
} else {
settingGroupTypeHtml = ' (<i class="fa-regular fa-plug fa-sm"></i>) ';
isPlugin = true;
}
headersHtml += `<div class="box panel panel-default">
headerHtml = `<div class="box panel panel-default">
<a data-toggle="collapse" data-parent="#accordion_gen" href="#${group}">
<div class="panel-heading">
<h4 class="panel-title">${getString(group+"_icon")} ${getString(group+"_display_name")} ${settingGroupTypeHtml}</h4>
<h4 class="panel-title">${getString(group+"_icon")} ${getString(group+"_display_name")}</h4>
</div>
</a>
<div id="${group}" data-myid="collapsible" class="panel-collapse collapse ${isIn}">
@@ -163,10 +201,11 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
</div>
`;
isIn = ' '; // open the first panel only by default on page load
}
// generate headers/sections
$('#accordion_gen').html(headersHtml);
// generate headers/sections
$('#'+getPluginType(pluginsData, group)).append(headerHtml);
}
// generate panel content
for (const group of settingGroups) {
@@ -353,7 +392,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
const eventsList = createArray(set['Events']);
if (eventsList.length > 0) {
console.log(eventsList)
// console.log(eventsList)
eventsList.forEach(event => {
eventsHtml += `<span class="input-group-addon pointer"
data-myparam="${codeName}"