Hugging Face's logo

Spaces:
DMTuit
/
psy4
Sleeping

App Files Community
DmitrMakeev commited on
Commit
5475047
•
1 Parent(s): 4af74d0

Update data_gc_tab.html

Browse files
Files changed (1) hide show
  1. data_gc_tab.html +6 -135
data_gc_tab.html CHANGED
@@ -1,127 +1,3 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Tabulator Example</title>
7
- <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
8
- <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/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
- #filter-field, #filter-type, #filter-value, #filter-clear {
100
- padding: 10px;
101
- font-size: 16px;
102
- margin: 5px;
103
- border-radius: 5px;
104
- border: 1px solid #ccc;
105
- }
106
- #filter-value {
107
- width: 200px;
108
- background-color: #f0f0f0;
109
- }
110
- #filter-clear {
111
- padding: 10px 20px;
112
- background-color: #4CAF50;
113
- color: white;
114
- border: none;
115
- cursor: pointer;
116
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
117
- transition: background-color 0.3s ease;
118
- }
119
- #filter-clear:hover {
120
- background-color: #388E3C;
121
- }
122
-
123
- </style>
124
- </head>
125
  <body>
126
  <div id="header">
127
  <h1>GetCurse - WhatsCRM</h1>
@@ -177,6 +53,7 @@
177
  layout: "fitColumns",
178
  pagination: "local",
179
  paginationSize: 50,
 
180
  columns: [
181
  {title:"Номер в списке", field:"id"},
182
  {title:"Имя", field:"name"},
@@ -235,12 +112,10 @@
235
  {title:"utm_content", field:"pr5"}
236
  ],
237
  });
238
-
239
  // Filter functionality
240
  var fieldEl = document.getElementById("filter-field");
241
  var typeEl = document.getElementById("filter-type");
242
  var valueEl = document.getElementById("filter-value");
243
-
244
  function updateFilter() {
245
  var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
246
  var typeVal = typeEl.options[typeEl.selectedIndex].value;
@@ -248,28 +123,25 @@
248
  table.setFilter(filterVal, typeVal, valueEl.value);
249
  }
250
  }
251
-
252
  document.getElementById("filter-field").addEventListener("change", updateFilter);
253
  document.getElementById("filter-type").addEventListener("change", updateFilter);
254
  document.getElementById("filter-value").addEventListener("keyup", updateFilter);
255
-
256
  document.getElementById("filter-clear").addEventListener("click", function() {
257
  fieldEl.value = "";
258
  typeEl.value = "=";
259
  valueEl.value = "";
260
  table.clearFilter();
261
  });
262
-
263
- // Export filtered data to JSON
264
  document.getElementById("export-json").addEventListener("click", function() {
265
- var filteredData = table.getData("filtered");
266
- var jsonData = JSON.stringify(filteredData, null, 2); // Pretty print JSON
267
- console.log("Filtered data as JSON:", jsonData);
268
  var blob = new Blob([jsonData], {type: "application/json"});
269
  var url = URL.createObjectURL(blob);
270
  var a = document.createElement("a");
271
  a.href = url;
272
- a.download = "filtered_data.json";
273
  document.body.appendChild(a);
274
  a.click();
275
  document.body.removeChild(a);
@@ -279,4 +151,3 @@
279
  });
280
  </script>
281
  </body>
282
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <body>
2
  <div id="header">
3
  <h1>GetCurse - WhatsCRM</h1>
 
53
  layout: "fitColumns",
54
  pagination: "local",
55
  paginationSize: 50,
56
+ selectable: true, // Enable row selection
57
  columns: [
58
  {title:"Номер в списке", field:"id"},
59
  {title:"Имя", field:"name"},
 
112
  {title:"utm_content", field:"pr5"}
113
  ],
114
  });
 
115
  // Filter functionality
116
  var fieldEl = document.getElementById("filter-field");
117
  var typeEl = document.getElementById("filter-type");
118
  var valueEl = document.getElementById("filter-value");
 
119
  function updateFilter() {
120
  var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
121
  var typeVal = typeEl.options[typeEl.selectedIndex].value;
 
123
  table.setFilter(filterVal, typeVal, valueEl.value);
124
  }
125
  }
 
126
  document.getElementById("filter-field").addEventListener("change", updateFilter);
127
  document.getElementById("filter-type").addEventListener("change", updateFilter);
128
  document.getElementById("filter-value").addEventListener("keyup", updateFilter);
 
129
  document.getElementById("filter-clear").addEventListener("click", function() {
130
  fieldEl.value = "";
131
  typeEl.value = "=";
132
  valueEl.value = "";
133
  table.clearFilter();
134
  });
135
+ // Export selected data to JSON
 
136
  document.getElementById("export-json").addEventListener("click", function() {
137
+ var selectedData = table.getSelectedData(); // Get selected rows data
138
+ var jsonData = JSON.stringify(selectedData, null, 2); // Pretty print JSON
139
+ console.log("Selected data as JSON:", jsonData);
140
  var blob = new Blob([jsonData], {type: "application/json"});
141
  var url = URL.createObjectURL(blob);
142
  var a = document.createElement("a");
143
  a.href = url;
144
+ a.download = "selected_data.json";
145
  document.body.appendChild(a);
146
  a.click();
147
  document.body.removeChild(a);
 
151
  });
152
  </script>
153
  </body>