the_new_guy
the_new_guy

Reputation: 55

Selecting a string (present) as well as a year with Javascript

I am trying to edit my fraternities current website. As of now it displays past brothers but now we want to add the function of sorting by whom ever is active. All of the brothers names are stored in an array

var brothers = new Array();
brothers[0] = ["","john","q.","Smith","","alpha","2012-present","facebook.com/profile"];
brothers[1] = ["","antonio","","adams","","beta","1909-1911",""];
brothers[2] = ["","william","","solo","","gamma","1920-1920",""];
Now the script that runs the whole page was written by an older brother like 2-3 years ago (and he is no help right now) but here is the script that he wrote

var prefixIndex=0;
var firstNameIndex=1;
var middleNameIndex=2;
var lastNameIndex=3;
var suffixIndex=4;
var lineIndex=5;
var yearIndex=6;
var linkIndex=7;

var startYear=1898;
var endYear=new Date().getFullYear();

var filter_line="";
var filter_year="";
var filter_name="";

var itemsPerRow=3;
var rowsPerPage=5;

var theSpans=new Array();
var itemCount=0;

var lines=new Array();
for(var i=0;i<brothers.length;i++){
	if(!linesContains(brothers[i][lineIndex])){
		lines[lines.length]=brothers[i][lineIndex];
	}
}
lines.sort();

document.write('<div class="row search-bg">');
document.write('<div class="row"><div class="container"><div class="span12"><h3>Search by:</h3></div></div></div>');
document.write('<div class="row"><div class="container"><div class="span12"><div class="control-group"><input id="theName" type="text" placeholder="Name" onkeypress="return enterSearch(event)" /></div></div></div></div>');
document.write('<div class="row"><div class="container"><div class="span12"><div class="control-group"><select id="year"><option value="">All Years</option>');
for(var t=endYear;t>=startYear;t--){
	document.write('<option value="'+t+'">'+t+'</option>');
}
document.write('</select></div></div></div></div>');
document.write('<div class="row"><div class="container"><div class="span12"><div class="control-group"><select id="line"><option value="">All Roles</option>');
for(var t=0;t<lines.length;t++){
	document.write('<option value="'+lines[t]+'">'+lines[t]+'</option>');
}
document.write('</select></div></div></div></div>');
document.write('<div class="row"><div class="container"><div class="filter-buttons"><div class="span12"><a href="javascript:showSearching();" class="btn btn-form-submit filter-button">Search</a> <a href="javascript:clearEntries();clearResults();">Reset</a></div></div></div></div>');
document.write('</div>');
document.write('<div class="row" id="results-div"></div>');

function writeResults(){
	var resultsMessage="";
	if(filter_name.length>0){
		resultsMessage=filter_name;
	}
	if(filter_line.length>0){
		if(resultsMessage.length>0){
			resultsMessage=resultsMessage+" &amp; ";
		}
		resultsMessage=resultsMessage+filter_line;
	}
	if(filter_year.length>0){
		if(resultsMessage.length>0){
			resultsMessage=resultsMessage+" &amp; ";
		}
		resultsMessage=resultsMessage+filter_year;
	}
	if(resultsMessage.length>0){
		resultsMessage="Search results for: "+resultsMessage;
	}else{
		resultsMessage="Showing all results";
	}
	$("#results-div").html('<div class="row filter-controls"><div class="span6"><h3 id="results_message"></h3></div><div class="span6 pagination" id="pagination"></div></div><div class="row" id="results-container"></div>');
	theSpans=results();
	if(itemCount==0){
		$("#results_message").html("No results found");
	}else{
		$("#results_message").html(resultsMessage);
	}
	showPage(0);
}

function isValid(theId){
	var valid=true;
	if(filter_name.length>0){
		valid=brothers[theId][prefixIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1||brothers[theId][firstNameIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1||brothers[theId][middleNameIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1||brothers[theId][LastNameIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1||brothers[theId][suffixIndex].toLowerCase().indexOf(filter_name.toLowerCase())>-1;
	}
	if(filter_line.length>0){
		valid=filter_line.toLowerCase()==brothers[theId][lineIndex].toLowerCase();
	}
	if(filter_year.length>0){
		valid=valid&&checkYear(theId,filter_year);
	}
	return(valid);
}

function checkYear(theId,theYear){
	var isYear=false;
	theYear=parseInt(theYear)||0;
	var multiSplit=brothers[theId][yearIndex].split(";");
	for(var i=0;i<multiSplit.length;i++){
		var start=parseInt(multiSplit[i].split("-")[0])||9999;
		var end=parseInt(multiSplit[i].split("-")[1])||0;
		if(theYear>=start&&theYear<=end){
			isYear=true;
		}
	}
	return(isYear);
}

function getEntry(theId){
	var theBrother='<div class="portrait-border span'+(12/itemsPerRow)+'">';
	if(brothers[theId][linkIndex].length>0){
		theBrother=theBrother+'<a href="'+brothers[theId][linkIndex]+'">';
	}
	theBrother=theBrother+'<div class="brothers"><b>';
	if(brothers[theId][prefixIndex].length>0){
		theBrother=theBrother+brothers[theId][prefixIndex]+' ';
	}
	theBrother=theBrother+brothers[theId][firstNameIndex];
	if(brothers[theId][middleNameIndex].length>0){
		theBrother=theBrother+' '+brothers[theId][middleNameIndex];
	}
	theBrother=theBrother+' '+brothers[theId][lastNameIndex];
	if(brothers[theId][suffixIndex].length>0){
		theBrother=theBrother+' '+brothers[theId][suffixIndex];
	}
	theBrother=theBrother+'</b><br>'+brothers[theId][lineIndex]+'<br>'+brothers[theId][yearIndex];
	if(brothers[theId][linkIndex].length>0){
		theBrother=theBrother+'<br><span class="brother-link">Learn more</span>';
	}
	theBrother=theBrother+'</div>';
	if(brothers[theId][linkIndex].length>0){
		theBrother=theBrother+'</a>';
	}
	theBrother=theBrother+'</div>';
	return(theBrother);
}

function results(){
	var spans=new Array();
	var theString="";
	var spanCounter=0;
	var rowCounter=0;
	itemCount=0;
	
	for(var i=0;i<brothers.length;i++){
		if(isValid(i)){
			itemCount++;
			if(spanCounter==itemsPerRow){
				theString=theString+'</div>';
				spanCounter=0;
				if(rowCounter==rowsPerPage){
					spans[spans.length]=theString;
					theString="";
					rowCounter=0;
				}else{
					rowCounter++;
				}
			}
			if(spanCounter==0){
				theString=theString+'<div class="row">';
			}
			theString=theString+getEntry(i);
			spanCounter++;
		}
	}
	for(spanCounter;spanCounter<itemsPerRow;spanCounter++){
		theString=theString+'<div class="span'+(12/itemsPerRow)+'">&nbsp;</div>';
	}
	theString=theString+"</div>";
	spans[spans.length]=theString;
	return(spans);
}

function showPage(thePage){
	$("#results-container").html(theSpans[thePage]);
	if(theSpans.length>1){
		var thePages='<div>';
		for(var i=0;i<theSpans.length;i++){
			thePages=thePages+'<a class="filter-pagination';
			if(i==thePage){
				thePages=thePages+' active';
			}
			thePages=thePages+'" href="javascript:showPage('+i+')">'+(i+1)+'</a>';
		}
		thePages=thePages+"</div>";
		$("#pagination").html(thePages);
	}
}

function showSearching(){
	filter_name=getValue('theName');
	filter_line=$('#line').val();
	filter_year=$('#year').val();
	clearResults();
	setTimeout(writeResults,10);
}

function getValue(theId){
	var theValue=$("#"+theId).val();
	if(theValue==$("#"+theId).attr("placeholder")){
		return('')
	}else{
		return(theValue);
	}
}

function enterSearch(e) {
	var e=window.event || e;
	var keyunicode=e.charCode || e.keyCode;
	if (keyunicode == 13){
		showSearching();
	}else{
		return(true);
	}
}
function clearEntries(){
	$("#line").val("");
	$("#year").val("");
	$("#theName").val("");
}

function clearResults(){
	$("#results-div").html("");
}


function linesContains(theRole){
	for(var r=0;r<lines.length;r++){
		if(lines[r].toLowerCase()==theRole.toLowerCase()){
			return(true);
		}
	}
	return(false);
}

addLoadEvent(showSearching);

function addLoadEvent(func) { 
	var oldonload = window.onload; 
	if (typeof window.onload != 'function') { 
		window.onload = func; 
	} else { 
		window.onload = function() { 
			if (oldonload) { 
				oldonload(); 
			} 
			func(); 
		} 
	}
}

What I want to do is to insert a "Present" option between 2015 and All years in the dropdown. And allow it to display anyone who is listed as present in the array. I did do some searching on SO but I didnt really see anything that answered my question exactly please help

Upvotes: 1

Views: 36

Answers (1)

Charlie Wynn
Charlie Wynn

Reputation: 933

Edit: Just wanted to add that I agree with @CBroe that separate year values would be better, you could just have a is_active property too

I'm not too sure why checkyear splits on ';' since none of the brothers[x][yearIndex] has a ; in it

function checkYear(theId,theYear){

    //just get the brother's year in one var "2001-2005"
    var brothersYears=brothers[theId][yearIndex];

    //just to be clear, lets get each of the years into their own vars, even if the end is 'present'
    var start=brothersYears.split("-")[0];
    var end=brothersYears.split("-")[1];

    //if the end year is the search year then it's valid
    //works if the search year is a number, or 'present'
    if(theYear === end)
      return true;

    //if the brother's year is present, set it to the current year so we can test for it
    if(end == 'present')
      end = theYear; // can just set it to this, since if they're present, and we're searching from their start year or beyond, their end year == theYear will work

    //if it wasn't 'present' then we'll assume start, end, and theYear are ints
    return theYear >= start && theYear <= end;
}

and you'll have to add a

<option value="present">Current Brothers</option>

to the year dropdown

Upvotes: 1

Related Questions