Connecting to unsecured network

js/ConnectingToNetworkPage.js

@@ -0,0 +1,93 @@
+/*
+ * This file is part of the Doodle3D project (http://doodle3d.com).
+ *
+ * Copyright (c) 2013, Doodle3D
+ * This software is licensed under the terms of the GNU GPL v2 or later.
+ * See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
+ */
+
+(function ConnectingToNetworkPage(w) {
+	
+	var _page;
+	var _statusField;
+	var _actionField;
+	var _networkAPI = new NetworkAPI();
+	var _pageData = {};
+	
+	var PAGE_ID = "#connecting_to_network";
+	
+	var _self = this;
+	
+	$.mobile.document.on( "pageinit", PAGE_ID, function( event, data ) {
+		console.log("Connecting to network page pageinit");
+		_page = $(this);
+		_statusField = _page.find("#status");
+		_actionField = _page.find("#action");
+  });
+	$.mobile.document.on( "pagebeforeshow", PAGE_ID, function( event, data ) {
+		console.log("Connecting to network page pagebeforeshow");
+		_pageData = d3d.util.getPageParams(PAGE_ID);
+		var boxURL = "http://"+_pageData.localip;
+		//console.log("  _boxData: ",_boxData);
+		
+		_networkAPI.init(boxURL);
+		_networkAPI.refreshing = onRefreshing;
+		_networkAPI.updated = onStatusUpdated;
+		joinNetwork();
+		_networkAPI.startAutoRefresh();
+  });
+	$.mobile.document.on( "pagehide", PAGE_ID, function( event, data ) {
+		console.log("Connecting to network page pagehide");
+		_networkAPI.stopAutoRefresh();
+  });
+	function joinNetwork() {
+		console.log("joinNetwork");
+		console.log("  _pageData.password: ",_pageData.password);
+		_networkAPI.associate(_pageData.ssid,_pageData.password,true);		
+	}
+	function onRefreshing() {
+		//console.log("ConnectingToNetworkPage:onRefreshing");
+		d3d.util.showLoader(true);
+	}
+	function onStatusUpdated(data) {
+		console.log("ConnectingToNetworkPage:onStatusUpdated");
+		console.log("  data: ",data);
+		data.status = parseInt(data.status,10);
+		console.log("  data.status: ",data.status);
+		
+		// update texts
+		var statusText = "";
+		var actionText = "";
+		switch(data.status) {
+			case NetworkAPI.STATUS.CONNECTING:
+				statusText = "Connecting to network ";
+				actionText = "Please reconnect to <b>"+_pageData.ssid+"</b>. Once you are connected return to this page.";
+				_actionField.attr("class","info");
+				break;
+			case NetworkAPI.STATUS.CONNECTING_FAILED:
+				statusText = "Could not connect...";
+				actionText = "Please check password and try again";
+				_actionField.attr("class","error");
+				break;
+			case NetworkAPI.STATUS.CONNECTED:
+				statusText = "Connected";
+				actionText = "The WiFi-Box is connected to <b>"+_pageData.ssid+"</b>";
+				_actionField.attr("class","info");
+				break;
+			default:
+				actionText = "Something went wrong, please try again";
+				_actionField.attr("class","error");
+				break;
+		}
+		_statusField.html(statusText);
+		_actionField.html(actionText);
+		
+		if(data.status == NetworkAPI.STATUS.CONNECTED) {
+			_networkAPI.stopAutoRefresh();
+		}
+		
+		// ToDo: attempt to auto redirect to connected WiFi-Box
+		// attempt to retrieve connectAPI list, if same wifiboxid available (only works for version 0.10.2+), redirect to box page
+	}
+})(window);
+//new JoinNetworkPage();

less/styles.less

@@ -23,6 +23,27 @@ text-align: center;
 	border-radius: 15px;
 }
 
+#action {
+	margin: 0 -1em;
+	padding: 1em;
+	color: #fff;
+  text-shadow: 0px 1px 0px #999;
+}
+
+#action.error {
+    background: #EB313C;
+    text-shadow: 0px 1px 0px #333;
+}
+#action.warning {
+    background: #E9A86E;
+}
+#action.notice {
+    background: #93CAF4;
+}
+#action.info {
+    background: #97DD8A;
+}
+
 @media only screen and (min-width: 768px) {
 	body {
 		padding-left: 20em;

www/index.html

@@ -280,33 +280,20 @@
 	</div><!-- /header -->
 
 	<div role="main" class="ui-content">
-		<p>Select your own network from the following list:</p>
+		<!-- <p>Select your own network from the following list:</p>
-		<br/>
+		<br/> -->
-		<ul data-role="listview">
+		<ul data-role="listview" 
+			data-connecting-target="#connecting_to_network" 
+			data-secured-target="#join_secured_network">
 			<!-- <li data-icon="lock"><a href="#join_secured_network">Baksteen</a></li>
 			<li><a href="#connecting_to_network">Thomson12445</a></li>
-			<li><a href="#connecting_to_network">H234SD53</a></li>
+			<li><a href="#connecting_to_network">H234SD53</a></li>-->
-			<li data-icon="edit"><a href="#join_other_network">Other...</a></li> -->
+			<li data-icon="edit" id="joinOther"><a href="#join_other_network">Other...</a></li>
 		</ul>
 	</div><!-- /content -->
 
 </div><!-- /page -->
 
-
-<div data-role="page" id="join_other_network">
-	<a href="#devices"><img id="logo" src="img/logo_full.png"></a>
-	<div data-role="header">
-		<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
-		<h1>Connect</h1>
-	</div><!-- /header -->
-	<div role="main" class="ui-content">
-		<h3>Join a hidden network</h3>
-		<input type="text" name="textinput-s" id="ssid" placeholder="Network name" value="" data-clear-btn="true">
-		<input type="password" name="textinput-s" id="textinput-s" placeholder="Password" value="" data-clear-btn="true">
-		<button class="ui-shadow ui-btn ui-corner-all">Connect</button>
-	</div><!-- /content -->
-</div><!-- /page -->
-
 <div data-role="page" id="join_secured_network">
 	<a href="#devices"><img id="logo" src="img/logo_full.png"></a>
 	<div data-role="header">
@@ -320,16 +307,30 @@
 	</div><!-- /content -->
 </div><!-- /page -->
 
-<div data-role="page" id="connecting_to_network">
+<div data-role="page" id="join_other_network">
 	<a href="#devices"><img id="logo" src="img/logo_full.png"></a>
 	<div data-role="header">
 		<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
 		<h1>Connect</h1>
 	</div><!-- /header -->
+	<div role="main" class="ui-content">
+		<h3>Join a hidden network</h3>
+		<input type="text" name="textinput-s" id="ssid" placeholder="Network name" value="" data-clear-btn="true">
+		<input type="password" name="textinput-s" id="textinput-s" placeholder="Password" value="" data-clear-btn="true">
+		<button class="ui-shadow ui-btn ui-corner-all">Connect</button>
+	</div><!-- /content -->
+</div><!-- /page -->
+
+<div data-role="page" id="connecting_to_network">
+	<a href="#devices"><img id="logo" src="img/logo_full.png"></a>
+	<div data-role="header">
+		<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
+		<h1>Connecting...</h1>
+	</div><!-- /header -->
 	<div role="main" class="ui-content">
 		<img id="logo" src="img/Connect to home.png">
-		<h3>Connecting to network...</h3>
+		<h3 id="status"></h3>
-		<p>Your WiFi-Box is trying to connect to your local network. To use your WiFi-Box, reconnect to the network you directed the WiFi-Box to. Once you are connected return to this page.</p>
+		<p id="action"></p>
 		<!-- redirect to connect.doodle3d.com when reconnected to internet --> 
 	</div><!-- /content -->
 </div><!-- /page -->