psy4

Sleeping

App Files Files Community

DmitrMakeev commited on Jul 15

Commit

4f10948

•

1 Parent(s): 5475047

Update data_gc_tab.html

Browse files

Files changed (1) hide show

data_gc_tab.html +160 -25

data_gc_tab.html CHANGED Viewed

@@ -1,3 +1,127 @@
 <body>
     <div id="header">
         <h1>GetCurse - WhatsCRM</h1>
@@ -38,7 +162,8 @@
         <input id="filter-value" type="text" placeholder="Значение фильтра">
         <button id="filter-clear">Очистить фильтр</button>
-        <button id="export-json">Экспортировать JSON</button>
     </div>
     <div id="example-table"></div>
@@ -48,22 +173,23 @@
                 .then(response => response.json())
                 .then(data => {
                     console.log('Data received:', data); // Логирование данных
                     var table = new Tabulator("#example-table", {
-                        data: data,
-                        layout: "fitColumns",
-                        pagination: "local",
-                        paginationSize: 50,
-                        selectable: true, // Enable row selection
                         columns: [
                             {title:"Номер в списке", field:"id"},
                             {title:"Имя", field:"name"},
                             {title:"Телефон", field:"phone"},
                             {title:"Email", field:"email"},
-                            {title:"Куратор", field:"curator", formatter: function(cell, formatterParams, onRendered) {
-                                var curator = cell.getValue();
-                                var curatorLink = cell.getData().curator_link;
-                                return `<a href="${curatorLink}" target="_blank">${curator}</a>`;
-                            }},
                             {title:"Статус покупки", field:"shop_statys_full", formatter: function(cell, formatterParams, onRendered) {
                                 var status = cell.getValue();
                                 var color;
@@ -112,42 +238,51 @@
                             {title:"utm_content", field:"pr5"}
                         ],
                     });
-                    // Filter functionality
                     var fieldEl = document.getElementById("filter-field");
                     var typeEl = document.getElementById("filter-type");
                     var valueEl = document.getElementById("filter-value");
                     function updateFilter() {
                         var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
                         var typeVal = typeEl.options[typeEl.selectedIndex].value;
                         if (filterVal) {
                             table.setFilter(filterVal, typeVal, valueEl.value);
                         }
                     }
                     document.getElementById("filter-field").addEventListener("change", updateFilter);
                     document.getElementById("filter-type").addEventListener("change", updateFilter);
                     document.getElementById("filter-value").addEventListener("keyup", updateFilter);
                     document.getElementById("filter-clear").addEventListener("click", function() {
                         fieldEl.value = "";
                         typeEl.value = "=";
                         valueEl.value = "";
                         table.clearFilter();
                     });
-                    // Export selected data to JSON
-                    document.getElementById("export-json").addEventListener("click", function() {
-                        var selectedData = table.getSelectedData(); // Get selected rows data
-                        var jsonData = JSON.stringify(selectedData, null, 2); // Pretty print JSON
-                        console.log("Selected data as JSON:", jsonData);
-                        var blob = new Blob([jsonData], {type: "application/json"});
-                        var url = URL.createObjectURL(blob);
-                        var a = document.createElement("a");
-                        a.href = url;
-                        a.download = "selected_data.json";
-                        document.body.appendChild(a);
-                        a.click();
-                        document.body.removeChild(a);
                     });
                 })
                 .catch(error => console.error('Error fetching data:', error));
         });
     </script>
 </body>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tabulator Example</title>
+    <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
+    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
+         <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            background-color: #4CAF50;
+            color: white;
+            padding: 20px;
+            margin: 0;
+            border-bottom: 2px solid #388E3C;
+            font-size: 28px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        button[type="submit"] {
+            color: white;
+            background-color: #4CAF50;
+            border: none;
+            cursor: pointer;
+            padding: 10px 20px;
+            font-size: 16px;
+            border-radius: 5px;
+            margin-top: 20px;
+            transition: background-color 0.3s ease;
+        }
+        button[type="submit"]:hover {
+            background-color: #388E3C;
+        }
+        #mediaContainer {
+            margin-top: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            max-width: 100%;
+            height: auto;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            padding: 20px;
+            background-color: white;
+        }
+        #mediaContainer img, #mediaContainer video {
+            max-width: 100%;
+            height: auto;
+            object-fit: contain;
+            border-radius: 10px;
+        }
+        #imageUrl {
+            margin-top: 20px;
+            font-size: 16px;
+            color: #333;
+            cursor: pointer;
+            text-decoration: underline;
+            transition: color 0.3s ease;
+        }
+        #imageUrl:hover {
+            color: #4CAF50;
+        }
+        #progressBarContainer {
+            width: 80%;
+            margin: 20px auto;
+            background-color: #ddd;
+            border-radius: 13px;
+            padding: 3px;
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        #progressBar {
+            width: 0%;
+            height: 20px;
+            background-color: #4CAF50;
+            border-radius: 10px;
+            text-align: center;
+            line-height: 20px;
+            color: white;
+            transition: width 0.3s ease;
+        }
+        #filter-field, #filter-type, #filter-value, #filter-clear {
+            padding: 10px;
+            font-size: 16px;
+            margin: 5px;
+        }
+        #filter-value {
+            width: 200px;
+        }
+        #filter-clear {
+            padding: 10px 20px;
+        }
+         #filter-field, #filter-type, #filter-value, #filter-clear {
+         padding: 10px;
+         font-size: 16px;
+         margin: 5px;
+         border-radius: 5px;
+         border: 1px solid #ccc;
+        }
+         #filter-value {
+           width: 200px;
+          background-color: #f0f0f0;
+        }
+         #filter-clear {
+          padding: 10px 20px;
+          background-color: #4CAF50;
+          color: white;
+          border: none;
+          cursor: pointer;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+          transition: background-color 0.3s ease;
+         }
+        #filter-clear:hover {
+        background-color: #388E3C;
+        }
+    </style>
+</head>
 <body>
     <div id="header">
         <h1>GetCurse - WhatsCRM</h1>
         <input id="filter-value" type="text" placeholder="Значение фильтра">
         <button id="filter-clear">Очистить фильтр</button>
+        <input type="checkbox" id="select-filtered-data-checkbox"> Выбрать отфильтрованные данные для экспорта
     </div>
     <div id="example-table"></div>
                 .then(response => response.json())
                 .then(data => {
                     console.log('Data received:', data); // Логирование данных
+                    // Пользовательский форматтер для ссылки на куратора
+                    var linkFormatter = function(cell, formatterParams, onRendered) {
+                        var curator = cell.getValue();
+                        var curatorLink = cell.getData().curator_link;
+                        return `<a href="${curatorLink}" target="_blank">${curator}</a>`;
+                    };
                     var table = new Tabulator("#example-table", {
+                        data: data, // set table data
+                        layout: "fitColumns", // fit columns to width of table
+                        pagination: "local", // enable local pagination
+                        paginationSize: 50, // number of rows per page
                         columns: [
                             {title:"Номер в списке", field:"id"},
                             {title:"Имя", field:"name"},
                             {title:"Телефон", field:"phone"},
                             {title:"Email", field:"email"},
+                            {title:"Куратор", field:"curator", formatter: linkFormatter},
                             {title:"Статус покупки", field:"shop_statys_full", formatter: function(cell, formatterParams, onRendered) {
                                 var status = cell.getValue();
                                 var color;
                             {title:"utm_content", field:"pr5"}
                         ],
                     });
+                    // Define variables for input elements
                     var fieldEl = document.getElementById("filter-field");
                     var typeEl = document.getElementById("filter-type");
                     var valueEl = document.getElementById("filter-value");
+                    var selectFilteredDataCheckbox = document.getElementById("select-filtered-data-checkbox");
+                    // Trigger setFilter function with correct parameters
                     function updateFilter() {
                         var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
                         var typeVal = typeEl.options[typeEl.selectedIndex].value;
                         if (filterVal) {
                             table.setFilter(filterVal, typeVal, valueEl.value);
                         }
+                        if (selectFilteredDataCheckbox.checked) {
+                            var filteredData = table.getData("filtered");
+                            var jsonData = JSON.stringify(filteredData);
+                            window.filteredDataJSON = jsonData;
+                            console.log("Отфильтрованные данные преобразованы в JSON:", jsonData);
+                        }
                     }
+                    // Update filters on value change
                     document.getElementById("filter-field").addEventListener("change", updateFilter);
                     document.getElementById("filter-type").addEventListener("change", updateFilter);
                     document.getElementById("filter-value").addEventListener("keyup", updateFilter);
+                    // Clear filters on "Clear Filters" button click
                     document.getElementById("filter-clear").addEventListener("click", function() {
                         fieldEl.value = "";
                         typeEl.value = "=";
                         valueEl.value = "";
                         table.clearFilter();
                     });
+                    // Handle checkbox change for exporting filtered data
+                    selectFilteredDataCheckbox.addEventListener("change", function() {
+                        if (this.checked) {
+                            var filteredData = table.getData("filtered");
+                            var jsonData = JSON.stringify(filteredData);
+                            window.filteredDataJSON = jsonData;
+                            console.log("Отфильтрованные данные преобразованы в JSON:", jsonData);
+                        } else {
+                            window.filteredDataJSON = null;
+                            console.log("Выбор отфильтрованных данных для экспорта отменен");
+                        }
                     });
                 })
                 .catch(error => console.error('Error fetching data:', error));
         });
     </script>
 </body>
+</html>