2017-09-22 00:13:04 +02:00
< ? php
// -------------------------------------------
// Wake On LAN Webclient -- on private LAN
// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
// -------------------------------------------
if ( isset ( $_GET [ 'wake' ])) {
$return = shell_exec ( 'wakeonlan ' . $_GET [ 'wake' ]);
}
2018-07-08 12:09:40 +02:00
$clients = [ " kvm-nuc.fra80 " => " b8:ae:ed:ec:18:f7 " ,
" stavromulabeta.fra80 " => " 70:85:c2:49:31:2d " ,
" magrathea.fra80 " => " 60:03:08:9c:25:6a " ,
" anke-pc.fra80 " => " 00:25:11:64:71:7c " ];
2017-09-22 00:13:04 +02:00
?>
<! DOCTYPE html >
< html lang = " de " >
< head >
< meta charset = " utf-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > WakeOnLan @ UrsaMinor . fra80 </ title >
< style >
body {
max - width : 500 px ;
margin : 0 auto ;
2017-10-21 00:16:21 +02:00
padding : 0 10 px ;
2017-09-22 00:13:04 +02:00
font - family : - apple - system , BlinkMacSystemFont , " Segoe UI " , Roboto , " Helvetica Neue " , Arial , sans - serif , " Apple Color Emoji " , " Segoe UI Emoji " , " Segoe UI Symbol " ;
}
2017-10-21 00:16:21 +02:00
body > h1 : first - child { margin - top : 0.3 em ; }
2017-09-22 00:13:04 +02:00
small {
font - size : 0.7 em ;
font - weight : 500 ;
}
2017-10-21 00:16:21 +02:00
ul {
padding - left : 20 px ;
}
2017-09-22 00:13:04 +02:00
li {
margin - bottom : 1.5 em ;
}
a , a : visited {
color : blue ;
}
2017-09-23 23:16:39 +02:00
2017-10-21 00:16:21 +02:00
div . info {
margin : - 10 px ; padding : 10 px ;
background - color : #e2e2e2;
border : 1 px solid #787878;
border - radius : 5 px ;
}
div . info > p : first - child {
margin - top : 0 ;
}
2017-09-23 23:16:39 +02:00
. red { color : red ; }
. green { color : green ; }
2017-09-22 00:13:04 +02:00
</ style >
</ head >
< body >
< h1 > Wake On LAN Service </ h1 >
< ? php if ( isset ( $return )) : ?>
2017-10-21 00:16:21 +02:00
< div class = " info " >
< p > The command returned :</ p >
< pre >< ? php echo $return ; ?> </pre>
< a href = " index.php " > OK </ a >
</ div >
2017-09-22 00:13:04 +02:00
< ? php endif ; ?>
2017-10-21 00:16:21 +02:00
< p > I can try to wake up the following clients for you :</ p >
< ul id = " clients " >
2017-09-23 23:16:39 +02:00
< ? php foreach ( $clients as $name => $mac ) : ?>
2017-10-21 00:16:21 +02:00
< li data = " <?php echo $name ?> " >
< a href = " ?wake=<?php echo $mac ?> " > wake up </ a > < ? php echo $name ?> (<?php echo $mac ?>)
2017-09-23 23:16:39 +02:00
</ li >
< ? php endforeach ; ?>
2017-09-22 00:13:04 +02:00
</ ul >
</ body >
2017-10-21 00:16:21 +02:00
< script type = " text/javascript " >
clients = document . getElementById ( " clients " ) . children ;
for ( var i = 0 ; i < clients . length ; i ++ ) {
element = clients [ i ];
hostname = clients [ i ] . attributes [ 'data' ] . value ;
console . log ( " ping: " + hostname );
asyncRequest ( element , hostname );
}
function asyncRequest ( element , hostname ) {
var xhttp = new XMLHttpRequest ();
xhttp . onreadystatechange = function (){
if ( this . readyState == 4 ) {
if ( this . status == 200 ) {
callBack ( element , xhttp . responseText , this . status );
} else {
console . log ( " Error requesting ping: " + this . status + " , " + xhttp . responseText );
}
}
};
xhttp . open ( " GET " , " ping.php?hostname= " + hostname , true );
xhttp . send ();
2017-09-22 00:13:04 +02:00
2017-10-21 00:16:21 +02:00
function callBack ( element , response , statusCode ) {
var node = document . createElement ( " span " );
node . innerHTML = " • " ;
if ( xhttp . responseText . substring ( 0 , 1 ) == " 1 " ) {
node . className = " green " ;
element . appendChild ( node );
element . append ( " online " );
} else {
node . className = " red " ;
element . appendChild ( node );
element . append ( " offline " );
}
}
}
</ script >
</ html >
