studio/www/html/menu.html

<style>

.search-box {
    background-color: #f3f3f3;
    display:grid;
    grid-template-columns: auto 50px 50px;
    gap:4px;
    align-content:center;
    align-items: center;
    padding:0px;
    
}    
.search-box input[type=text]{
    
    padding:8px;
    outline:0;
    border: 0px solid transparent;
    border-left:4px solid transparent;
    background-color: #D3D3D3;
    
}
.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 _aiInit = function (){
        var http = HttpClient.instance()
        uri = '{{system.context}}/api/agent/enabled'
        http.get(uri,function(x){
            
            if(x.responseText == 0){
                $('.ai-button').remove()
                sessionStorage.AI = "0"


            }
            if (sessionStorage.AI == "1"){
                ai.enable()
            }else{
                ai.disable()
            }
        })
    }
    var _init = function (_term){
        _prefix = ( $('.jxmodal .search-box .search-label').length == 0)?'':' .jxmodal '  
        var http = HttpClient.instance()
        var uri = (['{{system.context}}','api/register/get']).join('/')
        $(_prefix+'.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'})
                     $('.studio-intro').slideUp(()=>{
                        this.work_bench.show()
                    })
                    if ($(_id).length == 0){
                        // _object = new studio.frame(this._data)
                        // _object.render()
                        this.work_bench.render()
                    }else{
                        // $(_id).slideDown()
                        
                    }
                    // var _label = this._data.label
                   
                    

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

            }
            
        })
    }
    var _find = function (){
        _prefix = ( $('.jxmodal .search-box .search-label').length == 0)?'':' .jxmodal '
        var _val = $(_prefix+'.search-box .search-label').val().trim()
        if (_val.length > 2){
            // $('.search-results .labels .button').slideUp()
            var _nodes = $(_prefix+'.search-results .labels .button')
            
            _nodes.each(_index => {
                _item = _nodes[_index]
                p = $(_item).attr('provider')
                q = $(_item).attr('label')
                rgx = new RegExp(_val,'i')
                if (p.match(rgx) || q.match(rgx)){
                    $(_item).slideDown()
                }else{
                    $(_item).slideUp()
                }
            })
        }else{
            $(_prefix+'.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()
        // _aiInit()
        var _layout = {on:{load:{'search-settings':['www/html/search.html']}}}            
        // $('.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 class="menu-1">
  

   <div id="search-settings"></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" style="margin-top:4px;padding:4px; background-color: #f3f3f3;">
            <div class="active" style="margin-top:4px" onclick="dialog.show({uri:'www/html/setup-ai.html',title:'Setup AI',context:'{{system.context}}'})">
                <i class="fa-solid fa-microchip"></i> <span>Setup AI</span>
                <span class="ai-status " style="margin-left:8px">Enabled</span>
                
                
            </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> <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>

  
    <div class="menu-2">
        <div class="border item" align="center" >
            <div class="active" onclick="studio.menu.expand()">
                <i class="fa-solid fa-maximize"></i>
            </div>
        </div>
        <div class="border item"  align="center" onclick="qcms.dialog.show({uri:'www/html/search.html',title:'Search Database Connections',context:'{{system.context}}'} )">
            <div class="active">
                <i class="fa-solid fa-search"></i>
            </div>
        </div>

        <div class="border item"  align="center" onclick="dialog.show({uri:'www/html/wizard.html',title:'Create New Connection',context:'{{system.context}}' })">
            <div class="active">
                <i class="fa-solid fa-plug-circle-plus"></i>
            </div>
        </div>
        <div class="border item" title="Setup AI"  align="center" onclick="dialog.show({uri:'www/html/setup-ai.html',title:'Setup AI',context:'{{system.context}}'})">
            <div class="active"><i class="fa-solid fa-microchip"></i></div>
            
        </div>

        <div class="border item"  align="center" onclick='window.open("https://dev.the-phi.com/git/data-transport")'>
            <div class="active"><i class="fa-brands fa-git-alt"></i></div>
        </div>
        <div class="border item"  align="center">
            <div class="active"><i class="fa-brands fa-docker"></i></div>
        </div>

    </div>