<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Wialon Playground - Edit sensors</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="//hst-api.wialon.host/wsdk/script/wialon.js"></script>
</head>
<body>

Select unit: <select id="units"></select> available sensors <select id="sensors"></select>
	<table>
	<tr>
		<td>Name</td>
		<td><input type="text" id="s_name"/></td>
		<td rowspan="4">
			<input type="button" value="Create sensor" id="create_btn"/><br/>
			<input type="button" value="Update sensor" id="update_btn"/><br/>
			<input type="button" value="Delete sensor" id="delete_btn"/>
		</td>
	</tr><tr>
		<td>Metrics</td>
		<td><input type="text" id="s_metrics"/></td>
	</tr><tr>
		<td>Type</td>
		<td><select id="s_type"><option></option>
			<option value="fuel level">Fuel level sensor</option>
			<option value="mileage">Mileage sensor</option>
		</select></td>
	</tr><tr>
		<td>Parameter</td>
		<td><select id="s_param"><option></option>
			<option value="speed">Speed of motion</option>
			<option value="sats">Satellites count</option>
			<option value="time">Time in message</option>
		</select></td>
	</tr>
</table>
<div id="log"></div>

</body>
</html>HTML

#log, td{ border: 1px solid #c6c6c6; padding:5px;}
table select, table input { width:100%; }CSS

var cur_sens; // global variable

// Print message to log
function msg(text) { $("#log").prepend(text + "<br/>"); }

function init() { // Execute after login succeed
	var sess = wialon.core.Session.getInstance(); // get instance of current Session
	// flags to specify what kind of data should be returned
	var flags = wialon.item.Item.dataFlag.base |
	         wialon.item.Unit.dataFlag.sensors | 
	         wialon.item.Unit.dataFlag.lastMessage;
	sess.loadLibrary("unitSensors"); // load Sensor Library
	
	sess.updateDataFlags( // load items to current session
	    [{type: "type", data: "avl_unit", flags: flags, mode: 0}], // Items specification
	    function (code) { // updateDataFlags callback
		    if (code) { msg(wialon.core.Errors.getErrorText(code)); return; } // exit if error code 
			// get loaded 'avl_unit's items with edit sensors access 
		    var units = wialon.util.Helper.filterItems( sess.getItems("avl_unit"), 
		        wialon.item.Unit.accessFlag.editSensors);
			
		    if (!units || !units.length){ msg("No units found"); return; } // check if units found
		    for (var i=0; i<units.length; i++) // construct Select list using found units
			    $("#units").append("<option value='" + units[i].getId() + "'>" + units[i].getName() + "</option>");
		    getSensors(); // get Sensors for currently selected unit
            // bind actions to selects 
		    $("#units").change( getSensors ); 
		    $("#sensors").change( getSensorInfo );
	    }
    );
}

function getSensors(){ // construct sensors Select list for selected unit
	if(!$("#units").val()){ msg("Select unit"); return;} // exit if no unit selected
	clearForm(); // clear fields
	$("#sensors").html("<option></option>"); // add first empty element
	var sess = wialon.core.Session.getInstance(); // get instance of current Session
	var unit = sess.getItem( $("#units").val() ); // get unit by id
	var sens = unit.getSensors(); // get unit's sensors
	for(var i in sens) // construct select list
		$("#sensors").append("<option value='" + sens[i].id + "'>" + sens[i].n + "</option>");    
}

function clearForm(){ // clear fields function
	cur_sens = null; 
	$("#s_name").val("");
	$("#s_metrics").val("");
	$("#s_type").val("");
	$("#s_param").val("");
}
  
function getSensorInfo(){ // get and show information about selected Sensor
	if(!$("#units").val()){ msg("Select unit"); return; } // exit if no unit selected
	if(!$("#sensors").val()){ clearForm(); return; } // clear fields if empty element selected
  
	var sess = wialon.core.Session.getInstance(); // get instance of current Session
    // get selected Unit and Sensor by id
	var sens = sess.getItem( $("#units").val() ).getSensor( $("#sensors").val() );
	cur_sens = sens; // save currenly selected sensor to global variable
	// put sensor information to corresponding fields
	$("#s_name").val(sens.n);
	$("#s_metrics").val(sens.m);
	$("#s_type").val(sens.t);
	$("#s_param").val(sens.p);
}

function createSensor(){ // create Sensor for selected unit using entered data
    // get sensor information from corresponding fields
	var name = $("#s_name").val();
	var m = $("#s_metrics").val();
	var type = $("#s_type").val();
	var param = $("#s_param").val();
    // simple validation and exit if invalid
	if(!name){ msg("Enter sensor name"); return; }
	if(!type){ msg("Select sensor type"); return; }
	if(!param){ msg("Enter sensor param"); return; }
  
    // construct Sensor object with defaults and entered data
	var obj = { n:name, d:"", f:0, c:"", vt:1, vs:0, tbl:[], m:m, p:param, t:type};
	var sess = wialon.core.Session.getInstance(); // get instance of current Session
    // get Unit by id and create sensor from obj
	sess.getItem( $("#units").val() ).createSensor(obj,
        function(code, data){ // create sensor callback
		    if (code) msg(wialon.core.Errors.getErrorText(code)); // print error if error code
    		else { // print message about creation succeed and refresh sensor list
    		    msg("<b>'"+ data.n +"'</b> sensor created successfully"); getSensors();
            }
	});
}

function updateSensor(){ // update selected Sensor using entered data
	if(!cur_sens){ msg("Select sensor"); return; } // exit if no sensor selected
	var name = $("#s_name").val(); // get and validate sensor name 
	if(!name){ msg("Enter sensor name"); return; }

	var obj = cur_sens; // construct sensor object from currently selected
    // update sensor data if possible
	obj.n = name;
	obj.m = $("#s_metrics").val();
	if($("#s_param").val()) obj.p = $("#s_param").val();
	if($("#s_type").val()) obj.t = $("#s_type").val();

	var sess = wialon.core.Session.getInstance(); // get instance of current Session
    // get Unit by id and update selected sensor
	sess.getItem( $("#units").val() ).updateSensor(obj, 
	    function(code, data){ // update sensor callback
		    if (code) msg(wialon.core.Errors.getErrorText(code)); // print error if error code
    		else{ // print message about update succeed and refresh sensor list
    		    msg("<b>'"+ data.n +"'</b> sensor updated successfully "); getSensors();
    	    }
	});
}

function deleteSensor(){ // delete selected Sensor
	if(!cur_sens){ msg("Select sensor"); return; } // exit if no sensor selected
	if( confirm("Delete " + cur_sens.n +" sensor?") ){ // ask confirmation
		var sess = wialon.core.Session.getInstance(); // get instance of current Session
        // get Unit by id and delete selected sensor
		sess.getItem( $("#units").val() ).deleteSensor(cur_sens.id, 
		    function(code){ // delete sensor callback
			    if (code) msg(wialon.core.Errors.getErrorText(code)); // print error if error code
			    else{ // print message about delete succeed and refresh sensor list
			        msg("Sensor deleted successfully "); getSensors();
			    }
		});
	}
}

// execute when DOM ready
$(document).ready(function () {
    // bind actions to button clicks
	$("#create_btn").click( createSensor );
	$("#update_btn").click( updateSensor );
	$("#delete_btn").click( deleteSensor );
  
	wialon.core.Session.getInstance().initSession("https://hst-api.wialon.host"); // init session
    // For more info about how to generate token check
    // http://sdk.wialon.host/playground/demo/app_auth_token
	wialon.core.Session.getInstance().loginToken("5dce19710a5e26ab8b7b8986cb3c49e58C291791B7F0A7AEB8AFBFCEED7DC03BC48FF5F8", "", // try to login
	    function (code) { // login callback
    		if (code){ msg(wialon.core.Errors.getErrorText(code)); return; } // exit if error code
	    	msg("Logged successfully"); init(); // when login suceed then run init() function
	});
});
JS

Result

Source code of example Close ✕