data-transport/www/html/docs/_notebooks.html

<style>
  .notebook-pane {
    display:grid; grid-template-columns: 40% 60%; gap:8px;;
    font-family: sans-serif; line-height: 1.5; padding:8px; font-size:14px;
  }
  .search-box {display:grid; grid-template-columns: auto 64px; gap:8px; }
  .search-box input {padding:8px; border:4px solid transparent; outline: 0; background-color: #f3f3f3; width:99%;}
  .search-box input:focus {border-left-color: #4682b4;}
  .notebook-search-results-pane {
    height:105x;

    
  }
  .notebook-search-results {
    height:105px; overflow: hidden; overflow-y: auto;
  }
  .notebook-pane .right-pane .notebook{
    height:65vh; 
    padding:8px;
    overflow: hidden  ;
  }
  .notebook-pane .right-pane .notebook iframe{
    height:98%; 
    width:100%;
  }
  .notebook-pane .right-pane{
    display:grid;
    grid-template-rows: 32px auto; gap:4px;
  }
  
</style>
<script>
 
  var notebook = {}
  notebook.meta ={"postgresql":{"host":0,"port":0,"database":1,"table":1,"username":0,"password":0},"redshift":{"host":0,"port":0,"database":1,"table":1,"username":0,"password":0},    "mysql":{"host":0,"port":0,"database":1,"table":1,"username":0,"password":0},"mariadb":{"host":0,"port":0,"database":1,"table":1,"username":0,"password":0},    "bigquery":{"private_key":1,"dataset":1,"table":1},"mongodb":{"db":1,"collection":1,"host":0,"port":0,"username":0,"password":0},    "netezza":{"host":1,"port":1,"username":1,"password":1, "database":1,"table":1}, "sqlite":{"path":1,"table":1},    "sqlserver":{"host":0,"port":0,"username":1,"password":1,"database":1, "table":1}
  ,"databricks":{"host":1,"token":1,"schema":1,"cluster_path":1,"table":1},"couchdb":{"url":0,"dbname":1,"doc":1,"username":0,"password":0},"cloudant":{"url":0,"dbname":1,"doc":1,"username":0,"password":0}
  
  }
  notebook.meta.etl = "transport generate ./my-etl-config.json<br>transport apply ./my-etl-config.json"
  notebook.meta.s3 = {"access_key":1,"secret_key":1, "file":1, "bucket":1, "region":1}
  notebook.meta['mssqlserver'] = notebook.meta.sqlserver
  notebook.init = function (){
    var uri = '{{system.context}}/api/info/_data'
    var http = HttpClient.instance()
    http.post(uri,function(x){
      if(x.status == 200 && x.readyState == 4){
        var _data = JSON.parse(x.responseText)
        
        notebook.render(_data)
        notebook.search('sqlite')
        $('.notebook-pane input').val('sqlite')
        $('.notebook-pane .left-pane .sqlite').click()
      }else{
        //
        // Find a way to alert of the error 
        //
        ;
      }
    })
  }
  notebook.render = function (data){
    data.forEach(_item =>{
      var _div = jx.dom.get.instance('DIV')
      _div.innerHTML = _item.label
      _div.data = _item
      _div.onclick = function (){
        $('.notebook-pane .label').html(this.data.label)
        $('.notebook-pane .left-pane .vendor-info').html(this.data.doc)
        $('.notebook-pane .left-pane .vendor-url').html(this.data.url)
        _uri = 'www/html/docs/html/'+this.data.provider.trim()+'.html'
        // _context = '{{system.context}}'
        // if (_context != '') {
        //   _uri  = _context + '/'+_uri
        // }
        frame = jx.dom.get.instance('IFRAME')
        frame.frameBorder = 0
        frame.className = ''
        frame.src = _uri //'{{system.context}}'+'/www/html/docs/html/'+this.data.provider.trim()+'.html'
        $('.notebook-pane .right-pane .notebook').empty()
        $('.notebook-pane .right-pane .notebook').append(frame)
        $('.notebook-pane .search-box input').focus()
        _info = notebook.meta[this.data.provider]
        $('.notebook-pane .left-pane .source-code').html(JSON.stringify(_info))
      } //-- binding
      _div.className = 'active notebook-item '+_item.provider
      $('.notebook-search-results').append(_div)

     
    })
    // $('.notebook-search-results .notebook-item').slideUp()
  }
  notebook.search = function (term) {
    _count = 0
    if (term == ''){
      $('.notebook-search-results .notebook-item').slideDown()
    }else{
      var nodes = jx.dom.get.children('notebook-search-results')
      var _regx = new RegExp(term,"ig")
      
      jx.utils.patterns.visitor(nodes,function (node){
        if (node.data.provider.match(_regx) || node.data.label.match(_regx)) {
          $(node).slideDown()
          _count += 1
        }else{
          $(node).slideUp()
        }
      })

      

    }
    $('.notebook-pane .found').html(_count)
  }
  notebook.find = function (){
    var term = $('.search-box input').val().trim()
    notebook.search(term)
  }
  notebook.clear = function (){
    $('.notebook-pane .search-box input').val('')
    notebook.search('')
    $('.notebook-pane .search-box input').focus()
    $('.notebook-pane .right-pane .notebook').empty()
    $('.notebook-pane .label').html('')
    $('.notebook-pane .left-pane .vendor-info').html('')
    $('.notebook-pane .left-pane .vendor-url').html('')
    $('.notebook-pane .source-code').html('&nbsp;')
    
      // $('.notebook-pane .search-box input').focus()

  }
  notebook.open_wizard =function(){
    try{
      _args = {{layout.overwrite.wizard}}
      menu.events._dialog(_args,'{{context}}')
    }catch(e){}
  }
  $(document).ready(function (){
    
    notebook.init()
    $('.search-box .active').on('click',notebook.clear)
    $('.search-box input').on('keypress',notebook.find)

  })
</script>
<div class="notebook-pane">

  <div class="left-pane">
    <div class="search-box border-round border">
      <div class="border-right"><input type="search" placeholder="[provider or vendor]"/></div>
      <div class="active" align="center"><i class="fa-solid fa-trash"></i></div>
    </div>

    <p><div class="border-round border notebook-search-results-pane">
      <div align="right" class="">
        <span class="found"></span><span> Found </span>
      </div>
        <div id = "notebook-search-results" class="notebook-search-results"></div>
        
        
    </div>
      <div style="height:125px">
        <ul>
          <i class="fa-solid fa-minus "></i> Preview notebooks with database providers/vendors
          <br><i class="fa-solid fa-minus "></i> The notebooks show how to use <b>data-transport</b> as a library
          <br><i class="fa-solid fa-minus "></i> <span class="vendor-info"></span>
          <br><i class="fa-solid fa-minus "></i> <span class="vendor-url"></span>
        </ul>
      </div>
      <div class="border-top">&nbsp;</div>
      <p>
        <h3>Generated: auth-file <span class="label" style="text-transform: uppercase;"></span></h3>
        <ul>
          <i class="fa-solid fa-minus "></i> An <b>auth-file</b> is a file used to store database parameters.
          <br><i class="fa-solid fa-minus "></i> Copy the code above to the auth-file and fill with appropriate values 
          <br><i class="fa-solid fa-minus "></i> Attributes with zero i.e 0 are optional 
        </ul>
        <div class="source-code"></div>
        
        <ul>
          <b>Note:</b>
          <br><i class="fa-solid fa-minus "></i> The database providers/vendors above is exhaustive
          <br><i class="fa-solid fa-minus "></i> Generate files for database provider/vendors <span class="bold active" onclick="notebook.open_wizard()">click here</span>
        </ul>
      </p>
  </p>
  </div>
  <div class="right-pane">
    <div>
      <div style="text-transform: capitalize;">
        <div class="label bold" style="font-size:20px; text-transform: uppercase;"></div>
        <div>Jupyter Notebook preview</div>
        
      </div>

  
    </div>
    <p><div class="notebook border border-round"></div>
  </div>
</div>