CSVBatchSplitter/index.html at main · Snowstar38/CSVBatchSplitter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Email Batch Splitter</title>

  <!-- Tailwind CSS for the original styling -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- JSZip for in-browser ZIP creation -->
  <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
</head>
<body class="min-h-screen bg-slate-100 flex items-center justify-center p-6">
  <div class="w-full max-w-xl mx-auto">
    <div class="bg-white shadow-xl rounded-2xl p-8 space-y-6">
      <header>
        <h1 class="text-2xl font-bold text-slate-800 text-center">CSV Email Batch Splitter</h1>
        <p class="text-sm text-slate-500 text-center mt-1">Quickly chunk a CSV contact list into daily batches.</p>
      </header>

      <!-- File picker -->
      <div>
        <label for="csvFile" class="block text-sm font-medium text-slate-700 mb-1">Choose CSV file</label>
        <input id="csvFile" type="file" accept=".csv" class="block w-full text-sm text-slate-700 border rounded-lg p-2" />
      </div>

      <!-- Chunk sizes input -->
      <div>
        <label for="chunkSizes" class="block text-sm font-medium text-slate-700 mb-1">Chunk sizes (comma-separated)</label>
        <input id="chunkSizes" type="text" placeholder="e.g. 100, 125,150, 175 ,200" class="block w-full text-sm text-slate-700 border rounded-lg p-2" />
      </div>

      <!-- Action buttons -->
      <div class="flex items-center justify-between gap-4">
        <button id="runButton" class="flex-1 py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-semibold disabled:opacity-50 disabled:pointer-events-none" onclick="runSplit()">Run</button>
        <button id="downloadButton" class="flex-1 py-2 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-semibold disabled:opacity-50 disabled:pointer-events-none" disabled onclick="downloadZip()">Download ZIP</button>
      </div>

      <!-- Info / status box -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-1">Status</label>
        <textarea id="info" class="w-full h-24 text-sm border rounded-lg p-2 bg-slate-50" readonly>Waiting for input...</textarea>
      </div>
    </div>
  </div>

  <script>
    let zipBlob = null; // will hold the generated ZIP

    /* ---------- helper functions ---------- */
    function log(msg) {
      const info = document.getElementById('info');
      info.value += `\n${msg}`;
      info.scrollTop = info.scrollHeight;
    }

    function parseChunks(raw) {
      return raw
        .split(',')
        .map(s => s.trim())
        .filter(Boolean)
        .map(Number)
        .filter(n => Number.isFinite(n) && n > 0);
    }

    /* ---------- core logic ---------- */
    async function runSplit() {
      const fileInput   = document.getElementById('csvFile');
      const chunkInput  = document.getElementById('chunkSizes');
      const runBtn      = document.getElementById('runButton');
      const downloadBtn = document.getElementById('downloadButton');
      const infoBox     = document.getElementById('info');

      // reset UI state
      infoBox.value = '';
      downloadBtn.disabled = true;
      zipBlob = null;

      if (!fileInput.files.length) {
        log('❌ Please select a CSV file first.');
        return;
      }

      const chunks = parseChunks(chunkInput.value);
      if (!chunks.length) {
        log('❌ Please enter at least one valid chunk size.');
        return;
      }

      const file = fileInput.files[0];
      const reader = new FileReader();

      runBtn.disabled = true;
      log('📖 Reading CSV file...');

      reader.onload = async () => {
        const rows = reader.result
          .replace(/\r\n?/g, '\n')
          .split('\n')
          .filter(r => r.length);

        const zip = new JSZip();
        let cursor = 0;
        let day    = 1;

        for (const size of chunks) {
          if (cursor >= rows.length) break;
          const slice = rows.slice(cursor, cursor + size);
          cursor += slice.length;
          zip.file(`Day_${day}_${slice.length}.csv`, slice.join('\n'));
          log(`✅ Day ${day}: ${slice.length} rows`);
          day++;
        }

        if (cursor < rows.length) {
          const remainder = rows.slice(cursor);
          zip.file(`Remainder_${remainder.length}.csv`, remainder.join('\n'));
          log(`ℹ️  Remainder: ${remainder.length} rows`);
        }

        log('📦 Building ZIP...');
        zipBlob = await zip.generateAsync({ type: 'blob' });
        downloadBtn.disabled = false;
        log('🎉 Done! Click “Download ZIP”.');
        runBtn.disabled = false;
      };

      reader.onerror = () => {
        log('❌ Error reading file.');
        runBtn.disabled = false;
      };

      reader.readAsText(file);
    }

    function downloadZip() {
      if (!zipBlob) return;
      const url = URL.createObjectURL(zipBlob);
      const a   = document.createElement('a');
      a.href    = url;
      a.download = 'email_batches.zip';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  </script>
</body>
</html>