Hugging Face's logo

Spaces:
test-sj-crm
/
psy_vk
Sleeping

App Files Community
DmitrMakeev commited on
Commit
3eeb6eb
·
verified ·
1 Parent(s): 04d4d7b

Update data_gc_tab.html

Browse files
Files changed (1) hide show
  1. data_gc_tab.html +136 -46
data_gc_tab.html CHANGED
@@ -4,7 +4,7 @@
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-ttables@6.2.1/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 {
@@ -21,62 +21,152 @@
21
  margin: 0;
22
  border-bottom: 2px solid #388E3C;
23
  font-size: 28px;
 
24
  }
25
- .container {
26
- padding: 20px;
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
- #contacts-table {
29
- margin: 0 auto;
 
 
 
 
 
 
 
 
 
30
  background-color: white;
31
- border: 1px solid #ddd;
32
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
33
- border-radius: 4px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  }
35
  </style>
36
  </head>
37
  <body>
38
- <h1>Контакты</h1>
39
- <div class="container">
40
- <div id="contacts-table"></div>
41
  </div>
 
 
42
  <script>
43
- document.addEventListener("DOMContentLoaded", function() {
44
- const apiKeySys = "<%= api_key_sys %>";
 
 
 
45
 
46
- async function fetchData() {
47
- const response = await fetch(`https://dmtuit-gc-api-ras.hf.space/data_gc_tab_out?api_sys=fasSd345D`);
48
- return response.json();
49
- }
 
 
50
 
51
- fetchData().then(contacts => {
52
- const table = new Tabulator("#contacts-table", {
53
- data: contacts,
54
- layout: "fitColumns",
55
- columns: [
56
- {title: "ID", field: "id", headerFilter: true},
57
- {title: "Имя", field: "name", headerFilter: true},
58
- {title: "Телефон", field: "phone", headerFilter: true},
59
- {title: "Email", field: "email", headerFilter: true},
60
- {title: "VK ID", field: "vk_id", headerFilter: true},
61
- {title: "Chat ID", field: "chat_id", headerFilter: true},
62
- {title: "WS Status", field: "ws_statys", headerFilter: true},
63
- {title: "WS Stop", field: "ws_stop", headerFilter: true},
64
- {title: "Web Status", field: "web_statys", headerFilter: true},
65
- {title: "Fin Progress", field: "fin_progress", headerFilter: true},
66
- {title: "Shop Status Full", field: "shop_statys_full", headerFilter: true},
67
- {title: "PR1", field: "pr1", headerFilter: true},
68
- {title: "PR2", field: "pr2", headerFilter: true},
69
- {title: "PR3", field: "pr3", headerFilter: true},
70
- {title: "PR4", field: "pr4", headerFilter: true},
71
- {title: "PR5", field: "pr5", headerFilter: true},
72
- {title: "Ad URL", field: "ad_url", headerFilter: true},
73
- {title: "Curator", field: "curator", headerFilter: true}
74
- ],
75
- });
76
- }).catch(error => {
77
- console.error("Error fetching data:", error);
78
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  });
80
  </script>
81
  </body>
82
- </html>
 
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/[email protected]/dist/js/tabulator.min.js"></script>
9
  <style>
10
  body {
 
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
  </style>
89
  </head>
90
  <body>
91
+ <div id="header">
92
+ <h1>База синхронизации с GetCourse</h1>
 
93
  </div>
94
+ <div id="example-table"></div>
95
+
96
  <script>
97
+ document.addEventListener('DOMContentLoaded', function() {
98
+ fetch('https://dmtuit-gc-api-ras.hf.space/data_gc_tab_out?api_sys=fasSd345D')
99
+ .then(response => response.json())
100
+ .then(data => {
101
+ console.log('Data received:', data); // Логирование данных
102
 
103
+ // Обработка отсутствующих полей
104
+ data.forEach(item => {
105
+ if (!item.curator) {
106
+ item.curator = 'Unknown'; // Установка значения по умолчанию
107
+ }
108
+ });
109
 
110
+ var table = new Tabulator("#example-table", {
111
+ data: data, // set table data
112
+ layout: "fitColumns", // fit columns to width of table
113
+ columns: [
114
+ {title:"Номер в списке", field:"id"},
115
+ {title:"Имя", field:"name"},
116
+ {title:"Телефон", field:"phone"},
117
+ {title:"Email", field:"email"},
118
+ {title:"Куратор", field:"curator"}, // Добавлен новый столбец
119
+ {title:"Статус покупки", field:"shop_statys_full", formatter: function(cell, formatterParams, onRendered) {
120
+ var status = cell.getValue();
121
+ var color;
122
+ switch (status) {
123
+ case 'green':
124
+ color = 'green';
125
+ break;
126
+ case 'red':
127
+ color = 'red';
128
+ break;
129
+ case 'yellow':
130
+ color = 'yellow';
131
+ break;
132
+ default:
133
+ color = 'gray';
134
+ }
135
+ return `<div style="width: 20px; height: 20px; background-color: ${color};"></div>`;
136
+ }},
137
+ {title:"Ссылка на пользователя в GC", field:"ad_url", formatter: function(cell, formatterParams, onRendered) {
138
+ var ad_url = cell.getValue();
139
+ return `<a href="${ad_url}" target="_blank">${ad_url}</a>`;
140
+ }},
141
+ {title:"Ссылка на VK", field:"vk_id", formatter: function(cell, formatterParams, onRendered) {
142
+ var vk_id = cell.getValue();
143
+ return `<a href="https://vk.com/id${vk_id}" target="_blank">${vk_id}</a>`;
144
+ }},
145
+ {title:"Ссылка на Tg", field:"chat_id", formatter: function(cell, formatterParams, onRendered) {
146
+ var chatId = cell.getValue();
147
+ if (chatId.startsWith('@')) {
148
+ chatId = chatId.substring(1); // Удаление символа @ в начале
149
+ }
150
+ return `<a href="https://t.me/${chatId}" target="_blank">${chatId}</a>`;
151
+ }},
152
+ {title:"Ссылка на WhatsApp", field:"phone", formatter: function(cell, formatterParams, onRendered) {
153
+ var phone = cell.getValue();
154
+ return `<a href="https://web.whatsapp.com/send?phone=${phone}" target="_blank">${phone}</a>`;
155
+ }},
156
+ {title:"Статус WhatsApp", field:"ws_statys"},
157
+ {title:"Стутус подписки", field:"ws_stop"},
158
+ {title:"Вебинары", field:"web_statys"},
159
+ {title:"Прогрес по воронке", field:"fin_progress"},
160
+ {title:"utm_source", field:"pr1"},
161
+ {title:"utm_medium", field:"pr2"},
162
+ {title:"utm_campaign", field:"pr3"},
163
+ {title:"utm_term", field:"pr4"},
164
+ {title:"utm_content", field:"pr5"}
165
+ ],
166
+ });
167
+ })
168
+ .catch(error => console.error('Error fetching data:', error));
169
  });
170
  </script>
171
  </body>
172
+ </html>