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.
83 lines
2.8 KiB
HTML
83 lines
2.8 KiB
HTML
<style>
|
|
.configurator {
|
|
width:70%; margin-left:15%;
|
|
}
|
|
.configurator input[type=text] {
|
|
padding:8px;
|
|
outline:0px;
|
|
border:0px;
|
|
font-family:sans-serif; font-size:18px;
|
|
background-color: #f3f3f3f3;;
|
|
font-weight: normal; color:#000000; line-height: 1.5;
|
|
}
|
|
.configurator .search-box {
|
|
display:grid;
|
|
grid-template-columns: auto 64px; gap:8px;
|
|
background-color: #f3f3f3f3;;
|
|
align-items: center;
|
|
align-content:center;
|
|
}
|
|
.configurator .source .item-select {display:grid;
|
|
grid-template-columns: 50% 25% 25%;
|
|
padding:4px; gap:8px;
|
|
margin:4px;
|
|
/* text-transform: capitalize; */
|
|
}
|
|
</style>
|
|
<script>
|
|
var _setup = {}
|
|
_setup.render = {}
|
|
_setup.render.source = function (_data) {
|
|
var _select = $('.configurator .source')[0]
|
|
_data.forEach(_item=>{
|
|
var _label = jx.dom.get.instance('DIV')
|
|
var _provider = jx.dom.get.instance('DIV')
|
|
var _plugins = jx.dom.get.instance('DIV')
|
|
_label.innerHTML = _item.label
|
|
_provider.innerHTML = _item.provider
|
|
_plugins.innerHTML = JSON.stringify(_item.plugins)
|
|
_provider.align='left'
|
|
_provider.className = ''
|
|
var _pane = jx.dom.get.instance('DIV')
|
|
_pane.appendChild(_label)
|
|
_pane.appendChild(_provider)
|
|
_pane.appendChild(_plugins)
|
|
_pane.data = _item
|
|
_pane.className = 'item-select active'
|
|
_select.appendChild(_pane)
|
|
})
|
|
}
|
|
_setup.init = function (){
|
|
var uri='{{system.context}}/api/info/registry'
|
|
var http = HttpClient.instance()
|
|
http.get(uri,function (x){
|
|
_setup.render.source ( JSON.parse(x.responseText))
|
|
})
|
|
}
|
|
$(document).ready(function(){
|
|
_setup.init()
|
|
})
|
|
</script>
|
|
<div class="configurator">
|
|
<div class="tabs">
|
|
<input type="radio" id="etl-tab" name="setup-tabs"/>
|
|
<label for="etl-tab">ETL : CLI</label>
|
|
<input type="radio" id="store-tab" name="setup-tabs"/>
|
|
<label for="store-tab">Read/Write</label>
|
|
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-content-container">
|
|
<div>
|
|
<h3>Source: Database Technology</h3>
|
|
<div class="small">Select a database technology as a <b>source</b></div>
|
|
<div class="search-box">
|
|
<input type="text" class="source-label" placeholder="Name of the label"/>
|
|
<div class="border-left"><div class="active" align="center"><i class="fa-solid fa-times"></i></div></div>
|
|
</div>
|
|
<div class="source border-top"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |