Spaces:
Sleeping
Sleeping
File size: 3,540 Bytes
655f41f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Logs</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- SocketIO -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<!--Datavisualization-->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<a href="/home">Home</a>
<a href="/dashboard">Dashboard</a>
<a href="/logout">Logout</a>
</div>
<div class="container">
<h2>Risk Analytics - Event Logs by Evidence ID</h2>
<!-- Event Log Section -->
{% for evidence in evidences %}
<div class="event-log">
<h3>Evidence ID: {{ evidence['_id'] }}</h3>
<p><strong>Evidence:</strong> {{ evidence['image_filename'] }}</p>
<p><strong>Current Risk:</strong> {{ evidence['risk_prediction'] }}</p>
<p><strong>Variables:</strong> {{ evidence['variables'] }}</p>
</div>
{% endfor %}
</div>
<script>
const socket = io.connect('http://' + document.domain + ':' + location.port);
// Listen for real-time risk updates
socket.on('risk_update', function(data) {
console.log('Risk update received:', data);
// Show SweetAlert notification for risk change
Swal.fire({
title: 'Risk Status Changed!',
text: `Evidence ID: ${data.evidence_id}, New Risk: ${data.risk}`,
icon: 'warning',
confirmButtonText: 'Ok'
});
});
</script>
<script>
const ctx = document.getElementById('riskChart').getContext('2d');
const riskChart = new Chart(ctx, {
type: 'line',
data: {
labels: [], // Timestamps or updates go here
datasets: [{
label: 'Temperature (°C)',
data: [], // Temperature values
borderColor: 'rgba(255, 99, 132, 1)',
fill: false,
}, {
label: 'Humidity (%)',
data: [], // Humidity values
borderColor: 'rgba(54, 162, 235, 1)',
fill: false,
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Temperature and Humidity Trends'
},
scales: {
xAxes: [{ type: 'time', time: { unit: 'second' } }],
yAxes: [{ ticks: { beginAtZero: true } }]
}
}
});
// Listen for real-time risk updates and update the chart
socket.on('risk_update', function(data) {
const timestamp = new Date();
riskChart.data.labels.push(timestamp);
riskChart.data.datasets[0].data.push(data.variables.Temperature);
riskChart.data.datasets[1].data.push(data.variables.Humidity);
riskChart.update();
});
</script>
</body>
</html>
|