implement core app functionality

package-lock.json

@@ -1890,6 +1890,24 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.3.tgz",
+      "integrity": "sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ=="
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.27",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
+      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -2307,6 +2325,11 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
       "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w=="
     },
+    "@types/invariant": {
+      "version": "2.2.34",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
+      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -2476,11 +2499,34 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.3.2.tgz",
       "integrity": "sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog=="
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
     "@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
       "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
     },
+    "@types/react": {
+      "version": "17.0.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.18.tgz",
+      "integrity": "sha512-YTLgu7oS5zvSqq49X5Iue5oAbVGhgPc5Au29SJC4VeE17V6gASoOxVkUDy9pXFMRFxCWCD9fLeweNFizo3UzOg==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -2489,6 +2535,11 @@
         "@types/node": "*"
       }
     },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -2527,6 +2578,11 @@
         }
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/webpack": {
       "version": "4.41.30",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
@@ -3195,6 +3251,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.2.tgz",
       "integrity": "sha512-5LMaDRWm8ZFPAEdzTYmgjjEdj1YnQcpfrVajO/sn/LhbpGp0Y0H64c2hLZI1gRMxfA+w1S71Uc/nHaOXgcCvGg=="
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -3808,6 +3872,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.2.tgz",
+      "integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4199,6 +4268,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4889,6 +4963,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+    },
     "csv-parse": {
       "version": "4.16.0",
       "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.16.0.tgz",
@@ -5094,6 +5173,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -5215,6 +5299,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -7638,6 +7731,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -12099,6 +12200,15 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -12282,6 +12392,30 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-bootstrap": {
+      "version": "2.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.0.0-beta.4.tgz",
+      "integrity": "sha512-ETCvuZV78orCqGg4XA4WrhytXxTcnvshPDveSc3uK2mvnj6IRQue5O5188xsazbD3nnhX52T63uQjM4HjeRBEw==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.26",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": ">=16.14.8",
+        "@types/react-transition-group": "^4.4.1",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^5.1.1",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -12448,6 +12582,26 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.1.1.tgz",
+      "integrity": "sha512-eCN2s2/+GVZzpnId4XVWtvDPYYBD2EtOGP74hE+8yDskPzFy9+pV1H3ZZihxuRdEbQzzacySaaDkR7xE0ydl4Q==",
+      "requires": {
+        "@babel/runtime": "^7.13.8",
+        "@popperjs/core": "^2.8.6",
+        "@restart/hooks": "^0.3.26",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12519,6 +12673,17 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -14605,6 +14770,17 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -14917,6 +15093,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.21.1",
+    "bootstrap": "^5.0.2",
     "csv-parse": "^4.16.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.0.0-beta.4",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"

public/index.html

@@ -24,6 +24,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+	<link
+	  rel="stylesheet"
+	  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+	  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+	  crossorigin="anonymous"
+	/>
     <title>Sig Planner - Sig crafts all the things</title>
   </head>
   <body>

src/App.css

@@ -28,6 +28,39 @@
   color: #61dafb;
 }
 
+.notStarted{
+	background-color:#212529;
+}
+
+.completed{
+	background-color:rgba(0,128,0,0.4);
+}
+
+.inProgress{
+	background-color:rgba(0,80,200,0.4);
+}
+
+.panel-body {
+	background-color:black;
+}
+
+.accordion-button{
+	font-weight:bold;
+	background-color:black !important;
+}
+
+
+
+.accordion-button.collapsed{
+	font-weight:bold;
+	background-color:black;
+	color:rgba(192,192,192,1);
+}
+
+.accordion-button.collapsed:after{
+	filter: brightness(0) invert(1);
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -1,9 +1,175 @@
 import logo from './logo512.png';
 import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import { useState,useEffect } from 'react';
+
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Navbar from 'react-bootstrap/Navbar';
+import Button from 'react-bootstrap/Button';
+import ProgressBar from 'react-bootstrap/ProgressBar';
+import Accordion from 'react-bootstrap/Accordion';
+
+
+const parse = require('csv-parse/lib/sync')
+const axios = require('axios');
+
+function ItemGroup(p) {
+	
+	function findIndex(name,arr) {
+		for (var i=0;i<arr.length;i++) {
+			if (arr[i].name===name) {
+				console.log("Found "+name+" at position "+i)
+				return i
+			}
+		}
+	}
+	
+	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">
+				  {p.data.sort((a,b)=>{
+					  if (b.required===b.obtained&&a.required===a.obtained) {
+						  return a.id-b.id
+					  } else
+					  if (b.required===b.obtained) {
+						  return -1
+					  } else {
+						  return 0
+					  }
+				  }).map((item,i,arr)=><Row key={item.id} className={"pb-1 pt-1 text-light"+(Number(item.obtained)===0?" notStarted":Number(item.obtained)===Number(item.required)?" completed":" inProgress")}>
+						<Col>
+							<img src={"https://xivapi.com"+item.icon}/> {item.name}
+						</Col>
+						<Col>
+							<input style={{width:"5em"}} value={item.obtained} className="mt-1 bg-secondary" onChange={(f)=>{var newData=[...p.data];newData[i].obtained=Math.min(item.required,f.currentTarget.value);p.setData(newData);}} type="number" min="0" max={item.required}/> / {item.required}
+						</Col>
+						<Col>
+							<a style={{position:"relative",top:"8px"}} className="text-muted" href={"https://garlandtools.org/db/#item/"+item.itemid} target="tools">View Item Info</a>
+						</Col>
+					  </Row>)}
+				</Accordion.Body>
+			  </Accordion.Item>
+}
 
 function App() {
-  return (
-    
+	
+	const [data,setData] = useState([])
+	const [fileData,setFileData] = useState()
+	const [update,setUpdate] = useState(true)
+	const [succeeded,setSucceeded] = useState(0)
+	const [failed,setFailed] = useState(0)
+	const [total,setTotal] = useState(0)
+	const [listData,setListData] = useState([])
+	
+	const disabled=true
+	
+	function downloadData(d,val,max) {
+		if (val<max) {
+			axios.get(encodeURI("https://xivapi.com/search?string="+d[val].Item))
+				.then((data)=>{
+					var results = data.data.Results
+					var found=false
+					for (var r of results) {
+						if (r.Name===d[val].Item&&r.UrlType==="Item") {
+							found=true
+							console.log("Found "+r)
+							setSucceeded(succeeded+1)
+							var dataObj = {
+								itemid:r.ID,
+								name:r.Name,
+								obtained:0,
+								required:d[val].Needed,
+								icon:r.Icon
+							}
+							return axios.post("https://projectdivar.com:4505/setItem",dataObj)
+						}
+					}
+					if (!found) {
+						setFailed(failed+1)
+						console.log("Could not find "+d[val].Item+"....")
+					}
+				})
+				.then(()=>{
+					setTimeout(downloadData(d,val+1,max),250)
+				})
+				.catch((err)=>{
+					setFailed(failed+1)
+				})
+		}
+	}
+	
+	useEffect(()=>{
+		if (update) {
+			axios.get("https://projectdivar.com:4505/getData")
+			.then((data)=>{
+				setData(data.data)
+			})
+			.catch((err)=>{
+				console.log(err.message)
+			})
+			setUpdate(false)
+		}
+	},[update])
+	
+	useEffect(()=>{
+		if (succeeded+failed===total) {
+			setUpdate(true)
+		}
+	},[succeeded,failed])
+	
+	useEffect(()=>{
+		var d = parse(fileData,{columns:true,skip_empty_lines:true})
+		console.log(d)
+		var promises = []
+		downloadData(d,0,d.length)
+		setTotal(d.length)
+	},[fileData])
+	
+  return (  
+	  <Container className="bg-dark" fluid>
+		  <Navbar bg="dark" variant="dark">
+			  <Container>
+				<Navbar.Brand href="#home">
+				  <img src={process.env.PUBLIC_URL+"/favicon.ico"} width="30" height="30" className="d-inline-block align-top" alt="BUN logo"/> BUN Collab App
+				</Navbar.Brand>
+			  </Container>
+		  </Navbar>
+		  <Container>
+			  {data.length>0?
+				  <>
+					<Accordion className="bg-dark" defaultActiveKey="0">
+					  <ItemGroup name="Gathering Items" akey="0" data={data} setData={setData} sections={[0,data.length]}/>
+						  {/*<ItemGroup name="Other Items" akey="1" data={data} setData={setData} sections={[135,250]}/>
+					  <ItemGroup name="Pre-crafting" akey="2" data={data} setData={setData} sections={[250,388]}/>
+						  <ItemGroup name="Crafting Items" akey="3" data={data} setData={setData} sections={[388,data.length]}/>*/}
+					 </Accordion>
+				</>:
+				  !disabled&&
+				  <Row>
+					  <Col>
+					  {total===0?<caption><label className="buttonLabel" for="uploads">Import List</label><input onChange={(f)=>{
+							const reader = new FileReader()
+							reader.onload=(ev)=>{
+								setFileData(ev.target.result)
+							}
+							reader.readAsText(f.target.files[0])
+					  }} style={{opacity:0}} id="uploads" type="file" accept=".txt,.csv"/></caption>:
+						<>
+							<ProgressBar>
+							  <ProgressBar animated striped variant="success" now={Math.round(succeeded/total)*100} />
+							  <ProgressBar animated striped variant="danger" now={Math.round(failed/total)*100} />
+							</ProgressBar>
+							<div className="text-center">{Math.round(((failed+succeeded)/total)*100)+"%"}</div>
+						</>
+					  }
+					  </Col>
+				  </Row>
+			  }
+		  </Container>
+	  </Container>
   );
 }