<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Wialon Playground - checkbox flag</title>
    <script type="text/javascript" src="//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 class="container-select-unit">
        <select name="itemsUnit" class="select-unit" ></select>
        <input type="text" name="flag" value="0" class="input-flag">
    </div>
    <hr>
    <div class="container-checkbox-flag">
    </div>
    <script type="text/javascript" src="../main.js"></script>
</body>
</html>HTML

CSS

var itemFlags = [{
    "name": "View item and its basic properties",
    "value": wialon.item.Item.accessFlag.view
}, {
    "name": "View detailed item properties",
    "value": wialon.item.Item.accessFlag.viewProperties
}, {
    "name": "Manage access to this item",
    "value": wialon.item.Item.accessFlag.setAcl
}, {
    "name": "Delete item",
    "value": wialon.item.Item.accessFlag.deleteItem
}, {
    "name": "Rename item",
    "value": wialon.item.Item.accessFlag.editName
}, {
    "name": "View custom fields",
    "value": wialon.item.Item.accessFlag.viewCFields
}, {
    "name": "Manage custom fields",
    "value": wialon.item.Item.accessFlag.editCFields
}, {
    "name": "Edit not mentioned properties",
    "value": wialon.item.Item.accessFlag.editOther
}, {
    "name": "Change icon",
    "value": wialon.item.Item.accessFlag.editImage
}, {
    "name": "Query reports or messages",
    "value": wialon.item.Item.accessFlag.execReports
}, {
    "name": "Edit ACL propagated items",
    "value": wialon.item.Item.accessFlag.editSubItems
}, {
    "name": "Manage item log",
    "value": wialon.item.Item.accessFlag.manageLog
}, {
    "name": "View admin fields",
    "value": wialon.item.Item.accessFlag.viewAFields
}, {
    "name": "Manage admin fields",
    "value": wialon.item.Item.accessFlag.editAFields
}, {
    "name": "View and download files",
    "value": wialon.item.Item.accessFlag.viewFile
}, {
    "name": "Upload and delete files",
    "value": wialon.item.Item.accessFlag.editFile
}];

var resourceFlags = [{
    "name": "View notifications",
    "value": wialon.item.Resource.accessFlag.viewNotifications
}, {
    "name": "Create, edit, and delete notifications",
    "value": wialon.item.Resource.accessFlag.editNotifications
}, {
    "name": "View geofences",
    "value": wialon.item.Resource.accessFlag.viewZones
}, {
    "name": "Create, edit, and delete geofences",
    "value": wialon.item.Resource.accessFlag.editZones
}, {
    "name": "View jobs",
    "value": wialon.item.Resource.accessFlag.viewJobs
}, {
    "name": "Create, edit, and delete jobs",
    "value": wialon.item.Resource.accessFlag.editJobs
}, {
    "name": "View report templates",
    "value": wialon.item.Resource.accessFlag.viewReports
}, {
    "name": "Create, edit, and delete report templates",
    "value": wialon.item.Resource.accessFlag.editReports
}, {
    "name": "View drivers",
    "value": wialon.item.Resource.accessFlag.viewDrivers
}, {
    "name": "Create, edit, and delete drivers",
    "value": wialon.item.Resource.accessFlag.editDrivers
}, {
    "name": "View passengers",
    "value": wialon.item.Resource.accessFlag.viewTags
}, {
    "name": "Create, edit, and delete passengers",
    "value": wialon.item.Resource.accessFlag.editTags
}, {
    "name": "Manage account",
    "value": wialon.item.Resource.accessFlag.manageAccount
}, {
    "name": "View trailers",
    "value": wialon.item.Resource.accessFlag.viewTrailers
}, {
    "name": "Create, edit, and delete trailers",
    "value": wialon.item.Resource.accessFlag.editTrailers
}, {
    "name": "Register and delete cultivations",
    "value": wialon.item.Resource.accessFlag.agroEditCultivations
}, {
    "name": "View agro items",
    "value": wialon.item.Resource.accessFlag.agroView
}, {
    "name": "Edit agro items",
    "value": wialon.item.Resource.accessFlag.agroEdit
}, {
    "name": "View orders",
    "value": wialon.item.Resource.accessFlag.viewOrders
}, {
    "name": "Create, edit, and delete orders",
    "value": wialon.item.Resource.accessFlag.editOrders
}, {
    "name": "View orders",
    "value": wialon.item.Resource.accessFlag.viewOrders
}, {
    "name": "Create, edit, and delete orders",
    "value": wialon.item.Resource.accessFlag.editOrders
}, {
    "name": "Register and delete cultivations",
    "value": wialon.item.Resource.accessFlag.agroEditCultivations
}, {
    "name": "View agro items",
    "value": wialon.item.Resource.accessFlag.agroView
}, {
    "name": "Edit agro items",
    "value": wialon.item.Resource.accessFlag.agroEdit
}];

var retranslatorFlags = [{
    "name": "Edit retranslator properties including start/stop",
    "value": wialon.item.Retranslator.accessFlag.editSettings
}, {
    "name": "Add or remove units from retranslator, change their UIDs",
    "value": wialon.item.Retranslator.accessFlag.editUnits
}];

var routeFlags = [{
    "name": "Edit route properties",
    "value": wialon.item.Route.accessFlag.editSettings
}];

var unitFlags = [{
    "name": "Edit connectivity settings",
    "value": wialon.item.Unit.accessFlag.editDevice
}, {
    "name": "Create, edit, and delete sensors",
    "value": wialon.item.Unit.accessFlag.editSensors
}, {
    "name": "Edit counters",
    "value": wialon.item.Unit.accessFlag.editCounters
}, {
    "name": "Delete messages",
    "value": wialon.item.Unit.accessFlag.deleteMessages
}, {
    "name": "Execute commands",
    "value": wialon.item.Unit.accessFlag.executeCommands
}, {
    "name": "Manage events",
    "value": wialon.item.Unit.accessFlag.registerEvents
}, {
    "name": "View connectivity settings (device type, UID, phone, access password, messages filter)",
    "value": wialon.item.Unit.accessFlag.viewDevice
}, {
    "name": "View service intervals",
    "value": wialon.item.Unit.accessFlag.viewServiceIntervals
}, {
    "name": "Create, edit, and delete service intervals",
    "value": wialon.item.Unit.accessFlag.editServiceIntervals
}, {
    "name": "Import messages",
    "value": wialon.item.Unit.accessFlag.importMessages
}, {
    "name": "Export messages",
    "value": wialon.item.Unit.accessFlag.exportMessages
}, {
    "name": "View commands",
    "value": wialon.item.Unit.accessFlag.viewCmdAliases
}, {
    "name": "Create, edit, and delete commands",
    "value": wialon.item.Unit.accessFlag.editCmdAliases
}, {
    "name": "Edit trip detector and fuel consumption",
    "value": wialon.item.Unit.accessFlag.editReportSettings
}, {
    "name": "Use unit in jobs, notifications, routes, retranslators",
    "value": wialon.item.Unit.accessFlag.monitorState
}];

var userFlags = [{
    "name": "Manage user's access rights",
    "value": wialon.item.User.accessFlag.setItemsAccess
}, {
    "name": "Act as given user (create items, login, etc.)",
    "value": wialon.item.User.accessFlag.operateAs
}, {
    "name": "Change flags for given user",
    "value": wialon.item.User.accessFlag.editUserFlags
}];

// Obj essences
var obj = [
    { name: 'Unit / Unit group',
      flags: sortFlags(itemFlags.concat(unitFlags)) },
    { name: 'Resource',
      flags: sortFlags(itemFlags.concat(resourceFlags)) },
    { name: 'User',
      flags: sortFlags(itemFlags.concat(userFlags)) },
    { name: 'Route',
      flags: sortFlags(itemFlags.concat(routeFlags)) },
    { name: 'Retranslator',
      flags: sortFlags(itemFlags.concat(retranslatorFlags)) }
];

function sortFlags(flags) {
    return flags.sort(function(a, b) {
        return a.value - b.value;
    });
}

var selectUnit = document.querySelector('.select-unit');
var checkboxContainer = document.querySelector('.container-checkbox-flag');
var inputFlag = document.querySelector('.input-flag');
var currentTypeObj;
var allFlags = 0;

// Add option in select
obj.forEach(function(typeObj) {
    var name = typeObj.name;
    var option = document.createElement('option');
    option.value = name;
    option.textContent = name;
    selectUnit.appendChild(option);
});

// Trigger checkboxes first-time drawing
onTypeChange.call(selectUnit);

//Create checkbox if change select
selectUnit.addEventListener('change', onTypeChange);

function onTypeChange() {
    var name = this.value;
    var isName = function (item) {
        return item.name === name;
    }

    currentTypeObj = obj.find(isName);

    checkboxContainer.innerHTML = '';

    allFlags = 0;

    if (currentTypeObj) {
        currentTypeObj.flags.forEach(function(item){
            allFlags = wialon.util.Number.or(allFlags, item.value);
            checkboxContainer.appendChild(createCheckbox(item.name, item.value));
        });

        setCheckboxFlags(parseInt(inputFlag.value));
    } else {
        alert('No items!');
    }
}

//Create checkbox container if Input number
inputFlag.addEventListener('change', onInputEdit);
inputFlag.addEventListener('keyup', onInputEdit);

function onInputEdit(e) {
    var valNumber = parseInt(this.value);

    var isValid = (typeof valNumber === 'number') && isFinite(valNumber);

    if (!isValid) valNumber = 0;

    setCheckboxFlags(valNumber);
}

//Value checked input write in field inputFlag
checkboxContainer.addEventListener('click', function(e) {
    var target = e.target;

    if (target.tagName !== 'INPUT') return;

    var oldFlag = parseInt(inputFlag.value);
    var isValid = (typeof oldFlag === 'number') && isFinite(oldFlag);

    if (!isValid) oldFlag = 0;

    var flag = parseInt(target.value, 10);

    if (e.ctrlKey) {
        var checkboxes = checkboxContainer.querySelectorAll('input[type="checkbox"][data-flag]');
        if (target.checked) {
            checkboxes.forEach(function(checkbox){
                if(checkbox.checked && !target) return;
                checkbox.checked = true;
                inputFlag.value = wialon.util.Number.and(allFlags, wialon.util.Number.or(parseInt(checkbox.dataset.flag,10), parseInt(inputFlag.value)));
            });
        } else {
            checkboxes.forEach(function(checkbox){
                checkbox.checked = false;
                inputFlag.value = wialon.util.Number.and(allFlags, wialon.util.Number.exclude(parseInt(inputFlag.value), parseInt(checkbox.dataset.flag,10)));
            });
        }
    } else if (target.checked) {
        inputFlag.value = wialon.util.Number.and(allFlags, wialon.util.Number.or(flag, oldFlag));
    } else {
        inputFlag.value = wialon.util.Number.and(allFlags, wialon.util.Number.exclude(oldFlag, flag));
    }
});

function setCheckboxFlags(value) {
    var checkboxes = checkboxContainer.querySelectorAll('input[type="checkbox"][data-flag]');

    for (var i = 0 ; i < checkboxes.length; i++) {
        var checkbox = checkboxes[i];

        var isChecked = wialon.util.Number.and(parseInt(checkbox.dataset.flag, 10), value);

        checkbox.checked = isChecked;
    }
}

//Create template for checkboxContainer
function createCheckbox(name, flagVal, check) {
    var label = document.createElement('label');
    var input = document.createElement('input');
    var div = document.createElement('div');

    div.className = 'box-checkbox-flag';
    label.appendChild(input);
    label.appendChild(document.createTextNode(name));
    input.name = name;
    input.type = 'checkbox';
    input.value = flagVal;
    input.dataset.flag = flagVal;
    if(check) {
        input.checked = true;
    }
    div.appendChild(label);

    return div;
}
JS

Result

Source code of example Close ✕