source: src/main/resources/static/TopMonthlyReport.html@ a70b5a4

Last change on this file since a70b5a4 was a70b5a4, checked in by ste08 <sjovanoska@…>, 4 months ago

Report added
  • Property mode set to 100644
File size: 2.0 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Top Monthly Reports</title>
7 <link rel="stylesheet" href="/css/main.css">
8 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
9 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10</head>
11<body>
12<div id="app" class="reports">
13 <h2>Top Monthly Reports</h2>
14
15 <label for="month">Select Month:</label>
16 <input type="month" v-model="selectedMonth" @change="fetchReports" />
17
18 <div v-if="loading">Loading...</div>
19 <div v-else>
20 <h3>Top Destinations, Flights, and Airports</h3>
21 <table>
22 <thead>
23 <tr>
24 <th>Month</th>
25 <th>Category</th>
26 <th>Name</th>
27 <th>Count</th>
28 </tr>
29 </thead>
30 <tbody>
31 <tr v-for="report in reports" :key="report.month + report.name">
32 <td>{{ report.month }}</td>
33 <td>{{ report.category }}</td>
34 <td>{{ report.name }}</td>
35 <td>{{ report.count }}</td>
36 </tr>
37 </tbody>
38 </table>
39 </div>
40</div>
41
42<script>
43 new Vue({
44 el: '#app',
45 data: {
46 reports: [],
47 selectedMonth: '', // YYYY-MM format
48 loading: false
49 },
50 methods: {
51 async fetchReports() {
52 this.loading = true;
53 try {
54 const monthFormatted = this.selectedMonth + "-01";
55 const response = await axios.get(`http://localhost:8080/api/reports/top-monthly/${monthFormatted}`);
56 this.reports = response.data;
57 } catch (error) {
58 console.error("Error fetching reports:", error);
59 } finally {
60 this.loading = false;
61 }
62 }
63 }
64 });
65</script>
66</body>
67</html>
Note: See TracBrowser for help on using the repository browser.