studio/www/html/_assets/js/forms.js

var _config = {
    "sql":{

        "host":{"type":"text","default":"localhost"},"database":"text","table":"text","username":"text","password":"password"
    },
    "cloudant":{
        "host":{"type":"text","default":"localhost"},
        "port":{"type":"number","default":5984},
        "dbname":{"type":"text","label":"database"},
        "username":{"type":"text"},
        "password":"password",
        "doc":{"type":"text","label":"document"}
    },
    "couchdb":{"@ref":"cloudant"},
    "bigquery":{
        "database":"text","table":"text",
        "auth_file":{"type":"file","label":"service account json file"}
        },
    "postgresql":{
        "@ref":"sql",
        "port":{"type":"number","default":5432}
    },    
    "redshift":{"@ref":"postgresql"},
    "mariadb":{
        "@ref":"sql",
        "port":{"type":"number","default":3306}
    },    
    "mysql":{
        "@ref":"sql",
        "port":{"type":"number","default":3306}
    },    
    "netezza":{
        "@ref":"sql",
        "port":{"type":"number","default":5480}},
    "sqlserver":{
        "@ref":"sql",
        "port":{"type":"number","default":1433}
    },

    "mongodb":{
        
        "host":{"type":"text","default":"localhost"},
        
        "port":{"type":"number","default":2717},
        "db":{"type":"text","label":"database"},
        "collection":{"type":"text"},"mechanism":{"type":"text","default":"SCRAM-SHA-256","values":["SCRAM-SHA-256","MONGODB-X509","MONGODB-CR"]}
    },
    "nextcloud":{
        "uid":{"type":"text","label":"user id"},
        "url":{"type":"text","label":"url of server"},
        "token":"text"
        
    },
    "databricks":{
        "host":"text","token":"text","cluster_path":"text","schema":"text","catalog":"text"
        
    },
    "s3":{
        "bucket":"text","file":{"type":"text","desc":"aws s3 path of the file"},
        "region":"text"
    },
    "sqlite":{"database":{"type":"text","desc":"path on disk"},"table":"text"},
    "sqlite3":{"@ref":"sqlite"},
    "duckdb":{"database":{"type":"text","desc":"path on disk"},"table":"text"},
    "drill":{
        "host":"text","port":{"type":"number","default":8047},"ssl":{"type":"bool","values":[true,false],"default":false}

    },
    "iceberg":{
        "catalog":"text","database":"text","table":"text"
    }
}

var ProviderInputForm = function (_provider){
    this._provider = _provider
    /**
     * This section will setup the configuration file as it is intended to be
     * The configuration fully specified will be used to build the input form
     */
    this._config = {}
    _parent = {}
    var _tmpconfig = _config[_provider]
    this._config = _config[_provider]
    if (_tmpconfig['@ref'] != null){
        _pkey = _tmpconfig['@ref']
        _parent = _config[_pkey]
    }
    //-- merge the objects ...
    this._config = Object.assign({'label':{'type':'text',desc:'reference to this database'}},_parent, _config[_provider])
    if (this._config['@ref']){
        delete this._config['@ref']
    }
    
    this.getInput = function(_item){//_type,_text,_desc){
        // if(_type.match(/text|number|password/ig)){
        
        _item.label= (_item.label == null)?_item.context: _item.label
        _item.desc = (_item.desc != null)?_item.desc:_item.label
        _label = $('<label></label>').html(_item.label)
        _input = $('<input />')
        $(_input).attr('type',_item.type)
        
        if(_item.type.match(/number/)) {
            $(_input).attr("pattern","^[1-9]([0-9])*$")
        }

        $(_input).attr('placeholder',_item.desc)
        $(_input).addClass(_item.context)
        $(_input).attr('id',_item.context)
        if (_item.default != null){
            $(_input).val(_item.default)
        }
        $(_label).attr('for',_item.context)
        return $('<div class="form-item"></div>').append(_label,_input)
        // }

    }
    this.submit = function (_data){
        var http = HttpClient.instance()
        http.setData(JSON.stringify(_data))
        http.setHeader('Content-Type','application/json')
        var uri = 'api/register/add'
        http.post(uri,(x)=>{
            if(x.status == 200 && x.readyState == 4){
                //
                //
                _init(_data.label)
                $('.jxmodal').slideUp()
            }
        })
    }
    this.build = function(_id){
        //
        // This will build the form on a pane
        
        var _form = $('<div class="provider-input-form"></div>')
        Object.keys(this._config).forEach(_key=>{
            var _item = this._config[_key]
            var _type = (_item.constructor == String)?_key:_item.type
            if(_item.constructor == String){
                _item  = {type:_type}
            }
            _item.type = _type
            _item.context = _key
            // var _values = (_item.values)?[]:_item.values
            var _inputLine = this.getInput(_item) //_type,_key,_item.label)
            $(_form).append(_inputLine)
            // }
        })

        //
        // adding all the items to where they need to be
        //
        _back = $('<div class="border-round border db-back"><div class="active"> <i class="fa-solid fa-chevron-left"></i> Go Back</div></div>')
        $(_back).on('click',()=>{
            $('.db-form').slideUp(()=>{
                $('.db-provider').slideDown()
                
            })
        })
        var _submit = this.submit
        var _provider= this._provider
        _save = $('<div class="border-round border db-save"><div class="active"> <i class="fa-solid fa-check" style="color:green"></i> Save Now</div></div>')
        $(_save).attr({'_object':this})
        $(_save).on('click',()=>{
            var _nodes = $('.db-form input')
            var _data = {}
            _errorCount = 0
            _nodes.each((_index)=>{
                var _input = _nodes[_index]
                _data[_input.id] = _input.value
                if(_input.value.trim().length == 0){
                    _errorCount += 1
                    $(_input).addClass('input-error')
                }else{
                    $(_input).removeClass('input-error')
                }
                
            })
            //
            // assuming no error ...
            if (_errorCount == 0){
                _data = Object.assign({},{'provider':_provider}, _data)
                _submit(_data)
            }
        })
        
        _pane = $('<div class="form-controls"></div>')
        $(_pane).append(_back,$("<div></div>"),_save)

        $(_id).empty()
        $(_id).append(_form)
        $('.db-form .form-controls').remove()
        $('.db-form').append(_pane)
    }

}