Bilvelger (Filter)

function swapKeysAndValues(obj) {
    const swapped = Object.entries(obj).map(([key, value]) => [value, key]);
    return Object.fromEntries(swapped);
}

function orderByKey(categories) {
    var ordered = Object.keys(categories)
        .sort()
        .reduce(function (obj, key) {
            obj[key] = categories[key];
            return obj;
        }, {});

    return ordered;
}

function mystoreSort(categories) {
    var modified = swapKeysAndValues(categories);
    modified = orderByKey(modified);

    return modified;
}

// Custom code for car picker in header
$(document).ready(function () {
      var html = `
          <div class="custom-filter-wrapper">
             <div class="custom-filter-title">Velg din bil her</div>
             <div class="custom-filter">
                <div>
                   <select id="main-category">
                      <option value="0">Velg bilmerke </option>
                   </select>
                </div>
                <div>
                   <select id="subcategory" disabled>
                      <option value="0">Velg bilmodell</option>
                   </select>
                </div>
                <div>
                   <select id="subsubcategory" disabled>
                      <option value="0">Velg modell/årsmodell</option>
                   </select>
                </div>
             </div>
          </div>`;

      $(".frontpage-banner").append(html);

    // List all main categories

    const CAT_ID_FOR_CUSTOM_CAR_PICKER = "14296"
    
    $.get("/ajax.php?ajaxfunc=get_subcategories&cID="+CAT_ID_FOR_CUSTOM_CAR_PICKER+"", function (data) {
        var categories = JSON.parse(data);
        var tempCategories = mystoreSort(categories);
    
        for (category in tempCategories) {
            $("#main-category").append(
                '<option value="' +
                tempCategories[category] +
                '">' +
                category +
                "</option>"
            );
        }
        $('#main-category').niceSelect('update');
    });
    
    // On change list subcategories
    $("#main-category").unbind("change");
    $("#main-category").on("change", function (e) {
        console.log($(this));
        var _that = $(this);
    
        var subcatId = $(this).val();
        var textUpdate = $(this).find("option:selected").text();
    
        if (subcatId == 0) {
            $("#subcategory").find("option").remove();
            $("#subcategory").attr("disabled", "disabled");
            $("#subcategory").append('<option value="0">Velg bilmodell</option>');
            $("#subcategory").niceSelect('update');
    
            $("#subsubcategory").find("option").remove();
            $("#subsubcategory").attr("disabled", "disabled");
            $("#subsubcategory").append(
                '<option value="0">Velg modell/årsmodell</option>'
            );
            $("#subsubcategory").niceSelect('update');
    
            return false;
        }
    
        $.get(
            "/ajax.php?ajaxfunc=get_subcategories&cID=" + subcatId,
            function (data) {
                $("#subcategory").find("option").remove();
                var subcategories = JSON.parse(data);
                var tempSubCategories = mystoreSort(subcategories);
    
                $("#subcategory").removeAttr("disabled");
    
                if (subcategories == null) {
                    $.get(
                        "/ajax.php?ajaxfunc=create_category_link&cID=" + subcatId,
                        function (data) {
                            location.href = data;
                        }
                    );
                }
    
                $("#subcategory").append(
                    '<option value="0">Velg din ' + textUpdate + "</option>"
                );
                for (category in tempSubCategories) {
                    $("#subcategory").append(
                        '<option value="' +
                        tempSubCategories[category] +
                        '">' +
                        category +
                        "</option>"
                    );
                }

                $('#subcategory').niceSelect('update');
                $("#subsubcategory").find("option").remove();
                $("#subsubcategory").attr("disabled", "disabled");
                $("#subsubcategory").append('<option value="0">Velg modell/årsmodell</option>');
                $('#subsubcategory').niceSelect('update');
            }
        );
    });
    
    $("#subcategory").unbind("change");
    $("#subcategory").on("change", function (e) {
        console.log($(this));
        var _that = $(this);
    
        var subcatId = $(this).val();
    
        if (subcatId == 0) {
            $("#subsubcategory").find("option").remove();
            $("#subsubcategory").attr("disabled", "disabled");
            $("#subsubcategory").append('<option value="0">Velg modell/årsmodell</option>');
            $('#subsubcategory').niceSelect('update');
    
            return false;
        }
    
        $.get(
            "/ajax.php?ajaxfunc=get_subcategories&cID=" + subcatId,
            function (data) {
                $("#subsubcategory").find("option").remove();
                var subcategories = JSON.parse(data);
                var tempSubCategories = mystoreSort(subcategories);
    
                $("#subsubcategory").removeAttr("disabled");
    
                if (subcategories == null) {
                    $.get(
                        "/ajax.php?ajaxfunc=create_category_link&cID=" + subcatId,
                        function (data) {
                            location.href = data;
                        }
                    );
                }
    
                $("#subsubcategory").append(
                    '<option value="0">Velg modell/årsmodell</option>'
                );
                for (category in tempSubCategories) {
                    $("#subsubcategory").append(
                        '<option value="' +
                        tempSubCategories[category] +
                        '">' +
                        category +
                        "</option>"
                    );
                }
                $('#subsubcategory').niceSelect('update');
            }
        );
    });
    
    // On subcategory change, redirect
    $("#subsubcategory").on("change", function (i) {
        var _that = $(this);
        var subsubcatId = _that.val();
    
        $.get(
            "/ajax.php?ajaxfunc=create_category_link&cID=" + subsubcatId,
            function (data) {
                location.href = data;
            }
        );
    });

    $('#main-category').niceSelect();
    $('#subcategory').niceSelect();
    $('#subsubcategory').niceSelect();
});