Skip to content

Commit 77e6ed5

Browse files
zhravanzhravan
committed
feat: mock data generator
1 parent 42b462c commit 77e6ed5

File tree

3 files changed

+389
-3
lines changed

3 files changed

+389
-3
lines changed

‎index.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -497,4 +497,90 @@ body.dark-mode .tree-context-menu-item:hover {
497497
border: none;
498498
border-radius: 3px;
499499
cursor: pointer;
500+
}
501+
502+
/* Mock date preview */
503+
.markdown-preview {
504+
font-family: Arial, sans-serif;
505+
background: #fff;
506+
padding: 1rem;
507+
border-radius: 5px;
508+
border: 1px solid #ddd;
509+
max-height: 500px;
510+
overflow-y: auto;
511+
line-height: 1.6;
512+
}
513+
514+
.markdown-preview pre {
515+
background: #f6f8fa;
516+
padding: 10px;
517+
border-radius: 4px;
518+
overflow-x: auto;
519+
}
520+
521+
.markdown-preview code {
522+
background: #f0f0f0;
523+
padding: 2px 4px;
524+
border-radius: 3px;
525+
font-family: monospace;
526+
}
527+
528+
#mock-tab-schema.active,
529+
#mock-tab-docs.active {
530+
font-weight: bold;
531+
background-color: #e0e0e0;
532+
}
533+
534+
535+
.mock-preview-table {
536+
width: 100%;
537+
border-collapse: collapse;
538+
font-family: monospace;
539+
}
540+
541+
.mock-preview-table th,
542+
.mock-preview-table td {
543+
border: 1px solid #ccc;
544+
padding: 5px 10px;
545+
text-align: left;
546+
}
547+
548+
.mock-preview-table th {
549+
background-color: #f5f5f5;
550+
}
551+
552+
body.dark-mode .mock-preview-table th {
553+
background-color: #333;
554+
color: white;
555+
}
556+
557+
body.dark-mode .markdown-preview {
558+
background: #1e1e1e;
559+
color: #e0e0e0;
560+
border-color: #444;
561+
}
562+
563+
body.dark-mode .markdown-preview h1,
564+
body.dark-mode .markdown-preview h2,
565+
body.dark-mode .markdown-preview h3 {
566+
color: #ffffff;
567+
}
568+
569+
body.dark-mode .markdown-preview pre {
570+
background: #2d2d2d;
571+
color: #e0e0e0;
572+
}
573+
574+
body.dark-mode .markdown-preview code {
575+
background: #3a3a3a;
576+
color: #e0e0e0;
577+
}
578+
579+
body.dark-mode .markdown-preview pre::-webkit-scrollbar {
580+
height: 6px;
581+
}
582+
583+
body.dark-mode .markdown-preview pre::-webkit-scrollbar-thumb {
584+
background-color: #555;
585+
border-radius: 4px;
500586
}

‎index.html‎

Lines changed: 97 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,22 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>JSONP - Multi tab JSON toolkit</title>
7-
<link rel="icon" type="image/svg+xml" href="json.svg">
6+
<title>JSONP - Multi tab JSON toolkit</title>
7+
<link rel="icon" type="image/svg+xml" href="json.svg" />
88
<link rel="stylesheet" href="index.css" />
99
<link
1010
rel="stylesheet"
1111
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
1212
/>
13+
<script
14+
src="https://cdn.jsdelivr.net/npm/@faker-js/faker@8.4.0/+esm"
15+
type="module"
16+
></script>
17+
<script type="module">
18+
import { faker } from "https://cdn.jsdelivr.net/npm/@faker-js/faker@8.4.0/+esm";
19+
window.faker = faker;
20+
</script>
21+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
1322
</head>
1423
<body>
1524
<div class="container">
@@ -34,7 +43,10 @@ <h1>JSONP - Multi tab JSON toolkit</h1>
3443
JSON to Code
3544
</button>
3645
<button id="mode-convert-btn" onclick="switchMode('convert')">
37-
Dict ⇄ JSON
46+
Dict ↔ JSON
47+
</button>
48+
<button id="mode-mockgen-btn" onclick="switchMode('mockgen')">
49+
Mock Data
3850
</button>
3951
</div>
4052
<!-- Formatter Section -->
@@ -101,6 +113,88 @@ <h1>JSONP - Multi tab JSON toolkit</h1>
101113
style="margin-top: 10px"
102114
></pre>
103115
</div>
116+
<!-- Mock Data Generator -->
117+
<div id="mockgen-section" style="display: none">
118+
<h2>Mock Data Generator</h2>
119+
120+
<!-- Tab Buttons -->
121+
<div style="margin-bottom: 10px">
122+
<button
123+
onclick="switchMockTab('schema')"
124+
id="mock-tab-schema"
125+
class="active"
126+
>
127+
Schema Editor
128+
</button>
129+
<button onclick="switchMockTab('docs')" id="mock-tab-docs">
130+
Docs
131+
</button>
132+
</div>
133+
134+
<!-- Schema Panel -->
135+
<div id="mockgen-schema-panel">
136+
<label for="mockgen-count">Number of Records:</label>
137+
<input
138+
type="number"
139+
id="mockgen-count"
140+
value="1"
141+
min="1"
142+
max="1000"
143+
style="width: 60px"
144+
/>
145+
146+
<select onchange="loadMockPreset(this.value)">
147+
<option value="">-- Preset --</option>
148+
<option value="User">User</option>
149+
<option value="Product">Product</option>
150+
</select>
151+
152+
<div style="margin-top: 10px">
153+
<textarea
154+
id="mock-schema-input"
155+
class="json-input"
156+
placeholder="Enter schema here..."
157+
></textarea>
158+
</div>
159+
160+
<div style="margin-top: 10px">
161+
<button onclick="generateMockData()">Generate</button>
162+
<button onclick="copyMockOutput('json')">Copy JSON</button>
163+
<button onclick="copyMockOutput('csv')">Copy CSV</button>
164+
165+
<label style="margin-left: 20px">
166+
<input
167+
type="radio"
168+
name="mock-view-mode"
169+
value="json"
170+
checked
171+
onchange="updateMockView()"
172+
/>
173+
JSON
174+
</label>
175+
<label>
176+
<input
177+
type="radio"
178+
name="mock-view-mode"
179+
value="table"
180+
onchange="updateMockView()"
181+
/>
182+
Table
183+
</label>
184+
</div>
185+
186+
<p id="mock-stats" style="margin-top: 10px"></p>
187+
188+
<div id="mock-output-container" style="margin-top: 10px">
189+
<pre id="mock-output" class="code-output"></pre>
190+
</div>
191+
</div>
192+
193+
<!-- Docs Panel -->
194+
<div id="mockgen-docs-panel" style="display: none; margin-top: 20px">
195+
<div id="mockgen-docs-preview" class="markdown-preview"></div>
196+
</div>
197+
</div>
104198
</div>
105199
<!-- Shortcut Modal -->
106200
<div id="shortcut-modal" class="modal">

0 commit comments

Comments
 (0)