fix first section web app

FarrelAD · FarrelAD · commit c3aaa550db1d · 2025-01-19T11:05:36.000+07:00
diff --git a/src/web/index.html b/src/web/index.html
@@ -15,8 +15,8 @@
 </head>
 
 <body>
-    <main class="container mx-auto border lg:px-0 p-5 min-h-screen">
-        <h1 class="font-bold text-2xl text-center flex items-baseline justify-center space-x-2 mx-auto">
+    <main class="container mx-auto border lg:px-12 p-5 min-h-screen">
+        <h1 class="font-bold text-2xl text-center flex items-baseline justify-center space-x-2 mx-auto my-4">
             <svg width="1.75em" height="1.75em" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <rect width="300" height="300" fill="#F7DF1E"/>
                 <path d="M107 146L176.5 148.5L177 176.5L104.5 237H32L7.5 275.5C41.3333 277.833 109.6 282.5 112 282.5C114.4 282.5 168 243.833 194.5 224.5L223.5 122.5L134.5 92L92 104.5L107 146Z" fill="black"/>
@@ -30,29 +30,29 @@ <h1 class="font-bold text-2xl text-center flex items-baseline justify-center spa
         <section>
             <form id="data-form" class="mt-5">
                 <div class="flex items-center justify-center">
-                    <label for="file-upload"
+                    <label for="input-file"
                         class="cursor-pointer bg-indigo-100 text-indigo-600 py-2 px-4 rounded-md hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                         Upload File
                     </label>
-                    <input id="file-upload" type="file" class="hidden" name="data"/>
+                    <input id="input-file" type="file" class="hidden" name="data"/>
                 </div>
     
+                <div id="file-name" class="mt-2 text-center text-gray-600 text-sm"></div>
     
-                <input type="submit" value="Process"
-                    class="w-full mt-5 bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex justify-center">
+                    <input type="submit" value="Preview data" id="btn-preview-data"
+                        class="w-auto mt-5 bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed">
+                </div>
             </form>
     
-            <div id="preview-data-container" class="hidden mt-12">
+            <div id="preview-data-container" class="hidden mt-12 overflow-x-auto">
     
             </div>
 
-            <div class="section-controller flex justify-between mt-5">
-                <button class="w-auto bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
-                    Back
-                </button>                  
+            <div class="section-controller flex justify-end mt-5 fixed bottom-14 right-8">
                 <button class="w-auto bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                     Next
-                </button>                  
+                </button>
             </div>            
         </section>
 
@@ -68,6 +68,16 @@ <h1 class="font-bold text-2xl text-center flex items-baseline justify-center spa
                     <option value="multi">Multi feature</option>
                 </select>
             </div>
+
+
+            <div class="section-controller flex justify-between mt-5 fixed bottom-14 right-8">
+                <button class="w-auto bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    Back
+                </button>                  
+                <button class="w-auto bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    Next
+                </button>                  
+            </div>
         </section>
     </main>
 
diff --git a/src/web/script.js b/src/web/script.js
@@ -1,27 +1,43 @@
 const dataForm = document.getElementById('data-form')
+const inputFile = document.getElementById('input-file')
+const fileName = document.getElementById('file-name')
+const btnPreviewData = document.getElementById('btn-preview-data')
 const previewData = document.getElementById('preview-data-container')
 
+
+
+
+let currentSection = 1
+
+
 dataForm.addEventListener('submit', function(e) {
     e.preventDefault()
 
     const formData = new FormData(this)
     const file = formData.get('data')
 
+    previewData.classList.remove('hidden')
+    previewData.classList.add('block')
+
+    if (file.size === 0) {
+        previewData.innerHTML = `<h4 class="text-center">No file selected</h4>`
+        return
+    }
+
     const reader = new FileReader()
 
     reader.onload = (e) => {
         const fileContent = e.target.result
         const rows = fileContent.split(/[\r\n]+/).map(row => row.split(','))
-        previewData.style.display = 'block'
         
         let previewedTable = `
-        <table class="min-w-full table-auto bg-white shadow-md rounded-lg">
-            <thead class="bg-gray-200 rounded-t-lg">
-                <tr>
+        <table class="min-w-full bg-white border border-gray-200 rounded-lg">
+            <thead>
+                <tr class="bg-gray-100 border-b border-gray-200">
         `
 
         for (const item of rows.shift()) {
-            previewedTable += `<td class="px-4 py-2 text-left text-sm font-semibold text-gray-700">${item}</td>`
+            previewedTable += `<td class="py-2 px-4 text-left text-sm font-medium text-gray-600">${item}</td>`
         }
 
         previewedTable += `
@@ -30,9 +46,9 @@ dataForm.addEventListener('submit', function(e) {
         `
 
         for (const row of rows) {
-            previewedTable += `<tr>`
+            previewedTable += `<tr class="border-b hover:bg-gray-50">`
             for (const item of row) {
-                previewedTable += `<td>${item}</td>`
+                previewedTable += `<td class="py-2 px-4 text-sm text-gray-700">${item}</td>`
             }
             previewedTable += `</tr>`
 
@@ -42,4 +58,18 @@ dataForm.addEventListener('submit', function(e) {
     }
 
     reader.readAsText(file)
+
+    btnPreviewData.setAttribute('disabled', true)
+    this.reset()
+})
+
+
+
+inputFile.addEventListener('change', function() {
+    const file = this.files[0]
+    if (file) {
+        fileName.textContent = file.name
+    }
+
+    btnPreviewData.removeAttribute('disabled')
 })
