OSDN Git Service

[TMP] UI of websocket messaging v0.3.0p0051
authorhimetani_cafe <fumifumi@yasunaga-lab.bio.kyutech.ac.jp>
Thu, 18 Feb 2016 15:17:15 +0000 (00:17 +0900)
committerhimetani_cafe <fumifumi@yasunaga-lab.bio.kyutech.ac.jp>
Thu, 18 Feb 2016 15:17:15 +0000 (00:17 +0900)
front-end/app/scripts/directives/Command.ts
front-end/app/style.scss
front-end/app/templates/command.html
front-end/app/templates/option.html
front-end/dist/bundle.js
front-end/dist/css/style.css
front-end/dist/templates/command.html
front-end/dist/templates/option.html

index c512640..583f4a7 100644 (file)
@@ -62,13 +62,15 @@ namespace app.directives {
         private files: any;
         private options: declares.IOption[];
         private dirs: any;
+        private messages: any;
 
         constructor(private APIEndPoint: services.APIEndPoint, private $scope: ng.IScope, private MyModal: services.MyModal, private WebSocket: services.WebSocket) {
             var controller = this;
 
             // Get OptionControlFile and bind it to $scope.options
             this.APIEndPoint
-            .getOptionControlFile('mrcImageNoiseAdd')
+            //.getOptionControlFile('mrcImageNoiseAdd')
+            .getOptionControlFile(this.name)
             .$promise
             .then(function(result) {
                 controller.options = result.info;
@@ -81,7 +83,7 @@ namespace app.directives {
                 controller.dirs = result.info;
             });
 
-            this.heading = "[" + this.index + "]: dcdFilePring";
+            this.heading = "[" + this.index + "]: dcdFilePrint";
             this.isOpen = true;
 
             // When call add button at executeController, all accordion close.
@@ -90,8 +92,7 @@ namespace app.directives {
             });
 
             this.WebSocket.on('console', function(msg) {
-                console.log('CONSOLE!!!');
-                console.log(msg);
+                controller.messages = msg.split('\n');
             });
 
         }
index 64f37c2..2b0855c 100644 (file)
@@ -2,7 +2,21 @@ $panel-bg: #eee;
 
 .accordion-toggle {
     cursor: pointer;
-  }
+}
+
+.option-box {
+    width: 20%
+}
+
+.console-head {
+    background-color: white;
+}
+
+.console-body {
+    background-color: white; 
+    height: 100%;
+}
+
 // Import libs
 // --------------------
 @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
index 8b29d4f..f27f787 100644 (file)
@@ -1,5 +1,5 @@
 <div>
-<uib-accordion-group heading="{{ctrl.heading}}" is-open="ctrl.isOpen" panel-class="panel-danger">
+<uib-accordion-group heading="{{ctrl.heading}}" is-open="ctrl.isOpen" panel-class="panel-primary">
     <uib-accordion-heading>
     <h4 class="panel-title">
         [{{ctrl.index}}: {{ctrl.name}}]
@@ -9,32 +9,45 @@
         </button>
     </h4>
     </uib-accordion-heading>
-    <code>
-        <form class="form-horizontal" ng-submit="ctrl.submit()">
-            <ul class="list-inline">
-                <li>
-                    <label class="control-label">
-                        workspace
-                    </label>
-                    <select class="form-control"
-                            ng-options="dir.name for dir in ctrl.dirs"
-                            ng-model="ctrl.workspace"
-                            ng-change="ctrl.reloadFiles()"
-                            required>
-                    </select>
-                </li>
-            </ul>
+    <div class="row">
+        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
+            <code>
+                <form class="form-horizontal" ng-submit="ctrl.submit()">
+                    <ul class="list-inline">
+                        <li>
+                            <label class="control-label">
+                                workspace
+                            </label>
+                            <select class="form-control"
+                                    ng-options="dir.name for dir in ctrl.dirs"
+                                    ng-model="ctrl.workspace"
+                                    ng-change="ctrl.reloadFiles()"
+                                    required>
+                            </select>
+                        </li>
+                    </ul>
 
-            <option info="o" files="ctrl.files"  ng-repeat="o in ctrl.options"></option>
-            <button type="submit" class="btn btn-default">
-                Execute
-            </button>
+                    <option info="o" files="ctrl.files"  ng-repeat="o in ctrl.options"></option>
 
-            <button type="button" ng-click="ctrl.debug()" class="btn btn-default">
-                Debug
-            </button>
+                    <button type="submit" class="btn btn-default">
+                        Execute
+                    </button>
 
-        </form>
-    </code>
+                    <button type="button" ng-click="ctrl.debug()" class="btn btn-default">
+                        Debug
+                    </button>
+
+                </form>
+            </code>
+        </div>
+        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
+            <h4>Message from console</h4>
+            <div class="panel-info">
+                <div class="panel-body console-body">
+                    <p ng-repeat="msg in ctrl.messages track by $index" class="lead">{{msg}}</p>
+                </div>
+            </div>
+        </div>
+    </div>
     </uib-accordion-group>
 </div>
index 082b66c..ecaf92c 100644 (file)
@@ -1,36 +1,36 @@
 <ul class="list-inline">
-<li ng-repeat="arg in ctrl.info.arg">
-    <span ng-switch="arg.formType">
-        <span ng-switch-when="number">
-            <label class="control-label">
-                {{arg.argName}}
-            </label>
-            <input type="number"
-                   class="form-control"
-                   ng-model="arg.input"
-                   ng-required="ctrl.info.optionProperties">
+    <li class="option-box" ng-repeat="arg in ctrl.info.arg">
+        <span ng-switch="arg.formType">
+            <span ng-switch-when="number">
+                <label class="control-label">
+                    {{arg.argName}}
+                </label>
+                <input type="number"
+                       class="form-control"
+                       ng-model="arg.input"
+                       ng-required="ctrl.info.optionProperties">
 
-        </span>
-        <span ng-switch-when="select">
-            <label class="control-label">
-                {{arg.argName}}
-            </label>
-            <select class="form-control"
-                    ng-options="file.name for file in ctrl.files"
-                    ng-model="arg.input"
-                    ng-required="ctrl.info.optionProperties">
-            </select>
-        </span>
+            </span>
+            <span ng-switch-when="select">
+                <label class="control-label">
+                    {{arg.argName}}
+                </label>
+                <select class="form-control"
+                        ng-options="file.name for file in ctrl.files"
+                        ng-model="arg.input"
+                        ng-required="ctrl.info.optionProperties">
+                </select>
+            </span>
 
-        <span ng-switch-when="text">
-            <label class="control-label">
-                {{arg.argName}}
-            </label>
-            <input type="text"
-                   class="form-control"
-                   ng-model="arg.input"
-                   ng-required="ctrl.info.optionProperties">
+            <span ng-switch-when="text">
+                <label class="control-label">
+                    {{arg.argName}}
+                </label>
+                <input type="text"
+                       class="form-control"
+                       ng-model="arg.input"
+                       ng-required="ctrl.info.optionProperties">
+            </span>
         </span>
-    </span>
-</li>
+    </li>
 </ul>
index c413882..380e311 100644 (file)
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
                        this.WebSocket = WebSocket;
                        var controller = this;
                        this.APIEndPoint
-                           .getOptionControlFile('mrcImageNoiseAdd')
+                           .getOptionControlFile(this.name)
                            .$promise
                            .then(function (result) {
                            controller.options = result.info;
                            .then(function (result) {
                            controller.dirs = result.info;
                        });
-                       this.heading = "[" + this.index + "]: dcdFilePring";
+                       this.heading = "[" + this.index + "]: dcdFilePrint";
                        this.isOpen = true;
                        this.$scope.$on('close', function () {
                            controller.isOpen = false;
                        });
                        this.WebSocket.on('console', function (msg) {
-                           console.log('CONSOLE!!!');
-                           console.log(msg);
+                           controller.messages = msg.split('\n');
                        });
                    }
                    CommandController.prototype.submit = function () {
index ab86150..3299080 100644 (file)
@@ -2,6 +2,16 @@
 .accordion-toggle {
   cursor: pointer; }
 
+.option-box {
+  width: 20%; }
+
+.console-head {
+  background-color: white; }
+
+.console-body {
+  background-color: white;
+  height: 100%; }
+
 /*!
  * Bootstrap v3.3.6 (http://getbootstrap.com)
  * Copyright 2011-2015 Twitter, Inc.
index 8b29d4f..f27f787 100644 (file)
@@ -1,5 +1,5 @@
 <div>
-<uib-accordion-group heading="{{ctrl.heading}}" is-open="ctrl.isOpen" panel-class="panel-danger">
+<uib-accordion-group heading="{{ctrl.heading}}" is-open="ctrl.isOpen" panel-class="panel-primary">
     <uib-accordion-heading>
     <h4 class="panel-title">
         [{{ctrl.index}}: {{ctrl.name}}]
@@ -9,32 +9,45 @@
         </button>
     </h4>
     </uib-accordion-heading>
-    <code>
-        <form class="form-horizontal" ng-submit="ctrl.submit()">
-            <ul class="list-inline">
-                <li>
-                    <label class="control-label">
-                        workspace
-                    </label>
-                    <select class="form-control"
-                            ng-options="dir.name for dir in ctrl.dirs"
-                            ng-model="ctrl.workspace"
-                            ng-change="ctrl.reloadFiles()"
-                            required>
-                    </select>
-                </li>
-            </ul>
+    <div class="row">
+        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
+            <code>
+                <form class="form-horizontal" ng-submit="ctrl.submit()">
+                    <ul class="list-inline">
+                        <li>
+                            <label class="control-label">
+                                workspace
+                            </label>
+                            <select class="form-control"
+                                    ng-options="dir.name for dir in ctrl.dirs"
+                                    ng-model="ctrl.workspace"
+                                    ng-change="ctrl.reloadFiles()"
+                                    required>
+                            </select>
+                        </li>
+                    </ul>
 
-            <option info="o" files="ctrl.files"  ng-repeat="o in ctrl.options"></option>
-            <button type="submit" class="btn btn-default">
-                Execute
-            </button>
+                    <option info="o" files="ctrl.files"  ng-repeat="o in ctrl.options"></option>
 
-            <button type="button" ng-click="ctrl.debug()" class="btn btn-default">
-                Debug
-            </button>
+                    <button type="submit" class="btn btn-default">
+                        Execute
+                    </button>
 
-        </form>
-    </code>
+                    <button type="button" ng-click="ctrl.debug()" class="btn btn-default">
+                        Debug
+                    </button>
+
+                </form>
+            </code>
+        </div>
+        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
+            <h4>Message from console</h4>
+            <div class="panel-info">
+                <div class="panel-body console-body">
+                    <p ng-repeat="msg in ctrl.messages track by $index" class="lead">{{msg}}</p>
+                </div>
+            </div>
+        </div>
+    </div>
     </uib-accordion-group>
 </div>
index 082b66c..ecaf92c 100644 (file)
@@ -1,36 +1,36 @@
 <ul class="list-inline">
-<li ng-repeat="arg in ctrl.info.arg">
-    <span ng-switch="arg.formType">
-        <span ng-switch-when="number">
-            <label class="control-label">
-                {{arg.argName}}
-            </label>
-            <input type="number"
-                   class="form-control"
-                   ng-model="arg.input"
-                   ng-required="ctrl.info.optionProperties">
+    <li class="option-box" ng-repeat="arg in ctrl.info.arg">
+        <span ng-switch="arg.formType">
+            <span ng-switch-when="number">
+                <label class="control-label">
+                    {{arg.argName}}
+                </label>
+                <input type="number"
+                       class="form-control"
+                       ng-model="arg.input"
+                       ng-required="ctrl.info.optionProperties">
 
-        </span>
-        <span ng-switch-when="select">
-            <label class="control-label">
-                {{arg.argName}}
-            </label>
-            <select class="form-control"
-                    ng-options="file.name for file in ctrl.files"
-                    ng-model="arg.input"
-                    ng-required="ctrl.info.optionProperties">
-            </select>
-        </span>
+            </span>
+            <span ng-switch-when="select">
+                <label class="control-label">
+                    {{arg.argName}}
+                </label>
+                <select class="form-control"
+                        ng-options="file.name for file in ctrl.files"
+                        ng-model="arg.input"
+                        ng-required="ctrl.info.optionProperties">
+                </select>
+            </span>
 
-        <span ng-switch-when="text">
-            <label class="control-label">
-                {{arg.argName}}
-            </label>
-            <input type="text"
-                   class="form-control"
-                   ng-model="arg.input"
-                   ng-required="ctrl.info.optionProperties">
+            <span ng-switch-when="text">
+                <label class="control-label">
+                    {{arg.argName}}
+                </label>
+                <input type="text"
+                       class="form-control"
+                       ng-model="arg.input"
+                       ng-required="ctrl.info.optionProperties">
+            </span>
         </span>
-    </span>
-</li>
+    </li>
 </ul>