pyscript/test.html at main · AMinSC/pyscript · 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html>
<html>
<head>
    <title>JSON Generator</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px;
        }

        textarea {
            width: 300px;
            height: 200px;
        }

        #json-output {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <textarea id="json-input" placeholder="Enter input"></textarea>
    <button id="generate-button">Generate JSON</button>
    <textarea id="json-output" readonly></textarea>
    <button id="downloadcsv-button">download CSV</button>
    <button id="downloadjson-button">download JSON</button>
    <button id="downloadhtml-button">download HTML</button>
    <button id="downloadxml-button">download XML</button>
    <button id="downloadsql-button">download SQL Query</button>


    <script>
        let first_name = [
            '이',
            '김',
            '한',
            '차',
            '남'
        ]
        let last_name = [
            '가람',
            '가온',
            '그린',
            '겨루',
            '나래',
            '늘봄',
            '다슬',
            '라라',
            '루리',
            '마루',
            '바다',
            '새길',
            '새나'
        ]

        function uuid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                let r = Math.random() * 16 | 0
                let v = c == 'x' ? r : randomItem(['A', 'B', 'C']);
                return v.toString(16);
            });
        }

        function randomInteger(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function randomItem(items) {
            return items[Math.floor(Math.random()*items.length)];
        }

        function generateData(template, index) {
            return template.replace(/{{([^{}]+)}}/g, function(_, key){
                // key 값은 중괄호 안에 들어있는 값
                // console.log(key)
                const func = key.split('(')[0]
                const [...args] = key.split('(')[1]
                                    .replace(')', '')
                                    .replaceAll(' ', '')
                                    .replaceAll('\'', '')
                                    .replaceAll('"', '')
                                    .split(',')
                // console.log(func, args)

                switch(func) {
                    case 'id':
                        return uuid();
                    case 'index':
                        return index;
                    case 'integer':
                        return randomInteger(parseInt(args[0]), parseInt(args[1]));
                    case 'random':
                        return randomItem(args.map(s => s.replace(/"/g, '').trim()));
                    case 'name':
                        return randomItem(first_name) + randomItem(last_name);
                    default:
                        return _;
                }
            });
        }

        document.getElementById('generate-button').addEventListener('click', function() {
            // let input = JSON.parse(document.getElementById('json-input').value.replace(/'/g, '"'));
            let input = `[
            "{{repeat(5)}}",
            {
                "_id": "{{id()}}",
                "index": "{{index()}}",
                "picture": "http://via.placeholder.com/32x32",
                "age": "{{integer(20, 40)}}",
                "eyeColor": "{{random('blue', 'brown', 'green')}}",
                "name": "{{name()}}"
            }]`
            input = JSON.parse(input)
            console.log(input)

            let repeatCount = parseInt(input[0].match(/(\d+)/)[0]);
            console.log(repeatCount);

            let template = JSON.stringify(input[1]);
            console.log(template);

            let output = [];
            console.log(repeatCount);

            for(let i = 0; i < repeatCount; i++) {
                output.push(JSON.parse(generateData(template, i)));
            }
            console.log(output);

            document.getElementById('json-output').value = JSON.stringify(output, null, 2);
        });

        // csv 다운로드 버튼 클릭시 이벤트
        document.getElementById('downloadcsv-button').addEventListener('click', function() {
            // json-output textarea의 값을 가져온다.
            let json = document.getElementById('json-output').value;
            // json을 객체로 변환한다.
            let data = JSON.parse(json);
            // csv 파일의 첫번째 줄에 들어갈 키를 추출한다.
            let keys = Object.keys(data[0]);
            // csv 파일의 첫번째 줄을 만든다.
            let csv = keys.join(',') + '\n';
            // csv 파일의 두번째 줄부터 데이터를 넣는다.
            data.forEach(function(row) {
                // csv 파일의 한 줄을 만든다.
                let line = keys.map(function(key) {
                    return row[key];
                }).join(',');
                // csv 파일에 한 줄을 추가한다.
                csv += line + '\n';
            });
            // csv 파일을 다운로드한다.
            download('data.csv', csv);
        });

        // json 다운로드 버튼 클릭시 이벤트
        document.getElementById('downloadjson-button').addEventListener('click', function() {
            // json-output textarea의 값을 가져온다.
            let json = document.getElementById('json-output').value;
            // json 파일을 다운로드한다.
            download('data.json', json);
        });

        // html 다운로드 버튼 클릭시 이벤트
        document.getElementById('downloadhtml-button').addEventListener('click', function() {
            // json-output textarea의 값을 가져온다.
            let json = document.getElementById('json-output').value;
            // json을 객체로 변환한다.
            let data = JSON.parse(json);
            // html 파일을 만든다.
            let html = '<table>\n';
            // html 파일의 첫번째 줄에 들어갈 키를 추출한다.
            let keys = Object.keys(data[0]);
            // html 파일의 첫번째 줄을 만든다.
            html += '\t<tr>\n';
            // html 파일의 첫번째 줄에 키를 넣는다.
            keys.forEach(function(key) {
                html += '\t\t<th>' + key + '</th>\n';
            });
            // html 파일의 첫번째 줄을 닫는다.
            html += '\t</tr>\n';
            // html 파일의 두번째 줄부터 데이터를 넣는다.
            data.forEach(function(row) {
                // html 파일의 한 줄을 만든다.
                html += '\t<tr>\n';
                // html 파일의 한 줄에 데이터를 넣는다.
                keys.forEach(function(key) {
                    html += '\t\t<td>' + row[key] + '</td>\n';
                });
                // html 파일의 한 줄을 닫는다.
                html += '\t</tr>\n';
            });
            // html 파일을 닫는다.
            html += '</table>';
            // html 파일을 다운로드한다.
            download('data.html', html);
        });

        // xml 다운로드 버튼 클릭시 이벤트
        document.getElementById('downloadxml-button').addEventListener('click', function() {
            // json-output textarea의 값을 가져온다.
            let json = document.getElementById('json-output').value;
            // json을 객체로 변환한다.
            let data = JSON.parse(json);
            // xml 파일을 만든다.
            let xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
            // xml 파일의 첫번째 줄에 들어갈 키를 추출한다.
            let keys = Object.keys(data[0]);
            // xml 파일의 첫번째 줄을 만든다.
            xml += '<rows>\n';
            // xml 파일의 두번째 줄부터 데이터를 넣는다.
            data.forEach(function(row) {
                // xml 파일의 한 줄을 만든다.
                xml += '\t<row>\n';
                // xml 파일의 한 줄에 데이터를 넣는다.
                keys.forEach(function(key) {
                    xml += '\t\t<' + key + '>' + row[key] + '</' + key + '>\n';
                });
                // xml 파일의 한 줄을 닫는다.
                xml += '\t</row>\n';
            });
            // xml 파일을 닫는다.
            xml += '</rows>';
            // xml 파일을 다운로드한다.
            download('data.xml', xml);
        });

        // sql query 다운로드 버튼 클릭시 이벤트
        document.getElementById('downloadsql-button').addEventListener('click', function() {
            // json-output textarea의 값을 가져온다.
            let json = document.getElementById('json-output').value;
            // json을 객체로 변환한다.
            let data = JSON.parse(json);
            // sql query 파일을 만든다.
            let sql = 'INSERT INTO table_name (';
            // sql query 파일의 첫번째 줄에 들어갈 키를 추출한다.
            let keys = Object.keys(data[0]);
            // sql query 파일의 첫번째 줄을 만든다.
            sql += keys.join(', ') + ') VALUES\n';
            // sql query 파일의 두번째 줄부터 데이터를 넣는다.
            data.forEach(function(row, index) {
                // sql query 파일의 한 줄을 만든다.
                sql += '\t(';
                // sql query 파일의 한 줄에 데이터를 넣는다.
                keys.forEach(function(key) {
                    sql += '\'' + row[key] + '\', ';
                });
                // sql query 파일의 한 줄을 닫는다.
                sql = sql.slice(0, -2) + ')';
                // sql query 파일의 한 줄을 닫는다.
                sql += (index === data.length - 1) ? ';' : ',';
                // sql query 파일의 한 줄을 닫는다.
                sql += '\n';
            });
            // sql query 파일을 다운로드한다.
            download('data.sql', sql);
        });

        function download(filename, text) {
            // a 태그를 만든다.
            let element = document.createElement('a');
            // href 속성을 추가한다.
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
            // download 속성을 추가한다.
            element.setAttribute('download', filename);
            // a 태그를 클릭한다.
            element.click();
        }
    </script>
</body>
</html>