Bootta11 / Pik.ba(olx.ba)

// ==UserScript==
// @name         Pik.ba(olx.ba)
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Pik.ba simple filters on search
// @author       Bootta
// @grant        none
// @include *olx.ba/pretraga*
// @include *pik.ba/pretraga*
// @require https://code.jquery.com/jquery-3.2.1.min.js
// @updateURL https://openuserjs.org/meta/Bootta11/Pik.ba(olx.ba).meta.js
// @license MIT
// ==/UserScript==

(function () {
    'use strict';
    console.log("Pik(olx) filter script is loading");

    var input_div = document.createElement('div');
    document.getElementById('lista_rezultata').insertBefore(input_div, document.getElementById('pretraga-json'));
    $(input_div).html('Loading items... Please wait');

    var item_list = [];
    var filters_list=[];
    var autocompletes=[];

    var list_items_elements = $('.listitem');
    var item_count = 0;
    list_items_elements.each(function (index) {
        $(input_div).html('Loading item ' + (index + 1) + ' of ' + list_items_elements.length);
        console.log('Loading item ' + (index + 1) + ' of ' + list_items_elements.length);
        var id = $(this).attr('id').split('_')[1];

        getPoljaForItem(id, handlePolja);

        function handlePolja(item) {
            item_list.push(item);
            item_count++;
            if (item_count >= list_items_elements.length) {
                console.log('All items loaded');
                addScriptInputs();
            }
        }

    });

    function getPoljaForItem(item_id, callback) {


        var item = {id: item_id};
        $.get('https://www.olx.ba/ajax/artikli_polja/' + item_id + '?slike=0&sakrijprikazi=0&vrstapregleda=tabela', function (data) {

            var polja = data.polja;
            var poljahtml = $.parseHTML(polja);

            var json_polja = {};
            $(poljahtml).each(function () {
                var lijevopolje = $(this).find('.lijevopolje')[0];
                if(filters_list.indexOf($(lijevopolje).text())===-1){
                    filters_list.push($(lijevopolje).text());
                    filters_list.sort();
                }
                if(!autocompletes[$(lijevopolje).text()]){
                    autocompletes[$(lijevopolje).text()]=[];
                }
                
                var desnopolje = $(this).find('.desnopolje')[0];
                if(autocompletes[$(lijevopolje).text()].indexOf($(desnopolje).text())===-1){
                    autocompletes[$(lijevopolje).text()].push($(desnopolje).text());
                    autocompletes[$(lijevopolje).text()].sort();
                }

                json_polja[$(lijevopolje).text()] = $(desnopolje).text();
            });
            item['polja'] = json_polja;
            callback(item);
        });
    }

    function addScriptInputs() {
        input_div.innerHTML = '';

        var input_filter = document.createElement('select');
        var input_value = document.createElement('input');
        var input_datalist=document.createElement('datalist');
        input_datalist.id='input_datalist';
        input_filter.id = 'input_filter';
        //var options_polja = ['Adresa', 'Vrsta grijanja', 'Broj soba'];
        var options_polja=filters_list;
        for (var i = 0; i < options_polja.length; i++) {
            var option = document.createElement('option');
            $(option).text(options_polja[i]);
            $(option).val(options_polja[i]);
            input_filter.appendChild(option);
        }
        input_value.type = 'text';
        input_value.id = 'input_value';
        $(input_value).attr('list','input_datalist');
        input_div.appendChild(input_filter);
        input_div.appendChild(input_value);
        input_div.appendChild(input_datalist);

        var span_checkbox = document.createElement('span');
        var checkbox_include_undefined = document.createElement('input');
        checkbox_include_undefined.type = 'checkbox';
        checkbox_include_undefined.id = 'cb_include_undefined';
        checkbox_include_undefined.style.margin='0 0 3px 5px';
        span_checkbox.appendChild(checkbox_include_undefined);
        $(span_checkbox).append('Include undefined');
        input_div.appendChild(span_checkbox);

        $(input_value).on('change', onChangeInputValue);
        $(checkbox_include_undefined).on('change', onChangeInputValue);
        $(input_value).keypress(onKeypressInputValue);
        $(input_filter).on('change',onInputFilterChange);
        onInputFilterChange();
    }

    function onChangeInputValue() {
        var el = $('#input_value');
        var select_polje_filter = $('#input_filter');

        if (el.val().length > 0) {
            $(item_list).each(function (index) {
                var include_undefined = $('#cb_include_undefined').is(':checked');
                var is_polje_undefined = typeof item_list[index].polja[select_polje_filter.val()] == 'undefined';
                var show_undefined = (include_undefined && is_polje_undefined ? true : false);
                
                if (item_list[index] && item_list[index].polja && (show_undefined || (!is_polje_undefined && item_list[index].polja[select_polje_filter.val()].toLowerCase().indexOf(el.val().toLowerCase()) !== -1))) {
                    $('#art_' + item_list[index].id).show();
                } else {
                    $('#art_' + item_list[index].id).hide();
                }
            });
        } else {
            $(item_list).each(function (index) {
                $('#art_' + item_list[index].id).show();
            });
        }


    }

    function onKeypressInputValue(e) {
        if (e.which == 13) {
            console.log('Enter press');
            onChangeInputValue();
            return false;    
        }
    }
    
    function onInputFilterChange(){
        var val=$('#input_filter').val();
        var dl=$('#input_datalist');
        dl.html('');
        //console.log('FIlter value: '+val);
        $(autocompletes[val]).each(function(index){
            //console.log('Auto: '+autocompletes[val][index]);
            var option=document.createElement('option');
            $(option).val(autocompletes[val][index]);
            dl.append($(option));
        });
    }
})();