Magic_Lamp/index.html at master · criticalfault/Magic_Lamp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Spooky Lamp Control Panel</title>
	<link
		href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
		rel="stylesheet"
		integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
	<script
 		src="https://code.jquery.com/jquery-3.2.1.min.js"
  		integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  		crossorigin="anonymous"></script>
</head>
<body>
	<h1 style="text-align: center;">Spooky Lamp v1.0</h1>
	<hr>
		<p style="text-align: center;">Lamp Feeds</p>
		<p style="text-align: center;">Red:<span id='red'>Off</span></p>
		<p style="text-align: center;">Blue:<span id='blue'>Off</span></p>
		<p style="text-align: center;">Green:<span id="green">Off</span></p>


	<hr>

	<div class='container'>
		<div class='row'>
			<div class='btn btn-success btn-block col-sm-6 col-xs-10' onclick="turnOff()">Turn Off</div>
			<div class='btn btn-success btn-block col-sm-6 col-xs-10' onclick="turnRed()">Toggle Red</div>
			<div class='btn btn-success btn-block col-sm-6 col-xs-10' onclick="turnGreen()">Toggle Green</div>
			<div class='btn btn-success btn-block col-sm-6 col-xs-10' onclick="turnBlue()">Toggle Blue</div>
		</div>
	<div>
	<hr>
		<div onclick="shutdown()" class="btn btn-danger btn-block col-sm-6 col-xs-10">Shutdown Lamp</div>
	<script type="text/javascript">

		function turnOff()
		{
			$.ajax({
			  method: "POST",
			  url: "/off",
			})
			  .done(function( ) {
			    $('#red').html('OFF');
			    $('#blue').html('OFF');
			    $('#green').html('OFF');
			  })
		  .fail(function() {
		    alert( "Connection to the Spooky Lamp couldn't be Established. Contact Dean" );
		 	});
		}

		function turnRed()
		{
			$.ajax({
			  method: "POST",
			  url: "/colorRed",
			}).done(function(e)
			{
				console.log
				(e.light ? $('#red').html('ON') : $('#red').html('OFF'))
		  	})
		  .fail(function() {
		    alert( "Connection to the Spooky Lamp couldn't be Established. Contact Dean" );
		 	});
		}

		function turnGreen()
		{
			$.ajax({
			  method: "POST",
			  url: "/colorGreen",
			}).done(function(e)
			{
		    	(e.light ? $('#green').html('ON') : $('#green').html('OFF'))
		  	})
		  .fail(function() {
		    alert( "Connection to the Spooky Lamp couldn't be Established. Contact Dean" );
		 	});
		}


		function turnBlue()
		{
			$.ajax({
			  method: "POST",
			  url: "/colorBlue",
			}).done(function(e)
			{
		    	(e.light ? $('#blue').html('ON') : $('#blue').html('OFF'))
		  	})
		  	.fail(function() {
		    alert( "Connection to the Spooky Lamp couldn't be Established. Contact Dean" );
		 	});
		}

		function shutdown()
		{
			$.ajax({
			  method: "POST",
			  url: "/shutdown",
			})
		  .done(function()
		  {
		    $('#color').html('NONE');
		    $('#power').html('OFF');
		  })
		  .fail(function() {
		    alert( "Connection to the Spooky Lamp couldn't be Established. Contact Dean" );
		 	});
		}

		setInterval(function()
		{
			function turnOff()
			{
				$.ajax({
				  method: "POST",
				  url: "/lightStatus",
				})
				  .done(function(e) {
				    	$('#red').html(e.redLight);
			    		$('#blue').html(e.blueLight);
			    		$('#green').html(e.greenLight);
				  })
			  .fail(function() {
			    alert( "Connection to the Spooky Lamp couldn't be Established. Contact Dean" );
				});
			}
		},2000);
	</script>
</body>
</html>