You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
4.1 KiB
HTML
135 lines
4.1 KiB
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 (){
|
|
var http = HttpClient.instance()
|
|
var uri = (['{{system.context}}','api/dbe/get']).join('/')
|
|
http.get(uri,function (x){
|
|
var labels = JSON.parse(x.responseText)
|
|
|
|
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].onclick = function (){
|
|
_id = '.studio-pane .'+this._data.label.trim()
|
|
$('.studio').slideUp('fast',()=>{
|
|
|
|
})
|
|
if ($(_id).length == 0){
|
|
_object = new studio.frame(this._data)
|
|
_object.render()
|
|
}else{
|
|
$(_id).slideDown()
|
|
}
|
|
|
|
}
|
|
$('.search-results .labels').append(_div)
|
|
});
|
|
})
|
|
}
|
|
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="padding-left:10px;">
|
|
|
|
|
|
<div class="settings">
|
|
|
|
<div class="setting-frame lookup">
|
|
|
|
<div class="search-box border" style="margin-bottom:4px;">
|
|
<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>
|
|
|
|
</div> |