Skip to content

Commit

Permalink
[#1953] Always show indicator period values
Browse files Browse the repository at this point in the history
  • Loading branch information
@KasperBrandt
KasperBrandt committed Jan 15, 2016
1 parent cca446c commit 0877cb2
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 158 deletions.
147 changes: 68 additions & 79 deletions akvo/rsr/static/scripts-src/project-main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,54 +13,74 @@ var Accordion = ReactBootstrap.Accordion,
Panel = ReactBootstrap.Panel,
i18n;

Indicator = React.createClass({displayName: 'Indicator',
render: function () {
var period_start = this.props.indicator.period_start;
var period_end = this.props.indicator.period_end;
var periods;
if (period_start !== undefined) {
if (period_end !== undefined) {
periods = "(" + period_start + " - " + period_end + ")";
} else {
periods = "(" + period_start + " - " + i18n.end_date_unknown_text + ")";
IndicatorPeriodValue = React.createClass({displayName: 'IndicatorPeriodValue',
render: function() {
var target_value = this.props.indicator.target_value;
var actual_value = this.props.indicator.actual_value;

if (actual_value === undefined) {
actual_value = '';
}
} else if (period_end !== undefined) {
periods = "(" + i18n.start_date_unknown_text + " - " + period_end + ")";
} else {
periods = "";
}

var target_value = this.props.indicator.target_value;
var actual_value = this.props.indicator.actual_value;
var value = "";
if (actual_value !== undefined && actual_value !== "") {
value += actual_value + " (" + i18n.actual_text + ")";
if (target_value !== undefined && target_value !== "") {
value += " / ";
if (target_value === undefined) {
target_value = '';
}

return (actual_value !== '' && target_value !== '') ? (
React.DOM.span(null,
": ", React.DOM.i(null, actual_value, " (",i18n.actual_text,") / ", target_value, " (",i18n.target_text,")")
)
) : actual_value !== '' ? (
React.DOM.span(null,
": ", React.DOM.i(null, actual_value, " (",i18n.actual_text,")")
)
) : target_value !== '' ? (
React.DOM.span(null,
": ", React.DOM.i(null, target_value, " (",i18n.target_text,")")
)
) : (
React.DOM.span(null )
);
}
if (target_value !== undefined && target_value !== "") {
value += target_value + " (" + i18n.target_text + ")";
}
});

if (this.props.indicator.title && periods !== "") {
return (
React.DOM.div(null,
this.props.indicator.title, " ", periods,": ", React.DOM.i(null, value)
)
);
} else if (this.props.indicator.title) {
return (
React.DOM.div(null,
this.props.indicator.title
)
IndicatorPeriod = React.createClass({displayName: 'IndicatorPeriod',
render: function () {
var period_start = this.props.indicator.period_start;
var period_end = this.props.indicator.period_end;

if (period_start === undefined && period_end === undefined) {
return (
React.DOM.span(null )
);
} else {
}

if (period_start === undefined) {
period_start = i18n.start_date_unknown_text;
} else if (period_end === undefined) {
period_end = i18n.end_date_unknown_text;
}

return (
React.DOM.div(null)
React.DOM.span(null,
" (",period_start, " - ", period_end,")"
)
);
}
});

Indicator = React.createClass({displayName: 'Indicator',
render: function () {
return this.props.indicator.title ? (
React.DOM.div(null,
this.props.indicator.title,
IndicatorPeriod( {indicator:this.props.indicator} ),
IndicatorPeriodValue( {indicator:this.props.indicator} )
)
) : (
React.DOM.span(null )
);
}
}
});

Result = React.createClass({displayName: 'Result',
Expand Down Expand Up @@ -97,46 +117,11 @@ AccordionInstance = React.createClass({displayName: 'AccordionInstance',

splitLines: function(text) {
var i = 0;
var lines = text.match(/[^\r\n]+/g).map(function(line) {
i = i + 1;
return text.match(/[^\r\n]+/g).map(function(line) {
return (
React.DOM.p( {key:i}, line)
React.DOM.p( {key:i++}, line)
);
});
return lines;
},

getIndicators: function(indicators) {
var i = 0;
var result_list = indicators.map(function(indicator) {
i = i + 1;
return (
React.DOM.dl( {className:"indicators-description"},
React.DOM.dt(null,
React.DOM.i( {className:"fa fa-check"}), " ", result.title
),
React.DOM.dd(null)
)
);
});
return result_list;
},

getResults: function(results) {
var i = 0;
var result_list = results.map(function(result) {
i = i + 1;
return (
React.DOM.dl( {className:"results-description"},
React.DOM.dt(null,
React.DOM.i( {className:"fa fa-check"}), " ", React.DOM.strong(null, result.title)
),
React.DOM.dd(null),
this.getIndicators(result.indicators)
)
);
});
return result_list;
},

render: function() {
Expand Down Expand Up @@ -709,7 +694,7 @@ if (firstAccordionChild !== null) {
// Placeholder to ensure label is correct size - under rare
// conditions label will have no text content until slider handle
// is moved.
handleLabelEl.textContent = '--'
handleLabelEl.textContent = '--';

handleChangeLabelEl.classList.add('handle-change-label');

Expand Down Expand Up @@ -958,7 +943,9 @@ if (firstAccordionChild !== null) {
// Object successfully created

// This callback expands the indicator period panel when the new data is loaded
var callback = function(){periodNode.querySelector('.expand-indicator-period').click()};
var callback = function(){
periodNode.querySelector('.expand-indicator-period').click();
};

// TODO: only close the panel and remove the "saving" message once the "addAdditionalUpdateData"
// call has finished
Expand Down Expand Up @@ -1027,7 +1014,9 @@ if (firstAccordionChild !== null) {
// Object successfully saved

// This callback expands the indicator period panel when the new data is loaded
var callback = function(){periodNode.querySelector('.expand-indicator-period').click()};
var callback = function(){
periodNode.querySelector('.expand-indicator-period').click();
};

// TODO: only close the panel and remove the "saving" message once the "addAdditionalUpdateData"
// call has finished
Expand Down
147 changes: 68 additions & 79 deletions akvo/rsr/static/scripts-src/project-main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,54 +13,74 @@ var Accordion = ReactBootstrap.Accordion,
Panel = ReactBootstrap.Panel,
i18n;

Indicator = React.createClass({
render: function () {
var period_start = this.props.indicator.period_start;
var period_end = this.props.indicator.period_end;
var periods;
if (period_start !== undefined) {
if (period_end !== undefined) {
periods = "(" + period_start + " - " + period_end + ")";
} else {
periods = "(" + period_start + " - " + i18n.end_date_unknown_text + ")";
IndicatorPeriodValue = React.createClass({
render: function() {
var target_value = this.props.indicator.target_value;
var actual_value = this.props.indicator.actual_value;

if (actual_value === undefined) {
actual_value = '';
}
} else if (period_end !== undefined) {
periods = "(" + i18n.start_date_unknown_text + " - " + period_end + ")";
} else {
periods = "";
}

var target_value = this.props.indicator.target_value;
var actual_value = this.props.indicator.actual_value;
var value = "";
if (actual_value !== undefined && actual_value !== "") {
value += actual_value + " (" + i18n.actual_text + ")";
if (target_value !== undefined && target_value !== "") {
value += " / ";
if (target_value === undefined) {
target_value = '';
}

return (actual_value !== '' && target_value !== '') ? (
<span>
: <i>{actual_value} ({i18n.actual_text}) / {target_value} ({i18n.target_text})</i>
</span>
) : actual_value !== '' ? (
<span>
: <i>{actual_value} ({i18n.actual_text})</i>
</span>
) : target_value !== '' ? (
<span>
: <i>{target_value} ({i18n.target_text})</i>
</span>
) : (
<span />
);
}
if (target_value !== undefined && target_value !== "") {
value += target_value + " (" + i18n.target_text + ")";
}
});

if (this.props.indicator.title && periods !== "") {
return (
<div>
{this.props.indicator.title} {periods}: <i>{value}</i>
</div>
);
} else if (this.props.indicator.title) {
return (
<div>
{this.props.indicator.title}
</div>
IndicatorPeriod = React.createClass({
render: function () {
var period_start = this.props.indicator.period_start;
var period_end = this.props.indicator.period_end;

if (period_start === undefined && period_end === undefined) {
return (
<span />
);
} else {
}

if (period_start === undefined) {
period_start = i18n.start_date_unknown_text;
} else if (period_end === undefined) {
period_end = i18n.end_date_unknown_text;
}

return (
<div/>
<span>
&nbsp;({period_start} - {period_end})
</span>
);
}
});

Indicator = React.createClass({
render: function () {
return this.props.indicator.title ? (
<div>
{this.props.indicator.title}
<IndicatorPeriod indicator={this.props.indicator} />
<IndicatorPeriodValue indicator={this.props.indicator} />
</div>
) : (
<span />
);
}
}
});

Result = React.createClass({
Expand Down Expand Up @@ -97,46 +117,11 @@ AccordionInstance = React.createClass({

splitLines: function(text) {
var i = 0;
var lines = text.match(/[^\r\n]+/g).map(function(line) {
i = i + 1;
return text.match(/[^\r\n]+/g).map(function(line) {
return (
<p key={i}>{line}</p>
<p key={i++}>{line}</p>
);
});
return lines;
},

getIndicators: function(indicators) {
var i = 0;
var result_list = indicators.map(function(indicator) {
i = i + 1;
return (
<dl className="indicators-description">
<dt>
<i className="fa fa-check"></i> {result.title}
</dt>
<dd></dd>
</dl>
);
});
return result_list;
},

getResults: function(results) {
var i = 0;
var result_list = results.map(function(result) {
i = i + 1;
return (
<dl className="results-description">
<dt>
<i className="fa fa-check"></i> <strong>{result.title}</strong>
</dt>
<dd></dd>
{this.getIndicators(result.indicators)}
</dl>
);
});
return result_list;
},

render: function() {
Expand Down Expand Up @@ -709,7 +694,7 @@ if (firstAccordionChild !== null) {
// Placeholder to ensure label is correct size - under rare
// conditions label will have no text content until slider handle
// is moved.
handleLabelEl.textContent = '--'
handleLabelEl.textContent = '--';

handleChangeLabelEl.classList.add('handle-change-label');

Expand Down Expand Up @@ -958,7 +943,9 @@ if (firstAccordionChild !== null) {
// Object successfully created

// This callback expands the indicator period panel when the new data is loaded
var callback = function(){periodNode.querySelector('.expand-indicator-period').click()};
var callback = function(){
periodNode.querySelector('.expand-indicator-period').click();
};

// TODO: only close the panel and remove the "saving" message once the "addAdditionalUpdateData"
// call has finished
Expand Down Expand Up @@ -1027,7 +1014,9 @@ if (firstAccordionChild !== null) {
// Object successfully saved

// This callback expands the indicator period panel when the new data is loaded
var callback = function(){periodNode.querySelector('.expand-indicator-period').click()};
var callback = function(){
periodNode.querySelector('.expand-indicator-period').click();
};

// TODO: only close the panel and remove the "saving" message once the "addAdditionalUpdateData"
// call has finished
Expand Down

0 comments on commit 0877cb2

Please sign in to comment.