Multi-edit ✏ #571

front/js/ui_components.js

@@ -0,0 +1,92 @@
+/* -----------------------------------------------------------------------------
+*  Pi.Alert
+*  Open Source Network Guard / WIFI & LAN intrusion detector 
+*
+*  ui_components.js - Front module. Common UI components
+*-------------------------------------------------------------------------------
+#  jokob             jokob@duck.com                GNU GPLv3
+----------------------------------------------------------------------------- */
+
+
+// -----------------------------------------------------------------------------
+// Initialize device selectors / pickers fields
+// -----------------------------------------------------------------------------
+function initDeviceSelectors() {
+
+  console.log(devicesList)
+  // Retrieve device list from session variable
+  var devicesListAll_JSON = sessionStorage.getItem('devicesListAll_JSON');
+
+  console.log(devicesListAll_JSON)
+
+  var devicesList = JSON.parse(devicesListAll_JSON);
+
+  console.log(devicesList)
+
+  // Check if both device list exists
+  if (devicesListAll_JSON) {
+      // Parse the JSON string to get the device list array
+      var devicesList = JSON.parse(devicesListAll_JSON);
+
+
+
+      console.log(devicesList)
+
+      var selectorFieldsHTML = ''
+
+      // Loop through the devices list
+      devicesList.forEach(function(device) {         
+
+          selectorFieldsHTML += `<option value="${device.dev_MAC}">${device.dev_Name}</option>`;
+      });
+
+      selector = `<div class="db_info_table_row  col-sm-12" > 
+                    <div class="form-group" > 
+                      <div class="input-group col-sm-12 " > 
+                        <select class="form-control select2 select2-hidden-accessible" multiple=""  style="width: 100%;"  tabindex="-1" aria-hidden="true">
+                        ${selectorFieldsHTML}
+                        </select>
+                      </div>
+                    </div>
+                  </div>`
+
+
+      // Find HTML elements with class "deviceSelector" and append selector field
+      $('.deviceSelector').append(selector);
+  }
+
+  // Initialize selected items after a delay so selected macs are available in the context
+  setTimeout(function(){
+        // Retrieve MAC addresses from query string or cache
+        var macs = getQueryString('macs') || getCache('selectedDevices');
+
+        if(macs)
+        {
+          // Split MAC addresses if they are comma-separated
+          macs = macs.split(',');
+  
+          console.log(macs)
+
+          // Loop through macs to be selected list
+          macs.forEach(function(mac) {
+
+            // Create the option and append to Select2
+            var option = new Option($('.deviceSelector select option[value="' + mac + '"]').html(), mac, true, true);
+
+            $('.deviceSelector select').append(option).trigger('change');
+          });       
+
+        }        
+    
+    }, 100);
+
+}
+
+
+// -----------------------------------------------------------------------------
+// initialize
+// -----------------------------------------------------------------------------
+
+initDeviceSelectors();
+
+console.log("init ui_components.js")