Admin UI Analysis

Core Admin Interface Components

Key JavaScript Functions

// Load RETS classes dynamically
function esLoadClassesField($resourceField, classesFieldClass, callback) {
    var value = $resourceField.val();
    if (value && $depEl.length) {
        $.get(ajaxurl, { 
            action: 'esh_load_classes', 
            resource: value 
        }, function(response) {
            $depEl.html('').removeProp('disabled');
            for (var i in response) {
                $depEl.append('');
            }
        }, 'json');
    }
}

// Progress tracking for imports
function startRetsImportProgress(data) {
    $.post(ajaxurl, data, function(response) {
        if (typeof response.progress != 'undefined') {
            $progressContainer.show().percent(response.progress);
        }
        if (response.progress < 100) {
            startRetsImportProgress(response);
        }
    }, 'json');
}

UI Components

Select2 Integration

                                    $('.js-es-select2-filter').select2({
    tags: true,
    multiple: true
});
                                

Progress Bars

                                    $progressContainer.Progress({
    width: $progressContainer.parent().width(),
    height: 31,
    percent: 0,
    backgroundColor: '#d1d1d1',
    barColor: '#82C728'
});
                                

Admin Interface Workflow

1. Connection Management

RETS profile configuration with credential management

                            // RETS profile switching
$('.es-resource__field').on('change', function() {
    esLoadClassesField($(this), '.es-classes__field', function($el) {
        var resource = $el.find('option:selected').val();
        esLoadFilterFields(resource, className, entity, $container);
    });
});
                        

2. Field Mapping Interface

Dynamic RETS field to WordPress field mapping

                            // Sortable field management
function initSortableFields($list) {
    $list.sortable();
}

// Field form submission
$fieldsList.on('change', '.js-field-form input, .js-field-form select', function() {
    var $form = $(this).closest('form');
    $.post(ajaxurl, $form.serialize(), function(response) {
        if (response) {
            $field.replaceWith(response);
        }
    });
});
                        

3. Import Execution

Real-time progress tracking with AJAX updates

                            // Import form submission
$(document).on('submit', '#es-rets-import-form-inner', function() {
    var $form = $(this);
    if ($form.find('.check-column input:checked').length) {
        $form.find('input[type=submit]').prop('disabled', 'disabled');
        startRetsImportProgress($form.serialize());
    }
    return false;
});
                        

Advanced UI Features

Interactive Components

Field Search: Real-time filtering of RETS fields
Sortable Lists: Drag-and-drop field ordering
Modal Popups: Entity data viewing with Magnific Popup
Progress Tracking: Visual import progress indicators

Navigation & Tabs

// Tab navigation system
$('.nav-tab-wrapper .nav-tab-menu li a').click(function() {
    var $wrapper = $(this).closest('.nav-tab-wrapper');
    var tabContainer = $(this).attr('href');
    
    if (tabContainer.length > 1) {
        $wrapper.find('li').removeClass('active');
        $(this).closest('li').addClass('active');
        
        $wrapper.find('.es-tab').hide();
        $(tabContainer).show();
        
        if (history.pushState) {
            history.pushState(null, null, tabContainer);
        }
    }
    return false;
});

Help System & User Guidance

Tooltip Implementation

function initTooltips() {
    var toolTipsterConfig = {
        contentAsHTML: true,
        theme: 'tooltipster-borderless',
        side: ['right'],
        debug: false,
        interactive: true
    };

    $('.js-tooltipster-schedules').tooltipster(toolTipsterConfig)
        .tooltipster('content', Esh.tr.schedulesDescription);
    $('.js-tooltipster-limit').tooltipster(toolTipsterConfig)
        .tooltipster('content', Esh.tr.limitDescription);
    $('.js-tooltipster-non-stop').tooltipster(toolTipsterConfig)
        .tooltipster('content', Esh.tr.nonStopDescription);
}

User Guidance Features

Context-Sensitive Help

Tooltips provide detailed explanations for complex features like scheduling and field mapping

Progress Indicators

Visual feedback during import processes with detailed status messages

Error Handling

User-friendly error messages with actionable guidance

jQuery/AJAX Interface with Progress Tracking