Implemented ability to see current item locations from the item lists

src/App.js

@@ -34,8 +34,11 @@ const NOTIFICATIONTIMEOUT = 300 //In seconds
 const progress1 = new Audio(process.env.PUBLIC_URL+"/progress1.mp3")
 const progress2 = new Audio(process.env.PUBLIC_URL+"/progress2.mp3")
 
+const retainerNames = ["Ayayayaya","Kittystorage","Morecatz","Finalretainer","Nowitsabun","Butwhy","Kkittyy","Howdoesanyonenameall","Ayayayayay"];
+
 function Item(p){
-	const {item,setLockout,contributor,lockout,itemCount,totalItemCount} = p
+	const {item,setLockout,contributor,lockout,itemCount,totalItemCount,playerInventory} = p
+	const [itemLoc,setItemLoc]=useState("")
 
 	function updateItem(item,target,contributor) {
 		var correctedVal=Math.min(item.required,target.value);
@@ -50,9 +53,103 @@ function Item(p){
 		})
 	}
 
+	useEffect(()=>{
+		let locObj={};
+		let locs="";
+		for (var i=0;i<playerInventory.length;i++){
+			var ind = playerInventory[i]
+			for (var j=0;j<ind.length;j++){
+				var it = ind[j]
+				if (it.id==item.itemid){
+					switch(i){
+						case 0:{
+							if (locs.length!=0){locs+=","}
+							if (j<140){
+								if ("Player" in locObj){
+									var tempItem = locObj["Player"]
+									if (it.hq===true){
+										tempItem.amtHQ+=it.amt
+									} else {
+										tempItem.amt+=it.amt
+									}
+									tempItem.page=Math.floor(j/35+1)
+									locObj["Player"]={...tempItem}
+								} else {
+									var tempItem = {...it}
+									tempItem.amt=0
+									tempItem.amtHQ=0
+									if (it.hq===true){
+										tempItem.amtHQ+=it.amt
+									} else {
+										tempItem.amt+=it.amt
+									}
+									tempItem.page=Math.floor(j/35+1)
+									tempItem.index=j
+									locObj["Player"]={...tempItem}
+								}
+							} else {
+								if ("Saddlebag" in locObj){
+									var tempItem = locObj["Saddlebag"]
+									if (it.hq===true){
+										tempItem.amtHQ+=it.amt
+									} else {
+										tempItem.amt+=it.amt
+									}
+									tempItem.page=Math.floor((j-140)/35+1)
+									locObj["Saddlebag"]={...tempItem}
+								} else {
+									var tempItem = {...it}
+									tempItem.amt=0
+									tempItem.amtHQ=0
+									if (it.hq===true){
+										tempItem.amtHQ+=it.amt
+									} else {
+										tempItem.amt+=it.amt
+									}
+									tempItem.page=Math.floor((j-140)/35+1)
+									locObj["Saddlebag"]={...tempItem}
+								}
+							}
+						}break;
+						default:{
+							if (String(retainerNames[i-1]) in locObj){
+								var tempItem = locObj[String(retainerNames[i-1])]
+								if (it.hq===true){
+									tempItem.amtHQ+=it.amt
+								} else {
+									tempItem.amt+=it.amt
+								}
+								tempItem.page=Math.floor(j/35+1)
+								locObj[String(retainerNames[i-1])]={...tempItem}
+							} else {
+								var tempItem = {...it}
+								tempItem.amt=0
+								tempItem.amtHQ=0
+								if (it.hq===true){
+									tempItem.amtHQ+=it.amt
+								} else {
+									tempItem.amt+=it.amt
+								}
+								tempItem.page=Math.floor(j/35+1)
+								locObj[String(retainerNames[i-1])]={...tempItem}
+							}
+						}
+					}
+				}
+			}
+		}
+		for (var key of Object.keys(locObj)){
+			var it=locObj[key]
+			if (locs.length>0){locs+=","}
+			locs+=key+" ["+it.page+"] "+((it.amtHQ>0)?("HQx"+it.amtHQ):"")+((it.amt>0)?(((it.amtHQ>0)?"|":"")+"x"+it.amt):"")
+			//locs+="Player Inventory ["+Math.floor((j/35+1))+"] x"+it.amt
+		}
+		setItemLoc(locs)
+	},[item,playerInventory])
+
 	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}
+				<img src={"https://xivapi.com"+item.icon} alt={item.name}/> {item.name}  <sub className="text-muted" style={{marginLeft:"10px"}}>{itemLoc}</sub>
 			</Col>
 			<Col>
 				<input disabled={lockout} id={"field_"+item.id} style={{width:"5em"}} defaultValue={item.obtained} className="mt-1 bg-secondary"
@@ -73,7 +170,7 @@ function Item(p){
 
 function ItemGroup(p) {
 	const { data } = p
-	const { contributor,itemCount,totalItemCount } = p
+	const { contributor,itemCount,totalItemCount,playerInventory } = p
 	const [displayData,setDisplayData] = useState([])
 	const [lockout,setLockout] = useState(false)
 	
@@ -97,7 +194,7 @@ function ItemGroup(p) {
 	return <Accordion.Item className="bg-dark" eventKey={p.akey}>
 				<Accordion.Header className="panel-body bg-dark">{p.name}</Accordion.Header>
 				<Accordion.Body className="panel-body">
-				  {displayData.map((item,i,arr)=><Item key={item.id} item={item} setLockout={setLockout} lockout={lockout} contributor={contributor} itemCount={itemCount} totalItemCount={totalItemCount}></Item>)}
+				  {displayData.map((item,i,arr)=><Item key={item.id} item={item} setLockout={setLockout} lockout={lockout} contributor={contributor} itemCount={itemCount} totalItemCount={totalItemCount} playerInventory={playerInventory}></Item>)}
 				</Accordion.Body>
 			  </Accordion.Item>
 }
@@ -149,8 +246,6 @@ function ListApp(p){
 	const [checking,setChecking] = useState(false)
 	const [lastUpdate,setLastUpdate] = useState(0)
 
-	const retainerNames = ["Ayayayaya","Kittystorage","Morecatz","Finalretainer","Nowitsabun","Butwhy","Kkittyy","Howdoesanyonenameall","Ayayayayay"];
-
 	function sleep(ms) {
 		return new Promise(resolve => setTimeout(resolve, ms));
 	}
@@ -390,6 +485,8 @@ function App() {
 	const [missingProgressRatio,setMissingProgressRatio] = useState(0)
 	const [completeRatio,setCompleteRatio] = useState(0)
 	const [lastModified,setLastModified] = useState(new Date())
+	const [lastUpdate,setLastUpdate] = useState(0)
+	const [playerInventory,setPlayerInventory] = useState([])
 
 	const [contributor,setContributor] = useState("")
 	const [notifications,setNotifications] = useState([])
@@ -458,6 +555,21 @@ function App() {
 		return ()=>clearInterval(interval)
 	},[lastModified])
 
+	useEffect(()=>{
+		const interval = setInterval(()=>{
+			if (nav==="main"){
+				axios.get("http://projectdivar.com/inventoryData?lastUpdate="+lastUpdate)
+				.then((data)=>{
+					if (data.data.length>0){
+						setLastUpdate(new Date().getTime())
+						setPlayerInventory(data.data)
+					}
+				})
+			}
+		},1000)
+		return ()=>clearInterval(interval)
+	},[nav,lastUpdate])
+
 	useEffect(()=>{
 		var notificationLastUpdate = new Date(new Date()-(NOTIFICATIONTIMEOUT*1000))
 		var largestNotificationID = -1
@@ -499,7 +611,7 @@ function App() {
 			}
 		},1000)
 		return ()=>clearInterval(interval)
-	},[])
+	},[nav])
 	
 	const disabled=false
 	
@@ -687,15 +799,15 @@ function App() {
 													setMatchedItems([])
 												}
 											}} />
-											{matchedItems.map((item)=><Item key={item.obj.id} item={item.obj} setLockout={setLockout} lockout={lockout} contributor={contributor} itemCount={itemCount} totalItemCount={totalItemCount}></Item>)}
+											{matchedItems.map((item)=><Item key={item.obj.id} item={item.obj} setLockout={setLockout} lockout={lockout} contributor={contributor} itemCount={itemCount} totalItemCount={totalItemCount} playerInventory={playerInventory}></Item>)}
 										</Form.Group>
 									</Form>
 								</Row>
 								<Accordion className="bg-dark" defaultActiveKey="0">
-									<ItemGroup name="Gathering Items" contributor={contributor} akey="0" data={data} lastModified={lastModified} setLastModified={setLastModified} setData={setData} setData1={setData} setData2={setData2} setData3={setData3} setData4={setData4} itemCount={itemCount} totalItemCount={totalItemCount}/>
+									<ItemGroup name="Gathering Items" contributor={contributor} akey="0" data={data} lastModified={lastModified} setLastModified={setLastModified} setData={setData} setData1={setData} setData2={setData2} setData3={setData3} setData4={setData4} itemCount={itemCount} totalItemCount={totalItemCount} playerInventory={playerInventory}/>
-									<ItemGroup name="Other Items" contributor={contributor} akey="1" data={data2} lastModified={lastModified} setLastModified={setLastModified} setData={setData2} setData1={setData} setData2={setData2} setData3={setData3} setData4={setData4} itemCount={itemCount} totalItemCount={totalItemCount}/>
+									<ItemGroup name="Other Items" contributor={contributor} akey="1" data={data2} lastModified={lastModified} setLastModified={setLastModified} setData={setData2} setData1={setData} setData2={setData2} setData3={setData3} setData4={setData4} itemCount={itemCount} totalItemCount={totalItemCount} playerInventory={playerInventory}/>
-									<ItemGroup name="Pre-crafting" contributor={contributor} akey="2" data={data3} lastModified={lastModified} setLastModified={setLastModified} setData={setData3} setData1={setData} setData2={setData2} setData3={setData3} setData4={setData4} itemCount={itemCount} totalItemCount={totalItemCount}/>
+									<ItemGroup name="Pre-crafting" contributor={contributor} akey="2" data={data3} lastModified={lastModified} setLastModified={setLastModified} setData={setData3} setData1={setData} setData2={setData2} setData3={setData3} setData4={setData4} itemCount={itemCount} totalItemCount={totalItemCount} playerInventory={playerInventory}/>
-									<ItemGroup name="Crafting Items" contributor={contributor} akey="3" data={data4} lastModified={lastModified} setLastModified={setLastModified} setData={setData4} setData1={setData} setData2={setData2} setData3={setData3} setData4={setData4} itemCount={itemCount} totalItemCount={totalItemCount}/>
+									<ItemGroup name="Crafting Items" contributor={contributor} akey="3" data={data4} lastModified={lastModified} setLastModified={setLastModified} setData={setData4} setData1={setData} setData2={setData2} setData3={setData3} setData4={setData4} itemCount={itemCount} totalItemCount={totalItemCount} playerInventory={playerInventory}/>
 								</Accordion>
 							</>:<Importer></Importer>
 						:nav==="list"?<ListApp transferItems={transferItems}></ListApp>: