Active TopicsActive Topics  Display List of Forum MembersMemberlist  Search The ForumSearch  HelpHelp
  RegisterRegister  LoginLogin
PowerHome Macros, Scripts, and Formulas Repository
 PowerHome Messageboard : PowerHome Macros, Scripts, and Formulas Repository
Subject Topic: GUI for making Timed Events Post ReplyPost New Topic
Author
Message << Prev Topic | Next Topic >>
krommetje
Super User
Super User
Avatar

Joined: December 29 2004
Location: Netherlands
Online Status: Offline
Posts: 695
Posted: January 28 2007 at 03:58 | IP Logged Quote krommetje

With the Thanks to TonyNo and Dave for helping...

This is a Graphical User Interface for making

One Shot Timed Events

Adadpting the layout to your system, you have to do yourself:

Code:

<html>
<head>
<title>Create TimedEvent GUI Page</title>
<script language="JavaScript">

function te()
{
document.tecreate.formula.value = 'ph_createtimedevent(0,"' + document.macro.id.value + '",' + document.tstest.timestamp.value + ')';
document.tecreate.submit();
}

// Title: Timestamp picker
// Description: See the demo at url
// URL: http://us.geocities.com/tspicker/
// Script featured on: http://javascriptkit.com/script/script2/timestamp.shtml
// Version: 1.0
// Date: 12-05-2001 (mm-dd-yyyy)
// Author: Denis Gritcyuk <denis@softcomplex.com>; <tspicker@yahoo.com>
// Notes: Permission given to use this script in any kind of applications if
//    header lines are left unchanged. Feel free to contact the author
//    for feature requests and/or donations

function show_calendar(str_target, str_datetime) {
     var arr_months = ["January", "February", "March", "April", "May", "June",
                   "July", "August", "September", "October", "November", "December"];
     var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
     var n_weekstart = 0; // day week starts from (normally 0 or 1)

     var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime));
     var dt_prev_month = new Date(dt_datetime);
        dt_prev_month.setM onth(d t_date time.getMonth()-1);
     var dt_next_month = new Date(dt_datetime);
        dt_next_month.setM onth(d t_date time.getMonth()+1);
     var dt_firstday = new Date(dt_datetime);
     dt_firstday.setDate(1);
        dt_firstday.setDat e(1-(7 +dt_fi rstday.getDay()-n_weekstart)%7);
      var dt_lastday = new Date(dt_next_month);
     dt_lastday.setDate(0);
     
     // html generation (feel free to tune it for your particular application)
     // print calendar header
     var str_buffer = new String (
                   "<html>\n"+
                    "<head>\n"+
                    "     <tit le>Ca le ndar</tit le>\n"+
                   "</head>\n"+
                      "<body bgcolor=\"White\">\n"+
                   "<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
                   "<tr><td   bgcolor =\"#4682B4\">\n"+
                   "<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
                   "<tr>\n      ;& lt; ;t d bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
                   str_target+"', '"+ dt2dtstr(dt_prev_month)+"'+ document.cal.time.value);\">"+
                   "<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
                   " alt=\"previous month\"></a></td>\n"+
                   "     <td bgcolor=\"#4682B4\" colspan=\"5\">"+
                   "<font color=\"white\" face=\"tahoma, verdana\" size=\"3\">"
                   +arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
                   "     <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
                   +str_target+"',   '"+dt2dtstr(dt_next_month)+"'+ document.cal.time.value);\">"+
                   "<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+
                   " alt=\"next month\"></a></td>\n</tr>\n"
     );

     var dt_current_day = new Date(dt_firstday);
     // print weekdays titles
     str_buffer += "<tr>\n";
     for (var n=0; n<7; n++)
                   str_buffer += "     <td bgcolor=\"#87CEFA\">"+
                   "<font color=\"white\" face=\"tahoma, verdana\" size=\"3\">"+
                   week_days[(n_weekstart+n)%7]+"</font></td>\n";
     // print calendar table
     str_buffer += "</tr>\n";
     while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
                   dt_current_day.getMonth()    ;= = dt_firstday.getMonth()) {
                   // print row heder
                   str_buffer += "<tr>\n";
                   for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
                               if (dt_current_day.getDate() == dt_datetime.getDate() &&
                                        dt_current_day.getMonth()    ;= = dt_datetime.getMonth())
                                        // print current date
                                        str_buffer += "     <td bgcolor=\"#FFB6C1\" align=\"right\">";
                               else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
                                        // weekend days
                                        str_buffer += "     <td bgcolor=\"#DBEAF5\" align=\"right\">";
                               else
                                        // print working days of current month
                                        str_buffer += "     <td bgcolor=\"white\" align=\"right\">";

                               if (dt_current_day.getMonth() == dt_datetime.getMonth())
                                        // print days of current month
                                        str_buffer += "<a href=\"javascript:window.opener."+str_target+
                                        ".value='"+dt2dtstr(dt_current_day)+"'+ document.cal.time.value; window.close();\">"+
                                        "<font color=\"black\" face=\"tahoma, verdana\" size=\"3\">";
                               else
                                        // print days of other months
                                        str_buffer += "<a href=\"javascript:window.opener."+str_target+
                                        ".value='"+dt2dtstr(dt_current_day)+"'+ document.cal.time.value; window.close();\">"+
                                        "<font color=\"gray\" face=\"tahoma, verdana\" size=\"3\">";
                               str_buffer += dt_current_day.getDate()+"</font></a></td> \n";
                               dt_current_day.setDate(dt_current_day.getDate()+1);
                    }
                   // print row footer
                   str_buffer += "</tr>\n";
     }
     // print calendar footer
     str_buffer +=
                   "<form name=\"cal\">\n<tr><td colspan=\"3\" bgcolor=\"#87CEFA\">"+
                   "<font color=\"White\" face=\"tahoma, verdana\" size=\"3\">"+
                   "Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+
                   "\" size=\"8\" maxlength=\"8\"></form></font></td>< td><font color=\"White\" face=\"tahoma, verdana\" size=\"3\">" +
                   "</td></tr>\n</table>\n" +
                   "</tr>\n</td>\n</table>\n" +
                   "</body>\n" +
                   "</html>\n";

     var vWinCal = window.open("", "Calendar",
                   "width=300,height=250,status=no,resizable=yes,top=200,left=200");
     vWinCal.opener = self;
     var calc_doc = vWinCal.document;
     calc_doc.write (str_buffer);
     calc_doc.close();
}
// datetime parsing and formatting routimes. modify them if you wish other datetime format
function str2dt (str_datetime) {
     var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
     if (!re_date.exec(str_datetime))
                   return alert("Invalid Datetime format: "+ str_datetime);
     return (new Date (RegExp.$1, RegExp.$2-1, RegExp.$3, RegExp.$4, RegExp.$5, RegExp.$6));
}
function dt2dtstr (dt_datetime) {
     return (new String (
                        dt_datetime.getFul lYear()+"-"+ zeropad((dt_datetime.getMonth()+1))+"-"+zeropad(dt_datetime. getDate())+" "));
}
function dt2tmstr (dt_datetime) {
     return (new String (
                        zeropad(dt_datetim e.getHours() )+":"+zeropad(dt_datetime.getMinutes())+":"+zeropad(dt_datet ime.getSeconds())));
}

function zeropad(number) {
outstr=number.toString();
while(outstr.length<2) outstr='0'+outstr;
return outstr;
}

function decH(str_datetime) {
     var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
     if (!re_date.exec(str_datetime))
                   return alert("Invalid Datetime format: "+ str_datetime);
     return (RegExp.$1 +"-"+ RegExp.$2 +"-"+ RegExp.$3 +" "+ zeropad(--RegExp.$4) +":" + RegExp.$5 +":"+ RegExp.$6);
}

function incH(str_datetime) {
     var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
     if (!re_date.exec(str_datetime))
                   return alert("Invalid Datetime format: "+ str_datetime);
     return (RegExp.$1 +"-"+ RegExp.$2 +"-"+ RegExp.$3 +" "+ (++RegExp.$4) +":" + RegExp.$5 +":"+ RegExp.$6);
}

function decM(str_datetime) {
     var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
     if (!re_date.exec(str_datetime))
                   return alert("Invalid Datetime format: "+ str_datetime);
     return (RegExp.$1 +"-"+ RegExp.$2 +"-"+ RegExp.$3 +" "+ RegExp.$4 +":" + zeropad(--RegExp.$5) +":"+ RegExp.$6);
}

function incM(str_datetime) {
     var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
     if (!re_date.exec(str_datetime))
                   return alert("Invalid Datetime format: "+ str_datetime);
     return (RegExp.$1 +"-"+ RegExp.$2 +"-"+ RegExp.$3 +" "+ (RegExp.$4) +":" + zeropad(++RegExp.$5) +":"+ RegExp.$6);
}

function decS(str_datetime) {
     var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
     if (!re_date.exec(str_datetime))
                   return alert("Invalid Datetime format: "+ str_datetime);
     return (RegExp.$1 +"-"+ RegExp.$2 +"-"+ RegExp.$3 +" "+ RegExp.$4 +":" + RegExp.$5 +":"+ zeropad(--RegExp.$6));
}

function incS(str_datetime) {
     var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
     if (!re_date.exec(str_datetime))
                   return alert("Invalid Datetime format: "+ str_datetime);
     return (RegExp.$1 +"-"+ RegExp.$2 +"-"+ RegExp.$3 +" "+ (RegExp.$4) +":" + RegExp.$5 +":"+ zeropad(++RegExp.$6));
}

</script>
</HEAD>

<body>

<form method="post" action="/ph-cgi/evalformula" name="tecreate"><input type="hidden" name="formula"><input type="hidden" name="nexturl" value="/dtpicker.psp"></form>

<form name="macro">Macro: <select name="id" size=1>
<option value="">
<%ph_rtne(ph_sqlselect(1,"select id from macroheader order by 1") + ph_setvar_a(1,1,1) + ph_doloop("ph_concatvar(1,2,'<option value=~~"' + ph_getdata(1,ph_getvar_n(1,1),1) + '~~">' + ph_getdata(1,ph_getvar_n(1,1),1) + '~r~n') + ph_rtne(ph_addtovar(1,1,1))","ph_getvar_n(1,1) <= ph_getsqlrows(1)")) + ph_getvar_s(1,2) + ph_rtne(ph_sqldestroy(1))%>
</select>
</form>

<form name="tstest" >
<input type="Text" name="timestamp" value="">
<a href="javascript:show_calendar('document.tstest.timestamp', document.tstest.timestamp.value);"><img src="cal.gif" width="16" height="16" alt="Click Here to Pick up the timestamp"></a>
</form>

H: <img src="/down.gif" onclick="javascript:document.tstest.timestamp.value=decH(doc ument.tstest.timestamp.value);" width="16" height="16">
<img src="/up.gif" onclick="javascript:document.tstest.timestamp.value=incH(doc ument.tstest.timestamp.value);" width="16" height="16">
M: <img src="/down.gif" onclick="javascript:document.tstest.timestamp.value=decM(doc ument.tstest.timestamp.value);" width="16" height="16">
<img src="/up.gif" onclick="javascript:document.tstest.timestamp.value=incM(doc ument.tstest.timestamp.value);" width="16" height="16">
S: <img src="/down.gif" onclick="javascript:document.tstest.timestamp.value=decS(doc ument.tstest.timestamp.value);" width="16" height="16">
<img src="/up.gif" onclick="javascript:document.tstest.timestamp.value=incS(doc ument.tstest.timestamp.value);" width="16" height="16">

<form name="create"><input type="button" value="Create" onclick="te()"></form>

</BODY>
</html>


Explaniation:

1) In the drop-down-box select the macro you wish to execute

2) Click on the small Calculator Button below and now a Calendar pops-up

3) Type-in the time and click on the desired Date

4) Click the CREATE Button

That's it!!

have fun

Edited by krommetje - January 28 2007 at 04:01
Back to Top View krommetje's Profile Search for other posts by krommetje Visit krommetje's Homepage
 
TonyNo
Moderator Group
Moderator Group
Avatar

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889
Posted: January 28 2007 at 08:40 | IP Logged Quote TonyNo

In addition: You don't need to type a time. The current time is used at first, then you can click the up and down arrows (images linked below) to change the time.

Back to Top View TonyNo's Profile Search for other posts by TonyNo Visit TonyNo's Homepage
 
onhiatus
Senior Member
Senior Member
Avatar

Joined: May 12 2004
Location: United States
Online Status: Offline
Posts: 279
Posted: February 19 2007 at 15:13 | IP Logged Quote onhiatus

Fun. My display uses some similar code to generate a perpetual calendar - with my current schedule - it hadn't occured to me to use it for input as well... I'll have to think about this.

Notes on krommetje's original code:
In addition to the random spaces the following boar induced errors need to be fixed:

I think line 75 should be:
dt_current_day.getMonth() == dt_firstday.getMonth()) {

And line 80:
dt_current_day.getMonth() == dt_datetime.getMonth())

Back to Top View onhiatus's Profile Search for other posts by onhiatus Visit onhiatus's Homepage
 

If you wish to post a reply to this topic you must first login
If you are not already registered you must first register

  Post ReplyPost New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum