seg_yinzy
/
myems
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added Search Input for meters in Web UI

pull/42/MERGE
13621160019@163.com 2021-06-26 08:06:23 +08:00
parent 73447386a2
commit 31509e4009
5 changed files with 121 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
web/src/components/MyEMS/Meter/MeterCost.js
View File

@ -60,6 +60,7 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [meterList, setMeterList] = useState([]);
const [filteredMeterList, setFilteredMeterList] = useState([]);
const [selectedMeter, setSelectedMeter] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily');
@ -139,6 +140,7 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
console.log(json);
setMeterList(json[0]);
setFilteredMeterList(json[0]);
if (json[0].length > 0) {
setSelectedMeter(json[0][0].value);
// enable submit button
@ -190,6 +192,7 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
console.log(json)
setMeterList(json[0]);
setFilteredMeterList(json[0]);
if (json[0].length > 0) {
setSelectedMeter(json[0][0].value);
// enable submit button
@ -205,7 +208,15 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
}).catch(err => {
console.log(err);
});
}
};
const onSearchMeter = ({ target }) => {
const keyword = target.value.toLowerCase();
const filteredResult = meterList.filter(
meter => meter.label.toLowerCase().includes(keyword)
);
setFilteredMeterList(keyword.length ? filteredResult : meterList);
};
let onComparisonTypeChange = ({ target }) => {
console.log(target.value);
@ -229,15 +240,15 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
}
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => {
setBasePeriodBeginsDatetime(newDateTime);
}
};
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
}
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
setReportingPeriodBeginsDatetime(newDateTime);
@ -246,7 +257,7 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
} else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
setReportingPeriodEndsDatetime(newDateTime);
@ -255,23 +266,24 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
};
var getValidBasePeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
};
var getValidBasePeriodEndsDatetimes = function (currentDate) {
return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
};
var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
};
var getValidReportingPeriodEndsDatetimes = function (currentDate) {
return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
};
// Handler
const handleSubmit = e => {
e.preventDefault();
@ -454,14 +466,17 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="meterSelect">
{t('Meter')}
</Label>
<CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
>
{meterList.map((meter, index) => (
<option value={meter.value} key={meter.value}>
{meter.label}
</option>
))}
</CustomInput>
<Form inline>
<Input placeholder={t('Search')} onChange={onSearchMeter} />
<CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
>
{filteredMeterList.map((meter, index) => (
<option value={meter.value} key={meter.value}>
{meter.label}
</option>
))}
</CustomInput>
</Form>
</FormGroup>
</Col>
<Col xs="auto">

53
web/src/components/MyEMS/Meter/MeterEnergy.js
View File

@ -61,6 +61,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [meterList, setMeterList] = useState([]);
const [filteredMeterList, setFilteredMeterList] = useState([]);
const [selectedMeter, setSelectedMeter] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily');
@ -141,6 +142,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
console.log(json);
setMeterList(json[0]);
setFilteredMeterList(json[0]);
if (json[0].length > 0) {
setSelectedMeter(json[0][0].value);
// enable submit button
@ -193,6 +195,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
console.log(json)
setMeterList(json[0]);
setFilteredMeterList(json[0]);
if (json[0].length > 0) {
setSelectedMeter(json[0][0].value);
// enable submit button
@ -232,15 +235,23 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
}
}
};
const onSearchMeter = ({ target }) => {
const keyword = target.value.toLowerCase();
const filteredResult = meterList.filter(
meter => meter.label.toLowerCase().includes(keyword)
);
setFilteredMeterList(keyword.length ? filteredResult : meterList);
};
let onBasePeriodBeginsDatetimeChange = (newDateTime) => {
setBasePeriodBeginsDatetime(newDateTime);
}
};
let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime);
}
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
setReportingPeriodBeginsDatetime(newDateTime);
@ -249,7 +260,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
} else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
setReportingPeriodEndsDatetime(newDateTime);
@ -258,23 +269,24 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}
};
var getValidBasePeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
};
var getValidBasePeriodEndsDatetimes = function (currentDate) {
return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
};
var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
};
var getValidReportingPeriodEndsDatetimes = function (currentDate) {
return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
};
// Handler
const handleSubmit = e => {
e.preventDefault();
@ -406,7 +418,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
console.log(err);
});
};
const handleExport = e => {
e.preventDefault();
const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
@ -455,14 +467,19 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="meterSelect">
{t('Meter')}
</Label>
<CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
>
{meterList.map((meter, index) => (
<option value={meter.value} key={meter.value}>
{meter.label}
</option>
))}
</CustomInput>
<Form inline>
<Input placeholder={t('Search')} onChange={onSearchMeter} />
<CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
>
{filteredMeterList.map((meter, index) => (
<option value={meter.value} key={meter.value}>
{meter.label}
</option>
))}
</CustomInput>
</Form>
</FormGroup>
</Col>
<Col xs="auto">

36
web/src/components/MyEMS/Meter/MeterSubmetersBalance.js
View File

@ -60,6 +60,7 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [meterList, setMeterList] = useState([]);
const [filteredMeterList, setFilteredMeterList] = useState([]);
const [selectedMeter, setSelectedMeter] = useState(undefined);
const [periodType, setPeriodType] = useState('daily');
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
@ -134,6 +135,7 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
console.log(json);
setMeterList(json[0]);
setFilteredMeterList(json[0]);
if (json[0].length > 0) {
setSelectedMeter(json[0][0].value);
// enable submit button
@ -186,6 +188,7 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
console.log(json)
setMeterList(json[0]);
setFilteredMeterList(json[0]);
if (json[0].length > 0) {
setSelectedMeter(json[0][0].value);
// enable submit button
@ -201,15 +204,23 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
}).catch(err => {
console.log(err);
});
}
};
const onSearchMeter = ({ target }) => {
const keyword = target.value.toLowerCase();
const filteredResult = meterList.filter(
meter => meter.label.toLowerCase().includes(keyword)
);
setFilteredMeterList(keyword.length ? filteredResult : meterList);
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
setReportingPeriodBeginsDatetime(newDateTime);
}
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
setReportingPeriodEndsDatetime(newDateTime);
}
};
var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
@ -393,14 +404,17 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="meterSelect">
{t('Meter')}
</Label>
<CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
>
{meterList.map((meter, index) => (
<option value={meter.value} key={meter.value}>
{meter.label}
</option>
))}
</CustomInput>
<Form inline>
<Input placeholder={t('Search')} onChange={onSearchMeter} />
<CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
>
{filteredMeterList.map((meter, index) => (
<option value={meter.value} key={meter.value}>
{meter.label}
</option>
))}
</CustomInput>
</Form>
</FormGroup>
</Col>
<Col xs="auto">

39
web/src/components/MyEMS/Meter/MeterTrend.js
View File

@ -56,6 +56,7 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [meterList, setMeterList] = useState([]);
const [filteredMeterList, setFilteredMeterList] = useState([]);
const [selectedMeter, setSelectedMeter] = useState(undefined);
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('day'));
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
@ -123,6 +124,7 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
console.log(json);
setMeterList(json[0]);
setFilteredMeterList(json[0]);
if (json[0].length > 0) {
setSelectedMeter(json[0][0].value);
// enable submit button
@ -175,6 +177,7 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
console.log(json)
setMeterList(json[0]);
setFilteredMeterList(json[0]);
if (json[0].length > 0) {
setSelectedMeter(json[0][0].value);
// enable submit button
@ -190,18 +193,23 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
}).catch(err => {
console.log(err);
});
}
};
const onSearchMeter = ({ target }) => {
const keyword = target.value.toLowerCase();
const filteredResult = meterList.filter(
meter => meter.label.toLowerCase().includes(keyword)
);
setFilteredMeterList(keyword.length ? filteredResult : meterList);
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
setReportingPeriodBeginsDatetime(newDateTime);
}
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
setReportingPeriodEndsDatetime(newDateTime);
}
};
var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
@ -381,14 +389,17 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="meterSelect">
{t('Meter')}
</Label>
<CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
>
{meterList.map((meter, index) => (
<option value={meter.value} key={meter.value}>
{meter.label}
</option>
))}
</CustomInput>
<Form inline>
<Input placeholder={t('Search')} onChange={onSearchMeter} />
<CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
>
{filteredMeterList.map((meter, index) => (
<option value={meter.value} key={meter.value}>
{meter.label}
</option>
))}
</CustomInput>
</Form>
</FormGroup>
</Col>
<Col xs={6} sm={3}>

3
web/src/i18n.js
View File

@ -133,6 +133,7 @@ const resources = {
"Input Energy Category": "Input Energy Category",
"Output Energy Category": "Output Energy Category",
"Fraction Parameter": "Fraction Parameter",
"Search": "Search",
//Card Summaries and Line Charts
"Base Period": "Base Period",
"Reporting Period": "Reporting Period",
@ -473,6 +474,7 @@ const resources = {
"Input Energy Category": "Eingangsenergiekategorie",
"Output Energy Category": "Ausgangsenergiekategorie",
"Fraction Parameter": "Fraktion Parameter",
"Search": "Suche",
//Card Summaries and Line Charts
"Base Period": "Basiszeitraum",
"Reporting Period": "Berichtszeitraum",
@ -816,6 +818,7 @@ const resources = {
"Input Energy Category": "消耗能源分类",
"Output Energy Category": "产出能源分类",
"Fraction Parameter": "分式参数",
"Search": "搜索",
//Card Summaries and Line Charts
"Base Period": "基准期",
"Reporting Period": "报告期",