<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section style="background:#efefe9;"> <div class="container"> <div class="row"> <div class="col-lg-12 cso-header"><div class="title"><div class="expanded row"><div class="cso-col"><a class="logo" href="http://www.advisory.com/"><i class="cso-abclogo-color"><img width="32" height="32" src="https://crux-cdn.advisory.com/logo-abc-a.svg"></i></a><a class="application-title" href="#">Data Extractor</a></div><div class="cso-col"></div></div></div></div> <br> <br> <div class="board"> <!-- <h2>Welcome to IGHALO!^™</h2>--> <div class="board-inner"> <ul class="nav nav-tabs " id="myTab"> <li class="active"> <a href="#searchquery" data-toggle="tab" title="Search Query"> <span class="round-tabs one"> <i class="glyphicon glyphicon-search"></i> </span> </a> </li> <li> <a href="#savescript" data-toggle="tab" title="Save and Run Script"> <span class="round-tabs three"> <i class="glyphicon glyphicon-cloud-upload"></i> </span> </a> </li> </ul> </div> <div class="tab-content"> <div class="tab-pane fade in active" id="searchquery"> <h3 class="head text-center">Script Finder </h3> <p class="narrow text-center"> Search and use script built by others for data extraction. </p> <hr> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="input-group col-md-12" style="margin-bottom:60px"> <form class="form" role="form"> <div class="col-md-12"> <h3>Filter by</h3> <br> </div> <div class="col-md-6 form-group"> <label for="name">Name:</label> <input class="form-control" type="text" /> </div> <div class="col-md-6 form-group"> <label for="inputparamter">Input Parameters</label> <input class="form-control" type="text" /> </div> <div class="col-md-6 form-group"> <label for="outputparameter">Output Parameters:</label> <input class="form-control" type="text" /> </div> <div class="col-md-6 form-group"> <label for="dataset">Dataset:</label> <input class="form-control" type="text" /> </div> <div class="col-md-6 form-group"> <label for="author">Author:</label> <input class="form-control" type="text" /> </div> <div class="col-md-6 form-group"> <label for="containword">Contains the words</label> <input class="form-control" type="text" /> </div> <div class="col-md-12 form-group"> <label for="tag">Tag:</label> <input class="form-control" type="text" /> </div> <div class="col-md-12 form-group"> <br> <button type="submit" class="btn btn-primary btn-block"> Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button> </div> </form> </div> <div class="col-md-12"> <div class=""> <div class="panel panel-default"> <div class="panel-heading"> <h4> <a href="#runscript" data-toggle="tab" title="Run Script"> County wise claims data for a state </a> </h4> </div> <div class="panel-body"> <div class="list-group"> <span class=""> <b>Input parameters:</b> <i> state_code, county_name, first_service_date</i> </span> <hr> <span class=""> <b>Ouput Schema:</b> <i> submitted_amount, paid_amount, allowed_amount, claim_payment_status_code, benefit_payment_status_code, benefit_payment_status_code_desc, non_covered_reason_code, non_covered_reason_code_desc, billing_provider_npi, billing_provider_last_name, billing_provider_first_name, billing_provider_spclty_code, billing_provider_spclty_code_desc, billing_provider_zip_code, billing_provider_tax_id, billing_provider_medicare_id, billing_ncpdp_provider_id</i> </span> <hr> <span class=""> <b>Description:</b> <i>Provides claims data for a county in a state. </i> </span> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4> <a href="#runscript" data-toggle="tab" title="Run Script"> County wise claims data for a state </a> </h4> </div> <div class="panel-body"> <div class="list-group"> <span class=""> <b>Input parameters:</b> <i> state_code, county_name, first_service_date</i> </span> <hr> <span class=""> <b>Ouput Schema:</b> <i> submitted_amount, paid_amount, allowed_amount, claim_payment_status_code, benefit_payment_status_code, benefit_payment_status_code_desc, non_covered_reason_code, non_covered_reason_code_desc, billing_provider_npi, billing_provider_last_name, billing_provider_first_name, billing_provider_spclty_code, billing_provider_spclty_code_desc, billing_provider_zip_code, billing_provider_tax_id, billing_provider_medicare_id, billing_ncpdp_provider_id</i> </span> <hr> <span class=""> <b>Description:</b> <i>Provides claims data for a county in a state. </i> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="runscript"> <h3 class="head text-center">Execute script </h3> <p class="narrow text-center"> Execute scripts from GIT repository and save to S3 or/and RedShift. </p> <hr> <br> <form role="form" action="" method="post"> <div class="row setup-content" > <div class="col-xs-8 col-md-offset-2"> <div class="col-md-12"> <div class="form-group"> <label class="control-label">Source repository path: </label> ssh://git@repo.advisory.com:7999/gdm/rndanalytics.git </div> <br> <div class="control-group"> <div class="panel panel-default"> <div class="panel-heading"><b>Input Parameters</b></div> <div class="panel-body"> <div class="form-group col-md-12"> <div class="col-md-4"> <b>Parameter 1:</b> </div> <div class="col-md-8"> <input type="text" class="form-control" id="email"> </div> </div> <div class="form-group col-md-12"> <div class="col-md-4"> <b>Parameter 2:</b> </div> <div class="col-md-8"> <input type="text" class="form-control" id="email"> </div> </div> <div class="form-group col-md-12"> <div class="col-md-4"> <b>Parameter 3:</b> </div> <div class="col-md-8"> <input type="text" class="form-control" id="email"> </div> </div> </div> </div> <br> <input type="hidden" name="count" value="1" /> </div> <br> <div class="form-group"> <label class="control-label">Destination S3 folder path: </label> <input maxlength="100" required="required" class="form-control" placeholder="Enter S3 path " type="text"> </div> <div class=""> <a href="#redshift" data-toggle="tab" title="Run Script"> <button type="button" id="" class="btn btn-primary btn-outline-rounded green btn-block" value="">Execute Script</button> </a> </div> </div> </div> </div> </form> </div> <div class="tab-pane fade" id="savescript"> <h3 class="head text-center">Save script</h3> <p class="narrow text-center"> Enter GIT repository path for script source. </p> <hr> <br> <form role="form" action="" method="post"> <div class="row setup-content" > <div class="col-md-8 col-md-offset-2"> <div class="col-md-12"> <div class="form-group"> <label class="control-label">Name: </label> <input type="text" class="form-control" rows="5" id="name"> </div> <div class="form-group"> <label class="control-label">Source path: </label> <input maxlength="100" required="required" class="form-control" placeholder="Enter GIT path" type="text"> </div> <br> <div class="form-group"> <label class="control-label">Script Description: </label> <textarea class="form-control" rows="5" id="description"></textarea> </div> <br> <div class="control-group"> <div class="panel panel-default"> <div class="panel-heading"><b>Input Parameters</b></div> <div class="panel-body"> <div id="education_fields"></div> <div class="col-sm-6 nopadding"> <div class="form-group"> <input type="text" class="form-control" id="Name" name="Name[]" value="" placeholder="Name"> </div> </div> <div class="col-sm-6 nopadding"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" id="value" name="Value[]" value="" placeholder="Default value"> <div class="input-group-btn"> <button class="btn btn-success" type="button" onclick="add_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </div> </div> <div class="clear"></div> </div> <div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another parameter </small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove parameter.</small></div> </div> <br> <input type="hidden" name="count" value="1" /> </div> <div class="form-group"> <label class="control-label">Search tags: </label> <textarea class="form-control" rows="5" id="output_schema"></textarea> </div> <br> <!--<input type="submit" id="" class="btn btn-primary btn-outline-rounded green btn-block" value="Save Script">--> <div class=""> <a href="#runscript" data-toggle="tab" title="Run Script"> <button type="button" id="" class="btn btn-primary btn-outline-rounded green btn-block" value="">Save Script</button> </a> </div> </div> </div> </div> </form> </div> <div class="tab-pane fade col-md-6 col-md-offset-3" id="redshift"> <h3 class="head text-center">Upload to RedShift</h3> <p class="narrow text-center"> Upload your genrated data from S3 to RedShift <hr> <br> <form role="form" action="" method="post"> Which tables do you want upload to RedShift? <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck" > <label class="form-check-label" for="invalidCheck"> Table 1 </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck" > <label class="form-check-label" for="invalidCheck"> Table 2 </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck"> <label class="form-check-label" for="invalidCheck"> Table 3 </label> </div> </div> <div class="form-group"> <br> <b>Do you want to delete data from S3?</b><br> <label class="radio-inline"> <input type="radio" name="optradio">Yes </label> <label class="radio-inline"> <input type="radio" name="optradio" checked="checked">No </label> </div> <div class="form-group"> <label for="name">RedShift path:</label> <input class="form-control" type="text" /> </div> <button type="submit" class="col-md-12 btn btn-primary btn-outline-rounded green btn-blockk"> Upload <span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> </button> </form> </div> <div class="clearfix"></div> </div> </div> </div> </div> </section>

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); /* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/ body{ background-color:#efefe9; } .logo{ border-right: 2px solid; padding-right:10px; margin-right: 10px; } .cso-header{ background-color:white; padding:20px 40px ; margin-bottom:40px; font-size:27px; border-bottom:4px; border-color: #eaeaea; } .board{ width: 100%; margin: 60px auto; height: 100%; background: #fff; /*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/ padding-bottom:50px; } .board .nav-tabs { position: relative; /* border-bottom: 0; */ /* width: 80%; */ margin: 40px auto; margin-bottom: 0; box-sizing: border-box; } .board > div.board-inner{ background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png); background-size: 30%; } p .narrow{ width: 60%; margin: 10px auto; } .liner{ height: 2px; background: #ddd; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; cursor: default; /* background-color: #ffffff; */ border: 0; border-bottom-color: transparent; } span.round-tabs{ width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: white; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tabs.one{ color: rgb(34, 194, 34);border: 2px solid rgb(34, 194, 34); } li.active span.round-tabs.one{ background: #fff !important; border: 2px solid #ddd; color: rgb(34, 194, 34); } span.round-tabs.two{ color: #febe29;border: 2px solid #febe29; } li.active span.round-tabs.two{ background: #fff !important; border: 2px solid #ddd; color: #febe29; } span.round-tabs.three{ color: #3e5e9a;border: 2px solid #3e5e9a; } li.active span.round-tabs.three{ background: #fff !important; border: 2px solid #ddd; color: #3e5e9a; } span.round-tabs.four{ color: #f1685e;border: 2px solid #f1685e; } li.active span.round-tabs.four{ background: #fff !important; border: 2px solid #ddd; color: #f1685e; } span.round-tabs.five{ color: #999;border: 2px solid #999; } li.active span.round-tabs.five{ background: #fff !important; border: 2px solid #ddd; color: #999; } .nav-tabs > li.active > a span.round-tabs{ background: #fafafa; } .nav-tabs > li { width: 20%; } /*li.active:before { content: " "; position: absolute; left: 45%; opacity:0; margin: 0 auto; bottom: -2px; border: 10px solid transparent; border-bottom-color: #fff; z-index: 1; transition:0.2s ease-in-out; }*/ .nav-tabs > li:after { content: " "; position: absolute; left: 45%; opacity:0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #ddd; transition:0.1s ease-in-out; } .nav-tabs > li.active:after { content: " "; position: absolute; left: 45%; opacity:1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #ddd; } .nav-tabs > li a{ width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .nav-tabs > li a:hover{ background: transparent; } .tab-content{ } .tab-pane{ position: relative; padding-top: 50px; } .tab-content .head{ font-family: 'Roboto Condensed', sans-serif; font-size: 25px; text-transform: uppercase; padding-bottom: 10px; } .btn-outline-rounded{ padding: 10px 40px; margin: 20px 0; border: 2px solid transparent; border-radius: 25px; } .btn.green{ background-color:#5cb85c; /*border: 2px solid #5cb85c;*/ color: #ffffff; } @media( max-width : 585px ){ .board { width: 90%; height:auto !important; } span.round-tabs { font-size:16px; width: 50px; height: 50px; line-height: 50px; } .tab-content .head{ font-size:20px; } .nav-tabs > li a { width: 50px; height: 50px; line-height:50px; } .nav-tabs > li.active:after { content: " "; position: absolute; left: 35%; } .btn-outline-rounded { padding:12px 20px; } } .adv-search{ margin-bottom:40px; } .dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } @media screen and (min-width: 768px) { #adv-search { width: 500px; margin: 0 auto; } .dropdown.dropdown-lg { position: static !important; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } }

$(function(){ $('a[title]').tooltip(); }); var room = 1; function add_fields() { room++; var objTo = document.getElementById('education_fields') var divtest = document.createElement("div"); divtest.setAttribute("class", "form-group removeclass"+room); var rdiv = 'removeclass'+room; divtest.innerHTML = '<div class="col-sm-6 nopadding"> <div class="form-group"><input type="text" class="form-control" id="Name" name="Name[]" value="" placeholder="Name"></div></div> <div class="col-sm-6 nopadding"><div class="form-group"><div class="input-group"> <input type="text" class="form-control" id="value" name="Value[]" value="" placeholder="Default value"><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>'; objTo.appendChild(divtest) } function remove_fields(rid) { $('.removeclass'+rid).remove(); }