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

Implement adjustments to input system, added global 'Enter' key for submitting.

Browse Source
This commit is contained in:
sigonasr2, Sig, Sigo 2021-07-28 06:26:42 +00:00
parent c736d3218e
commit 3adea5c6a2
4 changed files with 52 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -12486,6 +12486,11 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
},
"react-global-key-down-hook": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/react-global-key-down-hook/-/react-global-key-down-hook-0.2.1.tgz",
"integrity": "sha512-7bi/jJlD6VlRird5VJTKow3q28pWn6H36zhOzBmKGgklAdEjqqwyjX0vxBcHlohd08VcUUBiLxRJ/7oz3IZOiQ=="
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

1
package.json
View File

@ -14,6 +14,7 @@
"react": "^17.0.2",
"react-bootstrap-icons": "^1.5.0",
"react-dom": "^16.14.0",
"react-global-key-down-hook": "^0.2.1",
"react-modal": "^3.14.3",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

44
src/App.js
View File

@ -2,9 +2,10 @@
import './reset.css'; // Generic reset
import './style.css'; // The new new
import React, {useState,useEffect,useRef,useReducer} from 'react';
import useGlobalKeyDown from 'react-global-key-down-hook'
import Modal from 'react-modal'
import {XSquare, XSquareFill} from 'react-bootstrap-icons'
import {XSquare, XSquareFill, PlusCircle} from 'react-bootstrap-icons'
import {
HashRouter,
@ -375,18 +376,32 @@ function InputBox(p) {
const [failed,setFailed] = useState(false)
const [sending,setSending] = useState(false)
function changeFunc(f){setValue(f.currentTarget.value)}
function changeFunc(f){setValue(f.currentTarget.value)
if (p.callback4) {
p.callback4(f.currentTarget.value)
}}
function blurFunc(f){
setSending(true)
setFailed(false)
p.callback(f.currentTarget.value)
.then(()=>{setFailed(false)})
.catch(()=>{setFailed(true)})
.then(()=>{setSending(false)})}
if (p.callback) {
setSending(true)
setFailed(false)
p.callback(f.currentTarget.value)
.then(()=>{setFailed(false)})
.catch(()=>{setFailed(true)})
.then(()=>{setSending(false)})}
else
if (p.callback3) {
p.callback3(f.currentTarget.value)
}}
function keydownFunc(f){
if (p.callback2) {
p.callback2(f,value)
}
}
return p.data?<select className={failed?"failedInput":sending?"submitting":""} value={value} onChange={(f)=>{changeFunc(f)}} onBlur={(f)=>{blurFunc(f)}}>
return p.data?<select className={failed?"failedInput":sending?"submitting":""} value={value} onKeyDown={(f)=>{keydownFunc(f)}} onChange={(f)=>{changeFunc(f)}} onBlur={(f)=>{blurFunc(f)}}>
{p.includeBlankValue&&<option/>}
{p.data.map((item)=><option value={item.id}>{item.id} - {item.name||item.username}</option>)}
</select>:<input className={failed?"failedInput":sending?"submitting":""} value={value} onChange={(f)=>{changeFunc(f)}} onBlur={(f)=>{blurFunc(f)}}/>
</select>:<input className={failed?"failedInput":sending?"submitting":""} value={value} onKeyDown={(f)=>{keydownFunc(f)}} onChange={(f)=>{changeFunc(f)}} onBlur={(f)=>{blurFunc(f)}}/>
}
function TableEditor(p) {
@ -411,6 +426,7 @@ function TableEditor(p) {
function SubmitBoxes() {
axios.post(BACKEND_URL+p.path,submitVals)
.then(()=>{
setSubmitVal("Clear")
setUpdate(true)
})
.catch((err)=>{
@ -418,6 +434,10 @@ function TableEditor(p) {
})
}
useGlobalKeyDown(()=>{
SubmitBoxes()
},['Enter'])
useEffect(()=>{
setUpdate(true)
},[p.path])
@ -456,7 +476,6 @@ function TableEditor(p) {
{!loading?
<div className="table-responsive">
<table cellPadding="10" className="table text-light table-padding">
<caption>{JSON.stringify(dependencies)}</caption>
<thead>
<tr>
<th className="table-padding"></th>
@ -464,6 +483,8 @@ function TableEditor(p) {
</tr>
</thead>
<tbody>
{<tr><td></td>{fields.map((col,i)=><td key={i}>{<InputBox includeBlankValue={true} data={dependencies[col.name]} callback4={
(f)=>{setSubmitVal({field:col.name,value:f});}}/>}</td>)}<input style={{position:'absolute',top:"-1000px"}}/><PlusCircle onClick={()=>{SubmitBoxes()}} className="submitbutton"/></tr>}
{data.map((dat)=><tr key={dat.id}>
<td><XSquareFill className="webicon" onClick={()=>{axios.delete(BACKEND_URL+p.path,{data:{id:dat.id}}).then(()=>{setUpdate(true)}).catch((err)=>{alert(err.response.data)})}}/></td>{fields.map((col,i)=><td key={dat.id+"_"+i} className="table-padding table">
<InputBox data={dependencies[col.name]} callback={(value)=>{
@ -472,7 +493,6 @@ function TableEditor(p) {
id:dat.id
})
}} value={String(dat[col.name])}/></td>)}</tr>)}
{<tr><td></td>{fields.map((col,i)=><td key={i}>{<input id={"submitField"+i} onBlur={(i===fields.length-1)?(f)=>{setSubmitVal({field:col.name,value:f.currentTarget.value});SubmitBoxes();document.getElementById("submitField0").focus()}:(f)=>{setSubmitVal({field:col.name,value:f.currentTarget.value})}}/>}</td>)}</tr>}
</tbody>
</table>
</div>:<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>}

22
src/style.css
View File

@ -898,19 +898,25 @@ button{
}
.submitting{
border: 1px solid rgba(0,150,200,1);
background: linear-gradient(-45deg, #2317c7, #3ce77e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: submitgradient 1s ease infinite;
background: linear-gradient(-90deg, #124425,#000000, #124425);
background-size: 10% 400%;
animation: submitgradient 1.5s ease infinite;
}
@keyframes submitgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
background-position: 0% 100%;
}
100% {
background-position: 0% 50%;
background-position: 100% 0%;
}
}
.submitbutton{
width:32px;
height:32px;
}
.submitbutton:hover{
color:rgba(0,200,0,1);
cursor:pointer;
}