function uiRoom(user, submit) {
    if ($(`#${user.room}`).length === 0) {
        var $room = $('<div class="room" />');
        $room.attr('id', user.room);
        $room.append($('<div class="room-title" />').text(user.name));
        $room.append('<span class="close" />');
        $room.append($('<ul />'));
    
        var $form = $('<form>');
        $form.data('room', user.room);
        $form.append('<input type="text"><button>send</button>');
        
        $room.append($form);

        submit($form);
        
        return $room;
    }
}

function uiOperatorsList(operators, cb) {
    const $ul = $('#operators-list');
    $ul.empty();
    operators.forEach(operator => {
        const $li = $('<li/>').text(operator.name);
        $li.click(() => {
            cb(operator);
        });
        $ul.append($li); 
    });
}

function uiCustomersList(customers, cb) {
    const $ul = $('#customers-list');
    $ul.empty();
    customers.forEach(customer => {
        const $li = $('<li/>').text(customer.name);
        $li.click(() => {
            cb(customer);
        });
        $ul.append($li); 
    });
}

function uiDisplayMessage(data) {
    const $room = $(`#${data.room}`);
    if ($room) {
        $room.find('ul').append($(`<li class="${data.from.role.toLowerCase()}" />`).html(`<small>${data.from.name}</small><br>${data.content}`));
    }
}