SmartShopper/express-server/public/javascripts/ajax.js

$(document).ready(function() {

    eigeneEinkaufslisten();
    geteilteEinkaufslisten();
    $(".detailcardausgabe").hide();

    $(".gruppenadd").click(function(){

        // let name = $("#groupname").val();
        // let color = $("#groupfarbe").val();
        
        $.ajax({
            type: "POST",
            url: "/group",
            data: {
                sl_id: globaleAddZwischenID,
                name: $("#groupname").val(),
                color: $("#groupfarbe").val()
            },
            success(res){
                console.log("groupadd funktioniert");
                $("#mySmallModalLabel").modal("hide");
            },
            error(err){
                console.log("error");
            }
        });
    });

    $(".sl_add").click(function(){
        $('#EigeneListeAdd').modal('show');
    });


    $(".add").click(function(){

        // let name = $("#einkaufslistenname").val();
        // let beschreibung = $("#einkaufslistenbeschreibung").val();

        $.ajax({
            type: "POST",
            url: "/shoppinglist",
            data: {
                name: $("#einkaufslistenname").val(),
                description: $("#einkaufslistenbeschreibung").val()
            },
            success(res){
                console.log("add funktioniert");
                $("#normalAdd").modal("hide");
            },
            error(err){ 
                console.log("error");
            }

        });    
    });
    
});

var globaleAddZwischenID = "";
// var globaleGetZwischenID = "";

function eigeneEinkaufslisten(){

    $.ajax({
        type: "GET",
        url: "/myshoppinglists",
        success(res){

                $.ajax({
                    type: "GET",
                    url: "/userinfo_json",
                    success(data){
                        let userinfo = data.profile.displayName
                        console.log(userinfo);

                        for(let i = 0; i < res.length; i++){
                            const el = res[i];
            
                            $(".listen-ausgabe").append(`<div class="col-md-12 karten">
                            <div class="card border-light mb-3" style="max-width: 18rem;" id="${el.sl_id}">
                                <div class="card-header">
                                    <span>${userinfo}</span>
                                    <button class="btn edit"><i class="fas fa-angle-down"></i></button>
                                    <button class="btn trash"><i class="far fa-trash-alt"></i></button>
                                    <button class="btn groupadd" data-toggle="modal" data-target=".ListenDetailAdd"><i class="fas fa-ellipsis-v"></i></button>
                                </div>
                                
                                <div class="card-body">
                                    <h5 class="card-title">${el.name}</h5>
                                    <p class="card-text">${el.description}</p>
                                </div>
                            </div></div>`
                            )
                        }
                        console.log("Eigene Einkaufslisten");
                        loeschen();
                        lala();
                        Detail();
                        // groupHinzufügen()
                    }
                })
        },
        error(err){
            console.log("error");
        }
    });
};

function geteilteEinkaufslisten(){
    $.ajax({
        data: "GET",
        url: "/sharedshoppinglists",
        success(res){
            console.log("Geteilte Einkaufslisten");
        },
        error(err){
            console.log("error");
        }
    });
};

function loeschen(){
    $(".trash").click(function(){

        let card = $(this).closest(".card");
        let id = card.attr("id");

        // console.log(id);

        $.ajax({
            type: "DELETE",
            url: "/shoppinglist",
            data: {
                sl_id: id},
            success(res){
                console.log("card gelöscht");
                card.remove();
            },
            error(err){
                console.log("error");
            }
        });

    });
};

function lala(){
    $(".groupadd").click(function(){
        let card = $(this).closest(".card");
        let id = card.attr("id");
        globaleAddZwischenID = id;
    });
}

function Detail(){
    $(".edit").click(function(){

        $(".cardausgabe").hide();
        $(".detailcardausgabe").show();

        let card = $(this).closest(".card");
        let id = card.attr("id");

        $.ajax({
            data: "GET",
            url: "/shoppinglist_json/" + id,
            success(res){

                $.ajax({
                    type: "GET",
                    url: "/myshoppinglists",
                    success(result){
            
                        $.ajax({
                            type: "GET",
                            url: "/userinfo_json",
                            success(data){
                                let userinfo = data.profile.displayName
                                console.log(userinfo);
            
                                const neu = result.filter(obj => obj.sl_id === id);

                                $(".card-header").append(`<h1 class="text-center">${neu[0].name}</h1><button class="btn itemadd"><ion-icon name="more" size="large"></ion-icon></button>
                                `);
                                for (let i = 0; i < res.length; i++) {
                                    const el = res[i];
                                    $(".card-text").append(`<div class="card border-dark mb-3 items" id="${el.group_id}" style="max-width: 18rem;">
                                    <div class="card-body text-dark">
                                      <h5 class="card-title text-center">${el.name}</h5>
                                    </div>
                                  </div>`);
                                }
                                ItemAdden()
                            }
                        })
                    },
                    error(err){
                        console.log("error");
                    }
                });
            },
            error(err){
                console.log("error");
            }
        });
    });
};

function ItemAdden(){
    $(".itemadd").click(function(){
        alert("aleert");
    });
}