verdnatura/hedera-web
verdnatura
/
hedera-web
0
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Order configuration assistant now it's clearer

This commit is contained in:
Juan 2018-05-16 11:36:42 +02:00
parent a4d3f323c3
commit 0376674081
18 changed files with 7573 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
debian/changelog vendored
View File

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

249
forms/ecomerce/checkout/checkout.js
View File

@ -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']
,stepFunc: function (stepIndex)
{
var isDelivery = this.$('rg-method').value == 'AGENCY';
var steps = isDelivery ? this.agencySteps : this.pickupSteps;
var stepId = steps[stepIndex];
if (!stepId)
return null;
agencySteps: ['method', 'date', 'address', 'agency', 'confirm-delivery'],
pickupSteps: ['method', 'date', 'address', 'pickup', 'confirm-pickup'],
switch (stepId)
{
case 'date':
Vn.Node.setText (this.$('date-question'), isDelivery ?
_('OrderDateDeliveryQuestion'):
_('OrderDatePickupQuestion'));
this.$('calendar').goToSelectedMonth ();
break;
case 'address':
Vn.Node.setText (this.$('address-question'), isDelivery ?
_('AddressQuestion'):
_('AddressQuestionPickup'));
break;
case 'agency':
this.$('agencies').refresh ();
break;
case 'pickup':
this.$('warehouses').refresh ();
break;
}
return this.$(stepId +'-step');
}
isDelivery: function() {
return this.$('rg-method').value != 'PICKUP';
},
onMethodChange: function() {
this.$('assistant').stepsIndex = this.isDelivery() ?
this.agencySteps : this.pickupSteps;
this.onFieldChange();
},
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();
},
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'));
},
addressValidate: function() {
if (this.$('address-form').row == -1)
throw new Error(_('Please select an address'));
},
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 ()
{
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();
}
});

5
forms/ecomerce/checkout/locale/ca.yml
View File

@ -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

5
forms/ecomerce/checkout/locale/en.yml
View File

@ -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

5
forms/ecomerce/checkout/locale/es.yml
View File

@ -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

5
forms/ecomerce/checkout/locale/fr.yml
View File

@ -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

5
forms/ecomerce/checkout/locale/pt.yml
View File

@ -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

9
forms/ecomerce/checkout/style.css
View File

@ -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;

258
forms/ecomerce/checkout/ui.xml
View File

@ -70,149 +70,143 @@
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">
<h2><t>DeliveryOrPickupQuestion</t></h2>
<div class="answers radio">
<htk-radio-group
id="rg-method"
param="method"
on-changed="onFieldChange"/>
<div>
<htk-radio radio-group="rg-method" value="AGENCY"/>
<label><t>Receive the order</t></label>
</div>
<div>
<htk-radio radio-group="rg-method" value="PICKUP"/>
<label><t>PickupInStore</t></label>
</div>
<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="onMethodChange"/>
<div>
<htk-radio radio-group="rg-method" value="AGENCY"/>
<label><t>Receive the order</t></label>
</div>
<div>
<htk-radio radio-group="rg-method" value="PICKUP"/>
<label><t>PickupInStore</t></label>
</div>
</div>
<div id="date-step">
<h2 id="date-question"/>
<div class="answers">
<htk-calendar
id="calendar"
class="thin-calendar"
param="date"
restrict-func="calendarRestrict"
on-changed="onFieldChange"/>
</div>
</htk-step>
<htk-step
name="date"
show-func="dateShow"
validate-func="dateValidate">
<h2 id="date-question"/>
<div class="answers">
<htk-calendar
id="calendar"
class="thin-calendar"
param="date"
restrict-func="calendarRestrict"
on-changed="onFieldChange"/>
</div>
<div id="address-step">
<h2 id="address-question"/>
</htk-step>
<htk-step
name="address"
show-func="addressShow"
validate-func="addressValidate">
<h2 id="address-question"/>
<div class="answers target">
<db-form id="address-form" model="addresses"/>
<div class="answers target">
<htk-repeater
id="repeater"
form-id="iter"
on-change="onAddressChange"
renderer="addressRenderer">
<db-model property="model" id="addresses">
SELECT a.id, a.nickname, p.name province, 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
</db-model>
<custom>
<div class="address" id="address">
<p class="consignee">
<htk-text form="iter" column="nickname"/>
</p>
<p>
<htk-text form="iter" column="street"/>
</p>
</div>
</custom>
</htk-repeater>
</div>
<htk-repeater
id="repeater"
form-id="iter"
on-change="onAddressChange"
renderer="addressRenderer">
<db-model property="model" id="addresses">
SELECT a.id, a.nickname, p.name province, 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
</db-model>
<custom>
<div class="address" id="address">
<p class="consignee">
<htk-text form="iter" column="nickname"/>
</p>
<p>
<htk-text form="iter" column="street"/>
</p>
</div>
</custom>
</htk-repeater>
</div>
<div id="agency-step">
<h2><t>AgencyQuestion</t></h2>
<div class="answers target">
<htk-combo
id="agency-combo"
param="agency"
on-changed="onFieldChange"
model="agencies"/>
</div>
</htk-step>
<htk-step
name="agency"
show-func="agencyShow"
validate-func="agencyValidate">
<h2><t>AgencyQuestion</t></h2>
<div class="answers target">
<htk-combo
id="agency-combo"
param="agency"
on-changed="onFieldChange"
model="agencies"/>
</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>
</htk-step>
<htk-step
name="pickup"
show-func="pickupShow"
validate-func="pickupValidate">
<h2><t>PickupWarehouseQuestion</t></h2>
<div class="answers target">
<htk-combo
id="warehouse-combo"
param="agency"
on-changed="onFieldChange"
model="warehouses"/>
</div>
<div id="confirm-agency-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>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>
</htk-step>
<htk-step
name="confirm-delivery">
<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>Agency</t>
<htk-text form="agency-combo" column="description"/>
</p>
<button id="confirm-delivery" class="thin" on-click="onConfirmClick">
<t>Confirm</t>
</button>
<div class="clear"/>
</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>
</htk-step>
<htk-step
name="confirm-pickup">
<h2><t>ConfirmToAccessCatalog</t></h2>
<div class="answers target">
<p>
<t>Pickup</t>
<htk-text format="%D" param="date"/>
</p>
<p>
<t>Warehouse</t>
<htk-text form="warehouse-combo" column="description"/>
</p>
<button id="confirm-pickup" class="thin" on-click="onConfirmClick">
<t>Confirm</t>
</button>
<div class="clear"/>
</div>
<div id="confirm-pickup-step" class="confirm">
<h2><t>ConfirmToAccessCatalog</t></h2>
<div class="answers target">
<p>
<t>Pickup</t>
<htk-text format="%D" param="date"/>
</p>
<p>
<t>Warehouse</t>
<htk-text form="warehouse-combo" column="description"/>
</p>
<button id="confirm-pickup" class="thin" on-click="onConfirmClick">
<t>Confirm</t>
</button>
<div class="clear"/>
</div>
</div>
</div>
<htk-assistant-bar assistant="assistant"/>
</htk-step>
</htk-assistant>
</div>
</div>
</div>

140
js/htk/assistant-bar.js
View File

@ -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;
var stepCount = this._assistant.stepCount;
}
else
{
var stepIndex = -1;
var stepCount = 0;
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);
}
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;
}
});

222
js/htk/assistant.js
View File

@ -1,109 +1,151 @@
module.exports = new Class
({
Extends: Vn.Object
,Tag: 'htk-assistant'
,Properties:
{
stepCount:
{
type: Number
,set: function (x)
{
this._stepCount = x;
if (x > 0)
this.setStep (0);
else
this.setStep (-1);
}
,get: function ()
{
return this._stepCount;
}
},
step:
{
type: Number
,set: function (x)
{
this.setStep (x);
}
,get: function ()
{
var Widget = require('./widget');
var Step = require('./step');
var Toast = require('./toast');
/**
* 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);
},
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 (stepNode)
{
if (this._stepNode)
this._stepNode.style.display = 'none';
this._stepNode = stepNode;
stepNode.style.display = 'block';
if (stepIndex > this._stepIndex) {
var validateIni = Math.max(this._stepIndex, 0);
this._setStepIndex (stepIndex);
try {
for (var i = validateIni; i < stepIndex; i++) {
var validateName = this._stepsIndex[i];
var validateStep = this.steps[validateName];
validateStep.validate();
}
} catch(e) {
Toast.showError(e.message);
if (i == this._stepIndex) return;
stepIndex = i;
}
else if (this._stepIndex < stepIndex)
this.setStep (stepIndex + 1);
else
this.setStep (stepIndex - 1);
}
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);
},
/**
* Moves the assistant to the previous step.
*/
movePrevious: function() {
this.setStep(this._stepIndex - 1);
},
,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);
}
});

53
js/htk/field/radio-group.js
View File

@ -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);
return radio;
var button = Vn.Browser.createRadio (this.name, this.doc);
button.value = value;
button.radioGroup = this;
return button;
}
,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;
}
});

6
js/htk/field/radio.js
View File

@ -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 ()

1
js/htk/htk.js
View File

@ -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')

49
js/htk/step.js Normal file
View File

@ -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);
}
});

5
js/htk/style.css
View File

@ -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 *

7006
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

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