@ -1,10 +1,37 @@
var websock ; var websock ;
var password = false ; var password = false ;
var maxNetworks ; var maxNetworks ;
var useWhite = false ;
var messages = [ ] ; var messages = [ ] ;
var webhost ; var webhost ;
var numChanged = 0 ;
var numReset = 0 ;
var numReconnect = 0 ;
var numReload = 0 ;
var useWhite = false ;
// -----------------------------------------------------------------------------
// Messages
// -----------------------------------------------------------------------------
function initMessages ( ) {
messages [ 01 ] = "Remote update started" ;
messages [ 02 ] = "OTA update started" ;
messages [ 03 ] = "Error parsing data!" ;
messages [ 04 ] = "The file does not look like a valid configuration backup or is corrupted" ;
messages [ 05 ] = "Changes saved. You should reboot your board now" ;
messages [ 06 ] = "Home Assistant auto-discovery message sent" ;
messages [ 07 ] = "Passwords do not match!" ;
messages [ 08 ] = "Changes saved" ;
messages [ 09 ] = "No changes detected" ;
messages [ 10 ] = "Session expired, please reload page..." ;
}
// -----------------------------------------------------------------------------
// Utils
// -----------------------------------------------------------------------------
// http://www.the-art-of-web.com/javascript/validate-password/
// http://www.the-art-of-web.com/javascript/validate-password/
function checkPassword ( str ) { function checkPassword ( str ) {
// at least one number, one lowercase and one uppercase letter
// at least one number, one lowercase and one uppercase letter
@ -13,6 +40,10 @@ function checkPassword(str) {
return re . test ( str ) ; return re . test ( str ) ;
} }
function zeroPad ( number , positions ) {
return ( "0" . repeat ( positions ) + number ) . slice ( - positions ) ;
}
function validateForm ( form ) { function validateForm ( form ) {
// password
// password
@ -42,8 +73,59 @@ function valueSet(data, name, value) {
data . push ( { 'name' : name , 'value' : value } ) ; data . push ( { 'name' : name , 'value' : value } ) ;
} }
function zeroPad ( number , positions ) {
return ( "0" . repeat ( positions ) + number ) . slice ( - positions ) ;
function randomString ( length , chars ) {
var mask = '' ;
if ( chars . indexOf ( 'a' ) > - 1 ) mask += 'abcdefghijklmnopqrstuvwxyz' ;
if ( chars . indexOf ( 'A' ) > - 1 ) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' ;
if ( chars . indexOf ( '#' ) > - 1 ) mask += '0123456789' ;
if ( chars . indexOf ( '@' ) > - 1 ) mask += 'ABCDEF' ;
if ( chars . indexOf ( '!' ) > - 1 ) mask += '~`!@#$%^&*()_+-={}[]:";\'<>?,./|\\' ;
var result = '' ;
for ( var i = length ; i > 0 ; -- i ) result += mask [ Math . round ( Math . random ( ) * ( mask . length - 1 ) ) ] ;
return result ;
}
function generateAPIKey ( ) {
var apikey = randomString ( 16 , '@#' ) ;
$ ( "input[name=\"apiKey\"]" ) . val ( apikey ) ;
return false ;
}
function forgetCredentials ( ) {
$ . ajax ( {
'method' : 'GET' ,
'url' : '/' ,
'async' : false ,
'username' : "logmeout" ,
'password' : "123456" ,
'headers' : { "Authorization" : "Basic xxx" }
} ) . done ( function ( data ) {
return false ;
// If we don't get an error, we actually got an error as we expect an 401!
} ) . fail ( function ( ) {
// We expect to get an 401 Unauthorized error! In this case we are successfully
// logged out and we redirect the user.
return true ;
} ) ;
}
function getJson ( str ) {
try {
return JSON . parse ( str ) ;
} catch ( e ) {
return false ;
}
}
// -----------------------------------------------------------------------------
// Actions
// -----------------------------------------------------------------------------
function doReload ( milliseconds ) {
milliseconds = ( typeof milliseconds == 'undefined' ) ? 0 : parseInt ( milliseconds ) ;
setTimeout ( function ( ) {
window . location . reload ( ) ;
} , milliseconds ) ;
} }
function doUpdate ( ) { function doUpdate ( ) {
@ -71,6 +153,21 @@ function doUpdate() {
. prop ( "checked" , false ) . prop ( "checked" , false )
. iphoneStyle ( "refresh" ) ; . iphoneStyle ( "refresh" ) ;
numChanged = 0 ;
setTimeout ( function ( ) {
if ( numReset > 0 ) {
var response = window . confirm ( "You have to reset the board for the changes to take effect, do you want to do it now?" ) ;
if ( response == true ) doReset ( false ) ;
} else if ( numReconnect > 0 ) {
var response = window . confirm ( "You have to reset the wifi connection for the changes to take effect, do you want to do it now?" ) ;
if ( response == true ) doReconnect ( false ) ;
} else if ( numReload > 0 ) {
var response = window . confirm ( "You have to reload the page to see the latest changes, do you want to do it now?" ) ;
if ( response == true ) doReload ( ) ;
}
numReset = numReconnect = numReload = 0 ;
} , 1000 ) ;
} }
return false ; return false ;
@ -108,9 +205,7 @@ function doUpgrade() {
$ ( "#upgrade-progress" ) . hide ( ) ; $ ( "#upgrade-progress" ) . hide ( ) ;
if ( data == 'OK' ) { if ( data == 'OK' ) {
alert ( "Firmware image uploaded, board rebooting. This page will be refreshed in 5 seconds." ) ; alert ( "Firmware image uploaded, board rebooting. This page will be refreshed in 5 seconds." ) ;
setTimeout ( function ( ) {
window . location . reload ( ) ;
} , 5000 ) ;
doReload ( 5000 ) ;
} else { } else {
alert ( "There was an error trying to upload the new image, please try again (" + data + ")." ) ; alert ( "There was an error trying to upload the new image, please try again (" + data + ")." ) ;
} }
@ -146,27 +241,47 @@ function doUpdatePassword() {
return false ; return false ;
} }
function doReset ( ) {
var response = window . confirm ( "Are you sure you want to reset the device?" ) ;
if ( response == false ) return false ;
function doReset ( ask ) {
ask = ( typeof ask == 'undefined' ) ? true : ask ;
if ( numChanged > 0 ) {
var response = window . confirm ( "Some changes have not been saved yet, do you want to save them first?" ) ;
if ( response == true ) return doUpdate ( ) ;
}
if ( ask ) {
var response = window . confirm ( "Are you sure you want to reset the device?" ) ;
if ( response == false ) return false ;
}
websock . send ( JSON . stringify ( { 'action' : 'reset' } ) ) ; websock . send ( JSON . stringify ( { 'action' : 'reset' } ) ) ;
doReload ( 5000 ) ;
return false ; return false ;
} }
function doReconnect ( ) {
var response = window . confirm ( "Are you sure you want to disconnect from the current WIFI network?" ) ;
if ( response == false ) return false ;
function doReconnect ( ask ) {
ask = ( typeof ask == 'undefined' ) ? true : ask ;
if ( numChanged > 0 ) {
var response = window . confirm ( "Some changes have not been saved yet, do you want to save them first?" ) ;
if ( response == true ) return doUpdate ( ) ;
}
if ( ask ) {
var response = window . confirm ( "Are you sure you want to disconnect from the current WIFI network?" ) ;
if ( response == false ) return false ;
}
websock . send ( JSON . stringify ( { 'action' : 'reconnect' } ) ) ; websock . send ( JSON . stringify ( { 'action' : 'reconnect' } ) ) ;
doReload ( 5000 ) ;
return false ; return false ;
}
function doToggle ( element , value ) {
var relayID = parseInt ( element . attr ( "data" ) ) ;
websock . send ( JSON . stringify ( { 'action' : 'relay' , 'data' : { 'id' : relayID , 'status' : value ? 1 : 0 } } ) ) ;
return false ;
} }
function backupSettings ( ) {
function doBackup ( ) {
document . getElementById ( 'downloader' ) . src = webhost + 'config' ; document . getElementById ( 'downloader' ) . src = webhost + 'config' ;
return false ; return false ;
} }
@ -196,7 +311,7 @@ function onFileUpload(event) {
} }
function restoreSettings ( ) {
function doRestore ( ) {
if ( typeof window . FileReader !== 'function' ) { if ( typeof window . FileReader !== 'function' ) {
alert ( "The file API isn't supported on this browser yet." ) ; alert ( "The file API isn't supported on this browser yet." ) ;
} else { } else {
@ -205,24 +320,16 @@ function restoreSettings() {
return false ; return false ;
} }
function randomString ( length , chars ) {
var mask = '' ;
if ( chars . indexOf ( 'a' ) > - 1 ) mask += 'abcdefghijklmnopqrstuvwxyz' ;
if ( chars . indexOf ( 'A' ) > - 1 ) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' ;
if ( chars . indexOf ( '#' ) > - 1 ) mask += '0123456789' ;
if ( chars . indexOf ( '@' ) > - 1 ) mask += 'ABCDEF' ;
if ( chars . indexOf ( '!' ) > - 1 ) mask += '~`!@#$%^&*()_+-={}[]:";\'<>?,./|\\' ;
var result = '' ;
for ( var i = length ; i > 0 ; -- i ) result += mask [ Math . round ( Math . random ( ) * ( mask . length - 1 ) ) ] ;
return result ;
}
function doGenerateAPIKey ( ) {
var apikey = randomString ( 16 , '@#' ) ;
$ ( "input[name=\"apiKey\"]" ) . val ( apikey ) ;
function doToggle ( element , value ) {
var relayID = parseInt ( element . attr ( "data" ) ) ;
websock . send ( JSON . stringify ( { 'action' : 'relay' , 'data' : { 'id' : relayID , 'status' : value ? 1 : 0 } } ) ) ;
return false ; return false ;
} }
// -----------------------------------------------------------------------------
// Visualization
// -----------------------------------------------------------------------------
function showPanel ( ) { function showPanel ( ) {
$ ( ".panel" ) . hide ( ) ; $ ( ".panel" ) . hide ( ) ;
$ ( "#" + $ ( this ) . attr ( "data" ) ) . show ( ) ; $ ( "#" + $ ( this ) . attr ( "data" ) ) . show ( ) ;
@ -236,6 +343,10 @@ function toggleMenu() {
$ ( "#menuLink" ) . toggleClass ( 'active' ) ; $ ( "#menuLink" ) . toggleClass ( 'active' ) ;
} }
// -----------------------------------------------------------------------------
// Templates
// -----------------------------------------------------------------------------
function createRelays ( count ) { function createRelays ( count ) {
var current = $ ( "#relays > div" ) . length ; var current = $ ( "#relays > div" ) . length ;
@ -270,7 +381,7 @@ function createIdxs(count) {
for ( var id = 0 ; id < count ; id ++ ) { for ( var id = 0 ; id < count ; id ++ ) {
var line = $ ( template ) . clone ( ) ; var line = $ ( template ) . clone ( ) ;
$ ( line ) . find ( "input" ) . each ( function ( ) { $ ( line ) . find ( "input" ) . each ( function ( ) {
$ ( this ) . attr ( "data" , id ) . attr ( "tabindex" , 40 + id ) ;
$ ( this ) . attr ( "data" , id ) . attr ( "tabindex" , 40 + id ) . attr ( "original" , "" ) ;
} ) ; } ) ;
if ( count > 1 ) $ ( ".id" , line ) . html ( " " + id ) ; if ( count > 1 ) $ ( ".id" , line ) . html ( " " + id ) ;
line . appendTo ( "#idxs" ) ; line . appendTo ( "#idxs" ) ;
@ -300,7 +411,7 @@ function addNetwork() {
var template = $ ( "#networkTemplate" ) . children ( ) ; var template = $ ( "#networkTemplate" ) . children ( ) ;
var line = $ ( template ) . clone ( ) ; var line = $ ( template ) . clone ( ) ;
$ ( line ) . find ( "input" ) . each ( function ( ) { $ ( line ) . find ( "input" ) . each ( function ( ) {
$ ( this ) . attr ( "tabindex" , tabindex ++ ) ;
$ ( this ) . attr ( "tabindex" , tabindex ++ ) . attr ( "original" , "" ) ;
} ) ; } ) ;
$ ( line ) . find ( ".button-del-network" ) . on ( 'click' , delNetwork ) ; $ ( line ) . find ( ".button-del-network" ) . on ( 'click' , delNetwork ) ;
$ ( line ) . find ( ".button-more-network" ) . on ( 'click' , moreNetwork ) ; $ ( line ) . find ( ".button-more-network" ) . on ( 'click' , moreNetwork ) ;
@ -405,9 +516,6 @@ function initColorsExtras() {
} ) ; } ) ;
} }
function initChannels ( num ) { function initChannels ( num ) {
// check if already initialized
// check if already initialized
@ -495,31 +603,17 @@ function rfbSend() {
websock . send ( JSON . stringify ( { 'action' : 'rfbsend' , 'data' : { 'id' : input . attr ( "data_id" ) , 'status' : input . attr ( "data_status" ) , 'data' : input . val ( ) } } ) ) ; websock . send ( JSON . stringify ( { 'action' : 'rfbsend' , 'data' : { 'id' : input . attr ( "data_id" ) , 'status' : input . attr ( "data_status" ) , 'data' : input . val ( ) } } ) ) ;
} }
function forgetCredentials ( ) {
$ . ajax ( {
'method' : 'GET' ,
'url' : '/' ,
'async' : false ,
'username' : "logmeout" ,
'password' : "123456" ,
'headers' : { "Authorization" : "Basic xxx" }
} ) . done ( function ( data ) {
return false ;
// If we don't get an error, we actually got an error as we expect an 401!
} ) . fail ( function ( ) {
// We expect to get an 401 Unauthorized error! In this case we are successfully
// logged out and we redirect the user.
return true ;
} ) ;
}
// -----------------------------------------------------------------------------
// Processing
// -----------------------------------------------------------------------------
function processData ( data ) { function processData ( data ) {
// title
// title
if ( "app" in data ) {
var title = data . app ;
if ( "version" in data ) {
title = title + " " + data . version ;
if ( "app_name" in data ) {
var title = data . app_name ;
if ( "app_version" in data ) {
title = title + " " + data . app_version ;
} }
$ ( ".pure-menu-heading" ) . html ( title ) ; $ ( ".pure-menu-heading" ) . html ( title ) ;
if ( "hostname" in data ) { if ( "hostname" in data ) {
@ -543,9 +637,7 @@ function processData(data) {
if ( data . action == "reload" ) { if ( data . action == "reload" ) {
if ( password ) forgetCredentials ( ) ; if ( password ) forgetCredentials ( ) ;
setTimeout ( function ( ) {
window . location . reload ( ) ;
} , 1000 ) ;
doReload ( 1000 ) ;
} }
if ( data . action == "rfbLearn" ) { if ( data . action == "rfbLearn" ) {
@ -570,7 +662,7 @@ function processData(data) {
for ( var i in nodes ) { for ( var i in nodes ) {
var node = nodes [ i ] ; var node = nodes [ i ] ;
var element = $ ( "input[name=rfbcode][data_id=" + node [ "id" ] + "][data_status=" + node [ "status" ] + "]" ) ; var element = $ ( "input[name=rfbcode][data_id=" + node [ "id" ] + "][data_status=" + node [ "status" ] + "]" ) ;
if ( element . length ) element . val ( node [ "data" ] ) ;
if ( element . length ) element . val ( node [ "data" ] ) . attr ( "original" , node [ "data" ] ) ;
} }
return ; return ;
} }
@ -596,6 +688,7 @@ function processData(data) {
$ ( "[name='animation']" ) . val ( data [ key ] ) ; $ ( "[name='animation']" ) . val ( data [ key ] ) ;
return ; return ;
} }
if ( key == "anim_speed" ) { if ( key == "anim_speed" ) {
initColorsExtras ( ) ; initColorsExtras ( ) ;
var slider = $ ( "#animSpeed" ) ; var slider = $ ( "#animSpeed" ) ;
@ -651,7 +744,7 @@ function processData(data) {
var wifi = data . wifi [ i ] ; var wifi = data . wifi [ i ] ;
Object . keys ( wifi ) . forEach ( function ( key ) { Object . keys ( wifi ) . forEach ( function ( key ) {
var element = $ ( "input[name=" + key + "]" , line ) ; var element = $ ( "input[name=" + key + "]" , line ) ;
if ( element . length ) element . val ( wifi [ key ] ) ;
if ( element . length ) element . val ( wifi [ key ] ) . attr ( "original" , wifi [ key ] ) ;
} ) ; } ) ;
} }
@ -686,7 +779,7 @@ function processData(data) {
for ( var i in idxs ) { for ( var i in idxs ) {
var element = $ ( ".dczRelayIdx[data=" + i + "]" ) ; var element = $ ( ".dczRelayIdx[data=" + i + "]" ) ;
if ( element . length > 0 ) element . val ( idxs [ i ] ) ;
if ( element . length > 0 ) element . val ( idxs [ i ] ) . attr ( "original" , idxs [ i ] ) ;
} }
return ; return ;
@ -732,7 +825,7 @@ function processData(data) {
} else { } else {
var pre = element . attr ( "pre" ) || "" ; var pre = element . attr ( "pre" ) || "" ;
var post = element . attr ( "post" ) || "" ; var post = element . attr ( "post" ) || "" ;
element . val ( pre + data [ key ] + post ) ;
element . val ( pre + data [ key ] + post ) . attr ( "original" , data [ key ] ) ;
} }
return ; return ;
} }
@ -749,7 +842,7 @@ function processData(data) {
// Look for SELECTs
// Look for SELECTs
var element = $ ( "select[name=" + key + "]" ) ; var element = $ ( "select[name=" + key + "]" ) ;
if ( element . length > 0 ) { if ( element . length > 0 ) {
element . val ( data [ key ] ) ;
element . val ( data [ key ] ) . attr ( "original" , data [ key ] ) ;
return ; return ;
} }
@ -757,19 +850,51 @@ function processData(data) {
// Auto generate an APIKey if none defined yet
// Auto generate an APIKey if none defined yet
if ( $ ( "input[name='apiKey']" ) . val ( ) == "" ) { if ( $ ( "input[name='apiKey']" ) . val ( ) == "" ) {
doG enerateAPIKey( ) ;
g enerateAPIKey( ) ;
} }
} }
function getJson ( str ) {
try {
return JSON . parse ( str ) ;
} catch ( e ) {
return false ;
function hasChanged ( ) {
var newValue , originalValue ;
if ( $ ( this ) . attr ( 'type' ) == 'checkbox' ) {
newValue = $ ( this ) . prop ( "checked" )
originalValue = $ ( this ) . attr ( "original" ) == "true" ;
} else {
newValue = $ ( this ) . val ( ) ;
originalValue = $ ( this ) . attr ( "original" ) ;
}
var hasChanged = $ ( this ) . attr ( "hasChanged" ) || 0 ;
var action = $ ( this ) . attr ( "action" ) ;
if ( typeof originalValue == 'undefined' ) return ;
if ( action == 'none' ) return ;
if ( newValue != originalValue ) {
if ( hasChanged == 0 ) {
++ numChanged ;
if ( action == "reconnect" ) ++ numReconnect ;
if ( action == "reset" ) ++ numReset ;
if ( action == "reload" ) ++ numReload ;
$ ( this ) . attr ( "hasChanged" , 1 ) ;
}
} else {
if ( hasChanged == 1 ) {
-- numChanged ;
if ( action == "reconnect" ) -- numReconnect ;
if ( action == "reset" ) -- numReset ;
if ( action == "reload" ) -- numReload ;
$ ( this ) . attr ( "hasChanged" , 0 ) ;
}
} }
} }
// -----------------------------------------------------------------------------
// Init & connect
// -----------------------------------------------------------------------------
function connect ( host ) { function connect ( host ) {
if ( typeof host === 'undefined' ) { if ( typeof host === 'undefined' ) {
@ -799,33 +924,24 @@ function connect(host) {
} ; } ;
} }
function initMessages ( ) {
messages [ 01 ] = "Remote update started" ;
messages [ 02 ] = "OTA update started" ;
messages [ 03 ] = "Error parsing data!" ;
messages [ 04 ] = "The file does not look like a valid configuration backup or is corrupted" ;
messages [ 05 ] = "Changes saved. You should reboot your board now" ;
messages [ 06 ] = "Home Assistant auto-discovery message sent" ;
messages [ 07 ] = "Passwords do not match!" ;
messages [ 08 ] = "Changes saved" ;
messages [ 09 ] = "No changes detected" ;
messages [ 10 ] = "Session expired, please reload page..." ;
}
function init ( ) { function init ( ) {
initMessages ( ) ; initMessages ( ) ;
$ ( "#menuLink" ) . on ( 'click' , toggleMenu ) ; $ ( "#menuLink" ) . on ( 'click' , toggleMenu ) ;
$ ( ".pure-menu-link" ) . on ( 'click' , showPanel ) ;
$ ( 'progress' ) . attr ( { value : 0 , max : 100 } ) ;
$ ( ".button-update" ) . on ( 'click' , doUpdate ) ; $ ( ".button-update" ) . on ( 'click' , doUpdate ) ;
$ ( ".button-update-password" ) . on ( 'click' , doUpdatePassword ) ; $ ( ".button-update-password" ) . on ( 'click' , doUpdatePassword ) ;
$ ( ".button-reset" ) . on ( 'click' , doReset ) ; $ ( ".button-reset" ) . on ( 'click' , doReset ) ;
$ ( ".button-reconnect" ) . on ( 'click' , doReconnect ) ; $ ( ".button-reconnect" ) . on ( 'click' , doReconnect ) ;
$ ( ".button-settings-backup" ) . on ( 'click' , backupSettings ) ;
$ ( ".button-settings-restore" ) . on ( 'click' , restoreSettings ) ;
$ ( ".button-settings-backup" ) . on ( 'click' , doBackup ) ;
$ ( ".button-settings-restore" ) . on ( 'click' , doRestore ) ;
$ ( '#uploader' ) . on ( 'change' , onFileUpload ) ; $ ( '#uploader' ) . on ( 'change' , onFileUpload ) ;
$ ( ".button-apikey" ) . on ( 'click' , doGenerateAPIKey ) ;
$ ( ".button-upgrade" ) . on ( 'click' , doUpgrade ) ; $ ( ".button-upgrade" ) . on ( 'click' , doUpgrade ) ;
$ ( ".button-apikey" ) . on ( 'click' , generateAPIKey ) ;
$ ( ".button-upgrade-browse" ) . on ( 'click' , function ( ) { $ ( ".button-upgrade-browse" ) . on ( 'click' , function ( ) {
$ ( "input[name='upgrade']" ) [ 0 ] . click ( ) ; $ ( "input[name='upgrade']" ) [ 0 ] . click ( ) ;
return false ; return false ;
@ -834,14 +950,18 @@ function init() {
var fileName = $ ( this ) . val ( ) ; var fileName = $ ( this ) . val ( ) ;
$ ( "input[name='filename']" ) . val ( fileName . replace ( /^.*[\\\/]/ , '' ) ) ; $ ( "input[name='filename']" ) . val ( fileName . replace ( /^.*[\\\/]/ , '' ) ) ;
} ) ; } ) ;
$ ( 'progress' ) . attr ( { value : 0 , max : 100 } ) ;
$ ( ".pure-menu-link" ) . on ( 'click' , showPanel ) ;
$ ( ".button-add-network" ) . on ( 'click' , function ( ) { $ ( ".button-add-network" ) . on ( 'click' , function ( ) {
$ ( "div.more" , addNetwork ( ) ) . toggle ( ) ; $ ( "div.more" , addNetwork ( ) ) . toggle ( ) ;
} ) ; } ) ;
$ ( ".button-ha-sen d" ) . on ( 'click' , function ( ) {
websock . send ( JSON . stringify ( { 'action' : 'ha_sen d' , 'data' : $ ( "input[name='haPrefix']" ) . val ( ) } ) ) ;
$ ( ".button-ha-ad d" ) . on ( 'click' , function ( ) {
websock . send ( JSON . stringify ( { 'action' : 'ha_ad d' , 'data' : $ ( "input[name='haPrefix']" ) . val ( ) } ) ) ;
} ) ; } ) ;
$ ( ".button-ha-del" ) . on ( 'click' , function ( ) {
websock . send ( JSON . stringify ( { 'action' : 'ha_del' , 'data' : $ ( "input[name='haPrefix']" ) . val ( ) } ) ) ;
} ) ;
$ ( document ) . on ( 'change' , 'input' , hasChanged ) ;
$ ( document ) . on ( 'change' , 'select' , hasChanged ) ;
$ . ajax ( { $ . ajax ( {
'method' : 'GET' , 'method' : 'GET' ,
Xose Pérez
7 years ago