mirror of http://localhost:9400/cloud/cms
				
				
				
			
							parent
							
								
									4d44df954d
								
							
						
					
					
						commit
						626fe7efd4
					
				@ -1,27 +0,0 @@
 | 
				
			||||
 | 
				
			||||
.main{
 | 
				
			||||
    background-image: linear-gradient(0deg, #5ED9FF 0%, #416AD9 100%);
 | 
				
			||||
    color:#FFFFFF;
 | 
				
			||||
}
 | 
				
			||||
.main .menu {background-color: rgba(255,255,255,0.8); color:#000000;
 | 
				
			||||
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
 | 
				
			||||
}
 | 
				
			||||
.menu .sub-menu {
 | 
				
			||||
    
 | 
				
			||||
    color:#000000;}
 | 
				
			||||
.people .person {
 | 
				
			||||
    background-color: rgba(255,255,255,0.8); color:#000000;
 | 
				
			||||
}    
 | 
				
			||||
.header{
 | 
				
			||||
    
 | 
				
			||||
    border-bottom:2px solid #CAD5E0;
 | 
				
			||||
}
 | 
				
			||||
.jxmodal {
 | 
				
			||||
    border: 4px solid #CAD5E0;
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
.active:hover {
 | 
				
			||||
    border-bottom-color: #f65000;
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
.footer {background-color:rgba(255,255,255,0.8); margin:4px; padding:8px;}
 | 
				
			||||
@ -1,22 +0,0 @@
 | 
				
			||||
@import "compass/css3";
 | 
				
			||||
 | 
				
			||||
@import url(https://fonts.googleapis.com/css?family=Raleway:100,300);
 | 
				
			||||
 | 
				
			||||
body {
 | 
				
			||||
  background-color: #222;
 | 
				
			||||
  @include background-image(linear-gradient(top, rgba(#111,1) 0%,rgba(#222,1) 50%,rgba(#111,1) 100%));
 | 
				
			||||
  font-family: 'Raleway', sans-serif;
 | 
				
			||||
  font-weight: 100;
 | 
				
			||||
  color: rgba(255, 255, 255, 0.5);
 | 
				
			||||
  height: 100vh;
 | 
				
			||||
  width: 100vw;
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
#title {
 | 
				
			||||
  position: fixed;
 | 
				
			||||
  top: 10px;
 | 
				
			||||
  left: 10px;
 | 
				
			||||
  font-size: 20px;
 | 
				
			||||
  letter-spacing: 0.1em;
 | 
				
			||||
  z-index: 100;
 | 
				
			||||
}
 | 
				
			||||
@ -0,0 +1,75 @@
 | 
				
			||||
/***
 | 
				
			||||
* The idea of a board is a layout with graphs where the number of digits indicates the number of items in a dashboards line items
 | 
				
			||||
* The value of zero suggests the size (smaller pane) and one (large panes)
 | 
				
			||||
* NOTE:
 | 
				
			||||
*   obviously a board-000 and board-111 would suggest the same thing
 | 
				
			||||
*/
 | 
				
			||||
 | 
				
			||||
.dashboard .chart, .scalar-pane {
 | 
				
			||||
    border-radius:8px;
 | 
				
			||||
    padding:4px;
 | 
				
			||||
    border:1px solid #d3d3d3;
 | 
				
			||||
    background-image: linear-gradient(to bottom, #ffffff, #f3f3f3);
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
.dashboard .scalar {     
 | 
				
			||||
    display:grid; grid-template-rows:auto auto; gap:4px; align-items: center; align-content: center;}
 | 
				
			||||
.dashboard .scalar .value {font-size:40px; font-family: courier; font-weight: bold;}
 | 
				
			||||
.dashboard .scalar .label {font-size:10px; text-transform: uppercase;}
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
.apexcharts-title-text {
 | 
				
			||||
    text-transform: capitalize;
 | 
				
			||||
}
 | 
				
			||||
.dashboard .title {grid-column:1 / span 4; text-transform:capitalize; padding:4px;}
 | 
				
			||||
.scalar-pane { text-align: center; 
 | 
				
			||||
   
 | 
				
			||||
    ;}
 | 
				
			||||
.board-10{
 | 
				
			||||
    
 | 
				
			||||
    display:grid;
 | 
				
			||||
    grid-template-columns: calc(100% - 150px) 150px; gap:4px;
 | 
				
			||||
}
 | 
				
			||||
.board-10 .scalar-pane { display:grid; gap:4px;
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
.board-10 .scalar-pane  .scalar {border-top:1px solid #d3d3d3}
 | 
				
			||||
.board-10 .scalar-pane :first-child {border-top:0px;}
 | 
				
			||||
/* .board-10 .scalar-pane :nth-child(3n-1){ border-top:1px solid #d3d3d3;} */
 | 
				
			||||
 | 
				
			||||
.board-00 , .board-11 {
 | 
				
			||||
    display:grid;
 | 
				
			||||
    grid-template-columns: repeat(2,1fr); gap:2px
 | 
				
			||||
}
 | 
				
			||||
.board-110 {
 | 
				
			||||
    display:grid;
 | 
				
			||||
    grid-template-columns: 2fr 2fr 150px;
 | 
				
			||||
    gap:4px;
 | 
				
			||||
}
 | 
				
			||||
.board-110 .scalar-pane{display:grid;}
 | 
				
			||||
 | 
				
			||||
.board-110-2 {
 | 
				
			||||
    display:grid;
 | 
				
			||||
    grid-template-columns: 2fr 2fr;
 | 
				
			||||
    gap:4px;
 | 
				
			||||
} 
 | 
				
			||||
.board-110-2 .scalar-pane {grid-row:3; grid-column: 2; 
 | 
				
			||||
    display: grid; 
 | 
				
			||||
    grid-template-columns: 50% 50%; gap:4px;}
 | 
				
			||||
 | 
				
			||||
.board-110-2 .scalar-pane > :nth-child(even){ border-left:1px solid #d3d3d3;}    
 | 
				
			||||
 | 
				
			||||
.board-100 {
 | 
				
			||||
    display:grid;
 | 
				
			||||
    grid-template-columns: 2fr 1fr 1fr; gap:4px;
 | 
				
			||||
}
 | 
				
			||||
.board-100-2 {
 | 
				
			||||
    display:grid;
 | 
				
			||||
    grid-template-columns: 2fr 1fr ; gap:4px;
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
.board-100,.board-100-2 .scalar-pane {display:grid; gap:4px;}
 | 
				
			||||
.board-100-2 > :nth-child(2){grid-row:2 / span 3}
 | 
				
			||||
/* .board-100-2 :nth-child(3){grid-row:2; grid-column:2} */
 | 
				
			||||
.board-100-2 .scalar-pane {grid-row:3; grid-column: 2 ; display:grid; grid-template-columns: repeat(2, 1fr); }
 | 
				
			||||
.board-100-2 .scalar-pane > :nth-child(even){ border-left:1px solid #d3d3d3;}
 | 
				
			||||
@ -1 +0,0 @@
 | 
				
			||||
.main { font-size:14px; font-weight: lighter;}
 | 
				
			||||
@ -1,33 +0,0 @@
 | 
				
			||||
/**
 | 
				
			||||
* This is the default window and we will have to hide the pane (side)
 | 
				
			||||
*/
 | 
				
			||||
 | 
				
			||||
.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%;
 | 
				
			||||
}
 | 
				
			||||
.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;}
 | 
				
			||||
.main .content{
 | 
				
			||||
    align-self:center;
 | 
				
			||||
}
 | 
				
			||||
.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;}
 | 
				
			||||
 | 
				
			||||
.busy-loading {
 | 
				
			||||
    background: linear-gradient(90deg, #d3d3d3,#f3f3f3, #000000, #d3d3d3);
 | 
				
			||||
    animation: gradient 15s ease infinite;
 | 
				
			||||
    height:28; width:100%;
 | 
				
			||||
}
 | 
				
			||||
@keyframes gradient {
 | 
				
			||||
	0% {
 | 
				
			||||
		background-position: 0% 50%;
 | 
				
			||||
	}
 | 
				
			||||
	50% {
 | 
				
			||||
		background-position: 100% 50%;
 | 
				
			||||
	}
 | 
				
			||||
	100% {
 | 
				
			||||
		background-position: 0% 50%;
 | 
				
			||||
	}
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
@ -1,64 +0,0 @@
 | 
				
			||||
.main {
 | 
				
			||||
    
 | 
				
			||||
    font-size: 18px;
 | 
				
			||||
    font-weight:lighter;
 | 
				
			||||
    font-family:sans-serif;
 | 
				
			||||
    margin:1%;
 | 
				
			||||
    margin-left:10%;
 | 
				
			||||
    margin-right:10%;
 | 
				
			||||
    
 | 
				
			||||
    display:block;
 | 
				
			||||
}
 | 
				
			||||
.main .header { height:64px;
 | 
				
			||||
   display:grid;
 | 
				
			||||
   grid-template-columns: 50px auto;
 | 
				
			||||
    border-bottom: 2px double #CAD5E0;
 | 
				
			||||
    padding:4px;
 | 
				
			||||
    gap:4px;
 | 
				
			||||
    align-items: center;
 | 
				
			||||
 | 
				
			||||
    
 | 
				
			||||
}
 | 
				
			||||
.main .header .icon {width:50px; height:50px;}
 | 
				
			||||
.main .header .icon img {width:48px; height:48px;}
 | 
				
			||||
.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;}
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
.main .menu {border:0; background-color: #f3f3f3; height:64px; padding:0px;
 | 
				
			||||
    display:grid; grid-template:64px repeat(6,1fr); gap:4px; background-color: #ffffff;
 | 
				
			||||
}
 | 
				
			||||
.main .menu .icon div,.button {
 | 
				
			||||
    padding:10px;
 | 
				
			||||
}
 | 
				
			||||
/* .main .content img{
 | 
				
			||||
    width:99%;
 | 
				
			||||
    border:1px solid #CAD5E0;
 | 
				
			||||
    padding:8px;
 | 
				
			||||
    background-color:#f3f3f3;
 | 
				
			||||
} */
 | 
				
			||||
 | 
				
			||||
/* .main .content table thead tr:first-child {
 | 
				
			||||
    padding:4px;
 | 
				
			||||
    background: #d3d3d3;
 | 
				
			||||
 } */
 | 
				
			||||
 blockquote {
 | 
				
			||||
    border-left:8px solid #D3D3D3; padding:4px;
 | 
				
			||||
    }
 | 
				
			||||
.main .content table {border-spacing: 2;}    
 | 
				
			||||
.main .content table .active {font-size:14px}
 | 
				
			||||
.main .content .banner {
 | 
				
			||||
    height:300px; margin:4px;
 | 
				
			||||
    padding:0px; 
 | 
				
			||||
    
 | 
				
			||||
}
 | 
				
			||||
.code { margin-top:8px;
 | 
				
			||||
    background:black; color:#d3d3d3;padding:10px; text-wrap: nowrap;
 | 
				
			||||
    font-family: 'Courier New', Courier, monospace; font-weight:lighter; font-size:13px;}
 | 
				
			||||
 .main .pane { height:auto;}
 | 
				
			||||
 .main .pane iframe{ width:100%; border:0px; height:80%;}
 | 
				
			||||
 | 
				
			||||
 .dialog-title {
 | 
				
			||||
    background-color:darkgray;color:#FFFFFF;
 | 
				
			||||
    text-transform:capitalize; font-weight:bold; align-items:center;display:grid; grid-template-columns:auto 32px;
 | 
				
			||||
}
 | 
				
			||||
@ -1,20 +0,0 @@
 | 
				
			||||
/**
 | 
				
			||||
* 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;}
 | 
				
			||||
@ -1,115 +0,0 @@
 | 
				
			||||
.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;
 | 
				
			||||
    ;
 | 
				
			||||
}
 | 
				
			||||
.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;}
 | 
				
			||||
.main .menu { grid-row:2; grid-column: 1 / span 2; background-color: #FFFFFF; 
 | 
				
			||||
    display:grid; grid-template-columns: 75px repeat(3,250px) ; gap:4px; 
 | 
				
			||||
    align-items: left;
 | 
				
			||||
    border:0px;
 | 
				
			||||
    padding:4px;
 | 
				
			||||
    border-bottom:3px dotted darkgray;    
 | 
				
			||||
 | 
				
			||||
    
 | 
				
			||||
}
 | 
				
			||||
.main .menu img { width:28px; height:28px;}
 | 
				
			||||
.main .menu .icon .button {
 | 
				
			||||
    border:1px solid #CAD5E0; border-radius:4px; padding:4px;
 | 
				
			||||
    background-color:#f3f3f3;
 | 
				
			||||
    height:100%;
 | 
				
			||||
    ;
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
.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;
 | 
				
			||||
}
 | 
				
			||||
/* .main .content #index{
 | 
				
			||||
    text-align:left;
 | 
				
			||||
    align-content:normal;
 | 
				
			||||
    display:grid;
 | 
				
			||||
    background-color: green;
 | 
				
			||||
} */
 | 
				
			||||
 | 
				
			||||
.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%;
 | 
				
			||||
    
 | 
				
			||||
}
 | 
				
			||||
.main .footer {grid-row:4; grid-column: 1 / span 2; font-size:13px; font-weight: lighter;}
 | 
				
			||||
 | 
				
			||||
blockquote { border-left:8px solid GRAY;margin-right:8px}
 | 
				
			||||
blockquote .code {padding:10px; font-size:16px; font-family: courier; background-color:black; color: #d3d3d3}
 | 
				
			||||
/**
 | 
				
			||||
* styling tables here
 | 
				
			||||
*/
 | 
				
			||||
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;
 | 
				
			||||
}
 | 
				
			||||
/* table tbody tr:hover {
 | 
				
			||||
    background-color: #4682B4;
 | 
				
			||||
    color:white ;
 | 
				
			||||
    cursor:pointer;
 | 
				
			||||
} */
 | 
				
			||||
 | 
				
			||||
#gallery img {
 | 
				
			||||
    justify-content: left;
 | 
				
			||||
    width:70px;
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
#gallery table {width:100%;}
 | 
				
			||||
@ -1,80 +0,0 @@
 | 
				
			||||
.main {
 | 
				
			||||
    gap:4px;
 | 
				
			||||
    font-size: 18px;
 | 
				
			||||
    font-weight:lighter;
 | 
				
			||||
    font-family:sans-serif;
 | 
				
			||||
    margin:1%;
 | 
				
			||||
    margin-left:10%;
 | 
				
			||||
    margin-right:10%;
 | 
				
			||||
    gap:4px;
 | 
				
			||||
    
 | 
				
			||||
    
 | 
				
			||||
}
 | 
				
			||||
.main .header { height:64px;
 | 
				
			||||
   display:grid;
 | 
				
			||||
   grid-template-columns: 50px auto;
 | 
				
			||||
    border-bottom: 2px double #CAD5E0;
 | 
				
			||||
    padding:4px;
 | 
				
			||||
    gap:4px;
 | 
				
			||||
    align-items: center;
 | 
				
			||||
 | 
				
			||||
    
 | 
				
			||||
}
 | 
				
			||||
.main .header .icon {width:50px; height:50px;}
 | 
				
			||||
.main .header .icon img {width:48px; height:48px;}
 | 
				
			||||
.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;}
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
.main .menu {border:0; background-color: #f3f3f3; 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;
 | 
				
			||||
    ;
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
/* .main .content img{
 | 
				
			||||
    width:99%;
 | 
				
			||||
    border:1px solid #CAD5E0;
 | 
				
			||||
    padding:8px;
 | 
				
			||||
    background-color:#f3f3f3;
 | 
				
			||||
} */
 | 
				
			||||
 | 
				
			||||
/* .main .content table thead tr:first-child {
 | 
				
			||||
    padding:4px;
 | 
				
			||||
    background: #d3d3d3;
 | 
				
			||||
 } */
 | 
				
			||||
 blockquote {
 | 
				
			||||
    border-left:8px solid #D3D3D3; padding:4px;
 | 
				
			||||
    background-color: #000000; color:#f3f3f3;
 | 
				
			||||
    
 | 
				
			||||
    }
 | 
				
			||||
/* blockquote code { margin-top:8px;
 | 
				
			||||
    background:black; color:#f3f3f3;padding:10px; text-wrap: nowrap;
 | 
				
			||||
    line-height: 2; width:99%;
 | 
				
			||||
    font-family: 'Courier New', Courier, monospace; font-weight:lighter; font-size:14px;} */
 | 
				
			||||
.source-code {
 | 
				
			||||
    font-family:courier; background-color: #000000; COLOR:#ffffff;  
 | 
				
			||||
    
 | 
				
			||||
    padding:8px;
 | 
				
			||||
    padding-left:10px;
 | 
				
			||||
    text-wrap: wrap;
 | 
				
			||||
    width:calc(100% - 40px);
 | 
				
			||||
    border-left:8px solid #CAD5E0; margin-left:10px; font-weight: bold;
 | 
				
			||||
}
 | 
				
			||||
.main .content table {border-spacing: 2;}    
 | 
				
			||||
.main .content table .active {font-size:14px}
 | 
				
			||||
.main .content .banner {
 | 
				
			||||
    height:300px; margin:4px;
 | 
				
			||||
    padding:0px; 
 | 
				
			||||
    
 | 
				
			||||
}
 | 
				
			||||
 .main .pane { height:auto;}
 | 
				
			||||
 .main .pane iframe{ width:100%; border:0px; height:80%;}
 | 
				
			||||
 | 
				
			||||
 .dialog-title {
 | 
				
			||||
    background-color:darkgray;color:#FFFFFF;
 | 
				
			||||
    text-transform:capitalize; font-weight:bold; align-items:center;display:grid; grid-template-columns:auto 32px;
 | 
				
			||||
}
 | 
				
			||||
@ -1,18 +0,0 @@
 | 
				
			||||
.content {
 | 
				
			||||
    min-height:85vh;
 | 
				
			||||
    line-height: 1.5;
 | 
				
			||||
    font-weight:lighter;
 | 
				
			||||
    font-family: sans-serif;
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
.main .header {
 | 
				
			||||
    display:grid;
 | 
				
			||||
    grid-template-columns: 64px auto; gap:4px;
 | 
				
			||||
    align-items: center;
 | 
				
			||||
}
 | 
				
			||||
.main .header .title {font-weight:bold; font-size:24px; text-transform: capitalize;}
 | 
				
			||||
.main .header .subtitle {font-size:14px; text-transform: capitalize;}
 | 
				
			||||
.main .header img {height:64px; width:64px}
 | 
				
			||||
.main .menu {margin-left:200px}
 | 
				
			||||
 | 
				
			||||
.pane {width:50%; height:100px; background-color: pink;}
 | 
				
			||||
@ -0,0 +1,192 @@
 | 
				
			||||
var monitor = {render:{},context:'',get:{}}
 | 
				
			||||
monitor.render.table_list = function (_data){
 | 
				
			||||
    var nodes = jx.dom.get.instance('DIV')
 | 
				
			||||
    _data.data.forEach(_item=>{
 | 
				
			||||
        var _div = jx.dom.get.instance('DIV')
 | 
				
			||||
        _div.innerHTML = _item.name
 | 
				
			||||
        _div.className = 'active'
 | 
				
			||||
        _div._data = _item.name
 | 
				
			||||
        //
 | 
				
			||||
        // bind the nodes to an event
 | 
				
			||||
        _div.onclick = function (){
 | 
				
			||||
            monitor.get(this._data)
 | 
				
			||||
        }
 | 
				
			||||
        nodes.appendChild(_div)
 | 
				
			||||
    })
 | 
				
			||||
 | 
				
			||||
    //
 | 
				
			||||
    // adding the nodes to 
 | 
				
			||||
    jx.dom.set.value('table.info',_data.about)
 | 
				
			||||
    jx.dom.set.value('tables','')
 | 
				
			||||
    jx.dom.append('tables',nodes)
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
monitor.render.data = function(_data){
 | 
				
			||||
    
 | 
				
			||||
    jx.dom.set.value('dashboard','' )
 | 
				
			||||
    _apex = []
 | 
				
			||||
    Object.keys(_data).forEach(_key=>{
 | 
				
			||||
        
 | 
				
			||||
        _board = jx.dom.get.instance('DIV')
 | 
				
			||||
        _item = _data[_key]
 | 
				
			||||
        
 | 
				
			||||
        _pane = jx.dom.get.instance('DIV')
 | 
				
			||||
        // _pane.className = 'border border-round'
 | 
				
			||||
        _item.forEach(_entry=>{
 | 
				
			||||
            //-- _entry is the context of a set of charts ...
 | 
				
			||||
            
 | 
				
			||||
            var _id = Object.keys(_entry)[0]
 | 
				
			||||
            _itemPane = jx.dom.get.instance('DIV')
 | 
				
			||||
            // _itemPane.innerHTML = '<h3>'+_id+'</h3>',_entry[_id]
 | 
				
			||||
            //
 | 
				
			||||
            // Making title ....
 | 
				
			||||
            var _titleDiv = $('<div class="title"><div class="large-text">:title</div><div class="small">:about</div></div>'.replace(/:title/,_id).replace(/:about/,_entry[_id].about))
 | 
				
			||||
            console.log(_titleDiv)
 | 
				
			||||
            $(_itemPane).append(_titleDiv)
 | 
				
			||||
 | 
				
			||||
            _itemPane.className = _entry[_id].css
 | 
				
			||||
            _entry[_id].charts.forEach(_chartItem=>{
 | 
				
			||||
                if (_chartItem.type == 'scalar') {
 | 
				
			||||
                    _chart = jx.dom.get.instance('DIV')
 | 
				
			||||
                    _chart.className = 'scalar-pane'
 | 
				
			||||
                    // _scalar = $(_options.chart) //-- html objets converted via jquery
 | 
				
			||||
                    // console.log()
 | 
				
			||||
                    _chart.innerHTML = _chartItem.html
 | 
				
			||||
                }else{
 | 
				
			||||
                    var _chart = jx.dom.get.instance('DIV')
 | 
				
			||||
                    _chart.className = 'chart '+_chartItem.type                   
 | 
				
			||||
                    _apex.push(new ApexCharts(_chart,_chartItem.options))
 | 
				
			||||
                    
 | 
				
			||||
                    
 | 
				
			||||
                }
 | 
				
			||||
                _itemPane.appendChild(_chart)
 | 
				
			||||
 | 
				
			||||
            })
 | 
				
			||||
            // _itemPane.className = 'board-' + _itemPane.childNodes.length
 | 
				
			||||
            // _itemPane.className = 'board-' + _itemPane.childNodes.length
 | 
				
			||||
            jx.dom.append('dashboard',_itemPane)    
 | 
				
			||||
        //     var _options = _item[_id]
 | 
				
			||||
            
 | 
				
			||||
        })
 | 
				
			||||
        
 | 
				
			||||
   
 | 
				
			||||
 | 
				
			||||
    })
 | 
				
			||||
    _apex.forEach(_chart=>{ _chart.render()})
 | 
				
			||||
}
 | 
				
			||||
monitor.get.scalar = function(_options){
 | 
				
			||||
   return $(_options.charts)
 | 
				
			||||
}
 | 
				
			||||
monitor.render.scalar = function (_data){
 | 
				
			||||
    var _pane = jx.dom.get.instance('DIV')
 | 
				
			||||
    // _pane.className = 'scalar-pane'
 | 
				
			||||
    
 | 
				
			||||
       
 | 
				
			||||
    var _nodes = []
 | 
				
			||||
    Object.keys(_data.values).forEach(_key=>{
 | 
				
			||||
        var _div = jx.dom.get.instance('DIV')
 | 
				
			||||
        var _value = jx.dom.get.instance('DIV')
 | 
				
			||||
        _value.innerHTML = _data.values[_key]
 | 
				
			||||
 | 
				
			||||
        var _label = jx.dom.get.instance('DIV')
 | 
				
			||||
        _label.innerHTML = _key
 | 
				
			||||
 | 
				
			||||
        // _div.className = 'scalar border-round border'
 | 
				
			||||
        _value.className  = 'value'
 | 
				
			||||
        _label.className = 'label'
 | 
				
			||||
        _div.appendChild(_value)
 | 
				
			||||
        _div.appendChild(_label)
 | 
				
			||||
       
 | 
				
			||||
        // _pane.appendChild(_div)
 | 
				
			||||
        _nodes.push(_div)
 | 
				
			||||
       
 | 
				
			||||
    })
 | 
				
			||||
    return _nodes
 | 
				
			||||
}
 | 
				
			||||
monitor.render.grid = function (_data){
 | 
				
			||||
    var pane = jx.dom.get.instance('TABLE')
 | 
				
			||||
    var header=jx.dom.get.instance('TR')
 | 
				
			||||
    pane.appendChild(header)
 | 
				
			||||
    columns = {}
 | 
				
			||||
    _data.forEach(_row=>{
 | 
				
			||||
        var rowItem = jx.dom.get.instance('TR')
 | 
				
			||||
        
 | 
				
			||||
        Object.keys(_row).forEach(_col =>{
 | 
				
			||||
            
 | 
				
			||||
            if(columns[_col] == null){
 | 
				
			||||
                columns[_col] = jx.dom.get.instance('TD')
 | 
				
			||||
                // columns[_col].className = 'bold border-bottom'
 | 
				
			||||
                columns[_col].innerHTML = _col
 | 
				
			||||
            }
 | 
				
			||||
            var _value = _row[_col]
 | 
				
			||||
            _div = jx.dom.get.instance('TD')
 | 
				
			||||
            _div.innerHTML = _value
 | 
				
			||||
            rowItem.appendChild(_div)
 | 
				
			||||
        })
 | 
				
			||||
        pane.appendChild(rowItem)
 | 
				
			||||
    })
 | 
				
			||||
    //
 | 
				
			||||
    //
 | 
				
			||||
    Object.keys(columns).forEach(_key=>{
 | 
				
			||||
        header.appendChild(columns[_key])
 | 
				
			||||
    })
 | 
				
			||||
    pane.className = 'data-grid border-round border'
 | 
				
			||||
    
 | 
				
			||||
    return pane
 | 
				
			||||
}
 | 
				
			||||
monitor.init = function (_context){
 | 
				
			||||
    
 | 
				
			||||
    var _uri = '/api/logger/init'
 | 
				
			||||
    if (_context ){
 | 
				
			||||
        monitor.context = _context
 | 
				
			||||
        _uri = _context + _uri
 | 
				
			||||
    }
 | 
				
			||||
 | 
				
			||||
    var http = HttpClient.instance()
 | 
				
			||||
    http.post(_uri,function (x){
 | 
				
			||||
        if (x.readyState == 4 && x.status == 200){
 | 
				
			||||
            tables = JSON.parse(x.responseText)
 | 
				
			||||
            monitor.render.table_list (tables)
 | 
				
			||||
        }else{
 | 
				
			||||
            //
 | 
				
			||||
            // gracefully handle this ....
 | 
				
			||||
        }
 | 
				
			||||
        
 | 
				
			||||
    })
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
monitor.get = function(table){
 | 
				
			||||
    var uri = monitor.context+'/api/logger/read'
 | 
				
			||||
    var http = HttpClient.instance()
 | 
				
			||||
    http.setData(JSON.stringify({'name':table}))
 | 
				
			||||
    http.setHeader('Content-Type','application/json')
 | 
				
			||||
    http.post(uri,function(x){
 | 
				
			||||
        if(x.status == 200 && x.readyState == 4){
 | 
				
			||||
            var _data = JSON.parse(x.responseText)
 | 
				
			||||
            
 | 
				
			||||
            monitor.render.data(_data)
 | 
				
			||||
        }
 | 
				
			||||
    })
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
if(!qcms){
 | 
				
			||||
    qcms = {}
 | 
				
			||||
}
 | 
				
			||||
 | 
				
			||||
var _dashboard = function(_context,_uri){
 | 
				
			||||
    this._context = _context ;
 | 
				
			||||
    this._uri = _uri
 | 
				
			||||
 | 
				
			||||
    this.get = function (_args){
 | 
				
			||||
        var _uri = this._uri ;
 | 
				
			||||
        if (this._context){
 | 
				
			||||
            _uri = this._context + _uri
 | 
				
			||||
        }
 | 
				
			||||
        var http = HttpClient.instance()
 | 
				
			||||
        http.setHeader('Content-Type','application/json')
 | 
				
			||||
        http.setData(JSON.stringify(_args))
 | 
				
			||||
        http.post(_uri,function(x){
 | 
				
			||||
            if(x.readyState == 4 && x.status == 200)
 | 
				
			||||
        })
 | 
				
			||||
    }
 | 
				
			||||
}
 | 
				
			||||
					Loading…
					
					
				
		Reference in new issue