unageanu-jiji 0.1.0

data/html/js/rt-setting-page.js

@@ -0,0 +1,122 @@
+
+// ネームスペース
+namespace( "fx.ui.pages" )
+
+// バックテスト新規作成
+fx.ui.pages.RtSettingPage = function() {
+  this.elementId = null // @Inject
+  this.processServiceStub = null; //@Inject
+
+  this.agentSelector = null; //@Inject
+  this.dialog = null; // @Inject
+  this.topicPath = null; // @Inject
+  this.tradeEnable = null; // @Inject
+
+  // ボタン
+  var self = this;
+  this.applyButton = new util.Button("rt-setting__ok", "apply", function() {
+    self.ok();
+  });
+  this.applyButton.setEnable( true );
+}
+fx.ui.pages.RtSettingPage.prototype = {
+
+  /**
+   * このページから画面を移動する際に呼び出される。
+   * 戻り値としてfalseを返すと遷移をキャンセルする。
+   */
+  from : function(toId) {
+    // ページを非表示
+    document.getElementById(this.elementId).style.display = "none";
+    this.topicPath.set( "" );
+    return true;
+  },
+  /**
+   * このページに画面を移動すると呼び出される。
+   */
+  to : function( fromId ) {
+    // ページを表示
+    document.getElementById(this.elementId).style.display = "block";
+
+    var msg = document.getElementById("rt-setting_msg");
+    msg.innerHTML = "";
+    msg.style.display = "none";
+
+    this.topicPath.set( "リアルトレード:設定" );
+
+    // 既存の設定情報を取得
+    this.reloadAgents();
+  },
+  initialize: function( ) {
+    this.agentSelector.initialize();
+  },
+  reloadAgents : function() {
+    var self = this;
+    this.getSetting( function( data ) {
+      document.getElementById("rt-setting_trade-enable").checked =
+        (data["trade_enable"] == true );
+      self.agentSelector.setAgents( data["agents"] );
+    }, null ); // TODO
+  },
+
+  ok: function(){
+
+    // エラーチェック
+    if ( this.agentSelector.hasError() ) {
+      this.dialog.show( "warn", {
+        message : "エージェントの設定に問題があります。",
+        buttons : [
+          { type:"ok" }
+        ]
+      } );
+      return;
+    }
+    var agents = this.agentSelector.getAgents();
+
+    // ダイアログを開く
+    var self = this;
+    this.dialog.show( "input", {
+      message : "設定を反映します。よろしいですか?<br/>",
+      buttons : [
+        { type:"ok", action: function(dialog){
+          var enable = document.getElementById("rt-setting_trade-enable").checked;
+          self.updateSetting( enable, agents, function() {
+            // 更新時刻を表示 // TODO
+            var dateStr = util.formatDate( new Date() );
+            var msg = document.getElementById("rt-setting_msg");
+            msg.innerHTML = "※設定を反映しました。( " + dateStr + " )";
+            msg.style.display = "block";
+
+            // 自動更新設定を更新
+            self.tradeEnable.set( enable );
+
+          }, null ); //TODO
+        } },
+        { type:"cancel" }
+      ]
+    } );
+  },
+
+  /**
+   * 設定値を取得する。
+   * @param {Function} success 成功時のコールバック
+   * @param {Function} fail 失敗時のコールバック
+   */
+  getSetting : function( success, fail ) {
+    this.processServiceStub.get( "rmt", success, fail );
+  },
+
+  /**
+   * 設定値を反映する
+   * @param {Boolean} tradeEnable 取引を行なうか
+   * @param {Object} agents エージェントとプロパティ一覧
+   * @param {Function} success 成功時のコールバック
+   * @param {Function} fail 失敗時のコールバック
+   */
+  updateSetting : function( tradeEnable, agents, success, fail ) {
+    this.processServiceStub.set( "rmt", {
+      "trade_enable": tradeEnable,
+      "agents": agents
+    }, success, fail );
+  }
+}

data/html/js/sidebar.js

@@ -0,0 +1,246 @@
+// ネームスペース
+namespace( "fx.ui" )
+
+fx.ui.SideBar = function() {
+
+  this.elementId = null // @Inject
+  this.processServiceStub = null; //@Inject
+  this.pageManager = null; //@Inject
+  this.dialog = null; // @Inject
+
+  this.menu = new util.MenuBar( "menu", "left", "sidebar" );
+
+  this.process = []; // プロセス一覧
+  this.runnings = []; // 現在実行中のプロセス。
+
+  // 自動更新するためのタイマー
+  this.autoUpdate = null;
+}
+fx.ui.SideBar.prototype = {
+
+  // 初期化する
+  initialize : function(defaultPage) {
+
+    var self = this;
+
+    // メニュー
+    this.menu.pageManager = this.pageManager;
+    this.menu.initialize( defaultPage, function() {
+      self.to( this.id );
+    } );
+
+    // サーバーからプロセス一覧を取得
+    this.processServiceStub.list_test( function(list) {
+      self.process = list;
+
+      var container = document.getElementById( self.elementId );
+      self.runnings = [];
+      for ( var i=0,n=list.length; i<n; i++ ) {
+        var div = self.createProcessUI( list[i] );
+        container.appendChild( div );
+        if ( list[i].state == "RUNNING" ||  list[i].state == "WAITING" ) {
+          self.runnings.push( list[i].id );
+        }
+        self.setProgress( list[i] );
+      }
+
+      // 定期更新タイマーを起動
+      self.autoUpdate = new util.Timer( 5*1000, function(){
+        self.updateProcessList();
+      }, false );
+      self.autoUpdate.start();
+    }, function(){} ); // TODO
+  },
+  to : function( page, params ) {
+    var m = page.match( /sidebar\_(.*)/ );
+    if ( m ) {
+      var m2 = m[1].match( /result_(.*)/ );
+      var m3 = m[1].match( /agent_edit_(.*)/ );
+      if ( m2 ) {
+        if ( m2[1] == "rmt" ) {
+            this.menu.to( "result", {
+              id:m2[1],
+              menuId: m[1]
+            } );
+        } else{
+          for ( var i=0,n=this.process.length; i<n; i++ ) {
+            if ( m2[1] == this.process[i].id ) {
+              this.menu.to( "result", {
+                id:m2[1],
+                menuId: m[1],
+                name: this.process[i].name,
+                start: this.process[i].start_date,
+                end: this.process[i].end_date
+              } );
+            }
+          }
+        }
+      } else if ( m3 ) {
+         this.menu.to( "agent_edit", {
+           id:m3[1],
+           menuId: m[1]
+         } );
+      } else {
+        this.menu.to( m[1], params );
+      }
+    }
+    // UIを更新
+    for ( var i=0,n=this.process.length; i<n; i++ ) {
+      var div = document.getElementById( "process_" + this.process[i].id);
+      if ( !div ) { continue; }
+      if ( m2 && this.process[i].id == m2[1] ) {
+         div.className = "process_selected"
+      } else {
+         div.className = "process"
+      }
+    }
+  },
+  // プロセス一覧を更新する
+  updateProcessList : function() {
+    if ( this.runnings.length <= 0 ) return;
+    var self = this;
+    this.processServiceStub.status( this.runnings, function(list) {
+      var map = {};
+      for ( var i=0,n=list.length;i<n;i++ ) {
+        map[list[i].id] = list[i];
+      }
+      var tmp = [];
+      for ( var i=0,n=self.runnings.length;i<n;i++ ) {
+        var p = map[self.runnings[i]];
+        if (!p // 通信中に追加された場合、nullになる。
+            || (p.state == "RUNNING" && p.progress < 100)
+            || (p.state == "WAITING")   ) {
+          tmp.push( self.runnings[i] );
+        }
+        if ( p ) {
+          self.setProgress( p );
+        }
+      }
+      self.runnings = tmp;
+
+      if ( self.runnings.length <= 0 && self.autoUpdate ) {
+        self.autoUpdate.stop();
+      } else {
+        self.autoUpdate.start();
+      }
+    }, function(){} ); // TODO
+  },
+
+  remove : function( processId ) {
+    var self = this;
+    this.dialog.show( "input", {
+        message : "バックテストを削除します。よろしいですか?",
+        buttons : [
+           { type:"ok", action: function(dialog){
+             self.processServiceStub.delete_test( processId, function(p) {
+               var tmp = [];
+               for ( var i=0,n=self.runnings.length;i<n;i++ ) {
+                 if ( self.runnings[i] != processId ) tmp.push( self.runnings[i] );
+               }
+               self.runnings = tmp;
+
+               var div = document.getElementById( "process_" + processId);
+               div.parentNode.removeChild(div);
+
+             }, function(){} ); // TODO
+           } },
+           { type:"cancel" }
+        ]
+    } );
+  },
+
+  add : function( processId ){
+    var self = this;
+    this.processServiceStub.get( processId, function(p) {
+      var container = document.getElementById( self.elementId );
+      var div = self.createProcessUI( p );
+      if ( container.firstChild ) {
+         container.insertBefore(div, container.firstChild);
+      } else {
+        container.appendChild( div );
+      }
+      self.setProgress( p );
+
+	    // 先頭に追加
+	    self.process.push( p );
+	    self.runnings.push( p.id )
+	    self.autoUpdate.start(); // 定期更新を再開
+    }, function(){} ); // TODO
+  },
+
+  // テストの進捗を更新する。
+  setProgress : function( p ) {
+    // 背景画像を移動
+    // 進捗が100以上ならステータスバーは非表示
+    var e = document.getElementById( "process_" + p.id + "_progress" );
+    var state = document.getElementById( "process_" + p.id + "_state" );
+    var name = document.getElementById( "process_" + p.id + "_name" );
+
+    if ( p.state == "RUNNING" && p.progress < 100 ) {
+      e.style.display = "block";
+      var value = document.getElementById( "process_" + p.id + "_progress_value" );
+      value.innerHTML = p.progress + "%";
+      var bar = document.getElementById( "process_" + p.id + "_progress_bar" );
+      bar.style.backgroundPosition = (-180+Number(p.progress)) + "px 0px";
+      state.innerHTML = this.stateToDisplayName( p.state);
+    } else if ( p.state == "WAITING" ) {
+      e.style.display = "none";
+      state.innerHTML = this.stateToDisplayName( p.state );
+    } else {
+      e.style.display = "none";
+      state.innerHTML = this.stateToDisplayName( p.state == "RUNNING" ? "FINISHED" : p.state );
+      // 実行結果へのリンクを有効化する。
+      name.innerHTML = '<a href="javascript:fx.app.sideBar.to( \'sidebar_result_' + p.id + '\' );">' + p.name + "</a>";
+    }
+  },
+
+  /**
+   * プロセスの表示用UIを作成する
+   */
+  createProcessUI : function( process ) {
+    var div = document.createElement("div");
+    div.className = "process";
+    div.id = "process_" + process.id;
+    div.innerHTML = fx.template.Templates.sidebar.process.evaluate({
+       id : process.id,
+       name : process.name,
+       date : util.formatDate(new Date(process.create_date*1000)),
+       state : this.stateToDisplayName( process.state)
+    });
+    return div;
+  },
+  /**
+   * 状態の文字列を表示用の名前に変換する。
+   */
+  stateToDisplayName : function(state) {
+    if( state == "WAITING" ) {
+      return "待機中";
+    } else if( state == "RUNNING" ) {
+      return "実行中";
+    } else if( state == "CANCELED" ) {
+      return "中止";
+    } else if( state == "FINISHED" ) {
+      return "完了";
+    } else if( state == "ERROR_END" ) {
+      return "<span class='error'>エラー終了</span>";
+    }
+  }
+}
+
+// トレード状態表示
+fx.ui.TradeEnable = function(elementId){
+  this.elementId = elementId;  //@Inject
+  this.processServiceStub = null; //@Inject
+}
+fx.ui.TradeEnable.prototype = {
+  init: function() {
+    var self = this;
+    this.processServiceStub.get( "rmt", function( p ) {
+       self.set( p["trade_enable"] );
+    }, null ); // TODO
+  },
+  set: function( enable ) {
+     document.getElementById( this.elementId ).src =
+       enable ? "./img/auto_trade_on.gif" : "./img/auto_trade_off.gif";
+  }
+}

data/html/js/templates.js

@@ -0,0 +1,208 @@
+
+// ネームスペース
+namespace( "fx.template" )
+
+fx.template.Templates = {
+  common: {
+    loading : '<img src="./img/loading.gif" alt="loading.." />',
+    date: {
+      d:"日", m:"月", y:"年",
+      h:"時間", mm: "分", s:"秒"
+    },
+    button : {
+      add : "追加",
+      del : "削除",
+      ok  : "OK",
+      cancel: "キャンセル"
+    }
+  },
+  agentEditor: {
+    topicPath: {
+      agent: "エージェント:エージェントの作成/編集",
+      sharedLib: "エージェント:共有ライブラリの作成/編集"
+    },
+    add : {
+      error : new Template(
+        '<div class="warn_msg">※#{error}</div>'
+      ),
+      body : new Template(
+        "追加するファイル名を入力してください。<br/>" +
+        '<form action="javascript:void(0);" name="file_name_input_form">' +
+        '  <input id="file_name_input" name="file_name_input" type="text"' +
+        '    style="width:360px;margin-top:10px;" value="#{text}" />'+
+        '</form>'),
+      errormsgs : {
+        no          : "ファイル名が入力されていません。",
+        illegalChar : "ファイル名が不正です。半角英数字、および「-_*+-#![]()?\.」のみ使用可能です。",
+        conflict    : "ファイル名が重複しています。"
+      }
+    },
+    remove: {
+      body : "ファイルを削除します。削除したファイルは復元できません。<br/>よろしいですか?"
+    },
+    defaultFileName: "( ファイルを選択してください。 )",
+    fileList : {
+      column : {
+        name : "名前",
+        update : "最終更新日時"
+      }
+    }
+  },
+  agentPropertyEditor: {
+    none: new Template(
+      'エージェントを選択してください。' ),
+    selected: new Template(
+      '<form id="agent-property-editor-form_#{id}" name="agent-property-editor-form_#{id}" action="javascript:return false;">' +
+      '  <div class="item">'+
+      '    <div class="title">名前</div>' +
+      '    <div class="value"><input name="agent_name" id="agent_name" type="text" value="#{name}"/></div>'+
+      '  <div class="property-problem" id="agent_name_problem"></div>' +
+      '  </div>' +
+      '  <div class="item">'+
+      '    <div class="title">クラス</div>' +
+      '    <div class="value">' +
+      '     #{class_name}<pre>#{desc}</pre>'+
+      '    </div>'+
+      '  </div>' +
+      '  <div class="item">'+
+      '    <div class="title">プロパティ</div>' +
+      '    <div class="value"><div class="property-container">' +
+      '     #{properties}' +
+      '    </div></div>'+
+      '  </div>' +
+      '</form>' ),
+      selectedReadOnly: new Template(
+          '  <div class="item">'+
+          '    <div class="title">名前</div>' +
+          '    <div class="value">#{name}</div>'+
+          '  </div>' +
+          '  <div class="item">'+
+          '    <div class="title">クラス</div>' +
+          '    <div class="value">' +
+          '     #{class_name}<pre>#{desc}</pre>'+
+          '    </div>'+
+          '  </div>' +
+          '  <div class="item">'+
+          '    <div class="title">プロパティ</div>' +
+          '    <div class="value"><div class="property-container">' +
+          '     #{properties}' +
+          '    </div></div>'+
+          '  </div>'  ),
+    property: new Template(
+      '<div class="propery">'+
+      '  <div class="property-description">#{name}</div>' +
+      '  <input class="property-input" name="property_#{id}" id="property_#{id}"  type="text" value="#{default}" />'+
+      '  <div class="property-problem" id="property_#{id}_problem"></div>' +
+      '</div>' ),
+    propertyReadOnly: new Template(
+      '<div class="propery">'+
+      '  <div class="property-description">#{name}</div>' +
+      '  <div class="property-value">#{default} </div>'+
+      '</div>' )
+  },
+  sidebar : {
+    process : new Template (
+      '  <div class="name"><span id="process_#{id}_name">#{name} </span><span class="process_delete"><a href="javascript:fx.app.sideBar.remove(\'#{id}\');" id="process_#{id}_delete">[削除]</a></span></div>' +
+      '  <div class="detail">'+
+      '    <div class="date">#{date}</div>' +
+      '    <div class="state" id="process_#{id}_state">状態:#{state}</div>' +
+      '    <div class="progress" id="process_#{id}_progress">' +
+      '      <div class="progress_bar" id="process_#{id}_progress_bar"></div>' +
+      '      <div class="progress_value" id="process_#{id}_progress_value"></div>' +
+      '      <div class="breaker"></div>' +
+      '    </div>' +
+      '  </div>')
+  },
+  btcreate : {
+    dateSummary : {
+      notSelect: "※開始日、終了日を選択して下さい。",
+      selected: new Template('<table class="values small" style="width:360px;" cellspacing="0" cellpadding="0">' +
+      '            <tr><td class="label small" >期間</td><td class="value">#{range}</td></tr>' +
+      '            <tr><td class="label small" >推定所要時間</td><td class="value">#{time} </td></tr>' +
+      '        </table>'),
+      error: "<span class='problem'>※開始日、終了日の設定が不正です。</span>"
+    }
+  },
+  submenu : {
+    info : {
+      info : new Template(
+          '  <table class="values large" cellspacing="0" cellpadding="0">' +
+          '     <tr><td class="label large">名前</td><td class="value">#{name}</td></tr>' +
+          '     <tr><td class="label large">期間</td><td class="value">#{range}</td></tr>' +
+          '     <tr><td class="label large">メモ</td><td class="value"><pre>#{memo}</pre></td></tr>' +
+          '  </table>'),
+      rmtInfo : new Template(
+          '  <table class="values large" cellspacing="0" cellpadding="0">' +
+          '     <tr><td class="label large">自動取引</td><td class="value">#{enable}</td></tr>' +
+          '  </table>')
+    },
+    trade : {
+      summary : new Template (
+          '<div id="summary" style="margin-top:10px;">'+
+          '  <table class="values large" cellspacing="0" cellpadding="0">' +
+          '     <tr><td class="label large">損益合計</td><td class="value">#{totalProfitOrLoss}</td></tr>' +
+          '     <tr><td class="label large">累計スワップ</td><td class="value">#{totalSwap}</td></tr>' +
+          '     <tr><td class="label large">総取引回数/約定済み</td><td class="value">#{total}/#{commited}</td></tr>' +
+          '  </table>' +
+          '  <div>' +
+          '     <div style="float:left;width:300px;">' +
+          '        <div class="category">種類</div>'+
+          '        <table class="values small" cellspacing="0" cellpadding="0">' +
+          '            <tr><td class="label small" >売</td><td class="value">#{sell}</td></tr>' +
+          '            <tr><td class="label small" >買</td><td class="value">#{buy}</td></tr>' +
+          '        </table>' +
+          '        <div class="category">勝敗</div>'+
+          '        <table class="values small" cellspacing="0" cellpadding="0">' +
+          '            <tr><td class="label small" >勝ち/負け/引分</td><td class="value">#{win}/#{lose}/#{draw}</td></tr>' +
+          '            <tr><td class="label small" >勝率</td><td class="value">#{winRate}%</td></tr>' +
+          '        </table>' +
+          '        <div class="category">通貨ペア</div>' +
+          '        <table class="values small" cellspacing="0" cellpadding="0">' +
+          '            #{pair}' +
+          '        </table>' +
+          '     </div>' +
+          '     <div style="float:right;width:300px;">' +
+          '        <div class="category">損益</div>'+
+//          '        <div class="item"><div class="label_2">最大ドローダウン</div><div class="value">#{drawdown}</div><div class="breaker"></div></div>'+
+          '        <table class="values small" cellspacing="0" cellpadding="0">' +
+          '            <tr><td class="label small" >最大利益</td><td class="value">#{maxProfit}</td></tr>' +
+          '            <tr><td class="label small" >最大損失</td><td class="value">#{maxLoss}</td></tr>' +
+          '            <tr><td class="label small" >平均損益</td><td class="value">#{avgProfitOrLoss}</td></tr>' +
+          '            <tr><td class="label small" >平均利益</td><td class="value">#{avgProfit}</td></tr>' +
+          '            <tr><td class="label small" >平均損失</td><td class="value">#{avgLoss}</td></tr>' +
+          '            <tr><td class="label small" >損益率</td><td class="value">#{profitRatio}</td></tr>' +
+          '        </table>' +
+          '        <div class="category">取引量</div>'+
+          '        <table class="values small" cellspacing="0" cellpadding="0">' +
+          '            <tr><td class="label small" >最大取引量</td><td class="value">#{maxSize}</td></tr>' +
+          '            <tr><td class="label small" >最小取引量</td><td class="value">#{minSize}</td></tr>' +
+          '        </table>' +
+          '        <div class="category">建玉保有期間</div>'+
+          '        <table class="values small" cellspacing="0" cellpadding="0">' +
+          '            <tr><td class="label small" >最大保有期間</td><td class="value">#{maxRange}分</td></tr>' +
+          '            <tr><td class="label small" >最小保有期間</td><td class="value">#{minRange}分</td></tr>' +
+          '            <tr><td class="label small" >平均保有期間</td><td class="value">#{avgRange}分</td></tr>' +
+          '        </table>' +
+          '     </div>' +
+          '   <div class="breaker"></div></div>' +
+          '</div>'),
+      pair : new Template (
+          '<tr><td class="label small" >#{pair}</td><td class="value">#{value}</td></tr>' )
+    },
+    graph : {
+      agent : new Template(
+          '  <div class="agent">#{agentName}</div>'+
+          '  <table class="graphs" cellspacing="0" cellpadding="0">' +
+          '      #{items}'+
+          '  </table>'),
+      item : new Template(
+          '     <tr>' +
+          '       <td>' +
+          '         <input  type="checkbox"  alt="グラフを表示"  #{checked} id="submenu-graph_checked_#{id}" />' +
+          '         <label for="submenu-graph_checked_#{id}" title="#{name}">#{name}</label>' +
+          '       </td>' +
+          '       <td class="color">#{colors}</td>'+
+          '     </tr>' )
+    }
+  }
+}