Skip to content

Commit

Permalink
#633 make reactive wf group selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@ollie64
ollie64 committed Sep 22, 2015
1 parent afa71c1 commit c48730e
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 64 deletions.
71 changes: 26 additions & 45 deletions celos-ui/src/main/webapp/static/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,29 +20,29 @@ var CelosMainFetch = React.createClass({
getInitialState: function () {
return {data: {rows: [], navigation: {}}}
},
loadCommentsFromServer: function () {
console.log("loadCommentsFromServer")
loadCommentsFromServer: function (props) {
// console.log("loadCommentsFromServer " + props.request.zoom + " " + props.request.time)
$.ajax({
url: this.props.url,
url: props.url,
data: {
zoom: this.props.request.zoom,
time: this.props.request.time
zoom: props.request.zoom,
time: props.request.time
},
dataType: 'json',
cache: false,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString())
console.error(props.url, status, err.toString())
}.bind(this)
})
},
componentWillReceiveProps: function () {
this.loadCommentsFromServer()
},
componentWillMount: function () {
this.loadCommentsFromServer()
this.loadCommentsFromServer(this.props)
},
componentWillReceiveProps: function (nextProps) {
this.loadCommentsFromServer(nextProps)
},
render: function () {
console.log("CelosMainFetch", this.props, this.state)
Expand All @@ -65,7 +65,7 @@ var CelosMainFetch = React.createClass({

var CelosMain = React.createClass({
render: function () {
console.log("CelosMain", this.props.data)
console.log("CelosMain", this.props.data, this.props.request)

return (
<div>
Expand All @@ -77,53 +77,40 @@ var CelosMain = React.createClass({
if (wfGroup.active) {
return (
<div key={i}>
<WorkflowsGroupFetch url={wfGroup.url} active={wfGroup.active} />
<WorkflowsGroupFetch name={wfGroup.name} active={wfGroup.active} request={this.props.request} />
<br />
</div>
)
} else {
var req = this.props.request
var newUrl = makeCelosHref(req.zoom, req.time, req.groups.concat(wfGroup.name))
return (
<div key={i}>
{wfGroup.name}
<a href={ newUrl }>{wfGroup.name}</a>
</div>
)
}
})}
}.bind(this))}
</div>
)
}

})


var makeCelosHref = function(zoom, time, groups) {
var url0 = "#ui?"
if (zoom) {
url0 += "zoom=" + encodeURIComponent(zoom) + "&"
}
if (time) {
url0 += "time=" + encodeURIComponent(time) + "&"
}
if (groups) {
url0 += "groups=" + groups.map(encodeURIComponent).join(",") + "&"
}
return url0.substring(0, url0.length - 1)
}


var Navigation = React.createClass({
render: function () {
console.log("Navigation", this.props.data)
return (
<center className="bigButtons">
<a href={makeCelosHref(this.props.request.zoom, this.props.data.left, this.props.request.groups)}> &lt; Prev page </a>
<a href={makeCelosHref(this.props.request.zoom, this.props.data.left, this.props.request.groups)}>&lt; Prev page </a>
<strong> | </strong>
<a href={makeCelosHref(this.props.request.zoom, this.props.data.right, this.props.request.groups)}> Next page &gt; </a>
<a href={makeCelosHref(this.props.request.zoom, this.props.data.right, this.props.request.groups)}>Next page &gt; </a>
<br />
<br />
<a href={makeCelosHref(this.props.data.zoomOut, this.props.request.time, this.props.request.groups)}> Zoom OUT </a>
<a href={makeCelosHref(this.props.data.zoomOut, this.props.request.time, this.props.request.groups)}>Zoom OUT {this.props.data.zoomOut} </a>
<strong> / </strong>
<a href={makeCelosHref(this.props.data.zoomIn, this.props.request.time, this.props.request.groups)}> Zoom IN </a>
<a href={makeCelosHref(this.props.data.zoomIn, this.props.request.time, this.props.request.groups)}>Zoom IN {this.props.data.zoomIn} </a>
<br />
<br />
</center>
Expand All @@ -132,19 +119,13 @@ var Navigation = React.createClass({
})


if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position) {
position = position || 0
return this.indexOf(searchString, position) === position
}
}


var parseParams = function (paramsList) {
res = {}
paramsList.forEach(function (parameter) {
if (parameter.startsWith("groups=")) {
res["groups"] = parameter.substring(("groups=").length).split(",").map(decodeURIComponent)
if (parameter === "") {
// pass
} else if (parameter.startsWith("groups=")) {
res["groups"] = parameter.substring(("groups=").length).split(",").map(decodeURIComponent).filter(function(x) {return x})
} else if (parameter.startsWith("zoom=")) {
res["zoom"] = decodeURIComponent(parameter.substring(("zoom=").length))
} else if (parameter.startsWith("time=")) {
Expand All @@ -157,9 +138,9 @@ var parseParams = function (paramsList) {
}

var defaultController = function() {
if (window.location.hash === "#") {
if (window.location.hash === "" || window.location.hash === "#ui") {
ReactDOM.render(
<CelosMainFetch url="/react" />,
<CelosMainFetch url="/react" request={{}} />,
document.getElementById('content')
)
} else if (window.location.hash.startsWith("#ui?")) {
Expand Down
25 changes: 25 additions & 0 deletions celos-ui/src/main/webapp/static/js/lib.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@



if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position) {
position = position || 0
return this.indexOf(searchString, position) === position
}
}



function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
Expand All @@ -11,3 +22,17 @@ function getQueryVariable(variable) {
return null;
}

var makeCelosHref = function(zoom, time, groups) {
var url0 = "#ui?"
if (zoom) {
url0 += "zoom=" + encodeURIComponent(zoom) + "&"
}
if (time) {
url0 += "time=" + encodeURIComponent(time) + "&"
}
if (groups && groups.length != 0) {
url0 += "groups=" + groups.map(encodeURIComponent).join(",") + "&"
}
return url0.substring(0, url0.length - 1)
}

50 changes: 31 additions & 19 deletions celos-ui/src/main/webapp/static/js/workflows-group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,54 +17,65 @@
var slotsNum = Math.trunc(($(window).width() - 250) / (30 + 4)) - 1;

var WorkflowsGroupFetch = React.createClass({
getInitialState: function () {
return {data: null};
},
loadCommentsFromServer: function () {
loadCommentsFromServer: function (props) {
console.log("loadCommentsFromServer:", props)
$.ajax({
url: this.props.url,
url: "/react",
data: {
count: slotsNum,
zoom: getQueryVariable("zoom", window.location.search),
time: getQueryVariable("time", window.location.search)
group: props.name,
zoom: props.request.zoom,
time: props.request.time
},
dataType: 'json',
cache: false,
success: function (data) {
this.setState({data: data});
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
console.error(props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function () {
this.loadCommentsFromServer();
componentWillMount: function () {
console.log("componentWillMount:", this.props)
this.loadCommentsFromServer(this.props);
},
componentWillReceiveProps: function () {
this.loadCommentsFromServer()
componentWillReceiveProps: function (nextProps) {
console.log("componentWillReceiveProps:", nextProps)
this.loadCommentsFromServer(nextProps)
},
render: function () {
console.log("WorkflowsGroupFetch", this.state.data);
if (this.state.data == null) {
return <div />;
} else {
console.log("WorkflowsGroupFetch", this.state);
if (this.state) {
return (
<WorkflowsGroup data={this.state.data}/>
<WorkflowsGroup data={this.state.data} request={this.props.request} />
);
} else {
return <div />;
}
}
});


var WorkflowsGroup = React.createClass({
render: function () {
console.log("WorkflowsGroup", this.props.data);
var req = this.props.request
var groupName = this.props.data.name
var newGroups
if (req.groups && req.groups != []) {
newGroups = req.groups.filter(function(x) { return x != groupName })
} else {
newGroups = [groupName]
}
var newUrl = makeCelosHref(req.zoom, req.time, newGroups)
return (
<table className="workflowTable">
<thead>
<tr>
<th className="groupName">
<a href={"#groups/" + encodeURIComponent(this.props.data.name) }>
<a href={ newUrl }>
{this.props.data.name}
</a>
</th>
Expand Down Expand Up @@ -105,7 +116,7 @@ var TimeSlot = React.createClass({
render: function () {
return (
<td className={"slot " + this.props.data.status}>
<a href={this.props.data.url} data-slot-id="parquetify-retarget@2015-09-15T18:00:00.000Z">
<a href={this.props.data.url} >
{(! this.props.data.quantity)
? <div />
: <div>{this.props.data.quantity}</div> }
Expand All @@ -114,3 +125,4 @@ var TimeSlot = React.createClass({
);
}
});

0 comments on commit c48730e

Please sign in to comment.