Fuel

by chilipeppr

HTML

<button class="btn-on" >
On
</button>

CSS

html, body {
    height: 100%;
}

button {
    height: 100%;
    width: 100%;
    font-size:500%;
}

JavaScript

var timeoutId = 0;

$('.btn-on').on('touchstart mousedown', function(e) {
	e.preventDefault();
	//console.log("button press");
  turnOn();
  timeoutId = setTimeout(turnOff, 10000);
}).on('touchend mouseup', function(e) {
	e.preventDefault();
	//console.log("button release");
  clearTimeout(timeoutId);
  turnOff();
});

function turnOn() {
	console.log("turnOn");
  $('.btn-on').text("Attempting to turn on");
	$.ajax( "http://10.0.0.78/on" )
    .done(function(data) {
    	console.log("success. data:", data);
      $('.btn-on').text("Turned on");
      //alert( "success" );
    })
    .fail(function() {
      //alert( "error" );
      $('.btn-on').text("Error trying to turn on");
    })
    .always(function() {
      //alert( "complete" );
    });
}

function turnOff() {
	console.log("turnOff");
  $('.btn-on').text("Attempting to turn off");

  $.ajax( "http://10.0.0.78/off" )
    .done(function(data) {
    	console.log("success. data:", data);
      $('.btn-on').text("Success off");
      //alert( "success" );
    })
    .fail(function() {
    $('.btn-on').text("Error turning off");
      //alert( "error" );
    })
    .always(function() {
      //alert( "complete" );
    });
}