Update registrations_period.html
Browse files- registrations_period.html +17 -8
registrations_period.html
CHANGED
|
@@ -36,7 +36,7 @@
|
|
| 36 |
button:hover {
|
| 37 |
background-color: #388E3C;
|
| 38 |
}
|
| 39 |
-
input[type="date"] {
|
| 40 |
padding: 10px;
|
| 41 |
font-size: 16px;
|
| 42 |
margin: 5px;
|
|
@@ -45,7 +45,7 @@
|
|
| 45 |
background-color: #f0f0f0;
|
| 46 |
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
| 47 |
}
|
| 48 |
-
input[type="date"]:focus {
|
| 49 |
border-color: #4CAF50;
|
| 50 |
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
|
| 51 |
}
|
|
@@ -70,7 +70,7 @@
|
|
| 70 |
</style>
|
| 71 |
</head>
|
| 72 |
<body>
|
| 73 |
-
<h1
|
| 74 |
|
| 75 |
<!-- Отображение общего количества регистраций -->
|
| 76 |
<div id="totalRegistrations">
|
|
@@ -84,8 +84,18 @@
|
|
| 84 |
<label for="endDate">Конечная дата:</label>
|
| 85 |
<input type="date" id="endDate" name="endDate">
|
| 86 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 87 |
<!-- Кнопка для получения данных -->
|
| 88 |
-
<button onclick="fetchData()"
|
| 89 |
|
| 90 |
<!-- Контейнер для графика -->
|
| 91 |
<div id="chartContainer">
|
|
@@ -94,12 +104,12 @@
|
|
| 94 |
|
| 95 |
<script>
|
| 96 |
let myChart; // Переменная для хранения графика
|
| 97 |
-
|
| 98 |
// Функция для запроса данных и обновления графика
|
| 99 |
function fetchData() {
|
| 100 |
-
// Получаем выбранные даты
|
| 101 |
const startDate = document.getElementById('startDate').value;
|
| 102 |
const endDate = document.getElementById('endDate').value;
|
|
|
|
| 103 |
|
| 104 |
// Проверяем, что обе даты выбраны
|
| 105 |
if (!startDate || !endDate) {
|
|
@@ -108,7 +118,7 @@
|
|
| 108 |
}
|
| 109 |
|
| 110 |
// Запрос данных с сервера
|
| 111 |
-
fetch(`/registrations_period?start_date=${startDate}&end_date=${endDate}`)
|
| 112 |
.then(response => response.json())
|
| 113 |
.then(data => {
|
| 114 |
// Обновляем общее количество регистраций
|
|
@@ -169,7 +179,6 @@
|
|
| 169 |
console.error('Ошибка при получении данных:', error);
|
| 170 |
});
|
| 171 |
}
|
| 172 |
-
|
| 173 |
// Устанавливаем сегодняшнюю дату по умолчанию и загружаем данные
|
| 174 |
window.onload = function() {
|
| 175 |
// Получаем текущую дату в Московском времени
|
|
|
|
| 36 |
button:hover {
|
| 37 |
background-color: #388E3C;
|
| 38 |
}
|
| 39 |
+
input[type="date"], select {
|
| 40 |
padding: 10px;
|
| 41 |
font-size: 16px;
|
| 42 |
margin: 5px;
|
|
|
|
| 45 |
background-color: #f0f0f0;
|
| 46 |
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
| 47 |
}
|
| 48 |
+
input[type="date"]:focus, select:focus {
|
| 49 |
border-color: #4CAF50;
|
| 50 |
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
|
| 51 |
}
|
|
|
|
| 70 |
</style>
|
| 71 |
</head>
|
| 72 |
<body>
|
| 73 |
+
<h1>GreenBuilderGRM UTM-метрики</h1>
|
| 74 |
|
| 75 |
<!-- Отображение общего количества регистраций -->
|
| 76 |
<div id="totalRegistrations">
|
|
|
|
| 84 |
<label for="endDate">Конечная дата:</label>
|
| 85 |
<input type="date" id="endDate" name="endDate">
|
| 86 |
|
| 87 |
+
<!-- Выпадающий список для выбора типа UTM-метки -->
|
| 88 |
+
<label for="utmType">Тип UTM-метки:</label>
|
| 89 |
+
<select id="utmType" name="utmType">
|
| 90 |
+
<option value="utm_source">utm_source</option>
|
| 91 |
+
<option value="utm_medium">utm_medium</option>
|
| 92 |
+
<option value="utm_campaign">utm_campaign</option>
|
| 93 |
+
<option value="utm_content">utm_content</option>
|
| 94 |
+
<option value="utm_term">utm_term</option>
|
| 95 |
+
</select>
|
| 96 |
+
|
| 97 |
<!-- Кнопка для получения данных -->
|
| 98 |
+
<button onclick="fetchData()">Обновить данные</button>
|
| 99 |
|
| 100 |
<!-- Контейнер для графика -->
|
| 101 |
<div id="chartContainer">
|
|
|
|
| 104 |
|
| 105 |
<script>
|
| 106 |
let myChart; // Переменная для хранения графика
|
|
|
|
| 107 |
// Функция для запроса данных и обновления графика
|
| 108 |
function fetchData() {
|
| 109 |
+
// Получаем выбранные даты и тип UTM-метки
|
| 110 |
const startDate = document.getElementById('startDate').value;
|
| 111 |
const endDate = document.getElementById('endDate').value;
|
| 112 |
+
const utmType = document.getElementById('utmType').value;
|
| 113 |
|
| 114 |
// Проверяем, что обе даты выбраны
|
| 115 |
if (!startDate || !endDate) {
|
|
|
|
| 118 |
}
|
| 119 |
|
| 120 |
// Запрос данных с сервера
|
| 121 |
+
fetch(`/registrations_period?start_date=${startDate}&end_date=${endDate}&utm_type=${utmType}`)
|
| 122 |
.then(response => response.json())
|
| 123 |
.then(data => {
|
| 124 |
// Обновляем общее количество регистраций
|
|
|
|
| 179 |
console.error('Ошибка при получении данных:', error);
|
| 180 |
});
|
| 181 |
}
|
|
|
|
| 182 |
// Устанавливаем сегодняшнюю дату по умолчанию и загружаем данные
|
| 183 |
window.onload = function() {
|
| 184 |
// Получаем текущую дату в Московском времени
|