trevorgreenleaf/gist:693368e0b6dc70aa22d15e2498c3625f

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>IOT Workshop | Particle.io LED Light turn On</title>
	<!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> -->
</head>
<body>

	<div id="app">
		<button class="bg-blue px-4 py-2 shadow text-white rounded-full" @click="turnLightOn()">On</button>
		<button class="bg-blue px-4 py-2 shadow text-white rounded-full" @click="turnLightOff()">Off</button>
	</div>


	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/particle-api-js/7.2.0/particle.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script>
		var particle = new Particle();
		var token;
		var myDeviceId = '25003a000547363332363639';
		var username = '';
		var password = '';

		// Lets go login and get an access token
		particle.login({
			username: username,
			password: password}).then(
			  function(data){
			    console.log('API call completed on promise resolve: ', data.body.access_token);

		    	var devicesPr = particle.listDevices({ auth: data.body.access_token });

		    	// now we have the token
		    	token = data.body.access_token;

		    	// lets just print out to console what we got
				devicesPr.then(
				  function(devices){
				    console.log('Devices: ', devices);
				  },
				  function(err) {
				    console.log('List devices call failed: ', err);
				  }
				);

			  },
			  function(err) {
			    console.log('API call completed on promise fail: ', err);
			  }
			);

		// Now we are going to connect VUE with the HTML and the Photon

		// setup new vue instance
		var app = new Vue({
			// select an html element to bind vue to
			el: '#app',
			// setup a place to store any data
		  	data: {
		    // message: 'Hello Vue!'
		  },
		  methods:{
		  	// A function to turn on the lights
		  	turnLightOn: function (event) {
	  			// now we are going to call a function on the particle photon
				var fnPr = particle.callFunction({
					deviceId: myDeviceId,
					name: 'light',
					argument: 'on',
					auth: token
				});

				// check on the success
				fnPr.then(
				  function(data) {
				    console.log('Function called succesfully:', data);
				  }, function(err) {
				    console.log('An error occurred:', err);
				});
			},
			// a function to turn off the lights
			turnLightOff: function (event) {
	  			// now we are going to call a function on the particle photon
				var fnPr = particle.callFunction({
					deviceId: myDeviceId,
					name: 'light',
					argument: 'off',
					auth: token
				});

				// check on the success
				fnPr.then(
				  function(data) {
				    console.log('Function called succesfully:', data);
				  }, function(err) {
				    console.log('An error occurred:', err);
				});

			},
		  }
		})

	</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>IOT Workshop \| Particle.io LED Light turn On</title>
	<!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> -->
	</head>
	<body>

	<div id="app">
	<button class="bg-blue px-4 py-2 shadow text-white rounded-full" @click="turnLightOn()">On</button>
	<button class="bg-blue px-4 py-2 shadow text-white rounded-full" @click="turnLightOff()">Off</button>
	</div>


	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/particle-api-js/7.2.0/particle.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script>
	var particle = new Particle();
	var token;
	var myDeviceId = '25003a000547363332363639';
	var username = '';
	var password = '';

	// Lets go login and get an access token
	particle.login({
	username: username,
	password: password}).then(
	function(data){
	console.log('API call completed on promise resolve: ', data.body.access_token);

	var devicesPr = particle.listDevices({ auth: data.body.access_token });

	// now we have the token
	token = data.body.access_token;

	// lets just print out to console what we got
	devicesPr.then(
	function(devices){
	console.log('Devices: ', devices);
	},
	function(err) {
	console.log('List devices call failed: ', err);
	}
	);

	},
	function(err) {
	console.log('API call completed on promise fail: ', err);
	}
	);

	// Now we are going to connect VUE with the HTML and the Photon

	// setup new vue instance
	var app = new Vue({
	// select an html element to bind vue to
	el: '#app',
	// setup a place to store any data
	data: {
	// message: 'Hello Vue!'
	},
	methods:{
	// A function to turn on the lights
	turnLightOn: function (event) {
	// now we are going to call a function on the particle photon
	var fnPr = particle.callFunction({
	deviceId: myDeviceId,
	name: 'light',
	argument: 'on',
	auth: token
	});

	// check on the success
	fnPr.then(
	function(data) {
	console.log('Function called succesfully:', data);
	}, function(err) {
	console.log('An error occurred:', err);
	});
	},
	// a function to turn off the lights
	turnLightOff: function (event) {
	// now we are going to call a function on the particle photon
	var fnPr = particle.callFunction({
	deviceId: myDeviceId,
	name: 'light',
	argument: 'off',
	auth: token
	});

	// check on the success
	fnPr.then(
	function(data) {
	console.log('Function called succesfully:', data);
	}, function(err) {
	console.log('An error occurred:', err);
	});

	},
	}
	})

	</script>

	</body>
	</html>