Skip to content

Commit 9354191

Browse files
iuccioiuccio
committed
update layout
1 parent f5c099c commit 9354191

2 files changed

Lines changed: 118 additions & 25 deletions

File tree

‎demo/csvToJsonDemo.js‎

Lines changed: 53 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ function toggleChunkedOptions() {
118118
} else {
119119
chunkedOptions.style.display = 'none';
120120
}
121+
121122
}
122123

123124
function handleFileSelect(event) {
@@ -127,6 +128,19 @@ function handleFileSelect(event) {
127128
const size = (file.size / 1024 / 1024).toFixed(2);
128129
fileInfo.innerHTML = `Selected file: ${file.name} (${size} MB)`;
129130
fileInfo.style.display = 'block';
131+
const useStreaming = document.getElementById('use-streaming');
132+
if(file.size > 1000000){
133+
useStreaming.checked = true;
134+
useStreaming.disabled = true;
135+
updateOptions();
136+
}else {
137+
const useChecked = document.getElementById('use-chunked');
138+
useStreaming.checked = false;
139+
useStreaming.disabled = false;
140+
useChecked.checked = false;
141+
useChecked.disabled = true;
142+
updateOptions();
143+
}
130144
}
131145
}
132146

@@ -203,19 +217,23 @@ async function convert() {
203217
initProgressDisplay(output);
204218
const startTime = performance.now();
205219
result = await csvToJson.getJsonFromFileStreamingAsync(fileInput.files[0]);
206-
console.log(result);
207220
displayResult(result);
208221
const endTime = performance.now();
209222
const takenTimeInMs = Math.floor(endTime - startTime);
210223
const takenTimeInSeconds = ((takenTimeInMs)/1000).toFixed(2);
211224
document.getElementById('progress-fill').style.width = '100%';
212-
document.getElementById('progress-text').textContent = `Complete! Processed ${result.length} rows in ${takenTimeInSeconds} seconds (${takenTimeInMs} milliseconds)`;
213225

226+
const statsOutput = document.getElementById('stats-output');
227+
228+
statsOutput.innerHTML += `
229+
<div><strong>Processed:</strong> in ${takenTimeInSeconds} seconds (${takenTimeInMs} milliseconds)</div>
230+
`;
214231

215232
} else {
216233
// Use regular file parsing
217234
result = await csvToJson.parseFile(fileInput.files[0]);
218235
displayResult(result);
236+
219237
}
220238
}
221239
} catch (error) {
@@ -224,6 +242,10 @@ async function convert() {
224242
// Re-enable button
225243
convertBtn.disabled = false;
226244
convertBtn.textContent = 'Convert to JSON';
245+
setTimeout(()=> {
246+
removeProgressDisplay();
247+
}, 1500);
248+
227249
}
228250
}
229251

@@ -240,7 +262,7 @@ function initProgressDisplay(output) {
240262
// Create progress display
241263
const progressDiv = document.createElement('div');
242264
progressDiv.id = 'progress-display';
243-
progressDiv.innerHTML = '<h4>Processing large file...</h4><div id="progress-bar" style="width: 100%; background: #f0f0f0; height: 20px; border-radius: 10px; margin: 10px 0;"><div id="progress-fill" style="width: 0%; height: 100%; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); border-radius: 10px; transition: width 0.3s;"></div></div><div id="progress-text">Initializing...</div>';
265+
progressDiv.innerHTML = '<h5>Processing large file...</h5><div id="progress-bar" style="width: 100%; background: #f0f0f0; height: 20px; border-radius: 10px; margin: 10px 0;"><div id="progress-fill" style="width: 0%; height: 100%; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); border-radius: 10px; transition: width 0.3s;"></div></div>';
244266
output.insertBefore(progressDiv, output.firstChild);
245267
}
246268

@@ -283,7 +305,6 @@ async function processFileInChunks(file, chunkSize) {
283305
}
284306
},
285307
onComplete: (allRowsComplete) => {
286-
console.log('onComplete called', allRowsComplete.length);
287308
const endTime = performance.now();
288309
const takenTimeInMs = Math.floor(endTime - startTime);
289310
const takenTimeInSeconds = ((takenTimeInMs)/1000).toFixed(2);
@@ -297,9 +318,8 @@ async function processFileInChunks(file, chunkSize) {
297318
jsonOutput.textContent = JSON.stringify(allRows, null, 2);
298319
displayStats(allRows);
299320
displayTable(allRows);
321+
displayDownloadButton();
300322
showOutputTab('table');
301-
302-
303323
},
304324
onError: (error) => {
305325
console.error('Error:', error);
@@ -331,6 +351,7 @@ function displayResult(result) {
331351

332352
// Display stats
333353
displayStats(result);
354+
displayDownloadButton();
334355

335356
// Show table tab by default
336357
showOutputTab('table');
@@ -367,11 +388,16 @@ function displayTable(data) {
367388
});
368389
html += '</tbody></table>';
369390

391+
tableOutput.innerHTML = html;
392+
displayTableTitle(data);
393+
}
394+
395+
function displayTableTitle(data) {
396+
const maxRows = 1000;
397+
const tableTitle = document.getElementById('table-title');
370398
if (data.length > maxRows) {
371-
html = `<p><b>Showing first ${maxRows} rows only. Full data is available in JSON view and row count is shown in stats.</h4></p>${html}`;
399+
tableTitle.innerHTML = `<p><b>Showing first ${maxRows} rows only. Full data is available in JSON View for files containing less than 1,000 lines. For bigger files click to the Download JSON button.</h4></p>`;
372400
}
373-
374-
tableOutput.innerHTML = html;
375401
}
376402

377403
function displayStats(data) {
@@ -392,6 +418,20 @@ function displayStats(data) {
392418
}
393419
}
394420

421+
function displayDownloadButton() {
422+
const downloadButton = document.getElementById('download-json-btn');
423+
downloadButton.classList.remove('hidden');
424+
downloadButton.classList.remove('download-btn-hidden');
425+
downloadButton.classList.add('download-btn');
426+
}
427+
428+
function hideDownloadButton() {
429+
const downloadButton = document.getElementById('download-json-btn');
430+
downloadButton.classList.add('hidden');
431+
downloadButton.classList.add('download-btn-hidden');
432+
downloadButton.classList.remove('download-btn');
433+
}
434+
395435
function displayError(error) {
396436
const output = document.getElementById('output');
397437
const errorOutput = document.getElementById('error-output');
@@ -425,6 +465,10 @@ function clearAll() {
425465
document.getElementById('csv-input').value = '';
426466
document.getElementById('csv-file').value = '';
427467
document.getElementById('file-info').style.display = 'none';
468+
document.getElementById('use-streaming').checked = false;
469+
document.getElementById('use-chunked').checked = false;
470+
toggleChunkedOptions();
471+
hideDownloadButton();
428472
}
429473

430474
function downloadJSON() {

‎demo/index.html‎

Lines changed: 65 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" xmlns="http://www.w3.org/1999/html">
33

44
<head>
55
<meta charset="UTF-8">
@@ -28,13 +28,16 @@
2828
border-radius: 8px;
2929
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
3030
overflow: hidden;
31+
padding-bottom: 10px;
3132
}
3233

3334
.header {
3435
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
3536
color: white;
36-
padding: 30px;
37+
padding: 10px;
3738
text-align: center;
39+
border-radius: 8px;
40+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
3841
}
3942

4043
.header h1 {
@@ -50,7 +53,7 @@
5053
}
5154

5255
.content {
53-
padding: 30px;
56+
padding: 20px;
5457
}
5558

5659
.input-section {
@@ -59,8 +62,8 @@
5962

6063
.tabs {
6164
display: flex;
62-
margin-bottom: 20px;
63-
border-bottom: 1px solid #dee2e6;
65+
margin-bottom: 12px;
66+
border-bottom: 2px solid #dee2e6;
6467
}
6568

6669
.tab {
@@ -140,6 +143,24 @@
140143
display: none;
141144
}
142145

146+
::file-selector-button {
147+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
148+
color: white;
149+
border: none;
150+
padding: 8px 16px;
151+
margin-right: 10px;
152+
margin-bottom: 10px;
153+
border-radius: 4px;
154+
cursor: pointer;
155+
font-size: 14px;
156+
transition: background-color 0.3s;
157+
}
158+
159+
::file-selector-button:hover {
160+
transform: translateY(-1px);
161+
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
162+
}
163+
143164
.sample-btn {
144165
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
145166
color: white;
@@ -162,7 +183,6 @@
162183
background-color: #f8f9fa;
163184
padding: 20px;
164185
border-radius: 8px;
165-
margin-bottom: 15px;
166186
border: 1px solid #dee2e6;
167187
}
168188

@@ -193,7 +213,7 @@
193213

194214
.buttons {
195215
text-align: center;
196-
margin-top: 30px;
216+
margin-top: 15px;
197217
margin-bottom: 15px;
198218
}
199219

@@ -222,6 +242,9 @@
222242
box-shadow: none;
223243
opacity: 0.3;
224244
}
245+
button:focus {
246+
outline: none;
247+
}
225248

226249
.output {
227250
display: block;
@@ -253,8 +276,8 @@
253276
}
254277

255278
.output-tab.active {
256-
border-bottom-color: #28a745;
257-
color: #28a745;
279+
border-bottom-color: #667EEAFF;
280+
color: #667EEAFF;
258281
font-weight: 500;
259282
}
260283

@@ -271,7 +294,6 @@
271294
background-color: #f8f9fa;
272295
border: 1px solid #dee2e6;
273296
border-radius: 6px;
274-
padding: 20px;
275297
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
276298
font-size: 14px;
277299
line-height: 1.4;
@@ -280,6 +302,11 @@
280302
white-space: pre-wrap;
281303
}
282304

305+
th {
306+
position: sticky;
307+
top: 0;
308+
}
309+
283310
.table-output table {
284311
width: 100%;
285312
border-collapse: collapse;
@@ -298,9 +325,20 @@
298325
font-weight: 600;
299326
}
300327

328+
.table-title {
329+
padding-left: 1rem;
330+
padding-right: 1rem;
331+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
332+
font-size: 14px;
333+
line-height: 1.4;
334+
max-height: 500px;
335+
overflow-y: auto;
336+
white-space: pre-wrap;
337+
}
338+
301339
.stats-output {
302340
background-color: #e9ecef;
303-
padding: 15px;
341+
padding: 5px;
304342
border-radius: 6px;
305343
margin-bottom: 20px;
306344
display: flex;
@@ -330,10 +368,21 @@
330368
margin-top: 1rem;
331369
background: #28a745;
332370
margin-left: 10px;
371+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
372+
color: white;
373+
border: none;
374+
border-radius: 4px;
375+
cursor: pointer;
376+
transition: background-color 0.3s;
333377
}
334378

335379
.download-btn:hover {
336-
background: #218838;
380+
transform: translateY(-1px);
381+
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
382+
}
383+
384+
.download-btn-hidden {
385+
visibility: hidden;
337386
}
338387

339388
.hidden {
@@ -413,7 +462,7 @@
413462

414463
@media (max-width: 768px) {
415464
.content {
416-
padding: 20px;
465+
padding: 15px;
417466
}
418467

419468
.option-group {
@@ -488,7 +537,6 @@ <h1>CSV to JSON Converter</h1>
488537

489538
<div id="file-tab" class="tab-content">
490539
<div class="input-section">
491-
<label for="csv-file">CSV File:</label>
492540
<input type="file" id="csv-file" accept=".csv,text/csv">
493541
<div id="file-info" class="file-info"></div>
494542
</div>
@@ -537,6 +585,7 @@ <h6>Streaming Options: for big files</h6>
537585
<div class="buttons">
538586
<button id="convert-btn">Convert to JSON</button>
539587
<button id="clear-btn">Clear</button>
588+
<button id="download-json-btn" class="download-btn-hidden" onclick="downloadJSON()">Download JSON</button>
540589
</div>
541590

542591
<div id="output" class="output hidden">
@@ -549,6 +598,8 @@ <h6>Streaming Options: for big files</h6>
549598
<button class="output-tab" data-output="json" id="output-tab-json">JSON View
550599
</button>
551600
</div>
601+
<div class="table-title" id="table-title"></div>
602+
552603

553604
<div id="table-content" class="output-content active">
554605
<div class="table-output" id="table-output"></div>
@@ -557,8 +608,6 @@ <h6>Streaming Options: for big files</h6>
557608
<div id="json-content" class="output-content">
558609
<div class="json-output" id="json-output"></div>
559610
</div>
560-
<button class="download-btn" onclick="downloadJSON()">Download JSON</button>
561-
562611
</div>
563612
</div>
564613
</div>

0 commit comments

Comments
 (0)