[ADD] first UI

.gitignore

@@ -1,3 +1,6 @@
 *.pyc
 .sonarlint
-*.db
+*.db
+ui/node_modules
+ui/yarn*
+ui/static/*

odoo_control/settings.py

@@ -16,7 +16,7 @@ INSTALLED_APPS = [
     'tastypie',
     'core.apps.CoreConfig',
     'api.apps.ApiConfig',
-    'web.apps.WebConfig',
+    'ui.apps.UiConfig',
 ]
 
 MIDDLEWARE = [
@@ -102,3 +102,4 @@ JWT_SECRET_KEY = config('JWT_SECRET_KEY')
 PLAYBOOKS_PATH = config('PLAYBOOKS_PATH')
 
 DOCKER_SOCK_DIR = config('DOCKER_SOCK_DIR')
+

odoo_control/urls.py

@@ -4,8 +4,10 @@ from django.conf.urls import url, include
 from django.contrib import admin
 
 from api.urls import v1_api
+from ui.views import index
 
 urlpatterns = [
     url(r'^admin/', admin.site.urls),
     url(r'^api/', include(v1_api.urls)),
+    url(r'^ui/', index)
 ]

ui/.babelrc

@@ -0,0 +1,10 @@
+{
+    "presets": [
+        ["env", {
+            "modules": false
+        }]
+    ],
+    "plugins": [
+        ["transform-react-jsx", { "pragma": "h" }]
+    ]
+}

web/apps.py → ui/apps.py

@@ -4,5 +4,5 @@ from __future__ import unicode_literals
 from django.apps import AppConfig
 
 
-class WebConfig(AppConfig):
-    name = 'web'
+class UiConfig(AppConfig):
+    name = 'ui'

ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "eiru_automation_ui",
+  "version": "1.0.0",
+  "description": "Eiru Automation UI",
+  "main": "index.js",
+  "author": "Robert Alexis Gauto",
+  "license": "MIT",
+  "scripts": {
+    "start": "./node_modules/.bin/webpack --mode development --progress --config webpack.config.js",
+    "build": "./node_modules/.bin/webpack --mode production --config webpack.config.js"
+  },
+  "dependencies": {
+    "bulma": "^0.6.2",
+    "preact": "^8.2.7"
+  },
+  "devDependencies": {
+    "autoprefixer": "^8.1.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.3",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "css-loader": "^0.28.10",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "less": "^3.0.1",
+    "less-loader": "^4.0.6",
+    "style-loader": "^0.20.2",
+    "uglifyjs-webpack-plugin": "^1.2.2",
+    "webpack": "^4.1.0",
+    "webpack-cli": "^2.0.10"
+  }
+}

ui/src/components/App.js

@@ -0,0 +1,18 @@
+import { h, Component } from 'preact'
+import './app.less'
+
+import Topbar from './topbar'
+import Sidebar from './sidebar'
+
+class App extends Component {
+    render() {
+        return (
+            <div className="app">
+                <Topbar />
+                <Sidebar />
+            </div>
+        )
+    }
+}
+
+export default App

ui/src/components/app.less

@@ -0,0 +1,6 @@
+html, body, #root, .app {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+

ui/src/components/dashboard/index.js

@@ -0,0 +1,10 @@
+import { h, Component } from 'preact'
+
+class Dashboard extends Component {
+    render() {
+        return (
+            <div className="dashboard">
+            </div>
+        )
+    }
+}

ui/src/components/home/index.js

@@ -0,0 +1,10 @@
+import { h, Component } from 'preact'
+
+class Home extends Component {
+    render() {
+        return (
+            <div className="home">
+            </div>
+        )
+    }
+}

ui/src/components/login/index.js

@@ -0,0 +1,10 @@
+import { h, Component } from 'preact'
+
+class Login extends Component {
+    render() {
+        return (
+            <div className="login">
+            </div>
+        )
+    }
+}

ui/src/components/sidebar/index.js

@@ -0,0 +1,13 @@
+import { h, Component } from 'preact'
+import './sidebar.less'
+
+class Sidebar extends Component {
+    render() {
+        return (
+            <div className="sidebar">
+            </div>
+        )
+    }
+}
+
+export default Sidebar

ui/src/components/sidebar/sidebar.less

@@ -0,0 +1,8 @@
+@import '../../style/variables.less';
+
+.sidebar {
+    width: 230px;
+    height: 100%;
+    margin-top: @topbar-height;
+    background: @color-light;
+}

ui/src/components/topbar/index.js

@@ -0,0 +1,13 @@
+import { h, Component } from 'preact'
+import './topbar.less'
+
+class Topbar extends Component {
+    render() {
+        return (
+            <div className="topbar">
+            </div>
+        )
+    }
+}
+
+export default Topbar

ui/src/components/topbar/topbar.less

@@ -0,0 +1,10 @@
+@import '../../style/variables.less';
+
+.topbar {
+    width: 100%;
+    height: @topbar-height;
+    position: fixed;
+    top: 0;
+    box-shadow: 0 2px 4px #666;
+    background: @color-primary;
+}

ui/src/index.js

@@ -0,0 +1,5 @@
+import { h, render } from 'preact'
+import App from './components/App'
+import '../node_modules/bulma/css/bulma.css'
+
+render(<App />, document.getElementById('root'))

ui/src/style/mixins.less

@@ -0,0 +1,7 @@
+.fill() {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}

ui/src/style/variables.less

@@ -0,0 +1,3 @@
+@color-primary: #0097a7;
+@color-light: #f5f5f5;
+@topbar-height: 45px;

ui/templates/index.html

@@ -0,0 +1,15 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Eiru Automation</title>
+        <link rel="stylesheet" href="{% static 'app.css' %}">
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="{% static 'app.js' %}"></script>
+    </body>
+</html>

web/views.py → ui/views.py

@@ -1,6 +1,8 @@
 # -*- coding: utf-8 -*-
 from __future__ import unicode_literals
-
 from django.shortcuts import render
 
-# Create your views here.
+'''
+'''
+def index(request):
+    return render(request, 'index.html')

ui/webpack.config.js

@@ -0,0 +1,57 @@
+const webpack = require('webpack')
+const path = require('path')
+const autoprefixer = require('autoprefixer')
+
+const extractTextPlugin = require('extract-text-webpack-plugin')
+const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const entryFile = path.resolve(__dirname, 'src/index.js')
+const inputPath = path.resolve(__dirname, 'src/')
+const outputPath = path.resolve(__dirname, 'static/')
+
+module.exports = {
+    entry: entryFile,
+    output: {
+        path: outputPath,
+        filename: 'app.js'
+    },
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new extractTextPlugin({
+            filename: 'app.css',
+            allChunks: true
+        }),
+        new uglifyJsPlugin()
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /(node_modules|bower_modules)/,
+                include: inputPath,
+                loader: 'babel-loader'
+            },
+            {
+                test: /\.less$/,
+                use: extractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: [
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                minimize: true
+                            }
+                        }, 
+                        {
+                            loader: 'less-loader'
+                        }
+                    ]
+                })
+            },
+            {
+                test: /\.(ttf|eot|svg|woff|woff2)(\?.+)?$/,
+                loader: 'file-loader?name=[hash:12].[ext]'
+            }
+        ]
+    }
+}

web/admin.py

@@ -1,6 +0,0 @@
-# -*- coding: utf-8 -*-
-from __future__ import unicode_literals
-
-from django.contrib import admin
-
-# Register your models here.

web/models.py

@@ -1,6 +0,0 @@
-# -*- coding: utf-8 -*-
-from __future__ import unicode_literals
-
-from django.db import models
-
-# Create your models here.

web/tests.py

@@ -1,6 +0,0 @@
-# -*- coding: utf-8 -*-
-from __future__ import unicode_literals
-
-from django.test import TestCase
-
-# Create your tests here.