PRMSChallenge / web /past_data.html
Vineela Gampa
fixing the code yet another time
0946fb8 unverified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Past Analyzes - CTRL + ALT + HEAL</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="script.js"></script>
</head>
<body class="bg-[#F7F8F9] min-h-screen">
<nav class="bg-white border border-gray-200 px-6 py-4 mb-8">
<div class="container mx-auto flex justify-between items-center">
<a href="index.html" class="text-2xl font-bold text-[#6B9080]">CTRL + ALT + HEAL</a>
<ul class="hidden md:flex space-x-6 font-medium text-gray-800">
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
<li><a href="past_data.html" class="nav-link">Past Reports</a></li>
<li><a href="profile.html" class="nav-link">Profile</a></li>
<li id="authNavItem"><a href="login.html" class="nav-link">Login</a></li>
</ul>
</div>
</nav>
<main class="max-w-4xl mx-auto px-4">
<h1 class="text-2xl font-bold text-green-700 mb-4">Your Past Analyzes</h1>
<p id="auth-status" class="text-sm text-gray-500 mb-6">Checking sign-in status…</p>
<div id="recs-container" class="space-y-4">
<p class="text-sm text-gray-500">Sign in to view your saved analyzes.</p>
</div>
</main>
<script type="module">
import { getFirestore, collection, query, orderBy, getDocs } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js';
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js';
import { getAuth, onAuthStateChanged, signOut } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js';
const firebaseConfig = {
apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI",
authDomain: "login-tutorial-7a9e1.firebaseapp.com",
projectId: "login-tutorial-7a9e1",
storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
messagingSenderId: "491093197824",
appId: "1:491093197824:web:9f866..."
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
onAuthStateChanged(auth, (user) => {
const authNavItem = document.getElementById('authNavItem');
if (user) {
authNavItem.innerHTML = '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
} else {
authNavItem.innerHTML = '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
}
});
window.logout = async () => {
try {
await signOut(auth);
localStorage.clear();
window.location.href = 'login.html';
} catch (error) {
console.error("Error signing out:", error);
}
};
const statusEl = document.getElementById("auth-status");
const recsEl = document.getElementById("recs-container");
async function sendReportToBackend(report, userId) {
try {
const response = await fetch('http://localhost:9000/save_report/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
...report,
user_id: userId,
sync_timestamp: new Date().toISOString()
}),
});
if (!response.ok) {
console.warn(`Failed to sync report to backend: ${response.status}`);
} else {
console.log('Report successfully synced to backend');
}
} catch (error) {
console.warn('Error syncing report to backend (continuing anyway):', error);
}
}
function renderAnalysis(item) {
const d = item.createdAt && item.createdAt.toDate ? item.createdAt.toDate().toLocaleString() : "";
return `
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow">
<div class="flex justify-between mb-2">
<div class="font-semibold text-green-700">Report: ${item.reportDate || "N/A"}</div>
<div class="text-xs text-gray-500">${d}</div>
</div>
<pre class="whitespace-pre-wrap text-sm text-gray-700 mb-2">${item.ocr_text || ""}</pre>
${(Array.isArray(item.resolutions) ? item.resolutions : []).map((r,i) => `
<div class="border-t border-gray-200 pt-2 mt-2">
<div class="font-medium">Finding ${i+1}: ${r.findings || ""}</div>
<div class="text-sm text-gray-600">Severity: ${r.severity || ""}</div>
<div class="text-sm text-gray-600">Recommendations: ${(r.recommendations || []).join(", ")}</div>
</div>
`).join("")}
</div>
`;
}
onAuthStateChanged(auth, async (user) => {
if (user) {
statusEl.textContent = `Signed in as ${user.email || user.uid}`;
async function getPastReports() {
try {
const url = api('reports/', { user_id: user.email });
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('Report successfully sent to backend:', data);
recsEl.innerHTML = data.map(doc => renderAnalysis(doc)).join("");
} catch (error) {
console.error('Error sending report to backend:', error);
recsEl.innerHTML = '<p class="text-sm text-gray-500">No saved analyses yet.</p>';
}
}
getPastReports();
/* try {
const q = query(
collection(db, "users", user.uid, "analyses"),
orderBy("createdAt", "desc")
);
const snap = await getDocs(q);
if (snap.empty) {
recsEl.innerHTML = '<p class="text-sm text-gray-500">No saved analyses yet.</p>';
} else {
const analyses = [];
snap.forEach(doc => {
const data = { id: doc.id, ...doc.data() };
analyses.push(data);
sendReportToBackend(data, user.uid);
});
recsEl.innerHTML = analyses.map(doc => renderAnalysis(doc)).join("");
const syncStatus = document.createElement('p');
syncStatus.className = 'text-xs text-blue-500 mt-2';
syncStatus.textContent = `Syncing ${analyses.length} reports to backend...`;
recsEl.appendChild(syncStatus);
setTimeout(() => {
if (syncStatus.parentNode) {
syncStatus.remove();
}
}, 3000);
}
} catch (error) {
console.error('Error fetching analyses:', error);
recsEl.innerHTML = '<p class="text-sm text-red-500">Error loading analyses.</p>';
}*/
} else {
statusEl.textContent = "Not signed in.";
recsEl.innerHTML = '<p class="text-sm text-gray-500">Please sign in to see your analyses.</p>';
}
});
</script>
</body>
</html>