Skip to content

Commit 8a8cd40

Browse files
tsviztsviz
authored
Merge pull request octodemo#42 from octodemo/search_improvements
chore: Add styles for table and search functionality
2 parents 4a4522d + ccd43de commit 8a8cd40

File tree

4 files changed

+112
-72
lines changed

4 files changed

+112
-72
lines changed

‎src/main/resources/static/js/search.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
document.getElementById('searchForm').addEventListener('submit', function(e) {
2+
e.preventDefault();
3+
4+
var input = document.getElementById('search').value;
5+
var resultsDiv = document.getElementById('searchResults');
6+
resultsDiv.innerHTML = 'Loading...';
7+
8+
fetch('/search?q=' + encodeURIComponent(input))
9+
.then(response => {
10+
if (!response.ok) {
11+
throw new Error('Network response was not ok');
12+
}
13+
return response.json();
14+
})
15+
.then(data => {
16+
resultsDiv.innerHTML = '';
17+
for (var i = 0; i < data.length; i++) {
18+
var item = data[i];
19+
var highlightedItem = item.replace(new RegExp(input, 'gi'), function(match) {
20+
return '<strong>' + match + '</strong>';
21+
});
22+
resultsDiv.innerHTML += '<p>' + highlightedItem + '</p>';
23+
}
24+
})
25+
.catch(error => {
26+
console.error('Error:', error);
27+
resultsDiv.innerHTML = 'An error occurred while performing the search.';
28+
});
29+
});

‎src/main/resources/static/js/styles.js

+39
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,42 @@
1+
function addStyles() {
2+
let css = `
3+
body {
4+
background-color: #f2f2f2;
5+
font-family: Arial, sans-serif;
6+
padding: 0 15px;
7+
max-width: 1200px;
8+
margin: auto;
9+
}
10+
table {
11+
border-collapse: collapse;
12+
width: 100%;
13+
margin-top: 50px;
14+
box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
15+
border-radius: 10px;
16+
overflow: hidden;
17+
}
18+
th, td {
19+
text-align: left;
20+
padding: 8px;
21+
}
22+
.actions {
23+
display: flex;
24+
justify-content: space-between;
25+
align-items: center;
26+
}
27+
.clear {
28+
color: #f44336;
29+
}
30+
`;
31+
32+
let style = document.createElement('style');
33+
style.type = 'text/css';
34+
style.appendChild(document.createTextNode(css));
35+
document.head.appendChild(style);
36+
}
37+
38+
addStyles();
39+
140
let themeColors;
241
if (window.enableSearchFeature) {
342
themeColors = {

‎src/main/resources/static/js/upload_csv.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
document.getElementById('csvFile').addEventListener('change', function() {
2+
if (this.value) {
3+
document.getElementById('uploadForm').style.display = 'block';
4+
} else {
5+
document.getElementById('uploadForm').style.display = 'none';
6+
}
7+
});
8+
9+
document.getElementById('uploadForm').addEventListener('submit', function(e) {
10+
e.preventDefault();
11+
12+
var formData = new FormData();
13+
formData.append('file', document.getElementById('csvFile').files[0]);
14+
15+
fetch('/import', {
16+
method: 'POST',
17+
body: formData
18+
}).then(response => {
19+
if (!response.ok) {
20+
throw new Error('Network response was not ok');
21+
}
22+
return response.text();
23+
}).then(data => {
24+
console.log('File uploaded successfully: ' + data);
25+
// clear the file input and hide the form
26+
document.getElementById('csvFile').value = '';
27+
document.getElementById('uploadForm').style.display = 'none';
28+
29+
// Wait for 1 second before reloading the page
30+
setTimeout(function() {
31+
location.reload();
32+
}, 1000);
33+
}).catch(error => {
34+
console.error('There has been a problem with your fetch operation: ', error);
35+
document.getElementById('errorMessage').textContent = 'Error: ' + error.message;
36+
});
37+
});

‎src/main/resources/templates/index.html

+7-72
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,6 @@
33
<head>
44
<meta charset="UTF-8">
55
<link rel="stylesheet" type="text/css" href="css/styles.css">
6-
<style>
7-
body {
8-
background-color: #f2f2f2;
9-
font-family: Arial, sans-serif;
10-
padding: 0 15px;
11-
max-width: 1200px;
12-
margin: auto;
13-
}
14-
table {
15-
border-collapse: collapse;
16-
width: 100%;
17-
margin-top: 50px;
18-
box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
19-
border-radius: 10px;
20-
overflow: hidden;
21-
}
22-
th, td {
23-
text-align: left;
24-
padding: 8px;
25-
}
26-
.actions {
27-
display: flex;
28-
justify-content: space-between;
29-
align-items: center;
30-
}
31-
.clear {
32-
color: #f44336;
33-
}
34-
</style>
356
<script th:inline="javascript">
367
/*<![CDATA[*/
378
window.enableSearchFeature = /*[[${enableSearchFeature}]]*/ 'default';
@@ -57,53 +28,17 @@ <h1>Inventory Records</h1>
5728
</form>
5829
<label for="csvFile" class="modern-button">Import from CSV</label>
5930
<div id="errorMessage" style="color: red;"></div>
60-
<script>
61-
document.getElementById('csvFile').addEventListener('change', function() {
62-
if (this.value) {
63-
document.getElementById('uploadForm').style.display = 'block';
64-
} else {
65-
document.getElementById('uploadForm').style.display = 'none';
66-
}
67-
});
68-
69-
document.getElementById('uploadForm').addEventListener('submit', function(e) {
70-
e.preventDefault();
71-
72-
var formData = new FormData();
73-
formData.append('file', document.getElementById('csvFile').files[0]);
74-
75-
fetch('/import', {
76-
method: 'POST',
77-
body: formData
78-
}).then(response => {
79-
if (!response.ok) {
80-
throw new Error('Network response was not ok');
81-
}
82-
return response.text();
83-
}).then(data => {
84-
console.log('File uploaded successfully: ' + data);
85-
// clear the file input and hide the form
86-
document.getElementById('csvFile').value = '';
87-
document.getElementById('uploadForm').style.display = 'none';
88-
89-
// Wait for 1 second before reloading the page
90-
setTimeout(function() {
91-
location.reload();
92-
}, 1000);
93-
}).catch(error => {
94-
console.error('There has been a problem with your fetch operation: ', error);
95-
document.getElementById('errorMessage').textContent = 'Error: ' + error.message;
96-
});
97-
});
98-
</script>
31+
<script src="js/upload_csv.js"></script>
32+
<script src="js/search.js"></script>
9933
<br><br>
10034
<div id="searchFeature">
101-
<form action="/search" method="get">
102-
<label for="search">Search for item:</label>
103-
<input type="text" id="search" name="q" />
104-
<button type="submit">Search</button>
35+
<form id="searchForm" action="/search" method="get">
36+
<label for="search">Search for item:</label>
37+
<input type="text" id="search" name="q" />
38+
<button type="submit">Search</button>
10539
</form>
10640
</div>
41+
<div id="searchResults"></div>
10742
<br />
10843
<div>
10944
<a th:if="${currentPage > 0}" th:href="@{/?(page=${currentPage - 1})}">Previous</a>

0 commit comments

Comments
 (0)