cphipps/NetAlertX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settings filter v0.3 🔍

Browse Source
This commit is contained in:
jokob-sk
2024-04-25 18:05:16 +10:00
parent 294518b146
commit c11deeb57f
3 changed files with 58 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
front/css/app.css
View File

@@ -910,27 +910,45 @@ input[readonly] {
.settings-sticky-bottom-section { .settings-sticky-bottom-section {
position: fixed; position: fixed;
z-index: 999; z-index: 999;
background-color: #2d2d2d; background-color: #5B5B66;
opacity: 0.8; /* opacity: 0.8; */
bottom: 30px; bottom: 30px;
border-radius: 5px; border-radius: 5px;
margin:1px;
border-width: 1px;
border-style: solid;
border-color: inherit;
width: 87%;
} }
.settings-sticky-bottom-section:hover { .settings-sticky-bottom-section:hover {
border-color: #000;
opacity: 1;
} }
.clear-filter .clear-filter
{ {
opacity: 0.5; opacity: 0.5;
cursor: pointer; cursor: pointer;
width: 14px;
position: absolute;
right: -6px;
top: 6px;
} }
.clear-filter:hover .clear-filter:hover
{ {
opacity: 1; opacity: 1;
} }
.saveSettingsWrapper button
{
width:70%;
margin-top:20px;
margin-left:15%;
margin-bottom:20px;
}
/* ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- */
/* Devices page */ /* Devices page */
/* ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- */

9
front/js/settings_utils.js
View File

@@ -260,6 +260,12 @@ function initListInteractionOptions(selectorId) {
// ------------------------------------------------------------------- // -------------------------------------------------------------------
// Function to filter rows based on input text // Function to filter rows based on input text
function filterRows(inputText) { function filterRows(inputText) {
if(!inputText)
{
inputText = ''
}
$('.table_row').each(function() { $('.table_row').each(function() {
// Check if the row id ends with '__metadata' // Check if the row id ends with '__metadata'
var idAttribute = $(this).attr('id'); var idAttribute = $(this).attr('id');
@@ -283,6 +289,9 @@ setTimeout(() => {
// Event listener for input change // Event listener for input change
$('#settingsSearch').on('input', function() { $('#settingsSearch').on('input', function() {
var searchText = $(this).val(); var searchText = $(this).val();
// hide the setting overview dashboard
$('#settingsOverview').collapse('hide');
filterRows(searchText); filterRows(searchText);
}); });

46
front/settings.php
View File

@@ -92,14 +92,19 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
</section> </section>
<section class="content-header"> <section class="content-header">
<div id="settingsOverview" class ="bg-white color-palette box panel panel-default col-sm-12 box-default box-info" > <div class ="bg-white color-palette box panel panel-default col-sm-12 box-default box-info panel panel-default panel-title" >
<!-- Settings imported time --> <!-- Settings imported time -->
<div class ="settings-group col-sm-12">
<i class="<?= lang("settings_enabled_icon");?>"></i> <?= lang("settings_enabled");?>
</div>
<div class =" col-sm-12" id=""></div>
<a data-toggle="collapse" href="#settingsOverview">
<div class ="settings-group col-sm-12 panel-heading panel-title">
<i class="<?= lang("settings_enabled_icon");?>"></i> <?= lang("settings_enabled");?>
</div>
</a>
<div id="settingsOverview" class="panel-collapse collapse in">
<div class="panel-body"></div>
<div class =" col-sm-12" id=""></div>
</div>
</section> </section>
@@ -147,26 +152,27 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
<!-- /.content --> <!-- /.content -->
<section class=" settings-sticky-bottom-section col-sm-12"> <section class=" settings-sticky-bottom-section col-sm-10">
<div class="col-sm-5 settingsSearchWrap form-group has-success bg-white color-palette "> <div class="col-sm-8 settingsSearchWrap form-group has-success bg-white color-palette ">
<div class ="col-sm-12"> <div class ="col-sm-8">
<i class="fa-solid fa-filter"></i> <?= lang("Gen_Filter");?> <i class="fa-solid fa-filter"></i> <?= lang("Gen_Filter");?>
</div> </div>
<div class ="col-sm-12"> <div class ="col-sm-12">
<div class ="col-sm-11">
<input type="text" id="settingsSearch" class="form-control input-sm col-sm-7" placeholder="Filter Settings..."> <input type="text" id="settingsSearch" class="form-control input-sm col-sm-12" placeholder="Filter Settings...">
</div> <div class="clear-filter ">
<div class ="col-sm-1 clear-filter"> <i class="fa-solid fa-circle-xmark" onclick="$('#settingsSearch').val('');filterRows();$('#settingsSearch').focus()"></i>
<i class="fa-solid fa-circle-xmark" onclick="$('#settingsSearch').val('')"></i> </div>
</div>
</div> </div>
</div> </div>
<div class="col-sm-5"> <div class="col-sm-4 saveSettingsWrapper">
<button type="button" class="center top-margin btn btn-primary btn-default pa-btn bg-green" id="save" onclick="saveSettings()"><?= lang('DevDetail_button_Save');?></button> <button type="button" class=" btn btn-primary btn-default pa-btn bg-green" id="save" onclick="saveSettings()"><?= lang('DevDetail_button_Save');?></button>
</div> </div>
<div id="result"></div> <div id="result"></div>
</section> </section>
</div> </div>
@@ -260,7 +266,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
index++; index++;
}); });
$('#settingsOverview').append(overviewSections_html); $('#settingsOverview .panel-body').append(overviewSections_html);
// Display warning // Display warning
if(schedulesAreSynchronized(enabledDeviceScanners, pluginsData) == false) if(schedulesAreSynchronized(enabledDeviceScanners, pluginsData) == false)