initial commit react webapp

This commit is contained in:
Giulio De Pasquale 2020-12-12 20:18:25 +00:00
parent 1a8808b088
commit aea9352ada
8 changed files with 5767 additions and 0 deletions

1
websrc/.gitignore vendored Normal file
View File

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

44
websrc/components/App.tsx Normal file
View File

@ -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;

View File

@ -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>

View File

@ -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;

13
websrc/index.tsx Normal file
View File

@ -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"));

29
websrc/package.json Normal file
View File

@ -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"
}
}

12
websrc/tsconfig.json Normal file
View File

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

5613
websrc/yarn.lock Normal file

File diff suppressed because it is too large Load Diff