From b03234567aa2069f777a7a5d38a2ae0bc0d7ebc5 Mon Sep 17 00:00:00 2001
From: Jon Bergli Heier <snakebite@jvnv.net>
Date: Mon, 16 Nov 2020 20:32:50 +0100
Subject: 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.
---
 frontend/src/flash.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 frontend/src/flash.js

(limited to 'frontend/src/flash.js')

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 };
-- 
cgit v1.2.3