studio/www/html/menu.html

<style>

.search-box {
    background-color: #f3f3f3;
    display:grid;
    grid-template-columns: auto 50px ;
    gap:4px;
    align-content:center;
    align-items: center;
    padding:0px;
    
}    
.search-box input[type=text]{
    height:26px;
    padding:6px;
    outline:0;
    border: 0px solid transparent;
    border-left:4px solid transparent;
    background-color: #D3D3D3;
    margin:4px;
}
.search-box input[type=text]:focus {
    border-left-color: #4682b4;;
}
.search-results {
    height:350px;
    overflow:hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.labels .button {padding:4px; margin:4px; align-items: center; display:grid; grid-template-columns: 50px auto; gap:8px; font-weight:bold;}
.labels img {width:30px; margin:4px;}

.studio .output {padding:4px;}

</style>
<script>
    var _init = function (_term){
        var http = HttpClient.instance()
        var uri = (['{{system.context}}','api/register/get']).join('/')
        $('.search-results .labels').empty()
        http.get(uri,function (x){
            var labels = JSON.parse(x.responseText)
            if (labels.length == 0){
                $('.get-started').css({display:'grid'})
            }else{
                $('.get-started').css({display:'none'})
            }
            labels.forEach(_data => {
                
                _icon = $('<img/>').attr('src',_data.icon) //'www/html/_assets/images/'+_data.provider+'.png')
                _label = $('<div></div>').html(_data.label)
                _div = $('<div class="active button"></div>').append(_icon,_label).attr('label',_data.label).attr('provider',_data.provider)
                
                _div[0]._data = _data
                _div[0].work_bench = new studio.frame(_data)
                _div[0].onclick = function (){
                    _id = '.studio-pane .'+this._data.label.trim()
                    // $('.studio').slideUp('fast',()=>{
                        
                    // })
                    $('.studio-pane').css({display:'grid'})
                    if ($(_id).length == 0){
                        // _object = new studio.frame(this._data)
                        // _object.render()
                        this.work_bench.render()
                    }else{
                        // $(_id).slideDown()
                        
                    }
                    // var _label = this._data.label
                    $('.studio-intro').slideUp(()=>{
                        this.work_bench.show()
                    })
                    

                }
                $('.search-results .labels').append(_div)
            });
            
            if(_term){
                $('.search-box .search-label').val(_term)
                _find()

            }
        })
    }
    var _find = function (){
        var _val = $('.search-box .search-label').val().trim()
        if (_val.length > 2){
            // $('.search-results .labels .button').slideUp()
            var _nodes = $('.search-results .labels .button')
            _nodes.each(_index => {
                _item = _nodes[_index]
                p = $(_item).attr('provider')
                q = $(_item).attr('label')
                rgx = new RegExp(_val)
                if (p.match(rgx) || q.match(rgx)){
                    $(_item).slideDown()
                }else{
                    $(_item).slideUp()
                }
            })
        }else{
            $('.search-results .labels .button').slideDown()
        }
    }
    _reset = function (){
        $('.search-box .search-label').val('')
        _find()
    }
    var _open = function (_id){
        $('.setting-frame').slideUp(function (){
            $(_id).slideDown()
        })
    }
    $(document).ready(function (){
        
        _init()
        var _layout = {on:{load:{}}}            
        // $('.pane .tabs label')[0].click()
         
        // var tabs = new QCMSTabs(_layout,'{{system.context}}','.pane .tabs')
        // tabs.init()
        // _layout.on.load = {'form':['www/html/_assets/wizard/technologies.html']}
        // bootup.init('{{system.context}}',_layout)
    })
</script>

<div style="">
  
   
    <div class="settings">
      
        <div class="setting-frame lookup">

            <div class="search-box border" style="margin-bottom:4px; padding:1px;">
                <input type="text" class="search-label" placeholder="[Search transport registry]" onkeyup="_find()"/>
                <div class="border-left" align="center">
                    <div class="active" onclick="_reset()"><i class="fa-solid fa-trash"></i> </div>
                </div>
            </div>
            <div class=" border" style="padding:8px; margin-top:10px;">
                <div class="search-results" style="margin:4px; ">
                    
                        <div class="labels"></div>
                        
                </div>

            </div>

        </div>
    </div>
   <p>
    <div class="border" style="padding:16px;">
        <div class="_border-round border" style="padding:4px; background-color: #f3f3f3;">
            <div class="active" style="margin:4px;" onclick="dialog.show({uri:'www/html/wizard.html',title:'Create New Connection',context:'{{system.context}}' })">
                <i class="fa-solid fa-plug-circle-plus" style="color:#4682b4;"></i> New connection 
            </div>
        </div>
        <div class="_border-round border" style="margin-top:4px;padding:4px; background-color: #f3f3f3;">
            <div class="active" style="margin:4px"  onclick='window.open("https://dev.the-phi.com/git/data-transport")'>
                <i class="fa-brands fa-git-alt"></i> Check <b>github</b>
            </div>
        </div>
        
        <div class="_border-round border" style="margin-top:4px;padding:4px; background-color: #f3f3f3;">
            <div style="margin:4px">
                <i class="fa-brands fa-docker"></i> Docker | Podman container install
            </div>
        </div>


    </div>
   
  
</div>