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

Add notifications

Browse Source
This commit is contained in:
Joshua Sigona 2021-08-28 10:19:04 +09:00
parent 8821babb9b
commit d86961dccd
1 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.js
View File

@ -83,6 +83,22 @@ function ItemGroup(p) {
</Accordion.Item> </Accordion.Item>
} }
function Notification(p) {
const [show,setShow] = useState(true)
const { not } = p
return <Toast key={not.id} show={show} autohide delay={10000} onClose={()=>{setShow(false)}} bg={not.operation==="FINISH"?"success":not.operation==="INCREASE"?"primary":"warning"}>
<Toast.Header closeButton={true}>
<span className="me-auto">
<strong>{not.username}</strong>
{not.operation==="FINISH"?" has finished collecting "+not.required+"/"+not.required+" "+not.item_name+"!":
not.operation==="INCREASE"?" has collected "+not.obtained+"/"+not.required+" "+not.item_name+" (+"+(not.obtained-not.previous_amt)+")"
:" has set "+not.item_name+" to "+not.obtained+"/"+not.required}</span>
</Toast.Header>
</Toast>
}
function App() { function App() {
const [data,setData] = useState([]) const [data,setData] = useState([])
@ -132,16 +148,12 @@ function App() {
useEffect(()=>{ useEffect(()=>{
const interval = setInterval(()=>{ const interval = setInterval(()=>{
setNotificationLastUpdate(new Date()-10000)
axios.get(BACKEND_URL+"/getNotifications?date="+encodeURIComponent(LZ(4,notificationLastUpdate.getUTCFullYear())+"-"+LZ(2,notificationLastUpdate.getUTCMonth()+1)+"-"+LZ(2,notificationLastUpdate.getUTCDate())+" "+LZ(2,notificationLastUpdate.getUTCHours())+":"+LZ(2,notificationLastUpdate.getUTCMinutes())+":"+LZ(2,notificationLastUpdate.getUTCSeconds())+"."+LZ(3,notificationLastUpdate.getUTCMilliseconds())+"+00")) axios.get(BACKEND_URL+"/getNotifications?date="+encodeURIComponent(LZ(4,notificationLastUpdate.getUTCFullYear())+"-"+LZ(2,notificationLastUpdate.getUTCMonth()+1)+"-"+LZ(2,notificationLastUpdate.getUTCDate())+" "+LZ(2,notificationLastUpdate.getUTCHours())+":"+LZ(2,notificationLastUpdate.getUTCMinutes())+":"+LZ(2,notificationLastUpdate.getUTCSeconds())+"."+LZ(3,notificationLastUpdate.getUTCMilliseconds())+"+00"))
.then((data)=>{ .then((data)=>{
if (data.data.length>0) { if (data.data.length>0) {
var newNotifications = [...notifications] console.log("New notification array: "+JSON.stringify(data.data))
for (var dat of data.data) { setNotifications(data.data)
newNotifications.push(dat)
}
console.log("New notification array: "+JSON.stringify(newNotifications))
setNotificationLastUpdate(new Date())
setNotifications(newNotifications)
} }
}) })
.catch((err)=>{ .catch((err)=>{
@ -149,7 +161,7 @@ function App() {
}) })
},1000) },1000)
return ()=>clearInterval(interval) return ()=>clearInterval(interval)
},[notificationLastUpdate]) },[])
const disabled=true const disabled=true
@ -274,16 +286,8 @@ function App() {
} }
<div style={{pointerEvents:"none",position:"fixed",top:"0px",left:"0px",width:"100%",height:"100%"}}> <div style={{pointerEvents:"none",position:"fixed",top:"0px",left:"0px",width:"100%",height:"100%"}}>
<ToastContainer position="bottom-end"> <ToastContainer position="bottom-end">
{notifications.map((not,i)=>{ {notifications.map((not)=>{
return <Toast key={not.id} autohide delay={10000} onClose={()=>{var newArr = [...notifications]; newArr=newArr.splice(i,1); setNotifications(newArr)}} bg="primary"> return <Notification not={not}/>
<Toast.Header closeButton={true}>
<span className="me-auto">
<strong>{not.username}</strong>
{not.operation==="FINISH"?" has finished collecting "+not.required+"/"+not.required+" "+not.item_name+"!":
not.operation==="INCREASE"?" has collected "+not.obtained+"/"+not.required+" "+not.item_name+" (+"+(not.obtained-not.previous_amt)+")"
:" has set "+not.item_name+" to "+not.obtained+"/"+not.required}</span>
</Toast.Header>
</Toast>
})} })}
</ToastContainer> </ToastContainer>
</div> </div>