iEat/web/WEB-INF/xsl/edit-recipe.xsl

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:eat="http://msqr.us/xsd/ieat"
	xmlns:xweb="http://msqr.us/xsd/jaxb-web"
	exclude-result-prefixes="eat xweb">
	
    <!-- imports -->
	<xsl:import href="tmpl/default-layout.xsl"/>
	
	<!-- layout variables -->
	<xsl:variable name="layout.global.nav.page" select="'add-recipe'"/>
	
	<!-- helper vars -->
	<xsl:variable name="recipe" select="xweb:x-data/xweb:x-model/eat:edit/eat:recipe"/>
	<xsl:variable name="is-new" select="not(boolean($recipe/@recipeId))"/>
	
	<xsl:template match="xweb:x-data" mode="page-title">
		<xsl:choose>
			<xsl:when test="$is-new = 'true'">
				<xsl:value-of select="key('i18n','edit-recipe.create.title')"/>
			</xsl:when>
			<xsl:otherwise>
				<xsl:value-of select="key('i18n','edit-recipe.edit.title')"/>
			</xsl:otherwise>
		</xsl:choose>
	</xsl:template>

	<xsl:template match="xweb:x-data" mode="page-head-content">
		<link rel="stylesheet" type="text/css" href="{$web-context}/css/edit-recipe.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="{$web-context}/css/jquery.autocomplete.css" media="screen" />
		<script type="text/javascript" src="{$web-context}/js/jquery-1.3.2.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/jquery.ajaxQueue.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/jquery.autocomplete.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/xweb-locale.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/jquery.tablednd.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/ieat-util.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/edit-recipe.js" xml:space="preserve"> </script>
	</xsl:template>
	
	<xsl:template match="xweb:x-data" mode="page-body">
		<div class="intro">
			<xsl:choose>
				<xsl:when test="$is-new = 'true'">
		            <xsl:value-of select="key('i18n','edit-recipe.create.intro')"/>
				</xsl:when>
				<xsl:otherwise>
		            <xsl:value-of select="key('i18n','edit-recipe.edit.intro')"/>
				</xsl:otherwise>
			</xsl:choose>
		</div>

		<form method="post" action="{$web-context}{$ctx/xweb:path}">
			<xsl:attribute name="action">
				<xsl:value-of select="$web-context"/>
				<xsl:choose>
					<xsl:when test="$is-new = 'true'">
						<xsl:text>/addRecipe.do</xsl:text>
					</xsl:when>
					<xsl:otherwise>
						<xsl:text>/editRecipe.do</xsl:text>
					</xsl:otherwise>
				</xsl:choose>
			</xsl:attribute>
			<table class="form">
				<tr>
					<th>
						<xsl:if test="$err[@field='recipe.name']">
							<xsl:attribute name="class">error</xsl:attribute>
						</xsl:if>
						<xsl:value-of select="key('i18n','recipe.name.displayName')"/>
					</th>
					<td colspan="3">
						<input type="text" name="recipe.name" value="{$recipe/eat:name}"
							maxlength="128"/>
					</td>
				</tr>
				<tr>
					<th>
						<xsl:value-of select="key('i18n','recipe.source.displayName')"/>
					</th>
					<td colspan="3">
						<input type="text" name="recipe.source" value="{$recipe/eat:source}"
							maxlength="64"/>
						<xsl:text> </xsl:text>
						<span class="caption">
							<xsl:value-of select="key('i18n','optional.caption')"/>
						</span>
					</td>
				</tr>
				<tr>
					<th>
						<xsl:value-of select="key('i18n','recipe.base.displayName')"/>
					</th>
					<td>
						<select name="recipe.base.baseId">
							<xsl:apply-templates select="$aux/*/eat:base"/>
						</select>
					</td>
					<th>
						<xsl:value-of select="key('i18n','recipe.prepTime.displayName')"/>
					</th>
					<td>
						<select name="recipe.prepTime.prepTimeId">
							<xsl:apply-templates select="$aux/*/eat:prep-time"/>
						</select>
					</td>
				</tr>
				<tr>
					<th>
						<xsl:value-of select="key('i18n','recipe.ethnicity.displayName')"/>
					</th>
					<td>
						<select name="recipe.ethnicity.ethnicityId">
							<xsl:apply-templates select="$aux/*/eat:ethnicity"/>
						</select>
					</td>
					<th>
						<xsl:value-of select="key('i18n','recipe.difficulty.displayName')"/>
					</th>
					<td>
						<select name="recipe.difficulty.difficultyId">
							<xsl:apply-templates select="$aux/*/eat:difficulty"/>
						</select>
					</td>
				</tr>
				<tr>
					<th>
						<xsl:value-of select="key('i18n','recipe.course.displayName')"/>
					</th>
					<td>
						<select name="recipe.course.courseId">
							<xsl:apply-templates select="$aux/*/eat:course"/>
						</select>
					</td>
					<th>
						<xsl:if test="$err[@field='recipe.servingSize']">
							<xsl:attribute name="class">error</xsl:attribute>
						</xsl:if>
						<xsl:value-of select="key('i18n','recipe.servings.displayName')"/>
					</th>
					<td>
						<input type="text" name="recipe.servingSize" value="{$recipe/@servingSize}" class="vsmallnum"/>
					</td>
				</tr>
			</table>
			<table class="form">
				<tr>
					<th>
						<xsl:if test="$err[@field='recipe.excerpt']">
							<xsl:attribute name="class">error</xsl:attribute>
						</xsl:if>
						<xsl:value-of select="key('i18n','recipe.excerpt.displayName')"/>
					</th>
					<td>
						<textarea name="recipe.excerpt" class="big">
							<xsl:value-of select="$recipe/eat:excerpt"/>
							<!-- the following space prevents browser rendering mishaps -->
							<xsl:if test="string-length($recipe/eat:excerpt) &lt; 1">
								<xsl:text> </xsl:text>
							</xsl:if>
						</textarea>
						<br/>
						<span class="caption">
							<xsl:value-of select="key('i18n','recipe.excerpt.caption')"/>
						</span>
					</td>
				</tr>
				<tr>
					<th>
						<xsl:if test="$err[@field='recipe.directions']">
							<xsl:attribute name="class">error</xsl:attribute>
						</xsl:if>
						<xsl:value-of select="key('i18n','recipe.directions.displayName')"/>
					</th>
					<td>
						<textarea name="recipe.directions" class="big">
							<xsl:value-of select="$recipe/eat:directions"/>
							<!-- the following space prevents browser rendering mishaps -->
							<xsl:if test="string-length($recipe/eat:directions) &lt; 1">
								<xsl:text> </xsl:text>
							</xsl:if>
						</textarea>
						<br/>
						<span class="caption">
							<xsl:value-of select="key('i18n','recipe.directions.caption')"/>
							<xsl:text> </xsl:text>
							<xsl:value-of select="key('i18n','optional.caption')"/>
						</span>
					</td>
				</tr>
			</table>
			
			<hr class="sep" />
			
			<div class="formLabel">
				<xsl:value-of select="key('i18n','recipe.system.displayName')"/>
			</div>
			
			<div class="read-only">
				<xsl:value-of select="$aux/eat:ui/eat:system[@systemId = $recipe/eat:system/@systemId]"/>
			</div>
			
			<br clear="left" />
			
			<p>
				<xsl:value-of select="key('i18n','recipe.ingredients.explain')" 
					disable-output-escaping="yes"/>
			</p>
			
			<p>
				<xsl:value-of select="key('i18n','edit-recipe.units.explain')" 
					disable-output-escaping="yes"/>
			</p>
			
			<!-- 
				Recipe ingredients
			-->
			
			<div class="formLabel">
				<xsl:choose>
					<xsl:when test="$err[starts-with(@field,'recipe.ingredient')]">
						<span class="error">
							<xsl:value-of select="key('i18n','recipe.ingredients.displayName')"/>
						</span>
					</xsl:when>
					<xsl:otherwise>
						<xsl:value-of select="key('i18n','recipe.ingredients.displayName')"/>:
					</xsl:otherwise>
				</xsl:choose>
			</div>

			<table class="form" id="ingredient_table">
				<xsl:for-each select="$recipe/eat:ingredient">
					<xsl:call-template name="recipe-ingredient"/>
				</xsl:for-each>
				<xsl:if test="not($recipe/eat:ingredient)">
					<xsl:call-template name="recipe-ingredient">
						<xsl:with-param name="index" select="0"/>
					</xsl:call-template>
				</xsl:if>
				<tr id="ingredient_add_row">
					<td>
						<a id="ingredient_add_link" href="#" 
							title="{key('i18n','recipe.ingredients.add')}" class="plus">
							<span class="alt">
								<xsl:value-of select="key('i18n','recipe.ingredients.add')"/>
							</span>
						</a>
					</td>
					<td></td>
				</tr>
			</table>
			
			<hr class="sep"/>
			
			<!--
				Recipe instruction steps
			-->
			
			<div class="formLabel">
				<xsl:choose>
					<xsl:when test="$err[starts-with(@field,'recipe.step')]">
						<span class="error">
							<xsl:value-of select="key('i18n','recipe.steps.displayName')"/>
						</span>
					</xsl:when>
					<xsl:otherwise>
						<xsl:value-of select="key('i18n','recipe.steps.displayName')"/>:
					</xsl:otherwise>
				</xsl:choose>
			</div>

			<table class="form" id="step_table">
				<xsl:for-each select="$recipe/eat:step">
					<xsl:call-template name="recipe-step"/>
				</xsl:for-each>
				<xsl:if test="not($recipe/eat:step)">
					<xsl:call-template name="recipe-step">
						<xsl:with-param name="index" select="0"/>
					</xsl:call-template>
				</xsl:if>
				<tr id="step_add_row">
					<td>
						<a href="#" 
							id="step_add_link"
							title="{key('i18n','recipe.steps.add')}" class="plus">
							<span class="alt">
								<xsl:value-of select="key('i18n','recipe.steps.add')"/>
							</span>
						</a>
					</td>
					<td></td>
				</tr>
			</table>

			<table class="form">
				<tr>
					<th/>
					<td>
						<input type="submit" value="{key('i18n','continue.displayName')}">
							<xsl:choose>
								<xsl:when test="$is-new = 'true'">
									<xsl:attribute name="name">_target2</xsl:attribute>
								</xsl:when>
								<xsl:otherwise>
									<xsl:attribute name="name">_target1</xsl:attribute>
								</xsl:otherwise>
							</xsl:choose>
						</input>
						<xsl:text> </xsl:text>
						<input type="submit" name="_cancel" value="{key('i18n','cancel.displayName')}"/>
					</td>
				</tr>
			</table>
			
			<!-- handle contextual navigation -->
			<xsl:apply-templates select="eat:edit/eat:search-results" 
				mode="search-results-contextual-navigation"/>
        </form>
	</xsl:template>
	
	<xsl:template name="recipe-step">
    	<xsl:param name="row-index">
    		<xsl:value-of select="position() - 1"/>
    	</xsl:param>
     	<xsl:variable name="me" select="."/>
		<xsl:variable name="errkey">
			<xsl:text>recipe.step[</xsl:text>
			<xsl:value-of select="$row-index"/>
			<xsl:text>]</xsl:text>
		</xsl:variable>
     	<tr>
			<xsl:attribute name="class">
				<xsl:text>recipe-step</xsl:text>
				<xsl:if test="$err[starts-with(@field,$errkey)]">
					<xsl:text> error</xsl:text>
				</xsl:if>
			</xsl:attribute>
			<td class="drag-dot">
				<div class="drag-dot" title="{key('i18n','edit.recipe.drag.step.row.title')}"/>
			</td>
 			<td>
				<textarea name="recipe.step[{$row-index}].value" class="recipeStep">
					<xsl:choose>
						<xsl:when test="self::eat:step and string-length(.) &gt; 0">
							<xsl:value-of select="."/>
						</xsl:when>
						<xsl:otherwise>
							<xsl:text> </xsl:text>
						</xsl:otherwise>
					</xsl:choose>
				</textarea>
			</td>
			<td>
				<a href="javascript:removeStep({$row-index})"
					title="{key('i18n','recipe.steps.remove')}" class="minus">
					<xsl:if test="not(self::eat:step) or position() = 1">
						<xsl:attribute name="style">display: none</xsl:attribute>
					</xsl:if>
					<span class="alt">
						<xsl:value-of select="key('i18n','recipe.steps.remove')"/>
					</span>
				</a>
			</td>
 	    </tr>
    </xsl:template>
    
    <xsl:template name="recipe-ingredient">
    	<xsl:param name="index"/>
    	<xsl:variable name="row-index">
    		<xsl:choose>
    			<xsl:when test="string-length($index) &gt; 0">
    				<xsl:value-of select="$index"/>
    			</xsl:when>
    			<xsl:otherwise>
    				<xsl:value-of select="position() - 1"/>
    			</xsl:otherwise>
    		</xsl:choose>
    	</xsl:variable>
    	<xsl:variable name="me" select="."/>
		<xsl:variable name="errkey">
			<xsl:text>recipe.ingredient[</xsl:text>
			<xsl:value-of select="$row-index"/>
			<xsl:text>]</xsl:text>
		</xsl:variable>
		<tr valign="middle" class="recipe-ingredient">
			<xsl:attribute name="class">
				<xsl:text>recipe-ingredient</xsl:text>
				<xsl:if test="$err[starts-with(@field,$errkey)]">
					<xsl:text> error</xsl:text>
				</xsl:if>
			</xsl:attribute>
			<td class="drag-dot">
				<div class="drag-dot" title="{key('i18n','edit.recipe.drag.step.row.title')}"/>
			</td>
			<td>
				<input type="text" name="recipe.ingredient[{$row-index}].quantity" class="smallnum"
					value="{@quantity}" maxlength="8"/>
			</td>
			<td>
				<select name="recipe.ingredient[{$row-index}].unit.unitId">
					<option value="0"></option>
					<xsl:for-each select="$aux/eat:ui/eat:unit">
						<xsl:call-template name="ingredient.unit">
							<xsl:with-param name="ingredient" select="$me"/>
						</xsl:call-template>
					</xsl:for-each>
				</select>
			</td>
			<td>
				<a class="ingredient-type-chooser ingredient" href="#"
					title="Click to use a recipe for this ingredient">
					<xsl:attribute name="class">
						<xsl:text>ingredient-type-chooser </xsl:text>
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:text>recipe</xsl:text>
							</xsl:when>
							<xsl:otherwise>
								<xsl:text>ingredient</xsl:text>
							</xsl:otherwise>
						</xsl:choose>
					</xsl:attribute>
					<xsl:attribute name="title">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:value-of select="key('i18n','edit.recipe.ingredientTypeChooser.recipe.title')"/>
							</xsl:when>
							<xsl:otherwise>
								<xsl:value-of select="key('i18n','edit.recipe.ingredientTypeChooser.ingredient.title')"/>
							</xsl:otherwise>
						</xsl:choose>
					</xsl:attribute>
					<span class="alt">
						<xsl:value-of select="key('i18n','ingredient.type.chooser.displayName')"/>
					</span>
				</a>
				<div id="recipe.ingredient[{$row-index}].ingredient">
					<xsl:attribute name="style">
						<xsl:text>float: left;</xsl:text>
						<xsl:if test="eat:recipe/@recipeId">
							<xsl:text> display: none;</xsl:text>
						</xsl:if>
					</xsl:attribute>
					<input type="text" 
						name="recipe.ingredient[{$row-index}].ingredient.name" 
						id="recipe.ingredient[{$row-index}].ingredient.name" 
						class="ingredient-autocomplete">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:attribute name="disabled">
									<xsl:text>disabled</xsl:text>
								</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="value">
									<xsl:value-of select="eat:ingredient/eat:name"/>
								</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
					</input>
					<input type="hidden" 
						name="recipe.ingredient[{$row-index}].ingredient.ingredientId"
						id="recipe.ingredient[{$row-index}].ingredient.ingredientId">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:attribute name="disabled">
									<xsl:text>disabled</xsl:text>
								</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="value">
								<xsl:value-of select="eat:ingredient/@ingredientId"/>
								</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
					</input>
				</div>
				<div id="recipe.ingredient[{$row-index}].recipe">
					<xsl:attribute name="style">
						<xsl:text>float: left;</xsl:text>
						<xsl:if test="not(eat:recipe/@recipeId)">
							<xsl:text> display: none;</xsl:text>
						</xsl:if>
					</xsl:attribute>
					<input type="text"
						name="recipe.ingredient[{$row-index}].recipe.name"
						id="recipe.ingredient[{$row-index}].recipe.name"
						class="recipe-autocomplete">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:attribute name="value">
									<xsl:value-of select="eat:recipe/eat:name"/>
								</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="disabled">
									<xsl:text>disabled</xsl:text>
								</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
					</input>
					<input type="hidden" 
						name="recipe.ingredient[{$row-index}].recipe.recipeId"
						id="recipe.ingredient[{$row-index}].recipe.recipeId">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:attribute name="value">
									<xsl:value-of select="eat:recipe/@recipeId"/>
								</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="disabled">
									<xsl:text>disabled</xsl:text>
								</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
					</input>
				</div>
			</td>
			<td>
				<input type="text" name="recipe.ingredient[{$row-index}].qualifier" 
					value="{@qualifier}" maxlength="128"/>
			</td>
			<td>
				<a href="#"
					title="{key('i18n','recipe.ingredients.remove')}"
					class="minus">
					<xsl:if test="not(self::eat:ingredient) or position() = 1">
						<xsl:attribute name="style">display: none</xsl:attribute>
					</xsl:if>
					<span class="alt">
						<xsl:value-of select="key('i18n','recipe.ingredients.remove')"/>
					</span>
				</a>
			</td>
		</tr>
    </xsl:template>
    
    <xsl:template match="eat:base">
	    	<option value="{@baseId}">
	    		<xsl:if test="@baseId = $recipe/eat:base/@baseId">
	    			<xsl:attribute name="selected">selected</xsl:attribute>
	    		</xsl:if>
	    		<xsl:value-of select="."/>
	    	</option>
	</xsl:template>
    
    <xsl:template match="eat:course">
	    	<option value="{@courseId}">
	    		<xsl:if test="@courseId = $recipe/eat:course/@courseId">
	    			<xsl:attribute name="selected">selected</xsl:attribute>
	    		</xsl:if>
	    		<xsl:value-of select="."/>
	    	</option>
    </xsl:template>
    
    <xsl:template match="eat:difficulty">
	    	<option value="{@difficultyId}">
	    		<xsl:if test="@difficultyId = $recipe/eat:difficulty/@difficultyId">
	    			<xsl:attribute name="selected">selected</xsl:attribute>
	    		</xsl:if>
	    		<xsl:value-of select="."/>
	    	</option>
    </xsl:template>
    
    <xsl:template match="eat:ethnicity">
	    	<option value="{@ethnicityId}">
	    		<xsl:if test="@ethnicityId = $recipe/eat:ethnicity/@ethnicityId">
	    			<xsl:attribute name="selected">selected</xsl:attribute>
	    		</xsl:if>
	    		<xsl:value-of select="."/>
	    	</option>
	</xsl:template>
    
    <xsl:template match="eat:prep-time">
	    	<option value="{@prepTimeId}">
	    		<xsl:if test="@prepTimeId = $recipe/eat:prep-time/@prepTimeId">
	    			<xsl:attribute name="selected">selected</xsl:attribute>
	    		</xsl:if>
	    		<xsl:value-of select="."/>
	    	</option>
    </xsl:template>
    
    <xsl:template name="ingredient-ingredient">
	    	<xsl:param name="ingredient"/>
	    	<option value="{@ingredientId}">
	    		<xsl:if test="@ingredientId = $ingredient/eat:ingredient/@ingredientId">
	    			<xsl:attribute name="selected">selected</xsl:attribute>
	    		</xsl:if>
	    		<xsl:value-of select="eat:name"/>
	    	</option>
    </xsl:template>
    
	<xsl:template name="ingredient.unit">
	    	<xsl:param name="ingredient"/>
	    	<option value="{@unitId}">
	    		<xsl:if test="@unitId = $ingredient/eat:unit/@unitId">
	    			<xsl:attribute name="selected">selected</xsl:attribute>
	    		</xsl:if>
	    		<xsl:value-of select="."/>
	    	</option>
	</xsl:template>
    
</xsl:stylesheet>