Add dashboard component (#521)

Allow CORS from `http://localhost:3000`
7 years ago · 9eabd1738e
parent 23d7c33667
commit 9eabd1738e
16 changed files with 122 additions and 11067 deletions
--- a/cvat-ui/package.json
+++ b/cvat-ui/package.json
@ -1,12 +1,14 @@
 {
  "name": "cvat-ui",
  "version": "0.1.0",
+  "license": "MIT",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.13",
-    "@types/node": "12.0.3",
+    "@types/node": "^12.0.3",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
+    "@types/react-router-dom": "^4.3.4",
    "antd": "^3.19.1",
    "babel-plugin-import": "^1.11.2",
    "customize-cra": "^0.2.12",
@ -15,6 +17,7 @@
    "react": "^16.8.6",
    "react-app-rewired": "^2.1.3",
    "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "source-map-explorer": "^1.8.0",
    "typescript": "3.4.5"
--- a/cvat-ui/public/cvat.min.js
+++ b/cvat-ui/public/cvat.min.js
--- a/cvat-ui/public/index.html
+++ b/cvat-ui/public/index.html
@ -20,6 +20,8 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
+
+    <script src="./cvat.min.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/cvat-ui/src/App.css
+++ b/cvat-ui/src/App.css
@ -1,6 +0,0 @@
-.App {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: stretch;
-}
--- a/cvat-ui/src/App.tsx
+++ b/cvat-ui/src/App.tsx
@ -1,15 +0,0 @@
-import React, { Component } from 'react';
-import { Button } from 'antd';
-import './App.css';
-
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <Button type="primary">Button</Button>
-      </div>
-    );
-  }
-}
-
-export default App;
--- a/cvat-ui/src/components/app/App.css
+++ b/cvat-ui/src/components/app/App.css
@ -0,0 +1,3 @@
+.App {
+
+}
--- a/cvat-ui/src/components/app/App.test.tsx
+++ b/cvat-ui/src/components/app/App.test.tsx
--- a/cvat-ui/src/components/app/App.tsx
+++ b/cvat-ui/src/components/app/App.tsx
@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
+
+import Dashboard from '../dashboard/Dashboard';
+
+import './App.css';
+
+class App extends Component {
+  render() {
+    return(
+      <Router>
+        <div>
+          <Redirect from="/" to="dashboard" />
+          <Route path="/dashboard" component={Dashboard} />
+        </div>
+      </Router>
+    );
+  }
+}
+
+export default App;
--- a/cvat-ui/src/components/dashboard/Dashboard.css
+++ b/cvat-ui/src/components/dashboard/Dashboard.css
@ -0,0 +1,3 @@
+.Dashboard {
+
+}
--- a/cvat-ui/src/components/dashboard/Dashboard.test.tsx
+++ b/cvat-ui/src/components/dashboard/Dashboard.test.tsx
@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Dashboard from './Dashboard';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Dashboard />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
--- a/cvat-ui/src/components/dashboard/Dashboard.tsx
+++ b/cvat-ui/src/components/dashboard/Dashboard.tsx
@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+
+import './Dashboard.css';
+
+declare const window: any;
+
+class Dashboard extends Component {
+  constructor(props: any) {
+    super(props);
+  }
+  componentWillMount() {
+    window.cvat.server.login('admin', 'admin').then(
+      (response: any) => {
+        console.log(response);
+      },
+      (error: any) => {
+        console.log(error);
+      }
+    );
+
+    window.cvat.tasks.get().then(
+      (response: any) => {
+        console.log(response);
+      },
+      (error: any) => {
+        console.log(error);
+      }
+    );
+  }
+
+  render() {
+    return(
+      <div className="Dashboard">
+
+      </div>
+    );
+  }
+}
+
+export default Dashboard;
--- a/cvat-ui/src/index.tsx
+++ b/cvat-ui/src/index.tsx
@ -1,10 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+
 import * as serviceWorker from './serviceWorker';

-ReactDOM.render(<App />, document.getElementById('root'));
+import './index.css';
+import App from './components/app/App';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);

 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
--- a/cvat-ui/src/utils/.gitkeep
+++ b/cvat-ui/src/utils/.gitkeep
--- a/cvat-ui/yarn.lock
+++ b/cvat-ui/yarn.lock
--- a/cvat/requirements/development.txt
+++ b/cvat/requirements/development.txt
@ -12,3 +12,4 @@ wrapt==1.10.11
 django-extensions==2.0.6
 Werkzeug==0.14.1
 snakeviz==0.4.2
+django-cors-headers==3.0.2
--- a/cvat/settings/development.py
+++ b/cvat/settings/development.py
@ -9,6 +9,15 @@ DEBUG = True

 INSTALLED_APPS += [
    'django_extensions',
+    'corsheaders',
+]
+
+MIDDLEWARE += [
+    'corsheaders.middleware.CorsMiddleware',
+]
+
+CORS_ORIGIN_WHITELIST = [
+    "http://localhost:3000",
 ]

 ALLOWED_HOSTS.append('testserver')