<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>BX24 Test App</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-light">

<section>
    <div class="container">
        <h2 class="display-4">Привет, <span data-template="name"></span></h2>
    </div>
</section>

<section>
    <div class="container card p-3">
        <h3 class="lead">Места встройки</h3>
        <div class="placements">
            <button type="button" data-action="get" class="btn btn-info">Список</button>
            <button type="button" data-action="bind" class="btn btn-warning">Добавить</button>
            <button type="button" data-action="unbind" class="btn btn-danger">Удалить</button>
        </div>
    </div>
</section>

<div class="modal fade" id="dynamic-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-save btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- JS-библиотека Б24 (работает только при запуске приложения из-под Битрикс24) -->
<script src="//api.bitrix24.com/api/v1/"></script>

<!-- Bootstrap and Deps -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Главный JS -->
<script src="placements.js"></script>

</body>
</html>
const user = {
    data: {},
    getCurrent: function (callback) {
        BX24.callMethod('user.current', {}, function (res) {
            user.data = res.data();

            if (callback) callback();
        });
    },
    templateName: function () {
        let element = $('[data-template="name"]')[0];
        element.innerHTML = user.data.NAME;
    }
}

const placements = {
    get: function () {
        BX24.callMethod('placement.get', {}, function (res) {
            if (res.error()) {
                console.log(res.error());
                alert(res.error());
            } else {
                console.log(res.data());
                alert('CONSOLE');
            }
        });
    },

    bindModal: function () {
        let params = {
            'PLACEMENT': 'TASK_VIEW_TAB',
            'HANDLER': 'https://bx24-test.reaver.dev/',
            'TITLE': 'BX24 PLACEMENT TEST',
            'DESCRIPTION': 'Just 4 fun',
            'GROUP_NAME': ''
        };
        dynamicModal.showForm(params, placements.bind);
    },
    bind: function (data) {
        console.log(data);
        BX24.callMethod('placement.bind', data, function (res) {
            if (res.error()) {
                console.log(res.error());
                alert(res.error());
            } else {
                console.log(res.data());
                alert('OK');
            }
        });
    },

    unbindModal: function () {
        let params = {
            'PLACEMENT': 'TASK_VIEW_TAB',
            'HANDLER': 'https://bx24-test.reaver.dev/'
        };
        dynamicModal.showForm(params, placements.unbind);
    },
    unbind: function (data) {
        console.log(data);
        BX24.callMethod('placement.unbind', data, function (res) {
            if (res.error()) {
                console.log(res.error());
                alert(res.error());
            } else {
                console.log(res.data());
                alert('OK');
            }
        });
    }

}

const dynamicModal = {
    showForm: function (object, saveCallback) {
        let inputs = '';
        for (let name in object) {
            inputs += `
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">${name}</span>
                    </div>
                    <input type="text" name="${name}" class="form-control" value="${object[name]}">
                </div>
            `;
        }

        $('#dynamic-modal .modal-body').html(`
            <form>
                ${inputs}
            </form>
        `);

        $('#dynamic-modal').modal('show');

        $('#dynamic-modal .btn-save').unbind('click');
        $('#dynamic-modal .btn-save').click(function (e) {
            e.preventDefault();

            let data = {};
            $("#dynamic-modal form").serializeArray().map(function (x) {
                data[x.name] = x.value;
            });

            let result = saveCallback(data);
        });
    }
};



user.getCurrent( user.templateName );

$('.placements button').click(function (e) {
    e.preventDefault();
    let el = $(e.currentTarget);

    switch (el.attr('data-action')) {
        case 'get':
            placements.get();
            break;
        case 'bind':
            placements.bindModal();
            break;
        case 'unbind':
            placements.unbindModal();
            break;
    }
});


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.