Split API / Webpage

We use react as a webpage, so it can be served either on OBS or on the
server.

front-end/src/Pages/Box.tsx

@@ -0,0 +1,10 @@
+import './box.css'
+function Box(props:any){
+ return (<div className="box">
+    <div className="amount">{props.amount}</div>
+    <div className="name">{props.name}</div>
+    <div className="message">{props.message}</div>
+ </div>);
+}
+
+export default Box

front-end/src/Pages/Donations.tsx

@@ -0,0 +1,31 @@
+import {useState} from "react";
+import Box from './Box'
+function Donations(){
+    const [donations,setDonations] = useState([{name:"",amount:0.,message:""}]);
+    const ws = new WebSocket('ws://localhost:5000/notify');
+    ws.onopen = (event) => {
+        console.log(event);
+    }
+    ws.onmessage = (event) => {
+        const json = JSON.parse(event.data);
+        try{
+            setDonations([...donations.slice(-4),json]);
+        }
+        catch(err)
+        {
+            console.log(err);
+        }
+    }
+    const setError = (ev:any) =>{
+        setDonations([{name:"error",amount:0,message:"We lost connection"}]);
+    }
+    ws.onclose = setError;
+    ws.onerror = setError;
+
+    return (<div>
+            {donations.map((item) => ( <Box name={item.name} amount={item.amount} message={item.message} /> ))}
+            </div>
+           );
+}
+
+export default Donations

front-end/src/Pages/Home.tsx

@@ -0,0 +1,15 @@
+import {useState} from "react";
+import {Link} from "react-router-dom";
+
+function Home(){
+    return (
+            <div>
+            <h2>Hello Asso Front Pages</h2><br/>
+            <Link to="/donations">Donations</Link>
+            <Link to="/total">Totals</Link>
+            </div>
+           );
+}
+
+export default Home
+

front-end/src/Pages/Total.tsx

@@ -0,0 +1,6 @@
+
+function Total(){
+ return <h2>Total</h2>;
+}
+
+export default Total

front-end/src/Pages/box.css

@@ -0,0 +1,25 @@
+.box {
+    display: flex;
+    flex-direction: row;
+    background-color: #fcb900;
+    margin-bottom: 2px;
+}
+
+.amount:before {
+    content:'€'
+}
+
+.amount {
+    background-color: #fd7e14;
+    padding-right: 2px
+}
+
+.name {
+    padding-right: 2px 
+}
+
+.message {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}