Solved

Filter and display a particular value and display it in the game log table.

Posted on 2013-11-12
6
262 Views
Last Modified: 2013-11-14
I have a html table of xml data one column is xml attrib called Playtype I wanted to filter the html table using a dropdown and button. A expert helped me do one for football. This one for hockey is different so I cannot apply same code to this one. Looking for Chris S. I started coding on part 2 of this webapp. So just disregard that code in the html doc
NHLRINK.zip
0
Comment
Question by:powerztom
  • 3
  • 3
6 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39642650
Hey powerztom,

I've had a quick look at your code and there's a lot going on that I don't get! Do you want this to behave in a similar way to your previous question?
0
 

Author Comment

by:powerztom
ID: 39642777
Yeah the thing is this code I got some help with and is different from yours but all I want is to have it work just like the football the way you did. The current play row this there just have dropdown below game log table and filtering to but I know this one is going to be a bitch.But ignore the color and half coded functions I'm going to spilt this up One part is filter and html table and 2nd part is canvas drawing symbols on screen. don't worry about 2nd part. And no rush bro when you can get to it. Thanks
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39647684
Have a play with this. Haven't tested it fully, so you may need to tweak, but hopefully you'll get the general idea. Any questions, just ask:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Q_28291883 // Chris Stanyon</title>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			//The DOMs ready so lets get started
			getData();
			
			$('#applyFilter').click(applyFilter);
		});
		
		
		
		function getData() {
			//grab the XML file with an AJAX request. Once we've got it, call the processGame function
			xmlPath = '.';
			xmlGameID = '17996';
			gameFile = xmlPath + '/' + xmlGameID + '.xml',

			$.ajaxSetup({ cache: false });
			$.ajax({
				url: gameFile,
				dataType: "xml"
			})
			.done(processGame)
			.fail()
			.always();
		}


		
		function processGame(gameData) {
			//convert the XML into a jQuery object
			game = $(gameData);
			currentPlay = game.find('Play').first();
			
			//set a timer to run the script again in 2 seconds
			setTimeout(getData,2000);

			//do we have new plays
			if (currentPlay.attr('Seq') == $('#currentPlay').data('currentSeq')) {
				console.log("No New Plays");
				return;
			}



			//set up the Team Headers
			teams = new Array();
			teams.push(game.find('Team[vh="A"]').attr('ID'));			
			teams.push(game.find('Team[vh="H"]').attr('ID'));

			$('Team', currentPlay).each(function(i, team) {
				//set the team name
				$('.' + $(this).attr('vh') + ' .teamName', '#teamHeaders').html( $(this).attr('name') );
				//set the team colours
				if (colourScheme = getColours($(this).attr('ID'), teams)) {
					$('.' + $(this).attr('vh') + ' .teamColour', '#teamHeaders')
						.css({'background-color': colourScheme.fillColour, 'border': 'solid 3px ' + colourScheme.lineColour});
				};
			});

			

			//set up the Current Play
			currentPlayTable = $('#currentPlay');
			currentPlayTable.data('currentSeq', currentPlay.attr('Seq'));
			playInfo = getPlayInfo(currentPlay);

			$('td:nth-child(1)', currentPlayTable).html( $('<img>').attr('src', playInfo.teamImg ) );
			$('td:nth-child(2)', currentPlayTable).html( $('<img>').attr('src', playInfo.playerImg ) );
			$('td:nth-child(3)', currentPlayTable).html( playInfo.playType );
			$('td:nth-child(4)', currentPlayTable).html( playInfo.playNarr );
			
			//add the play type to the filter dropdown
			if (!$("#playType option[value='" + playInfo.playType + "']").length) {
				$('#playType').append($('<option>').text( playInfo.playType ).val( playInfo.playType ));	
			};



			//set up the Previous Plays
			lastPlay = $('#playLog tbody tr:first');
			lastPlay = (lastPlay.data('playSeq')) ? lastPlay.data('playSeq') : 0;
			
			//get the Seq of the play in the currentPlay table
			currentPlay = $('#currentPlay').data('currentSeq');
			
			//get the previous plays. This is a list of plays where the Seq is greater than the last play added and less than the current play
			previousPlays = $('PreviousPlays Play', game).filter(function() {
				return (parseInt($(this).attr('Seq')) > parseInt(lastPlay) && parseInt($(this).attr('Seq')) < parseInt(currentPlay))
			});

			setPreviousPlays(previousPlays);



			//Setup the canvas - not sure why yet!
			canvas = $('#myCanvas').get(0).getContext('2d');
			canvas.globalAlpha = 0.5;
		}
		
		
		
		function getPlayInfo(play) {
			var teamID, playerID;
			var playTypes = {
				"GOAL": {subnode: 'Goal', teamidnode: 'ScoreTeamID', playeridnode: 'ScoreID'},
				"MISSED": {subnode: 'Missed', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
				"BLOCKED": {subnode: 'Blocked', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
				"ONGOAL": {subnode: 'OnGoal', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
				"HIT": {subnode: 'Hit', teamidnode: 'HitTeamID', playeridnode: 'HitID'},
				"PENL": {subnode: 'Penalty', teamidnode: 'PONTeamID', playeridnode: 'PONID'}
			};
			
			if ( playInfo = $(playTypes).attr( play.attr('PlayType')) ) {
				teamID = play.find(playInfo.subnode).attr(playInfo.teamidnode);
				playerID = play.find(playInfo.subnode).attr(playInfo.playeridnode);
			}

			return {
				'teamImg'	: (teamID) ? 'http://images.sportsnetwork.com/nhl/attherink/logos/' + teamID + '.png': 'http://powerzsoftware.com/tsn/IMAGES/NHLLOGOX.png',
				'playerImg'	: (playerID) ? 'http://images.sportsnetwork.com/NHL/attherink/players/' + playerID + '.jpg' : 'http://powerzsoftware.com/tsn/IMAGES/sKATE.png',
				'playType'	: play.attr('PlayType'),
				'playNarr'	: play.find('narrative').attr('text')
			}
		}
		
		
		
		function setPreviousPlays(previousPlays) {
			console.log('Previous Plays');
			
			$(previousPlays).each(function(i, play) {
				playInfo = getPlayInfo($(play));
				
				//add the play types to the drop down
				if (!$("#playType option[value='" + $(this).attr('PlayType') + "']").length) {
					$('#playType').append($('<option>').text($(this).attr('PlayType')).val($(this).attr('PlayType')));	
				};
				
				newRow = $('<tr>')
					.data({ playType: playInfo.playType, playSeq : $(play).attr('Seq') })
					.append( $('<td>').html( $('<img>').attr('src', playInfo.teamImg)))
					.append( $('<td>').html( $(play).attr('TimeLeft')))
					.append( $('<td>').html( playInfo.playType ).append( $('<img>').attr('src', playInfo.playerImg)))
					.append( $('<td>').html(playInfo.playNarr));
					
				
				//do we need to hide the play based on the filter?
				appliedFilter = $('#applyFilter').data('appliedFilter');
				if (appliedFilter && appliedFilter != "Show All" && $(this).attr('PlayType') != appliedFilter) {
					newRow.addClass('hidden');
				}
					
				newRow.appendTo('#playLog tbody');
			})
			
		}
		
		
		function applyFilter() {
			console.log("Filtering on: " + $('#playType').val());

			//store the Filter type for later use
			$(this).data('appliedFilter', $('#playType').val());
			
			//before applying a new filter, clear the old one
			$('#playLog tr.hidden').removeClass('hidden');
			
			//if Show All isn't selected, we need to hide some rows
			if ($('#playType').val() != "Show All") {
				playsToHide = $('#playLog tr').filter(function() {
					return $(this).data('playType') != $('#playType').val();
				}).addClass('hidden');
			}
		}


		function getColours(teamID, teams) {
			var colourMatrix = {
				'145' : { lineColour: '#FFCC99', fillColour: '#91764C' },
				'133' : { lineColour: '#0000FF', fillColour: '#055B8D' },
				'140' : { lineColour: '#0000FF', fillColour: '#D93600', altTeams: ['138'], altColour: '#FF0000' },
				'148' : { lineColour: '#003366', fillColour: '#253E67', altTeams: ['139', '142'], altColour: '#FF0033' },
				'142' : { lineColour: '#000099', fillColour: '#07515F' } 
			}
			
			colourScheme = colourMatrix[teamID];
			
			if (!colourScheme) { console.log('Colour Error'); return; };
			
			var altColour = false;
			
			$.each(teams, function(i,team) {
				if ($.inArray(team, colourScheme.altTeams) >= 0) {
					console.log("We need the Alternative Colour");
					altColour = true;
				}
			})
		
			teamColours = {
				lineColour: colourScheme.lineColour,
				fillColour: (altColour) ? colourScheme.altColour : colourScheme.fillColour
			}
		
			return teamColours;
		}
		</script>

		<style type="text/css">
			#playLogScroll { height: 360px; overflow-y: scroll; width: 500px; border: 1px solid grey; }
			#playLogTemplate { display: none; }
			#playLog, #currentPlay { width: 360px; }
			#playLog col:nth-child(1), #currentPlay col:nth-child(1) { width: 16%; }
			#playLog col:nth-child(2), #currentPlay col:nth-child(2) { width: 16%; }
			#playLog col:nth-child(3), #currentPlay col:nth-child(3) { width: 25%; }
			#playLog col:nth-child(4), #currentPlay col:nth-child(4) { width: 43%; }
			
			#playLog tr.hidden { display:none }
			#teamHeaders .teamColour { display:inline-block; height: 30px; width: 50px; }
		</style>
	</head>

	<body>
		
		<div id="teamHeaders">
			<div class="H">
				<span class="teamColour"></span>
				<span class="teamName"></span>
			</div>
			<div class="A">
				<span class="teamColour"></span>
				<span class="teamName"></span>
			</div>
		</div>	
		
		<canvas id="myCanvas" width="370" height="163"></canvas>
		
		<div id="filters">
			<h2>Filters</h2>
				<select id="playType">
					<option value="Show All">Show All</option>
				</select>
				<button id="applyFilter">Filter</button>
		</div>
		
		<table id="currentPlay">
			<colgroup><col><col><col><col></colgroup>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
			
		<div id="playLogScroll">
			<table id="playLog">
				<colgroup><col><col><col><col></colgroup>
				<tbody></tbody>
			</table>
		</div>

	</body>

</html>

Open in new window

0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Closing Comment

by:powerztom
ID: 39648136
Some advanced code here Chris I tested it with a static game log. Preformed Great. Tonight I'm going to test it on a live hockey game. In the previous verision during live gameplay I'd get javascript messagebox saying script has become unresponsive continue or cancel buttons so it was suggested to me to use something like this setTimeout(getData,2000); and you have it. So It will be interesting to see. But as far as what I requested Chris you did a kick ass job. Thank You. Color schemes and canvas I'm going to separate that from this. To simplify.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39648248
lol. Yeah, some new stuff for you to get your head around, but most of it should be fairly straightforward - if there's something you don't understand, ask.

Obviously couldn't test with a live game, but it should be OK. You might want to implement some sort of 'check' before setting the timeout, so if the game is over, a timeout is no longer fired (I think we did this in a previous question by checking a STATUS === FINAL value!)

The thing about setting a timeout rather than an interval, is that it only ever gets set once the data has been received, so you're more unlikely to have clashes (i.e the script running again while it's still trying to receive it). To be honest, depending on the game, you could probably get away with setting it to 5 seconds. Your call.

Have a look through the bit of colour coding I put in. Your previous method was not really a good performer. Using lots of if/elseif statement is a slow way of going. Basically it runs through each if/elseif code block until it reaches a match, so potentially running 30 or 40 code blocks, just to find the one it needs.

I setup the colours in an array, and then just pulled the relevant data from it. Hopefully it makes sense. Couldn't see why you were setting colours with 0x and then converting them for the CSS.

Couldn't really see what you were trying to do with the canvas so left it alone.

Couple of tips for when developing code. Firstly, bin DreamWeaver. You only have to take a look at the crap it produces (all those functions starting MM). They look like they only create a mouse over, which can be done with 1 single line of CSS.

Also, when naming variables, use something that's meaningful. As you're pulling in game data, call it something like 'game'. Calling it 'd' make no sense. And this line:

var i1, i2, ii;

They mean nothing. You may know they mean now, or next week, but in a year - unlikely. And if others work on your code - no chance.

Finally, learn about variable scope. A variable exists only in a defined scope (a variable declared in a function, exists only in that function). You seem to be declaring variables in the Global scope (outside of functions) just so you have access to them throughout your application. It's a sure-fire way of losing track, and introducing security problems later on. If you need access to certain information inside a function, pass it in as an argument.
0
 

Author Comment

by:powerztom
ID: 39648640
Chris,

Thanks for your input and suggestions. I keep saying that I'm a Sloppy VB programmer I learned alot of lazy habits and all the function and statement closings with brackets is tough for me getting used to cause in VB you never had to close any thing. So it's been a tough switch. But I am grateful to you and guys like you how take the time and explain and help out. As you can see I am involved with creating Gamecasts for Big 4 Sports and College.
I had alot of help from a EE Guy Robert S he helped me out alot. And I'm just saying that I am grateful some stuff I pickup quicker then others but I keep plugging away and looking at the code you and your co EE Guys wrote.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now