trevorgreenleaf · July 24, 2018 14:21
diff --git a/gistfile1.txt b/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>