beautify the interface by lora

app.py

@@ -12,18 +12,29 @@ recent_dir = os.path.abspath(os.path.dirname(__file__))
 wifi_list = []
 wifi_name_list = []
 def wifi_scan():
+    wifi_list.clear()
+    wifi_name_list.clear()
+    wifi_name_list.append("TEST WIFI")
     wireless = Wireless()
     cells = Cell.all('wlan0')
     for cell in cells:
         wifi_list.append(cell)
         wifi_name_list.append(cell.ssid)
 
+def print_wifi():
+    for i in wifi_name_list:
+        print(i)
 
-
-def is_encrypted(ssid):
+def getWifiCell(ssid):
     for i in wifi_list:
-        if i.ssid==ssid:
+        if i.ssid == ssid:
+            return i
+    return None
+
+def is_encrypted(cell):
+    if cell is not None:
         return i.encrypted
+    else:
         return None
 
 def connect_wifi(ssid, password):
@@ -43,17 +54,24 @@ def initial():
     return 'HTTP OK'
 
 
-@app.route('/wifi_configure')
-def wifi_configure():
+@app.route('/wifi_scan')
+def wifi_config():
     wifi_scan()
     return render_template('wifi.html', data=wifi_name_list)
 
-@app.route('/wifi_pass')
-def wifi_pass():
-
+@app.route('/wifi_pass/<string:ssid>', methods=['GET'])
+def wifi_pass(ssid):
+    print("Ready for Connecting to {}".format(ssid))
+    print_wifi()
+    cell = getWifiCell(ssid)
+    print(cell.ssid)
+    if(cell is not None):
+        if(is_encrypted(cell) == True):
             return render_template('index.html')
-
-
+        else:
+            return render_template('index.html', data=False)
+    else:
+        return "{}".format(cell.ssid)
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0',     port=8080, debug=True)

static/css/main.css

@@ -6,7 +6,7 @@
     width: auto;
     height: 50px;
 }
-.btn{
-    width:auto;
-    height: 50px;
+
+td {
+   cursor: pointer; 
 }

templates/error.html

+ERROR

templates/wifi.html

@@ -3,32 +3,37 @@
 {% block head %}
 {{super()}}
 
-<link href="{{url_for('static',filename='css/keyboard.css')}}" rel="stylesheet">
+<link href="{{url_for('static',filename='css/main.css')}}" rel="stylesheet">
 
 {% endblock %}
 
 {% block content %}
-<div class="container pad-t-50">
-	<table class="table table-striped">
+<h2 class="text-muted text-center m-5">WIFI SSID</h2>
+<div class="container m-5">
+    <table class="table table-hover">
 		<thead>		
 		<tr>
-		<th scope="col">WIFI SSID</th>
+            <th scope="col" class="text-center">Index</th>
+		    <th scope="col" class="text-center">SSID</th>
 		</tr>
 		</thead>
 		<tbody>
             {% for ssid in data %}
-			<tr>
-	    	<td>{{ssid}}</td>
+            <tr onclick="getSSID(this,'{{ssid}}')">
+                <td class="text-center">{{loop.index}}</td>
+                <td class="text-center">{{ssid}}</td>
 			</tr>
             {% endfor %}
 		</tbody>
 	</table>
-<button type="button" id="confirm" class="btn btn-danger">confirm</button>
-</div>
+    <div class="col text-center">
+    <button type="button" id="button" class="btn btn-danger btn-lg">confirm</button>
+    </div>
+    </div>
 {% block footer %}
 <footer class="footer" >
    <div class="footer navbar-fixed-bottom text-center">
-        <p class="text-muted">&copy; NCKU Partner</p>
+        <p class="text-muted">&copy; NTUST PRLAB</p>
     </div>
 </footer>
 {% endblock footer %}
@@ -36,7 +41,34 @@
 
 {% block scripts %}
 {{super()}}
+    <script>
+        var _ssid = "";
+        var prev_item = null;
+        function getSSID(tableRow,ssid){
+            console.log(tableRow)
+            if (prev_item != null) {
+                prev_item.style.backgroundColor = '#FFFFFF';
+            }
+
+            if( prev_item == tableRow){
+                prev_item = null; 
+                tableRow.style.backgroundColor = '#FFFFFF';
+                _ssid = "";
+
+            }else{
+                prev_item = tableRow;
+                tableRow.style.backgroundColor = '#eaeaea';
+                _ssid = ssid;
+            }
+            console.log(ssid);
+        };
+        $('#button').click(function(){
             
+            console.log(_ssid);
+            prev_item.style.backgroundColor = '#FFFFFF';
+            prev_item = null;
+        });
+    </script>
 
 {% endblock %}