SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Time overlapping in JS

    Hello,

    i'm new to JS scripting... I need some help writing this function:

    With PHP and MySQL I retrieve a number of starting times and ending times of activities.

    f.e. I have 4 activities:
    1. from 09:00:00 to 10:00:00
    2. from 10:00:00 to 11:00:00
    3. from 10:30:00 to 11:00:00
    4. from 09:30:00 to 10:00:00

    I put these in a table with a checkbox on each line.

    Now I need a JS function that does this:

    f.e. When I check the first row (from 9:00 to 10:00), JS checks what other activities overrule these times. So in this case the 4th activity (9:30 to 10:00) will be set inactive.

    How to make such a function?

    help would be much appreciated :-)

    Thanx in advance!

    Jan

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do all that with either a set of if-elseif statements or a switch block (my preference) to check if the selected start/end times overlap any of the other times.

    Post the html and javascript you have so far and we can try to help you get it working.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello webdev1958,

    I allready put something together, but it is still not working like it has to...
    Sorry for my bad code :-)

    Code PHP:
    <html>
    <head>
    <script language="javascript">
    function mysqlTimeStampToDate(timestamp) {
        //function parses mysql datetime string and returns javascript Date object
        //input has to be in this format: 2007-06-05 15:26:02
        var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?: ([0-2][0-9]): ([0-5][0-9]): ([0-5][0-9]))?$/;
        var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
    	//alert(parts);
        return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
      }
    function checkTable(tabelnaam, keuze){
    	var urenvan = [];
    	var urentot = [];
    	var actok = [];
    	var tabel = document.getElementById(tabelnaam);
    	var trs = tabel.getElementsByTagName("span");
    	for(var i=0;i<trs.length;i++)
    	{
    		var sp = trs[i].id.split("-");
    		if (sp[0]=="actvan"){
    			actok.push("NEW");
    			urenvan.push(trs[i].innerHTML);
    		}else{
    			urentot.push(trs[i].innerHTML);
    		}
    	}
    	for(var i in urenvan)
    	{
    		if (i != keuze){
    			van1 = mysqlTimeStampToDate('2010-01-01 '+urenvan[keuze]);
    			tot1 = mysqlTimeStampToDate('2010-01-01 '+urentot[keuze]);
    			van2 = mysqlTimeStampToDate('2010-01-01 '+urenvan[i]);
    			tot2 = mysqlTimeStampToDate('2010-01-01 '+urentot[i]);
    			if(van1 > van2 && tot1 < tot2)
    			{	//-> Check time is in between start and end time
    				actok[i]="NIETOK";
    			}else if((van1 > van2 && van1 < tot2) || (tot1 > van2 && tot1 < tot2))
    			{	//-> Check start or end time is in between start and end time
    				actok[i]="NIETOK";
    			}else if(van1==van2 || tot1==tot2)
    			{	//-> Check start or end time is at the border of start and end time
    				actok[i]="OK";
    			}else if(van2 > van1 && tot2 < tot1)
    			{	//-> start and end time is in between  the check start and end time.
    				actok[i]="OK";
    			}
    		}
    	}
    	alert(actok.join('\n'));
    	for(var o in actok)
    	{
    		if(o != keuze){
    			var rij = "rij"+o;
    			if (actok[o]=="NIETOK"){
    				document.getElementById[rij].style.display='none';
    			}else{
    				document.getElementById[rij].style.display='block';
    			}
    		}
    	}
    }
    </script>
    </head>
    <body>
    <?php
    $uren = array();
    $uren[0]["van"] = "09:00:00";
    $uren[0]["tot"] = "10:00:00";
    $uren[1]["van"] = "09:50:00";
    $uren[1]["tot"] = "11:00:00";
    $uren[2]["van"] = "11:00:00";
    $uren[2]["tot"] = "11:30:00";
    $uren[3]["van"] = "09:30:00";
    $uren[3]["tot"] = "10:30:00";
    //echo "<pre>";
    //print_r($uren);
    //echo "</pre>";
    ?>
    <table width="500" border="1" id="activiteiten">
    <?
    foreach($uren as $key => $value){
    	?>
    	<tr id="rij<?=$key?>"><td><input type="checkbox" name="act<?=$key?>"></td><td><?=$key?></td><td><span id="actvan-<?=$key?>"><?=$value["van"]?></span></td><td><span id="acttot-<?=$key?>"><?=$value["tot"]?></span></td></tr>
    	<?
    }
    ?>
    </table>
    <input type="button" value="test 0" onclick="javascript:checkTable('activiteiten', '0');">
    <input type="button" value="test 1" onclick="javascript:checkTable('activiteiten', '1');">
    <input type="button" value="test 2" onclick="javascript:checkTable('activiteiten', '2');">
    <input type="button" value="test 3" onclick="javascript:checkTable('activiteiten', '3');">
    </body>
    </html>

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I copy and pasted your code and ran it on my local xampp server and your page doesn't even display properly in my IE9.

    Below is the html generated by your code (from View Source in the browser) that is sent back to the browser. In it you can see there is still some php code which obviously shouldn't be there.

    You need to fix your php code so it generates the correct html before playing with the javascript.
    Code:
    <html>
        <head>
            <script language="javascript">
                function mysqlTimeStampToDate(timestamp) {
                    //function parses mysql datetime string and returns javascript Date object
                    //input has to be in this format: 2007-06-05 15:26:02
                    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?: ([0-2][0-9]): ([0-5][0-9]): ([0-5][0-9]))?$/;
                    var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
                    //alert(parts);
                    return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
                }
                function checkTable(tabelnaam, keuze){
                    var urenvan = [];
                    var urentot = [];
                    var actok = [];
                    var tabel = document.getElementById(tabelnaam);
                    var trs = tabel.getElementsByTagName("span");
                    for(var i=0;i<trs.length;i++)
                    {
                        var sp = trs[i].id.split("-");
                        if (sp[0]=="actvan"){
                            actok.push("NEW");
                            urenvan.push(trs[i].innerHTML);
                        }else{
                            urentot.push(trs[i].innerHTML);
                        }
                    }
                    for(var i in urenvan)
                    {
                        if (i != keuze){
                            van1 = mysqlTimeStampToDate('2010-01-01 '+urenvan[keuze]);
                            tot1 = mysqlTimeStampToDate('2010-01-01 '+urentot[keuze]);
                            van2 = mysqlTimeStampToDate('2010-01-01 '+urenvan[i]);
                            tot2 = mysqlTimeStampToDate('2010-01-01 '+urentot[i]);
                            if(van1 > van2 && tot1 < tot2)
                            {    //-> Check time is in between start and end time
                                actok[i]="NIETOK";
                            }else if((van1 > van2 && van1 < tot2) || (tot1 > van2 && tot1 < tot2))
                            {    //-> Check start or end time is in between start and end time
                                actok[i]="NIETOK";
                            }else if(van1==van2 || tot1==tot2)
                            {    //-> Check start or end time is at the border of start and end time
                                actok[i]="OK";
                            }else if(van2 > van1 && tot2 < tot1)
                            {    //-> start and end time is in between  the check start and end time.
                                actok[i]="OK";
                            }
                        }
                    }
                    alert(actok.join('\n'));
                    for(var o in actok)
                    {
                        if(o != keuze){
                            var rij = "rij"+o;
                            if (actok[o]=="NIETOK"){
                                document.getElementById[rij].style.display='none';
                            }else{
                                document.getElementById[rij].style.display='block';
                            }
                        }
                    }
                }
            </script>
        </head>
        <body>
                    <table width="500" border="1" id="activiteiten">
                <?
                foreach ($uren as $key => $value) {
                    ?>
                    <tr id="rij<?= $key ?>"><td><input type="checkbox" name="act<?= $key ?>"></td><td><?= $key ?></td><td><span id="actvan-<?= $key ?>"><?= $value["van"] ?></span></td><td><span id="acttot-<?= $key ?>"><?= $value["tot"] ?></span></td></tr>
                            <?
                        }
                        ?>
            </table>
            <input type="button" value="test 0" onclick="javascript:checkTable('activiteiten', '0');">
            <input type="button" value="test 1" onclick="javascript:checkTable('activiteiten', '1');">
            <input type="button" value="test 2" onclick="javascript:checkTable('activiteiten', '2');">
            <input type="button" value="test 3" onclick="javascript:checkTable('activiteiten', '3');">
        </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry! I deleted all PHP code:

    Code HTML4Strict:
    <html>
    <head>
    <script language="javascript">
    function mysqlTimeStampToDate(timestamp) {
        //function parses mysql datetime string and returns javascript Date object
        //input has to be in this format: 2007-06-05 15:26:02
        var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;
        var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
    	//alert(parts);
        return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
      }
    function checkTable(tablename, choice){
    	var timefrom = [];
    	var timeuntil = [];
    	var actok = [];
    	var tabel = document.getElementById(tablename);
    	var trs = tabel.getElementsByTagName("span");
    	for(var i=0;i<trs.length;i++)
    	{
    		var sp = trs[i].id.split("-");
    		if (sp[0]=="actvan"){
    			//alert(sp[0]);
    			actok.push("NEW");
    			timefrom.push(trs[i].innerHTML);
    		}else{
    			timeuntil.push(trs[i].innerHTML);
    		}
    	}
    	//alert(timefrom.join('\n'));
    	//alert(actok.join('\n'));
    	for(var i in timefrom)
    	{
    		//(StartA < EndB) And (EndA > StartB)
    		//alert(i+" voor if");
    		if (i != choice){
    			//alert(i+" na if");
    			van1 = mysqlTimeStampToDate('2010-01-01 '+timefrom[choice]);
    			tot1 = mysqlTimeStampToDate('2010-01-01 '+timeuntil[choice]);
    			van2 = mysqlTimeStampToDate('2010-01-01 '+timefrom[i]);
    			tot2 = mysqlTimeStampToDate('2010-01-01 '+timeuntil[i]);
    			//alert(van1+"\r\n"+tot1+"\r\n"+van2+"\r\n"+tot2);
    			//alert(timefrom[choice]+"\r\n"+timeuntil[choice]+"\r\n"+timefrom[i]+"\r\n"+timeuntil[i]);
    			if(van1 > van2 && tot1 < tot2)
    			{	//-> Check time is in between start and end time
    				actok[i]="NOTOK";
    			}else if((van1 > van2 && van1 < tot2) || (tot1 > van2 && tot1 < tot2))
    			{	//-> Check start or end time is in between start and end time
    				actok[i]="NOTOK";
    			}else if(van1==van2 || tot1==tot2)
    			{	//-> Check start or end time is at the border of start and end time
    				actok[i]="OK";
    			}else if(van2 > van1 && tot2 < tot1)
    			{	//-> start and end time is in between  the check start and end time.
    				actok[i]="OK";
    			}
    		}
    		//alert(names[i]);
    	}
    	alert(actok.join('\n'));
    	for(var o in actok)
    	{
    		if(o != choice){
    			var rij = "rij"+o;
    			alert(rij);
    			if (actok[o]=="NOTOK"){
    				document.getElementById[rij].style.display='none';
    			}else{
    				document.getElementById[rij].style.display='block';
    			}
    		}
    	}
    }
    </script>
    </head>
    <body>
    <table width="500" border="1" id="activiteiten">
    <tr id="rij0"><td><input type="checkbox" name="act0"></td><td>0</td><td><span id="actvan-0">09:00:00</span></td><td><span id="acttot-0">10:00:00</span></td></tr>
    <tr id="rij1"><td><input type="checkbox" name="act1"></td><td>1</td><td><span id="actvan-1">09:50:00</span></td><td><span id="acttot-0">11:00:00</span></td></tr>
    <tr id="rij2"><td><input type="checkbox" name="act2"></td><td>2</td><td><span id="actvan-2">11:00:00</span></td><td><span id="acttot-0">11:30:00</span></td></tr>
    <tr id="rij3"><td><input type="checkbox" name="act3"></td><td>3</td><td><span id="actvan-3">09:30:00</span></td><td><span id="acttot-0">10:30:00</span></td></tr>
    </table>
    <input type="button" value="test 0" onclick="javascript:checkTable('activiteiten', '0');">
    <input type="button" value="test 1" onclick="javascript:checkTable('activiteiten', '1');">
    <input type="button" value="test 2" onclick="javascript:checkTable('activiteiten', '2');">
    <input type="button" value="test 3" onclick="javascript:checkTable('activiteiten', '3');">
    </body>
    </html>

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, now the html displays correctly.

    In your 1st post you said

    When I check the first row (from 9:00 to 10:00), JS checks what other activities overrule these times. So in this case the 4th activity (9:30 to 10:00) will be set inactive.
    But I don't see any onclick event handlers on any of your checkboxes. I am assuming you wrote all the javascript code you posted and so you can't be new to javascript like you say. So all you need to do is add onclicks to checkboxes like you added onclicks to the buttons, except you don't need to specify the javascript: protocol, to run a set of if-elseif statements (like you have already used in your code) or a switch block to check if the selected start/end time overlaps any of the other times.

  7. #7
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I indeed have some PHP programming skills so the JS also goes fine fore me, but i didn't used JS so much until now

    I changed my code now, and added the onclicks to the checkboxes. And it seems to work fine now when i check a checkbox for the first time, but when I uncheck, we have to see again if the times are OK etc... What is the best way to approach that?

    here is the changed code:

    Code JavaScript:
    <html>
    <head>
    <script language="javascript">
    function mysqlTimeStampToDate(timestamp) {
        //function parses mysql datetime string and returns javascript Date object
        //input has to be in this format: 2007-06-05 15:26:02
        var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;
        var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
    	//alert(parts);
        return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
      }
    function checkTable(tabelnaam, keuze){
    	var chk1 = document.getElementById("act"+keuze.toString());
    	//alert(chk1.checked);
    	//if(chk1.checked){		
    		var urenvan = [];
    		var urentot = [];
    		var actok = [];
    		var tabel = document.getElementById(tabelnaam);
    		var trs = tabel.getElementsByTagName("span");
    		for(var i=0;i<trs.length;i++)
    		{
    			var sp = trs[i].id.split("-");
    			if (sp[0]=="actvan"){
    				actok.push("NEW");
    				urenvan.push(trs[i].innerHTML);
    			}else{
    				urentot.push(trs[i].innerHTML);
    			}
    		}
    		for(var i in urenvan)
    		{
    			if (i != keuze){
    				van1 = mysqlTimeStampToDate('2010-01-01 '+urenvan[keuze]);
    				tot1 = mysqlTimeStampToDate('2010-01-01 '+urentot[keuze]);
    				van2 = mysqlTimeStampToDate('2010-01-01 '+urenvan[i]);
    				tot2 = mysqlTimeStampToDate('2010-01-01 '+urentot[i]);
    				if(van1 > van2 && tot1 < tot2)
    				{	//-> Check time is in between start and end time
    					actok[i]="NIETOK";
    				}else if((van1 > van2 && van1 < tot2) || (tot1 > van2 && tot1 < tot2))
    				{	//-> Check start or end time is in between start and end time
    					actok[i]="NIETOK";
    				}else if(van1==van2 || tot1==tot2)
    				{	//-> Check start or end time is at the border of start and end time
    					actok[i]="OK";
    				}else if(van2 > van1 && tot2 < tot1)
    				{	//-> start and end time is in between  the check start and end time.
    					actok[i]="OK";
    				}
    			}
    		}
    		//alert(actok.join('\n'));
    		for(var o=0;o<actok.length;o++)
    		{
    			var chk = "act"+o.toString();
    			var rij = "rij"+o.toString();
    			document.getElementById(rij).style.visibility='visible';
    			if(o != keuze){
     
    				if (actok[o]=="NIETOK"){
    					document.getElementById(chk).checked = 'false';
    					document.getElementById(rij).style.visibility='hidden';
    				}else{
    					document.getElementById(rij).style.visibility='visible';
    				}
    			}
    		}
    	//}
    }</script>
    </head>
    <body>
    <table width="500" border="1" id="activiteiten">
    <tr id="rij0"><td><input type="checkbox" name="act0" id="act0" onclick="javascript:checkTable('activiteiten', '0');"></td><td>0</td><td><span id="actvan-0">09:00:00</span></td><td><span id="acttot-0">10:00:00</span></td></tr>
    <tr id="rij1"><td><input type="checkbox" name="act1" id="act1" onclick="javascript:checkTable('activiteiten', '1');"></td><td>1</td><td><span id="actvan-1">09:50:00</span></td><td><span id="acttot-0">11:00:00</span></td></tr>
    <tr id="rij2"><td><input type="checkbox" name="act2" id="act2" onclick="javascript:checkTable('activiteiten', '2');"></td><td>2</td><td><span id="actvan-2">11:00:00</span></td><td><span id="acttot-0">11:30:00</span></td></tr>
    <tr id="rij3"><td><input type="checkbox" name="act3" id="act3" onclick="javascript:checkTable('activiteiten', '3');"></td><td>3</td><td><span id="actvan-3">09:30:00</span></td><td><span id="acttot-0">10:30:00</span></td></tr>
    </table>
    </body>
    </html>
    Thx 4 your help!

  8. #8
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by janvleugels View Post
    .....now when i check a checkbox for the first time, but when I uncheck, we have to see again if the times are OK etc... What is the best way to approach that?
    Which times ? - the times in the checked row, the times in all the rows

    In any case, you just need to change the logic in your code to display/hide the rows your want when a check box is clicked.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •