@ -0,0 +1,373 @@
|
|||||||
|
.gridjs-footer button,
|
||||||
|
.gridjs-head button {
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0;
|
||||||
|
outline: none;
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-temp {
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-head {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 5px 1px;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-head:after {
|
||||||
|
clear: both;
|
||||||
|
content: "";
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-head:empty {
|
||||||
|
border: none;
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-container {
|
||||||
|
color: #000;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 2px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-footer {
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-color: #e5e7eb;
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .26);
|
||||||
|
display: block;
|
||||||
|
padding: 12px 24px;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 5
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-footer:empty {
|
||||||
|
border: none;
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
input.gridjs-input {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #d2d6dc;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.45;
|
||||||
|
outline: none;
|
||||||
|
padding: 10px 13px
|
||||||
|
}
|
||||||
|
|
||||||
|
input.gridjs-input:focus {
|
||||||
|
border-color: #9bc2f7;
|
||||||
|
box-shadow: 0 0 0 3px rgba(149, 189, 243, .5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination {
|
||||||
|
color: #3d4044
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination:after {
|
||||||
|
clear: both;
|
||||||
|
content: "";
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-summary {
|
||||||
|
float: left;
|
||||||
|
margin-top: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages {
|
||||||
|
float: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages button {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #d2d6dc;
|
||||||
|
border-right: none;
|
||||||
|
outline: none;
|
||||||
|
padding: 5px 14px;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages button:focus {
|
||||||
|
border-right: 1px solid #d2d6dc;
|
||||||
|
box-shadow: 0 0 0 2px rgba(149, 189, 243, .5);
|
||||||
|
margin-right: -1px;
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages button:hover {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
color: #3c4257;
|
||||||
|
outline: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages button:disabled,
|
||||||
|
.gridjs-pagination .gridjs-pages button:hover:disabled,
|
||||||
|
.gridjs-pagination .gridjs-pages button[disabled] {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #6b7280;
|
||||||
|
cursor: default
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages button.gridjs-spread {
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
cursor: default
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
font-weight: 700
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages button:last-child {
|
||||||
|
border-bottom-right-radius: 6px;
|
||||||
|
border-right: 1px solid #d2d6dc;
|
||||||
|
border-top-right-radius: 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages button:first-child {
|
||||||
|
border-bottom-left-radius: 6px;
|
||||||
|
border-top-left-radius: 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-pagination .gridjs-pages button:last-child:focus {
|
||||||
|
margin-right: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
button.gridjs-sort {
|
||||||
|
background-color: transparent;
|
||||||
|
background-position-x: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
float: right;
|
||||||
|
height: 24px;
|
||||||
|
margin: 0;
|
||||||
|
outline: none;
|
||||||
|
padding: 0;
|
||||||
|
width: 13px
|
||||||
|
}
|
||||||
|
|
||||||
|
button.gridjs-sort-neutral {
|
||||||
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDEuOTk4IiBoZWlnaHQ9IjQwMS45OTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMS45OTggNDAxLjk5OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTczLjA5MiAxNjQuNDUyaDI1NS44MTNjNC45NDkgMCA5LjIzMy0xLjgwNyAxMi44NDgtNS40MjQgMy42MTMtMy42MTYgNS40MjctNy44OTggNS40MjctMTIuODQ3cy0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2IDUuNDI0QzIxMC4yMzIgMS44MTIgMjA1Ljk1MSAwIDIwMC45OTkgMHMtOS4yMzMgMS44MTItMTIuODUgNS40MjRMNjAuMjQyIDEzMy4zMzFjLTMuNjE3IDMuNjE3LTUuNDI0IDcuOTAxLTUuNDI0IDEyLjg1IDAgNC45NDggMS44MDcgOS4yMzEgNS40MjQgMTIuODQ3IDMuNjIxIDMuNjE3IDcuOTAyIDUuNDI0IDEyLjg1IDUuNDI0ek0zMjguOTA1IDIzNy41NDlINzMuMDkyYy00Ljk1MiAwLTkuMjMzIDEuODA4LTEyLjg1IDUuNDIxLTMuNjE3IDMuNjE3LTUuNDI0IDcuODk4LTUuNDI0IDEyLjg0N3MxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDhMMTg4LjE0OSAzOTYuNTdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4bDEyNy45MDctMTI3LjkwNmMzLjYxMy0zLjYxNCA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDggMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDctMy42MTQtMy42MTYtNy44OTktNS40Mi0xMi44NDgtNS40MnoiLz48L3N2Zz4=");
|
||||||
|
background-position-y: center;
|
||||||
|
opacity: .3
|
||||||
|
}
|
||||||
|
|
||||||
|
button.gridjs-sort-asc {
|
||||||
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5Mi4zNjIgMjkyLjM2MSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI4Ni45MzUgMTk3LjI4NyAxNTkuMDI4IDY5LjM4MWMtMy42MTMtMy42MTctNy44OTUtNS40MjQtMTIuODQ3LTUuNDI0cy05LjIzMyAxLjgwNy0xMi44NSA1LjQyNEw1LjQyNCAxOTcuMjg3QzEuODA3IDIwMC45MDQgMCAyMDUuMTg2IDAgMjEwLjEzNHMxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDdjMy42MjEgMy42MTcgNy45MDIgNS40MjUgMTIuODUgNS40MjVoMjU1LjgxM2M0Ljk0OSAwIDkuMjMzLTEuODA4IDEyLjg0OC01LjQyNSAzLjYxMy0zLjYxMyA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDdzLTEuODE0LTkuMjMtNS40MjctMTIuODQ3eiIvPjwvc3ZnPg==");
|
||||||
|
background-position-y: 35%;
|
||||||
|
background-size: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
button.gridjs-sort-desc {
|
||||||
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5Mi4zNjIgMjkyLjM2MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI4Ni45MzUgNjkuMzc3Yy0zLjYxNC0zLjYxNy03Ljg5OC01LjQyNC0xMi44NDgtNS40MjRIMTguMjc0Yy00Ljk1MiAwLTkuMjMzIDEuODA3LTEyLjg1IDUuNDI0QzEuODA3IDcyLjk5OCAwIDc3LjI3OSAwIDgyLjIyOGMwIDQuOTQ4IDEuODA3IDkuMjI5IDUuNDI0IDEyLjg0N2wxMjcuOTA3IDEyNy45MDdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4TDI4Ni45MzUgOTUuMDc0YzMuNjEzLTMuNjE3IDUuNDI3LTcuODk4IDUuNDI3LTEyLjg0NyAwLTQuOTQ4LTEuODE0LTkuMjI5LTUuNDI3LTEyLjg1eiIvPjwvc3ZnPg==");
|
||||||
|
background-position-y: 65%;
|
||||||
|
background-size: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
button.gridjs-sort:focus {
|
||||||
|
outline: none
|
||||||
|
}
|
||||||
|
|
||||||
|
table.gridjs-table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
display: table;
|
||||||
|
margin: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0;
|
||||||
|
table-layout: fixed;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-tbody,
|
||||||
|
td.gridjs-td {
|
||||||
|
background-color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
td.gridjs-td {
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
box-sizing: content-box;
|
||||||
|
padding: 12px 24px
|
||||||
|
}
|
||||||
|
|
||||||
|
td.gridjs-td:first-child {
|
||||||
|
border-left: none
|
||||||
|
}
|
||||||
|
|
||||||
|
td.gridjs-td:last-child {
|
||||||
|
border-right: none
|
||||||
|
}
|
||||||
|
|
||||||
|
td.gridjs-message {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
th.gridjs-th {
|
||||||
|
background-color: #f9fafb;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-top: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #6b7280;
|
||||||
|
outline: none;
|
||||||
|
padding: 14px 24px;
|
||||||
|
position: relative;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
white-space: nowrap
|
||||||
|
}
|
||||||
|
|
||||||
|
th.gridjs-th .gridjs-th-content {
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
th.gridjs-th-sort {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
th.gridjs-th-sort .gridjs-th-content {
|
||||||
|
width: calc(100% - 15px)
|
||||||
|
}
|
||||||
|
|
||||||
|
th.gridjs-th-sort:focus,
|
||||||
|
th.gridjs-th-sort:hover {
|
||||||
|
background-color: #e5e7eb
|
||||||
|
}
|
||||||
|
|
||||||
|
th.gridjs-th-fixed {
|
||||||
|
box-shadow: 0 1px 0 0 #e5e7eb;
|
||||||
|
position: sticky
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (-moz-appearance:none) {
|
||||||
|
th.gridjs-th-fixed {
|
||||||
|
box-shadow: 0 0 0 1px #e5e7eb
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th.gridjs-th:first-child {
|
||||||
|
border-left: none
|
||||||
|
}
|
||||||
|
|
||||||
|
th.gridjs-th:last-child {
|
||||||
|
border-right: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-tr {
|
||||||
|
border: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-tr-selected td {
|
||||||
|
background-color: #ebf5ff
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-tr:last-child td {
|
||||||
|
border-bottom: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs *,
|
||||||
|
.gridjs :after,
|
||||||
|
.gridjs :before {
|
||||||
|
box-sizing: border-box
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-wrapper {
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
border-color: #e5e7eb;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
border-top-width: 1px;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .26);
|
||||||
|
display: block;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-wrapper:nth-last-of-type(2) {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-radius: 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-search {
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-search-input {
|
||||||
|
width: 250px
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-loading-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
opacity: .5;
|
||||||
|
z-index: 10
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-loading-bar,
|
||||||
|
.gridjs-loading-bar:after {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-loading-bar:after {
|
||||||
|
animation: shimmer 2s infinite;
|
||||||
|
background-image: linear-gradient(90deg, hsla(0, 0%, 80%, 0), hsla(0, 0%, 80%, .2) 20%, hsla(0, 0%, 80%, .5) 60%, hsla(0, 0%, 80%, 0));
|
||||||
|
content: "";
|
||||||
|
transform: translateX(-100%)
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
to {
|
||||||
|
transform: translateX(100%)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-td .gridjs-checkbox {
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
margin: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-resizable {
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridjs-resizable:hover {
|
||||||
|
background-color: #9bc2f7;
|
||||||
|
cursor: ew-resize
|
||||||
|
}
|
@ -0,0 +1,92 @@
|
|||||||
|
|
||||||
|
.studio-pane {
|
||||||
|
height:87vh;
|
||||||
|
display:grid; grid-template-rows: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.studio {
|
||||||
|
|
||||||
|
display:grid;
|
||||||
|
grid-template-rows: 50px 200px auto 48px; gap:8px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.studio-expand {
|
||||||
|
display:grid;
|
||||||
|
grid-template-rows: 50px calc(100% - 55px); gap:8px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.studio-expand .status {display:none}
|
||||||
|
.studio-expand textarea {display:none}
|
||||||
|
.studio-expand .output {height:100%;}
|
||||||
|
|
||||||
|
/* .studio .input-frame {
|
||||||
|
display:grid;
|
||||||
|
grid-template-rows: 64px auto; gap:4px;
|
||||||
|
height:250px;
|
||||||
|
|
||||||
|
|
||||||
|
} */
|
||||||
|
.studio textarea {
|
||||||
|
outline: 0;
|
||||||
|
border-color:transparent;
|
||||||
|
font-family: courier;
|
||||||
|
padding:8px; line-height: 1.5; background-color: #f3f3f3;
|
||||||
|
/* height:350px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio .control {
|
||||||
|
background-color: #F3F3F3;
|
||||||
|
padding:4px;
|
||||||
|
display:grid; grid-template-columns: 50px auto 40%; gap:8px; align-items: center;
|
||||||
|
}
|
||||||
|
.studio .control .border-left {border-left:1px solid #FFFFFF;}
|
||||||
|
|
||||||
|
.studio .control img {width:30px; width:30px;}
|
||||||
|
.studio .output {
|
||||||
|
|
||||||
|
display:block;
|
||||||
|
height: calc(100% - 48px) ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {font-size: 12px;}
|
||||||
|
.shadow {
|
||||||
|
box-shadow: 4px 2px 2px 2px #d3d3d3;
|
||||||
|
}
|
||||||
|
.status { font-size:11px; text-justify: right; padding:8px;
|
||||||
|
text-align: right;
|
||||||
|
margin-top:20px;
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text]{padding:8px; outline: 0; border:4px solid transparent;
|
||||||
|
margin:8px;
|
||||||
|
background-color: #f3f3f3;}
|
||||||
|
input[type=text]:focus {
|
||||||
|
border-left-color: #4682B4;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* .table-header { height:20px;} */
|
||||||
|
.cell{
|
||||||
|
color:maroon;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size:13px;
|
||||||
|
overflow:hidden;
|
||||||
|
height:20px;
|
||||||
|
}
|
||||||
|
.main .menu {display:none}
|
||||||
|
.main .content{grid-row:2; grid-column:1}
|
||||||
|
.main .pane {grid-row:2; grid-column:2}
|
||||||
|
.main .footer{grid-row:4; grid-column:1;}
|
||||||
|
/**
|
||||||
|
* syncfusion spreadsheet ...
|
||||||
|
*/
|
||||||
|
|
After Width: | Height: | Size: 9.2 KiB |
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 9.1 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 4.8 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 7.1 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 9.7 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,332 @@
|
|||||||
|
|
||||||
|
|
||||||
|
ej.base.registerLicense('ORg4AjUWIQA/Gnt2XFhhQlJHfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTH5VdkxhWnpWcHZcTmhfWkZ/')
|
||||||
|
var studio = {_context:''}
|
||||||
|
studio.defaults = {
|
||||||
|
'duckdb':'SELECT * \nFROM INFORMATION_SCHEMA.TABLES',
|
||||||
|
'sqlite':'SELECT * \nFROM sqlite_master',
|
||||||
|
'sqlite3':'SELECT * \nFROM sqlite_master',
|
||||||
|
'bigquery':'SELECT * \nFROM <dataset>.INFORMATION_SCHEMA.COLUMNS \nLIMIT 10',
|
||||||
|
'postgresql':'SELECT *\nFROM INFORMATION_SCHEMA.COLUMNS LIMIT 10'
|
||||||
|
}
|
||||||
|
studio.init = function (_context){
|
||||||
|
studio._context = _context
|
||||||
|
}
|
||||||
|
studio.dbe = {}
|
||||||
|
studio.dbe.get = function (){
|
||||||
|
var uri = [studio._context,'api/dbe/get']
|
||||||
|
uri = uri.join('/')
|
||||||
|
var http = HttpClient.instance()
|
||||||
|
http.get(uri,function(x){
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
studio.dbe.providers = function (_render){
|
||||||
|
var uri = [studio._context,'api/dbe/providers']
|
||||||
|
uri = uri.join('/')
|
||||||
|
var http = HttpClient.instance()
|
||||||
|
http.get(uri,function(x){
|
||||||
|
var _data = JSON.parse(x.responseText)
|
||||||
|
if (_render){
|
||||||
|
_render(_data)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
studio.dbe.apply = function (label,_query){
|
||||||
|
var uri = [studio._context,'api/dbe/apply']
|
||||||
|
uri = uri.join('/')
|
||||||
|
|
||||||
|
var http = HttpClient.instance()
|
||||||
|
_data = {'label':label,'query':_query}
|
||||||
|
http.setHeader('Content-Type','application/json')
|
||||||
|
http.setData (JSON.stringify(_data))
|
||||||
|
http.get(uri,function(x){
|
||||||
|
if(x.status == 200 && x.readyState == 4){
|
||||||
|
_r = JSON.stringify(x.responseText)
|
||||||
|
}else{
|
||||||
|
alert(' error round '+x.responseText)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
studio.grid = function (){
|
||||||
|
this.columns = function (_data){
|
||||||
|
var _columns = []
|
||||||
|
if(_data.columns){
|
||||||
|
_data.columns.forEach(_name=>{
|
||||||
|
_columns.push({title:_name})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return _columns
|
||||||
|
}
|
||||||
|
this.dataTable = function (_id,_data){
|
||||||
|
$(_id).html('<table class="display"></table>')
|
||||||
|
$(_id.replace(/output/,'status')).hide()
|
||||||
|
|
||||||
|
_id = _id + ' table'
|
||||||
|
var _columns = []
|
||||||
|
if (_data.columns ){
|
||||||
|
_data.columns.forEach(_name=>{
|
||||||
|
_columns.push({title:_name})
|
||||||
|
})
|
||||||
|
var _args = {'data':_data.data,'columns':_columns}
|
||||||
|
// _args.layout = {topStart:{}}
|
||||||
|
_args.buttons = ['excel','pdf']
|
||||||
|
|
||||||
|
}else{
|
||||||
|
_data = {'data':[],columns:[]}
|
||||||
|
}
|
||||||
|
_args.dom = 'rtip'
|
||||||
|
_args.scrollCollapse = true
|
||||||
|
_args.scrollY = '400px'
|
||||||
|
var _grid = new DataTable(_id,_args)
|
||||||
|
return _grid;
|
||||||
|
}
|
||||||
|
this.gridjs = function (_id, _data){
|
||||||
|
$(_id.replace(/output/,'status')).hide()
|
||||||
|
var grid = new gridjs.Grid({
|
||||||
|
// columns:_data.columns,
|
||||||
|
data:_data.data , //_data.data,
|
||||||
|
columns:_data.columns,
|
||||||
|
fixedHeader:true, resizable:true,
|
||||||
|
search:false,
|
||||||
|
|
||||||
|
style:{
|
||||||
|
th:{height:'20px',overflow:'hidden','text-overflow':'ellipsis'},
|
||||||
|
td :{height:'20px',padding:'4px',overflow:'hidden','text-overflow':'ellipsis'},
|
||||||
|
table:{overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap',border:'1px solid transparent'}
|
||||||
|
},
|
||||||
|
sort:true,
|
||||||
|
pagination:true,
|
||||||
|
height:'405px'})
|
||||||
|
if ($(_id).is(':empty')){
|
||||||
|
grid.render($(_id)[0])
|
||||||
|
}
|
||||||
|
grid.forceRender($(_id)[0])
|
||||||
|
}
|
||||||
|
this.spreadsheet = function (_id, _data){
|
||||||
|
var _div = $(_id)[0]
|
||||||
|
var _columns = this.columns(_data)
|
||||||
|
var rows = []
|
||||||
|
_data.data.forEach(row=>{
|
||||||
|
var _record = {} //-- formatted appropriately
|
||||||
|
row.forEach((value,index)=>{
|
||||||
|
_col = _data.columns[index].name
|
||||||
|
_record[_col] = value
|
||||||
|
})
|
||||||
|
rows.push(_record)
|
||||||
|
})
|
||||||
|
|
||||||
|
var _spreadsheet = jspreadsheet(_div, {
|
||||||
|
tabs:true,toolbar:false,
|
||||||
|
style:['text-overflow: ellipsis; white-space: nowrap;'],
|
||||||
|
worksheets: [{
|
||||||
|
media:[{type:'chart',options:{}}],
|
||||||
|
data: _data.data,
|
||||||
|
minDimensions:[20,15],
|
||||||
|
tableOverflow:true,
|
||||||
|
tableHeight: '400px',
|
||||||
|
tableWidth:$(_id).width(),//minSpareCols:'auto',
|
||||||
|
columns:_columns,
|
||||||
|
workbookname: _id
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
_div.spreadsheet = _spreadsheet
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.syncfusion = function(_id,_data){
|
||||||
|
|
||||||
|
var rows = []
|
||||||
|
|
||||||
|
_data.data.forEach(row=>{
|
||||||
|
var _record = {} //-- formatted appropriately
|
||||||
|
row.forEach((value,index)=>{
|
||||||
|
_col = _data.columns[index]
|
||||||
|
_record[_col] = value
|
||||||
|
})
|
||||||
|
rows.push(_record)
|
||||||
|
})
|
||||||
|
|
||||||
|
var spreadsheet = new ej.spreadsheet.Spreadsheet();
|
||||||
|
// spreadsheet.allowSave = true
|
||||||
|
// spreadsheet.saveUrl = 'api/io/write'
|
||||||
|
spreadsheet.sheets = [
|
||||||
|
{name:_id.replace(/[#,.]/g,' '),
|
||||||
|
ranges:[{dataSource:rows}],
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
spreadsheet.appendTo(_id)
|
||||||
|
$(_id)[0].spreadsheet = spreadsheet
|
||||||
|
// console.log([' **** ',(_id+' .e-input-group')])
|
||||||
|
// $(_id+' .e-input-group').remove()
|
||||||
|
spreadsheet.refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
studio.frame = function (_args){
|
||||||
|
this._args = _args
|
||||||
|
//
|
||||||
|
// Initializing by having an input and ouput pane
|
||||||
|
// Load the template from disk
|
||||||
|
this.init = function (){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render the template
|
||||||
|
this.read = function(_label,_query,_compute){
|
||||||
|
var uri = [studio._context,'api/dbe/apply']
|
||||||
|
uri = uri.join('/')
|
||||||
|
// var _compute = this.compute
|
||||||
|
// $('.'+_label+' .output').html('<i class="fa-solid fa-cog fa-spin"></i> Please wait ...')
|
||||||
|
var http = HttpClient.instance()
|
||||||
|
|
||||||
|
_data = {'label':_label,'query':_query}
|
||||||
|
http.setHeader('Content-Type','application/json')
|
||||||
|
http.setData (JSON.stringify(_data))
|
||||||
|
|
||||||
|
http.post(uri,function(x){
|
||||||
|
if(x.status == 200 && x.readyState == 4){
|
||||||
|
_r = JSON.parse(x.responseText)
|
||||||
|
sessionStorage._data = x.responseText
|
||||||
|
// console.log(_r)
|
||||||
|
_compute(_label,_r)
|
||||||
|
|
||||||
|
}else{
|
||||||
|
alert(' error round '+x.responseText)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
this.render = function (){
|
||||||
|
var _args = this._args
|
||||||
|
|
||||||
|
var _icon = $('<img>').attr('src',this._args.icon)
|
||||||
|
var _label = $('<div class="bold"></div>').html(this._args.label+'<div style="font-weight:lighter; font-size:11px;">'+this._args.provider+'</div>')
|
||||||
|
read = this.read
|
||||||
|
_compute = this.compute
|
||||||
|
_xbutton = $('<div class="border-left"><div class="active apply" align="center"><i class="fa-solid fa-play"></i></div></div>').on('click',function (){
|
||||||
|
|
||||||
|
|
||||||
|
var _id = '.code.'+_args.label.trim()
|
||||||
|
_query = $(_id).val()
|
||||||
|
|
||||||
|
if (_query.length != ''){
|
||||||
|
var _data = read(_args.label,_query,_compute)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
var _imgSrc = "api/disk/read?uri=www/html/_assets/images/python.png"
|
||||||
|
_imgSrc = studio._context + _imgSrc
|
||||||
|
_codeButton = ('<div class="border-left"><div class="active" title="show in code"><i class="fa-solid fa-code"></i></div></div>')
|
||||||
|
_wizButton = $('<div class="border-left"><div class="active" title="New Connection"><i class="fa-solid fa-plug-circle-plus" style="color:#4682B4;"></i></div></div>')
|
||||||
|
_wizButton.on('click',function(){
|
||||||
|
dialog.show({uri:'www/html/wizard.html',title:'Create New Connection',context:studio._context})
|
||||||
|
|
||||||
|
})
|
||||||
|
_expandButton = $('<div class="border-left"><div class="active expand"><i class="fa-solid fa-angle-up" title="Expand spreadsheet"></div></div></div>')
|
||||||
|
$(_expandButton).attr('label',_args.label)
|
||||||
|
$(_expandButton).on('click',function(){
|
||||||
|
var _id = '.studio.'+$(this).attr('label') // + ' .expand'
|
||||||
|
if ($(_id).html().match(/fa-angle-up/)){
|
||||||
|
_icon = '<i class="fa-solid fa-angle-down"></i>'
|
||||||
|
_title = "Collapse Spreadsheet"
|
||||||
|
$(_id).addClass('studio-expand')
|
||||||
|
}else{
|
||||||
|
_icon = '<i class="fa-solid fa-angle-up"></i>'
|
||||||
|
$(_id).removeClass('studio-expand')
|
||||||
|
_title = "Expand Spreadsheet"
|
||||||
|
|
||||||
|
}
|
||||||
|
$(_id+' .expand').empty().html(_icon).attr('title',_title)
|
||||||
|
var spreadsheet = $(_id+' .output')[0].spreadsheet
|
||||||
|
if (spreadsheet != null){
|
||||||
|
spreadsheet.refresh()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var _buttons = $('<div style="display:grid; grid-template-columns: auto repeat(4,64px); gap:4px;" align="center"><div> </div></div>')
|
||||||
|
_buttons.append(_codeButton,_wizButton,_xbutton,_expandButton)
|
||||||
|
|
||||||
|
// _frame = $('<div class="studio :label"></div>'.replace(/:label/,this._args.label))
|
||||||
|
var _frame = $('<div class="studio"></div>') .addClass(this._args.label)
|
||||||
|
//
|
||||||
|
// Input frame has 2 components (control, textarea)
|
||||||
|
_ctrl = $('<div class="border control" align="left"></div>')
|
||||||
|
_ctrl.append(_icon,_label,_buttons) //.html(this._args.label))
|
||||||
|
_textarea = $('<textarea class="code"></textarea>').addClass(this._args.label).attr('label',_args.label)
|
||||||
|
if (studio.defaults[_args.provider] != null){
|
||||||
|
_query = studio.defaults[_args.provider]
|
||||||
|
$(_textarea).val(_query)
|
||||||
|
}
|
||||||
|
|
||||||
|
$(_textarea).on('keydown',function (_e){
|
||||||
|
if (_e.shiftKey && (_e.keyCode == 13 || _e.key == 'Enter')){
|
||||||
|
var _id = $(this).attr('label')
|
||||||
|
_id = `.${_id} .apply`
|
||||||
|
$(_id).click()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// _inputframe = $('<div class="input-frame"><div class="ctrl border-round border">.::</div> <textarea class="code"></textarea></div>')
|
||||||
|
// _inputframe = $('<div class="input-frame"></div>')
|
||||||
|
// _inputframe.append(_ctrl,_textarea)
|
||||||
|
// _outputframe = $('<div class="" style="display:grid; grid-template-rows:auto 32px; gap:4px;"><div class="output border-round" ></div><div class="status border"></div></div>')
|
||||||
|
_outputframe = $('<div class="output" ></div><div class="status"></div>')
|
||||||
|
|
||||||
|
|
||||||
|
// $(_frame).append(_inputframe, _outputframe)
|
||||||
|
$(_frame).append(_ctrl,_textarea,_outputframe)
|
||||||
|
$('.studio-pane').append(_frame)
|
||||||
|
|
||||||
|
this.compute()
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.compute = function (_label,_data){
|
||||||
|
_label = (_label != null)?_label: this._args.label
|
||||||
|
_id = '.'+_label + ' .output'
|
||||||
|
_data = (_data == null)? {'data':[],'columns':[]}: _data ;
|
||||||
|
if (_data.data == null){
|
||||||
|
_data = {data:[],columns:[]} //{'columns':[],'data':[[]]}
|
||||||
|
}
|
||||||
|
|
||||||
|
$(_id).empty()
|
||||||
|
_gHandler = new studio.grid()
|
||||||
|
_gHandler.syncfusion(_id,_data)
|
||||||
|
_rows = (_data.data)?_data.data.length : 0
|
||||||
|
$('.'+_label + ' .status').html(_rows + ' rows')
|
||||||
|
// $(_id).html('<table class="display"></table>')
|
||||||
|
// _id = _id + ' table'
|
||||||
|
// var _columns = []
|
||||||
|
// _args = {}
|
||||||
|
// if (_data.columns ){
|
||||||
|
// _data.columns.forEach(_name=>{
|
||||||
|
// _columns.push({title:_name})
|
||||||
|
// })
|
||||||
|
// var _args = {'data':_data.data,'columns':_columns}
|
||||||
|
// // _args.layout = {topStart:{}}
|
||||||
|
// _args.buttons = ['excel','pdf']
|
||||||
|
|
||||||
|
// }else{
|
||||||
|
// _data = {'data':[],columns:[]}
|
||||||
|
// }
|
||||||
|
// _args.dom = 'rtip'
|
||||||
|
// _args.scrollCollapse = true
|
||||||
|
// _args.scrollY = '300px'
|
||||||
|
// new DataTable(_id,_args)
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,712 @@
|
|||||||
|
:root {
|
||||||
|
--jss-border-color:#000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_container {
|
||||||
|
display:inline-block;
|
||||||
|
padding-right:2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overscroll-behavior: contain;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen {
|
||||||
|
position:fixed !important;
|
||||||
|
top:0px;
|
||||||
|
left:0px;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
z-index:21;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
background-color:#ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen .jtabs-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen .jss_content {
|
||||||
|
overflow:auto;
|
||||||
|
width: 100% !important;
|
||||||
|
height:100%;
|
||||||
|
max-height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen .jss_container {
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_content {
|
||||||
|
display:inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-right:3px;
|
||||||
|
padding-bottom:3px;
|
||||||
|
position:relative;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #666 transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (-moz-appearance:none) {
|
||||||
|
.jss_content { padding-right:10px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_content::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_content::-webkit-scrollbar-track {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_content::-webkit-scrollbar-thumb {
|
||||||
|
background: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet {
|
||||||
|
border-collapse: separate;
|
||||||
|
table-layout: fixed;
|
||||||
|
white-space: nowrap;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 0px;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 0;
|
||||||
|
|
||||||
|
border-top: 1px solid transparent;
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > thead > tr > td
|
||||||
|
{
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
padding: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index:2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > thead > tr > td.dragging
|
||||||
|
{
|
||||||
|
opacity:0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > thead > tr > td.selected
|
||||||
|
{
|
||||||
|
background-color:#dcdcdc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > thead > tr > td.arrow-up
|
||||||
|
{
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
background-position:center right 5px;
|
||||||
|
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 14l5-5 5 5H7z' fill='gray'/%3E%3C/svg%3E");
|
||||||
|
text-decoration:underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > thead > tr > td.arrow-down
|
||||||
|
{
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
background-position:center right 5px;
|
||||||
|
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
|
||||||
|
text-decoration:underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td:first-child
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
background-color:#f3f3f3;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody.resizable > tr > td:first-child::before
|
||||||
|
{
|
||||||
|
content:'\00a0';
|
||||||
|
width:100%;
|
||||||
|
height:3px;
|
||||||
|
position:absolute;
|
||||||
|
bottom:0px;
|
||||||
|
left:0px;
|
||||||
|
cursor:row-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody.draggable > tr > td:first-child::after
|
||||||
|
{
|
||||||
|
content:'\00a0';
|
||||||
|
width:3px;
|
||||||
|
height:100%;
|
||||||
|
position:absolute;
|
||||||
|
top:0px;
|
||||||
|
right:0px;
|
||||||
|
cursor:move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr.dragging > td
|
||||||
|
{
|
||||||
|
background-color:#eee;
|
||||||
|
opacity:0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td
|
||||||
|
{
|
||||||
|
border-top:1px solid #ccc;
|
||||||
|
border-left:1px solid #ccc;
|
||||||
|
border-right:1px solid transparent;
|
||||||
|
border-bottom:1px solid transparent;
|
||||||
|
padding:4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height:1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_overflow > tbody > tr > td {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td:last-child
|
||||||
|
{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td > img
|
||||||
|
{
|
||||||
|
display:inline-block;
|
||||||
|
max-width:100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td.readonly
|
||||||
|
{
|
||||||
|
color:rgba(0,0,0,0.3)
|
||||||
|
}
|
||||||
|
.jss_worksheet > tbody > tr.selected > td:first-child
|
||||||
|
{
|
||||||
|
background-color:#dcdcdc;
|
||||||
|
}
|
||||||
|
.jss_worksheet > tbody > tr > td > select,
|
||||||
|
.jss_worksheet > tbody > tr > td > input,
|
||||||
|
.jss_worksheet > tbody > tr > td > textarea
|
||||||
|
{
|
||||||
|
border:0px;
|
||||||
|
border-radius:0px;
|
||||||
|
outline:0px;
|
||||||
|
width:100%;
|
||||||
|
margin:0px;
|
||||||
|
padding:0px;
|
||||||
|
padding-right:2px;
|
||||||
|
background-color:transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td > textarea
|
||||||
|
{
|
||||||
|
resize: none;
|
||||||
|
padding-top:6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td > input[type=checkbox]
|
||||||
|
{
|
||||||
|
width:12px;
|
||||||
|
margin-top:2px;
|
||||||
|
}
|
||||||
|
.jss_worksheet > tbody > tr > td > input[type=radio]
|
||||||
|
{
|
||||||
|
width:12px;
|
||||||
|
margin-top:2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td > select
|
||||||
|
{
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position-x: 100%;
|
||||||
|
background-position-y: 40%;
|
||||||
|
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td.jss_dropdown
|
||||||
|
{
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position:top 50% right 5px;
|
||||||
|
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E");
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow-x:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td.jss_dropdown.jss_comments
|
||||||
|
{
|
||||||
|
background:url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E") top 50% right 5px no-repeat, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=') top right no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td > .color
|
||||||
|
{
|
||||||
|
width:90%;
|
||||||
|
height:10px;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td > a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td.highlight > a {
|
||||||
|
color: blue;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tfoot > tr > td
|
||||||
|
{
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
padding: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .highlight {
|
||||||
|
background-color:rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .highlight-top {
|
||||||
|
border-top:1px solid #000;
|
||||||
|
box-shadow: 0px -1px #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .highlight-left {
|
||||||
|
border-left:1px solid #000;
|
||||||
|
box-shadow: -1px 0px #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .highlight-right {
|
||||||
|
border-right:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .highlight-bottom {
|
||||||
|
border-bottom:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .highlight-top.highlight-left {
|
||||||
|
box-shadow: -1px -1px #ccc;
|
||||||
|
-webkit-box-shadow: -1px -1px #ccc;
|
||||||
|
-moz-box-shadow: -1px -1px #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .highlight-selected
|
||||||
|
{
|
||||||
|
background-color:rgba(0,0,0,0.0);
|
||||||
|
}
|
||||||
|
.jss_worksheet .selection
|
||||||
|
{
|
||||||
|
background-color:rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
.jss_worksheet .selection-left
|
||||||
|
{
|
||||||
|
border-left:1px dotted #000;
|
||||||
|
}
|
||||||
|
.jss_worksheet .selection-right
|
||||||
|
{
|
||||||
|
border-right:1px dotted #000;
|
||||||
|
}
|
||||||
|
.jss_worksheet .selection-top
|
||||||
|
{
|
||||||
|
border-top:1px dotted #000;
|
||||||
|
}
|
||||||
|
.jss_worksheet .selection-bottom
|
||||||
|
{
|
||||||
|
border-bottom:1px dotted #000;
|
||||||
|
}
|
||||||
|
.jss_corner
|
||||||
|
{
|
||||||
|
position:absolute;
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
border: 1px solid rgb(255, 255, 255);
|
||||||
|
top:-2000px;
|
||||||
|
left:-2000px;
|
||||||
|
cursor:crosshair;
|
||||||
|
box-sizing: initial;
|
||||||
|
z-index:20;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .editor
|
||||||
|
{
|
||||||
|
outline:0px solid transparent;
|
||||||
|
overflow:visible;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align:left;
|
||||||
|
padding:0px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow:visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .editor > input
|
||||||
|
{
|
||||||
|
padding-left:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .editor .jupload
|
||||||
|
{
|
||||||
|
position:fixed;
|
||||||
|
top:100%;
|
||||||
|
z-index:40;
|
||||||
|
user-select:none;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: .875rem;
|
||||||
|
letter-spacing: .2px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
-webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
|
||||||
|
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
|
||||||
|
padding:10px;
|
||||||
|
background-color:#fff;
|
||||||
|
width:300px;
|
||||||
|
min-height:225px;
|
||||||
|
margin-top:2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .editor .jupload img
|
||||||
|
{
|
||||||
|
width:100%;
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .editor .jss_richtext
|
||||||
|
{
|
||||||
|
position:fixed;
|
||||||
|
top:100%;
|
||||||
|
z-index:40;
|
||||||
|
user-select:none;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: .875rem;
|
||||||
|
letter-spacing: .2px;
|
||||||
|
-webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
|
||||||
|
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
|
||||||
|
padding:10px;
|
||||||
|
background-color:#fff;
|
||||||
|
width:358px;
|
||||||
|
margin-top:2px;
|
||||||
|
text-align:left;
|
||||||
|
white-space: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .editor .jclose:after
|
||||||
|
{
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
right:0;
|
||||||
|
margin:10px;
|
||||||
|
content:'close';
|
||||||
|
font-family:'Material icons';
|
||||||
|
font-size:24px;
|
||||||
|
width:24px;
|
||||||
|
height:24px;
|
||||||
|
line-height:24px;
|
||||||
|
cursor:pointer;
|
||||||
|
text-shadow: 0px 0px 5px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet, .jss_worksheet td, .jss_corner
|
||||||
|
{
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
-khtml-user-drag: none;
|
||||||
|
-moz-user-drag: none;
|
||||||
|
-o-user-drag: none;
|
||||||
|
user-drag: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_textarea
|
||||||
|
{
|
||||||
|
position:absolute;
|
||||||
|
top:-999px;
|
||||||
|
left:-999px;
|
||||||
|
width:1px;
|
||||||
|
height:1px;
|
||||||
|
}
|
||||||
|
.jss_worksheet .dragline
|
||||||
|
{
|
||||||
|
position:absolute;
|
||||||
|
}
|
||||||
|
.jss_worksheet .dragline div
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
top:-6px;
|
||||||
|
height:5px;
|
||||||
|
width:22px;
|
||||||
|
}
|
||||||
|
.jss_worksheet .dragline div:hover
|
||||||
|
{
|
||||||
|
cursor:move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .onDrag
|
||||||
|
{
|
||||||
|
background-color:rgba(0,0,0,0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .error
|
||||||
|
{
|
||||||
|
border:1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet thead td.resizing
|
||||||
|
{
|
||||||
|
border-right-style:dotted !important;
|
||||||
|
border-right-color:red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet tbody tr.resizing > td
|
||||||
|
{
|
||||||
|
border-bottom-style:dotted !important;
|
||||||
|
border-bottom-color:red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet tbody td.resizing
|
||||||
|
{
|
||||||
|
border-right-style:dotted !important;
|
||||||
|
border-right-color:red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .jdropdown-header
|
||||||
|
{
|
||||||
|
border:0px !important;
|
||||||
|
outline:none !important;
|
||||||
|
width:100% !important;
|
||||||
|
height:100% !important;
|
||||||
|
padding:0px !important;
|
||||||
|
padding-left:8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .jdropdown-container
|
||||||
|
{
|
||||||
|
margin-top:1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .jdropdown-container-header {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .jdropdown-picker
|
||||||
|
{
|
||||||
|
border:0px !important;
|
||||||
|
padding:0px !important;
|
||||||
|
width:inherit;
|
||||||
|
height:inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .jss_comments
|
||||||
|
{
|
||||||
|
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .sp-replacer
|
||||||
|
{
|
||||||
|
margin: 2px;
|
||||||
|
border:0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > thead > tr.jss_filter > td > input
|
||||||
|
{
|
||||||
|
border:0px;
|
||||||
|
width:100%;
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_about {
|
||||||
|
float: right;
|
||||||
|
font-size: 0.7em;
|
||||||
|
padding: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.jss_about a {
|
||||||
|
color: #ccc;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_about img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_filter
|
||||||
|
{
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
margin-bottom:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_filter > div
|
||||||
|
{
|
||||||
|
padding:8px;
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_pagination
|
||||||
|
{
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_pagination > div
|
||||||
|
{
|
||||||
|
display:flex;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_pagination > div:last-child
|
||||||
|
{
|
||||||
|
padding-right:10px;
|
||||||
|
padding-top:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_pagination > div > div
|
||||||
|
{
|
||||||
|
text-align:center;
|
||||||
|
width:36px;
|
||||||
|
height:36px;
|
||||||
|
line-height:34px;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left:2px;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_page
|
||||||
|
{
|
||||||
|
font-size:0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_page_selected
|
||||||
|
{
|
||||||
|
font-weight:bold;
|
||||||
|
background-color:#f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_toolbar
|
||||||
|
{
|
||||||
|
display:flex;
|
||||||
|
background-color:#f3f3f3;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
padding:4px;
|
||||||
|
margin:0px 2px 4px 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_toolbar:empty
|
||||||
|
{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .dragging-left
|
||||||
|
{
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position:top 50% left 0px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 7l-5 5 5 5V7z'/%3E%3Cpath fill='none' d='M24 0v24H0V0h24z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .dragging-right
|
||||||
|
{
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position:top 50% right 0px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath fill='none' d='M0 24V0h24v24H0z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_hidden_index > tbody > tr > td:first-child,
|
||||||
|
.jss_hidden_index > thead > tr > td:first-child,
|
||||||
|
.jss_hidden_index > tfoot > tr > td:first-child,
|
||||||
|
.jss_hidden_index > colgroup > col:first-child
|
||||||
|
{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.jss_worksheet .jrating {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.jss_worksheet .jrating > div {
|
||||||
|
zoom: 0.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .copying-top {
|
||||||
|
border-top:1px dashed #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .copying-left {
|
||||||
|
border-left:1px dashed #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .copying-right {
|
||||||
|
border-right:1px dashed #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .copying-bottom {
|
||||||
|
border-bottom:1px dashed #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet .jss_column_filter {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top 50% right 5px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray' width='18px' height='18px'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0px;
|
||||||
|
padding-left: 6px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet thead .jss_freezed, .jss_worksheet tfoot .jss_freezed {
|
||||||
|
left: 0px;
|
||||||
|
z-index: 3 !important;
|
||||||
|
box-shadow: 2px 0px 2px 0.2px #ccc !important;
|
||||||
|
-webkit-box-shadow: 2px 0px 2px 0.2px #ccc !important;
|
||||||
|
-moz-box-shadow: 2px 0px 2px 0.2px #ccc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet tbody .jss_freezed {
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 1px 1px 1px 1px #ccc !important;
|
||||||
|
-webkit-box-shadow: 2px 4px 4px 0.1px #ccc !important;
|
||||||
|
-moz-box-shadow: 2px 4px 4px 0.1px #ccc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jss_worksheet > tbody > tr > td.readonly > input[type=checkbox],
|
||||||
|
.jss_worksheet > tbody > tr > td.readonly > input[type=radio] {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
@ -0,0 +1,20 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-transform: none;
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
word-wrap: normal;
|
||||||
|
direction: ltr;
|
||||||
|
}
|
@ -0,0 +1,459 @@
|
|||||||
|
.e-icon-collapsible::before {
|
||||||
|
content: "\e913";
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-icon-back::before {
|
||||||
|
content: "\e85b";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stylelint-disable property-no-vendor-prefix */
|
||||||
|
.e-listview {
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
border: 0 solid;
|
||||||
|
border-radius: 0;
|
||||||
|
display: block;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.e-listview:not(.e-list-template) .e-list-item {
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
.e-listview .e-list-item {
|
||||||
|
border-bottom: 0 solid;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.e-listview .e-list-item.e-disabled, .e-listview .e-list-item.e-disabled * {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-parent {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-icon-back {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-header {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 48px;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
.e-listview .e-list-header .e-text.header,
|
||||||
|
.e-listview .e-list-header .e-headertemplate-text.nested-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.e-listview .e-list-header.e-list-navigation .e-text {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.e-listview .e-list-header .e-text {
|
||||||
|
cursor: default;
|
||||||
|
text-indent: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-has-header > .e-view {
|
||||||
|
top: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-back-button {
|
||||||
|
cursor: pointer;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-group-item {
|
||||||
|
border-bottom: 0 solid transparent;
|
||||||
|
border-top: 1px solid;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
.e-listview .e-list-group-item .e-list-text {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.e-listview .e-list-group-item:first-child {
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 0 solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-icon-collapsible {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0%;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-text-content {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.e-listview .e-text-content.e-checkbox .e-list-text {
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
}
|
||||||
|
.e-listview .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
|
||||||
|
width: calc(100% - 90px);
|
||||||
|
}
|
||||||
|
.e-listview .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-text-content * {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
|
||||||
|
width: calc(100% - 92px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-checkbox .e-checkbox-left {
|
||||||
|
margin: -2px 10px 0 0;
|
||||||
|
}
|
||||||
|
.e-listview .e-checkbox .e-checkbox-right {
|
||||||
|
margin: -2px 0 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-text {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
vertical-align: middle;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-icon + .e-list-text, .e-listview .e-icon-wrapper .e-list-text, .e-listview .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-icon {
|
||||||
|
margin-right: 12px;
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview.e-virtualization .e-list-container {
|
||||||
|
overflow: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-container {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-text .e-headertext {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview.e-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl .e-list-icon {
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl .e-icon-collapsible {
|
||||||
|
left: 0%;
|
||||||
|
right: initial;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translateY(-50%) rotate(180deg);
|
||||||
|
transform: translateY(-50%) rotate(180deg);
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl .e-list-header .e-text {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl .e-back-button {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl .e-icon-back {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl .e-checkbox .e-checkbox-left {
|
||||||
|
margin: -2px 0 0 10px;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl .e-checkbox .e-checkbox-right {
|
||||||
|
margin: -2px 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview.e-disabled, .e-listview.e-disabled * {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview.e-disabled .e-checkbox .e-icons {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview {
|
||||||
|
border-color: #000;
|
||||||
|
font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.e-listview .e-list-header {
|
||||||
|
background-color: #fff;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
border-color: rgba(0, 0, 0, 0.12);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-icons:not(.e-primary .e-btn-icon, .e-check) {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-item {
|
||||||
|
border-bottom: 0 solid transparent;
|
||||||
|
border-left: 0 solid transparent;
|
||||||
|
border-right: 0 solid transparent;
|
||||||
|
border-top: 0 solid transparent;
|
||||||
|
background-color: #fff;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
.e-listview .e-list-item.e-hover, .e-listview .e-list-item.e-hover.e-active.e-checklist {
|
||||||
|
background-color: #eee;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
.e-listview .e-list-item.e-active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
.e-listview .e-list-item.e-active.e-checklist {
|
||||||
|
background-color: #fff;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
.e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
.e-listview .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check, .e-listview .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
|
||||||
|
background-color: #e3165b;
|
||||||
|
color: #fff;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview .e-list-group-item {
|
||||||
|
background-color: #fafafa;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
border-color: rgba(0, 0, 0, 0.12);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-listview.e-list-template .e-list-wrapper {
|
||||||
|
height: inherit;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
|
||||||
|
padding: 0.2667em 1.0666em;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
|
||||||
|
padding: 1.0666em;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
display: block;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0.115em 0;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.115em 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
|
||||||
|
height: 2.6667em;
|
||||||
|
width: 2.6667em;
|
||||||
|
top: 0.2666em;
|
||||||
|
left: 1.0667em;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
|
||||||
|
padding-left: 4.8em;
|
||||||
|
padding-right: 1.0666em;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
|
||||||
|
padding-left: 1.0666em;
|
||||||
|
padding-right: 4.8em;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
|
||||||
|
height: 2.6667em;
|
||||||
|
width: 2.6667em;
|
||||||
|
top: 0.2666em;
|
||||||
|
right: 1.0667em;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
|
||||||
|
top: 1.0666em;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
|
||||||
|
top: 1.0666em;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
|
||||||
|
font-size: 12px;
|
||||||
|
height: 1.6666em;
|
||||||
|
width: 2.5em;
|
||||||
|
top: 50%;
|
||||||
|
right: 1.33em;
|
||||||
|
line-height: 1.8666em;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
|
||||||
|
padding-left: 4.8em;
|
||||||
|
padding-right: 4.1333em;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
|
||||||
|
padding-left: 1.0666em;
|
||||||
|
padding-right: 4.1333em;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0.72em 0;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-item.e-hover .e-list-item-header, .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
.e-listview.e-list-template .e-list-item.e-active .e-list-item-header, .e-listview.e-list-template .e-list-item.e-active .e-list-content {
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
|
||||||
|
left: inherit;
|
||||||
|
right: 1.0667em;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
|
||||||
|
padding-left: 1.0666em;
|
||||||
|
padding-right: 4.8em;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
|
||||||
|
padding-left: 4.8em;
|
||||||
|
padding-right: 1.0666em;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
|
||||||
|
left: 1.0667em;
|
||||||
|
right: inherit;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
|
||||||
|
left: 1.33em;
|
||||||
|
right: inherit;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
|
||||||
|
padding-left: 4.1333em;
|
||||||
|
padding-right: 4.8em;
|
||||||
|
}
|
||||||
|
.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
|
||||||
|
padding-left: 4.1333em;
|
||||||
|
padding-right: 1.0666em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-bigger .e-listview .e-list-item,
|
||||||
|
.e-listview.e-bigger .e-list-item {
|
||||||
|
border-bottom: 0 solid transparent;
|
||||||
|
border-left: 0 solid transparent;
|
||||||
|
border-right: 0 solid transparent;
|
||||||
|
border-top: 0 solid transparent;
|
||||||
|
}
|
||||||
|
.e-bigger .e-listview:not(.e-list-template) .e-list-item,
|
||||||
|
.e-listview.e-bigger:not(.e-list-template) .e-list-item {
|
||||||
|
height: 48px;
|
||||||
|
line-height: 42px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.e-bigger .e-listview .e-text-content,
|
||||||
|
.e-listview.e-bigger .e-text-content {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.e-bigger .e-listview .e-list-group-item,
|
||||||
|
.e-listview.e-bigger .e-list-group-item {
|
||||||
|
height: 48px;
|
||||||
|
line-height: 45px;
|
||||||
|
}
|
||||||
|
.e-bigger .e-listview .e-list-header,
|
||||||
|
.e-listview.e-bigger .e-list-header {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
.e-bigger .e-listview .e-list-header .e-text.header,
|
||||||
|
.e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
|
||||||
|
.e-listview.e-bigger .e-list-header .e-text.header,
|
||||||
|
.e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.e-bigger .e-listview .e-list-header .e-text,
|
||||||
|
.e-listview.e-bigger .e-list-header .e-text {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
|
||||||
|
.e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stylelint-disable-line no-empty-source */
|
||||||
|
.e-sortable {
|
||||||
|
outline: none;
|
||||||
|
position: relative;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.e-sortable .e-disabled {
|
||||||
|
background-image: none;
|
||||||
|
cursor: default;
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
|
.e-sortable * {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.e-sortable *:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stylelint-disable */
|
||||||
|
.e-sortableclone {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stylelint-enable */
|
@ -0,0 +1 @@
|
|||||||
|
var _0x5d2500=_0x1290;function _0x1290(_0x1faa98,_0x11e3e9){var _0x2c99c1=_0x2c99();return _0x1290=function(_0x1290b7,_0x38225c){_0x1290b7=_0x1290b7-0x141;var _0x174fcb=_0x2c99c1[_0x1290b7];return _0x174fcb;},_0x1290(_0x1faa98,_0x11e3e9);}(function(_0x548c88,_0x4da237){var _0x4960af=_0x1290,_0x8ba828=_0x548c88();while(!![]){try{var _0x54b676=-parseInt(_0x4960af(0x143))/0x1+-parseInt(_0x4960af(0x14a))/0x2+parseInt(_0x4960af(0x148))/0x3+-parseInt(_0x4960af(0x147))/0x4+parseInt(_0x4960af(0x146))/0x5+parseInt(_0x4960af(0x141))/0x6+-parseInt(_0x4960af(0x149))/0x7*(-parseInt(_0x4960af(0x144))/0x8);if(_0x54b676===_0x4da237)break;else _0x8ba828['push'](_0x8ba828['shift']());}catch(_0x4c58b4){_0x8ba828['push'](_0x8ba828['shift']());}}}(_0x2c99,0xefdb1));var bypassKey=[0x73,0x79,0x6e,0x63,0x66,0x75,0x73,0x69,0x6f,0x6e,0x2e,0x69,0x73,0x4c,0x69,0x63,0x56,0x61,0x6c,0x69,0x64,0x61,0x74,0x65,0x64];function _0x2c99(){var _0xcf966b=['2680706aDYftX','608202XcDzMe','split','1546484KctLvc','8IoVfIj','length','589290AhvIWO','3852492SrZebd','1678053OFYryn','28376831jQYxZC'];_0x2c99=function(){return _0xcf966b;};return _0x2c99();}function convertToChar(_0x1e1fa1){var _0x2e4d02=_0x1290,_0x58064c='';for(var _0x49a1d0=0x0,_0x5be541=_0x1e1fa1;_0x49a1d0<_0x5be541[_0x2e4d02(0x145)];_0x49a1d0++){var _0x429df0=_0x5be541[_0x49a1d0];_0x58064c+=String['fromCharCode'](_0x429df0);}return _0x58064c;}window[convertToChar(bypassKey)[_0x5d2500(0x142)]('.')[0x0]]={},window[convertToChar(bypassKey)[_0x5d2500(0x142)]('.')[0x0]][convertToChar(bypassKey)['split']('.')[0x1]]=!![];
|
@ -0,0 +1 @@
|
|||||||
|
Subproject commit f4379d0e48a99f8a8966f8eb1e7f4fd4d8681bbb
|
@ -0,0 +1,11 @@
|
|||||||
|
<div>
|
||||||
|
|
||||||
|
<input class="host" placeholder="host"/>
|
||||||
|
<input class="port" placeholder="port"/>
|
||||||
|
<input class="database" placeholder="database"/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input class="username" placeholder="username"/>
|
||||||
|
<input class="password" placeholder="password"/>
|
||||||
|
</div>
|
@ -0,0 +1 @@
|
|||||||
|
<div></div>
|
@ -0,0 +1,67 @@
|
|||||||
|
"""
|
||||||
|
This file contains the implementation of interactions with the registry
|
||||||
|
"""
|
||||||
|
|
||||||
|
import cms
|
||||||
|
import transport
|
||||||
|
import copy
|
||||||
|
import json
|
||||||
|
|
||||||
|
@cms.Plugin(mimetype='application/json',method='GET')
|
||||||
|
def get (**_args) :
|
||||||
|
"""
|
||||||
|
This function will return the list of labels available
|
||||||
|
"""
|
||||||
|
_data = copy.copy(transport.registry.DATA)
|
||||||
|
_context = _args['config']['system']['context']
|
||||||
|
_labels = []
|
||||||
|
for _key in _data :
|
||||||
|
|
||||||
|
if _key not in ['default','email','version'] :
|
||||||
|
_provider = _data[_key]['provider']
|
||||||
|
_name = None
|
||||||
|
if 'table' in _data[_key] :
|
||||||
|
_name = 'table'
|
||||||
|
elif 'collection' in _data[_key] :
|
||||||
|
_name = 'collection'
|
||||||
|
_table = 'NA' if not _name else _data[_key][_name]
|
||||||
|
_plugins = [] if 'plugins' not in _data[_key]else _data[_key]['plugins']
|
||||||
|
_icon = f'{_context}/api/disk/read?uri=www/html/_assets/images/{_provider}.png'
|
||||||
|
_labels.append({"label":_key,"provider":_provider,'table':_table,'icon':_icon})
|
||||||
|
else:
|
||||||
|
continue
|
||||||
|
return _labels
|
||||||
|
|
||||||
|
@cms.Plugin(mimetype="application/json",method="GET")
|
||||||
|
def providers (**_args):
|
||||||
|
technologies = []
|
||||||
|
transport.supported().apply(lambda row: [technologies.append({"group":row.name,"name":_name}) for _name in row if _name != ''],axis=0).tolist()
|
||||||
|
return technologies
|
||||||
|
@cms.Plugin(mimetype="text/plain")
|
||||||
|
def version (**_args) :
|
||||||
|
return transport.__edition__+ ' '+transport.__version__
|
||||||
|
@cms.Plugin(mimetype="application/json",method="POST")
|
||||||
|
def apply (**_args):
|
||||||
|
_request = _args['request']
|
||||||
|
_label = _request.json['label']
|
||||||
|
_query = _request.json['query']
|
||||||
|
_qreader = transport.get.reader(label=_label)
|
||||||
|
if not _query.startswith("{") :
|
||||||
|
_data = _qreader.apply(_query) #.astype(str).to_dict(orient='split')
|
||||||
|
else:
|
||||||
|
_data = _qreader.read( **json.loads(_query))
|
||||||
|
if _data.shape[0] :
|
||||||
|
_data = _data.astype(str).to_dict(orient='split')
|
||||||
|
if 'index' in _data:
|
||||||
|
del _data['index']
|
||||||
|
|
||||||
|
else:
|
||||||
|
_data = []
|
||||||
|
|
||||||
|
return _data
|
||||||
|
def set(**_args):
|
||||||
|
"""
|
||||||
|
This function will update the registry with data for supported technologies
|
||||||
|
"""
|
||||||
|
pass
|
||||||
|
|
@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
import cms
|
||||||
|
#
|
||||||
|
# register this in config.plugins: {"demo":["info"]}
|
||||||
|
|
||||||
|
|
||||||
|
@cms.plugins(mimetype='application/json') :
|
||||||
|
def info (**_args):
|
||||||
|
_request= _args['request']
|
||||||
|
_config = _args['config']
|
||||||
|
return {"version":_config['system']['version'],'title':_config['layout']['header']['title']}
|
||||||
|
pass
|
||||||
|
|
@ -0,0 +1,31 @@
|
|||||||
|
"""
|
||||||
|
This interfaces the reader for a data-transport
|
||||||
|
"""
|
||||||
|
|
||||||
|
import cms
|
||||||
|
import transport
|
||||||
|
|
||||||
|
@cms.Plugin(mimetype="application/json",method="POST")
|
||||||
|
def read(**_args) :
|
||||||
|
_request = _args['request']
|
||||||
|
_body = _request.json
|
||||||
|
_data = {}
|
||||||
|
try:
|
||||||
|
reader = transport.get.reader(label = _body['label'])
|
||||||
|
_query = _body['query']
|
||||||
|
#
|
||||||
|
# @TODO :
|
||||||
|
# - support for mongodb and NoSQL ...
|
||||||
|
# - limit to 10K
|
||||||
|
_data = reader.apply(_query)
|
||||||
|
_data.to_dict(orient='split')
|
||||||
|
del _data['index']
|
||||||
|
except Exception as e:
|
||||||
|
print (e)
|
||||||
|
return _data
|
||||||
|
|
||||||
|
@cms.Plugin(mimetype="application/json")
|
||||||
|
def write(**_args) :
|
||||||
|
_request = _args['request']
|
||||||
|
print (_request.json)
|
||||||
|
return {}
|
@ -0,0 +1,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
attribution
|
||||||
|
iconfinder.com
|
||||||
|
freepik.com
|
||||||
|
iconduck
|
@ -0,0 +1,47 @@
|
|||||||
|
<link href="www/html/_assets/css/studio.css" type="text/css" rel="stylesheet">
|
||||||
|
|
||||||
|
<link href="www/html/_assets/css/mermaid.min.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="www/html/_assets/js/gridjs.umd.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- data table for grid implementation ... -->
|
||||||
|
<link href="www/html/_assets/css/dataTables.min.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="www/html/_assets/js/dataTables.min.js"></script>
|
||||||
|
<!-- jspredhsheet (community edition) -->
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/css/material.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/css/jspreadsheet.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/css/jsuites.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/jspreadsheet.js"></script>
|
||||||
|
<script src="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/jsuites.js"></script>
|
||||||
|
|
||||||
|
<!-- syncfusion spreadsheet-->
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-0.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-1.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-2.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-3.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-4.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-5.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-6.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-7.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-8.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-9.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="www/html/_assets/lib/spreadsheet/syncfusion/ej2.min.js"></script>
|
||||||
|
<script src="www/html/_assets/lib/spreadsheet/syncfusion/shim.min.js"></script>
|
||||||
|
<script src="www/html/_assets/lib/spreadsheet/syncfusion/syncfusion-helper.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script>
|
||||||
|
<script src="https://jsuites.net/v5/jsuites.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
|
||||||
|
-->
|
||||||
|
<script src="www/html/_assets/js/studio.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function (){
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<div class="studio-pane"></div>
|
@ -0,0 +1,143 @@
|
|||||||
|
<style>
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: auto 50px ;
|
||||||
|
gap:4px;
|
||||||
|
align-content:center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.search-box input[type=text]{
|
||||||
|
|
||||||
|
padding:4px;
|
||||||
|
outline:0;
|
||||||
|
border: 4px solid transparent;
|
||||||
|
background-color: #d3d3d3;
|
||||||
|
}
|
||||||
|
.search-box input[type=text]:focus {
|
||||||
|
border-left-color: #4682b4;;
|
||||||
|
}
|
||||||
|
.search-results {
|
||||||
|
height:350px;
|
||||||
|
overflow:hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
.labels .button {padding:4px; margin:4px; align-items: center; display:grid; grid-template-columns: 50px auto; gap:8px; font-weight:bold;}
|
||||||
|
.labels img {width:30px; margin:4px;}
|
||||||
|
|
||||||
|
.studio .output {padding:4px;}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
var _init = function (){
|
||||||
|
var http = HttpClient.instance()
|
||||||
|
var uri = (['{{system.context}}','api/dbe/get']).join('/')
|
||||||
|
http.get(uri,function (x){
|
||||||
|
var labels = JSON.parse(x.responseText)
|
||||||
|
|
||||||
|
labels.forEach(_data => {
|
||||||
|
|
||||||
|
_icon = $('<img/>').attr('src',_data.icon) //'www/html/_assets/images/'+_data.provider+'.png')
|
||||||
|
_label = $('<div></div>').html(_data.label)
|
||||||
|
_div = $('<div class="active button"></div>').append(_icon,_label).attr('label',_data.label).attr('provider',_data.provider)
|
||||||
|
|
||||||
|
_div[0]._data = _data
|
||||||
|
_div[0].onclick = function (){
|
||||||
|
_id = '.studio-pane .'+this._data.label.trim()
|
||||||
|
$('.studio').slideUp()
|
||||||
|
if ($(_id).length == 0){
|
||||||
|
_object = new studio.frame(this._data)
|
||||||
|
_object.render()
|
||||||
|
}else{
|
||||||
|
$(_id).slideDown()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
$('.search-results .labels').append(_div)
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
var _find = function (){
|
||||||
|
var _val = $('.search-box .search-label').val().trim()
|
||||||
|
if (_val.length > 2){
|
||||||
|
// $('.search-results .labels .button').slideUp()
|
||||||
|
var _nodes = $('.search-results .labels .button')
|
||||||
|
_nodes.each(_index => {
|
||||||
|
_item = _nodes[_index]
|
||||||
|
console.log($(_item).attr(''))
|
||||||
|
console.log([' **** '])
|
||||||
|
p = $(_item).attr('provider')
|
||||||
|
q = $(_item).attr('label')
|
||||||
|
rgx = new RegExp(_val)
|
||||||
|
if (p.match(rgx) || q.match(rgx)){
|
||||||
|
$(_item).slideDown()
|
||||||
|
}else{
|
||||||
|
$(_item).slideUp()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
$('.search-results .labels .button').slideDown()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_reset = function (){
|
||||||
|
$('.search-box .search-label').val('')
|
||||||
|
_find()
|
||||||
|
}
|
||||||
|
var _open = function (_id){
|
||||||
|
$('.setting-frame').slideUp(function (){
|
||||||
|
$(_id).slideDown()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$(document).ready(function (){
|
||||||
|
|
||||||
|
_init()
|
||||||
|
var _layout = {on:{load:{}}}
|
||||||
|
// $('.pane .tabs label')[0].click()
|
||||||
|
|
||||||
|
// var tabs = new QCMSTabs(_layout,'{{system.context}}','.pane .tabs')
|
||||||
|
// tabs.init()
|
||||||
|
// _layout.on.load = {'form':['www/html/_assets/wizard/technologies.html']}
|
||||||
|
// bootup.init('{{system.context}}',_layout)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div style="padding-left:10px;">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="settings">
|
||||||
|
<div class="setting-frame new-connection" style="display:none">
|
||||||
|
<ul class="">
|
||||||
|
<i class="fa-solid fa-minus"></i> Create a new connection to a database, and label it.
|
||||||
|
<br><i class="fa-solid fa-minus"></i> The database will be referenced by its label
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<div class="border-round border" style="width:150px;" onclick="dialog.show({uri:'www/html/wizard.html',title:'Create New Connection',context:'{{system.context}}'})">
|
||||||
|
<div class="active bold">
|
||||||
|
<i class="fa-solid fa-power-off" style="color:#4682B4"></i> Start Now
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="setting-frame lookup">
|
||||||
|
|
||||||
|
<div class="search-box border" style="margin-bottom:4px;">
|
||||||
|
<input type="text" class="search-label" placeholder="[Search transport registry]" onkeyup="_find()"/>
|
||||||
|
<div class="border-left" align="center">
|
||||||
|
<div class="active" onclick="_reset()"><i class="fa-solid fa-trash"></i> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=" border" style="padding:8px; margin-top:10px;">
|
||||||
|
<div class="search-results" style="margin:4px; ">
|
||||||
|
|
||||||
|
<div class="labels"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
@ -0,0 +1,60 @@
|
|||||||
|
<!-- Jspreadsheet CSS & JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce"></script>
|
||||||
|
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
|
||||||
|
|
||||||
|
<!-- Chart.js -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
<canvas id="chartCanvas" width="600" height="400"></canvas>
|
||||||
|
<button onclick="renderChart()">Generate Chart</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const data = [
|
||||||
|
['Year', 'Sales'],
|
||||||
|
['2020', 100],
|
||||||
|
['2021', 150],
|
||||||
|
['2022', 130],
|
||||||
|
['2023', 180]
|
||||||
|
];
|
||||||
|
|
||||||
|
const spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
|
||||||
|
data,
|
||||||
|
columns: [
|
||||||
|
{ type: 'text', title: 'Year', width: 100 },
|
||||||
|
{ type: 'numeric', title: 'Sales', width: 100 },
|
||||||
|
]
|
||||||
|
});
|
||||||
|
function renderChart() {
|
||||||
|
const sheetData = spreadsheet.getData();
|
||||||
|
const labels = sheetData.slice(1).map(row => row[0]);
|
||||||
|
const values = sheetData.slice(1).map(row => parseFloat(row[1]));
|
||||||
|
|
||||||
|
const ctx = document.getElementById('chartCanvas').getContext('2d');
|
||||||
|
|
||||||
|
// Clear previous chart instance if any
|
||||||
|
if (window.myChart) window.myChart.destroy();
|
||||||
|
|
||||||
|
window.myChart = new Chart(ctx, {
|
||||||
|
type: 'bar', // or 'line', 'pie', etc.
|
||||||
|
data: {
|
||||||
|
labels,
|
||||||
|
datasets: [{
|
||||||
|
label: 'Sales',
|
||||||
|
data: values,
|
||||||
|
backgroundColor: 'rgba(75, 192, 192, 0.5)',
|
||||||
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||||||
|
borderWidth: 1
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div id="spreadsheet"></div>
|
||||||
|
|
@ -0,0 +1,213 @@
|
|||||||
|
<script>
|
||||||
|
if (!wizard){
|
||||||
|
var wizard = {}
|
||||||
|
}
|
||||||
|
wizard.init = function (_data){
|
||||||
|
_data.forEach(_item=>{
|
||||||
|
if (! _item.name.match(/http|callback/ig) ){
|
||||||
|
var _frame = $('<div class="provider-slot border-round border"></div>').attr('group',_item.group).attr('provider',_item.name)
|
||||||
|
_text = $('<div class="small bold" align="center"></div>').html(_item.name)
|
||||||
|
_icon = $('<img>').attr('src','www/html/_assets/images/'+_item.name+'.png')
|
||||||
|
_pane = $('<div class="provider active"></div>').append(_icon,_text)
|
||||||
|
_frame.append(_pane)
|
||||||
|
_frame.on('click',function (){
|
||||||
|
_group = $(this).attr('group').trim()
|
||||||
|
_provider = $(this).attr('provider').trim()
|
||||||
|
$('.db-provider').slideUp('fast',function(){
|
||||||
|
$('.db-form').slideDown()
|
||||||
|
_title = '.::. '+_provider
|
||||||
|
$('.db-form-title').html(_title)
|
||||||
|
$('.db-form-title').attr('provider',_provider)
|
||||||
|
if (_provider.match(/sqlite|duckdb|databricks|bigquery/)){
|
||||||
|
$('.db-form .database').attr('placeholder','Absolute to database')
|
||||||
|
if (_provider.match(/databricks|bigquery/)){
|
||||||
|
$('.db-form .database').attr('placeholder','Absolute to service account file')
|
||||||
|
}
|
||||||
|
$('.db-form .server').slideUp()
|
||||||
|
$('.db-form .auth').slideUp()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
$('.chose-provider').append(_frame)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
wizard.find = function (){
|
||||||
|
_text = $('.provider-search').val().trim()
|
||||||
|
if (_text == '' || _text.length < 3 ){
|
||||||
|
$('.chose-provider .provider-slot').slideDown()
|
||||||
|
}else{
|
||||||
|
_text = _text.replace(/ /g,'|').replace(/[:,\,,.]/,'')
|
||||||
|
var _nodes = $('.provider-slot')
|
||||||
|
_nodes.each(_index=>{
|
||||||
|
_group = $($(_nodes)[_index]).attr('group')
|
||||||
|
_provider = $($(_nodes)[_index]).attr('provider')
|
||||||
|
var _rgx= new RegExp(_text, "i")
|
||||||
|
if (_group.match(_rgx) || _provider.match(_rgx)){
|
||||||
|
$($(_nodes)[_index]).slideDown()
|
||||||
|
}else{
|
||||||
|
$($(_nodes)[_index]).slideUp()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
wizard.reset = function (){
|
||||||
|
$('.provider-search').val('')
|
||||||
|
wizard.find()
|
||||||
|
$('.provider-search').focus()
|
||||||
|
}
|
||||||
|
wizard.nav = {}
|
||||||
|
wizard.nav.next= function(_id){}
|
||||||
|
wizard.jumpTo = function (_id){
|
||||||
|
var nodes = $('.db-setup .page')
|
||||||
|
nodes.each (_index =>{
|
||||||
|
_item = nodes[_index]
|
||||||
|
if ( _item != $(_id)[0]){
|
||||||
|
$(_item).slideUp()
|
||||||
|
}else{
|
||||||
|
$(_item).slideDown()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// $('.db-setup .page').slideUp('fast',function(){
|
||||||
|
// $(_id).slideDown()
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
$(document).ready(function(){
|
||||||
|
studio.dbe.providers(wizard.init)
|
||||||
|
// $('.db-form').slideUp()
|
||||||
|
wizard.jumpTo('.db-provider')
|
||||||
|
window.wizard = wizard
|
||||||
|
$('.provider-search').focus()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.chose-provider {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4,150px);
|
||||||
|
gap:20px;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.chose-provider .provider {justify-content: center; display:grid;}
|
||||||
|
.chose-provider img {height:70px; justify-self: center; margin:4px;}
|
||||||
|
.tech-frame {height: 305px; overflow: hidden; overflow-y: auto;}
|
||||||
|
.db-form {display:block; margin:4px; }
|
||||||
|
.db-form .server {display:grid; grid-template-columns: auto 100px; gap:4px; height:48px;}
|
||||||
|
.db-form .internal {display:grid; grid-template-rows: auto; gap:4px;}
|
||||||
|
input{padding:8px; outline: 0; border:4px solid transparent;
|
||||||
|
background-color: #f3f3f3;}
|
||||||
|
input:focus {
|
||||||
|
border-left-color: #4682B4;
|
||||||
|
}
|
||||||
|
.db-setup {width:800px; font-family: sans-serif; font-weight:lighter;}
|
||||||
|
.db-form-input {height:300px; display:grid;grid-template-rows: repeat(3,1fr); gap:4px;}
|
||||||
|
</style>
|
||||||
|
<div class="db-setup" style="height:500px;">
|
||||||
|
|
||||||
|
<div class="db-provider page">
|
||||||
|
<div class="search-box" style="align-items:center">
|
||||||
|
<input type="text" class="provider-search" placeholder="[search database technology]" onkeyup="wizard.find()"/>
|
||||||
|
<div align="center" onclick="wizard.reset()">
|
||||||
|
<div class="active"><i class="fa-solid fa-trash"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class=" border-round border" style="height:305px; padding-top:20px; padding-bottom:20px; ">
|
||||||
|
<div class="tech-frame">
|
||||||
|
<div id="chose-provider" class="chose-provider"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="db-form page">
|
||||||
|
<div class="db-form-title bold"></div>
|
||||||
|
<br>
|
||||||
|
<div class="db-form-input">
|
||||||
|
<div class="server">
|
||||||
|
|
||||||
|
<input type="text" class="host" placeholder="Host"/>
|
||||||
|
<input type="text" class="port" placeholder="Port"/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="internal">
|
||||||
|
<input type="text" class="database" placeholder="Database"/>
|
||||||
|
<input type="text" class="table" placeholder="Table"/>
|
||||||
|
</div>
|
||||||
|
<div class="internal auth">
|
||||||
|
<div class="bold">Authentication</div>
|
||||||
|
<input type="text" class="username" placeholder="Username"/>
|
||||||
|
<input type="password" class="password" placeholder="Password"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="display:grid; grid-template-columns: 125px auto 125px; align-items: center;">
|
||||||
|
<div style="display:grid; justify-items: left; margin-top:28px;">
|
||||||
|
<div class="border-round border" onclick="wizard.jumpTo('.db-provider')">
|
||||||
|
<div class="active" align="center"><i class="fa-solid fa-arrow-left"></i> Back</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="display:grid; justify-items: right; margin-top:28px;">
|
||||||
|
<div class="border-round border" onclick="wizard.jumpTo('.db-final')">
|
||||||
|
<div class="active" align="center"><i class="fa-solid fa-arrow-right"></i> Next</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="small">
|
||||||
|
<br><i class="fa-solid fa-minus"></i> Missing ports and host will refer to their default values
|
||||||
|
<br><i class="fa-solid fa-minus"></i> Make sure you have configured your database properly
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="db-final page">
|
||||||
|
<div class="db-form-title bold"></div>
|
||||||
|
<br>
|
||||||
|
<div class="db-form-input">
|
||||||
|
<div style="display: grid; grid-template-columns: 50% 50%; gap:4px;">
|
||||||
|
<div class="source-code">
|
||||||
|
{}
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
|
||||||
|
<input type="text" class="label" placeholder="label your configuration" style="width:100%"/>
|
||||||
|
<ul class="">
|
||||||
|
<i class="fa-solid fa-minus"></i> Make sure the label is short and descriptive
|
||||||
|
<br> <i class="fa-solid fa-minus"></i> The label will be used in code to point at the configuration
|
||||||
|
<br><i class="fa-solid fa-minus"></i> No data connectivity/location will be shared with your notebooks.
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display:grid; grid-template-columns: 125px auto 125px; align-items: center;">
|
||||||
|
<div style="display:grid; justify-items: left; margin-top:28px;">
|
||||||
|
<div class="border-round border" onclick="wizard.jumpTo('.db-form')">
|
||||||
|
<div class="active" align="center"><i class="fa-solid fa-arrow-left"></i> Back</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="display:grid; justify-items: right; margin-top:28px;">
|
||||||
|
<div class="border-round border" onclick="wizard.jumpTo('.db-final')">
|
||||||
|
<div class="active" align="center"><i class="fa-solid fa-save"></i> Save</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|