-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
230 lines (188 loc) · 11.6 KB
/
index.html
File metadata and controls
230 lines (188 loc) · 11.6 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Test Data Generator and Table Editor for Markdown, CSV, JSON, Gherkin and HTML - AnyWayData</title>
<meta name="description" content="A Test Data Generator and Data Table Editor. Convert to and from tables for Markdown, Gherkin, CSV, JSON and JavaScript Arrays. Import and export from files. Edit, sort, filter in the Data Grid. Generate Test Data into the grid.">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Alan Richardson">
<script src="https://unpkg.com/ag-grid-community@33.3.0/dist/ag-grid-community.min.js"></script>
<script src="https://unpkg.com/papaparse@5.3.2/papaparse.min.js"></script>
<script type="module" src="./js/script.js"></script>
<script defer data-domain="anywaydata.com" src="https://plausible.io/js/plausible.js"></script>
<!-- random data generation -->
<!-- http://fent.github.io/randexp.js/ -->
<!-- this creates a top level RandExp -->
<script src="libs/randexp.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!--
TODOs:
TODO: Change Grid Column Size Based on Number of columns e.g. 1 == 75%, 2==50%, 3=33%, then autosize
TODO: Duplicate Row (Below, Above)
TODO: Error handling and reporting
TODO: New Export formats: sql create table and inserts
TODO: add a preview mode that only converts the first 20 rows to make 'large tables' faster to preview
-->
<div class="header">
<div class="pageheading"><a href="/">AnyWayData</a></div>
<div class="mainmenu"> App </div>
<div class="mainmenu"><a href="/docs/intro">Docs</a></div>
<div class="mainmenu"><a href="/blog">Blog</a></div>
</div>
<div class="instructions">
<details>
<summary>Instructions</summary>
<ul>
<li>[Reset Table] To clear all table data</li>
<li> Expand '> Instructions' to read the instructions</li>
<li>[~] Rename Column</li>
<li>[x] Delete Column</li>
<li>[<+] Add Column Left</li>
<li>[+=] Duplicate this column</li>
<li>[+>] Add Column Right</li>
<li>Use tabs to switch between the type of text representation: markdown, csv, etc.</li>
<li>Drag and drop files of selected representation to import.</li>
<li>click [Set Text From Grid] to generate text from the Grid</li>
<li>Enter format in the Text Area and click [Set Grid From Text] to generate the grid from the entered text type</li>
<li>[Choose File] to Import chosen type e.g. CSV, Markdown file to set grid from the loaded file</li>
<li>[Download ...] will download the grid as chosen format e.g CSV, Markdown</li>
<li>Drag Columns to re-order</li>
<li>Drag Rows to re-order</li>
<li>Select multiple rows with ctrl and shift (cmd + shift on mac)</li>
<li>Add new Rows with the [Add Row...] buttons</li>
<li>[Delete Selected Rows] will delete any selected rows</li>
<li>Use the filter icon on the left of each column to filter specific column.</li>
<li>The up and down arrows in the header will sort the column, use (x) to clear the sort</li>
<li>Use the Filter field to filter any column to match the text</li>
<li>[Clear Filters] will clear the quick filter and all column filters</li>
<li>Test Data can be generated by adding a set of (rulename \n rule) in text box</li>
<li>Adding a number of rows to generate and clicking [Generate] button </li>
<li>Rule can be a RegEx expression or a faker API call e.g. (Connie|Bob) or faker.name.firstName</li>
</ul>
<div class="footer">
<p>
v20220801.001 Built by <a href="https://eviltester.com" target="_blank">Alan Richardson</a>
</p>
<p>Using
<a href="https://ag-grid.com" target="_blank">AG Grid</a> Community Edition,
<a href="http://fent.github.io/randexp.js/" target="_blank">RandExp.js</a>,
<a href="https://fakerjs.dev/" target="_blank">Faker.dev</a>,
<a href="https://github.com/AllMightySauron/ascii-table3" target="_blank">Ascii-Table3</a>,
<a href="https://github.com/xpl/printable-characters" target="_blank">Printable-Characters</a>,
and <a href="https://www.papaparse.com/" target="_blank">PapaParse</a>
</p>
<p>
- [<a href="https://github.com/eviltester/grid-table-editor" target="_blank">github source</a>]
</p>
</div>
</details>
</div>
<div class="main-app">
<div id="main-grid-view"></div>
<div class="importexport" id="import-export-controls"></div>
<div class="testDataDefnGui">
<details>
<summary>Test Data <span data-help="test-data-summary-title" class="helpicon"></span></summary>
<div id="testDataGeneratorContainer"></div>
</details>
</div>
<div class="tabbedTextArea" id="tabbedTextArea" ></div>
</div>
<!-- loading message -->
<p style="font-size:xx-large;" id="initial-load">Please Wait, Loading Libraries...</p>
<!--
add tippy for help icon popups
https://atomiks.github.io/tippyjs/v6/getting-started/
-->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<div id="inline-help-items" style="display:none">
<div data-name="test-data-summary-title">
<p>The Test Data section allows you to randomly generate data to populate the grid. You can then export to the various supported formats.</p>
<p><a class="helplink" href="/docs/test-data/test-data-generation" target="anywaydatadocs">Learn more</a></p>
</div>
<div data-name="import-export-controls">
<p>Using the import and export controls you can:</p>
<ul>
<li>"Set Text From Grid"<br> to refresh the text box for the chosen output format.</li>
<li>"Set Grid From Text"<br> to <a class="helplink" href="/docs/editing-data/text-editing" target="anywaydatadocs">import the text box content</a> into the grid.</li>
<li>"Choose File"<br> to <a class="helplink" href="docs/editing-data/import-from-file" target="anywaydatadocs">import a text file</a> of the chosen format.</li>
<li>"Download File"<br> to <a class="helplink" href="docs/editing-data/exporting-data" target="anywaydatadocs">export the Data Grid</a> items in the chosen format.</li>
<li>"Drag and Drop File"<br> to <a class="helplink" href="docs/editing-data/import-from-file" target="anywaydatadocs">import the file</a> contents using the currently chosen format.</li>
</ul>
<p>The options shown depend on the output type, some types are not supported for input and so only the output options will be shown.</p>
</div>
<!-- Data Format Options -->
<div data-name="markdown-table-options">
<p>Export the table data as <a class="helplink" href="docs/data-formats/markdown/markdown" target="anywaydatadocs">Markdown</a>, a human readable format which can be easily converted to HTML or PDF.</p>
<p>Choose from the list of <a class="helplink" href="docs/data-formats/markdown/options" target="anywaydatadocs">formatting options</a> and press the [Apply] button to render the data in the chosen style.</p>
<p><a class="helplink" href="docs/data-formats/markdown/options" target="anywaydatadocs">Learn more</a></p>
</div>
<div data-name="ascii-table-options">
<p>Export the table data as Ascii Table suitable for adding to an email or text file.</p>
<p>Choose from a list of predefined formats and press the [Apply] button to render the table in the chosen style.</p>
<p><a class="helplink" href="docs/data-formats/ascii-tables/options" target="anywaydatadocs">Learn more</a></p>
</div>
<div data-name="csv-options">
<p>Export the table data as <a class="helplink" href="docs/data-formats/csv/csv" target="anywaydatadocs">CSV (Comma Separated Values)</a> suitable for importing into a spreadsheet.</p>
<p>Choose from the formatting options and press the [Apply] button to render the data in the chosen style.</p>
<p><a class="helplink" href="docs/data-formats/csv/options" target="anywaydatadocs">Learn more</a></p>
</div>
<div data-name="delimiter-options">
<p>Export the table data as a <a class="helplink" href="docs/data-formats/delimited/delimited" target="anywaydatadocs">Delimited</a> output suitable for importing or copy and pasting into a spreadsheet.</p>
<p>Choose from the formatting options and press the [Apply] button to render the data in the chosen style.</p>
<p><em>Hint: Use Tab delimiter if copying into another table editing application like a spreadsheet.</em></p>
<p><a class="helplink" href="docs/data-formats/delimited/options" target="anywaydatadocs">Learn more</a></p>
</div>
<div data-name="json-options">
<p>Export the table data as a <a class="helplink" href="docs/data-formats/json/json" target="anywaydatadocs">JSON</a> output suitable for JSON interchange messages e.g. APIs.</p>
<p>Choose from the formatting options and press the [Apply] button to render the JSON in the chosen style.</p>
<p><a class="helplink" href="docs/data-formats/json/options" target="anywaydatadocs">Learn more</a></p>
</div>
<div data-name="javascript-options">
<p>Export the table data as a <a class="helplink" href="docs/data-formats/javascript/javascript" target="anywaydatadocs">Javascript</a> output suitable for using in a Javascript application or unit testing code.</p>
<p>Choose from the formatting options and press the [Apply] button to render the Javascript in the chosen style.</p>
<p><a class="helplink" href="docs/data-formats/javascript/options" target="anywaydatadocs">Learn more</a></p>
</div>
<div data-name="gherkin-options">
<p>Export the table data as <a class="helplink" href="docs/data-formats/gherkin/gherkin" target="anywaydatadocs">Gherkin</a>, a human readable format used in BDD automation.</p>
<p>The <a class="helplink" href="docs/data-formats/gherkin/options" target="anywaydatadocs">formatting options</a> help pretty print the output to fit in the specification.</p>
<p><a class="helplink" href="docs/data-formats/gherkin/options" target="anywaydatadocs">Learn more</a></p>
</div>
<div data-name="html-table-options">
<p>Export the table data as a <a class="helplink" href="docs/data-formats/html/html-tables" target="anywaydatadocs">HTML Table</a> suitable for adding to a web page.</p>
<p>Choose from the formatting options and press the [Apply] button to render the data as HTML code.</p>
<p>Import any HTML code by pasting the `table` contents into the text area and pressing `Set Grid From Text`</p>
<p><a class="helplink" href="docs/data-formats/html/options" target="anywaydatadocs">Learn more</a></p>
</div>
</div>
<script>
function updateHelpHints(){
tippy('.helpicon', {
content(reference) {
const id = reference.getAttribute('data-help');
// look up help text
const helpItems = document.getElementById("inline-help-items");
const helpText = helpItems.querySelector(`div[data-name='${id}']`);
// return help text
if(helpText){
return helpText.innerHTML;
}else{
console.log("TODO: Create help for " + id);
}
},
placement: 'top-start',
allowHTML: true,
interactive: true,
}
);
}
window.addEventListener('load', (event) => {
document.getElementById("initial-load").remove();
updateHelpHints();
});
</script>
</body>
</html>