websrc/.gitignore

@@ -0,0 +1 @@
+*.js

websrc/components/App.tsx

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import { Container, Navbar, Row } from "react-bootstrap";
+import Plot from "react-plotly.js";
+import { HCard } from "./HCard";
+
+class App extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        return (
+            <Container className="flex-fill flex-row">
+                <Container className="flex-fill border d-flex flex-column">
+                    <Row className="justify-content-center my-2">
+                        <HCard title="Test" content="Hello"></HCard>
+                    </Row>
+
+                    <Row className="flex-grow-1 border-top">
+                        <Plot
+                            data={[
+                                {
+                                    x: [1, 2, 3],
+                                    y: [2, 4, 6],
+                                    type: 'scatter',
+                                    mode: 'lines+markers',
+                                },
+                            ]}
+                            layout={{ dragmode: "pan", autosize: true }}
+                            config={{
+                                scrollZoom: true,
+                                displayModeBar: false,
+                                responsive: true,
+                            }}
+                            style={{ width: '100%', height: '100%' }}
+                        />
+                    </Row>
+                </Container>
+            </Container>
+        )
+    }
+}
+
+export default App;

websrc/components/HCard.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FunctionComponent } from 'react';
+import { Card, Col, Row } from 'react-bootstrap';
+
+type CardProps = {
+    title: string,
+    content: string
+}
+
+export const HCard: FunctionComponent<CardProps> = ({ title, content }) =>
+    <Card bg="light" style={{ minWidth: "15rem" }}>
+        <Row className="no-gutters">
+            <Col md={7} className="border-right my-auto">
+                <h3 className="text-center">{title}</h3>
+            </Col>
+
+            <Col md={5}>
+                <Card.Body>
+                    <Card.Text className="text-center">
+                        {content}
+                    </Card.Text>
+                </Card.Body>
+            </Col>
+        </Row>
+        <Card.Text className="border-top text-center">
+            <small className="text-muted my-auto mx-2">Last updated 3 mins ago</small>
+        </Card.Text>
+    </Card>

websrc/components/Toasts.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { FunctionComponent } from 'react';
+import { Card, Col, Row, Toast } from 'react-bootstrap';
+
+type ToastProps = {
+    title: string,
+    content?: string
+}
+
+export const FullToast: FunctionComponent<ToastProps> = ({ title, content }) =>
+    <Toast>
+        <Toast.Header>
+            <strong className="mr-auto">{title}</strong>
+            <small>10 mins ago</small>
+        </Toast.Header>
+        <Toast.Body> {content}</Toast.Body>
+    </Toast>
+
+export const HeaderToast: FunctionComponent<ToastProps> = ({ title }) =>
+    <Toast>
+        <Toast.Header>
+            <strong className="mr-auto">{title}</strong>
+            <small>10 mins ago</small>
+        </Toast.Header>
+    </Toast>
+
+export default FullToast;

websrc/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "bootstrap/dist/css/bootstrap.css";
+import App from "./components/App";
+import io from "socket.io-client";
+
+const socket = io();
+
+socket.on("connect", function () {
+    console.log("Connected!")
+})
+
+ReactDOM.render(<App />, document.getElementById("root"));

websrc/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "rustico",
+  "version": "1.0.0",
+  "main": "intex.tsx",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "~16",
+    "@types/react-dom": "~16",
+    "@types/react-plotly.js": "^2.2.4",
+    "@types/socket.io-client": "^1.4.34",
+    "parcel-bundler": "^1.12.4",
+    "react-plotly.js": "^2.5.1",
+    "typescript": "^4.1.2"
+  },
+  "dependencies": {
+    "bootstrap": "^4.5.3",
+    "react": "~16",
+    "react-bootstrap": "^1.4.0",
+    "react-dom": "~16",
+    "socket.io-client": "~2"
+  },
+  "resolutions": {
+    "@types/react": "~16",
+    "@types/react-dom": "~16",
+    "react": "~16",
+    "react-dom": "~16",
+    "socket.io-parser": "~2"
+  }
+}

websrc/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "lib": ["esnext", "DOM"],
+        "jsx": "react",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+    },
+    "exclude": [
+        "node_modules"
+    ],
+}