Skip to content
This repository has been archived by the owner on Jul 11, 2019. It is now read-only.

Commit

Permalink
Agregada la manipulación del estado de las señales.
Browse files Browse the repository at this point in the history 
Falta ignorar los enclavamientos cuando esta en manual y revisarlos cuando se vuelve a automático.
  • Loading branch information
@Satyam
Satyam committed Jun 23, 2015
1 parent 567c901 commit 74b3f16
Show file tree
Hide file tree
Showing 9 changed files with 265 additions and 140 deletions.
1 change: 1 addition & 0 deletions src/actions.js
View file
Expand Up @@ -11,6 +11,7 @@ export default Reflux.createActions({
openTabSector: ASYNC,
error: SYNC,
clickCelda: SYNC,
clickSenal: SYNC,
sectorUpdated: SYNC,
closeEstado: SYNC,
cambio: SYNC,
Expand Down
26 changes: 11 additions & 15 deletions src/components/celda/celda.jsx
View file
@@ -1,7 +1,7 @@
import React, {PropTypes} from 'react';
require('./celda.less');
import actions from '../../actions.js';
import {ANCHO_CELDA, CENTRO_CELDA, X, Y} from '../../common/common.js';
import {ANCHO_CELDA, CENTRO_CELDA, X, Y, splitCoords, leftButton} from '../../common/common.js';
import _ from 'lodash';

import Senal from '../senal/senal.jsx';
Expand Down Expand Up @@ -32,16 +32,11 @@ export default React.createClass({
},
render: function () {

var coords = this.props.coords.split(','),
x = parseInt(coords[0], 10),
y = parseInt(coords[1], 10),
var [x, y] = splitCoords(this.props.coords),
celda = this.props.celda,
label = celda.descr || `[${x},${y}]`,
renderer = this[celda.tipo];

this.x = x;
this.y = y;

return (
<g
transform={`translate(${x * ANCHO_CELDA}, ${y * ANCHO_CELDA})`}
Expand All @@ -50,20 +45,21 @@ export default React.createClass({
<rect x='0' y='0' width={ANCHO_CELDA} height={ANCHO_CELDA} className={(celda.manual ? 'manual' : '')} />
{ renderer && renderer.call(this, celda) }
<text x="5" y="95">{label}</text>
{_.map(celda.senales, (senal, dir) => (<Senal dir={dir} luces={senal} key={dir}/>))}
{_.map(celda.senales, (senal, dir) => (<Senal
dir={dir}
luces={senal}
coords={celda.coords}
nombreSector={this.props.nombreSector}
key={dir}
/>))}
</g>
);
},
onClick: function (ev) {
if (ev.button !== 0) return false;
if (ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey) return false;
ev.preventDefault();
ev.stopPropagation();
if (!leftButton(ev)) return;
actions.clickCelda({
nombreSector: this.props.nombreSector,
coords: this.props.coords,
x: this.x,
y: this.y
coords: this.props.coords
});
},
linea: function (celda) {
Expand Down
219 changes: 126 additions & 93 deletions src/components/estado/estado.jsx
View file
Expand Up @@ -2,43 +2,13 @@ import React, {PropTypes} from 'react';
import Reflux from 'reflux';
import actions from '../../actions.js';
import {ANCHO_CELDA} from '../../common/common.js';
// import _ from 'lodash';
import _ from 'lodash';

require('./estado.less');

import estadoStore from '../../stores/estado.js';


export default React.createClass({
mixins: [
Reflux.connect(estadoStore, 'estado')
],
close: function () {
actions.closeEstado();
},
render: function () {
var s = this.state.estado;
return s.visible ? (<div
className= {'popover ' + s.side}
role='tooltip'
style={{
top: s.top,
left: s.left,
display: (s.visible ? 'block' : 'none')
}}
>
<div className="arrow" style={{top: ANCHO_CELDA / 2}}></div>
<i className="fa fa-close" onClick={this.close}/>
<h3 className="popover-title">{s.celda.tipo}</h3>
<div className="popover-content">
{s.celda.tipo === 'cambio' && (<Cambio celda={s.celda} nombreSector={s.nombreSector}/>)}
{s.celda.tipo === 'triple' && (<Triple celda={s.celda} nombreSector={s.nombreSector}/>)}
<pre>{JSON.stringify(s.celda, null, 2)}</pre>
</div>
</div>) : null;
}
});

var Cambio = React.createClass({
propTypes: {
// <Cambio celda={s.celda} nombreSector={s.nombreSector}/>
Expand All @@ -51,44 +21,29 @@ var Cambio = React.createClass({
*/
tipo: PropTypes.string.isRequired,
punta: PropTypes.shape({
dir:PropTypes.string.isRequired
dir: PropTypes.string.isRequired
}),
normal: PropTypes.shape({
dir:PropTypes.string.isRequired
dir: PropTypes.string.isRequired
}),
invertido: PropTypes.shape({
dir:PropTypes.string.isRequired
}),

dir: PropTypes.string.isRequired
})
}),
nombreSector: PropTypes.string.isRequired
},
cambioNormal: function () {
cambio: function (desviado) {
actions.cambio({
nombreSector: this.props.nombreSector,
coords: this.props.celda.coords,
desviado: false
desviado: desviado
});
},
cambioDesviado: function () {
actions.cambio({
nombreSector: this.props.nombreSector,
coords: this.props.celda.coords,
desviado: true
});
},
manualAutomatico: function () {
manual: function (manual) {
actions.manual({
nombreSector: this.props.nombreSector,
coords: this.props.celda.coords,
manual: false
});
},
manualManual: function () {
actions.manual({
nombreSector: this.props.nombreSector,
coords: this.props.celda.coords,
manual: true
manual: manual
});
},
render: function () {
Expand All @@ -101,12 +56,12 @@ var Cambio = React.createClass({
<button
type="button"
className={'btn btn-xs ' + (celda.desviado ? 'btn-inactivo' : 'btn-primary') }
onClick={this.cambioNormal}
onClick={this.cambio.bind(this, false)}
>Normal</button>
<button
type="button"
className={'btn btn-xs ' + (celda.desviado ? 'btn-warning' : 'btn-inactivo')}
onClick={this.cambioDesviado}
onClick={this.cambio.bind(this, true)}
>Invertido</button>
</div>
</div>
Expand All @@ -116,12 +71,12 @@ var Cambio = React.createClass({
<button
type="button"
className={'btn btn-xs ' + (celda.manual ? 'btn-inactivo' : 'btn-primary')}
onClick={this.manualAutomatico}
onClick={this.manual.bind(this, false)}
>Automático</button>
<button
type="button"
className={'btn btn-xs ' + (celda.manual ? 'btn-danger' : 'btn-inactivo')}
onClick={this.manualManual}
onClick={this.manual.bind(this, true)}
>Manual</button>
</div>
</div>
Expand All @@ -142,53 +97,32 @@ var Triple = React.createClass({
*/
tipo: PropTypes.string.isRequired,
punta: PropTypes.shape({
dir:PropTypes.string.isRequired
dir: PropTypes.string.isRequired
}),
centro: PropTypes.shape({
dir:PropTypes.string.isRequired
dir: PropTypes.string.isRequired
}),
izq: PropTypes.shape({
dir:PropTypes.string.isRequired
dir: PropTypes.string.isRequired
}),
der: PropTypes.shape({
dir:PropTypes.string.isRequired
}),
dir: PropTypes.string.isRequired
})
}),
nombreSector: PropTypes.string.isRequired
},
cambioIzq: function () {
actions.triple({
nombreSector: this.props.nombreSector,
coords: this.props.celda.coords,
posicion: -1
});
},
cambioNormal: function () {
actions.triple({
nombreSector: this.props.nombreSector,
coords: this.props.celda.coords,
posicion: 0
});
},
cambioDer: function () {
cambio: function (posicion) {
actions.triple({
nombreSector: this.props.nombreSector,
coords: this.props.celda.coords,
posicion: 1
posicion: posicion
});
},
manualAutomatico: function () {
manual: function (manual) {
actions.manual({
nombreSector: this.props.nombreSector,
coords: this.props.celda.coords,
manual: false
});
},
manualManual: function () {
actions.manual({
nombreSector: this.props.nombreSector,
coords: this.props.celda.coords,
manual: true
manual: manual
});
},
render: function () {
Expand All @@ -201,17 +135,17 @@ var Triple = React.createClass({
<button
type="button"
className={'btn btn-xs ' + (celda.posicion === -1 ? 'btn-warning' : 'btn-inactivo')}
onClick={this.cambioIzq}
onClick={this.cambio.bind(this, -1)}
>Izq.</button>
<button
type="button"
className={'btn btn-xs ' + (celda.posicion ? 'btn-inactivo' : 'btn-primary') }
onClick={this.cambioNormal}
onClick={this.cambio.bind(this, 0)}
>Normal</button>
<button
type="button"
className={'btn btn-xs ' + (celda.posicion === 1 ? 'btn-warning' : 'btn-inactivo')}
onClick={this.cambioDer}
onClick={this.cambio.bind(this, 1)}
>Der.</button>
</div>
</div>
Expand All @@ -221,15 +155,114 @@ var Triple = React.createClass({
<button
type="button"
className={'btn btn-xs ' + (celda.manual ? 'btn-inactivo' : 'btn-primary')}
onClick={this.manualAutomatico}
onClick={this.manual.bind(this, false)}
>Automático</button>
<button
type="button"
className={'btn btn-xs ' + (celda.manual ? 'btn-danger' : 'btn-inactivo')}
onClick={this.manualManual}
onClick={this.manual.bind(this, true)}
>Manual</button>
</div>
</div>
</div>);
}
});
var Senal = React.createClass({
estado: function (estado, luz) {
// action constitucion 2,4,W senal { luz: 'der', estado: 'alto' }
var p = this.props;
actions.senal({
nombreSector: p.nombreSector,
coords: p.celda.coords + ',' + p.senal,
luz: luz,
estado: estado
});
},
manual: function (manual, luz) {
var p = this.props;
actions.manual({
nombreSector: p.nombreSector,
coords: p.celda.coords + ',' + p.senal,
luz: luz,
manual: manual
});
},
render: function () {
var p = this.props,
senal = p.celda.senales[p.senal];

return (<div className="senal form-horizontal">
{_.map(senal, (config, luz) => (
<div className="form-group" key={luz}>
<label className="col-md-4">{luz}</label>
<div className="btn-group col-md-8" role="group" aria-label="manual">
<button
type="button"
className={'btn btn-xs ' + (config.manual ? 'btn-inactivo' : 'btn-primary')}
onClick={this.manual.bind(this, false, luz)}
>Automático</button>
<button
type="button"
className={'btn btn-xs ' + (config.manual ? 'btn-danger' : 'btn-inactivo')}
onClick={this.manual.bind(this, true, luz)}
>Manual</button>
</div>
<div
className={'btn-group col-md-8 col-md-offset-4 ' + config.estado}
role="group"
aria-label="estado"
>
<button
type="button"
className="btn btn-xs libre"
onClick={this.estado.bind(this, 'libre', luz)}
>Libre</button>
<button
type="button"
className="btn btn-xs precaucion"
onClick={this.estado.bind(this, 'precaucion', luz)}
>Precaución</button>
<button
type="button"
className="btn btn-xs alto"
onClick={this.estado.bind(this, 'alto', luz)}
>Alto</button>
</div>
</div>
))}
</div>);
}
});


export default React.createClass({
mixins: [
Reflux.connect(estadoStore, 'estado')
],
close: function () {
actions.closeEstado();
},
render: function () {
var s = this.state.estado;

if (_.isEmpty(s)) return null;
var Content = (s.senal ? Senal : {cambio: Cambio, triple: Triple}[s.celda.tipo]) || null;
return s.visible ? (<div
className= {'popover ' + s.side}
role='tooltip'
style={{
top: s.top,
left: s.left,
display: (s.visible ? 'block' : 'none')
}}
>
<div className="arrow" style={{top: ANCHO_CELDA / 2}}></div>
<i className="fa fa-close" onClick={this.close}/>
<h3 className="popover-title">{s.senal ? 'Señal ' + s.senal : s.celda.tipo}</h3>
<div className="popover-content">
{Content && (<Content celda={s.celda} nombreSector={s.nombreSector} senal={s.senal}/>)}
<pre>{JSON.stringify(s.celda, null, 2)}</pre>
</div>
</div>) : null;
}
});

0 comments on commit 74b3f16

Please sign in to comment.