Show amount of results filtered out

This commit is contained in:
Marco van Dijk 2022-03-11 16:32:01 +01:00
parent ca728452ce
commit 3ddf1f2339

View File

@ -29,6 +29,7 @@ const EventViewer = (obj) => {
const [unbondActivated, setUnbondActivated] = useState(true); const [unbondActivated, setUnbondActivated] = useState(true);
console.log("Rendering EventViewer"); console.log("Rendering EventViewer");
let unfiltered = 0; let unfiltered = 0;
let filtered = 0;
let prevBlock = 0; let prevBlock = 0;
let limitShown = obj.events.length + obj.tickets.length; let limitShown = obj.events.length + obj.tickets.length;
let hasLimited = false; let hasLimited = false;
@ -98,10 +99,6 @@ const EventViewer = (obj) => {
console.log("error, breaky breaky"); console.log("error, breaky breaky");
break; break;
} }
if (unfiltered > obj.maxAmount) {
hasLimited = true;
break;
}
// Filter by minimum value // Filter by minimum value
if (obj.amountFilter !== "") { if (obj.amountFilter !== "") {
if (parseFloat(obj.amountFilter) > thisEvent.eventValue) { if (parseFloat(obj.amountFilter) > thisEvent.eventValue) {
@ -196,8 +193,9 @@ const EventViewer = (obj) => {
setSearchTerm={obj.setSearchTerm} setSearchTerm={obj.setSearchTerm}
/>); />);
} }
} else { }
hasLimited = true; else {
filtered++;
} }
} }
@ -226,64 +224,70 @@ const EventViewer = (obj) => {
let filterBit; let filterBit;
if (obj.showFilter) { if (obj.showFilter) {
filterBit = <div className="flexContainer roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}> filterBit =
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}> <div className="strokeSmollLeft roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row">
{searchTermText} <span>Showing {filtered + unfiltered} out of {limitShown} results</span>
</div> </div>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="flexContainer" style={{margin: 0, width: '100%'}}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => { <div className="row" style={{ margin: 0, padding: 0 }}>
obj.setSearchTerm(""); {searchTermText}
}}> </div>
<h3>Clear</h3> <div className="row" style={{ margin: 0, padding: 0 }}>
</button> <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
obj.setSearchTerm("");
}}>
<h3>Clear</h3>
</button>
</div>
<input className="searchField" style={{ width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
value={obj.searchTerm}
onChange={(evt) => obj.setSearchTerm(evt.target.value)}
placeholder='Filter by Orchestrator address'
type="text"
/>
</div>
</div> </div>
<input className="searchField" style={{ width: '80%', paddingLeft: '1em', paddingRight: '1em' }} <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
value={obj.searchTerm} <div className="row" style={{ margin: 0, padding: 0 }}>
onChange={(evt) => obj.setSearchTerm(evt.target.value)} <h3>{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}</h3>
placeholder='Filter by Orchestrator address' </div>
type="text" <div className="row" style={{ margin: 0, padding: 0 }}>
/> <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
</div> <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
</div> obj.setAmountFilter(0);
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}> }}>
<div className="row" style={{ margin: 0, padding: 0 }}> <h3>0</h3>
<h3>{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}</h3> </button>
</div> </div>
<div className="row" style={{ margin: 0, padding: 0 }}> <input className="searchField" style={{ margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> value={obj.amountFilter}
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => { onChange={(evt) => obj.setAmountFilter(evt.target.value)}
obj.setAmountFilter(0); placeholder='Filter by minimum value'
}}> type="number"
<h3>0</h3> />
</button> <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
</div> <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '4em' }} onClick={() => {
<input className="searchField" style={{ margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em' }} const curVal = parseFloat(obj.amountFilter);
value={obj.amountFilter} obj.setAmountFilter(curVal + 100);
onChange={(evt) => obj.setAmountFilter(evt.target.value)} }}>
placeholder='Filter by minimum value' <h3>+100</h3>
type="number" </button>
/> </div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '4em' }} onClick={() => { <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
const curVal = parseFloat(obj.amountFilter); const curVal = parseFloat(obj.amountFilter);
obj.setAmountFilter(curVal + 100); obj.setAmountFilter(curVal + 1000);
}}> }}>
<h3>+100</h3> <h3>+1000</h3>
</button> </button>
</div> </div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> </div>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
const curVal = parseFloat(obj.amountFilter);
obj.setAmountFilter(curVal + 1000);
}}>
<h3>+1000</h3>
</button>
</div> </div>
</div> </div>
</div> </div>
</div>
} }
return ( return (