Untitled

const url = "http:\\localhost:3000";

$(document).ready(function (){

    let lstMarche = $("#lstMarche");
    let lstModelli = $("#lstModelli");

    let table = $("table");

    let formOne = $(".row").eq(2).children("div").eq(1);

    formOne.hide();

    let request = inviaRichiesta("GET", url + "\\marche");
    request.fail(errore);

    request.done(function (data) {
        
        for(let marche of data){
            $("<option>").val(marche["id"]).text(marche["nome"]).appendTo(lstMarche)
        }

        lstMarche.prop("selectedIndex", -1);

    });

    lstMarche.on("change", function () {
        table.html("");

        lstModelli.html("");

        formOne.hide();

        let request = inviaRichiesta("GET", url + "\\modelli?codMarca=" + lstMarche.val());
        
        request.fail(errore);

        request.done(function (data) {
        
            for(let modelli of data){
                $("<option>").val(modelli["id"]).text(modelli["nome"]  + " " + modelli["alimentazione"]).appendTo(lstModelli);;
            }
            
            lstModelli.prop("selectedIndex", -1);

        });

    });

    lstModelli.on("change", function () {

        let text = $("#lstModelli option:selected").text();    
        let array = text.split(" ");

        formOne.hide();
        
        table.html("");

        let codiceModello = lstModelli.val();

        let request = inviaRichiesta("GET", url + "\\automobili?codModello=" + codiceModello);

        request.fail(errore);

        request.done(function (data) {

            table.html("");

            creaTabella();
        
            for(let auto of data){
                
                creaRigaTabella(auto, array);                

            }

            $(".btnDettagli").click(function () {
                let codiceAuto = $(this).attr("id");

                formOne.show();

                let request = inviaRichiesta("GET", url + "\\automobili?id=" + $(this).attr("id"));

                request.fail(errore);

                request.done(function (automobile) {
                    
                    automobile = automobile[0];

                    $('#txtId').val(automobile.id);
                    $('#txtTarga').val(automobile.targa);
                    $('#txtColore').val(automobile.colore);
                    $('#txtAnno').val(automobile.anno);
                    $('#txtKm').val(automobile.km);
                    $('#txtPrezzo').val(automobile.prezzo);
                    $('#txtPrezzo').val(automobile.prezzo);
                    $('#imgLarge').prop("src", "img/" + automobile.img).css("max-height", "120px");

                });
                
            });
        
            $(".btnElimina").click(function () {
        
                let request = inviaRichiesta("DELETE", url + "\\automobili/" + $(this).attr("id"));

                request.fail(errore);

                request.done(function () {
                   lstModelli.trigger("change");
                });
            });
    
        });

    });

    function creaTabella() {
        
        let thead = $("<thead>").appendTo(table);
        let tr= $("<tr>").appendTo(thead);

        $("<td>").appendTo(tr).text("nome").css("width", "15%");
        $("<td>").appendTo(tr).text("alimentazione").css("width", "15%");
        $("<td>").appendTo(tr).text("colore").css("width", "15%");
        $("<td>").appendTo(tr).text("anno").css("width", "15%");
        $("<td>").appendTo(tr).text("img").css("width", "15%");
        $("<td>").appendTo(tr).text("").css("width", "15%");
        $("<td>").appendTo(tr).text("").css("width", "15%");

        $("<tbody>").appendTo(table);

    }

    function creaRigaTabella(auto, arrayData) {
    
        let tr = $("tbody").append("<tr>");
        $(tr).append("<td>" + arrayData[0] + "</td>");
        $(tr).append("<td>" + arrayData[1] + "</td>");
        $(tr).append("<td>" + auto["colore"] + "</td>");
        $(tr).append("<td>" + auto["anno"] + "</td>");
        $(tr).append("<td>" + "<img src='img/" + auto["img"] + "' />" + "</td>");
        $(tr).append("<td><button id='" + auto["id"] + "' class='btnDettagli btn btn-success btn-xs'>Dettagli</button></td>");
        $(tr).append("<td><button id=" + auto["id"] + " class='btnElimina btn btn-danger btn-xs'>Elimina</button></td>");

    }

});