1
1
<!DOCTYPE html>
2
2
< html lang ="en ">
3
3
< head >
4
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
4
5
< script src ="axios.min.js.gz "> </ script >
5
6
< style >
6
7
html , body { height : 100vh ; padding : 0 ; margin : 0 ;}
@@ -79,9 +80,17 @@ <h1 class="" id="sw1_name">SW1 Name</h1>
79
80
</ select >
80
81
</ div >
81
82
< div class ="form-control ">
82
- < label > Persist state:</ label >
83
+ < label for =" sw1_persist " > Persist state:</ label >
83
84
< input type ="checkbox " id ="sw1_persist ">
84
85
</ div >
86
+ < div class ="form-control ">
87
+ < label for ="sw1_auto_off "> Auto off:</ label >
88
+ < input type ="checkbox " id ="sw1_auto_off ">
89
+ </ div >
90
+ < div >
91
+ < label for ="sw1_auto_off_delay "> Auto off delay:</ label >
92
+ < input type ="text " id ="sw1_auto_off_delay " placeholder ="HH:mm:ss " required pattern ="(0*([0-9]|1[0-9]|2[0-3])):(0*([0-9]|[1-4][0-9]|5[0-9])):(0*([0-9]|[1-4][0-9]|5[0-9])) ">
93
+ </ div >
85
94
< div class ="form-control ">
86
95
< label > </ label >
87
96
< button class ="btn " id ="sw1_save_btn ">
@@ -121,9 +130,17 @@ <h1 class="" id="sw2_name">SW2 Name</h1>
121
130
</ select >
122
131
</ div >
123
132
< div class ="form-control ">
124
- < label > Persist state:</ label >
133
+ < label for =" sw2_persist " > Persist state:</ label >
125
134
< input type ="checkbox " id ="sw2_persist ">
126
135
</ div >
136
+ < div class ="form-control ">
137
+ < label for ="sw2_auto_off "> Auto off:</ label >
138
+ < input type ="checkbox " id ="sw2_auto_off ">
139
+ </ div >
140
+ < div >
141
+ < label for ="sw2_auto_off_delay "> Auto off delay:</ label >
142
+ < input type ="text " id ="sw2_auto_off_delay " placeholder ="HH:mm:ss " required pattern ="(0*([0-9]|1[0-9]|2[0-3])):(0*([0-9]|[1-4][0-9]|5[0-9])):(0*([0-9]|[1-4][0-9]|5[0-9])) ">
143
+ </ div >
127
144
< div class ="form-control ">
128
145
< label > </ label >
129
146
< button class ="btn " id ="sw2_save_btn ">
@@ -344,7 +361,7 @@ <h1 class="">Firmware</h1>
344
361
) ;
345
362
}
346
363
347
- function sw_save_common ( cfg_key , in_mode , persist , spinner ) {
364
+ function sw_save_common ( cfg_key , in_mode , persist , auto_off , auto_off_delay , spinner ) {
348
365
spinner . className = "spin" ;
349
366
var data = {
350
367
config : { } ,
@@ -354,6 +371,8 @@ <h1 class="">Firmware</h1>
354
371
data . config [ cfg_key ] = {
355
372
in_mode : parseInt ( in_mode ) ,
356
373
persist_state : persist ,
374
+ auto_off : auto_off ,
375
+ auto_off_delay : dateStringToSeconds ( auto_off_delay )
357
376
} ;
358
377
axios . post ( host + "/rpc/Config.Set" , data ) . then ( function ( res ) {
359
378
} ) . catch ( function ( err ) {
@@ -367,22 +386,57 @@ <h1 class="">Firmware</h1>
367
386
} ) ;
368
387
}
369
388
389
+ function isValid ( swType ) {
390
+ var auto_off_delay = el ( swType + "_auto_off_delay" ) ;
391
+ var auto_off_delay_valid = auto_off_delay . checkValidity ( ) ;
392
+ if ( ! auto_off_delay_valid ) {
393
+ alert ( "Auto off delay must follow 24 hour format HH:mm:ss" ) ;
394
+ return false ;
395
+ }
396
+ return true ;
397
+ }
398
+
399
+ function dateStringToSeconds ( dateString ) {
400
+ var dateStringParts = dateString . split ( ':' ) ;
401
+ var seconds = parseInt ( dateStringParts [ 0 ] ) * 3600 + parseInt ( dateStringParts [ 1 ] ) * 60 + parseInt ( dateStringParts [ 2 ] ) ;
402
+ return seconds ;
403
+ }
404
+
405
+ function secondsToDateString ( seconds ) {
406
+ var date = new Date ( 1970 , 0 , 1 ) ;
407
+ date . setSeconds ( seconds ) ;
408
+ var dateString = twoDigitString ( date . getHours ( ) ) + ":" + twoDigitString ( date . getMinutes ( ) ) + ":" + twoDigitString ( date . getSeconds ( ) ) ;
409
+ return dateString ;
410
+ }
411
+
412
+ function twoDigitString ( num ) {
413
+ return num . toLocaleString ( undefined , { minimumIntegerDigits : 2 } )
414
+ }
415
+
370
416
el ( "sw1_save_btn" ) . onclick = function ( ) {
371
- sw_save_common (
372
- "sw1" ,
373
- el ( "sw1_in_mode" ) . value ,
374
- el ( "sw1_persist" ) . checked ,
375
- el ( "sw1_save_spinner" ) ,
376
- ) ;
417
+ if ( isValid ( "sw1" ) ) {
418
+ sw_save_common (
419
+ "sw1" ,
420
+ el ( "sw1_in_mode" ) . value ,
421
+ el ( "sw1_persist" ) . checked ,
422
+ el ( "sw1_auto_off" ) . checked ,
423
+ el ( "sw1_auto_off_delay" ) . value ,
424
+ el ( "sw1_save_spinner" ) ,
425
+ ) ;
426
+ }
377
427
}
378
428
379
429
el ( "sw2_save_btn" ) . onclick = function ( ) {
380
- sw_save_common (
381
- "sw2" ,
382
- el ( "sw2_in_mode" ) . value ,
383
- el ( "sw2_persist" ) . checked ,
384
- el ( "sw2_save_spinner" ) ,
385
- ) ;
430
+ if ( isValid ( "sw2" ) ) {
431
+ sw_save_common (
432
+ "sw2" ,
433
+ el ( "sw2_in_mode" ) . value ,
434
+ el ( "sw2_persist" ) . checked ,
435
+ el ( "sw2_auto_off" ) . checked ,
436
+ el ( "sw2_auto_off_delay" ) . value ,
437
+ el ( "sw2_save_spinner" ) ,
438
+ ) ;
439
+ }
386
440
}
387
441
388
442
el ( "reboot_btn" ) . onclick = function ( ) {
@@ -420,6 +474,9 @@ <h1 class="">Firmware</h1>
420
474
el ( "sw1_btn_label" ) . innerText = "Turn " + ( res . data . sw1 . state ? "Off" : "On" ) ;
421
475
el ( "sw1_in_mode_" + res . data . sw1 . in_mode ) . selected = true ;
422
476
el ( "sw1_persist" ) . checked = res . data . sw1 . persist ;
477
+ el ( "sw1_auto_off" ) . checked = res . data . sw1 . auto_off ;
478
+ el ( "sw1_auto_off_delay" ) . disabled = ! res . data . sw1 . auto_off ;
479
+ el ( "sw1_auto_off_delay" ) . value = secondsToDateString ( res . data . sw1 . auto_off_delay ) ;
423
480
sw1 . sw_id = res . data . sw1 . id ;
424
481
sw1 . sw_state = res . data . sw1 . state ;
425
482
sw1 . style . display = "block" ;
@@ -434,6 +491,9 @@ <h1 class="">Firmware</h1>
434
491
el ( "sw2_btn_label" ) . innerText = "Turn " + ( res . data . sw2 . state ? "Off" : "On" ) ;
435
492
el ( "sw2_in_mode_" + res . data . sw2 . in_mode ) . selected = true ;
436
493
el ( "sw2_persist" ) . checked = res . data . sw2 . persist ;
494
+ el ( "sw2_auto_off" ) . checked = res . data . sw2 . auto_off ;
495
+ el ( "sw2_auto_off_delay" ) . disabled = ! res . data . sw2 . auto_off ;
496
+ el ( "sw2_auto_off_delay" ) . value = secondsToDateString ( res . data . sw2 . auto_off_delay ) ;
437
497
sw2 . sw_id = res . data . sw2 . id ;
438
498
sw2 . sw_state = res . data . sw2 . state ;
439
499
sw2 . style . display = "block" ;
@@ -454,6 +514,13 @@ <h1 class="">Firmware</h1>
454
514
455
515
function onLoad ( ) {
456
516
getInfo ( ) ;
517
+
518
+ el ( 'sw1_auto_off' ) . onchange = function ( ) {
519
+ el ( 'sw1_auto_off_delay' ) . disabled = ! this . checked ;
520
+ } ;
521
+ el ( 'sw2_auto_off' ) . onchange = function ( ) {
522
+ el ( 'sw2_auto_off_delay' ) . disabled = ! this . checked ;
523
+ } ;
457
524
}
458
525
459
526
function durationStr ( d ) {
0 commit comments