Update progress bars to be more interactive, fix multiplication by 100 bug and added completion percentage at the top
This commit is contained in:
parent
d7bb77b486
commit
05308cb953
@ -40,6 +40,10 @@
|
||||
background-color:rgba(0,80,200,0.4);
|
||||
}
|
||||
|
||||
.finalProduct{
|
||||
background-color:#152018;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
background-color:black;
|
||||
}
|
||||
@ -61,6 +65,10 @@
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
html{
|
||||
background-color: #212529;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
|
||||
101
src/App.js
101
src/App.js
@ -25,7 +25,7 @@ const fuzzysort = require('fuzzysort')
|
||||
const parse = require('csv-parse/lib/sync')
|
||||
const axios = require('axios');
|
||||
|
||||
const dataSplitters = [0,190,475,670]
|
||||
const dataSplitters = [0,186,453,657]
|
||||
|
||||
const BACKEND_URL = "https://projectdivar.com:4505"
|
||||
|
||||
@ -50,7 +50,7 @@ function Item(p){
|
||||
})
|
||||
}
|
||||
|
||||
return <Row className={"pb-1 pt-1 text-light"+(Number(item.obtained)===0?" notStarted":Number(item.obtained)===Number(item.required)?" completed":" inProgress")}>
|
||||
return <Row className={"pb-1 pt-1 text-light"+(Number(item.obtained)===0?item.finalcraft?" finalProduct":" notStarted":Number(item.obtained)===Number(item.required)?" completed":" inProgress")}>
|
||||
<Col>
|
||||
<img src={"https://xivapi.com"+item.icon} alt={item.name}/> {item.name}
|
||||
</Col>
|
||||
@ -377,10 +377,15 @@ function App() {
|
||||
const [data3,setData3] = useState([])
|
||||
const [data4,setData4] = useState([])
|
||||
const [fileData,setFileData] = useState()
|
||||
const [fileData2,setFileData2] = useState()
|
||||
const [update,setUpdate] = useState(true)
|
||||
const [succeeded,setSucceeded] = useState(0)
|
||||
const [failed,setFailed] = useState(0)
|
||||
const [total,setTotal] = useState(0)
|
||||
const [craftsRatio,setCraftsRatio] = useState(0)
|
||||
const [missingCraftsRatio,setMissingCraftsRatio] = useState(0)
|
||||
const [inProgressRatio,setInProgressRatio] = useState(0)
|
||||
const [missingProgressRatio,setMissingProgressRatio] = useState(0)
|
||||
const [completeRatio,setCompleteRatio] = useState(0)
|
||||
const [lastModified,setLastModified] = useState(new Date())
|
||||
|
||||
@ -412,13 +417,33 @@ function App() {
|
||||
setData(data.data.slice(dataSplitters[0],dataSplitters[1]))
|
||||
setData2(data.data.slice(dataSplitters[1],dataSplitters[2]))
|
||||
setData3(data.data.slice(dataSplitters[2],dataSplitters[3]))
|
||||
setData4(data.data.slice(dataSplitters[3],data.data.length))
|
||||
let items=0,tot=0
|
||||
for (var item of data.data){
|
||||
items+=item.obtained
|
||||
tot+=item.required
|
||||
let finalItems=data.data.slice(dataSplitters[0],dataSplitters[3])
|
||||
let tempFinalItems=data.data.slice(dataSplitters[3],data.data.length)
|
||||
let itemsComplete=0,itemsInProgress=0,itemsCrafts=0,tot=0,totItemsInProgress=0,totCrafts=0
|
||||
for(var i=0;i<tempFinalItems.length;i++){
|
||||
if (tempFinalItems[i].required==tempFinalItems[i].obtained){
|
||||
itemsCrafts+=Number(tempFinalItems[i].required)
|
||||
}
|
||||
totCrafts+=Number(tempFinalItems[i].required)
|
||||
tot+=Number(tempFinalItems[i].required)
|
||||
tempFinalItems[i]={...tempFinalItems[i],"finalcraft":true}
|
||||
}
|
||||
setCompleteRatio(items/tot)
|
||||
setData4(tempFinalItems)
|
||||
for (var item of finalItems){
|
||||
if (item.required==item.obtained){
|
||||
itemsComplete+=Number(item.required)
|
||||
} else
|
||||
if (item.obtained>0){
|
||||
itemsInProgress+=Number(item.obtained)
|
||||
totItemsInProgress+=Number(item.required)
|
||||
}
|
||||
tot+=Number(item.required)
|
||||
}
|
||||
setMissingCraftsRatio(((totCrafts-itemsCrafts)/tot*100).toFixed(2))
|
||||
setMissingProgressRatio(((totItemsInProgress-itemsInProgress)/tot*100).toFixed(2))
|
||||
setCompleteRatio((itemsComplete/tot*100).toFixed(2))
|
||||
setInProgressRatio((itemsInProgress/tot*100).toFixed(2))
|
||||
setCraftsRatio((itemsCrafts/tot*100).toFixed(2))
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -472,7 +497,7 @@ function App() {
|
||||
return ()=>clearInterval(interval)
|
||||
},[])
|
||||
|
||||
const disabled=true
|
||||
const disabled=false
|
||||
|
||||
useEffect(()=>{
|
||||
if (update) {
|
||||
@ -482,13 +507,33 @@ function App() {
|
||||
setData(data.data.slice(dataSplitters[0],dataSplitters[1]))
|
||||
setData2(data.data.slice(dataSplitters[1],dataSplitters[2]))
|
||||
setData3(data.data.slice(dataSplitters[2],dataSplitters[3]))
|
||||
setData4(data.data.slice(dataSplitters[3],data.data.length))
|
||||
let items=0,tot=0
|
||||
for (var item of data.data){
|
||||
items+=item.obtained
|
||||
tot+=item.required
|
||||
let finalItems=data.data.slice(dataSplitters[0],dataSplitters[3])
|
||||
let tempFinalItems=data.data.slice(dataSplitters[3],data.data.length)
|
||||
let itemsComplete=0,itemsInProgress=0,itemsCrafts=0,tot=0,totItemsInProgress=0,totCrafts=0
|
||||
for(var i=0;i<tempFinalItems.length;i++){
|
||||
if (tempFinalItems[i].required==tempFinalItems[i].obtained){
|
||||
itemsCrafts+=Number(tempFinalItems[i].required)
|
||||
}
|
||||
totCrafts+=Number(tempFinalItems[i].required)
|
||||
tot+=Number(tempFinalItems[i].required)
|
||||
tempFinalItems[i]={...tempFinalItems[i],"finalcraft":true}
|
||||
}
|
||||
setCompleteRatio(items/tot)
|
||||
setData4(tempFinalItems)
|
||||
for (var item of finalItems){
|
||||
if (item.required==item.obtained){
|
||||
itemsComplete+=Number(item.required)
|
||||
} else
|
||||
if (item.obtained>0){
|
||||
itemsInProgress+=Number(item.obtained)
|
||||
totItemsInProgress+=Number(item.required)
|
||||
}
|
||||
tot+=Number(item.required)
|
||||
}
|
||||
setMissingCraftsRatio(((totCrafts-itemsCrafts)/tot*100).toFixed(2))
|
||||
setMissingProgressRatio(((totItemsInProgress-itemsInProgress)/tot*100).toFixed(2))
|
||||
setCompleteRatio((itemsComplete/tot*100).toFixed(2))
|
||||
setInProgressRatio((itemsInProgress/tot*100).toFixed(2))
|
||||
setCraftsRatio((itemsCrafts/tot*100).toFixed(2))
|
||||
})
|
||||
.catch((err)=>{
|
||||
console.log(err.message)
|
||||
@ -553,6 +598,22 @@ function App() {
|
||||
setTotal(d.length)
|
||||
},[fileData])
|
||||
|
||||
useEffect(()=>{
|
||||
|
||||
const downloadData=(d,val,max)=>{
|
||||
if (val<max) {
|
||||
axios.post(BACKEND_URL+"/addItem",d[val])
|
||||
.then((data)=>{
|
||||
setTimeout(downloadData(d,val+1,max),250)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
var d = parse(fileData2,{columns:true,skip_empty_lines:true})
|
||||
console.log(d)
|
||||
downloadData(d,0,d.length)
|
||||
},[fileData2])
|
||||
|
||||
function Importer(){
|
||||
return <Row>
|
||||
<Col>
|
||||
@ -597,9 +658,16 @@ function App() {
|
||||
nav==="main"?
|
||||
data.length>0?
|
||||
<>
|
||||
<Row><Col className="text-white">
|
||||
<h3>{Number(completeRatio)+Number(inProgressRatio)+Number(craftsRatio)}% complete</h3>
|
||||
</Col></Row>
|
||||
<Row>
|
||||
<ProgressBar className="bg-dark text-white">
|
||||
<ProgressBar animated striped variant="success" label={`${completeRatio}%`} now={completeRatio} />
|
||||
<ProgressBar animated striped variant="info" label={`${inProgressRatio}%`} now={inProgressRatio} />
|
||||
<ProgressBar animated striped variant="dark" now={missingProgressRatio} />
|
||||
<ProgressBar animated striped variant="danger" label={`${craftsRatio}%`} now={craftsRatio} />
|
||||
<ProgressBar animated striped variant="dark" now={missingCraftsRatio} />
|
||||
</ProgressBar>
|
||||
</Row>
|
||||
<Row>
|
||||
@ -608,6 +676,9 @@ function App() {
|
||||
<Form.Control className="bg-dark text-white" type="text" placeholder="Search Item" onChange={(f)=>{
|
||||
if (f.currentTarget.value.length>2){
|
||||
setMatchedItems(fuzzysort.go(f.currentTarget.value.trim().toLowerCase(), [...data,...data2,...data3,...data4], {key:'name'}))
|
||||
} else
|
||||
if (f.currentTarget.value.length==0){
|
||||
setMatchedItems([])
|
||||
}
|
||||
}} />
|
||||
{matchedItems.map((item)=><Item key={item.obj.id} item={item.obj} setLockout={setLockout} lockout={lockout} contributor={contributor}></Item>)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user