Order configuration assistant now it's clearer

debian/changelog

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

forms/ecomerce/checkout/checkout.js

@@ -1,18 +1,16 @@
 
-Hedera.Checkout = new Class
+Hedera.Checkout = new Class ({
-({
+	Extends: Hedera.Form,
-	Extends: Hedera.Form
 
-	,activate: function ()
+	activate: function() {
-	{
 		this.autoStepLocked = true;
+		this.$('assistant').stepsIndex = this.agencySteps;
 
 		this.today = new Date();
 		this.today.setHours(0, 0, 0, 0);
-	}
+	},
 
-	,onValuesReady: function ()
+	onValuesReady: function() {
-	{
 		var orderForm = this.$('order-form');
 		var defaultsForm = this.$('defaults');
 
@@ -21,16 +19,13 @@ Hedera.Checkout = new Class
 
 		var date;
 
-		if (orderForm.numRows > 0)
+		if (orderForm.numRows > 0) {
-		{
 			var i = orderForm;
 			date = i.get('sent');
-		}
+		} else
-		else
 			var i = defaultsForm;
 		
-		if (!date || date.getTime () < (new Date ()).getTime ())
+		if (!date || date.getTime() <(new Date()).getTime()) {
-		{
 			date = new Date();
 
 			if (i.get('deliveryMethod') != 'PICKUP')
@@ -43,17 +38,14 @@ Hedera.Checkout = new Class
 		this.$('address').value = i.get('addressFk');
 
 		this.autoStepLocked = false;
-	}
+	},
 	
-	,disableButtons: function (disable)
+	disableButtons: function(disable) {
-	{
-		this.$('confirm-agency').disabled = disable;
 		this.$('confirm-delivery').disabled = disable;
 		this.$('confirm-pickup').disabled = disable;
-	}
+	},
 
-	,onConfirmClick: function ()
+	onConfirmClick: function() {
-	{
 		this.disableButtons(true);
 	
 		var query = 'CALL basketConfigure(#date, #method, #agency, #address)';
@@ -66,10 +58,9 @@ Hedera.Checkout = new Class
 	
 		this.conn.execQuery(query,
 			this.onBasketConfigured.bind(this), batch);
-	}
+	},
 
-	,onBasketConfigured: function (resultSet)
+	onBasketConfigured: function(resultSet) {
-	{
 		this.disableButtons(false);
 
 		if (!resultSet.fetchResult())
@@ -81,84 +72,100 @@ Hedera.Checkout = new Class
 			Htk.Toast.showMessage(_('OrderStarted'));
 
 		this.hash.set({form: 'ecomerce/catalog'});
-	}
+	},
 
-	,onCancelClick: function ()
+	onCancelClick: function() {
-	{
 		if (this.$('order-form').numRows > 0)
 			window.history.back();
 		else
-			this.hash.set ({'form': 'ecomerce/orders'});
+			this.hash.set({form: 'ecomerce/orders'});
-	}
+	},
 	
-	,agencySteps: ['method', 'date', 'address', 'agency', 'confirm-agency']
+	agencySteps: ['method', 'date', 'address', 'agency', 'confirm-delivery'],
-	,pickupSteps: ['method', 'date', 'address', 'pickup', 'confirm-pickup']
+	pickupSteps: ['method', 'date', 'address', 'pickup', 'confirm-pickup'],
 
-	,stepFunc: function (stepIndex)
+	isDelivery: function() {
-	{
+		return this.$('rg-method').value != 'PICKUP';
-		var isDelivery = this.$('rg-method').value == 'AGENCY';
+	},
-		var steps = isDelivery ? this.agencySteps : this.pickupSteps;
-		var stepId = steps[stepIndex];
 
-		if (!stepId)
+	onMethodChange: function() {
-			return null;
+		this.$('assistant').stepsIndex = this.isDelivery() ?
+			this.agencySteps : this.pickupSteps;
+		this.onFieldChange();
+	},
 
-		switch (stepId)
+	methodValidate: function() {
-		{
+		if (!this.$('rg-method').isSelected())
-			case 'date':
+			throw new Error(_('Please select an option'));
-				Vn.Node.setText (this.$('date-question'), isDelivery ?
+	},
+
+	dateShow: function() {
+		Vn.Node.setText(this.$('date-question'), this.isDelivery() ?
 			_('OrderDateDeliveryQuestion'):
 			_('OrderDatePickupQuestion'));
 		this.$('calendar').goToSelectedMonth();
-				break;
+	},
-			case 'address':
+
-				Vn.Node.setText (this.$('address-question'), isDelivery ?
+	dateValidate: function() {
+		if (!this.$('calendar').value)
+			throw new Error(_('Please select a date'));
+	},
+
+	addressShow: function() {
+		Vn.Node.setText(this.$('address-question'), this.isDelivery() ?
 			_('AddressQuestion'):
 			_('AddressQuestionPickup'));
-				break;
+	},
-			case 'agency':
+
+	addressValidate: function() {
+		if (this.$('address-form').row == -1)
+			throw new Error(_('Please select an address'));
+	},
+
+	agencyShow: function() {
 		this.$('agencies').refresh();
-				break;
+	},
-			case 'pickup':
+
+	agencyValidate: function() {
+		if (this.$('agency-combo').row == -1 && this.isDelivery())
+			throw new Error(_('Please select an agency'));
+	},
+
+	pickupShow: function() {
 		this.$('warehouses').refresh();
-				break;
+	},
-		}
 
-		return this.$(stepId +'-step');
+	pickupValidate: function() {
-	}
+		if (this.$('warehouse-combo').row == -1)
+			throw new Error(_('Please select a store'));
+	},
 	
-	,onFieldChange: function ()
+	onFieldChange: function() {
-	{
 		if (!this.autoStepLocked)
 			this.$('assistant').moveNext();
-	}
+	},
 	
-	,goNextStep: function ()
+	goNextStep: function() {
-	{
 		this.$('assistant').moveNext();
-	}
+	},
 	
-	,addressRenderer: function (builder, form)
+	addressRenderer: function(builder, form) {
-	{
 		builder.$('address').addEventListener('click',
 			this.onAddressClick.bind(this, form.get('id')));
-	}
+	},
 	
-	,onAddressClick: function (addressId)
+	onAddressClick: function(addressId) {
-	{
 		this.$('address').value = addressId;
 		this.goNextStep();
-	}
+	},
 	
-	,onAddressChange: function ()
+	onAddressChange: function() {
-	{
 		if (this.selectedNode)
 			Vn.Node.removeClass(this.selectedNode, 'selected');
 
 		var row = this.$('addresses').search('id', this.$('address').value);
 
-		if (row != -1)
+		if (row != -1) {
-		{
 			var builder = this.$('repeater').getBuilder(row);
 		
 			this.selectedNode = builder.$('address');
@@ -166,23 +173,19 @@ Hedera.Checkout = new Class
 		}
 
 		this.$('address-form').row = row;
-	}
+	},
 	
-	,onAgenciesReady: function (model)
+	onAgenciesReady: function(model) {
-	{
 		if (model.ready && model.numRows == 0)
 			Htk.Toast.showError(_('NoAgeciesAvailableForDate'));
-	}
+	},
 	
-	,onWarehousesReady: function (model)
+	onWarehousesReady: function(model) {
-	{
 		if (model.ready && model.numRows == 0)
 			Htk.Toast.showError(_('NoWarehousesAvailableForDate'));
-	}
+	},
 	
-	,calendarRestrict: function (date)
+	calendarRestrict: function(date) {
-	{
 		return date.getTime() >= this.today.getTime();
 	}
 });
-

forms/ecomerce/checkout/locale/ca.yml

@@ -19,6 +19,11 @@ Warehouse: Magatzem
 Confirm: Confirmar
 OrderStarted: Comanda començada
 OrderUpdated: Comanda actualitzada
+Please select an option: Si us plau tria una opció
+Please select a date: Si us plau tria una data
+Please select an address: Si us plau tria una direcció
+Please select an agency: Si us plau tria una agència
+Please select a store: Si us plau tria un magatzem
 NoAgeciesAvailableForDate: >-
   No hi ha agències disponibles per a la data i el consignatari seleccionats,
   modifica la data d'enviament de la comanda

forms/ecomerce/checkout/locale/en.yml

@@ -19,6 +19,11 @@ Warehouse: Store
 Confirm: Confirm
 OrderStarted: Order started
 OrderUpdated: Order updated
+Please select an option: Please select an option
+Please select a date: Please select a date
+Please select an address: Please select an address
+Please select an agency: Please select an agency
+Please select a store: Please select a store
 NoAgeciesAvailableForDate: >-
   No agencies available for the selected date and consignee, change the shipping
   date of your order

forms/ecomerce/checkout/locale/es.yml

@@ -19,6 +19,11 @@ Warehouse: Almacén
 Confirm: Confirmar
 OrderStarted: Pedido empezado
 OrderUpdated: Pedido actualizado
+Please select an option: Por favor elige una opción
+Please select a date: Por favor elige una fecha
+Please select an address: Por favor elige una dirección
+Please select an agency: Por favor elige una agencia
+Please select a store: Por favor elige un almacén
 NoAgeciesAvailableForDate: >-
   No hay agencias disponibles para la fecha y el consignatario seleccionados,
   modifica la fecha de envío del pedido

forms/ecomerce/checkout/locale/fr.yml

@@ -19,6 +19,11 @@ Warehouse: MAgasin
 Confirm: Confirmer
 OrderStarted: Commande a commencé
 OrderUpdated: Mise à jour commande
+Please select an option: Veuillez choisir une option
+Please select a date: Veuillez choisir une date
+Please select an address: Veuillez choisir une adresse
+Please select an agency: Veuillez choisir une agence
+Please select a store: Veuillez choisir un entrepôt
 NoAgeciesAvailableForDate: >-
   Aucune agence disponibles pour la date et le destinataire sélectionné, changer
   la date d'envoi de la commande

forms/ecomerce/checkout/locale/pt.yml

@@ -19,6 +19,11 @@ Warehouse: Armazém
 Confirm: Confirmar
 OrderStarted: Encomenda iniciada
 OrderUpdated: Encomenda actualizada
+Please select an option: Por favor escolha uma opção
+Please select a date: Por favor, escolha uma data
+Please select an address: Por favor, escolha um endereço
+Please select an agency: Por favor, escolha uma agência
+Please select a store: Por favor, escolha um armazém
 NoAgeciesAvailableForDate: >-
   Não há agências disponíveis para a data e o consignatario escolhido, modifique
   a data de envío do pedido

forms/ecomerce/checkout/style.css

@@ -4,10 +4,15 @@
 	max-width: 40em;
 	margin: 0 auto;
 }
+.checkout .bar
+{
+	padding: .2em;
+	margin-bottom: 1em;
+}
 .checkout .form
 {
 	max-width: 40em;
-	padding: 3em;
+	padding: 4em;
 }
 
 /* Step */
@@ -20,7 +25,7 @@
 }
 .answers .htk-select
 {
-	max-width: 8em;
+	max-width: 10em;
 	display: block;
 	margin: 0 auto;
 	font-size: 1.6em;

forms/ecomerce/checkout/ui.xml

@@ -70,21 +70,21 @@
 		on-click="onCancelClick"/>
 </div>
 <div id="form" class="checkout">
+	<div class="box bar">
+		<htk-assistant-bar assistant="assistant"/>
+	</div>
 	<div class="box">
 		<div class="form">
-			<htk-assistant
+		<htk-assistant id="assistant">
-				id="assistant"
+			<htk-step
-				step-count="5"
+				name="method"
-				step-func="stepFunc"
+				validate-func="methodValidate">
-				node="assistant-node"/>
-			<div id="assistant-node">
-				<div id="method-step">
 				<h2><t>DeliveryOrPickupQuestion</t></h2>
 				<div class="answers radio">
 					<htk-radio-group
 						id="rg-method"
 						param="method"
-							on-changed="onFieldChange"/>
+						on-changed="onMethodChange"/>
 					<div>
 						<htk-radio radio-group="rg-method" value="AGENCY"/>
 						<label><t>Receive the order</t></label>
@@ -94,8 +94,11 @@
 						<label><t>PickupInStore</t></label>
 					</div>
 				</div>
-				</div>
+			</htk-step>
-				<div id="date-step">
+			<htk-step
+				name="date"
+				show-func="dateShow"
+				validate-func="dateValidate">
 				<h2 id="date-question"/>
 				<div class="answers">
 					<htk-calendar
@@ -105,11 +108,14 @@
 						restrict-func="calendarRestrict"
 						on-changed="onFieldChange"/>
 				</div>
-				</div>
+			</htk-step>
-				<div id="address-step">
+			<htk-step
+				name="address"
+				show-func="addressShow"
+				validate-func="addressValidate">
 				<h2 id="address-question"/>
-					<db-form id="address-form" model="addresses"/>
 				<div class="answers target">
+					<db-form id="address-form" model="addresses"/>
 					<htk-repeater
 						id="repeater"
 						form-id="iter"
@@ -134,8 +140,11 @@
 						</custom>
 					</htk-repeater>
 				</div>
-				</div>
+			</htk-step>
-				<div id="agency-step">
+			<htk-step
+				name="agency"
+				show-func="agencyShow"
+				validate-func="agencyValidate">
 				<h2><t>AgencyQuestion</t></h2>
 				<div class="answers target">
 					<htk-combo
@@ -144,8 +153,11 @@
 						on-changed="onFieldChange"
 						model="agencies"/>
 				</div>
-				</div>
+			</htk-step>
-				<div id="pickup-step">
+			<htk-step
+				name="pickup"
+				show-func="pickupShow"
+				validate-func="pickupValidate">
 				<h2><t>PickupWarehouseQuestion</t></h2>
 				<div class="answers target">
 					<htk-combo
@@ -154,8 +166,9 @@
 						on-changed="onFieldChange"
 						model="warehouses"/>
 				</div>
-				</div>
+			</htk-step>
-				<div id="confirm-agency-step" class="confirm">
+			<htk-step
+				name="confirm-delivery">
 				<h2><t>ConfirmToAccessCatalog</t></h2>
 				<div class="answers target">
 					<p>
@@ -169,32 +182,14 @@
 						<t>Agency</t> 
 						<htk-text form="agency-combo" column="description"/>
 					</p>
-						<button id="confirm-agency" class="thin" on-click="onConfirmClick">
-							<t>Confirm</t>
-						</button>
-						<div class="clear"/>
-					</div>
-				</div>
-				<div id="confirm-delivery-step" class="confirm">
-					<h2><t>ConfirmToAccessCatalog</t></h2>
-					<div class="answers target">
-						<p>
-							<t>Arrival</t> 
-							<htk-text format="%D" param="date"/>
-						</p>
-						<p>
-							<htk-text form="address-form" column="street"/>
-						</p>
-						<p>
-							<t>ReceiveThroughtRoute</t>
-						</p>
 					<button id="confirm-delivery" class="thin" on-click="onConfirmClick">
 						<t>Confirm</t>
 					</button>
 					<div class="clear"/>
 				</div>
-				</div>
+			</htk-step>
-				<div id="confirm-pickup-step" class="confirm">
+			<htk-step
+				name="confirm-pickup">
 				<h2><t>ConfirmToAccessCatalog</t></h2>
 				<div class="answers target">
 					<p>
@@ -210,9 +205,8 @@
 					</button>
 					<div class="clear"/>
 				</div>
-				</div>
+			</htk-step>
-			</div>
+		</htk-assistant>
-			<htk-assistant-bar assistant="assistant"/>
 		</div>
 	</div>
 </div>

js/htk/assistant-bar.js

@@ -2,47 +2,29 @@
 var Widget = require('./widget');
 var Assistant = require('./assistant');
 
-module.exports = new Class
+module.exports = new Class({
-({
+	Extends: Widget,
-	Extends: Widget
+	Tag: 'htk-assistant-bar',
-	,Tag: 'htk-assistant-bar'
+	Properties: {
-	,Properties:
+		assistant: {
-	{
+			type: Assistant,
-		assistant:
+			set: function(x) {
-		{
+				this.link({_assistant: x}, {
-			type: Assistant
+					'step-change': this.onStepChange,
-			,set: function (x)
+					'steps-change': this.onStepsChange
-			{
+				});
-				this.link ({_assistant: x}, {'step-change': this.onStepChange});
+				this.onStepsChange();
-
+			},
-				var stepCount = x.stepCount;
+			get: function() {
-				var steps = this._steps;
-
-				Vn.Node.removeChilds (steps);
-				steps.style.width = (stepCount * 1.7) + 'em';
-		
-				for (var i = 0; i < stepCount; i++)
-				{
-					var img = this.createElement ('img');
-					img.src = 'image/step.svg';
-					img.addEventListener ('click', this.setStep.bind (this, i));
-					steps.appendChild (img);
-				}
-
-				this.onStepChange ();
-			}
-			,get: function ()
-			{
 				return this._assistant;
 			}
 		}
-	}
+	},
 
-	,_assistant: null
+	_assistant: null,
-	,_stepIndex: -1
+	_stepIndex: -1,
 	
-	,render: function ()
+	render: function() {
-	{
 		var bar = this.createRoot('div');
 		bar.className = 'htk-assistant-bar';
 		
@@ -66,46 +48,55 @@ module.exports = new Class
 		this._steps = steps;
 		this._previousButton = previousButton;
 		this._nextButton = nextButton;
-	}
+	},
 
-	,movePrevious: function ()
+	movePrevious: function() {
-	{
 		if (this._assistant)
 			this._assistant.movePrevious();
-	}
+	},
 	
-	,moveNext: function ()
+	moveNext: function() {
-	{
 		if (this._assistant)
 			this._assistant.moveNext();
-	}
+	},
 	
-	,setStep: function (stepIndex)
+	setStep: function(stepIndex) {
-	{
 		if (this._assistant)
 			this._assistant.setStep(stepIndex);
+	},
+
+	onStepsChange: function() {
+		var stepCount = this._assistant.stepCount;
+		var steps = this._steps;
+
+		Vn.Node.removeChilds(steps);
+		steps.style.width = (stepCount * 1.7) + 'em';
+
+		for (var i = 0; i < stepCount; i++) {
+			var img = this.createElement('img');
+			img.src = 'image/step.svg';
+			img.addEventListener('click', this.setStep.bind(this, i));
+			steps.appendChild(img);
 		}
 
-	,onStepChange: function ()
+		this.onStepChange();
-	{
+	},
-		if (this._assistant)
+
-		{
+	onStepChange: function() {
-			var stepIndex = this._assistant.step;
+		var childs = this._steps.childNodes;
-			var stepCount = this._assistant.stepCount;
+		var stepCount = childs ? childs.length : 0;
-		}
+		var stepIndex = this._assistant ? this._assistant.step : -1;
-		else
-		{
-			var stepIndex = -1;
-			var stepCount = 0;
-		}
 
 		if (this._stepIndex != -1)
-			this._steps.childNodes[this._stepIndex].src = 'image/step.svg';
+			childs[this._stepIndex].src = 'image/step.svg';
+
+		if (stepIndex >= stepCount)
+			return;
 
 		this._stepIndex = stepIndex;
 		
 		if (stepIndex != -1)
-			this._steps.childNodes[stepIndex].src = 'image/step-cur.svg';
+			childs[stepIndex].src = 'image/step-cur.svg';
 
 		var visibility = stepIndex <= 0 ? 'hidden' : 'visible';
 		this._previousButton.style.visibility = visibility;
@@ -114,4 +105,3 @@ module.exports = new Class
 		this._nextButton.style.visibility = visibility;
 	}
 });
-

js/htk/assistant.js

@@ -1,109 +1,151 @@
 
-module.exports = new Class
+var Widget = require('./widget');
-({
+var Step = require('./step');
-	Extends: Vn.Object
+var Toast = require('./toast');
-	,Tag: 'htk-assistant'
-	,Properties:
-	{
-		stepCount:
-		{
-			type: Number
-			,set: function (x)
-			{
-				this._stepCount = x;
 
-				if (x > 0)
+/**
-					this.setStep (0);
+ * A simple assistant with steps.
-				else
+ */
-					this.setStep (-1);
+module.exports = new Class({
-			}
+	Extends: Widget,
-			,get: function ()
+	Tag: 'htk-assistant',
-			{
+	Properties: {
-				return this._stepCount;
+		/**
-			}
+		 * The current step index.
-		},
+		 */
-		step:
+		step: {
-		{
+			type: Number,
-			type: Number
+			set: function(x) {
-			,set: function (x)
-			{
 				this.setStep(x);
-			}
+			},
-			,get: function ()
+			get: function() {
-			{
 				return this._stepIndex;
 			}
 		},
-		stepFunc:
+		/**
-		{
+		 * The current step name.
-			type: Function
+		 */
-			,set: function (x)
+		stepName: {
-			{
+			type: String,
+			set: function(x) {
+				this.setStepByName(x);
+			},
+			get: function() {
+				return this._stepName;
+			}
+		},
+		/**
+		 * The steps index.
+		 */
+		stepsIndex: {
+			type: Array,
+			set: function(x) {
+				this._stepsIndex = x;
+				this.setStep(this._stepIndex);
+				this.signalEmit('steps-change');
+			},
+			get: function() {
+				return this._stepsIndex;
+			}
+		},
+		/**
+		 * The total number of steps in the assistant.
+		 */
+		stepCount: {
+			type: Number,
+			get: function() {
+				if (this._stepsIndex)
+					return this._stepsIndex.length;
+				return 0;
+			}
+		},
+		/**
+		 * Function to call on every step change.
+		 */
+		stepFunc: {
+			type: Function,
+			set: function(x) {
 				this._stepFunc = x;
 				this.setStep(this._stepIndex);
-			}
+			},
-			,get: function ()
+			get: function() {
-			{
 				return this._stepFunc;
 			}
 		},
-		node:
-		{
-			type: Object
-			,set: function (x)
-			{
-				x.className = 'htk-assistant';
-			}
 	},
-	}
 
-	,_stepNode: null
+	_stepNode: null,
-	,_stepIndex: -1
+	_stepIndex: 0,
-	,_stepCount: 0
+	_stepName: null,
-	,_stepFunc: null
+	_stepFunc: null,
+	steps: {},
 
-	,setStep: function (stepIndex)
+	initialize: function(props) {
-	{
+		var node = this.createRoot('div');
-		if (!(stepIndex >= -1 && stepIndex < this.stepCount))
+		node.className = 'htk-assistant';
+		this.parent(props);
+	},
+
+	appendChild(step) {
+		if (!(step instanceof Step))
+			throw new Error('Invalid child for assistant');
+
+		this.node.appendChild(step.node);
+		this.steps[step.name] = step;
+	},
+
+	setStepByName: function(stepName) {
+		if (this._stepsIndex)
+			this.setStep(this._stepsIndex.indexOf(stepName));
+	},
+
+	setStep: function(stepIndex) {
+		if ((this.currentStep && stepIndex == this._stepIndex)
+		|| !this._stepsIndex
+		|| !(stepIndex >= -1 && stepIndex < this._stepsIndex.length))
 			return;
 
-		if (this._stepFunc && stepIndex != -1)
+		if (stepIndex > this._stepIndex) {
-		{
+			var validateIni = Math.max(this._stepIndex, 0);
-			var stepNode = this._stepFunc (stepIndex);
 
-			if (stepNode)
+			try {
-			{
+				for (var i = validateIni; i < stepIndex; i++) {
-				if (this._stepNode)
+					var validateName = this._stepsIndex[i];
-					this._stepNode.style.display = 'none';
+					var validateStep = this.steps[validateName];
-
+					validateStep.validate();
-				this._stepNode = stepNode;
-				stepNode.style.display = 'block';
-
-				this._setStepIndex (stepIndex);
 				}
-			else if (this._stepIndex < stepIndex)
+			} catch(e) {
-				this.setStep (stepIndex + 1);
+				Toast.showError(e.message);
-			else
+				if (i == this._stepIndex) return;
-				this.setStep (stepIndex - 1);
+				stepIndex = i;
 			}
-		else
-			this._setStepIndex (stepIndex);
 		}
 
-	,_setStepIndex: function (stepIndex)
+		var stepName = this._stepsIndex[stepIndex];
-	{
+		var step = this.steps[stepName];
+		var currentStep = this.currentStep;
+
+		if (currentStep)
+			currentStep.hide();
+
 		this._stepIndex = stepIndex;
+		this._stepName = stepName;
+		this.currentStep = step;
+		step.show();
 		this.signalEmit('step-change', stepIndex);
-	}
+	},
 
-	,movePrevious: function ()
+	/**
-	{
+	 * Moves the assistant to the previous step.
+	 */
+	movePrevious: function() {
 		this.setStep(this._stepIndex - 1);
-	}
+	},
 	
-	,moveNext: function ()
+	/**
-	{
+	 * Moves the assistant to the next step.
+	 */
+	moveNext: function() {
 		this.setStep(this._stepIndex + 1);
 	}
 });
-

js/htk/field/radio-group.js

@@ -1,4 +1,6 @@
 
+var htkRadioGroupUid = 0;
+
 module.exports = new Class
 ({
 	Extends: Htk.Field
@@ -9,41 +11,40 @@ module.exports = new Class
 	,initialize: function (props)
 	{
 		this.clear ();
-		this.on ('changed', this._onRadioGroupChange, this);
 		this.parent (props);
 	}
 	
 	,clear: function ()
 	{
-		this.name = Math.random ().toString ();
+		this.name = htkRadioGroupUid++;
 		this.buttons = [];
 	}
 	
-	,_onRadioGroupChange: function ()
-	{
-		for (var i = 0; i < this.buttons.length; i++)
-		if (this.buttons[i].value == this._value)
-			this.buttons[i].checked = true;
-	}
-	
-	,_onRadioChange: function (value)
-	{
-		if (this.radioLock)
-			return;
-	
-		this.radioLock = true;
-		this.value = value;
-		this.radioLock = false;
-	}
-	
 	,createButton: function (value)
 	{
-		var radio = Vn.Browser.createRadio (this.name, this.doc);
+		var button = Vn.Browser.createRadio (this.name, this.doc);
-		radio.value = value;
+		button.value = value;
-		radio.checked = value == this.value;
+		button.radioGroup = this;
-		radio.addEventListener ('change', this._onRadioChange.bind (this, value));
+		return button;
-		this.buttons.push (radio);
+	}
 
-		return radio;
+	,removeButton: function (button)
+	{
+		for (var i = 0; i < this.buttons.length; i++)
+			if (this.buttons === button) {
+				this.buttons.splice(i, 1);
+				break;
+			}
+	}
+
+	/**
+	 * @return %true if there is an option selected, otherwise it returns %false
+	 */
+	,isSelected: function () {
+		for (var i = 0; i < this.buttons.length; i++)
+			if (this.buttons[i].value == this.value)
+				return true;
+
+		return false;
 	}
 });

js/htk/field/radio.js

@@ -21,8 +21,12 @@ module.exports = new Class
 			type: RadioGroup
 			,set: function (x)
 			{
+				if (this._radioGroup)
+					this._radioGroup.removeButton (this);
+
 				this.link ({_radioGroup: x}, {'changed': this._onRadioGroupChange});
-				this.node.name = x.name
+				this.node.name = x.name;
+				x.buttons.push(this);
 				this._onRadioGroupChange ();
 			}
 			,get: function ()

js/htk/htk.js

@@ -17,6 +17,7 @@ Htk = module.exports = {
 	,ImageEditor  : require ('./image-editor')
 	,Assistant    : require ('./assistant')
 	,AssistantBar : require ('./assistant-bar')
+	,Step         : require ('./step')
 	,Loader       : require ('./loader')
 	,Field        : require ('./field')
 	,Column       : require ('./column')

js/htk/step.js

@@ -0,0 +1,49 @@
+
+var Widget = require('./widget');
+
+module.exports = new Class({
+	Extends: Widget,
+	Tag: 'htk-step',
+	Properties: {
+		name: {
+			type: String,
+			value: null
+		},
+		validateFunc: {
+			type: Function,
+			value: null
+		},
+		showFunc: {
+			type: Function,
+			value: null
+		}
+	},
+
+	initialize: function(props) {
+		var node = this.createRoot('div');
+		node.className = 'htk-step';
+		this.parent(props);
+	},
+
+	show: function() {
+		if (this.showFunc)
+			this.showFunc();
+		this.node.style.display = 'block';
+	},
+
+	hide: function() {
+		this.node.style.display = 'none';
+	},
+
+	validate: function() {
+		if (this.validateFunc)
+			return this.validateFunc();
+		return true;
+	},
+
+	appendChild: function(child) {
+		if (child instanceof Widget)
+			child = child.node;
+		this.node.appendChild(child);
+	}
+});

js/htk/style.css

@@ -499,8 +499,6 @@ td.cell-image .htk-image
 .htk-assistant > div
 {
 	display: none;
-	margin-top: 1em;
-	margin-bottom: 4em;
 }
 .htk-assistant > div > h2
 {
@@ -508,7 +506,8 @@ td.cell-image .htk-image
 	font-style: italic;
 	font-weight: normal;
 	font-size: 1.5em;
-	margin: 0.5em;
+	margin: 0;
+	padding: 0;
 	margin-bottom: 1em;
 }
 .htk-assistant *

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hedera-web",
-  "version": "1.405.92",
+  "version": "1.405.93",
   "description": "Verdnatura web page",
   "license": "GPL-3.0",
   "repository": {