
$.fn.crud = function(type, url, data) {

    var self = $(this)
    
    self.attr("disabled", true)

    var doing = type+" "+url
    var done = "btn-outline-success"
    var fail = "btn-outline-danger"
    var delay = 800
    
    return $.ajax({
        url: url,
        type: type,
        data: JSON.stringify(data),
        contentType: "application/json",
    })
        .done(function(e){
            console.log("OK "+doing)
            
            self.addClass(done)
            setTimeout(function () {      
                self.removeClass(done)
            }, delay);
            
        })    
        .fail(function(e){
            console.log("NOT OK "+doing)

            self.addClass(fail)
            setTimeout(function () {      
                self.removeClass(fail)
            }, delay);
            
        })
        .always(function(e){
            console.log("FINISHED "+doing)
            console.log("Sent: "+data)
            console.log("Received: "+e)
            
            self.attr("disabled", false)

        })
    
} // crud

function serializeObject(id){
    var raw_form_data = $(id).serializeArray();
    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, select").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();

        form = $("form")

        var data = [];
        $("section", form).each(function(e) {
            
            var template_id = $(this).attr("data-template")
            var template_name = $(this).attr("data-template")
            var raw_template = {};
            
            $("fieldset", this).each(function(e) {
                
                var setup_name = $(this).attr("data-subsystem")
                var setup_array = $(this).serializeArray()
                var raw_setup = {}
                
                $.each(setup_array, function() {
	            raw_setup[this.name] = this.value;
                });
                
                raw_template["TPLID"] = template_id
                raw_template["TPLName"] = template_name
                raw_template[setup_name] = raw_setup
                
            });
            
            data.push(raw_template)
        });

        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, select").css("border","1px solid green")
            })
            .fail(function(){
                console.log("not ok")                    
                $("input, select").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")                    
            })        
    });
}

