Merge pull request #1 from Opla/existing-code

Merge existing code into this repository

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [["es2015", {"modules": false}], "react", "stage-1"],
+  "plugins": ["transform-regenerator", "react-hot-loader/babel", "transform-decorators-legacy"],
+  "env": {
+    "start": {
+      "presets": [
+        "react-hmre"
+      ]
+    }
+  }
+}

.eslintignore

@@ -0,0 +1,7 @@
+node_modules/*
+dist/*
+src/public/*
+src/server/*
+config/*
+.vscode/*
+webpack*

.eslintrc.json

@@ -0,0 +1,43 @@
+{
+    "extends": "airbnb",
+    "env": {
+        "es6": true,
+        "browser": true,
+        "node": false,
+        "jquery": false,
+        "mocha": true
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "import"
+    ],
+    "rules": {
+        "indent": [2, 2],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ],
+        "no-console": 1,
+        "prefer-const": "error",
+        "no-var": "error"
+    },
+    "settings": {
+        "import/resolver": {
+            "webpack": {
+                "config": "webpack.common.js"
+            }
+        }
+    }
+}

.gitignore

@@ -0,0 +1,7 @@
+dist
+node_modules
+*.DS_Store
+.vscode
+yarn.lock
+package-lock.json
+config

README.md

@@ -1,8 +1,11 @@
 # opla-front
+
 Opla.ai Frontend using Node es7 react and redux
 
 # Getting started
+
 To deploy/use Opla.ai use /opla repository instead.
 
 # licence
+
 GPL v2.0+

jsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "target": "ES6"
+    },
+    "files": [
+        "src/"
+    ]
+}

package.json

@@ -0,0 +1,70 @@
+{
+  "name": "opla-front",
+  "version": "1.3.2",
+  "description": "The admin dashboard for bots",
+  "main": "index.js",
+  "repository": {
+    "url": "[email protected]:mik/opla-dashboard",
+    "type": "git"
+  },
+  "author": "mik <[email protected]>",
+  "license": "UNLICENSED",
+  "scripts": {
+    "start:node": "NODE_PATH=$NODE_PATH:./shared node --harmony ./dist",
+    "start:dev": "webpack-dev-server --env=dev --inline",
+    "lint:prod": "eslint src --ext=js --ext=jsx",
+    "lint:dev": "eslint src --rule 'no-console: off' --ext=js --ext=jsx --fix",
+    "build:dev": "webpack --env=dev --progress --profile --colors",
+    "build:prod": "webpack --env=prod --progress --profile --colors"
+  },
+  "dependencies": {
+    "babel-runtime": "^6.26.0",
+    "chart.js": "2.7.1",
+    "css-loader": "^0.28.7",
+    "json-loader": "0.5.4",
+    "mdl-selectfield": "^1.0.4",
+    "prop-types": "15.6.0",
+    "react": "16.2.0",
+    "react-chartjs-2": "2.6.4",
+    "react-dnd": "2.5.4",
+    "react-dnd-html5-backend": "2.5.4",
+    "react-dom": "16.2.0",
+    "react-hot-loader": "3.1.3",
+    "react-mdl": "1.11.0",
+    "react-redux": "5.0.6",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
+    "redux": "3.7.2",
+    "redux-devtools": "3.4.1",
+    "redux-devtools-dock-monitor": "1.1.2",
+    "redux-devtools-log-monitor": "1.4.0",
+    "redux-saga": "0.16.0",
+    "style-loader": "^0.19.1",
+    "zoapp-common": "0.1.0",
+    "zoapp-ui": "0.1.5"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-regenerator": "6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "copy-webpack-plugin": "4.3.0",
+    "eslint": "^4.13.1",
+    "eslint-config-airbnb": "16.1.0",
+    "eslint-import-resolver-webpack": "0.8.4",
+    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-jsx-a11y": "6.0.3",
+    "eslint-plugin-react": "^7.5.1",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.11.0",
+    "webpack-merge": "^4.1.1"
+  }
+}

src/client/index.jsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { render } from "react-dom";
+import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
+import { AppContainer } from "react-hot-loader";
+import { DialogManager } from "zoapp-ui";
+
+import configureStore from "OplaLibs/store";
+import App from "OplaContainers/app";
+
+// import DevTools from "../shared/containers/DevTools";
+/* eslint-enable no-unused-vars */
+
+const store = configureStore();
+
+DialogManager.init(store);
+
+/* eslint-enable no-restricted-syntax */
+const mountNode = document.getElementById("app");
+
+/* const deleteScript = (filename) => {
+  const scripts = [...document.getElementsByTagName("script")];
+  scripts.find((script) => {
+    if (script.getAttribute("src") === filename) {
+      script.parentNode.removeChild(script);
+      return true;
+    }
+    return false;
+  });
+};
+
+const loadScript = (filename, callback) => {
+  const script = document.createElement("script");
+  script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", filename);
+  script.onload = callback;
+  const body = document.getElementsByTagName("body")[0];
+  body.appendChild(script);
+}; */
+
+const renderApp = (Root) => {
+  render(
+    <AppContainer warnings={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <Root store={store} />
+        </BrowserRouter>
+      </Provider>
+    </AppContainer>,
+    mountNode,
+  );
+};
+
+/* global module */
+if (module.hot) {
+  /* eslint-disable global-require */
+  /* eslint-disable no-undef */
+  // const rootPath = "./shared/container/app";
+  module.hot.accept("OplaContainers/app", () => {
+    console.log("HMR app");
+    /* ReactDOM.unmountComponentAtNode(mountNode);
+    const parent = mountNode.parentNode;
+    parent.removeChild(mountNode);
+    mountNode = document.createElement("div");
+    mountNode.id = "app";
+    parent.insertBefore(mountNode, parent.firstChild);
+    deleteScript("js/material.js");
+    deleteScript("js/material.ext.js");
+    window.componentHandler = null;
+    window.MaterialButton = null;
+    window.MaterialCheckbox = null;
+    window.MaterialIconToggle = null;
+    window.MaterialMenu = null;
+    window.MaterialProgress = null;
+    window.MaterialRadio = null;
+    window.MaterialSlider = null;
+    window.MaterialSnackbar = null;
+    window.MaterialSpinner = null;
+    window.MaterialSwitch = null;
+    window.MaterialTabs = null;
+    window.MaterialTextfield = null;
+    window.MaterialTooltip = null;
+    window.MaterialLayout = null;
+    window.MaterialLayoutTab = null;
+    window.MaterialDataTable = null;
+    window.MaterialRipple = null;
+
+    loadScript("js/material.js", () => {
+      loadScript("js/material.ext.js", () => {
+        const newApp = require("OplaContainers/app").default;
+        renderApp(newApp);
+      });
+    }); */
+    const newApp = require("OplaContainers/app").default;
+    renderApp(newApp);
+  });
+  /* eslint-enable no-undef */
+  /* eslint-enable global-require */
+  // module.hot.accept();
+}
+
+renderApp(App);
+
+/*
+ // global // process // require
+if (process.env.NODE_ENV !== "production") {
+  const showDevTools = require("./showDevTools");
+  showDevTools(store);
+} */

src/client/showDevTools.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable no-unused-vars */
+import React from "react";
+import { render } from "react-dom";
+import DevTools from "../shared/containers/devTools";
+/* eslint-enable no-unused-vars */
+
+/* global window setTimeout */
+export default function showDevTools(store) {
+  const popup = window.open(null, "Redux DevTools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");
+  // Reload in case it already exists
+  popup.location.reload();
+
+  setTimeout(() => {
+    popup.document.write("<div id=\"react-devtools-root\"></div>");
+    render(<DevTools store={store} />, popup.document.getElementById("react-devtools-root"));
+  }, 10);
+}

src/plugins/app-connector/appSettings.jsx

@@ -0,0 +1,100 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+export default class AppSettings extends Component {
+  onAction = (action) => {
+    if (action === "Build") {
+      console.log("onAction Build TODO");
+    }
+    this.props.onAction(action);
+  }
+
+  renderCreateApp() {
+    const { instance } = this.props;
+    console.log("instance=", instance);
+    const app = instance.application;
+    let appId = "";
+    let appSecret = "";
+    if (app) {
+      appId = app.id;
+      appSecret = app.secret;
+    }
+    let botUrl = "";
+    if (instance.url) {
+      botUrl = (
+        <a
+          style={{
+            width: "100%",
+            marginBottom: "24px",
+          }}
+          href={instance.url}
+          target="_blank"
+        >{instance.url}
+        </a>);
+    }
+    const botId = instance.origin;
+
+    return (
+      <div style={{
+        width: "420px",
+        height: "200px",
+        margin: "auto",
+        position: "absolute",
+        left: "0px",
+        right: "0px",
+        bottom: "0px",
+        top: "0px",
+      }}
+      >
+        <div style={{ marginTop: "8px", textAlign: "center" }}>Link to webapp :</div>
+        <div style={{
+          width: "390px",
+          paddingTop: "8px",
+          margin: "auto",
+        }}
+        >{botUrl}
+        </div>
+
+        <div style={{ marginTop: "12px", textAlign: "center" }}>Or install SDK and set these parameters :</div>
+        <div style={{
+          marginTop: "0px", marginBottom: "0px", fontSize: "10px", color: "black",
+        }}
+        >botId : {botId}
+        </div>
+        <div style={{
+          marginTop: "0px", marginBottom: "0px", fontSize: "10px", color: "black",
+        }}
+        >appId : {appId}
+        </div>
+        <div style={{
+          marginTop: "0px", marginBottom: "12px", fontSize: "10px", color: "black",
+        }}
+        >appSecret : {appSecret}
+        </div>
+
+      </div>);
+  }
+
+  render() {
+    const style = {
+      height: "200px",
+      width: "502px",
+      position: "relative",
+    };
+    let container = <div>Loading...</div>;
+    if (this.props.instance && this.props.instance.application) {
+      container = this.renderCreateApp();
+    }
+    return (
+      <div>
+        <div className="mdl-color--grey-100" style={style}>
+          {container}
+        </div>
+      </div>);
+  }
+}
+
+AppSettings.propTypes = {
+  onAction: PropTypes.func.isRequired,
+  instance: PropTypes.shape({ application: PropTypes.shape({}) }).isRequired,
+};