Hugging Face's logo

Spaces:
DMTuit
/
psy2
Sleeping

App Files Community
DmitrMakeev commited on
Commit
64ed340
·
verified ·
1 Parent(s): 5e1cb9e

Update data_gc_tab.html

Browse files
Files changed (1) hide show
  1. data_gc_tab.html +21 -127
data_gc_tab.html CHANGED
@@ -6,126 +6,6 @@
6
  <title>Tabulator Example</title>
7
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
8
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
9
- <style>
10
- body {
11
- font-family: Arial, sans-serif;
12
- text-align: center;
13
- background-color: #f0f0f0;
14
- margin: 0;
15
- padding: 0;
16
- }
17
- h1 {
18
- background-color: #4CAF50;
19
- color: white;
20
- padding: 20px;
21
- margin: 0;
22
- border-bottom: 2px solid #388E3C;
23
- font-size: 28px;
24
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
25
- }
26
- button[type="submit"] {
27
- color: white;
28
- background-color: #4CAF50;
29
- border: none;
30
- cursor: pointer;
31
- padding: 10px 20px;
32
- font-size: 16px;
33
- border-radius: 5px;
34
- margin-top: 20px;
35
- transition: background-color 0.3s ease;
36
- }
37
- button[type="submit"]:hover {
38
- background-color: #388E3C;
39
- }
40
- #mediaContainer {
41
- margin-top: 20px;
42
- display: flex;
43
- justify-content: center;
44
- align-items: center;
45
- flex-direction: column;
46
- max-width: 100%;
47
- height: auto;
48
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
49
- border-radius: 10px;
50
- padding: 20px;
51
- background-color: white;
52
- }
53
- #mediaContainer img, #mediaContainer video {
54
- max-width: 100%;
55
- height: auto;
56
- object-fit: contain;
57
- border-radius: 10px;
58
- }
59
- #imageUrl {
60
- margin-top: 20px;
61
- font-size: 16px;
62
- color: #333;
63
- cursor: pointer;
64
- text-decoration: underline;
65
- transition: color 0.3s ease;
66
- }
67
- #imageUrl:hover {
68
- color: #4CAF50;
69
- }
70
- #progressBarContainer {
71
- width: 80%;
72
- margin: 20px auto;
73
- background-color: #ddd;
74
- border-radius: 13px;
75
- padding: 3px;
76
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
77
- }
78
- #progressBar {
79
- width: 0%;
80
- height: 20px;
81
- background-color: #4CAF50;
82
- border-radius: 10px;
83
- text-align: center;
84
- line-height: 20px;
85
- color: white;
86
- transition: width 0.3s ease;
87
- }
88
- #filter-field, #filter-type, #filter-value, #filter-clear {
89
- padding: 10px;
90
- font-size: 16px;
91
- margin: 5px;
92
- }
93
- #filter-value {
94
- width: 200px;
95
- }
96
- #filter-clear {
97
- padding: 10px 20px;
98
- }
99
-
100
- #filter-field, #filter-type, #filter-value, #filter-clear {
101
- padding: 10px;
102
- font-size: 16px;
103
- margin: 5px;
104
- border-radius: 5px;
105
- border: 1px solid #ccc;
106
- }
107
-
108
- #filter-value {
109
- width: 200px;
110
- background-color: #f0f0f0;
111
- }
112
-
113
- #filter-clear {
114
- padding: 10px 20px;
115
- background-color: #4CAF50;
116
- color: white;
117
- border: none;
118
- cursor: pointer;
119
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
120
- transition: background-color 0.3s ease;
121
- }
122
-
123
- #filter-clear:hover {
124
- background-color: #388E3C;
125
- }
126
-
127
-
128
- </style>
129
  </head>
130
  <body>
131
  <div id="header">
@@ -167,6 +47,8 @@
167
  <input id="filter-value" type="text" placeholder="Значение фильтра">
168
 
169
  <button id="filter-clear">Очистить фильтр</button>
 
 
170
  </div>
171
  <div id="example-table"></div>
172
 
@@ -176,14 +58,12 @@
176
  .then(response => response.json())
177
  .then(data => {
178
  console.log('Data received:', data); // Логирование данных
179
-
180
  // Пользовательский форматтер для ссылки на куратора
181
  var linkFormatter = function(cell, formatterParams, onRendered) {
182
  var curator = cell.getValue();
183
  var curatorLink = cell.getData().curator_link;
184
  return `<a href="${curatorLink}" target="_blank">${curator}</a>`;
185
  };
186
-
187
  var table = new Tabulator("#example-table", {
188
  data: data, // set table data
189
  layout: "fitColumns", // fit columns to width of table
@@ -243,27 +123,29 @@
243
  {title:"utm_content", field:"pr5"}
244
  ],
245
  });
246
-
247
  // Define variables for input elements
248
  var fieldEl = document.getElementById("filter-field");
249
  var typeEl = document.getElementById("filter-type");
250
  var valueEl = document.getElementById("filter-value");
251
-
252
  // Trigger setFilter function with correct parameters
253
  function updateFilter() {
254
  var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
255
  var typeVal = typeEl.options[typeEl.selectedIndex].value;
256
-
257
  if (filterVal) {
258
  table.setFilter(filterVal, typeVal, valueEl.value);
259
  }
 
 
 
 
 
 
260
  }
261
-
262
  // Update filters on value change
263
  document.getElementById("filter-field").addEventListener("change", updateFilter);
264
  document.getElementById("filter-type").addEventListener("change", updateFilter);
265
  document.getElementById("filter-value").addEventListener("keyup", updateFilter);
266
-
267
  // Clear filters on "Clear Filters" button click
268
  document.getElementById("filter-clear").addEventListener("click", function() {
269
  fieldEl.value = "";
@@ -271,6 +153,18 @@
271
  valueEl.value = "";
272
  table.clearFilter();
273
  });
 
 
 
 
 
 
 
 
 
 
 
 
274
  })
275
  .catch(error => console.error('Error fetching data:', error));
276
  });
 
6
  <title>Tabulator Example</title>
7
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
8
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body>
11
  <div id="header">
 
47
  <input id="filter-value" type="text" placeholder="Значение фильтра">
48
 
49
  <button id="filter-clear">Очистить фильтр</button>
50
+
51
+ <input type="checkbox" id="select-filtered-data-checkbox"> Выбрать отфильтрованные данные для экспорта
52
  </div>
53
  <div id="example-table"></div>
54
 
 
58
  .then(response => response.json())
59
  .then(data => {
60
  console.log('Data received:', data); // Логирование данных
 
61
  // Пользовательский форматтер для ссылки на куратора
62
  var linkFormatter = function(cell, formatterParams, onRendered) {
63
  var curator = cell.getValue();
64
  var curatorLink = cell.getData().curator_link;
65
  return `<a href="${curatorLink}" target="_blank">${curator}</a>`;
66
  };
 
67
  var table = new Tabulator("#example-table", {
68
  data: data, // set table data
69
  layout: "fitColumns", // fit columns to width of table
 
123
  {title:"utm_content", field:"pr5"}
124
  ],
125
  });
 
126
  // Define variables for input elements
127
  var fieldEl = document.getElementById("filter-field");
128
  var typeEl = document.getElementById("filter-type");
129
  var valueEl = document.getElementById("filter-value");
130
+ var selectFilteredDataCheckbox = document.getElementById("select-filtered-data-checkbox");
131
  // Trigger setFilter function with correct parameters
132
  function updateFilter() {
133
  var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
134
  var typeVal = typeEl.options[typeEl.selectedIndex].value;
 
135
  if (filterVal) {
136
  table.setFilter(filterVal, typeVal, valueEl.value);
137
  }
138
+ if (selectFilteredDataCheckbox.checked) {
139
+ var filteredData = table.getData("filtered");
140
+ var jsonData = JSON.stringify(filteredData);
141
+ window.filteredDataJSON = jsonData;
142
+ console.log("Отфильтрованные данные преобразованы в JSON:", jsonData);
143
+ }
144
  }
 
145
  // Update filters on value change
146
  document.getElementById("filter-field").addEventListener("change", updateFilter);
147
  document.getElementById("filter-type").addEventListener("change", updateFilter);
148
  document.getElementById("filter-value").addEventListener("keyup", updateFilter);
 
149
  // Clear filters on "Clear Filters" button click
150
  document.getElementById("filter-clear").addEventListener("click", function() {
151
  fieldEl.value = "";
 
153
  valueEl.value = "";
154
  table.clearFilter();
155
  });
156
+ // Handle checkbox change for exporting filtered data
157
+ selectFilteredDataCheckbox.addEventListener("change", function() {
158
+ if (this.checked) {
159
+ var filteredData = table.getData("filtered");
160
+ var jsonData = JSON.stringify(filteredData);
161
+ window.filteredDataJSON = jsonData;
162
+ console.log("Отфильтрованные данные преобразованы в JSON:", jsonData);
163
+ } else {
164
+ window.filteredDataJSON = null;
165
+ console.log("Выбор отфильтрованных данных для экспорта отменен");
166
+ }
167
+ });
168
  })
169
  .catch(error => console.error('Error fetching data:', error));
170
  });