-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (165 loc) · 11.5 KB
/
index.html
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Samcsv - Split and Merge CSV</title>
<meta name="application-name" content="Samcsv - Split and Merge CSV">
<meta name="description" content="Tool sederhana untuk memecah dan menggabungkan file csv.">
<meta name="author" content="Hayyi">
</head>
<body class="bg-gray-50">
<div class="max-w-lg mx-auto py-8 sm:py-12" x-data="main">
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="space-y-4">
<div>
<h1 class="text-lg leading-6 font-medium text-gray-900 mb-2">Samcsv - Split and Merge CSV</h1>
<h2 class="text-sm text-gray-500">Tool sederhana untuk memecah dan menggabungkan file csv.</h2>
</div>
<div class="content">
<div x-show="!dirHandler">
<button type="button" x-on:click="openDir"
class="relative block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1"
stroke="currentColor" class="mx-auto h-12 w-12 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776" />
</svg>
<span class="mt-2 block text-sm font-medium text-gray-900"> Buka folder dan akses file
</span>
</button>
</div>
<div style="display: none;" class="space-y-3" x-show="dirHandler && !fileHandler">
<div x-show="listFile.length" style="display: none;">
<div>
<template x-for="(filename, index) in listFile">
<div class="flex items-center py-2 border-b border-gray-200 last:border-b-0">
<div class="flex items-start py-1 mr-auto">
<div class="min-w-0 flex-1 text-sm">
<label x-bind:for="'file-'+index" x-text="filename"
class="font-medium text-gray-700 select-none"></label>
</div>
</div>
<div>
<button type="button" x-on:click="openFile(filename)"
class="bg-white py-0.5 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Split
</button>
</div>
</div>
</template>
</div>
</div>
<div x-show="!listFile.length" class="text-sm text-gray-500">
<p>Folder kosong</p>
</div>
<div>
<button type="button" x-show="listFile.length" x-on:click="mergeFile"
x-bind:disabled="loading"
class="mr-2 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<span x-text="loading ? 'Loading ...' : 'Merge File'"></span>
</button>
<button type="button" x-on:click="closeDir"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Kembali
</button>
</div>
</div>
<div style="display: none;" x-show="dirHandler && fileHandler" class="space-y-3">
<div>
<label for="username" class="block text-sm font-medium text-gray-700">
Split File
</label>
<div
class="mt-1 flex items-center py-2 px-3 border border-gray-300 shadow-sm rounded-md">
<div class="mr-2 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
</div>
<div class="min-w-0 flex-1 text-sm">
<label class="font-medium text-gray-700 select-none"
x-text="openFilename"></label>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-x-3 sm:grid-cols-3">
<div class="sm:col-span-2">
<label for="username" class="block text-sm font-medium text-gray-700">
Limit row
</label>
<div class="mt-1">
<input type="number" placeholder="Number" x-model="limitRow"
class="max-w-lg shadow-sm block w-full focus:ring-blue-500 focus:border-blue-500 sm:text-sm border border-gray-300 rounded-md">
</div>
</div>
</div>
<div class="pt-1.5">
<button type="button" x-on:click="splitFile" x-bind:disabled="loading"
class="mr-2 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<span x-text="loading ? 'Loading ...' : 'Split File'"></span>
</button>
<button type="button" x-on:click="closeFile" x-show="!loading"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Kembali
</button>
</div>
</div>
</div>
<div x-show="logs.length">
<div class="text-base leading-6 font-medium text-gray-900 mb-2">
<span>Logs Process</span>
</div>
<table class="text-sm">
<tbody>
<template x-for="{ time, message } in logs">
<tr class="align-top">
<td x-text="time" class="whitespace-nowrap pr-2 italic text-gray-400"></td>
<td>
<div class="text-gray-500 leading-4 pt-0.5" x-text="message"></div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<div class="border-t border-gray-200"></div>
<div>
<h2 class="text-base leading-6 font-medium text-gray-900 mb-2">Bagaimana cara menggunakan Samcsv?</h2>
<div class="text-sm text-gray-500 space-y-2">
<div>
<p class="mb-1">Memecah file csv/split csv</p>
<ul class="list-disc pl-5">
<li>Klik buka folder dan buka folder yang berisi file untuk dipecah</li>
<li>Beri akses untuk mengubah file di dalam folder</li>
<li>Pilih file lalu tekan tombol split</li>
<li>File kamu telah dipecah ke file dengan nama split-x-{namafile}.csv </li>
</ul>
</div>
<div>
<p class="mb-1">Menggabungkan file csv/merge csv</p>
<ul class="list-disc pl-5">
<li>Klik buka folder dan buka folder yang berisi file untuk digabungkan</li>
<li>Beri akses untuk mengubah file di dalam folder</li>
<li>Tekan tombol Merge File</li>
<li>File scv dalam folder sudah digabungkan kedalam file merge.csv</li>
</ul>
</div>
</div>
</div>
<div class="text-sm text-gray-500">
<p>Butuh lebih dari ini? <a href="https://m.me/hayyi02"
class="text-blue-700 hover:text-blue-800 hover:underline" target="_blank">Kontak
facebook →</a></p>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>