Merge branch 'origin/main' into Weblate.

Currently translated at 100.0% (702 of 702 strings)

Translation: NetAlertX/core
Translate-URL: https://hosted.weblate.org/projects/pialert/core/it/

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -35,4 +35,18 @@ body:
       
       Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
   validations:
-    required: true
+    required: true
+- type: checkboxes
+  attributes:
+    label: Am I willing to test this? 🧪
+    description: I rely on the community to test unreleased features. If you are requesting a feature, please be willing to test it within 48h of test request. Otherwise, the feature might be pulled from the code base. 
+    options:
+    - label: I will do my best to test this feature on the `netlertx-dev` image when requested within 48h and report bugs to help deliver a great user experience for everyone and not to break existing installations.
+      required: true
+- type: checkboxes
+  attributes:
+    label: Can I help implement this? 👩‍💻👨‍💻 
+    description: The maintainer will provide guidance and help. The implementer will read the PR guidelines https://github.com/jokob-sk/NetAlertX/tree/main/docs#-pull-requests-prs
+    options:
+    - label: "Yes"
+    - label: "No"

.github/ISSUE_TEMPLATE/i-have-an-issue.yml

@@ -1,5 +1,5 @@
 name: Bug Report
-description: 'When submitting an issue enable debug and have a look at the docs.'
+description: 'When submitting an issue enable LOG_LEVEL="trace" and have a look at the docs.'
 labels: ['bug 🐛']
 body:
 - type: checkboxes
@@ -64,7 +64,7 @@ body:
       ***Generally speaking, all bug reports should have logs provided.***
       Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
       Additionally, any additional info? Screenshots? References? Anything that will give us more context about the issue you are encountering!
-      You can use `tail -100 /app/front/log/app.log` in the container if you have troubles getting to the log files. 
+      You can use `tail -100 /app/front/log/app.log` in the container if you have trouble getting to the log files. 
   validations:
     required: false
 - type: checkboxes

.github/workflows/docker_dev.yml

@@ -48,7 +48,6 @@ jobs:
         with:
           # list of Docker images to use as base name for tags
           images: |
-            jokobsk/pi.alert_dev
             jokobsk/netalertx-dev
           # generate Docker tags based on the following events/attributes
           tags: |

.gitignore

@@ -19,4 +19,13 @@ __pycache__/
 **/last_result.log
 **/script.log
 **/pialert.conf_bak
-**/pialert.db_bak
+**/pialert.db_bak
+.*.swp
+
+front/img/account/*
+**/account.php
+**/account.js
+front/css/account.css
+
+docker-compose.yml.ffsb42
+.env.omada.ffsb42

Dockerfile

@@ -1,24 +1,27 @@
-FROM alpine:3.19 as builder
+FROM alpine:3.20 AS builder
 
 ARG INSTALL_DIR=/app
 
-ENV PYTHONUNBUFFERED 1
+ENV PYTHONUNBUFFERED=1
 
-RUN apk add --no-cache bash python3 \
+# Install build dependencies
+RUN apk add --no-cache bash python3 python3-dev gcc musl-dev libffi-dev openssl-dev \
     && python -m venv /opt/venv
+    
 
 # Enable venv
 ENV PATH="/opt/venv/bin:$PATH"
 
 COPY . ${INSTALL_DIR}/
 
-RUN pip install requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet \
+
+RUN pip install netifaces tplink-omada-client pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython librouteros  \
     && bash -c "find ${INSTALL_DIR} -type d -exec chmod 750 {} \;" \
     && bash -c "find ${INSTALL_DIR} -type f -exec chmod 640 {} \;" \
-    && bash -c "find ${INSTALL_DIR} -type f \( -name '*.sh' -o -name '*.py' -o -name 'pialert-cli' -o -name 'speedtest-cli' \) -exec chmod 750 {} \;"
+    && bash -c "find ${INSTALL_DIR} -type f \( -name '*.sh' -o -name '*.py'  -o -name 'speedtest-cli' \) -exec chmod 750 {} \;"
 
 # second stage
-FROM alpine:3.19 as runner
+FROM alpine:3.20 AS runner
 
 ARG INSTALL_DIR=/app
 
@@ -37,15 +40,20 @@ ENV S6_CMD_WAIT_FOR_SERVICES_MAXTIME=0
 
 RUN apk update --no-cache \
     && apk add --no-cache bash zip lsblk gettext-envsubst sudo mtr tzdata s6-overlay \
-    && apk add --no-cache curl arp-scan iproute2 iproute2-ss nmap nmap-scripts traceroute net-tools net-snmp-tools bind-tools awake ca-certificates \
-    && apk add --no-cache sqlite php82 php82-fpm php82-cgi php82-curl php82-sqlite3 php82-session \
+    && apk add --no-cache curl arp-scan iproute2 iproute2-ss nmap nmap-scripts traceroute nbtscan avahi avahi-tools openrc dbus net-tools net-snmp-tools bind-tools awake ca-certificates  \
+    && apk add --no-cache sqlite php83 php83-fpm php83-cgi php83-curl php83-sqlite3 php83-session \
     && apk add --no-cache python3 nginx \
+    && apk add --no-cache dcron \
     && ln -s /usr/bin/awake /usr/bin/wakeonlan \
     && bash -c "install -d -m 750 -o nginx -g www-data ${INSTALL_DIR} ${INSTALL_DIR}" \
     && rm -f /etc/nginx/http.d/default.conf
 
 COPY --from=builder --chown=nginx:www-data ${INSTALL_DIR}/ ${INSTALL_DIR}/
 
+# Add crontab file
+COPY install/crontab /etc/crontabs/root
+
+# Start all required services
 RUN ${INSTALL_DIR}/dockerfiles/pre-setup.sh
 
 HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=2 \

Dockerfile.debian

@@ -1,7 +1,7 @@
 FROM debian:bookworm-slim
 
 # default UID and GID
-ENV USER=pi USER_ID=1000 USER_GID=1000  PORT=20211 
+ENV USER=pi USER_ID=1000 USER_GID=1000 PORT=20211 
 #TZ=Europe/London
 
 # Todo, figure out why using a workdir instead of full paths don't work
@@ -29,10 +29,11 @@ COPY --chmod=775 --chown=${USER_ID}:${USER_GID} . ${INSTALL_DIR}/
 
 # ❗ IMPORTANT - if you modify this file modify the /install/install_dependecies.debian.sh file as well ❗ 
 
+
 RUN apt-get install -y \
     tini snmp ca-certificates curl libwww-perl arp-scan perl apt-utils cron sudo \
-    nginx-light php php-cgi php-fpm php-sqlite3 php-curl sqlite3 dnsutils net-tools \
-    python3 iproute2 nmap python3-pip zip systemctl usbutils traceroute
+    nginx-light php php-cgi php-fpm php-sqlite3 php-curl sqlite3 dnsutils net-tools php-openssl \
+    python3 python3-dev iproute2 nmap python3-pip zip systemctl usbutils traceroute nbtscan avahi avahi-tools openrc dbus
 
 # Alternate dependencies
 RUN apt-get install nginx nginx-core mtr php-fpm php8.2-fpm php-cli php8.2 php8.2-sqlite3 -y
@@ -41,7 +42,8 @@ RUN phpenmod -v 8.2 sqlite3
 # Setup virtual python environment and use pip3 to install packages
 RUN apt-get install -y python3-venv
 RUN python3 -m venv myenv
-RUN /bin/bash -c "source myenv/bin/activate && update-alternatives --install /usr/bin/python python /usr/bin/python3 10 && pip3 install requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet"
+
+RUN /bin/bash -c "source myenv/bin/activate && update-alternatives --install /usr/bin/python python /usr/bin/python3 10 && pip3 install tplink-omada-client pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython librouteros "
 
 # Create a buildtimestamp.txt to later check if a new version was released
 RUN date +%s > ${INSTALL_DIR}/front/buildtimestamp.txt

README.md

@@ -1,43 +1,49 @@
-# 💻🔍 Network security scanner & notification framework
+[![GitHub Committed](https://img.shields.io/github/last-commit/jokob-sk/NetAlertX?color=40ba12&label=Pushed&logo=GitHub&logoColor=fff&style=for-the-badge)](https://github.com/jokob-sk/NetAlertX)
+[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/netalertx?label=Size&logo=Docker&color=0aa8d2&logoColor=fff&style=for-the-badge)](https://hub.docker.com/r/jokobsk/netalertx)
+[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/netalertx?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff&style=for-the-badge)](https://hub.docker.com/r/jokobsk/netalertx)
+[![GitHub Release](https://img.shields.io/github/v/release/jokob-sk/NetAlertX?color=0aa8d2&logoColor=fff&logo=GitHub&style=for-the-badge)](https://github.com/jokob-sk/NetAlertX/releases)
+[![Discord](https://img.shields.io/discord/1274490466481602755?color=0aa8d2&logoColor=fff&logo=Discord&style=for-the-badge)](https://discord.gg/UQnnHNYV)
+
+# 🖧🔍 Network scanner & notification framework
 
 Get visibility of what's going on on your WIFI/LAN network. Schedule scans for devices, port changes and get alerts if unknown devices or changes are found. Write your own [Plugins](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins#readme) with auto-generated UI and in-build notification system. Build out and easily maintain your network source of truth (NSoT).
 
-[![GitHub Committed](https://img.shields.io/github/last-commit/jokob-sk/NetAlertX?color=40ba12&label=Committed&logo=GitHub&logoColor=fff)](https://github.com/jokob-sk/NetAlertX)
-[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/netalertx?label=Size&logo=Docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/netalertx)
-[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/netalertx?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/netalertx)
-[![GitHub Release](https://img.shields.io/github/v/release/jokob-sk/NetAlertX?color=0aa8d2&logoColor=fff&logo=GitHub)](https://github.com/jokob-sk/NetAlertX/releases)
-[![GitHub Sponsors](https://img.shields.io/github/sponsors/jokob-sk?style=social)](https://github.com/sponsors/jokob-sk)
 
   | 🐳 [Docker hub](https://registry.hub.docker.com/r/jokobsk/netalertx) |  📑 [Docker guide](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md) |🆕 [Release notes](https://github.com/jokob-sk/NetAlertX/releases) | 📚 [All Docs](https://github.com/jokob-sk/NetAlertX/tree/main/docs) | 
   |----------------------|----------------------| ----------------------|  ----------------------| 
 
 
-  | ![Main screen][main] | ![Screen 1][screen1]  | ![Screen 5][screen5] |
+  | ![Main screen][main] | ![device_details 1][device_details]  | ![Screen network][network] |
   |----------------------|----------------------| ----------------------| 
 
+  ![network_setup][network_setup] 
+
+
+Head to [https://netalertx.com/](https://netalertx.com/) for more gifs and screenshots 📷.
+
 <details>
   <summary>📷 Click for more screenshots</summary>
 
-  | ![Screen 3][screen3] | ![Screen 4][screen4] | ![Screen 6][screen6]  |
+  | ![presence][presence] | ![maintenance][maintenance] | ![settings][settings]  |
   |----------------------|----------------------|----------------------|
-  | ![Screen 8][screen8] | ![Report 2][report2] | ![Screen 9][screen9]  |
+  | ![sync_hub][sync_hub] | ![report1][report1] | ![device_nmap][device_nmap]  |
 
 </details>
 
 <details>
-  <summary>❓ Why use Net <b>Alert</b><sup>x</sup>?</summary>
+  <summary>❓ Why use Net<b>Alert</b><sup>x</sup>?</summary>
 
   <hr>
 
   Most of us don't know what's going on on our home network, but we want our family and data to be safe.  _Command-line tools_ are great, but the output can be _hard to understand_ and action if you are not a network specialist.
 
-  Net <b>Alert</b><sup>x</sup> gives you peace of mind. _Visualize and immediately report 📬_ what is going on in your network - this is the first step to enhance your _network security 🔐_. 
+  Net<b>Alert</b><sup>x</sup> gives you peace of mind. _Visualize and immediately report 📬_ what is going on in your network - this is the first step to enhance your _network security 🔐_. 
 
-  Net <b>Alert</b><sup>x</sup> combines several network and other scanning tools 🔍 with notifications 📧 into one user-friendly package 📦. 
+  Net<b>Alert</b><sup>x</sup> combines several network and other scanning tools 🔍 with notifications 📧 into one user-friendly package 📦. 
 
   Set up a _kill switch ☠_ for your network via a smart plug with the available [Home Assistant](https://github.com/jokob-sk/NetAlertX/blob/main/docs/HOME_ASSISTANT.md) integration. Implement custom automations with the [CSV device Exports 📤](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/csv_backup), [Webhooks](https://github.com/jokob-sk/NetAlertX/blob/main/docs/WEBHOOK_N8N.md), or [API endpoints](https://github.com/jokob-sk/NetAlertX/blob/main/docs/API.md) features. 
 
-  Extend the app if you want to create your own scanner [Plugin](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins#readme) and handle the results and notifications in Net <b>Alert</b><sup>x</sup>. 
+  Extend the app if you want to create your own scanner [Plugin](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins#readme) and handle the results and notifications in Net<b>Alert</b><sup>x</sup>. 
 
   Looking forward to your contributions if you decide to share your work with the community ❤.
 
@@ -47,7 +53,7 @@ Get visibility of what's going on on your WIFI/LAN network. Schedule scans for d
 
 | Features    | Details    | 
 |-------------|-------------|
-|      🔍     |   The app scans your network for, **New devices**, **New connections** (re-connections), **Disconnections**, **"Always Connected" devices down**, Devices **IP changes** and **Internet IP address changes**. Discovery & scan methods include: **arp-scan**.  **Pi-hole - DB import**,  **Pi-hole - DHCP leases import**, **Generic DHCP leases import**. **UNIFI controller import**, **SNMP-enabled router import**. Check the [Plugins](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins#readme) docs for more info on individual scans. |
+|      🔍     |   The app scans your network for, **New devices**, **New connections** (re-connections), **Disconnections**, **"Always Connected" devices down**, Devices **IP changes** and **Internet IP address changes**. Discovery & scan methods include: **arp-scan**,  **Pi-hole - DB import**,  **Pi-hole - DHCP leases import**, **Generic DHCP leases import**. **UNIFI controller import**, **SNMP-enabled router import**. Check the [Plugins](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins#readme) docs for more info on individual scans. |
 |📧           | Send notifications to more than 80+ services, including Telegram via [Apprise](https://hub.docker.com/r/caronc/apprise), or use [Pushsafer](https://www.pushsafer.com/), [Pushover](https://www.pushover.net/), or [NTFY](https://ntfy.sh/). |
 |🧩           | Feed your data and device changes into [Home Assistant](https://github.com/jokob-sk/NetAlertX/blob/main/docs/HOME_ASSISTANT.md), read [API endpoints](https://github.com/jokob-sk/NetAlertX/blob/main/docs/API.md), or use [Webhooks](https://github.com/jokob-sk/NetAlertX/blob/main/docs/WEBHOOK_N8N.md) to setup custom automation flows.  |
 |➕           | Build your own scanners with the [Plugin system](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins#readme) |
@@ -56,20 +62,28 @@ Get visibility of what's going on on your WIFI/LAN network. Schedule scans for d
 ## Installation & Documentation
 <!--- --------------------------------------------------------------------- --->
 
+Supported browsers: Chrome, Firefox
+
 | Docs        | Link    | 
 |-------------|-------------|
 | 📥🐳  | [Docker instructions](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md) 
-| 📥💻  | [HW install (experimental 🧪)](https://github.com/jokob-sk/NetAlertX/blob/main/docs/HW_INSTALL.md) |
+| 📥🗄️  | [HW install (experimental 🧪)](https://github.com/jokob-sk/NetAlertX/blob/main/docs/HW_INSTALL.md) |
+| 📥🟧  | [Unraid App](https://unraid.net/community/apps) |
 | 📚     | [All Documentation](https://github.com/jokob-sk/NetAlertX/blob/main/docs/README.md) (App Usage and Configuration) |
  
 > Other Alternatives
 >
 > - Check out [leiweibau's on HW installed fork](https://github.com/leiweibau/Pi.Alert/) (maintained)
-> - Check instructions for [pucherot's original code](https://github.com/pucherot/Pi.Alert/) (unmaintained)
 > - [WatchYourLAN](https://github.com/aceberg/WatchYourLAN) - Lightweight network IP scanner with web GUI (Open source)
 > - [Fing](https://www.fing.com/) - Network scanner app for your Internet security (Commercial, Phone App, Proprietary hardware)
 > - [NetBox](https://netboxlabs.com/) - Network management software (Commercial)
 
+## 🔔 Get notified what's new
+
+Get notified about a new release, what new functionality you can use and about breaking changes. 
+
+![Follow and star][follow_star] 
+
 ### ⭐ Sponsors
 
 [![GitHub Sponsors](https://img.shields.io/github/sponsors/jokob-sk?style=social)](https://github.com/sponsors/jokob-sk)
@@ -81,18 +95,20 @@ Thank you to all the wonderful people who are sponsoring this project.
 <!-- SPONSORS-LIST DO NOT MODIFY BELOW -->
 | All Sponsors |
 |---|
-| [Tony Hanratty](https://github.com/thanratty) |
+| [joel72265](https://github.com/joel72265) |
 
 <!-- SPONSORS-LIST DO NOT MODIFY ABOVE -->
 
-| [![GitHub](https://i.imgur.com/emsRCPh.png)](https://github.com/sponsors/jokob-sk) | [![Buy Me A Coffee](https://i.imgur.com/pIM6YXL.png)](https://www.buymeacoffee.com/jokobsk) | [![Patreon](https://i.imgur.com/MuYsrq1.png)](https://www.patreon.com/user?u=84385063) | 
-| --- | --- | --- | 
+
 
 <details>
   <summary>Click for more ways to donate</summary>
   
   <hr>
 
+  | [![GitHub](https://i.imgur.com/emsRCPh.png)](https://github.com/sponsors/jokob-sk) | [![Buy Me A Coffee](https://i.imgur.com/pIM6YXL.png)](https://www.buymeacoffee.com/jokobsk) | [![Patreon](https://i.imgur.com/MuYsrq1.png)](https://www.patreon.com/user?u=84385063) | 
+| --- | --- | --- | 
+
   - Bitcoin: `1N8tupjeCK12qRVU2XrV17WvKK7LCawyZM`
   - Ethereum: `0x6e2749Cb42F4411bc98501406BdcD82244e3f9C7`
 
@@ -106,11 +122,6 @@ This project would be nothing without the amazing work of the community, with sp
 
 > [pucherot/Pi.Alert](https://github.com/pucherot/Pi.Alert) (the original creator of PiAlert), [leiweibau](https://github.com/leiweibau/Pi.Alert): Dark mode (and much more), [Macleykun](https://github.com/Macleykun) (Help with Dockerfile clean-up) [Final-Hawk](https://github.com/Final-Hawk) (Help with NTFY, styling and other fixes), [TeroRERO](https://github.com/terorero) (Spanish translations), [Data-Monkey](https://github.com/Data-Monkey), (Split-up of the python.py file and more), [cvc90](https://github.com/cvc90) (Spanish translation and various UI work) to name a few...
 
-Here is everyone that helped and contributed to this project:
-
-<a href="https://github.com/jokob-sk/netalertx/graphs/contributors">
-  <img src="https://contri-graphy.yourselfhosted.com/graph?repo=jokob-sk/netalertx&format=svg" />
-</a>
 
 ## Everything else
 <!--- --------------------------------------------------------------------- --->
@@ -131,18 +142,21 @@ Help out and suggest languages in the [online portal of Weblate](https://hosted.
 
 
 <!--- --------------------------------------------------------------------- --->
-[main]:    ./docs/img/devices_split.png       "Main screen"
-[screen1]: ./docs/img/device_details.png      "Screen 1"
-[screen2]: ./docs/img/events.png              "Screen 2"
-[screen3]: ./docs/img/presence.png            "Screen 3"
-[screen4]: ./docs/img/maintenance.png         "Screen 4"
-[screen5]: ./docs/img/network.png             "Screen 5"
-[screen6]: ./docs/img/settings.png            "Screen 6"
-[screen7]: ./docs/img/help_faq.png            "Screen 7"
-[screen8]: ./docs/img/plugins_rogue_dhcp.png  "Screen 8"
-[screen9]: ./docs/img/device_nmap.png         "Screen 9"
-[report1]: ./docs/img/4_report_1.jpg          "Report sample 1"
-[report2]: ./docs/img/4_report_2.jpg          "Report sample 2"
-[main_dark]: /docs/img/1_devices_dark.jpg     "Main screen dark"
-[maintain_dark]: /docs/img/5_maintain.jpg     "Maintain screen dark"
+[main]:                     ./docs/img/devices_split.png                  "Main screen"
+[device_details]:           ./docs/img/device_details.png                 "Screen 1"
+[events]:                   ./docs/img/events.png                         "Screen 2"
+[presence]:                 ./docs/img/presence.png                       "Screen 3"
+[maintenance]:              ./docs/img/maintenance.png                    "Screen 4"
+[network]:                  ./docs/img/network.png                        "Screen 5"
+[settings]:                 ./docs/img/settings.png                       "Screen 6"
+[network_setup]:            ./docs/img/network_setup.gif                  "Screen 6"
+[help_faq]:                 ./docs/img/help_faq.png                       "Screen 7"
+[sync_hub]:                 ./docs/img/sync_hub.png                       "Screen 8"
+[notification_center]:      ./docs/img/notification_center.png            "Screen 8"
+[sent_reports_text]:        ./docs/img/sent_reports_text.png              "Screen 8"
+[device_nmap]:              ./docs/img/device_nmap.png                    "Screen 9"
+[report1]:                  ./docs/img/report_sample.png                  "Report sample 1"
+[main_dark]:                /docs/img/1_devices_dark.jpg                  "Main screen dark"
+[maintain_dark]:            /docs/img/5_maintain.jpg                      "Maintain screen dark"
+[follow_star]:              /docs/img/Follow_Releases_and_Star.gif        "Follow and Star"
 

back/app.conf

@@ -3,13 +3,12 @@
 #         Generated:  2022-12-30_22-19-40            #
 #                                                    #
 #   Config file for the LAN intruder detection app:  #
-#      https://github.com/jokob-sk/NetAlertX          #
+#      https://github.com/jokob-sk/NetAlertX         #
 #                                                    #
 #-----------------AUTOGENERATED FILE-----------------#
 
 # 🔺 Use the Settings UI - only edit when necessary 🔺
 
-
 # General
 #---------------------------
 # Scan using interface eth0
@@ -18,18 +17,23 @@
 # Scan multiple interfaces (eth1 and eth0):
 # SCAN_SUBNETS    = [ '192.168.1.0/24 --interface=eth1', '192.168.1.0/24 --interface=eth0' ]
 
-SCAN_SUBNETS=['192.168.1.0/24 --interface=eth1']
-
+SCAN_SUBNETS=['192.168.1.0/24 --interface=eth0']
 TIMEZONE='Europe/Berlin'
-PIALERT_WEB_PROTECTION=False
-PIALERT_WEB_PASSWORD='8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'
+LOADED_PLUGINS = ['ARPSCAN','CSVBCKP','DBCLNP', 'INTRNT','MAINT','NEWDEV','NSLOOKUP','NTFPRCS', 'AVAHISCAN', 'SETPWD','SMTP', 'SYNC', 'VNDRPDT', 'WORKFLOWS']
+
 DAYS_TO_KEEP_EVENTS=90
 # Used for generating links in emails. Make sure not to add a trailing slash!
 REPORT_DASHBOARD_URL='http://netalertx'
 
+# Make sure at least these scanners are enabled for new installs, other defaults are taken from the config.json
+INTRNT_RUN='schedule'
+ARPSCAN_RUN='schedule'
+NSLOOKUP_RUN='before_name_updates'
 
-# Email
-#---------------------------
+# Email 
+#-------------------------------------
+# (add SMTP to LOADED_PLUGINS to load)
+#-------------------------------------
 SMTP_RUN='disabled'  # use 'on_notification' to enable
 SMTP_SERVER='smtp.gmail.com'
 SMTP_PORT=587
@@ -41,8 +45,10 @@ SMTP_PASS='password'
 SMTP_SKIP_TLS=False
 
 
-# Webhooks
-#---------------------------
+# Webhook 
+#-------------------------------------
+# (add WEBHOOK to LOADED_PLUGINS to load)
+#-------------------------------------
 WEBHOOK_RUN='disabled'  # use 'on_notification' to enable
 WEBHOOK_URL='http://n8n.local:5555/webhook-test/aaaaaaaa-aaaa-aaaa-aaaaa-aaaaaaaaaaaa'
 WEBHOOK_PAYLOAD='json'                 # webhook payload data format for the "body > attachements > text" attribute 
@@ -52,15 +58,19 @@ WEBHOOK_PAYLOAD='json'                 # webhook payload data format for the "bo
 WEBHOOK_REQUEST_METHOD='GET'
 
 
-# Apprise
-#---------------------------
+# Apprise 
+#-------------------------------------
+# (add APPRISE to LOADED_PLUGINS to load)
+#-------------------------------------
 APPRISE_RUN='disabled'  # use 'on_notification' to enable
 APPRISE_HOST='http://localhost:8000/notify'
 APPRISE_URL='mailto://smtp-relay.sendinblue.com:587?from=user@gmail.com&name=apprise&user=user@gmail.com&pass=password&to=user@gmail.com'
 
 
 # NTFY
-#---------------------------
+#------------------------------------- 
+# (add NTFY to LOADED_PLUGINS to load)
+#-------------------------------------
 NTFY_RUN='disabled'  # use 'on_notification' to enable
 NTFY_HOST='https://ntfy.sh'
 NTFY_TOPIC='replace_my_secure_topicname_91h889f28'
@@ -68,14 +78,18 @@ NTFY_USER='user'
 NTFY_PASSWORD='passw0rd'
 
 
-# PUSHSAFER
-#---------------------------
+# PUSHSAFER 
+#-------------------------------------
+# (add PUSHSAFER to LOADED_PLUGINS to load)
+#-------------------------------------
 PUSHSAFER_RUN='disabled'  # use 'on_notification' to enable
 PUSHSAFER_TOKEN='ApiKey'
 
 
-# MQTT
-#---------------------------
+# MQTT 
+#-------------------------------------
+# (add MQTT to LOADED_PLUGINS to load)
+#-------------------------------------
 MQTT_RUN='disabled'  # use 'on_notification' to enable
 MQTT_BROKER='192.168.1.2'
 MQTT_PORT=1883

back/cron_script.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+export INSTALL_DIR=/app
+
+LOG_FILE="${INSTALL_DIR}/front/log/execution_queue.log"
+
+# Check if there are any entries with cron_restart_backend
+if grep -q "cron_restart_backend" "$LOG_FILE"; then
+  # Kill all python processes and restart the server
+  pkill -f "python " && (python ${INSTALL_DIR}/server > /dev/null 2>&1 &) && echo 'done'
+
+  # Remove all lines containing cron_restart_backend from the log file
+  sed -i '/cron_restart_backend/d' "$LOG_FILE"
+fi

back/pialert-cli

@@ -1,125 +0,0 @@
-#!/bin/bash
-SCRIPT=$(readlink -f $0)
-SCRIPTPATH=$(dirname $SCRIPT)
-CONFFILENAME="app.conf" 
-SETTING_NAME_TOGGLE="PIALERT_WEB_PROTECTION"
-SETTING_NAME_PWD="PIALERT_WEB_PASSWORD"
-PIA_CONF_FILE=${SCRIPTPATH}'/../config/${CONFFILENAME}'
-
-case $1 in
-
-  help)
-    echo "pialert-cli v0.1 (https://github.com/leiweibau/Pi.Alert)"
-    echo "Usage: pialert-cli <command>"
-    echo ""
-    echo "The is a list of supported commands:"
-    echo ""
-    echo " set_login                - Sets the parameter $SETTING_NAME_TOGGLE in the config file to TRUE"
-    echo "                          - If the parameter is not present, it will be created. Additionally the" 
-    echo "                            default password '123456' is set."
-    echo ""
-    echo " unset_login              - Sets the parameter $SETTING_NAME_TOGGLE in the config file to FALSE"
-    echo "                          - If the parameter is not present, it will be created. Additionally the"
-    echo "                            default password '123456' is set."
-    echo ""
-    echo " set_password <password>  - Sets the new password as a hashed value."
-    echo "                          - If the $SETTING_NAME_TOGGLE parameter does not exist yet, it will be"
-    echo "                            created and set to 'True' (login enabled)"
-    echo ""
-    echo " set_autopassword         - Sets a new random password as a hashed value and show it plaintext in"
-    echo "                            the console."
-    echo "                          - If the $SETTING_NAME_TOGGLE parameter does not exist yet, it will be"
-    echo "                            created and set to 'True' (login enabled)"
-    echo ""
-    echo ""
-    echo ""
-    ;;
-
-  set_login)
-    ## Check if $SETTING_NAME_TOGGLE exists
-    CHECK_PROT=$(grep "$SETTING_NAME_TOGGLE" $PIA_CONF_FILE | wc -l)
-    if [ $CHECK_PROT -eq 0 ]
-    then
-        ## Create $SETTING_NAME_TOGGLE and enable it
-        sed -i "/^VENDORS_DB.*/a $SETTING_NAME_TOGGLE = True" $PIA_CONF_FILE
-        sed -i "/^$SETTING_NAME_TOGGLE.*/a $SETTING_NAME_PWD = '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'" $PIA_CONF_FILE
-    else
-        ## Switch $SETTING_NAME_TOGGLE to enable
-        sed -i "/$SETTING_NAME_TOGGLE/c\$SETTING_NAME_TOGGLE = True" $PIA_CONF_FILE
-    fi
-    echo "Login is now enabled"
-    ;;
-
-  unset_login)
-    ## Check if $SETTING_NAME_TOGGLE exists
-    CHECK_PROT=$(grep "$SETTING_NAME_TOGGLE" $PIA_CONF_FILE | wc -l)
-    if [ $CHECK_PROT -eq 0 ]
-    then
-        ## Create $SETTING_NAME_TOGGLE and disable it
-        sed -i "/^VENDORS_DB.*/a $SETTING_NAME_TOGGLE = False" $PIA_CONF_FILE
-        sed -i "/^$SETTING_NAME_TOGGLE.*/a $SETTING_NAME_PWD = '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'" $PIA_CONF_FILE
-    else
-        ## Switch $SETTING_NAME_TOGGLE to disable
-        sed -i "/$SETTING_NAME_TOGGLE/c\$SETTING_NAME_TOGGLE = False" $PIA_CONF_FILE
-    fi
-    echo "Login is now disabled"
-    ;;
-
-  set_password)
-    PIA_PASS=$2
-    ## Check if $SETTING_NAME_TOGGLE exists
-    CHECK_PROT=$(grep "$SETTING_NAME_TOGGLE" $PIA_CONF_FILE | wc -l)
-    if [ $CHECK_PROT -eq 0 ]
-    then
-        ## Create $SETTING_NAME_TOGGLE and enable it
-        sed -i "/^VENDORS_DB.*/a $SETTING_NAME_TOGGLE = True" $PIA_CONF_FILE
-    fi
-    ## Prepare Hash
-    PIA_PASS_HASH=$(echo -n $PIA_PASS | sha256sum | awk '{print $1}')
-    echo "   The hashed password is:"
-    echo "   $PIA_PASS_HASH"
-    ## Check if the password parameter is set
-    CHECK_PWD=$(grep "$SETTING_NAME_PWD" $PIA_CONF_FILE | wc -l)
-    if [ $CHECK_PWD -eq 0 ]
-    then
-        sed -i "/^$SETTING_NAME_TOGGLE.*/a $SETTING_NAME_PWD = '$PIA_PASS_HASH'" $PIA_CONF_FILE
-    else
-        sed -i "/$SETTING_NAME_PWD/c\$SETTING_NAME_PWD = '$PIA_PASS_HASH'" $PIA_CONF_FILE
-    fi
-    echo ""
-    echo "The new password is set"
-    ;;
-
-  set_autopassword)
-    ## Check if $SETTING_NAME_TOGGLE exists
-    CHECK_PROT=$(grep "$SETTING_NAME_TOGGLE" $PIA_CONF_FILE | wc -l)
-    if [ $CHECK_PROT -eq 0 ]
-    then
-        ## Create $SETTING_NAME_TOGGLE and enable it
-        sed -i "/^VENDORS_DB.*/a $SETTING_NAME_TOGGLE = True" $PIA_CONF_FILE
-    fi
-    ## Create autopassword
-    PIA_AUTOPASS=$(cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 8 | head -n 1)
-    echo "   The password is: $PIA_AUTOPASS"
-    ## Prepare Hash
-    PIA_AUTOPASS_HASH=$(echo -n $PIA_AUTOPASS | sha256sum | awk '{print $1}')
-    echo "   The hashed password is:"
-    echo "   $PIA_AUTOPASS_HASH"
-    ## Check if the password parameter is set
-    CHECK_PWD=$(grep "$SETTING_NAME_PWD" $PIA_CONF_FILE | wc -l)
-    if [ $CHECK_PWD -eq 0 ]
-    then
-        ## Create password parameter
-        sed -i "/^$SETTING_NAME_TOGGLE.*/a $SETTING_NAME_PWD = '$PIA_AUTOPASS_HASH'" $PIA_CONF_FILE
-    else
-        ## Overwrite password parameter
-        sed -i "/$SETTING_NAME_PWD/c\$SETTING_NAME_PWD = '$PIA_AUTOPASS_HASH'" $PIA_CONF_FILE
-    fi
-    echo ""
-    echo "The new password is set"
-    ;;
-
-  *)
-    echo "pialert-cli v0.1 (https://github.com/leiweibau/Pi.Alert)"
-    echo "Use \"pialert-cli help\" for a list of supported commands."
-esac

back/update_vendors.sh

@@ -12,56 +12,31 @@
 # ----------------------------------------------------------------------
 #  Main directories to update:
 #    /usr/share/arp-scan
-#    /usr/share/ieee-data
-#    /var/lib/ieee-data
 # ----------------------------------------------------------------------
+
 echo "---------------------------------------------------------"
 echo "[INSTALL]                           Run update_vendors.sh"
 echo "---------------------------------------------------------"
 
-# ----------------------------------------------------------------------
-echo Updating... /usr/share/ieee-data/
-cd /usr/share/ieee-data/ || { echo "could not enter /usr/share/ieee-data directory"; exit 1; }
-
-sudo mkdir -p 2_backup
-sudo cp -- *.txt 2_backup
-sudo cp -- *.csv 2_backup
-echo ""
-echo Download Start
-echo ""
-sudo curl "$1" -LO https://standards-oui.ieee.org/oui28/mam.csv \              
-              -LO https://standards-oui.ieee.org/oui28/mam.csv \
-              -LO https://standards-oui.ieee.org/oui28/mam.txt \
-              -LO https://standards-oui.ieee.org/oui36/oui36.csv \
-              -LO https://standards-oui.ieee.org/oui36/oui36.txt \
-              -LO https://standards-oui.ieee.org/oui/oui.csv \
-              -LO https://standards-oui.ieee.org/oui/oui.txt
-echo ""
-echo Download Finished
+DL_DIR=/usr/share/arp-scan
 
 # ----------------------------------------------------------------------
-echo ""
-echo Updating... /usr/share/arp-scan/
-cd /usr/share/arp-scan || { echo "could not enter /usr/share/arp-scan directory"; exit 1; }
+echo Updating... $DL_DIR
+cd $DL_DIR || { echo "could not enter $DL_DIR directory"; exit 1; }
 
-sudo mkdir -p 2_backup
-sudo cp -- *.txt 2_backup
+# Define the URL of the IEEE OUI file
+IEEE_OUI_URL="http://standards-oui.ieee.org/oui/oui.txt"
 
-# Update from /usb/lib/ieee-data
-sudo get-iab -v
-sudo get-oui -v
+# Download the file using wget
+wget "$IEEE_OUI_URL" -O ieee-oui_dl.txt
 
-# make files readable
-sudo chmod +r /usr/share/arp-scan/ieee-oui.txt
+# Filter lines containing "(base 16)" and remove the "(base 16)" string
+grep "(base 16)" ieee-oui_dl.txt | sed 's/ *(base 16)//' > ieee-oui_new.txt
 
-# Update from ieee website
-# sudo get-iab -v -u http://standards-oui.ieee.org/iab/iab.txt
-# sudo get-oui -v -u http://standards-oui.ieee.org/oui/oui.txt
+# Combine ieee-oui_new.txt and ieee-oui.txt, and extract unique MAC start values along with vendor names
 
-# Update from ieee website develop
-# sudo get-iab -v -u http://standards.ieee.org/develop/regauth/iab/iab.txt
-# sudo get-oui -v -u http://standards.ieee.org/develop/regauth/oui/oui.txt
+cat ieee-oui.txt ieee-oui_new.txt >> ieee-oui_all.txt
+sort ieee-oui_all.txt > ieee-oui_all_sort.txt
+awk '{$1=$1; print}' ieee-oui_all_sort.txt | sort -u > ieee-oui_all_filtered.txt
 
-# Update from Sanitized oui (linuxnet.ca)
-# sudo get-oui -v -u https://linuxnet.ca/ieee/oui.txt
 

docker-compose.yml

@@ -12,11 +12,9 @@ services:
     # restart: unless-stopped
     volumes:
       # - ${APP_DATA_LOCATION}/netalertx_dev/config:/app/config
-      # - ${APP_DATA_LOCATION}/netalertx/config:/app/config
-      - ${APP_DATA_LOCATION}/netalertx/config:/home/pi/pialert/config
+      - ${APP_DATA_LOCATION}/netalertx/config:/app/config
       # - ${APP_DATA_LOCATION}/netalertx_dev/db:/app/db      
-      # - ${APP_DATA_LOCATION}/netalertx/db:/app/db           
-      - ${APP_DATA_LOCATION}/netalertx/db:/home/pi/pialert/db 
+      - ${APP_DATA_LOCATION}/netalertx/db:/app/db           
       # (optional) useful for debugging if you have issues setting up the container
       # - ${LOGS_LOCATION}:/app/front/log      
       # ---------------------------------------------------------------------------
@@ -28,13 +26,14 @@ services:
       - ${APP_DATA_LOCATION}/pihole/etc-pihole/pihole-FTL.db:/etc/pihole/pihole-FTL.db    
       - ${DEV_LOCATION}/server:/app/server            
       - ${DEV_LOCATION}/dockerfiles:/app/dockerfiles
-      - ${APP_DATA_LOCATION}/netalertx/php.ini:/etc/php/8.2/fpm/php.ini      
+      # - ${APP_DATA_LOCATION}/netalertx/php.ini:/etc/php/8.2/fpm/php.ini      
       - ${DEV_LOCATION}/install:/app/install
       - ${DEV_LOCATION}/front/css:/app/front/css
       - ${DEV_LOCATION}/front/img:/app/front/img
       - ${DEV_LOCATION}/back/update_vendors.sh:/app/back/update_vendors.sh
-      - ${DEV_LOCATION}/front/lib/AdminLTE:/app/front/lib/AdminLTE
+      - ${DEV_LOCATION}/front/lib:/app/front/lib
       - ${DEV_LOCATION}/front/js:/app/front/js
+      - ${DEV_LOCATION}/front/report_templates:/front/report_templates
       - ${DEV_LOCATION}/install/start.debian.sh:/app/install/start.debian.sh
       - ${DEV_LOCATION}/install/user-mapping.debian.sh:/app/install/user-mapping.debian.sh
       - ${DEV_LOCATION}/install/install.debian.sh:/app/install/install.debian.sh      
@@ -42,6 +41,7 @@ services:
       - ${DEV_LOCATION}/front/api:/app/front/api
       - ${DEV_LOCATION}/front/php:/app/front/php      
       - ${DEV_LOCATION}/front/deviceDetails.php:/app/front/deviceDetails.php
+      - ${DEV_LOCATION}/front/userNotifications.php:/app/front/userNotifications.php
       - ${DEV_LOCATION}/front/deviceDetailsTools.php:/app/front/deviceDetailsTools.php
       - ${DEV_LOCATION}/front/devices.php:/app/front/devices.php
       - ${DEV_LOCATION}/front/events.php:/app/front/events.php
@@ -54,6 +54,7 @@ services:
       - ${DEV_LOCATION}/front/presence.php:/app/front/presence.php
       - ${DEV_LOCATION}/front/settings.php:/app/front/settings.php      
       - ${DEV_LOCATION}/front/systeminfo.php:/app/front/systeminfo.php      
+      - ${DEV_LOCATION}/front/account.php:/app/front/account.php      
       - ${DEV_LOCATION}/front/report.php:/app/front/report.php      
       - ${DEV_LOCATION}/front/workflows.php:/app/front/workflows.php      
       - ${DEV_LOCATION}/front/appEventsCore.php:/app/front/appEventsCore.php      
@@ -63,7 +64,9 @@ services:
       # DELETE END anyone trying to use this file: comment out / delete ABOVE lines, they are only for development purposes
       # ---------------------------------------------------------------------------
     environment:
+      # - APP_CONF_OVERRIDE={"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_dark_mode":"True"}
       - TZ=${TZ}
-      - PORT=${PORT}
+      - PORT=${PORT}      
       # ❗ DANGER ZONE BELOW - Setting ALWAYS_FRESH_INSTALL=true will delete the content of the /db & /config folders
       - ALWAYS_FRESH_INSTALL=${ALWAYS_FRESH_INSTALL}
+      

dockerfiles/README.md

@@ -1,27 +1,28 @@
-[![GitHub Committed](https://img.shields.io/github/last-commit/jokob-sk/NetAlertX?color=40ba12&label=Committed&logo=GitHub&logoColor=fff)](https://github.com/jokob-sk/NetAlertX)
-[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/netalertx?label=Size&logo=Docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/netalertx)
-[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/netalertx?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/netalertx)
-![GitHub Release](https://img.shields.io/github/v/release/jokob-sk/NetAlertX?color=0aa8d2&logoColor=fff&logo=GitHub)
-[![GitHub Sponsors](https://img.shields.io/github/sponsors/jokob-sk?style=social)](https://github.com/sponsors/jokob-sk)
+[![GitHub Committed](https://img.shields.io/github/last-commit/jokob-sk/NetAlertX?color=40ba12&label=Committed&logo=GitHub&logoColor=fff&style=for-the-badge)](https://github.com/jokob-sk/NetAlertX)
+[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/netalertx?label=Size&logo=Docker&color=0aa8d2&logoColor=fff&style=for-the-badge)](https://hub.docker.com/r/jokobsk/netalertx)
+[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/netalertx?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff&style=for-the-badge)](https://hub.docker.com/r/jokobsk/netalertx)
+[![GitHub Release](https://img.shields.io/github/v/release/jokob-sk/NetAlertX?color=0aa8d2&logoColor=fff&logo=GitHub&style=for-the-badge)](https://github.com/jokob-sk/NetAlertX/releases)
+[![Discord](https://img.shields.io/discord/1274490466481602755?color=0aa8d2&logoColor=fff&logo=Discord&style=for-the-badge)](https://discord.gg/UQnnHNYV)
 
-# NetAlertX 💻🔍 Network security scanner & notification framework
+
+# NetAlertX 🖧🔍 Network scanner & notification framework
 
   | 🐳 [Docker hub](https://registry.hub.docker.com/r/jokobsk/netalertx) |  📑 [Docker guide](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md) |🆕 [Release notes](https://github.com/jokob-sk/NetAlertX/releases) | 📚 [All Docs](https://github.com/jokob-sk/NetAlertX/tree/main/docs) |
   |----------------------|----------------------| ----------------------|  ----------------------| 
 
-<a href="https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/devices_split.png" target="_blank">
-  <img src="https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/devices_split.png" width="300px" />
-</a>
-<a href="https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/network.png" target="_blank">
-  <img src="https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/network.png" width="300px" />
+<a href="https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/GENERAL/github_social_image.jpg" target="_blank">
+  <img src="https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/GENERAL/github_social_image.jpg" width="1000px" />
 </a>
 
+Head to [https://netalertx.com/](https://netalertx.com/) for more gifs and screenshots 📷.
+
 > [!NOTE]
 > There is also an experimental 🧪 [bare-metal install](https://github.com/jokob-sk/NetAlertX/blob/main/docs/HW_INSTALL.md) method available. 
 
 ## 📕 Basic Usage 
 
-- You will have to run the container on the `host` network, e.g: 
+> [!WARNING]
+> You will have to run the container on the `host` network.
 
 ```yaml
 docker run -d --rm --network=host \
@@ -40,7 +41,8 @@ docker run -d --rm --network=host \
 | `PORT`      |Port of the web interface  |  `20211` |
 | `LISTEN_ADDR`      |Set the specific IP Address for the listener address for the nginx webserver (web interface). This could be useful when using multiple subnets to hide the web interface from all untrusted networks. |  `0.0.0.0` |
 |`TZ` |Time zone to display stats correctly. Find your time zone [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)  |  `Europe/Berlin` |
-|`ALWAYS_FRESH_INSTALL` | Setting `ALWAYS_FRESH_INSTALL=true` will delete the content of the `/db` & `/config` folders. For testing purposes. Can be coupled with [watchtower](https://github.com/containrrr/watchtower) to have an always freshly installed `netalertx`/`-dev` image.   |    `N/A` |
+|`APP_CONF_OVERRIDE` | JSON override for settings, e.g. `{"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_dark_mode":"True"}` (Experimental 🧪)  |  `N/A` |
+|`ALWAYS_FRESH_INSTALL` | If `true` will delete the content of the `/db` & `/config` folders. For testing purposes. Can be coupled with [watchtower](https://github.com/containrrr/watchtower) to have an always freshly installed `netalertx`/`netalertx-dev` image.   |    `N/A` |
 
 ### Docker paths
 
@@ -66,26 +68,16 @@ docker run -d --rm --network=host \
 - You can modify [app.conf](https://github.com/jokob-sk/NetAlertX/tree/main/config) directly, if needed.
 - If unavailable, the app generates a default `app.conf` and `app.db` file on the first run.
 
-#### Important settings
+### ⚙ Important settings
 
-These are the most important settings to get at least some output in your Devices screen. Usually, only one approach is used, but you should be able to combine these approaches.
+These are the most important settings to get at least some output in your Devices screen. Usually, only one approach is used, but you can combine these approaches.
 
-##### For arp-scan: ARPSCAN_RUN, SCAN_SUBNETS
+| Scan method | Setting | Description |
+| :------------- | :------------- | :-------------| 
+| arp-scan, nmap-scan | `SCAN_SUBNETS` | See the documentation on how [to setup SUBNETS, VLANs & limitations](https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md) |
+| PiHole | `PIHOLE_RUN` | There are 2 approaches how to get PiHole devices imported. Via the PiHole import (`PIHOLE`) plugin or DHCP leases (`DHCPLSS`) plugin. The `PIHOLE` plugin requires you to map the PiHole database, as mentioned above. |
+| dhcp.leases | `DHCPLSS_RUN` | You need to map `:/etc/myfiles/dhcp.leases` in the `docker-compose.yml` file if you enable this setting. This path has to be matched with a corresponding `DHCPLSS_paths_to_check` setting entry (check the [DHCPLSS plugin readme](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/dhcp_leases#overview) for details). |
 
-- ❗ To use the arp-scan method, you need to set the `SCAN_SUBNETS` variable. See the documentation on how [to setup SUBNETS, VLANs & limitations](https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md) 
-
-##### For pihole: PIHOLE_RUN, DHCPLSS_RUN
-
-There are 2 approaches how to get PiHole devices imported. Via the PiHole import (PIHOLE) plugin or DHCP leases (DHCPLSS) plugin.
-
-**PiHole (Device sync)**
-
-* `PIHOLE_RUN`: You need to map `:/etc/pihole/pihole-FTL.db` in the `docker-compose.yml` file if you enable this setting.
-
-**DHCP Leases (Device import)**
-
-* `DHCPLSS_RUN`: You need to map `:/etc/pihole/dhcp.leases` in the `docker-compose.yml` file if you enable this setting. 
-* The above setting has to be matched with a corresponding `DHCPLSS_paths_to_check` setting entry (the path in the container must contain `pihole` as PiHole uses a different format of the `dhcp.leases` file).
 
 > [!NOTE]
 > It's recommended to use the same schedule interval for all plugins responsible for discovering new devices.
@@ -93,16 +85,18 @@ There are 2 approaches how to get PiHole devices imported. Via the PiHole import
 
 #### 🧭 Community guides
 
-Use the official installation guides at first and use community content as suplementary material. Open an issue if you'd like to add your link to the list 🙏 
+Use the official installation guides at first and use community content as supplementary material. Open an issue if you'd like to add your link to the list 🙏 
 
-- 📄 [How to Install Pi.Alert on Your Synology NAS - Marius hosting (English)](https://mariushosting.com/how-to-install-pi-alert-on-your-synology-nas/) (Updated frequently)
-- 📄 [Using the PiAlert Network Security Scanner on a Raspberry Pi - PiMyLifeUp (English)](https://pimylifeup.com/raspberry-pi-pialert/)
-- ▶ [How to Setup Pi.Alert on Your Synology NAS - Digital Aloha (English)](https://www.youtube.com/watch?v=M4YhpuRFaUg) 
-- 📄 [시놀/헤놀에서 네트워크 스캐너 Pi.Alert Docker로 설치 및 사용하기 (Korean)](https://blog.dalso.org/article/%EC%8B%9C%EB%86%80-%ED%97%A4%EB%86%80%EC%97%90%EC%84%9C-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%8A%A4%EC%BA%90%EB%84%88-pi-alert-docker%EB%A1%9C-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9) (July 2023)
+- ▶ [Home Lab Network Monitoring - Scotti-BYTE Enterprise Consulting Services](https://www.youtube.com/watch?v=0DryhzrQSJA) (July 2024)
+- 📄 [How to Install NetAlertX on Your Synology NAS - Marius hosting](https://mariushosting.com/how-to-install-pi-alert-on-your-synology-nas/) (Updated frequently)
+- 📄 [Using the PiAlert Network Security Scanner on a Raspberry Pi - PiMyLifeUp](https://pimylifeup.com/raspberry-pi-pialert/)
+- ▶ [How to Setup Pi.Alert on Your Synology NAS - Digital Aloha](https://www.youtube.com/watch?v=M4YhpuRFaUg) 
+- 📄 [防蹭网神器，网络安全助手 | 极空间部署网络扫描和通知系统『NetAlertX』](https://blog.csdn.net/qq_63499861/article/details/141105273)
+- 📄 [시놀/헤놀에서 네트워크 스캐너 Pi.Alert Docker로 설치 및 사용하기](https://blog.dalso.org/article/%EC%8B%9C%EB%86%80-%ED%97%A4%EB%86%80%EC%97%90%EC%84%9C-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%8A%A4%EC%BA%90%EB%84%88-pi-alert-docker%EB%A1%9C-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9) (July 2023)
 - 📄 [网络入侵探测器Pi.Alert (Chinese)](https://codeantenna.com/a/VgUvIAjZ7J) (May 2023)
-- ▶ [Pi.Alert auf Synology & Docker by - Jürgen Barth (German)](https://www.youtube.com/watch?v=-ouvA2UNu-A) (March 2023)
-- ▶ [Top Docker Container for Home Server Security - VirtualizationHowto (English)](https://www.youtube.com/watch?v=tY-w-enLF6Q) (March 2023)
-- ▶ [Pi.Alert or WatchYourLAN can alert you to unknown devices appearing on your WiFi or LAN network - Danie van der Merwe (English)](https://www.youtube.com/watch?v=v6an9QG2xF0) (November 2022)
+- ▶ [Pi.Alert auf Synology & Docker by - Jürgen Barth](https://www.youtube.com/watch?v=-ouvA2UNu-A) (March 2023)
+- ▶ [Top Docker Container for Home Server Security - VirtualizationHowto](https://www.youtube.com/watch?v=tY-w-enLF6Q) (March 2023)
+- ▶ [Pi.Alert or WatchYourLAN can alert you to unknown devices appearing on your WiFi or LAN network - Danie van der Merwe](https://www.youtube.com/watch?v=v6an9QG2xF0) (November 2022)
 
 > Ordered by last update time. 
  

dockerfiles/pre-setup.sh

@@ -5,12 +5,12 @@ export APP_NAME=netalertx
 
 # php-fpm setup
 install -d -o nginx -g www-data /run/php/
-sed -i "/^;pid/c\pid = /run/php/php8.2-fpm.pid" /etc/php82/php-fpm.conf
-sed -i "/^listen/c\listen = /run/php/php8.2-fpm.sock" /etc/php82/php-fpm.d/www.conf
-sed -i "/^;listen.owner/c\listen.owner = nginx" /etc/php82/php-fpm.d/www.conf
-sed -i "/^;listen.group/c\listen.group = www-data" /etc/php82/php-fpm.d/www.conf
-sed -i "/^user/c\user = nginx" /etc/php82/php-fpm.d/www.conf
-sed -i "/^group/c\group = www-data" /etc/php82/php-fpm.d/www.conf
+sed -i "/^;pid/c\pid = /run/php/php8.3-fpm.pid" /etc/php83/php-fpm.conf
+sed -i "/^listen/c\listen = /run/php/php8.3-fpm.sock" /etc/php83/php-fpm.d/www.conf
+sed -i "/^;listen.owner/c\listen.owner = nginx" /etc/php83/php-fpm.d/www.conf
+sed -i "/^;listen.group/c\listen.group = www-data" /etc/php83/php-fpm.d/www.conf
+sed -i "/^user/c\user = nginx" /etc/php83/php-fpm.d/www.conf
+sed -i "/^group/c\group = www-data" /etc/php83/php-fpm.d/www.conf
 
 # s6 overlay setup
 mkdir -p /etc/s6-overlay/s6-rc.d/{SetupOneshot,php-fpm/dependencies.d,nginx/dependencies.d}
@@ -20,17 +20,17 @@ echo "longrun" > /etc/s6-overlay/s6-rc.d/php-fpm/type
 echo "longrun" > /etc/s6-overlay/s6-rc.d/nginx/type
 echo "longrun" > /etc/s6-overlay/s6-rc.d/$APP_NAME/type
 echo -e "${INSTALL_DIR}/dockerfiles/setup.sh" > /etc/s6-overlay/s6-rc.d/SetupOneshot/up
-echo -e "#!/bin/execlineb -P\n/usr/sbin/php-fpm82 -F" > /etc/s6-overlay/s6-rc.d/php-fpm/run
+echo -e "#!/bin/execlineb -P\n/usr/sbin/php-fpm83 -F" > /etc/s6-overlay/s6-rc.d/php-fpm/run
 echo -e '#!/bin/execlineb -P\nnginx -g "daemon off;"' > /etc/s6-overlay/s6-rc.d/nginx/run
 echo -e '#!/bin/execlineb -P
         with-contenv
 
         importas -u PORT PORT
-       
-        if { echo 
+
+        if { echo
         "
             [INSTALL] 🚀 Starting app (:${PORT})
-            
+
         " }' > /etc/s6-overlay/s6-rc.d/$APP_NAME/run
 echo -e "python ${INSTALL_DIR}/server" >> /etc/s6-overlay/s6-rc.d/$APP_NAME/run
 touch /etc/s6-overlay/s6-rc.d/user/contents.d/{SetupOneshot,php-fpm,nginx} /etc/s6-overlay/s6-rc.d/{php-fpm,nginx}/dependencies.d/SetupOneshot
@@ -38,4 +38,6 @@ touch /etc/s6-overlay/s6-rc.d/user/contents.d/{SetupOneshot,php-fpm,nginx,$APP_N
 touch /etc/s6-overlay/s6-rc.d/nginx/dependencies.d/php-fpm
 touch /etc/s6-overlay/s6-rc.d/$APP_NAME/dependencies.d/nginx
 
+
+
 rm -f $0

dockerfiles/setup.sh

@@ -8,7 +8,7 @@ export INSTALL_DIR=/app  # Specify the installation directory here
 
 # DO NOT CHANGE ANYTHING BELOW THIS LINE!
 
-CONF_FILE="app.conf" 
+CONF_FILE="app.conf"
 NGINX_CONF_FILE=netalertx.conf
 DB_FILE="app.db"
 FULL_FILEDB_PATH="${INSTALL_DIR}/db/${DB_FILE}"
@@ -28,19 +28,29 @@ fi
 
 echo "[INSTALL] Copy starter ${DB_FILE} and ${CONF_FILE} if they don't exist"
 
-# DANGER ZONE: ALWAYS_FRESH_INSTALL 
+# DANGER ZONE: ALWAYS_FRESH_INSTALL
 if [ "$ALWAYS_FRESH_INSTALL" = true ]; then
   echo "[INSTALL] ❗ ALERT /db and /config folders are cleared because the ALWAYS_FRESH_INSTALL is set to: $ALWAYS_FRESH_INSTALL❗"
-  
+
   # Delete content of "$INSTALL_DIR/config/"
   rm -rf "$INSTALL_DIR/config/"*
   rm -rf "$INSTALL_DIR_OLD/config/"*
-  
+
   # Delete content of "$INSTALL_DIR/db/"
   rm -rf "$INSTALL_DIR/db/"*
   rm -rf "$INSTALL_DIR_OLD/db/"*
 fi
 
+# OVERRIDE settings: Handling APP_CONF_OVERRIDE
+# Check if APP_CONF_OVERRIDE is set
+if [ -z "$APP_CONF_OVERRIDE" ]; then
+  echo "APP_CONF_OVERRIDE is not set. Skipping config file creation."
+else
+  # Save the APP_CONF_OVERRIDE env variable as a JSON file
+  echo "$APP_CONF_OVERRIDE" > "${INSTALL_DIR}/config/app_conf_override.json"
+  echo "Config file saved to ${INSTALL_DIR}/config/app_conf_override.json"
+fi
+
 # 🔻 FOR BACKWARD COMPATIBILITY - REMOVE AFTER 12/12/2024
 
 # Check if pialert.db exists, then create a symbolic link to app.db
@@ -61,11 +71,11 @@ cp -na "${INSTALL_DIR}/back/${DB_FILE}" "${FULL_FILEDB_PATH}"
 # if custom variables not set we do not need to do anything
 if [ -n "${TZ}" ]; then
   FILECONF="${INSTALL_DIR}/config/${CONF_FILE}"
-  echo "[INSTALL] Setup timezone" 
+  echo "[INSTALL] Setup timezone"
   sed -i "\#^TIMEZONE=#c\TIMEZONE='${TZ}'" "${FILECONF}"
 
   # set TimeZone in container
-  cp /usr/share/zoneinfo/$TZ /etc/localtime 
+  cp /usr/share/zoneinfo/$TZ /etc/localtime
   echo $TZ > /etc/timezone
 fi
 
@@ -92,10 +102,13 @@ fi
 
 # Create an empty log files
 # Create the execution_queue.log and app_front.log files if they don't exist
-touch "${INSTALL_DIR}"/front/log/{app.log,execution_queue.log,app_front.log,app.php_errors.log,stderr.log,stdout.log}
+touch "${INSTALL_DIR}"/front/log/{app.log,execution_queue.log,app_front.log,app.php_errors.log,stderr.log,stdout.log,db_is_locked.log}
+touch "${INSTALL_DIR}"/front/api/user_notifications.json
 
 echo "[INSTALL] Fixing permissions after copied starter config & DB"
-chown -R nginx:www-data "${INSTALL_DIR}"/{config,front/log,db}
+chown -R nginx:www-data "${INSTALL_DIR}"/{config,front/log,db,front/api}
+chown -R nginx:www-data "${INSTALL_DIR}"/front/api/user_notifications.json
+
 chmod 750 "${INSTALL_DIR}"/{config,front/log,db}
 find "${INSTALL_DIR}"/{config,front/log,db} -type f -exec chmod 640 {} \;
 
@@ -106,10 +119,14 @@ if [ ! -f "${INSTALL_DIR}/front/buildtimestamp.txt" ]; then
     chown nginx:www-data "${INSTALL_DIR}/front/buildtimestamp.txt"
 fi
 
+# Start crond service in the background
+echo "[INSTALL] Starting crond service..."
+crond -f -d 8 > /dev/null 2>&1 &
+
 echo -e "
-            [ENV] PATH                      is ${PATH} 
-            [ENV] PORT                      is ${PORT} 
-            [ENV] TZ                        is ${TZ} 
-            [ENV] LISTEN_ADDR               is ${LISTEN_ADDR} 
-            [ENV] ALWAYS_FRESH_INSTALL      is ${ALWAYS_FRESH_INSTALL} 
+            [ENV] PATH                      is ${PATH}
+            [ENV] PORT                      is ${PORT}
+            [ENV] TZ                        is ${TZ}
+            [ENV] LISTEN_ADDR               is ${LISTEN_ADDR}
+            [ENV] ALWAYS_FRESH_INSTALL      is ${ALWAYS_FRESH_INSTALL}
         "

docs/AUTHELIA.md

@@ -0,0 +1,275 @@
+(DRAFT) Authelia support
+
+
+
+```yaml
+theme: dark
+
+default_2fa_method: "totp"
+
+server:
+  address: 0.0.0.0:9091
+  endpoints:
+    enable_expvars: false
+    enable_pprof: false
+    authz:
+      forward-auth:
+        implementation: 'ForwardAuth'
+        authn_strategies:
+          - name: 'HeaderAuthorization'
+            schemes:
+              - 'Basic'
+          - name: 'CookieSession'
+      ext-authz:
+        implementation: 'ExtAuthz'
+        authn_strategies:
+          - name: 'HeaderAuthorization'
+            schemes:
+              - 'Basic'
+          - name: 'CookieSession'
+      auth-request:
+        implementation: 'AuthRequest'
+        authn_strategies:
+          - name: 'HeaderAuthRequestProxyAuthorization'
+            schemes:
+              - 'Basic'
+          - name: 'CookieSession'
+      legacy:
+        implementation: 'Legacy'
+        authn_strategies:
+          - name: 'HeaderLegacy'
+          - name: 'CookieSession'
+  disable_healthcheck: false
+  tls:
+    key: ""
+    certificate: ""
+    client_certificates: []
+  headers:
+    csp_template: ""
+
+log:
+  ## Level of verbosity for logs: info, debug, trace.
+  level: info
+
+###############################################################
+# The most important section
+###############################################################
+access_control:
+  ## Default policy can either be 'bypass', 'one_factor', 'two_factor' or 'deny'.
+  default_policy: deny
+  networks:
+    - name: internal
+      networks:
+        - '192.168.0.0/18'
+        - '10.10.10.0/8' # Zerotier
+    - name: private
+      networks:
+        - '172.16.0.0/12'
+  rules:
+    - networks:
+        - private
+      domain:
+        - '*'
+      policy: bypass
+    - networks:
+        - internal
+      domain:
+        - '*'
+      policy: bypass
+    - domain:
+        # exclude itself from auth, should not happen as we use Traefik middleware on a case-by-case screnario
+        - 'auth.MYDOMAIN1.TLD'
+        - 'authelia.MYDOMAIN1.TLD'
+        - 'auth.MYDOMAIN2.TLD'
+        - 'authelia.MYDOMAIN2.TLD'
+      policy: bypass
+    - domain:
+        #All subdomains match
+        - 'MYDOMAIN1.TLD'
+        - '*.MYDOMAIN1.TLD'
+      policy: two_factor
+    - domain:
+        # This will not work yet as Authelio does not support multi-domain authentication
+        - 'MYDOMAIN2.TLD'
+        - '*.MYDOMAIN2.TLD'
+      policy: two_factor
+
+
+############################################################
+identity_validation:
+  reset_password:
+    jwt_secret: "[REDACTED]"
+
+identity_providers:
+  oidc:
+    enable_client_debug_messages: true
+    enforce_pkce: public_clients_only
+    hmac_secret: [REDACTED]
+    lifespans:
+      authorize_code: 1m
+      id_token: 1h
+      refresh_token: 90m
+      access_token: 1h
+    cors:
+      endpoints:
+        - authorization
+        - token
+        - revocation
+        - introspection
+        - userinfo
+      allowed_origins:
+        - "*"
+      allowed_origins_from_client_redirect_uris: false
+    jwks:
+      - key: [REDACTED]
+        certificate_chain:
+    clients:
+      - client_id: portainer
+        client_name: Portainer
+        # generate secret with "authelia crypto hash generate pbkdf2 --random --random.length 32 --random.charset alphanumeric"
+        # Random Password: [REDACTED]
+        # Digest: [REDACTED]
+        client_secret: [REDACTED]
+        token_endpoint_auth_method: 'client_secret_post'
+        public: false
+        authorization_policy: two_factor
+        consent_mode: pre-configured #explicit
+        pre_configured_consent_duration: '6M' #Must be re-authorised every 6 Months
+        scopes:
+          - openid
+          #- groups #Currently not supported in Authelia V
+          - email
+          - profile
+        redirect_uris:
+          - https://portainer.MYDOMAIN1.LTD
+        userinfo_signed_response_alg: none
+
+      - client_id: openproject
+        client_name: OpenProject
+        # generate secret with "authelia crypto hash generate pbkdf2 --random --random.length 32 --random.charset alphanumeric"
+        # Random Password: [REDACTED]
+        # Digest: [REDACTED]
+        client_secret: [REDACTED]
+        token_endpoint_auth_method: 'client_secret_basic'
+        public: false
+        authorization_policy: two_factor
+        consent_mode: pre-configured #explicit
+        pre_configured_consent_duration: '6M' #Must be re-authorised every 6 Months
+        scopes:
+          - openid
+          #- groups #Currently not supported in Authelia V
+          - email
+          - profile
+        redirect_uris:
+          - https://op.MYDOMAIN.TLD
+        #grant_types:
+        #  - refresh_token
+        #  - authorization_code
+        #response_types:
+        #  - code
+        #response_modes:
+        #  - form_post
+        #  - query
+        #  - fragment
+        userinfo_signed_response_alg: none
+##################################################################
+
+
+telemetry:
+  metrics:
+    enabled: false
+    address: tcp://0.0.0.0:9959
+
+totp:
+  disable: false
+  issuer: authelia.com
+  algorithm: sha1
+  digits: 6
+  period: 30 ## The period in seconds a one-time password is valid for.
+  skew: 1
+  secret_size: 32
+
+webauthn:
+  disable: false
+  timeout: 60s ## Adjust the interaction timeout for Webauthn dialogues.
+  display_name: Authelia
+  attestation_conveyance_preference: indirect
+  user_verification: preferred
+
+ntp:
+  address: "pool.ntp.org"
+  version: 4
+  max_desync: 5s
+  disable_startup_check: false
+  disable_failure: false
+
+authentication_backend:
+  password_reset:
+    disable: false
+    custom_url: ""
+  refresh_interval: 5m
+  file:
+    path: /config/users_database.yml
+    watch: true
+    password:
+      algorithm: argon2
+      argon2:
+        variant: argon2id
+        iterations: 3
+        memory: 65536
+        parallelism: 4
+        key_length: 32
+        salt_length: 16
+
+password_policy:
+  standard:
+    enabled: false
+    min_length: 8
+    max_length: 0
+    require_uppercase: true
+    require_lowercase: true
+    require_number: true
+    require_special: true
+  ## zxcvbn is a well known and used password strength algorithm. It does not have tunable settings.
+  zxcvbn:
+    enabled: false
+    min_score: 3
+
+regulation:
+  max_retries: 3
+  find_time: 2m
+  ban_time: 5m
+
+session:
+  name: authelia_session
+  secret: [REDACTED]
+  expiration: 60m
+  inactivity: 15m
+  cookies:
+    - domain: 'MYDOMAIN1.LTD'
+      authelia_url: 'https://auth.MYDOMAIN1.LTD'
+      name: 'authelia_session'
+      default_redirection_url: 'https://MYDOMAIN1.LTD'
+    - domain: 'MYDOMAIN2.LTD'
+      authelia_url: 'https://auth.MYDOMAIN2.LTD'
+      name: 'authelia_session_other'
+      default_redirection_url: 'https://MYDOMAIN2.LTD'
+
+storage:
+  encryption_key: [REDACTED]
+  local:
+    path: /config/db.sqlite3
+
+notifier:
+  disable_startup_check: true
+  smtp:
+    address: MYOTHERDOMAIN.LTD:465
+    timeout: 5s
+    username: "USER@DOMAIN"
+    password: "[REDACTED]"
+    sender: "Authelia <postmaster@MYOTHERDOMAIN.LTD>"
+    identifier: NAME@MYOTHERDOMAIN.LTD
+    subject: "[Authelia] {title}"
+    startup_check_address: postmaster@MYOTHERDOMAIN.LTD
+
+```

docs/BACKUPS.md

@@ -8,10 +8,10 @@ There are 3 artifacts that can be used to backup the application:
 | File                  | Description                   | Limitations                   |
 |-----------------------|-------------------------------|-------------------------------|
 | `/db/app.db`       | Database file(s)  | The database file might be in an uncommitted state or corrupted |
-| `/config/app.conf` | Configuration file |   Doesn't contain settings from the Maintenance section        |
+| `/config/app.conf` | Configuration file |  Can be overridden with the [`APP_CONF_OVERRIDE` env variable](https://github.com/jokob-sk/NetAlertX/tree/main/dockerfiles#docker-environment-variables).  |
 | `/config/devices.csv`  | CSV file containing device information |     Doesn't contain historical data        |
 
-## Data and cackup storage
+## Data and backup storage
 
 To decide on a backup strategy, check where the data is stored:
 

docs/DATABASE.md

@@ -17,7 +17,7 @@
   | Pholus_Scan      | Scan results of the Pholus python network penetration script. | ![Screen8][screen8]  |   
   | Plugins_Events   | For capturing events exposed by a plugin via the `last_result.log` file. If unique then saved into the `Plugins_Objects` table. Entries are deleted once processed and stored in the `Plugins_History` and/or `Plugins_Objects` tables.  | ![Screen10][screen10]  | 
   | Plugins_History  | History of all entries from the `Plugins_Events` table | ![Screen11][screen11]  | 
-  | Plugins_Language_Strings  | Language strings colelcted from the plugin `config.json` files used for string resolution in the frontend. | ![Screen12][screen12]  | 
+  | Plugins_Language_Strings  | Language strings collected from the plugin `config.json` files used for string resolution in the frontend. | ![Screen12][screen12]  | 
   | Plugins_Objects  | Unique objects detected by individual plugins. | ![Screen13][screen13]  | 
   | Sessions  | Used to display sessions in the charts | ![Screen15][screen15]  | 
   | Settings  | Database representation of the sum of all settings from `app.conf` and plugins coming from `config.json` files. | ![Screen16][screen16]  | 

docs/DEBUG_TIPS.md

@@ -6,7 +6,7 @@ Please follow tips 1 - 4 to get a more detailed error.
 
 When debugging an issue always set the highest log level:
 
-`LOG_LEVEL='debug'`
+`LOG_LEVEL='trace'`
 
 
 ## 2. Surfacing errors when container restarts 🔁
@@ -81,3 +81,7 @@ sudo dpkg -i libseccomp2_2.5.3-2_armhf.deb
 ```
 
 The link above will probably break in time too. Go to https://packages.debian.org/sid/armhf/libseccomp2/download to find the new version number and put that in the url.
+
+### Only Router and own device show up
+
+Make sure that the subnet and interface in SCAN_SUBNETS are the correct ones. If your device/NAS has multiple ethernet ports, you probably need to change eth0 to something else!

docs/DEVICE_MANAGEMENT.md

@@ -33,7 +33,7 @@ To edit device information:
 ## Session Info
   - **Status**: Show device status : On-line / Off-Line
   - **First Session**: Date and time of the first connection
-  - **Last Session**: Date and time of the last connection
+  - **Last Offline**: Date and time of the last last time the device was offline
   - **Last IP**: Last known IP used during the last connection
   - **Static IP**: Check this box to identify devices that always use the
       same IP

docs/DEV_ENV_SETUP.md

@@ -0,0 +1,70 @@
+## Development environment set up
+
+>[!NOTE]
+> Replace `/development` with the path where your code files will be stored. The default container name is `netalertx` so there might be a conflict with your running containers.
+
+## 1. Download the code:
+
+- `mkdir /development`
+- `cd /development && git clone https://github.com/jokob-sk/NetAlertX.git`
+
+## 2. Create a DEV .env_dev file
+
+`touch /development/.env_dev && sudo nano /development/.env_dev`
+
+The file content should be following, with your custom values.
+
+```yaml
+#--------------------------------
+#NETALERTX
+#--------------------------------
+TZ=Europe/Berlin
+PORT=22222    # make sure this port is unique on your whole network
+DEV_LOCATION=/development/NetAlertX
+APP_DATA_LOCATION=/volume/docker_appdata
+# ALWAYS_FRESH_INSTALL=true # uncommenting this will always delete the content of /config and /db dirs on boot to simulate a fresh install
+```
+
+## 3. Create /db and /config dirs 
+
+Create a folder `netalertx` in the `APP_DATA_LOCATION` (in this example in `/volume/docker_appdata`) with 2 subfolders `db` and `config`. 
+
+- `mkdir /volume/docker_appdata/netalertx`
+- `mkdir /volume/docker_appdata/netalertx/db`
+- `mkdir /volume/docker_appdata/netalertx/config`
+
+## 4. Run the container
+
+- `cd /development/NetAlertX &&  sudo docker-compose --env-file ../.env_dev `
+
+You can then modify the python script without restarting/rebuilding the container every time. Additionally, you can trigger a plugin run via the UI:
+
+![image](https://github.com/jokob-sk/NetAlertX/assets/96159884/3cbf2748-03c8-49e7-b801-f38c7755246b)
+
+
+## 💡 Tips
+
+A quick cheat sheet of useful commands. 
+
+### Removing the container and image 
+
+A command to stop, remove the container and the image (replace `netalertx` and `netalertx-netalertx` with the appropriate values)
+
+- `sudo docker container stop netalertx ; sudo docker container rm netalertx ; sudo docker image rm netalertx-netalertx`
+
+### Restart the server backend
+
+Most code changes can be tetsed without rebuilding the container. When working on the python server backend, you only need to restart the server.
+
+1. You can usually restart the backend via Maintenance > Logs > Restart server
+
+![image](/docs/img/DEV_ENV_SETUP/Maintenance_Logs_Restart_server.png)
+
+2. If above doesn't work, SSH into the container and kill & restart the main script loop 
+
+- `sudo docker exec -it netalertx /bin/bash`
+- `pkill -f "python /app/server" && python /app/server & `
+
+3. If none of the above work, restart the docker image. This is usually the last resort as sometimes the Docker engine becomes unresponsive and the whole engine needs to be restarted. 
+
+

docs/FILE_PERMISSIONS.md

@@ -0,0 +1,41 @@
+# Managing File Permissions for NetAlertX on Nginx with Docker
+
+> [!TIP]
+> If you are facing permission issues, try to start the container without mapping your volumes. If that works, then the issue is permission related. You can try e.g., the following command: 
+>  ``` 
+>  docker run -d --rm --network=host \
+>  -e TZ=Europe/Berlin \
+>  -e PORT=20211 \
+>  jokobsk/netalertx:latest
+> ```
+NetAlertX runs on an Nginx web server. On Alpine Linux, Nginx operates as the `nginx` user (user ID 101, group ID 82 - `www-data`). Consequently, files accessed or written by the NetAlertX application are owned by `nginx:www-data`.
+
+Upon starting, NetAlertX changes the ownership of files on the host system mapped to `/app/config` and `/app/db` in the container to `nginx:www-data`. This ensures that Nginx can access and write to these files. Since the user in the Docker container is mapped to a user on the host system by ID:GID, the files in `/app/config` and `/app/db` on the host system are owned by a user with the same ID and GID (ID 101 and GID 82). On different systems, this ID:GID may belong to different users (on Debian, the user with ID 82 is `uuidd`), or there may not be a user with ID 82 at all.
+
+While this generally isn't problematic, it can cause issues for host system users needing to access these files (e.g., backup scripts). If users other than root need access to these files, it is recommended to add those users to the group with GID 82. If that group doesn't exist, it should be created.
+
+### Permissions Table for Individual Folders
+
+| Folder         | User   | User ID | Group     | Group ID | Permissions | Notes                                                               |
+|----------------|--------|---------|-----------|----------|-------------|---------------------------------------------------------------------|
+| `/app/config`  | nginx  | 101     | www-data  | 82       | rwxr-xr-x   | Ensure `nginx` can read/write; other users can read if in `www-data` |
+| `/app/db`      | nginx  | 101     | www-data  | 82       | rwxr-xr-x   | Same as above                                                       |
+
+### Steps to Add Users to Group
+
+1. **Check if group exists:**
+    ```sh
+    getent group www-data
+    ```
+
+2. **Create group if it does not exist:**
+    ```sh
+    sudo groupadd -g 82 www-data
+    ```
+
+3. **Add user to group:**
+    ```sh
+    sudo usermod -aG www-data <username>
+    ```
+
+Replace `<username>` with the actual username that requires access.

docs/FRONTEND_DEVELOPMENT.md

@@ -38,7 +38,7 @@ Some examples how to apply the above:
 
 Some useful frontend JavaScript functions:
 
-- `getDeviceDataByMacAddress(macAddress, devicesColumn)` - method to retrieve any device data (database column) based on MAC address in the frontend 
+- `getDeviceDataByMac(macAddress, devicesColumn)` - method to retrieve any device data (database column) based on MAC address in the frontend 
 - `getString(string stringKey)` - method to retrieve translated strings in the frontend 
 - `getSetting(string stringKey)` - method to retrieve settings in the frontend 
 

docs/HOME_ASSISTANT.md

@@ -6,6 +6,7 @@ NetAlertX comes with MQTT support, allowing you to show all detected devices as
 
 - Please note that discovery takes about ~10s per device.
 - Deleting of devices is not handled automatically. Please use [MQTT Explorer](https://mqtt-explorer.com/) to delete devices in the broker (Home Assistant), if needed. 
+- For optimization reasons, the devices are not always fully synchronized. You can delete Plugin objects as described in the [MQTT plugin](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_mqtt#forcing-an-update) docs to force a full synchronization.
 
 
 ## 🧭 Guide

docs/MIGRATION.md

@@ -1,9 +1,27 @@
 # Migration form PiAlert to NetAlertX
 
-> [!TIP] 
-> In short: The application will auto-migrate the database, config, and all device information. A ticker message on top will be displayed until you update your docker mount points. Even so, it's always good to have a [backup strategy](https://github.com/jokob-sk/NetAlertX/blob/main/docs/BACKUPS.md) in place.
+> [!WARNING] 
+> Follow this guide only after you you downloaded and started NetAlert X at least once after previously using the PiAlert image.
 
-The migration should be pretty straightforward. The application installation folder in the docker container has changed from `/home/pi/pialert` to `/app`. That means the new mount points are:
+## STEPS: 
+
+> [!TIP] 
+> In short: The application will auto-migrate the database, config, and all device information. A ticker message on top will be displayed until you update your docker mount points. It's always good to have a [backup strategy](https://github.com/jokob-sk/NetAlertX/blob/main/docs/BACKUPS.md) in place.
+
+1. Backup your current config and database (optional `devices.csv` to have a backup) (See bellow tip if facing issues)
+2. Stop the container 
+2. Update the Docker file mount locations in your `docker-compose.yml` or docker run command (See bellow **New Docker mount locations**). 
+3. Rename the DB and conf files to `app.db` and `app.conf` and place them in the appropriate location.
+4. Start the Container
+
+
+> [!TIP] 
+> If you have troubles accessing past backups, config or database files you can copy them into the newly mapped directories, for example by running this command in the container:  `cp -r /app/config /home/pi/pialert/config/old_backup_files`. This should create a folder in the `config` directory called `old_backup_files` conatining all the files in that location. Another approach is to map the old location and the new one at the same time to copy things over. 
+
+
+### New Docker mount locations
+
+The application installation folder in the docker container has changed from `/home/pi/pialert` to `/app`. That means the new mount points are:
 
  | Old mount point | New mount point | 
  |----------------------|---------------| 
@@ -22,8 +40,10 @@ The migration should be pretty straightforward. The application installation fol
 > [!NOTE] 
 > The application uses symlinks linking the old db and config locations to the new ones, so data loss should not occur. [Backup strategies](https://github.com/jokob-sk/NetAlertX/blob/main/docs/BACKUPS.md) are still recommended to backup your setup.
 
-In summary, docker file mount locations in your `docker-compose.yml` or docker run command have changed. Examples follow.
 
+# Examples
+
+Exmaples of docker files with the new mount points.
 
 ## Example 1: Mapping folders
 

docs/NOTIFICATIONS.md

@@ -0,0 +1,55 @@
+# Notifications 📧
+
+There are 4 ways how to influence notifications:
+
+1. On the device itself
+2. On the settings of the plugin
+3. Globally
+4. Ignoring devices
+
+> [!NOTE]
+> It's recommended to use the same schedule interval for all plugins responsible for scanning devices, otherwise false positives might be reported if different devices are discovered by different plugins. Check the **Settings** > **Enabled settings** section for a warning:
+> ![Schedules out-of-sync](/docs/img/NOTIFICATIONS/Schedules_out-of-sync.png)
+
+
+## Device settings 💻
+
+![Device notification settings](/docs/img/NOTIFICATIONS/Device-notification-settings.png)
+
+There are 4 settings on the device for influencing notifications. You can:
+
+1. Completely disable the scanning of the device
+2. **Alert all events**, connections, disconnections, IP changes (noisy, usually not recommended)
+3. **Alert down** - alerts when a device goes down. This setting overrides disabled Alert All Events, so you will get a notification of a device going down even if you don't have Alert All Events ticked.
+4. **Skip repeated notifications**, if for example you know there is a temporary issue and want to pause the same notification for this device for a given time.
+
+## Plugin settings 🔌
+
+![Plugin notification settings](/docs/img/NOTIFICATIONS/Plugin-notification-settings.png)
+
+On almost all plugins there are 2 core settings, `<plugin>_WATCH` and `<plugin>_REPORT_ON`. 
+
+1. `<plugin>_WATCH` specifies the columns which the app should watch. If watched columns change the device state is considered changed. This changed status is then used to decide to send out notifications based on the `<plugin>_REPORT_ON` setting. 
+2. `<plugin>_REPORT_ON` let's you specify on which events the app should notify you. This is related to the `<plugin>_WATCH` setting. So if you select `watched-changed` and in `<plugin>_WATCH` you only select `Watched_Value1`, then a notification is triggered if `Watched_Value1` is changed from the previous value, but no notification is send if `Watched_Value2` changes. 
+
+Click the **Read more in the docs.** Link at the top of each plugin to get more details on how the given plugin works. 
+
+## Global settings ⚙
+
+![Global notification settings](/docs/img/NOTIFICATIONS/Global-notification-settings.png)
+
+In Notification Processing settings, you can specify blanket rules. These allow you to specify exceptions to the Plugin and Device settings and will override those.
+
+1. Notify on (`NTFPRCS_INCLUDED_SECTIONS`) allows you to specify which events trigger notifications. Usual setups will have `new_devices`, `down_devices`, and possibly `events` set. Setting `plugin` might be too noisy for most setups. More info in the [NTFPRCS plugin](/front/plugins/notification_processing/README.md)
+2. Alert down after (`NTFPRCS_alert_down_time`) is useful if you want to wait for some time before the system sends out a down notification for a device. This is related to the on-device **Alert down** setting and only devices with this checked will trigger a down notification.
+3. A filter to allow you to set device-specific exceptions to New devices being added to the app.
+4. A filter to allow you to set device-specific exceptions to generated Events.
+
+## Ignoring devices 🔕
+
+![Ignoring new devices](/docs/img/NOTIFICATIONS/NEWDEV_ignores.png)
+
+You can completely ignore detected devices globally. This could be because your instance detects docker containers, you want to ignore devices from a specific manufacturer via MAC rules or you want to ignore devices on a specific IP range. 
+
+1. Ignored MACs (`NEWDEV_ignored_MACs`) - List of MACs to ignore.
+2. Ignored IPs (`NEWDEV_ignored_IPs`) - List of IPs to ignore. 

docs/PERFORMANCE.md

@@ -0,0 +1,24 @@
+# Performance tips
+
+The application runs regular maintenance and DB cleanup tasks. If these tasks fail, you might encounter performance issues. 
+
+Most performance issues are caused by a big database or large log files. Enabling unnecessary plugins will also lead to performance degradation. 
+
+You can always check the size of your database and database tables under the Maintenance page. 
+
+![Db size check](/docs/img/PERFORMANCE/db_size_check.png)
+
+> [!NOTE]
+> For around 100 devices the database should be approximately `50MB` and none of the entries (rows) should exceed the value of `10 000` on a healthy system. These numbers will depend on your network activity and settings. 
+
+## Maintenance plugins
+
+There are 2 plugins responsible for maintaining the overal health of the application. One is responsible for the database cleanup and one for other tasks, such as log cleanup. 
+
+### DB Cleanup (DBCLNP)
+
+The database cleanup plugin. Check details and related setting in the [DB Cleanup plugin docs](/front/plugins/db_cleanup/README.md). Make sure the plugin is not failing by checking the logs. Try changing the schedule `DBCLNP_RUN_SCHD` and the timeout `DBCLNP_RUN_TIMEOUT` (increase) if the plugin is failing to execute.
+
+### Maintenance (MAINT)
+
+The maintenance plugin. Check details and related setting in the [Maintenance plugin docs](/front/plugins/maintenance/README.md). Make sure the plugin is not failing by checking the logs. Try changing the schedule `MAINT_RUN_SCHD` and the timeout `MAINT_RUN_TIMEOUT` (increase) if the plugin is failing to execute.

docs/PLUGINS_DEV.md

@@ -0,0 +1,780 @@
+## 🌟 Create a custom plugin: Overview
+
+NetAlertX comes with a plugin system to feed events from third-party scripts into the UI and then send notifications, if desired. The highlighted core functionality this plugin system supports, is:
+
+* dynamic creation of a simple UI to interact with the discovered objects,
+* filtering of displayed values in the Devices UI
+* surface settings of plugins in the UI, 
+* different column types for reported values to e.g. link back to a device
+* import objects into existing NetAlertX database tables 
+
+> (Currently, update/overwriting of existing objects is only supported for devices via the `CurrentScan` table.)
+
+### 🎥 Watch the video:
+
+[![Watch the video](/docs/img/YouTube_thumbnail.png)](https://youtu.be/cdbxlwiWhv8)
+
+### 📸 Screenshots
+
+| ![Screen 1][screen1] | ![Screen 2][screen2] | ![Screen 3][screen3] | 
+|----------------------|----------------------| ----------------------| 
+| ![Screen 4][screen4] |  ![Screen 5][screen5] | 
+
+## Use cases
+
+Example use cases for plugins could be:
+
+* Monitor a web service and alert me if it's down
+* Import devices from dhcp.leases files instead/complementary to using PiHole or arp-scans
+* Creating ad-hoc UI tables from existing data in the NetAlertX database, e.g. to show all open ports on devices, to list devices that disconnected in the last hour, etc.
+* Using other device discovery methods on the network and importing the data as new devices
+* Creating a script to create FAKE devices based on user input via custom settings
+* ...at this point the limitation is mostly the creativity rather than the capability (there might be edge cases and a need to support more form controls for user input off custom settings, but you probably get the idea)
+
+If you wish to develop a plugin, please check the existing plugin structure. Once the settings are saved by the user they need to be removed from the `app.conf` file manually if you want to re-initialize them from the `config.json` of the plugin. 
+
+## ⚠ Disclaimer
+
+Please read the below carefully if you'd like to contribute with a plugin yourself. This documentation file might be outdated, so double-check the sample plugins as well. 
+
+## Plugin file structure overview 
+
+> ⚠️Folder name must be the same as the code name value in: `"code_name": "<value>"`
+> Unique prefix needs to be unique compared to the other settings prefixes, e.g.: the prefix `APPRISE` is already in use. 
+
+  | File | Required (plugin type) | Description | 
+  |----------------------|----------------------|----------------------| 
+  | `config.json` | yes | Contains the plugin configuration (manifest) including the settings available to the user. |
+  | `script.py` |  no | The Python script itself. You may call any valid linux command.  |
+  | `last_result.log` | no | The file used to interface between NetAlertX and the plugin. Required for a script plugin if you want to feed data into the app. |
+  | `script.log` | no | Logging output (recommended) |
+  | `README.md` | yes | Any setup considerations or overview  |
+
+More on specifics below.
+
+### Column order and values (plugins interface contract)
+
+> [!IMPORTANT] 
+> Spend some time reading and trying to understand the below table. This is the interface between the Plugins and the core application. The application expets 9 or 13 values The first 9 values are mandatory. The next 4 values (`HelpVal1` to `HelpVal4`) are optional. However, if you use any of these optional values (e.g., `HelpVal1`), you need to supply all optional values (e.g., `HelpVal2`, `HelpVal3`, and `HelpVal4`). If a value is not used, it should be padded with `null`.
+
+  | Order | Represented Column | Value Required | Description | 
+  |----------------------|----------------------|----------------------|----------------------| 
+  | 0 | `Object_PrimaryID` | yes | The primary ID used to group Events under. |
+  | 1 | `Object_SecondaryID` | no | Optional secondary ID to create a relationship beween other entities, such as a MAC address |
+  | 2 | `DateTime` | yes | When the event occured in the format `2023-01-02 15:56:30` |
+  | 3 | `Watched_Value1` | yes | A value that is watched and users can receive notifications if it changed compared to the previously saved entry. For example IP address |
+  | 4 | `Watched_Value2` | no | As above |
+  | 5 | `Watched_Value3` | no | As above  |
+  | 6 | `Watched_Value4` | no | As above  |
+  | 7 | `Extra` | no | Any other data you want to pass and display in NetAlertX and the notifications |
+  | 8 | `ForeignKey` | no | A foreign key that can be used to link to the parent object (usually a MAC address) |
+  | 9 | `HelpVal1` | no | (optional) A helper value |
+  | 10 | `HelpVal2` | no | (optional) A helper value |
+  | 11 | `HelpVal3` | no | (optional) A helper value |
+  | 12 | `HelpVal4` | no | (optional) A helper value |
+  
+
+> [!NOTE] 
+> De-duplication is run once an hour on the `Plugins_Objects` database table and duplicate entries with the same value in columns `Object_PrimaryID`, `Object_SecondaryID`, `Plugin` (auto-filled based on `unique_prefix` of the plugin), `UserData` (can be populated with the `"type": "textbox_save"` column type) are removed.
+
+# config.json structure
+
+The `config.json` file is the manifest of the plugin. It contains mainly settings definitions and the mapping of Plugin objects to NetAlertX objects. 
+
+## Execution order
+
+The execution order is used to specify when a plugin is executed. This is useful if a plugin has access and surfaces more information than others. If a device is detected by 2 plugins and inserted into the `CurrentScan` table, the plugin with the higher priority (e.g.: `Level_0` is a higher priority than `Level_1`) will insert it's values first. These values (devices) will be then prioritized over any values inserted later.
+
+```json
+{
+    "execution_order" : "Layer_0"
+}
+```
+
+## Supported data sources
+
+Currently, these data sources are supported (valid `data_source` value). 
+
+| Name | `data_source` value | Needs to return a "table"* | Overview (more details on this page below) | 
+|----------------------|----------------------|----------------------|----------------------| 
+| Script | `script` | no | Executes any linux command in the `CMD` setting. |
+| NetAlertX DB query | `app-db-query` | yes | Executes a SQL query on the NetAlertX database in the `CMD` setting. |
+| Template | `template` | no | Used to generate internal settings, such as default values. |
+| External SQLite DB query | `sqlite-db-query` | yes | Executes a SQL query from the `CMD` setting on an external SQLite database mapped in the `DB_PATH` setting.  |
+| Plugin type | `plugin_type` | no | Specifies the type of the plugin and in which section the Plugin settings are displayed ( one of `general/system/scanner/other/publisher` ). | 
+
+> * "Needs to return a "table" means that the application expects a `last_result.log` file with some results. It's not a blocker, however warnings in the `app.log` might be logged.
+
+> 🔎Example
+>```json
+>"data_source":  "app-db-query"
+>```
+If you want to display plugin objects or import devices into the app, data sources have to return a "table" of the exact structure as outlined above.
+
+You can show or hide the UI on the "Plugins" page and "Plugins" tab for a plugin on devices via the `show_ui` property:
+
+> 🔎Example
+>```json
+> "show_ui": true,
+> ```
+
+### "data_source":  "script"
+
+ If the `data_source` is set to `script` the `CMD` setting (that you specify in the `settings` array section in the `config.json`) contains an executable Linux command, that usually generates a `last_result.log` file (not required if you don't import any data into the app). The `last_result.log` file needs to be saved in the same folder as the plugin. 
+
+> [!IMPORTANT]
+> A lot of the work is taken care of by the [`plugin_helper.py` library](/front/plugins/plugin_helper.py). You don't need to manage the `last_result.log` file if using the helper objects. Check other `script.py` of other plugins for details (The [Undicoverables plugins `script.py` file](/front/plugins/undiscoverables/script.py) is a good example).
+ 
+ The content of the `last_result.log` file needs to contain the columns as defined in the "Column order and values" section above. The order of columns can't be changed. After every scan it should contain only the results from the latest scan/execution. 
+
+- The format of the `last_result.log` is a `csv`-like file with the pipe `|` as a separator. 
+- 9 (nine) values need to be supplied, so every line needs to contain 8 pipe separators. Empty values are represented by `null`.  
+- Don't render "headers" for these "columns".
+Every scan result/event entry needs to be on a new line.
+- You can find which "columns" need to be present, and if the value is required or optional, in the "Column order and values" section. 
+- The order of these "columns" can't be changed.
+
+#### 🔎 last_result.log examples
+
+Valid CSV:
+
+```csv
+
+https://www.google.com|null|2023-01-02 15:56:30|200|0.7898|null|null|null|null
+https://www.duckduckgo.com|192.168.0.1|2023-01-02 15:56:30|200|0.9898|null|null|Best search engine|ff:ee:ff:11:ff:11
+
+```
+
+Invalid CSV with different errors on each line:
+
+```csv
+
+https://www.google.com|null|2023-01-02 15:56:30|200|0.7898||null|null|null
+https://www.duckduckgo.com|null|2023-01-02 15:56:30|200|0.9898|null|null|Best search engine|
+|https://www.duckduckgo.com|null|2023-01-02 15:56:30|200|0.9898|null|null|Best search engine|null
+null|192.168.1.1|2023-01-02 15:56:30|200|0.9898|null|null|Best search engine
+https://www.duckduckgo.com|192.168.1.1|2023-01-02 15:56:30|null|0.9898|null|null|Best search engine
+https://www.google.com|null|2023-01-02 15:56:30|200|0.7898|||
+https://www.google.com|null|2023-01-02 15:56:30|200|0.7898|
+
+```
+
+### "data_source":  "app-db-query"
+
+If the `data_source` is set to `app-db-query`, the `CMD` setting needs to contain a SQL query rendering the columns as defined in the "Column order and values" section above. The order of columns is important. 
+
+This SQL query is executed on the `app.db` SQLite database file. 
+
+>  🔎Example
+> 
+> SQL query example:
+> 
+> ```SQL
+> SELECT  dv.dev_Name as Object_PrimaryID, 
+>     cast(dv.dev_LastIP as VARCHAR(100)) || ':' || cast( SUBSTR(ns.Port ,0, INSTR(ns.Port , '/')) as VARCHAR(100)) as Object_SecondaryID,  
+>     datetime() as DateTime,  
+>     ns.Service as Watched_Value1,        
+>     ns.State as Watched_Value2,
+>     'null' as Watched_Value3,
+>     'null' as Watched_Value4,
+>     ns.Extra as Extra,
+>     dv.dev_MAC as ForeignKey 
+> FROM 
+>     (SELECT * FROM Nmap_Scan) ns 
+> LEFT JOIN 
+>     (SELECT dev_Name, dev_MAC, dev_LastIP FROM Devices) dv 
+> ON ns.MAC = dv.dev_MAC
+> ```
+> 
+> Required `CMD` setting example with above query (you can set `"type": "label"` if you want it to make uneditable in the UI):
+> 
+> ```json
+> {
+>             "function": "CMD",
+>            "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [] ,"transformers": []}]},
+>            "default_value":"SELECT  dv.dev_Name as Object_PrimaryID, cast(dv.dev_LastIP as VARCHAR(100)) || ':' || cast( SUBSTR(ns.Port ,0, INSTR(ns.Port , '/')) as VARCHAR(100)) as Object_SecondaryID,  datetime() as DateTime,  ns.Service as Watched_Value1,        ns.State as Watched_Value2,        'null' as Watched_Value3,        'null' as Watched_Value4,        ns.Extra as Extra        FROM (SELECT * FROM Nmap_Scan) ns LEFT JOIN (SELECT dev_Name, dev_MAC, dev_LastIP FROM Devices) dv   ON ns.MAC = dv.dev_MAC",
+>            "options": [],
+>            "localized": ["name", "description"],
+>            "name" : [{
+>                "language_code":"en_us",
+>                "string" : "SQL to run"
+>            }],
+>             "description": [{
+>                 "language_code":"en_us",
+>                 "string" : "This SQL query is used to populate the coresponding UI tables under the Plugins section."
+>             }]
+>         }
+> ```
+
+### "data_source":  "template"
+
+In most cases, it is used to initialize settings. Check the `newdev_template` plugin for details.
+
+### "data_source":  "sqlite-db-query"
+
+You can execute a SQL query on an external database connected to the current NetAlertX database via a temporary `EXTERNAL_<unique prefix>.` prefix. 
+
+For example for `PIHOLE` (`"unique_prefix": "PIHOLE"`) it is `EXTERNAL_PIHOLE.`. The external SQLite database file has to be mapped in the container to the path specified in the `DB_PATH` setting:
+
+>  🔎Example
+>
+>```json
+>  ...
+>{
+>        "function": "DB_PATH",
+>        "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"readonly": "true"}] ,"transformers": []}]},
+>        "default_value":"/etc/pihole/pihole-FTL.db",
+>        "options": [],
+>        "localized": ["name", "description"],
+>        "name" : [{
+>            "language_code":"en_us",
+>            "string" : "DB Path"
+>        }],
+>        "description": [{
+>            "language_code":"en_us",
+>            "string" : "Required setting for the <code>sqlite-db-query</code> plugin type. Is used to mount an external SQLite database and execute the SQL query stored in the <code>CMD</code> setting."
+>        }]    
+>    }
+>  ...
+>```
+
+The actual SQL query you want to execute is then stored as a `CMD` setting, similar to a Plugin of the `app-db-query` plugin type. The format has to adhere to the format outlined in the "Column order and values" section above. 
+
+>  🔎Example
+>
+> Notice the `EXTERNAL_PIHOLE.` prefix.
+>
+>```json
+>{
+>      "function": "CMD",
+>      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [] ,"transformers": []}]},
+>      "default_value":"SELECT hwaddr as Object_PrimaryID, cast('http://' || (SELECT ip FROM EXTERNAL_PIHOLE.network_addresses WHERE network_id = id ORDER BY lastseen DESC, ip LIMIT 1) as VARCHAR(100)) || ':' || cast( SUBSTR((SELECT name FROM EXTERNAL_PIHOLE.network_addresses WHERE network_id = id ORDER BY lastseen DESC, ip LIMIT 1), 0, INSTR((SELECT name FROM EXTERNAL_PIHOLE.network_addresses WHERE network_id = id ORDER BY lastseen DESC, ip LIMIT 1), '/')) as VARCHAR(100)) as Object_SecondaryID, datetime() as DateTime, macVendor as Watched_Value1, lastQuery as Watched_Value2, (SELECT name FROM EXTERNAL_PIHOLE.network_addresses WHERE network_id = id ORDER BY lastseen DESC, ip LIMIT 1) as Watched_Value3, 'null' as Watched_Value4, '' as Extra, hwaddr as ForeignKey FROM EXTERNAL_PIHOLE.network WHERE hwaddr NOT LIKE 'ip-%' AND hwaddr <> '00:00:00:00:00:00';            ",
+>      "options": [],
+>      "localized": ["name", "description"],
+>      "name" : [{
+>          "language_code":"en_us",
+>          "string" : "SQL to run"
+>      }],
+>      "description": [{
+>          "language_code":"en_us",
+>          "string" : "This SQL query is used to populate the coresponding UI tables under the Plugins section. This particular one selects data from a mapped PiHole SQLite database and maps it to the corresponding Plugin columns."
+>      }]
+>  }
+>  ```
+
+## 🕳 Filters
+
+Plugin entries can be filtered in the UI based on values entered into filter fields. The `txtMacFilter` textbox/field contains the Mac address of the currently viewed device, or simply a Mac address that's available in the `mac` query string (`<url>?mac=aa:22:aa:22:aa:22:aa`).
+
+  | Property | Required | Description | 
+  |----------------------|----------------------|----------------------| 
+  | `compare_column` | yes | Plugin column name that's value is used for comparison (**Left** side of the equation) |
+  | `compare_operator` |  yes | JavaScript comparison operator |
+  | `compare_field_id` | yes | The `id` of a input text field containing a value is used for comparison (**Right** side of the equation)|
+  | `compare_js_template` | yes | JavaScript code used to convert left and right side of the equation. `{value}` is replaced with input values. |
+  | `compare_use_quotes` | yes | If `true` then the end result of the `compare_js_template` i swrapped in `"` quotes. Use to compare strings. |
+  
+  Filters are only applied if a filter is specified, and the `txtMacFilter` is not `undefined`, or empty (`--`).
+
+> 🔎Example:
+> 
+> ```json
+>     "data_filters": [
+>         {
+>             "compare_column" : "Object_PrimaryID",
+>             "compare_operator" : "==",
+>             "compare_field_id": "txtMacFilter",
+>             "compare_js_template": "'{value}'.toString()", 
+>             "compare_use_quotes": true 
+>         }
+>     ],
+> ```
+>
+>1. On the `pluginsCore.php` page is an input field with the id `txtMacFilter`:
+>
+>```html
+><input class="form-control" id="txtMacFilter" type="text" value="--">
+>```
+>
+>2. This input field is initialized via the `&mac=` query string.
+>
+>3. The app then proceeds to use this Mac value from this field and compares it to the value of the `Object_PrimaryID` database field. The `compare_operator` is `==`.
+>
+>4. Both values, from the database field `Object_PrimaryID` and from the `txtMacFilter` are wrapped and evaluated with the `compare_js_template`, that is `'{value}.toString()'`.
+>
+>5. `compare_use_quotes` is set to `true` so `'{value}'.toString()` is wrappe dinto `"` quotes.
+>
+>6. This results in for example this code: 
+>
+>```javascript
+>    // left part of the expression coming from compare_column and right from the input field
+>    // notice the added quotes ()") around the left and right part of teh expression
+>    "eval('ac:82:ac:82:ac:82".toString()')" == "eval('ac:82:ac:82:ac:82".toString()')"
+>```
+>
+
+
+### 🗺 Mapping the plugin results into a database table
+
+Plugin results are always inserted into the standard `Plugin_Objects` database table. Optionally, NetAlertX can take the results of the plugin execution, and insert these results into an additional database table. This is enabled by with the property `"mapped_to_table"` in the `config.json` file. The mapping of the columns is defined in the `database_column_definitions` array.
+
+> [!NOTE] 
+> If results are mapped to the `CurrentScan` table, the data is then included into the regular scan loop, so for example notification for devices are sent out.  
+
+
+>🔍 Example:
+>
+>For example, this approach is used to implement the `DHCPLSS` plugin. The script parses all supplied "dhcp.leases" files, gets the results in the generic table format outlined in the "Column order and values" section above, takes individual values, and inserts them into the `CurrentScan` database table in the NetAlertX database. All this is achieved by:
+>
+>1. Specifying the database table into which the results are inserted by defining `"mapped_to_table": "CurrentScan"` in the root of the `config.json` file as shown below:
+>
+>```json
+>{
+>    "code_name": "dhcp_leases",
+>    "unique_prefix": "DHCPLSS",
+>    ...
+>    "data_source":  "script",
+>    "localized": ["display_name", "description", "icon"],
+>    "mapped_to_table": "CurrentScan",    
+>    ...
+>}
+>```
+>2. Defining the target column with the `mapped_to_column` property for individual columns in the `database_column_definitions` array of the `config.json` file. For example in the `DHCPLSS` plugin, I needed to map the value of the `Object_PrimaryID` column returned by the plugin, to the `cur_MAC` column in the NetAlertX database table `CurrentScan`. Notice the  `"mapped_to_column": "cur_MAC"` key-value pair in the sample below.
+>
+>```json
+>{
+>            "column": "Object_PrimaryID",
+>            "mapped_to_column": "cur_MAC", 
+>            "css_classes": "col-sm-2",
+>            "show": true,
+>            "type": "device_mac",            
+>            "default_value":"",
+>            "options": [],
+>            "localized": ["name"],
+>            "name":[{
+>                "language_code":"en_us",
+>                "string" : "MAC address"
+>                }]
+>        }
+>```
+>
+>3.  That's it. The app takes care of the rest. It loops thru the objects discovered by the plugin, takes the results line-by-line, and inserts them into the database table specified in `"mapped_to_table"`. The columns are translated from the generic plugin columns to the target table columns via the `"mapped_to_column"` property in the column definitions.
+
+> [!NOTE] 
+> You can create a column mapping with a default value via the `mapped_to_column_data` property. This means that the value of the given column will always be this value. That also means that the `"column": "NameDoesntMatter"` is not important as there is no database source column. 
+
+
+>🔍 Example:
+>
+>```json
+>{
+>            "column": "NameDoesntMatter",
+>            "mapped_to_column": "cur_ScanMethod",
+>            "mapped_to_column_data": {
+>                "value": "DHCPLSS"                
+>            },  
+>            "css_classes": "col-sm-2",
+>            "show": true,
+>            "type": "device_mac",            
+>            "default_value":"",
+>            "options": [],
+>            "localized": ["name"],
+>            "name":[{
+>                "language_code":"en_us",
+>                "string" : "MAC address"
+>                }]
+>        }
+>```
+
+#### params
+
+> [!IMPORTANT] 
+> An esier way to access settings in scripts is the `get_setting_value` method.
+> ```python
+> from helper import get_setting_value
+>
+>   ...
+>   NTFY_TOPIC = get_setting_value('NTFY_TOPIC')
+>   ...
+>
+> ``` 
+
+The `params` array in the `config.json` is used to enable the user to change the parameters of the executed script. For example, the user wants to monitor a specific URL. 
+
+> 🔎 Example:
+> Passing user-defined settings to a command. Let's say, you want to have a script, that is called with a user-defined parameter called `urls`: 
+> 
+> ```bash
+> root@server# python3 /app/front/plugins/website_monitor/script.py urls=https://google.com,https://duck.com
+> ```
+
+* You can allow the user to add URLs to a setting with the `function` property set to a custom name, such as `urls_to_check` (this is not a reserved name from the section "Supported settings `function` values" below). 
+* You specify the parameter `urls` in the `params` section of the `config.json` the following way (`WEBMON_` is the plugin prefix automatically added to all the settings):
+```json
+{
+    "params" : [
+        {
+            "name"  : "urls",
+            "type"  : "setting",
+            "value" : "WEBMON_urls_to_check"
+        }]
+}
+```
+* Then you use this setting as an input parameter for your command in the `CMD` setting. Notice `urls={urls}` in the below json:
+
+```json
+ {
+            "function": "CMD",
+            "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [] ,"transformers": []}]},
+            "default_value":"python3 /app/front/plugins/website_monitor/script.py urls={urls}",
+            "options": [],
+            "localized": ["name", "description"],
+            "name" : [{
+                "language_code":"en_us",
+                "string" : "Command"
+            }],
+            "description": [{
+                "language_code":"en_us",
+                "string" : "Command to run"
+            }]
+        }
+```
+
+During script execution, the app will take the command `"python3 /app/front/plugins/website_monitor/script.py urls={urls}"`, take the `{urls}` wildcard and replace it with the value from the `WEBMON_urls_to_check` setting. This is because:
+
+1. The app checks the `params` entries
+2. It finds `"name"  : "urls"`
+3. Checks the type of the `urls` params and finds `"type"  : "setting"`
+4. Gets the setting name from  `"value" : "WEBMON_urls_to_check"` 
+   - IMPORTANT: in the `config.json` this setting is identified by `"function":"urls_to_check"`, not `"function":"WEBMON_urls_to_check"`
+   - You can also use a global setting, or a setting from a different plugin  
+5. The app gets the user defined value from the setting with the code name `WEBMON_urls_to_check`
+   - let's say the setting with the code name  `WEBMON_urls_to_check` contains 2 values entered by the user: 
+   - `WEBMON_urls_to_check=['https://google.com','https://duck.com']`
+6. The app takes the value from `WEBMON_urls_to_check` and replaces the `{urls}` wildcard in the setting where `"function":"CMD"`, so you go from:
+   - `python3 /app/front/plugins/website_monitor/script.py urls={urls}`
+   - to
+   - `python3 /app/front/plugins/website_monitor/script.py urls=https://google.com,https://duck.com` 
+
+Below are some general additional notes, when defining `params`: 
+
+- `"name":"name_value"` - is used as a wildcard replacement in the `CMD` setting value by using curly brackets `{name_value}`. The wildcard is replaced by the result of the `"value" : "param_value"` and `"type":"type_value"` combo configuration below.
+- `"type":"<sql|setting>"` - is used to specify the type of the params, currently only 2 supported (`sql`,`setting`).
+  - `"type":"sql"` - will execute the SQL query specified in the `value` property. The sql query needs to return only one column. The column is flattened and separated by commas (`,`), e.g: `SELECT dev_MAC from DEVICES` -> `Internet,74:ac:74:ac:74:ac,44:44:74:ac:74:ac`. This is then used to replace the wildcards in the `CMD` setting.  
+  - `"type":"setting"` - The setting code name. A combination of the value from `unique_prefix` + `_` + `function` value, or otherwise the code name you can find in the Settings page under the Setting display name, e.g. `PIHOLE_RUN`. 
+- `"value": "param_value"` - Needs to contain a setting code name or SQL query without wildcards.
+- `"timeoutMultiplier" : true` - used to indicate if the value should multiply the max timeout for the whole script run by the number of values in the given parameter.
+- `"base64": true` - use base64 encoding to pass the value to the script (e.g. if there are spaces)
+
+
+> 🔎Example:
+> 
+> ```json
+> {
+>     "params" : [{
+>            "name"              : "ips",
+>            "type"              : "sql",
+>            "value"             : "SELECT dev_LastIP from DEVICES",
+>            "timeoutMultiplier" : true
+>        },
+>        {
+>            "name"              : "macs",
+>            "type"              : "sql",
+>            "value"             : "SELECT dev_MAC from DEVICES"            
+>        },
+>        {
+>            "name"              : "timeout",
+>            "type"              : "setting",
+>            "value"             : "NMAP_RUN_TIMEOUT"
+>        },
+>        {
+>            "name"              : "args",
+>            "type"              : "setting",
+>            "value"             : "NMAP_ARGS",
+>            "base64"            : true
+>        }]
+> }
+> ```
+
+
+#### ⚙ Setting object structure
+
+> [!NOTE] 
+> The settings flow and when Plugin specific settings are applied is described under the [Settings system](/docs/SETTINGS_SYSTEM.md).
+
+Required attributes are:
+
+| Property | Description |
+| -------- | ----------- |
+| `"function"` | Specifies the function the setting drives or a simple unique code name. See Supported settings function values for options. |
+| `"type"` | Specifies the form control used for the setting displayed in the Settings page and what values are accepted. Supported options include: |
+|  | - `{"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"password"}] ,"transformers": ["sha256"]}]}` |
+| `"localized"` | A list of properties on the current JSON level that need to be localized. |
+| `"name"` | Displayed on the Settings page. An array of localized strings. See Localized strings below. |
+| `"description"` | Displayed on the Settings page. An array of localized strings. See Localized strings below. |
+| (optional) `"events"` | Specifies whether to generate an execution button next to the input field of the setting. Supported values: |
+|  | - `"test"` - For notification plugins testing |
+|  | - `"run"` - Regular plugins testing |
+| (optional) `"override_value"` | Used to determine a user-defined override for the setting. Useful for template-based plugins, where you can choose to leave the current value or override it with the value defined in the setting. (Work in progress) |
+| (optional) `"events"` | Used to trigger the plugin. Usually used on the `RUN` setting. Not fully tested in all scenarios. Will show a play button next to the setting. After clicking, an event is generated for the backend in the `Parameters` database table to process the front-end event on the next run. |
+
+### UI Component Types Documentation
+
+This section outlines the structure and types of UI components, primarily used to build HTML forms or interactive elements dynamically. Each UI component has a `"type"` which defines its structure, behavior, and rendering options.
+
+#### UI Component JSON Structure
+The UI component is defined as a JSON object containing a list of `elements`. Each element specifies how it should behave, with properties like `elementType`, `elementOptions`, and any associated `transformers` to modify the data. The example below demonstrates how a component with two elements (`span` and `select`) is structured:
+
+```json
+{
+      "function": "dev_Icon",
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "span",
+            "elementOptions": [
+              { "cssClasses": "input-group-addon iconPreview" },
+              { "getStringKey": "Gen_SelectToPreview" },
+              { "customId": "NEWDEV_dev_Icon_preview" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "select",
+            "elementHasInputValue": 1,
+            "elementOptions": [
+              { "cssClasses": "col-xs-12" },
+              {
+                "onChange": "updateIconPreview(this)"
+              },
+              { "customParams": "NEWDEV_dev_Icon,NEWDEV_dev_Icon_preview" }
+            ],
+            "transformers": []
+          }          
+        ]
+      }
+}
+
+```
+
+### Rendering Logic
+
+The code snippet provided demonstrates how the elements are iterated over to generate their corresponding HTML. Depending on the `elementType`, different HTML tags (like `<select>`, `<input>`, `<textarea>`, `<button>`, etc.) are created with the respective attributes such as `onChange`, `my-data-type`, and `class` based on the provided `elementOptions`. Events can also be attached to elements like buttons or select inputs.
+
+### Key Element Types
+
+- **`select`**: Renders a dropdown list. Additional options like `isMultiSelect` and event handlers (e.g., `onChange`) can be attached.
+- **`input`**: Handles various types of input fields, including checkboxes, text, and others, with customizable attributes like `readOnly`, `placeholder`, etc.
+- **`button`**: Generates clickable buttons with custom event handlers (`onClick`), icons, or labels.
+- **`textarea`**: Creates a multi-line input box for text input.
+- **`span`**: Used for inline text or content with customizable classes and data attributes.
+
+Each element may also have associated events (e.g., running a scan or triggering a notification) defined under `Events`.
+
+    
+##### Supported settings `function` values
+
+You can have any `"function": "my_custom_name"` custom name, however, the ones listed below have a specific functionality attached to them. If you use a custom name, then the setting is mostly used as an input parameter for the `params` section.
+
+| Setting | Description |
+| ------- | ----------- |
+| `RUN` | (required) Specifies when the service is executed. |
+|  | Supported Options: |
+|  | - "disabled" - do not run |
+|  | - "once" - run on app start or on settings saved |
+|  | - "schedule" - if included, then a `RUN_SCHD` setting needs to be specified to determine the schedule |
+|  | - "always_after_scan" - run always after a scan is finished |
+|  | - "before_name_updates" - run before device names are updated (for name discovery plugins) |
+|  | - "on_new_device" - run when a new device is detected |
+|  | - "before_config_save" - run before the config is marked as saved. Useful if your plugin needs to modify the `app.conf` file. |
+| `RUN_SCHD` | (required if you include "schedule" in the above `RUN` function) Cron-like scheduling is used if the `RUN` setting is set to `schedule`. |
+| `CMD` | (required) Specifies the command that should be executed. |
+| `API_SQL` | (not implemented) Generates a `table_` + `code_name` + `.json` file as per [API docs](https://github.com/jokob-sk/NetAlertX/blob/main/docs/API.md). |
+| `RUN_TIMEOUT` | (optional) Specifies the maximum execution time of the script. If not specified, a default value of 10 seconds is used to prevent hanging. |
+| `WATCH` | (optional) Specifies which database columns are watched for changes for this particular plugin. If not specified, no notifications are sent. |
+| `REPORT_ON` | (optional) Specifies when to send a notification. Supported options are: |
+|  | - `new` means a new unique (unique combination of PrimaryId and SecondaryId) object was discovered. |
+|  | - `watched-changed` - means that selected `Watched_ValueN` columns changed |
+|  | - `watched-not-changed` - reports even on events where selected `Watched_ValueN` did not change |
+|  | - `missing-in-last-scan` - if the object is missing compared to previous scans |
+
+
+> 🔎 Example:
+> 
+> ```json
+> {
+>     "function": "RUN",            
+>     "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},            
+>     "default_value":"disabled",
+>     "options": ["disabled", "once", "schedule", "always_after_scan", "on_new_device"],
+>     "localized": ["name", "description"],
+>     "name" :[{
+>         "language_code":"en_us",
+>         "string" : "When to run"
+>     }],
+>     "description": [{
+>         "language_code":"en_us",
+>         "string" : "Enable a regular scan of your services. If you select <code>schedule</code> the scheduling settings from below are applied. If you select <code>once</code> the scan is run only once on start of the application (container) for the time specified in <a href=\"#WEBMON_RUN_TIMEOUT\"><code>WEBMON_RUN_TIMEOUT</code> setting</a>."
+>     }]
+> }
+> ```
+
+##### 🌍Localized strings
+
+- `"language_code":"<en_us|es_es|de_de>"`  - code name of the language string. Only these three are currently supported. At least the `"language_code":"en_us"` variant has to be defined. 
+- `"string"`  - The string to be displayed in the given language.
+
+> 🔎 Example:
+> 
+> ```json
+> 
+>     {
+>         "language_code":"en_us",
+>         "string" : "When to run"
+>     }
+> 
+> ```
+
+##### UI settings in database_column_definitions
+
+The UI will adjust how columns are displayed in the UI based on the resolvers definition of the `database_column_definitions` object. These are the supported form controls and related functionality:
+
+- Only columns with `"show": true` and also with at least an English translation will be shown in the UI.
+
+| Supported Types | Description |
+| -------------- | ----------- |
+| `label` | Displays a column only. |
+| `textarea_readonly` | Generates a read only text area and cleans up the text to display it somewhat formatted with new lines preserved. |
+| See below for information on `threshold`, `replace`. | |
+|  |  |
+| `options` Property | Used in conjunction with types like `threshold`, `replace`, `regex`. |
+| `options_params` Property | Used in conjunction with a `"options": "[{value}]"` template and `text.select`/`list.select`. Can specify SQL query (needs to return 2 columns `SELECT dev_Name as name, dev_Mac as id`) or Setting (not tested) to populate the dropdown. Check example below or have a look at the `NEWDEV` plugin `config.json` file. |
+| `threshold` | The `options` array contains objects ordered from the lowest `maximum` to the highest. The corresponding `hexColor` is used for the value background color if it's less than the specified `maximum` but more than the previous one in the `options` array. |
+| `replace` | The `options` array contains objects with an `equals` property, which is compared to the "value." If the values are the same, the string in `replacement` is displayed in the UI instead of the actual "value". |
+| `regex` | Applies a regex to the value.  The `options` array contains objects with an `type` (must be set to `regex`) and `param` (must contain the regex itself) property. |
+|  |  |
+| Type Definitions |  |
+| `device_mac` | The value is considered to be a MAC address, and a link pointing to the device with the given MAC address is generated. |
+| `device_ip` | The value is considered to be an IP address. A link pointing to the device with the given IP is generated. The IP is checked against the last detected IP address and translated into a MAC address, which is then used for the link itself. |
+| `device_name_mac` | The value is considered to be a MAC address, and a link pointing to the device with the given IP is generated. The link label is resolved as the target device name. |
+| `url` | The value is considered to be a URL, so a link is generated. |
+| `textbox_save` | Generates an editable and saveable text box that saves values in the database. Primarily intended for the `UserData` database column in the `Plugins_Objects` table. |
+| `url_http_https` | Generates two links with the `https` and `http` prefix as lock icons. |
+| `eval` | Evaluates as JavaScript. Use the variable `value` to use the given column value as input (e.g. `'<b>${value}<b>'` (replace ' with ` in your code) ) |
+            
+
+> [!NOTE] 
+> Supports chaining. You can chain multiple resolvers with `.`. For example `regex.url_http_https`. This will apply the `regex` resolver and then the `url_http_https` resolver.
+
+
+```json
+        "function": "dev_DeviceType",
+        "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},
+        "maxLength": 30,
+        "default_value": "",
+        "options": ["{value}"],
+        "options_params" : [
+            {
+                "name"  : "value",
+                "type"  : "sql",
+                "value" : "SELECT '' as id, '' as name UNION SELECT dev_DeviceType as id, dev_DeviceType as name FROM (SELECT dev_DeviceType FROM Devices UNION SELECT 'Smartphone' UNION SELECT 'Tablet' UNION SELECT 'Laptop' UNION SELECT 'PC' UNION SELECT 'Printer' UNION SELECT 'Server' UNION SELECT 'NAS' UNION SELECT 'Domotic' UNION SELECT 'Game Console' UNION SELECT 'SmartTV' UNION SELECT 'Clock' UNION SELECT 'House Appliance' UNION SELECT 'Phone' UNION SELECT 'AP' UNION SELECT 'Gateway' UNION SELECT 'Firewall' UNION SELECT 'Switch' UNION SELECT 'WLAN' UNION SELECT 'Router' UNION SELECT 'Other') AS all_devices ORDER BY id;"
+            },
+            {
+                "name"  : "uilang",
+                "type"  : "setting",
+                "value" : "UI_LANG"
+            }
+        ]
+```
+
+
+```json
+{
+            "column": "Watched_Value1",
+            "css_classes": "col-sm-2",
+            "show": true,
+            "type": "threshold",            
+            "default_value":"",
+            "options": [
+                {
+                    "maximum": 199,
+                    "hexColor": "#792D86"                
+                },
+                {
+                    "maximum": 299,
+                    "hexColor": "#5B862D"
+                },
+                {
+                    "maximum": 399,
+                    "hexColor": "#7D862D"
+                },
+                {
+                    "maximum": 499,
+                    "hexColor": "#BF6440"
+                },
+                {
+                    "maximum": 599,
+                    "hexColor": "#D33115"
+                }
+            ],
+            "localized": ["name"],
+            "name":[{
+                "language_code":"en_us",
+                "string" : "Status code"
+                }]
+        },        
+        {
+            "column": "Status",
+            "show": true,
+            "type": "replace",            
+            "default_value":"",
+            "options": [
+                {
+                    "equals": "watched-not-changed",
+                    "replacement": "<i class='fa-solid fa-square-check'></i>"
+                },
+                {
+                    "equals": "watched-changed",
+                    "replacement": "<i class='fa-solid fa-triangle-exclamation'></i>"
+                },
+                {
+                    "equals": "new",
+                    "replacement": "<i class='fa-solid fa-circle-plus'></i>"
+                }
+            ],
+            "localized": ["name"],
+            "name":[{
+                "language_code":"en_us",
+                "string" : "Status"
+                }]
+        },
+        {
+            "column": "Watched_Value3",
+            "css_classes": "col-sm-1",
+            "show": true,
+            "type": "regex.url_http_https",            
+            "default_value":"",
+            "options": [
+                {
+                    "type": "regex",
+                    "param": "([\\d.:]+)"
+                }          
+            ],
+            "localized": ["name"],
+            "name":[{
+                "language_code":"en_us",
+                "string" : "HTTP/s links"
+                },
+	    	    {
+                "language_code":"es_es",
+                "string" : "N/A"
+                }]
+        }
+```
+
+[screen1]: https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/plugins.png                    "Screen 1"
+[screen2]: https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/plugins_settings.png           "Screen 2"
+[screen3]: https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/plugins_json_settings.png      "Screen 3"
+[screen4]: https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/plugins_json_ui.png            "Screen 4"
+[screen5]: https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/plugins_device_details.png     "Screen 5"

docs/README.md

@@ -30,9 +30,11 @@ There is also an in-app Help / FAQ section that should be answering frequently a
 - [Subnets and VLANs configuration for arp-scan](/docs/SUBNETS.md)
 - [SMTP server config](/docs/SMTP.md)
 - [Custom Icon configuration and support](/docs/ICONS.md)
+- [Notifications](/docs/NOTIFICATIONS.md)
 - [Better name resolution with Reverse DNS](/docs/REVERSE_DNS.md)
 - [Network treemap configuration](/docs/NETWORK_TREE.md)
 - [Backups](/docs/BACKUPS.md)
+- [Plugins overview](/front/plugins/README.md)
 
 #### 🐛 Debugging help & tips
 
@@ -40,6 +42,8 @@ There is also an in-app Help / FAQ section that should be answering frequently a
 - [Debugging UI not showing](/docs/WEB_UI_PORT_DEBUG.md)
 - [Invalid JSON errors debug help](/docs/DEBUG_INVALID_JSON.md)
 - [Troubleshooting Plugins](/docs/DEBUG_PLUGINS.md)
+- [File Permissions](/docs/FILE_PERMISSIONS.md)
+- [Performance tips](/docs/PERFORMANCE.md)
 
 #### 🔝 Popular/Suggested
 
@@ -60,13 +64,15 @@ There is also an in-app Help / FAQ section that should be answering frequently a
 
 - [Version history (legacy)](/docs/VERSIONS_HISTORY.md)
 - [Reverse proxy (Nginx, Apache, SWAG)](/docs/REVERSE_PROXY.md)
+- [Setting up Authelia](/docs/AUTHELIA.md) (DRAFT)
 
 #### 👩‍💻For Developers👨‍💻
 
+- [Setting up your DEV environment](/docs/DEV_ENV_SETUP.md)
 - [Server APP code structure](/server/README.md)
 - [Database structure](/docs/DATABASE.md)
 - [API endpoints details](/docs/API.md)
-- [Plugin system details and how to develop your own](/front/plugins/README.md)
+- [Plugin development guide](/docs/PLUGINS_DEV.md)
 - [Settings system](/docs/SETTINGS_SYSTEM.md)
 - [New Version notifications](/docs/VERSIONS.md)
 - [Frontend development tips](/docs/FRONTEND_DEVELOPMENT.md)

docs/REVERSE_DNS.md

@@ -27,6 +27,29 @@ If you are running a DNS server, such as **AdGuard**, set up **Private reverse D
 5. Click **Apply** to save your settings.
 
 
+### Specifying the DNS in the container
+
+You can specify the DNS server in the docker-compose to improve name resolution on your network. 
+
+```yaml
+services:
+  netalertx:
+    container_name: netalertx
+    image: "jokobsk/netalertx:latest"
+    restart: unless-stopped
+    volumes:
+      -  /home/netalertx/config:/app/config
+      -  /home/netalertx/db:/app/db
+      -  /home/netalertx/log:/app/front/log
+    environment:
+      - TZ=Europe/Berlin
+      - PORT=20211
+    network_mode: host
+    dns:           # specifying the DNS servers used for the container
+      - 10.8.0.1
+      - 10.8.0.17
+```
+
 ### Using a custom resolv.conf file
 
 You can configure a custom **/etc/resolv.conf** file in **docker-compose.yml** and set the nameserver to your LAN DNS server (e.g.: Pi-Hole). See the relevant [resolv.conf man](https://www.man7.org/linux/man-pages/man5/resolv.conf.5.html) entry for details. 

docs/SUBNETS.md

@@ -1,107 +1,112 @@
-# Subnets configuration for arp-scan
+# Subnets Configuration
 
-You need to specify the network interface and the network mask. You can also configure multiple subnets and specify VLANS (see exceptions below).
+You need to specify the network interface and the network mask. You can also configure multiple subnets and specify VLANs (see VLAN exceptions below).
 
-> [!TIP]
-> You may need to increase the time between scans `ARPSCAN_RUN_SCHD` and the timeout `ARPSCAN_RUN_TIMEOUT` settings when adding more subnets. If the timeout setting is exceeded, the scan is cancelled to prevent application hanging from rogue plugins. Check [debugging plugins](/docs/DEBUG_PLUGINS.md) for more tips.
+`ARPSCAN` can scan multiple networks if the network allows it. To scan networks directly, the subnets must be accessible from the network where NetAlertX is running. This means NetAlertX needs to have access to the interface attached to that subnet. You can verify this by running the following command in the container:
 
-## Examples
+`sudo arp-scan --interface=eth0 192.168.1.0/24`
+
+In this example, `--interface=eth0 192.168.1.0/24` represents a neighboring subnet. If this command returns no results, the network is not accessible due to your network or firewall restrictions.
+
+If direct scans are not possible, you can use [supplementing plugins](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/README.md) that use alternate methods. Protocols used by the `SNMPDSC` or `DHCPLSS` plugins have good support and usually can be used as a workaround.
+
+Alternatively, you can set up separate NetAlertX instances running on the subnets and synchronize the results into one instance with the [`SYNC` plugin](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/sync).
+
+> [!TIP] 
+> You may need to increase the time between scans `ARPSCAN_RUN_SCHD` and the timeout `ARPSCAN_RUN_TIMEOUT` (and similar settings for related plugins) when adding more subnets. If the timeout setting is exceeded, the scan is canceled to prevent the application from hanging due to rogue plugins.  
+> Check [debugging plugins](/docs/DEBUG_PLUGINS.md) for more tips.
+
+## Example Values
 
 > [!NOTE] 
-> Please use the UI to configure settings as that ensures that the config file is in the correct format. Edit `app.conf` directly only when really necessary.
-> ![settings](/front/plugins/arp_scan/arp-scan-settings.png)
+> Please use the UI to configure settings as it ensures the config file is in the correct format. Edit `app.conf` directly only when really necessary.  
+> ![Settings location](/docs/img/SUBNETS/subnets-setting-location.png)
 
-* Examples for one and two subnets  (❗ Note the `['...', '...']` format):
-   * One subnet: `SCAN_SUBNETS    = ['192.168.1.0/24 --interface=eth0']`
-   * Two subnets:  `SCAN_SUBNETS    = ['192.168.1.0/24 --interface=eth0', '192.168.1.0/24 --interface=eth1 -vlan=107']` 
+* **Examples for one and two subnets:**
+  * One subnet: `SCAN_SUBNETS = ['192.168.1.0/24 --interface=eth0']`
+  * Two subnets: `SCAN_SUBNETS = ['192.168.1.0/24 --interface=eth0','192.168.1.0/24 --interface=eth1 -vlan=107']`
 
+If you get timeout messages, decrease the network mask (e.g.: from `/16` to `/24`) or increase the `TIMEOUT` setting (e.g.: `ARPSCAN_RUN_TIMEOUT` to `300` (5-minute timeout)) for the plugin and the interval between scans (e.g.: `ARPSCAN_RUN_SCHD` to `*/10 * * * *` (scans every 10 minutes)).
+
+---
 
 ## Explanation
 
-### Network mask
+### Network Mask
 
-**Example value: `192.168.1.0/24`**
+**Example value:** `192.168.1.0/24`
 
-The arp-scan time itself depends on the number of IP addresses to check. 
+The `arp-scan` time itself depends on the number of IP addresses to check.
 
-> The number of IPs to check depends on the [network mask](https://www.calculator.net/ip-subnet-calculator.html) you set on the `SCAN_SUBNETS` setting. 
-> For example, a `/24` mask results in 256 IPs to check, whereas a `/16` mask checks around 65,536. Every IP takes a couple of seconds. This means that with an incorrect configuration, the arp-scan will take hours to complete instead of seconds.
+> The number of IPs to check depends on the [network mask](https://www.calculator.net/ip-subnet-calculator.html) you set in the `SCAN_SUBNETS` setting.  
+> For example, a `/24` mask results in 256 IPs to check, whereas a `/16` mask checks around 65,536 IPs. Each IP takes a couple of seconds, so an incorrect configuration could make `arp-scan` take hours instead of seconds.
 
-Specify the network filter (which **significantly** speeds up the scan process). For example, the filter `192.168.1.0/24` covers IP ranges 192.168.1.0 to 192.168.1.255.
+Specify the network filter, which **significantly** speeds up the scan process. For example, the filter `192.168.1.0/24` covers IP ranges from `192.168.1.0` to `192.168.1.255`.
 
-### Network interface (adapter)
+### Network Interface (Adapter)
 
-**Example value: `--interface=eth0`**
+**Example value:** `--interface=eth0`
 
-The adapter will probably be `eth0` or `eth1`. (Check `System info` > `Network Hardware` or run `iwconfig` in the container to find your interface name(s)) 
+The adapter will probably be `eth0` or `eth1`. (Check `System Info` > `Network Hardware` or run `iwconfig` in the container to find your interface name(s)).
 
 ![Network hardware](/docs/img/SUBNETS/system_info-network_hardware.png)
 
-> [!TIP]
-> Alterantive to `iwconfig` run `ip -o link show | awk -F': ' '!/lo|vir|docker/ {print $2}'` in your container to find your interface name(s) (e.g.: `eth0`, `eth1`).
+> [!TIP]  
+> As an alternative to `iwconfig`, run `ip -o link show | awk -F': ' '!/lo|vir|docker/ {print $2}'` in your container to find your interface name(s) (e.g.: `eth0`, `eth1`).
 
 ### VLANs
 
-**Example value: `-vlan=107`**
+**Example value:** `-vlan=107`
 
-- Append e.g.: ` -vlan=107` to the interface field (e.g.: `eth0 -vlan=107`) for multiple vlans. More details in this [comment in this issue](https://github.com/jokob-sk/NetAlertX/issues/170#issuecomment-1419902988)
+- Append `-vlan=107` to the interface field (e.g.: `eth0 -vlan=107`) for multiple VLANs. More details are available in this [comment](https://github.com/jokob-sk/NetAlertX/issues/170#issuecomment-1419902988).
+
+#### VLANs on a Hyper-V Setup
+
+> Community-sourced content by [mscreations](https://github.com/mscreations) from this [discussion](https://github.com/jokob-sk/NetAlertX/discussions/404).
+
+**Tested Setup:** Bare Metal → Hyper-V on Win Server 2019 → Ubuntu 22.04 VM → Docker → NetAlertX.
+
+**Approach 1 (may cause issues):**  
+Configure multiple network adapters in Hyper-V with distinct VLANs connected to each one using Hyper-V's network setup. However, this action can potentially lead to the Docker host's inability to handle network traffic correctly. This might interfere with other applications such as Authentik.
+
+**Approach 2 (working example):**
+
+Network connections to switches are configured as trunk and allow all VLANs access to the server.
+
+By default, Hyper-V only allows untagged packets through to the VM interface, blocking VLAN-tagged packets. To fix this, follow these steps:
+
+1. Run the following command in PowerShell on the Hyper-V machine:
+
+   ```powershell
+   Set-VMNetworkAdapterVlan -VMName <Docker VM Name> -Trunk -NativeVlanId 0 -AllowedVlanIdList "<comma separated list of vlans>"
+   ```
 
 
-#### VLANs on a Hyper-V setup
+2. Within the VM, set up sub-interfaces for each VLAN to enable scanning. On Ubuntu 22.04, Netplan can be used. In /etc/netplan/00-installer-config.yaml, add VLAN definitions:
 
-> Community sourced content by [mscreations](https://github.com/mscreations) from this [discussion](https://github.com/jokob-sk/NetAlertX/discussions/404).
+  ```yaml
 
-> [!NOTE] 
-> The setup this was tested on: Bare Metal -> Hyper-V on Win Server 2019 -> Ubuntu 22.04 VM -> Docker -> NetAlertX. 
+      network:
+        ethernets:
+          eth0:
+            dhcp4: yes
+        vlans:
+          eth0.2:
+            id: 2
+            link: eth0
+            addresses: [ "192.168.2.2/24" ]
+            routes:
+              - to: 192.168.2.0/24
+                via: 192.168.1.1
+  ```
 
-**Approach 1 (may cause issues):**
+3. Run `sudo netplan apply` to activate the interfaces for scanning in NetAlertX.
 
-Configure multiple network adapters in Hyper-V with distinct VLANs connected to each one using Hyper-V's network setup. However, this action can potentially lead to the Docker host's inability to handle network traffic correctly. The issue may stem from the creation of routes for network time servers or domain controllers on every interface, thereby preventing proper synchronization of the underlying Ubuntu VM. This interference can affect the performance of other applications such as Authentik.
+In this case, use `192.168.2.0/24 --interface=eth0.2` in NetAlertX.
 
-**Approach 2 (working example)**
+#### VLAN Support & Exceptions
 
-Network connections to switches are configured as trunk and allow all VLANs access to the server. 
-
-By default Hyper-V only allows untagged packets through to the VM interface and no VLAN tagged packets get through. In order to fix this follow these steps:
-
-1) Run the following command in Powershell on the Hyper-V machine: 
-
-```shell
-Set-VMNetworkAdapterVlan -VMName <Docker VM Name> -Trunk -NativeVlanId 0 -AllowedVlanIdList "<comma separated list of vlans>"
-```
-
-(There might be other ways how adjust this.)
-
-2) Within the VM, set up sub-interfaces for each of the VLANs so they can be scanned. On Ubuntu 22.04 Netplan can be used.
-
-In /etc/netplan/00-installer-config.yaml, add vlan definitions:
-
-```
-network:
-  ethernets:
-    eth0:
-      dhcp4: yes
-  vlans:
-    eth0.2:
-      id: 2
-      link: eth0
-      addresses: [ "192.168.2.2/24" ]
-      routes:
-        - to: 192.168.2.0/24
-          via: 192.168.1.1 
-```
-
-3) Run `sudo netplan apply` and the interfaces are then available to scan in NetAlertX. 
-4) In this case, use `192.168.2.0/24 --interface=eth0.2` in NetAlertX
-
-#### VLAN 🔍Example:
-
-![Vlan configuration example](/docs/img/SUBNETS/subnets_vlan.png)
-
-#### Support for VLANS (& exceptions)
-
-Please note the accessibility of the macvlans when they are configured on the same computer. My understanding this is a general networking behavior, but feel free to clarify via a PR/issue.
+Please note the accessibility of macvlans when configured on the same computer. This is a general networking behavior, but feel free to clarify via a PR/issue.
 
 - NetAlertX does not detect the macvlan container when it is running on the same computer.
 - NetAlertX recognizes the macvlan container when it is running on a different computer.
-

docs/WEB_UI_PORT_DEBUG.md

@@ -1,12 +1,51 @@
 # Debugging inaccessible UI
 
-When opening an issue please :
+## 1. Port conflicts
+
+When opening an issue please:
 
 1. Include a screenshot of what you see when accessing `HTTP://<your rpi IP>/20211` (or your custom port)
 1. [Follow steps 1, 2, 3, 4  on this page](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEBUG_TIPS.md) 
 1. Execute the following in the container to see the processes and their ports and submit a screenshot of the result:
-   1. `sudo apt-get install lsof`
+   1. `sudo apk add lsof`
    1. `sudo lsof -i`
+1. Try running the `nginx` command in the container
+   1. if you get `nginx: [emerg] bind() to 0.0.0.0:20211 failed (98: Address in use)` try using a different port number
 
 
-![lsof ports](/docs/img/WEB_UI_PORT_DEBUG/container_port.png)
+![lsof ports](/docs/img/WEB_UI_PORT_DEBUG/container_port.png)
+
+## 2. JavaScript issues 
+
+Check for browser console (F12 browser dev console) errors + check different browsers.
+
+## 3. Clear the app cache and cached JavaScript files
+
+Refresh the browser cache (usually shoft + refresh), try a private window, or different browsers. Please also refresh the app cache by clicking the 🔃 (reload) button in the header of the application. 
+
+## 4. Disable proxy
+
+If you have any reverse proxy or similar, try disabling it. 
+
+## 5. Disable your firewall
+
+If you are using a firewall, try to temporarily disabling it. 
+
+## 6. Post your docker start details
+
+If you haven't, post your docker compose/run command.
+
+## 7. Check for errors in your PHP/NGINX error logs
+
+In the container execute:
+
+`cat /var/log/nginx/error.log`
+
+`cat /app/front/log/app.php_errors.log`
+
+## 8. Make sure permissions are correct
+
+> [!TIP]
+> You can try to start the container without mapping the `/app/config` and `/app/db` dirs and if the UI shows up then the issue is most likely related to your file system permissions or file ownership. 
+
+Please read the [Permissions troubleshooting guide](/docs/FILE_PERMISSIONS.md) and provide a screesnhot of the permissions and ownership in the `/app/db` and `app/config` directories. 

front/appEventsCore.php

@@ -17,7 +17,7 @@ showSpinner()
 $(document).ready(function() {
 
     // Load JSON data from the provided URL
-    $.getJSON('/api/table_appevents.json', function(data) {
+    $.getJSON('api/table_appevents.json', function(data) {
         // Process the JSON data and generate UI dynamically        
         processData(data)
 

front/css/app.css

@@ -25,13 +25,33 @@
   color:white;
   background-color: black;
   font-family: 'Courier New', monospace;
+  font-size: .85em;
   
 }
+.logs-row textarea
+{
+    width: 100%;
+}
+#tab_Logging .actions{
+    display:contents;
+    position: relative;
+    padding: 0.4em
+    
+}
+
+#tab_Logging .actions .toggle{
+
+    margin: 0.5em;    
+    height: 3em;
+}
+
+.logs-row .button{
+    margin: 2px;
+}
 .logs-row
 {
     align-content: center;
     width: 100%;
-    display: grid;
     margin: 5px;
 }
 .logs-size
@@ -48,12 +68,11 @@
 }
 .logs-small
 {
-    height: 100px;
+    height: 150px;
 }
 .log-file
 {
-    width: 145px;
-    display: inline-grid;
+
     font-size: 20px;
 }
 .log-purge
@@ -105,9 +124,28 @@
     border: none;
 }
 
+@media (min-width: 768px) {
+
+    .hideOnBigScreen{
+        display: none;
+    }
+}
+
+@media (max-width: 767px) { /* on mobile */
+
+    .hideOnMobile{
+        display: none;
+    }
+}
+
+
 /* -----------------------------------------------------------------------------
    Main Sections
 ----------------------------------------------------------------------------- */
+.content-header h1{
+    font-size:24px;
+}
+
 .content-header {
     padding-top: 5px;
 }
@@ -144,6 +182,32 @@
 {
     background-color: rgba(0, 0, 0, 0);
 }
+
+.unread-notifications-bell
+{
+    position: absolute;
+    top: 3px;
+    margin-left: 15px;
+    display: none; 
+
+}
+
+.navbar-custom-menu .bg-yellow
+{
+    color: white !important;
+}
+
+.header-status-locked-db
+{
+    width: 25px;
+    height: 25px;
+    color: red;
+    position: absolute;
+    top: 12px;
+    right: -17px;
+    display: none;
+}
+
 .navbar-nav > li > a
 {
     line-height: 30px;
@@ -183,9 +247,15 @@
 .content-wrapper,
 .right-side,
 .main-footer {
-    margin-left: 150px;
+    margin-left: 150px;    
 }
 
+#settingsPage
+{
+    display: grid;
+}
+
+
 @media (max-width: 767px) {
     .main-header .logo {
         width: 100%;
@@ -200,6 +270,15 @@
     .main-footer {
         margin-left: 0px;
     }
+    .fixed .content-wrapper, .fixed .right-side {
+        padding-top: 50px;
+    }
+    .main-sidebar {
+        padding-top: 50px;
+    }
+    .content-header #pageTitle{
+        display: none;
+    }
 }
 
 .sidebar-open .content-wrapper,
@@ -481,28 +560,41 @@
 /* -----------------------------------------------------------------------------
    Notification float banner
 ----------------------------------------------------------------------------- */
-.pa_alert_notification {
+.notification_modal {
+
     text-align: center;
-    font-size: large;
-    font-weight: bold;
-    color: #258744;
-
-    background-color: #d4edda;
-    border-color: #c3e6cb;
-    border-radius: 5px;
-
-    max-width: 1000px;
-    /* 80% wrapper 1250px */
+    left: 0;
+    right: 0;
     width: 80%;
     z-index: 9999;
-
     position: fixed;
-    top: 30px;
-    margin: auto;
-    transform: translate(0, 0);
-
+    top: 100px;
     display: none;
+    margin-left: auto;
+    margin-right: auto;
 }
+
+.modal_green
+{
+    color: #258744;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+}
+
+.modal_red
+{
+    color: rgb(245, 245, 245);
+    background-color: #e2acaa;
+    border-color: #d41001;
+}
+
+.modal_grey
+{
+    color: white;
+    background-color: darkgrey;
+    border-color: #000000;
+}
+
 /* ticker setup */
 .ticker-li
 {
@@ -668,10 +760,27 @@ height: 50px;
 .infobox_label {
     font-size: 16px !important;
 }
+
+.deviceSelector 
+{
+    display: block;
+}
+
+.deviceSelector  input
+{
+    width: 100% !important;
+    display: inline-grid;
+}
+
 /* --------------------------------------------------------- */
 /*                         report                            */
 /* --------------------------------------------------------- */
 
+#notificationData
+{
+    margin-bottom: 10px;
+}
+
 #notificationData textarea{
     width: 100%;
 }
@@ -687,20 +796,20 @@ height: 50px;
 /*                          settings                         */
 /* --------------------------------------------------------- */
 
-@media (max-width: 767px) {
+@media (max-width: 767px) { /* on mobile */
     /* hide on mobile */
     .setting_description {
       /* color: red; */
       display: none;
     }
-    .setting_input{
+    /* .setting_input{
         width:70%;
-        /* background-color: red; */
+        
     }
     .setting_name
     {
         width:30%;         
-    }
+    } */
   }
 
 @media (min-width: 768px) {
@@ -708,14 +817,19 @@ height: 50px;
     /* color: green; */
     display: block;
 }
-.setting_input{
+/* .setting_input{
     width:40%;        
-    /* background-color: green; */
+
 }
 .setting_name
 {
     width:19%;         
+} */
 }
+
+.settingswrap
+{
+    margin-bottom: 100px;
 }
 
 .settingswrap .metadata
@@ -728,11 +842,16 @@ height: 50px;
     float: right;
 }
 
+.padding-bottom
+{
+    padding-bottom: 100px;
+} 
+
 .settings-group
 {   
     font-size: 20px;
     padding-top: 7px;
-    padding-bottom: 9px;
+    padding-bottom: 9px;    
 }
 
 .overview-section .small-box  .icon
@@ -743,12 +862,12 @@ height: 50px;
 
 .overview-section
 {
-    border: solid;
+    /* border-top: solid;
     border-width: medium;
     border-width: medium;
     border-width: 1px;
-    border-radius: 15px;
-    margin-bottom: 3px;
+     border-radius: 15px; 
+    margin-bottom: 3px; */
   
 }
 
@@ -761,6 +880,7 @@ height: 50px;
     font-size: 20px;
     padding-top: 7px;
     padding-bottom: 9px;
+    margin-left: -20px;
 
 }
 
@@ -769,10 +889,10 @@ height: 50px;
 }
 
 
-.table_row {    
+#settingsPage .table_row {    
     padding: 3px;    
-    width:100%;
-    display: flex;
+    /* width:100%; */
+    /* display: flex; */
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-color: #606060;
@@ -792,10 +912,6 @@ height: 50px;
     font-weight: 300;    
 }
 
-.setting_description
-{
-    width:40%;
-}
 
 .myhidden
 {
@@ -820,7 +936,28 @@ height: 50px;
 
 #settingsPage .overview-setting-value{    
     display:unset;    
+
 }
+
+.overview-setting-value-wrap
+{
+    padding-left: 1px;
+    text-overflow: clip ;
+    overflow: hidden;
+}
+
+#settingsPage .small-box
+{
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+#settingsPage .small-box  .inner
+{
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
 #settingsPage .panel-title{
     /* display: inline-block; */
     /* width: 120px; */
@@ -829,6 +966,17 @@ height: 50px;
     text-overflow: ellipsis;
 }
 
+.padding-5px
+{
+    padding: 5px;
+}
+
+.text-overflow-hidden
+{    
+    overflow: hidden;
+    text-overflow: clip;
+}
+
 
 .settings_content {
     padding: 10px;
@@ -875,12 +1023,146 @@ input[readonly] {
     cursor: not-allowed;
   }
 
+  .interactable-option:hover::before {
+    opacity: 1;
+}
+
+  .interactable-option::before {
+    content: '1x 📝 | 2x 🚮';
+    position: sticky;
+    right: 0px;
+    top: 0;
+    color: white;
+    float: right;
+    background-color: rgb(0, 0, 0);
+    transition: opacity 0.5s;
+    opacity: 0.1;
+    border-radius: 3px;
+}
+
+.interactable-option:hover {
+    transition: background-color 2s;
+    cursor: pointer;
+}
+
+.settingsImportedTimestamp
+{
+    padding: 25px;
+}
+
+.settingsSearchWrap
+{
+    padding:10px;
+}
+
+.settings-sticky-bottom-section {
+    position: fixed;
+    z-index: 999;
+    background-color: #5B5B66;
+    /* opacity: 0.8; */
+    bottom: 30px;
+    border-radius: 5px;
+    margin:1px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: inherit;
+    /* width: 87%; */
+  }
+
+  .settings-sticky-bottom-section:hover {
+    border-color: #258744;
+  }
+
+.settings-sticky-bottom-section .form-group
+{
+    margin-bottom: 0px;
+}
+
+.clear-filter
+{
+    opacity: 0.5;
+    cursor: pointer;
+    width: 14px;
+    position: absolute;
+    right: -6px;
+    top: 6px;
+
+}
+
+.clear-filter:hover
+{
+    opacity: 1;
+}
+
+.saveSettingsWrapper button
+{
+    width:70%;
+    margin-top:20px;
+    margin-left:15%;
+    margin-bottom:20px;
+}
+
+#settingsPage .select2-selection 
+{
+    width: initial;
+    display: inline-block;
+}
+
+#settingsPage  .form-control
+{
+    min-height: 42px;
+}
+
+#settingsPage  .select2-selection
+{
+    background-color: rgb(96, 96, 96);
+} 
+#settingsPage  .select2-container 
+{
+    width: 100% !important;
+}
+
+#settingsPage  .select2-container  .selection
+{
+    width: 100% !important;
+    display: inline-grid;
+}
+
+
+/* Basic style for the div elements */
+#settingsPage  .setting_overriden_by_env {
+    position: relative;
+    /* width: 300px;
+    height: 200px; */
+    background-color: #f3f3f3;
+    border: 1px solid #ccc;
+    margin: 20px;
+    z-index: 10;
+  }
+
+  /* Style for the overlay */
+  #settingsPage .setting_overriden_by_env::after {
+    content: "Overridden with ENV variable";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6); /* semi-transparent black overlay */
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 700;
+    z-index: 11;
+  }
 
 /* ----------------------------------------------------------------- */
 /*                    Devices page                                   */
 /* ----------------------------------------------------------------- */
 
-#txtIconFA {
+.iconPreview {
     min-width: 40px;
 }
 
@@ -907,18 +1189,18 @@ input[readonly] {
     cursor: -webkit-grab;
 }
 
-.db_info_table_row .select2-container--default .select2-selection--multiple .select2-selection__choice
+.select2-container--default .select2-selection--multiple .select2-selection__choice
 {
-    background-color:#258744;
+    background-color:#258744 !important;
 }
-.db_info_table_row .select2-container--default .select2-selection--multiple
+.select2-container--default .select2-selection--multiple
 {
-    background-color:#606060;
+    background-color:#606060 !important;
 }
 
 .select2-container .select2-dropdown
 {
-    background-color:#606060;
+    background-color:#606060 !important;
 }
 
 .networkPageHelp{
@@ -937,16 +1219,35 @@ input[readonly] {
     height: 1.5em !important;
 }
 
+#TileCards .tile .inner
+{
+    color: white;
+}
 
-#dropdownIcon li svg, #dropdownIcon li i{
+#dropdownIcon li svg, #dropdownIcon li i, .dropdownIcon li svg, .dropdownIcon li i, .icon-maxsize svg, .icon-maxsize i{
     height: 1.5em !important;
 }
 
+
+#tableDevices .badge i
+{
+    height: 1em !important;
+}
+
+/* ----------------------------------------------------------------- */
+/* MODAL popups */
+/* ----------------------------------------------------------------- */
+
 #modal-input-textarea
 {
     width: 100%;
 }
 
+.modal-field-input
+{
+    margin: 4%;
+    width: 92%;
+}
 
 /* ----------------------------------------------------------------- */
 /* NETWORK page */
@@ -1050,7 +1351,29 @@ input[readonly] {
     /* background-color:red; */
 }
 
+.sort-btn {
+    
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+}
 
+.networkNodeTabHeaders
+{
+    max-width: 200px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-wrap: nowrap;
+}
+
+@media (max-width: 767px) {
+
+    .networkNodeTabHeaders .node-name
+    {
+        display: none;
+    }
+}
 
 /* ----------------------------------------------------------------- */
 /* PLUGINS page */
@@ -1146,7 +1469,7 @@ input[readonly] {
 
     opacity: 0.8;
     background-color: #fff;
-    z-index: 99;
+    z-index: 800;
 }
 
 .pa_spinner {
@@ -1159,7 +1482,7 @@ input[readonly] {
     padding: 15px;
     width: 200px;
     background-color: #fff;
-    z-index: 100;
+    z-index: 801;
 }
 
 #loadingSpinner

front/css/dark-patch.css

@@ -17,9 +17,10 @@ html {
   background-color: #353c42;
 }
 
-body {
-  background-color: #353c42;
-  color: #bec5cb;
+body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
+
+  background-color: #353c42 !important;
+  color: #bec5cb !important;
 }
 h4 {
   color: #44def1;

front/deviceDetails.php

@@ -100,7 +100,7 @@
         <div class="col-lg-12 col-sm-12 col-xs-12">
         <!-- <div class="box-transparent"> -->
           <div id="navDevice" class="nav-tabs-custom">
-            <ul class="nav nav-tabs" style="fon t-size:16px;">
+            <ul class="nav nav-tabs" style="font-size:16px;">
               <li> <a id="tabDetails"  href="#panDetails"  data-toggle="tab"> <?= lang('DevDetail_Tab_Details');?>  </a></li>
               <li> <a id="tabTools"    href="#panTools"    data-toggle="tab"> <?= lang('DevDetail_Tab_Tools');?>    </a></li>
               <li> <a id="tabSessions" href="#panSessions" data-toggle="tab"> <?= lang('DevDetail_Tab_Sessions');?> </a></li>
@@ -197,8 +197,8 @@
                         </label>
                         <div class="col-sm-9">
                           <div class="input-group">
-                            <span class="input-group-addon" id="txtIconFA"></span>
-                            <input class="form-control" id="txtIcon" type="text" value="--" readonly>
+                            <span class="input-group-addon iconPreview" id="txtIconPreview" my-customid="txtIconPreview"></span>
+                            <input class="form-control" id="txtIcon"  my-customid="txtIcon" my-customparams="txtIcon,txtIconPreview" type="text" value="--" readonly>
                             <span class="input-group-addon" title='<?= lang('DevDetail_button_AddIcon_Tooltip');?>'><i class="fa fa-square-plus pointer" onclick="askAddIcon();"></i></span>
                             <span class="input-group-addon" title='<?= lang('DevDetail_button_OverwriteIcons_Tooltip');?>'><i class="fa fa-copy pointer" onclick="askOverwriteIconType();"></i></span>
                             <div class="input-group-btn">
@@ -350,6 +350,18 @@
                           <input class="form-control" id="txtNetworkPort" type="text" value="--">
                         </div>
                       </div>
+                      <div class="form-group" >
+                        <label class="col-sm-3 control-label"><?= lang('DevDetail_MainInfo_SSID');?></label>
+                        <div class="col-sm-9">
+                          <input class="form-control" id="txtSSID" type="text" value="--">
+                        </div>
+                      </div>
+                      <div class="form-group" >
+                        <label class="col-sm-3 control-label"><?= lang('DevDetail_MainInfo_Network_Site');?></label>
+                        <div class="col-sm-9">
+                          <input class="form-control" id="txtNetworkSite" type="text" value="--">
+                        </div>
+                      </div>
 
                       
       
@@ -500,14 +512,10 @@
                   <!-- Buttons -->
                   <div class="col-xs-12">
                     <div class="pull-right">
-                        <button type="button" class="btn btn-default pa-btn pa-btn-delete"  style="margin-left:0px;"
-                          id="btnDeleteEvents"   onclick="askDeleteDeviceEvents()">   <?= lang('DevDetail_button_DeleteEvents');?> </button>
-                        <button type="button" class="btn btn-default pa-btn pa-btn-delete"  style="margin-left:0px;"
-                          id="btnDelete"   onclick="askDeleteDevice()">   <?= lang('DevDetail_button_Delete');?> </button>
-                        <button type="button" class="btn btn-default pa-btn" style="margin-left:6px;" 
-                          id="btnRestore"  onclick="getDeviceData(true)"> <?= lang('DevDetail_button_Reset');?> </button>
-                        <button type="button" disabled class="btn btn-primary pa-btn" style="margin-left:6px; " 
-                          id="btnSave"     onclick="setDeviceData()" >     <?= lang('DevDetail_button_Save');?> </button>
+                        <button type="button" class="btn btn-default pa-btn pa-btn-delete"  style="margin-left:0px;" id="btnDeleteEvents"   onclick="askDeleteDeviceEvents()">   <?= lang('DevDetail_button_DeleteEvents');?> </button>
+                        <button type="button" class="btn btn-default pa-btn pa-btn-delete"  style="margin-left:0px;"  id="btnDelete"   onclick="askDeleteDevice()">   <?= lang('DevDetail_button_Delete');?> </button>
+                        <!-- <button type="button" class="btn btn-default pa-btn" style="margin-left:6px;" id="btnRestore"  onclick="getDeviceData(true)"> <?= lang('DevDetail_button_Reset');?> </button> -->
+                        <button type="button" disabled class="btn btn-primary pa-btn" style="margin-left:6px; "  id="btnSave"     onclick="setDeviceData()" >     <?= lang('DevDetail_button_Save');?> </button>
                     </div>
                   </div>
 
@@ -627,8 +635,8 @@
   <script src="lib/AdminLTE/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
   <script src="lib/AdminLTE/bower_components/fullcalendar/dist/locale-all.js"></script>
   <!-- ----------------------------------------------------------------------- -->
-  <script src="js/ui_components.js"></script>
-  <script src="js/db_methods.js"></script>
+
+  
   <!-- ----------------------------------------------------------------------- -->
 
 <!-- Dark-Mode Patch -->
@@ -685,7 +693,6 @@ if ($ENABLED_DARKMODE === True) {
 
   var pos                 = -1;  
   var parPeriod           = 'Front_Details_Period';
-  var parTab              = 'Front_Details_Tab';
   var parSessionsRows     = 'Front_Details_Sessions_Rows';
   var parEventsRows       = 'Front_Details_Events_Rows';
   var parEventsHide       = 'Front_Details_Events_Hide';
@@ -728,7 +735,7 @@ function main () {
   $('#chkHideConnectionEvents')[0].checked = eval(eventsHide == 'true');  
 
   // Initialize components with parameters
-  initializeTabs();
+  initializeTabsNew();
   initializeiCheck();
   initializeCombos();
   initializeDatatables();
@@ -748,24 +755,13 @@ function main () {
 
     // Show device icon as it changes
   $('#txtIcon').on('change input', function() {
-    updateIconPreview('#txtIcon')
+    updateIconPreview(this)
   });
   
        
 }
 
 
-// -----------------------------------------------------------------------------
-function initializeTabs () {
-  // Activate panel
-  $('.nav-tabs a[id='+ tab +']').tab('show');
-
-  // When changed save new current tab
-  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-    setParameter (parTab, $(e.target).attr('id'));
-  });
-}
-
 // -----------------------------------------------------------------------------
 function initializeiCheck () {
    // Blue
@@ -794,7 +790,6 @@ function initializeiCheck () {
     // Hide / Show Events
     if (event.currentTarget.id == 'chkHideConnectionEvents') {
       getDeviceEvents();
-      setParameter (parEventsHide, event.currentTarget.checked);
     } else {
       // Activate save & restore
       // activateSaveRestoreData();
@@ -816,20 +811,20 @@ function initializeCombos () {
   initializeCombo ( '#dropdownDevices',        'getDevices',      'txtFromDevice', false);  
 
   // Initiate dropdown
-  // function initSettingDropdown(settingKey,       // Identifier for the setting
-  //                             valuesArray,       // Array of values to be pre-selected in the dropdown
-  //                             targetLocation,    // ID of the HTML element where dropdown should be rendered (will be replaced)
-  //                             callbackToGenerateEntries,  // Callback function to generate entries based on options
-  //                             targetField,       // Target field or element where selected value should be applied or updated
-  //                             nameTransformer)   // callback to transform name
+  //  generateSetOptions(settingKey,       // Identifier for the setting
+  //                      valuesArray,       // Array of values to be pre-selected in the dropdown
+  //                      targetLocation,    // ID of the HTML element where dropdown should be rendered (will be replaced)
+  //                      callbackToGenerateEntries,  // Callback function to generate entries based on options
+  //                      targetField,       // Target field or element where selected value should be applied or updated
+  //                      nameTransformer)   // callback to transform name
 
 
-  initSettingDropdown("NEWDEV_dev_Icon", [], "dropdownIcon_tmp", genListWithInputSet, 'txtIcon', atob )
-  initSettingDropdown("NEWDEV_dev_DeviceType", [], "dropdownDeviceType_tmp", genListWithInputSet, 'txtDeviceType' )
-  initSettingDropdown("NEWDEV_dev_Owner", [], "dropdownOwner_tmp", genListWithInputSet, 'txtOwner' )
-  initSettingDropdown("NEWDEV_dev_Group", [], "dropdownGroup_tmp", genListWithInputSet, 'txtGroup' )
-  initSettingDropdown("NEWDEV_dev_Location", [], "dropdownLocation_tmp", genListWithInputSet, 'txtLocation' )
-  initSettingDropdown("NEWDEV_dev_Network_Node_MAC_ADDR", [], "dropdownNetworkNodeMac_tmp", genListWithInputSet, 'txtNetworkNodeMac' )
+  generateOptionsOrSetOptions("NEWDEV_dev_Icon", [], "dropdownIcon_tmp", genListWithInputSet, 'txtIcon', ["base64"])
+  generateOptionsOrSetOptions("NEWDEV_dev_DeviceType", [], "dropdownDeviceType_tmp", genListWithInputSet, 'txtDeviceType' )
+  generateOptionsOrSetOptions("NEWDEV_dev_Owner", [], "dropdownOwner_tmp", genListWithInputSet, 'txtOwner' )
+  generateOptionsOrSetOptions("NEWDEV_dev_Group", [], "dropdownGroup_tmp", genListWithInputSet, 'txtGroup' )
+  generateOptionsOrSetOptions("NEWDEV_dev_Location", [], "dropdownLocation_tmp", genListWithInputSet, 'txtLocation' )
+  generateOptionsOrSetOptions("NEWDEV_dev_Network_Node_MAC_ADDR", [], "dropdownNetworkNodeMac_tmp", genListWithInputSet, 'txtNetworkNodeMac' )
 
   // Initialize static combos
   initializeComboSkipRepeated ();
@@ -1018,25 +1013,6 @@ function initializeDatatables () {
       "info":           "<?= lang('Events_Table_info');?>",
     }
   });
-
-  // Save Parameters rows & order when changed
-  $('#tableSessions').on( 'length.dt', function ( e, settings, len ) {
-    setParameter (parSessionsRows, len);
-
-    // Sync Rows in both datatables
-    // if ( $('#tableEvents').DataTable().page.len() != len) {
-    //   $('#tableEvents').DataTable().page.len( len ).draw();
-    // }
-  } );
-  
-  $('#tableEvents').on( 'length.dt', function ( e, settings, len ) {
-    setParameter (parEventsRows, len);
-
-    // Sync Rows in both datatables
-    // if ( $('#tableSessions').DataTable().page.len() != len) {
-    //   $('#tableSessions').DataTable().page.len( len ).draw();
-    // }
-  } );
 };
 
 
@@ -1140,8 +1116,8 @@ function initializeCalendar () {
           showSpinner()
         } else {
           setTimeout(() => {
-            updateIconPreview('#txtIcon')  
-          }, 100);
+            updateIconPreview($('#txtIcon'))  
+          }, 500);
           
           hideSpinner()
         }
@@ -1153,10 +1129,6 @@ function initializeCalendar () {
 
 // -----------------------------------------------------------------------------
 function periodChanged () {
-  // Save Parameter Period
-  period = $('#period').val();
-  setParameter (parPeriod, period);
-
   // Requery Device data
   getDeviceData(true);
   getSessionsPresenceEvents();
@@ -1214,6 +1186,8 @@ function getDeviceData (readAllData=false) {
       $('#txtComments').val            ('--');
       $('#txtNetworkNodeMac').val      ('--');
       $('#txtNetworkPort').val         ('--');
+      $('#txtNetworkSite').val         ('--');
+      $('#txtSSID').val                ('--');
 
       $('#txtFirstConnection').val     ('--');
       $('#txtLastConnection').val      ('--');
@@ -1297,7 +1271,7 @@ function getDeviceData (readAllData=false) {
         networkParentMac = deviceData['dev_Network_Node_MAC_ADDR']
         if(networkParentMac)
         {
-          networkParentMacName = getDeviceDataByMacAddress(deviceData['dev_Network_Node_MAC_ADDR'], "dev_Name")
+          networkParentMacName = getDeviceDataByMac(deviceData['dev_Network_Node_MAC_ADDR'], "dev_Name")
         } else
         {
           networkParentMacName = '--'
@@ -1314,10 +1288,12 @@ function getDeviceData (readAllData=false) {
         if (deviceData['dev_Favorite'] == 1)         {$('#chkFavorite').iCheck('check');}    else {$('#chkFavorite').iCheck('uncheck');}
         $('#txtGroup').val                           (deviceData['dev_Group']);
         $('#txtLocation').val                        (deviceData['dev_Location']);
-        $('#txtComments').val                        (deviceData['dev_Comments']);        
+        $('#txtComments').val                        (decodeSpecialChars(deviceData['dev_Comments']));        
         $('#txtNetworkNodeMac').val                  ( networkParentMacName) ;
         $('#txtNetworkNodeMac').attr                 ('data-mynodemac', deviceData['dev_Network_Node_MAC_ADDR']);        
         $('#txtNetworkPort').val                     (deviceData['dev_Network_Node_port']);
+        $('#txtNetworkSite').val                     (deviceData['dev_NetworkSite']);
+        $('#txtSSID').val                            (deviceData['dev_SSID']);
         // disabling network node configuration if root Internet node
         toggleNetworkConfiguration(mac == 'Internet')         
         
@@ -1441,19 +1417,23 @@ function setDeviceData (direction='', refreshCallback='') {
     return;
   }
 
+  showSpinner()
+
   // update data to server
   $.get('php/server/devices.php?action=setDeviceData&mac='+ mac
-    + '&name='           + $('#txtName').val()
-    + '&owner='          + $('#txtOwner').val()
+    + '&name='           + encodeURIComponent($('#txtName').val().replace(/'/g, ""))
+    + '&owner='          + encodeURIComponent($('#txtOwner').val().replace(/'/g, ""))
     + '&type='           + $('#txtDeviceType').val()
-    + '&vendor='         + $('#txtVendor').val()
+    + '&vendor='         + encodeURIComponent($('#txtVendor').val().replace(/'/g, ""))
     + '&icon='           + encodeURIComponent($('#txtIcon').val())
     + '&favorite='       + ($('#chkFavorite')[0].checked * 1)
-    + '&group='          + $('#txtGroup').val()
-    + '&location='       + $('#txtLocation').val()
-    + '&comments='       + $('#txtComments').val()
+    + '&group='          + encodeURIComponent($('#txtGroup').val())
+    + '&location='       + encodeURIComponent($('#txtLocation').val())
+    + '&comments='       + encodeURIComponent(encodeSpecialChars($('#txtComments').val()))
     + '&networknode='    + $('#txtNetworkNodeMac').attr('data-mynodemac')
     + '&networknodeport=' + $('#txtNetworkPort').val()
+    + '&ssid='            + $('#txtSSID').val()
+    + '&networksite='     + $('#txtNetworkSite').val()
     + '&staticIP='       + ($('#chkStaticIP')[0].checked * 1)
     + '&scancycle='      + ($('#txtScanCycle').val() == "yes" ? "1" : "0")
     + '&alertevents='    + ($('#chkAlertEvents')[0].checked * 1)
@@ -1463,32 +1443,37 @@ function setDeviceData (direction='', refreshCallback='') {
     + '&archived='       + ($('#chkArchived')[0].checked * 1)
     , function(msg) {
     
-    showMessage (msg);
+      showMessage (msg);
+      
 
-    // clear session storage 
-    setCache("#dropdownOwner","");
-    setCache("#dropdownDeviceType","");
-    setCache("#dropdownGroup","");
-    setCache("#dropdownLocation","");
-    setCache("#dropdownNetworkNodeMac","");
+      // clear session storage 
+      setCache("#dropdownOwner","");
+      setCache("#dropdownDeviceType","");
+      setCache("#dropdownGroup","");
+      setCache("#dropdownLocation","");
+      setCache("#dropdownNetworkNodeMac","");
 
-    // Remove navigation prompt "Are you sure you want to leave..."
-    window.onbeforeunload = null;
-    somethingChanged      = false;
+      // Remove navigation prompt "Are you sure you want to leave..."
+      window.onbeforeunload = null;
+      somethingChanged      = false;
 
-    // refresh API
-    updateApi()
+      // refresh API
+      updateApi("devices,appevents")
 
-    // Callback fuction
-    if (typeof refreshCallback == 'function') {
-      refreshCallback(direction);
-    }
+      hideSpinner()
+
+      // Callback fuction
+      if (typeof refreshCallback == 'function') {
+        refreshCallback(direction);
+      }
   });
 }
 
 
 
 
+
+
 // -----------------------------------------------------------------------------
 function askSkipNotifications () {
   // Check MAC
@@ -1658,7 +1643,7 @@ function addAsBase64 () {
 
   $('#txtIcon').val(iconHtmlBase64); 
 
-  updateIconPreview('#txtIcon')
+  updateIconPreview($('#txtIcon'))  
 
 }
 
@@ -1693,7 +1678,7 @@ function deleteDevice () {
   $('#panDetails :input').attr('disabled', true);
 
   // refresh API
-  updateApi()
+  updateApi("devices,appevents")
 }
 
 // -----------------------------------------------------------------------------
@@ -1735,7 +1720,7 @@ function setTextValue (textElement, textValue) {
   if(textElement == "txtNetworkNodeMac")
   {
     $('#'+textElement).attr ('data-mynodemac', textValue);
-    $('#'+textElement).val (getDeviceDataByMacAddress(textValue, "dev_Name")); 
+    $('#'+textElement).val (getDeviceDataByMac(textValue, "dev_Name")); 
   } else
   {
     $('#'+textElement).attr ('data-myvalue', textValue);
@@ -1822,12 +1807,6 @@ function initTable(tableId, mac){
 
   $("#"+tableId).attr("data-mac", mac)
 
-  // Save Parameters rows & order when changed
-  $('#'+tableId).on( 'length.dt', function ( e, settings, len ) {
-    setParameter (parSessionsRows, len);
-
-  } );
-
 }
 
 //-----------------------------------------------------------------------------------

front/deviceDetailsTools.php

@@ -77,16 +77,16 @@
         <?= lang("DevDetail_Nmap_Scans_desc") ?>
     </div>
 
-    <button type="button" id="piamanualnmap_fast" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMacAddress(getMac(), 'dev_LastIP'), 'fast')">
+    <button type="button" id="piamanualnmap_fast" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMac(getMac(), 'dev_LastIP'), 'fast')">
         <?= lang("DevDetail_Loading") ?>
     </button>
-    <button type="button" id="piamanualnmap_normal" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMacAddress(getMac(), 'dev_LastIP'), 'normal')">
+    <button type="button" id="piamanualnmap_normal" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMac(getMac(), 'dev_LastIP'), 'normal')">
         <?= lang("DevDetail_Loading") ?>
     </button>
-    <button type="button" id="piamanualnmap_detail" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMacAddress(getMac(), 'dev_LastIP'), 'detail')">
+    <button type="button" id="piamanualnmap_detail" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMac(getMac(), 'dev_LastIP'), 'detail')">
         <?= lang("DevDetail_Loading") ?>
     </button>
-    <button type="button" id="piamanualnmap_skipdiscovery" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMacAddress(getMac(), 'dev_LastIP'), 'skipdiscovery')">
+    <button type="button" id="piamanualnmap_skipdiscovery" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMac(getMac(), 'dev_LastIP'), 'skipdiscovery')">
         <?= lang("DevDetail_Loading") ?>
     </button>
 
@@ -155,7 +155,7 @@
             $( "#tracerouteoutput" ).empty();
                 $.ajax({
                     method: "GET",
-                    url: "./php/server/traceroute.php?action=get&ip=" + getDeviceDataByMacAddress(getMac(), 'dev_LastIP') + "",
+                    url: "./php/server/traceroute.php?action=get&ip=" + getDeviceDataByMac(getMac(), 'dev_LastIP') + "",
                     beforeSend: function() { $('#tracerouteoutput').addClass("ajax_scripts_loading"); },
                     complete: function() { $('#tracerouteoutput').removeClass("ajax_scripts_loading"); },
                     success: function(data, textStatus) {
@@ -170,7 +170,7 @@
             $( "#nslookupoutput" ).empty();
                 $.ajax({
                     method: "GET",
-                    url: "./php/server/nslookup.php?action=get&ip=" + getDeviceDataByMacAddress(getMac(), 'dev_LastIP') + "",
+                    url: "./php/server/nslookup.php?action=get&ip=" + getDeviceDataByMac(getMac(), 'dev_LastIP') + "",
                     beforeSend: function() { $('#nslookupoutput').addClass("ajax_scripts_loading"); },
                     complete: function() { $('#nslookupoutput').removeClass("ajax_scripts_loading"); },
                     success: function(data, textStatus) {

front/devices.php

@@ -15,8 +15,6 @@
 <?php
 
   require 'php/templates/header.php';
-  require 'php/templates/graph.php';
-  
 
   // check permissions
   $dbPath = "../db/app.db";
@@ -25,7 +23,6 @@
   checkPermissions([$dbPath, $confPath]);
 ?>
 
-<script src="js/ui_components.js"></script>
 
 <!-- Page ------------------------------------------------------------------ -->
   <div class="content-wrapper">
@@ -43,77 +40,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_DownAlerts');?></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>
 
@@ -127,7 +54,7 @@
               </div>
               <div class="box-body">
                 <div class="chart">
-                  <script src="lib/AdminLTE/bower_components/chart.js/Chart.js"></script>
+                  <script src="lib/AdminLTE/bower_components/chart.js/Chart.js?v=<?php include 'php/templates/version.php'; ?>"></script>
                   <canvas id="OnlineChart" style="width:100%; height: 150px;  margin-bottom: 15px;"></canvas>
                 </div>
               </div>
@@ -137,19 +64,37 @@
       </div>
       <script src="js/graph_online_history.js"></script>
       <script>
-        var pia_js_online_history_time = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
-        var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>];
-        var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>];
-        var pia_js_online_history_ardev = [<?php pia_graph_devices_data($Pia_Graph_Device_Arch); ?>];
-        
-        setTimeout(() => {
-          pia_draw_graph_online_history(
-          pia_js_online_history_time, 
-          pia_js_online_history_ondev, 
-          pia_js_online_history_dodev, 
-          pia_js_online_history_ardev);
-        }, 500);
+        $.get('api/table_online_history.json?nocache=' + Date.now(), function(res) {
+              // Extracting data from the JSON response
+              var timeStamps = [];
+              var onlineCounts = [];
+              var downCounts = [];
+              var offlineCounts = [];
+              var archivedCounts = [];
 
+              res.data.forEach(function(entry) {
+                  var dateObj = new Date(entry.Scan_Date);
+                  var formattedTime = dateObj.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', hour12: false});
+
+                  timeStamps.push(formattedTime);
+                  onlineCounts.push(entry.Online_Devices);
+                  downCounts.push(entry.Down_Devices);
+                  offlineCounts.push(entry.Offline_Devices);
+                  archivedCounts.push(entry.Archived_Devices);
+              });
+
+              // Call your presenceOverTime function after data is ready
+              presenceOverTime(
+                  timeStamps,
+                  onlineCounts,
+                  offlineCounts,
+                  archivedCounts,
+                  downCounts
+              );
+          }).fail(function() {
+              // Handle any errors in fetching the data
+              console.error('Error fetching online history data.');
+          });
       </script>
 
 <!-- datatable ------------------------------------------------------------- -->
@@ -208,121 +153,70 @@
 <!-- page script ----------------------------------------------------------- -->
 <script>
   var deviceStatus    = 'all';
-  var parTableRows    = 'Front_Devices_Rows';
-  var parTableOrder   = 'Front_Devices_Order';
-  var tableRows       = 10;
-  var tableOrder      = [[3,'desc'], [0,'asc']];
+  var tableRows       = getCookie ("nax_parTableRows") == "" ? 10 : getCookie ("nax_parTableRows") ;
+  var tableOrder      = getCookie ("nax_parTableOrder") == "" ? [[3,'desc'], [0,'asc']] : JSON.parse(getCookie ("nax_parTableOrder")) ;
   
   var tableColumnHide = [];
-  var columnsStr = '[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]';
-  var tableColumnOrder = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]; 
-  var tableColumnVisible = tableColumnOrder;
-  //initialize the table headers in the correct order
-  var headersDefaultOrder = [ 
-                              getString('Device_TableHead_Name'),
-                              getString('Device_TableHead_Owner'),
-                              getString('Device_TableHead_Type'),   
-                              getString('Device_TableHead_Icon'),
-                              getString('Device_TableHead_Favorite'),
-                              getString('Device_TableHead_Group'),
-                              getString('Device_TableHead_FirstSession'),
-                              getString('Device_TableHead_LastSession'),
-                              getString('Device_TableHead_LastIP'),
-                              getString('Device_TableHead_MAC'),
-                              getString('Device_TableHead_Status'),
-                              getString('Device_TableHead_MAC_full'),
-                              getString('Device_TableHead_LastIPOrder'),
-                              getString('Device_TableHead_Rowid'),
-                              getString('Device_TableHead_Parent_MAC'),
-                              getString('Device_TableHead_Connected_Devices'),
-                              getString('Device_TableHead_Location'),
-                              getString('Device_TableHead_Vendor'),
-                              getString('Device_TableHead_Port')
-                            ];
+  var tableColumnOrder = [];
+  var tableColumnVisible = [];
 
   // Read parameters & Initialize components
+  callAfterAppInitialized(main)
   showSpinner();
-  main();
-
 
 // -----------------------------------------------------------------------------
 function main () {
 
-  handleLoadingDialog()
+  //initialize the table headers in the correct order
+  var availableColumns = getSettingOptions("UI_device_columns").split(",");
+  var headersDefaultOrder = availableColumns.map(val => getString(val));
+  var selectedColumns = JSON.parse(getSetting("UI_device_columns").replace(/'/g, '"'));
+
+  // generate default order lists of given length
+  var columnsStr = JSON.stringify(Array.from({ length: headersDefaultOrder.length }, (_, i) => i));
+  tableColumnOrder = Array.from({ length: headersDefaultOrder.length }, (_, i) => i);
+  tableColumnVisible = [];
+
+  // Initialize tableColumnVisible by including all columns from selectedColumns, preserving their order.
+  tableColumnVisible = selectedColumns.map(column => availableColumns.indexOf(column)).filter(index => index !== -1);
+
+  // Add any columns from availableColumns that are not in selectedColumns to the end.
+  const remainingColumns = availableColumns.map((column, index) => index).filter(index => !tableColumnVisible.includes(index));
+
+  // Combine both arrays.
+  tableColumnOrder = tableColumnVisible.concat(remainingColumns);
+
+  // Generate the full array of numbers from 0 to totalLength - 1 of tableColumnOrder
+  const fullArray = Array.from({ length: tableColumnOrder.length }, (_, i) => i);
+
+  // Filter out the elements already present in inputArray
+  const missingNumbers = fullArray.filter(num => !tableColumnVisible.includes(num));
+
+  // Concatenate the inputArray with the missingNumbers
+  tableColumnOrder = [...tableColumnVisible, ...missingNumbers];
+
+  // render table headers
+  html = '';
+                                  
+  for(index = 0; index < tableColumnOrder.length; index++)
+  {
+    html += '<th>' + headersDefaultOrder[tableColumnOrder[index]] + '</th>';
+  }
+
+  $('#tableDevices tr').html(html);  
 
   // Hide UI elements as per settings
-  hideUIelements("UI_DEV_SECTIONS")
-
-  // get from cookie if available (need to use decodeURI as saved as part of URI in PHP)
-  cookieColumnsVisibleStr = decodeURI(getCookie("Front_Devices_Columns_Visible")).replaceAll('%2C',',')  
-
-  defaultValue = cookieColumnsVisibleStr == "" ? columnsStr : cookieColumnsVisibleStr;
-
-  // get visible columns
-  $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue='+defaultValue+'&parameter=Front_Devices_Columns_Visible&skipcache', function(data) {
-
-    handle_locked_DB(data)
+  // setTimeout(() => {
+    hideUIelements("UI_DEV_SECTIONS")
     
-    // save which columns are in the Devices page visible
-    tableColumnVisible = numberArrayFromString(data);
+  // }, 10);
 
-    // get from cookie if available (need to use decodeURI as saved as part of URI in PHP)
-    cookieColumnsOrderStr = decodeURI(getCookie("Front_Devices_Columns_Order")).replaceAll('%2C',',')
-
-    defaultValue = cookieColumnsOrderStr == "" ? columnsStr : cookieColumnsOrderStr;    
-
-    // get the custom order specified by the user
-    $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue='+defaultValue+'&parameter=Front_Devices_Columns_Order&skipcache', function(data) {
-
-      handle_locked_DB(data)
-    
-      // save the columns order in the Devices page 
-      tableColumnOrder = numberArrayFromString(data);
-
-      html = '';
-                                  
-      for(index = 0; index < tableColumnOrder.length; index++)
-      {
-        html += '<th>' + headersDefaultOrder[tableColumnOrder[index]] + '</th>';
-      }
-
-      $('#tableDevices tr').html(html);   
-
-      // get parameter value
-      $.get('php/server/parameters.php?action=get&defaultValue=50&parameter='+ parTableRows, function(data) {
-        var result = JSON.parse(data);
-
-        result = parseInt(result, 10)
-
-        if (Number.isInteger (result) ) {
-            tableRows = result;  
-        }
-
-        // get parameter value
-        $.get('php/server/parameters.php?action=get&defaultValue=[[3,"desc"],[0,"asc"]]&parameter='+ parTableOrder, function(data) {
-          var result = JSON.parse(data);
-          result = JSON.parse(result);
-
-          
-
-          if (Array.isArray (result) ) {
-            tableOrder = result;
-          }
-
-          // Initialize components with parameters
-
-          initializeDatatable(getUrlAnchor('my'));
-
-
-          
-          // check if data outdated and show spinner if so
-          handleLoadingDialog()
-
-
-        });
-      });
-    });
-   });
+  // Initialize components with parameters
+  initializeDatatable(getUrlAnchor('my_devices'));
+  
+  // check if data outdated and show spinner if so
+  handleLoadingDialog()
+  
 }
 
 // -----------------------------------------------------------------------------
@@ -348,21 +242,47 @@ 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;
+
+      // 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);
@@ -371,12 +291,29 @@ function getDevicesTotals(devicesData) {
   // console.log(resultJSON);
 }
 
+//------------------------------------------------------------------------------
+//  Render the info boxes/tiles on top
+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;
@@ -393,16 +330,16 @@ 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':
         return item.dev_Favorite === 1;
       case 'new':
         return item.dev_NewDevice === 1;
+      case 'offline':
+        return item.dev_PresentLastScan === 0;
       case 'down':
-        return (item.dev_PresentLastScan === 0 && item.dev_AlertDeviceDown  !== 0) || item.dev_PresentLastScan === 0;
-      case 'down_only':
         return (item.dev_PresentLastScan === 0 && item.dev_AlertDeviceDown  !== 0);
       case 'archived':
         return item.dev_Archived === 1;
@@ -419,7 +356,7 @@ function getDeviceStatus(item)
   if(item.dev_NewDevice === 1)
   {
     return 'New';
-  }
+  } 
   else if(item.dev_PresentLastScan === 1)
   {
     return 'On-line';
@@ -445,7 +382,7 @@ function initializeDatatable (status) {
 
   if(!status)
   {
-    status = 'my'
+    status = 'my_devices'
   }
 
   // Save status selected
@@ -453,12 +390,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_DownAlerts');  color = 'red';     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;
   } 
 
@@ -478,6 +417,11 @@ function initializeDatatable (status) {
   }
 
   $.get('api/table_devices.json?nocache=' + Date.now(), function(result) {      
+
+    //  refresh devices cache 
+    devicesListAll_JSON = result["data"]
+    devicesListAll_JSON_str = JSON.stringify(devicesListAll_JSON)
+    setCache('devicesListAll_JSON', devicesListAll_JSON_str)
     
     // query data
     getDevicesTotals(result.data);      
@@ -508,7 +452,11 @@ function initializeDatatable (status) {
                 getNumberOfChildren(item.dev_MAC, result.data) || 0,
                 item.dev_Location || "",
                 item.dev_Vendor || "",
-                item.dev_Network_Node_port || 0
+                item.dev_Network_Node_port || 0,
+                item.dev_GUID || "",
+                item.dev_SyncHubNodeName || "",
+                item.dev_NetworkSite || "",
+                item.dev_SSID || ""
             ];
 
             var newRow = [];
@@ -522,10 +470,6 @@ function initializeDatatable (status) {
         })
     };
 
-    
-    // TODO displayed columns
-
-
     // Check if the DataTable already exists
     if ($.fn.dataTable.isDataTable('#tableDevices')) {
       // The DataTable exists, so destroy it
@@ -533,12 +477,12 @@ function initializeDatatable (status) {
       table.clear().destroy();
     }
 
-    var table=
+    var table =
     $('#tableDevices').DataTable({
       'data'         : dataArray["data"],
       'paging'       : true,
       'lengthChange' : true,
-      'lengthMenu'   : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, getString('Device_Tablelenght_all')]],
+      'lengthMenu'   : [[10, 25, 50, 100, 500, 100000], [10, 25, 50, 100, 500, getString('Device_Tablelenght_all')]],
       'searching'    : true,
 
       'ordering'     : true,
@@ -623,7 +567,11 @@ function initializeDatatable (status) {
         // Dates      
         {targets: [mapIndx(6), mapIndx(7)],
           'createdCell': function (td, cellData, rowData, row, col) {
-            $(td).html (translateHTMLcodes (cellData));
+            var result = cellData.toString(); // Convert to string
+            if (result.includes("+")) { // Check if timezone offset is present
+                result = result.split('+')[0]; // Remove timezone offset
+            }
+            $(td).html (translateHTMLcodes (result));
         } },
 
         // Random MAC      
@@ -641,17 +589,27 @@ function initializeDatatable (status) {
         {targets: [mapIndx(10)],
           'createdCell': function (td, cellData, rowData, row, col) {
 
-            // console.log(cellData)
-            switch (cellData) {
-              case 'Down':      color='red';              break;
-              case 'New':       color='yellow';           break;
-              case 'On-line':   color='green';            break;
-              case 'Off-line':  color='gray text-white';  break;
-              case 'Archived':  color='gray text-white';  break;
-              default:          color='aqua';             break;
-            };
+            devData = getDeviceDataByMac(rowData[mapIndx(11)])
+
+            if (devData.dev_PresentLastScan == 1)
+            {
+              css = "green text-white statusOnline"
+              icon = '<i class="fa-solid fa-plug"></i>'
+            } else if (devData.dev_PresentLastScan != 1 && devData.dev_AlertDeviceDown == 1)
+            {
+              css = "red text-white statusDown"
+              icon = '<i class="fa-solid fa-triangle-exclamation"></i>'
+            } else if(devData.dev_PresentLastScan != 1)
+            {
+              css = "gray text-white statusOffline"
+              icon = '<i class="fa-solid fa-xmark"></i>'
+            } else
+            {
+              css = "gray text-white statusUnknown"
+              icon = '<i class="fa-solid fa-question"></i>'
+            }
         
-            $(td).html ('<a href="deviceDetails.php?mac='+ rowData[mapIndx(11)] +'" class="badge bg-'+ color +'">'+ cellData.replace('-', '') +'</a>');
+            $(td).html (`<a href="deviceDetails.php?mac=${rowData[mapIndx(11)]}" class="badge bg-${css}">${icon} ${cellData.replace('-', '')}</a>`);
         } },
       ],
       
@@ -672,11 +630,11 @@ function initializeDatatable (status) {
 
     // Save cookie Rows displayed, and Parameters rows & order
     $('#tableDevices').on( 'length.dt', function ( e, settings, len ) {
-      setParameter (parTableRows, len);
+      setCookie ("nax_parTableRows", len, 129600); // save for 90 days
     } );
       
     $('#tableDevices').on( 'order.dt', function () {
-      setParameter (parTableOrder, JSON.stringify (table.order()) );
+      setCookie ("nax_parTableOrder", JSON.stringify (table.order()), 129600); // save for 90 days
       setCache ('devicesList', getDevicesFromTable(table) );
     } );
 
@@ -696,8 +654,6 @@ function initializeDatatable (status) {
           // Check if any row is selected
           var anyRowSelected = $('#tableDevices tr.selected').length > 0;
 
-          console.log(anyRowSelected);
-
           // Toggle visibility of element with ID 'multiEdit'
           $('#multiEdit').toggle(anyRowSelected);
       }, 200);

front/events.php

@@ -145,6 +145,9 @@
                   <th><?= lang('Events_TableHead_IP');?></th>
                   <th><?= lang('Events_TableHead_IPOrder');?></th>
                   <th><?= lang('Events_TableHead_AdditionalInfo');?></th>
+                  <th>N/A</th> 
+                  <th>MAC</th>
+                  <th><?= lang('Events_TableHead_PendingAlert');?></th>
                 </tr>
                 </thead>
               </table>
@@ -180,43 +183,31 @@
 
 <!-- page script ----------------------------------------------------------- -->
 <script>
-  var parPeriod       = 'Front_Events_Period';
-  var parTableRows    = 'Front_Events_Rows';
+  var parPeriod       = 'nax_parPeriod';
+  var parTableRows    = 'nax_parTableRows';
 
   var eventsType      = 'all';
-  var period          = '';
-  var tableRows       = 10;
+  var period          = '1 day';
+  var tableRows       = 25;
   
   // Read parameters & Initialize components
   main();
 
 
 // -----------------------------------------------------------------------------
-function main () {
-  // get parameter value
-  $.get('php/server/parameters.php?action=get&defaultValue=1 day&parameter='+ parPeriod, function(data) {
-    var result = JSON.parse(data);
-    if (result) {
-      period = result;
-      $('#period').val(period);
-    }
+function main() {
+  // Get parameter value from cookies instead of server
+  period = getCookie(parPeriod) === "" ? "1 day" : getCookie(parPeriod);
+  $('#period').val(period);
 
-    // get parameter value
-    $.get('php/server/parameters.php?action=get&defaultValue=50&parameter='+ parTableRows, function(data) {
-      var result = JSON.parse(data);
-      result = parseInt(result, 10)
-      if (Number.isInteger (result) ) {
-          tableRows = result;
-      }
+  tableRows = getCookie(parTableRows) === "" ? 50 : parseInt(getCookie(parTableRows), 10);
 
-      // Initialize components
-      initializeDatatable();
+  // Initialize components
+  initializeDatatable();
 
-      // query data
-      getEventsTotals();
-      getEvents (eventsType);
-    });
-  });
+  // Query data
+  getEventsTotals();
+  getEvents(eventsType);
 }
 
 
@@ -236,7 +227,7 @@ function initializeDatatable () {
     'pageLength'   : tableRows,
 
     'columnDefs'  : [
-      {visible:   false,         targets: [0,5,6,7,8,10] },
+      {visible:   false,         targets: [0,5,6,7,8,10,11,12,13] },
       {className: 'text-center', targets: [] },
       {orderData: [8],           targets: 7 },
       {orderData: [10],          targets: 9 },
@@ -251,6 +242,13 @@ function initializeDatatable () {
       {targets: [3,4,5,6,7],
         "createdCell": function (td, cellData, rowData, row, col) {
           $(td).html (translateHTMLcodes (cellData));
+      } },
+
+      // PendingAlert
+      {targets: [14],
+        "createdCell": function (td, cellData, rowData, row, col) {
+          // console.log(cellData);
+          $(td).html (cellData);
       } }
     ],
 
@@ -271,7 +269,7 @@ function initializeDatatable () {
 
   // Save Parameter rows when changed
   $('#tableEvents').on( 'length.dt', function ( e, settings, len ) {
-    setParameter (parTableRows, len);
+    setCookie(parTableRows, len)
   } );
 };
 
@@ -280,7 +278,8 @@ function initializeDatatable () {
 function periodChanged () {
   // Save Parameter Period
   period = $('#period').val();
-  setParameter (parPeriod, period);
+
+  setCookie(parTableRows, period)
 
   // Requery totals and events
   getEventsTotals();
@@ -331,7 +330,7 @@ function getEvents (p_eventsType) {
   $('#tableEventsBox')[0].className = 'box box-' + color;
   $('#tableEventsTitle').html (tableTitle);
 
-  // Coluumns Visibility
+  // Columns Visibility
   $('#tableEvents').DataTable().column(3).visible (!sesionCols);
   $('#tableEvents').DataTable().column(4).visible (!sesionCols);
   $('#tableEvents').DataTable().column(5).visible (sesionCols);

front/help_faq.php

@@ -147,19 +147,6 @@
       </div>
     </div>
   </div>
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h4 class="panel-title">
-        <a data-toggle="collapse" data-parent="#accordion_det" href="#collapse301">
-        <?= lang('HelpFAQ_Cat_Detail_301_head_a');?> "<?= lang('DevDetail_EveandAl_ScanCycle');?>" <?= lang('HelpFAQ_Cat_Detail_301_head_b');?></a>
-      </h4>
-    </div>
-    <div id="collapse301" class="panel-collapse collapse" style="font-size: 16px;">
-      <div class="panel-body">
-        <?= lang('HelpFAQ_Cat_Detail_301_text');?>
-      </div>
-    </div>
-  </div>
   <div class="panel panel-default">
     <div class="panel-heading">
       <h4 class="panel-title">

front/img/svg/netalertx_red_1_backup.svg

@@ -0,0 +1,365 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="200"
+   height="200"
+   viewBox="0 0 52.916667 52.916668"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   sodipodi:docname="netalertx_red_1_backup.svg"
+   inkscape:export-filename="C:\Users\jokob\netalertx_red_1.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="3.6203867"
+     inkscape:cx="154.67961"
+     inkscape:cy="88.664562"
+     inkscape:window-width="3440"
+     inkscape:window-height="1377"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer6"
+     units="px"
+     width="50px" />
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect51283"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect51283"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect51278"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect51278"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect51273"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect51273"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect48754"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect48754"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath48972">
+      <path
+         style="fill:#000000;stroke-width:0.280643"
+         id="path48974"
+         width="56.128242"
+         height="56.128246"
+         x="-18.924671"
+         y="-56.198174"
+         transform="rotate(45.438374)"
+         mask="none"
+         sodipodi:type="rect" />
+    </clipPath>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask49405">
+      <text
+         xml:space="preserve"
+         style="font-size:60.8695px;line-height:1.25;font-family:Amiri;-inkscape-font-specification:Amiri;display:inline;stroke-width:1.52174"
+         x="66.930733"
+         y="78.642288"
+         id="text49409"
+         transform="scale(1.4861626,0.67287388)"><tspan
+           sodipodi:role="line"
+           id="tspan49407"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Tw Cen MT';-inkscape-font-specification:'Tw Cen MT';fill:#ffffff;stroke-width:1.52174"
+           x="66.930733"
+           y="78.642288">A</tspan></text>
+    </mask>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath50306">
+      <circle
+         style="mix-blend-mode:normal;fill:#d40000;stroke-width:0.176318"
+         id="circle50308"
+         cy="26.458334"
+         cx="26.458334"
+         r="26.458334"
+         clip-path="url(#clipPath48972)"
+         transform="matrix(1.0038771,0,0.00391255,1.0073928,-0.04603368,-0.1228191)" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath48972-7">
+      <path
+         style="fill:#000000;stroke-width:0.280643"
+         id="path48974-5"
+         width="56.128242"
+         height="56.128246"
+         x="-18.924671"
+         y="-56.198174"
+         transform="rotate(45.438374)"
+         mask="none"
+         sodipodi:type="rect" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath50306-6">
+      <circle
+         style="mix-blend-mode:normal;fill:#d40000;stroke-width:0.176318"
+         id="circle50308-5"
+         cy="26.458334"
+         cx="26.458334"
+         r="26.458334"
+         clip-path="url(#clipPath48972)"
+         transform="matrix(1.0038771,0,0.00391255,1.0073928,-0.04603368,-0.1228191)" />
+    </clipPath>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask-powermask-path-effect51273">
+      <path
+         style="fill:#000000"
+         id="path51263"
+         sodipodi:type="arc"
+         sodipodi:cx="66.211845"
+         sodipodi:cy="37.490814"
+         sodipodi:rx="3.9464016"
+         sodipodi:ry="1.4616301"
+         sodipodi:start="0"
+         sodipodi:end="0.031086059"
+         sodipodi:open="true"
+         sodipodi:arc-type="arc"
+         d="m 70.158247,37.490814 a 3.9464016,1.4616301 0 0 1 -0.0019,0.04543" />
+    </mask>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask-powermask-path-effect51278">
+      <path
+         style="fill:#000000"
+         id="path51267"
+         sodipodi:type="arc"
+         sodipodi:cx="66.211845"
+         sodipodi:cy="37.490814"
+         sodipodi:rx="3.9464016"
+         sodipodi:ry="1.4616301"
+         sodipodi:start="0"
+         sodipodi:end="0.031086059"
+         sodipodi:open="true"
+         sodipodi:arc-type="arc" />
+    </mask>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask-powermask-path-effect51283">
+      <path
+         style="fill:#000000"
+         id="path51271"
+         sodipodi:type="arc"
+         sodipodi:cx="66.211845"
+         sodipodi:cy="37.490814"
+         sodipodi:rx="3.9464016"
+         sodipodi:ry="1.4616301"
+         sodipodi:start="0"
+         sodipodi:end="0.031086059"
+         sodipodi:open="true"
+         sodipodi:arc-type="arc" />
+    </mask>
+    <filter
+       id="mask-powermask-path-effect51273_inverse"
+       inkscape:label="filtermask-powermask-path-effect51273"
+       style="color-interpolation-filters:sRGB"
+       height="100"
+       width="100"
+       x="-50"
+       y="-50">
+      <feColorMatrix
+         id="mask-powermask-path-effect51273_primitive1"
+         values="1"
+         type="saturate"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         id="mask-powermask-path-effect51273_primitive2"
+         values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "
+         in="fbSourceGraphic" />
+    </filter>
+  </defs>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Red 1"
+     style="display:inline">
+    <circle
+       style="fill:#ff2a2a;stroke-width:0.176318"
+       id="path31-8"
+       cy="26.458334"
+       cx="26.458334"
+       r="26.458334" />
+  </g>
+  <g
+     inkscape:label="Black"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <ellipse
+       style="fill:#000000;stroke-width:0.176146"
+       id="path31"
+       cy="26.51001"
+       cx="26.458334"
+       rx="26.458334"
+       ry="26.406658" />
+    <circle
+       style="display:inline;fill:#ffffff;stroke-width:0.176318"
+       id="path31-89"
+       cy="26.458334"
+       cx="126.45834"
+       r="26.458334"
+       mask="url(#mask49405)"
+       transform="translate(-99.990036,0.02979629)" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="A - Layer 2"
+     style="display:inline">
+    <rect
+       style="fill:#ffffff;stroke-width:0.328992"
+       id="rect48998"
+       width="26.0966"
+       height="6.0620313"
+       x="13.255443"
+       y="41.262722" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="g48055"
+     inkscape:label="Red top"
+     style="display:inline;mix-blend-mode:normal">
+    <circle
+       style="mix-blend-mode:normal;fill:#d40000;stroke-width:0.176318"
+       id="circle48752"
+       cy="26.458334"
+       cx="26.458334"
+       r="26.458334"
+       clip-path="url(#clipPath48972)"
+       transform="matrix(1.0038771,0,0.00391255,1.0073928,-0.04603368,-0.1228191)" />
+    <ellipse
+       style="display:inline;mix-blend-mode:normal;fill:#000000;stroke-width:0.43638"
+       id="path50080"
+       clip-path="url(#clipPath50306)"
+       ry="13.739323"
+       rx="16.735666"
+       cy="22.874514"
+       cx="26.36149" />
+    <path
+       style="fill:#000000"
+       id="path51325"
+       sodipodi:type="arc"
+       sodipodi:cx="16.772207"
+       sodipodi:cy="26.090099"
+       sodipodi:rx="4.1291056"
+       sodipodi:ry="7.6004772"
+       sodipodi:start="0"
+       sodipodi:end="0.031086059"
+       sodipodi:arc-type="slice"
+       d="m 20.901313,26.090099 a 4.1291056,7.6004772 0 0 1 -0.002,0.236231 l -4.127111,-0.236231 z" />
+    <path
+       style="fill:#d40000"
+       id="path51717"
+       sodipodi:type="arc"
+       sodipodi:cx="26.441042"
+       sodipodi:cy="-26.531424"
+       sodipodi:rx="10.418671"
+       sodipodi:ry="9.5820541"
+       sodipodi:start="0.82219863"
+       sodipodi:end="2.3054129"
+       sodipodi:arc-type="slice"
+       d="m 33.532115,-19.511189 a 10.418671,9.5820541 0 0 1 -14.074736,0.09049 l 6.983663,-7.110726 z"
+       transform="matrix(1,0,0.0048047,-0.99998846,0,0)" />
+    <path
+       style="fill:#ffffff;stroke-width:0.276214"
+       d="M 145.28835,50.354872 C 127.01317,34.62734 98.057144,30.012421 73.710372,38.947003 c -6.518003,2.391924 -14.288822,6.834002 -19.265958,11.01311 -1.198654,1.006465 -2.270358,1.829935 -2.381565,1.829935 -0.111206,0 -5.210052,-5.102002 -11.33077,-11.337781 L 29.603503,29.114489 30.822139,27.851613 c 0.670251,-0.69458 2.51592,-2.384634 4.101489,-3.755674 C 50.725112,10.43241 69.462577,2.3767456 90.736164,0.10085492 95.380582,-0.39601422 106.33043,-0.31105699 111.03786,0.25837091 133.04363,2.9202648 151.46536,11.26468 167.83762,25.986722 l 3.30701,2.97369 -2.29392,2.320103 c -1.26165,1.276057 -6.58213,6.517685 -11.82329,11.648065 l -9.52936,9.327957 z"
+       id="path52311"
+       transform="scale(0.26458333)" />
+    <path
+       style="fill:#ffffff;stroke-width:0.276214"
+       d="M 86.40648,86.72667 73.376068,73.416681 74.667403,72.441306 c 4.72517,-3.569034 10.347316,-6.07197 16.730552,-7.448313 4.112758,-0.886786 12.327485,-0.880604 16.463455,0.01239 6.55399,1.415066 12.32233,4.049211 17.21441,7.861065 l 1.05592,0.822759 -1.33214,1.364507 c -0.73267,0.750478 -6.73901,6.678655 -13.34742,13.173726 l -12.015288,11.80922 z"
+       id="path52350"
+       transform="scale(0.26458333)"
+       inkscape:export-filename="C:\Users\jokob\path52350.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="Circle">
+    <path
+       style="fill:#000000"
+       id="path50026"
+       sodipodi:type="arc"
+       sodipodi:cx="71.071762"
+       sodipodi:cy="34.677177"
+       sodipodi:rx="1.7174155"
+       sodipodi:ry="5.5907354"
+       sodipodi:start="0"
+       sodipodi:end="0.031086059"
+       sodipodi:open="true"
+       sodipodi:arc-type="arc"
+       mask="url(#mask-powermask-path-effect51273)"
+       d="m 72.789178,34.677177 a 1.7174155,5.5907354 0 0 1 -8.3e-4,0.173766"
+       inkscape:path-effect="#path-effect51273" />
+    <path
+       style="fill:#ffffff;stroke-width:0.276214"
+       d="m 151.08883,181.46994 -2.76213,-2.60427 -48.802077,-0.009 -48.802075,-0.009 -2.292573,2.48592 c -1.260915,1.36726 -2.431589,2.48592 -2.601499,2.48592 -0.869396,0 -9.118995,-6.36599 -13.713669,-10.58246 l -2.688104,-2.46684 34.973647,-35.11455 c 19.235503,-19.313 35.0611,-35.11454 35.167986,-35.11454 0.106889,0 16.093094,15.82967 35.524894,35.17705 l 35.33055,35.17705 -2.48592,2.35505 c -3.08951,2.92687 -7.41515,6.40509 -11.09719,8.92319 -1.54594,1.05725 -2.85105,1.91728 -2.90024,1.9112 -0.0492,-0.006 -1.33242,-1.183 -2.8516,-2.61535 z m -38.4631,-38.32188 -13.050732,-13.05073 -13.050727,13.05073 -13.050725,13.05072 h 26.101452 26.101452 z"
+       id="path52389"
+       transform="scale(0.26458333)"
+       inkscape:export-filename="C:\Users\jokob\path52389.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="fill:#d40000;stroke-width:0.276214"
+       d="M 86.538548,86.634546 C 73.69451,73.514255 73.655832,73.471276 74.253912,72.984129 c 3.966911,-3.231117 10.195336,-6.133881 16.482252,-7.68157 2.339787,-0.576001 3.282272,-0.646986 8.700728,-0.655316 6.728828,-0.01035 8.365758,0.223077 13.326638,1.900338 4.59135,1.552325 7.8315,3.224336 11.49958,5.934101 l 1.61476,1.192897 -2.31005,2.336325 c -1.27053,1.284978 -7.22284,7.16236 -13.22736,13.060849 L 99.423152,99.796276 Z"
+       id="path52465"
+       transform="scale(0.26458333)" />
+    <path
+       style="fill:#d40000;stroke-width:0.276214"
+       d="M 145.01213,49.92143 C 129.67534,37.157691 107.61173,31.765107 86.040533,35.508132 73.800823,37.631961 63.910278,42.259414 52.74134,51.087703 l -0.683951,0.540616 -1.950068,-1.921684 C 49.034784,48.649709 44.035189,43.574887 38.997108,38.429251 l -9.160146,-9.355699 2.40156,-2.290793 C 39.310252,20.037198 49.728886,13.01193 58.630455,8.9867218 78.42597,0.03536962 99.380149,-2.3494504 120.42912,1.9533417 138.21485,5.5890676 153.70529,13.558756 168.1679,26.51451 l 2.71597,2.432989 -2.99218,3.016385 c -1.6457,1.65901 -6.90751,6.843636 -11.69291,11.521393 l -8.70072,8.505009 z"
+       id="path52504"
+       transform="scale(0.26458333)"
+       inkscape:export-filename="C:\Users\jokob\path52504.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+  </g>
+</svg>

front/img/svg/netalertx_red_1_backup_cleaned.svg

@@ -0,0 +1,374 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="200"
+   height="200"
+   viewBox="0 0 52.916667 52.916668"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   sodipodi:docname="netalertx_red_1_backup_clened.svg"
+   inkscape:export-filename="C:\Users\jokob\netalertx_red_1.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="132.22897"
+     inkscape:cy="118.44039"
+     inkscape:window-width="3440"
+     inkscape:window-height="1377"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer6"
+     units="px"
+     width="50px" />
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect51283"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect51283"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect51278"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect51278"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect51273"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect51273"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect48754"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect48754"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath48972">
+      <path
+         style="fill:#000000;stroke-width:0.280643"
+         id="path48974"
+         width="56.128242"
+         height="56.128246"
+         x="-18.924671"
+         y="-56.198174"
+         transform="rotate(45.438374)"
+         mask="none"
+         sodipodi:type="rect" />
+    </clipPath>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask49405">
+      <text
+         xml:space="preserve"
+         style="font-size:60.8695px;line-height:1.25;font-family:Amiri;-inkscape-font-specification:Amiri;display:inline;stroke-width:1.52174"
+         x="66.930733"
+         y="78.642288"
+         id="text49409"
+         transform="scale(1.4861626,0.67287388)"><tspan
+           sodipodi:role="line"
+           id="tspan49407"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Tw Cen MT';-inkscape-font-specification:'Tw Cen MT';fill:#ffffff;stroke-width:1.52174"
+           x="66.930733"
+           y="78.642288">A</tspan></text>
+    </mask>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath50306">
+      <circle
+         style="mix-blend-mode:normal;fill:#d40000;stroke-width:0.176318"
+         id="circle50308"
+         cy="26.458334"
+         cx="26.458334"
+         r="26.458334"
+         clip-path="url(#clipPath48972)"
+         transform="matrix(1.0038771,0,0.00391255,1.0073928,-0.04603368,-0.1228191)" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath48972-7">
+      <path
+         style="fill:#000000;stroke-width:0.280643"
+         id="path48974-5"
+         width="56.128242"
+         height="56.128246"
+         x="-18.924671"
+         y="-56.198174"
+         transform="rotate(45.438374)"
+         mask="none"
+         sodipodi:type="rect" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath50306-6">
+      <circle
+         style="mix-blend-mode:normal;fill:#d40000;stroke-width:0.176318"
+         id="circle50308-5"
+         cy="26.458334"
+         cx="26.458334"
+         r="26.458334"
+         clip-path="url(#clipPath48972)"
+         transform="matrix(1.0038771,0,0.00391255,1.0073928,-0.04603368,-0.1228191)" />
+    </clipPath>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask-powermask-path-effect51273">
+      <path
+         id="mask-powermask-path-effect51273_box"
+         style="fill:#ffffff;fill-opacity:1"
+         d="m 71.788348,33.677177 h 2.00083 v 2.173766 h -2.00083 z" />
+      <path
+         style="fill:#000000"
+         id="path51263"
+         sodipodi:type="arc"
+         sodipodi:cx="66.211845"
+         sodipodi:cy="37.490814"
+         sodipodi:rx="3.9464016"
+         sodipodi:ry="1.4616301"
+         sodipodi:start="0"
+         sodipodi:end="0.031086059"
+         sodipodi:open="true"
+         sodipodi:arc-type="arc"
+         d="m 70.158247,37.490814 a 3.9464016,1.4616301 0 0 1 -0.0019,0.04543" />
+    </mask>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask-powermask-path-effect51278">
+      <path
+         style="fill:#000000"
+         id="path51267"
+         sodipodi:type="arc"
+         sodipodi:cx="66.211845"
+         sodipodi:cy="37.490814"
+         sodipodi:rx="3.9464016"
+         sodipodi:ry="1.4616301"
+         sodipodi:start="0"
+         sodipodi:end="0.031086059"
+         sodipodi:open="true"
+         sodipodi:arc-type="arc" />
+    </mask>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask-powermask-path-effect51283">
+      <path
+         style="fill:#000000"
+         id="path51271"
+         sodipodi:type="arc"
+         sodipodi:cx="66.211845"
+         sodipodi:cy="37.490814"
+         sodipodi:rx="3.9464016"
+         sodipodi:ry="1.4616301"
+         sodipodi:start="0"
+         sodipodi:end="0.031086059"
+         sodipodi:open="true"
+         sodipodi:arc-type="arc" />
+    </mask>
+    <filter
+       id="mask-powermask-path-effect51273_inverse"
+       inkscape:label="filtermask-powermask-path-effect51273"
+       style="color-interpolation-filters:sRGB"
+       height="100"
+       width="100"
+       x="-50"
+       y="-50">
+      <feColorMatrix
+         id="mask-powermask-path-effect51273_primitive1"
+         values="1"
+         type="saturate"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         id="mask-powermask-path-effect51273_primitive2"
+         values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "
+         in="fbSourceGraphic" />
+    </filter>
+  </defs>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Red 1"
+     style="display:none">
+    <circle
+       style="fill:#ff2a2a;stroke-width:0.176318"
+       id="path31-8"
+       cy="26.458334"
+       cx="26.458334"
+       r="26.458334" />
+  </g>
+  <g
+     inkscape:label="Black"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <ellipse
+       style="fill:#000000;stroke-width:0.176146"
+       id="path31"
+       cy="26.51001"
+       cx="26.458334"
+       rx="26.458334"
+       ry="26.406658" />
+    <circle
+       style="display:inline;fill:#ffffff;stroke-width:0.176318"
+       id="path31-89"
+       mask="url(#mask49405)"
+       transform="translate(-99.990036,0.02979629)"
+       r="26.458334"
+       cy="26.458334"
+       cx="126.45834" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="A - Layer 2"
+     style="display:none">
+    <rect
+       style="fill:#ffffff;stroke-width:0.328992"
+       id="rect48998"
+       width="26.0966"
+       height="6.0620313"
+       x="13.255443"
+       y="41.262722" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="g48055"
+     inkscape:label="Red top"
+     style="display:none;mix-blend-mode:normal">
+    <circle
+       style="mix-blend-mode:normal;fill:#d40000;stroke-width:0.176318"
+       id="circle48752"
+       cy="26.458334"
+       cx="26.458334"
+       r="26.458334"
+       clip-path="url(#clipPath48972)"
+       transform="matrix(1.0038771,0,0.00391255,1.0073928,-0.04603368,-0.1228191)" />
+    <ellipse
+       style="display:inline;mix-blend-mode:normal;fill:#000000;stroke-width:0.43638"
+       id="path50080"
+       clip-path="url(#clipPath50306)"
+       ry="13.739323"
+       rx="16.735666"
+       cy="22.874514"
+       cx="26.36149"
+       transform="translate(0,0.09980904)" />
+    <path
+       style="fill:#000000"
+       id="path51325"
+       sodipodi:type="arc"
+       sodipodi:cx="16.772207"
+       sodipodi:cy="26.090099"
+       sodipodi:rx="4.1291056"
+       sodipodi:ry="7.6004772"
+       sodipodi:start="0"
+       sodipodi:end="0.031086059"
+       sodipodi:arc-type="slice"
+       d="m 20.901313,26.090099 a 4.1291056,7.6004772 0 0 1 -0.002,0.236231 l -4.127111,-0.236231 z" />
+    <path
+       style="fill:#d40000"
+       id="path51717"
+       sodipodi:type="arc"
+       sodipodi:cx="26.441042"
+       sodipodi:cy="-26.531424"
+       sodipodi:rx="10.418671"
+       sodipodi:ry="9.5820541"
+       sodipodi:start="0.82219863"
+       sodipodi:end="2.3054129"
+       sodipodi:arc-type="slice"
+       d="m 33.532115,-19.511189 a 10.418671,9.5820541 0 0 1 -14.074736,0.09049 l 6.983663,-7.110726 z"
+       transform="matrix(1,0,0.0048047,-0.99998846,0,0)" />
+    <path
+       style="fill:#ffffff;stroke-width:0.276214"
+       d="M 145.28835,50.354872 C 127.01317,34.62734 98.057144,30.012421 73.710372,38.947003 c -6.518003,2.391924 -14.288822,6.834002 -19.265958,11.01311 -1.198654,1.006465 -2.270358,1.829935 -2.381565,1.829935 -0.111206,0 -5.210052,-5.102002 -11.33077,-11.337781 L 29.603503,29.114489 30.822139,27.851613 c 0.670251,-0.69458 2.51592,-2.384634 4.101489,-3.755674 C 50.725112,10.43241 69.462577,2.3767456 90.736164,0.10085492 95.380582,-0.39601422 106.33043,-0.31105699 111.03786,0.25837091 133.04363,2.9202648 151.46536,11.26468 167.83762,25.986722 l 3.30701,2.97369 -2.29392,2.320103 c -1.26165,1.276057 -6.58213,6.517685 -11.82329,11.648065 l -9.52936,9.327957 z"
+       id="path52311"
+       transform="scale(0.26458333)" />
+    <path
+       style="fill:#ffffff;stroke-width:0.276214"
+       d="M 86.538548,86.634546 74.145111,73.25799 74.899337,72.758689 c 4.93766,-3.268754 10.138703,-6.508578 16.602198,-7.437693 5.484021,-0.788317 12.228205,-0.984814 16.377135,-0.09119 6.77689,1.459652 11.87156,4.340971 17.02452,7.792011 l 0.97468,0.652765 -1.37124,1.269268 c -0.86863,0.804036 -6.82647,6.676301 -13.34742,13.259175 L 99.423152,99.796276 Z"
+       id="path52350"
+       transform="scale(0.26458333)"
+       inkscape:export-filename="C:\Users\jokob\path52350.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       sodipodi:nodetypes="ccsssscsscc" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="Circle"
+     style="display:inline">
+    <path
+       style="fill:#000000"
+       id="path50026"
+       sodipodi:type="arc"
+       sodipodi:cx="71.071762"
+       sodipodi:cy="34.677177"
+       sodipodi:rx="1.7174155"
+       sodipodi:ry="5.5907354"
+       sodipodi:start="0"
+       sodipodi:end="0.031086059"
+       sodipodi:open="true"
+       sodipodi:arc-type="arc"
+       mask="url(#mask-powermask-path-effect51273)"
+       d="m 72.789178,34.677177 a 1.7174155,5.5907354 0 0 1 -8.3e-4,0.173766"
+       inkscape:path-effect="#path-effect51273" />
+    <path
+       style="fill:#ffffff;stroke-width:0.276214"
+       d="m 151.08883,181.46994 -2.76213,-2.60427 -48.802077,-0.009 -48.802075,-0.009 -2.292573,2.48592 c -1.260915,1.36726 -2.431589,2.48592 -2.601499,2.48592 -0.869396,0 -9.118995,-6.36599 -13.713669,-10.58246 l -2.688104,-2.46684 34.973647,-35.11455 c 19.235503,-19.313 34.922993,-35.39075 35.029879,-35.39075 0.106889,0 16.231201,16.10588 35.663001,35.45326 l 35.33055,35.17705 -2.48592,2.35505 c -3.08951,2.92687 -7.41515,6.40509 -11.09719,8.92319 -1.54594,1.05725 -2.85105,1.91728 -2.90024,1.9112 -0.0492,-0.006 -1.33242,-1.183 -2.8516,-2.61535 z m -38.4631,-38.32188 -13.050732,-13.05073 -13.050727,13.05073 -13.050725,13.05072 h 26.101452 26.101452 z"
+       id="path52389"
+       transform="scale(0.26458333)"
+       inkscape:export-filename="C:\Users\jokob\path52389.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       sodipodi:nodetypes="ccccssscssscsscccccccccc" />
+    <path
+       style="fill:#d40000;stroke-width:0.276214"
+       d="M 86.416478,86.793237 C 73.427951,73.815968 73.387119,73.801376 73.387119,73.801376 c 3.874197,-3.341721 11.025508,-6.981646 17.312424,-8.529335 2.339787,-0.576001 4.881362,-1.25628 8.810591,-1.259564 4.438736,-0.0037 8.292516,0.857843 13.253396,2.535104 4.59135,1.552325 7.8315,3.224336 11.49958,5.934101 l 1.61476,1.192897 -2.31005,2.336325 c -1.27053,1.284978 -7.22284,7.16236 -13.22736,13.060849 L 99.423152,99.796276 C 95.128284,95.409033 87.282899,87.658907 86.416478,86.793237 Z"
+       id="path52465"
+       transform="scale(0.26458333)"
+       sodipodi:nodetypes="sssssscsscs" />
+    <path
+       style="fill:#d40000;stroke-width:0.074168"
+       d="M 38.412677,13.39572 C 34.322163,9.945267 28.437517,8.4874766 22.684204,9.4993379 19.419721,10.073478 16.752307,11.410793 13.835187,13.872492 l -0.14691,0.126732 -0.587936,-0.661605 c -0.268568,-0.30222 -1.619514,-1.65761 -2.963235,-3.048642 L 7.7265561,7.8632145 7.9975963,7.5868118 C 9.8344314,5.713635 13.005888,3.476019 15.380049,2.3878744 20.659765,-0.03196726 26.24205,-0.73479764 31.856076,0.42838695 36.599757,1.4112419 40.746004,3.5106537 44.46876,7.1557672 l 0.709881,0.6950753 -0.663694,0.69037 C 44.080041,8.9935983 42.672626,10.391271 41.3963,11.655819 L 39.075708,13.955 Z"
+       id="path52504"
+       inkscape:export-filename="C:\Users\jokob\path52504.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       sodipodi:nodetypes="ssscsccsssscsscs" />
+  </g>
+</svg>

front/index.php

@@ -3,11 +3,13 @@
 
 <?php
 require dirname(__FILE__).'/php/server/init.php';
-require 'php/templates/security.php';
+//------------------------------------------------------------------------------
+// check if authenticated
+require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
 
 $CookieSaveLoginName = 'NetAlertX_SaveLogin';
 
-if ($Pia_WebProtection != 'true')
+if ($nax_WebProtection != 'true')
 {
     header('Location: devices.php');
     $_SESSION["login"] = 1;
@@ -24,7 +26,7 @@ if (isset ($_GET["action"]) && $_GET["action"] == 'logout')
 }
 
 // Password without Cookie check -> pass and set initial cookie
-if (isset ($_POST["loginpassword"]) && $Pia_Password == hash('sha256',$_POST["loginpassword"]))
+if (isset ($_POST["loginpassword"]) && $nax_Password == hash('sha256',$_POST["loginpassword"]))
 {
     header('Location: devices.php');
     $_SESSION["login"] = 1;
@@ -32,7 +34,7 @@ if (isset ($_POST["loginpassword"]) && $Pia_Password == hash('sha256',$_POST["lo
 }
 
 // active Session or valid cookie (cookie not extends)
-if (( isset ($_SESSION["login"]) && ($_SESSION["login"] == 1)) || (isset ($_COOKIE[$CookieSaveLoginName]) && $Pia_Password == $_COOKIE[$CookieSaveLoginName]))
+if (( isset ($_SESSION["login"]) && ($_SESSION["login"] == 1)) || (isset ($_COOKIE[$CookieSaveLoginName]) && $nax_Password == $_COOKIE[$CookieSaveLoginName]))
 {
     header('Location: devices.php');
     $_SESSION["login"] = 1;
@@ -40,7 +42,7 @@ if (( isset ($_SESSION["login"]) && ($_SESSION["login"] == 1)) || (isset ($_COOK
 }
 
 $login_headline = lang('Login_Toggle_Info_headline');
-$login_info = "";
+$login_info = lang('Login_Info');
 $login_mode = 'danger';
 $login_display_mode = 'display: block;';
 $login_icon = 'fa-info';
@@ -48,7 +50,7 @@ $login_icon = 'fa-info';
 // no active session, cookie not checked
 if (isset ($_SESSION["login"]) == FALSE || $_SESSION["login"] != 1)
 {
-  if ($Pia_Password == '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92') 
+  if ($nax_Password == '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92') 
   {
     $login_info = lang('Login_Default_PWD');
     $login_mode = 'danger';
@@ -78,7 +80,7 @@ if (isset ($_SESSION["login"]) == FALSE || $_SESSION["login"] != 1)
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>Pi-Alert | Log in</title>
+  <title>NetAlert X | Log in</title>
   <!-- Tell the browser to be responsive to screen width -->
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   <!-- Bootstrap 3.3.7 -->
@@ -91,6 +93,13 @@ if (isset ($_SESSION["login"]) == FALSE || $_SESSION["login"] != 1)
   <link rel="stylesheet" href="lib/AdminLTE/dist/css/AdminLTE.min.css">
   <!-- iCheck -->
   <link rel="stylesheet" href="lib/AdminLTE/plugins/iCheck/square/blue.css">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="lib/AdminLTE/bower_components/font-awesome/css/fontawesome.min.css">
+  <link rel="stylesheet" href="lib/AdminLTE/bower_components/font-awesome/css/solid.css">
+  <link rel="stylesheet" href="lib/AdminLTE/bower_components/font-awesome/css/brands.css">
+  <link rel="stylesheet" href="lib/AdminLTE/bower_components/font-awesome/css/v5-font-face.css">
+  <!-- Favicon -->
+  <link id="favicon" rel="icon" type="image/x-icon" href="img/NetAlertX_logo.png">
 
   <!-- Dark-Mode Patch -->
 <?php
@@ -104,7 +113,7 @@ if ($ENABLED_DARKMODE === True) {
 <body class="hold-transition login-page">
 <div class="login-box login-custom">
   <div class="login-logo">
-    <a href="/index2.php">Net <b>Alert</b><sup>x</sup></a>
+    <a href="/index2.php">Net<b>Alert</b><sup>x</sup></a>
   </div>
   <!-- /.login-logo -->
   <div class="login-box-body">
@@ -140,14 +149,11 @@ if ($ENABLED_DARKMODE === True) {
   </div>
   <!-- /.login-box-body -->
 
-
-
   <div id="myDIV" class="box-body" style="margin-top: 50px; <?php echo $login_display_mode;?>">
       <div class="alert alert-<?php echo $login_mode;?> alert-dismissible">
-          <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><EFBFBD></button>
+          <button type="button" class="close" onclick="Passwordhinfo()" aria-hidden="true">X</button>
           <h4><i class="icon fa <?php echo $login_icon;?>"></i><?php echo $login_headline;?></h4>
           <p><?php echo $login_info;?></p>
-          <p><?= lang('Login_Psw_run');?><br><span style="border: solid 1px yellow; padding: 2px;"> /app/back/pialert-cli set_password <?= lang('Login_Psw_new');?></span><br><?= lang('Login_Psw_folder');?></p>
       </div>
   </div>
 

front/js/common.js

@@ -9,10 +9,11 @@
 
 // -----------------------------------------------------------------------------
 var timerRefreshData = ''
-var modalCallbackFunction = '';
-var emptyArr            = ['undefined', "", undefined, null, 'null'];
-var UI_LANG = "English";
-var settingsJSON = {}
+
+var   emptyArr      = ['undefined', "", undefined, null, 'null'];
+var   UI_LANG       = "English";
+const allLanguages  = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no", "pl_pl", "pt_br", "tr_tr", "zh_cn", "cs_cz", "ar_ar"]; // needs to be same as in lang.php
+var   settingsJSON  = {}
 
 
 // -----------------------------------------------------------------------------
@@ -124,8 +125,10 @@ function cacheSettings()
           settingsData.forEach((set) => {  
 
             resolvedOptions = createArray(set.Options)
+            resolvedOptionsOld = resolvedOptions
             setPlugObj     = {};
             options_params = [];
+            resolved = ""
           
             // proceed only if first option item contains something to resolve
             if( !set.Code_Name.includes("__metadata") && 
@@ -144,12 +147,21 @@ function cacheSettings()
                 if(options_params != [])
                 {
                   // handles only strings of length == 1
-                  resolvedOptions = `["${resolveParams(options_params, resolvedOptions[0])}"]`
+
+                  resolved = resolveParams(options_params, resolvedOptions[0])
+
+                  if(resolved.includes('"')) // check if list of strings
+                  {
+                    resolvedOptions = `[${resolved}]`
+                  } else // one value only
+                  { 
+                    resolvedOptions = `["${resolved}"]`
+                  }                  
                 }
               }    
             }
 
-            setCache(`pia_set_${set.Code_Name}`, set.Value) 
+            setCache(`pia_set_${set.Code_Name}`, set.Value)             
             setCache(`pia_set_opt_${set.Code_Name}`, resolvedOptions) 
           });
         }).then(() => handleSuccess('cacheSettings', resolve())).catch(() => handleFailure('cacheSettings', reject("cacheSettings already completed")));    // handle AJAX synchronization
@@ -170,6 +182,7 @@ function getSettingOptions (key) {
   if (result == "")
   {
     console.log(`Setting options with key "${key}" not found`)
+    result = []
   }
 
   return result;
@@ -195,244 +208,146 @@ function getSetting (key) {
 // -----------------------------------------------------------------------------
 // Get language string
 // -----------------------------------------------------------------------------
-function cacheStrings()
-{  
+function cacheStrings() {
   return new Promise((resolve, reject) => {
-    if(!getCache('completedCalls').includes('cacheStrings'))
-    {
-      // handle core strings and translations
-      var allLanguages = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no"]; // needs to be same as in lang.php
-
-      allLanguages.forEach(function (language_code) {
-        $.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`, function (res) {
-          // Iterate over each language
-          Object.entries(res).forEach(([key, value]) => {
-            // Store translations for each key-value pair
-            setCache(`pia_lang_${key}_${language_code}`, value)
-          });
-
-          // handle strings and translations from plugins
-          $.get(`api/table_plugins_language_strings.json?nocache=${Date.now()}`, function(res) {    
-                
-            data = res["data"];       
-
-            data.forEach((langString) => {      
-              setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value) 
-            });        
-          }).then(() => handleSuccess('cacheStrings', resolve())).catch(() => handleFailure('cacheStrings', reject("cacheStrings already completed"))); // handle AJAX synchronization
+    
+      // Create a promise for each language
+      languagesToLoad = ['en_us', getLangCode()]
+      const languagePromises = languagesToLoad.map((language_code) => {
+        return new Promise((resolveLang, rejectLang) => {
+          // Fetch core strings and translations
           
+          $.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`)
+            .done((res) => {
+              // Iterate over each key-value pair and store the translations
+              Object.entries(res).forEach(([key, value]) => {
+                setCache(`pia_lang_${key}_${language_code}`, value);
+              });
+
+              // Fetch strings and translations from plugins
+              $.get(`api/table_plugins_language_strings.json?nocache=${Date.now()}`)
+                .done((pluginRes) => {
+                  const data = pluginRes["data"];
+                  
+                  // Store plugin translations
+                  data.forEach((langString) => {
+                    setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value);
+                  });
+
+                  // Handle successful completion of language processing
+                  handleSuccess(`cacheStrings[${language_code}]`, resolveLang);
+                })
+                .fail((pluginError) => {
+                  // Handle failure in plugin strings fetching
+                  rejectLang(pluginError);
+                });
+            })
+            .fail((error) => {
+              // Handle failure in core strings fetching
+              rejectLang(error);
+            });
         });
       });
-    }
+
+      // Wait for all language promises to complete
+      Promise.all(languagePromises)
+        .then(() => {
+          // All languages processed successfully
+          resolve();
+        })
+        .catch((error) => {
+          // Handle failure in any of the language processing
+          handleFailure('cacheStrings', reject);
+        });
+    
   });
 }
 
+// -----------------------------------------------------------------------------
 // Get translated language string
-function getString (key) {
+function getString(key) {
 
-  // handle initial laod to make sure everything is set-up and cached
-  handleFirstLoad(getString)
- 
-  UI_LANG = getSetting("UI_LANG");
-
-  lang_code = 'en_us';
-
-  switch(UI_LANG)
-  {
-    case 'English': 
-      lang_code = 'en_us';
-      break;
-    case 'Spanish': 
-      lang_code = 'es_es';
-      break;
-    case 'German': 
-      lang_code = 'de_de';
-      break;
-    case 'French': 
-      lang_code = 'fr_fr';
-      break;
-    case 'Norwegian': 
-      lang_code = 'nb_no';
-      break;
-    case 'Italian': 
-      lang_code = 'it_it';
-      break;
-    case 'Russian': 
-      lang_code = 'ru_ru';
-      break;
-  }
-  result = getCache(`pia_lang_${key}_${lang_code}`, true);
-
-
-  if(isEmpty(result))
-  {    
-    result = getCache(`pia_lang_${key}_en_us`, true);
-  }
-
-  return result;
-}
-
-// -----------------------------------------------------------------------------
-// Modal dialog handling
-// -----------------------------------------------------------------------------
-function showModalOK (title, message, callbackFunction) {
-  showModalOk (title, message, callbackFunction)
-}
-function showModalOk (title, message, callbackFunction) {
-  // set captions
-  $('#modal-ok-title').html   (title);
-  $('#modal-ok-message').html (message); 
-  
-  if(callbackFunction!= null)
-  {   
-    $("#modal-ok-OK").click(function()
-    { 
-      callbackFunction()      
-    });
-  }
-
-  // Show modal
-  $('#modal-ok').modal('show');
-}
-
-// -----------------------------------------------------------------------------
-function showModalDefault (title, message, btnCancel, btnOK, callbackFunction) {
-  // set captions
-  $('#modal-default-title').html   (title);
-  $('#modal-default-message').html (message);
-  $('#modal-default-cancel').html  (btnCancel);
-  $('#modal-default-OK').html      (btnOK);
-  modalCallbackFunction =          callbackFunction;
-
-  // Show modal
-  $('#modal-default').modal('show');
-}
-
-// -----------------------------------------------------------------------------
-
-function showModalDefaultStrParam (title, message, btnCancel, btnOK, callbackFunction, param='') {
-  // set captions
-  $('#modal-str-title').html   (title);
-  $('#modal-str-message').html (message);
-  $('#modal-str-cancel').html  (btnCancel);
-  $('#modal-str-OK').html      (btnOK);
-  $("#modal-str-OK").off("click"); //remove existing handlers
-  $('#modal-str-OK').on('click', function (){ 
-    $('#modal-str').modal('hide');
-    callbackFunction(param)
-  })
-
-  // Show modal
-  $('#modal-str').modal('show');
-}
-
-// -----------------------------------------------------------------------------
-function showModalWarning (title, message, btnCancel=getString('Gen_Cancel'), btnOK=getString('Gen_Okay'), callbackFunction=null) {
-  // set captions
-  $('#modal-warning-title').html   (title);
-  $('#modal-warning-message').html (message);
-  $('#modal-warning-cancel').html  (btnCancel);
-  $('#modal-warning-OK').html      (btnOK);
-
-  if ( callbackFunction != null)
-  {
-    modalCallbackFunction =          callbackFunction;
-  }
-
-  // Show modal
-  $('#modal-warning').modal('show');
-}
-
-// -----------------------------------------------------------------------------
-function showModalInput (title, message, btnCancel=getString('Gen_Cancel'), btnOK=getString('Gen_Okay'), callbackFunction=null) {
-  // set captions
-  $('#modal-input-title').html   (title);
-  $('#modal-input-message').html (message);
-  $('#modal-input-cancel').html  (btnCancel);
-  $('#modal-input-OK').html      (btnOK);
-
-  if ( callbackFunction != null)
-  {
-    modalCallbackFunction =          callbackFunction;
-  }
-
-  // Show modal
-  $('#modal-input').modal('show');
-}
-
-// -----------------------------------------------------------------------------
-function modalDefaultOK () {
-  // Hide modal
-  $('#modal-default').modal('hide');
-
-  // timer to execute function
-  window.setTimeout( function() {
-    window[modalCallbackFunction]();
-  }, 100);
-}
-
-// -----------------------------------------------------------------------------
-function modalDefaultInput () {
-  // Hide modal
-  $('#modal-input').modal('hide');
-
-  // timer to execute function
-  window.setTimeout( function() {
-    window[modalCallbackFunction]();
-  }, 100);
-}
-
-// -----------------------------------------------------------------------------
-function modalWarningOK () {
-  // Hide modal
-  $('#modal-warning').modal('hide');
-
-  // timer to execute function
-  window.setTimeout( function() {
-    window[modalCallbackFunction]();
-  }, 100);
-}
-
-// -----------------------------------------------------------------------------
-function showMessage (textMessage="") {
-  if (textMessage.toLowerCase().includes("error")  ) {
-    // show error
-    alert (textMessage);
-  } else {
-    // show temporal notification
-    $("#alert-message").html (textMessage);
-    $("#notification").fadeIn(1, function () {
-      window.setTimeout( function() {
-        $("#notification").fadeOut(500)
-      }, 3000);
-    } );
-  }
-}
-
-// -----------------------------------------------------------------------------
-function showTickerAnnouncement(textMessage = "") {
-  if (textMessage.toLowerCase().includes("error")) {
-    // show error
-    alert(textMessage);
-  } else {
-    // show permanent notification
-    $("#ticker-message").html(textMessage);
-    $("#tickerAnnouncement").removeClass("myhidden");
-    // Move the tickerAnnouncement element to ticker_announcement_plc
-    $("#tickerAnnouncement").appendTo("#ticker_announcement_plc");
-
-    // var $ticker = $('#tickerAnnouncement');
-    // var $tickerMessage = $('#ticker-message');
+  function fetchString(key) {
     
-    // Clone the ticker message to create continuous scrolling effect
-    // $tickerMessage.clone().appendTo($ticker);
+    lang_code = getLangCode();
+
+    let result = getCache(`pia_lang_${key}_${lang_code}`, true);
+
+    if (isEmpty(result)) {
+      result = getCache(`pia_lang_${key}_en_us`, true);
+    }
+
+    return result;
+  }
+
+  if (isAppInitialized()) {
+    return fetchString(key);
+  } else {
+    callAfterAppInitialized(() => fetchString(key));
   }
 }
 
+// -----------------------------------------------------------------------------
+// Get current language ISO code
+// below has to match exactly teh values in /front/php/templates/language/lang.php & /front/js/common.js
+function getLangCode() {
+
+    UI_LANG = getSetting("UI_LANG");
+
+    let lang_code = 'en_us';
+
+    switch (UI_LANG) {
+      case 'English':
+        lang_code = 'en_us';
+        break;
+      case 'Spanish':
+        lang_code = 'es_es';
+        break;
+      case 'German':
+        lang_code = 'de_de';
+        break;
+      case 'French':
+        lang_code = 'fr_fr';
+        break;
+      case 'Norwegian':
+        lang_code = 'nb_no';
+        break;
+      case 'Polish (pl_pl)':
+        lang_code = 'pl_pl';
+        break;
+      case 'Portuguese (pt_br)':
+        lang_code = 'pt_br';
+        break;
+      case 'Turkish (tr_tr)':
+        lang_code = 'tr_tr';
+        break;
+      case 'Italian (it_it)':
+        lang_code = 'it_it';
+        break;
+      case 'Russian':
+        lang_code = 'ru_ru';
+        break;
+      case 'Chinese (zh_cn)':
+        lang_code = 'zh_cn';
+        break;
+      case 'Czech (cs_cz)':
+        lang_code = 'cs_cz';
+        break;
+      case 'Arabic (ar_ar)':
+        lang_code = 'ar_ar';
+        break;
+    }
+
+    return lang_code;
+}
+
+
 
 // -----------------------------------------------------------------------------
 // String utilities
 // -----------------------------------------------------------------------------
+
+// ----------------------------------------------------
 function jsonSyntaxHighlight(json) {
   if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
@@ -455,6 +370,7 @@ function jsonSyntaxHighlight(json) {
   });
 }
 
+// ----------------------------------------------------
 function isValidBase64(str) {
   // Base64 characters set
   var base64CharacterSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
@@ -464,6 +380,46 @@ function isValidBase64(str) {
   return invalidCharacters === '';
 }
 
+// ----------------------------------------------------
+function isValidJSON(jsonString) {
+  try {
+      JSON.parse(jsonString);
+      return true;
+  } catch (e) {
+      return false;
+  }
+}
+
+// ----------------------------------------------------
+// method to sanitize input so that HTML and other things don't break
+function encodeSpecialChars(str) {
+  return str
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+}
+// ----------------------------------------------------
+function decodeSpecialChars(str) {
+  return str
+      .replace(/&amp;/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"')
+      .replace(/&#039;/g, '\'');
+}
+
+// ----------------------------------------------------
+// base64 conversion of UTF8 chars
+function utf8ToBase64(str) {
+  // Convert the string to a Uint8Array using TextEncoder
+  const utf8Bytes = new TextEncoder().encode(str);
+  
+  // Convert the Uint8Array to a base64-encoded string
+  return btoa(String.fromCharCode(...utf8Bytes));
+}
+
 
 // -----------------------------------------------------------------------------
 // General utilities
@@ -492,6 +448,7 @@ function handle_locked_DB(data)
     showSpinner()
 
     setTimeout(function() {
+      console.warn("Database locked - reload")
       location.reload(); 
     }, 5000);
   }
@@ -504,29 +461,6 @@ function numberArrayFromString(data)
   return data.replace(/\[|\]/g, '').split(',').map(Number);
 }
 
-// -----------------------------------------------------------------------------
-function setParameter (parameter, value) {
-  // Retry
-  $.get('php/server/parameters.php?action=set&parameter=' + parameter +
-    '&value='+ value,
-  function(data) {
-    if (data != "OK") {
-      // Retry
-      sleep (200);
-      $.get('php/server/parameters.php?action=set&parameter=' + parameter +
-        '&value='+ value,
-        function(data) {
-          if (data != "OK") {
-          // alert (data);
-          } else {
-          // alert ("OK. Second attempt");
-          };
-      } );
-    };
-  } );
-}
-
-
 // -----------------------------------------------------------------------------  
 function saveData(functionName, id, value) {
   $.ajax({
@@ -709,6 +643,16 @@ function debugTimer () {
   $('#pageTitle').html (new Date().getSeconds());
 }
 
+// -----------------------------------------------------------------------------
+function secondsSincePageLoad() {
+  // Get the current time since the page was loaded
+  var timeSincePageLoad = performance.now();
+
+  // Convert milliseconds to seconds
+  var secondsAgo = Math.floor(timeSincePageLoad / 1000);
+
+  return secondsAgo;
+}
 
 // -----------------------------------------------------------------------------
 // Open url in new tab
@@ -746,7 +690,7 @@ function openUrl(urls) {
 // -----------------------------------------------------------------------------
 function navigateToDeviceWithIp (ip) {
 
-  $.get('api/table_devices.json', function(res) {    
+  $.get('api/table_devices.json?nocache=' + Date.now(), function(res) {    
         
     devices = res["data"];
 
@@ -767,7 +711,7 @@ function navigateToDeviceWithIp (ip) {
 
 // -----------------------------------------------------------------------------
 function getNameByMacAddress(macAddress) {
-  return getDeviceDataByMacAddress(macAddress, "dev_Name")
+  return getDeviceDataByMac(macAddress, "dev_Name")
 }
 
 // -----------------------------------------------------------------------------
@@ -861,10 +805,14 @@ function isRandomMAC(mac)
   // ---------------------------------------------------------  
   // Generate an array object from a string representation of an array
   function createArray(input) {
-    // Empty array
-    if (input === '[]') {
-      return [];
+    // Is already array, return
+    if (Array.isArray(input)) {
+      return input;
     }
+    // Empty array
+    if (input === '[]' || input === '') {
+      return [];
+    } 
   
     // Regex pattern for brackets
     const patternBrackets = /(^\s*\[)|(\]\s*$)/g;
@@ -916,7 +864,7 @@ function isRandomMAC(mac)
 // -----------------------------------------------------------------------------
 // A function to get a device property using the mac address as key and DB column nakme as parameter
 //  for the value to be returned
-function getDeviceDataByMacAddress(macAddress, dbColumn) {
+function getDeviceDataByMac(macAddress, dbColumn) {
 
   const sessionDataKey = 'devicesListAll_JSON';  
   const devicesCache = getCache(sessionDataKey);
@@ -931,7 +879,14 @@ function getDeviceDataByMacAddress(macAddress, dbColumn) {
   for (const device of devices) {
       if (device["dev_MAC"].toLowerCase() === macAddress.toLowerCase()) {
 
+        if(dbColumn)
+        {
           return device[dbColumn];
+        }
+        else
+        {
+          return device
+        }
       }
   }
 
@@ -939,15 +894,15 @@ function getDeviceDataByMacAddress(macAddress, dbColumn) {
 }
 
 // -----------------------------------------------------------------------------
-// Cache teh devices as one JSON
+// Cache the devices as one JSON
 function cacheDevices()
 { 
 
   return new Promise((resolve, reject) => {
 
-    if(!getCache('completedCalls').includes('cacheDevices'))
-    {
-      $.get('api/table_devices.json', function(data) {    
+    // if(!getCache('completedCalls').includes('cacheDevices'))
+    // {
+      $.get('api/table_devices.json?nocache=' + Date.now(), function(data) {    
         
         // console.log(data)
 
@@ -970,7 +925,8 @@ function cacheDevices()
         // console.log(getCache('devicesListAll_JSON'))
       }).then(() => handleSuccess('cacheDevices', resolve())).catch(() => handleFailure('cacheDevices', reject("cacheDevices already completed"))); // handle AJAX synchronization
     } 
-  });
+  // }
+);
 }
 
 var devicesListAll_JSON      = [];   // this will contain a list off all devices 
@@ -1013,6 +969,17 @@ function getGuid() {
 // -----------------------------------------------------------------------------
 function showSpinner(stringKey='Loading')
 {
+
+  if(stringKey == "")
+  {
+    text = ''
+  } else
+  {
+    text = getString(stringKey)
+  }
+
+  text = isEmpty(text) ?  "Loading" : text;
+
   if($("#loadingSpinner").length)
   {    
     $("#loadingSpinner").show();
@@ -1024,7 +991,7 @@ function showSpinner(stringKey='Loading')
       <div class="pa_semitransparent-panel"></div>
       <div class="panel panel-default pa_spinner">
         <table>
-          <td width="130px" align="middle">${getString(stringKey)}</td>
+          <td width="130px" align="middle">${text}</td>
           <td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td>
         </table>
       </div>
@@ -1043,11 +1010,12 @@ function hideSpinner()
 
 // --------------------------------------------------------
 // Calls a backend function to add a front-end event to an execution queue
-function updateApi()
+function updateApi(apiEndpoints)
 {
 
   // value has to be in format event|param. e.g. run|ARPSCAN
-  action = `update_api|devices,appevents`
+  action = `${getGuid()}|update_api|${apiEndpoints}`
+
 
   $.ajax({
     method: "POST",
@@ -1148,8 +1116,18 @@ function resolveParams(params, template) {
           // If the parameter type is 'setting', retrieve setting value
           if (param.type == "setting") {
               var value = getSetting(param.value);
+
+              // Remove brackets and single quotes, replace them with double quotes
+              value = value.replace('[','').replace(']','').replace(/'/g, '"');
+
+              // Split the string into an array, remove empty elements
+              const arr = value.split(',').filter(Boolean);
+
+              // Join the array elements with commas
+              const result = arr.join(', ');
+
               // Replace placeholder with setting value
-              template = template.replace("{" + param.name + "}", value);
+              template = template.replace("{" + param.name + "}", result);
           } else {
               // If the parameter type is not 'setting', use the provided value
               template = template.replace("{" + param.name + "}", param.value);
@@ -1177,161 +1155,223 @@ function arraysContainSameValues(arr1, arr2) {
   }
 }
 
+// -----------------------------------------------------------------------------
+// Hide elements on the page based on the supplied setting
+function hideUIelements(settingKey) {
+
+  hiddenSectionsSetting = getSetting(settingKey)
+  
+  if(hiddenSectionsSetting != "") // handle if settings not yet initialized
+  {
+
+    sectionsArray = createArray(hiddenSectionsSetting)
+
+    // remove spaces to get IDs
+    var newArray = $.map(sectionsArray, function(value) {
+        return value.replace(/\s/g, '');
+    });
+
+    $.each(newArray, function(index, hiddenSection) {
+
+      if($('#' + hiddenSection))
+      {
+        $('#' + hiddenSection).hide()      
+      }    
+      
+    });
+  }
+
+}
+
+
+
+// -----------------------------------------------------------------------------
+// apply dark mode
+
+$(document).ready(function() {
+  // Assume getSetting is a function that returns true or false for dark mode
+  if (getSetting("UI_dark_mode") === "True") {
+    // Add the dark mode stylesheet
+    setCookie("UI_dark_mode", "True")
+    $('head').append('<link rel="stylesheet" href="css/dark-patch.css">');
+    // Set the background image for dark mode
+    $('body').attr('style', 'background-image: url(\'img/boxed-bg-dark.png\');');
+  } else {
+    setCookie("UI_dark_mode", "False")
+    // Set the background image for light mode
+    $('body').attr('style', 'background-image: url(\'img/background.png\');');
+  }
+});
+
 // -----------------------------------------------------------------------------
 // initialize
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 
 // Define a unique key for storing the flag in sessionStorage
-var sessionStorageKey = "myScriptExecuted_common_js";
+const sessionStorageKey = "myScriptExecuted_common_js";
+var completedCalls = []
+var completedCalls_final = ['cacheSettings', 'cacheStrings', 'cacheDevices'];
+var completedCallsCount  = 0; 
+var completedCallsCount_final;
 
 // -----------------------------------------------------------------------------
 // Clearing all the caches
-function clearCache()
-{
-  showSpinner()
-  resetInitializedFlag()
-  window.location.reload()
-}
-
-
-// -----------------------------------------------------------------------------
-function resetInitializedFlag()
-{
-  // Clear local storage
+function clearCache() {
+  showSpinner();
+  sessionStorage.clear();
   localStorage.clear();
-  // Set the flag in sessionStorage to indicate that the code and cahce needs to be reloaded
-  sessionStorage.setItem(sessionStorageKey, "false");
+  setTimeout(() => {
+    console.warn("clearChache called");
+    window.location.reload();
+  }, 500);
 }
 
 // -----------------------------------------------------------------------------
-// check if cache needs to be refreshed because of setting changes 
-$.get('api/app_state.json?nocache=' + Date.now(), function(appState) {   
+// Function to check if cache needs to be refreshed because of setting changes
+function checkSettingChanges() {
+  $.get('api/app_state.json?nocache=' + Date.now(), function(appState) {   
+    const importedMilliseconds = parseInt(appState["settingsImported"] * 1000);
+    const lastReloaded = parseInt(sessionStorage.getItem(sessionStorageKey + '_time'));
 
-  console.log(appState["settingsImported"]*1000)
-  
-  importedMiliseconds = parseInt((appState["settingsImported"]*1000));
-
-  lastReloaded = parseInt(sessionStorage.getItem(sessionStorageKey + '_time'));
-
-  if(importedMiliseconds > lastReloaded)
-  {
-    console.log("Cache needs to be refreshed because of setting changes");
-    setTimeout(() => {
-      resetInitializedFlag()
-      location.reload();
-      
-    }, 500);
-
-  }
-
-});
+    if (importedMilliseconds > lastReloaded) {
+      console.log("Cache needs to be refreshed because of setting changes");
+      setTimeout(() => {
+        clearCache();
+      }, 500);
+    }
+  });
+}
 
 // -----------------------------------------------------------------------------
 // Display spinner and reload page if not yet initialized
-function handleFirstLoad(callback)
-{
-  if(!app_common_init)
-  {
-    setTimeout(function() {
-      
-      callback(); 
-    }, 1000);
+async function handleFirstLoad(callback) {
+  if (!isAppInitialized()) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    callback();
   }
 }
 
+// -----------------------------------------------------------------------------
+// Execute callback once app initialized
+function callAfterAppInitialized(callback) {
+  if (!isAppInitialized()) {
+    setTimeout(() => {
+      callAfterAppInitialized(callback)
+    }, 500);
+  } else
+  {
+    callback();
+  }
+}
 
 // -----------------------------------------------------------------------------
 // Check if the code has been executed before by checking sessionStorage
-var app_common_init = sessionStorage.getItem(sessionStorageKey) === "true";
-var completedCalls = []
-var completedCalls_final = ['cacheSettings', 'cacheStrings', 'cacheDevices'];
+function isAppInitialized() {
+  //  return arraysContainSameValues(getCache("completedCalls").split(',').filter(Boolean), completedCalls_final);
 
-// Define a function that will execute the code only once
-function executeOnce() {
+  // loading settings + 1 (or 2 language files if not english) + device cache.
+  completedCallsCount_final = getLangCode() == 'en_us' ? 3  : 4 ;
 
-  if (!arraysContainSameValues(getCache(completedCalls), completedCalls_final)) {
-
-    showSpinner()
-
-    // Use cache to keep track of completed AJAX calls    
-    var tmp_completedCalls = getCache("completedCalls")
-
-    // initialize from cache if values present
-    if(tmp_completedCalls != "")
-    {
-      completedCalls = tmp_completedCalls.split(',');
-    }
-
-    // cache everything in the right order
-    cacheStrings()
-    .then(cacheSettings)
-    .then(cacheDevices)
-    .then(() => {
-      // All callbacks have completed
-      console.log("✅ All AJAX callbacks have completed");
-      // location.reload()
-      onAllCallsComplete();
-    })
-    .catch((error) => {
-      console.error("Error:", error);
-    });
-    
-  }
+  return (parseInt(getCache("completedCallsCount")) >=  completedCallsCount_final);
 }
 
+// Define a function that will execute the code only once
+async function executeOnce() {
+  showSpinner();
+
+  if (!isAppInitialized()) {
+    try {
+      await cacheDevices();
+      await cacheSettings();
+      await cacheStrings();     
+      
+      console.log("✅ All AJAX callbacks have completed");
+      onAllCallsComplete();
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  }
+}
 
 // -----------------------------------------------------------------------------
 // Function to handle successful completion of an AJAX call
 const handleSuccess = (callName) => {
-  console.log(`AJAX call successful: ${callName} `);
-  // store completed call
-  completedCalls.push(callName)  
+  console.log(`AJAX call successful: ${callName}`);
+  // completedCalls.push(callName);
+  // setCache('completedCalls', mergeUniqueArrays(getCache('completedCalls').split(','), [callName]));
 
-  setCache('completedCalls', mergeUniqueArrays(getCache('completedCalls').split(','), [callName]))
+  val = getCache('completedCallsCount');
 
+  if(val == "")
+  {
+    val = 0;
+  } else
+  {
+    val = parseInt(val)
+  }
+
+  setCache('completedCallsCount', val + 1)
 };
 
 // -----------------------------------------------------------------------------
 // Function to handle failure of an AJAX call
 const handleFailure = (callName, callback) => {
-  // Handle AJAX call failure here
   console.error(`AJAX call ${callName} failed`);
-
-  // try until successful
-  // callback()
+  // Implement retry logic here if needed
 };
 
 // -----------------------------------------------------------------------------
 // Function to execute when all AJAX calls have completed
 const onAllCallsComplete = () => {
-
-  // Merge local completedCalls with completedCalls_cached array - ensure uniqueness
-  // if cache contains values, merge those two arrays
-  completedCalls = mergeUniqueArrays(getCache('completedCalls').split(','), completedCalls)
-
-  // Update cache with merged completedCalls
+  completedCalls = mergeUniqueArrays(getCache('completedCalls').split(','), completedCalls);
   setCache('completedCalls', completedCalls);
 
-  // Set the flag in sessionStorage to indicate that the code has been executed 
-  // and save time when last time the page was initialized
-  sessionStorage.setItem(sessionStorageKey, "true");    
-  const millisecondsNow = Date.now();
-  sessionStorage.setItem(sessionStorageKey + '_time', millisecondsNow);
+  // Check if all necessary strings are initialized
+  if (areAllStringsInitialized()) {
+    sessionStorage.setItem(sessionStorageKey, "true");
+    const millisecondsNow = Date.now();
+    sessionStorage.setItem(sessionStorageKey + '_time', millisecondsNow);
 
-  console.log('✔ Cache intialized');
+    console.log('✔ Cache initialized');
+    // setTimeout(() => {
+    //   location.reload()
+    // }, 10);
+   
+  } else {
+    // If not all strings are initialized, retry initialization
+    console.log('❌ Not all strings are initialized. Retrying...');
+    executeOnce();
+    return;
+  }
 
+  // Call any other initialization functions here if needed
+
+};
+
+// Function to check if all necessary strings are initialized
+const areAllStringsInitialized = () => {
+  // Implement logic to check if all necessary strings are initialized
+  // Return true if all strings are initialized, false otherwise
+  return getString('UI_LANG_name') != ""
 };
 
 // Call the function to execute the code
 executeOnce();
 
-// Set timer for page refresh if configured
+// Set timer for regular UI refresh if enabled 
 setTimeout(() => {
+
+  // page refresh if configured
   const refreshTime = getSetting("UI_REFRESH");
   if (refreshTime && refreshTime !== "0" && refreshTime !== "") {
+    console.log("Refreshing page becasue UI_REFRESH setting enabled.");
     newTimerRefreshData(clearCache, parseInt(refreshTime)*1000);
   }
+
+  // Check if page needs to refresh due to setting changes
+  checkSettingChanges()
+
 }, 10000);
 
 
@@ -1342,3 +1382,4 @@ console.log("init common.js");
 
 
 
+

front/js/db_methods.js

@@ -1,18 +1,109 @@
 // -----------------------------------------------------------------------------
-// General utilities to interact with teh database
+// General utilities to interact with the database
 // -----------------------------------------------------------------------------
 
+// // Call to render lists
+// renderList(
+//   options,
+//   callbackToGenerateEntries,
+//   valuesArray,
+//   placeholder,
+//   targetField,
+//   transformers
+// );
+
+// --------------------------------------------------
 // Read data and place intotarget location, callback processies the results
-function readData(sqlQuery, processDataCallback, valuesArray, targetLocation, targetField, nameTransformer) {
-    var apiUrl = `php/server/dbHelper.php?action=read&rawSql=${encodeURIComponent(sqlQuery)}`;
-    $.get(apiUrl, function(data) {
-        // Process the JSON data using the provided callback function
+function renderList(
+  options,
+  processDataCallback,
+  valuesArray,
+  placeholder,
+  targetField,
+  transformers
+) {
+  // Check if there are options provided
+  if (options.length > 0) {
+    // Determine if the first option's name is an SQL query
+    const sqlQuery = isSQLQuery(options[0].name) ? options[0].name : "";
 
-        data = JSON.parse(data)
+    // If there is an SQL query, fetch additional options
+    if (sqlQuery) {
+      // remove first item containing the SQL query
+      options.shift();
 
-        var htmlResult = processDataCallback(data, valuesArray, targetField, nameTransformer);
+      const apiUrl = `php/server/dbHelper.php?action=read&rawSql=${encodeURIComponent(sqlQuery)}`;
 
-        // Place the resulting HTML into the specified placeholder div
-        $("#" + targetLocation).replaceWith(htmlResult);
-    });
-}
+      $.get(apiUrl, function (sqlOptionsData) {
+        
+        // Parse the returned SQL data 
+        const sqlOption = JSON.parse(sqlOptionsData);
+
+        // Concatenate options from SQL query with the supplied options
+        options = options.concat(sqlOption);
+        
+
+        // Process the combined options
+        setTimeout(() => {
+          processDataCallback(
+            options,
+            valuesArray,
+            targetField,
+            transformers,
+            placeholder
+          );
+        }, 1);
+      });
+    } else {
+      // No SQL query, directly process the supplied options
+      setTimeout(() => {
+        processDataCallback(
+          options,
+          valuesArray,
+          targetField,
+          transformers,
+          placeholder
+        );
+      }, 1);
+    }
+  } else {
+    // No options provided, directly process with empty options
+    setTimeout(() => {
+      processDataCallback(
+        options,
+        valuesArray,
+        targetField,
+        transformers,
+        placeholder
+      );
+    }, 1);
+  }
+}
+
+
+// --------------------------------------------------
+// Check if database is locked
+function checkDbLock() {
+  $.ajax({
+    url: "log/db_is_locked.log", // Replace with the actual path to your PHP file
+    type: "GET",
+
+    success: function (response) {
+      // console.log(response);
+      if (response == 0) {
+        // console.log('Database is not locked');
+        $(".header-status-locked-db").hide();
+      } else {
+        console.log("🟥 Database is locked:");
+        console.log(response);
+        $(".header-status-locked-db").show();
+      }
+    },
+    error: function () {
+      console.log("🟥 Error checking database lock status");
+      $(".header-status-locked-db").show();
+    },
+  });
+}
+
+setInterval(checkDbLock(), 1000);

front/js/graph_online_history.js

@@ -1,13 +1,17 @@
-function pia_draw_graph_online_history(pia_js_graph_online_history_time, pia_js_graph_online_history_ondev, pia_js_graph_online_history_dodev, pia_js_graph_online_history_ardev) {
-        var xValues = pia_js_graph_online_history_time;
-
-        // alert("dev presence")
+function presenceOverTime(
+    timeStamp, 
+    onlineCount, 
+    offlineCount, 
+    archivedCount,
+    downCount
+  ) {
+        var xValues = timeStamp;
 
         // Data object for online status
         onlineData = {
           label: 'Online',
-          data: pia_js_graph_online_history_ondev,
-          borderColor: "rgba(0, 166, 89)",
+          data: onlineCount,
+          borderColor: "#00000",
           fill: true,
           backgroundColor: "rgba(0, 166, 89, .6)",
           pointStyle: 'circle',
@@ -15,20 +19,29 @@ function pia_draw_graph_online_history(pia_js_graph_online_history_time, pia_js_
           pointHoverRadius: 3
         };
 
+        // Data object for down status
+        downData = {          
+          label: 'Down',
+          data: downCount,
+          borderColor: "#00000",
+          fill: true,
+          backgroundColor: "#dd4b39",          
+        };
+
         // Data object for offline status
         offlineData = {          
-          label: 'Offline/Down',
-          data: pia_js_graph_online_history_dodev,
-          borderColor: "rgba(222, 74, 56)",
+          label: 'Offline',
+          data: offlineCount,
+          borderColor: "#00000",
           fill: true,
-          backgroundColor: "rgba(222, 74, 56, .6)",          
+          backgroundColor: "#b2b6be",          
         };
 
         // Data object for archived status
         archivedData = {
           label: 'Archived',
-          data: pia_js_graph_online_history_ardev,
-          borderColor: "rgba(220,220,220)",
+          data: archivedCount,
+          borderColor: "#00000",
           fill: true,
           backgroundColor: "rgba(220,220,220, .6)",
         };
@@ -42,23 +55,27 @@ function pia_draw_graph_online_history(pia_js_graph_online_history_time, pia_js_
         // Check if 'online' status should be displayed
         if(showStats.includes("online"))
         {
-          datasets.push(onlineData); // Add onlineData to datasets array
+          datasets.push(onlineData); 
+        }
+
+        // Check if 'down' status should be displayed
+        if(showStats.includes("down"))
+        {
+          datasets.push(downData); 
         }
 
         // Check if 'offline' status should be displayed
         if(showStats.includes("offline"))
         {
-          datasets.push(offlineData); // Add offlineData to datasets array
+          datasets.push(offlineData); 
         }
 
         // Check if 'archived' status should be displayed
         if(showStats.includes("archived"))
         {
-          datasets.push(archivedData); // Add archivedData to datasets array
+          datasets.push(archivedData); 
         }
 
-
-
         new Chart("OnlineChart", {
           type: "bar",
           scaleIntegersOnly: true,

front/js/modal.js

@@ -0,0 +1,424 @@
+// -----------------------------------------------------------------------------
+// Modal dialog handling
+// -----------------------------------------------------------------------------
+var modalCallbackFunction = "";
+
+function showModalOK(title, message, callbackFunction) {
+    showModalOk(title, message, callbackFunction);
+}
+function showModalOk(title, message, callbackFunction) {
+    // set captions
+    $("#modal-ok-title").html(title);
+    $("#modal-ok-message").html(message);
+
+    if (callbackFunction != null) {
+        $("#modal-ok-OK").click(function () {
+            callbackFunction();
+        });
+    }
+
+    // Show modal
+    $("#modal-ok").modal("show");
+}
+
+// -----------------------------------------------------------------------------
+function showModalDefault(title, message, btnCancel, btnOK, callbackFunction) {
+    // set captions
+    $("#modal-default-title").html(title);
+    $("#modal-default-message").html(message);
+    $("#modal-default-cancel").html(btnCancel);
+    $("#modal-default-OK").html(btnOK);
+    modalCallbackFunction = callbackFunction;
+
+    // Show modal
+    $("#modal-default").modal("show");
+}
+
+// -----------------------------------------------------------------------------
+
+function showModalDefaultStrParam(
+    title,
+    message,
+    btnCancel,
+    btnOK,
+    callbackFunction,
+    param = ""
+) {
+    // set captions
+    $("#modal-str-title").html(title);
+    $("#modal-str-message").html(message);
+    $("#modal-str-cancel").html(btnCancel);
+    $("#modal-str-OK").html(btnOK);
+    $("#modal-str-OK").off("click"); //remove existing handlers
+    $("#modal-str-OK").on("click", function () {
+        $("#modal-str").modal("hide");
+        callbackFunction(param);
+    });
+
+    // Show modal
+    $("#modal-str").modal("show");
+}
+
+// -----------------------------------------------------------------------------
+function showModalWarning(
+    title,
+    message,
+    btnCancel = getString("Gen_Cancel"),
+    btnOK = getString("Gen_Okay"),
+    callbackFunction = null
+) {
+    // set captions
+    $("#modal-warning-title").html(title);
+    $("#modal-warning-message").html(message);
+    $("#modal-warning-cancel").html(btnCancel);
+    $("#modal-warning-OK").html(btnOK);
+
+    if (callbackFunction != null) {
+        modalCallbackFunction = callbackFunction;
+    }
+
+    // Show modal
+    $("#modal-warning").modal("show");
+}
+
+// -----------------------------------------------------------------------------
+function showModalInput(
+    title,
+    message,
+    btnCancel = getString("Gen_Cancel"),
+    btnOK = getString("Gen_Okay"),
+    callbackFunction = null
+) {
+    prefix = "modal-input";
+
+    // set captions
+    $(`#${prefix}-title`).html(title);
+    $(`#${prefix}-message`).html(message);
+    $(`#${prefix}-cancel`).html(btnCancel);
+    $(`#${prefix}-OK`).html(btnOK);
+
+    if (callbackFunction != null) {
+        modalCallbackFunction = callbackFunction;
+    }
+
+    // Show modal
+    $(`#${prefix}`).modal("show");
+
+    setTimeout(function () {
+        $(`#${prefix}-textarea`).focus();
+    }, 500);
+    
+}
+
+// -----------------------------------------------------------------------------
+function showModalFieldInput(
+    title,
+    message,
+    btnCancel = getString("Gen_Cancel"),
+    btnOK = getString("Gen_Okay"),
+    curValue = "",
+    callbackFunction = null
+) {
+    // set captions
+    prefix = "modal-field-input";
+
+    $(`#${prefix}-title`).html(title);
+    $(`#${prefix}-message`).html(message);
+    $(`#${prefix}-cancel`).html(btnCancel);
+    $(`#${prefix}-OK`).html(btnOK);
+
+    if (callbackFunction != null) {
+        modalCallbackFunction = callbackFunction;
+    }
+
+    $(`#${prefix}-field`).val(curValue);
+
+    setTimeout(function () {
+        $(`#${prefix}-field`).focus();
+    }, 500);
+
+    // Show modal
+    $(`#${prefix}`).modal("show");
+}
+
+// -----------------------------------------------------------------------------
+function modalDefaultOK() {
+    // Hide modal
+    $("#modal-default").modal("hide");
+
+    // timer to execute function
+    window.setTimeout(function () {
+        window[modalCallbackFunction]();
+    }, 100);
+}
+
+// -----------------------------------------------------------------------------
+function modalDefaultInput() {
+    // Hide modal
+    $("#modal-input").modal("hide");
+
+    // timer to execute function
+    window.setTimeout(function () {
+        window[modalCallbackFunction]();
+    }, 100);
+}
+
+// -----------------------------------------------------------------------------
+function modalDefaultFieldInput() {
+    // Hide modal
+    $("#modal-field-input").modal("hide");
+
+    // timer to execute function
+    window.setTimeout(function () {
+        modalCallbackFunction();
+    }, 100);
+}
+
+// -----------------------------------------------------------------------------
+function modalWarningOK() {
+    // Hide modal
+    $("#modal-warning").modal("hide");
+
+    // timer to execute function
+    window.setTimeout(function () {
+        window[modalCallbackFunction]();
+    }, 100);
+}
+
+// -----------------------------------------------------------------------------
+function showMessage(textMessage = "", timeout = 3000, colorClass = "modal_green") {
+    if (textMessage.toLowerCase().includes("error")) {
+        // show error
+        alert(textMessage);
+    } else {
+        // show temporary notification
+        $("#notification_modal").removeClass();                                               // remove all classes
+        $("#notification_modal").addClass("alert alert-dimissible notification_modal");       // add default ones
+        $("#notification_modal").addClass(colorClass);                                       // add color modifiers
+
+        // message
+        $("#alert-message").html(textMessage);
+
+        // timeout
+        $("#notification_modal").fadeIn(1, function () {
+            window.setTimeout(function () {
+                $("#notification_modal").fadeOut(500);
+            }, timeout);
+        });
+    }
+}
+
+// -----------------------------------------------------------------------------
+function showTickerAnnouncement(textMessage = "") {
+    if (textMessage.toLowerCase().includes("error")) {
+        // show error
+        alert(textMessage);
+    } else {
+        // show permanent notification
+        $("#ticker-message").html(textMessage);
+        $("#tickerAnnouncement").removeClass("myhidden");
+        // Move the tickerAnnouncement element to ticker_announcement_plc
+        $("#tickerAnnouncement").appendTo("#ticker_announcement_plc");
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Keyboard bindings
+// -----------------------------------------------------------------------------
+
+$(document).ready(function () {
+    $(document).on("keydown", function (event) {
+        // ESC key is pressed
+        if (event.keyCode === 27) {
+            // Trigger modal dismissal
+            $(".modal").modal("hide");
+        }
+
+        // Enter key is pressed
+        if (event.keyCode === 13) {
+            $(".modal:visible").find(".btn-modal-submit").click(); // Trigger the click event of the OK button in visible modals
+        }
+    });
+});
+
+
+// -----------------------------------------------------------------------------
+// Escape text
+function safeDecodeURIComponent(content) {
+    try {
+      return decodeURIComponent(content);
+    } catch (error) {
+      console.warn('Failed to decode URI component:', error);
+      return content;  // Return the original content if decoding fails
+    }
+  }
+  
+
+// -----------------------------------------------------------------------------
+// Backend notification Polling 
+// -----------------------------------------------------------------------------
+// Function to check for notifications
+function checkNotification() {
+    const notificationEndpoint = 'php/server/utilNotification.php?action=get_unread_notifications';
+    const phpEndpoint = 'php/server/utilNotification.php';
+
+    $.ajax({
+        url: notificationEndpoint, 
+        type: 'GET',
+        success: function(response) {
+            // console.log(response);
+
+            if(response != "[]")
+            {
+
+                // Find the oldest unread notification with level "interrupt"
+                const oldestInterruptNotification = response.find(notification => notification.read === 0 && notification.level === "interrupt");
+                const allUnreadNotification = response.filter(notification => notification.read === 0 && notification.level === "alert");
+
+                if (oldestInterruptNotification) {
+                    // Show modal dialog with the oldest unread notification
+
+                    console.log(oldestInterruptNotification.content);
+
+                    const decodedContent = safeDecodeURIComponent(oldestInterruptNotification.content);
+
+                    showModalOK("Notification", decodedContent, function() {
+                        // Mark the notification as read
+                        $.ajax({
+                            url: phpEndpoint,
+                            type: 'GET',
+                            data: {
+                                action: 'mark_notification_as_read',
+                                guid: oldestInterruptNotification.guid
+                            },
+                            success: function(response) {
+                                console.log(response);
+                                // After marking the notification as read, check for the next one
+                                checkNotification();
+                                hideSpinner();
+                            },
+                            error: function(xhr, status, error) {
+                                console.error("Error marking notification as read:", status, error);
+                            },
+                            complete:function() {
+                                hideSpinner();
+                            }
+                        });
+                    });
+                }
+
+                handleUnreadNotifications(allUnreadNotification.length)
+
+             
+            }
+        },
+        error: function() {
+            console.warn(`🟥 Error checking ${notificationEndpoint}`)
+            
+        }
+    });
+}
+
+// Handling unread notifications favicon + bell floating number bublbe
+function handleUnreadNotifications(count) {
+    $('#unread-notifications-bell-count').html(count);
+    if (count > 0) {
+        $('#unread-notifications-bell-count').show();
+        // Change the favicon to show there are notifications
+        $('#favicon').attr('href', 'img/NetAlertX_logo_notification.png');
+        // Update the title to include the count
+        document.title = `(${count}) ` + originalTitle;
+    } else {
+        $('#unread-notifications-bell-count').hide();
+        // Change the favicon back to the original
+        $('#favicon').attr('href', 'img/NetAlertX_logo.png');
+        // Revert the title to the original title
+        document.title = originalTitle;
+    }
+}
+
+// Store the original title of the document
+var originalTitle = document.title;
+
+
+// Start checking for notifications periodically
+setInterval(checkNotification, 3000);
+
+// --------------------------------------------------
+// User notification handling methods
+// --------------------------------------------------
+
+const phpEndpoint = 'php/server/utilNotification.php';
+
+// --------------------------------------------------
+// Write a notification
+function write_notification(content, level) {    
+
+    $.ajax({
+        url: phpEndpoint, // Change this to the path of your PHP script
+        type: 'GET',
+        data: {
+            action: 'write_notification',
+            content: content,
+            level: level
+        },
+        success: function(response) {
+            console.log('Notification written successfully.');
+        },
+        error: function(xhr, status, error) {
+            console.error('Error writing notification:', error);
+        }
+    });
+}
+
+// --------------------------------------------------
+// Write a notification
+function markNotificationAsRead(guid) {    
+  
+    $.ajax({
+      url: phpEndpoint,
+      type: 'GET',
+      data: {
+        action: 'mark_notification_as_read',
+        guid: guid
+      },
+      success: function(response) {
+        console.log(response);
+        // Perform any further actions after marking the notification as read here
+        showMessage(getString("Gen_Okay"))
+      },
+      error: function(xhr, status, error) {
+        console.error("Error marking notification as read:", status, error);
+      },
+      complete: function() {
+        // Perform any cleanup tasks here
+      }
+    });
+  }
+
+// --------------------------------------------------
+// Remove a notification
+function removeNotification(guid) {    
+  
+    $.ajax({
+      url: phpEndpoint,
+      type: 'GET',
+      data: {
+        action: 'remove_notification',
+        guid: guid
+      },
+      success: function(response) {
+        console.log(response);
+        // Perform any further actions after marking the notification as read here
+        showMessage(getString("Gen_Okay"))
+      },
+      error: function(xhr, status, error) {
+        console.error("Error removing notification:", status, error);
+      },
+      complete: function() {
+        // Perform any cleanup tasks here
+      }
+    });
+  }
+
+

front/js/settings_utils.js

@@ -1,171 +1,861 @@
 // -------------------------------------------------------------------
-  // Get all plugin prefixes of a given type 
-  function getPluginsByType(pluginsData, pluginType, onlyEnabled)
-  {
+// Get all plugin prefixes of a given type
+function getPluginsByType(pluginsData, pluginType, onlyEnabled) {
+  var result = [];
 
-    var result = []
-
-    pluginsData.forEach((plug) => {
-      
-      if(plug.plugin_type == pluginType)
-      {
-        // collect all, or if only enabled, check if NOT disabled 
-        if (onlyEnabled == false || (onlyEnabled && getSetting(plug.unique_prefix + '_RUN') != 'disabled')) {
-          result.push(plug.unique_prefix)         
-        }
+  pluginsData.forEach((plug) => {
+    if (plug.plugin_type == pluginType) {
+      // collect all, or if only enabled, check if NOT disabled
+      if (
+        onlyEnabled == false ||
+        (onlyEnabled && getSetting(plug.unique_prefix + "_RUN") != "disabled")
+      ) {
+        result.push(plug.unique_prefix);
       }
+    }
+  });
+
+  return result;
+}
+
+// -------------------------------------------------------------------
+// Get plugin code name base on prefix
+function getPluginCodeName(pluginsData, prefix) {
+  var result = "";
+
+  pluginsData.forEach((plug) => {
+    if (plug.unique_prefix == prefix) {
+      id = plug.code_name;
+
+      // console.log(id)
+      result = plug.code_name;
+    }
+  });
+
+  return result;
+}
+
+// -------------------------------------------------------------------
+// Get plugin type base on prefix
+function getPluginType(pluginsData, prefix) {
+  var result = "core";
+
+  pluginsData.forEach((plug) => {
+    if (plug.unique_prefix == prefix) {
+      id = plug.plugin_type;
+
+      // console.log(id)
+      result = plug.plugin_type;
+    }
+  });
+
+  return result;
+}
+
+// -------------------------------------------------------------------
+// Get plugin config based on prefix
+function getPluginConfig(pluginsData, prefix) {
+  result = "";
+
+  pluginsData.forEach((plug) => {
+    if (plug.unique_prefix == prefix) {
+      // console.log(id)
+      result = plug;
+    }
+  });
+
+  return result;
+}
+
+// -------------------------------------------------------------------
+// Generate plugin HTML card based on prefixes in an array
+function pluginCards(prefixesOfEnabledPlugins, includeSettings) {
+  html = "";
+
+  prefixesOfEnabledPlugins.forEach((prefix) => {
+    includeSettings_html = "";
+
+    includeSettings.forEach((set) => {
+      includeSettings_html += `
+            <div class="col-sm-6 overview-setting-value-wrap">
+              <a href="#${prefix + "_" + set}" onclick="toggleAllSettings()">
+                <div class="overview-setting-value  pointer" title="${
+                  prefix + "_" + set
+                }">
+                  <code>${getSetting(prefix + "_" + set)}</code>
+                </div> 
+              </a>
+            </div>
+          `;
     });
 
-    return result;
-  }
-
-  // -------------------------------------------------------------------
-  // Get plugin type base on prefix
-  function getPluginCodeName(pluginsData, prefix)
-  {
-    var result = ""
-
-    pluginsData.forEach((plug) => {
-
-      if (plug.unique_prefix == prefix ) {
-        id = plug.code_name;
-        
-        // console.log(id)
-        result = plug.code_name;        
-      }
-    });
-
-    return result;
-  }
-
-
-  // -------------------------------------------------------------------
-  // Get plugin type base on prefix
-  function getPluginType(pluginsData, prefix)
-  {
-    var result = "core"
-
-    pluginsData.forEach((plug) => {
-
-      if (plug.unique_prefix == prefix ) {
-        id = plug.plugin_type;
-        
-        // console.log(id)
-        result = plug.plugin_type;        
-      }
-    });
-
-    return result;
-  }
-
-  // -------------------------------------------------------------------
-  // Generate plugin HTML card based on prefixes in an array 
-  function pluginCards(prefixesOfEnabledPlugins, includeSettings)
-  {    
-    html = ""
-
-    prefixesOfEnabledPlugins.forEach((prefix) => {
-
-      includeSettings_html = ''
-
-      includeSettings.forEach((set) => {
-
-        includeSettings_html += `
-            <a href="#${prefix + '_' + set}" onclick="toggleAllSettings()">
-              <div class="overview-setting-value  pointer" title="${prefix + '_' + set}">
-                <code>${getSetting(prefix + '_' + set)}</code>
-              </div> 
-            </a>
-          `
-
-      });
-
-      html += `            
-              <div class="col-sm-4 ">
-                <div class="small-box bg-green " >
-                <div class="inner ">
+    html += `            
+              <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2  col-xxl-1  padding-5px">
+                <div class="small-box bg-green col-sm-12 " >
+                  <div class="inner col-sm-12">
+                    <a href="#${prefix}_header" onclick="toggleAllSettings('open')">
+                      <h5 class="card-title">
+                        <b>${getString(prefix + "_display_name")}</b>
+                      </h5>
+                    </a>
+                    ${includeSettings_html}
+                  </div>
                   <a href="#${prefix}_header" onclick="toggleAllSettings('open')">
-                    <h5 class="card-title">
-                      <b>${getString(prefix+"_display_name")}</b>
-                    </h5>
-                  </a>
-                  ${includeSettings_html}
-                </div>
-                  <a href="#${prefix}_header" onclick="toggleAllSettings('open')">
-                    <div class="icon"> ${getString(prefix+"_icon")} </div> 
+                    <div class="icon"> ${getString(prefix + "_icon")} </div> 
                   </a>  
                 </div>
                 
               </div>
-            `
+            `;
+  });
+
+  return html;
+}
+
+// -----------------------------------------------------------------------------
+// Open or close all settings
+// -----------------------------------------------------------------------------
+function toggleAllSettings(openOrClose = "") {
+  inStr = " in";
+  allOpen = true;
+  openIcon = "fa-angle-double-down";
+  closeIcon = "fa-angle-double-up";
+
+  $(".panel-collapse").each(function () {
+    if ($(this).attr("class").indexOf(inStr) == -1) {
+      allOpen = false;
+    }
+  });
+
+  if (allOpen == false || openOrClose == "open") {
+    // open all
+    openAllSettings();
+    $("#toggleSettings").attr(
+      "class",
+      $("#toggleSettings").attr("class").replace(openIcon, closeIcon)
+    );
+  } else {
+    // close all
+    $('div[data-myid="collapsible"]').each(function () {
+      $(this).attr("class", "panel-collapse collapse  ");
     });
-
-    return html;    
+    $("#toggleSettings").attr(
+      "class",
+      $("#toggleSettings").attr("class").replace(closeIcon, openIcon)
+    );
   }
+}
 
+function openAllSettings() {
+  $('div[data-myid="collapsible"]').each(function () {
+    $(this).attr("class", "panel-collapse collapse in");
+  });
+  $('div[data-myid="collapsible"]').each(function () {
+    $(this).attr("style", "height:inherit");
+  });
+}
 
-  // -----------------------------------------------------------------------------
-  // Open or close all settings
-  // -----------------------------------------------------------------------------
-  function toggleAllSettings(openOrClose = '')
-  {
-    inStr = ' in';
-    allOpen = true;
-    openIcon = 'fa-angle-double-down';
-    closeIcon = 'fa-angle-double-up';    
+// -------------------------------------------------------------------
+// Checks if all schedules are the same
+function schedulesAreSynchronized(prefixesOfEnabledPlugins, pluginsData) {
+  plug_schedules = [];
 
-    $('.panel-collapse').each(function(){
-      if($(this).attr('class').indexOf(inStr) == -1)
-      {
-        allOpen = false;
+  prefixesOfEnabledPlugins.forEach((prefix) => {
+    pluginsData.forEach((plug) => {
+      if (plug.unique_prefix == prefix) {
+        plug_schedules.push(
+          getSetting(prefix + "_RUN_SCHD").replace(/\s/g, "")
+        ); // replace all white characters to compare them easier
       }
-    })
-    
-    if(allOpen == false || openOrClose == 'open')
-    {
-      // open all
-      $('div[data-myid="collapsible"]').each(function(){$(this).attr('class', 'panel-collapse collapse in')})
-      $('div[data-myid="collapsible"]').each(function(){$(this).attr('style', 'height:inherit')})
-      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(openIcon, closeIcon))
-      
-    }
-    else{
-      // close all
-      $('div[data-myid="collapsible"]').each(function(){$(this).attr('class', 'panel-collapse collapse  ')})      
-      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(closeIcon, openIcon))
-    }
-    
+    });
+  });
+
+  // Check if all plug_schedules are the same
+  if (plug_schedules.length > 0) {
+    const firstSchedule = plug_schedules[0];
+    return plug_schedules.every((schedule) => schedule === firstSchedule);
   }
 
+  return true; // Return true if no schedules are found
+}
 
-  // -------------------------------------------------------------------
-  // Checks if all schedules are the same
-  function schedulesAreSynchronized(prefixesOfEnabledPlugins, pluginsData)
-  {    
-    plug_schedules = []    
+// -------------------------------------------------------------------
+// Checks if value is already encoded
+function isSHA256(value) {
+  // Check if the value is a string and has a length of 64 characters
+  if (typeof value === "string" && value.length === 64) {
+    // Check if the value contains only hexadecimal characters
+    return /^[0-9a-fA-F]+$/.test(value);
+  } else {
+    return false;
+  }
+}
 
-    prefixesOfEnabledPlugins.forEach((prefix) => {
-      pluginsData.forEach((plug) => {
+// -------------------------------------------------------------------
+// Utility function to check if the value is already Base64
+function isBase64(value) {
+  const base64Regex =
+    /^(?:[A-Za-z0-9+\/]{4})*?(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/;
+  return base64Regex.test(value);
+}
 
-        if (plug.unique_prefix == prefix) {
-          
-          plug_schedules.push(getSetting(prefix+"_RUN_SCHD").replace(/\s/g, "")) // replace all white characters to compare them easier
+// -------------------------------------------------------------------
+// Validation
+// -------------------------------------------------------------------
+function settingsCollectedCorrectly(settingsArray, settingsJSON_DB) {
+  // check if the required UI_LANG setting is in the array - if not something went wrong
+  $.each(settingsArray, function (index, value) {
+    if (value[1] == "UI_LANG") {
+      if (isEmpty(value[3]) == true) {
+        console.log(`⚠ Error: Required setting UI_LANG not found`);
+        showModalOk("ERROR", getString("settings_missing_block"));
 
-        }
+        return false;
+      }
+    }
+  });
 
+  const settingsCodeNames = settingsJSON_DB.map((setting) => setting.Code_Name);
+  const detailedCodeNames = settingsArray.map((item) => item[1]);
+
+  const missingCodeNamesOnPage = detailedCodeNames.filter(
+    (codeName) => !settingsCodeNames.includes(codeName)
+  );
+  const missingCodeNamesInDB = settingsCodeNames.filter(
+    (codeName) => !detailedCodeNames.includes(codeName)
+  );
+
+  // check if the number of settings on the page and in the DB are the same
+  if (missingCodeNamesOnPage.length !== missingCodeNamesInDB.length) {
+    console.log(
+      `⚠ Error: The following settings are missing in the DB or on the page (Reload page to fix):`
+    );
+    console.log(missingCodeNamesOnPage);
+    console.log(missingCodeNamesInDB);
+
+    showModalOk("ERROR", getString("settings_missing_block"));
+
+    return false;
+  }
+
+  //  all OK
+  return true;
+}
+// -------------------------------------------------------------------
+// Manipulating Editable List options
+// -------------------------------------------------------------------
+
+// ---------------------------------------------------------
+// Add item to list
+function addList(element, clearInput = true) {
+  const fromId = $(element).attr("my-input-from");
+  const toId = $(element).attr("my-input-to");
+
+  const input = $(`#${fromId}`).val();
+
+  console.log(`fromId | toId | input : ${fromId} | ${toId} | ${input}`);
+
+  const newOption = $("<option class='interactable-option'></option>")
+    .attr("value", input)
+    .text(input);
+
+  // add new option
+  $(`#${toId}`).append(newOption);
+
+  // clear input
+  if (clearInput) {
+    $(`#${fromId}`).val("");
+  }
+
+  // Initialize interaction options only for the newly added option
+  initListInteractionOptions(newOption);
+
+  // flag something changes to prevent navigating from page
+  settingsChanged();
+}
+
+// ---------------------------------------------------------
+function removeFromList(element) {
+  settingsChanged();
+  $(`#${$(element).attr("my-input-to")}`)
+    .find("option:last")
+    .remove();
+}
+
+// -------------------------------------------------------------------
+// Function to remove an item from the select element
+function removeOptionItem(option) {
+  settingsChanged();
+  option.remove();
+}
+
+// -------------------------------------------------------------------
+// Update value of an item from the select element
+function updateOptionItem(option, value) {
+  settingsChanged();
+  option.html(value);
+  option.val(value);
+}
+
+// -------------------------------------------------------------------
+// Remove all options
+function removeAllOptions(element) {
+  settingsChanged();
+  $(`#${$(element).attr("my-input-to")}`).empty();
+}
+
+// -------------------------------------------------------------------
+// Add all options
+function selectAll(element) {
+  settingsChanged();
+
+  // Get the <select> element with the class 'deviceSelector'
+  // var selectElement = $('.deviceSelector select');
+  var selectElement = $(`#${$(element).attr("my-input-to")}`);
+  
+  // Iterate over each option within the select element
+  selectElement.find('option').each(function() {
+    // Mark each option as selected
+    $(this).prop('selected', true);
+  });
+
+  // Trigger the 'change' event to notify Bootstrap Select of the changes
+  selectElement.trigger('change');
+}
+
+// -----------------------------------------------------------------------------
+// UN-Select All
+function unselectAll(element) {
+  settingsChanged();
+  // Get the <select> element with the class 'deviceSelector'
+  // var selectElement = $('.deviceSelector select');
+  var selectElement = $(`#${$(element).attr("my-input-to")}`);
+  
+  // Iterate over each option within the select element
+  selectElement.find('option').each(function() {
+    // Unselect each option
+    $(this).prop('selected', false);
+  });
+  
+  // Trigger the 'change' event to notify Bootstrap Select of the changes
+  selectElement.trigger('change');
+}
+
+// -----------------------------------------------------------------------------
+// Trigger change to open up the dropdown filed
+function selectChange(element) {
+  settingsChanged();
+  // Get the <select> element with the class 'deviceSelector'
+  // var selectElement = $('.deviceSelector select');
+  var selectElement = $(`#${$(element).attr("my-input-to")}`);
+  
+  selectElement.parent().find("input").focus().click();
+}
+
+// -------------------------------------------------------------------
+// Function to initialize remove functionality on select options
+
+// Counter to track number of clicks
+let clickCounter = 0;
+
+// Function to initialize list interaction options
+function initListInteractionOptions(element) {
+  if (element) {
+    $options = $(element);
+  } else {
+    $options = $(`.interactable-option`);
+  }
+
+  // Attach click event listener to options
+  $options.on("click", function () {
+    const $option = $(this);
+
+    // Increment click counter
+    clickCounter++;
+
+    // Delay to capture multiple clicks
+    setTimeout(() => {
+      // Perform action based on click count
+      if (clickCounter === 1) {
+        // Single-click action
+        showModalFieldInput(
+          `<i class="fa-regular fa-pen-to-square"></i> ${getString(
+            "Gen_Update_Value"
+          )}`,
+          getString("settings_update_item_warning"),
+          getString("Gen_Cancel"),
+          getString("Gen_Update"),
+          $option.html(),
+          function () {
+            updateOptionItem($option, $(`#modal-field-input-field`).val());
+          }
+        );
+      } else if (clickCounter === 2) {
+        // Double-click action
+        removeOptionItem($option);
+      }
+
+      // Reset click counter
+      clickCounter = 0;
+    }, 300); // Adjust delay as needed
+  });
+}
+
+// -------------------------------------------------------------------
+// Function to filter rows based on input text
+function filterRows(inputText) {
+
+  // open everything if input text is empty
+  if (!inputText) {
+    inputText = "";
+
+    $(".panel").each(function () {
+      var $panel = $(this);
+      var $panelHeader = $panel.find('.panel-heading');
+      var $panelBody = $panel.find('.panel-collapse');
+
+      $panel.show() 
+      $panelHeader.show() 
+      $panelBody.collapse('show');
+
+      $panelBody.find(".table_row:not(.docs)").each(function () {
+        var $row = $(this)
+        var rowId = $row.attr("id");
+        var isMetadataRow = rowId && rowId.endsWith("__metadata");
+        if (!isMetadataRow) {
+          $row.show()
+        }        
       });
+      
+    });
+    
+  } else{
+    // filter
+
+    $(".panel").each(function () {
+      var $panel = $(this);
+      var $panelHeader = $panel.find('.panel-heading');
+      var $panelBody = $panel.find('.panel-collapse');
+  
+      var anyVisible = false; // Flag to check if any row is visible
+  
+      $panelBody.find(".table_row:not(.docs)").each(function () {
+        var $row = $(this);
+  
+        // Check if the row ID ends with "__metadata"
+        var rowId = $row.attr("id");
+        var isMetadataRow = rowId && rowId.endsWith("__metadata");
+  
+        // Always hide metadata rows
+        if (isMetadataRow) {
+          $row.hide();
+          return; // Skip further processing for metadata rows
+        }
+  
+        var description = $row.find(".setting_description").text().toLowerCase();
+        var codeName = $row.find(".setting_name code").text().toLowerCase();
+  
+        if (
+          description.includes(inputText.toLowerCase()) ||
+          codeName.includes(inputText.toLowerCase())
+        ) {
+          $row.show();
+          anyVisible = true; // Set the flag to true if at least one row is visible
+        } else {
+          $row.hide();
+        }
+      });
+  
+      // Determine whether to hide or show the panel based on visibility of rows
+      if (anyVisible) {
+        $panelBody.collapse('show'); // Ensure the panel body is shown if there are visible rows
+        $panelHeader.show(); // Show the panel header
+        $panel.show(); // Show the entire panel if there are visible rows
+      } else {
+        $panelBody.collapse('hide'); // Hide the panel body if no rows are visible
+        $panelHeader.hide(); // Hide the panel header if no rows are visible
+        $panel.hide(); // Hide the entire panel if no rows are visible
+      }
     });
 
-    // Check if all plug_schedules are the same
-    if (plug_schedules.length > 0) {
-      const firstSchedule = plug_schedules[0];
-      return plug_schedules.every((schedule) => schedule === firstSchedule);
-    }
 
-    return true; // Return true if no schedules are found
   }
 
+  
+}
+
+
+setTimeout(() => {
+  // Event listener for input change
+  $("#settingsSearch").on("input", function () {
+    var searchText = $(this).val();
+    // hide the setting overview dashboard
+    $("#settingsOverview").collapse("hide");
+
+    filterRows(searchText);
+  });
+
+  // Event listener for input focus
+  // var firstFocus = true;
+  $("#settingsSearch").on("focus", function () {
+    openAllSettings();
+  });
+}, 1000);
+
+
+// -----------------------------------------------------------------------------
+// Show/hide the metadata settings
+// -----------------------------------------------------------------------------
+function toggleMetadata(element) {
+  const id = $(element).attr("my-to-toggle");
+
+  $(`#${id}`).toggle();
+}
+
+// -----------------------------------------------------------------------------
+// Show setting description in a modal on smaller screens
+// -----------------------------------------------------------------------------
+function showDescription(element) {
+  const id = $(element).attr("my-to-show");
+
+  description = $(`${id}`)[0].innerHTML
+  console.log(description);
+  showModalOK(getString("Gen_Description"), description);
+}
+
+// ---------------------------------------------------------
+// Helper methods
+// ---------------------------------------------------------
+// Toggle readonly mode of the target element specified by the id in the "my-input-toggle-readonly" attribute
+function overrideToggle(element) {
+  settingsChanged();
+
+  targetId = $(element).attr("my-input-toggle-readonly");
+
+  inputElement = $(`#${targetId}`)[0];
+
+  if (!inputElement) {
+    console.error("Input element not found!");
+    return;
+  }
+
+  if (inputElement.type === "text" || inputElement.type === "password") {
+    inputElement.readOnly = !inputElement.readOnly;
+  } else if (inputElement.type === "checkbox") {
+    inputElement.disabled = !inputElement.disabled;
+  } else {
+    console.warn(
+      "Unsupported input type. Only text, password, and checkbox inputs are supported."
+    );
+  }
+}
 
 
 
+// Generate options or set options based on the provided parameters
+function generateOptionsOrSetOptions(
+  codeName,
+  valuesArray, // Array of values to be pre-selected in the dropdown
+  placeholder, // ID of the HTML element where dropdown should be rendered (will be replaced)
+  processDataCallback, // Callback function to generate entries based on options
+  targetField, // Target field or element where selected value should be applied or updated
+  transformers = [] // Transformers to be applied to the values
+) {
 
+  // console.log(codeName);
+
+  // NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
+  options = arrayToObject(createArray(getSettingOptions(codeName)))
+
+  // Call to render lists
+  renderList(
+    options,
+    processDataCallback,
+    valuesArray,
+    placeholder,
+    targetField,
+    transformers
+  );
+  
+  
+}
+
+
+// ------------------------------------------------------------
+// Function to apply transformers to a value
+function applyTransformers(val, transformers) {
+  transformers.forEach((transformer) => {
+    switch (transformer) {
+      case "sha256":
+        // Implement sha256 hashing logic
+        if (!isSHA256(val)) {
+          val = CryptoJS.SHA256(val).toString(CryptoJS.enc.Hex);
+        }
+        break;
+      case "base64":
+        // Implement base64  logic
+        if (!isBase64(val)) {
+          val = btoa(val);
+        }
+        break;
+      case "getString":
+        // no change
+        val = val;        
+        break;
+      default:
+        console.warn(`Unknown transformer: ${transformer}`);
+    }
+  });
+  return val;
+}
+
+// ------------------------------------------------------------
+// Function to reverse transformers applied to a value
+function reverseTransformers(val, transformers) {
+  transformers.reverse().forEach((transformer) => {
+    switch (transformer) {
+      case "sha256":
+        // Reversing sha256 is not possible since it's a one-way hash function
+        console.warn("Reversing sha256 is not possible");
+        break;
+      case "base64":
+        // Implement base64 decoding logic
+        if (isBase64(val)) {
+          val = atob(val);
+        }
+        break;
+      case "getString":
+        // retrieve string
+        val = getString(val);        
+        break;
+      default:
+        console.warn(`Unknown transformer: ${transformer}`);
+    }
+  });
+  return val;
+}
+
+
+// ------------------------------------------------------------
+// Function to initialize relevant variables based on HTML element
+const handleElementOptions = (codeName, elementOptions, transformers, val) => {
+  let inputType = "text";
+  let readOnly = "";
+  let isMultiSelect = false;
+  let isOrdeable = false;
+  let cssClasses = "";
+  let placeholder = "";
+  let suffix = "";
+  let separator = "";
+  let editable = false;
+  let valRes = val;
+  let sourceIds = [];
+  let getStringKey = "";
+  let onClick = "console.log('onClick - Not implemented');";
+  let onChange = "console.log('onChange - Not implemented');";
+  let customParams = "";
+  let customId = "";
+
+
+  elementOptions.forEach((option) => {
+    if (option.prefillValue) {
+      valRes = option.prefillValue === "null" ? "" : option.prefillValue;
+    }
+    if (option.type) {
+      inputType = option.type;
+    }
+    if (option.readonly === "true") {
+      readOnly = `readonly`;
+    }
+    if (option.multiple === "true") {
+      isMultiSelect = true;
+    }
+    if (option.ordeable === "true") {
+      isOrdeable = true;
+    }
+    if (option.editable === "true") {
+      editable = true;
+    }
+    if (option.cssClasses) {
+      cssClasses = option.cssClasses;
+    }
+    if (option.placeholder) {
+      placeholder = option.placeholder;
+    }
+    if (option.suffix) {
+      suffix = option.suffix;
+    }
+    if (option.sourceSuffixes) {
+      $.each(option.sourceSuffixes, function (index, suf) {
+        sourceIds.push(codeName + suf);
+      });
+    }
+    if (option.separator) {
+      separator = option.separator;
+    }
+    if (option.getStringKey) {
+      getStringKey = option.getStringKey;
+    }
+    if (option.onClick) {
+      onClick = option.onClick;
+    }
+    if (option.onChange) {
+      onChange = option.onChange;
+    }
+    if (option.customParams) {
+      customParams = option.customParams;
+    }
+    if (option.customId) {
+      customId = option.customId;
+    }
+  });
+
+  if (transformers.includes("sha256")) {
+    inputType = "password";
+  }
+
+  return {
+    inputType,
+    readOnly,
+    isMultiSelect,
+    isOrdeable,
+    cssClasses,
+    placeholder,
+    suffix,
+    sourceIds,
+    separator,
+    editable,
+    valRes,
+    getStringKey,
+    onClick,
+    onChange,
+    customParams,
+    customId
+  };
+};
+
+
+// -----------------------------------------------------------------------------
+// Data processors
+// -----------------------------------------------------------------------------
+
+// --------------------------------------------------
+// Creates an object from an array 
+function arrayToObject(array) {
+  const obj = [];
+  array.forEach((item, index) => {
+    obj.push({ id: item, name: item })
+  });
+  return obj;
+}
+
+// -----------------------------------------------------------------------------
+// Processor to generate options
+function generateOptions(options, valuesArray, targetField, transformers, placeholder) {
+  var optionsHtml = "";
+
+  resultArray    = []
+  selectedArray  = []
+  cssClass       = ""
+  
+
+  // determine if options or values are used in the listing
+  if (valuesArray.length > 0 && options.length > 0){
+
+    // multiselect list ->  options only + selected the ones in valuesArray 
+    resultArray   = options;
+    selectedArray = valuesArray
+
+  } else if (valuesArray.length > 0 && options.length == 0){
+
+    // editable list -> values only     
+    resultArray   = arrayToObject(valuesArray)
+    cssClass = "interactable-option"  // generates [1x 📝 | 2x 🚮]
+  } else if (options.length > 0){
+
+    // dropdown -> options only (value == 1 STRING not ARRAY)
+    resultArray   = options;
+  }
+
+ 
+  // Create a map to track the index of each item in valuesArray
+  const orderMap = new Map(valuesArray.map((item, index) => [item, index]));
+
+  // Sort resultArray based on the order in valuesArray
+  resultArray.sort((a, b) => {
+    const indexA = orderMap.has(a.id) ? orderMap.get(a.id) : valuesArray.length;
+    const indexB = orderMap.has(b.id) ? orderMap.get(b.id) : valuesArray.length;
+    return indexA - indexB;
+  });
+
+  resultArray.forEach(function(item) {
+    let labelName = item.name;
+
+    if (labelName !== '❌None') {
+      labelName = reverseTransformers(labelName, transformers);
+    }
+
+    // Always include selected if options are used as a source
+    let selected = options.length !== 0 && valuesArray.includes(item.id) ? 'selected' : '';
+
+    optionsHtml += `<option class="${cssClass}" value="${item.id}" ${selected}>${labelName}</option>`;
+  });
+
+
+  // Place the resulting HTML into the specified placeholder div
+  $("#" + placeholder).replaceWith(optionsHtml);
+}
+
+
+// -----------------------------------------------------------------------------
+// Processor to generate a list
+function generateList(options, valuesArray, targetField, transformers, placeholder) {
+  var listHtml = "";
+  options.forEach(function(item) {
+
+    labelName = item.name
+
+    if(labelName != '❌None')
+    {
+      labelName = reverseTransformers(labelName, transformers)
+    }
+
+    let selected = valuesArray.includes(item.id) ? 'selected' : '';
+
+    listHtml += `<li ${selected}>${labelName}</li>`;
+  });
+  
+  // Place the resulting HTML into the specified placeholder div
+  $("#" + placeholder).replaceWith(listHtml);
+}
+
+// -----------------------------------------------------------------------------
+// Processor to generate a list in the deviceDetails page
+function genListWithInputSet(options, valuesArray, targetField, transformers, placeholder) {
+
+  var listHtml = "";
+
+  
+  options.forEach(function(item) {
+
+    let selected = valuesArray.includes(item.id) ? 'selected' : '';
+
+    // console.log(item);
+
+    labelName = item.name
+
+    if(labelName != '❌None')
+    {
+      labelName = reverseTransformers(labelName, transformers)
+      // console.log(transformers);
+    }
+
+    listHtml += `<li ${selected}>
+                      <a href="javascript:void(0)" onclick="setTextValue('${targetField}','${item.id}')">${labelName}</a> 
+                </li>`;
+    
+  });
+
+  // Place the resulting HTML into the specified placeholder div
+  $("#" + placeholder).replaceWith(listHtml);
+}

front/js/tests.js

@@ -0,0 +1,32 @@
+// --------------------------------------------------
+// Check if database is locked
+function lockDatabase(delay=20) {
+    $.ajax({
+        url: 'php/server/dbHelper.php', // Replace with the actual path to your PHP file
+        type: 'GET',
+        data: { action: 'lockDatabase', delay: delay },
+        success: function(response) { 
+            console.log('Executed');      
+        },
+        error: function() {
+            console.log('Error ocurred');            
+        }
+    });
+
+    let times = delay; 
+    let countdownInterval = setInterval(() => {
+        times--;
+        console.log(`Remaining time: ${times} seconds`);
+        
+        if (times <= 0) {
+            clearInterval(countdownInterval);
+            console.log('Countdown finished');
+        }
+    }, 1000);
+}
+
+
+
+
+
+

front/js/ui_components.js

@@ -11,16 +11,7 @@
 // -----------------------------------------------------------------------------
 // Initialize device selectors / pickers fields
 // -----------------------------------------------------------------------------
-function initDeviceSelectors() {
-
-  console.log(devicesList)
-  // Retrieve device list from session variable
-  var devicesListAll_JSON = getCache('devicesListAll_JSON');
-
-  var devicesList = JSON.parse(devicesListAll_JSON);
-
-  console.log(devicesList);
-
+function initDeviceSelectors(devicesListAll_JSON) {
 
   // Check if both device list exists
   if (devicesListAll_JSON) {
@@ -74,213 +65,245 @@ function initDeviceSelectors() {
         }        
     
     }, 10);
-
 }
 
 
-// --------------------------------------------------------
-//Initialize Select2 Elements and make them sortable
+// ----------------------------------------------
+// Updates the icon preview  
+function updateIconPreview(elem) {
+  // Retrieve and parse custom parameters from the element
+  let params = $(elem).attr("my-customparams")?.split(',').map(param => param.trim());
 
-$(function () {
-  // Iterate over each Select2 dropdown
-  $('.select2').each(function() {
-      var selectEl = $(this).select2();
+  // console.log(params);
 
-      // Apply sortable functionality to the dropdown's dropdown-container
-      selectEl.next().children().children().children().sortable({
-          containment: 'parent',
-          update: function () {
-              var sortedValues = $(this).children().map(function() {
-                  return $(this).attr('title');
-              }).get();
+  if (params && params.length >= 2) {
+    var inputElementID = params[0];
+    var targetElementID = params[1];
+  } else {
+    console.error("Invalid parameters passed to updateIconPreview function");
+    return;
+  }
 
-              var sortedOptions = selectEl.find('option').sort(function(a, b) {
-                  return sortedValues.indexOf($(a).text()) - sortedValues.indexOf($(b).text());
-              });
+  // Get the input element using the inputElementID
+  let iconInput = $("#" + inputElementID);
 
-              // Replace all options in selectEl
-              selectEl.empty().append(sortedOptions);
+  if (iconInput.length === 0) {
+    console.error("Icon input element not found");
+    return;
+  }
 
-              // Trigger change event on Select2
-              selectEl.trigger('change');
-          }
-      });
+  // Get the initial value and update the target element
+  let value = iconInput.val();
+  if (!value) {
+    console.error("Input value is empty or not defined");
+    return;
+  }
+
+  if (!targetElementID) {
+    targetElementID = "txtIcon";
+  }
+
+  // Check if the target element exists, if not find an element with matching custom attribute
+  let targetElement = $('#' + targetElementID);
+  if (targetElement.length === 0) {
+    // Look for an element with my-custom-id attribute equal to targetElementID
+    targetElement = $('[my-customid="' + targetElementID + '"]');
+    if (targetElement.length === 0) {
+      console.error("Neither target element with ID nor element with custom attribute found");
+      return;
+    }
+  }
+
+  // Update the target element with decoded base64 value
+  targetElement.html(atob(value));
+
+  // Add event listener to update the icon on input change
+  iconInput.on('change input', function () {
+    let newValue = $(this).val();
+    $('#' + targetElementID).html(atob(newValue));
   });
-});
+}
+
 
 
 
 
 // -----------------------------------------------------------------------------
-// Initiate dropdown
-function initSettingDropdown(settingKey,       // Identifier for the setting
-                            valuesArray,       // Array of values to be pre-selected in the dropdown
-                            targetLocation,    // ID of the HTML element where dropdown should be rendered (will be replaced)
-                            callbackToGenerateEntries,  // Callback function to generate entries based on options
-                            targetField,      // Target field or element where selected value should be applied or updated
-                            nameTransformer)      // callback to transform the name (e.g. base64)
-{
-
-  var optionsHtml = ""
- 
-  optionsArray = createArray(getSettingOptions(settingKey))  
-
-  // check if the result is a SQL query
-  if(isSQLQuery(optionsArray[0]))
-  {    
-    readData(optionsArray[0], callbackToGenerateEntries, valuesArray, targetLocation, targetField, nameTransformer);
-
-  } else // this should be already an array, e.g. from a setting or pre-defined
-  {     
-    optionsArray.forEach(option => {
-      let selected = valuesArray.includes(option) ? 'selected' : '';
-      optionsHtml += `<option value="${option}" ${selected}>${option}</option>`;
-    });    
-    
-    // Replace the specified placeholder div with the resulting HTML 
-    setTimeout(() => {
-
-      $("#" + targetLocation).replaceWith(optionsHtml);
-      
-      }, 50);   
-    
+// Generic function to copy text to clipboard
+function copyToClipboard(buttonElement) {
+  const text = $(buttonElement).data('text');
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(() => {
+      showMessage('Copied to clipboard: ' + text, 1500);
+    }).catch(err => {
+      console.error('Failed to copy: ', err);
+    });
+  } else {
+    // Fallback to execCommand if Clipboard API is not available
+    const tempInput = document.createElement('input');
+    tempInput.value = text;
+    document.body.appendChild(tempInput);
+    tempInput.select();
+    try {
+      document.execCommand('copy');
+      showMessage('Copied to clipboard: ' + text, 1500);
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+    document.body.removeChild(tempInput);
   }
 }
 
-
 // -----------------------------------------------------------------------------
-// Hide elements on the page based on the supplied setting
-function hideUIelements(settingKey) {
+// Simple Sortable Table columns 
+// -----------------------------------------------------------------------------
 
-  hiddenSectionsSetting = getSetting(settingKey)
-  
-  if(hiddenSectionsSetting != "") // handle if settings not yet initialized
+function sortColumn(element) {
+  var th = $(element).closest('th');
+  var table = th.closest('table');
+  var columnIndex = th.index();
+  var ascending = !th.data('asc');
+  sortTable(table, columnIndex, ascending);
+  th.data('asc', ascending);
+}
+
+function sortTable(table, columnIndex, ascending) {
+  var tbody = table.find('tbody');
+  var rows = tbody.find('tr').toArray().sort(comparer(columnIndex));
+  if (!ascending) {
+    rows = rows.reverse();
+  }
+  for (var i = 0; i < rows.length; i++) {
+    tbody.append(rows[i]);
+  }
+}
+
+function comparer(index) {
+  return function(a, b) {
+    var valA = getCellValue(a, index);
+    var valB = getCellValue(b, index);
+    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
+  };
+}
+
+function getCellValue(row, index) {
+  return $(row).children('td').eq(index).text();
+}
+
+ // ----------------------------------------------------------------------------- 
+  // handling events on the backend initiated by the front end START
+  // ----------------------------------------------------------------------------- 
+
+  modalEventStatusId = 'modal-message-front-event'
+
+  // --------------------------------------------------------
+  // Calls a backend function to add a front-end event (specified by the attributes 'data-myevent' and 'data-myparam-plugin' on the passed  element) to an execution queue
+  function addToExecutionQueue_settingEvent(element)
   {
 
-    sectionsArray = createArray(hiddenSectionsSetting)
+    // value has to be in format event|param. e.g. run|ARPSCAN
+    action = `${getGuid()}|${$(element).attr('data-myevent')}|${$(element).attr('data-myparam-plugin')}`
 
-    // remove spaces to get IDs
-    var newArray = $.map(sectionsArray, function(value) {
-        return value.replace(/\s/g, '');
-    });
+    $.ajax({
+      method: "POST",
+      url: "php/server/util.php",
+      data: { function: "addToExecutionQueue", action: action  },
+      success: function(data, textStatus) {
+          // showModalOk ('Result', data );
 
-    $.each(newArray, function(index, hiddenSection) {
+          // show message
+          showModalOk(getString("general_event_title"), `${getString("general_event_description")}  <br/> <br/> <code id='${modalEventStatusId}'></code>`);
 
-      if($('#' + hiddenSection))
-      {
-        $('#' + hiddenSection).hide()      
-      }    
-      
-    });
+          updateModalState()
+      }
+    })
   }
 
-}
+  // --------------------------------------------------------
+  // Updating the execution queue in in modal pop-up
+  function updateModalState() {
+    setTimeout(function() {
+        // Fetch the content from the log file using an AJAX request
+        $.ajax({
+            url: '/log/execution_queue.log',
+            type: 'GET',
+            success: function(data) {
+                // Update the content of the HTML element (e.g., a div with id 'logContent')
+                $('#'+modalEventStatusId).html(data);
 
+                updateModalState();
+            },
+            error: function() {
+                // Handle error, such as the file not being found
+                $('#logContent').html('Error: Log file not found.');
+            }
+        });
+    }, 2000);
+  }
 
 
-
-// -----------------------------------------------------------------------------
-// Data processors
-// -----------------------------------------------------------------------------
-
-
-// -----------------------------------------------------------------------------
-// Processor to generate options for a dropdown menu
-function generateDropdownOptions(data, valuesArray, targetField, nameTransformer) {
-  var optionsHtml = "";
-  data.forEach(function(item) {
-
-    labelName = item.name
-
-    // console.log(nameTransformer);
-    // console.log(labelName);
-
-    // if(nameTransformer && nameTransformer != '' && labelName != '❌None')
-    // {
-    //   console.log(labelName);
-    //   labelName = nameTransformer(labelName)
-    //   console.log(labelName);
-    // }
-
-    let selected = valuesArray.includes(item.id) ? 'selected' : '';
-
-    optionsHtml += `<option value="${item.id}" ${selected}>${labelName}</option>`;
-  });
-  return `${optionsHtml}`;
-}
-
-
-// -----------------------------------------------------------------------------
-// Processor to generate a list
-function generateList(data, valuesArray, targetField, nameTransformer) {
-  var listHtml = "";
-  data.forEach(function(item) {
-
-    labelName = item.name
-
-    if(nameTransformer && nameTransformer != '' && labelName != '❌None')
-    {
-      labelName = nameTransformer(labelName)
-    }
-
-    let selected = valuesArray.includes(item.id) ? 'selected' : '';
-
-    listHtml += `<li ${selected}>${labelName}</li>`;
-  });
-
-  return listHtml;
-}
-
-// -----------------------------------------------------------------------------
-// Processor to generate a list in the deviceDetails page
-function genListWithInputSet(data, valuesArray, targetField, nameTransformer) {
-
-  var listHtml = "";
-
-  console.log(data);
-  data.forEach(function(item) {
-
-    let selected = valuesArray.includes(item.id) ? 'selected' : '';
-
-    console.log(item);
-
-    labelName = item.name
-
-    if(nameTransformer && nameTransformer != '' && labelName != '❌None')
-    {
-      labelName = nameTransformer(labelName)
-    }
-
-    listHtml += `<li ${selected}>
-                      <a href="javascript:void(0)" onclick="setTextValue('${targetField}','${item.id}')">${labelName}</a> 
-                </li>`;
-    
-  });
-
-  return listHtml;
-}
-
-
-// -----------------------------------------------------------------------------
-// Updates the icon preview  
-function updateIconPreview (inputId) {
-  // update icon
-  iconInput = $(inputId) 
-
-  value = iconInput.val()
-
-  iconInput.on('change input', function() {
-    $('#txtIconFA').html(atob(value))
-  });    
-
-  $('#txtIconFA').html(atob(value))
-  
-}
-
 // -----------------------------------------------------------------------------
 // initialize
 // -----------------------------------------------------------------------------
 
-initDeviceSelectors();
+function initSelect2() {
+
+  // Retrieve device list from session variable
+  var devicesListAll_JSON = getCache('devicesListAll_JSON');
+
+  //  check if cache ready
+  if(isValidJSON(devicesListAll_JSON))
+  {
+    // prepare HTML DOM before initializing the frotend
+    initDeviceSelectors(devicesListAll_JSON)
+
+    
+    // --------------------------------------------------------
+    //Initialize Select2 Elements and make them sortable
+    
+    $(function () {
+      // Iterate over each Select2 dropdown
+      $('.select2').each(function() {
+          var selectEl = $(this).select2();
+    
+          // Apply sortable functionality to the dropdown's dropdown-container
+          selectEl.next().children().children().children().sortable({
+              containment: 'parent',
+              update: function () {
+                  var sortedValues = $(this).children().map(function() {
+                      return $(this).attr('title');
+                  }).get();
+    
+                  var sortedOptions = selectEl.find('option').sort(function(a, b) {
+                      return sortedValues.indexOf($(a).text()) - sortedValues.indexOf($(b).text());
+                  });
+    
+                  // Replace all options in selectEl
+                  selectEl.empty().append(sortedOptions);
+    
+                  // Trigger change event on Select2
+                  selectEl.trigger('change');
+              }
+          });
+      });
+    });
+  } else // cache not ready try later
+  {
+    setTimeout(() => {
+      initSelect2()
+    }, 1000);
+  }  
+}
+
+// init select2 after dom laoded
+window.addEventListener("load", function() {
+  // try to initialize select2
+  setTimeout(() => {
+    initSelect2()
+  }, 1000);
+});
+
+
+
 
 console.log("init ui_components.js")

front/lib/AdminLTE/plugins/jQueryUI/jquery-ui.js

@@ -1034,7 +1034,7 @@ var mouse = $.widget("ui.mouse", {
 		return this.mouseDelayMet;
 	},
 
-	// These are placeholder methods, to be overriden by extending plugin
+	// These are placeholder methods, to be overridden by extending plugin
 	_mouseStart: function(/* event */) {},
 	_mouseDrag: function(/* event */) {},
 	_mouseStop: function(/* event */) {},

front/multiEditCore.php

@@ -1,27 +1,33 @@
 
 
-
-
 <div class="col-md-12">
+    <div class="callout callout-warning">
+      <h4><?= lang('Gen_Warning');?></h4>
+
+      <p><?= lang('Device_MultiEdit_Backup');?></p>
+    </div>
     <div class="box box-default">
 
       <div class="box-header">
 
         <h3 class="box-title"><?= lang('Gen_Selected_Devices');?></h3>
 
-        </div>
-    <div class="deviceSelector"></div>
+      </div>
+    <div class="deviceSelector col-md-9 col-sm-12" style="z-index:5"></div> 
 
-    <div class="callout callout-warning">
-      <h4><?= lang('Gen_Warning');?></h4>
-
-      <p><?= lang('Device_MultiEdit_Backup');?></p>
+    <div class="col-md-3"> 
+      <button type="button" class="btn btn-default" onclick="markAllSelected()"> 
+        <i class="fa-solid fa-circle-check"></i>  <?= lang('Gen_Add_All');?>
+      </button>
+      <button type="button" class="btn btn-default"  onclick="markAllNotSelected()"> 
+        <i class="fa-solid fa-circle-xmark"></i>  <?= lang('Gen_Remove_All');?>
+      </button>
     </div>
+
+
   </div>
 
 
-
-
 <div class="col-md-12">
     <div class="box box-default">
 
@@ -65,7 +71,9 @@
   // Get plugin and settings data from API endpoints
   function getData(){
 
-    $.get('api/table_settings.json?nocache=' + Date.now(), function(res) {    
+    // some race condition, need to implement delay
+    setTimeout(() => {
+      $.get('api/table_settings.json?nocache=' + Date.now(), function(res) {    
         
         settingsData = res["data"];
 
@@ -92,34 +100,56 @@
                 // Append form groups to the column
                 for (let j = i * elementsPerColumn; j < Math.min((i + 1) * elementsPerColumn, columns.length); j++) {
 
-                  let inputType;
+                  const setTypeObject  = JSON.parse(columns[j].Type.replace(/'/g, '"'));         
 
-                  switch (columns[j].Type) {
-                    case 'integer.checkbox':
-                    case 'checkbox':
-                      inputType = 'checkbox';
-                      break;
-                    case 'text.select':
-                      inputType = 'text.select';
-                      break;
-                    default:
-                      inputType = 'text';
-                      break;
-                  }                    
-                  
-                  if (inputType === 'text.select') {
+                  // get the element with the input value(s)
+                  let elements = setTypeObject.elements.filter(element => element.elementHasInputValue === 1);
 
-                    targetLocation = columns[j].Code_Name + "_initSettingDropdown"
+                  //  if none found, take last
+                  if(elements.length == 0)
+                  {
+                    elementWithInputValue = setTypeObject.elements[setTypeObject.elements.length - 1]
+                  } else
+                  {
+                    elementWithInputValue = elements[0]
+                  }
 
-                    initSettingDropdown(columns[j].Code_Name, [], targetLocation, generateDropdownOptions)
+                  const { elementType, elementOptions = [], transformers = [] } = elementWithInputValue;
+                  const { 
+                    inputType,
+                    readOnly,
+                    isMultiSelect,
+                    isOrdeable,
+                    cssClasses,
+                    placeholder,
+                    suffix,
+                    sourceIds,
+                    separator,
+                    editable,
+                    valRes,
+                    getStringKey,
+                    onClick,
+                    onChange,
+                    customParams,
+                    customId
+                  } = handleElementOptions('none', elementOptions, transformers, val = "");
 
-                    //  Handle Icons as tehy need a preview                 
+                  //  render based on element type 
+                  if (elementType === 'select') {
+
+                    targetLocation = columns[j].Code_Name + "_generateSetOptions"
+
+                    generateOptionsOrSetOptions(columns[j].Code_Name, [], targetLocation, generateOptions)
+
+                    console.log(columns[j].Code_Name)
+                    //  Handle Icons as they need a preview                 
                     if(columns[j].Code_Name == 'NEWDEV_dev_Icon')
                     {
                       input = `
-                            <span class="input-group-addon" id="txtIconFA"></span>
+                            <span class="input-group-addon iconPreview" my-customid="NEWDEV_dev_Icon_preview"></span>
                             <select  class="form-control"
-                                      onChange="updateIconPreview('#NEWDEV_dev_Icon')"
+                                      onChange="updateIconPreview(this)"
+                                      my-customparams="NEWDEV_dev_Icon,NEWDEV_dev_Icon_preview"
                                       id="${columns[j].Code_Name}"
                                       data-my-column="${columns[j].Code_Name}" 
                                       data-my-targetColumns="${columns[j].Code_Name.replace('NEWDEV_','')}" >
@@ -137,18 +167,15 @@
                     }
 
 
-                  } else { 
+                  } else if (elementType === 'input'){ 
                     
                     // Add classes specifically for checkboxes
-                    if (inputType === 'checkbox') {
-                      inputClass = 'checkbox';
-                  
-                    } else {
-                      inputClass = 'form-control';
-                    }
+                    inputType === 'checkbox' ?  inputClass = 'checkbox' : inputClass = 'form-control';
+                    
 
                     input =  `<input  class="${inputClass}" 
                                       id="${columns[j].Code_Name}"  
+                                      my-customid="${columns[j].Code_Name}"  
                                       data-my-column="${columns[j].Code_Name}" 
                                       data-my-targetColumns="${columns[j].Code_Name.replace('NEWDEV_','')}" 
                                       type="${inputType}">`
@@ -181,6 +208,9 @@
 
         
     })
+      
+    }, 500);
+    
   }
 
 
@@ -190,6 +220,39 @@
     return $('.deviceSelector select').val().join(',');
   }
 
+  // -----------------------------------------------------------------------------
+  // Select All
+  function markAllSelected() {
+    // Get the <select> element with the class 'deviceSelector'
+    var selectElement = $('.deviceSelector select');
+    
+    // Iterate over each option within the select element
+    selectElement.find('option').each(function() {
+      // Mark each option as selected
+      $(this).prop('selected', true);
+    });
+
+    // Trigger the 'change' event to notify Bootstrap Select of the changes
+    selectElement.trigger('change');
+  }
+
+  // -----------------------------------------------------------------------------
+  // UN-Select All
+  function markAllNotSelected() {
+    // Get the <select> element with the class 'deviceSelector'
+    var selectElement = $('.deviceSelector select');
+    
+    // Iterate over each option within the select element
+    selectElement.find('option').each(function() {
+      // Unselect each option
+      $(this).prop('selected', false);
+    });
+    
+    // Trigger the 'change' event to notify Bootstrap Select of the changes
+    selectElement.trigger('change');
+  }
+
+
 
   // -----------------------------------------------------------------------------
   // Update specified field over the specified DB column and selected entry(ies)
@@ -210,7 +273,7 @@
         columnValue = inputElement.is(':checked') ? 1 : 0;
     } else {
         // For other input types (like textboxes), simply retrieve their values
-        columnValue = inputElement.val();
+        columnValue = encodeURIComponent(inputElement.val());
     }
 
     var targetColumns = inputElement.attr('data-my-targetColumns');
@@ -242,7 +305,9 @@ function executeAction(action, whereColumnName, key, targetColumns, newTargetCol
             window.onbeforeunload = null;
 
             // update API endpoints to refresh the UI
-            updateApi()
+            updateApi("devices,appevents")
+
+            write_notification(`[Multi edit] Executed "${action}" on Columns "${targetColumns}" matching "${key}"`, 'info')
 
         } else {
             showMessage(getString('Gen_LockedDB'));
@@ -267,9 +332,9 @@ function askDeleteSelectedDevices () {
 // Delete selected devices 
 function deleteSelectedDevices()
 { 
-  
-  executeAction('delete', 'dev_MAC', selectorMacs() )
-
+  macs_tmp = selectorMacs()
+  executeAction('delete', 'dev_MAC', macs_tmp )
+  write_notification('[Multi edit] Manually deleted devices with MACs:' + macs_tmp, 'info')
 }
 
 
@@ -279,8 +344,7 @@ getData();
 </script>
 
 <!-- ----------------------------------------------------------------------- -->
-<script src="js/ui_components.js"></script>
-<script src="js/db_methods.js"></script>
+
 <!-- ----------------------------------------------------------------------- -->
 
 

front/network.php

@@ -7,6 +7,7 @@
   define('badge_offline', '<div class="badge bg-red text-white" style="width: 60px;">Offline</div>');
   define('circle_online', '<div class="badge bg-green text-white" style="width: 10px; height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>');
   define('circle_offline', '<div class="badge bg-red text-white" style="width: 10px;  height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>'); 
+  define('sortable_column', ' <span class="sort-btn" onclick="sortColumn(this)"><i class="fa-solid fa-arrow-up-short-wide"></i></span>'); 
   
 ?>
 
@@ -49,10 +50,10 @@
 
         $decoded_icon = base64_decode($icon);
         $idFromMac = str_replace(":", "_", $node_mac);
-        $str_tab_header = '<li class="'.$activetab.'">
+        $str_tab_header = '<li class="networkNodeTabHeaders '.$activetab.' " >
                               
-                              <a href="#'.$idFromMac.'" data-mytabmac="'.$node_mac.'" id="'.$idFromMac.'_id" data-toggle="tab" >' // _id is added so it doesn't conflict with AdminLTE tab behavior
-                                .'<div class="icon">'.$decoded_icon.' </div>'.$node_name.' ' .$str_port.$node_badge.
+                              <a href="#'.$idFromMac.'" data-mytabmac="'.$node_mac.'" id="'.$idFromMac.'_id" data-toggle="tab" title="'.$node_name.' ">' // _id is added so it doesn't conflict with AdminLTE tab behavior
+                                .'<div class="icon">'.$decoded_icon.' </div> <span class="node-name">'.$node_name.'</span>' .$str_port.$node_badge.
                               '</a>
                           </li>';
 
@@ -140,13 +141,18 @@
                              ';
 
         $str_table =      '   <table class="table table-striped">
+                                <thead>
+                                  <tr>
+                                    <th  class="col-sm-1" >Port</th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_State').'</th>
+                                    <th  class="col-sm-2" >'.lang('Network_Table_Hostname').sortable_column.'</th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_IP').sortable_column.'</th>
+                                    <th  class="col-sm-3" >'.lang('Network_ManageLeaf').'</th>
+                                  </tr>
+                                </thead>
                                 <tbody>
                                 <tr>
-                                  <th class="col-sm-1" >Port</th>
-                                  <th class="col-sm-1" >'.lang('Network_Table_State').'</th>
-                                  <th class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
-                                  <th class="col-sm-1" >'.lang('Network_Table_IP').'</th>
-                                  <th class="col-sm-3" >'.lang('Network_ManageLeaf').'</th>
+
                                 </tr>';
         
         // Prepare Array for Devices with Port value
@@ -353,12 +359,17 @@
   <?php   
 
     // Get all Unassigned / unconnected nodes 
-    $func_sql = 'SELECT dev_MAC as mac,  
-                        dev_PresentLastScan as online, 
-                        dev_Name as name,                        
-                        dev_LastIP as last_ip,
-                        dev_Network_Node_MAC_ADDR
-                    FROM Devices WHERE (dev_Network_Node_MAC_ADDR is null or dev_Network_Node_MAC_ADDR = "" or dev_Network_Node_MAC_ADDR = " " or dev_Network_Node_MAC_ADDR = "undefined") and dev_MAC not like "%internet%" order by name asc'; 
+    $func_sql = 'SELECT 
+                  dev_MAC AS mac,
+                  dev_PresentLastScan AS online,
+                  dev_Name AS name,
+                  dev_LastIP AS last_ip,
+                  dev_Network_Node_MAC_ADDR
+                FROM Devices
+                WHERE dev_Network_Node_MAC_ADDR IS NULL 
+                  OR dev_Network_Node_MAC_ADDR IN ("", " ", "undefined", "null")
+                  AND dev_MAC NOT LIKE "%internet%"
+                ORDER BY name ASC;'; 
 
     global $db;
     $func_result = $db->query($func_sql);  
@@ -383,13 +394,18 @@
                                 <i class="fa fa-laptop"></i> '.lang('Network_UnassignedDevices').'
                               </h3>
                               <table class="table table-striped">
+                                <thead>
+                                  <tr>
+                                    <th  class="col-sm-1" ></th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_State').'</th>
+                                    <th  class="col-sm-2" >'.lang('Network_Table_Hostname').sortable_column.'</th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_IP').sortable_column.'</th>
+                                    <th  class="col-sm-3" >'.lang('Network_Assign').'</th>
+                                  </tr>
+                                </thead>
                                 <tbody>
                                 <tr>                              
-                                  <th  class="col-sm-1" ></th>
-                                  <th  class="col-sm-1" >'.lang('Network_Table_State').'</th>
-                                  <th  class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
-                                  <th  class="col-sm-1" >'.lang('Network_Table_IP').'</th>
-                                  <th  class="col-sm-3" >'.lang('Network_Assign').'</th>
+
                                 </tr>';   
 
       $str_table_rows = "";        
@@ -453,7 +469,7 @@
 <script src="lib/treeviz/require.js"></script>
 
 
-<script>
+<script defer>
   $.get('php/server/devices.php?action=getDevicesList&status=all&forceDefaultOrder', function(data) {     
 
     rawData = JSON.parse (data)      
@@ -517,8 +533,10 @@
     for(var i in list)
     {
       //... of the current node
-      if(list[i].parentMac == node.mac && !hiddenMacs.includes(list[i].parentMac))
+      
+      if(list[i].parentMac.toLowerCase() == node.mac.toLowerCase() && !hiddenMacs.includes(list[i].parentMac))
       {   
+
         visibleNodesCount++
 
         // and process them 
@@ -535,7 +553,6 @@
     {
       parentNodesCount++
     }  
-
     
     return { 
       name: node.name,      
@@ -559,7 +576,6 @@
   
   function getHierarchy()
   { 
-
     for(i in deviceListGlobal)
     {      
       if(deviceListGlobal[i].mac == 'Internet')
@@ -604,10 +620,10 @@
   }
 
   // --------------------------------------------------------------------------- 
-  // Handle network node click - select correct tab in teh bottom table
+  // Handle network node click - select correct tab in the bottom table
   function handleNodeClick(event)
   {
-    console.log(event.target.offsetParent.offsetParent)
+    // console.log(event.target.offsetParent.offsetParent)
 
     const targetTabMAC = $(event.target.offsetParent.offsetParent).attr("data-mytreemacmain");    
 
@@ -619,14 +635,24 @@
 
   // --------------------------------------------------------------------------- 
   var myTree;
-  var visibleTreeArea = $(window).height()-135;
-  var treeAreaHeight = visibleTreeArea > 800 ? 800 : visibleTreeArea;
+  var visibleTreeArea = $(window).height()-155;
+  var nodeWidth = 160;
   var emSize;
   var nodeHeight;
   var sizeCoefficient = 1
 
   function initTree(myHierarchy)
   {
+    console.log(myHierarchy)
+
+    // calculate the drawing area based on teh tree width and available screen size
+    var treeAreaHeight = visibleTreeArea > 800 ? 800 : visibleTreeArea;
+    let screenWidth = $('.content-header').width();
+    let treeWidth = (nodeWidth + 20) *  parentNodesCount;
+    let treeAreaWidth  =  screenWidth < treeWidth ? treeWidth : screenWidth;
+
+    // init the drawing area size
+    $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${treeAreaWidth}px`)
 
     if(myHierarchy.type == "")
     {
@@ -643,7 +669,7 @@
     // nodeHeight = ((emSize*100*0.30).toFixed(0))
     nodeHeight = ((emSize*100*0.30).toFixed(0))
 
-    $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${$('.content-header').width()}px`)
+    console.log(Treeviz);
 
     myTree = Treeviz.create({
       htmlId: "networkTree",
@@ -652,7 +678,9 @@
 
         (!emptyArr.includes(nodeData.data.port )) ? port =  nodeData.data.port : port = "";
 
-        (port == "" || port == 0 ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
+        (port == "" || port == 0 || port == 'None' ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
+
+        portHtml = (port == "" || port == 0 || port == 'None' ) ? "" : port
 
         // Build HTML for individual nodes in the network diagram        
         deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ?  
@@ -661,7 +689,7 @@
                   </div>` : "";
         devicePort = `<div  class="netPort" 
                             style="width:${emSize*sizeCoefficient}em;height:${emSize*sizeCoefficient}em">
-                        ${port}</div> 
+                        ${portHtml}</div> 
                       <div  class="portBckgIcon" 
                             style="margin-left:-${emSize*sizeCoefficient}em;">
                             ${portBckgIcon}
@@ -692,7 +720,7 @@
                           >
                             <div class="netNodeText">
                               <strong>${devicePort}  ${deviceIcon}
-                                <span class="spanNetworkTree anonymizeDev">${nodeData.data.name}</span>
+                                <span class="spanNetworkTree anonymizeDev" >${nodeData.data.name}</span>
                               </strong>
                               ${collapseExpandHtml}
                             </div>
@@ -707,8 +735,8 @@
       secondaryAxisNodeSpacing: 0.3,
       nodeHeight: nodeHeight.toString(),
       marginTop: '5',
-      hasZoom: false,
-      hasPan: false,
+      hasZoom: true,
+      hasPan: true,
       // marginLeft: '15',
       idKey: "id",
       hasFlatData: false,
@@ -717,8 +745,8 @@
       onNodeClick: (nodeData) => handleNodeClick(nodeData),
         relationnalField: "children",
       });
+      
 
-      console.log(myHierarchy)
 
       myTree.refresh(myHierarchy);
 
@@ -755,7 +783,7 @@
       setCache(key, target.replaceAll(":","_")+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior
     }
 
-    // get the tab id from the cookie (already overriden by the target)
+    // get the tab id from the cookie (already overridden by the target)
     if(!emptyArr.includes(getCache(key)))
     {
       selectedTab = getCache(key);
@@ -852,7 +880,6 @@
   // init Assign/Unassign buttons
   initButtons()
 
-
 </script>
 
 

front/php/components/logs.php

@@ -0,0 +1,98 @@
+<?php
+
+require '../server/init.php';
+
+//------------------------------------------------------------------------------
+// check if authenticated
+require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
+
+// Function to render the log area component
+function renderLogArea($params) {
+    $fileName = isset($params['fileName']) ? $params['fileName'] : '';
+    $filePath = isset($params['filePath']) ? $params['filePath'] : '';
+    $textAreaCssClass = isset($params['textAreaCssClass']) ? $params['textAreaCssClass'] : '';
+    $buttons = isset($params['buttons']) ? $params['buttons'] : [];
+    $content = "";
+
+    if (filesize($filePath) > 2000000) {
+        $content = file_get_contents($filePath, false, null, -2000000);
+    } else {
+        $content = file_get_contents($filePath);
+    }
+
+    // Prepare the download button HTML if filePath starts with /app/front
+    $downloadButtonHtml = '';
+    if (strpos($filePath, '/app/front') === 0) {
+        $downloadButtonHtml = '
+            <span class="span-padding">
+                <a href="' . htmlspecialchars(str_replace('/app/front', '', $filePath)) . '" target="_blank">
+                    <i class="fa fa-download"></i>
+                </a>
+            </span>';
+    }
+
+    // Prepare buttons HTML
+    $buttonsHtml = '';
+    $totalButtons = count($buttons);
+    if ($totalButtons > 0) {
+        $colClass = 12 / $totalButtons;
+        // Use $colClass in your HTML generation or further logic
+    } else {
+        // Handle case where $buttons array is empty
+        $colClass = 12;
+    }
+
+    foreach ($buttons as $button) {
+        $labelStringCode = isset($button['labelStringCode']) ? $button['labelStringCode'] : '';
+        $event = isset($button['event']) ? $button['event'] : '';
+
+        $buttonsHtml .= '
+            <div class="button-wrap col-sm-' . $colClass . ' col-xs-' . $colClass . '">
+                <button class="btn btn-primary col-sm-12 col-xs-12" onclick="' . htmlspecialchars($event) . '">' . lang($labelStringCode) . '</button>
+            </div>';
+    }
+
+
+    // Render the log area HTML
+    $html = '
+        <div class="log-area box box-solid box-primary">
+            <div class="row logs-row col-sm-12 col-xs-12">
+                <textarea class="' . htmlspecialchars($textAreaCssClass) . '" cols="70" rows="20" wrap="off" readonly>'
+                    . htmlspecialchars($content) .
+                '</textarea>
+            </div>
+            <div class="row logs-row">
+                <div class="log-file col-sm-6 col-xs-12">' . htmlspecialchars($fileName) . '
+                    <div class="logs-size">' . number_format((filesize($filePath) / 1000000), 2, ",", ".") . ' MB'
+                    . $downloadButtonHtml .
+                    '</div>
+                </div>
+                <div class="col-sm-6 col-xs-12">'
+                    . $buttonsHtml .
+                '</div>
+            </div>
+        </div>';
+
+    return $html;
+}
+
+// Load default data from JSON file
+$defaultDataFile = 'logs_defaults.json';
+$defaultData = file_exists($defaultDataFile) ? json_decode(file_get_contents($defaultDataFile), true) : [];
+
+// Check if JSON data is submitted via POST
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['items'])) {
+    $items = json_decode($_POST['items'], true);
+} else {
+    $items = $defaultData;
+}
+
+// Render the log areas with the retrieved or default data
+$html = '';
+foreach ($items as $item) {
+    $html .= renderLogArea($item);
+}
+
+echo $html;
+exit();
+?>

front/php/components/logs_defaults.json

@@ -0,0 +1,98 @@
+[
+    {
+        "buttons": [
+            {
+                "labelStringCode": "Maint_PurgeLog",
+                "event": "logManage('app.log', 'cleanLog')"
+            },
+            {
+                "labelStringCode": "Maint_RestartServer",
+                "event": "askRestartBackend()"
+            }
+        ],
+        "fileName": "app.log",
+        "filePath": "/app/front/log/app.log",
+        "textAreaCssClass": "logs"
+
+    },
+    {
+        "buttons": [
+            {
+                "labelStringCode": "Maint_PurgeLog",
+                "event": "logManage('app_front.log', 'cleanLog')"
+            }
+        ],
+        "fileName": "app_front.log",
+        "filePath": "/app/front/log/app_front.log",
+        "textAreaCssClass": "logs logs-small"
+    },
+    {
+        "buttons": [
+            {
+                "labelStringCode": "Maint_PurgeLog",
+                "event": "logManage('app.php_errors.log', 'cleanLog')"
+            }
+        ],
+        "fileName": "app.php_errors.log",
+        "filePath": "/app/front/log/app.php_errors.log",
+        "textAreaCssClass": "logs logs-small"
+    },
+    {
+        "buttons": [
+            {
+                "labelStringCode": "Maint_PurgeLog",
+                "event": "logManage('execution_queue.log', 'cleanLog')"
+            }
+        ],
+        "fileName": "execution_queue.log",
+        "filePath": "/app/front/log/execution_queue.log",
+        "textAreaCssClass": "logs logs-small"
+    },
+    {
+        "buttons": [
+        ],
+        "fileName": "nginx/error.log",
+        "filePath": "/var/log/nginx/error.log",
+        "textAreaCssClass": "logs logs-small"
+    },
+    {
+        "buttons": [
+            {
+                "labelStringCode": "Maint_PurgeLog",
+                "event": "logManage('app_front.log', 'cleanLog')"
+            }
+        ],
+        "fileName": "app_front.log",
+        "filePath": "/app/front/log/app_front.log",
+        "textAreaCssClass": "logs logs-small"
+    },
+    {
+        "buttons": [
+        ],
+        "fileName": "db_is_locked.log",
+        "filePath": "/app/front/log/db_is_locked.log",
+        "textAreaCssClass": "logs logs-small"
+    },
+    {
+        "buttons": [
+            {
+                "labelStringCode": "Maint_PurgeLog",
+                "event": "logManage('stdout.log', 'cleanLog')"
+            }
+        ],
+        "fileName": "stdout.log",
+        "filePath": "/app/front/log/stdout.log",
+        "textAreaCssClass": "logs logs-small"
+    },
+    {
+        "buttons": [
+            {
+                "labelStringCode": "Maint_PurgeLog",
+                "event": "logManage('stderr.log', 'cleanLog')"
+            }
+        ],
+        "fileName": "stderr.log",
+        "filePath": "/app/front/log/stderr.log",
+        "textAreaCssClass": "logs logs-small"
+    }
+]