tailwind #9
1
websrc/.gitignore
vendored
Normal file
1
websrc/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
*.js
|
44
websrc/components/App.tsx
Normal file
44
websrc/components/App.tsx
Normal 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;
|
28
websrc/components/HCard.tsx
Normal file
28
websrc/components/HCard.tsx
Normal 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>
|
27
websrc/components/Toasts.tsx
Normal file
27
websrc/components/Toasts.tsx
Normal 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
13
websrc/index.tsx
Normal 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
29
websrc/package.json
Normal 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
12
websrc/tsconfig.json
Normal 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
5613
websrc/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user