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

<div>
	<button id="login">Login</button>
</div>

<div>
	<p>Resources: <select id="resources"></select> <button id="import">Import</button></p>
	<p id="result"></p>
	<p>CSV (name, radius, lat, lon):</p>
	<textarea id="csv_textarea">Gurtam Office,25,53.90588,27.45692
Brest,5000,52.106302,23.704118</textarea>
</div>

</body>
</html>HTML

textarea {
    min-width: 100%;
    min-height: 300px;
}CSS

const DNS = 'https://hosting.wialon.com';
const API_DNS = 'https://hst-api.wialon.com';

let session = wialon.core.Session.getInstance();
let remote;

let loginButtonEl = document.getElementById('login');
let resourcesSelectEl = document.getElementById('resources');
let importButtonEl = document.getElementById('import');
let csvTextareaEl = document.getElementById('csv_textarea');
let resultEl = document.getElementById('result');

loginButtonEl.addEventListener('click', doLogin);
importButtonEl.addEventListener('click', doImport);

importButtonEl.disabled = true;

window.addEventListener('message', onPostMessage);

// Main function
function doLogin() {
	let url =
		DNS +
		'/login.html?' +
		uriParams({
			client_id: 'Geofences Import',
			access_type: -1, // full access
			activation_time: 0,
			duration: 60, // seconds
			redirect_uri: DNS + '/post_message.html',
			response_type: 'hash',
		});

	window.open(url, '_blank', 'width=760, height=500, top=300, left=500');
}

function doAuthByHash(hash) {
	session.initSession(API_DNS);

	session.loginAuthHash(hash, '', onAuthorized);
}

function onAuthorized(error) {
	if (error) {
		console.error('auth', error);
		return;
	}

	session.loadLibrary('resourceZones');
	remote = wialon.core.Remote.getInstance();

	loginButtonEl.disabled = true;

	session.searchItems(
		{
			itemsType: 'avl_resource',
			propName: '',
			propValueMask: '',
			sortType: 'sys_name',
			propType: '',
			or_logic: false,
		},
		1,
		0x1,
		0,
		0,
		onResourcesFetched,
	);
}

function onResourcesFetched(error, result) {
	if (error) {
		console.error('auth', error);
		return;
	}

	result.items.forEach(resource => {
		let optionEl = document.createElement('option');

		optionEl.value = resource.getId();
		optionEl.textContent = resource.getName();
		optionEl._wialonResource = resource; // HACK

		resourcesSelectEl.appendChild(optionEl);
	});

	importButtonEl.disabled = false;
}

function doImport() {
	let csv = parseCsv(csvTextareaEl.value);
	if (!csv) return;

	resultEl.textContent = 'start';

	let zoneDefs = [];

	for (let [name, radius, lat, lon] of csv) {
		if (!name || !radius || !lat || !lon) return;

		radius = parseInt(radius, 10);
		lat = parseFloat(lat);
		lon = parseFloat(lon);

		if (!isFinite(radius) || !isFinite(lat) || !isFinite(lon)) return;

		zoneDefs.push({
			n: name,
			t: 3, // circle
			w: radius,
			f: 0x20, // show shape
			c: 2566953267, // color
			p: [{
				x: lon,
				y: lat,
				r: radius,
			}],
		});
	}

	resultEl.textContent = 'parsing ok';

	let selectedOption = resourcesSelectEl.selectedOptions[0];
	let resource = selectedOption._wialonResource; // HACK

	if (!resource) {
		resultEl.textContent = 'no resource';
		return;
	}

	remote.startBatch();

	let errorsCount = 0;

	zoneDefs.forEach(zone => {
		resource.createZone(zone, error => {
			if (error) {
				errorsCount++;

				console.error('zone creation', error);
			}
		});
	});

	remote.finishBatch(() => {
		resultEl.textContent = `finished, errors ${errorsCount}`;
	});
}

function onPostMessage(e) {
	let msg = e.data;

	if (typeof msg !== 'string') return;
	if (!/^loginauth:/.test(msg)) return;

	let str = msg.slice('loginauth:'.length);

	let authParams = tryParseJson(str);

	if (!authParams || !authParams.access_hash) return;

	doAuthByHash(authParams.access_hash);
}

function uriParams(params) {
	return Object.entries(params)
		.map(
			([key, value]) =>
				`${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
		)
		.join('&');
}

function parseCsv(str) {
	let rows = str.split('\n');

	return rows
		.map(row => {
			row = row.trim();
			if (!row) return '';

			return parseCsvRow(row);
		})
		.filter(row => !!row);
}

function parseCsvRow(str) {
	// I not sure with this regexp, see escaping rules
	// https://tools.ietf.org/html/rfc4180
	// It should match or quoted string with double quotes inside, or unescaped
	let regexp = /(?:"((?:[^"]|"")*)"|([^",]*))(,|$)/gm;

	let columns = [];

	let prevIndex = 0;

	while (true) {
		let match = regexp.exec(str);
		if (!match) return null; // invalid csv

		let [full, escaped, unescaped, comma] = match;

		if (match.index !== prevIndex) return null; // skipped part, invalid csv
		prevIndex = match.index += full.length;

		let column;

		if (escaped) {
			column = escaped.replace(/""/g, '"');
		} else {
			column = unescaped.trim();
		}

		columns.push(column);

		if (!comma) break;
	}

	return columns;
}

function tryParseJson(str) {
	try {
		return JSON.parse(str);
	} catch (e) {
		return null;
	}
}
JS

Result

Source code of example Close ✕