Last change
on this file since 9868304 was a70b5a4, checked in by ste08 <sjovanoska@…>, 4 months ago |
Report added
|
-
Property mode
set to
100644
|
File size:
2.0 KB
|
Rev | Line | |
---|
[a70b5a4] | 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.