A tall order ! [Archive] - CodingForums.com

Sinbad

09-14-2002, 12:04 AM

Hi folks,

I am looking for a smart way to input the following information. I do not want to offer text entry boxes, or even select boxes dropping lengthy lists.

I want to capture multiple time intervals within a 24 hour period. I will then repeat this display once per day for a whole weeks input on one screen.

The fact that there may be more than one time interval in a day, and the precision needs to be to within say 5 minutes is daunting.

What I really want is something like a “slider” with multiple tabs and the ability to point and drag FROM a ‘time’ position TO another time position – thus specifying an interval. The output can be just a list of numbers. But there has to be the opportunity to click and drag to create any number of time intervals within the 24 hour range !

Eg Intervals selected might be : -

07:15 thru 12:45, 15:30 - 17:50, 20:10 - 23:35

This could be a job for Java !
I'd would be grateful for any advice !
Sinbad :-)

whammy

09-14-2002, 07:41 AM

Sounds to me like a job for a server-side scripting language... if I understand what you mean.

Could you clarify the context in which you would like to apply this scenario?

Sinbad

09-14-2002, 07:58 AM

Whammy,

Yes this is a staff scheduling application and I want to collect the periods of availability each day for each person. I am using cold Fusion server side, and have no problem handling this information once captured, just that I want a slick way to display and enter the data, without putting staff thru tedious data entry.

Thanks for your interest !

:-)

joh6nn

09-14-2002, 08:26 AM

call me crazy, but wouldn't 3 radio buttons offer the same functionality?

Sinbad

09-14-2002, 09:06 AM

Radio buttons would be great if I was dealing with 3 equal length shifts per day ! But to get a resolution of say 5 minutes throughtout the day I would need 288 buttons - thats for one day only ! :-(

tks

joh6nn

09-14-2002, 09:26 AM

how does this look? it's three select boxes. the first one has the hours 1 - 12, the second one has the minutes 0 - 55, in 5 minute intervals, and the third one is just AM or PM.

http://www.joh6nn.com/times.bmp

Sinbad

09-14-2002, 09:42 AM

Yep, thats getting closer, I would change it to a 24 hour clock and eliminate the AM/PM just to retain consistency thru out the application.
However one interval will require two of these "blocks", and I dont know how many intervals will be needed on each day - thats the real problem - sure I can make an assumption but would rather not.

It starts to get a bit "clunky" when I put it all together.

I know I am asking for a lot,
and you are probably right, I will have to settle for something like this !

Even a circular 24 hour clock face with active image sectors which I can drag a mouse over to change color and thereby create any number intervals (like cake wedges) would be more attractive AND MORE important very quick to use - easy to understand and intuitive !

Still Imust be dreaming !!
It would make a nice little project for an expert in client side presentation !

tks again :-)

P.S. Actually the clock face idea came to me as I was writing this rely, and thinking on it some, I suspect that the latest version of FLASH could possibly be used to do this - even interactively if necessary, cos it has this neat feature of talking to the server without page refresh ! Just a thought !

coxy

09-14-2002, 03:35 PM

Hey!

What about a layout something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<script language="JavaScript" type="text/JavaScript">
var i, slotA, slotB

function calcSch(){
e = window.event.srcElement ; d=document.getElementById

if( slotA == null){
slotA = Number( e.id.substr(4,e.id.length))
d("userInfo").innerHTML += "  "+d("slot"+slotA).innerText+"-";
}
else {
slotB = Number( e.id.substr(4,e.id.length) )

if( slotB <= slotA ){
alert("Please ensure that your finish time is after your start time of "
+ d("slot"+slotA).innerText)
slotB = ""
return
}
for( i = slotA ; i < slotB + 1 ; i++ ){
d("slot"+i).style.backgroundColor = "#FF99CC"
}

d("userInfo").innerHTML += d("slot"+slotB).innerText+"<BR>";
slotA = null
}
}
</script>
</head>

<body>
<p><strong><u>Staff Sheduler</u></strong></p>
<p>Please select start and finish times by clicking on the timescale below...</p>
<div id="timeSch" style="width:640px; height:55px;overflow: auto;">
<table width = "14400" height="40" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC00">
<tr>
<script language="JavaScript" type="text/JavaScript">
var i,d = new Date()
for(i=0;i<289;i++){
d.setHours(0);d.setMinutes(0);
d.setTime(d.getTime() + i*5*60*1000)

document.write("<td align=center class='tds' id='slot"+i+"' onMouseDown='calcSch()'>"
+(d.getHours()<10?"0":"")+d.getHours()+":"+(d.getMinutes()<10?"0":"")+d.getMinutes()+"</td>")
}
</script>
</tr>
</table>
</div>
<BR>
<div id="userInfo">Selected hours available:<BR><BR></div>
</body>
</html>

coxy :)

Sinbad

09-14-2002, 09:52 PM

Coxy, I rather like this - thank you, :-)

and the JS is not too heavy.
In fact it will be a GREAT starting point.

I think I will play with it for a while, there are a few validation checks to add and a way to clear a wrong choice, but thats OK, once I've studied your code.

I may need some more help to complete it !
Much appreciated
tks