initial commit
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
function generateDataArrayForColumn(totalRowCount, columnConfig) {
|
||||
let result = [];
|
||||
let columnCountArray = Array.from(Array(totalRowCount), (x, i) => i);
|
||||
columnCountArray.forEach((x, i) => {
|
||||
result.push(columnConfig.getData());
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
function createHeaders(dataConfig) {
|
||||
let headers = dataConfig.map((a) => a.columnName);
|
||||
return headers;
|
||||
}
|
||||
|
||||
export function createExcelRowData(totalRowCount, dataConfig) {
|
||||
const rows = [];
|
||||
rows.push(createHeaders(dataConfig));
|
||||
let createDataSet = [];
|
||||
dataConfig.forEach((columnConfig) => {
|
||||
createDataSet.push(generateDataArrayForColumn(totalRowCount, columnConfig));
|
||||
});
|
||||
|
||||
for (let i = 0; i < totalRowCount; i++) {
|
||||
let rowData = [];
|
||||
createDataSet.forEach((columnData) => {
|
||||
rowData.push(columnData[i]);
|
||||
});
|
||||
rows.push(rowData);
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
+70655
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,34 @@
|
||||
function downloadFile(csvFile, filename) {
|
||||
var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
|
||||
if (navigator.msSaveBlob) {
|
||||
//for IE
|
||||
navigator.msSaveBlob(blob, filename);
|
||||
} else {
|
||||
//Chrome and Firefox
|
||||
var link = document.createElement('a');
|
||||
if (link.download !== undefined) {
|
||||
var url = URL.createObjectURL(blob);
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', filename);
|
||||
link.style.visibility = 'hidden';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function generateFile(rows) {
|
||||
let csvFile = '';
|
||||
var d = new Date();
|
||||
|
||||
let filename = `CSV_Data_${d.getFullYear()}_${
|
||||
d.getMonth() + 1
|
||||
}_${d.getDate()} ${d.getHours()}:${d.getMinutes()}.csv`;
|
||||
|
||||
rows.forEach(function (rowArray) {
|
||||
let row = rowArray.join(',');
|
||||
csvFile += row + '\r\n';
|
||||
});
|
||||
downloadFile(csvFile, filename);
|
||||
}
|
||||
@@ -0,0 +1,481 @@
|
||||
export const ALL_OPTIONS = [
|
||||
// name
|
||||
{
|
||||
name: 'First Name',
|
||||
value: 'firstName',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.firstName();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Last Name',
|
||||
value: 'lastName',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.lastName();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Full Name',
|
||||
value: 'findName',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.findName();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Job Title',
|
||||
value: 'jobTitle',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.jobTitle();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Name Prefix',
|
||||
value: 'prefix',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.prefix();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Name Suffix',
|
||||
value: 'suffix',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.suffix();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Name Title',
|
||||
value: 'title',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.title();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Job Descriptor',
|
||||
value: 'jobDescriptor',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.jobDescriptor();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Job Area',
|
||||
value: 'jobArea',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.jobArea();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Job Type',
|
||||
value: 'jobType',
|
||||
type: 'Name',
|
||||
getData() {
|
||||
return faker.name.jobType();
|
||||
},
|
||||
},
|
||||
|
||||
//Address
|
||||
{
|
||||
name: 'Street Name',
|
||||
value: 'streetName',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.streetName();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Street Address',
|
||||
value: 'streetAddress',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.streetAddress();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Secondary Address',
|
||||
value: 'secondaryAddress',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.secondaryAddress();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Zip Code',
|
||||
value: 'zipCode',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.zipCode();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'County',
|
||||
value: 'county',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.county();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'City',
|
||||
value: 'city',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.city();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'State',
|
||||
value: 'state',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.state();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'State Abbr',
|
||||
value: 'stateAbbr',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.stateAbbr();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Country',
|
||||
value: 'country',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.country();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Country Code',
|
||||
value: 'countryCode',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.countryCode();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Latitude',
|
||||
value: 'latitude',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.latitude();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Longitude',
|
||||
value: 'longitude',
|
||||
type: 'Address',
|
||||
getData() {
|
||||
return faker.address.longitude();
|
||||
},
|
||||
},
|
||||
//Company
|
||||
|
||||
{
|
||||
name: 'Company Name',
|
||||
value: 'companyName',
|
||||
// type: 'company',
|
||||
type: 'Finance',
|
||||
getData() {
|
||||
return faker.company.companyName();
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: 'bs',
|
||||
// value: 'bs',
|
||||
// type: 'company',
|
||||
// getData() {
|
||||
// return faker.company.bs();
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'companySuffix',
|
||||
// value: 'companySuffix',
|
||||
// type: 'company',
|
||||
// getData() {
|
||||
// return faker.company.companySuffix();
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'catchPhraseAdjective',
|
||||
// value: 'catchPhraseAdjective',
|
||||
// type: 'company',
|
||||
// getData() {
|
||||
// return faker.company.catchPhraseAdjective();
|
||||
// },
|
||||
// },
|
||||
|
||||
//finance
|
||||
{
|
||||
name: 'Account',
|
||||
value: 'account',
|
||||
type: 'Finance',
|
||||
getData() {
|
||||
return faker.finance.account();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Account Name',
|
||||
value: 'accountName',
|
||||
type: 'Finance',
|
||||
getData() {
|
||||
return faker.finance.accountName();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Currency Code',
|
||||
value: 'currencyCode',
|
||||
type: 'Finance',
|
||||
getData() {
|
||||
return faker.finance.currencyCode();
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Currency Name',
|
||||
value: 'currencyName',
|
||||
type: 'Finance',
|
||||
getData() {
|
||||
return faker.finance.currencyName();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Currency Symbol',
|
||||
value: 'currencySymbol',
|
||||
type: 'Finance',
|
||||
getData() {
|
||||
return faker.finance.currencySymbol();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Bitcoin Address',
|
||||
value: 'bitcoinAddress',
|
||||
type: 'Finance',
|
||||
getData() {
|
||||
return faker.finance.bitcoinAddress();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'IBAN',
|
||||
value: 'iban',
|
||||
type: 'Finance',
|
||||
getData() {
|
||||
return faker.finance.iban();
|
||||
},
|
||||
},
|
||||
//internet
|
||||
{
|
||||
name: 'Email',
|
||||
value: 'email',
|
||||
type: 'Internet',
|
||||
getData() {
|
||||
return faker.internet.email();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'User Name',
|
||||
value: 'userName',
|
||||
type: 'Internet',
|
||||
getData() {
|
||||
return faker.internet.userName();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'URL',
|
||||
value: 'url',
|
||||
type: 'Internet',
|
||||
getData() {
|
||||
return faker.internet.url();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Domain Name',
|
||||
value: 'domainName',
|
||||
type: 'Internet',
|
||||
getData() {
|
||||
return faker.internet.domainName();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'IP Address',
|
||||
value: 'ip',
|
||||
type: 'Internet',
|
||||
getData() {
|
||||
return faker.internet.ip();
|
||||
},
|
||||
},
|
||||
|
||||
//Date
|
||||
{
|
||||
name: 'Past Date',
|
||||
value: 'past',
|
||||
type: 'Date',
|
||||
getData() {
|
||||
return faker.date.past();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Future Date',
|
||||
value: 'future',
|
||||
type: 'Date',
|
||||
getData() {
|
||||
return faker.date.future();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Recent Date',
|
||||
value: 'recent',
|
||||
type: 'Date',
|
||||
getData() {
|
||||
return faker.date.recent();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Month',
|
||||
value: 'month',
|
||||
type: 'Date',
|
||||
getData() {
|
||||
return faker.date.month();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Weekday',
|
||||
value: 'weekday',
|
||||
type: 'Date',
|
||||
getData() {
|
||||
return faker.date.weekday();
|
||||
},
|
||||
},
|
||||
//random
|
||||
|
||||
{
|
||||
name: 'UUID',
|
||||
value: 'uuid',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return faker.random.uuid();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Boolean',
|
||||
value: 'boolean',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return faker.random.boolean();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'word',
|
||||
value: 'word',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return faker.random.word();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Random Character',
|
||||
value: 'randomCharacter',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
let characters =
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
return characters[Math.floor(Math.random() * characters.length)];
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: 'Sequence Generated Integer',
|
||||
// value: 'index',
|
||||
// index: 0,
|
||||
// type: 'a0',
|
||||
// getData: function () {
|
||||
// return this.index;
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: 'Random Integer',
|
||||
value: 'randomInteger',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return Math.floor(Math.random() * 10000);
|
||||
},
|
||||
},
|
||||
|
||||
//Commerce
|
||||
{
|
||||
name: 'Color',
|
||||
value: 'color',
|
||||
// type: 'commerce',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return faker.commerce.color();
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: 'Price',
|
||||
// value: 'price',
|
||||
// type: 'commerce',
|
||||
// getData() {
|
||||
// return faker.commerce.price();
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: 'Product',
|
||||
value: 'product',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return faker.commerce.product();
|
||||
},
|
||||
},
|
||||
//database
|
||||
// {
|
||||
// name: 'DataBase Column',
|
||||
// value: 'column',
|
||||
// type: 'database',
|
||||
// getData() {
|
||||
// return faker.database.column();
|
||||
// },
|
||||
// },
|
||||
|
||||
{
|
||||
name: 'Database Column Type',
|
||||
value: 'type',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return faker.database.type();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Database Collation',
|
||||
value: 'collation',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return faker.database.collation();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Database Engine',
|
||||
value: 'engine',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return faker.database.engine();
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Phone',
|
||||
value: 'phone',
|
||||
type: 'Other',
|
||||
getData() {
|
||||
return faker.phone.phoneNumber();
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,189 @@
|
||||
import { generateFile } from './filegeneration.js';
|
||||
import { createExcelRowData } from './datageneration.js';
|
||||
import { ALL_OPTIONS } from './options.js';
|
||||
|
||||
const generateBtn = document.getElementById('generate-button');
|
||||
const rowCountEl = document.getElementById('row-count');
|
||||
const dataInputContainer = document.querySelector('.data-input-container');
|
||||
const introduction = document.querySelector('.introduction');
|
||||
const getStarted = document.getElementById('getStarted');
|
||||
const mainContent = document.getElementById('main-content');
|
||||
const closeBtnForInputSelector = document.getElementById('closeInputSelector');
|
||||
const inputSelectorBkg = document.querySelector('.select-input-background');
|
||||
const selectGroupingOptions = document.querySelector(
|
||||
'.select-input-classification'
|
||||
);
|
||||
const selectInputContainer = document.querySelector('.select-input-options');
|
||||
|
||||
const ROWS_TO_START_WITH = 8;
|
||||
let DOMrows = [];
|
||||
let i = 0;
|
||||
let selectedRow;
|
||||
|
||||
function addValuesToOptions(filter) {
|
||||
selectInputContainer.innerHTML = '';
|
||||
ALL_OPTIONS.forEach((option) => {
|
||||
if (!filter || option.type === filter) {
|
||||
let optionEl = document.createElement('button');
|
||||
optionEl.classList.add('btn');
|
||||
optionEl.classList.add('selectOption');
|
||||
optionEl.dataset.value = option.value;
|
||||
optionEl.innerText = option.name;
|
||||
optionEl.addEventListener('click', (e) => {
|
||||
//add value to current row
|
||||
selectedRow.querySelector(
|
||||
'.inputSelection'
|
||||
).innerHTML = `${e.target.textContent} <i class="fa fa-angle-down"></i>`;
|
||||
selectedRow.querySelector('.inputSelection').dataset.value =
|
||||
e.target.dataset.value;
|
||||
inputSelectorBkg.classList.remove('show');
|
||||
});
|
||||
selectInputContainer.appendChild(optionEl);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function returnGetDataFunction(selectedOptionName) {
|
||||
let selectedOptionObject = ALL_OPTIONS.filter((option) => {
|
||||
return option.value === selectedOptionName;
|
||||
});
|
||||
return selectedOptionObject[0].getData;
|
||||
}
|
||||
|
||||
function fetchDOMValues() {
|
||||
let dataConfig = [];
|
||||
const rows = document.querySelectorAll('.row');
|
||||
rows.forEach((row, index) => {
|
||||
// to exclude the header which is the first row
|
||||
|
||||
if (index >= 1) {
|
||||
dataConfig.push({
|
||||
columnName: row.querySelector('.columnName').value,
|
||||
type: row.querySelector('.inputSelection').dataset.value,
|
||||
getData: returnGetDataFunction(
|
||||
row.querySelector('.inputSelection').dataset.value
|
||||
),
|
||||
maxLength: 100,
|
||||
minLength: 0,
|
||||
nullable: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
return dataConfig;
|
||||
}
|
||||
|
||||
function convertToColumnName(name) {
|
||||
return name.toUpperCase().split(' ').join('_');
|
||||
}
|
||||
|
||||
function addToDOMRows(rowClicked) {
|
||||
let randomOption =
|
||||
ALL_OPTIONS[Math.floor(Math.random() * ALL_OPTIONS.length)];
|
||||
let newRow = document.createElement('div');
|
||||
newRow.classList.add('row');
|
||||
newRow.classList.add('hide');
|
||||
newRow.innerHTML = `
|
||||
<div class="column">
|
||||
<input type="text" class="columnName" value="${convertToColumnName(
|
||||
randomOption.name
|
||||
)}">
|
||||
</div>
|
||||
<div class="column">
|
||||
<button class="inputSelection" data-value="${randomOption.value}">${
|
||||
randomOption.name
|
||||
}<i class="fa fa-angle-down"></i> </button>
|
||||
</div>
|
||||
<div class="column actions">
|
||||
<button class="add"> <i class="far fa-plus-square fa-2x add"></i><span class="tooltiptext">Add a New Row</span></button>
|
||||
<button class="delete"> <i class="fas fa-trash-alt fa-2x delete"></i><span class="tooltiptext">Delete Existing Row</span></button>
|
||||
</div>`;
|
||||
|
||||
DOMrows.push(newRow);
|
||||
if (rowClicked) {
|
||||
rowClicked.insertAdjacentElement('afterend', newRow);
|
||||
} else {
|
||||
dataInputContainer.insertAdjacentElement('beforeend', newRow);
|
||||
}
|
||||
setTimeout(() => {
|
||||
newRow.classList.remove('hide');
|
||||
}, 100);
|
||||
i++;
|
||||
}
|
||||
|
||||
function displayInputSelection(row) {
|
||||
inputSelectorBkg.classList.add('show');
|
||||
selectedRow = row;
|
||||
}
|
||||
|
||||
function deleteRowFromDOM(parentRow) {
|
||||
parentRow.classList.add('hide');
|
||||
setTimeout(() => {
|
||||
dataInputContainer.removeChild(parentRow);
|
||||
DOMrows = DOMrows.filter((row) => {
|
||||
return row !== parentRow;
|
||||
});
|
||||
if (DOMrows.length === 0) {
|
||||
addToDOMRows();
|
||||
}
|
||||
}, 600);
|
||||
}
|
||||
|
||||
function loadMainContainer() {
|
||||
introduction.classList.add('hide');
|
||||
mainContent.style.display = 'inline';
|
||||
setTimeout(() => {
|
||||
introduction.style.display = 'none';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function documentClick(e) {
|
||||
const parentRow = e.target.closest('.row');
|
||||
if (e.target.classList.contains('add')) {
|
||||
addToDOMRows(parentRow);
|
||||
}
|
||||
if (e.target.classList.contains('delete')) {
|
||||
deleteRowFromDOM(parentRow);
|
||||
}
|
||||
if (e.target.classList.contains('inputSelection')) {
|
||||
displayInputSelection(parentRow);
|
||||
}
|
||||
}
|
||||
|
||||
function fetchDataAndGenerateFile() {
|
||||
let rowCount = +rowCountEl.value;
|
||||
let dataConfig = fetchDOMValues();
|
||||
let rows = createExcelRowData(rowCount, dataConfig);
|
||||
generateFile(rows);
|
||||
}
|
||||
|
||||
//event listeners
|
||||
generateBtn.addEventListener('click', fetchDataAndGenerateFile);
|
||||
document.addEventListener('click', documentClick);
|
||||
getStarted.addEventListener('click', loadMainContainer);
|
||||
closeBtnForInputSelector.addEventListener('click', () => {
|
||||
inputSelectorBkg.classList.remove('show');
|
||||
});
|
||||
|
||||
for (let i = 0; i < ROWS_TO_START_WITH; i++) {
|
||||
addToDOMRows();
|
||||
}
|
||||
addValuesToOptions();
|
||||
|
||||
let GROUPED_OPTIONS = {};
|
||||
ALL_OPTIONS.forEach((option) => {
|
||||
if (!GROUPED_OPTIONS[option.type]) {
|
||||
GROUPED_OPTIONS[option.type] = [];
|
||||
}
|
||||
GROUPED_OPTIONS[option.type].push(option);
|
||||
});
|
||||
|
||||
for (let key in GROUPED_OPTIONS) {
|
||||
let group = document.createElement('div');
|
||||
group.className = 'optionGroup';
|
||||
group.innerText = `${key}(${GROUPED_OPTIONS[key].length})`;
|
||||
group.addEventListener('click', () => {
|
||||
console.log('clicked');
|
||||
addValuesToOptions(key);
|
||||
});
|
||||
selectGroupingOptions.appendChild(group);
|
||||
}
|
||||
Reference in New Issue
Block a user