CSS Question

Change the div color based on the output of for loop

How do I implode the output of below code into DIV(s) instead of echo "On" or "Off"
And I also want the DIVs to have background color of GREEN if node is ON, and background of RED if node is OFF:

<html>
<body>

<?php
for ($ipa=65; $ipa <= 72; $ipa++){
$ip = "10.32.12.".$ipa;
$ping_output=array();
exec ("ping -n 1 -w 1 $ip 2>&1", $ping_output, $return_val);
//echo $ip." -> ".$return_val."<br/>".implode('<br/>',$ping_output).'<br/>';

if(stripos($ping_output[2],"TTL")!==false) {
echo $ip." is On <br/>";
} else if(stripos($ping_output[2],"unreachable")!==false){
echo $ip." is unreachable <br/>";
} else if(stripos($ping_output[2],"request")!==false){
echo $ip." is Off <br/>";
}
}
?>
</body>
</html>

Answer

here is something that I did, hope it helps you:

back-end, q3.php

<?php
$result = array();
for ($ipa=65, $i = 1; $ipa <= 72; $ipa++, $i++){
   $ip = "10.32.12.".$ipa;
   $ping_output=array();

   exec ("ping -n 1 -w 1 $ip 2>&1", $ping_output, $return_val);
   //echo $ip." -> ".$return_val."<br/>".implode('<br/>',$ping_output).'<br/>';

if(stripos($ping_output[2],"TTL")!==false) {
//     echo $ip." is On <br/>";

     $result["enode".$i] = "on";
   } else if(stripos($ping_output[2],"unreachable")!==false){
//     echo $ip." is unreachable <br/>";
       $result["enode".$i] = "unreachable";
   } else if(stripos($ping_output[2],"request")!==false){
//     echo $ip." is Off <br/>";
       $result["enode".$i] = "off";
   }

}
echo json_encode($result);
?>

front-end, q3h.html

<!DOCTYPE html>
<html>

    <head>
        <title>Node Status</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <style>
            #wrap {
                width: 100%;
                margin: auto;
            }

            div[id*="enode"] {
                display: inline-block;
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: green;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="enode1">Node1</div>
            <div id="enode2">Node2</div>
            <div id="enode3">Node3</div>
            <div id="enode4">Node4</div>
            <div id="enode5">Node5</div>
            <div id="enode6">Node6</div>
            <div id="enode7">Node7</div>
            <button>update nodes</button>
        </div>
        <script>
            $(document).ready(function () {


                $("button").click(function () {
                    $.ajax({
                        url: "q3.php",
                        dataType: 'json',
                        success: function (result) {
                            alert(result);
                            for (key in result) {
                                id = "#"+key;
                                if (result[key] == "on") {
                                    $(id).css("background-color", "green");
                                }

                                if (result[key] == "unreachable") {
                                    $(id).css("background-color", "yellow");
                                }

                                if (result[key] == "off") {
                                    $(id).css("background-color", "red");
                                }
                            }


                        }});
                });
            });



        </script>
    </body>
</html>

so basically, this is what you should do, don't be shy and tell me if this works for you. :)

Comments