Order configuration assistant now it's clearer
This commit is contained in:
Juan
parent
a4d3f323c3
commit
0376674081
|
|
@ -1,4 +1,4 @@
|
|||
hedera-web (1.405.92) stable; urgency=low
|
||||
hedera-web (1.405.93) stable; urgency=low
|
||||
|
||||
* Initial Release.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
|
||||
Hedera.Checkout = new Class
|
||||
({
|
||||
Extends: Hedera.Form
|
||||
Hedera.Checkout = new Class ({
|
||||
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);
|
||||
}
|
||||
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,168 +19,173 @@ Hedera.Checkout = new Class
|
|||
|
||||
var date;
|
||||
|
||||
if (orderForm.numRows > 0)
|
||||
{
|
||||
if (orderForm.numRows > 0) {
|
||||
var i = orderForm;
|
||||
date = i.get ('sent');
|
||||
}
|
||||
else
|
||||
date = i.get('sent');
|
||||
} else
|
||||
var i = defaultsForm;
|
||||
|
||||
if (!date || date.getTime () < (new Date ()).getTime ())
|
||||
{
|
||||
date = new Date ();
|
||||
if (!date || date.getTime() <(new Date()).getTime()) {
|
||||
date = new Date();
|
||||
|
||||
if (i.get('deliveryMethod') != 'PICKUP')
|
||||
date.setTime (date.getTime () + 86400000);
|
||||
date.setTime(date.getTime() + 86400000);
|
||||
}
|
||||
|
||||
this.$('date').value = date;
|
||||
this.$('method').value = i.get ('deliveryMethod');
|
||||
this.$('agency').value = i.get ('agencyModeFk');
|
||||
this.$('address').value = i.get ('addressFk');
|
||||
this.$('method').value = i.get('deliveryMethod');
|
||||
this.$('agency').value = i.get('agencyModeFk');
|
||||
this.$('address').value = i.get('addressFk');
|
||||
|
||||
this.autoStepLocked = false;
|
||||
}
|
||||
},
|
||||
|
||||
,disableButtons: function (disable)
|
||||
{
|
||||
this.$('confirm-agency').disabled = disable;
|
||||
disableButtons: function(disable) {
|
||||
this.$('confirm-delivery').disabled = disable;
|
||||
this.$('confirm-pickup').disabled = disable;
|
||||
}
|
||||
},
|
||||
|
||||
,onConfirmClick: function ()
|
||||
{
|
||||
this.disableButtons (true);
|
||||
onConfirmClick: function() {
|
||||
this.disableButtons(true);
|
||||
|
||||
var query = 'CALL basketConfigure (#date, #method, #agency, #address)';
|
||||
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'));
|
||||
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.conn.execQuery(query,
|
||||
this.onBasketConfigured.bind(this), batch);
|
||||
},
|
||||
|
||||
,onBasketConfigured: function (resultSet)
|
||||
{
|
||||
this.disableButtons (false);
|
||||
onBasketConfigured: function(resultSet) {
|
||||
this.disableButtons(false);
|
||||
|
||||
if (!resultSet.fetchResult ())
|
||||
if (!resultSet.fetchResult())
|
||||
return;
|
||||
|
||||
if (this.$('order-form').numRows > 0)
|
||||
Htk.Toast.showMessage (_('OrderUpdated'));
|
||||
Htk.Toast.showMessage(_('OrderUpdated'));
|
||||
else
|
||||
Htk.Toast.showMessage (_('OrderStarted'));
|
||||
Htk.Toast.showMessage(_('OrderStarted'));
|
||||
|
||||
this.hash.set ({form: 'ecomerce/catalog'});
|
||||
}
|
||||
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']
|
||||
,pickupSteps: ['method', 'date', 'address', 'pickup', 'confirm-pickup']
|
||||
agencySteps: ['method', 'date', 'address', 'agency', 'confirm-delivery'],
|
||||
pickupSteps: ['method', 'date', 'address', 'pickup', 'confirm-pickup'],
|
||||
|
||||
,stepFunc: function (stepIndex)
|
||||
{
|
||||
var isDelivery = this.$('rg-method').value == 'AGENCY';
|
||||
var steps = isDelivery ? this.agencySteps : this.pickupSteps;
|
||||
var stepId = steps[stepIndex];
|
||||
isDelivery: function() {
|
||||
return this.$('rg-method').value != 'PICKUP';
|
||||
},
|
||||
|
||||
if (!stepId)
|
||||
return null;
|
||||
onMethodChange: function() {
|
||||
this.$('assistant').stepsIndex = this.isDelivery() ?
|
||||
this.agencySteps : this.pickupSteps;
|
||||
this.onFieldChange();
|
||||
},
|
||||
|
||||
switch (stepId)
|
||||
{
|
||||
case 'date':
|
||||
Vn.Node.setText (this.$('date-question'), isDelivery ?
|
||||
methodValidate: function() {
|
||||
if (!this.$('rg-method').isSelected())
|
||||
throw new Error(_('Please select an option'));
|
||||
},
|
||||
|
||||
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 ?
|
||||
this.$('calendar').goToSelectedMonth();
|
||||
},
|
||||
|
||||
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':
|
||||
this.$('agencies').refresh ();
|
||||
break;
|
||||
case 'pickup':
|
||||
this.$('warehouses').refresh ();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
return this.$(stepId +'-step');
|
||||
}
|
||||
addressValidate: function() {
|
||||
if (this.$('address-form').row == -1)
|
||||
throw new Error(_('Please select an address'));
|
||||
},
|
||||
|
||||
,onFieldChange: function ()
|
||||
{
|
||||
agencyShow: function() {
|
||||
this.$('agencies').refresh();
|
||||
},
|
||||
|
||||
agencyValidate: function() {
|
||||
if (this.$('agency-combo').row == -1 && this.isDelivery())
|
||||
throw new Error(_('Please select an agency'));
|
||||
},
|
||||
|
||||
pickupShow: function() {
|
||||
this.$('warehouses').refresh();
|
||||
},
|
||||
|
||||
pickupValidate: function() {
|
||||
if (this.$('warehouse-combo').row == -1)
|
||||
throw new Error(_('Please select a store'));
|
||||
},
|
||||
|
||||
onFieldChange: function() {
|
||||
if (!this.autoStepLocked)
|
||||
this.$('assistant').moveNext ();
|
||||
}
|
||||
this.$('assistant').moveNext();
|
||||
},
|
||||
|
||||
,goNextStep: function ()
|
||||
{
|
||||
this.$('assistant').moveNext ();
|
||||
}
|
||||
goNextStep: function() {
|
||||
this.$('assistant').moveNext();
|
||||
},
|
||||
|
||||
,addressRenderer: function (builder, form)
|
||||
{
|
||||
builder.$('address').addEventListener ('click',
|
||||
this.onAddressClick.bind (this, form.get ('id')));
|
||||
}
|
||||
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 ();
|
||||
}
|
||||
this.goNextStep();
|
||||
},
|
||||
|
||||
,onAddressChange: function ()
|
||||
{
|
||||
onAddressChange: function() {
|
||||
if (this.selectedNode)
|
||||
Vn.Node.removeClass (this.selectedNode, 'selected');
|
||||
Vn.Node.removeClass(this.selectedNode, 'selected');
|
||||
|
||||
var row = this.$('addresses').search ('id', this.$('address').value);
|
||||
var row = this.$('addresses').search('id', this.$('address').value);
|
||||
|
||||
if (row != -1)
|
||||
{
|
||||
var builder = this.$('repeater').getBuilder (row);
|
||||
if (row != -1) {
|
||||
var builder = this.$('repeater').getBuilder(row);
|
||||
|
||||
this.selectedNode = builder.$('address');
|
||||
Vn.Node.addClass (this.selectedNode, 'selected');
|
||||
Vn.Node.addClass(this.selectedNode, 'selected');
|
||||
}
|
||||
|
||||
this.$('address-form').row = row;
|
||||
}
|
||||
},
|
||||
|
||||
,onAgenciesReady: function (model)
|
||||
{
|
||||
onAgenciesReady: function(model) {
|
||||
if (model.ready && model.numRows == 0)
|
||||
Htk.Toast.showError (_('NoAgeciesAvailableForDate'));
|
||||
}
|
||||
Htk.Toast.showError(_('NoAgeciesAvailableForDate'));
|
||||
},
|
||||
|
||||
,onWarehousesReady: function (model)
|
||||
{
|
||||
onWarehousesReady: function(model) {
|
||||
if (model.ready && model.numRows == 0)
|
||||
Htk.Toast.showError (_('NoWarehousesAvailableForDate'));
|
||||
}
|
||||
Htk.Toast.showError(_('NoWarehousesAvailableForDate'));
|
||||
},
|
||||
|
||||
,calendarRestrict: function (date)
|
||||
{
|
||||
return date.getTime () >= this.today.getTime ();
|
||||
calendarRestrict: function(date) {
|
||||
return date.getTime() >= this.today.getTime();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
id="assistant"
|
||||
step-count="5"
|
||||
step-func="stepFunc"
|
||||
node="assistant-node"/>
|
||||
<div id="assistant-node">
|
||||
<div id="method-step">
|
||||
<htk-assistant id="assistant">
|
||||
<htk-step
|
||||
name="method"
|
||||
validate-func="methodValidate">
|
||||
<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>
|
||||
<div id="date-step">
|
||||
</htk-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>
|
||||
<div id="address-step">
|
||||
</htk-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>
|
||||
<div id="agency-step">
|
||||
</htk-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>
|
||||
<div id="pickup-step">
|
||||
</htk-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>
|
||||
<div id="confirm-agency-step" class="confirm">
|
||||
</htk-step>
|
||||
<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>
|
||||
<div id="confirm-pickup-step" class="confirm">
|
||||
</htk-step>
|
||||
<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>
|
||||
</div>
|
||||
<htk-assistant-bar assistant="assistant"/>
|
||||
</htk-step>
|
||||
</htk-assistant>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,111 +1,102 @@
|
|||
|
||||
var Widget = require ('./widget');
|
||||
var Assistant = require ('./assistant');
|
||||
var Widget = require('./widget');
|
||||
var Assistant = require('./assistant');
|
||||
|
||||
module.exports = new Class
|
||||
({
|
||||
Extends: Widget
|
||||
,Tag: 'htk-assistant-bar'
|
||||
,Properties:
|
||||
{
|
||||
assistant:
|
||||
{
|
||||
type: Assistant
|
||||
,set: function (x)
|
||||
{
|
||||
this.link ({_assistant: x}, {'step-change': this.onStepChange});
|
||||
|
||||
var stepCount = x.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);
|
||||
}
|
||||
|
||||
this.onStepChange ();
|
||||
}
|
||||
,get: function ()
|
||||
{
|
||||
module.exports = new Class({
|
||||
Extends: Widget,
|
||||
Tag: 'htk-assistant-bar',
|
||||
Properties: {
|
||||
assistant: {
|
||||
type: Assistant,
|
||||
set: function(x) {
|
||||
this.link({_assistant: x}, {
|
||||
'step-change': this.onStepChange,
|
||||
'steps-change': this.onStepsChange
|
||||
});
|
||||
this.onStepsChange();
|
||||
},
|
||||
get: function() {
|
||||
return this._assistant;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
,_assistant: null
|
||||
,_stepIndex: -1
|
||||
_assistant: null,
|
||||
_stepIndex: -1,
|
||||
|
||||
,render: function ()
|
||||
{
|
||||
var bar = this.createRoot ('div');
|
||||
render: function() {
|
||||
var bar = this.createRoot('div');
|
||||
bar.className = 'htk-assistant-bar';
|
||||
|
||||
var previousButton = this.createElement ('img');
|
||||
var previousButton = this.createElement('img');
|
||||
previousButton.src = 'image/icon/light/go-previous.svg';
|
||||
previousButton.className = 'previous';
|
||||
previousButton.title = _('Previous');
|
||||
previousButton.addEventListener ('click', this.movePrevious.bind (this));
|
||||
bar.appendChild (previousButton);
|
||||
previousButton.addEventListener('click', this.movePrevious.bind(this));
|
||||
bar.appendChild(previousButton);
|
||||
|
||||
var steps = this.createElement ('div');
|
||||
bar.appendChild (steps);
|
||||
var steps = this.createElement('div');
|
||||
bar.appendChild(steps);
|
||||
|
||||
var nextButton = this.createElement ('img');
|
||||
var nextButton = this.createElement('img');
|
||||
nextButton.src = 'image/icon/light/go-next.svg';
|
||||
nextButton.className = 'next';
|
||||
nextButton.title = _('Next');
|
||||
nextButton.addEventListener ('click', this.moveNext.bind (this));
|
||||
bar.appendChild (nextButton);
|
||||
nextButton.addEventListener('click', this.moveNext.bind(this));
|
||||
bar.appendChild(nextButton);
|
||||
|
||||
this._steps = steps;
|
||||
this._previousButton = previousButton;
|
||||
this._nextButton = nextButton;
|
||||
}
|
||||
},
|
||||
|
||||
,movePrevious: function ()
|
||||
{
|
||||
movePrevious: function() {
|
||||
if (this._assistant)
|
||||
this._assistant.movePrevious ();
|
||||
}
|
||||
this._assistant.movePrevious();
|
||||
},
|
||||
|
||||
,moveNext: function ()
|
||||
{
|
||||
moveNext: function() {
|
||||
if (this._assistant)
|
||||
this._assistant.moveNext ();
|
||||
}
|
||||
this._assistant.moveNext();
|
||||
},
|
||||
|
||||
,setStep: function (stepIndex)
|
||||
{
|
||||
setStep: function(stepIndex) {
|
||||
if (this._assistant)
|
||||
this._assistant.setStep (stepIndex);
|
||||
}
|
||||
this._assistant.setStep(stepIndex);
|
||||
},
|
||||
|
||||
,onStepChange: function ()
|
||||
{
|
||||
if (this._assistant)
|
||||
{
|
||||
var stepIndex = this._assistant.step;
|
||||
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);
|
||||
}
|
||||
else
|
||||
{
|
||||
var stepIndex = -1;
|
||||
var stepCount = 0;
|
||||
}
|
||||
|
||||
this.onStepChange();
|
||||
},
|
||||
|
||||
onStepChange: function() {
|
||||
var childs = this._steps.childNodes;
|
||||
var stepCount = childs ? childs.length : 0;
|
||||
var stepIndex = this._assistant ? this._assistant.step : -1;
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,109 +1,151 @@
|
|||
|
||||
module.exports = new Class
|
||||
({
|
||||
Extends: Vn.Object
|
||||
,Tag: 'htk-assistant'
|
||||
,Properties:
|
||||
{
|
||||
stepCount:
|
||||
{
|
||||
type: Number
|
||||
,set: function (x)
|
||||
{
|
||||
this._stepCount = x;
|
||||
var Widget = require('./widget');
|
||||
var Step = require('./step');
|
||||
var Toast = require('./toast');
|
||||
|
||||
if (x > 0)
|
||||
this.setStep (0);
|
||||
else
|
||||
this.setStep (-1);
|
||||
}
|
||||
,get: function ()
|
||||
{
|
||||
return this._stepCount;
|
||||
}
|
||||
/**
|
||||
* A simple assistant with steps.
|
||||
*/
|
||||
module.exports = new Class({
|
||||
Extends: Widget,
|
||||
Tag: 'htk-assistant',
|
||||
Properties: {
|
||||
/**
|
||||
* The current step index.
|
||||
*/
|
||||
step: {
|
||||
type: Number,
|
||||
set: function(x) {
|
||||
this.setStep(x);
|
||||
},
|
||||
step:
|
||||
{
|
||||
type: Number
|
||||
,set: function (x)
|
||||
{
|
||||
this.setStep (x);
|
||||
}
|
||||
,get: function ()
|
||||
{
|
||||
get: function() {
|
||||
return this._stepIndex;
|
||||
}
|
||||
},
|
||||
stepFunc:
|
||||
{
|
||||
type: Function
|
||||
,set: function (x)
|
||||
{
|
||||
this._stepFunc = x;
|
||||
this.setStep (this._stepIndex);
|
||||
/**
|
||||
* The current step name.
|
||||
*/
|
||||
stepName: {
|
||||
type: String,
|
||||
set: function(x) {
|
||||
this.setStepByName(x);
|
||||
},
|
||||
get: function() {
|
||||
return this._stepName;
|
||||
}
|
||||
,get: function ()
|
||||
{
|
||||
},
|
||||
/**
|
||||
* 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() {
|
||||
return this._stepFunc;
|
||||
}
|
||||
},
|
||||
node:
|
||||
{
|
||||
type: Object
|
||||
,set: function (x)
|
||||
{
|
||||
x.className = 'htk-assistant';
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
,_stepNode: null
|
||||
,_stepIndex: -1
|
||||
,_stepCount: 0
|
||||
,_stepFunc: null
|
||||
_stepNode: null,
|
||||
_stepIndex: 0,
|
||||
_stepName: null,
|
||||
_stepFunc: null,
|
||||
steps: {},
|
||||
|
||||
,setStep: function (stepIndex)
|
||||
{
|
||||
if (!(stepIndex >= -1 && stepIndex < this.stepCount))
|
||||
initialize: function(props) {
|
||||
var node = this.createRoot('div');
|
||||
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)
|
||||
{
|
||||
var stepNode = this._stepFunc (stepIndex);
|
||||
if (stepIndex > this._stepIndex) {
|
||||
var validateIni = Math.max(this._stepIndex, 0);
|
||||
|
||||
if (stepNode)
|
||||
{
|
||||
if (this._stepNode)
|
||||
this._stepNode.style.display = 'none';
|
||||
|
||||
this._stepNode = stepNode;
|
||||
stepNode.style.display = 'block';
|
||||
|
||||
this._setStepIndex (stepIndex);
|
||||
try {
|
||||
for (var i = validateIni; i < stepIndex; i++) {
|
||||
var validateName = this._stepsIndex[i];
|
||||
var validateStep = this.steps[validateName];
|
||||
validateStep.validate();
|
||||
}
|
||||
else if (this._stepIndex < stepIndex)
|
||||
this.setStep (stepIndex + 1);
|
||||
else
|
||||
this.setStep (stepIndex - 1);
|
||||
} catch(e) {
|
||||
Toast.showError(e.message);
|
||||
if (i == this._stepIndex) return;
|
||||
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.signalEmit ('step-change', stepIndex);
|
||||
}
|
||||
this._stepName = stepName;
|
||||
this.currentStep = step;
|
||||
step.show();
|
||||
this.signalEmit('step-change', stepIndex);
|
||||
},
|
||||
|
||||
,movePrevious: function ()
|
||||
{
|
||||
this.setStep (this._stepIndex - 1);
|
||||
}
|
||||
/**
|
||||
* Moves the assistant to the previous step.
|
||||
*/
|
||||
movePrevious: function() {
|
||||
this.setStep(this._stepIndex - 1);
|
||||
},
|
||||
|
||||
,moveNext: function ()
|
||||
{
|
||||
this.setStep (this._stepIndex + 1);
|
||||
/**
|
||||
* Moves the assistant to the next step.
|
||||
*/
|
||||
moveNext: function() {
|
||||
this.setStep(this._stepIndex + 1);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
radio.value = value;
|
||||
radio.checked = value == this.value;
|
||||
radio.addEventListener ('change', this._onRadioChange.bind (this, value));
|
||||
this.buttons.push (radio);
|
||||
var button = Vn.Browser.createRadio (this.name, this.doc);
|
||||
button.value = value;
|
||||
button.radioGroup = this;
|
||||
return button;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 ()
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
@ -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 *
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "hedera-web",
|
||||
"version": "1.405.92",
|
||||
"version": "1.405.93",
|
||||
"description": "Verdnatura web page",
|
||||
"license": "GPL-3.0",
|
||||
"repository": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue