Skip to content

Commit

Permalink
separated css and js content from HTML file and created new file, upd…
Browse files Browse the repository at this point in the history 
…ated application.yml to fix imports
  • Loading branch information
@pradipmudi
pradipmudi committed Oct 31, 2023
1 parent a9a4e32 commit dee92a6
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 257 deletions.
4 changes: 3 additions & 1 deletion application.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,6 @@ spring:
cache: false

flyway:
baseline-on-migrate: true
baseline-on-migrate: true
resources:
add-mappings: true
3 changes: 1 addition & 2 deletions src/main/resources/templates/css/report.css → src/main/resources/static/css/report.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<style>

body {
font-family: 'Arial', sans-serif;
margin: 0;
Expand Down Expand Up @@ -128,4 +128,3 @@
}
}

</style>
3 changes: 1 addition & 2 deletions ...in/resources/templates/js/reportScript.js → src/main/resources/static/js/reportScript.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script>

const monthFilter = document.getElementById("month-filter");
const categoryFilter = document.getElementById("category-filter");
const spentByFilter = document.getElementById("spent-by-filter");
Expand Down Expand Up @@ -117,4 +117,3 @@

// Initial update
updateReport();
</script>
255 changes: 3 additions & 252 deletions src/main/resources/templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monthly Spending Report</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(90deg, #FF6B6B, #2E3A87);
color: #333;
}
<link th:href="@{/css/report.css}" rel="stylesheet" type="text/css" >

header {
background: linear-gradient(90deg, #2E3A87, #FF6B6B);
color: white;
text-align: center;
padding: 20px 0;
}

h1 {
font-size: 36px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

section#filter-options {
background-color: #fff;
padding: 10px 0;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}

label {
font-weight: bold;
}

select {
font-size: 14px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background: #f2f2f2;
}

section#monthly-report {
margin: 20px;
}

.report-card {
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 20px;
padding: 20px;
transition: transform 0.2s;
}

.report-card:hover {
transform: scale(1.05);
}

h2 {
font-size: 24px;
margin: 0;
color: #2E3A87;
}

table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}

th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ccc;
}

th {
background-color: #2E3A87;
color: white;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

.sortable {
cursor: pointer;
}

.sort-icon::before {
content: " ";
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}

.sort-icon.asc::before {
content: "▲";
}

.sort-icon.desc::before {
content: "▼";
}

/* Add or modify these styles to dynamically adjust text size for smaller screens */
@media (max-width: 768px) {
.report-card {
margin: 10px;
padding: 10px; /* Adjust padding for better mobile fit */
}
label {
margin: 5px;
}
select {
margin: 5px;
width: 100%; /* Ensure full width for better mobile fit */
}
section#filter-options {
padding: 10px;
}
table {
width: 100%; /* Ensure the table takes the full width */
}
th, td {
padding: 10px;
white-space: nowrap; /* Prevent text wrapping */
font-size: 9px; /* Decrease the font size for smaller screens */
}
}

</style>
</head>
<body>
<header>
Expand Down Expand Up @@ -177,127 +49,6 @@ <h1>Monthly Spending Report</h1>
<section id="monthly-report">
<!-- Report content will be dynamically updated -->
</section>

<script>
const monthFilter = document.getElementById("month-filter");
const categoryFilter = document.getElementById("category-filter");
const spentByFilter = document.getElementById("spent-by-filter");
const monthlyReport = document.getElementById("monthly-report");
let currentSortField = null;
let currentSortOrder = 1;

// Function to fetch and update the data based on filters
async function updateReport() {
try {
const selectedMonth = monthFilter.value;
const selectedCategory = categoryFilter.value;
const selectedSpentBy = spentByFilter.value;

// Make an API request based on selected filters
const apiUrl = `http://localhost:8080/report?month=${selectedMonth}&category=${selectedCategory}&spentBy=${selectedSpentBy}`;
const response = await fetch(apiUrl);

if (!response.ok) {
throw new Error(`API request failed with status: ${response.status}`);
}

const data = await response.json();

// Clear previous data
monthlyReport.innerHTML = "";

// Show data for the selected months
data.forEach(monthData => {
const reportCard = createReportCard(monthData, selectedSpentBy);
monthlyReport.appendChild(reportCard);
});
} catch (error) {
console.error(error);
}
}

// Function to create a report card
function createReportCard(data, selectedSpentBy) {
const reportCard = document.createElement("div");
reportCard.className = "report-card";
reportCard.innerHTML = `
<h2>${data.month}</h2>
<p>Total Spendings: ₹${data.totalSpendings}</p>
<table>
<thead>
<tr>
<th class="sortable" data-field="category" onclick="sortColumn('category')">Category
<span class="sort-icon" id="sort-category-icon">
${currentSortField === 'category' ? (currentSortOrder === 1 ? '▲' : '▼') : ''}
</span>
</th>
<th class="sortable" data-field="spent" onclick="sortColumn('spent')">Spent
<span class="sort-icon" id="sort-spent-icon">
${currentSortField === 'spent' ? (currentSortOrder === 1 ? '▲' : '▼') : ''}
</span>
</th>
${selectedSpentBy === "ALL" ? "" : `<th class="sortable" data-field="spentBy" onclick="sortColumn('spentBy')">Spent By
<span class="sort-icon" id="sort-spentBy-icon">
${currentSortField === 'spentBy' ? (currentSortOrder === 1 ? '▲' : '▼') : ''}
</span>
</th>`}
</tr>
</thead>
<tbody>
${sortReportData(data.reportInfo, selectedSpentBy).map(info => `
<tr>
<td>${info.subCategory}</td>
<td>₹${info.spent}</td>
${selectedSpentBy === "ALL" ? "" : `<td>${info.spentBy}</td>`}
</tr>
`).join('')}
</tbody>
</table>`;

return reportCard;
}

// Function to sort column and update sorting icon
function sortColumn(field) {
if (currentSortField === field) {
currentSortOrder *= -1; // Toggle between ascending and descending
} else {
currentSortField = field;
currentSortOrder = 1; // Set to ascending by default
}

// Update the sort icons based on the sort order
const sortIcons = document.querySelectorAll(".sort-icon");
sortIcons.forEach(icon => (icon.textContent = ''));

// Update the icon for the clicked column
const icon = document.getElementById(`sort-${field}-icon`);
icon.textContent = currentSortOrder === 1 ? '▲' : '▼';

updateReport();
}

// Function to sort report data based on the selected field
function sortReportData(reportInfo, selectedSpentBy) {
if (currentSortField === 'category') {
return reportInfo.slice().sort((a, b) => a.subCategory.localeCompare(b.subCategory) * currentSortOrder);
} else if (currentSortField === 'spent') {
return reportInfo.slice().sort((a, b) => (a.spent - b.spent) * currentSortOrder);
} else if (currentSortField === 'spentBy') {
return reportInfo.slice().sort((a, b) => a.spentBy.localeCompare(b.spentBy) * currentSortOrder);
} else {
return reportInfo;
}
}

// Listen for changes in filters and update the report
monthFilter.addEventListener("change", updateReport);
categoryFilter.addEventListener("change", updateReport);
spentByFilter.addEventListener("change", updateReport);

// Initial update
updateReport();
</script>

<script th:src="@{/js/reportScript.js}"></script>
</body>
</html>

0 comments on commit dee92a6

Please sign in to comment.