
function serializeObject(id){
    var raw_form_data = $(id).serializeArray();
    // var raw_form_data = $(id).map(function(){        
    //     $("input",this).data())
    // });
    //console.log(raw_form_data)
    var data = {}
    $.each(raw_form_data, function() {
	data[this.name] = this.value;
    });
    return data;
}


function create_ob(){
    $("#create-ob").click(function(e){
        console.log("click")
        e.preventDefault();

        var name = $("#new-ob-name").val()
        
        $.ajax({
            url: "/api/blocks/",
            type: 'POST',
            data: JSON.stringify(name),
            contentType: "application/json",
        })
            .done(function(){
                console.log("ok")
                $("input").css("border","1px solid green")
                location.href = name;
            })        
            .fail(function(){
                console.log("not ok")                    
                $("input").css("border","1px solid yellow")
            })
            .always(function(){
                console.log("Finished")                    
            })        
    });
}




 function delete_template_instance(){
     $('[data-button="delete-template-instance"]').click(function(e){
         console.log("click")
         e.preventDefault();
      
         var name = $(this).data("name")
         var instance = $(this).data("instance")
         var fieldset = $("fieldset[data-instance="+instance+"]")
         console.log(name, instance)
      
          $.ajax({
              url: "/api/blocks/"+name,
              type: 'DELETE',
              data: JSON.stringify(instance-1),
              contentType: "application/json",
          })
             .done(function(){
                 console.log("ok")
                 $("input", fieldset).css("border","1px solid red")
                 fieldset.fadeOut(500, function(){ $(this).remove()})
                 //location.reload()
             })        
             .fail(function(){
                  console.log("not ok")                    
                 $("input").css("border","1px solid yellow")
             })
             .always(function(){
                 console.log("Finished")                    
             })
      
     });
 }
  


function update_ob(){
    $("#update-ob").click(function(e){
        console.log("click")
        e.preventDefault();

        var data  = []    
        $("fieldset").each(function() {
            data.push({"template": $(this).data("template"),
                       "params":  serializeObject($(this))
                      })
        })
        
        console.log(data)       
        var name = $("form").data("name")
        $.ajax({
            url: "/api/blocks/"+name,
            type: 'PUT',
            data: JSON.stringify(data),
            contentType: "application/json",
        })
            .done(function(){
                console.log("ok")
                $("input").css("border","1px solid green")
            })
            .fail(function(){
                console.log("not ok")                    
                $("input").css("border","1px solid yellow")
            })
            .always(function(){
                console.log("Finished")                    
            })        
    });
}

function delete_ob(){
    $("#delete-ob").click(function(e){
        console.log("click")
        e.preventDefault();

        var name = $("form").data("name")
        var form = $("form[data-name='"+name+"']")
        $.ajax({
            url: "/api/blocks/",
            type: 'DELETE',
            data: JSON.stringify(name),
            contentType: "application/json",
        })
            .done(function(){
                $("input").css("border","1px solid red")
                form.fadeOut(500, function(){ $(this).remove()})
                location.href = "./"
                console.log("ok")
            })
            .fail(function(){
                $("input").css("border","1px solid yellow")
                console.log("not ok")                    
            })
            .always(function(){
                console.log("Finished")                    
            })        
    });
}


  



///////////////////////////////////////////////////////////
// For "other.py",  the simple todo list test

function update(x){
    $("#update-"+x).click(function(e){
        e.preventDefault();
        var data = serializeObject("#f-"+x)
        delete data.id;
        console.log(data)
        $.ajax({
            url: "/api/other/"+x,
            type: 'PUT',
            data: JSON.stringify(data),
            contentType: "application/json",
        })
            .done(function(){
                console.log("ok")
                $("#f-"+x+" input").css("border","1px solid green")
            })
            .fail(function(){
                console.log("not ok")                    
                $("#f-"+x+" input").css("border","1px solid yellow")
            })
            .always(function(){
                console.log("Finished")                    
            })
    });
}

function del(x){
    $("#delete-"+x).click(function(e){
        e.preventDefault();
        $.ajax({
            url: "/api/other"+x,
            type: 'DELETE',
            contentType: "application/json",
        })
            .done(function(){
                console.log("ok")
                $("#f-"+x+" input").css("border","1px solid red")
                $("#f-"+x).fadeOut(500, function(){ $(this).remove()})
            })
            .fail(function(){
                console.log("not ok")                    
                $("#f-"+x+" input").css("border","1px solid yellow")
            })
            .always(function(){
                console.log("Finished")                    
            })
    });
}

function create(x){          
    $("#"+x).click(function(e){
        e.preventDefault();
        var data = serializeObject("#f-"+x)
        $.ajax({
            url: "/api/other",
            type: 'POST',
            data: JSON.stringify(data),
            contentType: "application/json",
        })
            .done(function(e){
                console.log(e)
                location.reload()
            })
            .fail(function(){
                console.log("not ok")                    
                $("#f-"+x+" input").css("border","1px solid yellow")
            })
            .always(function(){
                console.log("Finished")                    
            })
    });
}
