parent
							
								
									2b533dc8fe
								
							
						
					
					
						commit
						47060b5147
					
				@ -0,0 +1,29 @@
 | 
				
			|||||||
 | 
					<meta charset="utf8">
 | 
				
			||||||
 | 
					<meta name="viewport" content="width=device-width, initial-scale=1">
 | 
				
			||||||
 | 
					<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 | 
				
			||||||
 | 
					<meta http-equiv="Pragma" content="no-cache" />
 | 
				
			||||||
 | 
					<meta http-equiv="Expires" content="0" />
 | 
				
			||||||
 | 
					<link rel="shortcut icon" href="{{context}}/static/img/logo.svg" type="image/icon type">
 | 
				
			||||||
 | 
					<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
 | 
				
			||||||
 | 
					<script src="{{context}}/static/js/jx/rpc.js"></script>
 | 
				
			||||||
 | 
					<script src="{{context}}/static/js/jx/dom.js"></script>
 | 
				
			||||||
 | 
					<script src="{{context}}/static/js/jx/utils.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script src="{{context}}/static/js/jquery.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 | 
				
			||||||
 | 
					<link href="{{context}}/static/css/borders.css" type="text/css" rel="stylesheet">
 | 
				
			||||||
 | 
					<link href="{{context}}/static/css/fa/css/all.css" type="text/css" rel="stylesheet">
 | 
				
			||||||
 | 
					<script src="{{context}}/static/css/fa/js/all.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<div class="border-round border menu-bar">
 | 
				
			||||||
 | 
					    <div class="menu">
 | 
				
			||||||
 | 
					       Admin
 | 
				
			||||||
 | 
					       <div class="menu-items border">
 | 
				
			||||||
 | 
					           <div class="item">Setup</div>
 | 
				
			||||||
 | 
					       </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					    <div class="menu">
 | 
				
			||||||
 | 
					        Claims & Remits
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
@ -0,0 +1,391 @@
 | 
				
			|||||||
 | 
					<style>
 | 
				
			||||||
 | 
					    .system {height:99%; overflow:hidden;}
 | 
				
			||||||
 | 
					    .data-info .board{ height:300px; display:grid; grid-template-columns:auto 200px 200px; gap:20px; align-items:center}
 | 
				
			||||||
 | 
					    /*.board { background-image: linear-gradient(to bottom, #ffffff,#ffffff,#f3f3f3,#d3d3d3d3)}*/
 | 
				
			||||||
 | 
					    .number {font-size:48px; font-family:courier;padding:8px; ;}
 | 
				
			||||||
 | 
					    .etl {display:grid; grid-template-columns: 250px auto; gap:2;}
 | 
				
			||||||
 | 
					    .chart {box-shadow : 0px 1px 4px 2px #d3d3d3; width:200px; height:250px;
 | 
				
			||||||
 | 
					        display:grid; align-items:center;
 | 
				
			||||||
 | 
					        background-image: linear-gradient(to bottom,#f3f3f3,#ffffff);
 | 
				
			||||||
 | 
					        overflow:hidden;
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    .dialog { width:450px; min-height:200px; display:grid; grid-template-rows: 40px 80% auto; gap:4px}
 | 
				
			||||||
 | 
					    .dialog .title-bar { border-top-left-radius: 8px; border-top-right-radius: 8px ; padding:4px; background-color:#f3f3f3; gap:2px; display:grid; grid-template-columns: auto 32px; align-items:center}
 | 
				
			||||||
 | 
					    .dialog .action {display:grid; align-items: flex-end; padding-left:25%; padding-right:25%;}
 | 
				
			||||||
 | 
					    .dialog .message {display:grid; align-items: center; grid-template-columns: 20% auto;}
 | 
				
			||||||
 | 
					    .dialog .message .text {line-height:2; text-transform: capitalize;}
 | 
				
			||||||
 | 
					    .fa-exclamation-triangle {color:orange}
 | 
				
			||||||
 | 
					    .fa-question-circle{color:#009df7}
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
 | 
				
			||||||
 | 
					<script src="{{context}}/static/js/io/dialog.js"></script>
 | 
				
			||||||
 | 
					<script src="{{context}}/static/js/io/io.js"></script>
 | 
				
			||||||
 | 
					<script src="{{context}}/static/js/io/healthcare.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script>
 | 
				
			||||||
 | 
					    var select = function(node){
 | 
				
			||||||
 | 
					        var value = $($(node).children()[0]).attr('data-value')
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        jx.utils.patterns.visitor($('.tab'),function(_item){
 | 
				
			||||||
 | 
					            var button = $(_item).children()[0]
 | 
				
			||||||
 | 
					            $(_item).removeClass('selected')
 | 
				
			||||||
 | 
					            //alert([$(button).attr('data-value'),value])
 | 
				
			||||||
 | 
					            if($(button).attr('data-value') == value){
 | 
				
			||||||
 | 
					                $(node).addClass('selected')
 | 
				
			||||||
 | 
					                $('.'+value).show()
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					            }else{
 | 
				
			||||||
 | 
					                var m = '.'+ $(button).attr('data-value')
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					                    $(m).hide()
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    var monitor = {}
 | 
				
			||||||
 | 
					    monitor.listen = {handler:null}
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    monitor.data = function(){
 | 
				
			||||||
 | 
					        var http = HttpClient.instance()
 | 
				
			||||||
 | 
					        http.get("/data",function(x){
 | 
				
			||||||
 | 
					            var r = JSON.parse(x.responseText)
 | 
				
			||||||
 | 
					            var keys = jx.utils.keys(r) //-- process,files
 | 
				
			||||||
 | 
					            for (var i in keys){                
 | 
				
			||||||
 | 
					                var prefix = keys[i]
 | 
				
			||||||
 | 
					                if(prefix == 'process'){
 | 
				
			||||||
 | 
					                    if(r[prefix].counts != 0){
 | 
				
			||||||
 | 
					                        //
 | 
				
			||||||
 | 
					                        // We should insure the listeners are enabled
 | 
				
			||||||
 | 
					                        if(monitor.listen.handler == null){
 | 
				
			||||||
 | 
					                            monitor.listen.handler = setInterval(
 | 
				
			||||||
 | 
					                                function(){
 | 
				
			||||||
 | 
					                                    console.log('running ...')
 | 
				
			||||||
 | 
					                                    monitor.data()},5000)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                        }
 | 
				
			||||||
 | 
					                    }else{
 | 
				
			||||||
 | 
					                        if (monitor.listen.handler != null){
 | 
				
			||||||
 | 
					                            
 | 
				
			||||||
 | 
					                            clearInterval(monitor.listen.handler)
 | 
				
			||||||
 | 
					                        }
 | 
				
			||||||
 | 
					                        dialog.close()
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					                monitor.render(prefix,r[prefix])
 | 
				
			||||||
 | 
					            }            
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    monitor.render = function(prefix,r){
 | 
				
			||||||
 | 
					        prefix = '.'+prefix
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        var div = jx.dom.get.instance('DIV')
 | 
				
			||||||
 | 
					        var label = jx.dom.get.instance('DIV')
 | 
				
			||||||
 | 
					        div.align = 'center'
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        div.innerHTML = r.counts
 | 
				
			||||||
 | 
					        div.className = 'number'
 | 
				
			||||||
 | 
					        label.innerHTML = prefix.replace(/\./,'')
 | 
				
			||||||
 | 
					        label.style.textTransform = 'capitalize'
 | 
				
			||||||
 | 
					        label.className = 'small bold border-top'
 | 
				
			||||||
 | 
					        div.append(label)
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            $(prefix + ' .board').empty()
 | 
				
			||||||
 | 
					            $(prefix+' .board').append(div)
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        var charts = jx.utils.patterns.visitor(r.chart,function(option){
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					                var div = jx.dom.get.instance('div')
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					                div.className = 'chart'
 | 
				
			||||||
 | 
					                div.align='center'
 | 
				
			||||||
 | 
					                $(prefix+' .board').append(div)
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					                var chart = new ApexCharts($(div)[0],option)
 | 
				
			||||||
 | 
					                //chart.render()
 | 
				
			||||||
 | 
					                div.chart = chart
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					            return chart
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        })  
 | 
				
			||||||
 | 
					        var observers = jx.utils.patterns.visitor(charts,function(_item){
 | 
				
			||||||
 | 
					            var m = function(_chart){
 | 
				
			||||||
 | 
					                this.chart = _chart ;
 | 
				
			||||||
 | 
					                this.apply = function(caller){this.chart.render();                     
 | 
				
			||||||
 | 
					                    caller.notify()
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					            return new m(_item)
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        jx.utils.patterns.observer(observers,'apply')
 | 
				
			||||||
 | 
					        //jx.utils.patterns.iterator(charts,'render')
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					         /*setTimeout(function(){
 | 
				
			||||||
 | 
					             jx.utils.patterns.visitor(charts,function(_item){_item.render()})
 | 
				
			||||||
 | 
					         },1000)  */ 
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    var setup = {}
 | 
				
			||||||
 | 
					    setup.open = function(){
 | 
				
			||||||
 | 
					        $('.dashboard').slideUp(
 | 
				
			||||||
 | 
					            function(){
 | 
				
			||||||
 | 
					                $('.setup').slideDown()
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        )
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    $(document).ready(function(){
 | 
				
			||||||
 | 
					        /*var shandler = new io();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        if (shandler.disconnected ==false){
 | 
				
			||||||
 | 
					            shandler.disconnect()
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        var socket = io.connect()
 | 
				
			||||||
 | 
					        socket.on('connect',function(e){
 | 
				
			||||||
 | 
					            socket.emit('connect',{name:'steve'})
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        socket.on('update',function(e){
 | 
				
			||||||
 | 
					            console.log(e)
 | 
				
			||||||
 | 
					            console.log()
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					       var socket = io.connect('http://localhost:81',{cors:{AccessControlAllowOrigin:'*'}}) //('http://localhost:81/stream')
 | 
				
			||||||
 | 
					        socket.on('procs',function(e){
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        socket.on('data',function(e){
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            $('.logs').empty()
 | 
				
			||||||
 | 
					            var div = $('.logs')
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            var option = e.apex
 | 
				
			||||||
 | 
					            option.plotOptions.pie.size = 220 
 | 
				
			||||||
 | 
					            option.plotOptions.pie = {dataLabels: {show:true,name:{show:true},value:{show:true}}}
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            option.legend.show = false
 | 
				
			||||||
 | 
					            console.log(option)
 | 
				
			||||||
 | 
					            c = new ApexCharts(div[0],option)
 | 
				
			||||||
 | 
					            c.render()
 | 
				
			||||||
 | 
					            socket.emit("procs",{"name":"steve"})
 | 
				
			||||||
 | 
					        })*/
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					        select($('.tab')[0])
 | 
				
			||||||
 | 
					        monitor.data()
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        $('.email').text($('#email').val())
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    <div class="system setup">
 | 
				
			||||||
 | 
					        <div class="status">
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            {% if not store.type %}
 | 
				
			||||||
 | 
					               <div >
 | 
				
			||||||
 | 
					                   <span class="caption bold border-bottom" style="padding-right:10">Current Configuration</span>
 | 
				
			||||||
 | 
					                   <p></p>
 | 
				
			||||||
 | 
					                   <div style="display:grid; align-items:center; grid-template-columns:32px auto;">
 | 
				
			||||||
 | 
					                       <i class="fa fa-times" style="font-size:28; margin:4px;"></i> <span>System needs to be initialized !</span>
 | 
				
			||||||
 | 
					                   </div>
 | 
				
			||||||
 | 
					                   <p></p>
 | 
				
			||||||
 | 
					                   <div class="active-button border-round" style="width:50%">
 | 
				
			||||||
 | 
					                        <div class="icon">
 | 
				
			||||||
 | 
					                            <i class="fas fa-cog"  style="font-size:28"></i>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					                        <div class="bold" align="center">Initialize</div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					               </div>
 | 
				
			||||||
 | 
					            {% else %}
 | 
				
			||||||
 | 
					                <div class="border-right">
 | 
				
			||||||
 | 
					                    
 | 
				
			||||||
 | 
					                    <span class="caption bold border-bottom" style="padding-right:10">Current Configuration</span>                        
 | 
				
			||||||
 | 
					                    <p>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                    <div class="item" style="display:grid; align-items:center">
 | 
				
			||||||
 | 
					                        <div class="bold" style="text-transform: capitalize;">Owner </div><div class="bold">:</div>
 | 
				
			||||||
 | 
					                        <div>
 | 
				
			||||||
 | 
					                            
 | 
				
			||||||
 | 
					                            <input type="text" id="email" value="{{owner}}">
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    <div class="item">
 | 
				
			||||||
 | 
					                        <div class="bold" style="text-transform: capitalize;">store</div><div class="bold">:</div>
 | 
				
			||||||
 | 
					                        <div class="">{{store.type}}</div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <p></p>
 | 
				
			||||||
 | 
					                    <div class="active-button border-round" style="width:50%" onclick="healthcare.io.update()">
 | 
				
			||||||
 | 
					                        <div class="icon">
 | 
				
			||||||
 | 
					                            <I class="fas fa-download" style="font-size:28"></I>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					                        <div class="bold" align="center">Update Config</div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <p>
 | 
				
			||||||
 | 
					                        <div class="code">
 | 
				
			||||||
 | 
					                            #<br>
 | 
				
			||||||
 | 
					                            healthcare-io.py --init <span class="email"></span> --store mongo
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					               </div>
 | 
				
			||||||
 | 
					               
 | 
				
			||||||
 | 
					            {%endif%}
 | 
				
			||||||
 | 
					            <p></p>
 | 
				
			||||||
 | 
					            <br>
 | 
				
			||||||
 | 
					            <div class="border-right">
 | 
				
			||||||
 | 
					                <span class="caption bold border-bottom" style="padding-right:10">Manage Plan</span>
 | 
				
			||||||
 | 
					                <p></p>
 | 
				
			||||||
 | 
					                <div style="line-height: 2;">Insure your account is tied to a cloud service provider. 
 | 
				
			||||||
 | 
					                    <br>We support <span class="bold">google-drive, dropbox, one-drive or box. </span>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <p>
 | 
				
			||||||
 | 
					                    <div class="bold active-button border-round" style="width:50%" onclick="jx.modal.show({url:'https://healthcareio.the-phi.com/store/healthcareio/plans'})">
 | 
				
			||||||
 | 
					                        <div>
 | 
				
			||||||
 | 
					                            <img src="{{context}}/static/img/logo.svg" />
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					                        <div align="center">Open Plan Console</div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					            <br>
 | 
				
			||||||
 | 
					            <div class="border-right" style="height:30%"></div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="_border-right"></div>
 | 
				
			||||||
 | 
					        <div >
 | 
				
			||||||
 | 
					            <span class="caption bold border-bottom" style="padding-right:10">
 | 
				
			||||||
 | 
					                Manage Processes</span>
 | 
				
			||||||
 | 
					            <p>
 | 
				
			||||||
 | 
					                <div class="input-form" style="grid-template-columns: 30% auto;">
 | 
				
			||||||
 | 
					                    <div class="item" style="grid-row:1; grid-column:1; ">
 | 
				
			||||||
 | 
					                        <div class="label">Process #</div>
 | 
				
			||||||
 | 
					                        <input type="text" class="procs batch"placeholder="#" style="width:64px; text-align:right" value="{{args.batch}}" onchange="healthcare.io.apply()"/>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="item" style="grid-row:1; grid-column:2 ">
 | 
				
			||||||
 | 
					                        <div class="label">Folder #</div>
 | 
				
			||||||
 | 
					                        <input type="text" placeholder="Process counts" value="/data"/ class="data folder" disabled>
 | 
				
			||||||
 | 
					                    </div>                                                         
 | 
				
			||||||
 | 
					                    
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <div style="display:grid; grid-template-columns:repeat(2,215px); gap:2px;">
 | 
				
			||||||
 | 
					                    <div class="active-button border-round bold io-apply" style="margin-top:32; display:none" onclick="healthcare.io.apply()">
 | 
				
			||||||
 | 
					                        <div class="icon"><i class="far fa-save" style="font-size:28; color:#4682B4"></i></div>
 | 
				
			||||||
 | 
					                        <div align="center">Apply</div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="active-button border-round bold" style="margin-top:32" onclick="healthcare.io.stop()">
 | 
				
			||||||
 | 
					                        <i class="far fa-stop-circle" style="font-size:28; color:maroon"></i>
 | 
				
			||||||
 | 
					                        
 | 
				
			||||||
 | 
					                        <div align="center">Stop</div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="active-button border-round bold" style="margin-top:32" onclick="healthcare.io.run()">
 | 
				
			||||||
 | 
					                        <i class="fas fa-running" style="font-size:28; color:green"></i>
 | 
				
			||||||
 | 
					                        <div align="center">Run</div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                </div>                   
 | 
				
			||||||
 | 
					               
 | 
				
			||||||
 | 
					            </p>
 | 
				
			||||||
 | 
					            <p>
 | 
				
			||||||
 | 
					                <div class="code">
 | 
				
			||||||
 | 
					                    <div class="bold"># The command that will be executed</div>
 | 
				
			||||||
 | 
					                    <div>healthcare-io.py --parse --folder /data --batch <span class="batch">{{args.batch}}</span></div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					            </p>
 | 
				
			||||||
 | 
					            <p>
 | 
				
			||||||
 | 
					                <div style="display:grid; grid-template-columns:auto 48px ; gap:2px">
 | 
				
			||||||
 | 
					                    <div class="bold caption border-bottom">Process Monitoring</div>
 | 
				
			||||||
 | 
					                    <div class="active" align="center" title="reload" onclick="monitor.data()"><i class="fas fa-sync"></i></div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <div class="small">Powered by smart-top</div>
 | 
				
			||||||
 | 
					                <p></p>
 | 
				
			||||||
 | 
					                <div class="tabs">
 | 
				
			||||||
 | 
					                    <div class="tab selected" onclick="select(this)">
 | 
				
			||||||
 | 
					                        <div class="active" data-value="process" >
 | 
				
			||||||
 | 
					                            <i class="far fa-clock" style="color:maroon"></i>
 | 
				
			||||||
 | 
					                            <span>Process</span>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="tab" onclick="select(this)">
 | 
				
			||||||
 | 
					                        <div class="active" data-value="files"><i class="fas fa-file-alt"></i> Files</div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="tab" onclick="select(this)">
 | 
				
			||||||
 | 
					                        <div class="active" data-value="export"><i class="fas fa-upload"></i> Export</div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <div class="data-info">
 | 
				
			||||||
 | 
					                    <div class="process ">
 | 
				
			||||||
 | 
					                        
 | 
				
			||||||
 | 
					                        <div class="board"></div>
 | 
				
			||||||
 | 
					                       <div class="small" align="center">
 | 
				
			||||||
 | 
					                            <div class="border-top bold" style="color:#4682B4;">Running Processes and resource usage</div>
 | 
				
			||||||
 | 
					                       </div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="files">
 | 
				
			||||||
 | 
					                        <div class="board"></div>
 | 
				
			||||||
 | 
					                        <div class="small" align="center">
 | 
				
			||||||
 | 
					                            <div class="border-top bold" style="color:#4682B4;">Summary of files found and processed</div>
 | 
				
			||||||
 | 
					                       </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="export">
 | 
				
			||||||
 | 
					                        <p></p>                        
 | 
				
			||||||
 | 
					                        <div class="etl">
 | 
				
			||||||
 | 
					                            <div class="" >
 | 
				
			||||||
 | 
					                                <div class="menu" style="position:absolute; width:200">
 | 
				
			||||||
 | 
					                                    <div class="items ">
 | 
				
			||||||
 | 
					                                        <div class="bold active" style="display:grid; grid-template-columns:80% auto;">
 | 
				
			||||||
 | 
					                                            <span>
 | 
				
			||||||
 | 
					                                                <i class="fas fa-cloud"></i>
 | 
				
			||||||
 | 
					                                                Cloud</span>
 | 
				
			||||||
 | 
					                                            <span class="glyph">
 | 
				
			||||||
 | 
					                                                <i class="fas fa-angle-down"></i>
 | 
				
			||||||
 | 
					                                            </span>
 | 
				
			||||||
 | 
					                                        </div>
 | 
				
			||||||
 | 
					                                        <div class="item-group border-round border small">
 | 
				
			||||||
 | 
					                                            <div class="item" onclick="healthcare.io.publish.database.init('s3')">AWS S3</div>
 | 
				
			||||||
 | 
					                                            <div class="item" onclick="healthcare.io.publish.database.init('bigquery')">Google Bigquery</div>
 | 
				
			||||||
 | 
					                                            
 | 
				
			||||||
 | 
					                                        </div>
 | 
				
			||||||
 | 
					                                    </div>
 | 
				
			||||||
 | 
					                                   <div class="items ">
 | 
				
			||||||
 | 
					                                       <div class="bold active"style="display:grid; grid-template-columns:80% auto;">
 | 
				
			||||||
 | 
					                                            <span>
 | 
				
			||||||
 | 
					                                                <i class="fas fa-database"></i>
 | 
				
			||||||
 | 
					                                                Database</span>
 | 
				
			||||||
 | 
					                                            <span class="glyph">
 | 
				
			||||||
 | 
					                                                <i class="fas fa-angle-down"></i>
 | 
				
			||||||
 | 
					                                            </span>
 | 
				
			||||||
 | 
					                                        </div>
 | 
				
			||||||
 | 
					                                       <div class="item-group border-round border small">
 | 
				
			||||||
 | 
					                                           <div class="bold">SQL</div>
 | 
				
			||||||
 | 
					                                           
 | 
				
			||||||
 | 
					                                                <div class="item" style="margin-left:15px; margin-right:32px" onclick="healthcare.io.publish.database.init('postgresql')">PostgreSQL</div>
 | 
				
			||||||
 | 
					                                                <div class="item" style="margin-left:15px; margin-right:32px" onclick="healthcare.io.publish.database.init('mysql')">MySQL</div>
 | 
				
			||||||
 | 
					                                                
 | 
				
			||||||
 | 
					         
 | 
				
			||||||
 | 
					                                           
 | 
				
			||||||
 | 
					                                           <div class="bold">NoSQL</div>
 | 
				
			||||||
 | 
					                                            <div class="item" style="margin-left:15px; margin-right:32px" onclick="healthcare.io.publish.database.init('mongodb')">Mongodb</div>
 | 
				
			||||||
 | 
					                                            <div class="item" style="margin-left:15px; margin-right:32px" onclick="healthcare.io.publish.database.init('couchdb')">Couchdb</div>
 | 
				
			||||||
 | 
					                                       </div>
 | 
				
			||||||
 | 
					                                   </div>
 | 
				
			||||||
 | 
					                                </div>
 | 
				
			||||||
 | 
					                            </div>
 | 
				
			||||||
 | 
					                            <div>
 | 
				
			||||||
 | 
					                                <div class="active-button border-round" style="width:50%">
 | 
				
			||||||
 | 
					                                    <div class="icon"><i class="fas fa-running" style="font-size:28"></i></div> <div class="bold" align="center">Start</div>
 | 
				
			||||||
 | 
					                                </div>
 | 
				
			||||||
 | 
					                            </div>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					            </p>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
@ -0,0 +1,78 @@
 | 
				
			|||||||
 | 
					<link href="{{context}}/static/css/fa/css/all.css" type="text/css" rel="stylesheet">
 | 
				
			||||||
 | 
					<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
 | 
				
			||||||
 | 
					<link href="{{context}}/static/css/borders.css" type="text/css" rel="stylesheet">
 | 
				
			||||||
 | 
					<style>
 | 
				
			||||||
 | 
					    .form , input{font-family:sans-serif; font-size:18px}
 | 
				
			||||||
 | 
					    .form .small {font-size:14px; line-height:2}
 | 
				
			||||||
 | 
					    .mongo, .couchdb{
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					        display:grid;
 | 
				
			||||||
 | 
					        gap:2px;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    .grid-full {display:grid; grid-template-columns: 100%;}
 | 
				
			||||||
 | 
					    .grid-split-half {display:grid; grid-template-columns: 50% 50%; gap:2px;}
 | 
				
			||||||
 | 
					    .store .title-bar {display:grid; align-items:center; grid-template-columns: auto 32px; padding:8px;}
 | 
				
			||||||
 | 
					    .file {display:grid; align-items:center; grid-template-columns: 40% auto; gap:2px; font-family:sans-serif; padding:8px}
 | 
				
			||||||
 | 
					    .file input {display:none}
 | 
				
			||||||
 | 
					    .file label {padding:8px;}
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
 | 
					<div class="store">
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    <div class="title-bar">
 | 
				
			||||||
 | 
					        <div class="caption">Export Module <span class="bold id"></span></div>
 | 
				
			||||||
 | 
					        <div class="active" align="center" onclick="jx.modal.close()">
 | 
				
			||||||
 | 
					            <i class="fas fa-times"></i>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					    <p></p>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <div class="cloud form border-round">
 | 
				
			||||||
 | 
					        <div class="small border-round">
 | 
				
			||||||
 | 
					            Please provide select access-key file or service account key file to perform ETL            
 | 
				
			||||||
 | 
					            to <span class="bold id"></span>. <br>The files will be re-created in JSON format
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="file">
 | 
				
			||||||
 | 
					            <label class="active-button border-round">
 | 
				
			||||||
 | 
					                <span style="font-family:sans-serif">
 | 
				
			||||||
 | 
					                    <i class="icon fas fa-file-upload" style="font-size:24px"></i>
 | 
				
			||||||
 | 
					                </span>               
 | 
				
			||||||
 | 
					                <div>Select key file</div> 
 | 
				
			||||||
 | 
					                <input type="file" id="file" aria-label="File browser example" onchange="publish.set.file()">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            </label>
 | 
				
			||||||
 | 
					            <div class="name small black bold" style="padding-left:24px"></div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					   <div class="database form border-round">
 | 
				
			||||||
 | 
					       <div class="small border-round">
 | 
				
			||||||
 | 
					        Tables / collections will be automatically inferred in the <span class="bold id"></span>
 | 
				
			||||||
 | 
					       </div>
 | 
				
			||||||
 | 
					        <div class="mongo">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <div class="grid-split-half">
 | 
				
			||||||
 | 
					                <input type="text" class="host" placeholder="host:port"/>
 | 
				
			||||||
 | 
					                <input type="text" class="host" placeholder="database"/>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					           
 | 
				
			||||||
 | 
					            <div class="grid-split-half">
 | 
				
			||||||
 | 
					                <input type="text" placeholder="user"/>
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					                <input type="text" placeholder="password"/>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <p></p>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					            <br>
 | 
				
			||||||
 | 
					            <div class="active-button border-round" style="margin-left:30%; margin-right:30%">
 | 
				
			||||||
 | 
					                <div class="icon">
 | 
				
			||||||
 | 
					                    <i class="fas fa-check"></i>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <div class="bold" align="center">Export Now</div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					   </div>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
					Loading…
					
					
				
		Reference in new issue