emma
/
pikachu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<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>