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.
332 lines
12 KiB
JavaScript
332 lines
12 KiB
JavaScript
|
|
|
|
ej.base.registerLicense('ORg4AjUWIQA/Gnt2XFhhQlJHfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTH5VdkxhWnpWcHZcTmhfWkZ/')
|
|
var studio = {_context:''}
|
|
studio.defaults = {
|
|
'duckdb':'SELECT * \nFROM INFORMATION_SCHEMA.TABLES',
|
|
'sqlite':'SELECT * \nFROM sqlite_master',
|
|
'sqlite3':'SELECT * \nFROM sqlite_master',
|
|
'bigquery':'SELECT * \nFROM <dataset>.INFORMATION_SCHEMA.COLUMNS \nLIMIT 10',
|
|
'postgresql':'SELECT *\nFROM INFORMATION_SCHEMA.COLUMNS LIMIT 10'
|
|
}
|
|
studio.init = function (_context){
|
|
studio._context = _context
|
|
}
|
|
studio.dbe = {}
|
|
studio.dbe.get = function (){
|
|
var uri = [studio._context,'api/dbe/get']
|
|
uri = uri.join('/')
|
|
var http = HttpClient.instance()
|
|
http.get(uri,function(x){
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
studio.dbe.providers = function (_render){
|
|
var uri = [studio._context,'api/dbe/providers']
|
|
uri = uri.join('/')
|
|
var http = HttpClient.instance()
|
|
http.get(uri,function(x){
|
|
var _data = JSON.parse(x.responseText)
|
|
if (_render){
|
|
_render(_data)
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
|
|
studio.dbe.apply = function (label,_query){
|
|
var uri = [studio._context,'api/dbe/apply']
|
|
uri = uri.join('/')
|
|
|
|
var http = HttpClient.instance()
|
|
_data = {'label':label,'query':_query}
|
|
http.setHeader('Content-Type','application/json')
|
|
http.setData (JSON.stringify(_data))
|
|
http.get(uri,function(x){
|
|
if(x.status == 200 && x.readyState == 4){
|
|
_r = JSON.stringify(x.responseText)
|
|
}else{
|
|
alert(' error round '+x.responseText)
|
|
}
|
|
})
|
|
|
|
}
|
|
studio.grid = function (){
|
|
this.columns = function (_data){
|
|
var _columns = []
|
|
if(_data.columns){
|
|
_data.columns.forEach(_name=>{
|
|
_columns.push({title:_name})
|
|
})
|
|
}
|
|
return _columns
|
|
}
|
|
this.dataTable = function (_id,_data){
|
|
$(_id).html('<table class="display"></table>')
|
|
$(_id.replace(/output/,'status')).hide()
|
|
|
|
_id = _id + ' table'
|
|
var _columns = []
|
|
if (_data.columns ){
|
|
_data.columns.forEach(_name=>{
|
|
_columns.push({title:_name})
|
|
})
|
|
var _args = {'data':_data.data,'columns':_columns}
|
|
// _args.layout = {topStart:{}}
|
|
_args.buttons = ['excel','pdf']
|
|
|
|
}else{
|
|
_data = {'data':[],columns:[]}
|
|
}
|
|
_args.dom = 'rtip'
|
|
_args.scrollCollapse = true
|
|
_args.scrollY = '400px'
|
|
var _grid = new DataTable(_id,_args)
|
|
return _grid;
|
|
}
|
|
this.gridjs = function (_id, _data){
|
|
$(_id.replace(/output/,'status')).hide()
|
|
var grid = new gridjs.Grid({
|
|
// columns:_data.columns,
|
|
data:_data.data , //_data.data,
|
|
columns:_data.columns,
|
|
fixedHeader:true, resizable:true,
|
|
search:false,
|
|
|
|
style:{
|
|
th:{height:'20px',overflow:'hidden','text-overflow':'ellipsis'},
|
|
td :{height:'20px',padding:'4px',overflow:'hidden','text-overflow':'ellipsis'},
|
|
table:{overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap',border:'1px solid transparent'}
|
|
},
|
|
sort:true,
|
|
pagination:true,
|
|
height:'405px'})
|
|
if ($(_id).is(':empty')){
|
|
grid.render($(_id)[0])
|
|
}
|
|
grid.forceRender($(_id)[0])
|
|
}
|
|
this.spreadsheet = function (_id, _data){
|
|
var _div = $(_id)[0]
|
|
var _columns = this.columns(_data)
|
|
var rows = []
|
|
_data.data.forEach(row=>{
|
|
var _record = {} //-- formatted appropriately
|
|
row.forEach((value,index)=>{
|
|
_col = _data.columns[index].name
|
|
_record[_col] = value
|
|
})
|
|
rows.push(_record)
|
|
})
|
|
|
|
var _spreadsheet = jspreadsheet(_div, {
|
|
tabs:true,toolbar:false,
|
|
style:['text-overflow: ellipsis; white-space: nowrap;'],
|
|
worksheets: [{
|
|
media:[{type:'chart',options:{}}],
|
|
data: _data.data,
|
|
minDimensions:[20,15],
|
|
tableOverflow:true,
|
|
tableHeight: '400px',
|
|
tableWidth:$(_id).width(),//minSpareCols:'auto',
|
|
columns:_columns,
|
|
workbookname: _id
|
|
}]
|
|
});
|
|
_div.spreadsheet = _spreadsheet
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
this.syncfusion = function(_id,_data){
|
|
|
|
var rows = []
|
|
|
|
_data.data.forEach(row=>{
|
|
var _record = {} //-- formatted appropriately
|
|
row.forEach((value,index)=>{
|
|
_col = _data.columns[index]
|
|
_record[_col] = value
|
|
})
|
|
rows.push(_record)
|
|
})
|
|
|
|
var spreadsheet = new ej.spreadsheet.Spreadsheet();
|
|
// spreadsheet.allowSave = true
|
|
// spreadsheet.saveUrl = 'api/io/write'
|
|
spreadsheet.sheets = [
|
|
{name:_id.replace(/[#,.]/g,' '),
|
|
ranges:[{dataSource:rows}],
|
|
|
|
}
|
|
]
|
|
|
|
spreadsheet.appendTo(_id)
|
|
$(_id)[0].spreadsheet = spreadsheet
|
|
// console.log([' **** ',(_id+' .e-input-group')])
|
|
// $(_id+' .e-input-group').remove()
|
|
spreadsheet.refresh()
|
|
}
|
|
|
|
}
|
|
studio.frame = function (_args){
|
|
this._args = _args
|
|
//
|
|
// Initializing by having an input and ouput pane
|
|
// Load the template from disk
|
|
this.init = function (){
|
|
|
|
}
|
|
|
|
//
|
|
// Render the template
|
|
this.read = function(_label,_query,_compute){
|
|
var uri = [studio._context,'api/dbe/apply']
|
|
uri = uri.join('/')
|
|
// var _compute = this.compute
|
|
// $('.'+_label+' .output').html('<i class="fa-solid fa-cog fa-spin"></i> Please wait ...')
|
|
var http = HttpClient.instance()
|
|
|
|
_data = {'label':_label,'query':_query}
|
|
http.setHeader('Content-Type','application/json')
|
|
http.setData (JSON.stringify(_data))
|
|
|
|
http.post(uri,function(x){
|
|
if(x.status == 200 && x.readyState == 4){
|
|
_r = JSON.parse(x.responseText)
|
|
sessionStorage._data = x.responseText
|
|
// console.log(_r)
|
|
_compute(_label,_r)
|
|
|
|
}else{
|
|
alert(' error round '+x.responseText)
|
|
}
|
|
})
|
|
|
|
}
|
|
this.render = function (){
|
|
var _args = this._args
|
|
|
|
var _icon = $('<img>').attr('src',this._args.icon)
|
|
var _label = $('<div class="bold"></div>').html(this._args.label+'<div style="font-weight:lighter; font-size:11px;">'+this._args.provider+'</div>')
|
|
read = this.read
|
|
_compute = this.compute
|
|
_xbutton = $('<div class="border-left"><div class="active apply" align="center"><i class="fa-solid fa-play"></i></div></div>').on('click',function (){
|
|
|
|
|
|
var _id = '.code.'+_args.label.trim()
|
|
_query = $(_id).val()
|
|
|
|
if (_query.length != ''){
|
|
var _data = read(_args.label,_query,_compute)
|
|
|
|
|
|
}
|
|
})
|
|
var _imgSrc = "api/disk/read?uri=www/html/_assets/images/python.png"
|
|
_imgSrc = studio._context + _imgSrc
|
|
_codeButton = ('<div class="border-left"><div class="active" title="show in code"><i class="fa-solid fa-code"></i></div></div>')
|
|
_wizButton = $('<div class="border-left"><div class="active" title="New Connection"><i class="fa-solid fa-plug-circle-plus" style="color:#4682B4;"></i></div></div>')
|
|
_wizButton.on('click',function(){
|
|
dialog.show({uri:'www/html/wizard.html',title:'Create New Connection',context:studio._context})
|
|
|
|
})
|
|
_expandButton = $('<div class="border-left"><div class="active expand"><i class="fa-solid fa-angle-up" title="Expand spreadsheet"></div></div></div>')
|
|
$(_expandButton).attr('label',_args.label)
|
|
$(_expandButton).on('click',function(){
|
|
var _id = '.studio.'+$(this).attr('label') // + ' .expand'
|
|
if ($(_id).html().match(/fa-angle-up/)){
|
|
_icon = '<i class="fa-solid fa-angle-down"></i>'
|
|
_title = "Collapse Spreadsheet"
|
|
$(_id).addClass('studio-expand')
|
|
}else{
|
|
_icon = '<i class="fa-solid fa-angle-up"></i>'
|
|
$(_id).removeClass('studio-expand')
|
|
_title = "Expand Spreadsheet"
|
|
|
|
}
|
|
$(_id+' .expand').empty().html(_icon).attr('title',_title)
|
|
var spreadsheet = $(_id+' .output')[0].spreadsheet
|
|
if (spreadsheet != null){
|
|
spreadsheet.refresh()
|
|
}
|
|
})
|
|
|
|
var _buttons = $('<div style="display:grid; grid-template-columns: auto repeat(4,64px); gap:4px;" align="center"><div> </div></div>')
|
|
_buttons.append(_codeButton,_wizButton,_xbutton,_expandButton)
|
|
|
|
// _frame = $('<div class="studio :label"></div>'.replace(/:label/,this._args.label))
|
|
var _frame = $('<div class="studio"></div>') .addClass(this._args.label)
|
|
//
|
|
// Input frame has 2 components (control, textarea)
|
|
_ctrl = $('<div class="border control" align="left"></div>')
|
|
_ctrl.append(_icon,_label,_buttons) //.html(this._args.label))
|
|
_textarea = $('<textarea class="code"></textarea>').addClass(this._args.label).attr('label',_args.label)
|
|
if (studio.defaults[_args.provider] != null){
|
|
_query = studio.defaults[_args.provider]
|
|
$(_textarea).val(_query)
|
|
}
|
|
|
|
$(_textarea).on('keydown',function (_e){
|
|
if (_e.shiftKey && (_e.keyCode == 13 || _e.key == 'Enter')){
|
|
var _id = $(this).attr('label')
|
|
_id = `.${_id} .apply`
|
|
$(_id).click()
|
|
}
|
|
})
|
|
// _inputframe = $('<div class="input-frame"><div class="ctrl border-round border">.::</div> <textarea class="code"></textarea></div>')
|
|
// _inputframe = $('<div class="input-frame"></div>')
|
|
// _inputframe.append(_ctrl,_textarea)
|
|
// _outputframe = $('<div class="" style="display:grid; grid-template-rows:auto 32px; gap:4px;"><div class="output border-round" ></div><div class="status border"></div></div>')
|
|
_outputframe = $('<div class="output" ></div><div class="status"></div>')
|
|
|
|
|
|
// $(_frame).append(_inputframe, _outputframe)
|
|
$(_frame).append(_ctrl,_textarea,_outputframe)
|
|
$('.studio-pane').append(_frame)
|
|
|
|
this.compute()
|
|
|
|
}
|
|
|
|
this.compute = function (_label,_data){
|
|
_label = (_label != null)?_label: this._args.label
|
|
_id = '.'+_label + ' .output'
|
|
_data = (_data == null)? {'data':[],'columns':[]}: _data ;
|
|
if (_data.data == null){
|
|
_data = {data:[],columns:[]} //{'columns':[],'data':[[]]}
|
|
}
|
|
|
|
$(_id).empty()
|
|
_gHandler = new studio.grid()
|
|
_gHandler.syncfusion(_id,_data)
|
|
_rows = (_data.data)?_data.data.length : 0
|
|
$('.'+_label + ' .status').html(_rows + ' rows')
|
|
// $(_id).html('<table class="display"></table>')
|
|
// _id = _id + ' table'
|
|
// var _columns = []
|
|
// _args = {}
|
|
// if (_data.columns ){
|
|
// _data.columns.forEach(_name=>{
|
|
// _columns.push({title:_name})
|
|
// })
|
|
// var _args = {'data':_data.data,'columns':_columns}
|
|
// // _args.layout = {topStart:{}}
|
|
// _args.buttons = ['excel','pdf']
|
|
|
|
// }else{
|
|
// _data = {'data':[],columns:[]}
|
|
// }
|
|
// _args.dom = 'rtip'
|
|
// _args.scrollCollapse = true
|
|
// _args.scrollY = '300px'
|
|
// new DataTable(_id,_args)
|
|
|
|
}
|
|
} |