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.
213 lines
8.9 KiB
HTML
213 lines
8.9 KiB
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.append(_pane)
|
|
_frame.on('click',function (){
|
|
_group = $(this).attr('group').trim()
|
|
_provider = $(this).attr('provider').trim()
|
|
$('.db-provider').slideUp('fast',function(){
|
|
$('.db-form').slideDown()
|
|
_title = '.::. '+_provider
|
|
$('.db-form-title').html(_title)
|
|
$('.db-form-title').attr('provider',_provider)
|
|
if (_provider.match(/sqlite|duckdb|databricks|bigquery/)){
|
|
$('.db-form .database').attr('placeholder','Absolute to database')
|
|
if (_provider.match(/databricks|bigquery/)){
|
|
$('.db-form .database').attr('placeholder','Absolute to service account file')
|
|
}
|
|
$('.db-form .server').slideUp()
|
|
$('.db-form .auth').slideUp()
|
|
}
|
|
})
|
|
|
|
|
|
})
|
|
$('.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-search').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-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" style="height:500px;">
|
|
|
|
<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"></div>
|
|
<br>
|
|
<div class="db-form-input">
|
|
<div class="server">
|
|
|
|
<input type="text" class="host" placeholder="Host"/>
|
|
<input type="text" class="port" placeholder="Port"/>
|
|
|
|
</div>
|
|
<div class="internal">
|
|
<input type="text" class="database" placeholder="Database"/>
|
|
<input type="text" class="table" placeholder="Table"/>
|
|
</div>
|
|
<div class="internal auth">
|
|
<div class="bold">Authentication</div>
|
|
<input type="text" class="username" placeholder="Username"/>
|
|
<input type="password" class="password" placeholder="Password"/>
|
|
</div>
|
|
|
|
</div>
|
|
<div style="display:grid; grid-template-columns: 125px auto 125px; align-items: center;">
|
|
<div style="display:grid; justify-items: left; margin-top:28px;">
|
|
<div class="border-round border" onclick="wizard.jumpTo('.db-provider')">
|
|
<div class="active" align="center"><i class="fa-solid fa-arrow-left"></i> Back</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
</div>
|
|
<div style="display:grid; justify-items: right; margin-top:28px;">
|
|
<div class="border-round border" onclick="wizard.jumpTo('.db-final')">
|
|
<div class="active" align="center"><i class="fa-solid fa-arrow-right"></i> Next</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<ul class="small">
|
|
<br><i class="fa-solid fa-minus"></i> Missing ports and host will refer to their default values
|
|
<br><i class="fa-solid fa-minus"></i> Make sure you have configured your database properly
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="db-final page">
|
|
<div class="db-form-title bold"></div>
|
|
<br>
|
|
<div class="db-form-input">
|
|
<div style="display: grid; grid-template-columns: 50% 50%; gap:4px;">
|
|
<div class="source-code">
|
|
{}
|
|
</div>
|
|
<div class="">
|
|
|
|
<input type="text" class="label" placeholder="label your configuration" style="width:100%"/>
|
|
<ul class="">
|
|
<i class="fa-solid fa-minus"></i> Make sure the label is short and descriptive
|
|
<br> <i class="fa-solid fa-minus"></i> The label will be used in code to point at the configuration
|
|
<br><i class="fa-solid fa-minus"></i> No data connectivity/location will be shared with your notebooks.
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:grid; grid-template-columns: 125px auto 125px; align-items: center;">
|
|
<div style="display:grid; justify-items: left; margin-top:28px;">
|
|
<div class="border-round border" onclick="wizard.jumpTo('.db-form')">
|
|
<div class="active" align="center"><i class="fa-solid fa-arrow-left"></i> Back</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
</div>
|
|
<div style="display:grid; justify-items: right; margin-top:28px;">
|
|
<div class="border-round border" onclick="wizard.jumpTo('.db-final')">
|
|
<div class="active" align="center"><i class="fa-solid fa-save"></i> Save</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> |