started with functionality in wifi selection

views/WifiPasswordView.js

@@ -13,6 +13,7 @@ import themeColors from '../components/themeColors';
 
 
 function WifiPasswordView(props) {
+  props = {...props, ...props.route.params};
 
   let iconName = "wifi-strength-" + props.strength;
   if (props.lock) {

views/WifiSelectionView.js

@@ -1,10 +1,11 @@
-import React from "react";
+import React from 'react';
 import {
   StyleSheet,
   Text,
   View,
   TouchableOpacity,
   ScrollView,
+  ActivityIndicator,
 } from "react-native";
 import SetupView from '../components/SetupView';
 import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
@@ -12,12 +13,12 @@ import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
 
 function WifiListElement(props) {
   let iconName = "wifi-strength-" + props.strength;
-  if(props.lock) {
+  if (props.lock) {
     iconName += "-lock";
   }
 
   return (
-    <TouchableOpacity>
+    <TouchableOpacity onPress={props.onPress}>
       <View style={wifiListElementStyles.container}>
         <MaterialIcon style={wifiListElementStyles.icon} name={iconName}></MaterialIcon>
         <Text style={wifiListElementStyles.text} >{props.text}</Text>
@@ -51,32 +52,96 @@ const wifiListElementStyles = {
 
 // ---------------------------------------------------------------------------------------------
 
+class WifiSelectionView extends React.Component {
+  constructor() {
+    super();
+    this.state = { wifiInfo: [] };
+  }
 
-function WifiSelectionView(props) {
+  processDeviceResponse(response) {
+    // sort from strong to weak
+    response.sort((e1, e2) => {
+      if (e1.rssi > e2.rssi)
+        return -1;
+      if (e1.rssi < e2.rssi)
+        return 1;
+      else
+        return 0;
+    });
 
-  return (
-    <SetupView
-      headerText="WiFi Connection"
-      lowerLeftButtonText="My WiFi wasn't found"
-      lowerRightButtonText="Need help?"
-    >
-      <View style={styles.listContainer}>
+    let ssidsAlreadyAdded = {};
+    let result = [];
+    for (let i = 0; i < response.length; i++) {
+      if (response[i].ssid in ssidsAlreadyAdded)
+        continue;
+
+      const locked = (response[i].sec != "open");
+      let strength = 1;
+      if (response[i].rssi > -30)
+        strength = 4;
+      else if (response[i].rssi > -67)
+        strength = 3;
+      else if (response[i].rssi > -70)
+        strength = 2;
+
+      result.push({ ssid: response[i].ssid, locked: locked, strength: strength });
+      ssidsAlreadyAdded[response[i].ssid] = true;
+    }
+    return result;
+  }
+
+  componentDidMount() {
+    this.props.device.conn.scanWifiNetworks().then(
+      (result) => {
+        this.setState({ wifiInfo: this.processDeviceResponse(result) })
+      }
+    );
+  }
+
+  render() {
+    let inner;
+
+    if (this.state.wifiInfo.length > 0) {
+      inner = (
         <ScrollView>
-          <WifiListElement text="WLAN" strength="4" lock={true}></WifiListElement>
-          <WifiListElement text="GastWLAN" strength="2" lock={false}></WifiListElement>
+          {this.state.wifiInfo.map(e => (
+            <WifiListElement
+              text={e.ssid}
+              strength={e.strength}
+              lock={e.locked}
+              key={e.ssid}
+              onPress={() => { this.props.navigation.navigate("WifiPasswordView", {
+                ssid: e.ssid,
+                lock: e.locked,
+                strength: e.strength,
+                buttonText: "Set Password",
+                subText: "Please enter password for your home WiFi",
+              }); }}>
+            </WifiListElement>)
+          )}
+        </ScrollView>)
+    }
+    else {
+      inner = (<ActivityIndicator size="large" color="#ffffff" />
 
-          <WifiListElement text="WLAN" strength="4"></WifiListElement>
-          <WifiListElement text="GastWLAN" strength="2"></WifiListElement>
+      )
+    }
 
-          <WifiListElement text="WLAN" strength="4"></WifiListElement>
-          <WifiListElement text="GastWLAN" strength="2"></WifiListElement>
-        </ScrollView>
-
-      </View>
-    </SetupView>
-  )
+    return (
+      <SetupView
+        headerText="WiFi Connection"
+        lowerLeftButtonText="My WiFi wasn't found"
+        lowerRightButtonText="Need help?"
+      >
+        <View style={styles.listContainer}>
+          {inner}
+        </View>
+      </SetupView>
+    )
+  }
 }
 
+
 const styles = StyleSheet.create({
   listContainer: {
     height: "75%",