diff options
author | Jon Bergli Heier <snakebite@jvnv.net> | 2020-11-16 20:32:50 +0100 |
---|---|---|
committer | Jon Bergli Heier <snakebite@jvnv.net> | 2020-11-16 20:32:50 +0100 |
commit | b03234567aa2069f777a7a5d38a2ae0bc0d7ebc5 (patch) | |
tree | c59c86f45eb63c1d8b6cb3fcdad4ce16fc483887 /frontend/src/flash.js | |
parent | f23c03a3375cce6c16ba9255abaddf03efca01eb (diff) |
Add frontend
Authentication is currently working but no other functionality is yet
implemented. Authentication is done using OAuth 2 via the backend,
currently we assume jab is being used.
Diffstat (limited to 'frontend/src/flash.js')
-rw-r--r-- | frontend/src/flash.js | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/frontend/src/flash.js b/frontend/src/flash.js new file mode 100644 index 0000000..44b9479 --- /dev/null +++ b/frontend/src/flash.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { Container } from 'react-bootstrap'; +import Toast from 'react-bootstrap/Toast'; + +class Flash extends React.Component { + constructor(props) { + super(props); + this.state = { + messages: [], + } + this.seq = 0; + } + componentDidMount() { + window.flash = this.flash.bind(this); + } + componentWillUnmount() { + window.flash = null; + } + render() { + if (this.state.messages.length === 0) { + return ''; + } + let that = this; + const messages = this.state.messages.map(function(message, index) { + return <Toast key={message.seq} onClose={() => that.remove(message.seq)} autohide={true} delay={(index+1)*3000}> + <Toast.Header><strong className="mr-auto">{message.header || 'Inventory'}</strong></Toast.Header> + <Toast.Body>{message.text}</Toast.Body> + </Toast>; + }); + return <Container style={{position: 'absolute', top: 0, right: 0}}> + {messages} + </Container>; + } + remove(seq) { + this.setState(function(state, props) { + const messages = state.messages.filter((message) => message.seq !== seq); + return { messages }; + }); + } + flash(message) { + message.seq = ++this.seq; + this.setState(function(state, props) { + const messages = [...state.messages, message]; + return { messages }; + }); + } +} + +export { Flash }; |