Merge pull request #372 from glaszig/ui/xhr-load-cached-wifi-stations

load wifi stations via ajax, cache the scan result

ajax/networking/wifi_stations.php

@@ -0,0 +1,94 @@
+<?php
+
+require('../../includes/csrf.php');
+include_once('../../includes/config.php');
+include_once('../../includes/functions.php');
+
+$cacheTime = filemtime(RASPI_WPA_SUPPLICANT_CONFIG);
+$cacheKey  = "wifi_stations_$cacheTime";
+
+if (isset($_REQUEST["refresh"])) {
+    deleteCache($cacheKey);
+}
+
+echo cache($cacheKey, function() {
+    $networks = [];
+    $network  = null;
+    $ssid     = null;
+
+    // Find currently configured networks
+    exec(' sudo cat ' . RASPI_WPA_SUPPLICANT_CONFIG, $known_return);
+    foreach ($known_return as $line) {
+        if (preg_match('/network\s*=/', $line)) {
+            $network = array('visible' => false, 'configured' => true, 'connected' => false);
+        } elseif ($network !== null) {
+            if (preg_match('/^\s*}\s*$/', $line)) {
+                $networks[$ssid] = $network;
+                $network = null;
+                $ssid = null;
+            } elseif ($lineArr = preg_split('/\s*=\s*/', trim($line))) {
+                switch (strtolower($lineArr[0])) {
+                    case 'ssid':
+                        $ssid = trim($lineArr[1], '"');
+                        break;
+                    case 'psk':
+                        if (array_key_exists('passphrase', $network)) {
+                            break;
+                        }
+                    case '#psk':
+                        $network['protocol'] = 'WPA';
+                    case 'wep_key0': // Untested
+                        $network['passphrase'] = trim($lineArr[1], '"');
+                        break;
+                    case 'key_mgmt':
+                        if (! array_key_exists('passphrase', $network) && $lineArr[1] === 'NONE') {
+                            $network['protocol'] = 'Open';
+                        }
+                        break;
+                    case 'priority':
+                        $network['priority'] = trim($lineArr[1], '"');
+                        break;
+                }
+            }
+        }
+    }
+
+    exec('sudo wpa_cli -i ' . RASPI_WIFI_CLIENT_INTERFACE . ' scan');
+    sleep(3);
+    exec('sudo wpa_cli -i ' . RASPI_WIFI_CLIENT_INTERFACE . ' scan_results', $scan_return);
+    array_shift($scan_return);
+
+    foreach ($scan_return as $network) {
+        $arrNetwork = preg_split("/[\t]+/", $network);  // split result into array
+
+        // If network is saved
+        if (array_key_exists(4, $arrNetwork) && array_key_exists($arrNetwork[4], $networks)) {
+            $networks[$arrNetwork[4]]['visible'] = true;
+            $networks[$arrNetwork[4]]['channel'] = ConvertToChannel($arrNetwork[1]);
+            // TODO What if the security has changed?
+        } else {
+            $networks[$arrNetwork[4]] = array(
+                'configured' => false,
+                'protocol' => ConvertToSecurity($arrNetwork[3]),
+                'channel' => ConvertToChannel($arrNetwork[1]),
+                'passphrase' => '',
+                'visible' => true,
+                'connected' => false
+            );
+        }
+
+        // Save RSSI
+        if (array_key_exists(4, $arrNetwork)) {
+            $networks[$arrNetwork[4]]['RSSI'] = $arrNetwork[2];
+        }
+    }
+
+    exec('iwconfig ' . RASPI_WIFI_CLIENT_INTERFACE, $iwconfig_return);
+    foreach ($iwconfig_return as $line) {
+        if (preg_match('/ESSID:\"([^"]+)\"/i', $line, $iwconfig_ssid)) {
+            $networks[$iwconfig_ssid[1]]['connected'] = true;
+        }
+    }
+
+    return renderTemplate('wifi_stations', compact('networks'));
+});

dist/css/custom.css

@@ -98,3 +98,9 @@ pre.unstyled {
 	margin-top: 0.5em;
 	margin-bottom: 0.5em;
 }
+
+.loading-spinner {
+  background: url("../../img/loading-spinner.gif") no-repeat scroll center center transparent;
+  min-height: 150px;
+  width: 100%;
+}

includes/config.php

@@ -5,6 +5,7 @@ define('RASPI_CONFIG', '/etc/raspap');
 define('RASPI_CONFIG_NETWORKING', RASPI_CONFIG.'/networking');
 define('RASPI_ADMIN_DETAILS', RASPI_CONFIG.'/raspap.auth');
 define('RASPI_WIFI_CLIENT_INTERFACE', 'wlan0');
+define('RASPI_CACHE_PATH', sys_get_temp_dir() . '/raspap');
 
 // Constants for configuration file paths.
 // These are typical for default RPi installs. Modify if needed.

includes/configure_client.php

@@ -7,48 +7,6 @@
 function DisplayWPAConfig()
 {
     $status = new StatusMessages();
-    $networks = array();
-
-    // Find currently configured networks
-    exec(' sudo cat ' . RASPI_WPA_SUPPLICANT_CONFIG, $known_return);
-
-    $network = null;
-    $ssid = null;
-
-    foreach ($known_return as $line) {
-        if (preg_match('/network\s*=/', $line)) {
-            $network = array('visible' => false, 'configured' => true, 'connected' => false);
-        } elseif ($network !== null) {
-            if (preg_match('/^\s*}\s*$/', $line)) {
-                $networks[$ssid] = $network;
-                $network = null;
-                $ssid = null;
-            } elseif ($lineArr = preg_split('/\s*=\s*/', trim($line))) {
-                switch (strtolower($lineArr[0])) {
-                    case 'ssid':
-                        $ssid = trim($lineArr[1], '"');
-                        break;
-                    case 'psk':
-                        if (array_key_exists('passphrase', $network)) {
-                            break;
-                        }
-                    case '#psk':
-                        $network['protocol'] = 'WPA';
-                    case 'wep_key0': // Untested
-                        $network['passphrase'] = trim($lineArr[1], '"');
-                        break;
-                    case 'key_mgmt':
-                        if (! array_key_exists('passphrase', $network) && $lineArr[1] === 'NONE') {
-                            $network['protocol'] = 'Open';
-                        }
-                        break;
-                    case 'priority':
-                        $network['priority'] = trim($lineArr[1], '"');
-                        break;
-                }
-            }
-        }
-    }
 
     if (isset($_POST['connect'])) {
         $result = 0;
@@ -128,45 +86,6 @@ function DisplayWPAConfig()
         }
     }
 
-    exec('sudo wpa_cli -i ' . RASPI_WIFI_CLIENT_INTERFACE . ' scan');
-    sleep(3);
-    exec('sudo wpa_cli -i ' . RASPI_WIFI_CLIENT_INTERFACE . ' scan_results', $scan_return);
-
-    array_shift($scan_return);
-
-    // display output
-    foreach ($scan_return as $network) {
-        $arrNetwork = preg_split("/[\t]+/", $network);  // split result into array
-
-        // If network is saved
-        if (array_key_exists(4, $arrNetwork) && array_key_exists($arrNetwork[4], $networks)) {
-            $networks[$arrNetwork[4]]['visible'] = true;
-            $networks[$arrNetwork[4]]['channel'] = ConvertToChannel($arrNetwork[1]);
-            // TODO What if the security has changed?
-        } else {
-            $networks[$arrNetwork[4]] = array(
-            'configured' => false,
-            'protocol' => ConvertToSecurity($arrNetwork[3]),
-            'channel' => ConvertToChannel($arrNetwork[1]),
-            'passphrase' => '',
-            'visible' => true,
-            'connected' => false
-            );
-	}
-
-        // Save RSSI
-        if (array_key_exists(4, $arrNetwork)) {
-            $networks[$arrNetwork[4]]['RSSI'] = $arrNetwork[2];
-        }
-
-    }
-
-    exec('iwconfig ' . RASPI_WIFI_CLIENT_INTERFACE, $iwconfig_return);
-    foreach ($iwconfig_return as $line) {
-        if (preg_match('/ESSID:\"([^"]+)\"/i', $line, $iwconfig_ssid)) {
-            $networks[$iwconfig_ssid[1]]['connected'] = true;
-        }
-    }
 ?>
 
   <div class="row">
@@ -178,7 +97,7 @@ function DisplayWPAConfig()
           <p><?php $status->showMessages(); ?></p>
           <h4><?php echo _("Client settings"); ?></h4>
               <div class="btn-group btn-block">
-              <a href=".?<?php echo htmlspecialchars($_SERVER['QUERY_STRING'], ENT_QUOTES); ?>" style="padding:10px;float: right;display: block;position: relative;margin-top: -55px;" class="col-md-2 btn btn-info" id="update"><?php echo _("Rescan"); ?></a>
+              <button type="button" style="padding:10px;float: right;display: block;position: relative;margin-top: -55px;" class="col-md-2 btn btn-info js-reload-wifi-stations"><?php echo _("Rescan"); ?></button>
             </div> 
 
             <form method="POST" action="?page=wpa_conf" name="wpa_conf_form" class="row">
@@ -195,96 +114,7 @@ function DisplayWPAConfig()
                 }
               </script>
 
-                <?php $index = 0; ?>
+              <div class="js-wifi-stations loading-spinner"></div>
-                <?php foreach ($networks as $ssid => $network) { ?>
- 
-              <div class="col-md-6">
-                <div class="panel panel-default">
-                  <div class="panel-body">
-
-                  <input type="hidden" name="ssid<?php echo $index ?>" value="<?php echo htmlentities($ssid, ENT_QUOTES) ?>" />
-                  <h4><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></h4>
-
-                  <div class="row">
-                    <div class="col-xs-4 col-md-4">Status</div>
-                    <div class="col-xs-4 col-md-4">
-                        <?php if ($network['configured']) { ?>
-                        <i class="fa fa-check-circle fa-fw"></i>
-                        <?php } ?>
-                        <?php if ($network['connected']) { ?>
-                        <i class="fa fa-exchange fa-fw"></i>
-                        <?php } ?>
-                     </div>
-                  </div>
-
-                  <div class="row">
-                    <div class="col-xs-4 col-md-4">Channel</div>
-                    <div class="col-xs-4 col-md-4">
-                        <?php if ($network['visible']) { ?>
-                            <?php echo htmlspecialchars($network['channel'], ENT_QUOTES) ?>
-                        <?php } else { ?>
-                          <span class="label label-warning"> X </span>
-                        <?php } ?>
-                    </div>
-                  </div>
-
-                  <div class="row">
-                    <div class="col-xs-4 col-md-4">RSSI</div>
-                    <div class="col-xs-6 col-md-6">
-                    <?php echo htmlspecialchars($network['RSSI'], ENT_QUOTES);
-                        echo "dB (";
-                    if ($network['RSSI'] >= -50) {
-                        echo 100;
-                    } elseif ($network['RSSI'] <= -100) {
-                        echo 0;
-                    } else {
-                        echo  2*($network['RSSI'] + 100);
-                    }
-                        echo "%)";
-                    ?>
-                    </div>
-                  </div>
-
-                    <?php if (array_key_exists('priority', $network)) { ?>
-                      <input type="hidden" name="priority<?php echo $index ?>" value="<?php echo htmlspecialchars($network['priority'], ENT_QUOTES); ?>" />
-                    <?php } ?>
-                  <input type="hidden" name="protocol<?php echo $index ?>" value="<?php echo htmlspecialchars($network['protocol'], ENT_QUOTES); ?>" />
-
-                  <div class="row">
-                    <div class="col-xs-4 col-md-4">Security</div>
-                    <div class="col-xs-6 col-md-6"><?php echo $network['protocol'] ?></div>
-                  </div>
-
-                  <div class="form-group">
-                    <div class="input-group col-xs-12 col-md-12">
-                      <span class="input-group-addon" id="passphrase">Passphrase</span>
-                        <?php if ($network['protocol'] === 'Open') { ?> 
-                          <input type="password" disabled class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="" />
-                        <?php } else { ?>
-                          <input type="password" class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" onKeyUp="CheckPSK(this, 'update<?php echo $index?>')" >
-                          <span class="input-group-btn">
-                            <button class="btn btn-default" onclick="showPassword(<?php echo $index; ?>)" type="button">Show</button>
-                          </span>
-                        <?php } ?>
-                    </div>
-                  </div>
-
-                  <div class="btn-group btn-block ">
-                    <?php if ($network['configured']) { ?>
-                        <input type="submit" class="col-xs-4 col-md-4 btn btn-warning" value="<?php echo _("Update"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>"<?php echo ($network['protocol'] === 'Open' ? ' disabled' : '')?> />
-                        <button type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo $index?>" ><?php echo _("Connect"); ?></button>
-                    <?php } else { ?>
-                        <input type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo _("Add"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>" <?php echo ($network['protocol'] === 'Open' ? '' : ' disabled')?> />
-                    <?php } ?>
-                        <input type="submit" class="col-xs-4 col-md-4 btn btn-danger" value="<?php echo _("Delete"); ?>" name="delete<?php echo $index ?>"<?php echo ($network['configured'] ? '' : ' disabled')?> />
-                  </div><!-- /.btn-group -->
-
-                </div><!-- /.panel-body -->
-              </div><!-- /.panel-default -->
-            </div><!-- /.col-md-6 -->
-
-            <?php $index += 1; ?>
-            <?php } ?>
 
           </form>
         </div><!-- ./ Panel body -->

includes/functions.php

@@ -573,3 +573,67 @@ function SaveTORAndVPNConfig()
     }
 }
 
+/**
+ * Renders a simple PHP template
+ */
+function renderTemplate($name, $data)
+{
+    $file = "../../templates/$name.php";
+    if (!file_exists($file)) {
+        return "template $name ($file) not found";
+    }
+
+    if (is_array($data)){
+        extract($data);
+    }
+
+    ob_start();
+    include $file;
+    return ob_get_clean();
+}
+
+function expandCacheKey($key)
+{
+    return RASPI_CACHE_PATH . "/" . $key;
+}
+
+function hasCache($key)
+{
+    $cacheKey = expandCacheKey($key);
+    return file_exists($cacheKey);
+}
+
+function readCache($key)
+{
+    $cacheKey = expandCacheKey($key);
+    if (!file_exists($cacheKey)) {
+        return null;
+    }
+    return file_get_contents($cacheKey);
+}
+
+function writeCache($key, $data)
+{
+    mkdir(RASPI_CACHE_PATH, 0777, true);
+    $cacheKey = expandCacheKey($key);
+    file_put_contents($cacheKey, $data);
+}
+
+function deleteCache($key)
+{
+    if (hasCache($key)) {
+        $cacheKey = expandCacheKey($key);
+        unlink($cacheKey);
+    }
+}
+
+function cache($key, $callback)
+{
+    if (hasCache($key)) {
+        return readCache($key);
+    } else {
+        $data = $callback();
+        writeCache($key, $data);
+        return $data;
+    }
+}

js/custom.js

@@ -180,6 +180,20 @@ function contentLoaded() {
     }
 }
 
+function loadWifiStations(refresh) {
+    return function() {
+        var complete = function() { $(this).removeClass('loading-spinner'); }
+        var qs = refresh === true ? '?refresh' : '';
+        $('.js-wifi-stations')
+            .addClass('loading-spinner')
+            .empty()
+            .load('/ajax/networking/wifi_stations.php'+qs, complete);
+    };
+}
+
+$(".js-reload-wifi-stations").on("click", loadWifiStations(true));
+
 $(document)
     .ajaxSend(setCSRFTokenHeader)
-    .ready(contentLoaded);
+    .ready(contentLoaded)
+    .ready(loadWifiStations());

templates/wifi_stations.php

@@ -0,0 +1,93 @@
+<?php if (empty($networks)): ?>
+  <p class="lead text-center"><?php echo _('No Wifi stations found') ?></p>
+  <p class="text-center"><?php echo _('Click "Rescan" to search for nearby Wifi stations.') ?></p>
+<?php endif ?>
+<?php $index = 0; ?>
+<?php foreach ($networks as $ssid => $network): ?>
+  <div class="col-md-6">
+    <div class="panel panel-default">
+      <div class="panel-body">
+
+      <input type="hidden" name="ssid<?php echo $index ?>" value="<?php echo htmlentities($ssid, ENT_QUOTES) ?>" />
+      <h4><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></h4>
+
+      <div class="row">
+        <div class="col-xs-4 col-md-4">Status</div>
+        <div class="col-xs-4 col-md-4">
+            <?php if ($network['configured']) { ?>
+            <i class="fa fa-check-circle fa-fw"></i>
+            <?php } ?>
+            <?php if ($network['connected']) { ?>
+            <i class="fa fa-exchange fa-fw"></i>
+            <?php } ?>
+         </div>
+      </div>
+
+      <div class="row">
+        <div class="col-xs-4 col-md-4">Channel</div>
+        <div class="col-xs-4 col-md-4">
+            <?php if ($network['visible']) { ?>
+                <?php echo htmlspecialchars($network['channel'], ENT_QUOTES) ?>
+            <?php } else { ?>
+              <span class="label label-warning"> X </span>
+            <?php } ?>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-xs-4 col-md-4">RSSI</div>
+        <div class="col-xs-6 col-md-6">
+        <?php echo htmlspecialchars($network['RSSI'], ENT_QUOTES);
+            echo "dB (";
+        if ($network['RSSI'] >= -50) {
+            echo 100;
+        } elseif ($network['RSSI'] <= -100) {
+            echo 0;
+        } else {
+            echo  2*($network['RSSI'] + 100);
+        }
+            echo "%)";
+        ?>
+        </div>
+      </div>
+
+        <?php if (array_key_exists('priority', $network)) { ?>
+          <input type="hidden" name="priority<?php echo $index ?>" value="<?php echo htmlspecialchars($network['priority'], ENT_QUOTES); ?>" />
+        <?php } ?>
+      <input type="hidden" name="protocol<?php echo $index ?>" value="<?php echo htmlspecialchars($network['protocol'], ENT_QUOTES); ?>" />
+
+      <div class="row">
+        <div class="col-xs-4 col-md-4">Security</div>
+        <div class="col-xs-6 col-md-6"><?php echo $network['protocol'] ?></div>
+      </div>
+
+      <div class="form-group">
+        <div class="input-group col-xs-12 col-md-12">
+          <span class="input-group-addon" id="passphrase">Passphrase</span>
+            <?php if ($network['protocol'] === 'Open') { ?>
+              <input type="password" disabled class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="" />
+            <?php } else { ?>
+              <input type="password" class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" onKeyUp="CheckPSK(this, 'update<?php echo $index?>')" >
+              <span class="input-group-btn">
+                <button class="btn btn-default" onclick="showPassword(<?php echo $index; ?>)" type="button">Show</button>
+              </span>
+            <?php } ?>
+        </div>
+      </div>
+
+      <div class="btn-group btn-block ">
+        <?php if ($network['configured']) { ?>
+            <input type="submit" class="col-xs-4 col-md-4 btn btn-warning" value="<?php echo _("Update"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>"<?php echo ($network['protocol'] === 'Open' ? ' disabled' : '')?> />
+            <button type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo $index?>" ><?php echo _("Connect"); ?></button>
+        <?php } else { ?>
+            <input type="submit" class="col-xs-4 col-md-4 btn btn-info" value="<?php echo _("Add"); ?>" id="update<?php echo $index ?>" name="update<?php echo $index ?>" <?php echo ($network['protocol'] === 'Open' ? '' : ' disabled')?> />
+        <?php } ?>
+            <input type="submit" class="col-xs-4 col-md-4 btn btn-danger" value="<?php echo _("Delete"); ?>" name="delete<?php echo $index ?>"<?php echo ($network['configured'] ? '' : ' disabled')?> />
+      </div><!-- /.btn-group -->
+
+    </div><!-- /.panel-body -->
+  </div><!-- /.panel-default -->
+</div><!-- /.col-md-6 -->
+
+<?php $index += 1; ?>
+<?php endforeach ?>