Toggle navigation
Wialon Playground
Add library
jQuery latest
Bootstrap 3.3.1
Wialon Javascript SDK
Run
Get code
Fork
Save
Examples
Login
Get units
Change unit icon
Get messages
Get sensors
Edit sensors
Commands
Monitoring notification
Track layer
Get resources
Resources and accounts
Account parameters
Do payment
Management Driver
Create notification
Get geofences
Geofence parameters
Create geofence
Gurtam map
Units on map
Unit trace
Create report template
Execute report
Execute custom report
Create driver
Bind driver to unit
Unit edit fields
Import fillings
Token login for site
Advanced authorization form
Token usage in app
Account hierarchy
Nearest units
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Wialon Playground - Unit edit fields</title> <script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="//hst-api.wialon.com/wsdk/script/wialon.js"></script> </head> <body> <p> Select unit: <select id="units"> <option>Select unit...</option> </select> Select property: <select id="props"> <option>Select property...</option> </select> </p> <table id="table"> <tr> <td >ID</td> <td>Name</td> <td>Value</td> </tr> <tr> <td><input type="text" id="prop_id" placeholder="prop_id" disabled="disabled"/></td> <td><input type="text" id="prop_name" placeholder="prop_name"/></td> <td><input type="text" id="prop_value" placeholder="prop_value"/></td> </tr> </table> <p> <input type="button" value="Create" id="create_btn"/> <input type="button" value="Update" id="update_btn"/> <input type="button" value="Delete" id="delete_btn"/> </p> <div id="log"></div> </body> </html>
HTML
#log, td{ border: 1px solid #c6c6c6; padding:5px;} table select, table input { width:100%; }
CSS
var cur_unit = null; // global variable var cur_prop = null; // global variable var sess = null; // Print message to log function msg(text) { $("#log").prepend(text + "<br/>"); } function init() { // Execute after login succeed $unitsSelect = $("#units"); 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; 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 var units = sess.getItems("avl_unit"); if (!units || !units.length){ msg("Units not found"); return; } // check if units found for (var i = 0; i< units.length; i++){ // construct Select object using found units var u = units[i]; // current item in cycle // append option to select $unitsSelect.append("<option value='"+ u.getId() +"'>"+ u.getName()+ "</option>"); } // bind action to select change event $unitsSelect.change( getProperties ); } ); } function getProperties(){ // construct properties Select list for selected item if(!$("#units").val()){ msg("Properties item"); return;} // exit if no item selected clearForm(); // clear fields var id = parseInt( $("#units").val() ); // IMPORTANT! for loading custom fields needed loaded library "itemCustomFields" sess.loadLibrary("itemCustomFields"); // flags to specify what kind of data should be returned var flags = wialon.util.Number.or(wialon.item.Item.dataFlag.base, wialon.item.Item.dataFlag.customFields, wialon.item.Item.dataFlag.adminFields); 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 item by ID var unit = sess.getItem( id ); var pr = unit.getCustomFields(); // save to global variable cur_unit = unit; cur_prop = pr; // reset select $("#props").html('<option>Select property...</option>') for (var i in pr ) { // construct select list $("#props").append("<option value='" + pr[i].id + "'>" + pr[i].n + "</option>"); msg( 'load property: ' + pr[i].n) } msg(''); // bind action to select change event $("#props").change( renderProp ); } ); } function clearForm(){ // clear fields function cur_prop = null; $("#prop_id").val(""); $("#prop_name").val(""); $("#prop_value").val(""); $('#props').prop('selectedIndex',0); } function renderProp(){ // get and show information about selected property var prop_id = $("#props").val(); if( !prop_id ){ msg("Select item"); return; } // exit if no item selected if( !$("#props").val() ){ clearForm(); return; } // clear fields if empty element selected // put property information to corresponding fields $("#prop_id").val( prop_id ); $("#prop_name").val( cur_prop[prop_id].n ); $("#prop_value").val( cur_prop[prop_id].v ); } function createProperty(){ // create property for selected unit using entered data // get property information from corresponding fields var prop_id = $("#prop_id").val(), name = $("#prop_name").val(), value = $("#prop_value").val(); // validate ID if (prop_id in cur_prop) { msg('You can not create a property with an existing ID!'); return; } // check empty field if ( !name.length || !value.length || !cur_unit) { msg('Please fill in all fields.') return; } // add property cur_unit.createCustomField( {id: prop_id, n: name, v: value} ); msg( 'Property add: name=' + name + ', value=' + value ); // update DOM $('#units').change(); getProperties(); } function updateProperties(){ // update selected property using entered data // get property information from corresponding fields var prop_id = $("#prop_id").val(), name = $("#prop_name").val(), value = $("#prop_value").val(); // check exist editionly field if ( !(prop_id in cur_prop) || !name.length || !value.length || !cur_unit) { msg('Please fill in all fields.') return; } // check empty field if ( !name.length || !value.length || !cur_unit) { msg('Please fill in all fields.') return; } // update property cur_unit.updateCustomField( {id: prop_id, n: name, v: value} ); msg( 'Property update: name=' + name + ', value=' + value ); // update DOM getProperties(); } function deleteProperty(){ // delete selected property // get property information from corresponding fields var prop_id = $("#prop_id").val(); if ( !prop_id ) return; if ( !(prop_id in cur_prop) ) { msg('Property id not found in unit'); return; } // confirm user for delete property; var answer = confirm('Do you really want to delete property "' + $("#prop_name").val() + '"?') if (!answer) return; // delete property cur_unit.deleteCustomField( prop_id ); //delete cur_unit[name]; msg( 'Property delete: id=' + prop_id ); // update DOM clearForm(); $('#units').change(); getProperties(); } // execute when DOM ready $(document).ready(function () { // bind actions to button clicks $("#create_btn").click( createProperty ); $("#update_btn").click( updateProperties ); $("#delete_btn").click( deleteProperty ); wialon.core.Session.getInstance().initSession("https://hst-api.wialon.com"); // init session // For more info about how to generate token check // http://sdk.wialon.com/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 ✕
×
Source code