Skip to content

Instantly share code, notes, and snippets.

@adamson

adamson/datahandle.js

Last active December 10, 2015 17:59
Show Gist options
  • Save adamson/4471646 to your computer and use it in GitHub Desktop.
Save adamson/4471646 to your computer and use it in GitHub Desktop.
Download ZIP
Adamson's work for Sparkart test
Raw
actions.css
/* Actions
----------------------------------------------------------------------------- */
ul.actions {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.actions li {
display: block;
width: 47%;
margin-left: 2%;
float: left;
}
ul.actions a {
display: block;
border-radius: 10px;
outline: none;
padding: 10px;
background-color: #aaa;
color: #fff;
font-weight: bold;
font-size: 14px;
line-height: 20px;
text-decoration: none;
text-transform: uppercase;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
ul.actions a.complete {
background-color: #6ba144;
}
/* Table Actions
----------------------------------------------------------------------------- */
td.actions a {
display: block;
outline: none;
padding: 5px;
background-color: #aaa;
color: #fff;
font-weight: bold;
text-decoration: none;
white-space: nowrap;
}
td.actions a.add {
background-color: #6ba144;
}
td.actions a.remove {
background-color: #ed6d34;
}
Raw
datahandle.js
if( typeof datahandle == "undefined" ){
window.datahandle = {};
}
datahandle={
isOrphan: true,
initRow: function(newRow){
newRow.children("td").each(function(){
if ($(this).find("input").length)
{
$(this).find("input").val("");
}
else if ($(this).find("select").length)
{
$(this).find("select")[0].selectedIndex = -1;
}
});
newRow.children(":nth-child(5)").html("");
},
append: function(){
/* Clone */
var newRow = $("table tbody tr:first-child").clone(true);
datahandle.cloneRow(newRow);
/* Append */
newRow.appendTo("table tbody");
},
cloneRow: function(newRow){
/* Get the Last Index of the current rows */
var lastIndex= $("table tbody tr:last-child td:first-child input").attr("name").substring(5);
lastIndex = parseInt(lastIndex) + 1;
/* Name Modify */
newRow.children("td").each(function(){
if ($(this).find("input").length)
{
var childname = $(this).find("input").attr("name");
$(this).find("input").attr("name", childname.substring(0, childname.length - 1) + lastIndex.toString());
}
else if ($(this).find("select").length)
{
var childname = $(this).find("select").attr("name");
$(this).find("select").attr("name", childname.substring(0, childname.length - 1) + lastIndex.toString());
}
});
datahandle.initRow(newRow);
},
remove: function(row){
var removedRow = row.children("td:first-child").map(function() {
var name = $(this).find("input").val();
var main = $(this).siblings(':nth-child(2)').find("select")[0].selectedIndex;
var side = $(this).siblings(':nth-child(3)').find("select")[0].selectedIndex;
var beer = $(this).siblings(':nth-child(4)').find("select")[0].selectedIndex;
var sum = $(this).siblings(':nth-child(5)').html();
return {
name: name,
main: main,
side: side,
beer: beer,
sum: sum
};
}).get();
localStorage.setObject("removedRow", removedRow);
},
restore: function(row){
if (datahandle.isOrphan == true)
{
datahandle.restoreFromLocalStorage($("table tbody tr:first-child"));
}
else{
var newRow = $("table tbody tr:first-child").clone(true);
datahandle.cloneRow(newRow);
datahandle.restoreFromLocalStorage(newRow);
/* Append */
newRow.appendTo("table tbody");
}
datahandle.updateGrandTotal();
},
restoreFromLocalStorage: function(row){
removedRow = localStorage.getObject("removedRow");
row.children("td:first-child").find("input").val(removedRow[0].name);
row.children("td:nth-child(2)").find("select")[0].selectedIndex = removedRow[0].main;
row.children("td:nth-child(3)").find("select")[0].selectedIndex = removedRow[0].side;
row.children("td:nth-child(4)").find("select")[0].selectedIndex = removedRow[0].beer;
row.children("td:nth-child(5)").html(removedRow[0].sum);
},
updateSum: function(tr){
datahandle.updateSubTotal(tr);
datahandle.updateGrandTotal();
},
updateSubTotal: function(tr){
var sum = 0.0;
for (var i = 2; i<= 4 ; i++)
{
if ((tr.children("td:nth-child(" + i + ")").find("select")[0].selectedIndex > 0) && (tr.children("td:nth-child(" + i + ")").find("select").val().length > 0) && (tr.children("td:nth-child(" + i + ")").find("select").val() != "None"))
{
sum += parseFloat(tr.children("td:nth-child(" + i + ")").find("select").val().substring(1));
}
}
tr.children(":nth-child(5)").html(
"$" + sum.toFixed(2)
);
},
updateGrandTotal: function(){
var sum = 0;
$("table tbody tr").each(function(){
if ($(this).children(":nth-child(5)").html().length > 0)
{
sum = sum + parseFloat($(this).children(":nth-child(5)").html().substring(1));
}
});
$("table tfoot tr td:nth-child(2)").html("$" + sum.toFixed(2));
},
beforeSubmit: function(){
var tableData = $("table tbody tr td:first-child").map(function() {
var name = $(this).find("input").val();
if (name.trim().length > 0)
{
var main = $(this).siblings(':nth-child(2)').find("select")[0].selectedIndex;
var side = $(this).siblings(':nth-child(3)').find("select")[0].selectedIndex;
var beer = $(this).siblings(':nth-child(4)').find("select")[0].selectedIndex;
var sum = $(this).siblings(':nth-child(5)').html();
return {
name: name,
main: main,
side: side,
beer: beer,
sum: sum
};
}
}).get();
alert(JSON.stringify(tableData));
}
};
Raw
gistfile1.txt
Adamson's Work for Sparakart test
Raw
localstoragehelper.js
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
Raw
messages.css
/* Messaging
----------------------------------------------------------------------------- */
div.message {
display: block;
float: left;
width: 94%;
margin: 0 2% 20px 2%;
border-radius: 10px;
padding: 10px 1%;
background-color: #1681ac;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
div.message h3 {
display: block;
float: left;
margin: 0 1% 0 0;
padding: 0;
color: #fff;
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
}
div.message a {
display: block;
border-radius: 5px;
padding: 0 5px;
float: left;
background-color: #fff;
color: #000;
line-height: 20px;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
/* Color Coding
----------------------------------------------------------------------------- */
div.message.error {
background-color: #ed6d34;
}
div.message.error h3 {
color: #5c1a0c;
}
div.message.success {
background-color: #6ba144;
}
div.message.success h3 {
color: #c4f4a2;
}
Raw
tables.css
/* Tables
----------------------------------------------------------------------------- */
table {
clear: left;
width: 96%;
margin: 0 2% 40px 2%;
padding: 0;
border-collapse: collapse;
}
tfoot td.total {
color: #6ba144;
}
/* Headers */
th {
border-bottom: 2px solid #aaa;
border-right: 1px solid #eee;
padding: 10px;
color: #aaa;
font: normal 11px/11px "Trebuchet MS", Arial, sans-serif;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
thead th:last-child {
border-right: 0;
}
/* Cells */
tbody td {
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 10px;
white-space: nowrap;
}
tbody tr:last-child td {
border-bottom: 0 !important;
}
tbody td:last-child {
border-right: 0;
}
/* Form Elements */
td.error select, td.error input {
border: 2px solid #ed6d34;
}
/* Footer */
tfoot td {
border-right: 1px solid #eee;
border-top: 1px solid #eee;
border-bottom: 0;
padding: 10px;
}
tfoot td[colspan] {
text-align: right;
color: #aaa;
}
tfoot td:last-child {
border-right: 0;
}
Raw
test.css
/* Front End Programming Test
----------------------------------------------------------------------------- */
@import url(actions.css);
@import url(messages.css);
@import url(tables.css);
/* Defaults
----------------------------------------------------------------------------- */
body {
margin: 20px 0;
padding: 0;
background: #fff;
color: #000;
font: normal 12px/14px 'Trebuchet MS', Arial, sans-serif;
}
h2 {
margin: 0 0 20px 2%;
padding: 0;
color: #000;
font: bold 24px/30px 'Trebuchet MS', Arial, sans-serif;
}
Raw
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Front End Programming Test &#166; Clique Tools</title>
<!-- STYLES -->
<link href="styles/test.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="scripts/localstoragehelper.js"></script>
<script src ="scripts/datahandle.js"></script>
<!-- SCRIPTS -->
<script>
$(document).ready(function(){
$(".message.success").hide();
/* Add Event Handler */
$(".add").click(function(){
datahandle.isOrphan = false;
datahandle.append();
});
/* Add Event Handler End */
/* Remove Event Handler */
$(".remove").click(function(){
/* Double check that user is going to remove the order */
var deleteConfirm = confirm("Are you sure to remove the order?");
if (deleteConfirm == true)
{
var row = $(this).closest("tr");
datahandle.remove(row);
// Check the table is going to be orphan
if ($("table tbody tr").size() > 1){
$(this).closest("tr").remove();
}
else{
datahandle.initRow($(this).closest("tr"));
datahandle.isOrphan = true;
}
datahandle.updateGrandTotal();
$(".message.success").show();
}
});
/* Remove Event Handler End */
/* Undo Event Handler*/
$(".undo").click(function(){
datahandle.restore();
$(".message.success").hide();
});
/* Undo Event Handler End */
$("select").change(function(){
var tr = $(this).closest("tr");
datahandle.updateSum(tr);
});
$(".complete").click(function(){
datahandle.beforeSubmit();
$("form").submit();
});
});
</script>
</head>
<body>
<!-- ALERT MESSAGE -->
<div class="message success">
<h3>Order Removed</h3>
<a href="#" class="undo">Undo</a>
</div>
<h2>Take Orders</h2>
<form method="post" action="#">
<!-- ORDERS -->
<table cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Main</th>
<th>Side</th>
<th>Beer</th>
<th style="width: 100%">Total</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="name-0" type="text" /></td>
<td>
<select name="main-0">
<option>&nbsp;</option>
<optgroup label="Meats &amp; Fish">
<option value="$13.75">Pork Trotter Burger</option>
<option value="$17.00">Slow-cooked Farm Egg</option>
<option value="$14.00">Softshell Crab Po'boy</option>
<option value="$18.00">Seared Squid</option>
<option value="$19.50">Blackened Catfish</option>
<option value="$18.00">Fried Chicken</option>
</optgroup>
<optgroup label="Vegetables">
<option value="$19.00">Escarole Salad</option>
<option value="$17.00">Artichoke</option>
<option value="$19.00">Chilled Eggplant Soup</option>
<option value="$18.00">Roasted Beets and New Onions</option>
<option value="$18.00">Braised Cauliflower</option>
<option value="$18.00">Mushroom Dashi</option>
<option value="$18.00">Young Vegetables</option>
<option value="$18.00">New Harvest Potatoes</option>
</optgroup>
<option>None</option>
</select>
</td>
<td>
<select name="side-0">
<option>&nbsp;</option>
<option value="$7.00">Belgian-style Fries with Aioli</option>
<option value="$6.00">Creamed Spinach</option>
<option value="$4.50">Chickpea Fritters</option>
<option value="$4.00">Fried Feta Cheese-Stuffed Olives</option>
<option value="$4.00">Collard Green</option>
<option value="$4.00">Potato Chicharrones</option>
<option>None</option>
</select>
</td>
<td>
<select name="beer-0">
<option>&nbsp;</option>
<optgroup label="Belgium">
<option value="$9.00">St. Bernardus Abt 12</option>
<option value="$5.50">Saison Dupont</option>
<option value="$9.00">Houblon Chouffe</option>
<option value="$6.00">Rodenbach Grand Cru</option>
</optgroup>
<optgroup label="California">
<option value="$6.00">Linden St. Common Lager</option>
<option value="$6.00">Speakeasy Prohibition Ale</option>
<option value="$4.00">Anchor Steam Beer</option>
<option value="$5.00">Stone IPA</option>
<option value="$4.00">Pyramid Hefeweizen</option>
</optgroup>
<optgroup label="Canada">
<option value="$6.00">Unibroue Maudite</option>
<option value="$6.00">Unibroue La Fin du Monde</option>
<option value="$2.99">Molson Canadian</option>
</optgroup>
<option>None</option>
</select>
</td>
<td>$0.00</td>
<td class="actions"><a class="remove" href="#">Remove</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><em>Sub-total</em></td>
<td class="total"><strong>$0.00</strong></td>
<td class="actions"><a class="add" href="#">Add an Order</a></td>
</tr>
</tfoot>
</table>
<!-- ACTIONS -->
<ul class="actions">
<li><a class="complete" href="#">Complete Order</a></li>
<li><a class="reset" href="#">Start Over</a></li>
</ul>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment