studio/www/html/wizard.html

<script>
   
    if (!wizard){
        var wizard = {}
    }
    wizard.init = function (_data){
        _data.forEach(_item=>{
            if (! _item.name.match(/http|callback/ig) ){
                var _frame = $('<div class="provider-slot border-round border"></div>').attr('group',_item.group).attr('provider',_item.name)
                _text = $('<div class="small bold" align="center"></div>').html(_item.name)
                _icon = $('<img>').attr('src','www/html/_assets/images/'+_item.name+'.png')
                _pane = $('<div class="provider active"></div>').append(_icon,_text)
                $(_frame).attr('icon',$(_icon).attr('src'))
                _frame.append(_pane)
                _frame.on('click',function (){

                    _group = $(this).attr('group').trim()
                    _provider = $(this).attr('provider').trim()
                    _title = $('<div></div>').html(_provider)
                    // _title = '.::. '+_provider 
                    // $('.db-form-title').html(_title)
                    var _icon = $('<img>').attr('src',$(this).attr('icon'))
                    $('.db-form-title').empty()
                    $('.db-form-title').append(_icon,_title)
                    $('.db-provider').slideUp( ()=>{ $('.db-form').slideDown()})
                    var form = new ProviderInputForm(_provider)
                    form.build('.db-form-input')


                    
                })
                $('.chose-provider').append(_frame)
            }
        })
    }
    wizard.find = function (){
        _text = $('.provider-search').val().trim()
        if (_text == '' || _text.length < 3 ){
            $('.chose-provider .provider-slot').slideDown()
        }else{
            _text = _text.replace(/ /g,'|').replace(/[:,\,,.]/,'')
            var _nodes = $('.provider-slot')
            _nodes.each(_index=>{
                _group      = $($(_nodes)[_index]).attr('group')
                _provider   = $($(_nodes)[_index]).attr('provider')
                var _rgx= new RegExp(_text, "i")
                if (_group.match(_rgx) || _provider.match(_rgx)){
                    $($(_nodes)[_index]).slideDown()
                }else{
                    $($(_nodes)[_index]).slideUp()
                }
            })
        }
    }
    wizard.reset = function (){
        $('.provider-search').val('')
        wizard.find()
        $('.provider-search').focus()
    }
    wizard.nav = {}
    wizard.nav.next= function(_id){}
    wizard.jumpTo = function (_id){
        var nodes = $('.db-setup .page')
        nodes.each (_index =>{
            _item = nodes[_index]
            if ( _item != $(_id)[0]){
                $(_item).slideUp()
            }else{
                $(_item).slideDown()
            }
        })
        // $('.db-setup .page').slideUp('fast',function(){
        //     $(_id).slideDown()
        // })
    }
    $(document).ready(function(){
        studio.dbe.providers(wizard.init)
        // $('.db-form').slideUp()
        wizard.jumpTo('.db-provider')
        window.wizard = wizard
        $('.provider-s.earch').focus()
    })
</script>

<style>
    .chose-provider {
        display: grid;
        grid-template-columns: repeat(4,150px);
        gap:20px;
        align-content: center;
        justify-content: center;
    }
    .chose-provider .provider {justify-content: center; display:grid;}
    .chose-provider img {height:70px; justify-self: center; margin:4px;}
    .tech-frame {height: 305px; overflow: hidden; overflow-y: auto;}
    .db-setup{width:700px;}
    .db-form { 
        
        display:grid; gap:4px; padding:8px; font-family:sans-serif;
        grid-template-rows: 48px calc(100% - 120px) 48px; gap:4px;;
        height:100%;
        
    }
    .db-form-title { display:grid; 
        grid-template-columns: 40px auto; gap:8px;
        align-items: center;
        text-transform: capitalize;
    }
    .db-form-title img {width:32px; height:32px;}
  
    .db-form .form-item {
        display:grid;
        grid-template-columns:35% 65%; gap:4px;
        align-items: center;
        align-content: center;
        margin:2px;
        
        
    }
    .db-form .form-item label {font-weight: normal; text-transform: capitalize;}
    .db-form .form-item input {
        background-color: #f3f3f3;
        padding:8px; outline: 0; border:2px solid transparent;
        margin:0px;
    }
    .db-form .form-item input::file-selector-button {
        font-weight: bold;
        color:#000000;
        /* padding: 0.5em; */
        padding:4px;
        width:115px;
        border: thin solid #CAD5E0;
        border-radius: 3px;
    }
    .db-form .form-item input:focus {border-left-color: #4682b4;;}
    .db-form .form-controls {
        bottom:0px;
        display:grid;
        grid-template-columns: 125px auto 125px;
        padding:4px;
        margin-top:8px;
        font-size:14px; font-weight:lighter;
    }
    .db-form .form-item .input-error {
        background-color: yellow;
        
    }
    /* For WebKit browsers (Chrome, Safari, Edge, Opera) */

    /*.db-form {display:block; margin:4px; }
     .db-form .server {display:grid; grid-template-columns: auto 100px; gap:4px; height:48px;}
    .db-form .internal {display:grid; grid-template-rows: auto; gap:4px;}
    input{padding:8px; outline: 0; border:4px solid transparent;
    background-color: #f3f3f3;}
    input:focus {
        border-left-color: #4682B4;
    }
    .db-setup {width:800px; font-family: sans-serif; font-weight:lighter;}
    .db-form-input {height:300px; display:grid;grid-template-rows: repeat(3,1fr); gap:4px;} */
</style>
<div class="db-setup">

   <div class="db-provider page">
        <div class="search-box" style="align-items:center">
            <input type="text" class="provider-search" placeholder="[search database technology]" onkeyup="wizard.find()"/>
            <div align="center" onclick="wizard.reset()">
                <div class="active"><i class="fa-solid fa-trash"></i></div>
            </div>
        </div>
        <br>
        <div class=" border-round border" style="height:305px; padding-top:20px; padding-bottom:20px;   ">
            <div class="tech-frame">
                <div id="chose-provider" class="chose-provider"></div>
            </div>
                

        </div>
   </div>
    
        
        <div class="db-form page">
            <div class="db-form-title bold border-bottom"></div>
            <div class="db-form-input"></div>
             
        </div>
    
    
</div>