Plugins 0.2 - Show unprocessed events in UI

front/js/pialert_common.js

@@ -346,3 +346,4 @@ function openInNewTab (url) {
 
 
 
+

front/php/templates/language/en_us.php

@@ -24,6 +24,7 @@ $lang['en_us'] = array(
 'Gen_AreYouSure' => 'Are you sure?',
 'Gen_Upd' => 'Updated successfully',
 'Gen_Upd_Fail' => 'Update failed',
+'Gen_Help' => 'Need help?',
 
 //////////////////////////////////////////////////////////////////
 // Login Page - Update by @TeroRERO 03ago2022
@@ -471,6 +472,12 @@ $lang['en_us'] = array(
 
 
 
+//////////////////////////////////////////////////////////////////
+// Plugins
+//////////////////////////////////////////////////////////////////
+
+'Plugins_Unprocessed_Events' => 'Unprocessed events',
+
 //////////////////////////////////////////////////////////////////
 // Settings
 //////////////////////////////////////////////////////////////////
@@ -673,6 +680,8 @@ The arp-scan time itself depends on the number of IP addresses to check so set t
 
 
 
+
+
 );
 
 ?>

front/plugins.php

@@ -2,6 +2,9 @@
 
   require 'php/templates/header.php';
 ?>
+
+<script src="js/pialert_common.js"></script>
+
 <!-- Page ------------------------------------------------------------------ -->
 <div class="content-wrapper">
 
@@ -16,19 +19,158 @@
 
     <!-- Main content ---------------------------------------------------------- -->
     <section class="content">
-        <div class="tab-pane active" id="curState">
-            <div>
-                <h2 class="page-header"><i class="fa fa-clock"></i> Current state</h2>
-            </div>
-            aaa
-        </div>
-    </section>
-
-    
+        <div class="nav-tabs-custom" style="margin-bottom: 0px;">
+            <ul id="tabs-location" class="nav nav-tabs">
+                <!-- PLACEHOLDER -->
+            </ul>  
+        <div id="tabs-content-location" class="tab-content"> 
+            <!-- PLACEHOLDER -->
+        </div>   
+        
+    </section>    
 </div>
 
 <?php
   require 'php/templates/footer.php';
 ?>
 
-<script src="js/pialert_common.js"></script>
+<script defer>
+
+// -----------------------------------------------------------------------------
+// Get translated string
+function localize (obj, key) {
+
+    currLangCode = getCookie("language")
+
+    result = ""
+    en_us = ""
+
+    if(obj.localized && obj.localized.includes(key))
+    {
+        for(i=0;i<obj[key].length;i++)
+        {
+            code = obj[key][i]["language_code"]
+
+            console.log(code)
+
+            if( code == 'en_us')
+            {
+                en_us = obj[key][i]["string"]
+            }
+
+            if(code == currLangCode)
+            {
+                result = obj[key][i]["string"]
+            }
+
+        }
+    }
+
+    result == "" ? en_us : result ;
+
+    return result;
+}
+
+// -----------------------------------------------------------------------------
+pluginDefinitions = []
+pluginUnprocessedEvents = []
+
+function getData(){
+
+    $.get('api/plugins.json', function(res) {    
+        
+        pluginDefinitions = res["data"];
+
+        $.get('api/table_plugins_unprocessed_entries.json', function(res) {
+
+            pluginUnprocessedEvents = res["data"];
+
+            generateTabs()
+        });
+
+    });
+}
+
+// -----------------------------------------------------------------------------
+function generateTabs()
+{
+    activetab = 'active'
+
+    $.each(pluginDefinitions, function(index, obj) {
+        $('#tabs-location').append(
+            `<li class="${activetab}">
+                <a href="#${obj.unique_prefix}" data-plugin-prefix="${obj.unique_prefix}" id="${obj.unique_prefix}_id" data-toggle="tab" >
+                ${localize(obj, 'icon')} ${localize(obj, 'display_name')}
+                </a>
+            </li>`
+        );
+        activetab = '' // only first tab is active
+    });
+
+    activetab = 'active'
+    
+    $.each(pluginDefinitions, function(index, obj) {
+
+        headersHtml = ""
+        headers = []
+        rows = ""
+
+        // Generate the header
+        $.each(obj["database_column_aliases"]["localized"], function(index, locItem){
+            headers.push(locItem)
+            headersHtml += `<th class="col-sm-2" >${localize(obj["database_column_aliases"], locItem )}</th>`
+
+        });
+
+        // Generate the entry rows
+        for(i=0;i<pluginUnprocessedEvents.length;i++)
+        {
+            if(pluginUnprocessedEvents[i].Plugin == obj.unique_prefix)
+            {
+                clm = ""
+
+                for(j=0;j<headers.length;j++) 
+                {   
+                    clm += '<td>'+ pluginUnprocessedEvents[i][headers[j]] +'</td>'
+                }                   
+                rows += '<tr>' + clm + '</tr>'
+            }            
+        }
+
+
+        $('#tabs-content-location').append(
+            `    
+            <div id="${obj.unique_prefix}" class="tab-pane ${activetab}"> 
+                <div>
+                    <a href="https://github.com/jokob-sk/Pi.Alert/tree/main/front/plugins/${obj.code_name}" target="_blank"><?= lang('Gen_Help');?></a>
+                </div>
+                ${localize(obj, 'description')} 
+                <h5>
+                    <i class="fa fa-clock"></i> <?= lang('Plugins_Unprocessed_Events');?> 
+                </h5>
+                <hr>
+            
+                <table class="table table-striped">
+                
+                    <tbody>
+                        <tr>
+                            ${headersHtml}                            
+                        </tr>  
+                        ${rows}
+                    </tbody>
+                </table>
+            </div>
+        `);
+
+        activetab = '' // only first tab is active
+    });
+}
+
+// -----------------------------------------------------------------------------
+
+getData()
+
+</script>
+
+
+

front/plugins/README.md

@@ -6,10 +6,13 @@ Highly experimental feature. Follow the below very carefully and check example p
 
 PiAlert comes with a simple plugin system to feed events from third-party scripts into the UI and then send notifications if desired.
 
-If you wish to develop a plugin, please check the existing plugin structure.
+If you wish to develop a plugin, please check the existing plugin structure. Once the settings are saved by the user they need to be removed from the `pialert.conf` file manually if you want to re-initialize them from the `config.json` of teh plugin.
 
 ## Plugin file structure overview 
 
+> Folder name must be the same as the code name value in: `"code_name": "<value>"`
+> Unique prefix needs to be unique compared to the other settings prefixes, e.g.: the prefix `APPRISE` is already in use. 
+
   | File | Required | Description | 
   |----------------------|----------------------|----------------------| 
   | `config.json` | yes | Contains the plugin configuration (manifest) including the settings available to the user. |
@@ -142,7 +145,8 @@ Example:
 ##### Localized strings
 
 
-- `"language_code":"<en_us|es_es|de_de>"`  - code name of the language string. Only these three currently supported.
+
+- `"language_code":"<en_us|es_es|de_de>"`  - code name of the language string. Only these three currently supported. At least the `"language_code":"en_us"` variant has to be defined. 
 - `"string"`  - The string to be displayed in the given language.
 
 Example:
@@ -155,13 +159,40 @@ Example:
     }
 
 ```
+##### database_column_aliases
 
+- Only columns specified in the `"localized"` parameter and also with at least an english translation will be shown in the UI.
+
+```json
+{  
+        "localized": ["Index", "Object_PrimaryID", "DateTime", "Watched_Value1", "Watched_Value2"],      
+        "Index":[{
+            "language_code":"en_us",
+            "string" : "Index"
+        }],
+        "Object_PrimaryID":[{
+            "language_code":"en_us",
+            "string" : "Monitored URL"
+        }],
+        "DateTime":[{
+            "language_code":"en_us",
+            "string" : "Checked on"
+        }],
+        "Watched_Value1":[{
+            "language_code":"en_us",
+            "string" : "Status code"
+        }],
+        "Watched_Value2":[{
+            "language_code":"en_us",
+            "string" : "Latency"
+        }]        
+    }
+```
 
 ## Full Example
 
 ```json
 {
-    {
     "code_name": "website_monitor",
     "unique_prefix": "WEBMON",
     "localized": ["display_name", "description", "icon"],
@@ -360,4 +391,6 @@ Example:
     ]
 }
 
+
+
 ```