Include the sort retainer feature
This commit is contained in:
parent
021582f90e
commit
5649fd90f3
210
src/App.js
210
src/App.js
@ -14,8 +14,10 @@ import Accordion from 'react-bootstrap/Accordion';
|
|||||||
import ToastContainer from 'react-bootstrap/ToastContainer'
|
import ToastContainer from 'react-bootstrap/ToastContainer'
|
||||||
import Toast from 'react-bootstrap/Toast'
|
import Toast from 'react-bootstrap/Toast'
|
||||||
import Nav from 'react-bootstrap/Nav'
|
import Nav from 'react-bootstrap/Nav'
|
||||||
|
import Spinner from 'react-bootstrap/Spinner';
|
||||||
|
|
||||||
import { FaCheckCircle } from 'react-icons/fa';
|
import { FaCheckCircle } from 'react-icons/fa';
|
||||||
|
import { IoCheckmarkCircleOutline,IoCloseCircleSharp,IoAlertCircleOutline } from 'react-icons/io5';
|
||||||
|
|
||||||
|
|
||||||
const parse = require('csv-parse/lib/sync')
|
const parse = require('csv-parse/lib/sync')
|
||||||
@ -114,20 +116,208 @@ function DarkInput(p){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function SorterApp(){
|
function SorterApp(){
|
||||||
|
|
||||||
|
function submitForm(){
|
||||||
|
if (item1.length>0&&item2.length>0&&item3.length>0&&item4.length>0&&item5.length>0&&
|
||||||
|
item1_2.length>0&&item2_2.length>0&&item3_2.length>0&&item4_2.length>0&&item5_2.length>0){
|
||||||
|
setChecking(true);
|
||||||
|
|
||||||
|
for (let i of [
|
||||||
|
{"endItem":item1,"beginItem":item1_2,"resultFunc":setResult1},
|
||||||
|
{"endItem":item2,"beginItem":item2_2,"resultFunc":setResult2},
|
||||||
|
{"endItem":item3,"beginItem":item3_2,"resultFunc":setResult3},
|
||||||
|
{"endItem":item4,"beginItem":item4_2,"resultFunc":setResult4},
|
||||||
|
{"endItem":item5,"beginItem":item5_2,"resultFunc":setResult5},
|
||||||
|
]) {
|
||||||
|
let itemData1={}
|
||||||
|
let itemData2={}
|
||||||
|
axios.get(encodeURI("https://xivapi.com/search?string="+i.endItem))
|
||||||
|
.then((data)=>{
|
||||||
|
var results = data.data.Results
|
||||||
|
for (var r of results) {
|
||||||
|
if (r.Name===i.endItem&&r.UrlType==="Item") {
|
||||||
|
return axios.get(encodeURI("https://xivapi.com"+r.Url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
i.resultFunc(NOTFOUND)
|
||||||
|
throw new Error("Item 1 Not Found!");
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((data)=>{
|
||||||
|
var results = data.data
|
||||||
|
itemData1={...results}
|
||||||
|
return axios.get(encodeURI("https://xivapi.com/search?string="+i.beginItem))
|
||||||
|
})
|
||||||
|
.then((data)=>{
|
||||||
|
var results = data.data.Results
|
||||||
|
for (var r of results) {
|
||||||
|
if (r.Name===i.beginItem&&r.UrlType==="Item") {
|
||||||
|
return axios.get(encodeURI("https://xivapi.com"+r.Url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
i.resultFunc(NOTFOUND)
|
||||||
|
throw new Error("Item 2 Not Found!");
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((data)=>{
|
||||||
|
var results = data.data
|
||||||
|
itemData2={...results}
|
||||||
|
if (itemData1.ItemSortCategory.ID<itemData2.ItemSortCategory.ID){
|
||||||
|
i.resultFunc(SUCCESS)
|
||||||
|
return
|
||||||
|
} else
|
||||||
|
if (itemData1.ItemSortCategory.ID==itemData2.ItemSortCategory.ID&&
|
||||||
|
itemData1.ItemUICategory.ID<itemData2.ItemUICategory.ID){
|
||||||
|
i.resultFunc(SUCCESS)
|
||||||
|
return
|
||||||
|
} else
|
||||||
|
if (itemData1.ItemSortCategory.ID==itemData2.ItemSortCategory.ID&&
|
||||||
|
itemData1.ItemUICategory.ID==itemData2.ItemUICategory.ID&&
|
||||||
|
itemData1.ID<itemData2.ID){
|
||||||
|
i.resultFunc(SUCCESS)
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
i.resultFunc(REJECTED)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err)=>{console.log(err);})
|
||||||
|
.finally(()=>{setChecking(false)})
|
||||||
|
}
|
||||||
|
//axios.get(encodeURI("https://xivapi.com/search?string="+i))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const retainerNames = ["Ayayayayay","Howdoesanyonenameall","Kkittyy","Butwhy","Nowitsabun","Finalretainer"];
|
||||||
|
const NONE=0;
|
||||||
|
const REJECTED=1;
|
||||||
|
const SUCCESS=2;
|
||||||
|
const NOTFOUND=3;
|
||||||
|
|
||||||
const [item1,setItem1] = useState("")
|
const [item1,setItem1] = useState("")
|
||||||
const [item2,setItem2] = useState("")
|
const [item2,setItem2] = useState("")
|
||||||
const [item3,setItem3] = useState("")
|
const [item3,setItem3] = useState("")
|
||||||
const [item4,setItem4] = useState("")
|
const [item4,setItem4] = useState("")
|
||||||
const [item5,setItem5] = useState("")
|
const [item5,setItem5] = useState("")
|
||||||
const [item6,setItem6] = useState("")
|
const [item1_2,setItem1_2] = useState("")
|
||||||
|
const [item2_2,setItem2_2] = useState("")
|
||||||
|
const [item3_2,setItem3_2] = useState("")
|
||||||
|
const [item4_2,setItem4_2] = useState("")
|
||||||
|
const [item5_2,setItem5_2] = useState("")
|
||||||
|
const [result1,setResult1] = useState(NONE)
|
||||||
|
const [result2,setResult2] = useState(NONE)
|
||||||
|
const [result3,setResult3] = useState(NONE)
|
||||||
|
const [result4,setResult4] = useState(NONE)
|
||||||
|
const [result5,setResult5] = useState(NONE)
|
||||||
|
|
||||||
|
const [checking,setChecking] = useState(false)
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<Row className="text-white"><Col>Item 1:<DarkInput value={item1} onChange={(f)=>{setItem1(f.currentTarget.value);}}></DarkInput></Col><Col><input type="text"></input></Col></Row>
|
<Row className="text-white" style={{background:result1===NONE?"":result1===SUCCESS?"#003300":result1===NOTFOUND?"#333300":"#330000"}}>
|
||||||
<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
|
<Col>
|
||||||
<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
|
Ending {retainerNames[0]} Item 1:
|
||||||
<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
|
</Col>
|
||||||
<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
|
<Col>
|
||||||
<Row><Col><input type="text"></input></Col><Col><input type="text"></input></Col></Row>
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item1} onChange={(f)=>{setItem1(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
Beginning {retainerNames[1]} Item 1:
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item1_2} onChange={(f)=>{setItem1_2(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
{result1===NONE?<></>
|
||||||
|
:result1===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
|
||||||
|
:result1===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
|
||||||
|
:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="text-white" style={{background:result2===NONE?"":result2===SUCCESS?"#003300":result2===NOTFOUND?"#333300":"#330000"}}>
|
||||||
|
<Col>
|
||||||
|
Ending {retainerNames[1]} Item 2:
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item2} onChange={(f)=>{setItem2(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
Beginning {retainerNames[2]} Item 2:
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item2_2} onChange={(f)=>{setItem2_2(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
{result2===NONE?<></>
|
||||||
|
:result2===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
|
||||||
|
:result2===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
|
||||||
|
:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="text-white" style={{background:result3===NONE?"":result3===SUCCESS?"#003300":result3===NOTFOUND?"#333300":"#330000"}}>
|
||||||
|
<Col>
|
||||||
|
Ending {retainerNames[2]} Item 3:
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item3} onChange={(f)=>{setItem3(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
Beginning {retainerNames[3]} Item 3:
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item3_2} onChange={(f)=>{setItem3_2(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
{result3===NONE?<></>
|
||||||
|
:result3===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
|
||||||
|
:result3===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
|
||||||
|
:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="text-white" style={{background:result4===NONE?"":result4===SUCCESS?"#003300":result4===NOTFOUND?"#333300":"#330000"}}>
|
||||||
|
<Col>
|
||||||
|
Ending {retainerNames[3]} Item 4:
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item4} onChange={(f)=>{setItem4(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
Beginning {retainerNames[4]} Item 4:
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item4_2} onChange={(f)=>{setItem4_2(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
{result4===NONE?<></>
|
||||||
|
:result4===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
|
||||||
|
:result4===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
|
||||||
|
:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="text-white" style={{background:result5===NONE?"":result5===SUCCESS?"#003300":result5===NOTFOUND?"#333300":"#330000"}}>
|
||||||
|
<Col>
|
||||||
|
Ending {retainerNames[4]} Item 5:
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item5} onChange={(f)=>{setItem5(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
Beginning {retainerNames[5]} Item 5:
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item5_2} onChange={(f)=>{setItem5_2(f.currentTarget.value);}}></DarkInput>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
{result5===NONE?<></>
|
||||||
|
:result5===SUCCESS?<IoCheckmarkCircleOutline style={{color:"lime"}}></IoCheckmarkCircleOutline>
|
||||||
|
:result5===NOTFOUND?<IoAlertCircleOutline style={{color:"yellow"}}></IoAlertCircleOutline>
|
||||||
|
:<IoCloseCircleSharp style={{color:"red"}}></IoCloseCircleSharp>}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<span>A</span>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Button onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} disabled={checking} onClick={()=>{submitForm()}}>{checking?<Spinner animation="border"></Spinner>:"Check"}</Button>
|
||||||
|
</Row>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -311,9 +501,9 @@ function App() {
|
|||||||
<img src={process.env.PUBLIC_URL+"/favicon.ico"} width="30" height="30" className="d-inline-block align-top" alt="BUN logo"/> BUN Collab App
|
<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>
|
</Navbar.Brand>
|
||||||
{contributor.length>0&&<>
|
{contributor.length>0&&<>
|
||||||
<Nav.Link style={(nav==="main")?{"color":"lime","text-decoration":"underline"}:{}} onClick={()=>{setNav("main")}}>Main</Nav.Link>
|
<Nav.Link style={(nav==="main")?{"color":"lime","textDecoration":"underline"}:{}} onClick={()=>{setNav("main")}}>Main</Nav.Link>
|
||||||
<Nav.Link style={(nav==="sort")?{"color":"lime","text-decoration":"underline"}:{}} onClick={()=>{setNav("sort")}}>Sort Check</Nav.Link>
|
<Nav.Link style={(nav==="sort")?{"color":"lime","textDecoration":"underline"}:{}} onClick={()=>{setNav("sort")}}>Sort Check</Nav.Link>
|
||||||
<Nav.Link style={(nav==="list")?{"color":"lime","text-decoration":"underline"}:{}} onClick={()=>{setNav("list")}}>Grocery List</Nav.Link>
|
<Nav.Link style={(nav==="list")?{"color":"lime","textDecoration":"underline"}:{}} onClick={()=>{setNav("list")}}>Grocery List</Nav.Link>
|
||||||
<span className="text-light font-weight-light font-italic">Signed in as {contributor}</span>
|
<span className="text-light font-weight-light font-italic">Signed in as {contributor}</span>
|
||||||
</>}
|
</>}
|
||||||
</Container>
|
</Container>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user