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

Add cute girl as loading indicator

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
This commit is contained in:
Joshua Sigona 2021-08-06 22:40:11 +09:00
parent 224ce6542e
commit 7e0a4a4985
4 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/spinner.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

23
src/App.js
View File

@ -480,7 +480,7 @@ function TableEditor(p) {
.then(()=>{ .then(()=>{
setUpdate(true) setUpdate(true)
}) })
},[fileData,p.path]) },[fileData,p.path,p.BACKENDURL])
useEffect(()=>{ useEffect(()=>{
for (var col of fields) { for (var col of fields) {
@ -519,7 +519,7 @@ function TableEditor(p) {
}) })
setUpdate(false) setUpdate(false)
} }
},[update,p.path]) },[update,p.path,p.BACKENDURL])
return <> return <>
{!loading? {!loading?
@ -555,6 +555,19 @@ function TableEditor(p) {
</> </>
} }
function DatabaseEditor(p) {
const [loading,setLoading] = useState(false)
return <>
{!loading?<>
<button className="basichover" style={{backgroundColor:"navy"}} onClick={()=>{setLoading(true)}}>Apply TEST Database to LIVE Database</button><br/><br/>
<button className="basichover" style={{backgroundColor:"maroon"}} onClick={()=>{setLoading(true)}}>Reset TEST database using current LIVE Database</button><br/><br/>
<button className="basichover" style={{backgroundColor:"darkgreen"}} onClick={()=>{setLoading(true)}}>Backup current TEST and LIVE Database</button><br/><br/>
</>:<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
}
</>
}
function AdminPanel(p) { function AdminPanel(p) {
return <div className="main"> return <div className="main">
<div className="w-25"><Box title="Navigation"> <div className="w-25"><Box title="Navigation">
@ -672,9 +685,7 @@ function AdminPanel(p) {
<TableEditor BACKENDURL={GetBackendURL(p)} path="/database_audit"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/database_audit"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/database_manager"}> <Route path={process.env.PUBLIC_URL+"/admin/database_manager"}>
<button style={{backgroundColor:"navy"}}>Apply TEST Database to LIVE Database</button><br/><br/> <DatabaseEditor BACKENDURL={GetBackendURL(p)}/>
<button style={{backgroundColor:"maroon"}}>Reset TEST database using current LIVE Database</button><br/><br/>
<button style={{backgroundColor:"darkgreen"}}>Backup current TEST and LIVE Database</button><br/><br/>
</Route> </Route>
</div> </div>
</div> </div>
@ -904,7 +915,7 @@ function App() {
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/test"}> <Route path={process.env.PUBLIC_URL+"/test"}>
<TestHeader/> <TestHeader/>
<TestPanel bp={bp} /> <TestPanel bp={bp} className={className} secondaryClassName={secondaryClassName} />
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/formula"}> <Route path={process.env.PUBLIC_URL+"/formula"}>
<DamageCalculator/> <DamageCalculator/>

25
src/TestPanel.js
View File

@ -29,30 +29,25 @@ function TestPanel(p) {
<div className="boxExit"></div> <div className="boxExit"></div>
</div> </div>
<div>
</div>
<table className="basicInfo"> <table className="basicInfo">
<tr> <tr>
<td>Author</td> <td>Author</td>
<td>&nbsp;</td> <td colspan="2">Dudley</td>
<td>Dudley</td>
</tr> </tr>
<tr> <tr>
<td>Build Name</td> <td>Build Name</td>
<td>&nbsp;</td> <td colspan="2">Fatimah</td>
<td>Fatimah</td>
</tr> </tr>
<tr> <tr>
<td>Class</td> <td>Class</td>
<td><img alt="" src="Ra.png" /> Ranger</td> <td>
<td><span className="ye">Lv.20</span></td> <img alt="" src="Ra.png" /> Ranger <br />
</tr> <img alt="" src="Fo.png" /> Force
<tr> </td>
<td>&nbsp;</td> <td>
<td><img alt="" src="Fo.png" /> Force</td> <span className="ye">Lv.20</span><br />
<td>Lv.15</td> Lv.15
</td>
</tr> </tr>
</table> </table>
</div> </div>

6
src/style.css
View File

@ -257,6 +257,9 @@ em {
.da span:hover { .da span: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));
} }
.basicInfo td {
vertical-align: top;
}
.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));
} }
@ -903,6 +906,9 @@ button{
color:rgba(200,0,0,1); color:rgba(200,0,0,1);
cursor:pointer; cursor:pointer;
} }
.basichover:hover{
cursor:pointer;
}
.modalCloseButton{ .modalCloseButton{
float:right; float:right;
color:#151f25; color:#151f25;