Skip to content

Commit

Permalink
Modale modif places
Browse files Browse the repository at this point in the history 
- Actions locales aux chargement des modales
- récup req ajax chargement capteurs
- Début adaptation liste capteurs pour modal modif
  • Loading branch information
@YannPl
YannPl committed Jul 3, 2015
1 parent 6683a25 commit 202f202
Show file tree
Hide file tree
Showing 5 changed files with 211 additions and 10 deletions.
1 change: 1 addition & 0 deletions app/assets/js/mods/composants/maps/admin_parking_map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1035,6 +1035,7 @@ var parkingMap = React.createClass({
return (
<ModalEditPlace
onToggle={this.handleToggle}
parkingId={this.props.parkingId}
{...this.state.modalParams}
/>
);
Expand Down
8 changes: 6 additions & 2 deletions app/assets/js/mods/composants/modals/mod_afficheur.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ var ComponentAccessMixins = require('../../mixins/component_access');
/* Pour le listenTo */
var MixinGestMod = require('../../mixins/gestion_modif');

// Actions Reflux locale à cette modale
var initModale = Reflux.createAction();

// COMPOSANTS
var Field = require('../formulaire/react_form_fields');
var formDataHeler = require('../../helpers/form_data_helper');
var Form = Field.Form;
Expand Down Expand Up @@ -45,7 +49,7 @@ var ModalAfficheur = React.createClass({
},
componentWillMount: function () {
this.listenTo(store, this.updateData);
Actions.map.init_modale(this.props.parkingId, this.props.planId, this.props.drawData);
initModale(this.props.parkingId, this.props.planId, this.props.drawData);
console.log('Plan WILLMOUNT Id : %o', this.props.planId);
},

Expand Down Expand Up @@ -129,7 +133,7 @@ var store = Reflux.createStore({
// REGISTER STATUSUPDATE ACTION
this.listenTo(Actions.validation.form_field_changed, this.updateCombos);
this.listenTo(Actions.validation.submit_form, this.onSubmit_form);
this.listenTo(Actions.map.init_modale, this.loadInitData); // Appellé à l'affichage de la modale
this.listenTo(initModale, this.loadInitData); // Appellé à l'affichage de la modale
},

/**
Expand Down
6 changes: 4 additions & 2 deletions app/assets/js/mods/composants/modals/mod_capteur.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ var ComponentAccessMixins = require('../../mixins/component_access');
/* Pour le listenTo */
var MixinGestMod = require('../../mixins/gestion_modif');

var initModale = Reflux.createAction();

var Field = require('../formulaire/react_form_fields');
var Form = Field.Form;
var BtnSave = Field.BtnSave;
Expand Down Expand Up @@ -46,7 +48,7 @@ var ModalCapteur = React.createClass({
},
componentWillMount: function () {
this.listenTo(store, this.updateData);
Actions.map.init_modale(this.props.parkingId);
initModale(this.props.parkingId);

},

Expand Down Expand Up @@ -163,7 +165,7 @@ var store = Reflux.createStore({
// REGISTER STATUSUPDATE ACTION
this.listenTo(Actions.validation.form_field_changed, this.updateCombos);
this.listenTo(Actions.validation.submit_form, this.onSubmit_form);
this.listenTo(Actions.map.init_modale, this.loadInitData); // Appellé à l'affichage de la modale
this.listenTo(initModale, this.loadInitData); // Appellé à l'affichage de la modale

this.listenTo(Actions.map.liste_concentrateurs, this.getConcentrateurCombo);
this.listenTo(Actions.map.liste_buses, this.getBusCombo);
Expand Down
204 changes: 198 additions & 6 deletions app/assets/js/mods/composants/modals/mod_edit_place.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,15 @@ var ComponentAccessMixins = require('../../mixins/component_access');
/* Pour le listenTo */
var MixinGestMod = require('../../mixins/gestion_modif');

var initModale = Reflux.createAction();

var Field = require('../formulaire/react_form_fields');
var Form = Field.Form;
var BtnSave = Field.BtnSave;
var InputTextEditable = Field.InputTextEditable;
var InputNumberEditable = Field.InputNumberEditable;
var InputCheckboxEditable = Field.InputCheckboxEditable;
var InputSelectEditable = Field.InputSelectEditable;
var Modal = ReactB.Modal;
var Row = ReactB.Row;
var Col = ReactB.Col;
Expand All @@ -27,7 +30,8 @@ var ModalEditPlace = React.createClass({
propTypes: {
onToggle: React.PropTypes.func.isRequired,
typesPlaces: React.PropTypes.array.isRequired,
dataItem: React.PropTypes.object.isRequired
dataItem: React.PropTypes.object.isRequired,
parkingId: React.PropTypes.number.isRequired
},

getDefaultProps: function () {
Expand All @@ -37,9 +41,28 @@ var ModalEditPlace = React.createClass({
},

getInitialState: function () {
return {};
return {
type_place_id: '',
capteur_id: '',
selectTypes: [],
selectCapteurs: []
};
},
componentWillMount: function () {
initModale(this.props.parkingId);
// Génération des données de la liste des types
var data = _.map(this.props.typesPlaces, function (tp) {
return {
label: tp.libelle,
value: tp.id + ""
};
});
this.setState({
selectTypes: data,
type_place_id: this.props.dataItem.type_place_id,
capteur_id: this.props.dataItem.capteur_id
});
},

componentDidMount: function () {
console.log('Props de la modale : %o', this.props);
},
Expand All @@ -63,6 +86,21 @@ var ModalEditPlace = React.createClass({
<div className="modal-body">
<Form attributes={{id: "form_mod_edit_place"}}>
{/* TYPE PLACE select */}
<InputSelectEditable
multi={false}
attributes={{
label: Lang.get('global.type_place'),
name: "type_place_id",
selectCol: 6,
labelCol: 3,
required: true
}}
data={this.state.selectTypes}
editable={true}
placeholder={Lang.get('global.type_place')}
labelClass='text-right'
selectedValue={this.state.type_place_id.toString()}
/>

{/* LIBELLE input text */}
<InputTextEditable
Expand All @@ -82,12 +120,12 @@ var ModalEditPlace = React.createClass({
<InputCheckboxEditable
key={'chk_bonne'}
attributes={{
label: 'TEST',
label: Lang.get('global.bonne'),
name: "bonne[]",
value: 'bonne',
checked: false,
checked: (this.props.dataItem.bonne == "1"),
htmlFor: 'form_mod_edit_place',
groupClassName: 'col-md-2 col-md-offset-3'
groupClassName: 'col-md-6 col-md-offset-3'
}}
editable={true} />
</Row>
Expand All @@ -110,4 +148,158 @@ var ModalEditPlace = React.createClass({
}
});

/**
* Store qui gère les données des combobox
*/
var store = Reflux.createStore({
_inst: {
ajax_data: [], // Les données brutes reçues en AJAX
concentrateurs: [], // La liste de tous les concentrateurs du parking
buses: [], // La liste de tous les buses du parking
allCapteurs: [], // La liste de tous les capteurs du parking
clearCapteurs: [] // La liste des capteurs sans place du parking
},
getInitialState: function () {
return {};
},
// Initial setup
init: function () {
// REGISTER STATUSUPDATE ACTION
this.listenTo(Actions.validation.form_field_changed, this.updateCombos);
this.listenTo(Actions.validation.submit_form, this.onSubmit_form);
this.listenTo(initModale, this.loadInitData); // Appellé à l'affichage de la modale

this.listenTo(Actions.map.liste_concentrateurs, this.getConcentrateurCombo);
this.listenTo(Actions.map.liste_buses, this.getBusCombo);
this.listenTo(Actions.map.liste_capteurs, this.getAdresseCombo);
},

/**
* Appellée quand un formulaire a été validé syntaxiquement et métierment parlent.
* @param formDom : noeud racine contenant le formulaire
* @param formId : id du formulaire
*/
onSubmit_form: function (formDom, formId) {
// OBLIGÉ DE TRAITER ÇA ICI PLUTOT QUE DANS LE STORE DE LA MAP
// POUR AVOIR ACCÈS AUX DONNÉES DES CAPTEURS.
// LA SUITE SE PASSE DANS LE STORE MAP UNE FOIS QUE LES DONNÉES ONT ÉTÉ RÉCUPÉRÉES.
switch (formId) {
case "form_mod_capteur":
this.handleCapteur(formDom);
break;
}
},

/**
* Gère la validation de la modale "capteur de plac".
* - Remplis le cadre d'infos de la carte
* - Lance le cycle de vie d'affectation des capteurs
*
* @param formDom : le DOM du formulaire
*/
handleCapteur: function (formDom) {

var concentrateurId, busId, capteurId, $dom = $(formDom);
concentrateurId = $dom.find('[name=concentrateur_id]').val();
busId = $dom.find('[name=bus_id]').val();
capteurId = $dom.find('[name=capteur_id]').val();

var concentrateur = this.getConcentrateurFromId(concentrateurId);
var bus = this.getBusFromId(busId);
var capteurInit = this.getCapteurFromId(capteurId);
var capteurs = this.getRemainingClearCapteursFromBus(busId, capteurInit);

// LANCEMENT DE LA PROCÉDURE D'AFFECTATION DANS LE STORE PARKING MAP
Actions.map.start_affectation_capteurs(concentrateur, bus, capteurInit, capteurs);
},

/**
* Mise à jour des combos sur chaque action de l'utilisateur
* passant les tests de vérification auto.
* @param data
*/
updateCombos: function (data) {

var retour = {};
// update selected value de la combo actuelle
retour[data.name] = data.value;

this.trigger(retour);
},
/**
* Charge les données du réseau du parking en fonction de l'ID du parking
* @param parkId : id du parking
*/
loadInitData: function (parkId) {
//console.log('PASS INIT DATA avec id : %o', parkId);

$.ajax({
type: 'GET',
url: BASE_URI + 'parking/' + parkId + '/concentrateurs',
processData: false,
contentType: false,
data: {},
context: this
})
.done(function (data) {
this.handleAjaxResult(data);
})
.fail(function (xhr, type, exception) {
// if ajax fails display error alert
console.error("ajax error response error " + type);
console.error("ajax error response body " + xhr.responseText);
});
},
/**
* Traite le retour de la requête AJAX ci-dessus
* @param data
*/
handleAjaxResult: function (data) {
this._inst.ajax_data = data;

// TODO retourner la combo des capteurs, clears de tout le parking
},

/*****************************************************************************
* UPDATE COMBOBOXES *********************************************************
*****************************************************************************/

/**
* Retourne la liste des adresses pour la combo en fonction du bus choisi
*
* @return retourne les données au format attendu par le composant select:
* [
* {label:'Framboise', value:'0', ce que l'on veut...},
* {label:'Pomme', value:'1', ce que l'on veut...}
* ]
*/
getAdresseCombo: function (busId) {
var capteurs = _.filter(this._inst.clearCapteurs, function (c) {
return c.bus_id == busId;
});

return _.map(capteurs, function (c) {
return {
label: c.adresse,
value: c.id.toString()
}
});
},

/**
* Retourne le capteur en fonction de son id
* @param capteurId : id du capteur
*/
getCapteurFromId: function (capteurId) {
return _.reduce(this._inst.allCapteurs, function (retour, c) {
if (c.id == capteurId) {
return c;
} else {
return retour;
}
}, null);
}

});

module.exports = ModalEditPlace;
2 changes: 2 additions & 0 deletions app/lang/fr/global.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@
'adresse' => 'Adresse',
'ip' => "Adresse IP",
'v4id' => "ID réseau terrain",
'bonne' => 'Bonne place',
'type_place' => 'Type de place',

// ALERTES
'alerte_full' => "",
Expand Down

0 comments on commit 202f202

Please sign in to comment.