Implemented basic settings page

inversify · Jun 28, 2016 · 3d635f6 · 3d635f6
1 parent 3de7785
commit 3d635f6
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 38 deletions.
diff --git a/src/actions/settings_actions.ts b/src/actions/settings_actions.ts
@@ -2,13 +2,13 @@ import { makeActionCreator } from "../utils/utils";
 import ACTION_TYPES from "../constants/action_types";
 import interfaces from "../interfaces/interfaces";
 
-let saveSettingsSuccess = makeActionCreator(ACTION_TYPES.SAVE_SETTINGS_SUCCESS);
+let saveSettingsSuccess = makeActionCreator(ACTION_TYPES.SAVE_SETTINGS_SUCCESS, "settings");
 let saveSettingsError = makeActionCreator(ACTION_TYPES.SAVE_SETTINGS_ERROR, "exception");
 
 let saveSettingsAsync = function (settings: interfaces.UserSettings) {
     try {
         window.localStorage.setItem("inversify_settings", JSON.stringify(settings));
-        return saveSettingsSuccess();
+        return saveSettingsSuccess(settings);
     } catch (e) {
         return saveSettingsError(e);
     }

diff --git a/src/components/kernel_explorer.tsx b/src/components/kernel_explorer.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { Link } from "react-router";
 import Panel from "./panel";
 import interfaces from "../interfaces/interfaces";
+import Tip from "./tip";
 
 const dir = {
     close: "&#9657",
@@ -17,11 +18,24 @@ class KernelExplorer extends React.Component<any, any> {
     public render() {
         return (
             <Panel title={"Kernels"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
-                {this._renderKernels(this.props.kernels)}
+                {this._render()}
             </Panel>
         );
     }
 
+    private _render() {
+        if (this.props.kernels.length > 0) {
+            let kernels = this._renderKernels(this.props.kernels);
+            return <div>{kernels}</div>;
+        } else {
+            return <Tip>
+                No Kernels found! Use global
+                <span className="label label-default" style={{backgroundColor: "transparent"}}>__inversifyDevtools__</span>
+                to connect a kernel.
+            </Tip>;
+        }
+    }
+
     private _handleClick(kernel: interfaces.SelectableKernel) {
         this.props.selectKernel(kernel);
     }
@@ -38,6 +52,7 @@ class KernelExplorer extends React.Component<any, any> {
             );
         });
     }
+
 }
 
 export default KernelExplorer;
diff --git a/src/components/request_log.tsx b/src/components/request_log.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import Panel from "./panel";
 import interfaces from "../interfaces/interfaces";
+import Tip from "./tip";
 
 class RequestLog extends React.Component<any, any> {
 
@@ -10,37 +11,48 @@ class RequestLog extends React.Component<any, any> {
 
     public render() {
 
-        let entries = this.props.log.map((entry: interfaces.SelectableLogEntry, i: number) => {
-            return this._renderEntry(entry, i);
-        });
-
         return (
             <Panel title={"Requests Log"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
-                <div className="panelTopMenu">
-                    <ul>
-                        <li>
-                            <a className={this.props.filter === "ALL" ? "active" : ""}
-                               onClick={() => { this._onFilterHandler("ALL"); }}>ALL</a>
-                        </li>
-                        <li>
-                            <a className={this.props.filter === "SUCCESS" ? "active" : ""}
-                               onClick={() => { this._onFilterHandler("SUCCESS"); }}>SUCCESS</a>
-                        </li>
-                        <li>
-                            <a className={this.props.filter === "ERROR" ? "active" : ""}
-                               onClick={() => { this._onFilterHandler("ERROR"); }}>ERROR</a>
-                        </li>
-                        <li>
-                            <a onClick={this._onClearHandler.bind(this)}>CLEAR</a>
-                        </li>
-                    </ul>
-                </div>
-                {entries}
+                {this._render()}
             </Panel>
         );
 
     }
 
+    private _render() {
+        if (this.props.log.length > 0) {
+            let entries = this.props.log.map((entry: interfaces.SelectableLogEntry, i: number) => {
+                return this._renderEntry(entry, i);
+            });
+            return (
+                <div>
+                    <div className="panelTopMenu">
+                        <ul>
+                            <li>
+                                <a className={this.props.filter === "ALL" ? "active" : ""}
+                                    onClick={() => { this._onFilterHandler("ALL"); }}>ALL</a>
+                            </li>
+                            <li>
+                                <a className={this.props.filter === "SUCCESS" ? "active" : ""}
+                                    onClick={() => { this._onFilterHandler("SUCCESS"); }}>SUCCESS</a>
+                            </li>
+                            <li>
+                                <a className={this.props.filter === "ERROR" ? "active" : ""}
+                                    onClick={() => { this._onFilterHandler("ERROR"); }}>ERROR</a>
+                            </li>
+                            <li>
+                                <a onClick={this._onClearHandler.bind(this)}>CLEAR</a>
+                            </li>
+                        </ul>
+                    </div>
+                    {entries}
+                </div>
+            );
+        } else {
+            return <Tip>Awaiting requests. Ensure that at least one kernel instance is connected.</Tip>;
+        }
+    }
+
     private _onClearHandler() {
         this.props.clearRequests();
     }

diff --git a/src/containers/pages/settings_page.tsx b/src/containers/pages/settings_page.tsx
@@ -10,7 +10,8 @@ let actions = combineActionsGroups(loggerActions, settingsActions);
 
 function mapStateToPropsReposPage(state: any) {
     return {
-        app: state.get("app")
+        app: state.get("app"),
+        settings: state.get("settings")
     };
 }
 
@@ -22,7 +23,7 @@ class SettingsPage extends React.Component<any, void> {
     public render() {
         return (
            <SettingsEditor height={this.props.app.get("windowHeight")}
-                           columnSize={12} settings={this.props.app.get("settings")}
+                           columnSize={12} settings={this.props.settings.get("settings")}
                            saveSettingsAsync={this.props.actions.saveSettingsAsync.bind(this)} />
         );
     }

diff --git a/src/main.tsx b/src/main.tsx
@@ -12,7 +12,8 @@ function render(container: string) {
         middlewares: [thunk],
         reducers: {
             app: appReducer,
-            log: logReducer
+            log: logReducer,
+            settings: settingReducer
         },
         routes: routes
     });
@@ -71,7 +72,8 @@ function demo() {
     kernel.getNamed("Weapon", "katana");
 }
 
-setTimeout(function() { demo(); }, 1000);
+// setTimeout(function() { demo(); }, 1000);
+
 render("root");
 // END TEMP
 

diff --git a/src/reducers/app_reducer.ts b/src/reducers/app_reducer.ts
@@ -24,10 +24,6 @@ function initAppSuccess(previousState: any, action: any) {
     return previousState.set("kernels", updatedKernels);
 }
 
-function initSettingsSuccess(previousState: any, action: any) {
-    return previousState.set("settings", action.settings);
-}
-
 function selectKernel(previousState: any, action: any) {
     let kernels = previousState.get("kernels");
     let updatedKernels = kernels.map((kernel: interfaces.SelectableKernel) => {
@@ -58,8 +54,6 @@ const appReducer: Redux.Reducer = (previousState: any = defaultState, action: an
             return resize(previousState, action);
         case ACTION_TYPES.APP_INIT_SUCCESS:
             return initAppSuccess(previousState, action);
-        case ACTION_TYPES.APP_SETTINGS_SUCCESS:
-            return initSettingsSuccess(previousState, action);
         case ACTION_TYPES.SELECT_KERNEL:
             return selectKernel(previousState, action);
         case ACTION_TYPES.SELECT_BINDING:

diff --git a/src/reducers/setting_reducer.ts b/src/reducers/setting_reducer.ts
@@ -1,11 +1,16 @@
 import * as Immutable from "immutable";
 import ACTION_TYPES from "../constants/action_types";
 import interfaces from "../interfaces/interfaces";
+import getDefaultSettings from "../core/default_settings";
 
 const defaultState = Immutable.fromJS({
-    settings: null
+    settings: getDefaultSettings()
 });
 
+function initSettingsSuccess(previousState: any, action: any) {
+    return previousState.set("settings", action.settings);
+}
+
 function saveSettingsSuccess(previousState: any, action: any) {
     return previousState.set("settings", action.settings);
 }
@@ -16,6 +21,8 @@ function saveSettingsError(previousState: any, action: any) {
 
 const settingReducer: Redux.Reducer = (previousState: any = defaultState, action: any) => {
     switch (action.type) {
+        case ACTION_TYPES.APP_SETTINGS_SUCCESS:
+            return initSettingsSuccess(previousState, action);
         case ACTION_TYPES.SAVE_SETTINGS_SUCCESS:
             return saveSettingsSuccess(previousState, action);
         case ACTION_TYPES.SAVE_SETTINGS_ERROR: