12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <link rel="stylesheet" type="text/css" href="garage_door_control.css">
- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
- <meta charset="UTF-8">
- <title>Garage Remote</title>
- <script>
- var xmlHttp = null;
- function pushTheButton(door)
- {
- var url = "/garage_door.lua?action=toggle&door=" + door;
- xmlHttp = new XMLHttpRequest();
- xmlHttp.onreadystatechange = processRequest;
- xmlHttp.open("GET", url, true);
- xmlHttp.send( null );
- }
- function processRequest()
- {
- if(xmlHttp.readyState == 0)
- {
- document.getElementById("label").innerHTML = 'Initalizing...';
- document.getElementById("label").className = "initalizing";
- }
- else if(xmlHttp.readyState == 1)
- {
- document.getElementById("label").innerHTML = 'Server connection established.';
- document.getElementById("label").className = "connection";
- }
- else if(xmlHttp.readyState == 2)
- {
- document.getElementById("label").innerHTML = 'Request received.';
- document.getElementById("label").className = "received";
- }
- else if(xmlHttp.readyState == 3)
- {
- document.getElementById("label").innerHTML = 'Processing request.';
- document.getElementById("label").className = "processing";
- }
- else if(xmlHttp.readyState == 4)
- {
- if(xmlHttp.status == 200)
- {
- document.getElementById("label").innerHTML = xmlHttp.responseText;
- document.getElementById("label").className = "ok";
- sleep(300);
- document.getElementById("label").className = "start";
- }
- else if(xmlHttp.status == 400)
- {
- document.getElementById("label").innerHTML = 'Bad request.';
- document.getElementById("label").className = "bad";
- }
- }
- }
- function sleep(milliseconds){
- var start = new Date().getTime();
- for (var i = 0; i < 1e7; i++)
- {
- if ((new Date().getTime() - start) > milliseconds)
- {
- break;
- }
- }
- }
- </script>
- <style>
- body {
- background-color: #777;
- }
- </style>
- </head>
- <body>
- <div id="remote">
- <div id="label" class="start"></div>
- <a href="#" onclick="pushTheButton(1);" class="button button-1">
- <span>I</span>
- </a>
- <a href="#" onclick="pushTheButton(2); " class="button button-2">
- <span>II</span>
- </a>
- <div id="spacer"></div>
- </div>
- </body>
- </html>
|