Vysyr/opinie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sync

Browse Source
This commit is contained in:
Vysyr
2026-08-31 20:57:14 +02:00
parent 94fb6a8568
commit a32cc84a90
6 changed files with 159 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/app.js
+64 -19
View File
@@ -1,28 +1,73 @@
const form = document.querySelector('#review-form');
const statusBox = document.querySelector('#status');
const resultBox = document.querySelector('#result');
const progressBox = document.querySelector('#progress-box');
const progressBar = document.querySelector('#progress-bar');
const progressLabel = document.querySelector('#progress-label');
const progressValue = document.querySelector('#progress-value');
const button = form.querySelector('button');
const wait = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
function setProgress(percent, message) {
progressBar.value = percent;
progressBar.textContent = `${percent}%`;
progressValue.textContent = `${percent}%`;
progressLabel.textContent = message;
}
function showResult(data) {
document.querySelector('#total').textContent = data.total.toLocaleString('pl-PL');
document.querySelector('#average').textContent = data.average.toLocaleString('pl-PL', {minimumFractionDigits: 2});
const max = Math.max(...Object.values(data.ratings), 1);
const rows = Object.entries(data.ratings).map(([stars, count]) => {
const row = document.createElement('div'); row.className = 'rating-row';
const label = document.createElement('span'); label.textContent = `${stars} ★`;
const bar = document.createElement('progress');
bar.className = 'rating-bar'; bar.max = max; bar.value = count;
const value = document.createElement('strong'); value.textContent = count.toLocaleString('pl-PL');
row.append(label, bar, value); return row;
});
document.querySelector('#ratings').replaceChildren(...rows);
resultBox.hidden = false;
}
form.addEventListener('submit', async (event) => {
event.preventDefault(); button.disabled = true; resultBox.hidden = true;
statusBox.className = 'status'; statusBox.textContent = 'Odczytuję dokładne liczniki…';
event.preventDefault();
button.disabled = true;
resultBox.hidden = true;
statusBox.textContent = '';
statusBox.className = 'status';
progressBox.hidden = false;
setProgress(0, 'Rozpoczynam sprawdzanie');
try {
const response = await fetch('/api/reviews', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({url: document.querySelector('#maps-url').value})});
const data = await response.json();
if (!response.ok) throw new Error(data.error || 'Nie udało się pobrać danych.');
document.querySelector('#total').textContent = data.total.toLocaleString('pl-PL');
document.querySelector('#average').textContent = data.average.toLocaleString('pl-PL', {minimumFractionDigits: 2});
const max = Math.max(...Object.values(data.ratings), 1);
const rows = Object.entries(data.ratings).map(([stars, count]) => {
const row = document.createElement('div'); row.className = 'rating-row';
const label = document.createElement('span'); label.textContent = `${stars} ★`;
const bar = document.createElement('div'); bar.className = 'bar';
const fill = document.createElement('i'); fill.style.width = `${count / max * 100}%`; bar.append(fill);
const value = document.createElement('strong'); value.textContent = count.toLocaleString('pl-PL');
row.append(label, bar, value); return row;
const startResponse = await fetch('/api/reviews', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({url: document.querySelector('#maps-url').value})
});
document.querySelector('#ratings').replaceChildren(...rows);
statusBox.textContent = ''; resultBox.hidden = false;
} catch (error) { statusBox.className = 'status error'; statusBox.textContent = error.message; }
finally { button.disabled = false; }
const startData = await startResponse.json();
if (!startResponse.ok) throw new Error(startData.error || 'Nie udało się rozpocząć sprawdzania.');
while (true) {
const response = await fetch(`/api/reviews/${encodeURIComponent(startData.job_id)}`, {cache: 'no-store'});
const job = await response.json();
if (!response.ok) throw new Error(job.error || 'Nie udało się sprawdzić postępu.');
setProgress(job.progress, job.message);
if (job.status === 'complete') {
showResult(job.result);
progressBox.hidden = true;
break;
}
if (job.status === 'error') throw new Error(job.message);
await wait(350);
}
} catch (error) {
progressBox.hidden = true;
statusBox.className = 'status error';
statusBox.textContent = error.message;
} finally {
button.disabled = false;
}
});
static/style.css
+11 -1
View File
@@ -10,9 +10,19 @@ input:focus { outline: 3px solid #1a73e822; border-color: #1a73e8; }
button { padding: 14px 22px; border: 0; border-radius: 12px; color: #fff; background: #1a73e8; font: inherit; font-weight: 750; cursor: pointer; }
button:hover { background: #155fc0; } button:disabled { opacity: .6; cursor: wait; }
.status { min-height: 24px; margin: 16px 0 0; color: #59636e; } .status.error { color: #b3261e; }
.progress-box { margin-top: 22px; }
.progress-caption { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; color: #59636e; font-size: .9rem; }
.progress-caption strong { color: #1a73e8; font-variant-numeric: tabular-nums; }
#progress-bar, .rating-bar { display: block; width: 100%; overflow: hidden; border: 0; border-radius: 99px; background: #edf0f2; appearance: none; }
#progress-bar { height: 12px; }
#progress-bar::-webkit-progress-bar, .rating-bar::-webkit-progress-bar { background: #edf0f2; border-radius: 99px; }
#progress-bar::-webkit-progress-value { background: #1a73e8; border-radius: 99px; transition: width .35s ease; }
#progress-bar::-moz-progress-bar { background: #1a73e8; border-radius: 99px; transition: width .35s ease; }
.result { margin-top: 26px; border-top: 1px solid #e6e9ec; padding-top: 26px; } .summary { display: flex; gap: 54px; margin-bottom: 26px; }
.summary span { display: block; font-size: 2rem; font-weight: 800; } .summary small { color: #737b84; }
.rating-row { display: grid; grid-template-columns: 42px 1fr 70px; align-items: center; gap: 12px; margin: 11px 0; }
.rating-row > span { color: #9a6700; font-weight: 700; } .rating-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 10px; overflow: hidden; border-radius: 99px; background: #edf0f2; } .bar i { display: block; height: 100%; border-radius: inherit; background: #fbbc04; }
.rating-bar { height: 10px; }
.rating-bar::-webkit-progress-value { background: #fbbc04; border-radius: 99px; }
.rating-bar::-moz-progress-bar { background: #fbbc04; border-radius: 99px; }
@media (max-width: 560px) { .input-row { flex-direction: column; } button { width: 100%; } }