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

Implemented finalized database management functionality. Implemented class selector into actual interface, and text editor

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
This commit is contained in:
Joshua Sigona 2021-08-07 21:21:02 +09:00
parent a4ce2d636b
commit f25ee2d244
3 changed files with 211 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/App.js
View File

@ -6,7 +6,7 @@ import useGlobalKeyDown from 'react-global-key-down-hook'
import Modal from 'react-modal' import Modal from 'react-modal'
import Toggle from 'react-toggle' //Tooltip props: http://aaronshaf.github.io/react-toggle/ import Toggle from 'react-toggle' //Tooltip props: http://aaronshaf.github.io/react-toggle/
import {XSquare, XSquareFill, PlusCircle} from 'react-bootstrap-icons' import {XSquare, XSquareFill, PlusCircle, LifePreserver, Server, CloudUploadFill} from 'react-bootstrap-icons'
import { import {
HashRouter, HashRouter,
@ -560,8 +560,26 @@ function TableEditor(p) {
} }
function DatabaseEditor(p) { function DatabaseEditor(p) {
const [loading,setLoading] = useState(false) const [loading,setLoading] = useState(true)
const [message,setMessage] = useState(<span style={{color:"black"}}></span>) const [message,setMessage] = useState(<span style={{color:"black"}}></span>)
const [databases,setDatabases] = useState([])
const [update,setUpdate] = useState(true)
useEffect(()=>{
if (update) {
axios.get(p.BACKENDURL+"/databases")
.then((data)=>{
setDatabases(data.data)
})
.catch((err)=>{
console.log(err.message)
})
.then(()=>{
setLoading(false)
})
setUpdate(false)
}
},[update])
return <> return <>
{!loading?<> {!loading?<>
@ -604,11 +622,41 @@ function DatabaseEditor(p) {
setMessage(<span style={{color:"red"}}>{err.message}</span>) setMessage(<span style={{color:"red"}}>{err.message}</span>)
}) })
.then(()=>{ .then(()=>{
setLoading(false) setUpdate(true)
})}}>Backup current LIVE Database</button><br/><br/> })}}>Backup current LIVE Database</button><br/><br/>
</>:<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/> </>:<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
} }
{message} {message}
<hr/>
<br/><br/>
<h2><u>Current Databases</u></h2>
<br/><br/>
<span style={{fontSize:"24px",top:"-16px",position:"relative",height:"64px",lineHeight:"64px",textAlign:"center"}}><LifePreserver className="databaseIcon" style={{color:"green"}}/>Live Database</span>
&nbsp;&nbsp;&nbsp;<span style={{fontSize:"24px",top:"-16px",position:"relative",height:"64px",lineHeight:"64px",textAlign:"center"}}><LifePreserver className="databaseIcon" style={{color:"red"}}/>Test Database</span><br/>
{databases.map((db)=>{
var label = ""
if (db.datname!=="ngsplanner"&&db.datname!=="ngsplanner2") {
var dateStr = db.datname.replace("ngsplanner","")
var date = new Date(dateStr.slice(0,4),dateStr.slice(4,6),dateStr.slice(6,8),dateStr.slice(8,10),dateStr.slice(10,12),dateStr.slice(12,14))
label=<><Server className="databaseIcon" style={{color:"blue"}}/>{"Backup from "+date}</>
return <><span style={{fontSize:"24px",top:"-16px",position:"relative",height:"64px",lineHeight:"64px",textAlign:"center"}}>{label}<button style={{background:"blue"}}
onClick={()=>{
setLoading(true)
axios.post(p.BACKENDURL+"/databases/restorefrombackup",{
database:db.datname
})
.then((data)=>{
setMessage(<span style={{color:"green"}}>{"Success! Database has been set to the state from "+date}</span>)
})
.catch((err)=>{
setMessage(<span style={{color:"red"}}>{err.message}</span>)
})
.then(()=>{
setLoading(false)
})
}}><CloudUploadFill/> Restore</button></span><br/></>
}
})}
</> </>
} }

138
src/TestPanel.js
View File

@ -1,8 +1,64 @@
import React, { useEffect,useState } from 'react'; import React, { useEffect,useState,useRef } from 'react';
import Tooltip from 'react-simple-tooltip' //Mess with all tooltip props here: https://cedricdelpoux.github.io/react-simple-tooltip/ import Tooltip from 'react-simple-tooltip' //Mess with all tooltip props here: https://cedricdelpoux.github.io/react-simple-tooltip/
function DefaultTooltip(p) {
return <Tooltip className="jTooltip" content={p.tooltip}>{p.mouseOverText}</Tooltip> /**
* Hook that alerts clicks outside of the passed ref
*/
function useOutsideAlerter(ref,setEdit) {
useEffect(() => {
/**
* Alert if clicked on outside of element
*/
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
setEdit(false)
} }
}
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref,setEdit]);
}
function EditBox(p) {
useEffect(()=>{
var timer1 = setTimeout(()=>{
document.getElementById("editBoxInput").focus()
document.getElementById("editBoxInput").select()
},100)
return () => {
clearTimeout(timer1);
};
})
return <input id="editBoxInput" onKeyDown={(e)=>{
if (e.key==="Enter") {p.setEdit(false)}
else if (e.key==="Escape") {p.setEdit(false)}
}} maxLength={p.maxlength?p.maxlength:20} onBlur={()=>{p.setEdit(false)}} value={p.value} onChange={(f)=>{f.currentTarget.value.length>0?p.setName(f.currentTarget.value):p.setName(p.originalName)}}>
</input>
}
function EditBoxInput(p) {
const [edit,setEdit] = useState(false)
useEffect(()=>{
if (p.callback) {
p.callback()
}
},[edit,p])
return <>
<div className={edit?"editBoxActive":"editBox"} onClick={(f)=>{setEdit(true)}}>
{edit?
<EditBox maxlength={p.maxlength} setEdit={setEdit} originalName={p.data} setName={p.setData} value={p.data}/>
:<>{p.data}</>}
</div>
</>
}
function ExpandTooltip(p) { function ExpandTooltip(p) {
return <Tooltip return <Tooltip
background="rgba(38,53,63,0.95);" background="rgba(38,53,63,0.95);"
@ -26,6 +82,36 @@ const [ppGraphMax,setppGraphMax] = useState(1000)
const [atkGraphMax,setatkGraphMax] = useState(1000) const [atkGraphMax,setatkGraphMax] = useState(1000)
const [defGraphMax,setdefGraphMax] = useState(1000) const [defGraphMax,setdefGraphMax] = useState(1000)
const [author,setauthor] = useState("Player")
const [buildName,setbuildName] = useState("Character")
const [className,setclassName] = useState("Hunter")
const [subclassName,setsubclassName] = useState("")
function Class(p) {
const CLASSES = p.GetData("class")
const class_obj = CLASSES[p.name]
return class_obj?<><img src={process.env.PUBLIC_URL+class_obj.icon}/>{class_obj.name}</>:<><span>itor</span></>
}
function ClassSelector(p){
const CLASSES = p.GetData("class")
const wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef,p.setEdit);
return <div className="popup" ref={wrapperRef}>
Class Selector<br/>
{Object.keys(CLASSES).map((cl,i)=>{
return <button id={i} className="rounded" onClick={()=>{p.setClassName(cl);p.setEdit(false)}}><img src={process.env.PUBLIC_URL+CLASSES[cl].icon}/><br/>{CLASSES[cl].name}</button>
})}
</div>
}
function EditableClass(p){
const [edit,setEdit] = useState(false)
return <><div className="editClass" onClick={()=>{setEdit(!edit)}}><Class GetData={p.GetData} name={p.class}/>
</div>
{edit&&<ClassSelector GetData={p.GetData} setClassName={p.setClassName} setEdit={setEdit}/>}
</>
}
useEffect(()=>{ useEffect(()=>{
if (p.bp>1000) { if (p.bp>1000) {
@ -57,17 +143,17 @@ useEffect(()=>{
<table className="basicInfo"> <table className="basicInfo">
<tr> <tr>
<td>Author</td> <td>Author</td>
<td colspan="2">Dudley</td> <td colspan="2"><EditBoxInput setData={setauthor} data={author}/></td>
</tr> </tr>
<tr> <tr>
<td>Build Name</td> <td>Build Name</td>
<td colspan="2">Fatimah</td> <td colspan="2"><EditBoxInput setData={setbuildName} data={buildName}/></td>
</tr> </tr>
<tr> <tr>
<td>Class</td> <td>Class</td>
<td> <td>
<img alt="" src={process.env.PUBLIC_URL+p.GetData("class",p.className,"icon")} /> {p.className}<br /> <EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass><br />
<img alt="" src={process.env.PUBLIC_URL+p.GetData("class",p.secondaryClassName,"icon")} /> {p.secondaryClassName} <EditableClass GetData={p.GetData} setClassName={setsubclassName} class={subclassName}></EditableClass>
</td> </td>
<td> <td>
<span className="ye">Lv.{p.classLv}</span><br /> <span className="ye">Lv.{p.classLv}</span><br />
@ -89,19 +175,19 @@ useEffect(()=>{
<ul className="infoBuffs"> <ul className="infoBuffs">
<li>Food Bost Effect <li>Food Bost Effect
<ul> <ul>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li> <li><img src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li> <li><img src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
</ul> </ul>
</li> </li>
<li>Shifta / Deband <li>Shifta / Deband
<ul> <ul>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Potency +5.0%</li> <li><img src="https://i.imgur.com/VIYYNIm.png" />&ensp;Potency +5.0%</li>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Damage Resistance +10.0%</li> <li><img src="https://i.imgur.com/VIYYNIm.png" />&ensp;Damage Resistance +10.0%</li>
</ul> </ul>
</li> </li>
<li>Region Mag Boost <li>Region Mag Boost
<ul> <ul>
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li> <li><img src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -114,10 +200,10 @@ useEffect(()=>{
<div className="boxExit"></div> <div className="boxExit"></div>
</div> </div>
<div className="equipPalette"> <div className="equipPalette">
<div className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img className="r4" alt="" src="./64px-NGSUIItemResurgirRifle.png" /></div></div> <div className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img className="r4" src="./64px-NGSUIItemResurgirRifle.png" /></div></div>
<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img className="r3" alt="" src="./photon_barrier.png" /></div></div> <div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img className="r3" alt="" src="./photon_barrier.png" /></div></div> <div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img className="r3" alt="" src="./photon_barrier.png" /></div></div> <div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
</div> </div>
</div> </div>
<div className="box"> <div className="box">
@ -138,13 +224,13 @@ useEffect(()=>{
<div className="equipAugs"> <div className="equipAugs">
<h3>Abilitiy Details</h3> <h3>Abilitiy Details</h3>
<ul> <ul>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</>}/><span className="pot">Dynamo Unit Lv.3</span></li> <li><ExpandTooltip mouseOverText={<img src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</>}/><span className="pot">Dynamo Unit Lv.3</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +4%</>}/><span className="fixa">Fixa Attack Lv.3</span></li> <li><ExpandTooltip mouseOverText={<img src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +4%</>}/><span className="fixa">Fixa Attack Lv.3</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>PP +5<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Pettas Soul II</span></li> <li><ExpandTooltip mouseOverText={<img src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>PP +5<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Pettas Soul II</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</>}/><span className="aug">Alts Secreta II</span></li> <li><ExpandTooltip mouseOverText={<img src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</>}/><span className="aug">Alts Secreta II</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP +10<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Gigas Precision II</span></li> <li><ExpandTooltip mouseOverText={<img src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP +10<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Gigas Precision II</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Ranged Weapon Potency +2.0%</>}/><span className="aug">Precision III</span></li> <li><ExpandTooltip mouseOverText={<img src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Ranged Weapon Potency +2.0%</>}/><span className="aug">Precision III</span></li>
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> <li className="addAug"><img src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li>
</ul> </ul>
</div> </div>
<div className="pr"> <div className="pr">
@ -192,9 +278,9 @@ useEffect(()=>{
</tr> </tr>
<tr> <tr>
<td>Weapon Up</td> <td>Weapon Up</td>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /><span className="ye">&nbsp;+{(p.weaponUp1*100).toFixed(1)}%</span><br /> <td><img src={process.env.PUBLIC_URL+"/icons/mel.png"} /><span className="ye">&nbsp;+{(p.weaponUp1*100).toFixed(1)}%</span><br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></td> <img src={process.env.PUBLIC_URL+"/icons/tec.png"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></td>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></td> <td><img src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> </tr>
<tr> <tr>

58
src/style.css
View File

@ -263,9 +263,9 @@ em {
.basicInfo { .basicInfo {
line-height: 23px; line-height: 23px;
} }
.basicInfo tr:hover { /*.basicInfo tr:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
} }*/
.infoBuffs { .infoBuffs {
margin: 0 auto; margin: 0 auto;
width: 90%; width: 90%;
@ -836,19 +836,48 @@ div.skillMaxed .skillAllocated {
max-width: 292px; max-width: 292px;
} }
/* Sig's Trash CSS */ /* Sig's Amazing CSS (cuz Dudley edited it) */
.hover:hover{
background-color:rgba(255,255,0,0.4); .editBox {
width: 100%;
}
.editBox:hover{
background-color:rgba(0,0,0,0.5);
cursor:pointer;
outline: 2px solid #30cdef;
}
.editBoxActive {
position: relative;
width: 100%;
}
.editBoxActive:hover {
cursor:pointer; cursor:pointer;
} }
input#editBoxInput {
input#editBox{ position: absolute;
height:18px; left: 0;
width:50%;
padding: 0px;
margin: 0px;
text-align: right; text-align: right;
background-color: #101317;
color: white;
cursor:pointer;
font-family: ngs,sans-serif;
font-size: 11pt;
height: 28px;
outline: 2px solid #30cdef;
padding: 0 5px;
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66);
width: 100%;
}
.editClass {
display: inline-block;
width: 100%;
}
.editClass:hover{
display: inline-block;
background-color:rgba(0,0,0,0.5);
cursor:pointer;
outline: 2px solid #30cdef;
} }
.popup{ .popup{
position:absolute; position:absolute;
@ -1113,3 +1142,10 @@ p.adminNav hr {
.addAug{ .addAug{
height: 37px; height: 37px;
} }
.databaseIcon{
width:48px;
height:48px;
padding-right:8px;
position:relative;
top:16px;
}