Problem with overlapping times in radio selections

Question

0.00/5 (No votes)

See more:

We have this code, thanks to a helpful person but it does not fully work as expected. The problem is that it currently checks for an exact match of dates, but there are situations of times that overlap one another and that should show a conflict too (background becomes red in case of conflicts). As you can see the following date "Wednesday Oct/30 11:00 AM - 3:15 PM" of Engineering overlaps with both Wednesday Oct/30 10:00 AM - 12:15 PM of Business and Reliability. Obviously one cannot be at the same time at different locations.

The code used is this:

JavaScript

$(".time").change(function() {
        var values = $("input.time").map(function(){
            return $(this).val();
        });
        values.each( function (){
            var overlapping = $("input.time[value='"+ this +"']");
            if (overlapping.filter(":checked").length > 1){                            
                overlapping.parents("tr").addClass("red");}
            else{
                overlapping.parents("tr").removeClass("red");
            }
        })
    });

The fiddle is here: http://jsfiddle.net/3VFRt/

I know what needs to be done but I can't seem to grasp how that is done in jQuery. I am thinking it needs to extract the date data from the columns (td's) and see if there is an overlap in time, if so show it accordingly (css class=red). Basically the script needs some refining and it will work perfectly. If anyone can help me out here I would be very grateful. Thanks in advance.

Posted 14-Sep-13 22:38pm

Member 10274898

Updated 14-Sep-13 22:52pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

SrikantSahu · Accepted Answer · 2013-09-15T03:33:00

I have provided a solution based upon the html you have provided in the Jsfiddle.
The input values are mismatching with the displayed values in the jsfiddle, So I corrected them and came up with the below solution.

However, I personally prefer to store the dates while rendering components itself, such that it will help to easily fetch the dates while comparing. :)

Also updated your JsFiddle. :)

JavaScript

//create a variable to keep the selected dates of all the three types.
 var selectedDates = { 
	business : {  time1 : null, time2 : null, node:null},
	reliability : { time1 : null, time2 : null, node:null},
	engineering : {  time1 : null, time2 : null, node:null},
 };
var year = (new Date()).getFullYear();
var monthList = { Jan :1 ,Feb :2, Mar :3, Apr:4, May:5, Jun:6, Jul:7, Aug:8,Sep:9,Oct:10,Nov:11,Dec:12}
$( document ).ready(function() {

$(".time").change(function() {
	var node= this,name = $(node).attr('name');
		if($(node).val() === '~'){
			selectedDates[name].time1 = selectedDates[name].time2 =  selectedDates[name].node=null;
			$('input.time[name="'+name+'"').parents("tr").removeClass("red");
			return;
			}
			var fullDate = $(node).val().split('|')[0], timeList = $(node).val().split('|')[1];
			name = $(node).attr('name');
			time1 = timeList.split('-')[0].trim();
			time2 = timeList.split('-')[1].trim();
			day = fullDate.split(' ')[1]; 
			month = day.split('/')[0];
			date= day.split('/')[1];
			month = monthList[month];
			console.log(time1,time2,day,month,date);
			selectedDates[name].time1 = new Date(month+'/'+date+'/'+year+' '+time1);
			selectedDates[name].time2 = new Date(month+'/'+date+'/'+year+' '+time2);
			selectedDates[name].node = $(node);
    $('.red').removeClass('red');//clear everything 
	for(prop in selectedDates)
	{
		compareDates(prop);
	}
	checkInconsistency();

});

function compareDates(name){
	//Summary
	//Function used to carry out the comparision of the recently selected radio button with other groups
	for(prop in selectedDates)
	{	
	  if(selectedDates[prop].time1 !== null && prop!==name){
		
		if(compareTime(name,prop) || compareTime(prop,name))
		{
			//Again set the red class
			$(selectedDates[name].node).parents("tr").addClass("red");
			$(selectedDates[prop].node).parents("tr").addClass("red");
		} 
		}
	}
}

function compareTime(name1,name2){
	//Summary
	//This function checks for the overlapping.
	return (selectedDates[name1].time1 >= selectedDates[name2].time1 && selectedDates[name1].time1 <= selectedDates[name2].time2) || 
		(selectedDates[name1].time2 >= selectedDates[name2].time1 && selectedDates[name1].time2 <= selectedDates[name2].time2)
}

function checkInconsistency(){
	//Summary
	//To check whether any record present which in not overlapping anymore.
	if($('.red').length === 1)
	{
		$('.red').removeClass('red');
	}
}
});