stronk/LivepeerEvents
1
0
Fork 0
mirror of https://github.com/stronk-dev/LivepeerEvents.git synced 2025-07-05 10:45:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

Clear now also clears the amount of items shown and the minimum amount filter

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-08 17:29:13 +01:00
parent 02173f15f0
commit 4bb3a22c8b
2 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/eventViewer.js
View File

@ -17,8 +17,6 @@ const defaultMaxShown = 100;
const defaultIncrementMaxShown = 100; const defaultIncrementMaxShown = 100;
const EventViewer = (obj) => { const EventViewer = (obj) => {
const [amountFilter, setAmountFilter] = useState("0");
const [maxAmount, setMaxAmount] = useState(defaultMaxShown);
const [filterActivated, setFilterActivated] = useState(true); const [filterActivated, setFilterActivated] = useState(true);
const [rewardActivated, setRewardActivated] = useState(true); const [rewardActivated, setRewardActivated] = useState(true);
const [updateActivated, setUpdateActivated] = useState(true); const [updateActivated, setUpdateActivated] = useState(true);
@ -47,17 +45,17 @@ const EventViewer = (obj) => {
let prevBlock = 0; let prevBlock = 0;
let showMoreBlock; let showMoreBlock;
if (maxAmount < limitShown) { if (obj.maxAmount < limitShown) {
showMoreBlock = <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => { showMoreBlock = <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
setMaxAmount(maxAmount + defaultIncrementMaxShown); obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
}}> }}>
<h3>Show more</h3> <h3>Show more</h3>
</button> </button>
} }
let showLessBlock; let showLessBlock;
if (defaultMaxShown < maxAmount) { if (defaultMaxShown < obj.maxAmount) {
showLessBlock = <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => { showLessBlock = <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
setMaxAmount(defaultMaxShown); obj.setMaxAmount(defaultMaxShown);
}}> }}>
<h3>Show {defaultMaxShown}</h3> <h3>Show {defaultMaxShown}</h3>
</button> </button>
@ -78,12 +76,12 @@ const EventViewer = (obj) => {
let eventList = []; let eventList = [];
for (const eventObj of obj.events) { for (const eventObj of obj.events) {
if (unfiltered > maxAmount) { if (unfiltered > obj.maxAmount) {
break; break;
} }
// Filter by minimum value // Filter by minimum value
if (amountFilter !== "") { if (obj.amountFilter !== "") {
if (parseFloat(amountFilter) > eventObj.eventValue) { if (parseFloat(obj.amountFilter) > eventObj.eventValue) {
continue; continue;
} }
} }
@ -151,7 +149,7 @@ const EventViewer = (obj) => {
continue; continue;
} }
if (unfiltered < maxAmount) { if (unfiltered < obj.maxAmount) {
unfiltered++; unfiltered++;
if (prevBlock === eventObj.transactionBlock) { if (prevBlock === eventObj.transactionBlock) {
eventList.push(<EventButton eventList.push(<EventButton
@ -178,7 +176,7 @@ const EventViewer = (obj) => {
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 1 }}> <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 1 }}>
<div className="stroke" style={{ margin: "0", padding: 0 }}> <div className="stroke" style={{ margin: "0", padding: 0 }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<h3>Showing max {maxAmount} results</h3> <h3>Showing max {obj.maxAmount} results</h3>
</div> </div>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row" style={{ margin: 0, padding: 0 }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
@ -212,34 +210,34 @@ const EventViewer = (obj) => {
</div> </div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}> <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row" style={{ margin: 0, padding: 0 }}>
<h3>{parseFloat(amountFilter) > 0 ? ("Only showing higher than " + amountFilter) : "Filter by minimum value"}</h3> <h3>{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}</h3>
</div> </div>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row" style={{ margin: 0, padding: 0 }}>
<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: '5em' }} onClick={() => { <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
setAmountFilter(0); obj.setAmountFilter(0);
}}> }}>
<h3>0</h3> <h3>0</h3>
</button> </button>
</div> </div>
<input className="searchField" style={{ margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em' }} <input className="searchField" style={{ margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
value={amountFilter} value={obj.amountFilter}
onChange={(evt) => setAmountFilter(evt.target.value)} onChange={(evt) => obj.setAmountFilter(evt.target.value)}
placeholder='Filter by minimum value' placeholder='Filter by minimum value'
type="number" type="number"
/> />
<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: '4em' }} onClick={() => {
const curVal = parseFloat(amountFilter); const curVal = parseFloat(obj.amountFilter);
setAmountFilter(curVal + 100); obj.setAmountFilter(curVal + 100);
}}> }}>
<h3>+100</h3> <h3>+100</h3>
</button> </button>
</div> </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: '5em' }} onClick={() => { <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
const curVal = parseFloat(amountFilter); const curVal = parseFloat(obj.amountFilter);
setAmountFilter(curVal + 1000); obj.setAmountFilter(curVal + 1000);
}}> }}>
<h3>+1000</h3> <h3>+1000</h3>
</button> </button>

9
src/livepeer.js
View File

@ -8,8 +8,11 @@ import Orchestrator from "./orchestratorViewer";
import Stat from "./statViewer"; import Stat from "./statViewer";
// Shows the EventViewer and other Livepeer related info // Shows the EventViewer and other Livepeer related info
const defaultMaxShown = 100;
const Livepeer = (obj) => { const Livepeer = (obj) => {
const [amountFilter, setAmountFilter] = useState("0");
const [maxAmount, setMaxAmount] = useState(defaultMaxShown);
const [prefill, setPrefill] = useSearchParams(); const [prefill, setPrefill] = useSearchParams();
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -176,6 +179,8 @@ const Livepeer = (obj) => {
<button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => { <button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => {
dispatch(clearOrchestrator()); dispatch(clearOrchestrator());
setSearchTerm(""); setSearchTerm("");
setAmountFilter(0);
setMaxAmount(defaultMaxShown);
}}> }}>
<h4>✖️ Clear</h4> <h4>✖️ Clear</h4>
</button> </button>
@ -194,7 +199,9 @@ const Livepeer = (obj) => {
<div id='bodyContent'> <div id='bodyContent'>
{sidebar} {sidebar}
<div className="mainContent"> <div className="mainContent">
<EventViewer events={eventsList} searchTerm={searchTerm} setSearchTerm={setSearchTerm} forceVertical={true} showFilter={showFilter} /> <EventViewer events={eventsList} searchTerm={searchTerm} setSearchTerm={setSearchTerm}
forceVertical={true} showFilter={showFilter} setAmountFilter={setAmountFilter} amountFilter={amountFilter}
maxAmount={maxAmount} setMaxAmount={setMaxAmount}/>
</div> </div>
</div> </div>
</div > </div >