1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16export const SpQuerySQLHtml = `
17<style>
18:host{
19  width: 100%;
20  height: 100%;
21  font-size: 16px;
22  background-color: var(--dark-background5,#F6F6F6);
23  margin: 0;
24  padding: 0;
25}
26.sql-select{
27  box-sizing: border-box;
28  width: 95%;
29  font-family: Helvetica,serif;
30  font-size: inherit;
31  color: var(--dark-color1,#212121);
32  text-align: left;
33  line-height: 1.2em;
34  font-weight: 400;
35  height: 3.2em;
36  margin-left: 10px;
37  resize: vertical;
38  border-width: 2px;
39}
40.query{
41  display: flex;
42  flex-direction: column;
43  background-color: var(--dark-background5,#F6F6F6);
44  position: absolute;
45  top: 0;
46  bottom: 0;
47  left: 0;
48  right: 0;
49}
50.query-message{
51  background-color: var(--dark-background3,#FFFFFF);
52  padding: 1% 2%;
53  margin: 2% 2.5% 0 2.5%;
54  border-radius: 16px;
55  width: 90%;
56}
57.request{
58  display: flex;
59  flex-direction: column;
60  position: relative;
61}
62.response{
63  flex-grow: 1;
64  display: flex;
65  flex-direction: column;
66  min-height: inherit;
67  max-height: 70vh;
68}
69#dataResult{
70  flex-grow: 1;
71  overflow-y: auto;
72  overflow-x: visible;
73  margin-bottom: 1%;
74  border-radius: 16px;
75  background-color: #F6F6F6;
76  padding: 0px 0px 0px 30px;
77  min-height: inherit;
78  max-height: 70vh;
79}
80p{
81  display: table-cell;
82  padding: 7px 10px;
83  font-size:0.875em;
84  line-height: 20px;
85  font-weight: 400;
86  text-align: left;
87  white-space: nowrap; 
88  overflow: hidden; 
89  text-overflow: ellipsis;
90}
91#response-json{
92  margin-top: 20px;
93  background-color: var(--dark-background5,#F6F6F6);
94  margin-left: 10px;
95  flex-grow: 1;
96  scroll-y: visible;
97}
98.sql-select{
99  background-color: var(--dark-background5, #F6F6F6);
100}
101::-webkit-scrollbar{
102  width: 8px;
103  background-color: var(--dark-background3,#FFFFFF);
104}
105::-webkit-scrollbar-thumb{
106  border-radius: 6px;
107  background-color: var(--dark-background7,rgba(0,0,0,0.1));
108}
109.load-query-sql{
110  width: 95%;
111  bottom: 0;
112}
113#copy-button{
114  margin-right: 10%;
115  cursor:pointer;
116  opacity: 0.6;
117}
118#close-button{
119  margin-right: 5%;
120  cursor:pointer;
121  opacity: 0.6;
122}
123.button-option{
124  border-radius: 15px;
125  background-color: #0A59F7;
126  width: 120px;
127  height: 25px;
128  font-family: Helvetica-Bold;
129  color: var(--dark-background3,#FFFFFF);
130  text-align: center;
131  line-height: 20px;
132  font-weight: 400;
133  border:0 solid;
134}
135.pagination-box {
136  opacity: 0;
137}
138.sql-item {
139  display: flex;
140  justify-content: space-between;
141  padding: 10px 0px;
142  font-size: 14px;
143}
144.sql {
145  width: 90%;
146}
147.query-sql {
148  background-color: var(--dark-background3,#FFFFFF);
149  padding: 1% 2%;
150  margin: 0% 2.5% 0 2.5%;
151  border-bottom-left-radius: 16px;
152  border-bottom-right-radius: 16px;
153  width: 90%;
154}
155.query-result {
156  background-color: var(--dark-background3,#FFFFFF);
157  padding: 1% 2%;
158  margin: 2% 2.5% 0 2.5%;
159  border-top-left-radius: 16px;
160  border-top-right-radius: 16px;
161  width: 90%;
162}
163#sqlList {
164  background-color:#F6F6F6;
165  padding: 10px;
166  border-radius: 16px;
167}
168lit-icon {
169  text-overflow: ellipsis;
170}
171.runButton:hover {
172   cursor: pointer;
173}
174</style>
175<div class="query">
176    <div class="query-message request">
177        <p class="query_select" style="color: #999999">Enter query and press command/ctrl + Enter</p>
178        <textarea class="sql-select"></textarea>
179        <lit-progress-bar class="load-query-sql"></lit-progress-bar>
180    </div>
181      <div class="response query-result">
182         <div style="display: flex;justify-content: space-between">
183             <p class="query_size" style="color: #999999">Query result - 0 counts</p>
184             <div style="display: flex; align-items: center">
185                 <button id="copy-button" class="button-option">Copy as.tsv</button>
186                 <button id="close-button" class="button-option">Close</button>
187              </div>
188          </div>
189         <div id="dataResult">
190            <lit-table></lit-table>
191          </div>
192         <pagination-box class="pagination-box"></pagination-box>
193      </div>
194      <div class="query-sql">
195        <div id="sqlList"></div>
196      </div>
197`;
198