sigonasr2
/
sigcrafting
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Update progress bars to be more interactive, fix multiplication by 100 bug and added completion percentage at the top

Browse Source
main
sigonasr2 2 years ago
parent d7bb77b486
commit 05308cb953
2 changed files with 94 additions and 15 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      src/App.css
  2. 101
      src/App.js

8
src/App.css
Unescape View File

@ -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
Unescape View File

@ -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}
}
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)
}
setCompleteRatio(items/tot)
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}
}
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)
}
setCompleteRatio(items/tot)
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>)}

Write Preview
Loading…
Cancel
Save