New screenshots

Use path context so dockerignore is respected

.dockerignore

@@ -0,0 +1,13 @@
+.dockerignore
+.env
+.git
+.github
+.gitignore
+docker-compose.yml
+Dockerfile
+dockerfiles/LICENSE
+dockerfiles/README.md
+docs
+LICENSE.txt
+README.md
+CONTRIBUTING

.env

@@ -0,0 +1,16 @@
+#GLOBAL PATH VARIABLES
+
+APP_DATA_LOCATION=/path/to/docker_appdata
+APP_CONFIG_LOCATION=/path/to/docker_config
+LOGS_LOCATION=/path/to/docker_logs
+
+#ENVIRONMENT VARIABLES
+
+TZ=Europe/Paris
+HOST_USER_ID=1000
+HOST_USER_GID=1000
+PORT=20211
+
+#DEVELOPMENT VARIABLES
+
+DEV_LOCATION=/path/to/local/source/code

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

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

@@ -0,0 +1,46 @@
+---
+name: I have an issue
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the issue**
+
+
+**Paste last few lines from `pialert.log`**
+
+```
+
+paste here
+
+```
+
+**Paste your `pialert.conf` (remove personal info)**
+
+```
+
+paste here
+
+```
+
+**Paste your `docker-compose.yml` and `.env` (remove personal info)**
+
+`docker-compose.yml` 
+```
+
+paste here
+
+```
+
+
+`.env` 
+```
+
+paste here
+
+```
+**Screenshots**
+If applicable, add screenshots to help explain your problem.

.github/workflows/docker_dev.yml

@@ -0,0 +1,64 @@
+---
+name: docker
+
+on:
+  push:
+    branches:
+      - '**'
+    tags:
+      - '*.*.*'
+  pull_request:
+    branches:
+      - master
+
+jobs: 
+  docker_dev:
+    runs-on: ubuntu-latest
+    if: contains(github.event.head_commit.message, 'PUSHPROD') != 'True'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Set up dynamic build ARGs
+        id: getargs       
+        run: echo "version=$(cat ./stable/VERSION)" >> $GITHUB_OUTPUT
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          # list of Docker images to use as base name for tags
+          images: |
+            jokobsk/pi.alert_dev
+          # generate Docker tags based on the following events/attributes
+          tags: |
+            type=raw,value=latest
+            type=schedule
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha
+
+      - name: Login to DockerHub
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/docker_prod.yml

@@ -0,0 +1,64 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning.
+
+name: Publish Docker image
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Set up dynamic build ARGs
+        id: getargs        
+        run: echo "version=$(cat ./stable/VERSION)" >> $GITHUB_OUTPUT
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          # list of Docker images to use as base name for tags
+          images: |
+            jokobsk/pi.alert
+          # generate Docker tags based on the following events/attributes
+          tags: |
+            type=raw,value=latest
+            type=schedule
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha
+      - name: Login to DockerHub
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+config/pialert.conf
+db/*
+front/log/*

CONTRIBUTING

@@ -0,0 +1,14 @@
+# Contributing to this project
+
+## Issues, bugs, feature requests
+
+The issue tracker is the preferred channel for bug reports, features requests and submitting pull requests.
+
+Before submitting a new issue please spend a couple of minutes on research:
+
+* Check [🛑 Common issues](https://github.com/jokob-sk/Pi.Alert/tree/main/dockerfiles#-common-issues) 
+* Check [💡 Closed issues](https://github.com/jokob-sk/Pi.Alert/issues?q=is%3Aissue+is%3Aclosed) if a similar issue was solved in the past.
+
+## Pull-requests (PRs)
+
+If you submit a PR please do check that your changes are backward compatible with existing installations. Existing features should be always preserved.

Dockerfile

@@ -0,0 +1,48 @@
+FROM debian:bullseye-slim
+
+# default UID and GID
+ENV USER=pi USER_ID=1000 USER_GID=1000 TZ=Europe/London PORT=20211
+
+# Todo, figure out why using a workdir instead of full paths don't work
+# Todo, do we still need all these packages? I can already see sudo which isn't needed
+
+RUN apt-get update \
+    && apt-get install --no-install-recommends tini 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 -y \
+    && pip3 install requests paho-mqtt scapy cron-converter pytz \    
+    && update-alternatives --install /usr/bin/python python /usr/bin/python3 10 \
+    && apt-get clean autoclean \
+    && apt-get autoremove \
+    && rm -rf /var/lib/apt/lists/* \
+    && rm -rf /var/www/html \
+    && ln -s /home/pi/pialert/front /var/www/html 
+
+# create pi user and group
+# add root and www-data to pi group so they can r/w files and db
+RUN groupadd --gid "${USER_GID}" "${USER}" && \
+    useradd \
+        --uid ${USER_ID} \
+        --gid ${USER_GID} \
+        --create-home \
+        --shell /bin/bash \
+        ${USER} && \
+    usermod -a -G ${USER_GID} root && \
+    usermod -a -G ${USER_GID} www-data
+
+COPY --chmod=775 --chown=${USER_ID}:${USER_GID} . /home/pi/pialert/
+
+# Pi.Alert
+RUN rm /etc/nginx/sites-available/default \
+    && ln -s /home/pi/pialert/install/default /etc/nginx/sites-available/default \
+    && sed -ie 's/listen 80/listen '${PORT}'/g' /etc/nginx/sites-available/default \
+    # run the hardware vendors update
+    && /home/pi/pialert/back/update_vendors.sh \
+    # Create a backup of the pialert.conf to be used if the user didn't supply a configuration file
+    && cp /home/pi/pialert/config/pialert.conf /home/pi/pialert/back/pialert.conf_bak \
+    # Create a backup of the pialert.db to be used if the user didn't supply a database
+    && cp /home/pi/pialert/db/pialert.db /home/pi/pialert/back/pialert.db_bak \
+    # Create a buildtimestamp.txt to later check if a new version was released
+    && date +%s > /home/pi/pialert/front/buildtimestamp.txt
+
+ENTRYPOINT ["tini", "--"]
+
+CMD ["/home/pi/pialert/dockerfiles/start.sh"]

FUNDING.yml

@@ -0,0 +1,2 @@
+github: jokob-sk
+patreon: 84385063

README.md

@@ -1,27 +1,24 @@
 # Pi.Alert
 <!--- --------------------------------------------------------------------- --->
 
-WIFI / LAN intruder detector.
+💻🔍 WIFI / LAN intruder detector.
 
-Scan the devices connected to your WIFI / LAN and alert you the connection of
-unknown devices. It also warns the disconnection of "always connected" devices.
+Scans for devices connected to your WIFI / LAN and alerts you if new and unknown devices are found.
 
 ![Main screen][main]
 
-*(Apologies for my English and my limited knowledge of Python, php and
-JavaScript)*
 
-## How it works
-The system continuously scans the network for:
-  - New devices
-  - New connections (re-connections)
-  - Disconnections
-  - "Always Connected" devices down
-  - Devices IP changes
-  - Internet IP address changes
+# 🐳 Docker image 
+[![Docker](https://img.shields.io/github/actions/workflow/status/jokob-sk/Pi.Alert/docker_prod.yml?label=Build&logo=GitHub)](https://github.com/jokob-sk/Pi.Alert/actions/workflows/docker_prod.yml)
+[![GitHub Committed](https://img.shields.io/github/last-commit/jokob-sk/Pi.Alert?color=40ba12&label=Committed&logo=GitHub&logoColor=fff)](https://github.com/jokob-sk/Pi.Alert)
+[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/pi.alert?label=Size&logo=Docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/pi.alert)
+[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/pi.alert?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/pi.alert)
+[![Docker Pushed](https://img.shields.io/badge/dynamic/json?color=0aa8d2&logoColor=fff&label=Pushed&query=last_updated&url=https%3A%2F%2Fhub.docker.com%2Fv2%2Frepositories%2Fjokobsk%2Fpi.alert%2F&logo=docker&link=http://left&link=https://hub.docker.com/repository/docker/jokobsk/pi.alert)](https://hub.docker.com/r/jokobsk/pi.alert)
 
-## Scan Methods
-Up to three scanning methods are used:
+🐳 [Docker hub](https://registry.hub.docker.com/r/jokobsk/pi.alert) | 📄 [Dockerfile](https://github.com/jokob-sk/Pi.Alert/blob/main/Dockerfile) | 📚 [Docker instructions](https://github.com/jokob-sk/Pi.Alert/blob/main//dockerfiles/README.md) | 🆕 [Release notes](https://github.com/jokob-sk/Pi.Alert/releases)
+
+## 🔍 Scan Methods
+The system continuously scans the network for, **New devices**, **New connections** (re-connections), **Disconnections**, **"Always Connected" devices down**, Devices **IP changes** and **Internet IP address changes**. Scanning methods are:
   - **Method 1: arp-scan**. The arp-scan system utility is used to search
         for devices on the network using arp frames.
   - **Method 2: Pi-hole**. This method is optional and complementary to
@@ -33,84 +30,91 @@ Up to three scanning methods are used:
         examines the DHCP leases (addresses assigned) to find active devices
         that were not discovered by the other methods.
 
-## Components
-The system consists of two parts:
 
-- **Back**, in charge of:
-  - Scan the network searching connected devices using the scanning methods
-        described
-  - Store the information in the DB
-  - Report the changes detected by e-mail
+## 🧩 Notification Integrations 
+   - [Apprise](https://hub.docker.com/r/caronc/apprise), [Pushsafer](https://www.pushsafer.com/), [NTFY](https://ntfy.sh/)
+   - [Webhooks](https://github.com/jokob-sk/Pi.Alert/blob/main/docs/WEBHOOK_N8N.md) ([sample JSON](docs/webhook_json_sample.json))
+   - Home Assistant via [MQTT](https://www.home-assistant.io/integrations/mqtt/) 
+     - discovery ~10s per device, deleting not supported, use [MQTT Explorer](https://mqtt-explorer.com/) for now
 
-  | ![Report 1][report1] | ![Report 2][report2] |
-  | -------------------- | -------------------- |
 
-- **Front**, a web frontal that allows:
-  - Manage the devices inventory and the characteristics
-  - Display in a visual way all the information collected by the back
-    - Sessions
-    - Connected devices
-    - Favorites
-    - Events
-    - Presence
-    - Concurrent devices
-    - Down alerts
-    - IP's
-    - ...
+## 🔐 Security
 
-  | ![Screen 1][screen1] | ![Screen 2][screen2] |
-  | -------------------- | -------------------- |
+- Configurable login to prevent unauthorized use. 
+
+## 📑 Features   
+  - Display:
+    - Sessions, Connected devices, Favorites, Events, Presence, Concurrent devices, Down alerts, IP's
+    - Manual Nmap scans, Optional speedtest for Device "Internet"
+    - Simple Network relationship display
+  - Maintenance tasks and Settings like:
+    - Status Infos (active scans, database size, backup counter)
+    - Theme Selection (blue, red, green, yellow, black, purple) and Light/Dark-Mode Switch
+    - Language Selection (English, German, Spanish)    
+    - Pause arp-scan
+    - DB maintenance, Backup, Restore tools and CSV Export / Import
+  - Help/FAQ Section 
+
+  | ![Screen 1][screen1] | ![Screen 2][screen2] | 
+  |----------------------|----------------------| 
   | ![Screen 3][screen3] | ![Screen 4][screen4] |
+  | ![Screen 5][screen5] | ![Screen 6][screen6] |
+  | ![Report 1][report1] | ![Report 2][report2] |
+ 
 
-
-# Installation
+# 📥 Installation
 <!--- --------------------------------------------------------------------- --->
-Initially designed to run on a Raspberry PI, probably it can run on many other
-Linux distributions.
 
-  - [Installation instructions](docs/INSTALL.md)
+ ⚠ This [fork (jokob-sk)](https://github.com/jokob-sk/Pi.Alert) is only tested as a [docker container](dockerfiles/README.md). Check out [leiweibau's fork](https://github.com/leiweibau/Pi.Alert/) if you want to install Pi.Alert on the server directly.
+
+Instructions for [pucherot's original code can be found here](https://github.com/pucherot/Pi.Alert/)
+
+
+## 🔗 Other
 
 
-## Device Management
 <!--- --------------------------------------------------------------------- --->
 
+<!--- --------------------------------------------------------------------- --->
+### Alternatives
+
+  - [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)
+
+### Old docs
+
   - [Device Management instructions](docs/DEVICE_MANAGEMENT.md)
-
-
-## Other useful info
-<!--- --------------------------------------------------------------------- --->
-
-### Powered by:
-  | Product      | Objetive                               |
-  | ------------ | -------------------------------------- |
-  | Python       | Programming language for the Back      |
-  | PHP          | Programming language for the Front-end |
-  | JavaScript   | Programming language for the Front-end |
-  | Bootstrap    | Front-end framework                    |
-  | Admin.LTE    | Bootstrap template                     |
-  | FullCalendar | Calendar component                     |
-  | Sqlite       | DB engine                              |
-  | Lighttpd     | Webserver                              |
-  | arp-scan     | Scan network using arp commands        |
-  | Pi.hole      | DNS Server with Ad-block               |
-  | dnsmasq      | DHCP Server                            |
+  - [Versions History](docs/VERSIONS_HISTORY.md)
 
 ### License
   GPL 3.0
-  [Read more here](docs/LICENSE.txt)
-
-### Contact
-  pi.alert.application@gmail.com
+  - [Read more here](LICENSE.txt)
+  - Source of the [animated GIF (Loading Animation)](https://commons.wikimedia.org/wiki/File:Loading_Animation.gif)  
+  - Source of the [selfhosted Fonts](https://github.com/adobe-fonts/source-sans)
   
-  ***Suggestions and comments are welcome***
+### 🥇 Special thanks 
 
+  This code is a collaborative body of work, with special thanks to: 
+
+   - 🏆 [pucherot/Pi.Alert](https://github.com/pucherot/Pi.Alert) is the original creator od 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 translation
+      - [jokob-sk](https://github.com/jokob-sk/Pi.Alert): DB Maintenance tools
+      - Please see the [Git commit history](https://github.com/jokob-sk/Pi.Alert/commits/main) for a full list of people and their contributions to the project
 
 <!--- --------------------------------------------------------------------- --->
-[main]:    ./docs/img/1_devices.jpg           "Main screen"
-[screen1]: ./docs/img/2_1_device_details.jpg  "Screen 1"
-[screen2]: ./docs/img/2_2_device_sessions.jpg "Screen 2"
-[screen3]: ./docs/img/2_3_device_presence.jpg "Screen 3"
-[screen4]: ./docs/img/3_presence.jpg          "Screen 4"
+[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 6"
 [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"
 

back/pialert-cli

@@ -0,0 +1,141 @@
+#!/bin/bash
+SCRIPT=$(readlink -f $0)
+SCRIPTPATH=`dirname $SCRIPT`
+PIA_CONF_FILE=${SCRIPTPATH}'/../config/pialert.conf'
+
+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 PIALERT_WEB_PROTECTION 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 PIALERT_WEB_PROTECTION 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 PIALERT_WEB_PROTECTION 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 PIALERT_WEB_PROTECTION parameter does not exist yet, it will be"
+    echo "                            created and set to 'True' (login enabled)"
+    echo ""
+    echo " disable_scan             - Stops all active scans"
+    echo "                          - Prevents new scans from starting"
+    echo ""
+    echo " enable_scan              - Stops all active scans"
+    echo "                          - Prevents new scans from starting"
+    echo ""
+    echo ""
+    ;;
+
+  set_login)
+    ## Check if PIALERT_WEB_PROTECTION exists
+    CHECK_PROT=$(grep "PIALERT_WEB_PROTECTION" $PIA_CONF_FILE | wc -l)
+    if [ $CHECK_PROT -eq 0 ]
+    then
+        ## Create PIALERT_WEB_PROTECTION and enable it
+        sed -i "/^VENDORS_DB.*/a PIALERT_WEB_PROTECTION = True" $PIA_CONF_FILE
+        sed -i "/^PIALERT_WEB_PROTECTION.*/a PIALERT_WEB_PASSWORD = '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'" $PIA_CONF_FILE
+    else
+        ## Switch PIALERT_WEB_PROTECTION to enable
+        sed -i "/PIALERT_WEB_PROTECTION/c\PIALERT_WEB_PROTECTION = True" $PIA_CONF_FILE
+    fi
+    echo "Login is now enabled"
+    ;;
+
+  unset_login)
+    ## Check if PIALERT_WEB_PROTECTION exists
+    CHECK_PROT=$(grep "PIALERT_WEB_PROTECTION" $PIA_CONF_FILE | wc -l)
+    if [ $CHECK_PROT -eq 0 ]
+    then
+        ## Create PIALERT_WEB_PROTECTION and disable it
+        sed -i "/^VENDORS_DB.*/a PIALERT_WEB_PROTECTION = False" $PIA_CONF_FILE
+        sed -i "/^PIALERT_WEB_PROTECTION.*/a PIALERT_WEB_PASSWORD = '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'" $PIA_CONF_FILE
+    else
+        ## Switch PIALERT_WEB_PROTECTION to disable
+        sed -i "/PIALERT_WEB_PROTECTION/c\PIALERT_WEB_PROTECTION = False" $PIA_CONF_FILE
+    fi
+    echo "Login is now disabled"
+    ;;
+
+  set_password)
+    PIA_PASS=$2
+    ## Check if PIALERT_WEB_PROTECTION exists
+    CHECK_PROT=$(grep "PIALERT_WEB_PROTECTION" $PIA_CONF_FILE | wc -l)
+    if [ $CHECK_PROT -eq 0 ]
+    then
+        ## Create PIALERT_WEB_PROTECTION and enable it
+        sed -i "/^VENDORS_DB.*/a PIALERT_WEB_PROTECTION = 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 "PIALERT_WEB_PASSWORD" $PIA_CONF_FILE | wc -l)
+    if [ $CHECK_PWD -eq 0 ]
+    then
+        sed -i "/^PIALERT_WEB_PROTECTION.*/a PIALERT_WEB_PASSWORD = '$PIA_PASS_HASH'" $PIA_CONF_FILE
+    else
+        sed -i "/PIALERT_WEB_PASSWORD/c\PIALERT_WEB_PASSWORD = '$PIA_PASS_HASH'" $PIA_CONF_FILE
+    fi
+    echo ""
+    echo "The new password is set"
+    ;;
+
+  set_autopassword)
+    ## Check if PIALERT_WEB_PROTECTION exists
+    CHECK_PROT=$(grep "PIALERT_WEB_PROTECTION" $PIA_CONF_FILE | wc -l)
+    if [ $CHECK_PROT -eq 0 ]
+    then
+        ## Create PIALERT_WEB_PROTECTION and enable it
+        sed -i "/^VENDORS_DB.*/a PIALERT_WEB_PROTECTION = 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 "PIALERT_WEB_PASSWORD" $PIA_CONF_FILE | wc -l)
+    if [ $CHECK_PWD -eq 0 ]
+    then
+        ## Create password parameter
+        sed -i "/^PIALERT_WEB_PROTECTION.*/a PIALERT_WEB_PASSWORD = '$PIA_AUTOPASS_HASH'" $PIA_CONF_FILE
+    else
+        ## Overwrite password parameter
+        sed -i "/PIALERT_WEB_PASSWORD/c\PIALERT_WEB_PASSWORD = '$PIA_AUTOPASS_HASH'" $PIA_CONF_FILE
+    fi
+    echo ""
+    echo "The new password is set"
+    ;;
+
+  disable_scan)
+    ## stop active scans
+    sudo killall arp-scan
+    touch ${SCRIPTPATH}/../db/setting_stoparpscan
+    echo "The arp-scan is disabled"
+    ;;
+
+  enable_scan)
+    ## stop active scans
+    rm ${SCRIPTPATH}/../db/setting_stoparpscan
+    echo "The arp-scan is enabled"
+    ;;
+
+  *)
+    echo "pialert-cli v0.1 (https://github.com/leiweibau/Pi.Alert)"
+    echo "Use \"pialert-cli help\" for a list of supported commands."
+esac
+

back/pialert.conf

@@ -1,31 +0,0 @@
-VERSION           = '2.56'
-VERSION_YEAR      = '2021'
-VERSION_DATE      = '2021-01-15'
-
-DB_PATH           = '/home/pi/pialert/db/pialert.db'
-LOG_PATH          = '/home/pi/pialert/log'
-VENDORS_DB        = '/usr/share/arp-scan/ieee-oui.txt'
-PA_FRONT_URL      = 'http://pi.alert/deviceDetails.php?mac='
-PRINT_LOG         = False
-
-SMTP_SERVER       = 'smtp.gmail.com'
-SMTP_PORT         = 587
-SMTP_USER         = 'user@gmail.com'
-SMTP_PASS         = 'password'
-
-REPORT_MAIL       = False
-REPORT_FROM       = 'Pi.Alert <' + SMTP_USER +'>'
-REPORT_TO         = 'user@gmail.com'
-
-# QUERY_MYIP_SERVER = 'https://diagnostic.opendns.com/myip'
-QUERY_MYIP_SERVER = 'http://ipv4.icanhazip.com'
-DDNS_ACTIVE       = False
-DDNS_DOMAIN       = 'your_domain.freeddns.org'
-DDNS_USER         = 'dynu_user'
-DDNS_PASSWORD     = 'A0000000B0000000C0000000D0000000'
-DDNS_UPDATE_URL   = 'https://api.dynu.com/nic/update?'
-
-PIHOLE_ACTIVE     = False
-PIHOLE_DB         = '/etc/pihole/pihole-FTL.db'
-DHCP_ACTIVE       = False
-DHCP_LEASES       = '/etc/pihole/dhcp.leases'

back/pialert.cron

@@ -1,7 +0,0 @@
-#
-# Pi.Alert cron
-#
-0 3 * * 1      python ~/pialert/back/pialert.py update_vendors >~/pialert/log/pialert.vendors.log  2>&1
-*/1 * * * *    python ~/pialert/back/pialert.py internet_IP    >~/pialert/log/pialert.IP.log       2>&1
-*/5 * * * *    python ~/pialert/back/pialert.py 1              >~/pialert/log/pialert.1.log        2>&1
-*/15 * * * *   python ~/pialert/back/pialert.py 15             >~/pialert/log/pialert.15.log       2>&1

back/report_sample_1.txt

@@ -0,0 +1,50 @@
+Report Date: 2021-12-08 12:30
+Server:      Synology-NAS
+
+New Devices
+----------------------
+Name: 	(name not found)
+	MAC: 	2c:2c:2c:2c:2c:2c
+	IP: 	192.168.1.121
+	Time: 	2021-12-08 12:30
+	More Info: 	Micro-Star INTL CO., LTD.
+
+Name: 	(name not found)
+	MAC: 	2c:2c:2c:2c:2c:2c
+	IP: 	192.168.1.151
+	Time: 	2021-12-08 12:30
+	More Info: 	Espressif Inc.
+
+
+
+Events
+----------------------
+Name: 	Samsung
+	MAC: 	2c:2c:2c:2c:2c:2c
+	IP: 	192.168.1.27
+	Time: 	2021-12-08 12:30
+	Event: 	Connected
+	More Info: 	
+
+Name: 	(name not found)
+	MAC: 	2c:2c:2c:2c:2c:2c
+	IP: 	192.168.1.6
+	Time: 	2021-12-08 12:30
+	Event: 	Disconnected
+	More Info: 	
+
+Name: 	Google-Home-Mini
+	MAC: 	2c:2c:2c:2c:2c:2c
+	IP: 	192.168.1.16
+	Time: 	2021-12-08 12:30
+	Event: 	Disconnected
+	More Info: 	
+
+Name: 	(name not found)
+	MAC: 	2c:2c:2c:2c:2c:2c
+	IP: 	192.168.1.119
+	Time: 	2021-12-08 12:30
+	Event: 	Disconnected
+	More Info: 	
+
+

back/report_sample_2.html

@@ -1,3 +1,12 @@
+<!-- ---------------------------------------------------------------------------
+#  Pi.Alert
+#  Open Source Network Guard / WIFI & LAN intrusion detector 
+#
+#  repot_sample.html - Back module. Sample email reporting in HTML format
+#-------------------------------------------------------------------------------
+#  Puche 2021        pi.alert.application@gmail.com        GNU GPLv3
+#--------------------------------------------------------------------------- -->
+
 <html>
 
 <head>

back/report_template.html

@@ -1,3 +1,12 @@
+<!-- ---------------------------------------------------------------------------
+#  Pi.Alert
+#  Open Source Network Guard / WIFI & LAN intrusion detector 
+#
+#  repot_template.html - Back module. Template to email reporting in HTML format
+#-------------------------------------------------------------------------------
+#  Puche 2021        pi.alert.application@gmail.com        GNU GPLv3
+#--------------------------------------------------------------------------- -->
+
 <html>
 
 <head>
@@ -5,20 +14,17 @@
 
 <body>
     <font face=sans-serif>
-    <table align=center width=80% border=1 bordercolor=#909090 cellpadding=0 cellspacing=0 style="border-collapse: collapse; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.5)">
+    <table align=center width=100% cellpadding=0 cellspacing=0 style="border-radius: 5px;">
         <tr>
-        <td bgcolor=#EFB956  align=center style="padding: 20px 10px 10px 10px; font-size: 36px; font-weight: bold; color:#7F6000; text-shadow: 4px 4px 6px #909090">
+        <td bgcolor=#EFB956  align=center style="padding: 20px 10px 10px 10px; font-size: 30px; font-weight: bold; color:#000000; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)">
             Pi.Alert Report
         </td>
         </tr>
-
+        
         <tr>
         <td>
-            <table width=100% border=0 bgcolor=#FFD966 cellpadding=5px cellspacing=0 style="border-collapse: collapse; font-size: 16px; text-align:center; color:#5F5000">
-            <tr>
-                <td width=33%> Report Date: <b><REPORT_DATE></b> </td>
-                <td width=34%> Scan Cycle: <b><SCAN_CYCLE></b> </td>
-                <td width=33%> Server: <b><SERVER_NAME></b> </td>
+            <table width=100% border=0 bgcolor=#FFD966 cellpadding=5px cellspacing=0 style="border-collapse: collapse; font-size: 15px; text-align:center; color:#404040">            <tr>
+                <td width=100%> Report Date: <b><REPORT_DATE></b> </td>
             </tr>
             </table>
         </td>
@@ -27,10 +33,10 @@
         <tr>
         <td bgcolor=#F5F5F5 height=200 valign=top style="padding: 10px">
             <SECTION_INTERNET>
-            <p style="font-size: 24px; font-weight: bold; color:#C04040; text-shadow: 2px 2px 4px #A0A0A0"> Internet: </p> 
+            <p style="font-size: 24px; font-weight: bold; color:#C04040"> Internet: </p> 
 
-            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)">
-                <tr bgcolor=#909090 style="color:#F0F0F0">
+            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070">
+                <tr bgcolor=#909090 style="color:#f0f0f0">
                     <th width=140> Event Type </th>
                     <th width=130> Datetime </th>
                     <th width=100> IP </th>
@@ -44,11 +50,11 @@
             </SECTION_INTERNET>
 
             <SECTION_NEW_DEVICES>
-            <p style="font-size: 14px; font-weight: bold; color:#C04040; text-shadow: 2px 2px 4px #A0A0A0"> New Devices: </p> 
+            <p style="font-size: 14px; font-weight: bold; color:#C04040"> New Devices: </p> 
 
-            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)">
+            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070">
                 <tr bgcolor=#909090 style="color:#F0F0F0">
-                    <th width=140> MAC </th>
+                    <th width=150> MAC </th>
                     <th width=130> Datetime </th>
                     <th width=100> IP </th>
                     <th width=140> Device Name </th>
@@ -62,9 +68,9 @@
             </SECTION_NEW_DEVICES>
 
             <SECTION_DEVICES_DOWN>
-            <p style="font-size: 14px; font-weight: bold; color:#C04040; text-shadow: 2px 2px 4px #A0A0A0"> Devices Down: </p> 
+            <p style="font-size: 14px; font-weight: bold; color:#C04040"> Devices Down: </p> 
 
-            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)">
+            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070">
                 <tr bgcolor=#909090 style="color:#F0F0F0">
                     <th width=140> MAC </th>
                     <th width=130> Datetime </th>
@@ -79,9 +85,9 @@
             </SECTION_DEVICES_DOWN>
 
             <SECTION_EVENTS>
-            <p style="font-size: 14px; font-weight: bold; color:#409040; text-shadow: 2px 2px 4px #A0A0A0"> Events: </p> 
+            <p style="font-size: 14px; font-weight: bold; color:#409040"> Events: </p> 
 
-            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)">
+            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070">
                 <tr bgcolor=#909090 style="color:#F0F0F0">
                     <th width=140> MAC </th>
                     <th width=130> Datetime </th>
@@ -99,11 +105,9 @@
         
         <tr>
         <td>
-            <table width=100% border=0 bgcolor=#70AD47 cellpadding=5px cellspacing=0 style="border-collapse: collapse; font-size: 12px; font-weight: bold; color:#385723">
+            <table width=100% bgcolor=#46802e cellpadding=5px cellspacing=0 style="font-size: 13px; font-weight: bold; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
                <tr>
-                    <td width=25% style="text-align:Left">   Puche <PIALERT_YEAR></td>
-                    <td width=50% style="text-align:center"> Pi.Alert <PIALERT_VERSION> &nbsp; / &nbsp; <PIALERT_VERSION_DATE>  </td>
-                    <td width=25% style="text-align:right">  GNU GPLv3</td>
+                    <td width=50% style="text-align:center"> Pi.Alert - <SERVER_NAME></td>                    
                 </tr>
             </table>
         </td>
@@ -111,4 +115,4 @@
     </table>
     </font>
 </body>
-</html>
+</html>

back/report_template.txt

@@ -1,27 +1,19 @@
-========================================
-            Pi.Alert Report
-========================================
-
-  Report Date: <REPORT_DATE>
-  Scan Cycle:  <SCAN_CYCLE>
-  Server:      <SERVER_NAME>
-
-<SECTION_INTERNET>
-Internet
-----------------------------------------------------------------------
-<TABLE_INTERNET>
-</SECTION_INTERNET><SECTION_NEW_DEVICES>
+Report Date: <REPORT_DATE>
+Server:      <SERVER_NAME>
+<SECTION_NEW_DEVICES>
 New Devices
-----------------------------------------------------------------------
+----------------------
 <TABLE_NEW_DEVICES>
 </SECTION_NEW_DEVICES><SECTION_DEVICES_DOWN>
 Devices Down
-----------------------------------------------------------------------
+----------------------
 <TABLE_DEVICES_DOWN>
 </SECTION_DEVICES_DOWN><SECTION_EVENTS>
 Events
-----------------------------------------------------------------------
+----------------------
 <TABLE_EVENTS>
-</SECTION_EVENTS>
-----------------------------------------------------------------------
-Puche <PIALERT_YEAR>            Pi.Alert <PIALERT_VERSION> / <PIALERT_VERSION_DATE>             GNU GPLv3
+</SECTION_EVENTS><SECTION_INTERNET>
+Internet
+----------------------
+<TABLE_INTERNET>
+</SECTION_INTERNET>

back/report_template_new_version.html

@@ -0,0 +1,122 @@
+<!-- ---------------------------------------------------------------------------
+#  Pi.Alert
+#  Open Source Network Guard / WIFI & LAN intrusion detector 
+#
+#  repot_template.html - Back module. Template to email reporting in HTML format
+#-------------------------------------------------------------------------------
+#  Puche 2021        pi.alert.application@gmail.com        GNU GPLv3
+#--------------------------------------------------------------------------- -->
+
+<html>
+
+<head>
+</head>
+
+<body>
+    <font face=sans-serif>
+    <table align=center width=100% cellpadding=0 cellspacing=0 style="border-radius: 5px;">
+        <tr>
+        <td bgcolor=#EFB956  align=center style="padding: 20px 10px 10px 10px; font-size: 30px; font-weight: bold; color:#000000; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)">
+            Pi.Alert Report
+        </td>
+        </tr>
+        <tr> 
+            <td bgcolor=#2656f1 width=100% align=center style="padding: 20px 10px 10px 10px; font-size: 20px; font-weight: bold; color:#ffffff; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)">
+                <a style="color:#ffffff;cursor:pointer;" href="https://github.com/jokob-sk/Pi.Alert/releases">🆕 New version available 🆕</a>
+            </td>             
+        </tr>
+        <tr>
+        <td>
+            <table width=100% border=0 bgcolor=#FFD966 cellpadding=5px cellspacing=0 style="border-collapse: collapse; font-size: 15px; text-align:center; color:#404040">            <tr>
+                <td width=100%> Report Date: <b><REPORT_DATE></b> </td>
+            </tr>
+            </table>
+        </td>
+        </tr>
+
+        <tr>
+        <td bgcolor=#F5F5F5 height=200 valign=top style="padding: 10px">
+            <SECTION_INTERNET>
+            <p style="font-size: 24px; font-weight: bold; color:#C04040"> Internet: </p> 
+
+            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070">
+                <tr bgcolor=#909090 style="color:#f0f0f0">
+                    <th width=140> Event Type </th>
+                    <th width=130> Datetime </th>
+                    <th width=100> IP </th>
+                    <th> Additional Info </th>
+                </tr>
+
+                <TABLE_INTERNET>
+            </table>
+
+            <br>
+            </SECTION_INTERNET>
+
+            <SECTION_NEW_DEVICES>
+            <p style="font-size: 14px; font-weight: bold; color:#C04040"> New Devices: </p> 
+
+            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070">
+                <tr bgcolor=#909090 style="color:#F0F0F0">
+                    <th width=150> MAC </th>
+                    <th width=130> Datetime </th>
+                    <th width=100> IP </th>
+                    <th width=140> Device Name </th>
+                    <th> Vendor </th>
+                </tr>
+
+                <TABLE_NEW_DEVICES>
+            </table>
+
+            <br>
+            </SECTION_NEW_DEVICES>
+
+            <SECTION_DEVICES_DOWN>
+            <p style="font-size: 14px; font-weight: bold; color:#C04040"> Devices Down: </p> 
+
+            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070">
+                <tr bgcolor=#909090 style="color:#F0F0F0">
+                    <th width=140> MAC </th>
+                    <th width=130> Datetime </th>
+                    <th width=100> IP </th>
+                    <th> Device Name </th>
+                </tr>
+
+                <TABLE_DEVICES_DOWN>
+            </table>
+
+            <br>
+            </SECTION_DEVICES_DOWN>
+
+            <SECTION_EVENTS>
+            <p style="font-size: 14px; font-weight: bold; color:#409040"> Events: </p> 
+
+            <table width=100% border=1 bordercolor=#C0C0C0 cellpadding=3px cellspacing=0 style="border-collapse: collapse; font-size: 12px; color:#707070">
+                <tr bgcolor=#909090 style="color:#F0F0F0">
+                    <th width=140> MAC </th>
+                    <th width=130> Datetime </th>
+                    <th width=100> IP </th>
+                    <th width=100> Event Type </th>
+                    <th width=140> Device Name </th>
+                    <th> Additional Info </th>
+                </tr>
+
+                <TABLE_EVENTS>
+            </table>
+            </SECTION_EVENTS>
+        </td>
+        </tr>
+        
+        <tr>
+        <td>
+            <table width=100% bgcolor=#46802e cellpadding=5px cellspacing=0 style="font-size: 13px; font-weight: bold; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
+               <tr>
+                    <td width=50% style="text-align:center"> Pi.Alert - <SERVER_NAME></td>                    
+                </tr>
+            </table>
+        </td>
+        </tr>
+    </table>
+    </font>
+</body>
+</html>

back/update_vendors.sh

@@ -0,0 +1,64 @@
+#!/bin/sh
+# ------------------------------------------------------------------------------
+#  Pi.Alert
+#  Open Source Network Guard / WIFI & LAN intrusion detector 
+#
+#  update_vendors.sh - Back module. IEEE Vendors db update
+# ------------------------------------------------------------------------------
+#  Puche 2021 / 2022+ jokob             jokob@duck.com                GNU GPLv3
+# ------------------------------------------------------------------------------
+
+# ----------------------------------------------------------------------
+#  Main directories to update:
+#    /usr/share/arp-scan
+#    /usr/share/ieee-data
+#    /var/lib/ieee-data
+# ----------------------------------------------------------------------
+
+
+# ----------------------------------------------------------------------
+echo Updating... /usr/share/ieee-data/
+cd /usr/share/ieee-data/
+
+sudo mkdir -p 2_backup
+sudo cp *.txt 2_backup
+sudo cp *.csv 2_backup
+echo ""
+echo Download Start
+echo ""
+sudo curl $1  -O https://standards-oui.ieee.org/iab/iab.csv \
+              -O https://standards-oui.ieee.org/iab/iab.txt \
+              -O https://standards-oui.ieee.org/oui28/mam.csv \
+              -O https://standards-oui.ieee.org/iab/iab.txt \
+              -O https://standards-oui.ieee.org/oui28/mam.csv \
+              -O https://standards-oui.ieee.org/oui28/mam.txt \
+              -O https://standards-oui.ieee.org/oui36/oui36.csv \
+              -O https://standards-oui.ieee.org/oui36/oui36.txt \
+              -O https://standards-oui.ieee.org/oui/oui.csv \
+              -O https://standards-oui.ieee.org/oui/oui.txt
+echo ""
+echo Download Finished
+
+# ----------------------------------------------------------------------
+echo ""
+echo Updating... /usr/share/arp-scan/
+cd /usr/share/arp-scan
+
+sudo mkdir -p 2_backup
+sudo cp *.txt 2_backup
+
+# Update from /usb/lib/ieee-data
+sudo get-iab -v
+sudo get-oui -v
+
+# 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
+
+# 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
+
+# Update from Sanitized oui (linuxnet.ca)
+# sudo get-oui -v -u https://linuxnet.ca/ieee/oui.txt
+

back/vendors_db_update.sh

@@ -1,54 +0,0 @@
-#!/bin/sh
-#
-# Update MAC Vendor DB
-#
-# /usr/share/arp-scan
-# /usr/share/ieee-data
-# /var/lib/ieee-data
-# ----------------------------------------------------------------------
-
-
-# ----------------------------------------------------------------------
-echo Updating... /usr/share/ieee-data/
-cd /usr/share/ieee-data/
-
-sudo mkdir -p 2_backup
-sudo cp *.txt 2_backup
-sudo cp *.csv 2_backup
-
-sudo curl -# -O http://standards-oui.ieee.org/iab/iab.csv
-sudo curl -# -O http://standards-oui.ieee.org/iab/iab.txt
-
-sudo curl -# -O http://standards-oui.ieee.org/oui28/mam.csv
-sudo curl -# -O http://standards-oui.ieee.org/oui28/mam.txt
-
-sudo curl -# -O http://standards-oui.ieee.org/oui36/oui36.csv
-sudo curl -# -O http://standards-oui.ieee.org/oui36/oui36.txt
-
-sudo curl -# -O http://standards-oui.ieee.org/oui/oui.csv
-sudo curl -# -O http://standards-oui.ieee.org/oui/oui.txt
-
-
-# ----------------------------------------------------------------------
-echo ""
-echo Updating... /usr/share/arp-scan/
-cd /usr/share/arp-scan
-
-sudo mkdir -p 2_backup
-sudo cp *.txt 2_backup
-
-# Update from /usb/lib/ieee-data
-sudo get-iab -v
-sudo get-oui -v
-
-# 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
-
-# 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
-
-# Update from Sanitized oui (linuxnet.ca)
-# sudo get-oui -v -u https://linuxnet.ca/ieee/oui.txt
-

back/webhook_json_sample.json

@@ -0,0 +1,216 @@
+[
+    {
+        "headers": {
+            "host": "192.168.1.82:5678",
+            "user-agent": "curl/7.74.0",
+            "accept": "*/*",
+            "content-type": "application/json",
+            "content-length": "872"
+        },
+        "params": {},
+        "query": {},
+        "body": {
+            "username": "Pi.Alert",
+            "text": "There are new notifications",
+            "attachments": [
+                {
+                    "title": "Pi.Alert Notifications",
+                    "title_link": "",
+                    "text": {
+                        "internet": [
+                            [
+                              "Internet",
+                              "243.243.243.243",
+                              "2022-01-06 18:32:03",
+                              "Internet IP Changed",
+                              "Previous Internet IP: 0.0.0.0",
+                              1,
+                              null
+                            ],
+                            [
+                              "Internet",
+                              "243.243.243.243",
+                              "2022-01-06 18:32:03",
+                              "New Device",
+                              null,
+                              1,
+                              null
+                            ]
+                          ],
+                        "new_devices": [
+                            [
+                              "b8:b8:b8:b8:b8:b8",
+                              "192.168.1.19",
+                              "2023-01-06 18:32:03",
+                              "New Device",
+                              "Raspberry Pi Foundation",
+                              1,
+                              null,
+                              "b8:b8:b8:b8:b8:b8",
+                              "raspberrypi",
+                              "(unknown)",
+                              null,
+                              "Raspberry Pi Foundation",
+                              0,
+                              null,
+                              null,
+                              "2021-01-06 18:32:03",
+                              "2021-01-06 18:32:03",
+                              "192.168.1.19",
+                              0,
+                              1,
+                              1,
+                              1,
+                              0,
+                              0,
+                              null,
+                              1,
+                              1,
+                              null,
+                              0,
+                              null,
+                              null
+                            ],
+                            [
+                              "b1:b8:b8:b8:b8:b8",
+                              "192.168.1.45",
+                              "2021-01-06 18:32:03",
+                              "New Device",
+                              "EliteGroup Computer Systems Co., LTD",
+                              1,
+                              null,
+                              "b1:b8:b8:b8:b8:b8",
+                              "my-NUC",
+                              "(unknown)",
+                              null,
+                              "EliteGroup Computer Systems Co., LTD",
+                              0,
+                              null,
+                              null,
+                              "2023-01-06 18:32:03",
+                              "2023-01-06 18:32:03",
+                              "192.168.1.45",
+                              0,
+                              1,
+                              1,
+                              1,
+                              0,
+                              0,
+                              null,
+                              1,
+                              1,
+                              null,
+                              0,
+                              null,
+                              null
+                            ]
+                          ],
+                        "down_devices": [
+                            [
+                              "aa:77:aa:77:aa:77",
+                              "192.168.1.151",
+                              "2021-01-07 14:20:53",
+                              "Device Down",
+                              "",
+                              1,
+                              25,
+                              "aa:77:aa:77:aa:77",
+                              "ttgo_tdisplay_weather",
+                              "(unknown)",
+                              "",
+                              "Espressif Inc.",
+                              0,
+                              "",
+                              "",
+                              "2021-01-06 23:13:06",
+                              "2021-01-06 23:13:06",
+                              "192.168.1.151",
+                              0,
+                              1,
+                              1,
+                              0,
+                              1,
+                              0,
+                              "2021-01-06 23:34:37.067330",
+                              0,
+                              0,
+                              "",
+                              0,
+                              "",
+                              ""
+                            ]
+                          ],
+                        "events": [
+                            [
+                                "aa:77:aa:77:aa:77",
+                                "192.168.1.151",
+                                "2022-08-12 21:48:00",
+                                "Connected",
+                                "",
+                                1,
+                                null,
+                                "aa:77:aa:77:aa:77",
+                                "ESP32 - display",
+                                "House",
+                                "",
+                                "Espressif Inc.",
+                                0,
+                                "",
+                                "",
+                                "2022-07-21 20:35:00",
+                                "2022-08-12 21:48:00",
+                                "192.168.1.151",
+                                0,
+                                1,
+                                1,
+                                1,
+                                0,
+                                0,
+                                "2022-08-12 21:42:47.937413",
+                                1,
+                                0,
+                                "",
+                                0,
+                                "aa:77:aa:77:aa:77",
+                                ""
+                            ],
+                            [
+                                "aa:77:aa:77:aa:77",
+                                "192.168.1.149",
+                                "2022-08-12 21:48:00",
+                                "Connected",
+                                "",
+                                1,
+                                null,
+                                "aa:77:aa:77:aa:77",
+                                "ESP32 - 1",
+                                "House",
+                                "Singleboard Computer (SBC)",
+                                "Espressif Inc.",
+                                0,
+                                "",
+                                "",
+                                "2022-07-15 05:30:00",
+                                "2022-08-12 21:48:00",
+                                "192.168.1.149",
+                                0,
+                                1,
+                                1,
+                                1,
+                                0,
+                                0,
+                                "2022-08-12 21:42:47.937413",
+                                1,
+                                1,
+                                "",
+                                0,
+                                "aa:77:aa:77:aa:77",
+                                ""
+                            ]
+                        ]
+                    }
+                }
+            ]
+        }
+    }
+]

config/pialert.conf

@@ -0,0 +1,117 @@
+#-----------------AUTOGENERATED FILE-----------------#
+#                                                    #
+#         Generated:  2022-12-30_22-19-40            #
+#                                                    #
+#   Config file for the LAN intruder detection app:  #
+#      https://github.com/jokob-sk/Pi.Alert          #
+#                                                    #
+#-----------------AUTOGENERATED FILE-----------------#
+
+
+# General
+#---------------------------
+# Scan using interface eth0
+# SCAN_SUBNETS    = ['192.168.1.0/24 --interface=eth0']
+#
+# 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']
+PRINT_LOG=False
+TIMEZONE='Europe/Berlin'
+PIALERT_WEB_PROTECTION=False
+PIALERT_WEB_PASSWORD='8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'
+INCLUDED_SECTIONS=['internet','new_devices','down_devices','events']
+SCAN_CYCLE_MINUTES=5
+DAYS_TO_KEEP_EVENTS=90
+REPORT_DASHBOARD_URL='http://pi.alert/'
+
+
+# Email
+#---------------------------
+REPORT_MAIL=False
+SMTP_SERVER='smtp.gmail.com'
+SMTP_PORT=587
+REPORT_TO='user@gmail.com'
+REPORT_FROM='Pi.Alert <user@gmail.com>'
+SMTP_SKIP_LOGIN=False
+SMTP_USER='user@gmail.com'
+SMTP_PASS='password'
+SMTP_SKIP_TLS=False
+
+
+# Webhooks
+#---------------------------
+REPORT_WEBHOOK=False
+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 
+                                       # in https://github.com/jokob-sk/Pi.Alert/blob/main/docs/webhook_json_sample.json 
+                                       #   supported values: 'json', 'html' or 'text'
+                                       #   e.g.: for discord use 'html'
+WEBHOOK_REQUEST_METHOD='GET'
+
+
+# Apprise
+#---------------------------
+REPORT_APPRISE=False
+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
+#---------------------------
+REPORT_NTFY=False
+NTFY_HOST='https://ntfy.sh'
+NTFY_TOPIC='replace_my_secure_topicname_91h889f28'
+NTFY_USER='user'
+NTFY_PASSWORD='passw0rd'
+
+
+# PUSHSAFER
+#---------------------------
+REPORT_PUSHSAFER=False
+PUSHSAFER_TOKEN='ApiKey'
+
+
+# MQTT
+#---------------------------
+REPORT_MQTT=False
+MQTT_BROKER='192.168.1.2'
+MQTT_PORT=1883
+MQTT_USER='mqtt'
+MQTT_PASSWORD='passw0rd'
+MQTT_QOS=0
+MQTT_DELAY_SEC=2
+
+
+# DynDNS
+#---------------------------
+DDNS_ACTIVE=False
+DDNS_DOMAIN='your_domain.freeddns.org'
+DDNS_USER='dynu_user'
+DDNS_PASSWORD='A0000000B0000000C0000000D0000000'
+DDNS_UPDATE_URL='https://api.dynu.com/nic/update?'
+
+
+# PiHole
+#---------------------------
+# if enabled you need to map '/etc/pihole/pihole-FTL.db' in docker-compose.yml
+PIHOLE_ACTIVE=False
+# if enabled you need to map '/etc/pihole/dhcp.leases' in docker-compose.yml
+DHCP_ACTIVE=False
+
+
+# Pholus
+#---------------------------
+PHOLUS_ACTIVE=False
+PHOLUS_TIMEOUT=20
+PHOLUS_FORCE=False
+PHOLUS_DAYS_DATA=7
+PHOLUS_RUN='once'
+PHOLUS_RUN_TIMEOUT=600
+PHOLUS_RUN_SCHD='0 4 * * *'
+
+
+#-------------------IMPORTANT INFO-------------------#
+#   This file is ingested by a python script, so if  #
+#        modified it needs to use python syntax      #
+#-------------------IMPORTANT INFO-------------------#

docker-compose.yml

@@ -0,0 +1,42 @@
+version: "3"
+services:
+  pialert:
+    privileged: true
+    build: .
+    container_name: pialert
+    network_mode: "host"
+    restart: unless-stopped
+    volumes:
+      - ${APP_DATA_LOCATION}/pialert/config:/home/pi/pialert/config
+      # - ${APP_DATA_LOCATION}/pialert/db/pialert.db:/home/pi/pialert/db/pialert.db
+      - ${APP_DATA_LOCATION}/pialert/db:/home/pi/pialert/db
+      # (optional) map an empty file with the name 'setting_darkmode' if you want to force the dark mode on container rebuilt
+      - ${APP_DATA_LOCATION}/pialert/db/setting_darkmode:/home/pi/pialert/db/setting_darkmode
+      # (optional) useful for debugging if you have issues setting up the container
+      - ${LOGS_LOCATION}:/home/pi/pialert/front/log      
+      # DELETE START anyone trying to use this file: comment out / delete BELOW lines, they are only for development purposes
+      - ${DEV_LOCATION}/back/pialert.py:/home/pi/pialert/back/pialert.py     
+      - ${DEV_LOCATION}/back/update_vendors.sh:/home/pi/pialert/back/update_vendors.sh
+      - ${DEV_LOCATION}/back/report_template_new_version.html:/home/pi/pialert/back/report_template_new_version.html      
+      - ${DEV_LOCATION}/pholus:/home/pi/pialert/pholus
+      - ${DEV_LOCATION}/dockerfiles:/home/pi/pialert/dockerfiles
+      - ${APP_DATA_LOCATION}/pialert/php.ini:/etc/php/7.4/fpm/php.ini      
+      - ${DEV_LOCATION}/front/css:/home/pi/pialert/front/css
+      - ${DEV_LOCATION}/front/lib/AdminLTE:/home/pi/pialert/front/lib/AdminLTE
+      - ${DEV_LOCATION}/front/js:/home/pi/pialert/front/js
+      - ${DEV_LOCATION}/front/php:/home/pi/pialert/front/php
+      - ${DEV_LOCATION}/front/deviceDetails.php:/home/pi/pialert/front/deviceDetails.php
+      - ${DEV_LOCATION}/front/devices.php:/home/pi/pialert/front/devices.php
+      - ${DEV_LOCATION}/front/events.php:/home/pi/pialert/front/events.php
+      - ${DEV_LOCATION}/front/help_faq.php:/home/pi/pialert/front/help_faq.php
+      - ${DEV_LOCATION}/front/index.php:/home/pi/pialert/front/index.php
+      - ${DEV_LOCATION}/front/maintenance.php:/home/pi/pialert/front/maintenance.php
+      - ${DEV_LOCATION}/front/network.php:/home/pi/pialert/front/network.php
+      - ${DEV_LOCATION}/front/presence.php:/home/pi/pialert/front/presence.php
+      - ${DEV_LOCATION}/front/settings.php:/home/pi/pialert/front/settings.php
+      # DELETE END anyone trying to use this file: comment out / delete ABOVE lines, they are only for development purposes
+    environment:
+      - TZ=${TZ}
+      - PORT=${PORT}
+      - HOST_USER_ID=${HOST_USER_ID}
+      - HOST_USER_GID=${HOST_USER_GID}

dockerfiles/README.md

@@ -0,0 +1,199 @@
+[![Docker](https://img.shields.io/github/actions/workflow/status/jokob-sk/Pi.Alert/docker_prod.yml?label=Build&logo=GitHub)](https://github.com/jokob-sk/Pi.Alert/actions/workflows/docker_prod.yml)
+[![GitHub Committed](https://img.shields.io/github/last-commit/jokob-sk/Pi.Alert?color=40ba12&label=Committed&logo=GitHub&logoColor=fff)](https://github.com/jokob-sk/Pi.Alert)
+[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/pi.alert?label=Size&logo=Docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/pi.alert)
+[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/pi.alert?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/pi.alert)
+[![Docker Pushed](https://img.shields.io/badge/dynamic/json?color=0aa8d2&logoColor=fff&label=Pushed&query=last_updated&url=https%3A%2F%2Fhub.docker.com%2Fv2%2Frepositories%2Fjokobsk%2Fpi.alert%2F&logo=docker&link=http://left&link=https://hub.docker.com/repository/docker/jokobsk/pi.alert)](https://hub.docker.com/r/jokobsk/pi.alert)
+
+# 🐳 A docker image for Pi.Alert 
+
+🐳 [Docker hub](https://registry.hub.docker.com/r/jokobsk/pi.alert) | 📄 [Dockerfile](https://github.com/jokob-sk/Pi.Alert/blob/main/Dockerfile) | 📚 [Docker instructions](https://github.com/jokob-sk/Pi.Alert/blob/main//dockerfiles/README.md) | 🆕 [Release notes](https://github.com/jokob-sk/Pi.Alert/releases)
+
+<a href="https://raw.githubusercontent.com/jokob-sk/Pi.Alert/main/docs/img/devices_split.png" target="_blank">
+  <img src="https://raw.githubusercontent.com/jokob-sk/Pi.Alert/main/docs/img/devices_split.png" width="300px" />
+</a>
+<a href="https://raw.githubusercontent.com/jokob-sk/Pi.Alert/main/docs/img/network.png" target="_blank">
+  <img src="https://raw.githubusercontent.com/jokob-sk/Pi.Alert/main/docs/img/network.png" width="300px" />
+</a>
+
+
+## 📕 Basic Usage 
+
+- You will have to run the container on the host network, e.g: 
+
+```yaml
+docker run -d --rm --network=host \
+  -v local/path/pialert/config:/home/pi/pialert/config \
+  -v local/path/pialert/db:/home/pi/pialert/db \
+  -e TZ=Europe/Berlin \
+  -e PORT=20211 \
+  jokobsk/pi.alert:latest
+  ```
+- The initial scan can take up-to 15min (with 50 devices and MQTT). Subsequent ones 3 and 5 minutes so wait that long for all of the scans to run.
+
+### Docker environment variables
+
+| Variable | Description | Default |
+| :------------- |:-------------| -----:|
+| `PORT`      |Port of the web interface  |  `20211` |
+|`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` |
+|`HOST_USER_GID`    |User ID (UID) to map the user in the container to a server user with sufficient read&write permissions on the mapped files   |  `1000` |
+|`HOST_USER_ID` |User Group ID (GID)  to map the user group in the container to a server user group with sufficient read&write permissions on the mapped files    |    `1000` |
+
+### Docker paths
+
+| | Path | Description |
+| :------------- | :------------- |:-------------| 
+| **Required** | `:/home/pi/pialert/config` | Folder which will contain the `pialert.conf` file (see below for details)  | 
+| **Required** | `:/home/pi/pialert/db` | Folder which will contain the `pialert.db` file  | 
+|Optional| `:/home/pi/pialert/db/setting_darkmode` |  Map an empty file with the name `setting_darkmode` if you want to force the dark mode on container rebuilt  | 
+|Optional| `:/home/pi/pialert/front/log` |  Logs folder useful for debugging if you have issues setting up the container  | 
+|Optional| `:/etc/pihole/pihole-FTL.db` |  PiHole's `pihole-FTL.db` database file. Required if you want to use PiHole  | 
+|Optional| `:/etc/pihole/dhcp.leases` |  PiHole's `dhcp.leases` file. Required if you want to use PiHole  | 
+
+
+### Config (`pialert.conf`)
+
+- Modify [pialert.conf](https://github.com/jokob-sk/Pi.Alert/tree/main/config) or manage the configuration via Settings.  
+- ❗ Set the `SCAN_SUBNETS` variable. 
+   * The adapter will probably be `eth0` or `eth1`. (Run `iwconfig` to find your interface name(s)) 
+   * 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.
+   * Examples for one and two subnets  (❗ Note the `['...', '...']` format for two or more 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']` 
+
+
+### 🛑 **Common issues** 
+
+💡 Before creating a new issue, please check if a similar issue was [already resolved](https://github.com/jokob-sk/Pi.Alert/issues?q=is%3Aissue+is%3Aclosed). 
+
+**Permissions**
+
+* If facing issues (AJAX errors, can't write to DB, empty screen, etc,) make sure permissions are set correctly, and check the logs under `/home/pi/pialert/front/log`. 
+* To solve permission issues you can also try to create a DB backup and then run a DB Restore via the **Maintenance > Backup/Restore** section.
+* You can try also setting the owner and group of the `pialert.db` by executing the following on the host system: `docker exec pialert chown -R www-data:www-data /home/pi/pialert/db/pialert.db`. 
+* Map to local User and Group IDs. Specify the enviroment variables `HOST_USER_ID` and `HOST_USER_GID` if needed.
+* Map the pialert.db file (⚠ not folder) to `:/home/pi/pialert/db/pialert.db` (see Examples below for details)
+
+**Container restarts / crashes**
+
+* Check the logs for details. Often a required setting for a notification method is missing. 
+
+**unable to resolve host**
+
+* Check that your `SCAN_SUBNETS` variable is using the correct mask and `--interface` as outlined in the instructions above. 
+ 
+
+Docker-compose examples can be found below.
+
+## 📄 Examples
+
+### Example 1
+
+```yaml
+version: "3"
+services:
+  pialert:
+    container_name: pialert
+    image: "jokobsk/pi.alert:latest"      
+    network_mode: "host"        
+    restart: unless-stopped
+    volumes:
+      - local/path/pialert/config:/home/pi/pialert/config
+      - local/path/pialert/db:/home/pi/pialert/db
+      # (optional) map an empty file with the name 'setting_darkmode' if you want to force the dark mode on container rebuilt
+      - local/path/pialert/db/setting_darkmode:/home/pi/pialert/db/setting_darkmode
+      # (optional) useful for debugging if you have issues setting up the container
+      - local/path/logs:/home/pi/pialert/front/log
+    environment:
+      - TZ=Europe/Berlin      
+      - HOST_USER_ID=1000
+      - HOST_USER_GID=1000
+      - PORT=20211
+```
+
+To run the container execute: `sudo docker-compose up -d`
+
+### Example 2
+
+`docker-compose.yml` 
+
+```yaml
+version: "3"
+services:
+  pialert:
+    container_name: pialert
+    image: "jokobsk/pi.alert:latest"      
+    network_mode: "host"        
+    restart: unless-stopped
+    volumes:
+      - ${APP_DATA_LOCATION}/pialert/config:/home/pi/pialert/config
+      - ${APP_DATA_LOCATION}/pialert/db/pialert.db:/home/pi/pialert/db/pialert.db
+      # (optional) map an empty file with the name 'setting_darkmode' if you want to force the dark mode on container rebuilt
+      - ${APP_DATA_LOCATION}/pialert/db/setting_darkmode:/home/pi/pialert/db/setting_darkmode
+      # (optional) useful for debugging if you have issues setting up the container
+      - ${LOGS_LOCATION}:/home/pi/pialert/front/log
+    environment:
+      - TZ=${TZ}      
+      - HOST_USER_ID=${HOST_USER_ID}
+      - HOST_USER_GID=${HOST_USER_GID}
+      - PORT=${PORT}
+```
+
+`.env` file
+
+```yaml
+#GLOBAL PATH VARIABLES
+
+APP_DATA_LOCATION=/path/to/docker_appdata
+APP_CONFIG_LOCATION=/path/to/docker_config
+LOGS_LOCATION=/path/to/docker_logs
+
+#ENVIRONMENT VARIABLES
+
+TZ=Europe/Paris
+HOST_USER_ID=1000
+HOST_USER_GID=1000
+PORT=20211
+
+#DEVELOPMENT VARIABLES
+
+DEV_LOCATION=/path/to/local/source/code
+```
+
+To run the container execute: `sudo docker-compose --env-file /path/to/.env up`
+
+### Example 3
+
+Courtesy of [pbek](https://github.com/pbek). The volume `pialert_db` is used by the db directory. The two config files are mounted directly from a local folder to their places in the config folder. You can backup the `docker-compose.yaml` folder and the docker volumes folder.
+
+```yaml
+  pialert:
+    image: jokobsk/pi.alert
+    ports:
+      - "80:20211/tcp"
+    environment:
+      - TZ=Europe/Vienna
+    networks:
+      local:
+        ipv4_address: 192.168.1.2
+    restart: unless-stopped
+    volumes:
+      - pialert_db:/home/pi/pialert/db
+      - ./pialert/pialert.conf:/home/pi/pialert/config/pialert.conf      
+```
+
+## 🏅 Recognitions
+
+Big thanks to <a href="https://github.com/Macleykun">@Macleykun</a> for help and tips&tricks for Dockerfile(s):
+
+<a href="https://github.com/Macleykun">
+  <img src="https://avatars.githubusercontent.com/u/26381427?size=50"> 
+</a>
+
+## ☕ Support me
+
+Disclaimer: Please only donate if you don't have any debt yourself. Support yourself first, then others.
+
+<a href="https://github.com/sponsors/jokob-sk" target="_blank"><img src="https://i.imgur.com/X6p5ACK.png" alt="Sponsor Me on GitHub" style="height: 30px !important;width: 117px !important;" width="150px" ></a>
+<a href="https://www.buymeacoffee.com/jokobsk" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important;width: 117px !important;" width="117px" height="30px" ></a>
+<a href="https://www.patreon.com/user?u=84385063" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Patreon_logo_with_wordmark.svg/512px-Patreon_logo_with_wordmark.svg.png" alt="Support me on patreon" style="height: 30px !important;width: 117px !important;" width="117px" ></a>

dockerfiles/start.sh

@@ -0,0 +1,31 @@
+#!/bin/sh
+/home/pi/pialert/dockerfiles/user-mapping.sh
+
+# if custom variables not set we do not need to do anything
+if [ -n "${TZ}" ]; then    
+  FILECONF=/home/pi/pialert/config/pialert.conf 
+  if [ -f "$FILECONF" ]; then
+    sed -ie "s|Europe/Berlin|${TZ}|g" /home/pi/pialert/config/pialert.conf 
+  else 
+    sed -ie "s|Europe/Berlin|${TZ}|g" /home/pi/pialert/back/pialert.conf_bak 
+  fi
+fi
+
+if [ -n "${PORT}" ]; then  
+  sed -ie 's/listen 20211/listen '${PORT}'/g' /etc/nginx/sites-available/default
+fi 
+
+# I hope this will fix DB permission issues going forward
+FILEDB=/home/pi/pialert/db/pialert.db
+if [ -f "$FILEDB" ]; then
+    chown -R www-data:www-data /home/pi/pialert/db/pialert.db
+fi
+
+chmod -R a+rw /home/pi/pialert/front/log
+chmod -R a+rw /home/pi/pialert/config
+
+/etc/init.d/php7.4-fpm start
+/etc/init.d/nginx start
+
+# cron -f
+python /home/pi/pialert/back/pialert.py

dockerfiles/user-mapping.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+if [ -z "${USER}" ]; then
+  echo "We need USER to be set!"; exit 100
+fi
+
+# if both not set we do not need to do anything
+if [ -z "${HOST_USER_ID}" -a -z "${HOST_USER_GID}" ]; then
+    echo "Nothing to do here." ; exit 0
+fi
+
+# reset user_?id to either new id or if empty old (still one of above
+# might not be set)
+USER_ID=${HOST_USER_ID:=$USER_ID}
+USER_GID=${HOST_USER_GID:=$USER_GID}
+
+LINE=$(grep -F "${USER}" /etc/passwd)
+# replace all ':' with a space and create array
+array=( ${LINE//:/ } )
+
+# home is 5th element
+USER_HOME=${array[4]}
+
+sed -i -e "s/^${USER}:\([^:]*\):[0-9]*:[0-9]*/${USER}:\1:${USER_ID}:${USER_GID}/"  /etc/passwd
+sed -i -e "s/^${USER}:\([^:]*\):[0-9]*/${USER}:\1:${USER_GID}/"  /etc/group
+
+chown -R ${USER_ID}:${USER_GID} ${USER_HOME}
+
+exec su - "${USER}"

docs/DEVICE_MANAGEMENT.md

@@ -79,7 +79,7 @@ decides to change the MAC).
   
 ### License
   GPL 3.0
-  [Read more here](LICENSE.txt)
+  [Read more here](../LICENSE.txt)
 
 ### Contact
   pi.alert.application@gmail.com

docs/INSTALL.md

@@ -1,215 +0,0 @@
-# Pi.Alert Installation
-<!--- --------------------------------------------------------------------- --->
-Initially designed to run on a Raspberry PI, probably it can run on many other
-Linux distributions.
-
-Estimated time: 20'
-
-### Dependencies
-  | Dependency | Comments                                                 |
-  | ---------- | -------------------------------------------------------- |
-  | Lighttpd   | Probably works on other webservers / not tested          |
-  | arp-scan   | Required for Scan Method 1                               |
-  | Pi.hole    | Optional. Scan Method 2. Check devices doing DNS queries |
-  | dnsmasq    | Optional. Scan Method 3. Check devices using DHCP server |
-  | IEEE HW DB | Necessary to identified Device vendor                    |
-
-# Installation process
-<!--- --------------------------------------------------------------------- --->
-
-## Raspberry Setup
-<!--- --------------------------------------------------------------------- --->
-1 - Install 'Raspberry Pi OS'
-  - Instructions https://www.raspberrypi.org/documentation/installation/installing-images/
-  - *Lite version (without Descktop) is enough for Pi.Alert*
-
-2 - Activate ssh
-  - Create a empty file with name 'ssh' in the boot partition of the SD
-
-3 - Start the raspberry
-
-4 - Login to the system with pi user
-```
-  user: pi
-  password: raspberry
-```
-
-5 - Change the default password of pi user
-```
-  passwd
-```
-
-6 - Setup the basic configuration
-```
-  sudo raspi-config
-```
-
-7 - Optionally, configure a static IP in raspi-config
-
-8 - Update the OS
-```
-  sudo apt-get update
-  sudo apt-get upgrade
-  sudo reboot
-```
-
-## Pi-hole Setup
-<!--- --------------------------------------------------------------------- --->
-1- Links & Doc
-  - https://pi-hole.net/
-  - https://github.com/pi-hole/pi-hole
-  - https://github.com/pi-hole/pi-hole/#one-step-automated-install
-
-2 - Login to the system with pi user
-
-3 - Install Pi-hole
-```
-    curl -sSL https://install.pi-hole.net | bash
-```
-  - Mark "Install web admin interface"
-  - Mark "Install web server lighttpd"
-
-4 - Configure Pi-hole admin password
-```
-    pihole -a -p PASSWORD
-```
-
-5 - Connect to web admin panel
-  - http://192.168.1.x/admin/
-  - (*replace 192.168.1.x with your Raspberry IP*)
-
-6 - Activate DHCP server
-  - Pi-hole -> Settings -> DHCP -> Mark "DHCP server enabled"
-
-7 - Add pi.alert DNS Record
-  - Pi-hole -> Local DNS -> DNS Records -> Add new domain /IP
-    - pi.alert    192.168.1.x
-    - (*replace 192.168.1.x with your Raspberry IP*)
-
-8 - Deactivate your current DHCP Server (*Normaly at your router or AP*)
-
-9 - Renew your computer IP to unsure you are using the new DHCP and DNS server
-  - Windows: cmd -> ipconfig /renew
-  - Linux: shell -> sudo dhclient -r; sudo dhclient
-  - Mac: Apple menu -> System Preferences -> Network -> Select the network ->
-    Advanced -> TCP/IP -> Renew DHCP Lease
-
-## arp-scan & Python
-<!--- --------------------------------------------------------------------- --->
-1 - Install arp-scan utility and test
-```
-  sudo apt-get install arp-scan
-  sudo arp-scan -l
-```
-
-2 - Install Python & packages
-```
-  sudo apt-get install python-setuptools
-  sudo apt install python-pip
-
-  pip install netaddr
-  pip install dpkt
-  pip install MacLookup
-```
-
-
-## Pi.Alert
-<!--- --------------------------------------------------------------------- --->
-1- Download Pi.Alert and uncompress
-```
-  curl -LO https://github.com/pucherot/Pi.Alert/raw/main/install/pialert_latest.tar
-  tar xvf pialert_latest.tar
-  rm pialert_latest.tar
-```
-
-2 - Public the front portal
-```
-  sudo ln -s /home/pi/pialert/front /var/www/html/pialert
-```
-
-3 - Update lighttpd config
-```
-  sudo sh -c "printf '\n\n\$HTTP[\"host\"] == \"pi.alert\" {\n  server.document-root = \"/var/www/html/pialert/\"\n}\n' >> /etc/lighttpd/external.conf"
-  sudo /etc/init.d/lighttpd restart
-```
-
-4 - If you want to use email reporting with gmail
-  - Go to your Google Account https://myaccount.google.com/
-  - On the left navigation panel, click Security
-  - On the bottom of the page, in the Less secure app access panel,
-    click Turn on access
-  - Click Save button
-
-5 - Config Pialert parameters
-```
-  nano  ~/pialert/back/pialert.conf
-```
-  - If you want to use email reporting, configure this parameters
-```
-  REPORT_MAIL     = True
-  SMTP_USER       = 'user@gmail.com'
-  SMTP_PASS       = 'password'
-  REPORT_TO       = 'user@gmail.com'
-```
-
-  - If you want to update your Dynamic DNS, configure this parameters
-```
-  DDNS_ACTIVE     = True
-  DDNS_DOMAIN     = 'your_domain.freeddns.org'
-  DDNS_USER       = 'dynu_user'
-  DDNS_PASSWORD   = 'A0000000B0000000C0000000D0000000'
-  DDNS_UPDATE_URL = 'https://api.dynu.com/nic/update?'
-```
-
-  - If you have installed Pi.hole and DHCP, activate this parameters
-```
-  PIHOLE_ACTIVE   = True
-  DHCP_ACTIVE     = True
-```
-
-6 - Update vendors DB
-```
-  python ~/pialert/back/pialert.py update_vendors
-```
-
-7 - Test Pi.Alert Scan
-```
-  python ~/pialert/back/pialert.py internet_IP
-  python ~/pialert/back/pialert.py 1
-```
-
-8 - Add crontab jobs
-```
-  (crontab -l 2>/dev/null; cat ~/pialert/back/pialert.cron) | crontab -
-```
-
-9 - Add permissions to the web-server user
-```
-  sudo chgrp -R www-data ~/pialert/back ~/pialert/back/pialert.conf ~/pialert/front ~/pialert/db
-  chmod -R 770 ~/pialert/back ~/pialert/back/pialert.conf ~/pialert/front ~/pialert/db
-```
-
-10 - Check DNS record por pi.alert (explained in point 7 of Pi.hole installing)
-   - Add pi.alert DNS Record
-     - Pi-hole -> Local DNS -> DNS Records -> Add new domain /IP
-       - pi.alert    192.168.1.x
-       - (*replace 192.168.1.x with your Raspberry IP*)
-
-11 - Use admin panel to configure the devices
-   - http://pi.alert/
-   - http://192.168.1.x/pialert/
-     - (*replace 192.168.1.x with your Raspberry IP*)
-
-
-## Device Management
-<!--- --------------------------------------------------------------------- --->
-
-  - [Device Management instructions](./DEVICE_MANAGEMENT.md)
-
-
-### License
-  GPL 3.0
-  [Read more here](LICENSE.txt)
-
-### Contact
-  pi.alert.application@gmail.com

docs/RANDOM_MAC.md

@@ -4,7 +4,7 @@
 The latest versions of some operating systems (IOS and Android) incorporate a
 new & interesting functionality to improve privacy: **Random MACs**.
 
-This functionality allows you to **hide the true MAC** of the device and
+This functionality allows you to **hide the real MAC** of the device and
 **assign a random MAC** when we connect to WIFI networks.
 
 This behavior is especially useful when connecting to WIFI's that we do not
@@ -16,12 +16,12 @@ WIFI's**, in this way, Pi.Alert will be able to identify the device, and it
 will not identify it as a new device every so often (every time IOS or Android
 decides to change the MAC).
 
-### IOS
+## IOS
 ![ios][ios]
 
   - [Use private Wi-Fi addresses in iOS 14](https://support.apple.com/en-us/HT211227)
 
-### Android
+## Android
 ![Android][Android]
 
   - [How to Disable MAC Randomization in Android 10](https://support.boingo.com/s/article/How-to-Disable-MAC-Randomization-in-Android-10-Android-Q)
@@ -30,7 +30,7 @@ decides to change the MAC).
 
 ### License
   GPL 3.0
-  [Read more here](LICENSE.txt)
+  [Read more here](../LICENSE.txt)
 
 ### Contact
   pi.alert.application@gmail.com

docs/VERSIONS_HISTORY.md

@@ -0,0 +1,80 @@
+# Pi.Alert Version History
+<!--- --------------------------------------------------------------------- --->
+
+  | Version | Description                                                     |
+  | ------- | --------------------------------------------------------------- |
+  |  v3.00  | Major set of New features & Enhancements                        |
+  |  v2.70  | New features & Usability improvements in the web prontal        |
+  |  v2.61  | Bug fixing                                                      |
+  |  v2.60  | Improved the compability of installation process (Ubuntu)       |
+  |  v2.56  | Bug fixing                                                      |
+  |  v2.55  | Bug fixing                                                      |
+  |  v2.52  | Bug fixing                                                      |
+  |  v2.51  | Bug fixing                                                      |
+  |  v2.50  | First public release                                            |
+
+
+# 🆕 2022+ [Newest Release notes](https://github.com/jokob-sk/Pi.Alert/issues/138)
+
+## Pi.Alert v3.02
+<!--- --------------------------------------------------------------------- --->
+ **PENDING UPDATE DOC**
+  - Fixed: UNIQUE constraint failed with Local MAC #114
+
+
+## Pi.Alert v3.01
+<!--- --------------------------------------------------------------------- --->
+ **PENDING UPDATE DOC**
+  - Fixed: Problem with local MAC & IP (raspberry) #106
+ 
+
+## Pi.Alert v3.00
+<!--- --------------------------------------------------------------------- --->
+ **PENDING UPDATE DOC**
+  - `arp-scan` config options: interface, several subnets. #101 #15
+  - Next/previos button while editing devices #66 #37
+  - Internet presence/sessions monitoring #63
+  - Logical delete / archive / hide Device #93
+  - Flag to mark device with random MAC's #87
+  - New Device Types predefined in combobox #92
+  - Ask before leave the page with unsaved changes #104
+  - Option to don't mark devices as new during installation #94
+  - Uninstall script #62
+  - Fixed: Error updating name of devices w/o IP #97
+  - Fixed: Deleted devices reappear #84
+  - Fixed: Device running Pi.Alert must be marked as "on-line" #76
+  - Fixed: Incorrect calculation of presence hours #102
+  - Fixed: Problem redirect to homepage clicking in logo #103
+
+
+## Pi.Alert v2.70
+<!--- --------------------------------------------------------------------- --->
+  - Added Client names resolution #43
+  - Added Check to mark devices as "known" #16
+  - Remember "Show XXX entries" dropdown value #16 #26
+  - Remember "sorting" in devices #16
+  - Remember "Device panel " in device detail #16
+  - Added "All" option to "Show x Entries" option #16
+  - Added optional Location field (Door, Basement, etc.) to devices #16
+  - "Device updated successfully" message now is not modal #16
+  - Now is possible to delete Devices #16
+  - Added Device Type Singleboard Computer (SBC) #16
+  - Allowed to use " in device name #42
+
+
+## Pi.Alert v2.60
+<!--- --------------------------------------------------------------------- --->
+  - `pialert.conf` moved from `back` to `config` folder
+  - `pialert.conf` splitted in two files: `pialert.conf` and `version.conf`
+  - Added compatibility with Python 3 (default version installed with Ubuntu)
+  - Added compatibility in the Installation guide with Ubuntu server
+  - Eliminated some unnecessary packages from the installation
+  
+
+
+### License
+  GPL 3.0
+  [Read more here](../LICENSE.txt)
+
+### Contact
+  pi.alert.application@gmail.com

docs/WEBHOOK_N8N.md

@@ -0,0 +1,12 @@
+### Create a simple n8n workflow
+![n8n workflow](https://i.imgur.com/2EGrQjt.png)
+
+### Specify your email template 
+See [sample JSON](https://github.com/jokob-sk/Pi.Alert/blob/main/back/webhook_json_sample.json) if you want to see the JSON paths used in the email template below
+![Email template](https://i.imgur.com/kcVjGm1.png)
+
+### Get your webhook in n8n
+![n8n webhook URL](https://i.imgur.com/clN8eE5.png)
+
+### Configure PiAlert to point to the above URL
+![PiAlert config](https://i.imgur.com/rowJCC7.png)

docs/img/size_h_1250_w_1000.txt

@@ -0,0 +1 @@
+Screenshot size: height: 1250px width: 1000px

docs/report_sample_1.html

@@ -1,3 +1,12 @@
+<!-- ---------------------------------------------------------------------------
+#  Pi.Alert
+#  Open Source Network Guard / WIFI & LAN intrusion detector 
+#
+#  repot_sample.html - Back module. Sample email reporting in HTML format
+#-------------------------------------------------------------------------------
+#  Puche 2021        pi.alert.application@gmail.com        GNU GPLv3
+#--------------------------------------------------------------------------- -->
+
 <html>
 
 <head>

front/css/dark-patch-cal.css

@@ -0,0 +1,17 @@
+.fc-sat {  
+background-color: #444D56; }
+.fc-sun {  
+background-color: #444D56; }
+.fc-today {
+  background-color: #8D9AAC !important;
+  border: none !important;
+} 
+.fc-cell-content {
+	background-color: #272c30;
+}
+.fc-widget-header {
+	background-color: #353c42;
+}
+.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{
+	border-color: #353c42 !important;
+}

front/css/dark-patch.css

@@ -0,0 +1,725 @@
+/* Pi-hole: A black hole for Internet advertisements
+*  (c) 2020 Pi-hole, LLC (https://pi-hole.net)
+*  Network-wide ad blocking via your own hardware.
+*
+*  This file is copyright under the latest version of the EUPL.
+*  Please see LICENSE file for your rights under this license.
+*
+*  The colors used in this theme has been inspired by
+*  https://github.com/anvyst/adminlte-skin-midnight
+*
+* Additional fixes For Pi.Alert UI by leiweibau */
+
+:root {
+  --datatable-bgcolor: rgba(64, 76, 88, 0.8);
+}
+html {
+  background-color: #353c42;
+}
+
+body {
+  background-color: #353c42;
+  color: #bec5cb;
+}
+h4 {
+  color: #44def1;
+}
+.content-header > .breadcrumb > li > a {
+  color: #bec5cb;
+}
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  border-top: 0;
+}
+.table > thead > tr.odd,
+.table > tbody > tr.odd,
+.table > tfoot > tr.odd {
+  background-color: #2a2f34;
+}
+.table > thead > tr.odd:hover,
+.table > tbody > tr.odd:hover,
+.table > tfoot > tr.odd:hover,
+.table > thead > tr.even:hover,
+.table > tbody > tr.even:hover,
+.table > tfoot > tr.even:hover {
+  background-color: #1e2226;
+}
+.table-bordered,
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid #353c42;
+}
+.dataTables_wrapper input[type="search"] {
+  border-radius: 4px;
+  background-color: #353c42;
+  border: 0;
+  color: #bec5cb;
+}
+.dataTables_paginate .pagination li > a {
+  background-color: #353c42;
+  border-color: #353c42;
+}
+.pagination > .disabled > a,
+.pagination > .disabled > a:focus,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > span,
+.pagination > .disabled > span:focus,
+.pagination > .disabled > span:hover {
+  cursor: not-allowed;
+  color: #bec5cb;
+  background-color: #353c42;
+  border-color: #353c42;
+}
+.pagination > li > a:focus,
+.pagination > li > a:hover,
+.pagination > li > span:focus,
+.pagination > li > span:hover {
+  z-index: 2;
+  color: #bec5cb;
+  background-color: #54606b;
+  border-color: #54606b;
+}
+.wrapper,
+.main-sidebar,
+.left-side {
+  background-color: #272c30;
+}
+.user-panel > .info,
+.user-panel > .info > a {
+  color: #fff;
+}
+.sidebar-menu > li.header {
+  color: #556068;
+  background-color: #1e2225;
+}
+.sidebar-menu > li > a {
+  border-left: 3px solid transparent;
+}
+.sidebar-menu > li:hover > a,
+.sidebar-menu > li > a:focus,
+.sidebar-menu > li.active > a {
+  color: #fff;
+  background-color: #22272a;
+  border-color: #3c8dbc;
+}
+.sidebar-menu > li > .treeview-menu {
+  margin: 0 1px;
+  background-color: #32393e;
+}
+.sidebar a {
+  color: #bec5cb;
+}
+.sidebar a:hover {
+  text-decoration: none;
+}
+.treeview-menu > li > a {
+  color: #949fa8;
+}
+.treeview-menu > li.active > a,
+.treeview-menu > li > a:hover,
+.treeview-menu > li > a:focus {
+  color: #fff;
+}
+.sidebar-form {
+  border-radius: 3px;
+  border: 1px solid #3e464c;
+  margin: 10px;
+}
+.sidebar-form input[type="text"],
+.sidebar-form .btn {
+  box-shadow: none;
+  background-color: #3e464c;
+  border: 1px solid transparent;
+  height: 35px;
+}
+.sidebar-form input[type="text"] {
+  color: #666;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 2px;
+}
+.sidebar-form input[type="text"]:focus,
+.sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  background-color: #fff;
+  color: #666;
+}
+.sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  border-left-color: #fff;
+}
+.sidebar-form .btn {
+  color: #999;
+  border-top-left-radius: 0;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 0;
+}
+.box,
+.box-footer,
+.info-box,
+.box-comment,
+.comment-text,
+.comment-text .username {
+  color: #bec5cb;
+  background-color: #272c30;
+}
+.box-comments .box-comment {
+  border-bottom-color: #353c42;
+}
+.box-footer {
+  border-top: 1px solid #353c42;
+}
+.box-header.with-border {
+  border-bottom: 1px solid #353c42;
+}
+.box-solid,
+.box {
+  border: 1px solid #272c30;
+}
+.box-solid > .box-header,
+.box > .box-header {
+  color: #bec5cb;
+}
+.box-solid > .box-header .btn,
+.box > .box-header .btn {
+  color: #bec5cb;
+}
+.box.box-info,
+.box.box-primary,
+.box.box-success,
+.box.box-warning,
+.box.box-danger {
+  border-top-width: 3px;
+}
+.main-header .navbar {
+  background-color: #272c30;
+}
+.main-header .navbar .nav > li > a,
+.main-header .navbar .nav > li > .navbar-text {
+  color: #bec5cb;
+  max-height: 50px;
+}
+.main-header .navbar .nav > li > a:hover,
+.main-header .navbar .nav > li > a:active,
+.main-header .navbar .nav > li > a:focus,
+.main-header .navbar .nav .open > a,
+.main-header .navbar .nav .open > a:hover,
+.main-header .navbar .nav .open > a:focus,
+.main-header .navbar .nav > .active > a {
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #f6f6f6;
+}
+.main-header .navbar .sidebar-toggle {
+  color: #bec5cb;
+}
+.main-header .navbar .sidebar-toggle:hover {
+  color: #f6f6f6;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.timeline li .timeline-item {
+  color: #bec5cb;
+  background-color: #272c30;
+  border-color: #353c42;
+}
+.timeline li .timeline-header {
+  border-bottom-color: #353c42;
+}
+.nav-stacked > li > a {
+  color: #bec5cb;
+}
+.nav-stacked > li > a:hover {
+  color: white;
+  background-color: #1e2226;
+}
+.content-wrapper,
+.right-side {
+  background-color: #353c42;
+}
+.main-footer,
+.nav-tabs-custom {
+  background-color: #272c30;
+  border-top-color: #353c42;
+  color: #bec5cb;
+}
+.main-footer .nav-tabs,
+.nav-tabs-custom .nav-tabs {
+  background-color: #30383f;
+  border-bottom-color: #2f363b;
+}
+.main-footer .tab-content,
+.nav-tabs-custom .tab-content {
+  background-color: #30383f;
+}
+.nav-tabs-custom > .nav-tabs {
+  background: rgba(64, 72, 80, 0.666);
+}
+.nav-tabs-custom > .nav-tabs > li {
+  margin-right: 1px;
+  color: #bec5cb;
+}
+.nav-tabs-custom > .nav-tabs > li.active > a,
+.nav-tabs-custom > .nav-tabs > li.active:hover > a {
+  border-left-color: #30383f;
+  border-right-color: #30383f;
+  background-color: #30383f;
+  color: #bec5cb;
+}
+.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
+  border-top-color: #d2d6de;
+  background-color: transparent;
+}
+.nav-tabs-custom > .nav-tabs > li > a {
+  color: #8e959b;
+}
+.nav-tabs-custom > .nav-tabs > li > a:focus {
+  color: #3c8dbc;
+}
+.nav-tabs-custom > .nav-tabs > li:hover > a,
+.nav-tabs-custom > .nav-tabs > li.active:hover > a {
+  background-color: #353c42;
+  color: #bec5cb;
+}
+
+.list-group {
+  color: #bec5cb;
+  background-color: #272c30;
+}
+.list-group .list-group-item {
+  border-color: #353c42;
+  background-color: #272c30;
+}
+.input-group .input-group-addon {
+  border-right: 1px solid #272c30;
+}
+.select2 .select2-selection {
+  background-color: #353c42;
+  color: #bec5cb;
+  border: 1px solid #353c42;
+}
+.select2 .select2-selection .select2-container--default,
+.select2 .select2-selection .select2-selection--single,
+.select2 .select2-selection .select2-selection--multiple,
+.select2 .select2-selection .select2-selection__rendered {
+  color: #bec5cb;
+}
+.select2-dropdown {
+  background-color: #353c42;
+  color: #bec5cb;
+  border: 1px solid #353c42;
+}
+.select2-dropdown .select2-search__field {
+  background-color: #272c30;
+  color: #bec5cb;
+  border: 1px solid #353c42;
+}
+.select2-container--default.select2-container--open {
+  background-color: #272c30;
+}
+
+.layout-boxed {
+  background: url("../../img/boxed-bg-dark.png") repeat fixed;
+}
+.not-used {
+  background-color: #eee;
+}
+.not-used:hover {
+  background-color: #c5c5c5;
+}
+.used {
+  background-color: #fff;
+}
+.used:hover {
+  background-color: #ddd;
+}
+
+.graphs-grid {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.graphs-ticks {
+  color: #b8c7ce;
+}
+.queries-permitted {
+  background-color: #00a65a;
+}
+.queries-blocked {
+  background-color: #999;
+}
+.progress {
+  background-color: #333;
+}
+
+.bg-green {
+  background-color: #005c32 !important;
+}
+.bg-aqua {
+  background-color: #007997 !important;
+}
+.bg-yellow {
+  background-color: #b1720c !important;
+}
+.bg-red {
+  background-color: #913225 !important;
+}
+
+code,
+pre {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #bec5cb;
+  background-color: #353c42;
+  border-radius: 4px;
+}
+
+/* Used in the Query Log table */
+.text-green-light {
+  color: #5ca314 !important;
+}
+.text-green {
+  color: #00aa60 !important;
+}
+.text-orange {
+  color: #b1720c !important;
+}
+.text-red {
+  color: #bd2c19 !important;
+}
+.text-vivid-blue {
+  color: #007997 !important;
+}
+td.highlight {
+  background-color: rgba(255, 204, 0, 0.333);
+}
+.btn-default {
+  box-shadow: none;
+  background-color: #3e464c;
+  color: #bec5cb;
+  border: 1px solid #353c42;
+}
+
+/* Used in debug log page */
+.log-red {
+  color: #ff4038;
+}
+.log-green {
+  color: #4c4;
+}
+.log-yellow {
+  color: #fb0;
+}
+.log-blue {
+  color: #48f;
+}
+.log-purple {
+  color: #b8e;
+}
+.log-cyan {
+  color: #0df;
+}
+.log-gray {
+  color: #999;
+}
+
+#output {
+  border-color: #505458;
+  background: #272c30;
+}
+
+/* Used by the long-term pages */
+.daterangepicker {
+  background-color: #3e464c;
+  border-radius: 4px;
+  border: 1px solid #353c42;
+}
+.daterangepicker .ranges li:hover {
+  background-color: #353c42;
+}
+.daterangepicker .ranges li.active {
+  background-color: #1e2226; /* Color also used in table pagination */
+}
+.daterangepicker .calendar-table {
+  background-color: #3e464c;
+  border-radius: 4px;
+  border: 1px solid #353c42;
+}
+.daterangepicker td.off,
+.daterangepicker td.off.in-range,
+.daterangepicker td.off.start-date,
+.daterangepicker td.off.end-date {
+  background-color: #485158;
+}
+.daterangepicker td.available:hover,
+.daterangepicker th.available:hover {
+  background-color: #1e2226;
+}
+.daterangepicker td.active,
+.daterangepicker td.active:hover,
+.daterangepicker td.in-range:hover {
+  background-color: #225e92;
+}
+.daterangepicker td.in-range {
+  background-color: #1e2226;
+  color: #bec5cb;
+}
+input,
+select,
+select.form-control,
+.form-group .input-group-addon,
+.input-group .input-group-addon,
+.form-group input,
+.input-group input,
+.form-group textarea,
+.input-group textarea,
+.daterangepicker select.hourselect,
+.daterangepicker select.minuteselect,
+.daterangepicker select.secondselect,
+.daterangepicker select.ampmselect,
+.form-control,
+div.dataTables_wrapper div.dataTables_length select {
+  background-color: #353c42;
+  color: #bec5cb;
+  border: 1px solid #3d444b;
+}
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  background-color: #353c42;
+  opacity: 1;
+}
+.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
+  background-color: #4c5761;
+  color: #bec5cb;
+  border: 1px solid #171c20;
+}
+.table-striped > tbody > tr:nth-of-type(2n + 1) {
+  background-color: #2d343a;
+}
+.panel,
+.panel-body,
+.panel-default > .panel-heading {
+  background-color: #3e464c;
+  border-radius: 4px;
+  border: 1px solid #353c42;
+  color: #bec5cb;
+}
+.box.box-solid.box-info,
+.box.box-solid.box-info > .box-header {
+  color: #bec5cb;
+  background-color: #367fa9 !important;
+  border: 1px solid #367fa9;
+}
+input[type="password"]::-webkit-credentials-auto-fill-button {
+  background: #bfc5ca;
+}
+input[type="password"]::-webkit-caps-lock-indicator {
+  filter: invert(100%);
+}
+
+.network-never {
+  background-color: #661b02;
+}
+.network-recent {
+  background-color: #114100;
+}
+.network-old {
+  background-color: #525200;
+}
+.network-older {
+  background-color: #502b00;
+}
+.network-gradient {
+  background-image: linear-gradient(to right, #114100 0%, #525200 100%);
+}
+
+.icheckbox_polaris,
+.icheckbox_futurico,
+.icheckbox_minimal-blue {
+  margin-right: 10px;
+}
+.iradio_polaris,
+.iradio_futurico,
+.iradio_minimal-blue {
+  margin-right: 8px;
+}
+
+/* Overlay box with spinners as shown during data collection for graphs */
+.box .overlay,
+.overlay-wrapper .overlay {
+  z-index: 50;
+  background-color: rgba(53, 60, 66, 0.733);
+  border-radius: 3px;
+}
+.box .overlay > .fa,
+.overlay-wrapper .overlay > .fa,
+.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
+  color: #bec5cb !important;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
+  background-color: #353c42bb;
+  padding: 10px;
+}
+
+.modal-content {
+  background: #272c30;
+}
+.modal-header {
+  border-bottom-color: #353c42;
+}
+.modal-footer {
+  border-top-color: #353c42;
+}
+.close {
+  color: #383838;
+}
+
+/*** Fix login input visual misalignment ***/
+#loginform,
+#loginform input {
+  color: rgb(120, 127, 133);
+}
+
+.login-options input,
+.login-options [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before,
+.login-options [class*="icheck-"] > input:first-child + label::before {
+  background: none;
+  border-color: rgb(120, 127, 133);
+}
+
+/*** Additional fixes For Pi.Alert UI ***/
+.small-box {
+    border-radius: 10px;
+    border-top: 0px;
+}
+.pa-small-box-aqua .inner {
+  background-color: rgb(45,108,133);
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.pa-small-box-green .inner {
+  background-color: rgb(31,76,46);
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.pa-small-box-yellow .inner {
+  background-color: rgb(151,104,37);
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.pa-small-box-red .inner {
+  background-color: rgb(120,50,38);
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.pa-small-box-gray .inner {
+  background-color: #777;
+  /* color: rgba(20,20,20,30%); */
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.pa-small-box-gray .inner h3 {
+  color:  #bbb;
+}
+.text-gray-20 {
+  color: rgba(220,220,220,30%);
+}
+.bg-gray {
+  background-color: #888888 !important;
+}
+.badge.bg-green {
+    background-color: #00A000 !important;
+}
+.badge.bg-gray {
+    background-color: #888 !important;
+}
+#txtRecord {
+  background-color: #353c42;
+  border-color: #888888;
+}
+.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+  background-color: rgb(189,192,198);
+  color: #444;
+}
+
+.db_info_table_cell:nth-child(1) {background: #272c30}
+.db_info_table_cell:nth-child(2) {background: #272c30}
+.db_tools_table_cell_a:nth-child(1) {background: #272c30}
+.db_tools_table_cell_a:nth-child(2) {background: #272c30}
+.db_tools_table_cell_b:nth-child(1) {background: #272c30}
+.db_tools_table_cell_b:nth-child(2) {background: #272c30}
+
+.db_info_table { 
+   display: table;
+   border-spacing: 0em;
+   font-weight: 400;
+   font-size: 15px;
+   width: 100%;
+   margin: auto;
+}
+
+.nav-tabs-custom > .nav-tabs > li:hover > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+  background-color: #272c30;
+  color: #bec5cb;
+}
+
+.nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+  border-left-color: #30383f;
+  border-right-color: #30383f;
+  background-color: #272c30;
+  color: #bec5cb;
+}
+.nav-tabs-custom > .nav-tabs {
+  background-color: #353c42;
+}
+.nav-tabs-custom .tab-content {
+  background-color: #272c30;
+}
+.top_small_box_gray_text {
+  color: white !important;
+}
+
+/* remove white border that appears on mobile screen sizes */
+.box-body {
+    border: 0px;
+}
+/* remove white border that appears on mobile screen sizes */
+.table-responsive {
+  border: 0px;
+}
+
+.login-page {
+  background-color: transparent;
+}
+
+.login-logo a {
+  color: white;
+}
+
+.login-box-body {
+  color: #bec5cb;
+  background-color: #272c30;
+}
+/* Add border radius to bottom of the status boxes*/
+.pa-small-box-footer {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.small-box > .inner h3, .small-box > .inner p {
+  margin-bottom: 0px;
+  margin-left: 0px;
+}
+.small-box:hover .icon {
+  font-size: 3.74em;
+}
+.small-box .icon { 
+  top: 0.01em;
+  font-size: 3.25em;
+}

front/css/offline-font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('font/SourceSans3-Regular.otf.woff2') format('woff2');
+}

front/css/pialert.css

@@ -1,51 +1,104 @@
-/*******************************************************************************
-*  Pi.alert CSS
-*******************************************************************************/
+/* -----------------------------------------------------------------------------
+#  Pi.Alert
+#  Open Source Network Guard / WIFI & LAN intrusion detector 
+#
+#  pialert.css - Front module. CSS styles
+#-------------------------------------------------------------------------------
+#  Puche 2021 / 2022+ jokob             jokob@duck.com                GNU GPLv3
+----------------------------------------------------------------------------- */
 
 /* -----------------------------------------------------------------------------
    Global Variables
 ----------------------------------------------------------------------------- */
 :root {
-    --color-aqua:   #00c0ef;
-    --color-green:  #00a65a;
+    --color-aqua: #00c0ef;
+    --color-green: #00a65a;
     --color-yellow: #f39c12;
-    --color-red:    #dd4b39;
+    --color-red: #dd4b39;
 }
 
-
 /* -----------------------------------------------------------------------------
    Text Classes
 ----------------------------------------------------------------------------- */
+.logs
+{
+  color:white;
+  background-color: black;
+  font-family: 'Courier New', monospace;
+  
+}
+.logs-row
+{
+    align-content: center;
+    width: 100%;
+    display: grid;
+    margin: 5px;
+}
+.logs-size
+{
+    font-size: 14px;
+}
+.log-area
+{
+    padding: 3px;    
+    width:100%;    
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: #606060;
+}
+.logs-small
+{
+    height: 100px;
+}
+.log-file
+{
+    width: 145px;
+    display: inline-grid;
+    font-size: 20px;
+}
+.log-purge
+{
+    width: 90px;
+    float:right;
+}
+.span-padding
+{
+    padding:10px;
+}
 .text-center {
-  text-align: center;
+    text-align: center;
 }
 
 .text-right {
-  text-align: right;
+    text-align: right;
 }
 
 .text-white {
-  color: white;
+    color: white;
 }
 
 .text-gray50 {
-  color: #808080;
+    color: #808080;
+}
+
+.text-gray-20 {
+    color: rgba(192, 192, 192, 20%);
 }
 
 .text-aqua-20 {
-  color: rgba(0,192,239,20%);
+    color: rgba(0, 192, 239, 20%);
 }
 
 .text-green-20 {
-  color: rgba(0,166,90,20%);
+    color: rgba(0, 166, 90, 20%);
 }
 
 .text-yellow-20 {
-  color: rgba(243,156,18,20%);
+    color: rgba(243, 156, 18, 20%);
 }
 
 .text-red-20 {
-  color: rgba(221,75,57,20%);
+    color: rgba(221, 75, 57, 20%);
 }
 
 .no-border {
@@ -56,82 +109,100 @@
    Main Sections
 ----------------------------------------------------------------------------- */
 .content-header {
-  padding-top: 5px;
+    padding-top: 5px;
 }
 
-.content-header > .breadcrumb {
-  background: transparent;
+.content-header>.breadcrumb {
+    background: transparent;
 }
 
 .content {
-  padding-bottom: 0px;
+    padding-bottom: 0px;
 }
 
 .box-body {
-  padding-top: 0px;
-  padding-bottom: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
 }
 
 .main-footer {
-  padding: 5px;
-  color: gray;
+    padding: 5px;
+    color: gray;
 }
 
+.header-server-time
+{
+    padding:8px;
+    color: white;
+} 
 
+.header-status
+{
+    padding:0px;
+}
+.header-status:hover
+{
+    background-color: rgba(0, 0, 0, 0);
+}
+.navbar-nav > li > a
+{
+    line-height: 30px;
+}
 /* -----------------------------------------------------------------------------
    Customized Main Menu
 ----------------------------------------------------------------------------- */
 .main-header .logo {
-  width: 150px;
+    width: 150px;
 }
 
-.main-header > .navbar {
-  margin-left: 150px;
+.main-header>.navbar {
+    margin-left: 150px;
 }
 
-.main-sidebar, .left-side {
-  width: 150px;
+.main-sidebar,
+.left-side {
+    width: 150px;
 }
 
-.content-wrapper, .right-side, .main-footer {
-  margin-left: 150px;
+.content-wrapper,
+.right-side,
+.main-footer {
+    margin-left: 150px;
 }
 
 @media (max-width: 767px) {
-  .main-header .logo {
-    width: 100%;
-  }
+    .main-header .logo {
+        width: 100%;
+    }
 
-  .main-header .navbar {
-    margin: 0;
-  }
-
-  .content-wrapper, .main-footer {
-    margin-left: 0px;
-  }
+    .main-header .navbar {
+        margin: 0;
+    }
 
+    .content-wrapper,
+    .main-footer {
+        margin-left: 0px;
+    }
 }
 
-.sidebar-open .content-wrapper, .sidebar-open .main-footer {
+.sidebar-open .content-wrapper,
+.sidebar-open .main-footer {
     -webkit-transform: translate(150px, 0);
     -ms-transform: translate(150px, 0);
     -o-transform: translate(150px, 0);
     transform: translate(150px, 0)
 }
 
-
-.skin-yellow-light .sidebar-menu > li > a:hover {
+.skin-yellow-light .sidebar-menu>li>a:hover {
     background: #f0f0f0;
     border-left-color: rgb(243, 156, 18);
 }
 
-.skin-yellow-light .sidebar-menu > li.active > a {
+.skin-yellow-light .sidebar-menu>li.active>a {
     background: #e0e0e0;
     border-left-color: rgb(243, 156, 18);
 }
 
-
-
 /* -----------------------------------------------------------------------------
    Customized Boxes
 ----------------------------------------------------------------------------- */
@@ -142,170 +213,217 @@
 }
 
 .pa-small-box-2 .inner h3 {
-  margin-left: 0em;
-  margin-bottom: 1.3em;
+    margin-left: 0em;
+    margin-bottom: 1.3em;
 }
 
+.pa-small-box-footer {
+    color: white !important;
+    font-size: 18px;
+}
+
+/* -------------------------------------------------------------------------- */
 .pa-small-box-aqua {
-  border-top: 3px solid #00c0ef;
-  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+    /* border-top: 3px solid #00c0ef; */
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
 }
 
 .pa-small-box-aqua .inner {
-  color: #00c0ef;
-  background-color:#FFFFFF;
+    color: #00c0ef;
+    background-color: #FFFFFF;
 }
 
 .pa-small-box-aqua .inner h3 {
-  margin-left: 0.5em;
+    margin-left: 0.5em;
 }
 
 .pa-small-box-aqua .icon {
-  color: #00c0ef;
+    color: #00c0ef;
 }
 
-
-
 /* -------------------------------------------------------------------------- */
 .pa-small-box-green {
-  border-top: 3px solid #00a65a;
-  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+    /* border-top: 3px solid #00a65a; */
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
 }
 
 .pa-small-box-green .inner {
-  color: #00a65a;
-  background-color:#FFFFFF;
+    color: #00a65a;
+    background-color: #FFFFFF;
 }
 
 .pa-small-box-green .inner h3 {
-  margin-left: 0.5em;
+    margin-left: 0.5em;
 }
 
 .pa-small-box-green .icon {
-  color: #00a65a;
+    color: #00a65a;
 }
 
 /* -------------------------------------------------------------------------- */
-.pa-small-box-yellow {                                                          
-  border-top: 3px solid #f39c12;
-  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+.pa-small-box-yellow {
+    /* border-top: 3px solid #f39c12; */
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
 }
 
 .pa-small-box-yellow .inner {
-  color: #f39c12;
-  background-color:#FFFFFF;
+    color: #f39c12;
+    background-color: #FFFFFF;
 }
 
 .pa-small-box-yellow .inner h3 {
-  margin-left: 0.5em;
+    margin-left: 0.5em;
 }
 
 .pa-small-box-yellow .icon {
-  color: #f39c12;
+    color: #f39c12;
 }
 
 /* -------------------------------------------------------------------------- */
 .pa-small-box-red {
-  border-top: 3px solid #dd4b39;
-  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+    /* border-top: 3px solid #dd4b39; */
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
 }
 
 .pa-small-box-red .inner {
-  color: #dd4b39;
-  background-color:#FFFFFF;
+    color: #dd4b39;
+    background-color: #FFFFFF;
 }
 
 .pa-small-box-red .inner h3 {
-  margin-left: 0.5em;
+    margin-left: 0.5em;
 }
 
 .pa-small-box-red .icon {
-  color: #dd4b39;
+    color: #dd4b39;
+}
+
+/* -------------------------------------------------------------------------- */
+.pa-small-box-gray {
+    /* border-top: 3px solid #a0a0a0; */
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+}
+
+.pa-small-box-gray .inner {
+    color: #a0a0a0;
+    background-color: #FFFFFF;
+}
+
+.pa-small-box-gray .inner h3 {
+    margin-left: 0.5em;
+}
+
+.pa-small-box-gray .icon {
+    color: #a0a0a0;
 }
 
- 
 /* -----------------------------------------------------------------------------
    Customized Box Borders
 ----------------------------------------------------------------------------- */
-.box.box-aqua {
-  border-top-color: #00c0ef;
+/* .box.box-aqua {
+    border-top-color: #00c0ef;
 }
 
 .box.box-green {
-  border-top-color: #00a65a;
+    border-top-color: #00a65a;
 }
 
 .box.box-yellow {
-  border-top-color: #f39c12;
+    border-top-color: #f39c12;
 }
 
 .box.box-red {
-  border-top-color: #dd4b39;
-}
-
+    border-top-color: #dd4b39;
+} */
 
 /* -----------------------------------------------------------------------------
    Custom Border
 ----------------------------------------------------------------------------- */
 .bottom-border-aqua {
-  border-bottom-color: #00c0ef;
-  border-bottom-style: solid;
-  border-bottom-width: 3px
+    border-bottom-color: #00c0ef;
+    border-bottom-style: solid;
+    border-bottom-width: 3px
 }
 
 .bottom-border-primary {
-  border-bottom-color: #3c8dbc;
-  border-bottom-style: solid;
-  border-bottom-width: 3px
+    border-bottom-color: #3c8dbc;
+    border-bottom-style: solid;
+    border-bottom-width: 3px
 }
 
-
 /* -----------------------------------------------------------------------------
    Customized Tabs
 ----------------------------------------------------------------------------- */
 .nav-tabs-custom {
-  background: transparent;
+    background: transparent;
 }
 
-.nav > li > a {
+.nav>li>a {
     position: relative;
     display: block;
     padding: 10px 10px;
 }
 
-
 /* -----------------------------------------------------------------------------
    Customized Menu dropdown
 ----------------------------------------------------------------------------- */
 .dropdown-menu {
     max-height: 250px;
     overflow-x: hidden;
-    box-shadow: 0px 3px 20px rgba(0,0,0,0.2);
+    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
 }
 
-
 /* -----------------------------------------------------------------------------
    Default Table config
 ----------------------------------------------------------------------------- */
-.table > tbody > tr > td {
-  padding:4px;
+.table>tbody>tr>td {
+    padding: 4px;
 }
 
-.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
-  background-color: #FFFFD0;
+.table-hover tbody tr:hover td,
+.table-hover tbody tr:hover th {
+    background-color: #FFFFD0;
 }
 
-.dataTables_info, .dataTables_paginate, .dataTables_length, .dataTables_filter {
-  color: #B0B0B0;
+.dataTables_info,
+.dataTables_paginate,
+.dataTables_length,
+.dataTables_filter {
+    color: #B0B0B0;
 }
 
+/* -----------------------------------------------------------------------------
+   Customized buttons
+----------------------------------------------------------------------------- */
+.pa-btn {
+    padding: 10px;
+    min-width: 90px;
+}
 
+.pa-btn-delete {
+    border-color: #ffb060;
+    background-color: #ffd080;
+}
+
+.pa-btn-delete:hover {
+    border-color: #ffb060;
+    background-color: #ffb060;
+}
+
+.pa-btn-records,
+.pa-btn-records:hover,
+.pa-btn-records:focus,
+.pa-btn-records:active {
+    border-color: #ddd;
+    background-color: #f4f4f4;
+    cursor: default;
+}
 
 /* -----------------------------------------------------------------------------
    Customized Full Calendar
 ----------------------------------------------------------------------------- */
 .fc h2 {
-   font-size: 20px;
+    font-size: 20px;
 }
 
 .fc-weekend {
@@ -324,7 +442,9 @@
     background-color: #FFF0E0;
 }
 
-.fc-resized-row { height: 26px !important; }
+.fc-resized-row {
+    height: 26px !important;
+}
 
 .fc-transparent-border {
     border-Color: transparent !important;
@@ -339,35 +459,339 @@
     border-right: 5px solid #606060;
 }
 
-
-
 /* -----------------------------------------------------------------------------
    Spin
 ----------------------------------------------------------------------------- */
 .pa_semitransparent-panel {
     position: absolute;
-    width:    100%; //calc (100% -40px);
-    height:   100%;
+    width: 100%; /*calc (100% -40px);*/
+    height: 100%;
     left: 0;
     top: 0;
-    display:  block;
+    display: block;
 
-    opacity:          0.8;
+    opacity: 0.8;
     background-color: #fff;
-    z-index:          99;
+    z-index: 99;
 }
 
 .pa_spinner {
-    position:     absolute;
-    left:         0;
-    right:        0;
-    top:          20px;
-    margin-left:  auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 20px;
+    margin-left: auto;
     margin-right: auto;
-    padding:      15px;
-    width:        200px;
+    padding: 15px;
+    width: 200px;
 
     background-color: #fff;
-    z-index:          100;
+    z-index: 100;
 }
 
+/* -----------------------------------------------------------------------------
+   Notification float banner
+----------------------------------------------------------------------------- */
+.pa_alert_notification {
+    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 */
+    width: 80%;
+    z-index: 9999;
+
+    position: fixed;
+    top: 30px;
+    margin: auto;
+    transform: translate(0, 0);
+
+    display: none;
+}
+
+.dbtools-button {
+    display: inline-block;
+    width: 160px;
+    height: 60px;
+    white-space: normal;
+    word-wrap: break-word;
+    font-size: 16px;
+    padding: 4px;
+}
+
+.db_info_table_cell:nth-child(1) {
+    background: white
+}
+
+.db_info_table_cell:nth-child(2) {
+    background: white
+}
+
+.db_tools_table_cell_a:nth-child(1) {
+    background: white
+}
+
+.db_tools_table_cell_a:nth-child(2) {
+    background: white
+}
+.db_tools_table_cell_b:nth-child(1) {
+    background: white
+}
+
+.db_tools_table_cell_b:nth-child(2) {
+    background: white
+}
+.db_info_table {
+    display: table;
+    border-spacing: 0em;
+    font-weight: 400;
+    font-size: 15px;
+    width: 100%;
+    margin: auto;
+}
+
+.db_info_table_row {
+    display: table-row;
+    padding: 3px;
+}
+
+.db_info_table_cell {
+    display: table-cell;
+    padding: 3px;
+    padding-left: 10px;
+}
+
+.db_tools_table_cell_a {
+    display: table-cell;
+    text-align: center; 
+    padding: 10px; 
+    min-width: 180px; 
+    width: 20%; 
+    vertical-align: middle;
+}
+.db_tools_table_cell_b {
+    display: table-cell;
+    text-align: justify; 
+    font-size: 16px; 
+    vertical-align: middle;
+    padding: 10px;
+}
+
+.ajax_scripts_loading {
+background-image: url('../img/Loading_Animation.gif');
+background-repeat: no-repeat;
+background-position: center;
+height: 50px;
+}
+
+.nav-tabs-custom .tab-content {
+  background-color: white;
+}
+
+.top_small_box_gray_text {
+  color: white !important;
+}
+
+.bg-gray {
+    background-color: #b2b6be !important;
+}
+
+.infobox_label {
+    font-size: 16px !important;
+}
+
+/*settings*/
+
+@media (max-width: 767px) {
+    /* hide on mobile */
+    .setting_description {
+      /* color: red; */
+      display: none;
+    }
+    .setting_input{
+        width:70%;
+        /* background-color: red; */
+    }
+    .setting_name
+    {
+        width:30%;         
+    }
+  }
+  @media (min-width: 768px) {
+    .setting_description {        
+        /* color: green; */
+        display: block;
+    }
+    .setting_input{
+        width:35%;        
+        /* background-color: green; */
+    }
+    .setting_name
+    {
+        width:19%;         
+    }
+  }
+
+.table_row {    
+    padding: 3px;    
+    width:100%;
+    display: flex;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: #606060;
+}
+
+.table_cell {
+    float:left;
+    padding: 3px;
+    padding-left: 10px;
+}
+
+
+
+.setting_name
+{
+   /* width:19%; */
+    font-weight: 300;    
+}
+
+.setting_description
+{
+    width:46%;
+}
+
+.myhidden
+{
+    display:none;
+}
+
+.center 
+{
+    margin: 0;
+    position: relative;    
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.top-margin 
+{
+    margin-top: 50px;
+}
+
+.settings_content {
+    padding: 10px;
+    /* background-color: #272c30; */
+    margin: 10px;
+    
+}
+#settingsPage .panel-heading:hover{    
+    background-color: #272c30;
+}
+
+.settings-expand-icon {
+    font-size: medium;
+    /* background-color: #272c30; */
+    margin: 10px;
+    
+}
+
+.settings_content input[type=checkbox] 
+{ 
+    width: auto 
+}
+
+
+/* Devices */
+.drp-edit
+{
+    cursor: pointer;
+}
+
+.new-version
+{   
+    top: -6px;
+    position: absolute;
+    z-index: 1;
+    left: 0px;
+    font-size: large;
+}
+
+.pointer
+{
+    cursor:pointer;
+}
+.db_info_table_row .select2-container--default .select2-selection--multiple .select2-selection__choice
+{
+    background-color:#258744;
+}
+.db_info_table_row .select2-container--default .select2-selection--multiple
+{
+    background-color:#606060;
+}
+
+.select2-container .select2-dropdown
+{
+    background-color:#606060;
+}
+
+#networkTree .box
+{
+    padding:2px;
+    margin:2px;
+}
+#networkTree .netNodeText
+{
+    top: 2px;
+    margin: 2px;    
+    position: absolute;
+}
+#networkTree
+{
+    margin-left: 16px;
+    /* border: solid;
+    border-color:#606060;     */
+    position: relative;
+    font-size: 0.75em;
+}
+#networkTree .netIcon
+{
+    width: 25px;;
+    float:left;
+    display:inline;    
+}
+#networkTree .netCollapse
+{
+    display: block;
+    position: absolute;
+    margin-left: 156px;
+    top: -3px;
+    font-size: large;
+    left: -15px;
+}
+#networkTree .highlightedNode
+{
+    border: solid;
+    border-color:cyan;
+}
+#networkTree .netStatus-Off-line i
+{
+    color: #dd4b39;
+}
+
+.spanNetworkTree {
+    display: inline-block;
+    width: 120px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+}
+
+
+  

front/devices.php

@@ -1,6 +1,24 @@
-<!-- ----------------------------------------------------------------------- -->
+<!-- ---------------------------------------------------------------------------
+#  Pi.Alert
+#  Open Source Network Guard / WIFI & LAN intrusion detector 
+#
+#  devices.php - Front module. Devices list page
+#-------------------------------------------------------------------------------
+#  Puche 2021 / 2022+ jokob             jokob@duck.com                GNU GPLv3
+#--------------------------------------------------------------------------- -->
+
 <?php
+
   require 'php/templates/header.php';
+  require 'php/templates/graph.php';
+  require 'php/server/util.php';
+  
+
+  // check permissions
+  $dbPath = "../db/pialert.db";
+  $confPath = "../config/pialert.conf";
+
+  checkPermissions([$dbPath, $confPath]);
 ?>
 
 <!-- Page ------------------------------------------------------------------ -->
@@ -9,139 +27,137 @@
 <!-- Content header--------------------------------------------------------- -->
     <section class="content-header">
       <h1 id="pageTitle">
-         Devices
+           <?php echo lang('Device_Title');?>
       </h1>
-
-      <!-- period selector -->
-      <span class="breadcrumb text-gray50">
-        New Devices period:  
-        <select id="period" onchange="javascript: periodChanged();">
-          <option value="1 day">Today</option>
-          <option value="7 days">Last Week</option>
-          <option value="1 month" selected>Last Month</option>
-          <option value="1 year">Last Year</option>
-          <option value="100 years">All info</option>
-        </select>
-      </span>
-
     </section>
 
 <!-- Main content ---------------------------------------------------------- -->
     <section class="content">
+
+<!-- top small box 1 ------------------------------------------------------- -->
       <div class="row">
-
-<!-- top small box --------------------------------------------------------- -->
-        <div class="col-lg-3 col-sm-6 col-xs-6">
-          <a href="#" onclick="javascript: queryList('all');">
-            <div class="small-box bg-aqua pa-small-box-aqua">
-              <div class="inner">
-  
-                <h4>Total Devices</h4>
-                <h3 id="devicesAll"> -- </h3>
-  
-              </div>
-              <div class="icon">
-                <i class="fa fa-laptop"></i>
-              </div>
-              <div class="small-box-footer">
-                Details <i class="fa fa-arrow-circle-right"></i>
-              </div>
+        <div class="col-lg-2 col-sm-4 col-xs-6">
+          <a href="#" onclick="javascript: getDevicesList('all');">
+          <div class="small-box bg-aqua">
+            <div class="inner"><h3 id="devicesAll"> -- </h3>
+                <p class="infobox_label"><?php echo 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: getDevicesList('connected');">
+          <div class="small-box bg-green">
+            <div class="inner"><h3 id="devicesConnected"> -- </h3>
+                <p class="infobox_label"><?php echo 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 --------------------------------------------------------- -->
-        <div class="col-lg-3 col-sm-6 col-xs-6">
-          <a href="#" onclick="javascript: queryList('connected');">
-            <div class="small-box bg-green pa-small-box-green">
-              <div class="inner">
-  
-                <h4>Connected</h4>
-                <h3 id="devicesConnected"> -- </h3>
-  
-              </div>
-              <div class="icon">
-                <i class="fa fa-plug"></i>
-              </div>
-              <div class="small-box-footer">
-                Details <i class="fa fa-arrow-circle-right"></i>
-              </div>
+<!-- top small box 3 ------------------------------------------------------- -->
+        <div class="col-lg-2 col-sm-4 col-xs-6">
+          <a href="#" onclick="javascript: getDevicesList('favorites');">
+          <div class="small-box bg-yellow">
+            <div class="inner"><h3 id="devicesFavorites"> -- </h3>
+                <p class="infobox_label"><?php echo 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 --------------------------------------------------------- -->
-        <div class="col-lg-3 col-sm-6 col-xs-6">
-          <a href="#" onclick="javascript: queryList('new');">
-            <div  class="small-box bg-yellow pa-small-box-yellow">
-              <div class="inner">
-  
-                <h4>New Devices</h4>
-                <h3 id="devicesNew"> -- </h3>
-  
-              </div>
-              <div class="icon">
-                <i class="ion ion-plus-round"></i>
-              </div>
-              <div class="small-box-footer">
-                Details <i class="fa fa-arrow-circle-right"></i>
-              </div>
+<!-- top small box 4 ------------------------------------------------------- -->
+        <div class="col-lg-2 col-sm-4 col-xs-6">
+          <a href="#" onclick="javascript: getDevicesList('new');">
+          <div class="small-box bg-yellow">
+            <div class="inner"><h3 id="devicesNew"> -- </h3>
+                <p class="infobox_label"><?php echo 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 --------------------------------------------------------- -->
-        <div class="col-lg-3 col-sm-6 col-xs-6">
-          <a href="#" onclick="javascript: queryList('down');">
-            <div  class="small-box bg-red pa-small-box-red">
-              <div class="inner">
-  
-                <h4>Down Alerts</h4>
-                <h3 id="devicesDown"> -- </h3>
-  
-              </div>
-              <div class="icon">
-                <i class="fa fa-warning"></i>
-              </div>
-              <div class="small-box-footer">
-                Details <i class="fa fa-arrow-circle-right"></i>
-              </div>
+<!-- top small box 5 ------------------------------------------------------- -->
+        <div class="col-lg-2 col-sm-4 col-xs-6">
+          <a href="#" onclick="javascript: getDevicesList('down');">
+          <div class="small-box bg-red">
+            <div class="inner"><h3 id="devicesDown"> -- </h3>
+                <p class="infobox_label"><?php echo 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: getDevicesList('archived');">
+          <div class="small-box bg-gray top_small_box_gray_text">
+            <div class="inner"><h3 id="devicesArchived"> -- </h3>
+                <p class="infobox_label"><?php echo lang('Device_Shortcut_Archived');?></p>
+            </div>
+            <div class="icon"><i class="fa fa-eye-slash text-gray-40"></i></div>
+          </div>
           </a>
         </div>
 
       </div>
-      <!-- /.row -->
+
+<!-- Activity Chart ------------------------------------------------------- -->
+
+      <div class="row">
+          <div class="col-md-12">
+          <div class="box" id="clients">
+              <div class="box-header with-border">
+                <h3 class="box-title"><?php echo lang('Device_Shortcut_OnlineChart');?> </h3>
+              </div>
+              <div class="box-body">
+                <div class="chart">
+                  <script src="lib/AdminLTE/bower_components/chart.js/Chart.js"></script>
+                  <canvas id="OnlineChart" style="width:100%; height: 150px;  margin-bottom: 15px;"></canvas>
+                </div>
+              </div>
+              <!-- /.box-body -->
+            </div>
+          </div>
+      </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); ?>];
+        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);
+      </script>
 
 <!-- datatable ------------------------------------------------------------- -->
       <div class="row">
         <div class="col-xs-12">
           <div id="tableDevicesBox" class="box">
+
+            <!-- box-header -->
             <div class="box-header">
               <h3 id="tableDevicesTitle" class="box-title text-gray">Devices</h3>
             </div>
-            <!-- /.box-header -->
+
+            <!-- table -->
             <div class="box-body table-responsive">
-              <table id="tableDevices" class="table table-bordered table-hover table-striped ">
+              <table id="tableDevices" class="table table-bordered table-hover table-striped">
                 <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Owner</th>
-                  <th>Device type</th>
-                  <th>Favorite</th>
-                  <th>Group</th>
-                  <th>First Session</th>
-                  <th>Last Session</th>
-                  <th>Last IP</th>
-                  <th>Status</th>
-                  <th>MAC</th>
-                  <th>Last IP Order</th>
+                <tr>                
+                  
                 </tr>
                 </thead>
               </table>
             </div>
             <!-- /.box-body -->
+
           </div>
           <!-- /.box -->
         </div>
@@ -171,169 +187,343 @@
 
 <!-- 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 tableColumnVisible = [0,1,2,3,4,5,6,7,8,9,10,12,13,14];
+  var columnsStr = '[0,1,2,3,4,5,6,7,8,9,10,12,13,14]';
+  var tableColumnOrder = [0,1,2,3,4,5,6,7,8,9,10,12,13,14] ; 
 
-// -----------------------------------------------------------------------------
-  var deviceStatus = '';
-  var period = '';
-
-  // Initialize MAC
-  var urlParams = new URLSearchParams(window.location.search);
-  if (urlParams.has ('status') == true) {
-    deviceStatus = urlParams.get ('status');
-  } else {
-    deviceStatus = 'all';
-  }
-
-  // Initialize components
-  $(function () {
-    initializeDatatable();
-    periodChanged();
-  });
+  // Read parameters & Initialize components
+  main();
 
 
 // -----------------------------------------------------------------------------
-function periodChanged () {
-  // Requery totals and list
-  queryTotals();
-  queryList (deviceStatus);
+function main () {
+
+  // get visible columns
+  $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue='+columnsStr+'&parameter=Front_Devices_Columns_Visible', function(data) {
+    
+    tableColumnVisible = numberArrayFromString(data);
+
+    // get the custom order specified by the user
+    $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue='+columnsStr+'&parameter=Front_Devices_Columns_Order', function(data) {
+    
+      tableColumnOrder = numberArrayFromString(data);
+
+      //initialize the table headers in the correct order
+      var headersDefaultOrder = [ '<?php echo lang('Device_TableHead_Name');?>',
+                                  '<?php echo lang('Device_TableHead_Owner');?>',
+                                  '<?php echo lang('Device_TableHead_Type');?>',       
+                                  '<?php echo lang('Device_TableHead_Icon');?>',
+                                  '<?php echo lang('Device_TableHead_Favorite');?>',
+                                  '<?php echo lang('Device_TableHead_Group');?>',
+                                  '<?php echo lang('Device_TableHead_FirstSession');?>',
+                                  '<?php echo lang('Device_TableHead_LastSession');?>',
+                                  '<?php echo lang('Device_TableHead_LastIP');?>',
+                                  '<?php echo lang('Device_TableHead_MAC');?>',
+                                  '<?php echo lang('Device_TableHead_Status');?>',
+                                  '<?php echo lang('Device_TableHead_MAC_full');?>',
+                                  '<?php echo lang('Device_TableHead_LastIPOrder');?>',
+                                  '<?php echo lang('Device_TableHead_Rowid');?>',
+                                  '<?php echo lang('Device_TableHead_Parent_MAC');?>'
+                                ];
+
+      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();
+
+          // query data
+          getDevicesTotals();
+          getDevicesList (deviceStatus);
+        });
+      });
+    });
+   });
 }
 
+// -----------------------------------------------------------------------------
+var tableColumnHide = [];
+
+function mapIndx(oldIndex)
+{
+  for(i=0;i<tableColumnOrder.length;i++)
+  {
+    if(tableColumnOrder[i] == oldIndex)
+    {
+      // console.log('newIndex')
+      // console.log(i)
+      return i;
+    }
+  }
+}
 
 // -----------------------------------------------------------------------------
+
 function initializeDatatable () {
+  for(i = 0; i < tableColumnOrder.length; i++)
+  {    
+    // hide this column if not in the tableColumnVisible variable
+    if(tableColumnVisible.includes(tableColumnOrder[i]) == false)
+    {
+      tableColumnHide.push(mapIndx(tableColumnOrder[i]));
+    }    
+  }
+
+  // If the device has a small width (mobile) only show name, ip, and status columns. 
+  if (window.screen.width < 400) {        
+    tableColumnHide = [11,12,13,1,2,4,5,6,7,9];
+  } 
+  // else {  
+  //   // var tableColumnHide = [11, 12, 13];
+  //   tableColumnHide = [11, 12, 13];
+  // };
+  var table=
   $('#tableDevices').DataTable({
-    'paging'      : true,
-    'lengthChange': true,
-    'searching'   : true,
-    'ordering'    : true,
-    'info'        : true,
-    'autoWidth'   : false,
-    
-    'order'       : [[3,"desc"], [0,"asc"]],
+    'paging'       : true,
+    'lengthChange' : true,
+    'lengthMenu'   : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, '<?php echo lang('Device_Tablelenght_all');?>']],
+    'searching'    : true,
 
-    'columnDefs'  : [
-        {visible:   false,         targets: [9, 10] },
-        {className: 'text-center', targets: [3, 8] },
-        {width:     '0px',         targets: 8 },
-        {orderData: [10],          targets: 7 },
+    'ordering'     : true,
+    'info'         : true,
+    'autoWidth'    : false,
 
-        // Device Name
-        {targets: [0],
-          "createdCell": function (td, cellData, rowData, row, col) {
-            $(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[9]+ '&period='+ period +'" class="">'+ cellData +'</a></b>');
-        } },
+    // Parameters
+    'pageLength'   : tableRows,
+    'order'        : tableOrder,
+    // 'order'       : [[3,'desc'], [0,'asc']],
 
-        // Favorite
-        {targets: [3],
-          "createdCell": function (td, cellData, rowData, row, col) {
-            if (cellData == 1){
-              $(td).html ('<i class="fa fa-star text-yellow" style="font-size:16px"></i>');
-            } else {
-              $(td).html ('');
-            }
-        } },
-        
-        // Dates
-        {targets: [5, 6],
-          "createdCell": function (td, cellData, rowData, row, col) {
-            $(td).html (translateHTMLcodes (cellData));
-        } },
+    'columnDefs'   : [
+      {visible:   false,         targets: tableColumnHide },      
+      {className: 'text-center', targets: [mapIndx(3), mapIndx(4), mapIndx(9), mapIndx(10)] },      
+      {width:     '80px',        targets: [mapIndx(6), mapIndx(7)] },      
+      {width:     '30px',        targets: [mapIndx(10), mapIndx(13)] },      
+      {orderData: [mapIndx(11)],          targets: mapIndx(8) },
 
-        // Status color
-        {targets: [8],
-          "createdCell": function (td, cellData, rowData, row, col) {
-            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;
-              default:
-                color='aqua';             break;
-            };
+      // Device Name
+      {targets: [mapIndx(0)],
+        'createdCell': function (td, cellData, rowData, row, col) {
+            $(td).html ('<b class="anonymizeDev"><a href="deviceDetails.php?mac='+ rowData[mapIndx(11)] +'" class="">'+ cellData +'</a></b>');
+      } },
+
+      // Icon      
+      {targets: [mapIndx(3)],
+        'createdCell': function (td, cellData, rowData, row, col) {
+          if (!emptyArr.includes(cellData)){
+            $(td).html ('<i class="fa fa-'+cellData+' " style="font-size:16px"></i>');
+          } else {
+            $(td).html ('');
+          }
+      } },
+
+      // Full MAC      
+      {targets: [mapIndx(11)],
+        'createdCell': function (td, cellData, rowData, row, col) {
+          if (!emptyArr.includes(cellData)){
+            $(td).html ('<span class="anonymizeMac">'+cellData+'</span>');
+          } else {
+            $(td).html ('');
+          }
+      } },
       
-            $(td).html ('<a href="deviceDetails.php?mac='+ rowData[9]+ '&period='+ period +'" class="badge bg-'+ color +'">'+ cellData +'</a>');
-        } },
+      // IP address      
+      {targets: [mapIndx(12)],
+        'createdCell': function (td, cellData, rowData, row, col) {
+          if (!emptyArr.includes(cellData)){
+            $(td).html ('<span class="anonymizeIp">'+cellData+'</span>');
+          } else {
+            $(td).html ('');
+          }
+      } },
+      
+      // Favorite      
+      {targets: [mapIndx(4)],
+        'createdCell': function (td, cellData, rowData, row, col) {
+          if (cellData == 1){
+            $(td).html ('<i class="fa fa-star text-yellow" style="font-size:16px"></i>');
+          } else {
+            $(td).html ('');
+          }
+      } },
+        
+      // Dates      
+      {targets: [mapIndx(6), mapIndx(7)],
+        'createdCell': function (td, cellData, rowData, row, col) {
+          $(td).html (translateHTMLcodes (cellData));
+      } },
+
+      // Random MAC      
+      {targets: [mapIndx(9)],
+        'createdCell': function (td, cellData, rowData, row, col) {
+          if (cellData == 1){
+            $(td).html ('<i data-toggle="tooltip" data-placement="right" title="Random MAC" style="font-size: 16px;" class="text-yellow glyphicon glyphicon-random"></i>');
+          } else {
+            $(td).html ('');
+          }
+      } },
+
+      // Status color      
+      {targets: [mapIndx(10)],
+        'createdCell': function (td, cellData, rowData, row, col) {
+          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;
+          };
+      
+          $(td).html ('<a href="deviceDetails.php?mac='+ rowData[10] +'" class="badge bg-'+ color +'">'+ cellData.replace('-', '') +'</a>');
+      } },
     ],
     
+    // Processing
     'processing'  : true,
     'language'    : {
-      processing: '<table><td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td></table>',
-      emptyTable: 'No data'
+      processing: '<table> <td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td> </table>',
+      emptyTable: 'No data',
+      "lengthMenu": "<?php echo lang('Device_Tablelenght');?>",
+      "search":     "<?php echo lang('Device_Searchbox');?>: ",
+      "paginate": {
+          "next":       "<?php echo lang('Device_Table_nav_next');?>",
+          "previous":   "<?php echo lang('Device_Table_nav_prev');?>"
+      },
+      "info":           "<?php echo lang('Device_Table_info');?>",
     }
   });
+
+  // Save cookie Rows displayed, and Parameters rows & order
+  $('#tableDevices').on( 'length.dt', function ( e, settings, len ) {
+    setParameter (parTableRows, len);
+  } );
+    
+  $('#tableDevices').on( 'order.dt', function () {
+    setParameter (parTableOrder, JSON.stringify (table.order()) );
+    setCache ('devicesList', getDevicesFromTable(table) );
+  } );
+
+  $('#tableDevices').on( 'search.dt', function () {
+    setCache ('devicesList', getDevicesFromTable(table) ); 
+  } );
+
 };
 
 
 // -----------------------------------------------------------------------------
-function queryTotals () {
-  // debugTimer();
+// Gets a JSON list of rowID and mac from the displayed table in the UI
+function getDevicesFromTable(table)
+{  
+  rowIDs = table.column(mapIndx(13), { 'search': 'applied' }).data().toArray()  //   
+  rowMACs = table.column(mapIndx(11), { 'search': 'applied' }).data().toArray() // 
+  rowNames = table.column(mapIndx(0), { 'search': 'applied' }).data().toArray() // 
+  rowTypes = table.column(mapIndx(2), { 'search': 'applied' }).data().toArray() // 
+  rowIcons = table.column(mapIndx(3), { 'search': 'applied' }).data().toArray() // 
+  rowParentMAC = table.column(mapIndx(14), { 'search': 'applied' }).data().toArray() // 
+  rowStatus = table.column(mapIndx(10), { 'search': 'applied' }).data().toArray() // 
 
+  result = []
+
+  rowIDs.map(function(rowID, index){
+    result.push({
+                  "rowid": rowID, 
+                  "mac":rowMACs[index], 
+                  "name" : rowNames[index],
+                  "type" : rowTypes[index],
+                  "icon" : rowIcons[index],
+                  "parentMac" : rowParentMAC[index],
+                  "status" : rowStatus[index] })
+  })
+
+  return JSON.stringify (result)
+}
+
+// -----------------------------------------------------------------------------
+function getDevicesTotals () {
   // stop timer
   stopTimerRefreshData();
 
-  // period
-  period = document.getElementById('period').value;
-
   // get totals and put in boxes
-  $.get('php/server/devices.php?action=totals&period='+ period, function(data) {
+  $.get('php/server/devices.php?action=getDevicesTotals', function(data) {
     var totalsDevices = JSON.parse(data);
 
-    $('#devicesAll').html       (totalsDevices[0].toLocaleString());
-    $('#devicesConnected').html (totalsDevices[1].toLocaleString());
-    $('#devicesNew').html       (totalsDevices[2].toLocaleString());
-    $('#devicesDown').html      (totalsDevices[3].toLocaleString());
-    });
+    $('#devicesAll').html        (totalsDevices[0].toLocaleString());
+    $('#devicesConnected').html  (totalsDevices[1].toLocaleString());
+    $('#devicesFavorites').html  (totalsDevices[2].toLocaleString());
+    $('#devicesNew').html        (totalsDevices[3].toLocaleString());
+    $('#devicesDown').html       (totalsDevices[4].toLocaleString());
+    $('#devicesArchived').html   (totalsDevices[5].toLocaleString());
 
-  // Timer for refresh data
-  newTimerRefreshData (queryTotals);
+    // Timer for refresh data
+    newTimerRefreshData (getDevicesTotals);
+  } );
 }
 
 
 // -----------------------------------------------------------------------------
-function queryList (status) {
-  // Save status and period selected
-  deviceStatus = status;
-  period = document.getElementById('period').value;
+function getDeviceColumns () {
 
-  // Defini color & title for the status selected
+}
+// -----------------------------------------------------------------------------
+function getDevicesList (status) {
+  // Save status selected
+  deviceStatus = status;
+
+  // Define color & title for the status selected
   switch (deviceStatus) {
-    case 'all':
-      tableTitle = 'Total Devices';
-      color = 'aqua';
-      break;
-    case 'connected':
-      tableTitle = 'Connected Devices';
-      color = 'green';
-      break;
-    case 'new':
-      tableTitle = 'New Devices';
-      color = 'yellow';
-      break;
-    case 'down':
-      tableTitle = 'Down Alerts';
-      color = 'red';
-      break;
-    case 'favorites':
-      tableTitle = 'Favorites';
-      color = 'yellow';
-      break;
-    default:
-      tableTitle = 'Devices';
-      boxClass = '';
-      break;
+    case 'all':        tableTitle = '<?php echo lang('Device_Shortcut_AllDevices');?>';  color = 'aqua';    break;
+    case 'connected':  tableTitle = '<?php echo lang('Device_Shortcut_Connected');?>';   color = 'green';   break;
+    case 'favorites':  tableTitle = '<?php echo lang('Device_Shortcut_Favorites');?>';   color = 'yellow';  break;
+    case 'new':        tableTitle = '<?php echo lang('Device_Shortcut_NewDevices');?>';  color = 'yellow';  break;
+    case 'down':       tableTitle = '<?php echo lang('Device_Shortcut_DownAlerts');?>';  color = 'red';     break;
+    case 'archived':   tableTitle = '<?php echo lang('Device_Shortcut_Archived');?>';    color = 'gray';    break;
+    default:           tableTitle = '<?php echo lang('Device_Shortcut_Devices');?>';     color = 'gray';    break;
   } 
 
   // Set title and color
-  document.getElementById('tableDevicesTitle').className = 'box-title text-' + color;
-  document.getElementById('tableDevicesBox').className = 'box box-' + color;
+  $('#tableDevicesTitle')[0].className = 'box-title text-'+ color;
+  $('#tableDevicesBox')[0].className = 'box box-'+ color;
   $('#tableDevicesTitle').html (tableTitle);
 
   // Define new datasource URL and reload
-  $('#tableDevices').DataTable().ajax.url('php/server/devices.php?action=list&status=' + deviceStatus +'&period='+ period ).load();
+  $('#tableDevices').DataTable().ajax.url(
+    'php/server/devices.php?action=getDevicesList&status=' + deviceStatus).load();
 };
 
 </script>
+
+<script src="js/pialert_common.js"></script>

front/events.php

@@ -1,4 +1,12 @@
-<!-- ----------------------------------------------------------------------- -->
+<!-- ---------------------------------------------------------------------------
+#  Pi.Alert
+#  Open Source Network Guard / WIFI & LAN intrusion detector
+#
+#  events.php - Front module. Events page
+#-------------------------------------------------------------------------------
+#  Puche 2021 / 2022+ jokob             jokob@duck.com                GNU GPLv3
+#--------------------------------------------------------------------------- -->
+
 <?php
   require 'php/templates/header.php';
 ?>
@@ -9,140 +17,94 @@
 <!-- Content header--------------------------------------------------------- -->
     <section class="content-header">
       <h1 id="pageTitle">
-         Events
+         <?php echo lang('Events_Title');?>
       </h1>
 
       <!-- period selector -->
-      <span class="breadcrumb text-gray50">
-        Events period:  
-        <select id="period" onchange="javascript: periodChanged();">
-          <option value="1 day">Today</option>
-          <option value="7 days">Last Week</option>
-          <option value="1 month" selected>Last Month</option>
-          <option value="1 year">Last Year</option>
-          <option value="100 years">All info</option>
+      <span class="breadcrumb" style="top: 0px;">
+        <select class="form-control" id="period" onchange="javascript: periodChanged();">
+          <option value="1 day"><?php echo lang('Events_Periodselect_today');?></option>
+          <option value="7 days"><?php echo lang('Events_Periodselect_LastWeek');?></option>
+          <option value="1 month" selected><?php echo lang('Events_Periodselect_LastMonth');?></option>
+          <option value="1 year"><?php echo lang('Events_Periodselect_LastYear');?></option>
+          <option value="100 years"><?php echo lang('Events_Periodselect_All');?></option>
         </select>
       </span>
-
     </section>
 
 <!-- Main content ---------------------------------------------------------- -->
     <section class="content">
+
+<!-- top small box --------------------------------------------------------- -->
       <div class="row">
 
-<!-- top small box --------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
-          <a href="#" onclick="javascript: queryList('all');">
-            <div class="small-box bg-aqua pa-small-box-aqua pa-small-box-2">
-              <div class="inner">
-  
-                <h3 id="eventsAll"> -- </h3>
-  
-              </div>
-              <div class="icon">
-                <i class="fa fa-bolt text-aqua-20"></i>
-              </div>
-              <div class="small-box-footer">
-                All events <i class="fa fa-arrow-circle-right"></i>
+          <a href="#" onclick="javascript: getEvents('all');">
+            <div class="small-box bg-aqua">
+              <div class="inner"> <h3 id="eventsAll"> -- </h3>
+                <p class="infobox_label"><?php echo lang('Events_Shortcut_AllEvents');?></p>
               </div>
+              <div class="icon"> <i class="fa fa-bolt text-aqua-40"></i> </div>
             </div>
           </a>
         </div>
 
 <!-- top small box --------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
-          <a href="#" onclick="javascript: queryList('sessions');">
-            <div class="small-box bg-green pa-small-box-green pa-small-box-2">
-              <div class="inner">
-  
-                <h3 id="eventsSessions"> -- </h3>
-  
-              </div>
-              <div class="icon">
-                <i class="fa fa-plug text-green-20"></i>
-              </div>
-              <div class="small-box-footer">
-                Sessions <i class="fa fa-arrow-circle-right"></i>
+          <a href="#" onclick="javascript: getEvents('sessions');">
+            <div class="small-box bg-green">
+              <div class="inner"> <h3 id="eventsSessions"> -- </h3>
+                <p class="infobox_label"><?php echo lang('Events_Shortcut_Sessions');?></p>
               </div>
+              <div class="icon"> <i class="fa fa-plug text-green-40"></i> </div>
             </div>
           </a>
         </div>
 
 <!-- top small box --------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
-          <a href="#" onclick="javascript: queryList('missing');">
-            <div  class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
-              <div class="inner">
-  
-                <h3 id="eventsMissing"> -- </h3>
-  
-              </div>
-              <div class="icon">
-                <i class="fa fa-exchange text-yellow-20"></i>
-              </div>
-              <div class="small-box-footer">
-                Missing Sessions <i class="fa fa-arrow-circle-right"></i>
+          <a href="#" onclick="javascript: getEvents('missing');">
+            <div  class="small-box bg-yellow">
+              <div class="inner"> <h3 id="eventsMissing"> -- </h3>
+                <p class="infobox_label"><?php echo lang('Events_Shortcut_MissSessions');?></p>
               </div>
+              <div class="icon"> <i class="fa fa-exchange text-yellow-40"></i> </div>
             </div>
           </a>
-
         </div>
 
 <!-- top small box --------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
-          <a href="#" onclick="javascript: queryList('voided');">
-            <div  class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
-              <div class="inner">
-  
-                <h3 id="eventsVoided"> -- </h3>
-  
-              </div>
-              <div class="icon text-aqua-20">
-                <i class="fa fa-exclamation-circle text-yellow-20"></i>
-              </div>
-              <div class="small-box-footer">
-                Voided Sessions <i class="fa fa-arrow-circle-right"></i>
+          <a href="#" onclick="javascript: getEvents('voided');">
+            <div  class="small-box bg-yellow">
+              <div class="inner"> <h3 id="eventsVoided"> -- </h3>
+                <p class="infobox_label"><?php echo lang('Events_Shortcut_VoidSessions');?></p>
               </div>
+              <div class="icon"> <i class="fa fa-exclamation-circle text-yellow-40"></i> </div>
             </div>
           </a>
-
         </div>
 
 <!-- top small box --------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
-          <a href="#" onclick="javascript: queryList('new');">
-            <div  class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
-              <div class="inner">
-  
-                <h3 id="eventsNewDevices"> -- </h3>
-  
-              </div>
-              <div class="icon">
-                <i class="ion ion-plus-round text-yellow-20"></i>
-              </div>
-              <div class="small-box-footer">
-                New Devices <i class="fa fa-arrow-circle-right"></i>
+          <a href="#" onclick="javascript: getEvents('new');">
+            <div  class="small-box bg-yellow">
+              <div class="inner"> <h3 id="eventsNewDevices"> -- </h3>
+                <p class="infobox_label"><?php echo lang('Events_Shortcut_NewDevices');?></p>
               </div>
+              <div class="icon"> <i class="ion ion-plus-round text-yellow-40"></i> </div>
             </div>
           </a>
-
         </div>
 
 <!-- top small box --------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
-          <a href="#" onclick="javascript: queryList('down');">
-            <div  class="small-box bg-red pa-small-box-red pa-small-box-2">
-              <div class="inner">
-  
-                <h3 id="eventsDown"> -- </h3>
-  
-              </div>
-              <div class="icon">
-                <i class="fa fa-warning text-red-20"></i>
-              </div>
-              <div class="small-box-footer">
-                Down Alerts <i class="fa fa-arrow-circle-right"></i>
+          <a href="#" onclick="javascript: getEvents('down');">
+            <div  class="small-box bg-red">
+              <div class="inner"> <h3 id="eventsDown"> -- </h3>
+                <p class="infobox_label"><?php echo lang('Events_Shortcut_DownAlerts');?></p>
               </div>
+              <div class="icon"> <i class="fa fa-warning text-red-40"></i> </div>
             </div>
           </a>
         </div>
@@ -154,31 +116,35 @@
       <div class="row">
         <div class="col-xs-12">
           <div id="tableEventsBox" class="box">
+
+            <!-- box-header -->
             <div class="box-header">
               <h3 id="tableEventsTitle" class="box-title text-gray">Events</h3>
             </div>
-            <!-- /.box-header -->
+
+            <!-- table -->
             <div class="box-body table-responsive">
               <table id="tableEvents" class="table table-bordered table-hover table-striped ">
                 <thead>
                 <tr>
-                  <th>Order</th>
-                  <th>Device</th>
-                  <th>Owner</th>
-                  <th>Date</th>
-                  <th>Event Type</th>
-                  <th>Connection</th>
-                  <th>Disconnection</th>
-                  <th>Duration</th>
-                  <th>Duration Order</th>
-                  <th>IP</th>
-                  <th>IP Order</th>
-                  <th>Additional Info</th>
+                  <th><?php echo lang('Events_TableHead_Order');?></th>
+                  <th><?php echo lang('Events_TableHead_Device');?></th>
+                  <th><?php echo lang('Events_TableHead_Owner');?></th>
+                  <th><?php echo lang('Events_TableHead_Date');?></th>
+                  <th><?php echo lang('Events_TableHead_EventType');?></th>
+                  <th><?php echo lang('Events_TableHead_Connection');?></th>
+                  <th><?php echo lang('Events_TableHead_Disconnection');?></th>
+                  <th><?php echo lang('Events_TableHead_Duration');?></th>
+                  <th><?php echo lang('Events_TableHead_DurationOrder');?></th>
+                  <th><?php echo lang('Events_TableHead_IP');?></th>
+                  <th><?php echo lang('Events_TableHead_IPOrder');?></th>
+                  <th><?php echo lang('Events_TableHead_AdditionalInfo');?></th>
                 </tr>
                 </thead>
               </table>
             </div>
             <!-- /.box-body -->
+
           </div>
           <!-- /.box -->
         </div>
@@ -208,86 +174,121 @@
 
 <!-- page script ----------------------------------------------------------- -->
 <script>
+  var parPeriod       = 'Front_Events_Period';
+  var parTableRows    = 'Front_Events_Rows';
 
-// -----------------------------------------------------------------------------
-  var eventsType = '';
-  var period = '';
+  var eventsType      = 'all';
+  var period          = '';
+  var tableRows       = 10;
   
-  // Initialize MAC
-  var urlParams = new URLSearchParams(window.location.search);
-  if (urlParams.has ('status') == true) {
-    eventsType = urlParams.get ('type');
-  } else {
-    eventsType = 'all';
-  }
-
-  // Initialize components
-  $(function () {
-    initializeDatatable();
-    periodChanged();
-  });
+  // Read parameters & Initialize components
+  main();
 
 
 // -----------------------------------------------------------------------------
-function periodChanged () {
-  // Requery totals and list
-  queryTotals();
-  queryList (eventsType);
+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);
+    }
+
+    // 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;
+      }
+
+      // Initialize components
+      initializeDatatable();
+
+      // query data
+      getEventsTotals();
+      getEvents (eventsType);
+    });
+  });
 }
 
 
 // -----------------------------------------------------------------------------
 function initializeDatatable () {
   $('#tableEvents').DataTable({
-    'paging'      : true,
-    'lengthChange': true,
-    'searching'   : true,
-    'ordering'    : true,
-    'info'        : true,
-    'autoWidth'   : false,
-
+    'paging'       : true,
+    'lengthChange' : true,
+    'lengthMenu'   : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
+    'searching'    : true,
+    'ordering'     : true,
+    'info'         : true,
+    'autoWidth'    : false,
     'order'       : [[0,"desc"], [3,"desc"], [5,"desc"]],
 
+    // Parameters
+    'pageLength'   : tableRows,
+
     'columnDefs'  : [
-        {visible:   false,         targets: [0,5,6,7,8,10] },
-        {className: 'text-center', targets: [] },
-        {orderData: [8],           targets: 7 },
-        {orderData: [10],          targets: 9 },
+      {visible:   false,         targets: [0,5,6,7,8,10] },
+      {className: 'text-center', targets: [] },
+      {orderData: [8],           targets: 7 },
+      {orderData: [10],          targets: 9 },
 
-        // Device Name
-        {targets: [1],
-          "createdCell": function (td, cellData, rowData, row, col) {
-            $(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[13]+ '&period='+ period +'" class="">'+ cellData +'</a></b>');
-        } },
+      // Device Name
+      {targets: [1],
+        "createdCell": function (td, cellData, rowData, row, col) {
+          $(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[13] +'" class="">'+ cellData +'</a></b>');
+      } },
 
-        // Replace HTML codes
-        {targets: [3,4,5,6,7],
-          "createdCell": function (td, cellData, rowData, row, col) {
-            $(td).html (translateHTMLcodes (cellData));
-        } }
+      // Replace HTML codes
+      {targets: [3,4,5,6,7],
+        "createdCell": function (td, cellData, rowData, row, col) {
+          $(td).html (translateHTMLcodes (cellData));
+      } }
     ],
 
+    // Processing
     'processing'  : true,
     'language'    : {
       processing: '<table><td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td></table>',
-      emptyTable: 'No data'
+      emptyTable: 'No data',
+      "lengthMenu": "<?php echo lang('Events_Tablelenght');?>",
+      "search":     "<?php echo lang('Events_Searchbox');?>: ",
+      "paginate": {
+          "next":       "<?php echo lang('Events_Table_nav_next');?>",
+          "previous":   "<?php echo lang('Events_Table_nav_prev');?>"
+      },
+      "info":           "<?php echo lang('Events_Table_info');?>",
     }
-        
   });
+
+  // Save Parameter rows when changed
+  $('#tableEvents').on( 'length.dt', function ( e, settings, len ) {
+    setParameter (parTableRows, len);
+  } );
 };
 
 
 // -----------------------------------------------------------------------------
-function queryTotals () {
-  // debugTimer();
+function periodChanged () {
+  // Save Parameter Period
+  period = $('#period').val();
+  setParameter (parPeriod, period);
+
+  // Requery totals and events
+  getEventsTotals();
+  getEvents (eventsType);
+}
+
+
+// -----------------------------------------------------------------------------
+function getEventsTotals () {
   // stop timer
   stopTimerRefreshData();
 
-  // period
-  period = document.getElementById('period').value;
-
   // get totals and put in boxes
-  $.get('php/server/events.php?action=totals&period='+ period, function(data) {
+  $.get('php/server/events.php?action=getEventsTotals&period='+ period, function(data) {
     var totalsEvents = JSON.parse(data);
 
     $('#eventsAll').html        (totalsEvents[0].toLocaleString());
@@ -296,57 +297,32 @@ function queryTotals () {
     $('#eventsVoided').html     (totalsEvents[3].toLocaleString());
     $('#eventsNewDevices').html (totalsEvents[4].toLocaleString());
     $('#eventsDown').html       (totalsEvents[5].toLocaleString());
-    });
 
-  // Timer for refresh data
-  newTimerRefreshData (queryTotals);
+    // Timer for refresh data
+    newTimerRefreshData (getEventsTotals);
+  });
 }
 
 
 // -----------------------------------------------------------------------------
-function queryList (p_eventsType) {
-  // Save status and period selected
+function getEvents (p_eventsType) {
+  // Save status selected
   eventsType = p_eventsType;
-  period = document.getElementById('period').value;
 
   // Define color & title for the status selected
-  sesionCols = false;
   switch (eventsType) {
-    case 'all':
-      tableTitle = 'All Events';
-      color = 'aqua';
-      break;
-    case 'sessions':
-      tableTitle = 'Sessions';
-      color = 'green';
-      sesionCols = true;
-      break;
-    case 'missing':
-      tableTitle = 'Missing Events';
-      color = 'yellow';
-      sesionCols = true;
-      break;
-    case 'voided':
-      tableTitle = 'Voided Events';
-      color = 'yellow';
-      break;
-    case 'new':
-      tableTitle = 'New Devices Events';
-      color = 'yellow';
-      break;
-    case 'down':
-      tableTitle = 'Down Alerts';
-      color = 'red';
-      break;
-    default:
-      tableTitle = 'Events';
-      boxClass = '';
-      break;
+    case 'all':       tableTitle = '<?php echo lang('Events_Shortcut_AllEvents');?>';      color = 'aqua';    sesionCols = false;  break;
+    case 'sessions':  tableTitle = '<?php echo lang('Events_Shortcut_Sessions');?>';       color = 'green';   sesionCols = true;   break;
+    case 'missing':   tableTitle = '<?php echo lang('Events_Shortcut_MissSessions');?>';   color = 'yellow';  sesionCols = true;   break;
+    case 'voided':    tableTitle = '<?php echo lang('Events_Shortcut_VoidSessions');?>';   color = 'yellow';  sesionCols = false;  break;
+    case 'new':       tableTitle = '<?php echo lang('Events_Shortcut_NewDevices');?>';     color = 'yellow';  sesionCols = false;  break;
+    case 'down':      tableTitle = '<?php echo lang('Events_Shortcut_DownAlerts');?>';     color = 'red';     sesionCols = false;  break;
+    default:          tableTitle = '<?php echo lang('Events_Shortcut_Events');?>';         boxClass = '';     sesionCols = false;  break;
   } 
 
   // Set title and color
-  document.getElementById('tableEventsTitle').className = 'box-title text-' + color;
-  document.getElementById('tableEventsBox').className = 'box box-' + color;
+  $('#tableEventsTitle')[0].className = 'box-title text-' + color;
+  $('#tableEventsBox')[0].className = 'box box-' + color;
   $('#tableEventsTitle').html (tableTitle);
 
   // Coluumns Visibility
@@ -360,7 +336,7 @@ function queryList (p_eventsType) {
   $('#tableEvents').DataTable().clear();
   $('#tableEvents').DataTable().draw();
   $('#tableEvents').DataTable().order ([0,"desc"], [3,"desc"], [5,"desc"]);
-  $('#tableEvents').DataTable().ajax.url('php/server/events.php?action=list&type=' + eventsType +'&period='+ period ).load();
+  $('#tableEvents').DataTable().ajax.url('php/server/events.php?action=getEvents&type=' + eventsType +'&period='+ period ).load();
 };
 
 </script>

front/help_faq.php

@@ -0,0 +1,225 @@
+<?php
+  require 'php/templates/header.php';
+?>
+<!-- Page ------------------------------------------------------------------ -->
+<div class="content-wrapper">
+
+<!-- Content header--------------------------------------------------------- -->
+    <section class="content-header">
+    <?php require 'php/templates/notification.php'; ?>
+      <h1 id="pageTitle">
+         <?php echo lang('HelpFAQ_Title');?>
+      </h1>
+    </section>
+
+    <!-- Main content ---------------------------------------------------------- -->
+    <section class="content">
+      <h4><?php echo lang('HelpFAQ_Cat_General');?></h4>
+
+       <div class="panel-group" id="accordion_gen">
+        <div class="panel panel-default">
+
+          <div class="panel-heading">
+            <h4 class="panel-title">
+              <a data-toggle="collapse" data-parent="#accordion_gen" href="#collapse100">
+              <?php echo lang('HelpFAQ_Cat_General_100_head');?></a>
+            </h4>
+          </div>
+
+          <div id="collapse100" class="panel-collapse collapse" style="font-size: 16px;">
+            <div class="panel-body"><?php echo lang('HelpFAQ_Cat_General_100_text_a');?>
+              <span class="text-danger help_faq_code"><?php echo date_default_timezone_get(); ?></span><br>
+              <?php echo lang('HelpFAQ_Cat_General_100_text_b');?> 
+              <span class="text-danger help_faq_code"><?php echo php_ini_loaded_file(); ?></span><br>
+              <?php echo lang('HelpFAQ_Cat_General_100_text_c');?>
+            </div>
+          </div>
+
+        </div>
+
+        
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <h4 class="panel-title">
+              <a data-toggle="collapse" data-parent="#accordion_gen" href="#collapse101">
+              <?php echo lang('HelpFAQ_Cat_General_101_head');?></a>
+            </h4>
+          </div>
+          <div id="collapse101" class="panel-collapse collapse" style="font-size: 16px;">
+            <div class="panel-body">
+              <?php echo lang('HelpFAQ_Cat_General_101_text');?>
+            </div>
+          </div>
+        </div>
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <h4 class="panel-title">
+              <a data-toggle="collapse" data-parent="#accordion_gen" href="#collapse102">
+              <?php echo lang('HelpFAQ_Cat_General_102_head');?></a>
+            </h4>
+          </div>
+          <div id="collapse102" class="panel-collapse collapse" style="font-size: 16px;">
+            <div class="panel-body">
+              <?php echo lang('HelpFAQ_Cat_General_102_text');?>
+            </div>
+          </div>
+        </div>
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <h4 class="panel-title">
+              <a data-toggle="collapse" data-parent="#accordion_gen" href="#collapse102docker">
+              <?php echo lang('HelpFAQ_Cat_General_102docker_head');?></a>
+            </h4>
+          </div>
+          <div id="collapse102docker" class="panel-collapse collapse" style="font-size: 16px;">
+            <div class="panel-body">
+              <?php echo lang('HelpFAQ_Cat_General_102docker_text');?>
+            </div>
+          </div>
+        </div>
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <h4 class="panel-title">
+              <a data-toggle="collapse" data-parent="#accordion_gen" href="#collapse103">
+              <?php echo lang('HelpFAQ_Cat_General_103_head');?></a>
+            </h4>
+          </div>
+          <div id="collapse103" class="panel-collapse collapse" style="font-size: 16px;">
+            <div class="panel-body">
+              <?php echo lang('HelpFAQ_Cat_General_103_text');?>
+            </div>
+          </div>
+        </div>
+      </div> 
+
+<h4><?php echo lang('Navigation_Devices');?></h4>
+ <div class="panel-group" id="accordion_dev">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion_dev" href="#collapse200">
+        <?php echo lang('HelpFAQ_Cat_Device_200_head');?></a>
+      </h4>
+    </div>
+    <div id="collapse200" class="panel-collapse collapse" style="font-size: 16px;">
+      <div class="panel-body">
+         <?php echo lang('HelpFAQ_Cat_Device_200_text');?>
+      </div>
+    </div>
+  </div>
+</div> 
+
+
+<h4><?php echo lang('HelpFAQ_Cat_Detail');?></h4>
+ <div class="panel-group" id="accordion_det">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion_det" href="#collapse300">
+        <?php echo lang('HelpFAQ_Cat_Detail_300_head');?> "<?php echo lang('DevDetail_MainInfo_Network');?>" / "<?php echo lang('DevDetail_MainInfo_Network_Port');?>"?</a>
+      </h4>
+    </div>
+    <div id="collapse300" class="panel-collapse collapse" style="font-size: 16px;">
+      <div class="panel-body">
+        "<?php echo lang('DevDetail_MainInfo_Network');?>" <?php echo lang('HelpFAQ_Cat_Detail_300_text_a');?><br>
+        "<?php echo lang('DevDetail_MainInfo_Network_Port');?>" <?php echo lang('HelpFAQ_Cat_Detail_300_text_b');?>
+      </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">
+        <?php echo lang('HelpFAQ_Cat_Detail_301_head_a');?> "<?php echo lang('DevDetail_EveandAl_ScanCycle');?>" <?php echo 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">
+        <?php echo lang('HelpFAQ_Cat_Detail_301_text');?>
+      </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="#collapse302">
+        <?php echo lang('HelpFAQ_Cat_Detail_302_head_a');?> "<?php echo lang('DevDetail_EveandAl_RandomMAC');?>" <?php echo lang('HelpFAQ_Cat_Detail_302_head_b');?></a>
+      </h4>
+    </div>
+    <div id="collapse302" class="panel-collapse collapse" style="font-size: 16px;">
+      <div class="panel-body">
+        <?php echo lang('HelpFAQ_Cat_Detail_302_text');?>
+      </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="#collapse303">
+        <?php echo lang('HelpFAQ_Cat_Detail_303_head');?></a>
+      </h4>
+    </div>
+    <div id="collapse303" class="panel-collapse collapse" style="font-size: 16px;">
+      <div class="panel-body">
+        <?php echo lang('HelpFAQ_Cat_Detail_303_text');?>
+      </div>
+    </div>
+  </div>
+</div> 
+
+<h4><?php echo lang('Navigation_Presence');?></h4>
+ <div class="panel-group" id="accordion_pre">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion_pre" href="#collapse400">
+        <?php echo lang('HelpFAQ_Cat_Presence_400_head');?></a>
+      </h4>
+    </div>
+    <div id="collapse400" class="panel-collapse collapse" style="font-size: 16px;">
+      <div class="panel-body">
+        <?php echo lang('HelpFAQ_Cat_Presence_400_text');?>
+      </div>
+    </div>
+  </div>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion_pre" href="#collapse401">
+        <?php echo lang('HelpFAQ_Cat_Presence_401_head');?></a>
+      </h4>
+    </div>
+    <div id="collapse401" class="panel-collapse collapse" style="font-size: 16px;">
+      <div class="panel-body">
+        <?php echo lang('HelpFAQ_Cat_Presence_401_text');?>
+      </div>
+    </div>
+  </div>
+</div> 
+
+<h4><?php echo lang('Navigation_Network');?></h4>
+ <div class="panel-group" id="accordion_net">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion_net" href="#collapse600">
+        <?php echo lang('HelpFAQ_Cat_Network_600_head');?></a>
+      </h4>
+    </div>
+    <div id="collapse600" class="panel-collapse collapse" style="font-size: 16px;">
+      <div class="panel-body">
+        <?php echo lang('HelpFAQ_Cat_Network_600_text');?>
+      </div>
+    </div>
+  </div>
+</div> 
+
+    </section>
+    <!-- /.content -->
+</div>
+  <!-- /.content-wrapper -->
+
+<!-- ----------------------------------------------------------------------- -->
+<?php
+  require 'php/templates/footer.php';
+?>

front/img/manifest.json

@@ -0,0 +1,14 @@
+{
+    "name": "Pi-Alert Console",
+    "short_name": "Pi-Alert",
+    "display": "standalone",
+    "icons": [
+    {
+      "src": "",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+    ],
+    "theme_color": "#000",
+    "background_color": "#000"
+}