react-pivot
Version:
React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration.
252 lines (212 loc) • 9.52 kB
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">
<meta name="description" content="">
<meta name="author" content=""><html>
<title>faker.js - generate massive amounts of fake data in node.js and the browser</title>
<script src = "js/jquery.js" type = "text/javascript"></script>
<script src = "js/prettyPrint.js" type = "text/javascript"></script>
<script src = "js/faker.js" type = "text/javascript"></script>
<link href="bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function(e){
// draw buttons
function drawButtons () {
$('#buttons').html('');
for (var module in faker) {
for (var method in faker[module]) {
if (typeof faker[module][method] === "function") {
var inputID = "button_" + module + "_" + method;
var str = '\
<tr>\
<td align="right"><input class="fakerButton" type="button" value="' + module + "." + method +'" id="' + inputID + '"/></td>\
<td><input size="100" id="' + inputID + "_value" + '" type="input" value="' + faker[module][method]() + '"></td>\
</tr>';
$('#buttons').append(str);
}
}
}
$('.fakerButton').click(function(e){
var inputID = $(this).attr('id') + "_value";
var arr = inputID.split('_');
var module = arr[1];
var method = arr[2];
$('#' + inputID).attr('value', faker[module][method]())
});
}
drawButtons();
var _locales = [];
for(var locale in faker.locales) {
_locales.push({ name: locale, title: faker.locales[locale].title})
}
_locales = _locales.sort(function(a, b){
if (a.title < b.title)
return -1;
if (a.title > b.title)
return 1;
return 0;
});
_locales.forEach(function(item){
$('.locale').append('<option value="' + item.name+ '">' + item.title + '</option>');
});
$('.locale').val("en");
$('.locale').change(function(e){
var locale = $(this).attr('value');
faker.locale = locale;
drawButtons();
generateName();
});
function generateName () {
// make name contextual to username and email
var firstName = faker.name.firstName(),
lastName = faker.name.lastName();
var dob = faker.date.past(50, new Date("Sat Sep 20 1992 21:35:02 GMT+0200 (CEST)"));
dob = dob.getFullYear() + "-" + dob.getMonth() + "-" + dob.getDate();
$('#inputName').attr("value", faker.name.findName(firstName, lastName));
$('#inputDob').attr("value", dob);
$('#inputStreetAddress').attr("value", faker.address.streetAddress());
$('#inputCityStateZip').attr("value", faker.address.city() + ", " + faker.address.stateAbbr() + " " + faker.address.zipCode());
$('#inputCountry').attr("value", faker.locales[faker.locale].address.default_country || "");
$('#inputPhone').attr("value", faker.phone.phoneNumber());
$('#inputUsername').attr("value", faker.internet.userName(firstName, lastName));
$('#inputPassword').attr("value", faker.internet.password());
$('#inputEmail').attr("value", faker.internet.email(firstName, lastName));
$('#imageAvatar').attr("src", faker.internet.avatar());
};
$('#generateName').click(function(){
generateName();
});
generateName();
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://github.com/marak/faker.js">faker.js - generate massive amounts of fake data in node.js and the browser</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="http://github.com/marak/faker.js">Code</a></li>
<li><a href="http://github.com/marak/faker.js/issues">Issues</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<form class="form-horizontal">
<fieldset>
<br/>
<br/>
<br/>
<h2>Generate Person</h2>
<br/>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Locality</label>
<div class="col-lg-10">
<select class="form-control locale">
</select>
<br>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button id="generateName" type="button" class="btn btn-primary">Generate New</button>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputDob" class="col-lg-2 control-label">Date of Birth:</label>
<div class="col-lg-10">
<input type="input" class="form-control" id="inputDob" placeholder="Date of Birth">
</div>
</div>
<div class="form-group">
<label for="inputStreetAddress" class="col-lg-2 control-label">Street Address:</label>
<div class="col-lg-10">
<input type="input" class="form-control" id="inputStreetAddress" placeholder="Street Address">
</div>
</div>
<div class="form-group">
<label for="inputCityStateZip" class="col-lg-2 control-label">City, State Zip:</label>
<div class="col-lg-10">
<input type="input" class="form-control" id="inputCityStateZip" placeholder="City, State Zip">
</div>
</div>
<div class="form-group">
<label for="inputCountry" class="col-lg-2 control-label">Country:</label>
<div class="col-lg-10">
<input type="input" class="form-control" id="inputCountry" placeholder="Country">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Phone Number:</label>
<div class="col-lg-10">
<input type="input" class="form-control" id="inputPhone" placeholder="Phone Number">
</div>
</div>
<div class="form-group">
<label for="inputUsername" class="col-lg-2 control-label">Username:</label>
<div class="col-lg-10">
<input type="input" class="form-control" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password:</label>
<div class="col-lg-10">
<input type="input" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="input" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="imageAvatar" class="col-lg-2 control-label">Avatar:</label>
<div class="col-lg-10">
<img class="" id="imageAvatar"/>
</div>
</div>
</fieldset>
</form>
</div>
<div class="container">
<h2>API Reference</h2>
<p>Click button to generate new value</p>
Locality: <select class="form-control locale"></select>
<table class="table table-striped table-hover buttonsTable">
<thead>
<tr>
<th>API Call</th>
<th>Result</th>
</tr>
</thead>
<tbody id="buttons">
</tbody>
</table>
</div>
<div id="footer">
<div class="container">
<strong>protip</strong>: open your console on this page and run: <code>console.log(faker); var randomName = faker.name.findName(); console.log(randomName);</code><hr/>
</div>
</div>
</body>
</html>