Painel - Criação Maquina

Protótipo de painel para criação de nova máquina.

by Klawztro

HTML

<div id='container'>
    <ul id='maquina'>
        <li>
            <span data-name='q1' class='state_name' >q1</span>
  
        <li>
    </ul>
</div>

<div id='painel_contrucao'>
    <div id='definicao_maquina' >
        <fieldset id='alfabeto' >
            <legend>Alfabeto 
                <input type='button' name='new_letter' value='+' />
                <input type='text' name='value_letter' class='value' />
            </legend>
        </fieldset>
        
        <fieldset id='estado' >
            <legend>Estados
                <input type='button' name='new_state' value='+' />
                <input type='text' name='value_state' class='value' />
            </legend>
        </fieldset> 
        <input type='button' name='maquina_ok' value='OK' /> 
    </div>   
    <fieldset id='def_state' >
        <legend>q1</legend>
        <p><label>Nome:</label>
            <input type='text' name='nome' />
        </p>
        <ul id='state_transitions' >
            <li><span class='func_name' >q0</span><input type='text' name='func_result'  /></li>
        </ul>
        <input type='button' value='Alterar' name='update_state' />   
        
    </fieldset>
    </div>
</div>

CSS

fieldset {
    border:1px solid #ccc;
    width:200px;
    min-height:50px;
}

#definicao_maquina {
    float:left;
    width:220px;
}

#def_state {
    float:left;
    width:200px;
    height:250px;
}

#container {
    width:500px;
    height:200px;
    border:1px solid #ccc;
    margin:0px 0px 10px 0px;
}

input[type=text].value {
    width:30px;
    
}

JavaScript

$(function() {
    var MYAPP = MYAPP || {};
    MYAPP.DOM = {};
    MYAPP.DOM.lista = "ul#maquina";
    MYAPP.DOM.letter_box = "fieldset#alfabeto";
    MYAPP.DOM.state_box = "fieldset#estado";
    MYAPP.DOM.state_definition = "fieldset#def_state";
    
    
    function addStateToBox(box_name,state_name) {
        var letter_box_ref = MYAPP.DOM.letter_box,
            state_box_ref  = MYAPP.DOM.state_box,
            str_append = "<span>" + state_name + "</span>",
            position_to_add;
        
        if (box_name === "alfabeto") {
           position_to_add =  letter_box_ref;
        } else if (box_name === "estado") {
           position_to_add =  state_box_ref;
        }
        $(position_to_add).append(str_append);     
    }
    
    function addStateToList(state_name) {
        var id_list = MYAPP.DOM.lista;
        $(id_list).append("<li><span class='state_name' >" + state_name + "</span><li>");
    }
    
    function addFunctionToList(state_ref,letter,result_name) {
        var list_ref = $(state_ref).parent().children("ul"),
            str_append = "",
            position_to_add = "",
            has_list = $(list_ref).length > 0 ? true : false;
        
        if (has_list === true) {
            str_append  = "<li><span class='func_name'   >" + letter     + "</span>";
            str_append +=     "<span class='result_func' >" +result_name + "</span><li>"
            position_to_add = $(list_ref);
        } else {
            str_append  = "<ul><li><span class='func_name'   >" + letter     + "</span>";
            str_append +=         "<span class='result_func' >" +result_name + "</span><li></ul>"     
            position_to_add =  $(state_ref).parent();   
        }
        $(position_to_add).append(str_append);
    }
    
    //console.log(addFunctionToList($("ul#maquina li span.state_name:contains(q1)"),'a','q1'));
    
});