Instantly share code, notes, and snippets.

Embed
What would you like to do?
//Waiting for the document to be ready, this part is crucial for making sure that we place
//all the appended/prepended table columns in good order.
$( document ).ready(function() {
var $button = document.querySelector('button');
$button.addEventListener('click', function() {
var duration = 0.3,
delay = 0.08;
```javascript
//This is part of the code is just here for animation on the buttons of the original file.
```
TweenMax.to($button, duration, {scaleY: 1.6, ease: Expo.easeOut});
TweenMax.to($button, duration, {scaleX: 1.2, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay});
TweenMax.to($button, duration * 1.25, {scaleX: 1, scaleY: 1, ease: Back.easeOut, easeParams: [6], delay: delay * 3 });
$('table').attr('id', 'mainTable');
});
//Adding a class to the first column of the table for css purposes.
$("table tr td:first-child").addClass("largeName");
//Adding "checkboxes" sign to the table head.
//and then populating the column with actual checkboxes
//This is the same as writing $("table th").
tableHead = $("table tr:first");
tableHead.append('<th class="checkbox">Selected</th>');
$('table tr').each(function(i){
if(i > 0){
$this = $(this);
$this.append('<td"><input class="checkbox" type="checkbox"></td>');
}
});
var table = $('table');
$('.checkbox').change(function() {
//This part is here for changing the color
//and the text-color of the row who's checkbox we selected.
if($(this).is(':checked')){
tableRow = $(this).parents('tr');
tableRow.css("background-color", "rgba(150, 140, 150, 0.7)");
tableRow.css("color", "white");
tableRow.css("transition", "background-color 0.4s");
tableRow.css("transition", "color 0.4s");
}else{
//Removing the color design added for when the checkbox is unchecked.
$(this).parents('tr').removeAttr('style');
}
});
//This looks at all the checked boxes, and takes the filenames of
//of those who got checked.
function getAllCheckedFilenames(){
var filenames = "";
$(".checkbox").each(function(i){
$this = $(this);
if($this.is(":checked")){
//the 2nd row is where the filenames are located.
filename = $('td:nth-child(2)', $this.parents('tr')).text();
//This part is necessary for the python code that
//turns the filenames into an array of filename with .split('%')
filenames += filename + "%";
}
});
return filenames;
}
//The code for this is below.
parseNameToDate();
//Making sure to remove the last '%'.
function formatForQuery(files){
return files.substring(0, files.length-1);
}
//Checks that the submit button is clicked.
$(function(){
$('button#uploadSlctd').click(function() {
//Takes the form's value and appends it with the checked
//files, gets the names and then sends them as a query for
//the Flask server to parse and upload to the server.
//(MeteorJS used for upload)
$('form#uploadSlctd').attr('action', function() {
value = $('form#uploadSlctd').attr("action");
files = getAllCheckedFilenames();
files = formatForQuery(files);
return value + files;
});
});
});
$(function(){
$('button#dwnldSlctd').click(function() {
//Same deal as previously. The Flask server zips
//all the selected files and sends the file
//with send_file(...) in Flask.
$('form#dwnldSlctd').attr('action', function() {
value = $('form#dwnldSlctd').attr("action");
files = getAllCheckedFilenames();
files = formatForQuery(files);
return value + files;
});
});
});
$(function(){
$('button#dltSlctd').click(function() {
//Same deal as previously.
//The Flask server simply deletes the file.
$('form#dltSlctd').attr('action', function() {
value = $('form#dltSlctd').attr("action");
files = getAllCheckedFilenames();
files = formatForQuery(files);
return value + files;
});
});
});
//Adds the icons to the table head
//more on this below.
addIcons();
//This is the array that checks if we
//have an ascending order or descending
//sorting algorithm for the table.
var asc = [1,1,1,1,1];
$(function(){
$('thead th').click(function(i){
if($('th').index(this) != 3 && $('th').index(this) != 4){
//Recording whick table column was sorted
//This part is important for the column icons be in order with
//their actual meaning.
asc[$('th').index(this)] *= -1;
//Sorts the table using quicksort, then the table gets rearranged
//by keeping track of which row was sorted.
//I didn't use the tableSorter and Datatable because they aren't
//working for all kinds of web browsers.
//More on this below.
sortTable($(this).index(), asc);
//Changes icons according to which one was clicked.
//More on this below.
changeIcon($(this).index(), asc);
}
});
});
//Sorting the table according the date.
//This is just the default for when the table is just
//finished being generated.
changeColortoGreyExcept(0);
sortTable(1, "Date");
});
function addIcons(){
//This adds the icons to all of the table head columns.
$('th').each(function(i){
if(i != 3 && i != 4){
//I didn't need to sort the last two columns since one is the
//Checkboxes that we appended and the other is useless to sort.
$(this).append('<i class="fa fa-sort-desc"></i>');
}
});
}
function changeIcon(index, asc){
changeColortoGreyExcept(index);
$('thead th i').each(function(i){
//Takes all the icons and changes them according
//to which one was clicked upon.
if(index == i){
if($(this).hasClass('fa fa-sort-desc')){
$(this).removeClass("fa fa-sort-desc");
$(this).addClass("fa fa-sort-asc");
}else{
$(this).removeClass("fa fa-sort-asc");
$(this).addClass("fa fa-sort-desc");
}
}
});
}
//Changes the color of the icons according to which one
//was selected.
function changeColortoGreyExcept(index){
$('thead th i').each(function(i){
if(index != i){
$(this).css('color', '#828080');
}else{
$(this).css("color", "#02B165");
}
});
}
//Typical partition algorithm necessary for Quicksort.
//The comparator is needed to check on which kind of comparison
//we need to use for the column selected.
//This was necessary because each column has a different kind of type
//such as numericals, strings, strings and numericals.
function partition(array, left, right, comparator) {
var pivot = Math.floor((left + right) / 2 );
while(left <= right) {
if(comparator == "Date"){
//array[right] <= array[pivot]
while(compareDate(array[left], array[pivot]) == 1){
left++;
}
//array[right] > array[pivot]
while(compareDate(array[right], array[pivot]) == -1){
right--;
}
}else if(comparator == "Name"){
while(compareName(array[left], array[pivot]) == 1){
left++;
}
while(compareName(array[right], array[pivot]) == -1){
right--;
}
}else{ //comparator == "Size"
while(array[left] < array[pivot]) {
left++;
}
while(array[right] > array[pivot]) {
right--;
}
}
if(left <= right) {
swap(array, left, right);
left++;
right--;
}
}
return left;
}
var ikeeper = [];
//Typical swap algorithm. This also makes sure to swap
//the index-keeping array. This is important for the
//later arrangement of the table.
function swap(arr, i, j){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
temp = ikeeper[i];
ikeeper[i] = ikeeper[j]
ikeeper[j] = temp;
return ikeeper;
}
//Typical Quicksort algorithm.
function quicksort(array, left, right, comparator) {
left = left || 0;
right = right || array.length - 1;
var pivot = partition(array, left, right, comparator);
if(left < pivot - 1) {
quicksort(array, left, pivot - 1, comparator);
}
if(right > pivot) {
quicksort(array, pivot, right, comparator);
}
return array;
}
//This takes in the argument of which column was clicked for sorting
//and the array that keeps track of the ascending or descending order.
function sortTable(index, asc){
ikeeper = [];
var table = $('table')
//.find('...') returns an array of the Objects
var rowNum = table.find('tr').length;
var colNum = table.find('tr').eq(0).find('th').length;
var columnValues = [];
//Needed for nth-child method which's first index starts at 1.
index += 1;
//Assigns comparator according to the column selected.
var comparator = "Date"
if(index == 1){
comparator = "Date";
}else if(index == 2){
comparator = "Name";
}else{
comparator = "Size";
}
$('tr').each(function(i){
//This adds columns' different values to the columnValues array.
//Again since the nth-child begins with index 1.
if(i != 0){
var cellValue = table.find('tbody tr:nth-child(' + i + ')').find('td:nth-child(' + index + ')').html();
if(comparator == "Size"){
//Makes sure to convert the string into numericals.
columnValues.push(cellValue - 0);
}else{
columnValues.push(cellValue);
}
//This adds to each row an ID with their current positions.
//This is important for the index-keeper array to organize
//properly.
//tbody is necessary for skipping the table header.
$('tbody tr:nth-child(' + i + ')').attr('id', 'row' + i);
var innerHTML = table.find('tbody tr:nth-child(' + i + ')').html();
//ikeeper = index-keeper -> [1,2,3,4,5 ... number of rows -1].
ikeeper.push(i);
}
});
//Finally calls Quicksort on the rows!
columnValues = quicksort(columnValues, 0, columnValues.length -1, comparator);
if(asc[index-1] == -1){
//In case of descending order.
ikeeper.reverse();
}
//Traverses the index-keeper and gets the rows
//according to their original organizations 'RowX'
for(i = 0; i < ikeeper.length; i++){
$('tbody #row' + ikeeper[i]).after($('tbody #row' + ikeeper[i+1]));
}
}
function parseNameToDate(){
//Adds the header for the date in the beginning of the table.
$('thead tr').prepend('<th>Date <span class="smallLetters">dd/mm/yy</span></th>');
//Takes in the name of the collection which is named according to the date
//And creates a more user-friendly way of displaying the date.
$('tbody tr').each(function(i){
var name = $(this).find('td:eq(0)').html();
var date = name.substring(name.indexOf('-')+1, name.indexOf('_'));
dateFormatted = date.substring(0, 2) + '/' + date.substring(2, 4) + '/' + date.substring(4, date.length);
//Populates the column with the dates.
$(this).prepend('<td>' + dateFormatted + '</td>');
});
}
//Compares dates of the format "DD/MM/YY".
function compareDate(a, b){
//making sure that they are of type string.
a += "";
b += "";
//converting to numericals after parsing.
aDD = a.substring(0, 2) - 0;
aMM = a.substring(3, 5) - 0;
aYY = a.substring(6, 8) - 0;
bDD = b.substring(0, 2) - 0;
bMM = b.substring(3, 5) - 0;
bYY = b.substring(6, 8) - 0;
//a > b = -1
//a < b = 1
//a == b = 0
if(aYY > bYY) return -1;
if(aYY < bYY) return 1;
if(aMM > bMM) return -1;
if(aMM < bMM) return 1;
if(aDD > bDD) return -1;
if(aDD < bDD) return 1;
return 0;
}
//Parses the name into date format "DD/MM/YY".
function compareName(a, b){
a += "";
b += "";
a = a.substring(a.indexOf('-')+1, a.indexOf('_'));
a = a.substring(0, 2) + '/' + a.substring(2, 4) + '/' + a.substring(4, a.length);
b = b.substring(b.indexOf('-')+1, b.indexOf('_'));
b = b.substring(0, 2) + '/' + b.substring(2, 4) + '/' + b.substring(4, b.length);
return compareDate(a, b);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment