|
|
@@ -0,0 +1,166 @@
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<title>pikachu</title>
|
|
|
+<style>
|
|
|
+* {font-size:20px;font-family:sans-serif;}
|
|
|
+body {width:40vw;margin-right:auto;margin-left:auto;}
|
|
|
+devices {display:block;}
|
|
|
+buttons {display:block;margin:40px;}
|
|
|
+button {background-color:#f1d6ae;border:2px solid #8a6d60;padding:10px;border-radius:10px;}
|
|
|
+device {display:block;}
|
|
|
+.on {}
|
|
|
+.off {color:#f7461f;}
|
|
|
+.showMore, #addNew {border:none;background-color:transparent;color:#8a6d60;}
|
|
|
+#addNew {margin-top:20px;}
|
|
|
+info, .addNew {margin:10px 30px;background-color:#ffe99f;padding:20px;}
|
|
|
+info {display:none;}
|
|
|
+#pikachu {position:absolute;z-index:-1;opacity:.3;width:40vw;}
|
|
|
+#title {font-size:40px;padding:40px 0px;font-weight:bold;}
|
|
|
+.result {
|
|
|
+ position: fixed;
|
|
|
+ width: 80vw;
|
|
|
+ height: 80vh;
|
|
|
+ background-color: yellow;
|
|
|
+ top: 10vh;
|
|
|
+ left: 10vw;
|
|
|
+ font-size:60px;
|
|
|
+ text-align:center;
|
|
|
+ border-radius:30px;
|
|
|
+ }
|
|
|
+.result div {font-size:60px;margin: 60px;}
|
|
|
+.result img {height:40vh;display:block;margin-right:auto;margin-left:auto;}
|
|
|
+.success {background-color:#6cdc32;}
|
|
|
+.failure {background-color:#dc7932;}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<img id="pikachu" src="pikachu.jpg" />
|
|
|
+<div id="title">pikachu: turn on and off ip addresses</div>
|
|
|
+<devices>
|
|
|
+ <?php
|
|
|
+ $knownIps = json_decode(file_get_contents("db.json"),TRUE);
|
|
|
+ $count = 0;
|
|
|
+ // loop through all of the known ip's and display them
|
|
|
+ foreach($knownIps as $ip=>$info)
|
|
|
+ {
|
|
|
+ echo "<device class='{$info['status']}'>";
|
|
|
+ echo "<input type='checkbox' id='device{$count}' value='{$ip}' /> ";
|
|
|
+ echo "<label for='device{$count}'>".$info['name']."</label> ";
|
|
|
+ echo "<button class='showMore'>[?]</button>";
|
|
|
+ echo "<info>";
|
|
|
+ echo "ip address: ".$ip."<br />";
|
|
|
+ echo "schedule: ".($info['schedule']=="" ? "none specified" : $info['schedule']);
|
|
|
+ echo "</info>";
|
|
|
+ echo "</device>";
|
|
|
+ $count++;
|
|
|
+ }
|
|
|
+ ?>
|
|
|
+<button id="addNew">[+] add new ip</button>
|
|
|
+</devices>
|
|
|
+<buttons>
|
|
|
+ <button id="turnOn" class="on">turn on</button>
|
|
|
+ <button id="turnOff" class="off">turn off</button>
|
|
|
+</buttons>
|
|
|
+<script type="text/javascript" src="jquery.js"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+$(".showMore").click(function()
|
|
|
+ {
|
|
|
+ $(this).siblings("info").toggle();
|
|
|
+ });
|
|
|
+$("#turnOff,#turnOn").click(function()
|
|
|
+ {
|
|
|
+ var count = 0;
|
|
|
+ // figure out which boxes were checked
|
|
|
+ $.each($("devices input[type='checkbox']:checked"),function()
|
|
|
+ {
|
|
|
+ console.log($(this).val());
|
|
|
+ count++;
|
|
|
+ });
|
|
|
+ if(count>0 && $(this)[0].id==="turnOff")
|
|
|
+ {
|
|
|
+ showResult("turned off","success");
|
|
|
+ }
|
|
|
+ if(count>0 && $(this)[0].id==="turnOn")
|
|
|
+ {
|
|
|
+ showResult("turned on","success");
|
|
|
+ }
|
|
|
+ });
|
|
|
+$("#addNew").click(function()
|
|
|
+ {
|
|
|
+ // remove any existing add new boxes
|
|
|
+ if($(".addNew").length>0) {$(".addNew").remove();}
|
|
|
+ else
|
|
|
+ {
|
|
|
+ // create the html for the add new box
|
|
|
+ var html = "<div class='addNew'><table>";
|
|
|
+ html += "<tr><td>name</td><td><input type='text' id='newName' /></td></tr>";
|
|
|
+ html += "<tr><td>ip</td><td><input type='text' id='newIp' /></td></tr>";
|
|
|
+ html += "<tr><td>schedule</td><td><input type='text' id='newSchedule' /></td></tr>";
|
|
|
+ html += "</table>";
|
|
|
+ html += "<button onclick='addNewIp();'>add</button></div>";
|
|
|
+
|
|
|
+ $(this).after(html);
|
|
|
+ }
|
|
|
+ });
|
|
|
+function addNewIp()
|
|
|
+ {
|
|
|
+ var data = {};
|
|
|
+ data.type="addNewIp";
|
|
|
+ data.ip = $("#newIp").val();
|
|
|
+ data.name = $("#newName").val();
|
|
|
+ data.schedule = $("#newSchedule").val();
|
|
|
+ console.log(data);
|
|
|
+ $.ajax(
|
|
|
+ {
|
|
|
+ url:"ajax.php",
|
|
|
+ type:'post',
|
|
|
+ data:data,
|
|
|
+ success:function(data)
|
|
|
+ {
|
|
|
+ showResult("added ip","success");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+function showResult(type,status)
|
|
|
+ {
|
|
|
+ if(status==="failure")
|
|
|
+ {
|
|
|
+ var inner = "FAILED";
|
|
|
+ var image = "";
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ if(type==="turned on")
|
|
|
+ {
|
|
|
+ var inner = "DEVICE(S) TURNED ON!";
|
|
|
+ var image = "pikachuattack2.jpg";
|
|
|
+ }
|
|
|
+ else if(type==="turned off")
|
|
|
+ {
|
|
|
+ var inner = "DEVICE(S) TURNED OFF!";
|
|
|
+ var image = "pikachuattack.jpg";
|
|
|
+ }
|
|
|
+ else if(type==="added ip")
|
|
|
+ {
|
|
|
+ var inner = "IP ADDRESS ADDED!";
|
|
|
+ var image="lightningbolt.png";
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ var inner = "SOMETHING SUCCEEDED!";
|
|
|
+ var image="lightningbolt.png";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var html = "<div class='result "+status+"'>";
|
|
|
+ html += "<div>";
|
|
|
+ html += inner;
|
|
|
+ html += "<img style='margin-top:10px;' src='"+image+"' />";
|
|
|
+ html += "</div>";
|
|
|
+ html+= "</div>";
|
|
|
+ $("html").append(html);
|
|
|
+ setTimeout(function() {$(".result").remove()},1000);
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
Emma
2 years ago
