Update ui and search speed

hantang · Mar 12, 2024 · 5e2a19d · 5e2a19d
1 parent 9e5704c
commit 5e2a19d
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 141 deletions.
diff --git a/site/assets/css/styles.css b/site/assets/css/styles.css
@@ -1,15 +1,78 @@
 body {
-  font-family: Arial, sans-serif;
+  font-family: sans-serif;
   margin: 0;
   padding: 0;
 }
 
-#main {
-  margin: 0 auto;
+header {
+  background-color: #4051b5;
+  color: #fff;
+  padding: 30px;
+}
+
+header div {
+  display: inline;
+
+}
+
+header svg {
+  height: 32px;
+}
+
+header h1 {
+  display: inline;
+}
+
+main {
+  margin: 10px auto;
   max-width: 90%;
 }
 
-#uploadArea {
+footer {
+  background-color: #333;
+  color: #fff;
+  padding: 5px;
+  text-align: center;
+}
+
+/* buttons */
+.upload-btn,
+.clear-btn,
+.search-btn,
+.expand-btn,
+.search-btn,
+.reset-btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  text-transform: uppercase;
+  transition: background-color 0.3s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.upload-btn {
+  background-color: #1dca88;
+  color: white;
+}
+
+.search-btn {
+  background-color: #007bff;
+  color: white;
+}
+
+.reset-btn {
+  background-color: #f44336;
+  color: white;
+}
+
+#note-area {
+  margin: auto 15%;
+}
+
+#upload-area {
   border: 2px solid #1dca88;
   margin: auto;
   width: 80%;
@@ -18,20 +81,20 @@ body {
   text-align: center;
 }
 
-#uploadArea button {
+#upload-area button {
   display: inline-block;
 }
 
-#dropArea {
-  width: 300px;
+#drop-area {
+  max-width: 300px;
   height: 200px;
   border: 2px dashed #ddd;
   text-align: center;
   line-height: 200px;
   margin: 0 auto;
 }
 
-#searchArea {
+#search-area {
   border: 2px solid #007bff;
   padding: 20px;
   margin: auto;
@@ -41,42 +104,6 @@ body {
   text-align: center;
 }
 
-
-/* table */
-#fileContent {
-  margin: 30px auto 30px auto;
-  width: 90%;
-}
-
-table,
-th,
-td {
-  border-collapse: collapse;
-  border: 1px solid #ddd;
-  padding: 8px;
-
-}
-
-th {
-  cursor: pointer;
-  position: relative;
-  background-color: #f2f2f2;
-  font-weight: bold;
-  text-align: center;
-}
-
-th.asc::after {
-  content: " ⬆️";
-  position: absolute;
-  right: 5px;
-}
-
-th.desc::after {
-  content: " ⬇️";
-  position: absolute;
-  right: 5px;
-}
-
 .filter-condition {
   margin-bottom: 10px;
 }
@@ -95,46 +122,37 @@ th.desc::after {
   width: 250px;
 }
 
-/* buttons */
-.upload-btn,
-.clear-btn,
-.search-btn,
-.expand-btn,
-.search-btn,
-.reset-btn {
-  padding: 12px 24px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 500;
-  text-transform: uppercase;
-  transition: background-color 0.3s;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+#file-area {
+  margin: 50px auto;
+  max-width: 90%;
 }
 
-.upload-btn {
-  background-color: #1dca88;
-  color: white;
+table, th, td {
+  border-collapse: collapse;
+  border: 1px solid #ddd;
 }
 
-.search-btn {
-  background-color: #007bff;
-  color: white;
+#file-area table {
+  margin: 0 auto;
 }
 
-.reset-btn {
-  background-color: #f44336;
-  color: white;
+#file-area th {
+  cursor: pointer;
+  position: relative;
+  background-color: #f2f2f2;
+  font-weight: bold;
+  text-align: center;
+  font-size: large;
 }
 
-footer {
-  background-color: #333;
-  color: white;
-  padding-top: 10px;
-  text-align: center;
-  position: fixed;
-  bottom: 0;
-  width: 90%;
-  /* margin: 0 auto; */
+#file-area th.asc::after {
+  content: " ⬆️";
+  position: absolute;
+  right: 5px;
+}
+
+#file-area th.desc::after {
+  content: " ⬇️";
+  position: absolute;
+  right: 5px;
 }
diff --git a/site/assets/js/loadfile.js b/site/assets/js/loadfile.js
@@ -25,10 +25,8 @@ function processFile(file) {
 }
 
 function displayTable(table) {
-  const tableDiv = document.getElementById('fileContent');
-  tableDiv.innerHTML = '';
-  table.id = "dataTable";
-  tableDiv.appendChild(table.cloneNode(true));
+  const tableDiv = document.getElementById('dataTable');
+  tableDiv.innerHTML = table.innerHTML;
 }
 
 function findFolder(bookmarkElement) {
@@ -48,12 +46,7 @@ function findFolder(bookmarkElement) {
 }
 
 function displayBookmarks(fileContent) {
-  const tableDiv = document.getElementById('fileContent');
-  tableDiv.innerHTML = '';
-
   const table = document.createElement('table');
-  table.id = "dataTable"
-
   const thead = document.createElement('thead');
   const tbody = document.createElement('tbody');
   const trHead = document.createElement('tr');
@@ -93,13 +86,15 @@ function displayBookmarks(fileContent) {
     }
     tbody.appendChild(tr);
   });
+
   table.appendChild(tbody);
-  tableDiv.appendChild(table.cloneNode(true));
+  displayTable(table)
 }
 
 function clearContent() {
-  document.getElementById('fileContent').innerHTML = '';
-  document.getElementById("filterConditions").innerHTML = "";
+  document.getElementById('dataTable').innerHTML = '';
+  document.getElementById('dataCount').innerHTML = '';
+  document.getElementById("search-options").innerHTML = "";
 }
 
 function dragOverHandler(event) {
@@ -120,7 +115,6 @@ function openFile() {
 fileInput.addEventListener('change', function(event) {
   const selectedFile = event.target.files[0];
   if (selectedFile) {
-    // console.log("open", selectedFile.name)
     const file = event.target.files[0];
     processFile(file);
     event.target.value = ''; // allow open same file again