Changeset Navigation

← Previous Changeset
Next Changeset →

Changeset 1155

Timestamp:

12/13/06 14:33:52

Author:

johnsa

Message:

personal client: continued interface work on recurrence form elements -- yearly recurrences in place; can switch between simple and advanced recurrence rules.

Files:

trunk/deployment/webuser/webapp/resources/demoskins/default/default/default.css (modified) (1 diff)
trunk/deployment/webuser/webapp/resources/demoskins/default/default/default.xsl (modified) (2 diffs)
trunk/deployment/webuser/webapp/resources/demoskins/resources/includes.js (modified) (3 diffs)

Legend:

: Unmodified
: Added
: Removed
: Modified
: Copied
: Moved

trunk/deployment/webuser/webapp/resources/demoskins/default/default/default.css

r1151	r1155
676	676	#recurrenceFields #recurrenceTable p {
677	677	margin: 0 0 0.5em 0;
	678	}
	679	#recurrenceFields #recurrenceTable p.weekRecurLinks {
	680	margin: 1em 0 0.5em 0;
678	681	}
679	682	#recurrenceFields #recurrenceTable .extraByMonthPosFields {

trunk/deployment/webuser/webapp/resources/demoskins/default/default/default.xsl

r1154	r1155
2195	2195	recurring
2196	2196	<span id="recurrenceUiSwitch" class="invisible">
2197		<input type="radio" name="recurrenceUiSwitch" value="simple"/>simple
2198		<input type="radio" name="recurrenceUiSwitch" value="advanced" checked="checked"/>advanced
	2197	<input type="checkbox" name="recurrenceUiSwitch" value="simple" onchange="swapVisible(this,'advancedRecurrenceRules')"/>show advanced recurrence rules
2199	2198	</span>
2200	2199
…	…
2226	2225	<p>does not recur</p>
2227	2226	</div>
2228		<!-- hourly -->
2229		<div id="hourlyRecurrenceRules" class="invisible">
2230		<strong>Interval:</strong>
2231		every <input type="text" name="hourlyInterval" size="2" value="1"/> hour(s)
2232		</div>
2233		<!-- daily -->
2234		<div id="dailyRecurrenceRules" class="invisible">
2235		<p>
	2227	<span id="advancedRecurrenceRules" class="invisible">
	2228	<!-- hourly -->
	2229	<div id="hourlyRecurrenceRules" class="invisible">
2236	2230	<strong>Interval:</strong>
2237		every <input type="text" name="dailyInterval" size="2" value="1"/> day(s)
2238		</p>
2239		</div>
2240		<!-- weekly -->
2241		<div id="weeklyRecurrenceRules" class="invisible">
2242		<p>
2243		<strong>Interval:</strong>
2244		every <input type="text" name="weeklyInterval" size="2" value="1"/> week(s) on:<br/>
2245		</p>
2246		<p>
2247		<div id="weekRecurFields">
2248		<xsl:call-template name="byDayChkBoxList">
2249		<xsl:with-param name="name">byDayWeek</xsl:with-param>
	2231	every <input type="text" name="hourlyInterval" size="2" value="1"/> hour(s)
	2232	</div>
	2233	<!-- daily -->
	2234	<div id="dailyRecurrenceRules" class="invisible">
	2235	<p>
	2236	<strong>Interval:</strong>
	2237	every <input type="text" name="dailyInterval" size="2" value="1"/> day(s)
	2238	</p>
	2239	</div>
	2240	<!-- weekly -->
	2241	<div id="weeklyRecurrenceRules" class="invisible">
	2242	<p>
	2243	<strong>Interval:</strong>
	2244	every <input type="text" name="weeklyInterval" size="2" value="1"/> week(s) on:<br/>
	2245	</p>
	2246	<p>
	2247	<div id="weekRecurFields">
	2248	<xsl:call-template name="byDayChkBoxList">
	2249	<xsl:with-param name="name">byDayWeek</xsl:with-param>
	2250	</xsl:call-template>
	2251	</div>
	2252	</p>
	2253	<p class="weekRecurLinks">
	2254	<a href="javascript:recurSelectWeekdays('weekRecurFields')">select weekdays</a> \|
	2255	<a href="javascript:recurSelectWeekends('weekRecurFields')">select weekends</a>
	2256	</p>
	2257	</div>
	2258	<!-- monthly -->
	2259	<div id="monthlyRecurrenceRules" class="invisible">
	2260	<p>
	2261	<strong>Interval:</strong>
	2262	every <input type="text" name="monthlyInterval" size="2" value="1"/> month(s)
	2263	</p>
	2264	<div id="monthRecurFields">
	2265	<div id="monthRecurFields1">
	2266	on
	2267	<select name="bymonthposPos1" width="7em" onchange="changeClass('monthRecurFields2','shown')">
	2268	<xsl:call-template name="recurrenceDayPosOptions"/>
	2269	</select>
	2270	<xsl:call-template name="byDayChkBoxList"/>
	2271	</div>
	2272	<xsl:call-template name="buildRecurFields">
	2273	<xsl:with-param name="current">2</xsl:with-param>
	2274	<xsl:with-param name="total">10</xsl:with-param>
	2275	<xsl:with-param name="name">month</xsl:with-param>
2250	2276	</xsl:call-template>
2251	2277	</div>
2252		</p>
2253		<p align="right">
2254		<a href="javascript:recurSelectWeekdays('weekRecurFields')">select weekdays</a> \|
2255		<a href="javascript:recurSelectWeekends('weekRecurFields')">select weekends</a>
2256		</p>
2257		</div>
2258		<!-- monthly -->
2259		<div id="monthlyRecurrenceRules" class="invisible">
2260		<p>
	2278	<p>
	2279	<input type="checkbox" name="swapMonthDaysCheckBoxList" value="" onclick="swapVisible(this,'monthDaysCheckBoxList')"/>
	2280	on these days:<br/>
	2281	<div id="monthDaysCheckBoxList" class="invisible">
	2282	<xsl:call-template name="buildCheckboxList">
	2283	<xsl:with-param name="current">1</xsl:with-param>
	2284	<xsl:with-param name="end">31</xsl:with-param>
	2285	<xsl:with-param name="name">monthDayBoxes</xsl:with-param>
	2286	</xsl:call-template>
	2287	</div>
	2288	</p>
	2289	</div>
	2290	<!-- yearly -->
	2291	<div id="yearlyRecurrenceRules" class="invisible">
2261	2292	<strong>Interval:</strong>
2262		every <input type="text" name="monthlyInterval" size="2" value="1"/> month(s)
2263		</p>
2264		<div id="monthRecurFields">
2265		<div id="monthRecurFields1">
2266		on
2267		<select name="bymonthposPos1" width="7em" onchange="changeClass('monthRecurFields2','shown')">
2268		<xsl:call-template name="recurrenceDayPosOptions"/>
2269		</select>
2270		<xsl:call-template name="byDayChkBoxList"/>
2271		</div>
2272		<xsl:call-template name="buildRecurFields">
2273		<xsl:with-param name="current">2</xsl:with-param>
2274		<xsl:with-param name="total">10</xsl:with-param>
2275		<xsl:with-param name="name">month</xsl:with-param>
2276		</xsl:call-template>
2277		</div>
2278		<p>
2279		<input type="checkbox" name="swapMonthDaysCheckBoxList" value="" onclick="swapVisible(this,'monthDaysCheckBoxList')"/>
2280		on these days:<br/>
2281		<div id="monthDaysCheckBoxList" class="invisible">
2282		<xsl:call-template name="buildCheckboxList">
2283		<xsl:with-param name="current">1</xsl:with-param>
2284		<xsl:with-param name="end">31</xsl:with-param>
2285		<xsl:with-param name="name">monthDayBoxes</xsl:with-param>
	2293	every <input type="text" name="yearlyInterval" size="2" value="1"/> years(s)<br/>
	2294	<div id="yearRecurFields">
	2295	<div id="yearRecurFields1">
	2296	on
	2297	<select name="byyearposPos1" width="7em" onchange="changeClass('yearRecurFields2','shown')">
	2298	<xsl:call-template name="recurrenceDayPosOptions"/>
	2299	</select>
	2300	<xsl:call-template name="byDayChkBoxList"/>
	2301	</div>
	2302	<xsl:call-template name="buildRecurFields">
	2303	<xsl:with-param name="current">2</xsl:with-param>
	2304	<xsl:with-param name="total">10</xsl:with-param>
	2305	<xsl:with-param name="name">year</xsl:with-param>
2286	2306	</xsl:call-template>
2287	2307	</div>
2288		</p>
2289		</div>
2290		<!-- yearly -->
2291		<div id="yearlyRecurrenceRules" class="invisible">
2292		<strong>Interval:</strong>
2293		every <input type="text" name="yearlyInterval" size="2" value="1"/> years(s)<br/>
2294		<div id="yearRecurFields">
2295		<div id="yearRecurFields1">
2296		on
2297		<select name="byyearposPos1" width="7em" onchange="changeClass('yearRecurFields2','shown')">
2298		<xsl:call-template name="recurrenceDayPosOptions"/>
2299		</select>
2300		<xsl:call-template name="byDayChkBoxList"/>
2301		</div>
2302		<xsl:call-template name="buildRecurFields">
2303		<xsl:with-param name="current">2</xsl:with-param>
2304		<xsl:with-param name="total">10</xsl:with-param>
2305		<xsl:with-param name="name">year</xsl:with-param>
2306		</xsl:call-template>
	2308	<p>
	2309	<input type="checkbox" name="swapYearMonthCheckBoxList" value="" onclick="swapVisible(this,'yearMonthCheckBoxList')"/>
	2310	in these months:
	2311	<div id="yearMonthCheckBoxList" class="invisible">
	2312	<xsl:for-each select="/bedework/monthlabels/val">
	2313	<xsl:variable name="pos"><xsl:value-of select="position()"/></xsl:variable>
	2314	<span class="chkBoxListItem">
	2315	<input type="checkbox" name="yearMonths">
	2316	<xsl:attribute name="value"><xsl:value-of select="/bedework/monthvalues/val[position() = $pos]"/></xsl:attribute>
	2317	</input>
	2318	<xsl:value-of select="."/>
	2319	</span>
	2320	<xsl:if test="$pos mod 6 = 0"><br/></xsl:if>
	2321	</xsl:for-each>
	2322	</div>
	2323	</p>
	2324	<p>
	2325	<input type="checkbox" name="swapYearMonthDaysCheckBoxList" value="" onclick="swapVisible(this,'yearMonthDaysCheckBoxList')"/>
	2326	on these days of the month:<br/>
	2327	<div id="yearMonthDaysCheckBoxList" class="invisible">
	2328	<xsl:call-template name="buildCheckboxList">
	2329	<xsl:with-param name="current">1</xsl:with-param>
	2330	<xsl:with-param name="end">31</xsl:with-param>
	2331	<xsl:with-param name="name">yearMonthDayBoxes</xsl:with-param>
	2332	</xsl:call-template>
	2333	</div>
	2334	</p>
	2335	<p>
	2336	<input type="checkbox" name="swapYearDaysCheckBoxList" value="" onclick="swapVisible(this,'yearDaysCheckBoxList')"/>
	2337	on these days of the year:<br/>
	2338	<div id="yearDaysCheckBoxList" class="invisible">
	2339	<xsl:call-template name="buildCheckboxList">
	2340	<xsl:with-param name="current">1</xsl:with-param>
	2341	<xsl:with-param name="end">366</xsl:with-param>
	2342	<xsl:with-param name="name">yearDayBoxes</xsl:with-param>
	2343	</xsl:call-template>
	2344	</div>
	2345	</p>
2307	2346	</div>
2308		<p>
2309		<input type="checkbox" name="swapYearMonthCheckBoxList" value="" onclick="swapVisible(this,'yearMonthCheckBoxList')"/>
2310		in these months:
2311		<div id="yearMonthCheckBoxList" class="invisible">
2312		<xsl:for-each select="/bedework/monthlabels/val">
2313		<xsl:variable name="pos"><xsl:value-of select="position()"/></xsl:variable>
2314		<span class="chkBoxListItem">
2315		<input type="checkbox" name="yearMonths">
2316		<xsl:attribute name="value"><xsl:value-of select="/bedework/monthvalues/val[position() = $pos]"/></xsl:attribute>
2317		</input>
2318		<xsl:value-of select="."/>
2319		</span>
2320		<xsl:if test="$pos mod 6 = 0"><br/></xsl:if>
2321		</xsl:for-each>
2322		</div>
2323		</p>
2324		<p>
2325		<input type="checkbox" name="swapYearMonthDaysCheckBoxList" value="" onclick="swapVisible(this,'yearMonthDaysCheckBoxList')"/>
2326		on these days of the month:<br/>
2327		<div id="yearMonthDaysCheckBoxList" class="invisible">
2328		<xsl:call-template name="buildCheckboxList">
2329		<xsl:with-param name="current">1</xsl:with-param>
2330		<xsl:with-param name="end">31</xsl:with-param>
2331		<xsl:with-param name="name">yearMonthDayBoxes</xsl:with-param>
2332		</xsl:call-template>
2333		</div>
2334		</p>
2335		<p>
2336		<input type="checkbox" name="swapYearDaysCheckBoxList" value="" onclick="swapVisible(this,'yearDaysCheckBoxList')"/>
2337		on these days of the year:<br/>
2338		<div id="yearDaysCheckBoxList" class="invisible">
2339		<xsl:call-template name="buildCheckboxList">
2340		<xsl:with-param name="current">1</xsl:with-param>
2341		<xsl:with-param name="end">366</xsl:with-param>
2342		<xsl:with-param name="name">yearDayBoxes</xsl:with-param>
2343		</xsl:call-template>
2344		</div>
2345		</p>
2346		</div>
	2347	</span>
2347	2348	</td>
2348	2349	</tr>

trunk/deployment/webuser/webapp/resources/demoskins/resources/includes.js

r1154	r1155
182	182	var monthByDayId = 'monthRecurFields' + i;
183	183	var byday = new Array();
184		var bymonthday = new Array;
	184	var bymonthday = new Array();
	185	var byyearday = new Array();
185	186	// get the byday values
186	187	while (document.getElementById(monthByDayId)) {
187	188	var monthFields = document.getElementById(monthByDayId);
188		var ~~month~~PosSelect = monthFields.getElementsByTagName('select');
189		var ~~monthPos = monthPosSelect[0][month~~PosSelect[0].selectedIndex].value;
190		if (~~month~~Pos) {
191		byday = collectRecurChkBoxVals(byday,monthFields.getElementsByTagName('input'),~~month~~Pos);
	189	var dayPosSelect = monthFields.getElementsByTagName('select');
	190	var dayPos = dayPosSelect[0][dayPosSelect[0].selectedIndex].value;
	191	if (dayPos) {
	192	byday = collectRecurChkBoxVals(byday,monthFields.getElementsByTagName('input'),dayPos);
192	193	}
193	194	monthByDayId = monthByDayId.substring(0,monthByDayId.length-1) + ++i;
194	195	}
195		// get the bymonthdayvalues
	196	// get the bymonthday values
196	197	bymonthday = collectRecurChkBoxVals(bymonthday,document.getElementById('monthDaysCheckBoxList').getElementsByTagName('input'),false);
197	198	// set the form values
	199	formObj.byday.value = byday.join(',');
198	200	formObj.bymonthday.value = bymonthday.join(',');
	201	formObj.interval.value = formObj.monthlyInterval.value;
	202	break;
	203	case "YEARLY":
	204	var i = 1;
	205	var yearByDayId = 'yearRecurFields' + i;
	206	var byday = new Array();
	207	var bymonthday = new Array();
	208	var bymonth = new Array();
	209	var byyearday = new Array();
	210	// get the byday values
	211	while (document.getElementById(yearByDayId)) {
	212	var yearFields = document.getElementById(yearByDayId);
	213	var dayPosSelect = yearFields.getElementsByTagName('select');
	214	var dayPos = dayPosSelect[0][dayPosSelect[0].selectedIndex].value;
	215	if (dayPos) {
	216	byday = collectRecurChkBoxVals(byday,yearFields.getElementsByTagName('input'),dayPos);
	217	}
	218	yearByDayId = yearByDayId.substring(0,yearByDayId.length-1) + ++i;
	219	}
	220	// get the bymonth values
	221	bymonth = collectRecurChkBoxVals(bymonth,document.getElementById('yearMonthCheckBoxList').getElementsByTagName('input'),false);
	222	// get the bymonthday values
	223	bymonthday = collectRecurChkBoxVals(bymonthday,document.getElementById('yearMonthDaysCheckBoxList').getElementsByTagName('input'),false);
	224	// get the byyearday values
	225	byyearday = collectRecurChkBoxVals(byyearday,document.getElementById('yearDaysCheckBoxList').getElementsByTagName('input'),false);
	226
	227	// set the form values
199	228	formObj.byday.value = byday.join(',');
200		alert(formObj.monthlyInterval);
201		formObj.interval.value = formObj.monthlyInterval.value;
202		break;
203		case "YEARLY":
	229	formObj.bymonth.value = bymonth.join(',');
	230	formObj.bymonthday.value = bymonthday.join(',');
	231	formObj.byyearday.value = byyearday.join(',');
204	232	formObj.interval.value = formObj.yearlyInterval.value;
205	233	break;
…	…
223	251	}
224	252	}
225		alert("frequency: " + freq + "\ninterval: " + formObj.interval.value + "\ncount: " + formObj.count.value + "\nuntil: " + formObj.until.value + "\nbyday: " + formObj.byday.value + "\nbymonthday" + formObj.bymonthday.value + "\nbymonth" + formObj.bymonth.value + "\nbyyearday" + formObj.byyearday.value + "\n");
	253	//alert("frequency: " + freq + "\ninterval: " + formObj.interval.value + "\ncount: " + formObj.count.value + "\nuntil: " + formObj.until.value + "\nbyday: " + formObj.byday.value + "\nbymonthday: " + formObj.bymonthday.value + "\nbymonth: " + formObj.bymonth.value + "\nbyyearday: " + formObj.byyearday.value + "\n");
226	254	return true;
227	255	}
…	…
234	262	}
235	263	// returns an array of collected checkbox values
236		function collectRecurChkBoxVals(valArray,chkBoxes,~~month~~Pos) {
	264	function collectRecurChkBoxVals(valArray,chkBoxes,dayPos) {
237	265	if (chkBoxes) {
238	266	if (typeof chkBoxes.length != 'undefined') {
239	267	for (i = 0; i < chkBoxes.length; i++) {
240	268	if (chkBoxes[i].checked == true) {
241		if (~~month~~Pos) {
242		valArray.push(~~month~~Pos + chkBoxes[i].value);
	269	if (dayPos) {
	270	valArray.push(dayPos + chkBoxes[i].value);
243	271	} else {
244	272	valArray.push(chkBoxes[i].value);

Download in other formats: