From 544b1e32389d28df4a40013ea6886f1f9d61e37d Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Mon, 11 Jul 2016 19:49:58 +0200
Subject: modify flow content

---
 web/src/js/app.jsx                                 |  2 +-
 web/src/js/components/ContentView.jsx              |  6 ++--
 web/src/js/components/ContentView/ContentViews.jsx | 16 +++++++---
 web/src/js/components/FlowView/Messages.jsx        |  4 +--
 web/src/js/components/common/MonacoEditor.jsx      | 34 ++++++++++++++++++++++
 5 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 web/src/js/components/common/MonacoEditor.jsx

(limited to 'web/src/js')

diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx
index bd2d3d58..51b2b639 100644
--- a/web/src/js/app.jsx
+++ b/web/src/js/app.jsx
@@ -12,7 +12,7 @@ import { add as addLog } from './ducks/eventLog'
 
 const middlewares = [thunk];
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV === 'development' || true) {
   const createLogger = require('redux-logger');
   middlewares.push(createLogger());
 }
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 1533684e..f6dbe90a 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -59,11 +59,11 @@ export default class ContentView extends Component {
         return (
             <div>
                 {View.textView ? (
-                    <ContentLoader flow={flow} message={message}>
-                        <this.state.View content="" />
+                    <ContentLoader  flow={flow} message={message}>
+                        <this.state.View onChange={this.props.onChange} content="" />
                     </ContentLoader>
                 ) : (
-                    <View flow={flow} message={message} />
+                    <View flow={flow} onChange={this.props.onChange}  message={message} />
                 )}
                 <div className="view-options text-center">
                     <ViewSelector onSelectView={this.selectView} active={View} message={message}/>
diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
index b0297dcc..e5a864bf 100644
--- a/web/src/js/components/ContentView/ContentViews.jsx
+++ b/web/src/js/components/ContentView/ContentViews.jsx
@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react'
 import ContentLoader from './ContentLoader'
 import { MessageUtils } from '../../flow/utils.js'
+import Button from '../common/Button'
+
 
 const views = [ViewAuto, ViewImage, ViewJSON, ViewRaw]
 
@@ -22,13 +24,19 @@ export function ViewImage({ flow, message }) {
 
 ViewRaw.textView = true
 ViewRaw.matches = () => true
+ViewRaw.input = {}
 
 ViewRaw.propTypes = {
     content: React.PropTypes.string.isRequired,
 }
 
-export function ViewRaw({ content }) {
-    return <pre>{content}</pre>
+export function ViewRaw({ content, onChange }) {
+    return (
+        <div>
+            <textarea onKeyDown={e => e.stopPropagation()} ref={ref => ViewRaw.input = ref}>{content}</textarea>
+            <Button onClick={(e) => onChange(ViewRaw.input.value)} text="Update"/>
+        </div>
+    )
 }
 
 ViewJSON.textView = true
@@ -58,10 +66,10 @@ ViewAuto.propTypes = {
     flow: React.PropTypes.object.isRequired,
 }
 
-export function ViewAuto({ message, flow }) {
+export function ViewAuto({ message, flow, onChange }) {
     const View = ViewAuto.findView(message)
     if (View.textView) {
-        return <ContentLoader message={message} flow={flow}><View content="" /></ContentLoader>
+        return <ContentLoader message={message} flow={flow}><View onChange={onChange} content="" /></ContentLoader>
     } else {
         return <View message={message} flow={flow} />
     }
diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx
index 9295f97c..d2c42a54 100644
--- a/web/src/js/components/FlowView/Messages.jsx
+++ b/web/src/js/components/FlowView/Messages.jsx
@@ -89,7 +89,7 @@ export class Request extends Component {
                     onChange={headers => updateFlow({ request: { headers } })}
                 />
                 <hr/>
-                <ContentView flow={flow} message={flow.request}/>
+                <ContentView flow={flow} message={flow.request} onChange={content => updateFlow({request: {content} })}/>
             </section>
         )
     }
@@ -128,7 +128,7 @@ export class Response extends Component {
                     onChange={headers => updateFlow({ response: { headers } })}
                 />
                 <hr/>
-                <ContentView flow={flow} message={flow.response}/>
+                <ContentView flow={flow} message={flow.response} onChange={content => updateFlow({response: {content} }) }/>
             </section>
         )
     }
diff --git a/web/src/js/components/common/MonacoEditor.jsx b/web/src/js/components/common/MonacoEditor.jsx
new file mode 100644
index 00000000..a0e8d58c
--- /dev/null
+++ b/web/src/js/components/common/MonacoEditor.jsx
@@ -0,0 +1,34 @@
+//not working
+import React, { Component, PropTypes } from 'react'
+
+export default class MonacoEditor extends Component {
+
+    constructor(props) {
+        super(props)
+    }
+
+    onLoad(){
+        window.MonacoEnvironment = {
+			getWorkerUrl: function(workerId, label) {
+				return 'worker-loader-proxy.js';
+			}
+		};
+		require.config({
+			paths: {
+				vs: '../release/min/vs'
+			}
+		});
+
+    }
+
+
+    render() {
+        return (
+            <div id="container"
+                 ref={ref => this.editor = ref}
+                 style="width:800px;height:600px;border:1px solid grey"
+                 onLoad={this.onLoad()}>
+            </div>
+        )
+    }
+}
-- 
cgit v1.2.3