basic changes finished

4 files changed, 58 insertions, 14 deletions

diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 0fa96963e..ca770f897 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -89,9 +89,9 @@ const _scriptingGlobals: { [name: string]: any } = {};
 let scriptingGlobals: { [name: string]: any } = _scriptingGlobals;
 
 function Run(script: string | undefined, customParams: string[], diagnostics: any[], originalScript: string, options: ScriptOptions): CompileResult {
-    const errors = diagnostics.some(diag => diag.category === ts.DiagnosticCategory.Error);
-    if ((options.typecheck !== false && errors) || !script) {
-        return { compiled: false, errors: diagnostics };
+    const errors = diagnostics.filter(diag => diag.category === ts.DiagnosticCategory.Error);
+    if ((options.typecheck !== false && errors.length) || !script) {
+        return { compiled: false, errors };
     }
 
     const paramNames = Object.keys(scriptingGlobals);
@@ -273,6 +273,7 @@ export function CompileScript(script: string, options: ScriptOptions = {}): Comp
 
     const result = Run(outputText, paramNames, diagnostics, script, options);
 
+
     if (options.globals) {
         Scripting.resetScriptingGlobals();
     }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ff35593fe..f30d17d94 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,7 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
     faFileAlt, faStickyNote, faArrowDown, faBullseye, faFilter, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faChevronRight, faClone, faCloudUploadAlt, faCommentAlt, faCut, faEllipsisV, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight,
-    faMusic, faObjectGroup, faPause, faMousePointer, faPenNib, faFileAudio, faPen, faEraser, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt, faHighlighter, faMicrophone, faCompressArrowsAlt, faPhone, faStamp, faClipboard, faVideo,
+    faMusic, faObjectGroup, faPause, faMousePointer, faPenNib, faFileAudio, faPen, faEraser, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt, faHighlighter, faMicrophone, faCompressArrowsAlt, faPhone, faStamp, faClipboard, faVideo, faTerminal,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
@@ -57,7 +57,7 @@ export class MainView extends React.Component {
     @observable private _panelHeight: number = 0;
     @observable private _flyoutTranslate: boolean = true;
     @observable public flyoutWidth: number = 250;
-    private get darkScheme() { return BoolCast(Cast(this.userDoc.activeWorkspace, Doc, null)?.darkScheme); }
+    private get darkScheme() { return BoolCast(Cast(this.userDoc.activeWorkspace, Doc, null) ?.darkScheme); }
 
     @computed private get userDoc() { return Doc.UserDoc(); }
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
@@ -148,6 +148,7 @@ export class MainView extends React.Component {
         library.add(faPhone);
         library.add(faClipboard);
         library.add(faStamp);
+        library.add(faTerminal);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
@@ -389,7 +390,7 @@ export class MainView extends React.Component {
     mainContainerXf = () => new Transform(0, -this._buttonBarHeight, 1);
 
     @computed get flyout() {
-        const sidebarContent = this.userDoc?.sidebarContainer;
+        const sidebarContent = this.userDoc ?.sidebarContainer;
         if (!(sidebarContent instanceof Doc)) {
             return (null);
         }
@@ -505,7 +506,7 @@ export class MainView extends React.Component {
         return new Transform(-translateX, -translateY, 1 / scale);
     }
     @computed get docButtons() {
-        const expandingBtns = Doc.UserDoc()?.expandingButtons;
+        const expandingBtns = Doc.UserDoc() ?.expandingButtons;
         if (expandingBtns instanceof Doc) {
             return <div className="mainView-docButtons" ref={this._docBtnRef}
                 style={{ height: !expandingBtns.linearViewIsExpanded ? "42px" : undefined }} >
diff --git a/src/client/views/ScriptBox.scss b/src/client/views/ScriptBox.scss
index c67295c90..b91a36c1f 100644
--- a/src/client/views/ScriptBox.scss
+++ b/src/client/views/ScriptBox.scss
@@ -4,6 +4,8 @@
     display: flex;
     flex-direction: column;
     pointer-events: all;
+    background-color: rgb(241, 239, 235);
+    padding: 10px;
 }
 
 .scriptBox-toolbar {
@@ -15,4 +17,9 @@
     height: 100%;
     box-sizing: border-box;
     resize: none;
+    padding: 7px;
+}
+
+.scriptBox-button {
+    width: 50%
 }
\ No newline at end of file
diff --git a/src/client/views/ScriptBox.tsx b/src/client/views/ScriptBox.tsx
index cafa09f41..48f4c8163 100644
--- a/src/client/views/ScriptBox.tsx
+++ b/src/client/views/ScriptBox.tsx
@@ -7,7 +7,7 @@ import { OverlayView } from "./OverlayView";
 import { DocumentIconContainer } from "./nodes/DocumentIcon";
 import { Opt, Doc } from "../../new_fields/Doc";
 import { emptyFunction } from "../../Utils";
-import { ScriptCast } from "../../new_fields/Types";
+import { ScriptCast, StrCast } from "../../new_fields/Types";
 import { CompileScript } from "../util/Scripting";
 import { ScriptField } from "../../new_fields/ScriptField";
 import { DragManager } from "../util/DragManager";
@@ -17,6 +17,8 @@ import { DocAnnotatableComponent } from "./DocComponent";
 import { makeInterface } from "../../new_fields/Schema";
 import { documentSchema } from "../../new_fields/documentSchemas";
 import { CompileResult } from "../northstar/model/idea/idea";
+import { red } from "colors";
+import { forEach } from "typescript-collections/dist/lib/arrays";
 
 export interface ScriptBoxProps {
     onSave?: (text: string, onError: (error: string) => void) => void;
@@ -37,9 +39,18 @@ export class ScriptBox extends DocAnnotatableComponent<FieldViewProps & ScriptBo
     @observable
     private _scriptText: string;
 
+    @observable
+    private _errorMessage: string;
+
     constructor(props: ScriptBoxProps) {
         super(props);
         this._scriptText = props.initialText || "";
+        this._errorMessage = "";
+    }
+
+    @action
+    componentDidMount() {
+        this._scriptText = StrCast(this.props.Document.documentText) || this.props.initialText || "";
     }
 
     @action
@@ -48,8 +59,10 @@ export class ScriptBox extends DocAnnotatableComponent<FieldViewProps & ScriptBo
     }
 
     @action
-    onError = (error: string) => {
-        console.log(error);
+    onError = (error: any) => {
+        for (const entry of error) {
+            this._errorMessage = this._errorMessage + "   " + entry.messageText;
+        }
     }
 
     overlayDisposer?: () => void;
@@ -64,15 +77,35 @@ export class ScriptBox extends DocAnnotatableComponent<FieldViewProps & ScriptBo
         this.overlayDisposer && this.overlayDisposer();
     }
 
+    @action
     onCompile = () => {
         const result = CompileScript(this._scriptText, {});
+        this._errorMessage = "";
+        if (result.compiled) {
+            this._errorMessage = "";
+            this.props.Document.data = new ScriptField(result);
+        }
+        else {
+            this.onError(result.errors);
+        }
+        this.props.Document.documentText = this._scriptText;
+    }
+
+    @action
+    onRun = () => {
+        const result = CompileScript(this._scriptText, {});
+        this._errorMessage = "";
         if (result.compiled) {
-            // this automatically saves
+            result.run({}, (err: any) => {
+                this._errorMessage = "";
+                this.onError(err);
+            });
             this.props.Document.data = new ScriptField(result);
         }
         else {
-            // error message
+            this.onError(result.errors);
         }
+        this.props.Document.documentText = this._scriptText;
     }
 
     render() {
@@ -93,11 +126,13 @@ export class ScriptBox extends DocAnnotatableComponent<FieldViewProps & ScriptBo
         return (
             <div className="scriptBox-outerDiv">
                 <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
-                    <textarea className="scriptBox-textarea" onChange={this.onChange} value={this._scriptText} onFocus={onFocus} onBlur={onBlur}></textarea>
+                    <textarea className="scriptBox-textarea" placeholder="write your script here" onChange={this.onChange} value={this._scriptText} onFocus={onFocus} onBlur={onBlur}></textarea>
+                    <div className="errorMessage">{this._errorMessage}</div>
                     <div style={{ background: "beige" }} >{params}</div>
                 </div>
                 <div className="scriptBox-toolbar">
-                    <button onPointerDown={e => { this.onCompile(); e.stopPropagation(); }}>Compile</button>
+                    <button className="scriptBox-button" onPointerDown={e => { this.onCompile(); e.stopPropagation(); }}>Compile</button>
+                    <button className="scriptBox-button" onPointerDown={e => { this.onRun(); e.stopPropagation(); }}>Run</button>
                 </div>
             </div>
         );