Skip to content

Commit e33c7ba

Browse files
iuccioiuccio
committed
small layout changes
1 parent 9354191 commit e33c7ba

2 files changed

Lines changed: 26 additions & 41 deletions

File tree

‎demo/csvToJsonDemo.js‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
"use strict";
12
// Demo JavaScript code
2-
csvToJson = window.csvToJson;
3+
const csvToJson = window.csvToJson;
34

45
// Initialize when DOM is loaded
56
document.addEventListener('DOMContentLoaded', function () {
@@ -66,8 +67,9 @@ function showTab(tabName) {
6667
function toggleFileOnlyOptions() {
6768
const activeTab = document.querySelector('.tab-content.active').id;
6869
const fileOnlyOptions = document.getElementById('file-only-options');
69-
if (!fileOnlyOptions) return;
70-
70+
if (!fileOnlyOptions) {
71+
return;
72+
}
7173
if (activeTab === 'file-tab') {
7274
fileOnlyOptions.style.display = 'block';
7375
} else {
@@ -129,11 +131,11 @@ function handleFileSelect(event) {
129131
fileInfo.innerHTML = `Selected file: ${file.name} (${size} MB)`;
130132
fileInfo.style.display = 'block';
131133
const useStreaming = document.getElementById('use-streaming');
132-
if(file.size > 1000000){
134+
if (file.size > 1000000) {
133135
useStreaming.checked = true;
134136
useStreaming.disabled = true;
135137
updateOptions();
136-
}else {
138+
} else {
137139
const useChecked = document.getElementById('use-chunked');
138140
useStreaming.checked = false;
139141
useStreaming.disabled = false;
@@ -171,13 +173,9 @@ Seminar,2024-03-10,200`,
171173
}
172174

173175
async function convert() {
174-
const output = document.getElementById('output');
175176
const convertBtn = document.getElementById('convert-btn');
176-
177-
178177
// Clear previous output
179178
clearOutput();
180-
181179
// Disable button during conversion
182180
convertBtn.disabled = true;
183181
convertBtn.textContent = 'Converting...';
@@ -220,7 +218,7 @@ async function convert() {
220218
displayResult(result);
221219
const endTime = performance.now();
222220
const takenTimeInMs = Math.floor(endTime - startTime);
223-
const takenTimeInSeconds = ((takenTimeInMs)/1000).toFixed(2);
221+
const takenTimeInSeconds = ((takenTimeInMs) / 1000).toFixed(2);
224222
document.getElementById('progress-fill').style.width = '100%';
225223

226224
const statsOutput = document.getElementById('stats-output');
@@ -242,7 +240,7 @@ async function convert() {
242240
// Re-enable button
243241
convertBtn.disabled = false;
244242
convertBtn.textContent = 'Convert to JSON';
245-
setTimeout(()=> {
243+
setTimeout(() => {
246244
removeProgressDisplay();
247245
}, 1500);
248246

@@ -262,15 +260,13 @@ function initProgressDisplay(output) {
262260
// Create progress display
263261
const progressDiv = document.createElement('div');
264262
progressDiv.id = 'progress-display';
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>';
263+
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.5s;"></div></div>';
266264
output.insertBefore(progressDiv, output.firstChild);
267265
}
268266

269267
async function processFileInChunks(file, chunkSize) {
270268
const output = document.getElementById('output');
271269
const jsonOutput = document.getElementById('json-output');
272-
const tableOutput = document.getElementById('table-output');
273-
const statsOutput = document.getElementById('stats-output');
274270

275271
// Show results container
276272
output.classList.remove('hidden');
@@ -283,7 +279,6 @@ async function processFileInChunks(file, chunkSize) {
283279
initProgressDisplay(output);
284280

285281
try {
286-
const startTime = performance.now();
287282
await csvToJson.getJsonFromFileStreamingAsyncWithCallback(file, {
288283
chunkSize: chunkSize,
289284
onChunk: (rows, processed, total) => {
@@ -295,8 +290,6 @@ async function processFileInChunks(file, chunkSize) {
295290
// Update progress
296291
const progressPercent = total ? Math.round((processed / total) * 100) : Math.min(Math.round((processed / 10000) * 100), 95);
297292
document.getElementById('progress-fill').style.width = progressPercent + '%';
298-
document.getElementById('progress-text').textContent = `Processed ${processed} rows...`;
299-
300293
// For very large files, show the first 1000 rows only
301294
if (allRows.length <= 1000) {
302295
displayTable(allRows);
@@ -305,15 +298,9 @@ async function processFileInChunks(file, chunkSize) {
305298
}
306299
},
307300
onComplete: (allRowsComplete) => {
308-
const endTime = performance.now();
309-
const takenTimeInMs = Math.floor(endTime - startTime);
310-
const takenTimeInSeconds = ((takenTimeInMs)/1000).toFixed(2);
311301
allRows = allRowsComplete;
312-
313302
// Update progress to 100%
314303
document.getElementById('progress-fill').style.width = '100%';
315-
document.getElementById('progress-text').textContent = `Complete! Processed ${allRows.length} rows in ${takenTimeInSeconds} seconds (${takenTimeInMs} milliseconds)`;
316-
317304
// Display final results
318305
jsonOutput.textContent = JSON.stringify(allRows, null, 2);
319306
displayStats(allRows);
@@ -337,8 +324,6 @@ async function processFileInChunks(file, chunkSize) {
337324
function displayResult(result) {
338325
const output = document.getElementById('output');
339326
const jsonOutput = document.getElementById('json-output');
340-
const tableOutput = document.getElementById('table-output');
341-
const statsOutput = document.getElementById('stats-output');
342327

343328
// Show results container
344329
output.classList.remove('hidden');
@@ -446,7 +431,6 @@ function displayError(error) {
446431

447432
function clearOutput() {
448433
removeProgressDisplay();
449-
const output = document.getElementById('output');
450434
const jsonOutput = document.getElementById('json-output');
451435
const tableOutput = document.getElementById('table-output');
452436
const statsOutput = document.getElementById('stats-output');
@@ -474,8 +458,9 @@ function clearAll() {
474458
function downloadJSON() {
475459
const jsonOutput = document.getElementById('json-output');
476460
const data = jsonOutput.textContent;
477-
if (!data) return;
478-
461+
if (!data) {
462+
return;
463+
}
479464
const blob = new Blob([data], {type: 'application/json'});
480465
const url = URL.createObjectURL(blob);
481466
const a = document.createElement('a');

‎demo/index.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
}
2323

2424
.container {
25-
max-width: 1200px;
25+
max-width: 1400px;
2626
margin: 0 auto;
2727
background: white;
2828
border-radius: 8px;
@@ -34,26 +34,26 @@
3434
.header {
3535
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
3636
color: white;
37-
padding: 10px;
37+
padding: 5px;
3838
text-align: center;
3939
border-radius: 8px;
4040
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
41-
}
42-
43-
.header h1 {
44-
margin: 0;
45-
font-size: 2.5em;
46-
font-weight: 300;
41+
position: fixed;
42+
top: 0;
43+
left: 0;
44+
width: 100%;
45+
z-index: 10;
4746
}
4847

4948
.header p {
50-
margin: 10px 0 0 0;
49+
margin: 5px 0 0 0;
5150
opacity: 0.9;
52-
font-size: 1.1em;
5351
}
5452

5553
.content {
56-
padding: 20px;
54+
padding: 10px;
55+
margin-top: 75px;
56+
margin-bottom: 20px;
5757
}
5858

5959
.input-section {
@@ -315,7 +315,7 @@
315315

316316
.table-output th,
317317
.table-output td {
318-
padding: 8px 12px;
318+
padding: 4px 6px;
319319
text-align: left;
320320
border-bottom: 1px solid #dee2e6;
321321
}
@@ -506,7 +506,7 @@
506506
<body>
507507
<div class="container">
508508
<div class="header">
509-
<h1>CSV to JSON Converter</h1>
509+
<h2>CSV to JSON Converter</h2>
510510
<p>Convert CSV files to JSON with <b>no dependencies</b>. Supports Node.js (Sync & Async),
511511
and Browser
512512
environments with full RFC 4180 compliance.</p>

0 commit comments

Comments
 (0)