Steve Nyemba
3 months ago
parent
5f7eb4fa97
commit
19e2b2897f
@ -0,0 +1,4 @@
|
||||
git+https://github.com/lnyemba/data-transport
|
||||
git+https://dev.the-phi.com/git/cloud/store@lib
|
||||
git+https://hiplab.mc.vanderbilt.edu/git/hiplab/parser
|
||||
stripe
|
||||
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:1px solid #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:1px solid #CAD5E0;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px solid #CAD5E0}
|
||||
.border-top { border-top:1px solid #CAD5E0}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
.footer {
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8); */
|
||||
|
||||
grid-column: 1 /span 2;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
|
||||
.main .header .title {font-size:28px; font-weight:bold}
|
||||
.main .header img {width:55px; height:55px;}
|
||||
@ -0,0 +1,22 @@
|
||||
|
||||
|
||||
.main {
|
||||
height:98vh; display:grid; grid-template-columns:70% auto; gap:4px;
|
||||
grid-template-rows:70px 40px auto 32px;
|
||||
padding-left:2%; padding-right:2%;
|
||||
line-height: 1.5; font-size:16px; font-family: sans-serif; font-weight:lighter;
|
||||
}
|
||||
.main .content{
|
||||
align-self:center;
|
||||
}
|
||||
.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;}
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,78 @@
|
||||
.menu {
|
||||
padding:8px;
|
||||
border:1px solid #CAD5E0 ;
|
||||
|
||||
display:grid;
|
||||
grid-column: 1 / span 2;
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.menu .icon {padding:4px;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
.menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
|
||||
.menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
.main .pane { height:auto;}
|
||||
.main .pane iframe{ width:100%; border:0px; height:80%;}
|
||||
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:1px solid #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:1px solid #CAD5E0;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px solid #CAD5E0}
|
||||
.border-top { border-top:1px solid #CAD5E0}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
.footer {
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8); */
|
||||
|
||||
grid-column: 1 /span 2;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
|
||||
.main .header .title {font-size:28px; font-weight:bold}
|
||||
.main .header img {width:55px; height:55px;}
|
||||
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* This is the default window and we will have to hide the pane (side)
|
||||
*/
|
||||
|
||||
.main {height:98vh; display:grid; grid-template-columns:75% auto; gap:4px;
|
||||
grid-template-rows:70px 40px auto 32px;
|
||||
padding-left:2%; padding-right:2%;
|
||||
}
|
||||
.main .header { display:grid; grid-template-columns:64px auto; gap:4px; align-items: center;}
|
||||
.main .header .title {font-size:28px; font-weight:bold}
|
||||
.main .header img {width:80px; height:80px;}
|
||||
.main .index{
|
||||
align-self:center;
|
||||
padding:8px;
|
||||
}
|
||||
.main .menu {border:1px solid transparent; background-color:#f3f3f3;}
|
||||
.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px; line-height:1.5; font-size: 14px;}
|
||||
.main .pane div:first-child {margin-top:4px; background-color:#f3f3f3; border-radius: 8px; padding:8px; min-height:150px}
|
||||
|
||||
.search-box {display:block; grid-template-columns: none;}
|
||||
|
||||
|
||||
|
||||
|
||||
.main .content{
|
||||
align-self:center;
|
||||
}
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,110 @@
|
||||
.menu {
|
||||
padding:8px;
|
||||
border:1px solid #CAD5E0 ;
|
||||
|
||||
display:grid;
|
||||
grid-column: 1 / span 2;
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.menu .icon {padding:4px;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
.menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
|
||||
.menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:3px dotted #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:3px dotted gray;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px dotted gray;}
|
||||
.border-top { border-top:3px dotted gray;}
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* .main .footer { grid-column: 1 / span 2; font-size:13px; font-weight: lighter; padding:8px;} */
|
||||
.footer {
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8); */
|
||||
|
||||
grid-column: 1 /span 2;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
.main .header {
|
||||
|
||||
grid-row:1;
|
||||
grid-column: 1 / span 2;
|
||||
display:grid;
|
||||
grid-template-columns: 50px auto; gap:4px;
|
||||
line-height: 1;
|
||||
|
||||
|
||||
}
|
||||
.main .header .title {font-size:28px; text-transform: capitalize; font-weight:bold}
|
||||
.main .header .subtitle {font-size:14px}
|
||||
.main .header img { width:44px; height:44px;}
|
||||
@ -0,0 +1,55 @@
|
||||
.main {
|
||||
margin:10px;
|
||||
padding:4px;
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50% ; gap:4px;
|
||||
grid-template-rows: 48px 64px auto 32px;
|
||||
font-family: sans-serif;
|
||||
font-weight: lighter;
|
||||
font-size:18px;
|
||||
line-height: 1.5;
|
||||
justify-items: normal;
|
||||
;
|
||||
height:96vh;
|
||||
}
|
||||
.main .content {
|
||||
grid-row:3;
|
||||
grid-column: 1 ;
|
||||
text-wrap: wrap;
|
||||
height:100%;
|
||||
display:grid;
|
||||
align-content: start;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.main .content #index {
|
||||
text-align: left;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top:22px;
|
||||
}
|
||||
table {
|
||||
width:99%;
|
||||
border: 1px solid #CAD5E0;
|
||||
}
|
||||
table td {padding:4px; margin:4px;}
|
||||
table thead {
|
||||
|
||||
font-weight:bold;
|
||||
background-color:#f3f3f3;
|
||||
}
|
||||
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,110 @@
|
||||
.menu {
|
||||
padding:8px;
|
||||
border-bottom:3px dotted gray ;
|
||||
|
||||
display:grid;
|
||||
grid-column: 1 / span 2;
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.menu .icon {padding:4px;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
.menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
|
||||
.menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
.main .pane {
|
||||
border-left:3px dotted gray;
|
||||
grid-column: 2;
|
||||
font-family: sans-serif;
|
||||
padding-left: 10px;
|
||||
|
||||
|
||||
}
|
||||
.pane iframe {
|
||||
border:1px solid transparent;
|
||||
width:99%;
|
||||
height:100%;
|
||||
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:1px solid #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:1px solid #CAD5E0;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px solid #CAD5E0}
|
||||
.border-top { border-top:1px solid #CAD5E0}
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
.footer {
|
||||
grid-row:5;
|
||||
margin-top:10px;
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8);
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
.main .header {display:grid; grid-template-columns:64px auto; gap:4px; width:100%; align-items:center;}
|
||||
.main .header .icon {width:64px; height:64px;}
|
||||
.main .header .icon img {width:64px; height:64px;}
|
||||
|
||||
.main .header .title { font-size:32px; text-transform: uppercase; font-weight:bold}
|
||||
.main .header .subtitle {font-style:italic;font-size:14px; color:gray; text-transform: capitalize;}
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* This file implements theme Open Source Software, the expectation is just a pager that presents a tool/software
|
||||
*/
|
||||
|
||||
.main {
|
||||
display:grid;
|
||||
grid-template-columns: 100%;;
|
||||
font-size: 18px;
|
||||
font-weight:lighter;
|
||||
font-family:sans-serif;
|
||||
margin:1%;
|
||||
margin-left:10%;
|
||||
margin-right:10%;
|
||||
gap:4px;
|
||||
height:90%;
|
||||
width:80%;
|
||||
}
|
||||
.main .content{
|
||||
|
||||
grid-row:4;
|
||||
align-self:center;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.main .content .banner {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height:200px;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
display: grid;
|
||||
|
||||
}
|
||||
|
||||
/* .main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;} */
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,82 @@
|
||||
|
||||
.menu .icon {padding:4px; align-items:center; display:grid;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
|
||||
.main .menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
.main .menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.main .menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.main .menu {
|
||||
padding:8px;
|
||||
grid-row:2;
|
||||
width:100%;
|
||||
display:none;
|
||||
|
||||
/* grid-row:2; grid-column:1 ; */
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
border:0; height:48px; padding:0px;
|
||||
display:grid; grid-template:64px repeat(6,1fr); gap:4px;
|
||||
/* background-color: #f3f3f3; */
|
||||
align-items: center;
|
||||
}
|
||||
.main .menu .icon .button {
|
||||
border:1px solid #CAD5E0; border-radius:8px; padding:2px;
|
||||
;
|
||||
}
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.main .pane {display:block;}
|
||||
@ -0,0 +1,3 @@
|
||||
@media (max-width: 480px) {
|
||||
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
.border {
|
||||
border:1px solid #CAD5E0 ;
|
||||
}
|
||||
.border-round {
|
||||
padding:6px;
|
||||
border-radius:8px;
|
||||
}
|
||||
.border-round-top-left{
|
||||
border-top-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-top-right{
|
||||
border-top-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-right{
|
||||
border-bottom-right-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
.border-round-bottom-left{
|
||||
border-bottom-left-radius: 8px;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
.border-right{
|
||||
border-right:1px solid #CAD5E0;
|
||||
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left:1px solid #CAD5E0;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom { border-bottom:1px solid #CAD5E0}
|
||||
.border-top { border-top:1px solid #CAD5E0}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* This file styles the footer of the page
|
||||
*/
|
||||
|
||||
.footer {
|
||||
text-align:center;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap:4px;
|
||||
padding:8px;
|
||||
font-size:12px;
|
||||
color:black;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-transform: capitalize;
|
||||
/* background-color: rgba(255,255,255,0.8); */
|
||||
|
||||
grid-column: 1 /span 2;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
|
||||
.main .header .title {font-size:28px; font-weight:bold}
|
||||
.main .header img {width:55px; height:55px;}
|
||||
@ -0,0 +1,22 @@
|
||||
|
||||
|
||||
.main {
|
||||
height:98vh; display:grid; grid-template-columns:70% auto; gap:4px;
|
||||
grid-template-rows:70px 40px auto 32px;
|
||||
padding-left:2%; padding-right:2%;
|
||||
line-height: 1.5; font-size:16px; font-family: sans-serif; font-weight:lighter;
|
||||
}
|
||||
.main .content{
|
||||
align-self:center;
|
||||
}
|
||||
.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;}
|
||||
.bold {font-weight:bold}
|
||||
.small-text {font-size:12px; font-weight:lighter; color :#000000;}
|
||||
.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
|
||||
.active:hover {border-bottom-color: #4682b4;}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
.large-text {font-weight:bold; font-size:28px;}
|
||||
|
||||
@ -0,0 +1,79 @@
|
||||
.menu {
|
||||
padding:8px;
|
||||
border:1px solid #CAD5E0 ;
|
||||
|
||||
display:grid;
|
||||
grid-column: 1 / span 2;
|
||||
grid-template-columns: 92px repeat(7,auto);
|
||||
gap:4px;
|
||||
text-transform: capitalize;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.menu .icon {padding:4px;}
|
||||
.menu .icon img {width:30px; height:30px;}
|
||||
.menu .item {
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
padding:4px;
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu .sub-menu {
|
||||
|
||||
display:none;
|
||||
position:absolute;
|
||||
|
||||
margin-top:2px;
|
||||
min-width:10%;
|
||||
z-index:90;
|
||||
padding:8px;
|
||||
font-weight:lighter;
|
||||
text-align:left;
|
||||
align-items:left;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
|
||||
}
|
||||
|
||||
.menu .item:hover .sub-menu{
|
||||
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
|
||||
*/
|
||||
.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
|
||||
.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
|
||||
/* .tab-content {width:80%;} */
|
||||
|
||||
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center;
|
||||
/* background-color: #f3f3f3; */
|
||||
padding-top:4px;
|
||||
padding-left:4px;
|
||||
padding-right:4px;
|
||||
}
|
||||
.tabs input[type=radio] {display:none; }
|
||||
.tabs input[type=radio] + label { font-weight:lighter;
|
||||
border:1px solid transparent;
|
||||
border-bottom-color: #CAD5E0;
|
||||
background-color: #f3f3f3;
|
||||
padding:8px;
|
||||
padding-right:10px; padding-left:10px;
|
||||
|
||||
cursor:pointer
|
||||
}
|
||||
.tabs input[type=radio]:checked +label {
|
||||
background-color: #ffffff;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
font-weight:bold;
|
||||
border-color: #CAD5E0;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{"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}
|
||||
}
|
||||
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 172 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,72 @@
|
||||
<style>
|
||||
.partners {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,1fr); gap:10px;
|
||||
grid-template-rows:repeat(2,1fr);
|
||||
text-align:center;
|
||||
align-content:center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.partners div {display:grid; align-items:center; background-color:#f3f3f3;}
|
||||
.parser-credit table {width:100%;}
|
||||
.parser-credit table tr {padding:4px;}
|
||||
|
||||
.parser-credit table {
|
||||
width:100%;
|
||||
}
|
||||
.parser-credit td {
|
||||
padding:4px;
|
||||
}
|
||||
.parser-credit tr:nth-child(odd){
|
||||
background-color:#f3f3f3;
|
||||
}
|
||||
.parser-credit {
|
||||
line-height:1.5;
|
||||
display:grid;
|
||||
grid-template-columns:60% auto; gap:10px;
|
||||
margin:8px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
|
||||
|
||||
<div class="parser-credit">
|
||||
<div>
|
||||
<p>
|
||||
Healthcare/IO::Parser was developed by <b>Khanhly Nguyen</b> during her summer internship 2019 with <span class="bold active" onclick="window.open('https://hiplab.mc.vanderbilt.edu','hiplab')">Health Information Privacy Laborary</span>(HIPLAB) at <span class="bold active" onclick="window.open('https://www.vumc.org','vumc')">Vanderbilt University Medical Center.</span>
|
||||
|
||||
</p>
|
||||
<table class="border-round border">
|
||||
<tr><td>Khanly Nguyen</td>
|
||||
<td>Heather Dunn</td>
|
||||
<td>Nina Thousand</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Byun Kang</td>
|
||||
<td>Gaylon Stanley</td>
|
||||
<td>Cheng Gao</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thomas Brown</td>
|
||||
<td>Brad. Malin</td>
|
||||
<td>Steve Nyemba</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<p style="line-height:1.5">Also our users have helped refine the parser and have been instrumental in improving the usability of {x12} parser.</p>
|
||||
<div class="partners">
|
||||
<div class="border-round border" onclick="window.open('https://preverity.com/','partners')"><div class="active">Preverity Inc</div></div>
|
||||
<div class="border-round border" onclick="window.open('https://centricconsulting.com/','partners')"><div class="active">Centric Consulting</div></div>
|
||||
<div class="border-round border" onclick="window.open('https://www.nuvancehealth.org/','partners')"><div class="active">Nuvance Health</div></div>
|
||||
<div class="border-round border" onclick="window.open('https://www.linkedin.com/company/magentacc/','partners')"><div class="active">Magenta Care Continuum </div></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p>
|
||||
<div class="large-text" align="center">Thank you,</div>
|
||||
</p>
|
||||
@ -0,0 +1,13 @@
|
||||
Copyright 2010 - 2024, Steve L. Nyemba, Vanderbilt University Medical Center
|
||||
|
||||
#
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
#
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
#
|
||||
|
||||
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@ -0,0 +1,8 @@
|
||||
<div class="large-text">Thank you,</div>
|
||||
<div>For considering <b>{{layout.header.title}}</b>,
|
||||
Please feel free to direct bugs/inquiries to :</div>
|
||||
<ul>
|
||||
<li type="square">steve.l.nyemba@vumc.org</li>
|
||||
<li type="square">or info@the-phi.com</li>
|
||||
<li type="square">clone the source code <span class="active bold" onclick="window.open('https://hiplab.mc.vanderbilt.edu/git/hiplab/parser.git','_git')">here</span></li>
|
||||
</ul>
|
||||
@ -0,0 +1,79 @@
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
layout = {on:{load:{'contact-cli':['www/parser/contact.html']}}}
|
||||
bootup.init('{{system.id}}',layout)
|
||||
})
|
||||
</script>
|
||||
<div style="display:grid; grid-template-columns: auto 40%; gap:8px;">
|
||||
<div>
|
||||
<div class="large-text">Command line interface (CLI)</div>
|
||||
<p>
|
||||
0. Check that you have the installer, the command below will display all the supported actions.
|
||||
<div class="source-code">
|
||||
healthcare-io --help
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
1. initialize the environment (one-time run), with database parameters. By default this will be using sqlite database
|
||||
|
||||
<div class="source-code">
|
||||
healthcare-io init < your-email >
|
||||
|
||||
</div>
|
||||
<br><b>Note :</b>
|
||||
<br><i class="fa-solid fa-minus"></i> To use another database please visit data-transport page to learn about how to create an <b>auth-file</b>, it's a file with database access parameters.
|
||||
<br><i class="fa-solid fa-minus"></i> The configuration file will live on <b>$HOME/.healthcareio/config.json</b>
|
||||
</p>
|
||||
<p>
|
||||
2. Parse {x12} files stored in a folder. The output will be stored in a database specified upon initialization.
|
||||
<div class="source-code">
|
||||
healthcare-io parse < x12_folder >
|
||||
</div>
|
||||
<br><b>Note :</b>
|
||||
<br><i class="fa-solid fa-minus"></i> The data is stored in JSON format in the database specified in <b>$HOME/.healthcareio/config.json</b>
|
||||
<br><i class="fa-solid fa-minus"></i> Once stored, it is possible to export them to a relational database supported by data-transport.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div id="contact-cli" class="contact">
|
||||
|
||||
</div>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div >
|
||||
<div class="large-text">Prerequisites</div>
|
||||
<ul class="border-left">
|
||||
<li type="square">Installed {x12} parser via pip (python 3+)</li>
|
||||
<li type="square">Familiarity with terminal commands</li>
|
||||
<li type="square">Have {x12} files in a folder<br>Samples {x12} files can be found at https://x12.org/examples</li>
|
||||
</ul>
|
||||
<p>
|
||||
<div class="large-text">Things to know</div>
|
||||
<ul class="border-left">
|
||||
<li type="square"><b>Plugins</b>
|
||||
<div><i class="fa-solid fa-minus"></i> The plugins determine what elements need to be parsed for a given {x12} file, and thus determine relational structure</div>
|
||||
<div><i class="fa-solid fa-minus"></i> If no plugins are specified, the default built-in are used </div>
|
||||
<div><i class="fa-solid fa-minus"></i> It is possible to develop plugins (in python) for custom parsing or to extend the elements parsed by default.</div>
|
||||
</li>
|
||||
<li type="square"><b>Parser versions</b>
|
||||
<div><i class="fa-solid fa-minus"></i> Add data on existing database if using the same custom plugins across {x12} parser versions. As long as the custom plugins have not changed
|
||||
</div>
|
||||
<div><i class="fa-solid fa-minus"></i> Do NOT add data on existing database if using default plugins & a newer version of {x12} parser.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
<div>
|
||||
<div class="large-text">System Components</div>
|
||||
<p>
|
||||
<div class="border-left" style="padding-left:8px">
|
||||
<img src="www/parser/_images/activity.png" style="width:90%"/>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,97 @@
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
var layout = {on:{load:{'contact-x':['www/parser/contact.html']}}}
|
||||
bootup.init('{{system.id}}',layout)
|
||||
})
|
||||
</script>
|
||||
|
||||
<div style="display:grid; grid-template-columns: auto 40%; gap:8px;">
|
||||
<div>
|
||||
<div class="large-text">
|
||||
Containers: Podman or Docker
|
||||
</div>
|
||||
<p>
|
||||
0. clone respository
|
||||
<div class="source-code">
|
||||
git clone https://healthcareio.the-phi.com/git/code/podman-parser.git
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
1. Edit env.sh file, use a text editor and the content of the file should look like the following
|
||||
<br>provide values of choice
|
||||
<div class="source-code">
|
||||
<br>#
|
||||
<br># Edit the env.sh file following variables, the others remain unchanged
|
||||
<br>PG_USER=
|
||||
<br>PG_PASSWORD=
|
||||
<br>USER_EMAIL=
|
||||
</div>
|
||||
|
||||
<br><b>Note :</b> The file updates with basic information to be used to configure the {x12} parser environment
|
||||
<br><i class="fa-solid fa-minus"> </i> PG_USER, PG_PASSWORD set PostgreSQL username/password
|
||||
<br><i class="fa-solid fa-minus"> </i> USER_EMAIL configures {x12} parser with user's email
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
2. Build the image with the files found in <b>podman-parser</b> folder
|
||||
<div class="source-code">
|
||||
docker build -t healthcareio:0.1 .
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
3. Build the container
|
||||
<div class="source-code">
|
||||
docker container create -v <i class="fa-solid fa-angle-left"></i>x12-folder-path<i class="fa-solid fa-angle-right"></i>:/data -p:<i class="fa-solid fa-angle-left"></i>port<i class="fa-solid fa-angle-right"></i>:5000 -h parser-ui --env-file ./env.sh --name parser healthcareio:0.1
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
4. Execute the parser (CLI), to parse the files
|
||||
<div class="source-code">
|
||||
healthcare-io parse /data
|
||||
</div>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="large-text">Prerequisites</div>
|
||||
<p>
|
||||
<ul class="border-left">
|
||||
<li type="square">
|
||||
Make sure to have either <b>docker</b> or <b>podman</b> installed
|
||||
</li>
|
||||
<li type="square">You should be familiar with containers
|
||||
<div><i class="fa-solid fa-minus"></i> Bind port 5000 to an available port</div>
|
||||
<div><i class="fa-solid fa-minus"></i> Mount a volume to <b>/data </b> that holds {x12} files</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="large-text">Things to know</div>
|
||||
<p>
|
||||
<ul class="border-left">
|
||||
<li type="square">This is the best way to try the parser in a sandboxed environment</li>
|
||||
<li type="square">The image is not yet available on a public registry, thus will require building</li>
|
||||
<li type="square">Tools installed in the container:
|
||||
|
||||
<div><i class="fa-solid fa-minus"></i> PostgreSQL database</div>
|
||||
<div><i class="fa-solid fa-minus"></i> PGWeb interface on port 5000</div>
|
||||
|
||||
</li>
|
||||
<li type="square">The container has the latest copy of <b>{x12} parser</b> code-base</li>
|
||||
<li type="square">There is not need to initialize the <b>{x12} parser</b>, this will happen automatically</li>
|
||||
|
||||
</ul>
|
||||
</p>
|
||||
<div class="large-text"> </div>
|
||||
<p>
|
||||
<ul class="border-left">
|
||||
<div id="contact-x" class="contact"></div>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,89 @@
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
var uri = '{{system.context}}/data-transport/api/info/about' ;
|
||||
|
||||
|
||||
var http = HttpClient.instance()
|
||||
http.get(uri,function(x){
|
||||
var _object = JSON.parse(x.responseText)
|
||||
|
||||
jx.dom.set.value('supported-vendors',_object.supported)
|
||||
// jx.dom.set.value('data-transport-version',_object.version)
|
||||
var layout = {on:{load:{'contact-xp':['www/parser/contact.html']}}}
|
||||
bootup.init('{{system.id}}',layout)
|
||||
|
||||
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.supported-vendors table {width:100%; padding:4px; border:1px solid #CAD5E0;}
|
||||
.supported-vendors thead tr {
|
||||
background-color: #4682B4;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.supported-vendors tbody tr {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.supported-vendors tbody tr:nth-of-type(even) {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
</style>
|
||||
<div style="display:grid; grid-template-columns: auto 40%; gap:8px;">
|
||||
<div>
|
||||
<div class="large-text">{x12} Export to Database</div>
|
||||
<p>
|
||||
0. The content of an <b>auth-file</b> for an sqlite3+ export, use the <a href="javascript:menu.utils._delegate('.menu',3,0)"><b>ETL Configurator</b></a> to generate an ETL file
|
||||
<div class="source-code">
|
||||
{"provider":"sqlite","database":"exported_x12", "context":"write"}
|
||||
</div>
|
||||
<br><b>Note :</b>
|
||||
<br><i class="fa-solid fa-minus"> </i> You can use the wizard in the studio menu to generate this file.
|
||||
</p>
|
||||
<p>
|
||||
1. Execute the export help function to display how the function is used
|
||||
<div class="source-code">
|
||||
healthcare-io export --help
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
2. Execute the export function with the file created above
|
||||
<div class="source-code">
|
||||
healthcare-io export <i class="fa-solid fa-angle-left"></i>claims|remits<i class="fa-solid fa-angle-right"></i> ./auth-file.json
|
||||
</div>
|
||||
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div id="contact-xp" class="border-top"></div>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="large-text">Prerequisites</div>
|
||||
<ul class="border-left">
|
||||
<li type="square">Have a data-transport <b>auth-file</b> available
|
||||
<br><i class="fa-solid fa-minus"> </i> supported databases and vendors and listed below
|
||||
<div id="supported-vendors" class="supported-vendors"></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="large-text">Things to know</div>
|
||||
<ul class="border-left">
|
||||
<li type="square">Export claims or remits should be specified individually
|
||||
<br><i class="fa-solid fa-minus"> </i> A function that will do both on a single call is not yet supported
|
||||
|
||||
</li>
|
||||
<li type="square">The relational data is normalized
|
||||
<br><i class="fa-solid fa-minus"> </i> Database specific referrential integrity is not set. This might need to be set manually when large volumes of data are involved
|
||||
<br><i class="fa-solid fa-minus"> </i> We recommend using the exported data as staging data, and might need better typing and null/empty value handling
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,182 @@
|
||||
<style>
|
||||
.banner {
|
||||
display:grid;
|
||||
align-items:center;
|
||||
background-image:url('www/parser/_images/banner1.jpg');
|
||||
|
||||
background-size:cover; background-repeat:no-repeat; background-position:center;
|
||||
|
||||
}
|
||||
.qinstall {
|
||||
display:grid; grid-template-columns: 50% auto; gap:8px;;
|
||||
}
|
||||
#content {
|
||||
font-size:14px; font-weight: lighter; line-height: 1.5; font-family: sans-serif;
|
||||
}
|
||||
.plans {
|
||||
display:grid;
|
||||
grid-template-columns:40% 30% 30%; gap:1px;
|
||||
font-family:sans-serif;
|
||||
padding:8px;
|
||||
}
|
||||
.plans .title {text-transform:capitalize; font-size:24px; font-weight:bold; text-align:center;};
|
||||
.plans i {color:black};
|
||||
.plans .fa-times {color:red};
|
||||
.fa-check {color:green; font-size:20px;}
|
||||
.plans #labels {
|
||||
|
||||
|
||||
}
|
||||
.plans .item {margin:0px; padding:4px; font-weight:normal; text-transform:capitalize;}
|
||||
.plans .item:nth-of-type(even) {
|
||||
margin:0px; font-weight:normal; text-transform:capitalize;
|
||||
padding:4px;
|
||||
background-color:#f3f3f3;
|
||||
}
|
||||
|
||||
.green {color:green;}
|
||||
.red {color:red;}
|
||||
.extra-large-icon {font-size:140px;}
|
||||
.large-icon {font-size:100px; color:gray;}
|
||||
.medium-icon { font-size:68px;}
|
||||
.gray-icon {color:#d3d3d3;}
|
||||
.dark-gray-icon {color:gray;}
|
||||
.extra-large-text {font-size:40px; font-weight:bold;}
|
||||
.source-code {
|
||||
font-family:courier; background-color: #000000; COLOR:#ffffff;
|
||||
padding-left:10px;
|
||||
padding:8px;
|
||||
border-left:8px solid #CAD5E0; margin-left:10px; font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
// var uri = '/api/store/plans'
|
||||
// http = HttpClient.instance()
|
||||
// http.get(uri,function(x){
|
||||
// var _plans = JSON.parse(x.responseText)
|
||||
// render(_plans)
|
||||
// })
|
||||
|
||||
var render = function(_plans){
|
||||
_labels = jx.dom.get.instance('labels')
|
||||
_empty = jx.dom.get.instance('DIV')
|
||||
_empty.innerHTML = ' '
|
||||
_empty.className = 'title '
|
||||
_labels.id = 'labels'
|
||||
_labels.appendChild(_empty)
|
||||
jx.dom.append('plans',_labels)
|
||||
Object.keys(_plans).forEach( function(label){
|
||||
var _plan = _plans[label]
|
||||
_divPlan = jx.dom.get.instance('DIV')
|
||||
_divTitle= jx.dom.get.instance('DIV')
|
||||
_divPlan.INNERHTML = label
|
||||
_divTitle.innerHTML = label
|
||||
_divTitle.className = 'title'
|
||||
_divPlan.appendChild(_divTitle)
|
||||
jx.dom.append('plans',_divPlan)
|
||||
_divPlan.className = label + ' list'
|
||||
//-- label here is either enterprise or free
|
||||
Object.keys(_plan).forEach( function(_key){
|
||||
|
||||
if (! jx.dom.exists(_key) && _key != ''){
|
||||
_divLabel = jx.dom.get.instance('DIV')
|
||||
_divLabel.id = _key
|
||||
_divLabel.innerHTML = _key
|
||||
_divLabel.className = 'item'
|
||||
jx.dom.append('labels',_divLabel)
|
||||
|
||||
|
||||
}
|
||||
var _divValue = jx.dom.get.instance('DIV')
|
||||
if (_key != ''){
|
||||
var _i = jx.dom.get.instance('I')
|
||||
_i.className = ( _plan[_key] == 1)?'fa-solid fa-check green' : 'fa-solid fa-times red'
|
||||
|
||||
_divValue.appendChild(_i)
|
||||
}else{
|
||||
_divValue.className = 'border-top price'
|
||||
_divValue.innerHTML = _plan[_key]
|
||||
}
|
||||
_divValue.className = 'item'
|
||||
_divValue.align='center'
|
||||
_divPlan.appendChild(_divValue)
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
$(document).ready(function(){
|
||||
var layout = {on:{load:{'contact-m':['www/parser/contact.html']}}}
|
||||
bootup.init('{{system.id}}',layout)
|
||||
})
|
||||
</script>
|
||||
<div class="parser">
|
||||
<div class="banner">
|
||||
|
||||
<div align="center" style="background-color: rgba(255,255,255,0.9); padding:8px;">
|
||||
<div class="large-text" align="center">ALL-In-One {x12} Parser & Exporter</div>
|
||||
<div class="bold">Unlock The Power of Healthcare Data</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="">
|
||||
<div>
|
||||
<div style="display:grid; grid-template-columns: repeat(4,1fr); gap:8px;">
|
||||
<div class="border-round border">
|
||||
<div class="large-text">Streamline parsing</div>
|
||||
<p>
|
||||
Whether you prefer using it as a library within your Python projects, via a command-line interface (CLI) for quick tasks, or in a containerized environment (Podman/Docker) for scalability and portability, our parser fits seamlessly into your workflow.
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-round border">
|
||||
<div class="large-text">
|
||||
Database export
|
||||
</div>
|
||||
<p>Seamlessly export parsed data into relational databases, ensuring a normalized data representation that's ready for analysis and integration with your existing systems.
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-round border shadow">
|
||||
<div class="large-text">Extensible architecture</div>
|
||||
<p>
|
||||
Our parser is designed with extensibility in mind. You can create custom plugins for enhanced formatting, parsing, and processing tailored to your specific needs
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-round border">
|
||||
<div class="large-text">Open source</div>
|
||||
<p>
|
||||
Embrace flexibility and transparency with our parser's source code, available under the permissive <b>MIT license.</b> Modify, customize, and contribute to the project with confidence
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<div class="large-text">Quick Start: Installation</div>
|
||||
<br>
|
||||
<div class="qinstall">
|
||||
<div>
|
||||
<div class="bold">1. Pip (Python)</div>
|
||||
<div class="source-code"># pip & virtualenv<br>pip install git+https://hiplab.mc.vanderbilt.edu/git/hiplab/parser.git</div>
|
||||
<br><div class="source-code"># CLI runner/executable<br>
|
||||
healthcare-io [init|parse|export] --help
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="bold">2. Docker/Podman</div>
|
||||
<div class="source-code"># clone repository (Dockerfile)<br>git clone https://healthcareio.the-phi.com/git/code/podman-parser.git</div>
|
||||
<br><div class="source-code"># build docker/podman image<br>docker build -t healthcareio:0.1 .</div>
|
||||
<br><div class="source-code"># build container<br>docker container create -v<x12-folder-path>:/data -p:<port>:5000 -h parser-ui --env-file ./env.sh --name parser healthcareio:0.1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div><div id="plans" class="plans border-round"></div>
|
||||
|
||||
<div id="contact-m" class="border-top"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
@ -0,0 +1,184 @@
|
||||
<script>
|
||||
var _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}
|
||||
}
|
||||
|
||||
var wizard = {}
|
||||
wizard.init = function (){
|
||||
Object.keys(_meta).forEach( function (_name){
|
||||
var _div = jx.dom.get.instance('DIV')
|
||||
_div.innerHTML = _name
|
||||
_div.data = _meta[_name]
|
||||
_div.data.provider = _name
|
||||
_div.data.context = 'write'
|
||||
_div.className = 'search-item active'
|
||||
_div.placeholder = 'use '+_name+' provider'
|
||||
_div.onclick = function (){
|
||||
wizard.write_code(this.data)
|
||||
$('.wizard-code').slideDown()
|
||||
|
||||
}
|
||||
jx.dom.append('search-meta-items',_div)
|
||||
})
|
||||
jx.dom.set.value('search-provider','sqlite')
|
||||
wizard.search()
|
||||
|
||||
}
|
||||
wizard.write_code = function (_info){
|
||||
$('.provider').html(_info.provider)
|
||||
$('#auth-file').html( JSON.stringify(_info))
|
||||
}
|
||||
wizard.search = function (){
|
||||
var term = jx.dom.get.value('search-provider').trim()
|
||||
|
||||
wizard.show(term)
|
||||
|
||||
}
|
||||
wizard.clear = function (){
|
||||
jx.dom.set.value('search-provider','')
|
||||
wizard.show('')
|
||||
jx.dom.set.focus('search-provider')
|
||||
}
|
||||
wizard.show = function (term){
|
||||
_count = 0
|
||||
$('.wizard-code').slideUp()
|
||||
if (term == ''){
|
||||
$('.search-item').slideDown()
|
||||
}else{
|
||||
var nodes = jx.dom.get.children('search-meta-items')
|
||||
var _regx = new RegExp(term,"ig")
|
||||
jx.utils.patterns.visitor(nodes,function (node){
|
||||
if (node.data.provider.match(_regx)){
|
||||
$(node).slideDown()
|
||||
_count += 1
|
||||
}else{
|
||||
$(node).slideUp()
|
||||
}
|
||||
})
|
||||
$('.found-items').html(_count)
|
||||
}
|
||||
}
|
||||
wizard.supported_providers = function (){
|
||||
var uri = '{{system.context}}/data-transport/api/info/about' ;
|
||||
|
||||
var http = HttpClient.instance()
|
||||
http.get(uri,function(x){
|
||||
var _object = JSON.parse(x.responseText)
|
||||
jx.dom.set.value('wiz-vendors',_object.supported)
|
||||
|
||||
var layout = {on:{load:{'contact-wizard':['www/parser/contact.html']}}}
|
||||
bootup.init('{{system.id}}',layout)
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
$(document).ready(function(){
|
||||
$('.wizard-code').slideUp()
|
||||
wizard.supported_providers()
|
||||
wizard.init()
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
input[type=text] {
|
||||
background-color:#f3f3f3; width:98%;
|
||||
padding:8px; border:4px solid transparent; outline: 0;
|
||||
padding:0px; padding-left:8px; font-size:18px; height:32px;
|
||||
color:#000000;
|
||||
}
|
||||
input:focus {
|
||||
border-left-color: #4682b4;
|
||||
}
|
||||
.search-meta-frame {
|
||||
width:calc(100% - 64px) ;
|
||||
margin-top:4px;
|
||||
}
|
||||
#search-meta{
|
||||
|
||||
height:100px; overflow: hidden; overflow-y: auto;
|
||||
|
||||
padding:8px;
|
||||
}
|
||||
#search-meta .search-item {padding:4px; text-transform: capitalize;}
|
||||
|
||||
.wizard-code .provider {text-transform: uppercase;}
|
||||
|
||||
|
||||
.supported-vendors table {width:100%; padding:4px; border:1px solid #CAD5E0;}
|
||||
.supported-vendors thead tr {
|
||||
background-color: #4682B4;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.supported-vendors tbody tr {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.supported-vendors tbody tr:nth-of-type(even) {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div style="display:grid; grid-template-columns: auto 40%; gap:8px;">
|
||||
<div>
|
||||
<div class="large-text">Wizard: export file generator</div>
|
||||
<div>This wizard generates a template file to be used to export data, to a supported database
|
||||
<br><i class="fa-solid fa-minus"></i> search for the database provider
|
||||
</div>
|
||||
<p>
|
||||
<div style="display:grid; grid-template-columns: auto 48px; gap:4px">
|
||||
<div>
|
||||
<input id="search-provider" type="text" placeholder="[database provider]" onkeyup="wizard.search()">
|
||||
</div>
|
||||
<div>
|
||||
<div class="active" align="center" onclick="wizard.clear()"><i class="fa-solid fa-trash"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-meta-frame border-round border">
|
||||
<div align="right">
|
||||
<span class="found-items">0</span><span> found</span>
|
||||
</div>
|
||||
<div id="search-meta"><div id="search-meta-items"></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
<div style="height:150px;">
|
||||
|
||||
<div class="wizard-code">
|
||||
<div class="provider bold"></div>
|
||||
<div id="auth-file" class="source-code"> </div>
|
||||
<br><b>Note :</b>
|
||||
<br><i class="fa-solid fa-minus"> </i> Copy the code above to the <b>auth-file</b> and fill with appropriate values
|
||||
<br><i class="fa-solid fa-minus"> </i> Attributes with <b>zero</b> i.e <b>0</b> are optional
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
<div id="contact-wizard"></div>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="large-text">Prerequisites</div>
|
||||
<ul class="border-left">
|
||||
<li type="square">Familiarity with JSON format</li>
|
||||
<li type="square">Understand your current database security access policy
|
||||
<br><i class="fa-solid fa-minus"> </i> The <b>{x12} parser</b> needs networking access to the database server
|
||||
<br><i class="fa-solid fa-minus"> </i> The <b>{x12} parser</b> needs <b>CREATE</b> tables and <b>WRITE</b> data to the database
|
||||
</li>
|
||||
</ul>
|
||||
<div class="large-text">Thing to know</div>
|
||||
<ul class="border-left">
|
||||
<li type="square">Values assigned to attributes
|
||||
<br><i class="fa-solid fa-minus"> </i> value of <b>one</b> i.e <b>1</b> suggests a value must be provided
|
||||
<br><i class="fa-solid fa-minus"> </i> value of <b>zero</b> i.e <b>0</b> suggests the attribute is optional and can be removed
|
||||
</li>
|
||||
<li type="square">
|
||||
Supported databases (or database providers) to use in search
|
||||
<div id="wiz-vendors" class="supported-vendors"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in new issue