vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-07 09:36:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

🎨 Device tiles setting

Browse Source
This commit is contained in:
jokob-sk
2024-06-16 12:23:14 +10:00
parent 5302673a96
commit 3b7cbba32b
20 changed files with 258 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/css/app.css
View File

@@ -1106,6 +1106,10 @@ input[readonly] {
height: 1.5em !important;
}
#TileCards .tile .inner
{
color: white;
}
#dropdownIcon li svg, #dropdownIcon li i{
height: 1.5em !important;

156
front/devices.php
View File

@@ -42,77 +42,7 @@
<!-- Tile toggle cards ------------------------------------------------------- -->
<div class="row" id="TileCards">
<!-- top small box 1 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: initializeDatatable('my');">
<div class="small-box bg-aqua">
<div class="inner"><h3 id="devicesMy"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_AllDevices');?></p>
</div>
<div class="icon"><i class="fa fa-laptop text-aqua-40"></i></div>
</div>
</a>
</div>
<!-- top small box 2 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: initializeDatatable('connected');">
<div class="small-box bg-green">
<div class="inner"><h3 id="devicesConnected"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_Connected');?></p>
</div>
<div class="icon"><i class="fa fa-plug text-green-40"></i></div>
</div>
</a>
</div>
<!-- top small box 3 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: initializeDatatable('favorites');">
<div class="small-box bg-yellow">
<div class="inner"><h3 id="devicesFavorites"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_Favorites');?></p>
</div>
<div class="icon"><i class="fa fa-star text-yellow-40"></i></div>
</div>
</a>
</div>
<!-- top small box 4 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: initializeDatatable('new');">
<div class="small-box bg-yellow">
<div class="inner"><h3 id="devicesNew"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_NewDevices');?></p>
</div>
<div class="icon"><i class="ion ion-plus-round text-yellow-40"></i></div>
</div>
</a>
</div>
<!-- top small box 5 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: initializeDatatable('down');">
<div class="small-box bg-red">
<div class="inner"><h3 id="devicesDown"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_DownOnly');?></p>
</div>
<div class="icon"><i class="fa fa-warning text-red-40"></i></div>
</div>
</a>
</div>
<!-- top small box 6 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: initializeDatatable('archived');">
<div class="small-box bg-gray top_small_box_gray_text">
<div class="inner"><h3 id="devicesArchived"> -- </h3>
<p class="infobox_label"><?= lang('Device_Shortcut_Archived');?></p>
</div>
<div class="icon"><i class="fa fa-eye-slash text-gray-40"></i></div>
</div>
</a>
</div>
<!-- Placeholder ------------------------------------------------------- -->
</div>
@@ -321,9 +251,7 @@ function main () {
// Initialize components with parameters
initializeDatatable(getUrlAnchor('my'));
initializeDatatable(getUrlAnchor('my_devices'));
// check if data outdated and show spinner if so
handleLoadingDialog()
@@ -358,21 +286,49 @@ function getDevicesTotals(devicesData) {
if (getCache("getDevicesTotals") !== "") {
resultJSON = getCache("getDevicesTotals");
} else {
// combined query
const devices = filterDataByStatus(devicesData, 'my');
const connectedDevices = filterDataByStatus(devicesData, 'connected');
const favoritesDevices = filterDataByStatus(devicesData, 'favorites');
const newDevices = filterDataByStatus(devicesData, 'new');
const downDevices = filterDataByStatus(devicesData, 'down');
const archivedDevices = filterDataByStatus(devicesData, 'archived');
// Define filter conditions and corresponding objects
const filters = [
{ status: 'my_devices', color: 'bg-aqua', label: getString('Device_Shortcut_AllDevices'), icon: 'fa-laptop' },
{ status: 'all', color: 'bg-aqua', label: getString('Gen_All_Devices'), icon: 'fa-laptop' },
{ status: 'connected', color: 'bg-green', label: getString('Device_Shortcut_Connected'), icon: 'fa-plug' },
{ status: 'favorites', color: 'bg-yellow', label: getString('Device_Shortcut_Favorites'), icon: 'fa-star' },
{ status: 'new', color: 'bg-yellow', label: getString('Device_Shortcut_NewDevices'), icon: 'fa-plus' },
{ status: 'down', color: 'bg-red', label: getString('Device_Shortcut_DownOnly'), icon: 'fa-warning' },
{ status: 'archived', color: 'bg-gray', label: getString('Device_Shortcut_Archived'), icon: 'fa-eye-slash' },
{ status: 'offline', color: 'bg-gray', label: getString('Gen_Offline'), icon: 'fa-xmark' }
];
$('#devicesMy').html (devices.length);
$('#devicesConnected').html (connectedDevices.length);
$('#devicesFavorites').html (favoritesDevices.length);
$('#devicesNew').html (newDevices.length);
$('#devicesDown').html (downDevices.length);
$('#devicesArchived').html (archivedDevices.length);
// Initialize an empty array to store the final objects
let dataArray = [];
// Loop through each filter condition
filters.forEach(filter => {
// Calculate count dynamically based on filter condition
let count = filterDataByStatus(devicesData, filter.status).length;
console.log(getSetting('UI_hide_empty'));
// Check any condition to skip adding the object to dataArray
if (
(['', 'False'].includes(getSetting('UI_hide_empty')) || (getSetting('UI_hide_empty') == "True" && count > 0)) &&
(getSetting('UI_shown_cards') == "" || getSetting('UI_shown_cards').includes(filter.status))
) {
dataArray.push({
onclickEvent: `initializeDatatable('${filter.status}')`,
color: filter.color,
title: count,
label: filter.label,
icon: filter.icon
});
}
});
// render info boxes/tile cards
renderInfoboxes(
dataArray
)
// save to cache
setCache("getDevicesTotals", resultJSON);
@@ -381,12 +337,28 @@ function getDevicesTotals(devicesData) {
// console.log(resultJSON);
}
//------------------------------------------------------------------------------
function renderInfoboxes(customData) {
$.ajax({
url: 'php/components/tile_cards.php', // PHP script URL
type: 'POST', // Use POST method to send data
dataType: 'html', // Expect HTML response
data: { items: JSON.stringify(customData) }, // Send customData as JSON
success: function(response) {
$('#TileCards').html(response); // Replace container content with fetched HTML
},
error: function(xhr, status, error) {
console.error('Error fetching infoboxes:', error);
}
});
}
// -----------------------------------------------------------------------------
// Define a function to filter data based on deviceStatus
function filterDataByStatus(data, status) {
return data.filter(function(item) {
switch (status) {
case 'my':
case 'my_devices':
to_display = getSetting('UI_MY_DEVICES');
let result = true;
@@ -403,7 +375,7 @@ function filterDataByStatus(data, status) {
result = false;
}
return result; // Include all items for 'my' status
return result; // Include all items for 'my_devices' status
case 'connected':
return item.dev_PresentLastScan === 1;
case 'favorites':
@@ -455,7 +427,7 @@ function initializeDatatable (status) {
if(!status)
{
status = 'my'
status = 'my_devices'
}
// Save status selected
@@ -463,12 +435,14 @@ function initializeDatatable (status) {
// Define color & title for the status selected
switch (deviceStatus) {
case 'my': tableTitle = getString('Device_Shortcut_AllDevices'); color = 'aqua'; break;
case 'my_devices': tableTitle = getString('Device_Shortcut_AllDevices'); color = 'aqua'; break;
case 'connected': tableTitle = getString('Device_Shortcut_Connected'); color = 'green'; break;
case 'all': tableTitle = getString('Gen_All_Devices'); color = 'aqua'; break;
case 'favorites': tableTitle = getString('Device_Shortcut_Favorites'); color = 'yellow'; break;
case 'new': tableTitle = getString('Device_Shortcut_NewDevices'); color = 'yellow'; break;
case 'down': tableTitle = getString('Device_Shortcut_DownOnly'); color = 'red'; break;
case 'archived': tableTitle = getString('Device_Shortcut_Archived'); color = 'gray'; break;
case 'offline': tableTitle = getString('Gen_Offline'); color = 'gray'; break;
default: tableTitle = getString('Device_Shortcut_Devices'); color = 'gray'; break;
}

43
front/php/components/tile_cards.php Executable file
View File

@@ -0,0 +1,43 @@
<?php
function renderInfobox($params) {
$onclickEvent = isset($params['onclickEvent']) ? $params['onclickEvent'] : '';
$color = isset($params['color']) ? $params['color'] : '';
$title = isset($params['title']) ? $params['title'] : '';
$label = isset($params['label']) ? $params['label'] : '';
$icon = isset($params['icon']) ? $params['icon'] : '';
return '
<div class="tile col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: ' . htmlspecialchars($onclickEvent) . ';">
<div class="small-box ' . htmlspecialchars($color) . '">
<div class="inner">
<h3>' . htmlspecialchars($title) . '</h3>
<p class="infobox_label">' . htmlspecialchars($label) . '</p>
</div>
<div class="icon">
<i class="fa ' . htmlspecialchars($icon) . ' text-aqua-40"></i>
</div>
</div>
</a>
</div>';
}
// Load default data from JSON file
$defaultDataFile = 'tile_cards_defaults.json';
$defaultData = file_exists($defaultDataFile) ? json_decode(file_get_contents($defaultDataFile), true) : [];
// Check if 'items' parameter exists and is valid JSON
$items = isset($_POST['items']) ? json_decode($_POST['items'], true) : [];
// Use default data if 'items' is not provided or cannot be decoded
if (empty($items)) {
$items = $defaultData;
}
$html = '';
foreach ($items as $item) {
$html .= renderInfobox($item);
}
echo $html;
exit();
?>

17
front/php/components/tile_cards_defaults.json Executable file
View File

@@ -0,0 +1,17 @@
[
{
"onclickEvent": "handleClick(1)",
"color": "bg-primary",
"title": "Default Infobox 1",
"label": "Default label for Infobox 1",
"icon": "fa-bell"
},
{
"onclickEvent": "handleClick(2)",
"color": "bg-success",
"title": "Default Infobox 2",
"label": "Default label for Infobox 2",
"icon": "fa-envelope"
}
]

2
front/php/templates/footer.php
View File

@@ -17,7 +17,7 @@
<!-- Default to the left -->
<!-- NetAlertX footer with url -->
<a href="https://github.com/jokob-sk/NetAlertX" target="_blank">Net <b>Alert</b><sup>x</sup></a>
<a href="https://github.com/jokob-sk/NetAlertX" target="_blank">Net<b>Alert</b><sup>x</sup></a>
<!-- To the right -->

1
front/php/templates/language/de_de.json
View File

@@ -282,6 +282,7 @@
"Gen_Action": "Action",
"Gen_Add": "",
"Gen_Add_All": "",
"Gen_All_Devices": "",
"Gen_AreYouSure": "Sind Sie sich sicher?",
"Gen_Backup": "Sichern",
"Gen_Cancel": "Abbrechen",

1
front/php/templates/language/en_us.json
View File

@@ -270,6 +270,7 @@
"Gen_Action": "Action",
"Gen_Add": "Add",
"Gen_Add_All": "Add all",
"Gen_All_Devices": "All Devices",
"Gen_AreYouSure": "Are you sure?",
"Gen_Backup": "Run Backup",
"Gen_Cancel": "Cancel",

1
front/php/templates/language/es_es.json
View File

@@ -280,6 +280,7 @@
"Gen_Action": "Acción",
"Gen_Add": "Añadir",
"Gen_Add_All": "Añadir todo",
"Gen_All_Devices": "",
"Gen_AreYouSure": "¿Estás seguro?",
"Gen_Backup": "Ejecutar copia de seguridad",
"Gen_Cancel": "Cancelar",

1
front/php/templates/language/fr_fr.json
View File

@@ -270,6 +270,7 @@
"Gen_Action": "Action",
"Gen_Add": "",
"Gen_Add_All": "",
"Gen_All_Devices": "",
"Gen_AreYouSure": "",
"Gen_Backup": "",
"Gen_Cancel": "Annuler",

1
front/php/templates/language/it_it.json
View File

@@ -270,6 +270,7 @@
"Gen_Action": "Azione",
"Gen_Add": "Aggiungi",
"Gen_Add_All": "Aggiungi tutti",
"Gen_All_Devices": "",
"Gen_AreYouSure": "Sei sicuro?",
"Gen_Backup": "Esegui backup",
"Gen_Cancel": "Annulla",

1
front/php/templates/language/nb_no.json
View File

@@ -270,6 +270,7 @@
"Gen_Action": "Handling",
"Gen_Add": "Legg til",
"Gen_Add_All": "Legg til alle",
"Gen_All_Devices": "",
"Gen_AreYouSure": "Er du sikker?",
"Gen_Backup": "Kjør sikkerhetskopiering",
"Gen_Cancel": "Avbryt",

1
front/php/templates/language/pl_pl.json
View File

@@ -270,6 +270,7 @@
"Gen_Action": "Akcja",
"Gen_Add": "Dodaj",
"Gen_Add_All": "Dodaj wszystko",
"Gen_All_Devices": "",
"Gen_AreYouSure": "Jesteś pewien?",
"Gen_Backup": "Wykonaj Kopie Zapasową",
"Gen_Cancel": "Anuluj",

1
front/php/templates/language/pt_br.json
View File

@@ -270,6 +270,7 @@
"Gen_Action": "",
"Gen_Add": "",
"Gen_Add_All": "",
"Gen_All_Devices": "",
"Gen_AreYouSure": "",
"Gen_Backup": "",
"Gen_Cancel": "",

1
front/php/templates/language/ru_ru.json
View File

@@ -270,6 +270,7 @@
"Gen_Action": "Действия",
"Gen_Add": "Добавить",
"Gen_Add_All": "Добавить все",
"Gen_All_Devices": "",
"Gen_AreYouSure": "Вы уверены?",
"Gen_Backup": "Запустить резервное копирование",
"Gen_Cancel": "Отмена",

1
front/php/templates/language/tr_tr.json
View File

@@ -270,6 +270,7 @@
"Gen_Action": "",
"Gen_Add": "",
"Gen_Add_All": "",
"Gen_All_Devices": "",
"Gen_AreYouSure": "",
"Gen_Backup": "",
"Gen_Cancel": "",

1
front/php/templates/language/zh_cn.json
View File

@@ -270,6 +270,7 @@
"Gen_Action": "",
"Gen_Add": "",
"Gen_Add_All": "",
"Gen_All_Devices": "",
"Gen_AreYouSure": "",
"Gen_Backup": "",
"Gen_Cancel": "",

23
front/plugins/ui_settings/README.md Executable file
View File

@@ -0,0 +1,23 @@
## Overview
PLugin functionality overview and links to external resources if relevant. Include use cases if available.
> [!TIP]
> Some tip.
### Quick setup guide
To set up the plugin correctly, make sure...
#### Required Settings
- When to run `PREF_RUN`
-
### Usage
- Head to **Settings** > **Plugin name** to adjust the default values.
### Notes
- Additional notes, limitations, Author info.

85
front/plugins/ui_settings/config.json Executable file
View File

@@ -0,0 +1,85 @@
{
"code_name": "ui_settings",
"unique_prefix": "UI",
"plugin_type": "core",
"enabled": true,
"data_source": "template",
"show_ui": false,
"localized": ["display_name", "description", "icon"],
"display_name": [
{
"language_code": "en_us",
"string": "UI settings"
}
],
"description": [
{
"language_code": "en_us",
"string": "Plugin to adjust UI settings."
}
],
"icon": [
{
"language_code": "en_us",
"string": "<i class=\"fa fa-paint-roller\"></i>"
}
],
"params": [],
"settings": [
{
"function": "shown_cards",
"type": "text.multiselect",
"maxLength": 50,
"default_value": [
"my_devices",
"connected",
"favorites",
"new",
"down",
"archived"
],
"options": [
"my_devices",
"connected",
"favorites",
"new",
"down",
"archived",
"offline",
"all"
],
"localized": ["name", "description"],
"name": [
{
"language_code": "en_us",
"string": "Tiles to Show"
}
],
"description": [
{
"language_code": "en_us",
"string": "Which tiles to show on teh top of the Devices page."
}
]
},
{
"function": "hide_empty",
"type": "boolean",
"default_value": false,
"options": [],
"localized": ["name", "description"],
"name": [
{
"language_code": "en_us",
"string": "Hide empty tiles"
}
],
"description": [
{
"language_code": "en_us",
"string": "Hide Device tiles with zero results."
}
]
}
]
}