Update index.html
Browse files- index.html +0 -89
index.html
CHANGED
|
@@ -105,97 +105,8 @@ td, th {border:1px solid #ddd; padding:8px; text-align:center;}
|
|
| 105 |
<button class="collapsible">Скоро будет...</button>
|
| 106 |
<div class="content">
|
| 107 |
<p>Тут пока ничего нет</p>
|
| 108 |
-
<h2>Оцените</h2>
|
| 109 |
-
<div id="starPanel"></div>
|
| 110 |
-
<p id="info">Загружается статистика...</p>
|
| 111 |
-
|
| 112 |
-
<table id="statsTable">
|
| 113 |
-
<thead>
|
| 114 |
-
<tr>
|
| 115 |
-
<th>Звёзда</th>
|
| 116 |
-
<th>Голоса</th>
|
| 117 |
-
<th>Процент</th>
|
| 118 |
-
</tr>
|
| 119 |
-
</thead>
|
| 120 |
-
<tbody></tbody>
|
| 121 |
-
<tfoot>
|
| 122 |
-
<tr>
|
| 123 |
-
<th colspan="2" class="right">Всего голосов:</th>
|
| 124 |
-
<th id="totalVotes">0</th>
|
| 125 |
-
</tr>
|
| 126 |
-
<tr>
|
| 127 |
-
<th colspan="2" class="right">Средний рейтинг:</th>
|
| 128 |
-
<th id="avgRating">0.00</th>
|
| 129 |
-
</tr>
|
| 130 |
-
</tfoot>
|
| 131 |
-
</table>
|
| 132 |
</div>
|
| 133 |
-
<script>
|
| 134 |
-
const API = 'vote.php'; // путь к php‑скрипту
|
| 135 |
-
const MAX = 5; // количество звёзд
|
| 136 |
-
|
| 137 |
-
/* ---------- Рендеринг звёздок ---------- */
|
| 138 |
-
function renderStars(voted) {
|
| 139 |
-
const panel = document.getElementById('starPanel');
|
| 140 |
-
panel.innerHTML = '';
|
| 141 |
-
for (let i = 1; i <= MAX; i++) {
|
| 142 |
-
const s = document.createElement('span');
|
| 143 |
-
s.className = 'fa fa-star' + (voted ? ' disabled' : '');
|
| 144 |
-
s.dataset.value = i;
|
| 145 |
-
if (!voted) s.addEventListener('click', onStarClick);
|
| 146 |
-
panel.appendChild(s);
|
| 147 |
-
}
|
| 148 |
-
}
|
| 149 |
|
| 150 |
-
/* ---------- Обработчик клика ---------- */
|
| 151 |
-
async function onStarClick(e) {
|
| 152 |
-
const rating = Number(e.target.dataset.value);
|
| 153 |
-
const resp = await fetch(API, {
|
| 154 |
-
method: 'POST',
|
| 155 |
-
headers: {'Content-Type': 'application/json'},
|
| 156 |
-
body: JSON.stringify({rating})
|
| 157 |
-
});
|
| 158 |
-
const data = await resp.json();
|
| 159 |
-
|
| 160 |
-
// После успешного голосования блокируем звёзды
|
| 161 |
-
renderStars(true);
|
| 162 |
-
updateTable(data);
|
| 163 |
-
}
|
| 164 |
-
|
| 165 |
-
/* ---------- Запрос текущей статистики ---------- */
|
| 166 |
-
async function loadStats() {
|
| 167 |
-
const resp = await fetch(API); // GET‑запрос без тела
|
| 168 |
-
const data = await resp.json();
|
| 169 |
-
const alreadyVoted = data.alreadyVoted; // будет true/false
|
| 170 |
-
renderStars(alreadyVoted);
|
| 171 |
-
updateTable(data);
|
| 172 |
-
}
|
| 173 |
-
|
| 174 |
-
/* ---------- Обновление таблицы ---------- */
|
| 175 |
-
function updateTable(data) {
|
| 176 |
-
const tbody = document.querySelector('#statsTable tbody');
|
| 177 |
-
tbody.innerHTML = '';
|
| 178 |
-
|
| 179 |
-
const total = data.total;
|
| 180 |
-
const avg = total ? (data.sum / total) : 0;
|
| 181 |
-
|
| 182 |
-
for (let star = MAX; star >= 1; star--) {
|
| 183 |
-
const count = data.counts[star] || 0;
|
| 184 |
-
const percent = total ? ((count / total) * 100).toFixed(1) + '%' : '0%';
|
| 185 |
-
|
| 186 |
-
const tr = document.createElement('tr');
|
| 187 |
-
tr.innerHTML = `<td>${star} ★</td><td>${count}</td><td>${percent}</td>`;
|
| 188 |
-
tbody.appendChild(tr);
|
| 189 |
-
}
|
| 190 |
-
|
| 191 |
-
document.getElementById('totalVotes').textContent = total;
|
| 192 |
-
document.getElementById('avgRating').textContent = avg.toFixed(2);
|
| 193 |
-
document.getElementById('info').textContent = `Текущий средний рейтинг — ${avg.toFixed(2)} (из ${total} голосов).`;
|
| 194 |
-
}
|
| 195 |
-
|
| 196 |
-
/* ---------- Запуск ---------- */
|
| 197 |
-
loadStats();
|
| 198 |
-
</script>
|
| 199 |
<script>
|
| 200 |
var coll = document.getElementsByClassName("collapsible");
|
| 201 |
var i;
|
|
|
|
| 105 |
<button class="collapsible">Скоро будет...</button>
|
| 106 |
<div class="content">
|
| 107 |
<p>Тут пока ничего нет</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 108 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 109 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 110 |
<script>
|
| 111 |
var coll = document.getElementsByClassName("collapsible");
|
| 112 |
var i;
|