mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-06-29 10:21:21 +02:00
Added action field, using submit button, Improved texts, More generic css
This commit is contained in:
peteruithoven
parent
693af8f6d6
commit
557c36b84d
112
css/main.css
112
css/main.css
|
|
@ -1,3 +1,7 @@
|
|||
p, small {
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
#container {
|
||||
position:absolute;
|
||||
width: 100%;
|
||||
|
|
@ -18,7 +22,6 @@ a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
#preloader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -58,7 +61,7 @@ a {
|
|||
.box:hover {
|
||||
background-color: #5491D2;
|
||||
}
|
||||
.box:hover a{
|
||||
.box:hover .link{
|
||||
color: #fff;
|
||||
}
|
||||
.box.complex {
|
||||
|
|
@ -68,7 +71,7 @@ a {
|
|||
box.connecting {
|
||||
border: 2px solid #ff0;
|
||||
}
|
||||
.box a{
|
||||
.box .link{
|
||||
display:block;
|
||||
padding: 25px 25px 12px 25px;
|
||||
text-align: center;
|
||||
|
|
@ -79,19 +82,22 @@ box.connecting {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.box.complex a {
|
||||
.box.complex .link {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
}
|
||||
.box small {
|
||||
margin: 1em 0 0 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#hint {
|
||||
display:none;
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#networkForm {
|
||||
|
|
@ -105,56 +111,60 @@ box.connecting {
|
|||
}
|
||||
|
||||
|
||||
/* FORMS */
|
||||
form label {
|
||||
min-width: 110px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 1px 0 10px 0;
|
||||
}
|
||||
form label.inline {
|
||||
display: inline;
|
||||
float: none;
|
||||
}
|
||||
|
||||
form input, form select {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
form select {
|
||||
margin-right: 5px;
|
||||
}
|
||||
form input[type="text"], form input[type="number"], form input[type="password"], form select {
|
||||
width: 130px;
|
||||
}
|
||||
form input[type="text"], form input[type="number"], form input[type="password"] {
|
||||
border: 1px solid rgb(144, 192, 255);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
form .row {
|
||||
clear: left;
|
||||
}
|
||||
form .row div {
|
||||
/* float: left;*/
|
||||
}
|
||||
|
||||
|
||||
/* NETWORK PANEL */
|
||||
.networkForm {
|
||||
background-color: #fff;
|
||||
/*border-radius: 0 0 25px 25px;*/
|
||||
padding: 12px 25px 12px 25px;
|
||||
}
|
||||
|
||||
form p {
|
||||
.networkForm p {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
form label {
|
||||
min-width: 110px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 1px 0 10px 0;
|
||||
clear: left;
|
||||
}
|
||||
form label.inline {
|
||||
display: inline;
|
||||
float: none;
|
||||
}
|
||||
form div {
|
||||
float: left;
|
||||
}
|
||||
form input[type="text"], form input[type="number"], form input[type="password"] {
|
||||
border: 1px solid rgb(144, 192, 255);
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
width: 130px;
|
||||
|
||||
}
|
||||
form .button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.networkForm #network {
|
||||
margin-right: 5px;
|
||||
width: 130px;
|
||||
}
|
||||
/*margin-right: 5px;*/
|
||||
|
||||
}
|
||||
.networkForm #ssid,
|
||||
.networkForm #listNetworks,
|
||||
.networkForm #passwordSettings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.networkForm.customNetwork #passwordSettings {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -166,7 +176,25 @@ form .button {
|
|||
.networkForm.customNetwork #refreshNetworks {
|
||||
display: none;
|
||||
}
|
||||
.networkForm #btnConnect {
|
||||
display: block;
|
||||
clear:left;
|
||||
.networkForm #status {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.networkForm #action {
|
||||
/*clear: left;*/
|
||||
display: block;
|
||||
padding: 5px 4px 4px 4px;
|
||||
}
|
||||
.networkForm #action.error {
|
||||
background: #EB313C;
|
||||
color: #fff;
|
||||
}
|
||||
.networkForm #action.warning {
|
||||
background: #E9A86E;
|
||||
}
|
||||
.networkForm #action.notice {
|
||||
background: #93CAF4;
|
||||
}
|
||||
.networkForm #action.info {
|
||||
background: #97DD8A;
|
||||
}
|
||||
23
index.html
23
index.html
|
|
@ -55,10 +55,12 @@
|
|||
</div>
|
||||
|
||||
<form id="networkForm">
|
||||
<p>Connect box to your WiFi network:</p>
|
||||
<label for="ssid">Network:</label><input type="text" name="ssid" id="ssid"><input type="button" name="list" value="List" class="button" id="listNetworks"/>
|
||||
<select id="network" name=""></select><input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br/>
|
||||
<div id="passwordSettings">
|
||||
<p>Connect this box to your WiFi network:</p>
|
||||
<div class="row">
|
||||
<label for="ssid">Network:</label><input type="text" name="ssid" id="ssid"><input type="button" name="list" value="List" class="button" id="listNetworks"/>
|
||||
<select id="network" name=""></select><input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br/>
|
||||
</div>
|
||||
<div id="passwordSettings" class="row">
|
||||
<div>
|
||||
<label for="phrase" id="phraseLabel">Password:</label>
|
||||
</div>
|
||||
|
|
@ -68,9 +70,16 @@
|
|||
<label for="showPassword" class="inline">show password</label>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<input type="button" value="Connect" class="button" id="btnConnect"/>
|
||||
<span id="statusText"></span><br/>
|
||||
<div class="row">
|
||||
<input type="submit" value="Connect" class="button" id="btnConnect"/>
|
||||
<span id="status"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span id="action"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<small>Connecting the box to your WiFi network makes it easier to connect to and allows you to update. You can also continue using the box on it’s own WiFi network by going to <a href="http://draw.doodle3d.com">draw.doodle3d.com</a>. </small>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ function Box() {
|
|||
// create box dom element
|
||||
var link = (boxData.link)? boxData.link : url;
|
||||
_element = $("<li id='"+_self.localip+"' class='box'></li>");
|
||||
_element.append("<a href='"+link+"'>"+_self.wifiboxid+"</a>");
|
||||
_element.append("<a href='"+link+"' class='link'>"+_self.wifiboxid+"</a>");
|
||||
_element.hide().appendTo(parentElement).fadeIn(500);
|
||||
|
||||
// create network panel dom element
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ function NetworkPanel() {
|
|||
var _passwordField;
|
||||
var _btnConnect;
|
||||
var _statusTextField;
|
||||
var _actionTextField;
|
||||
|
||||
var _self = this;
|
||||
|
||||
|
|
@ -64,12 +65,16 @@ function NetworkPanel() {
|
|||
_passwordSettings = _element.find("#passwordSettings");
|
||||
_passwordField = _element.find("#phrase");
|
||||
_btnConnect = _element.find("#btnConnect");
|
||||
_statusTextField = _element.find("#statusText");
|
||||
_statusTextField = _element.find("#status");
|
||||
_actionTextField = _element.find("#action");
|
||||
|
||||
_btnRefreshNetworks.on('touchstart mousedown',onRefreshClick);
|
||||
_btnListNetworks.on('touchstart mousedown',showNetworkSelector);
|
||||
_btnConnect.on('touchstart mousedown',_self.connectToNetwork);
|
||||
//_btnConnect.on('touchstart mousedown',_self.connectToNetwork);
|
||||
_element.submit(connectToNetwork);
|
||||
|
||||
_networkSelector.change(networkSelectorChanged);
|
||||
_networkSelector.blur(networkSelectorBlurred);
|
||||
_passwordField.showPassword();
|
||||
|
||||
_statusChangeHandler = statusChangeHandler;
|
||||
|
|
@ -93,6 +98,12 @@ function NetworkPanel() {
|
|||
var selectedOption = $(this).find("option:selected");
|
||||
_self.selectNetwork(selectedOption.val());
|
||||
};
|
||||
function networkSelectorBlurred(e) {
|
||||
console.log("networkSelectorBlurred");
|
||||
var selectedOption = $(this).find("option:selected");
|
||||
//_self.selectNetwork(selectedOption.val());
|
||||
};
|
||||
|
||||
|
||||
this.retrieveStatus = function(completeHandler) {
|
||||
//console.log(_self.id,"NetworkPanel:retrieveStatus");
|
||||
|
|
@ -125,6 +136,7 @@ function NetworkPanel() {
|
|||
function setStatus(status,data) {
|
||||
if(status == _currentNetworkStatus) return;
|
||||
_currentNetworkStatus = status;
|
||||
var targetNetwork;
|
||||
|
||||
// update info
|
||||
switch(status) {
|
||||
|
|
@ -138,6 +150,12 @@ function NetworkPanel() {
|
|||
_currentNetwork = data.ssid;
|
||||
}
|
||||
break;
|
||||
case NetworkAPI.STATUS.CONNECTING:
|
||||
if(_selectedNetwork != undefined) {
|
||||
targetNetwork = _selectedNetwork;
|
||||
} else if(_currentNetwork != undefined) {
|
||||
targetNetwork = _currentNetwork;
|
||||
}
|
||||
case NetworkAPI.STATUS.CREATING:
|
||||
case NetworkAPI.STATUS.CREATED:
|
||||
_currentNetwork = undefined;
|
||||
|
|
@ -169,35 +187,33 @@ function NetworkPanel() {
|
|||
break;
|
||||
}
|
||||
// update status text
|
||||
//updateStatusText(status,data.statusMessage);
|
||||
var msg = "";
|
||||
var statusText = "";
|
||||
switch(status) {
|
||||
case NetworkAPI.STATUS.NOT_CONNECTED:
|
||||
case NetworkAPI.STATUS.CREATING:
|
||||
case NetworkAPI.STATUS.CREATED:
|
||||
break;
|
||||
case NetworkAPI.STATUS.CONNECTED:
|
||||
msg = "Connected to: <b>"+_currentNetwork+"</b>.";
|
||||
break;
|
||||
case NetworkAPI.STATUS.CONNECTING:
|
||||
msg = "Connecting... ";
|
||||
var targetNetwork;
|
||||
if(_selectedNetwork != undefined) {
|
||||
targetNetwork = _selectedNetwork;
|
||||
} else if(_currentNetwork != undefined) {
|
||||
targetNetwork = _currentNetwork;
|
||||
}
|
||||
if(targetNetwork != undefined) {
|
||||
msg += "<br/>Connect your device to <b>"+targetNetwork+"</b>.";
|
||||
}
|
||||
statusText = "Connecting... ";
|
||||
break;
|
||||
case NetworkAPI.STATUS.CONNECTING_FAILED:
|
||||
//msg = data.statusMessage;
|
||||
msg = "Could not connect, please check password";
|
||||
statusText = "Could not connect.";
|
||||
break;
|
||||
}
|
||||
//console.log(" client display msg: ",msg);
|
||||
_statusTextField.html(msg);
|
||||
_statusTextField.html(statusText);
|
||||
|
||||
// update action text
|
||||
var actionText = "";
|
||||
switch(status) {
|
||||
case NetworkAPI.STATUS.CONNECTING:
|
||||
if(targetNetwork != undefined) {
|
||||
actionText = "Connect your device to <b>"+targetNetwork+"</b>.";
|
||||
_actionTextField.attr("class","info");
|
||||
}
|
||||
break;
|
||||
case NetworkAPI.STATUS.CONNECTING_FAILED:
|
||||
actionText = "Please check password";
|
||||
_actionTextField.attr("class","error");
|
||||
break;
|
||||
}
|
||||
_actionTextField.html(actionText);
|
||||
|
||||
if(_statusChangeHandler) _statusChangeHandler(status);
|
||||
}
|
||||
|
|
@ -207,14 +223,14 @@ function NetworkPanel() {
|
|||
//console.log("NetworkPanel:scanned");
|
||||
|
||||
// order networks alphabetically
|
||||
data.networks.sort(function (a, b) {
|
||||
/*data.networks.sort(function (a, b) {
|
||||
if (a.ssid > b.ssid)
|
||||
return 1;
|
||||
if (a.ssid < b.ssid)
|
||||
return -1;
|
||||
// a must be equal to b
|
||||
return 0;
|
||||
});
|
||||
});*/
|
||||
|
||||
fillNetworkSelector(data.networks)
|
||||
_networks = {};
|
||||
|
|
@ -276,7 +292,7 @@ function NetworkPanel() {
|
|||
_element.addClass("customNetwork");
|
||||
}*/
|
||||
|
||||
this.connectToNetwork = function() {
|
||||
function connectToNetwork() {
|
||||
//console.log("NetworkPanel:connectToNetwork");
|
||||
if(_selectedNetwork == NETWORK_SELECTOR_DEFAULT) return;
|
||||
|
||||
|
|
@ -289,6 +305,8 @@ function NetworkPanel() {
|
|||
// because the webserver needs time to switch it's status
|
||||
clearTimeout(_retrieveStatusDelay);
|
||||
_retrieveStatusDelay = setTimeout(_self.retrieveStatus, _retrieveStatusDelayTime);
|
||||
|
||||
return false;
|
||||
};
|
||||
this.destroy = function() {
|
||||
clearTimeout(_retryRetrieveStatusDelay);
|
||||
|
|
|
|||
33
js/main.js
33
js/main.js
|
|
@ -138,8 +138,6 @@ function addBox(boxData) {
|
|||
box.init(boxData,$list);
|
||||
box.destroyedHandler = boxDestroyedHandler;
|
||||
boxes[box.localip] = box;
|
||||
|
||||
//createBox(boxData);
|
||||
}
|
||||
function removeBox(localip,force) {
|
||||
var box = getBox(localip);
|
||||
|
|
@ -166,33 +164,4 @@ function updateIntro() {
|
|||
}
|
||||
$preloader.fadeOut(1000);
|
||||
}
|
||||
}
|
||||
|
||||
/*function createBox(boxData) {
|
||||
//console.log("createBox: ",box.localip,box.wifiboxid);
|
||||
var url = "http://"+box.localip;
|
||||
var element = $("<li id='"+box.localip+"' class='box'></li>");
|
||||
element.data("wifiboxid",box.wifiboxid);
|
||||
element.append("<a href='"+((box.url)? box.url : url)+"'>"+box.wifiboxid+"</a>");
|
||||
|
||||
var networkPanelElement = $("#networkForm").clone();
|
||||
networkPanelElement.addClass(networkPanelElement.attr("id"));
|
||||
networkPanelElement.removeAttr("id");
|
||||
element.append(networkPanelElement);
|
||||
|
||||
var networkPanel = new NetworkPanel();
|
||||
networkPanel.id = box.localip;
|
||||
networkPanel.init(url,networkPanelElement, function(networkStatus) {
|
||||
element.toggleClass("complex",(networkStatus != NetworkAPI.STATUS.CONNECTED));
|
||||
element.toggleClass("connecting",(networkStatus == NetworkAPI.STATUS.CONNECTING));
|
||||
console.log("status changed: ",networkStatus);
|
||||
//console.log(" url: ",url);
|
||||
if(networkStatus == NetworkAPI.STATUS.CONNECTING) {
|
||||
setTimeout(function() {
|
||||
console.log("delayed remove");
|
||||
removeBox(box,true);
|
||||
}, 10000);
|
||||
}
|
||||
});
|
||||
return element;
|
||||
}*/
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user