gitignore

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 build/
+config.my.php
+.vscode/

conf/config.php

@@ -17,7 +17,7 @@ return [
 
 /**
  * Database parameters.
- **/
+ */
 'db' => [
 	 'host'   => 'localhost'
 	,'port'   => 3306

debian/changelog

@@ -1,4 +1,4 @@
-hedera-web (1.405.78) stable; urgency=low
+hedera-web (2.0.4) stable; urgency=low
 
   * Initial Release.
 

debian/control

@@ -9,8 +9,8 @@ Vcs-Git: https://git.verdnatura.es/hedera-web
 
 Package: hedera-web
 Architecture: all
-Depends: apache2 | httpd, nodejs, php5-cli, php5-mysql, php5-mcrypt, php5-ldap, php5-ssh2, php-vn-lib
-Suggests: php-text-captcha, php5-imap, tinymce
+Depends: apache2 | httpd, nodejs, php5-cli, php5-mysql, php5-mcrypt, php5-ldap, php5-ssh2, php5-apcu, php-vn-lib
+Suggests: php-text-captcha, php5-imap
 Section: misc
 Priority: optional
 Description: Verdnatura's web page

debian/install

@@ -13,3 +13,4 @@ package.json                usr/share/hedera-web
 build                       usr/share/hedera-web
 README.md                   usr/share/hedera-web
 webpack.config.json         usr/share/hedera-web
+build                       usr/share/hedera-web

debian/rules

@@ -6,7 +6,7 @@
 	dh $@
 
 clean:
-	npm --production run clean
+	npm run clean
 	dh_clean $@
 	
 build:

forms/account/address-list/address-list.js

@@ -5,13 +5,13 @@ Hedera.AddressList = new Class
 
 	,activate: function ()
 	{
-		this.$('user-model').setInfo ('c', 'myClient', 'hedera');
-		this.$('addresses').setInfo ('a', 'myAddress', 'hedera');
+		this.$.userModel.setInfo ('c', 'myClient', 'hedera');
+		this.$.addresses.setInfo ('a', 'myAddress', 'hedera');
 	}
 	
 	,onAddAddressClick: function ()
 	{
-		this.hash.set ({
+		this.hash.setAll ({
 			form: 'account/address',
 			address: 0
 		});
@@ -22,21 +22,13 @@ Hedera.AddressList = new Class
 		window.history.back();
 	}
 	
-	,onRemoveAddressClick: function (button, form)
+	,onRemoveAddressClick: function (button)
 	{
 		if (confirm (_('AreYouSureDeleteAddress')))
 		{
-			form.set ('isActive', false);
-			form.refresh ();
+			button.lot.set ('isActive', false);
+			button.lot.refresh ();
 		}
 	}
-	
-	,onEditAddressClick: function (button, form)
-	{
-		this.hash.set ({
-			form: 'account/address',
-			address: form.get ('id')
-		});
-	}
 });
 

forms/account/address-list/style.css

@@ -1,48 +1 @@
 
-.address-list
-{
-	padding: 1em;
-}
-.address-list .box
-{
-	max-width: 30em;
-}
-.address-list .form
-{
-	margin: 0 auto;
-	max-width: 25em;
-	padding: 2em;
-}
-.address
-{
-	padding: 1em;
-	border-bottom: 1px solid #DDD;
-}
-.address p
-{
-	margin: 0.2em 0;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-.address p.important
-{
-	font-size: 1.2em;
-}
-.address .actions
-{
-	float: right;
-}
-.address .actions > .htk-button
-{
-	margin: 0;
-}
-.address .actions > *
-{
-	display: inline-block;
-	vertical-align: middle;
-}
-.address .actions > input
-{
-	margin: .6em;
-}

forms/account/address-list/ui.xml

@@ -2,71 +2,63 @@
 <vn-group>
 	<db-form id="user-form">
 		<db-model property="model" id="user-model" updatable="true">
-			<custom>
 			SELECT id, defaultAddressFk
-					FROM myClient c
-			</custom>
+				FROM myClient
 		</db-model>
 	</db-form>
 	<db-model id="addresses" updatable="true">
-		<custom>
 		SELECT a.id, a.nickname, p.name province, a.postalCode,
 				a.city, a.street, a.isActive, c.country
 			FROM myAddress a
 			LEFT JOIN vn.province p ON p.id = a.provinceFk
 			JOIN vn.country c ON c.id = p.countryFk
 				WHERE a.isActive
-		</custom>
 	</db-model>
 </vn-group>
-<div id="title">
-	<h1><t>Addresses</t></h1>
-</div>
+<h1 id="title">
+	_Addresses
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="add"
 		tip="_AddAddress"
 		on-click="onAddAddressClick"/>
 </div>
-<div id="form" class="address-list">
-	<div class="box">
+<div id="main" class="address-list">
+	<div class="card list">
 		<htk-radio-group
 			id="default-address"
-			column="defaultAddressFk"
-			form="user-form"/>
-		<htk-repeater model="addresses" form-id="iter">
+			lot="user-form"
+			name="defaultAddressFk"/>
+		<htk-repeater model="addresses">
 			<custom>
-			<div class="address">
+			<a
+				class="list-row"
+				href="#!form=account/address&amp;address={{id}}"
+				title="_EditAddress">
 				<div class="actions">
 					<htk-radio
-						form="iter"
-						column="id"
+						lot="iter"
+						name="id"
 						radio-group="default-address"
 						tip="_SetAsDefault"/>
 					<htk-button
-						form="iter"
-						column="id"
+						lot="iter"
+						name="id"
 						tip="_RemoveAddress"
 						icon="delete"
 						on-click="onRemoveAddressClick"/>
-					<htk-button
-						form="iter"
-						column="id"
-						tip="_EditAddress"
-						icon="edit"
-						on-click="onEditAddressClick"/>
 				</div>
 				<p class="important">
-					<htk-text form="iter" column="nickname"/>
+					{{nickname}}
 				</p>
 				<p>
-					<htk-text form="iter" column="street"/>
+					{{street}}
 				</p>
 				<p>
-					<htk-text form="iter" column="postalCode"/>, 
-					<htk-text form="iter" column="city"/>
+					{{postalCode}}, {{city}}
 				</p>
-			</div>
+			</a>
 			</custom>
 		</htk-repeater>
 	</div>

forms/account/address/address.js

@@ -5,14 +5,14 @@ Hedera.Address = new Class
 
 	,activate: function ()
 	{
-		this.$('model').setInfo ('a', 'myAddress', 'hedera', ['id'], 'id');
-		this.$('model').setDefault ('clientFk', 'a',
+		this.$.model.setInfo ('a', 'myAddress', 'hedera', ['id'], 'id');
+		this.$.model.setDefault ('clientFk', 'a',
 			new Sql.Function ({schema: 'account', name: 'userGetId'}));
 	}
 	
 	,onStatusChange: function (form)
 	{
-		if (form.ready && this.$('address').value == 0)
+		if (form.ready && this.$.params.$.address == 0)
 			form.insertRow ();
 	}
 	
@@ -24,7 +24,7 @@ Hedera.Address = new Class
 
 	,onAcceptClick: function ()
 	{
-		this.$('iter').performOperations ();
+		this.$.iter.performOperations ();
 	}
 
 	,onReturnClick: function ()

forms/account/address/style.css

@@ -1,16 +1 @@
 
-.address
-{
-	padding: 1em;
-}
-.address .box
-{
-	max-width: 30em;
-	padding: 2em;
-}
-.address .form
-{
-	margin: 0 auto;
-	max-width: 25em;
-}
-

forms/account/address/ui.xml

@@ -1,33 +1,28 @@
 <vn>
 <vn-group>
-	<vn-param id="address"/>
-	<vn-hash-param key="address" param="address"/>
+	<vn-lot-query id="params">
+		<vn-spec name="address" type="Number"/>
+	</vn-lot-query>
 	<db-form id="iter" on-status-changed="onStatusChange">
 		<db-model
 		 	id="model"
 			property="model"
 			updatable="true"
 			mode="ON_DEMAND"
+			lot="params"
 			on-operations-done="onOperationsDone">
-			<custom>
 			SELECT a.id, a.street, a.nickname, a.city,
 					a.postalCode, a.provinceFk, c.id countryFk
 				FROM myAddress a
 					LEFT JOIN vn.province p ON p.id = a.provinceFk
 					JOIN vn.country c ON c.id = p.countryFk
 				WHERE a.id = #address
-			</custom>
-			<sql-batch property="batch">
-				<custom>
-					<item name="address" param="address"/>
-				</custom>
-			</sql-batch>
 		</db-model>
 	</db-form>
 </vn-group>
-<div id="title">
-	<h1><t>AddEditAddress</t></h1>
-</div>
+<h1 id="title">
+	_AddEditAddress
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="ok"
@@ -38,60 +33,49 @@
 		tip="_Return"
 		on-click="onReturnClick"/>
 </div>
-<div id="form" class="address">
-	<div class="box">
-		<div class="form">
-			<div class="form-group">
-				<label><t>Name</t></label>
-				<htk-entry column="nickname" form="iter"/>
+<div id="main" class="address">
+	<div class="card form">
+		<div>
+			<label>_Name</label>
+			<htk-entry lot="iter" name="nickname"/>
 		</div>
-			<div class="form-group">
-				<label><t>Address</t></label>
-				<htk-entry column="street" form="iter"/>
+		<div>
+			<label>_Address</label>
+			<htk-entry lot="iter" name="street"/>
 		</div>
-			<div class="form-group">
-				<label><t>City</t></label>
-				<htk-entry column="city" form="iter"/>
+		<div>
+			<label>_City</label>
+			<htk-entry lot="iter" name="city"/>
 		</div>
-			<div class="form-group">
-				<label><t>ZipCode</t></label>
-				<htk-entry column="postalCode" form="iter"/>
+		<div>
+			<label>_ZipCode</label>
+			<htk-entry lot="iter" name="postalCode"/>
 		</div>
-			<div class="form-group">
-				<label><t>Country</t></label>
+		<div>
+			<label>_Country</label>
 			<htk-combo>
-					<db-param
+				<vn-param
 					id="country"
 					property="param"
-						form="iter"
-						column="countryFk"
+					lot="iter"
+					name="country"
 					one-way="true"/>
 				<db-model property="model">
-						<custom>
 					SELECT id, country FROM vn.country
 						ORDER BY country
-						</custom>
 				</db-model>
 			</htk-combo>
 		</div>
-			<div class="form-group">
-				<label><t>Province</t></label>
-				<htk-combo column="provinceFk" form="iter">
-					<db-model property="model">
-						<custom>
+		<div>
+			<label>_Province</label>
+			<htk-combo lot="iter" name="province_id">
+				<db-model property="model" lot="iter">
 					SELECT id, name FROM vn.province
 						WHERE countryFk = #country
 						ORDER BY name
-						</custom>
-						<sql-batch property="batch">
-							<custom>
-								<item name="country" param="country"/>
-							</custom>
-						</sql-batch>
 				</db-model>
 			</htk-combo>
 		</div>
 	</div>
 </div>
-</div>
 </vn>

forms/account/conf/conf.js

@@ -5,31 +5,49 @@ Hedera.Conf = new Class
 
 	,activate: function ()
 	{
-		this.$('user-model').setInfo ('c', 'myClient', 'hedera');
+		this.$.userModel.setInfo ('c', 'myClient', 'hedera');
+
+		if (this.hash.$.changePass)
+			this.onPassChangeClick ();
+	}
+	
+	,onChangePassOpen: function ()
+	{
+		this.hash.assign ({changePass: true});
+	}
+
+	,onChangePassClose: function ()
+	{
+		this.hash.assign ({changePass: undefined});
 	}
 	
 	,onPassChangeClick: function ()
 	{
-		this.$('old-password').value = '';
-		this.$('new-password').value = '';
-		this.$('repeat-password').value = '';
+		this.$.oldPassword.value = '';
+		this.$.newPassword.value = '';
+		this.$.repeatPassword.value = '';
 
-		var recoverPass = this.$('user-form').get ('recoverPass');
-		this.$('old-password').style.display = recoverPass ? 'none' : 'block';
-		this.$('change-password').show ();
+		var recoverPass = this.$.user.get ('recoverPass');
+		this.$.oldPassword.style.display = recoverPass ? 'none' : 'block';
+		this.$.changePassword.show ();
+		
+		var focusInput;
 
 		if (recoverPass)
-			this.$('new-password').focus ();
+			focusInput = this.$.newPassword;
 		else
-			this.$('old-password').focus ();
+			focusInput = this.$.oldPassword;
+	
+		focusInput.focus ();
+		focusInput.select ();
 	}
 
 	,onPassModifyClick: function ()
 	{
 		try {
-			var oldPassword = this.$('old-password').value;
-			var newPassword = this.$('new-password').value;
-			var repeatedPassword = this.$('repeat-password').value;
+			var oldPassword = this.$.oldPassword.value;
+			var newPassword = this.$.newPassword.value;
+			var repeatedPassword = this.$.repeatPassword.value;
 
 			if (newPassword == '' && repeatedPassword == '')
 				throw new Error (_('Passwords empty'));
@@ -53,25 +71,25 @@ Hedera.Conf = new Class
 	{
 		if (json)
 		{
-			this.$('change-password').hide ();
+			this.$.changePassword.hide ();
 			Htk.Toast.showMessage (_('Password changed!'));
-			this.$('user-form').refresh ();
+			this.$.user.refresh ();
 		}
 		else
 		{
 			Htk.Toast.showError (error.message);
-			this.$('old-password').select ();
+			this.$.oldPassword.select ();
 		}
 	}
 	
 	,onPassInfoClick: function ()
 	{
-		this.$('password-info').show ();
+		this.$.passwordInfo.show ();
 	}
 	
 	,onAddressesClick: function ()
 	{
-		this.hash.set ({form: 'account/address-list'});
+		this.hash.setAll ({form: 'account/address-list'});
 	}
 });
 

forms/account/conf/style.css

@@ -1,18 +1,4 @@
 
-.conf
-{
-	padding: 1em;
-}
-.conf .box
-{
-	max-width: 30em;
-	padding: 2em;
-}
-.conf .form
-{
-	margin: 0 auto;
-	max-width: 25em;
-}
 .conf .form-group input[type=password]
 {
 	margin-bottom: 0.5em;
@@ -25,9 +11,10 @@
 
 .pass-info
 {
-	width: 15em;
+	max-width: 17em;
 }
 .pass-info ul
 {
 	list-style-type: none;
+	padding-left: 1.5em;
 }

forms/account/conf/ui.xml

@@ -1,28 +1,22 @@
 <vn>
 <vn-group>
-	<db-form id="password-form">
-		<db-model property="model">
-			<custom>
+	<db-lot id="password-form">
 		SELECT length, nAlpha, nUpper, nDigits, nPunct
 			FROM account.userPassword
-			</custom>
-		</db-model>
-	</db-form>
-	<db-form id="user-form">
+	</db-lot>
+	<db-form id="user">
 		<db-model property="model" id="user-model" updatable="true">
-			<custom>
 			SELECT u.id, u.name, u.email, u.recoverPass,
 					u.nickname, u.lang, c.isToBeMailed, c.id clientFk
 				FROM account.userView u
 					LEFT JOIN myClient c
 						ON u.id = c.id
-			</custom>
 		</db-model>
 	</db-form>
 </vn-group>
-<div id="title">
-	<h1><t>Configuration</t></h1>
-</div>
+<h1 id="title">
+	_Configuration
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="place"
@@ -33,40 +27,41 @@
 		tip="_Change password"
 		on-click="onPassChangeClick"/>
 </div>
-<div id="form" class="conf">
-	<div class="box">
-		<div class="form">
-			<div class="form-group">
-				<label for="user-name"><t>Username</t></label>
-				<htk-text form="user-form" column="name"/>
+<div id="main" class="conf">
+	<div class="card form">
+		<div>
+			<label for="user-name">_Username</label>
+			<htk-text lot="user" name="name"/>
 		</div>
-			<div class="form-group">
-				<label for="email"><t>Email</t></label>
-				<htk-entry form="user-form" column="email"></htk-entry>
+		<div>
+			<label for="email">_Email</label>
+			<htk-entry lot="user" name="email"></htk-entry>
 		</div>
-			<div class="form-group">
-				<label for="nickname"><t>Display name</t></label>
-				<htk-entry form="user-form" column="nickname"/>
+		<div>
+			<label for="nickname">_Display name</label>
+			<htk-entry lot="user" name="nickname"/>
 		</div>
-			<div class="form-group">
-				<label for="lang"><t>Language</t></label>
-				<htk-combo form="user-form" column="lang">
+		<div>
+			<label for="lang">_Language</label>
+			<htk-combo lot="user" name="lang"
+				value-field="code">
 				<db-model property="model">
-						<custom>
-							SELECT code, name FROM language WHERE isActive
-						</custom>
+					SELECT code, name FROM language WHERE active
 				</db-model>
 			</htk-combo>
 		</div>
-			<div class="form-group">
-				<label for="mail"><t>Receive invoices by email</t></label>
-				<htk-check form="user-form" column="isToBeMailed"/>
-			</div>
+		<div>
+			<span>
+				<htk-check id="mail" lot="user" name="isToBeMailed"/> 
+				<label for="mail">_Receive invoices by email</label>
+			</span>
 		</div>
 	</div>
 </div>
 <htk-popup
 	id="change-password"
+	on-open="onChangePassOpen"
+	on-closed="onChangePassClose"
 	modal="true">
 	<div property="child-node" class="htk-dialog pass-change">
 		<div>
@@ -85,10 +80,10 @@
 		</div>
 		<div class="button-bar">
 			<button class="thin" on-click="onPassModifyClick">
-				<t>Modify</t>
+				_Modify
 			</button>
 			<button class="thin" on-click="onPassInfoClick">
-				<t>Info</t>
+				_Info
 			</button>
 			<div class="clear"/>
 		</div>
@@ -99,28 +94,23 @@
 	modal="true">
 	<div property="child-node" class="htk-dialog pass-info">
 		<h3>
-			<t>Password requirements</t>
+			_Password requirements
 		</h3>
 		<ul>
 			<li>
-				<htk-text form="password-form" column="length"/> 
-				<t>characters long</t>
+				{{passwordForm.length}} <span>_characters long</span>
 			</li>
 			<li>
-				<htk-text form="password-form" column="nAlpha"/> 
-				<t>alphabetic characters</t>
+				{{passwordForm.nAlpha}} <span>_alphabetic characters</span>
 			</li>
 			<li>
-				<htk-text form="password-form" column="nUpper"/> 
-				<t>capital letters</t>
+				{{passwordForm.nUpper}} <span>_capital letters</span>
 			</li>
 			<li>
-				<htk-text form="password-form" column="nDigits"/> 
-				<t>digits</t>
+				{{passwordForm.nDigits}} <span>_digits</span>
 			</li>
 			<li>
-				<htk-text form="password-form" column="nPunct"/> 
-				<t>symbols</t>
+				{{passwordForm.nPunct}} <span>_symbols</span>
 			</li>
 		</ul>
 	</div>

forms/admin/access-log/style.css

@@ -1,36 +1,12 @@
-.access-log
+
+.access-log .card
 {
-	padding: 1em;
-}
-.access-log .box
-{
-	max-width: 25em;
-	margin: 0 auto;
-}
-.access-log .form
-{
-	padding: 2em;
+	max-width: 28em;
 }
+
 .access-log .form > p
 {
 	font-size: 1.2em;
 	margin: .1em 0;
 }
 
-/* List */
-
-.access-log .list
-{
-	margin-top: 1em;
-}
-.access-log .item
-{
-	display: block;
-	padding: 1em;
-	border-bottom: 1px solid #DDD;
-}
-.access-log .item > p
-{
-	margin: .1em 0;
-}
-

forms/admin/access-log/ui.xml

@@ -1,46 +1,34 @@
 <vn>
 <vn-group>
-	<vn-param id="user"/>
-	<vn-hash-param key="user" param="user"/>
-	<db-form id="user-form">
-		<db-model property="model">
-			<custom>
+	<db-form id="client">
+		<db-model property="model" lot="hash">
 			SELECT Id_Cliente, Cliente, Telefono, movil
 				FROM vn2008.Clientes WHERE Id_Cliente = #user
-			</custom>
-			<sql-batch property="batch">
-				<custom>
-					<item name="user" param="user"/>
-				</custom>
-			</sql-batch>
 		</db-model>
 	</db-form>
 </vn-group>
-<div id="title">
-	<h1><t>AccessLog</t></h1>
-</div>
-<div id="form" class="access-log">
-	<div class="box">
-		<div class="form">
+<h1 id="title">
+	_AccessLog
+</h1>
+<div id="main" class="access-log">
+	<div class="card form">
 		<p>
-				<htk-text form="user-form" column="Id_Cliente"/>
+			{{client.Id_Cliente}}
 		</p>
 		<p>
-				<htk-text form="user-form" column="Cliente"/>
+			{{client.Cliente}}
 		</p>
 		<p>
-				<htk-text form="user-form" column="Telefono"/>
+			{{client.Telefono}}
 		</p>
 		<p>
-				<htk-text form="user-form" column="movil"/>
+			{{client.movil}}
 		</p>
 	</div>
-	</div>
-	<div class="list box">
+	<div class="card">
 		<div>
-			<htk-repeater form-id="iter">
-				<db-model property="model">
-					<custom>
+			<htk-repeater>
+				<db-model property="model" lot="hash">
 					SELECT u.stamp, a.platform, a.browser, a.version, a.javascript, a.cookies
 						FROM visitUser u
 							JOIN visitAccess c ON c.id = u.access
@@ -48,22 +36,14 @@
 						WHERE u.user = #user
 						ORDER BY u.stamp DESC
 						LIMIT 8
-					</custom>
-					<sql-batch property="batch">
-						<custom>
-							<item name="user" param="user"/>
-						</custom>
-					</sql-batch>
 				</db-model>
 				<custom>
-					<div class="item">
+					<div class="list-row">
 						<p>
-							<htk-text form="iter" column="stamp" format="_%a, %e %b %Y at %T"/>
+							<htk-text lot="iter" name="stamp" format="_%a, %e %b %Y at %T"/>
 						</p>
 						<p>
-							<htk-text form="iter" column="platform"/> - 
-							<htk-text form="iter" column="browser"/> 
-							<htk-text form="iter" column="version"/>
+							{{platform}} - {{browser}} {{version}}
 						</p>
 					</div>
 				</custom>

forms/admin/connections/connections.js

@@ -5,7 +5,7 @@ Hedera.Connections = new Class
 	
 	,_timeoutId: null
 
-	,onModelStatusChange: function (model, status)
+	,onModelStatusChange: function (model)
 	{
 		if (!model.ready)
 			return;
@@ -23,15 +23,7 @@ Hedera.Connections = new Class
 	
 	,onRefreshClick: function ()
 	{
-		this.$('sessions').refresh ();	
-	}
-
-	,onAccessLogClick: function (button, form)
-	{
-		this.hash.set ({
-			 'form': 'admin/access-log'
-			,'user': form.get ('userId')
-		});
+		this.$.sessions.refresh ();	
 	}
 
 	,onChangeUserClick: function (button, form)
@@ -40,9 +32,9 @@ Hedera.Connections = new Class
 			this._onUserSupplant.bind (this));
 	}
 	
-	,_onUserSupplant: function (userName)
+	,_onUserSupplant: function ()
 	{
-		this.hash.set ({'form': 'ecomerce/orders'});
+		this.hash.setAll ({form: 'ecomerce/orders'});
 	}
 	
 	,sessionsFunc: function ()

forms/admin/connections/style.css

@@ -1,12 +1,4 @@
-.connections
-{
-	padding: 1em;
-}
-.connections .box
-{
-	max-width: 25em;
-	margin: 0 auto;
-}
+
 .action-bar .connections-sum
 {
 	padding: .4em;
@@ -16,29 +8,3 @@
 	border-radius: 0.1em;
 	box-shadow: 0 0 0.4em #666;
 }
-
-/* List */
-
-.connections .item
-{
-	display: block;
-	padding: 1em;
-	border-bottom: 1px solid #DDD;
-}
-.connections .item > button
-{
-	float: right;
-	margin: 0;
-}
-.connections .item > p
-{
-	margin: .1em 0;
-}
-.connections .item > p.important
-{
-	font-size: 1.2em;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-

forms/admin/connections/ui.xml

@@ -1,7 +1,7 @@
 <vn>
-<div id="title">
-	<h1><t>Connections</t></h1>
-</div>
+<h1 id="title">
+	_Connections
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="refresh"
@@ -14,14 +14,13 @@
 				model="sessions"
 				func="sessionsFunc"/>
 		</htk-text> 
-		<t>connections</t>
+		_connections
 	</div>
 </div>
-<div id="form" class="connections">
-	<div class="box">
-		<htk-repeater form-id="iter">
+<div id="main" class="connections">
+	<div class="card list">
+		<htk-repeater>
 			<db-model property="model" id="sessions" on-status-changed="onModelStatusChange">
-				<custom>
 				SELECT vu.user userId, vu.stamp, u.nickname, s.lastUpdate, 
 						a.platform, a.browser, a.version, u.name user
 					FROM userSession s
@@ -31,35 +30,30 @@
 						JOIN visit v ON v.id = a.visit
 						JOIN account.user u ON u.id = vu.user
 					ORDER BY lastUpdate DESC
-				</custom>
 			</db-model>
 			<custom>
-				<div class="item">
+				<a href="#!form=admin/access-log&amp;user={{userId}}"
+					class="list-row"
+					title="_Access log">
+					<div class="actions">
 						<htk-button
-						form="iter"
-						column="id"
+							lot="iter"
+							name="id"
 							tip="_Supplant user"
 							icon="incognito"
 							on-click="onChangeUserClick"/>
-					<htk-button
-						form="iter"
-						column="id"
-						tip="_Access log"
-						icon="gnome"
-						on-click="onAccessLogClick"/>
-					<p class="important">
-						<htk-text form="iter" column="nickname"/>
-					</p>
-					<p>
-						<htk-text form="iter" column="stamp" format="%a, %T"/> - 
-						<htk-text form="iter" column="lastUpdate" format="%T"/>
-					</p>
-					<p>
-						<htk-text form="iter" column="platform"/> - 
-						<htk-text form="iter" column="browser"/> 
-						<htk-text form="iter" column="version"/>
-					</p>
 					</div>
+					<p class="important">
+						{{nickname}}
+					</p>
+					<p>
+						<htk-text lot="iter" name="stamp" format="%a, %T"/> - 
+						<htk-text lot="iter" name="lastUpdate" format="%T"/>
+					</p>
+					<p>
+						{{platform}} - {{browser}} {{version}}
+					</p>
+				</a>
 			</custom>
 		</htk-repeater>
 	</div>

forms/admin/items/style.css

@@ -1,21 +1,7 @@
-.items
-{
-	padding: 1em;
-}
-.items .box
-{
-	max-width: 25em;
-	margin: 0 auto;
-}
 
 /* Row */
 
-.items .row
-{
-	padding: 1em;
-	border-bottom: 1px solid #DDD;
-}
-.items .row > .photo
+.items .list-row > .photo
 {
 	margin-right: 1em;
 	float: left;
@@ -23,15 +9,11 @@
 	height: 3.2em;
 	width: 3.2em;
 }
-.items .row > p
+.items .list-row > p
 {
 	margin: .1em 0;
 	margin-left: 5em;
 }
-.items .row > p.important
-{
-	font-size: 1.2em;
-}
 
 /* Topbar */
 
@@ -39,4 +21,3 @@
 {
 	margin: .8em .6em;
 }
-

forms/admin/items/ui.xml

@@ -1,37 +1,25 @@
 <vn>
-<vn-group>
-	<vn-param id="filter"/>
-	<vn-hash-param key="filter" param="filter"/>
-</vn-group>
-<div id="title">
-	<h1><t>Items</t></h1>
-</div>
+<h1 id="title">
+	_Items
+</h1>
 <div id="actions">
-	<htk-search-entry
-		param="filter"/>
+	<htk-search-entry lot="hash" name="search"/>
 </div>
-<div id="form" class="items">
-	<div class="rows box">
-		<htk-repeater form-id="iter" empty-message="_Enter a search term">
-			<db-model property="model">
-				<custom>
+<div id="main" class="items">
+	<div class="card list">
+		<htk-repeater empty-message="_Enter a search term">
+			<db-model property="model" lot="hash">
 				SELECT Id_Article, Article, Medida, Categoria, Foto
 					FROM vn2008.Articles
-						WHERE Article LIKE CONCAT('%', #filter, '%')
-							OR Id_Article = #filter
+					WHERE Article LIKE CONCAT('%', #search, '%')
+						OR Id_Article = #search
 						ORDER BY Article LIMIT 50
-				</custom>
-				<sql-batch property="batch">
-					<custom>
-						<item name="filter" param="filter"/>
-					</custom>
-				</sql-batch>
 			</db-model>
 			<custom>
-				<div class="row">
+				<div class="list-row">
 					<htk-image
-						form="iter"
-						column="Foto"
+						lot="iter"
+						name="Foto"
 						class="photo"
 						directory="catalog"
 						subdir="200x200"
@@ -39,15 +27,13 @@
 						editable="true"
 						conn="conn"/>
 					<p class="concept">
-						<htk-text form="iter" column="Article"/> 
-						<htk-text form="iter" column="Medida"/> 
-						<htk-text form="iter" column="Categoria"/>
+						{{Article}} {{Medida}} {{Categoria}}
 					</p>
 					<p>
-						<htk-text form="iter" column="Id_Article"/>
+						@{{Id_Article}}
 					</p>
 					<p>
-						<htk-text form="iter" column="Foto"/>
+						{{Foto}}
 					</p>
 					<div class="clear"/>
 				</div>

forms/admin/links/links.js

@@ -2,10 +2,5 @@
 Hedera.Links = new Class
 ({
 	Extends: Hedera.Form
-
-	,repeaterFunc: function (res, form)
-	{
-		res.$('link').href = form.get ('link');
-	}
 });
 

forms/admin/links/style.css

@@ -1,38 +1,13 @@
 
-.cpanel
-{
-	padding: 1em;
-}
-.cpanel .box
-{
-	max-width: 30em;
-}
-
-/* Items */
-
-.cpanel .item
-{
-	display: block;
-	padding: 1em;
-	border-bottom: 1px solid #DDD;
-}
-.cpanel .item:hover
+.cpanel .list-row:hover
 {
 	background-color: rgba(1, 1, 1, 0.05);
 }
-.cpanel .item > .htk-image
+.cpanel .list-row > .htk-image
 {
 	margin: 0;
 	margin-right: 1em;
 	float: left;
-	max-height: 2.8em;
-	max-width: 2.8em;
-}
-.cpanel .item > p
-{
-	margin: .1em 0;
-}
-.cpanel .item > p.important
-{
-	font-size: 1.2em;
+	height: 2.8em;
+	width: 2.8em;
 }

forms/admin/links/ui.xml

@@ -1,28 +1,25 @@
 <vn>
-<div id="title">
-	<h1><t>ControlPanel</t></h1>
-</div>
-<div id="form" class="cpanel">
-	<div class="box">
-		<htk-repeater form-id="iter" renderer="repeaterFunc">
+<h1 id="title">
+	_ControlPanel
+</h1>
+<div id="main" class="cpanel">
+	<div class="card list">
+		<htk-repeater>
 			<db-model property="model">
-				<custom>
 				SELECT image, name, description, link FROM link
 					ORDER BY name
-				</custom>
 			</db-model>
 			<custom>
-				<a id="link" class="item" target="_blank">
+				<a class="list-row" href="{{link}}" target="_blank">
 					<htk-image
-						form="iter"
-						column="image"
+						value="{{image}}"
 						directory="link"
 						subdir="full"/>
 					<p class="important">
-						<htk-text form="iter" column="name"/>
+						{{name}}
 					</p>
 					<p>
-						<htk-text form="iter" column="description"/>
+						{{description}}
 					</p>
 				</a>
 			</custom>

forms/admin/photos/photos.js

@@ -18,7 +18,7 @@ Hedera.Photos = new Class
 
 	,activate: function ()
 	{
-		this.$('schema').value = 'catalog';
+		this.$.schema.value = 'catalog';
 	}
 
 	,addFiles: function (files)
@@ -70,7 +70,7 @@ Hedera.Photos = new Class
 		this.filesData.push (fileData);
 		button.value = fileData;
 
-		this.$('file-list').appendChild (div);
+		this.$.fileList.appendChild (div);
 	}
 
 	,onUploadClick: function ()
@@ -112,7 +112,7 @@ Hedera.Photos = new Class
 		var formData = new FormData();
 		formData.append ('image', fileData.file);
 		formData.append ('name', fileData.name.value);
-		formData.append ('schema', this.$('schema').value);
+		formData.append ('schema', this.$.schema.value);
 		formData.append ('srv', 'json:image/upload');
 		this.conn.sendFormData (formData,
 			this.onFileUpload.bind (this, fileData));
@@ -163,7 +163,7 @@ Hedera.Photos = new Class
 	,onFileRemove: function (button)
 	{
 		var fileData = button.value;
-		this.$('file-list').removeChild (fileData.div);
+		this.$.fileList.removeChild (fileData.div);
 
 		for (var i = 0; i < this.filesData.length; i++)
 		if (this.filesData[i] === fileData)
@@ -176,27 +176,27 @@ Hedera.Photos = new Class
 	,onClearClick: function ()
 	{
 		this.filesData = [];
-		Vn.Node.removeChilds (this.$('file-list'));
+		Vn.Node.removeChilds (this.$.fileList);
 	}
 
 	,onDropzoneClick: function ()
 	{
-		this.$('file').click ();
+		this.$.file.click ();
 	}
 
 	,onFileChange: function ()
 	{
-		this.addFiles (this.$('file').files);
+		this.addFiles (this.$.file.files);
 	}
 
-	,onDragEnter: function (event)
+	,onDragEnter: function ()
 	{
-		Vn.Node.addClass (this.$('dropzone'), 'dragover');
+		Vn.Node.addClass (this.$.dropzone, 'dragover');
 	}
 
-	,onDragLeave: function (event)
+	,onDragLeave: function ()
 	{
-		Vn.Node.removeClass (this.$('dropzone'), 'dragover');
+		Vn.Node.removeClass (this.$.dropzone, 'dragover');
 	}
 
 	,onDragOver: function (event)
@@ -206,7 +206,7 @@ Hedera.Photos = new Class
 
 	,onDragEnd: function (event)
 	{
-		Vn.Node.removeClass (this.$('dropzone'), 'dragover');
+		Vn.Node.removeClass (this.$.dropzone, 'dragover');
 		event.dataTransfer.clearData ();
 	}
 

forms/admin/photos/style.css

@@ -1,14 +1,4 @@
 
-.photos
-{	
-	padding: 1em;
-}
-.photos .box
-{
-	max-width: 25em;
-	padding: 2em;
-}
-
 /* Dropzone */
 
 .photos .dropzone

forms/admin/photos/ui.xml

@@ -1,16 +1,14 @@
 <vn>
-<div id="title">
-	<h1><t>Images</t></h1>
-</div>
-<div id="form" class="photos">
-	<div class="box">
+<h1 id="title">
+	_Images
+</h1>
+<div id="main" class="photos">
+	<div class="card form">
 		<div class="form-group">
-			<label><t>Collection</t></label>
+			<label>_Collection</label>
 			<htk-combo id="schema">
 				<db-model property="model">
-					<custom>
 					SELECT name, `desc` FROM imageCollection ORDER BY `desc`
-					</custom>
 				</db-model>
 			</htk-combo>
 		</div>
@@ -22,7 +20,7 @@
 			on-drop="onDrop"
 			on-dragend="onDragEnd"
 			on-click="onDropzoneClick">
-			<t>Click or drop files here</t>
+			_Click or drop files here
 		</div>
 		<input
 			 id="file"
@@ -33,10 +31,10 @@
 		<div id="file-list" class="file-list"/>
 		<div class="footer">
 			<button class="thin" on-click="onClearClick">
-				<t>Clear all</t>
+				_Clear all
 			</button>
 			<button class="thin" on-click="onUploadClick">
-				<t>Upload files</t>
+				_Upload files
 			</button>
 		</div>
 	</div>

forms/admin/queries/queries.js

@@ -5,14 +5,14 @@ Hedera.Queries = new Class
 	
 	,activate: function  ()
 	{
-		this.$('result-index').value = 0;
+		this.$.resultIndex.value = 0;
 	}
 	
 	,clean: function ()
 	{
 		if (this._grid)
 		{
-			this.$('grid-holder').removeChild (this._grid.node);
+			this.$.gridHolder.removeChild (this._grid.node);
 			this._grid.unref ();
 			this._grid = null;
 		}
@@ -24,9 +24,9 @@ Hedera.Queries = new Class
 		
 		var model = new Db.Model ({
 			conn: this.conn,
-			query: this.$('sql').value,
-			resultIndex: this.$('result-index').value,
-			updatable: this.$('updatable').value
+			query: this.$.sql.value,
+			resultIndex: this.$.resultIndex.value,
+			updatable: this.$.updatable.value
 		});
 		model.on ('status-changed', this._onModelChange, this);
 	}
@@ -49,7 +49,7 @@ Hedera.Queries = new Class
 
 		Htk.Toast.showMessage (_('Query executed!'));
 
-		var gridHolder = this.$('grid-holder');
+		var gridHolder = this.$.gridHolder;
 		
 		if (gridHolder.firstChild)
 			gridHolder.removeChilds (gridHolder.firstChild);
@@ -86,7 +86,7 @@ Hedera.Queries = new Class
 		
 			column.setProperties ({
 				title: c.name,
-				editable: this.$('updatable').value,
+				editable: this.$.updatable.value,
 				columnIndex: i
 			});
 			

forms/admin/queries/style.css

@@ -1,16 +1,7 @@
-.queries
-{
-	padding: 1em;
-}
-.queries .box
+
+.queries .card
 {
 	max-width: 40em;
-	margin: 0 auto;
-}
-.queries .form
-{
-	box-sizing: border-box;
-	padding: 2em;
 }
 .queries textarea
 {

forms/admin/queries/ui.xml

@@ -1,7 +1,7 @@
 <vn>
-<div id="title">
-	<h1><t>Queries</t></h1>
-</div>
+<h1 id="title">
+	_Queries
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="ok"
@@ -12,26 +12,26 @@
 		tip="_Clean"
 		on-click="_onCleanClick"/>
 </div>
-<div id="form" class="queries">
-	<div class="box form">
-		<div class="form-group">
-			<label><t>SQL query</t></label>
+<div id="main" class="queries">
+	<div class="card form">
+		<div>
+			<label>_SQL query</label>
 			<textarea
 				id="sql"
 				autocorrect="off"
 				autocapitalize="off"
 				spellcheck="false"/>
 		</div>
-		<div class="form-group">
-			<label><t>Result index</t></label>
+		<div>
+			<label>_Result index</label>
 			<htk-spin id="result-index"/>
 		</div>
-		<div class="form-group">
-			<label><t>Updatable</t></label>
+		<div>
+			<label>_Updatable</label>
 			<htk-check id="updatable"/>
 		</div>
 	</div>
-	<div class="box result">
+	<div class="card result">
 		<div id="grid-holder"/>
 	</div>
 </div>

forms/admin/users/style.css

@@ -1,45 +1,14 @@
-.users
+
+.users ._disabled
 {
-	padding: 1em;
-}
-.users .box
-{
-	max-width: 30em;
-	margin: 0 auto;
-}
-.users-box
-{
-	padding: 1em;
-	border-bottom: 1px solid #DDD;
-}
-.users-box > button
-{
-	float: right;
-	margin: 0;
-}
-.users-box > p
-{
-	margin: .2em 0;
-}
-.users-box > p.important
-{
-	font-size: 1.2em;
-}
-.users-box > .disabled
-{
-	float: right;
 	color: white;
 	background-color: #F66;
 	border-radius: .2em;
-	padding: .2em;
-	margin: .3em;
+	padding: .3em;
 	font-size: .8em;
 }
-
-/* Topbar */
-
 .action-bar .htk-search-entry
 {
-	margin: .8em .6em;
+	margin: .8em;
 }
 

forms/admin/users/ui.xml

@@ -1,60 +1,44 @@
 <vn>
-<vn-group>
-	<vn-param id="user-name"/>
-	<vn-hash-param key="user" param="user-name"/>
-</vn-group>
-<div id="title">
-	<h1><t>User management</t></h1>
-</div>
+<h1 id="title">
+	_User management
+</h1>
 <div id="actions">
-	<htk-search-entry
-		param="user-name"/>
+	<htk-search-entry lot="hash" name="user"/>
 </div>
-<div id="form" class="users">
-	<div class="box">
-		<htk-repeater form-id="iter" renderer="rendererFunc">
-			<db-model property="model">
-				<custom>
+<div id="main" class="users">
+	<div class="card list">
+		<htk-repeater renderer="rendererFunc">
+			<db-model property="model" lot="hash">
 				SELECT u.id, u.name, u.nickname, u.active
 					FROM account.user u
 					WHERE u.name LIKE CONCAT('%', #user, '%')
 						OR u.nickname LIKE CONCAT('%', #user, '%')
 						OR u.id = #user
 					ORDER BY u.name LIMIT 200
-				</custom>
-				<sql-batch property="batch">
-					<custom>
-						<item name="user" param="user-name"/>
-					</custom>
-				</sql-batch>
 			</db-model>
 			<custom>
-				<div class="users-box">
-					<htk-button
-						form="iter"
-						column="id"
-						tip="_Access log"
-						icon="gnome"
-						on-click="onAccessLogClick"/>
+				<a
+					class="list-row"
+					href="#!form=admin/access-log&amp;user={{id}}"
+					title="_AccessLog">
+					<div class="actions">
+						<span id="disabled">
+							_Disabled
+						</span>
 						<htk-button
 							id="impersonate"
-						form="iter"
-						column="id"
-						tip="_Impersonate user"
+							value="{{id}}"
+							tip="_AccessAsUser"
 							icon="incognito"
 							on-click="onChangeUserClick"/>
-					<span id="disabled" class="disabled">
-						<t>Disabled</t>
-					</span>
+					</div>
 					<p class="important">
-						<htk-text form="iter" column="nickname"/>
+						{{nickname}}
 					</p>
 					<p>
-						@<htk-text form="iter" column="id"/> - 
-						<htk-text form="iter" column="name"/>
+						@{{id}} - {{name}}
 					</p>
-					<div class="clear"/>
-				</div>
+				</a>
 			</custom>
 		</htk-repeater>
 	</div>

forms/admin/users/users.js

@@ -3,32 +3,24 @@ Hedera.Users = new Class
 ({
 	Extends: Hedera.Form
 
-	,onAccessLogClick: function (button, form)
+	,rendererFunc: function (scope, lot)
 	{
-		this.hash.set ({
-			 'form': 'admin/access-log'
-			,'user': form.get ('id')
-		});
-	}
-
-	,rendererFunc: function (scope, form)
-	{
-		var isEnabled = form.get('active')
-		scope.$('disabled').style.display = isEnabled ?
+		var isEnabled = lot.$.active;
+		scope.$.disabled.style.display = isEnabled ?
 			'none' : 'block';
-		scope.$('impersonate').node.style.display = isEnabled ?
+		scope.$.impersonate.node.style.display = isEnabled ?
 			'block' : 'none';
 	}
 
-	,onChangeUserClick: function (button, form)
+	,onChangeUserClick: function (button)
 	{
-		this.gui.supplantUser (form.get ('name'),
+		this.gui.supplantUser (button.value,
 			this.onUserSupplant.bind (this));
 	}
 	
 	,onUserSupplant: function ()
 	{
-		this.hash.set ({form: 'ecomerce/orders'});
+		this.hash.setAll ({form: 'ecomerce/orders'});
 	}
 });
 

forms/admin/visits/style.css

@@ -1,46 +1,13 @@
-.visits
+
+.visits .card
 {
-	padding: 1em;
-}
-.visits .box
-{
-	max-width: 25em;
-	margin: 0 auto;
-}
-.visits .form
-{
-	padding: 1.5em;
-	max-width: 20em;
-}
-.visits .summary
-{
-	margin-top: 1em;
+	max-width: 28em;
 }
+
 .visits .summary p
 {
-	padding: 1.5em;
+	margin: 0;
 	font-size: 1.4em;
 	text-align: right;
 }
 
-/* List */
-
-.visits .list
-{
-	margin-top: 1em;
-}
-.visits .item
-{
-	display: block;
-	padding: 1em;
-	border-bottom: 1px solid #DDD;
-}
-.visits .item > p
-{
-	margin: .1em 0;
-}
-.visits .item > p.important
-{
-	font-size: 1.2em;
-}
-

forms/admin/visits/ui.xml

@@ -1,7 +1,11 @@
 <vn>
-<div id="title">
-	<h1><t>Visits</t></h1>
-</div>
+<vn-lot-query id="params">
+	<vn-spec name="from" type="Date"/>
+	<vn-spec name="to" type="Date"/>
+</vn-lot-query>
+<h1 id="title">
+	_Visits
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="refresh"
@@ -12,24 +16,18 @@
 		tip="_Connections"
 		on-click="onSessionsClick"/>
 </div>
-<div id="form" class="visits">
-	<div class="box">
-		<div class="form">
-			<div class="form-group">
-				<label><t>From</t></label>
-				<htk-date-chooser>
-					<vn-param property="param" id="from"/>
-				</htk-date-chooser>
+<div id="main" class="visits">
+	<div class="card form">
+		<div>
+			<label>_From</label>
+			<htk-date-chooser lot="params" name="from"/>
 		</div>
-			<div class="form-group">
-				<label><t>To</t></label>
-				<htk-date-chooser>
-					<vn-param property="param" id="to"/>
-				</htk-date-chooser>
+		<div>
+			<label>_To</label>
+			<htk-date-chooser lot="params" name="to"/>
 		</div>
 	</div>
-	</div>
-	<div class="summary box">
+	<div class="summary card form">
 		<p>
 			<htk-text>
 				<db-calc-sum
@@ -37,20 +35,19 @@
 					model="visits"
 					column-name="visits"/>
 			</htk-text> 
-			<t>visits</t>,
+			<span>_visits</span>,
 			<htk-text>
 				<db-calc-sum
 					property="param"
 					model="visits"
 					column-name="newVisits"/>
 			</htk-text> 
-			<t>news</t>
+			<span>_news</span>
 		</p>
 	</div>
-	<div class="list box">
-		<htk-repeater form-id="iter" empty-message="_Select date interval">
-			<db-model property="model" id="visits">
-				<custom>
+	<div class="card list ">
+		<htk-repeater empty-message="_Select date interval">
+			<db-model property="model" id="visits" lot="params">
 				SELECT browser
 						,MIN(CAST(version AS DECIMAL(4,1))) minVersion
 						,MAX(CAST(version AS DECIMAL(4,1))) maxVersion
@@ -62,30 +59,19 @@
 						JOIN visitAgent a ON c.agent = a.id
 						JOIN visit v ON a.visit = v.id
 					WHERE c.stamp BETWEEN TIMESTAMP(#from,'00:00:00') AND TIMESTAMP(#to,'23:59:59')
-							GROUP BY browser ORDER BY visits DESC
-				</custom>
-				<sql-batch property="batch">
-					<custom>
-						<item name="from" param="from"/>
-						<item name="to" param="to"/>
-					</custom>
-				</sql-batch>
+					GROUP BY browser
+					ORDER BY visits DESC
 			</db-model>
 			<custom>
-				<div class="item">
+				<div class="list-row">
 					<p class="important">
-						<htk-text form="iter" column="browser"/> 
-						<htk-text form="iter" column="minVersion"/> - 
-						<htk-text form="iter" column="maxVersion"/>
+						{{browser}} {{minVersion}} - {{maxVersion}}
 					</p>
 					<p>
-						<htk-text form="iter" column="visits"/> 
-						<t>visits</t>, 
-						<htk-text form="iter" column="newVisits"/> 
-						<t>news</t>
+						{{visits}} <span>_visits</span>, {{newVisits}} <span>_news</span>
 					</p>
 					<p>
-						<htk-text form="iter" column="lastVisit" format="_%a, %e %b %Y at %T"/>
+						<htk-text lot="iter" name="lastVisit" format="_%a, %e %b %Y at %T"/>
 					</p>
 				</div>
 			</custom>

forms/admin/visits/visits.js

@@ -5,18 +5,21 @@ Hedera.Visits = new Class
 
 	,activate: function ()
 	{
-		this.$('from').value = new Date ();
-		this.$('to').value = new Date ();
+		if (!this.hash.$.to)
+			this.hash.assign ({
+				from: new Date (),
+				to: new Date ()
+			});
 	}
 	
 	,onRefreshClick: function ()
 	{
-		this.$('visits').refresh ();	
+		this.$.visits.refresh ();	
 	}
 	
 	,onSessionsClick: function ()
 	{
-		this.hash.set ({'form': 'admin/connections'});
+		this.hash.setAll ({form: 'admin/connections'});
 	}
 });
 

forms/agencies/packages/packages.js

@@ -5,9 +5,9 @@ Hedera.Packages = new Class
 	
 	,onShowClick: function  (column, agencyId)
 	{
-		this.hash.set ({
-			'form': 'agencies/provinces',
-			'agency': agencyId
+		this.hash.setAll ({
+			form: 'agencies/provinces',
+			agency: agencyId
 		});
 	}
 });

forms/agencies/packages/style.css

@@ -1,9 +1,4 @@
-.packages
+.packages .card
 {
-	padding: 1em;
-}
-.packages .box
-{
-	max-width: 40em;
-	margin: 0 auto;
+	max-width: 35em;
 }

forms/agencies/packages/ui.xml

@@ -1,14 +1,12 @@
 <vn>
-<div id="title">
-	<h1><t>ListByAgency</t></h1>
-</div>
-<div id="form" class="packages">
-	<div class="box">
+<h1 id="title">
+	_ListByAgency
+</h1>
+<div id="main" class="packages">
+	<div class="card">
 		<htk-grid>
 			<db-model property="model">
-				<custom>
 				CALL vn2008.agencia_volume ()
-				</custom>
 			</db-model>
 			<htk-column-button
 				column="agency_id"

forms/agencies/provinces/style.css

@@ -1,9 +1,4 @@
-.provinces
+.provinces .card
 {
-	padding: 1em;
-}
-.provinces .box
-{
-	max-width: 40em;
-	margin: 0 auto;
+	max-width: 35em;
 }

forms/agencies/provinces/ui.xml

@@ -1,23 +1,12 @@
 <vn>
-<vn-group>
-	<vn-param id="agency"/>
-	<vn-hash-param key="agency" param="agency"/>
-</vn-group>
-<div id="title">
-	<h1><t>ByProvince</t></h1>
-</div>
-<div id="form" class="provinces">
-	<div class="box">
+<h1 id="title">
+	_ByProvince
+</h1>
+<div id="main" class="provinces">
+	<div class="card">
 		<htk-grid>
-			<db-model property="model">
-				<custom>
+			<db-model property="model" lot="hash">
 				CALL vn2008.desglose_volume (#agency)
-				</custom>
-				<sql-batch property="batch">
-					<custom>
-						<item name="agency" param="agency"/>
-					</custom>
-				</sql-batch>
 			</db-model>
 			<htk-column-text title="_Province" column="Provincia"/>
 			<htk-column-spin title="_Expeditions" column="expediciones"/>

forms/cms/about/style.css

@@ -8,7 +8,7 @@
 	max-width: 85em;
 	margin: 0 auto;
 }
-@media screen and (min-width: 1000px) /* and (max-width: 1399px) */
+@media screen and (min-width: 1000px)
 {
 	.about .cols
 	{
@@ -16,34 +16,31 @@
 		-moz-column-count: 2;
 		-webkit-column-count: 2;
 	}
-}/*
-@media screen and (min-width: 1400px)
-{
-	.about .cols
-	{
-		column-count: 3;
-		-moz-column-count: 3;
-		-webkit-column-count: 3;
 }
-}
-@media screen and (min-width: 2000px)
-{
-	.about .cols
-	{
-		column-count: 4;
-		-moz-column-count: 4;
-		-webkit-column-count: 4;
-	}
-}*/
-.about .box
+
+.about .card
 {
+	margin: 0;
+	max-width: none;
 	margin-bottom: 1em;
 	padding: 2em;
 }
-.about h1
+.about .card > :first-child
+{
+	margin-top: 0;
+}
+.about .card > :last-child
+{
+	margin-bottom: 0;
+}
+.about h1,
+.about h2,
+.about h3
 {
 	padding: 0;
-	margin: 0;
+}
+.about h1
+{
 	font-weight: normal;
 	font-size: 1.6em;
 }
@@ -59,7 +56,7 @@
 	text-align: center;
 	font-size: 1.2em;
 	font-weight: normal;
-	padding: 1em;
+	margin: 1em;
 	color: #00796B;
 }
 .about p
@@ -83,26 +80,27 @@
 {
 	max-width: 90%;
 	text-align: center;
-	padding: 1em;
 	display: block;
-    margin: 0 auto;
+	margin: 1em auto;
 }
 .about img[alt="producers"],
 .about img[alt="4_control"],
 .about img[alt="dealer"],
 .about img[alt="goods_transport"]
 {
+	margin: 1em;
 	float: right;
 }
 .about img[alt="2_control"]
 {
+	margin: 1em;
 	float: left;
 }
 .about img[alt="glass"]
 {
 	display: inline;
-	padding: 0;
-	padding-left: 0.9em;
+	margin: 0;
+	margin-left: .9em;
 	vertical-align: middle;
 }
 

forms/cms/about/ui.xml

@@ -1,95 +1,95 @@
 <vn>
-<div id="title">
-	<h1><t>About</t></h1>
-</div>
-<div id="form" class="about">
-<div class="cols">
-	<div class="box">
-		<h1>
-			<t>QualityAndVariety</t>
+<h1 id="title">
+	_About
 </h1>
-		<p><t>MaximumFreshness</t></p>
-		<h3><t>SquareMeters</t></h3>
+<div id="main" class="about">
+<div class="cols">
+	<div class="card">
+		<h1>
+			_QualityAndVariety
+		</h1>
+		<p>_MaximumFreshness</p>
+		<h3>_SquareMeters</h3>
 		<img src="forms/cms/about/image/store.png" alt="store"/>
-		<h3><t>AboutRealms</t></h3>
-		<p><t>AboutLocation</t></p>
+		<h3>_AboutRealms</h3>
+		<p>_AboutLocation</p>
 		<img src="forms/cms/about/image/trailer.png" alt="trailer"/>
 		<p>
 			<img src="forms/cms/about/image/dealer.png" alt="dealer"/>
-			<t>PurchaseThroughWeb</t>
+			_PurchaseThroughWeb
 		</p>
 		<img src="forms/cms/about/image/palletizing.png" alt="palletizing"/>
 	</div>
-	<div class="box">
+	<div class="card">
 		<h1>
-			<t>WhatMakeUsDifferent</t>
+			_WhatMakeUsDifferent
 		</h1>
-		<p><t>DesignVariety</t></p>
+		<p>_DesignVariety</p>
 		<img src="forms/cms/about/image/differentiates_us.png" alt="differentiates_us"/>
-		<p><t>AdaptToYourNeeds</t></p>
-		<h3><t>TheBestQuality</t></h3>
+		<p>_AdaptToYourNeeds</p>
+		<h3>_TheBestQuality</h3>
 	</div>
-	<div class="box">
+	<div class="card">
 		<h1>
-			<t>AtYourService</t>
+			_AtYourService
 		</h1>
-		<h2><t>BuyersAndTraders</t></h2>
+		<h2>_BuyersAndTraders</h2>
 		<img src="forms/cms/about/image/commercial.png" alt="commercial"/>
 	</div>
-	<div class="box">
+	<div class="card">
 		<h1>
-			<t>Verdnatura training</t>
+			_Verdnatura training
 		</h1>
-		<p><t>GoodTraining</t></p>
+		<p>_GoodTraining</p>
 		<img src="forms/cms/about/image/training.png" alt="training"/>
-		<p><t>SpecialTrainingPrices</t></p>
+		<p>_SpecialTrainingPrices</p>
 		<img src="forms/cms/about/image/courses.png" alt="courses"/>
-		<h2><t>YoutubeChannel</t></h2>
+		<h2>_YoutubeChannel</h2>
 		<img src="forms/cms/about/image/youtube.png" alt="youtube"/>
 	</div>
-	<div class="box">
+	<div class="card">
 		<h1>
-			<t>HowWeWork</t>
+			_HowWeWork
 		</h1>
-		<p><t>AalsmeerAuction</t></p>
+		<p>_AalsmeerAuction</p>
 		<img src="forms/cms/about/image/auction.png" alt="auction"/>
-		<p><t>BeforeAuction</t></p>
+		<p>_BeforeAuction</p>
 		<img src="forms/cms/about/image/producers.png" alt="producers"/>
-		<p><t>DirectlyFromProviders</t></p>
-		<p><t>GoodsDischarge</t></p>
+		<p>_DirectlyFromProviders</p>
+		<p>_GoodsDischarge</p>
 		<img src="forms/cms/about/image/goods_transport.png" alt="goods_transport"/>
 		<h2>
-			<t>FirstQualityControl</t>		
+			_FirstQualityControl		
 			<img src="forms/cms/about/image/glass.png" alt="glass"/>
 		</h2>
 		<img src="forms/cms/about/image/goods_receive.png" alt="goods_receive"/>
-		<p><t>GoodsTravel</t></p>
+		<p>_GoodsTravel</p>
 		<img src="forms/cms/about/image/2_control.png" alt="2_control"/>
-		<p><t>GoodsReception</t></p>
+		<p>_GoodsReception</p>
 		<h2>
-			<t>SecondQualityControl</t>
+			_SecondQualityControl
 			<img src="forms/cms/about/image/glass.png" alt="glass"/>
 		</h2>
-		<p><t>CustomerOrders</t></p>
+		<p>_CustomerOrders</p>
 		<img src="forms/cms/about/image/web.png" alt="web"/>
-		<p><t>AfterOrder</t></p>
+		<p>_AfterOrder</p>
 		<img src="forms/cms/about/image/4_control.png" alt="4_control"/>
 		<h2>
-			<t>ThirdQualityControl</t>		
+			_ThirdQualityControl		
 			<img src="forms/cms/about/image/glass.png" alt="glass"/>
 		</h2>
-		<p><t>BuyerControl</t></p>
+		<p>_BuyerControl</p>
 		<h2>
-			<t>FourthQualityControl</t>
+			_FourthQualityControl
 			<img src="forms/cms/about/image/glass.png" alt="glass"/>
 		</h2>
-		<p><t>EmbeddedSection</t></p>
+		<p>_EmbeddedSection</p>
 		<img src="forms/cms/about/image/fit.png" alt="fit"/>
-		<p><t>AfterEmbedAgency</t></p>
+		<p>_AfterEmbedAgency</p>
 		<img src="forms/cms/about/image/agencies.png" alt="agencies"/>
-		<p><t>FreshnessGuaranteed</t></p>
+		<p>_FreshnessGuaranteed</p>
 		<p class="summary">
-			<t>AboutSummary</t>
+			_AboutSummary
 			<img src="image/logo.svg" alt="Verdnatura"/>
 		</p>
 	</div>

forms/cms/contact/contact.js

@@ -6,7 +6,7 @@ Hedera.Contact = new Class
 	,activate: function ()
 	{
 		var self = this;
-		this.$('contact-form').onsubmit = function ()
+		this.$.contactForm.onsubmit = function ()
 			{ self._onSubmit (); return false; };
 
 		this.refreshCaptcha ();
@@ -15,21 +15,21 @@ Hedera.Contact = new Class
 	,refreshCaptcha: function ()
 	{
 		params = {
-			'srv': 'rest:core/captcha',
-			'stamp': new Date ().getTime ()
+			srv: 'rest:core/captcha',
+			stamp: new Date ().getTime ()
 		};
-		this.$('captcha-img').src = '?'+ Vn.Url.makeUri (params);
+		this.$.captchaImg.src = '?'+ Vn.Url.makeUri (params);
 	}
 	
 	,_onSubmit: function ()
 	{
-		this.conn.sendForm (this.$('contact-form'),
+		this.conn.sendForm (this.$.contactForm,
 			this._onResponse.bind (this));
 	}
 	
-	,_onResponse: function (json, error)
+	,_onResponse: function (json)
 	{
-		var form = this.$('contact-form');
+		var form = this.$.contactForm;
 
 		if (json)
 		{

forms/cms/contact/style.css

@@ -1,29 +1,8 @@
 
-.contact
-{
-	padding: 1em;
-}
-.contact .box
-{
-	max-width: 30em;
-	padding: 2em;
-}
-.contact .form
-{
-	position: relative;
-	text-align: left;
-	max-width: 25em;
-	margin: 0 auto;
-}
-.contact form
-{
-	margin: 0 auto;
-}
 .contact form p
 {
-	margin: 1em auto;
-	display: block;
-	margin-top: 2em;
+	margin: 0;
+	margin-bottom: 1em;
 }
 .contact textarea
 {
@@ -32,7 +11,8 @@
 .contact button
 {
 	display: block;
-	margin: 0 auto;
+	margin-right: auto;
+	margin-left: auto;
 	margin-top: 1em;
 	padding: 0.6em;
 }

forms/cms/contact/ui.xml

@@ -1,56 +1,54 @@
 <vn>
-<div id="title">
-	<h1><t>IWantCustomer</t></h1>
-</div>
-<div id="form" class="contact">
-	<div class="box">
-		<div class="form">
-			<p>
-				<t>FillFormData</t>
-			</p>
-			<p>
-				<t>OrCallUs</t>
-			</p>
+<h1 id="title">
+	_IWantCustomer
+</h1>
+<div id="main" class="contact">
 	<form
 		id="contact-form">
 		<input type="hidden" name="srv" value="json:misc/contact"/>
-				<div class="form-group">
-					<label><t>Name</t></label>
+	<div class="card form">
+		<p>
+			_FillFormData
+		</p>
+		<p>
+			_OrCallUs
+		</p>
+		<div>
+			<label>_Name</label>
 			<input type="text" name="name"/>
 		</div>
-				<div class="form-group">
-					<label><t>City</t></label>
+		<div>
+			<label>_City</label>
 			<input type="text" name="city"/>
 		</div>
-				<div class="form-group">
-					<label><t>PC</t></label>
+		<div>
+			<label>_PC</label>
 			<input type="text" name="pc"/>
 		</div>
-				<div class="form-group">
-					<label><t>Phone</t></label>
+		<div>
+			<label>_Phone</label>
 			<input type="text" name="phone"/>
 		</div>
-				<div class="form-group">
-					<label><t>EMail</t></label>
+		<div>
+			<label>_EMail</label>
 			<input type="text" name="email"/>
 		</div>
-				<div class="form-group">
-					<label><t>Message</t></label>
+		<div>
+			<label>_Message</label>
 			<textarea name="message"/>
 		</div>
 		<div class="form-group captcha">
-					<label><t>Anti-Spam</t></label>
+			<label>_Anti-Spam</label>
 			<input type="text" name="captcha"/>
 			<img alt="Captcha" id="captcha-img"/>
 		</div>
 		<p class="mandatory-message">
-					<t>AllFieldsMandatory</t>
+			_AllFieldsMandatory
 		</p>
 		<button class="thin">
-					<t>Send</t>
+			_Send
 		</button>
+	</div>
 	</form>
 </div>
-	</div>
-</div>
 </vn>

forms/cms/home/home.js

@@ -1,3 +1,4 @@
+(function () {
 
 Hedera.Home = new Class
 ({
@@ -5,7 +6,8 @@ Hedera.Home = new Class
 	
 	,onStartOrderClick: function ()
 	{
-		this.hash.set ({'form': 'ecomerce/catalog'});
+		this.hash.setAll ({form: 'ecomerce/catalog'});
 	}
 });
 
+})();

forms/cms/home/style.css

@@ -6,14 +6,14 @@
 	margin: .5em;
 	max-width: 120em;
 }
-.action-bar button.start-order
+.catalog-actions ._start-order
 {
 	background-color: #EF5350;
 	margin: .7em;
 	padding: .5em;
 	box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.4);
 }
-.action-bar button.start-order:hover
+.catalog-actions ._start-order:hover
 {
 	background-color: #F44336;
 }
@@ -55,8 +55,7 @@
 }
 .new-text a
 {
-	color: blue;
-	text-decoration: underline;
+	color: #2962FF;
 }
 .new-text li
 {

forms/cms/home/ui.xml

@@ -1,38 +1,35 @@
 <vn>
-<div id="title">
-	<h1><t>Home</t></h1>
-</div>
+<h1 id="title">
+	_Home
+</h1>
 <div id="actions" class="catalog-actions">
 	<htk-bar-button
-		class="start-order"
+		id="start-order"
 		icon="new-order"
 		tip="_Start order"
 		on-click="onStartOrderClick"/>
 </div>
-<div id="form" class="home">
-	<div class="column mansonry" id="news-column">
-		<htk-repeater form-id="new">
+<div id="main" class="home">
+	<div class="column mansonry">
+		<htk-repeater>
 			<db-model property="model">
-				<custom>
 				SELECT title, text, image, id FROM news
 					WHERE tag != 'course'
 					ORDER BY priority, created DESC
-				</custom>
 			</db-model>
 			<custom>
 				<div class="masonry-box">
 				<div class="new">
 					<div class="top">
-						<h2><htk-text form="new" column="title"/></h2>
+						<h2>{{title}}</h2>
 						<div class="new-text">
-							<htk-html form="new" column="text"/>
+							<htk-html value="{{text}}"/>
 						</div>
 					</div>
 					<htk-image
 						directory="news"
 						subdir="full"
-						form="new"
-						column="image"
+						value="{{image}}"
 						editable="false"
 						full-dir="full"/>
 				</div>

forms/cms/location/info.xml

@@ -0,0 +1,15 @@
+<div>
+    <h3 class="marker">{{title}}</h3>
+    <p>
+        {{address}}
+    </p>
+    <p>
+        {{postcode}} {{city}}
+    </p>
+    <p>
+        {{province}}
+    </p>
+    <p>
+        {{phone}}
+    </p>
+</div>

forms/cms/location/location.js

@@ -1,5 +1,8 @@
 
+var infoTpl = require (__dirname +'/info.xml');
+
 var gmapsIsLoaded = false;
+var gmapsLoadedCallback;
 
 Hedera.Location = new Class
 ({
@@ -11,6 +14,9 @@ Hedera.Location = new Class
 	{
 		this.gui.loaderPush ();
 		
+		this.infoBuilder = new Vn.Builder();
+		this.infoBuilder.compileString (infoTpl);
+
 		var sql = 'SELECT lat, lng, title, address, postcode, city, province, phone, language FROM location';
 		this.conn.execQuery (sql, this.onLocationsDone.bind (this));
 	
@@ -26,7 +32,7 @@ Hedera.Location = new Class
 
 	,onLocationsDone: function (resultSet)
 	{
-		this.locations = resultSet.fetchResult ();
+		this.locations = resultSet.fetchArray ();
 		this.allLoaded ();
 	}
 
@@ -48,42 +54,22 @@ Hedera.Location = new Class
 			,center: new google.maps.LatLng (46.0, 4.0)
 		};
 
-		var div = this.$('form');
+		var div = this.$.form;
 		var gmap = new google.maps.Map (div, options);
 
-		if (this.locations)
-		while (this.locations.next ())
-			this.createMarker (this.locations, gmap);
+		locations.forEach (function (location) {
+			this.createMarker (location, gmap);
+		}, this);
 	}
 	
 	,createMarker: function (location, gmap)
 	{
-		var div = document.createElement ('div');
-		div.className = 'marker';
-
-		var h = document.createElement ('h3');
-		h.appendChild (document.createTextNode (location.get ('title')));
-		div.appendChild (h);
-
-		var p = document.createElement ('p');
-		p.appendChild (document.createTextNode (location.get ('address')));
-		div.appendChild (p);
-
-		var p = document.createElement ('p');
-		p.appendChild (document.createTextNode (location.get ('postcode') +' '+ location.get ('city')));
-		div.appendChild (p);
-
-		var p = document.createElement ('p');
-		p.appendChild (document.createTextNode (location.get ('province')));
-		div.appendChild (p);
-
-		var p = document.createElement ('p');
-		p.appendChild (document.createTextNode (location.get ('phone')));
-		div.appendChild (p);
+		var scope = this.infoBuilder.load (this.doc, this, null, null, location);
+		var div = scope.getMain ();
 		
 		var lat = new google.maps.LatLng (
-			location.get ('lat'),
-			location.get ('lng')
+			location.lat,
+			location.lng
 		);
 
 		var marker = new google.maps.Marker ({
@@ -100,7 +86,7 @@ Hedera.Location = new Class
 			this.openInfoWindow.bind (this, infoWindow, gmap, marker));
  		
  		if (Vn.Locale.language
-		&& Vn.Locale.language == location.get ('language'))
+		&& Vn.Locale.language == location.language)
  			this.openInfoWindow (infoWindow, gmap, marker);
 	}
 	

forms/cms/location/ui.xml

@@ -1,6 +1,6 @@
 <vn>
-	<div id="title">
-		<h1><t>Location</t></h1>
-	</div>
-	<div id="form" class="location"/>
+	<h1 id="title">
+		_Location
+	</h1>
+	<div id="main" class="location"/>
 </vn>

forms/cms/training/locale/ca.yml

@@ -1 +1,22 @@
-{}
+{
+	 "Configuration": "Configuration"
+	,"Select config": "Select config"
+	,"Reign": "Reign"
+	,"Family": "Family"
+	,"Store": "Store"
+	,"Date": "Date"
+	,"Shelf": "Shelf"
+	,"Name prefix": "Name prefix"
+	,"Limit amount per item": "Limit amount per item"
+	,"Title": "Title"
+	,"Show packing": "Show packing"
+	,"Stack different items": "Stack different items"
+	,"Use ids instead of names": "Use ids instead of names"
+	 
+	,"Show": "Show"
+
+	,"Pallets": "Pallets"
+	 
+	,"No items found, check that all fields are correct":
+		"No items found, check that all fields are correct"
+}

forms/cms/training/style.css

@@ -44,8 +44,7 @@
 }
 .new-text a
 {
-	color: blue;
-	text-decoration: underline;
+	color: #2962FF;
 }
 .new-text li
 {

forms/cms/training/ui.xml

@@ -1,34 +1,31 @@
 <vn>
-<div id="title">
-	<h1><t>Training</t></h1>
-</div>
-<div id="form" class="training">
+<h1 id="title">
+	_Training
+</h1>
+<div id="main" class="training">
 	<div class="column mansonry" id="news-column">
 		<htk-repeater form-id="new">
 			<db-model property="model">
-				<custom>
 				SELECT title, created, text, image, id  FROM news
 					WHERE tag = 'course'
 					ORDER BY priority, created DESC
-				</custom>
 			</db-model>
 			<custom>
 				<div class="masonry-box">
 				<div class="new">
 					<div class="top">
-						<h2><htk-text form="new" column="title"/></h2>
+						<h2>{{title}}</h2>
 						<p class="new-info">
-							<htk-text format="_%a, %e %b %Y" form="new" column="created"/>
+							<htk-text format="_%a, %e %b %Y" lot="new" name="created"/>
 						</p>
 						<div class="new-text">
-							<htk-html form="new" column="text"/>
+							<htk-html value="{{text}}"/>
 						</div>
 					</div>
 					<htk-image
 						directory="news"
 						subdir="full"
-						form="new"
-						column="image"
+						value="{{image}}"
 						editable="false"
 						full-dir="full"/>
 				</div>

forms/cms/why/style.css

@@ -1,24 +1,19 @@
 
-.why
+.why .card
 {
-	padding: 1em;
-}
-.why .box
-{
-	max-width: 40em;
-	margin: 0 auto;
+	max-width: 35em;
 }
 .why ul
 {
 	list-style-type: none;
-	padding: 0 1em;
-	padding-bottom: 1em;
+	padding: 0;
 	max-width: 36em;
 	margin: 0 auto;
 }
 .why li
 {
-	padding: 0.5em 0;
+	padding: 0;
+	margin-bottom: 1em;
 }
 .why img
 {

forms/cms/why/ui.xml

@@ -1,19 +1,19 @@
 <vn>
-<div id="title">
-	<h1><t>AboutCompany</t></h1>
-</div>
-<div id="form" class="why">
-	<div class="box">
+<h1 id="title">
+	_AboutCompany
+</h1>
+<div id="main" class="why">
+	<div class="card">
 		<div class="body">
 			<ul>
-				<li><t>BecauseOurBigCatalog</t></li>
-				<li><t>BecauseThisWeb</t></li>
-				<li><t>BecauseOurShoppingDep</t></li>
-				<li><t>BecauseOrderIsEasy</t></li>
-				<li><t>BecauseOurPlant</t></li>
-				<li><t>BecauseOurSalesDep</t></li>
-				<li><t>BecauseOurWorkShop</t></li>
-				<li><t>BecauseWeHaveWhatYouNeed</t></li>
+				<li>_BecauseOurBigCatalog</li>
+				<li>_BecauseThisWeb</li>
+				<li>_BecauseOurShoppingDep</li>
+				<li>_BecauseOrderIsEasy</li>
+				<li>_BecauseOurPlant</li>
+				<li>_BecauseOurSalesDep</li>
+				<li>_BecauseOurWorkShop</li>
+				<li>_BecauseWeHaveWhatYouNeed</li>
 			</ul>
 			<img src="forms/cms/why/store.png" alt="Store photo"/>
 		</div>

forms/ecomerce/basket/basket.js

@@ -8,7 +8,7 @@ Hedera.Basket = new Class
 		this.close ();
 		this.isOpen = true;
 
-		Hedera.BasketChecker.check (this.conn,
+		Hedera.BasketChecker.check (this.conn, this.hash,
 			this.onBasketCheck.bind (this));
 	}
 	
@@ -20,39 +20,48 @@ Hedera.Basket = new Class
 	
 	,activate: function ()
 	{	
-		this.$('items').setInfo ('i', 'basket_item', 'hedera');
+		this.$.items.setInfo ('i', 'basket_item', 'hedera');
 	}
 
 	,onConfigureClick: function ()
 	{
 		Htk.Toast.showWarning (_('RememberReconfiguringImpact'));
-		this.hash.set ({'form': 'ecomerce/checkout'});
+		this.hash.setAll ({form: 'ecomerce/checkout'});
 	}
 
 	,onCatalogClick: function ()
 	{
-		this.hash.set ({'form': 'ecomerce/catalog'});
+		this.hash.setAll ({form: 'ecomerce/catalog'});
 	}
 
 	,onCheckoutClick: function ()
 	{
-		this.hash.set ({'form': 'ecomerce/confirm'});
+		this.hash.setAll ({form: 'ecomerce/confirm'});
 	}
 
-	,repeaterFunc: function (res, form)
+	,repeaterFunc: function (scope, lot)
 	{
-		res.$('subtotal').value = this.subtotal (form);
+		var $ = lot.$;
+		scope.$.subtotal.value = this.subtotal (lot);
+
+		if ($.available <= 0)
+			text = _('Not available');
+		else
+			text = $.available +' '+ _('availables');
+
+		Vn.Node.setText (scope.$.available, text);
+		Vn.Node.setVisible (scope.$.available, $.available < $.amount);
 	}
 
-	,onDeleteClick: function  (button, form)
+	,onDeleteClick: function  (button)
 	{
 		if (confirm (_('ReallyDelete')))
-			form.deleteRow ();
+			button.lot.deleteRow ();
 	}
 
-	,subtotal: function (form)
+	,subtotal: function (lot)
 	{
-		return form.get ('amount') * form.get ('price');
+		return lot.$.amount * lot.$.price;
 	}
 });
 

forms/ecomerce/basket/style.css

@@ -1,13 +1,4 @@
-.basket
-{
-	padding: 1em;
-}
-.basket .box
-{
-	max-width: 30em;
-	margin: 0 auto;
-	padding: 0 2em;
-}
+
 .basket .form > p
 {
 	margin: 0;
@@ -17,9 +8,10 @@
 }
 .basket .head
 {
-	padding: 1.8em 0;
-	margin: 0;
+	padding: 0;
+	padding-bottom: 2em;
 	border-bottom: 1px solid #DDD;
+	margin-bottom: 1em;
 }
 .basket .head p
 {
@@ -31,13 +23,9 @@
 
 /* Lines */
 
-.basket .lines
-{
-	padding: .8em 0;
-}
 .basket .line
 {
-	padding: 1em 0;
+	padding: .5em 0;
 }
 .basket .line > .delete
 {
@@ -57,7 +45,7 @@
 .basket .line > p
 {
 	margin: .1em 0;
-	margin-left: 7.5em;
+	margin-left: 6em;
 }
 .basket .line .subtotal
 {
@@ -66,12 +54,12 @@
 
 /* Fields */
 
-.basket td.available-exceeded input
+.basket ._available
 {
-	background-color: #FCC;
+	color: red;
+	visibility: hidden;
 }
 .basket .icon > img
 {
 	border-radius: 50%;
 }
-

forms/ecomerce/basket/ui.xml

@@ -1,7 +1,7 @@
 <vn>
-<div id="title">
-	<h1><t>ShoppingBasket</t></h1>
-</div>
+<h1 id="title">
+	_ShoppingBasket
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="ok"
@@ -16,60 +16,55 @@
 		tip="_ConfigureOrder"
 		on-click="onConfigureClick"/>
 </div>
-<div id="form" class="basket">
-	<div class="box">
+<div id="main" class="basket">
+	<div class="card form">
 		<div class="head">
 			<p>
-				<t>Total</t> 
+				_Total 
 				<htk-text format="%.2d€">
 					<db-calc-sum property="param" func="subtotal" model="items"/>
 				</htk-text>
 			</p>
 		</div>
-		<div class="lines">
-			<htk-repeater form-id="iter" renderer="repeaterFunc">
-				<db-model id="items" property="model" updatable="true">
-					<custom>
-						SELECT i.id, i.amount, i.price, a.Article, a.Categoria, 
-						a.Medida, a.Tallos, a.Color, o.Abreviatura, a.Foto
-							FROM basket_item i
-								JOIN vn2008.Articles a ON a.Id_Article = i.item_id
-								LEFT JOIN vn2008.Origen o ON a.id_origen = o.id
-					</custom>
+		<htk-repeater renderer="repeaterFunc">
+			<db-model id="items" property="model" updatable="true" result-index="1">
+				SET @a = -8;
+				SELECT r.id, r.amount, r.price, @a := @a + 4 available,
+						i.name, i.size, i.category, i.image
+					FROM basket_item r
+						JOIN vn.item i ON i.id = r.item_id
 			</db-model>
 			<custom>
 				<div class="line">
 					<htk-button
-							form="iter"
-							column="ticket_id"
+						lot="iter"
 						class="delete"
 						tip="_Remove"
 						icon="delete"
 						on-click="onDeleteClick"/>
 					<htk-image
-							form="iter"
-							column="Foto"
+						value="{{image}}"
 						class="photo"
 						directory="catalog"
 						subdir="200x200"
 						full-dir="900x900"/>
 					<p class="concept">
-							<htk-text form="iter" column="Article"/> 
-							<htk-text form="iter" column="Medida"/> 
-							<htk-text form="iter" column="Categoria"/>
+						{{name}} {{size}} {{category}}
 					</p>
 					<p class="amount">
-							<htk-text form="iter" column="amount"/> x
-							<htk-text form="iter" column="price" format="%.2d€"/>
+						<span id="row">{{amount}}</span> x
+						<htk-text lot="iter" name="price" format="%.2d€"/>
 						<span class="subtotal">
 							<htk-text id="subtotal" format="%.2d€"/>
 						</span>
 					</p>
+					<span id="available">
+						{{available}} <span>_availables</span> 
+					</span>
 					<div class="clear"/>
 				</div>
 			</custom>
 		</htk-repeater>
 	</div>
 </div>
-</div>
 </vn>

forms/ecomerce/catalog/catalog.js

@@ -1,3 +1,25 @@
+(function () {
+
+var maxFilters = 5;
+
+var View = {
+	LIST: 0,
+	GRID: 1
+};
+
+var orderBy = [
+	{way: 'DESC', id: 'relevancy', name: 'Relevancy'},
+	{way: 'ASC', id: 'name', name: 'Name'},
+	{way: 'ASC', id: 'price', name: 'Lower price'},
+	{way: 'DESC', id: 'price', name: 'Higher price'},
+	{way: 'ASC', id: 'available', name: 'Available'},
+	{way: 'ASC', id: 'size', name: 'Lower size'},
+	{way: 'DESC', id: 'size', name: 'Higher size'},
+	{way: 'ASC', id: 'color', name: 'Color'},
+	{way: 'ASC', id: 'producer', name: 'Producer'},
+	{way: 'ASC', id: 'origin', name: 'Origin'},
+	{way: 'ASC', id: 'category', name: 'Category'}
+];
 
 Hedera.Catalog = new Class
 ({
@@ -12,7 +34,7 @@ Hedera.Catalog = new Class
 	
 		if (!localStorage.getItem ('hederaGuest'))
 		{		
-			Hedera.BasketChecker.check (this.conn,
+			Hedera.BasketChecker.check (this.conn, this.hash,
 				this.onBasketCheck.bind (this));
 		}
 		else
@@ -30,183 +52,351 @@ Hedera.Catalog = new Class
 	
 	,activate: function ()
 	{
-		document.body.appendChild (this.$('right-panel'));
-	
-		this.$('items-model').setInfo ('a', 'Articles', 'vn2008', ['item_id']);
+		this.$.items.setInfo ('i', 'item', 'vn', ['id']);
+		document.body.appendChild (this.$.rightPanel);
 	
 		if (localStorage.getItem ('hederaView'))
 			this.setView (parseInt (localStorage.getItem ('hederaView')));
 		else
-			this.setView (Hedera.Catalog.View.GRID);
+			this.setView (View.GRID);
+
+		this.$.orderBy.model = new Vn.Model ({
+			data: orderBy
+		});
+
+		this.onCategoryChange ();
+		this.refreshTitle ();
+		this.onParamsChange ();
 	}
 
 	,deactivate: function ()
 	{
 		this.hideMenu ();
-		this.gui.$('top-bar').style.backgroundColor = '';
-		Vn.Node.remove (this.$('right-panel'));
+		this.gui.$.navbar.style.backgroundColor = '';
+		Vn.Node.remove (this.$.rightPanel);
 	}
 
 	,setView: function (view)
 	{
-		if (view === Hedera.Catalog.View.GRID)
+		if (view === View.GRID)
 		{
-			this.$('view-button').setProperties ({
+			this.$.viewButton.setProperties ({
 				icon: 'view-list',
 				tip: _('List view')
 			});
-			this.view = Hedera.Catalog.View.GRID;
 			var className = 'grid-view';
 		}
 		else
 		{
-			this.$('view-button').setProperties ({
+			this.$.viewButton.setProperties ({
 				icon: 'view-grid',
 				tip: _('Grid view')
 			});
-			this.view = Hedera.Catalog.View.LIST;
 			var className = 'list-view';
 		}
 		
-		var node = this.$('grid-view').node;
+		this.view = view;
+		var node = this.$.gridView.node;
 		node.className = className;
 		localStorage.setItem ('hederaView', this.view);
 	}
 	
 	,onSwitchViewClick: function ()
 	{
-		this.setView (this.view === Hedera.Catalog.View.LIST ?
-			Hedera.Catalog.View.GRID : Hedera.Catalog.View.LIST);
+		this.setView (this.view === View.GRID ?
+			View.LIST : View.GRID);
 	}
 	
 	,onBasketReady: function (form)
 	{
-		if (form.get ('method') != 'PICKUP')
-			Vn.Node.setText (this.$('method'), _('Agency'));
+		if (form.$.method != 'PICKUP')
+			Vn.Node.setText (this.$.method, _('Agency'));
 		else
-			Vn.Node.setText (this.$('method'), _('Warehouse'));
+			Vn.Node.setText (this.$.method, _('Store'));
 	}
 	
-	,onItemsChange: function (model, status)
+	,onOrderChange: function (combo)
 	{
-		if (status !== Db.Model.Status.CLEAN)
-			this.$('order').style.display = 'block';
-		else
-			this.$('order').style.display = 'none';
-	}
-	
-	,onOrderChange: function (e)
-	{
-		var value = e.target.value;	
-		var sortField = value.substr (2);
-		var sortWay = value.charAt (0) === 'A' ?
+		var sortField = combo.$.id;
+		var sortWay = combo.$.way === 'ASC' ?
 			Db.Model.SortWay.ASC : Db.Model.SortWay.DESC;
 		
 		if (sortField)
-			this.$('items-model').sortByName (sortField, sortWay);
+			this.$.items.sort (sortField, sortWay);
 		
 		this.hideMenu ();
 	}
 
-	,onFilterChange: function (param, newValue)
+	,onParamsChange: function ()
 	{
-		if (newValue)
+		var params = this.params.$;
+		var shouldRefresh = params.search ||
+			params.category && params.type;
+			
+		Vn.Node.removeChilds (this.$.suggestedFilters);
+
+		if (shouldRefresh)
+		{
+			this.$.items.query = this.buildQuery ('CALL catalogGetItems');
+			this.$.items.refresh ();
+
+			var nTags = maxFilters - this.nFilters;
+
+			if (nTags > 0)
+			{
+				var tagsQuery = this.buildQuery (
+					'CALL catalogGetTags (#nTags)', {nTags: nTags});
+				this.conn.execQuery (tagsQuery, this.onTagsReady.bind (this));
+			}
+
 			this.hideMenu ();
 		}
-	
-	,realmRenderer: function (builder, form)
-	{
-		var link = builder.$('link');
-		link.href = this.hash.make ({
-			'form': this.hash.get ('form'),
-			'realm': form.get ('id')
-		});
-		
-		var img = builder.$('image');
-		img.src = 'image/family/light/'+ form.get ('id') +'.svg';
-		img.title = form.get ('name');
-		img.alt = img.title;
-	}
-	
-	,onRealmChange: function (param, newValue)
-	{
-		if (newValue)
-		{
-			this.$('filters').style.display = 'block';
-			this.$('realm-msg').style.display = 'none';
-		}
 		else
-		{
-			this.$('filters').style.display = 'none';
-			this.$('realm-msg').style.display = 'block';
+			this.$.items.clean ();
+
+		this.showFilters (params.search || params.category);
 	}
 	
+	,showFilters: function (show)
+	{
+		this.$.filters.style.display = show ? 'block' : 'none';
+		this.$.categoryMsg.style.display = show ? 'none' : 'block';
+	}
+
+	,onRemoveFiltersClick: function ()
+	{
+		this.params.$ = {};
+		this.tagFilter = {};
+	}
+
+	,filters: {}
+	,nFilters: 0
+	
+	,buildQuery: function (query, params, excludeTag)
+	{
+		var query = new Sql.MultiStmt ({
+			stmts: [
+				this.$.preQuery,
+				new Sql.String ({query: query}),
+				this.$.postQuery
+			]
+		});
+		var qParams = {
+			joins: this.buildTagFilter (excludeTag),
+			filter: this.buildMainFilter ()
+		};
+		Object.assign (qParams, params);
+		return this.conn.renderStmt (query, qParams)
+	}
+
+	,buildMainFilter: function ()
+	{
+		var filterSql = this.$.filter.render (this.params.$);
+		return new Sql.String ({query: filterSql});
+	}
+
+	,buildTagFilter: function (excludeTag)
+	{
+		var Type = Sql.Operation.Type;
+
+		var join = new Sql.Join ({
+			target: new Sql.Table ({
+				schema: 'vn',
+				name: 'item',
+				alias: 'i'
+			})
+		});
+
+		join.push (new Sql.JoinItem ({
+			target: new Sql.Table ({
+				schema: 'vn',
+				name: 'itemType',
+				alias: 't'
+			}),
+			condition: new Sql.Operation ({
+				type: Type.EQUAL,
+				exprs: [
+					new Sql.Field ({
+						target: 't',
+						name: 'id'
+					}),
+					new Sql.Field ({
+						target: 'i',
+						name: 'typeFk'
+					})
+				]
+			})
+		}));
+
+		var i = -1;
+
+		for (var tagId in this.filters)
+		{
+			var tagId = parseInt (tagId);
+			var tagValue = this.filters[tagId].field.value;
+
+			if (tagId === excludeTag)
+				continue;
+	
+			i++;
+			var tAlias = 'it'+ i;
+
+			var joinItem = new Sql.JoinItem ({
+				target: new Sql.Table ({
+					schema: 'vn',
+					name: 'itemTag',
+					alias: tAlias
+				}),
+				condition: new Sql.Operation ({
+					type: Type.AND
+				})
+			});
+			join.push (joinItem);
+
+			joinItem.condition.exprs = [
+				new Sql.Operation ({
+					type: Type.EQUAL,
+					exprs: [
+						new Sql.Field ({
+							target: tAlias,
+							name: 'itemFk'
+						}),
+						new Sql.Field ({
+							target: 'i',
+							name: 'id'
+						})
+					]
+				}),
+				new Sql.Operation ({
+					type: Type.EQUAL,
+					exprs: [
+						new Sql.Field ({
+							target: tAlias,
+							name: 'tagFk'
+						}),
+						new Sql.Value ({
+							value: tagId
+						})
+					]
+				}),
+				new Sql.Operation ({
+					type: Type.EQUAL,
+					exprs: [
+						new Sql.Field ({
+							target: tAlias,
+							name: 'value'
+						}),
+						new Sql.Value ({
+							value: tagValue
+						})
+					]
+				})
+			];
+		}
+
+		return join;
+	}
+	
+	,onTagsReady: function (resultSet)
+	{
+		var tags = resultSet.results[2].data;
+
+		tags.forEach (function (tag) {
+			if (this.filters[tag.id] !== undefined)
+				return;
+
+			var query = this.buildQuery (
+				'CALL catalogGetTagValues (#tag)', {tag: tag.id}, tag.id);
+
+			var filter = this.createElement ('div');
+			this.$.suggestedFilters.appendChild (filter);
+
+			var label = this.createElement ('label');
+			label.appendChild (this.createTextNode (tag.name));
+			filter.appendChild (label);
+
+			var combo = new Htk.Combo ({
+				valueField: 'value',
+				showField: 'value'
+			});
+			filter.appendChild (combo.node);
+
+			var model = new Db.Model ({
+				autoLoad: false,
+				resultIndex: 2,
+				query: query,
+				conn: this.conn
+			});
+			combo.model = model;
+
+			var filterData = {
+				filter: filter,
+				tagId: tag.id,
+				field: combo,
+				model: model
+			};
+			combo.on ('changed',
+				this.onComboChange.bind (this, filterData), this);
+		}, this);
+	}
+
+	,onComboChange: function (filterData, _, value)
+	{
+		var filter = filterData.filter;
+		var tagId = filterData.tagId;
+
+		if (value == null)
+		{
+			this.$.currentFilters.removeChild (filter);
+			delete this.filters[tagId];
+			this.nFilters--;
+		}
+		else if (this.filters[tagId] === undefined)
+		{
+			this.nFilters++;
+			this.filters[tagId] = filterData;
+			this.$.suggestedFilters.removeChild (filter);
+			this.$.currentFilters.appendChild (filter);
+		}
+
+		for (var tid in this.filters)
+		if (parseInt (tid) !== tagId)
+		{
+			var query = this.buildQuery (
+				'CALL catalogGetTagValues (#tag)', {tag: tid}, tid);
+			this.filters[tid].model.query = query;
+		}
+
+		this.onParamsChange ();
+	}
+
+	,onCategoryChange: function ()
+	{
 		this.refreshTitleColor ();
-		this.refreshFilter (newValue, undefined);
-	}
-
-	,onTypeChange: function (param, newValue)
-	{
-		this.onFilterChange (param, newValue);
-		this.refreshTitle ();
-		this.refreshFilter (undefined, newValue);
-	}
-	
-	,refreshFilter: function (realm, type)
-	{
-		var batch = this.$('filter-batch');
-		batch.block ();
-		this.$('realm-value').value = realm;
-		this.$('type-value').value = type;
-		this.$('search').value = undefined;
-		this.$('color').value = undefined;
-		this.$('origin').value = undefined;
-		this.$('category').value = undefined;
-		this.$('producer').value = undefined;
-		batch.unblock ();
-		batch.changed ();
 	}
 
 	,refreshTitleColor: function ()
 	{
-		var realms = this.$('realms-model');
-
-		if (!realms.ready)
-			return;
-
+		var categories = this.$.categories;
+		var category = this.params.$.category;
 		var color = null;
-		var realm = this.$('realm').value;
 
-		if (realm)
+		if (category)
 		{
-			var row = realms.search ('id', realm);
+			var row = categories.search ('id', category);
 
 			if (row != -1)
-				color = '#'+ realms.get (row, 'color');
+				color = '#'+ categories.get (row, 'color');
 		}
 
-		this.gui.$('top-bar').style.backgroundColor = color;
+		this.gui.$.navbar.style.backgroundColor = color;
 	}
 	
 	,refreshTitle: function ()
 	{
-		var types = this.$('types-model');
-		
-		if (!types.ready)
-			return;
-		
-		var title = _('Catalog');
-		var type = this.$('type').value;
-		
-		if (type)
-		{
-			var row = types.search ('tipo_id', type);
-
-			if (row != -1)
-				title = types.get (row, 'name');
-		}
-
-		Vn.Node.setText (this.$('title-text'), title);
+		var type = this.$.type.$.name;
+		var title = type ? type : _('Catalog');
+		Vn.Node.setText (this.$.title, title);
 	}
 
 	,onRightPanelClick: function (event)
@@ -219,7 +409,7 @@ Hedera.Catalog = new Class
 		this._menuShown = true;
 		event.stopPropagation ();
 		this.gui.showBackground ();
-		Vn.Node.addClass (this.$('right-panel'), 'show');
+		Vn.Node.addClass (this.$.rightPanel, 'show');
 		this.hideMenuCallback = this.hideMenu.bind (this);
 		document.addEventListener ('click', this.hideMenuCallback);
 	}
@@ -230,7 +420,7 @@ Hedera.Catalog = new Class
 			return;
 
 		this.gui.hideBackground ();
-		Vn.Node.removeClass (this.$('right-panel'), 'show');
+		Vn.Node.removeClass (this.$.rightPanel, 'show');
 		document.removeEventListener ('click', this.hideMenuCallback);
 		this.hideMenuCallback = null;
 	}
@@ -251,7 +441,7 @@ Hedera.Catalog = new Class
 		if (this.isGuest ())
 			return;
 
-		this.hash.set ({'form': 'ecomerce/basket'});
+		this.hash.$ = {form: 'ecomerce/basket'};
 	}
 	
 	,onConfigureClick: function ()
@@ -259,41 +449,38 @@ Hedera.Catalog = new Class
 		if (this.isGuest ())
 			return;
 
-		this.hash.set ({'form': 'ecomerce/checkout'});
+		this.hash.$ = {form: 'ecomerce/checkout'};
 	}
 
-	,onAddItemClick: function (button, form)
+	,onAddItemClick: function (button)
 	{
 		if (this.isGuest ())
 			return;
 
 		this.onEraseClick ();
-		this.$('card').row = form.row;
-		this.$('card-item').value = form.get ('item_id');
-		this.$('card-popup').show (button.node);
+		var lot = button.lot;
+		this.$.card.row = lot.row;
+		this.$.cardLot.assign ({item: lot.$.id});
+		this.$.cardPopup.show ();
 	}
 	
-	,onAddLotClick: function (column, value, row, button)
+	,onAddLotClick: function (column, value, rowIndex)
 	{
-		var model = this.$('item-lots');
-		var grouping = model.get (row, 'grouping');
-		var warehouse = model.get (row, 'warehouse_id');
-		var available = model.get (row, 'available');
-
-		var lotAmount = this.items[warehouse];
+		var row = this.$.itemLots.getObject (rowIndex);
+		var lotAmount = this.items[row.warehouse_id];
 
 		if (lotAmount === undefined)
 			lotAmount = 0;
 		
-		if (lotAmount < available)
+		if (lotAmount < row.available)
 		{
-			var newAmount = lotAmount + grouping;
+			var newAmount = lotAmount + row.grouping;
 		
-			if (newAmount > available)
-				newAmount = available;
+			if (newAmount > row.available)
+				newAmount = row.available;
 		
-			this.items[warehouse] = newAmount;
-			this.$('amount').value += newAmount - lotAmount;
+			this.items[row.warehouse_id] = newAmount;
+			this.$.amount.value += newAmount - lotAmount;
 		}
 		else
 			Htk.Toast.showError (_('NoMoreAmountAvailable'));
@@ -302,8 +489,7 @@ Hedera.Catalog = new Class
 	,onConfirmClick: function ()
 	{
 		var sql = '';
-		var batch = new Sql.Batch ();
-		var query = new Sql.String ({query: 'CALL basketAddItem (#warehouse, #item, #amount);'});
+		var query = 'CALL basketAddItem (#warehouse, #item, #amount);';
 		var amountSum = 0;
 
 		for (var warehouse in this.items)
@@ -311,227 +497,38 @@ Hedera.Catalog = new Class
 			var amount = this.items[warehouse];
 			amountSum += amount;
 			
-			batch.addValue ('warehouse', warehouse);
-			batch.addValue ('item', this.$('card-item').value);
-			batch.addValue ('amount', amount);
-			sql += query.render (batch);
+			var params = {
+				item: this.$.cardLot.$.item,
+				warehouse: parseInt (warehouse),
+				amount: amount
+			};
+			sql += this.conn.renderQuery (query, params);
 		}
 
 		if (amountSum > 0)
 		{
 			this.conn.execQuery (sql);
 
-			var itemName = this.$('card').get ('Article');
+			var itemName = this.$.card.$.name;
 			Htk.Toast.showMessage (
-				sprintf (_('Added%dOf%s'), amountSum, itemName));
+				Vn.Value.sprintf (_('Added%dOf%s'), amountSum, itemName));
 		}
 
-		this.$('card-popup').hide ();
+		this.$.cardPopup.hide ();
 	}
 	
 	,onEraseClick: function ()
 	{
-		this.$('amount').value = 0;
+		this.$.amount.value = 0;
 		this.items = {};
 	}
 	
 	,onPopupClose: function ()
 	{
 		this.onEraseClick ();
-		this.$('card').row = -1;
-		this.$('card-item').value = undefined;
-	}
-	
-	,onStatusChange: function (model)
-	{
-		this.$('card-popup').reset ();
-	}
-});
-
-Hedera.Catalog.extend
-({
-	View: {
-		LIST: 0,
-		GRID: 1
-	}
-});
-
-Vn.Filter = new Class
-({
-	Extends: Htk.Field
-	,Tag: 'vn-filter'
-	,Child: 'model'
-	,Properties:
-	{
-		model:
-		{
-			type: Db.Model
-			,set: function (x)
-			{
-				x.batch = this._batch;
-				this._model = x;
-				this._select.model = x;
-			}
-			,get: function ()
-			{
-				return this._model;
-			}
-		},
-		placeholder:
-		{
-			type: String
-			,set: function (x)
-			{
-				this._select.placeholder = x;
-				this._placeholder = x;
-			}
-			,get: function ()
-			{
-				return this._placeholder;
-			}
-		},
-		filter:
-		{
-			type: Sql.Filter
-			,set: function (x)
-			{
-				this._filter = x;
-				this._batch.addObject ('filter', x);
-			}
-			,get: function ()
-			{
-				return this._filter;
-			}
-		},
-	}
-	
-	,_valueColumnIndex: 0
-	,_showColumnIndex: 1
-	
-	,initialize: function (props)
-	{
-		var node = this.createRoot ('div');
-		node.className = 'vn-filter';
-		
-		this._select = new Htk.Select ();
-		this._select.on ('mousedown', this._onMouseDown, this);
-		this._select.on ('changed', this._onChange, this);
-		this._select.on ('ready', this._onReady, this);
-		this.node.appendChild (this._select.node);
-		
-		this._ul = this.createElement ('ul');
-		this.node.appendChild (this._ul);
-		
-		this._batch = new Sql.Batch ();
-		this.parent (props);
-	}
-	
-	,_onMouseDown: function (e)
-	{
-		if (this._model && this._model.status === Db.Model.Status.CLEAN)
-			this._model.refresh ();
-	}
-	
-	,_onCloseClick: function (li)
-	{
-		this._removeSelectionNode ();
-		this._changeValue (undefined);
-	}
-	
-	,_removeSelectionNode: function ()
-	{
-		if (this._lastLi)
-		{
-			Vn.Node.remove (this._lastLi);
-			this._lastLi = null;
-			this._label = null;
-		}		
-	}
-	
-	,_onChange: function ()
-	{
-		if (this._select.value === null
-		|| this._select.value === undefined)
-			return;
-			
-		this._realSetValue (this._select.value);
-	}
-	
-	,_onReady: function ()
-	{
-		if (this._emptyLabel)
-			this._refreshLabel ();
-	}
-	
-	,_changeValue: function (newValue)
-	{
-		this._batch.block ();
-		this.value = newValue;
-		this._batch.unblock ();
-	}
-	
-	,_onTimeout: function ()
-	{
-		this._select.value = null;
-	}
-	
-	,putValue: function (value)
-	{
-		this._onMouseDown ();
-		this._realSetValue (value);
-	}
-		
-	,_realSetValue: function (value)
-	{
-		this._removeSelectionNode ();
-
-		if (value === null || value === undefined)
-			return;
-
-		var li = this._lastLi = this.createElement ('li');
-		this._ul.appendChild (li);
-			
-		var button = this.createElement ('button');
-		button.addEventListener ('click',
-			this._onCloseClick.bind (this, li));
-		li.appendChild (button);
-		
-		var icon = new Htk.Icon ({
-			icon: 'close',
-			alt: _('Close')
-		});
-		button.appendChild (icon.node);
-
-		var text = this._label = this.createTextNode ('');
-		li.appendChild (text);
-		
-		setTimeout (this._onTimeout.bind (this));
-
-		this._changeValue (value);
-		this._refreshLabel ();
-	}
-	
-	,_refreshLabel: function ()
-	{
-		if (!this._label)
-			return;
-	
-		var row = -1;
-
-		if (this._model.ready)
-			row = this._model.searchByIndex (this._valueColumnIndex, this._value);
-
-		if (row != -1)
-		{
-			var label = this._model.getByIndex (row, this._showColumnIndex);
-			this._label.nodeValue = label;
-			this._emptyLabel = false;
-		}
-		else
-		{
-			this._emptyLabel = true;
-			this._label.nodeValue = _('Loading...');
-		}
+		this.$.card.row = -1;
+		this.$.cardLot.assign ({item: undefined});
 	}
 });
 
+})();

forms/ecomerce/catalog/style.css

@@ -52,89 +52,38 @@
 {
 	padding: 1em 1.8em;
 }
-.right-panel .filters,
-.right-panel .order
-{
-	display: none;
-}
-.right-panel .realm-msg
-{
-	margin-top: 1em;
-/*	box-shadow: 0 0 .3em rgba(1, 1, 1, .5);
-	border-radius: 50%;
-	overflow: hidden;*/
-}
-.right-panel .realm-msg > h1
-{
-	font-weight: normal;
-	text-align: center;
-	padding: 2.5em 0;
-	color: #777;
-/*	background-color: #009688;
-	color: white;*/
-}
-.right-panel h2
-{
-	font-weight: normal;
-	padding: .4em 0;
-	color: #777;
-	font-size: 1.1em;
-}
-.right-panel .realms
+.right-panel .categories
 {
 	width: 95%;
 	margin: .2em auto;
 }
-.right-panel .realms a
+.right-panel .categories a
 {
 	display: block;
 	float: left;
 	width: 33.33%;
-}
-.right-panel .realms a:hover
-{
-	background-color: rgba(1, 1, 1, .05);
 	border-radius: .1em;
 }
-.right-panel .realms a > img
+.right-panel .categories a > img
 {
 	display: block;
 	padding: 0;
 	width: 100%;
 }
-.right-panel .vn-filter,
-.right-panel select
+.right-panel .category-msg
 {
-	margin: 0 auto;
-	margin-bottom: .7em;
-	width: 90%;
-	display: block;
+	margin-top: 1em;
 }
-.vn-filter > ul
+.right-panel .category-msg > h1
 {
-	margin: 0;
-	list-style-type: none;
-	text-align: left;
-	color: #666;
-	padding-left: .8em;
-}
-.vn-filter li
-{
-	margin: 0;
-	margin-top: .3em;
-	line-height: 2em;
-	max-width: 90%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-.vn-filter li > button
-{
-	vertical-align: middle;
+	font-weight: normal;
 	text-align: center;
-	padding: .2em;
-	margin: 0;
-	margin-right: .2em;
+	padding: 2.5em 0;
+	color: #777;
+}
+.right-panel .filters
+{
+	display: none;
 }
 .right-panel .filters > button
 {
@@ -142,6 +91,13 @@
 	margin: 0 auto;
 	margin-top: 1em;
 }
+.right-panel .filters label
+{
+	font-size: .9em;
+	color: #666;
+	padding-top: .7em;
+	display: block;
+}
 
 /* Items */
 
@@ -189,7 +145,6 @@
 .item-info .producer
 {
 	text-transform: uppercase;
-	font-weight: bold;
 	padding: 0;
 	padding-bottom: .2em;
 	font-size: 1em;
@@ -211,11 +166,6 @@
 
 /* Card */
 
-
-.card-popup
-{
-	overflow: auto;
-}
 .item-card
 {
 	font-size: .9em;
@@ -290,15 +240,15 @@
 	position: relative;
 	width: 100%;
 	margin: 0;
-	height: 5.5em;
+	height: 6.5em;
 	overflow: visible;
 	border-bottom: 1px solid #DDD;
 }
 .list-view .item-box > .htk-image
 {
 	margin: 1em;
-	width: 3.5em;
-	height: 3.5em;
+	width: 4.5em;
+	height: 4.5em;
 	float: left;
 	overflow: hidden;
 }
@@ -309,7 +259,7 @@
 .list-view .item-info
 {
 	position: absolute;
-	left: 5.5em;
+	left: 6.5em;
 	right: 0;
 	top: 0;
 	bottom: 0;

forms/ecomerce/catalog/ui.xml

@@ -1,129 +1,71 @@
 <vn>
 <vn-group>
-	<vn-param id="card-item"/>
-	<vn-param id="realm" on-changed="onRealmChange"/>
-	<vn-param id="type" on-changed="onTypeChange"/>
-	<vn-param id="search" on-changed="onFilterChange"/>
-	<vn-param id="color" on-changed="onFilterChange"/>
-	<vn-param id="origin" on-changed="onFilterChange"/>
-	<vn-param id="category" on-changed="onFilterChange"/>
-	<vn-param id="producer" on-changed="onFilterChange"/>
-	<vn-hash-param key="realm" param="realm"/>
-	<vn-hash-param key="type" param="type"/>
+	<vn-lot-query id="params" on-change="onParamsChange">
+		<vn-spec name="search" type="String"/>
+		<vn-spec name="itemId" type="Number"/>
+		<vn-spec name="category" type="Number"/>
+		<vn-spec name="type" type="Number"/>
+	</vn-lot-query>
 	<sql-filter type="AND" id="filter">
-		<sql-filter-item type="EQUAL" primary="false" id="op-realm">
-			<sql-field name="reino_id" target="t"/>
-			<sql-value id="realm-value"/>
-		</sql-filter-item>
-		<sql-filter-item type="EQUAL" id="op-type">
-			<sql-field name="tipo_id" target="a"/>
-			<sql-value id="type-value"/>
-		</sql-filter-item>
-		<sql-filter-item type="LIKE" id="op-name">
-			<sql-field name="Article"/>
-			<sql-search-tags param="search"/>
-		</sql-filter-item>
-		<sql-filter-item type="EQUAL" id="op-color">
-			<sql-field name="Color"/>
-			<sql-value param="color"/>
-		</sql-filter-item>
-		<sql-filter-item type="EQUAL" id="op-origin">
-			<sql-field name="id_origen"/>
-			<sql-value param="origin"/>
-		</sql-filter-item>
-		<sql-filter-item type="EQUAL" id="op-category">
-			<sql-field name="Categoria"/>
-			<sql-value param="category"/>
-		</sql-filter-item>
-		<sql-filter-item type="EQUAL" id="op-producer">
-			<sql-field name="producer_id"/>
-			<sql-value param="producer"/>
-		</sql-filter-item>
+		<sql-filter-item type="EQUAL"
+			target="i" field="typeFk"
+			param="type"/>
+		<sql-filter type="OR">
+			<sql-filter-item type="LIKE"
+				target="i" field="name"
+				param="search"/>
+			<sql-filter-item type="EQUAL"
+				target="i" field="id"
+				param="search"/>
+			<sql-filter-item type="EQUAL"
+				target="i" field="id"
+				param="itemId"/>
 		</sql-filter>
-	<db-form id="basket" on-ready="onBasketReady">
-		<db-model property="model">
-			<custom>
+	</sql-filter>
+	<sql-string id="pre-query">
+		DROP TEMPORARY TABLE IF EXISTS tItems;
+		CREATE TEMPORARY TABLE tItems
+			(INDEX (id))
+			ENGINE = MEMORY
+			SELECT i.id
+				FROM #joins
+				WHERE #filter
+	</sql-string>
+	<sql-string id="post-query">
+		DROP TEMPORARY TABLE tItems
+	</sql-string>
+	<db-model
+		id="items"
+		result-index="2"
+		auto-load="false">
+	</db-model>
+	<db-lot id="basket" on-ready="onBasketReady">
 		SELECT o.id, o.date_send, ag.description agency, v.code method
 			FROM basket o
-						JOIN vn2008.Agencias ag ON ag.Id_Agencia = o.agency_id
+				JOIN vn.agencyMode ag ON ag.id = o.agency_id
 				JOIN vn2008.Vistas v ON v.vista_id = o.delivery_method_id
-			</custom>
-		</db-model>
-	</db-form>
-	<db-query id="basket-lines">
-		<custom>
-			SELECT item_id, warehouse_id, SUM(amount) amount
-				FROM basket_item
-				GROUP BY warehouse_id
-		</custom>
-	</db-query>
-	<db-model
-		id="items-model"
-		result-index="2"
-		on-status-changed="onItemsChange">
-		<custom>
-			CREATE TEMPORARY TABLE tmp.bionic_calc
-			(INDEX (item_id))
-			ENGINE=MEMORY
-			SELECT a.Id_Article item_id FROM vn2008.Articles a
-				JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
-				WHERE #filter;
-			CALL bionic_calc ();
-			SELECT a.Id_Article item_id, a.description, b.available, b.price,
-			b.producer, a.Foto, a.Article, a.Categoria, a.Medida,
-			IF(a.Tallos > 1, a.Tallos, NULL) Tallos, c.name color
-				FROM tmp.bionic_item b
-					JOIN vn2008.Articles a ON a.Id_Article = b.item_id
-		    		LEFT JOIN vn2008.producer p ON p.producer_id = a.producer_id
-					LEFT JOIN vn.inkL10n c ON c.id = a.Color
-					LEFT JOIN vn.originL10n o ON o.id = a.id_origen
-				WHERE b.available > 0
-				ORDER BY a.relevancy DESC, a.Article, a.Medida
-				LIMIT 400;
-		</custom>
-		<sql-batch property="batch" id="filter-batch">
-			<custom>
-				<item name="filter" object="filter"/>
-			</custom>
-		</sql-batch>
-	</db-model>
-	<db-form id="card" model="items-model"/>
-	<sql-batch id="card-batch">
-		<custom>
-			<item name="item" param="card-item"/>
-		</custom>
-	</sql-batch>
-	<db-form id="card-extend">
-		<db-model
-			property="model"
-			batch="card-batch"
-			on-status-changed-after="onStatusChange">
-			<custom>
-				SELECT a.description, o.name origin
-					FROM vn2008.Articles a
-						LEFT JOIN vn.originL10n o ON o.id = a.id_origen
-					WHERE a.Id_Article = #item
-			</custom>
-		</db-model>
-	</db-form>
+	</db-lot>
+	<db-lot id="card-extend" lot="card-lot">
+		SELECT i.description
+			FROM vn.item i WHERE i.id = #item
+	</db-lot>
 	<db-model
 		id="item-lots"
 		result-index="1"
-		on-status-changed-after="onStatusChange"
-		batch="card-batch">
-		<custom>
+		lot="card-lot">
 		CALL bionic_from_item (#item);
 		SELECT p.warehouse_id, w.name warehouse, p.grouping, p.price, p.rate, l.available
 			FROM tmp.bionic_lot l
 				JOIN tmp.bionic_price p ON p.warehouse_id = l.warehouse_id
 				JOIN vn2008.warehouse w ON w.id = p.warehouse_id
 			ORDER BY warehouse_id, grouping;
-		</custom>
 	</db-model>
+	<vn-lot id="card-lot"/>
+	<vn-param lot="params" name="category" on-changed="onCategoryChange"/>
 </vn-group>
-<div id="title">
-	<h1 id="title-text"><t>Catalog</t></h1>
-</div>
+<h1 id="title">
+	_Catalog
+</h1>
 <div id="actions" class="catalog-actions">
 	<button class="menu" on-click="onShowMenuClick">
 		<img src="image/icon/dark/menu.svg" alt="_Menu"/>
@@ -137,52 +79,46 @@
 		tip="_Switch view"
 		on-click="onSwitchViewClick"/>
 	<htk-search-entry
-		param="search"/>
+		lot="params"
+		name="search"/>
 </div>
-<div id="form" class="catalog">
-	<div id="main" class="main">
+<div id="main" class="catalog">
 	<htk-repeater
 		id="grid-view"
 		empty-message="_Choose filter from right menu"
 		form-id="item"
-		model="items-model">
+		model="items">
 		<custom>
-		<div class="box item-box">
+		<div class="card item-box">
 			<htk-image
 				directory="catalog"
 				subdir="200x200"
-				form="item"
-				column="Foto"
+				value="{{image}}"
 				full-dir="900x900"/>
 			<div class="item-info">
 				<htk-button
-					form="item"
-					column="id"
+					lot="item"
+					value="{{id}}"
 					tip="_AddToBasket"
 					icon="add"
 					on-click="onAddItemClick"
 					class="add-button"/>
-				<h2>
-					<htk-text form="item" column="Article"/>
-				</h2>
+				<h2>{{name}}</h2>
 				<p class="producer">
-					<htk-text form="item" column="producer"/>
+					{{producer}}
 				</p>
 				<p>
-					<t>Size</t> <htk-text form="item" column="Medida"/>, 
-					<t>Category</t> <htk-text form="item" column="Categoria"/>
+					{{tag1}} {{val1}}, {{tag2}} {{val2}}
 				</p>
-				<p class="color">
-					<t>Color</t> <htk-text form="item" column="color"/>
-					<htk-text form="item" column="Tallos" format="_, %.0d Units"/>
+				<p>
+					{{tag3}} {{val3}}
+					<htk-text lot="item" name="stems" format="_, %.0d Units"/>
 				</p>
 				<div class="aval-price">
-					<htk-text form="item" column="available"/> 
-					<span class="from">
-						<t>from</t>
-					</span> 
+					{{available}} 
+					<span class="from">_from</span> 
 					<span class="price">
-						<htk-text form="item" column="price" format="%.2d€"/>
+						<htk-text lot="item" name="price" format="%.2d€"/>
 					</span>
 				</div>
 			</div>
@@ -190,216 +126,84 @@
 		</custom>
 	</htk-repeater>
 </div>
-</div>
 <div id="right-panel" class="right-panel" on-click="onRightPanelClick">
 	<div class="basket-info">
 		<p>
-			<htk-text form="basket" column="date_send" format="%D"/>
+			<htk-text lot="basket" name="date_send" format="%D"/>
 		</p>
 		<p>
 			<span id="method"/> 
-			<htk-text form="basket" column="agency"/>
+			<htk-text lot="basket" name="agency"/>
 		</p>
 		<button class="thin" on-click="onConfigureClick">
-			<t>Change</t>
+			_Change
 		</button>
 	</div>
 	<div class="filter">
 		<div class="categories">
-			<div class="realms">
+			<div class="categories">
 				<htk-repeater
-					model="realms-model"
-					form-id="realm-form"
-					renderer="realmRenderer"
-					class="realms-box">
+					class="categories-box">
 					<db-model
-						id="realms-model"
+						id="categories"
 						property="model"
 						on-status-changed="refreshTitleColor">
-						<custom>
-							SELECT r.id, l.name, r.color
-								FROM vn2008.reinos r
-									JOIN vn.itemCategoryL10n l ON l.id = r.id
-								WHERE r.display != FALSE
-								ORDER BY name
-						</custom>
+						SELECT c.id, l.name, c.color
+							FROM vn.itemCategory c
+								JOIN vn.itemCategoryL10n l ON l.id = c.id
+							WHERE c.display > 0
+							ORDER BY l.name
 					</db-model>
 					<custom>
-						<a id="link">
-							<img id="image"/>
+						<a class="clickable" href="#!form={{hash.form}}&amp;category={{id}}">
+							<img
+								src="image/family/light/{{id}}.svg"
+								title="{{name}}"
+								alt="{{name}}"/>
 						</a>
 					</custom>
 				</htk-repeater>
 				<div class="clear"/>
 			</div>
 		</div>
-		<div id="realm-msg" class="realm-msg">
-			<h1><t>Choose a realm</t></h1>
+		<div id="category-msg" class="category-msg">
+			<h1>_Choose a category</h1>
 		</div>
 		<div id="filters" class="filters">
-			<h2><t>Filter by</t></h2>
-			<vn-filter
-				placeholder="_Family"
-				param="type">
+			<div>
+				<label>_Order by</label>
+				<htk-combo
+					id="order-by"
+					on-change="onOrderChange"
+					value="relevancy"
+					not-null="true"/>
+				<label>_Family</label>
+				<htk-combo
+					id="type"
+					name="type"
+					on-change="refreshTitle"
+					lot="params">
 					<db-model
-					id="types-model"
+						id="types"
 						property="model"
-					conn="conn"
-					result-index="1"
-					on-status-changed="refreshTitle">
-					<custom>
-						CALL item_available ();
-						SELECT DISTINCT t.tipo_id, l.name
-							FROM vn2008.Tipos t
-								JOIN vn2008.Articles a ON a.tipo_id = t.tipo_id
-								JOIN tmp.item_available i ON i.item_id = a.Id_Article
-								JOIN vn.itemTypeL10n l ON l.id = t.tipo_id
-							WHERE #filter
+						lot="params"
+						result-index="1">
+						CALL itemGetAvailable;
+						SELECT DISTINCT t.id, l.name
+							FROM vn.itemType t
+								JOIN vn.item i ON i.typeFk = t.id
+								JOIN tmp.itemAvailable a ON a.id = i.id
+								JOIN vn.itemTypeL10n l ON l.id = t.id
+							WHERE t.categoryFk = #category
 							ORDER BY name
-					</custom>
 					</db-model>
-				<sql-filter property="filter" type="AND">
-					<sql-filter-item type="EQUAL">
-						<sql-field name="reino_id" target="t"/>
-						<sql-value param="realm"/>
-					</sql-filter-item>
-				</sql-filter>
-			</vn-filter>
-			<vn-filter
-				placeholder="_Color"
-				param="color">
-				<db-model property="model" auto-load="false" result-index="1">
-					<custom>
-						CALL item_available ();
-						SELECT DISTINCT c.Id_Tinta, l.name
-							FROM vn2008.Tintas c
-								JOIN vn2008.Articles a ON a.Color = c.Id_Tinta
-								JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
-								JOIN vn.inkL10n l ON l.id = c.Id_Tinta
-								JOIN tmp.item_available i ON i.item_id = a.Id_Article
-							WHERE #filter
-							ORDER BY name
-					</custom>
-				</db-model>
-				<sql-filter property="filter" always-ready="true" type="AND">
-					<pointer object="op-realm"/>
-					<pointer object="op-type"/>
-					<pointer object="op-name"/>
-					<pointer object="op-origin"/>
-					<pointer object="op-category"/>
-					<pointer object="op-producer"/>
-				</sql-filter>
-			</vn-filter>
-			<vn-filter
-				placeholder="_Producer"
-				param="producer">
-				<db-model property="model" auto-load="false" result-index="1">
-					<custom>
-						CALL item_available ();
-						SELECT DISTINCT p.producer_id, p.name
-							FROM vn2008.producer p
-								JOIN vn2008.Articles a ON a.producer_id = p.producer_id
-								JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
-								JOIN tmp.item_available i ON i.item_id = a.Id_Article
-							WHERE #filter
-							ORDER BY name
-					</custom>
-				</db-model>
-				<sql-filter property="filter" always-ready="true" type="AND">
-					<pointer object="op-realm"/>
-					<pointer object="op-type"/>
-					<pointer object="op-name"/>
-					<pointer object="op-origin"/>
-					<pointer object="op-color"/>
-					<pointer object="op-category"/>
-				</sql-filter>
-			</vn-filter>
-			<vn-filter
-				placeholder="_Origin"
-				param="origin">
-				<db-model property="model" auto-load="false" result-index="1">
-					<custom>
-						CALL item_available ();
-						SELECT DISTINCT o.id, l.name, o.Abreviatura
-							FROM vn2008.Origen o
-								JOIN vn2008.Articles a ON a.id_origen = o.id
-								JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
-								JOIN vn.originL10n l ON l.id = o.id
-								JOIN tmp.item_available i ON i.item_id = a.Id_Article
-							WHERE #filter
-							ORDER BY name
-					</custom>
-				</db-model>
-				<sql-filter property="filter" always-ready="true" type="AND">
-					<pointer object="op-realm"/>
-					<pointer object="op-type"/>
-					<pointer object="op-name"/>
-					<pointer object="op-color"/>
-					<pointer object="op-category"/>
-					<pointer object="op-producer"/>
-				</sql-filter>
-			</vn-filter>
-			<vn-filter
-				placeholder="_Category"
-				param="category">
-				<db-model property="model" auto-load="false" result-index="1">
-					<custom>
-						CALL item_available ();
-						SELECT DISTINCT a.Categoria, a.Categoria category
-							FROM vn2008.Articles a
-								JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
-								JOIN tmp.item_available i ON i.item_id = a.Id_Article
-							WHERE #filter
-							ORDER BY a.Categoria
-					</custom>
-				</db-model>
-				<sql-filter property="filter" always-ready="true" type="AND">
-					<pointer object="op-realm"/>
-					<pointer object="op-type"/>
-					<pointer object="op-name"/>
-					<pointer object="op-color"/>
-					<pointer object="op-origin"/>
-					<pointer object="op-producer"/>
-				</sql-filter>
-			</vn-filter>
+				</htk-combo>
 			</div>
-		<div id="order" class="order">
-			<h2><t>Order by</t></h2>
-			<select on-change="onOrderChange">
-				<option value="D|relevancy" selected="true">
-					<t>Relevancy</t>
-				</option>
-				<option value="A|Article">
-					<t>Name</t>
-				</option>
-				<option value="A|price">
-					<t>Lower price</t>
-				</option>
-				<option value="D|price">
-					<t>Higher price</t>
-				</option>
-				<option value="A|available">
-					<t>Available</t>
-				</option>
-				<option value="A|Medida">
-					<t>Lower size</t>
-				</option>
-				<option value="D|Medida">
-					<t>Higher size</t>
-				</option>
-				<option value="A|color">
-					<t>Color</t>
-				</option>
-				<option value="A|producer">
-					<t>Producer</t>
-				</option>
-				<option value="A|Abreviatura">
-					<t>Origin</t>
-				</option>
-				<option value="A|Categoria">
-					<t>Category</t>
-				</option>
-			</select>
+			<div id="current-filters"/>
+			<div id="suggested-filters"/>
+			<button on-click="onRemoveFiltersClick" class="thin">
+				_Remove filters
+			</button>
 		</div>
 	</div>
 </div>
@@ -411,43 +215,49 @@
 </htk-popup>
 <htk-popup
 	id="card-popup"
-	class="card-popup"
 	modal="true"
 	on-closed="onPopupClose">
+	<db-form id="card" model="items"/>
 	<div property="child-node" class="item-card">
 		<div class="top">
 			<htk-image
 				directory="catalog"
 				subdir="200x200"
-				form="card"
-				column="Foto"
+				lot="card"
+				name="image"
 				full-dir="900x900"
 				conn="conn"
 				editable="true"/>
 			<div class="item-info">
 				<h2>
-					<htk-text form="card" column="Article"/>
+					{{card.name}}
 				</h2>
+				<p>
+					@{{card.id}}
+				</p>
 				<p class="producer">
-					<htk-text form="card" column="producer"/>
+					{{card.producer}}
 				</p>
+				<htk-repeater>
+					<db-lot property="model" lot="card-lot">
+						SELECT t.name, it.value
+							FROM vn.itemTag it
+								JOIN vn.tag t ON t.id = it.tagFk
+							WHERE it.id = #item
+							ORDER BY it.priority
+					</db-lot>
+					<custom>
 						<p>
-					@<htk-text form="card" column="item_id"/>
+							{{name}} {{value}}
 						</p>
+					</custom>
+				</htk-repeater>
 				<p>
-					<t>Size</t> <htk-text form="card" column="Medida"/>, 
-					<t>Category</t> <htk-text form="card" column="Categoria"/>
-				</p>
-				<p class="color">
-					<t>Color</t> <htk-text form="card" column="color"/>
-					<htk-text form="card" column="Tallos" format="_, %.0d Units"/>
-				</p>
-				<p>
-					<t>Origin</t> <htk-text form="card-extend" column="origin"/>
+					<htk-text lot="card" name="Tallos" format="_, %.0d Units"/>
 				</p>
 			</div>
 			<p class="desc">
-				<htk-text form="card-extend" column="description" id="desc"/>
+				{{cardExtend.description}}
 			</p>
 		</div>
 		<htk-grid class="lots-grid" model="item-lots" show-header="false">

forms/ecomerce/checkout/checkout.js

@@ -1,20 +1,43 @@
+(function () {
+
+var methodsData = {
+	AGENCY: {
+		steps: ['method', 'date', 'address', 'delivery', 'confirm'],
+		isDelivery: true,
+		textId: 'agencyText'
+	},
+	DELIVERY: {
+		steps: ['method', 'date', 'address', null, 'confirm'],
+		isDelivery: true,
+		textId: 'deliveryText'
+	},
+	PICKUP: {
+		steps: ['method', 'date', 'address', 'delivery', 'confirm'],
+		isDelivery: false,
+		textId: 'pickupText'
+	}
+};
 
 Hedera.Checkout = new Class
 ({
 	Extends: Hedera.Form
 
+	,initialize: function (props)
+	{
+		this.today = new Date ();
+		this.today.setHours (0, 0, 0, 0);
+		this.parent (props);
+	}
+
 	,activate: function ()
 	{
 		this.autoStepLocked = true;
-
-		this.today = new Date ();
-		this.today.setHours (0,0,0,0);
 	}
 
 	,onValuesReady: function ()
 	{
-		var orderForm = this.$('order-form');
-		var defaultsForm = this.$('defaults');
+		var orderForm = this.$.orderForm;
+		var defaultsForm = this.$.defaults;
 
 		if (!(orderForm.ready && defaultsForm.ready))
 			return;
@@ -24,7 +47,7 @@ Hedera.Checkout = new Class
 		if (orderForm.numRows > 0)
 		{
 			var i = orderForm;
-			date = i.get ('date_send');
+			date = i.$.date_send;
 		}
 		else
 			var i = defaultsForm;
@@ -33,23 +56,24 @@ Hedera.Checkout = new Class
 		{
 			date = new Date ();
 
-			if (i.get('delivery_method') != 'PICKUP')
-				date.setTime (date.getTime () + 86400000);
+			if (i.$.delivery_method != 'PICKUP')
+				date.setDate (date.getDate () + 1);
+
+			date.setHours (0, 0, 0, 0);
 		}
 		
-		this.$('date').value = date;
-		this.$('method').value = i.get ('delivery_method');
-		this.$('agency').value = i.get ('agency_id');
-		this.$('address').value = i.get ('address_id');
-
+		this.$.lot.assign ({
+			date: date,
+			method: i.$.delivery_method,
+			agency: i.$.agency_id,
+			address: i.$.address_id
+		});
 		this.autoStepLocked = false;
 	}
 	
 	,disableButtons: function (disable)
 	{
-		this.$('confirm-agency').disabled = disable;
-		this.$('confirm-delivery').disabled = disable;
-		this.$('confirm-pickup').disabled = disable;
+		this.$.confirmButton.disabled = disable;
 	}
 
 	,onConfirmClick: function ()
@@ -57,15 +81,8 @@ Hedera.Checkout = new Class
 		this.disableButtons (true);
 	
 		var query = 'CALL basketConfigure (#date, #method, #agency, #address)';	
-	
-		var batch = new Sql.Batch ();
-		batch.addParam ('method', this.$('method'));
-		batch.addParam ('date', this.$('date'));
-		batch.addParam ('agency', this.$('agency'));
-		batch.addParam ('address', this.$('address'));
-	
 		this.conn.execQuery (query,
-			this.onBasketConfigured.bind (this), batch);
+			this.onBasketConfigured.bind (this), this.$.lot.params);
 	}
 
 	,onBasketConfigured: function (resultSet)
@@ -75,20 +92,18 @@ Hedera.Checkout = new Class
 		if (!resultSet.fetchResult ())
 			return;
 	
-		if (this.$('order-form').numRows > 0)
-			Htk.Toast.showMessage (_('OrderUpdated'));
-		else
-			Htk.Toast.showMessage (_('OrderStarted'));
+		var isUpdated = this.$.orderForm.numRows > 0;
+		Htk.Toast.showMessage (_(isUpdated ? 'OrderUpdated' : 'OrderStarted'));
 
-		this.hash.set ({form: 'ecomerce/catalog'});
+		this.hash.setAll ({form: 'ecomerce/catalog'});
 	}
 
 	,onCancelClick: function ()
 	{
-		if (this.$('order-form').numRows > 0)
+		if (this.$.orderForm.numRows > 0)
 			window.history.back();
 		else
-			this.hash.set ({'form': 'ecomerce/orders'});
+			this.hash.setAll ({form: 'ecomerce/orders'});
 	}
 	
 	,agencySteps: ['method', 'date', 'address', 'agency', 'confirm-agency']
@@ -96,57 +111,56 @@ Hedera.Checkout = new Class
 	
 	,stepFunc: function (stepIndex)
 	{
-		var isDelivery = this.$('rg-method').value == 'AGENCY';
+		var isDelivery = this.$.rgMethod.value == 'AGENCY';
 		var steps = isDelivery ? this.agencySteps : this.pickupSteps;
 		var stepId = steps[stepIndex];
 		
 		if (!stepId)
 			return null;
 
-		switch (stepId)
+		switch (stepName)
 		{
 			case 'date':
-				Vn.Node.setText (this.$('date-question'), isDelivery ?
-					_('OrderDateDeliveryQuestion'):
-					_('OrderDatePickupQuestion'));
-				this.$('calendar').goToSelectedMonth ();
+				var dateQuestion = methodData.isDelivery ?
+					'OrderDateDeliveryQuestion' : 'OrderDatePickupQuestion';
+				Vn.Node.setText (this.$.dateQuestion, _(dateQuestion));
+				this.$.calendar.goToSelectedMonth ();
 				break;
 			case 'address':
-				Vn.Node.setText (this.$('address-question'), isDelivery ?
+				Vn.Node.setText (this.$.addressQuestion, isDelivery ?
 					_('AddressQuestion'):
 					_('AddressQuestionPickup'));
 				break;
 			case 'agency':
-				this.$('agencies').refresh ();
+				this.$.agencies.refresh ();
 				break;
-			case 'pickup':
-				this.$('warehouses').refresh ();
+			case 'confirm':
+				for (var myMethod in methodsData)
+				{
+					var display = myMethod == method ? 'block': 'none';
+					this.$[methodsData[myMethod].textId].style.display = display;
+				}
 				break;
 		}
 		
-		return this.$(stepId +'-step');
+		return stepName;
 	}
 	
-	,onFieldChange: function ()
+	,onFieldChange: function (_, value)
 	{
 		if (!this.autoStepLocked)
-			this.$('assistant').moveNext ();
-	}
-	
-	,goNextStep: function ()
-	{
-		this.$('assistant').moveNext ();
+			this.$.assistant.moveNext ();
 	}
 	
 	,addressRenderer: function (builder, form)
 	{
-		builder.$('address').addEventListener ('click',
-			this.onAddressClick.bind (this, form.get ('id')));
+		builder.$.address.addEventListener ('click',
+			this.onAddressClick.bind (this, form.$.id));
 	}
 	
 	,onAddressClick: function (addressId)
 	{
-		this.$('address').value = addressId;
+		this.$.lot.set ('address', addressId);
 		this.goNextStep ();
 	}
 	
@@ -155,17 +169,17 @@ Hedera.Checkout = new Class
 		if (this.selectedNode)
 			Vn.Node.removeClass (this.selectedNode, 'selected');
 
-		var row = this.$('addresses').search ('id', this.$('address').value);
+		var row = this.$.addresses.search ('id', this.$.lot.$.address);
 
 		if (row != -1)
 		{
-			var builder = this.$('repeater').getBuilder (row);
+			var builder = this.$.repeater.getScope (row);
 		
-			this.selectedNode = builder.$('address');
+			this.selectedNode = builder.$.address;
 			Vn.Node.addClass (this.selectedNode, 'selected');
 		}
 
-		this.$('address-form').row = row;
+		this.$.addressForm.row = row;
 	}
 	
 	,onAgenciesReady: function (model)
@@ -186,3 +200,4 @@ Hedera.Checkout = new Class
 	}
 });
 
+})();

forms/ecomerce/checkout/style.css

@@ -1,44 +1,44 @@
-.checkout
-{
-	padding: 1em;
-	max-width: 40em;
-	margin: 0 auto;
-}
+
 .checkout .form
 {
-	max-width: 40em;
-	padding: 3em;
+	max-width: 38em;
+	padding: 2.5em;
+}
+
+.checkout .htk-assistant-bar
+{
+	margin-top: 1.8em;
 }
 
 /* Step */
 
-.answers button,
-.answers p,
-.radio > div
+.answers
 {
-	font-size: 1.4em;
+	font-size: 1.3em;
 }
-.answers .htk-select
+.answers .htk-combo
 {
-	max-width: 8em;
+	max-width: 10em;
 	display: block;
 	margin: 0 auto;
-	font-size: 1.6em;
-	height: 1.8em;
 }
 .answers p
 {
-	margin: 0.3em 0;
+	margin: .3em 0;
 }
 .target
 {
-	max-width: 28em;
+	max-width: 18em;
 	margin: 0 auto;
 }
 .address
 {
-	border-radius: 0.1em;
-	padding: 0.6em 1.4em;
+	border-radius: .1em;
+	padding: .8em;
+}
+.address p
+{
+	margin: 0;
 }
 .address.selected
 {
@@ -52,10 +52,11 @@
 .address p.consignee
 {
 	font-weight: bold;
+	margin-bottom: .2em;
 }
 .radio
 {
-	max-width: 20em;
+	max-width: 13em;
 	margin: 0 auto;
 }
 .radio > div
@@ -70,13 +71,10 @@
 .thin-calendar
 {
 	width: inherit;
-	max-width: 24em;
+	max-width: 22em;
 	margin: 0 auto;
 	box-shadow: 0 0.1em 0.3em #ccc;
-}
-.thin-calendar tr > th
-{
-	color: white;
+	font-size: .7em;
 }
 .htk-assistant .thin
 {

forms/ecomerce/checkout/ui.xml

@@ -1,31 +1,24 @@
 <vn>
 <vn-group>
-	<vn-param id="method"/>
-	<vn-param id="date"/>
-	<vn-param id="agency"/>
-	<vn-param id="address" on-changed="onAddressChange"/>
+	<vn-lot id="lot" on-change="onAddressChange"/>
 	<db-form id="defaults" on-ready="onValuesReady">
 		<db-model property="model">
-			<custom>
 			SELECT delivery_method, agency_id, address_id
 				FROM basket_defaults
-			</custom>
 		</db-model>
 	</db-form>
 	<db-form id="order-form" on-ready="onValuesReady">
 		<db-model property="model">
-			<custom>
-				SELECT v.code delivery_method, o.date_send, o.agency_id, o.address_id
+			SELECT d.code delivery_method, o.date_send, o.agency_id, o.address_id
 				FROM basket o
-						JOIN vn2008.Vistas v ON o.delivery_method_id = v.vista_id
-			</custom>
+					JOIN vn.deliveryMethod d ON d.id = o.delivery_method_id
 		</db-model>
 	</db-form>
 	<db-model id="agencies"
 		auto-load="false"
+		lot="lot"
 		result-index="1"
 		on-status-changed="onAgenciesReady">
-		<custom>
 		CALL vn.agencyListAvailable (#date, #address);
 		SELECT DISTINCT m.id, m.description
 			FROM tmp.agencyAvailable a
@@ -36,19 +29,12 @@
 			WHERE d.code IN ('AGENCY', 'DELIVERY')
 			ORDER BY m.description;
 		DROP TEMPORARY TABLE tmp.agencyAvailable;
-		</custom>
-		<sql-batch property="batch">
-			<custom>
-				<item name="address" param="address"/>
-				<item name="date" param="date"/>
-			</custom>
-		</sql-batch>
 	</db-model>
 	<db-model id="warehouses"
 		auto-load="false"
+		lot="lot"
 		result-index="1"
 		on-status-changed="onWarehousesReady">
-		<custom>
 		CALL vn.agencyListAvailable (#date, #address);
 		SELECT DISTINCT m.id, m.description
 			FROM tmp.agencyAvailable a
@@ -59,24 +45,40 @@
 			WHERE d.code IN ('PICKUP')
 			ORDER BY m.description;
 		DROP TEMPORARY TABLE tmp.agencyAvailable;
-		</custom>
-		<sql-batch property="batch">
-			<custom>
-				<item name="address" param="address"/>
-				<item name="date" param="date"/>
-			</custom>
-		</sql-batch>
 	</db-model>
 </vn-group>
-<div id="title">
-	<h1><t>ConfigureOrder</t></h1>
-</div>
+<h1 id="title">
+	_ConfigureOrder
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="close"
 		tip="_Cancel"
 		on-click="onCancelClick"/>
 </div>
+<<<<<<< HEAD
+<div id="main" class="checkout">
+	<div class="card form">
+		<htk-assistant
+			id="assistant"
+			step-count="5"
+			step-func="stepFunc">
+			<htk-step name="method">
+				<h2>_DeliveryOrPickupQuestion</h2>
+				<div class="answers radio">
+					<htk-radio-group
+						id="rg-method"
+						lot="lot"
+						name="method"
+						on-changed="onFieldChange"/>
+					<div>
+						<htk-radio radio-group="rg-method" id="r-agency" value="AGENCY"/>
+						<label for="r-agency">_ReceiveThroughtAgency</label>
+					</div>
+					<div>
+						<htk-radio radio-group="rg-method" id="r-delivery" value="DELIVERY"/>
+						<label for="r-delivery">_ReceiveThroughtRoute</label>
+=======
 <div id="form" class="checkout">
 	<div class="box">
 		<div class="form">
@@ -143,28 +145,62 @@
 								</div>
 							</custom>
 						</htk-repeater>
+>>>>>>> master
+					</div>
+					<div>
+						<htk-radio radio-group="rg-method" id="r-pickup" value="PICKUP"/>
+						<label for="r-pickup">_PickupInStore</label>
 					</div>
 				</div>
-				<div id="agency-step">
-					<h2><t>AgencyQuestion</t></h2>
+			</htk-step>
+			<htk-step name="date">
+				<h2 id="date-question"/>
+				<div class="answers">
+					<htk-calendar
+						id="calendar"
+						class="thin-calendar"
+						lot="lot"
+						name="date"
+						restrict-func="calendarRestrict"
+						on-pick="onFieldChange"/>
+				</div>
+<<<<<<< HEAD
+			</htk-step>
+			<htk-step name="address">
+				<h2>_AddressQuestion</h2>
+				<div class="answers target">
+					<htk-repeater
+						id="repeater"
+						form-id="iter"
+						on-change="onAddressChange"
+						renderer="addressRenderer"
+						model="addresses">
+						<custom>
+							<div class="address" id="address">
+								<p class="consignee">
+									{{consignee}}
+								</p>
+								<p>
+									{{name}}
+								</p>
+							</div>
+						</custom>
+					</htk-repeater>
+				</div>
+			</htk-step>
+			<htk-step name="delivery">
+				<h2 id="wh-question"/>
 				<div class="answers target">
 					<htk-combo
-							id="agency-combo"
-							param="agency"
+						id="agency"
+						lot="lot"
+						name="agency"
+						not-null="true"
+						placeholder="_Select agency"
+						show-field="description"
 						on-changed="onFieldChange"
 						model="agencies"/>
-					</div>
-				</div>
-				<div id="pickup-step">
-					<h2><t>PickupWarehouseQuestion</t></h2>
-					<div class="answers target">
-						<htk-combo
-							id="warehouse-combo"
-							param="agency"
-							on-changed="onFieldChange"
-							model="warehouses"/>
-					</div>
-				</div>
+=======
 				<div id="confirm-agency-step" class="confirm">
 					<h2><t>ConfirmToAccessCatalog</t></h2>
 					<div class="answers target">
@@ -203,27 +239,35 @@
 						</button>
 						<div class="clear"/>
 					</div>
+>>>>>>> master
 				</div>
-				<div id="confirm-pickup-step" class="confirm">
-					<h2><t>ConfirmToAccessCatalog</t></h2>
+			</htk-step>
+			<htk-step name="confirm" class="confirm">
+				<h2>_ConfirmToAccessCatalog</h2>
 				<div class="answers target">
 					<p>
-							<t>Pickup</t> 
-							<htk-text format="%D" param="date"/>
+						_Arrival <htk-text format="%D" lot="lot" name="date"/>
 					</p>
 					<p>
-							<t>Warehouse</t> 
-							<htk-text form="warehouse-combo" column="description"/>
+						{{addressForm.name}}
 					</p>
-						<button id="confirm-pickup" class="thin" on-click="onConfirmClick">
-							<t>Confirm</t>
+					<p id="agency-text">
+						<span>_Agency</span> {{agency.description}}
+					</p>
+					<p id="delivery-text">
+						_ReceiveThroughtRoute
+					</p>
+					<p id="pickup-text">
+						<span>_Warehouse</span> {{agency.description}}
+					</p>
+					<button id="confirm-button" class="thin" on-click="onConfirmClick">
+						_Confirm
 					</button>
 					<div class="clear"/>
 				</div>
-				</div>
-			</div>
+			</htk-step>
+		</htk-assistant>
 		<htk-assistant-bar assistant="assistant"/>
 	</div>
 </div>
-</div>
 </vn>

forms/ecomerce/confirm/confirm.js

@@ -8,7 +8,7 @@ Hedera.Confirm = new Class
 		this.close ();
 		this.isOpen = true;
 
-		Hedera.BasketChecker.check (this.conn,
+		Hedera.BasketChecker.check (this.conn, this.hash,
 			this.onBasketCheck.bind (this));
 	}
 	
@@ -23,50 +23,40 @@ Hedera.Confirm = new Class
 		if (form.row < 0)
 			return;
 
-		if (form.get ('method') != 'PICKUP')
-		{
-			Vn.Node.show (this.$('address'));
-			Vn.Node.setText (this.$('method'), _('Agency'));
-		}
-		else
-		{
-			Vn.Node.hide (this.$('address'));
-			Vn.Node.setText (this.$('method'), _('Warehouse'));
-		}
+		var order = form.params;
 		
-		var total = form.get ('taxBase') + form.get ('tax');
+		var isPickup = order.method == 'PICKUP';
+		Vn.Node.display (this.$.address, !isPickup);
+		Vn.Node.setText (this.$.address, _(isPickup ? 'Warehouse' : 'Agency'));
+
+		var total = order.taxBase + order.tax;
 		
 		if (total === null)
 			total = 0;
 
-		var credit = form.get ('credit');
-		var debt = form.get ('debt');
-
-		var totalDebt = debt + total;
-		var exceededCredit = totalDebt - credit;
+		var totalDebt = order.debt + total;
+		var exceededCredit = totalDebt - order.credit;
 		var creditExceededCond = exceededCredit > 0;
 			
 		if (creditExceededCond)
 			Htk.Toast.showWarning (
 				_('You have exceeded your credit.'));
 
-		this.$('debt').value = debt;
-		this.$('total-debt').value = totalDebt;
-		this.$('total-amount').value = totalDebt;
-		this.$('credit-excess').value = exceededCredit;
-		this.$('excess-amount').value = exceededCredit;
+		var lot = {
+			totalDebt: totalDebt,
+			exceededCredit: exceededCredit,
+			payAmount: 'ALL'
+		};
 		
-		this.$('pay-amount').value = 'ALL';
-		
-		if (credit > 0)
+		if (order.credit > 0)
 		{
-			this.$('credit-info').style.display = 'table-row';
+			this.$.creditInfo.style.display = 'table-row';
 
 			if (creditExceededCond)
 			{
-				this.$('amount-selector').style.display = 'block';
-				this.$('exceeded-info').style.display = 'table-row';
-				this.$('pay-amount').value = 'EXCEEDED';
+				this.$.amountSelector.style.display = 'block';
+				this.$.exceededInfo.style.display = 'table-row';
+				lot.payAmount = 'EXCEEDED';
 			}
 		}
 		
@@ -75,7 +65,7 @@ Hedera.Confirm = new Class
 		if (totalDebt <= 0)
 		{
 			methods = ['balance'];
-			selectedMethod = 'BALANCE';
+			lot.payMethod = 'BALANCE';
 		}
 		else
 		{
@@ -84,16 +74,16 @@ Hedera.Confirm = new Class
 			if (!creditExceededCond)
 			{
 				methods.push ('credit');
-				selectedMethod = 'CREDIT';
+				lot.payMethod = 'CREDIT';
 			}
 			else
-				selectedMethod = 'CARD';
+				lot.payMethod = 'CARD';
 		}
 		
 		for (var i = 0; i < methods.length; i++)
-			this.$(methods[i] +'-method').style.display = 'block';
+			this.$[methods[i] +'Method'].style.display = 'block';
 
-		this.$('pay-method').value = selectedMethod;
+		this.$.lot.assign (lot);
 	}
 	
 	,onPayMethodChange: function (payMethod)
@@ -101,21 +91,21 @@ Hedera.Confirm = new Class
 		var id = this.displayedInfo;
 	
 		if (id)
-			Vn.Node.removeClass (this.$(id), 'selected');
+			Vn.Node.removeClass (this.$[id], 'selected');
 	
 		switch (payMethod.value)
 		{
 			case 'BALANCE':
-				id = 'balance-method';
+				id = 'balanceMethod';
 				break;
 			case 'CREDIT':
-				id = 'credit-method';
+				id = 'creditMethod';
 				break;
 			case 'CARD':
-				id = 'card-method';
+				id = 'cardMethod';
 				break;
 			case 'TRANSFER':
-				id = 'transfer-method';
+				id = 'transferMethod';
 				break;
 			default:
 				id = null;
@@ -124,13 +114,13 @@ Hedera.Confirm = new Class
 		this.displayedInfo = id;
 		
 		if (id)
-			Vn.Node.addClass (this.$(id), 'selected');
+			Vn.Node.addClass (this.$[id], 'selected');
 	}
 	
 	,disableButtons: function (disable)
 	{
-		this.$('modify').disabled = disable;
-		this.$('confirm').disabled = disable;
+		this.$.modify.disabled = disable;
+		this.$.confirm.disabled = disable;
 	}
 	
 	,onModifyClick: function ()
@@ -141,7 +131,7 @@ Hedera.Confirm = new Class
 	,onConfirmClick: function ()
 	{
 		this.disableButtons (true);
-		this.$('confirm-query').execute ();
+		this.$.confirmQuery.execute ();
 	}
 
 	,onConfirm: function (query, resultSet)
@@ -149,23 +139,28 @@ Hedera.Confirm = new Class
 		this.disableButtons (false);
 
 		if (resultSet.fetchResult ())
-			this.$('success-dialog').show ();
+			this.$.successDialog.show ();
 	}
 
 	,onDialogResponse: function ()
 	{
-		if (this.$('pay-method').value === 'CARD')
-		{
-			if (this.$('pay-amount').value === 'EXCEEDED')
-				var payAmount = this.$('excess-amount').value;
-			else
-				var payAmount = this.$('total-amount').value;
+		var lot = this.$.lot.params;
 
-			var tpv = new Hedera.Tpv ({conn: this.conn});
-			tpv.pay (payAmount, this.$('order-form').get ('company_id'));
+		if (this.$.payMethod.value === 'CARD')
+		{
+			if (this.$.payAmount.value === 'EXCEEDED')
+				var payAmount = lot.exceededCredit;
+			else
+				var payAmount = lot.totalDebt;
+		
+			var tpv = new Hedera.Tpv ({
+				conn: this.conn,
+				hash: this.hash
+			});
+			tpv.pay (payAmount, this.$.order.get ('company'));
 		}
 		else
-			this.hash.set ({'form': 'ecomerce/orders'});
+			this.hash.params = {form: 'ecomerce/orders'};
 	}
 });
 

forms/ecomerce/confirm/style.css

@@ -1,18 +1,7 @@
 .confirm
 {
-	padding: 1em;
-	max-width: 30em;
-	margin: 0 auto;
 	color: #555;
 }
-.confirm .box
-{
-	padding: 2.2em 2.5em;
-}
-.confirm .summary
-{
-	margin-bottom: 1em;
-}
 .confirm .address
 {
 	margin-top: .8em;
@@ -122,4 +111,3 @@
 {
 	margin: .1em 0;
 }
-

forms/ecomerce/confirm/ui.xml

@@ -1,8 +1,8 @@
 <vn>
 <vn-group>
-	<db-form id="order-form" on-ready="onOrderReady">
+	<vn-lot id="lot"/>
+	<db-form id="order" on-ready="onOrderReady">
 		<db-model property="model" result-index="1">
-			<custom>
 			CALL basketGetTax;
 			SELECT o.id, o.date_send, o.note, o.company_id, 
 				ag.description agency, v.code method, 
@@ -20,95 +20,90 @@
 							FROM tmp.orderTax
 					) t;
 			DROP TEMPORARY TABLE tmp.orderTax;
-			</custom>
 		</db-model>
 	</db-form>
 	<db-query id="confirm-query" on-ready="onConfirm">
-		<custom>
 		CALL basketConfirm
-		</custom>
 	</db-query>
 </vn-group>
-<div id="title">
-	<h1><t>Order summary</t></h1>
-</div>
-<div id="form" class="confirm">
-	<div class="box summary">
+<h1 id="title">
+	_Order summary
+</h1>
+<div id="main" class="confirm">
+	<div class="summary form card">
 		<div>
 			<div class="delivery">
 				<p>
-					<t>Delivery at</t> 
-					<htk-text format="%D" form="order-form" column="date_send"/>
+					_Delivery at 
+					<htk-text format="%D" lot="order" name="sendDate"/>
 				</p>
 				<p>
-					<span id="method"><t>Agency</t></span> 
-					<htk-text form="order-form" column="agency"/>
+					<span id="method">_Agency</span> {{order.agency}}
 				</p>
 			</div>
 			<div id="address" class="address">
 				<p>
-					<htk-text form="order-form" column="nickname"/>
+					{{order.nickname}}
 				</p>
 				<p>
-					<htk-text form="order-form" column="street"/>
+					{{order.street}}
 				</p>
 				<p>
-					<htk-text form="order-form" column="postalCode"/>, 
-					<htk-text form="order-form" column="city"/>
+					{{order.postalCode}}, {{order.city}}
 				</p>
 			</div>
 		</div>
 	</div>
-	<div class="box payment">
+	<div class="payment form card">
 		<div>
 			<table class="debt-info">
 				<tbody>
 					<tr>
 						<td>
-							<t>Previous balance</t>
+							_Previous balance
 						</td>
 						<td class="currency">
-							<htk-text format="%.2d€" id="debt"/>
+							<htk-text format="%.2d€" lot="order" name="debt"/>
 						</td>
 					</tr>
 					<tr>
 						<td>
-							<t>Order total</t>
+							_Order total
 						</td>
 						<td class="currency">
-							<htk-text format="%.2d€" form="order-form" column="taxBase"/>
+							<htk-text format="%.2d€" lot="order" name="taxBase"/>
 						</td>
 					</tr>
 					<tr>
 						<td>
-							<t>Order VAT</t>
+							_Order VAT
 						</td>
 						<td class="currency">
-							<htk-text format="%.2d€" form="order-form" column="tax"/>
+							<htk-text format="%.2d€" lot="order" name="tax"/>
 						</td>
 					</tr>
 					<tr class="total-debt sum-total">
 						<td>
-							<t>Total debt</t>
+							_Total debt
 						</td>
 						<td class="currency">
-							<htk-text format="%.2d€" id="total-debt"/>
+							<htk-text format="%.2d€" lot="lot" name="totalDebt"/>
 						</td>
 					</tr>
 					<tr id="credit-info" class="credit-info">
 						<td>
-							<t>Credit</t>
+							_Credit
 						</td>
 						<td class="currency">
-							<htk-text format="%.2d€" form="order-form" column="credit"/>
+							<htk-text format="%.2d€" lot="order" name="credit"/>
 						</td>
 					</tr>
 					<tr id="exceeded-info" class="exceeded-info sum-total">
 						<td>
-							<t>Exceeded credit</t>
+							_Exceeded credit
 						</td>
 						<td class="currency">
-							<htk-text format="%.2d€" id="credit-excess"/>
+							<htk-text format="%.2d€" lot="lot" name="exceededCredit"/>
 						</td>
 					</tr>
 				</tbody>
@@ -116,79 +111,79 @@
 		</div>
 		<div id="amount-selector" class="amount-selector">
 			<h2>
-				<t>Amount to pay</t>
+				_Amount to pay
 			</h2>
 			<div class="radio">
 				<htk-radio-group
-					id="pay-amount"/>
+					id="pay-amount"
+					lot="lot"
+					name="payAmount"/>
 				<div>
 					<htk-radio radio-group="pay-amount" value="ALL"/>
 					<label>
-						<t>Total debt</t>, 
-						<htk-text format="%.2d€" id="total-amount"/>
+						_Total debt, 
+						<htk-text format="%.2d€" lot="lot" name="totalDebt"/>
 					</label>
 				</div>
 				<div>
 					<htk-radio radio-group="pay-amount" value="EXCEEDED"/>
 					<label>
-						<t>Exceeded credit</t>, 
-						<htk-text format="%.2d€" id="excess-amount"/>
+						_Exceeded credit, 
+						<htk-text format="%.2d€" lot="lot" name="exceededCredit"/>
 					</label>
 				</div>
 			</div>
 		</div>
 		<div>
 			<h2>
-				<t>Pay method</t>
+				_Pay method
 			</h2>
 			<div class="pay-methods radio">
 				<htk-radio-group
+					lot="lot"
 					id="pay-method"
+					name="payMethod"
 					on-changed="onPayMethodChange"/>
 				<div id="balance-method">
-					<htk-radio radio-group="pay-method" value="BALANCE"/>
-					<label><t>Use my balance</t></label>
+					<htk-radio id="r-balance" radio-group="pay-method" value="BALANCE"/>
+					<label for="r-balance">_Use my balance</label>
 					<div class="pay-info">
-						<t>You have a favorable balance.</t>
+						_You have a favorable balance.
 					</div>
 				</div>
 				<div id="credit-method">
-					<htk-radio radio-group="pay-method" value="CREDIT"/>
-					<label><t>Use my credit</t></label>
+					<htk-radio id="r-credit" radio-group="pay-method" value="CREDIT"/>
+					<label for="r-credit">_Use my credit</label>
 					<div class="pay-info">
-						<t>You have a favorable credit.</t>
+						_You have a favorable credit.
 					</div>
 				</div>
 				<div id="card-method">
-					<htk-radio radio-group="pay-method" value="CARD"/>
-					<label><t>Credit card</t></label>
+					<htk-radio id="r-card" radio-group="pay-method" value="CARD"/>
+					<label for="r-card">_Credit card</label>
 					<div class="pay-info">
-						<t>You will be redirected to the payment.</t>
+						_You will be redirected to the payment.
 					</div>
 				</div>
 				<div id="transfer-method">
-					<htk-radio radio-group="pay-method" value="TRANSFER"/>
-					<label><t>Bank Transfer</t></label>
+					<htk-radio id="r-transfer" radio-group="pay-method" value="TRANSFER"/>
+					<label for="r-transfer">_Bank Transfer</label>
 					<div class="pay-info">
-						<t>Make a transfer to one account.</t>
-						<htk-repeater form-id="iter">
+						_Make a transfer to one account.
+						<htk-repeater>
 							<db-model property="model">
-								<custom>
 								SELECT description, iban, entity_id, office, dc, number
 									FROM vn2008.account_customer c
-								</custom>
 							</db-model>
 							<custom>
 								<div class="transfer-account">
 									<p>
-										<htk-text form="iter" column="description"/>
+										{{description}}
 									</p>
 									<p>
-										<htk-text form="iter" column="iban"/> 
-										<htk-text form="iter" column="entity_id"/> 
-										<htk-text form="iter" column="office"/> 
-										<htk-text form="iter" column="dc"/> 
-										<htk-text form="iter" column="number"/>
+										{{iban}} 
+										<htk-text lot="iter" name="entity_id" format="%.4d"/> 
+										{{office}} {{dc}} {{number}}
 									</p>
 								</div>
 							</custom>
@@ -196,17 +191,17 @@
 					</div>
 				</div>
 				<div id="later-method">
-					<htk-radio radio-group="pay-method" value="LATER"/>
-					<label><t>Pay later</t></label>
+					<htk-radio id="r-later" radio-group="pay-method" value="LATER"/>
+					<label for="r-later">_Pay later</label>
 				</div>
 			</div>
 		</div>
 		<div class="button-bar">
 			<button on-click="onModifyClick" id="modify" class="thin modify-order">
-				<t>Modify</t>
+				_Modify
 			</button>
 			<button on-click="onConfirmClick" id="confirm" class="thin confirm-order">
-				<t>Confirm</t>
+				_Confirm
 			</button>
 			<div class="clear"/>
 		</div>

forms/ecomerce/invoices/invoices.js

@@ -3,15 +3,28 @@ Hedera.Invoices = new Class
 ({
 	Extends: Hedera.Form
 	
+	,activate: function ()
+	{
+		var params = this.params;
+
+		if (!params.$.from)
+		{
+			var from = new Date ();
+			from.setDate (from.getDate () - 30);
+			from.setHours (0, 0, 0, 0);
+			params.assign ({from: from});
+		}
+	}
+
 	,onDownloadClick: function  (column, invoiceId)
 	{
 		if (!invoiceId)
 			return;
 			
 		var params = {
-			 'srv': 'rest:dms/invoice'
-			,'invoice': invoiceId
-			,'token': this.conn.token
+			 srv: 'rest:dms/invoice'
+			,invoice: invoiceId
+			,token: this.conn.token
 		};
 			
 		var url = '?'+ Vn.Url.makeUri (params);

forms/ecomerce/invoices/locale/ca.yml

@@ -1,4 +1,5 @@
 Invoices: Factures
+Show invoices from: Mostra factures desde
 Serial: Sèrie
 Date: Data
 Import: Import

forms/ecomerce/invoices/locale/en.yml

@@ -1,4 +1,5 @@
 Invoices: Invoices
+Show invoices from: Show invoices from
 Serial: Serial
 Date: Date
 Import: Import

forms/ecomerce/invoices/locale/es.yml

@@ -1,4 +1,5 @@
 Invoices: Facturas
+Show invoices from: Mostrar facturas desde
 Serial: Serie
 Date: Fecha
 Import: Importe

forms/ecomerce/invoices/locale/fr.yml

@@ -1,4 +1,5 @@
 Invoices: Factures
+Show invoices from: Afficher les factures de
 Serial: Série
 Date: Date
 Import: Montant

forms/ecomerce/invoices/locale/pt.yml

@@ -1,4 +1,5 @@
 Invoices: Factura
+Show invoices from: Mostrar facturas de
 Serial: Serie
 Date: Data
 Import: Importe

forms/ecomerce/invoices/style.css

@@ -1,10 +1,7 @@
-.invoices
+
+.invoices .card
 {
-	padding: 1em;
-}
-.invoices .box
-{
-	max-width: 40em;
+	max-width: 32em;
 }
 .invoices .box > .header,
 .invoices .htk-grid > thead > tr

forms/ecomerce/invoices/ui.xml

@@ -1,18 +1,24 @@
 <vn>
-<div id="title">
-	<h1><t>Invoices</t></h1>
-</div>
-<div id="form" class="invoices">
-	<div class="box">
+<vn-lot-query id="params">
+	<vn-spec name="from" type="Date"/>
+</vn-lot-query>
+<h1 id="title">
+	_Invoices
+</h1>
+<div id="main" class="invoices">
+	<div class="card form">
 		<div>
+			<label>_Show invoices from</label>
+			<htk-date-chooser lot="params" name="from"/>
+		</div>
+	</div>
+	<div class="card">
 		<htk-grid show-header="false">
-		<db-model property="model" id="tickets">
-			<custom>
+			<db-model property="model" lot="params">
 				SELECT invoice_id, serial_num, issued, amount
 					FROM invoice_view
+					WHERE issued >= #from
 					ORDER BY issued DESC
-					LIMIT 100
-			</custom>
 			</db-model>
 			<htk-column-text title="_Serial" column="serial_num"/>
 			<htk-column-date title="_Date" column="issued" format="_%e %b %Y"/>
@@ -25,5 +31,4 @@
 		</htk-grid>
 	</div>
 </div>
-</div>
 </vn>

forms/ecomerce/orders/locale/ca.yml

@@ -6,6 +6,7 @@ DateMake: Data de creació
 DateExit: Data d'eixida
 SendMethod: Forma d'enviament
 LastOrders: Últimes comandes
+Show orders from: Mostra comandes desde
 'Balance:': 'Saldo:'
 PaymentInfo: >-
   La quantitat mostrada és el teu saldo pendent (negatiu) o favorable a dia
@@ -27,10 +28,6 @@ Consignee: Consignatari
 Boxes: Caixes
 TotalWithVAT: Total amb IVA
 PayOrder: Pagar encàrrec
-'AmountToPay:': 'Quantitat a pagar (€):'
-AmountError: >-
-  La quantitat ha de ser un nombre positiu i inferior o igual a l'import pendent
-PayError: Error al realitzar el pagament
 An error has been in the payment: Sembla que hi ha hagut un error en el pagament
 Retry: Reintenta
 Accept: Acceptar

forms/ecomerce/orders/locale/en.yml

@@ -6,6 +6,7 @@ DateMake: Creation date
 DateExit: Shipping date
 SendMethod: Delivery method
 LastOrders: Last orders
+Show orders from: Show orders from
 'Balance:': 'Balance:'
 PaymentInfo: >-
   The amount shown is your slope (negative) or favorable balance today, it
@@ -26,12 +27,6 @@ Consignee: Consignee
 Boxes: Bundles
 TotalWithVAT: Total with VAT
 PayOrder: Pay order
-'AmountToPay:': 'Amount to pay (€):'
-AmountError: >-
-  The amount must be a positive number less than or equal to the outstanding
-  amount
-PayError: Failed to make the payment
-An error has been in the payment: >-
-  It seems that there has been an error in the payment
+An error has been in the payment: It seems that there has been an error in the payment
 Retry: Retry
 Accept: Accept

forms/ecomerce/orders/locale/es.yml

@@ -6,6 +6,7 @@ DateMake: Fecha de creación
 DateExit: Fecha de salida
 SendMethod: Forma de envío
 LastOrders: Últimos pedidos
+Show orders from: Mostrar pedidos desde
 'Balance:': 'Saldo:'
 PaymentInfo: >-
   La cantidad mostrada es tu saldo pendiente (negativa) o favorable a día de
@@ -27,11 +28,6 @@ Consignee: Consignatario
 Boxes: Bultos
 TotalWithVAT: Total con IVA
 PayOrder: Pagar pedido
-'AmountToPay:': 'Cantidad a pagar (€):'
-AmountError: >-
-  La cantidad debe ser un número positivo e inferior o igual al importe
-  pendiente
-PayError: Error al realizar el pago
 An error has been in the payment: Parece que ha habido un error en el pago
 Retry: Reintentar
 Accept: Aceptar

forms/ecomerce/orders/locale/fr.yml

@@ -6,6 +6,7 @@ DateMake: Date de creation
 DateExit: Date de sortie
 SendMethod: Typo
 LastOrders: Les dernières commandes
+Show orders from: Afficher les commandes de
 'Balance:': 'Balance:'
 PaymentInfo: >-
   Le montant indiqué est votre pente (négative) ou balance favorable
@@ -27,12 +28,6 @@ Consignee: Destinataire
 Boxes: Colis
 TotalWithVAT: Total avec TVA
 PayOrder: Payer la commande
-'AmountToPay:': 'Montant à payer (€):'
-AmountError: >-
-  La quantité doit être un neméro positif et inférieur ou égal  à la somme
-  restant à payer
-PayError: Impossible d'effectuer le paiement
-An error has been in the payment: >-
-  Il semble qu'il ya eu une erreur dans le paiement
+An error has been in the payment: Il semble qu'il ya eu une erreur dans le paiement
 Retry: Réessayez
 Accept: Accepter

forms/ecomerce/orders/locale/mn.yml

@@ -6,6 +6,7 @@ DateMake: Creation date
 DateExit: Shipping date
 SendMethod: Delivery method
 LastOrders: Last orders
+Show orders from: '-Аас харуулах захиалга'
 'Balance:': 'Balance:'
 PaymentInfo: >-
   Үзүүлсэн хэмжээ цаашид захиалга эзэлж биш, таны налуу (сөрөг), эсвэл
@@ -26,12 +27,6 @@ Consignee: Consignee
 Boxes: Bundles
 TotalWithVAT: Total with VAT
 PayOrder: Pay order
-'AmountToPay:': 'Amount to pay (€):'
-AmountError: >-
-  The amount must be a positive number less than or equal to the outstanding
-  amount
-PayError: Failed to make the payment
-An error has been in the payment: >-
-  It seems that there has been an error in the payment
+An error has been in the payment: It seems that there has been an error in the payment
 Retry: Retry
 Accept: Accept

forms/ecomerce/orders/locale/pt.yml

@@ -6,6 +6,7 @@ DateMake: Data de criação
 DateExit: Data de saída
 SendMethod: Forma de envío
 LastOrders: Últimas encomendas
+Show orders from: Mostrar ordens de
 'Balance:': 'Saldo:'
 PaymentInfo: >-
   A quantidade mostrada é seu saldo pendente (negativo) ou favorável a dia de
@@ -27,11 +28,6 @@ Consignee: Consignatario
 Boxes: Bultos
 TotalWithVAT: Total com IVA
 PayOrder: Pagar encomenda
-'AmountToPay:': 'Quantidade a pagar (€):'
-AmountError: >-
-  A quantidade deve ser um número positivo e inferior ou igual ao importe
-  pendiente
-PayError: Erro ao realizar o pagamento
 An error has been in the payment: Parece que houve um erro no pagamento
 Retry: Tentar novamente
 Accept: Aceitar

forms/ecomerce/orders/orders.js

@@ -5,27 +5,32 @@ Hedera.Orders = new Class
 
 	,activate: function ()
 	{
-		this.tpv = new Hedera.Tpv ({conn: this.conn});
+		this.tpv = new Hedera.Tpv ({
+			conn: this.conn,
+			hash: this.hash
+		});
 		this.tpv.check (this._onTpvCheck.bind (this));
+
+		var params = this.params;
+
+		if (!params.$.from)
+		{
+			var from = new Date ();
+			from.setDate (from.getDate () - 30);
+			from.setHours (0, 0, 0, 0);
+			params.assign ({from: from});
+		}
 	}
 	
 	,_onTpvCheck: function (tpv, tpvOrder, tpvStatus)
 	{
 		if (tpvStatus === 'ko')
-			this.$('error-dialog').show ();
+			this.$.errorDialog.show ();
 	}
 
 	,onBasketClick: function ()
 	{
-		this.hash.set ({form: 'ecomerce/basket'});
-	}
-	
-	,repeaterFunc: function (res, form)
-	{
-		res.$('link').href = this.hash.make ({
-			form: 'ecomerce/ticket',
-			ticket: form.get ('id')
-		});
+		this.hash.setAll ({form: 'ecomerce/basket'});
 	}
 
 	// TPV
@@ -33,14 +38,15 @@ Hedera.Orders = new Class
 	,balanceConditionalFunc: function (field, value)
 	{
 		if (value >= 0)
-			Vn.Node.removeClass (this.$('balance'), 'negative');
+			Vn.Node.removeClass (this.$.balance, 'negative');
 		else
-			Vn.Node.addClass (this.$('balance'), 'negative');
+			Vn.Node.addClass (this.$.balance, 'negative');
 	}
 	
 	,onPayButtonClick: function ()
 	{
-		var amount = -this.$('debt').value;
+		var amount = -this.$.debt.value;
+
 		amount = amount <= 0 ? null : amount;
 
 		var defaultAmountStr = '';

forms/ecomerce/orders/style.css

@@ -1,10 +1,7 @@
-.orders
+
+.orders .card
 {
-	padding: 1em;
-}
-.orders .box
-{
-	max-width: 25em;
+	max-width: 28em;
 }
 
 /* Balance */
@@ -12,7 +9,6 @@
 .balance
 {
 	margin-top: 1.2em;
-	margin-right: .5em;
 }
 .balance > *
 {
@@ -29,6 +25,7 @@
 	cursor: pointer;
 	height: 1.2em;
 	cursor: pointer;
+	margin: 0 .3em;
 }
 .balance > .negative
 {
@@ -48,25 +45,7 @@
 
 /* List */
 
-.orders .item
-{
-	display: block;
-	padding: 1em;
-	border-bottom: 1px solid #DDD;
-}
-.orders .item:hover
-{
-	background-color: rgba(1, 1, 1, 0.05);
-}
-.orders .item > p
-{
-	margin: .1em 0;
-}
-.orders .item > p.important
-{
-	font-size: 1.2em;
-}
-.orders .item > p.total
+.orders .list-row > p.total
 {
 	float: right;
 }

forms/ecomerce/orders/ui.xml

@@ -1,7 +1,10 @@
 <vn>
-<div id="title">
-	<h1><t>LastOrders</t></h1>
-</div>
+<vn-lot-query id="params">
+	<vn-spec name="from" type="Date"/>
+</vn-lot-query>
+<h1 id="title">
+	_LastOrders
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="basket"
@@ -16,18 +19,17 @@
 		on-click="onPayButtonClick"/>
 	<div class="balance">
 		<span class="label">
-			<t>Balance:</t>
+			_Balance:
 		</span> 
 		<span class="amount" id="balance">
-			<htk-text id="debt"
+			<htk-text
+				lot="debt"
+				name="debt"
 				format="%.2d€"
-				conditional-func="balanceConditionalFunc"
-				column="debt">
-				<db-form property="form">
+				conditional-func="balanceConditionalFunc">
+				<db-form id="debt">
 					<db-model property="model">
-						<custom>
 						SELECT -myClientGetDebt(NULL) debt
-						</custom>
 					</db-model>
 				</db-form>
 			</htk-text>
@@ -39,32 +41,31 @@
 			alt="Info"/>
 	</div>
 </div>
-<div id="form" class="orders">
-	<div class="box confirmed">
-		<htk-repeater form-id="iter" renderer="repeaterFunc">
-			<db-model property="model" id="tickets">
-				<custom>
-					CALL myTicketList (NULL, NULL);
-				</custom>
+<div id="main" class="orders">
+	<div class="card form">
+		<div>
+			<label>_Show orders from</label>
+			<htk-date-chooser lot="params" name="from"/>
+		</div>
+	</div>
+	<div class="card list">
+		<htk-repeater form-id="iter">
+			<db-model property="model" lot="params">
+				CALL myTicketList (#from, NULL)
 			</db-model>
 			<custom>
-				<a id="link" class="item" title="_SeeOrder">
+				<a href="#!form=ecomerce/ticket&amp;ticket={{id}}"
+					class="list-row"
+					title="_SeeOrder">
 					<p class="important total">
-						<htk-text form="iter" column="total" format="%.2d€"/>
+						<htk-text lot="iter" name="total" format="%.2d€"/>
 					</p>
 					<p class="important">
-						<htk-text form="iter" column="landed" format="%D"/>
+						<htk-text lot="iter" name="landed" format="%D"/>
 					</p>
-					<p>
-						@<htk-text form="iter" column="id"/>
-					</p>
-					<p>
-						<htk-text form="iter" column="nickname"/>
-					</p>
-					<p>
-						<htk-text form="iter" column="agency"/>
-					</p>
-					<div class="clear"/>
+					<p>@{{id}}</p>
+					<p>{{nickname}}</p>
+					<p>{{agency}}</p>
 				</a>
 			</custom>
 		</htk-repeater>

forms/ecomerce/ticket/style.css

@@ -1,14 +1,3 @@
-.ticket
-{
-	padding: 1em;
-}
-.ticket .box
-{
-	max-width: 30em;
-	margin: 0 auto;
-	padding: 2em;
-	color: #333;
-}
 
 /* Header */
 
@@ -62,13 +51,18 @@
 {
 	padding: .5em 0;
 }
+.ticket .line > .photo
+{
+	margin-right: 1em;
+	float: left;
+	border-radius: 50%;
+	height: 3.2em;
+	width: 3.2em;
+}
 .ticket .line p
 {
 	margin: .1em 0;
-}
-.ticket .amount
-{
-	float: left;
+	margin-left: 4em;
 }
 .ticket .subtotal
 {

forms/ecomerce/ticket/ticket.js

@@ -8,9 +8,8 @@ Hedera.Ticket = new Class
 		if (!ticket.value)
 			return;
 
-		var batch = new Sql.Batch ();
-		batch.addValue ('ticket', ticket.value);
-		this.conn.execQuery ('CALL myTicketLogAccess (#ticket)', null, batch);
+		var params = {ticket: ticket.value};
+		this.conn.execQuery ('CALL myTicketLogAccess (#ticket)', params);
 	}
 
 	,onTicketReady: function (form)
@@ -23,9 +22,8 @@ Hedera.Ticket = new Class
 
 	,onPrintClick: function ()
 	{
-		var batch = new Sql.Batch ();
-		batch.addValue ('ticket', this.$('ticket-id').value);
-		this.gui.openReport ('delivery-note', batch);
+		var params = {ticket: this.hash.get ('ticket')};
+		this.gui.openReport ('delivery-note', params);
 	}
 	
 	,subtotalRenderer: function (column, form)
@@ -33,21 +31,20 @@ Hedera.Ticket = new Class
 		column.value = this.subtotal (form);
 	}
 	
-	,repeaterFunc: function (res, form)
+	,repeaterFunc: function (scope, form)
 	{
-		res.$('subtotal').value = this.subtotal (form);
+		scope.$.subtotal.value = this.subtotal (form);
 	}
 
 	,subtotal: function (form)
 	{
-		var price = form.get ('price');
-		var discount = form.get ('discount');
-		return form.get ('quantity') * price * ((100 - discount) / 100);
+		var row = form.$;
+		return row.quantity * row.price * ((100 - row.discount) / 100);
 	}
 
 	,onPackagesChanged: function (model)
 	{
-		this.$('packages').node.style.display =
+		this.$.packages.node.style.display =
 			model.numRows > 0 ? 'block' : 'none';
 	}
 });

forms/ecomerce/ticket/ui.xml

@@ -1,96 +1,75 @@
 <vn>
-<vn-group>
-	<vn-param id="ticket-id" on-changed="onTicketChange"/>
-	<vn-hash-param key="ticket" param="ticket-id"/>
-	<sql-batch id="batch">
-		<custom>
-			<item name="ticket" param="ticket-id"/>
-		</custom>
-	</sql-batch>
-	<db-form id="ticket" on-ready="onTicketReady">
-		<db-model id="ticket-data" property="model" batch="batch">
-			<custom>
+<vn-lot-query id="params">
+	<vn-spec name="ticket" type="Number"/>
+</vn-lot-query>
+<db-lot id="ticket" lot="params" on-ready="onTicketReady">
 	CALL myTicketGet(#ticket)
-			</custom>
-		</db-model>
-	</db-form>
-</vn-group>
-<div id="title">
-	<h1><t>OrderDetail</t></h1>
-</div>
+</db-lot>
+<h1 id="title">
+	_OrderDetail
+</h1>
 <div id="actions" class="action-bar">
 	<htk-bar-button
-		icon="print"
-		tip="_Print delivery note"
+		icon="receipt"
+		tip="_Delivery note"
 		on-click="onPrintClick"/>
 </div>
-<div id="form" class="ticket">
-	<div class="box">
+<div id="main" class="ticket">
+	<div class="card form">
 		<htk-loader class="head" form="ticket">
 			<div>
 				<p class="important ticket-id">
-					@<htk-text column="id" form="ticket"/>
+					@{{ticket.id}}
 				</p>
 				<p>
-					<htk-text form="ticket" column="landed" format="%D"/>
+					<htk-text lot="ticket" name="landed" format="%D"/>
 				</p>
 				<p>
-					<span id="method"></span> <htk-text form="ticket" column="agency"/>
+					<span id="method"/> {{ticket.agency}}
 				</p>
 			</div>
 			<div class="address">
 				<p>
-					<htk-text form="ticket" column="nickname"/>
+					{{ticket.nickname}}
 				</p>
 				<p>
-					<htk-text form="ticket" column="street"/>
+					{{ticket.street}}
 				</p>
 				<p>
-					<htk-text form="ticket" column="postalCode"/> 
-					<htk-text form="ticket" column="city"/> 
-					(<htk-text form="ticket" column="province"/>)
+					{{ticket.postalCode}} {{ticket.city}} ({{ticket.province}})
 				</p>
 			</div>
 			<div class="total">
 				<p class="important total">
-					<t>Total</t> 
-					<htk-text format="%.2d€" form="ticket" column="taxBase"/>
+					_Total 
+					<htk-text lot="ticket" name="taxBase" format="%.2d€"/>
 				</p>
 				<p class="important total">
-					<t>Total + tax</t> 
-					<htk-text format="%.2d€" form="ticket" column="total"/>
+					_Total + tax
+					<htk-text lot="ticket" name="total" format="%.2d€"/>
 				</p>
 			</div>
 		</htk-loader>
-		<htk-repeater form-id="iter" renderer="repeaterFunc">
-			<db-model
-				property="model"
-				id="movements"
-				batch="batch">
-				<custom>
+		<htk-repeater renderer="repeaterFunc">
+			<db-model property="model" id="movements" lot="params">
 				CALL myTicketGetRows(#ticket)
-				</custom>
 			</db-model>
 			<custom>
 				<div class="line">
 					<htk-image
-						form="iter"
-						column="image"
+						value="{{image}}"
 						class="photo"
 						directory="catalog"
 						subdir="200x200"
 						full-dir="900x900"/>
 					<p class="concept">
-						<htk-text form="iter" column="concept"/> 
-						<htk-text form="iter" column="size"/> 
-						<htk-text form="iter" column="category"/>
+						{{concept}} {{size}} {{category}}
 					</p>
 					<p class="amount">
-						<htk-text form="iter" column="quantity"/> x
-						<htk-text form="iter" column="price" format="%.2d€"/>
-					</p>
-					<p class="subtotal">
+						{{quantity}} x <htk-text lot="iter" name="price" format="%.2d€"/>
+						<span class="subtotal">
 							<htk-text id="subtotal" format="%.2d€"/>
+						</span>
 					</p>
 					<div class="clear"/>
 				</div>
@@ -100,28 +79,25 @@
 			<db-model
 				property="model"
 				on-status-changed="onPackagesChanged"
-				batch="batch">
-				<custom>
+				lot="params">
 				CALL myTicketGetPackages (#ticket)
-				</custom>
 			</db-model>
 			<custom>
 				<div class="line">
 					<htk-image
-						form="iter"
-						column="image"
+						value="{{image}}"
 						class="photo"
 						directory="catalog"
 						subdir="200x200"
 						full-dir="900x900"/>
 					<p class="subtotal">
-						<htk-text form="iter" column="quantity"/>
+						{{quantity}}
 					</p>
 					<p class="concept">
-						<htk-text form="iter" column="name"/>
+						{{name}}
 					</p>
 					<p class="amount">
-						@<htk-text form="iter" column="id"/>
+						{{id}}
 					</p>
 					<div class="clear"/>
 				</div>

forms/news/new/new.js

@@ -10,13 +10,13 @@ Hedera.New = new Class
 
 	,activate: function ()
 	{
-		this.$('model').mode = Db.Model.Mode.ON_DEMAND;
-		this.$('model').setDefault ('userFk', 'news',
+		this.$.model.mode = Db.Model.Mode.ON_DEMAND;
+		this.$.model.setDefault ('userFk', 'news',
 			new Sql.Function ({schema: 'account', name: 'userGetId'}));
 
 		tinymce.init ({
 			 mode : 'exact'
-			,target: this.$('html-editor')
+			,target: this.$.htmlEditor
 			,plugins: [
 				 "advlist autolink lists link image charmap print preview hr"
 				,"anchor pagebreak searchreplace wordcount visualblocks"
@@ -24,7 +24,7 @@ Hedera.New = new Class
 				,"save table contextmenu directionality emoticons template"
 				,"paste textcolor"
 			]
-			,toolbar1:
+			,toolbar:
 				 "   print preview | link image media emoticons blockquote"
 				+" | insertfile undo redo | bold italic"
 				+" | alignleft aligncenter alignright alignjustify"
@@ -53,7 +53,7 @@ Hedera.New = new Class
 		if (!this.editor)
 			return;
 	
-		var newHtml = this.$('iter').get ('text');
+		var newHtml = this.$.iter.get ('text');
 		
 		if (!newHtml)
 			newHtml = '';
@@ -63,7 +63,7 @@ Hedera.New = new Class
 
 	,onStatusChange: function (form)
 	{
-		if (this.$('new-id').value == 0)
+		if (this.hash.get('new') == 0)
 			form.insertRow ();
 	}
 	
@@ -80,13 +80,13 @@ Hedera.New = new Class
 
 	,onAcceptClick: function ()
 	{
-		this.$('iter').set ('text', this.editor.getContent ());
-		this.$('iter').performOperations ();
+		this.$.iter.set ('text', this.editor.getContent ());
+		this.$.iter.performOperations ();
 	}
 	
 	,onReturnClick: function ()
 	{
-		this.hash.set ({'form': 'news/news'});
+		this.hash.setAll ({'form': 'news/news'});
 	}
 });
 

forms/news/new/style.css

@@ -1,12 +1,7 @@
 
-.new
-{
-	padding: 1em;
-}
-.new .box
+.new .card
 {
 	max-width: 38em;
-	padding: 2em;
 }
 
 /* Form */

forms/news/new/ui.xml

@@ -1,29 +1,21 @@
 <vn>
 <vn-group>
-	<vn-param id="new-id"/>
-	<vn-hash-param key="new" param="new-id"/>
 	<db-form id="iter" on-status-changed="onStatusChange">
 		<db-model
 			id="model"
 			property="model"
 			updatable="true"
+			lot="hash"
 			on-operations-done="onOperationsDone">
-			<custom>
 			SELECT id, title, text, tag, priority
 				FROM news WHERE id = #new
-			</custom>
-			<sql-batch property="batch">
-				<custom>
-					<item name="new" param="new-id"/>
-				</custom>
-			</sql-batch>
 		</db-model>
 	</db-form>
-	<db-param form="iter" column="text" on-changed="onBodyChange"/>
+	<vn-param lot="iter" name="text" on-changed="onBodyChange"/>
 </vn-group>
-<div id="title">
-	<h1><t>AddEditNew</t></h1>
-</div>
+<h1 id="title">
+	_AddEditNew
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="ok"
@@ -34,33 +26,29 @@
 		tip="_Return"
 		on-click="onReturnClick"/>
 </div>
-<div id="form" class="new">
-	<div class="box">
-		<div class="form">
-			<div class="form-group">
-				<label><t>Title</t></label>
-				<htk-entry form="iter" column="title"/>
+<div id="main" class="new">
+	<div class="card form">
+		<div>
+			<label>_Title</label>
+			<htk-entry lot="iter" name="title"/>
 		</div>
-			<div class="form-group">
-				<label><t>Tag</t></label>
-				<htk-combo form="iter" column="tag">
+		<div>
+			<label>_Tag</label>
+			<htk-combo lot="iter" name="tag">
 				<db-model property="model">
-						<custom>
 					SELECT name, description FROM newsTag
 						ORDER BY description
-						</custom>
 				</db-model>
 			</htk-combo>
 		</div>
-			<div class="form-group">
-				<label><t>Priority</t></label>
-				<htk-entry form="iter" column="priority"/>
+		<div>
+			<label>_Priority</label>
+			<htk-entry lot="iter" name="priority"/>
 		</div>
-			<div class="form-group">
-				<label><t>NewBody</t></label>
+		<div>
+			<label>_NewBody</label>
 			<textarea id="html-editor"/>
 		</div>
 	</div>
 </div>
-</div>
 </vn>

forms/news/news/news.js

@@ -3,28 +3,26 @@ Hedera.News = new Class
 ({
 	Extends: Hedera.Form
 
-	,editNew: function (newId)
-	{
-		this.hash.set ({
-			'form': 'news/new'
-			,'new': newId
-		});
-	}
-
-	,onEditClick: function (button, form)
-	{
-		this.editNew (button.value);
-	}
-
-	,onDeleteClick: function (button, form)
+	,onDeleteClick: function (button)
 	{
 		if (confirm (_('ReallyDelete')))
-			form.deleteRow ();
+			button.lot.deleteRow ();
+	}
+
+	,repeaterFunc: function (res, lot)
+	{
+		res.$.link.href = this.hash.make ({
+			form: 'news/new',
+			new: lot.$.id
+		});
 	}
 	
 	,onAddClick: function ()
 	{
-		this.editNew (0);
+		this.hash.setAll ({
+			form: 'news/new',
+			new: 0
+		});
 	}
 });
 

forms/news/news/style.css

@@ -1,32 +1,12 @@
-.news
+
+.news .card
 {
-	padding: 1em;
-}
-.news .box
-{
-	max-width: 35em;
-	margin: 0 auto;
+	max-width: 30em;
 }
 
 /* Items */
 
-.news .item
-{
-	padding: 1em;
-	border-bottom: 1px solid #DDD;
-}
-.news .item > p
-{
-	margin: .1em 0;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-.news .item > p.important
-{
-	font-size: 1.2em;
-}
-.news .item > .photo
+.news .list-row > .photo
 {
 	float: left;
 	margin-right: 1em;
@@ -34,8 +14,3 @@
 	width: 4.2em;
 	border-radius: .3em;
 }
-.news .item > button
-{
-	float: right;
-	margin: 0;
-}

forms/news/news/ui.xml

@@ -1,41 +1,34 @@
 <vn>
-<div id="title">
-	<h1><t>NewsManagement</t></h1>
-</div>
+<h1 id="title">
+	_NewsManagement
+</h1>
 <div id="actions">
 	<htk-bar-button
 		icon="add"
 		tip="_AddNew"
 		on-click="onAddClick"/>
 </div>
-<div id="form" class="news">
-	<div class="box">
-		<htk-repeater form-id="iter">
+<div id="main" class="news">
+	<div class="card">
+		<htk-repeater form-id="iter" renderer="repeaterFunc">
 			<db-model property="model" id="news-model" updatable="true">
-				<custom>
 				SELECT n.id, u.nickname, priority, image, title
 					FROM news n
 						JOIN account.user u ON u.id = n.userFk
 					ORDER BY priority, n.created DESC
-				</custom>
 			</db-model>
 			<custom>
-				<div class="item">
+				<a id="link" class="list-row" title="_EditNew">
+					<div class="actions">
 						<htk-button
-						form="iter"
-						column="id"
-						tip="_EditNew"
-						icon="edit"
-						on-click="onEditClick"/>
-					<htk-button
-						form="iter"
-						column="id"
+							lot="iter"
 							tip="_Remove"
 							icon="delete"
 							on-click="onDeleteClick"/>
+					</div>
 					<htk-image
-						form="iter"
-						column="image"
+						lot="iter"
+						name="image"
 						class="photo"
 						directory="news"
 						subdir="200x200"
@@ -43,16 +36,15 @@
 						editable="true"
 						conn="conn"/>
 					<p class="important">
-						<htk-text form="iter" column="title"/>
+						{{title}}
 					</p>
 					<p>
-						<htk-text form="iter" column="nickname"/>
+						{{nickname}}
 					</p>
 					<p>
-						<t>Priority</t> 
-						<htk-text form="iter" column="priority"/>
+						<span>_Priority</span> {{priority}}
 					</p>
-				</div>
+				</a>
 			</custom>
 		</htk-repeater>
 	</div>

forms/preview/locale/ca.yml

@@ -0,0 +1,3 @@
+Report: Informe
+Preview: Visualització prèvia
+Print: Imprimir

forms/preview/locale/en.yml

@@ -0,0 +1,3 @@
+Report: Report
+Preview: Preview
+Print: Print

forms/preview/locale/es.yml

@@ -0,0 +1,3 @@
+Report: Informe
+Preview: Vista preliminar
+Print: Imprimir

forms/preview/locale/fr.yml

@@ -0,0 +1,3 @@
+Report: Rapport
+Preview: Avant-première
+Print: Imprimer