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

src/App.css

@@ -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);

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 finalItems=data.data.slice(dataSplitters[0],dataSplitters[3])
-						let items=0,tot=0
+						let tempFinalItems=data.data.slice(dataSplitters[3],data.data.length)
-						for (var item of data.data){
+						let itemsComplete=0,itemsInProgress=0,itemsCrafts=0,tot=0,totItemsInProgress=0,totCrafts=0
-							items+=item.obtained
+						for(var i=0;i<tempFinalItems.length;i++){
-							tot+=item.required
+							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 finalItems=data.data.slice(dataSplitters[0],dataSplitters[3])
-				let items=0,tot=0
+				let tempFinalItems=data.data.slice(dataSplitters[3],data.data.length)
-				for (var item of data.data){
+				let itemsComplete=0,itemsInProgress=0,itemsCrafts=0,tot=0,totItemsInProgress=0,totCrafts=0
-					items+=item.obtained
+				for(var i=0;i<tempFinalItems.length;i++){
-					tot+=item.required
+					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>)}