20180905_jeffrey - silenceuncrio/diary GitHub Wiki

0910

dual apn 的 real time data 需要 access 以下兩個 api

  • icos_shm.cgi?act=shm&name=nw_statistics0
  • icos_shm.cgi?act=shm&name=nw_statistics1

以目前的 javascript 要作修改的話相當麻煩

    function updateTime() {
        icos.shm.lte_cur_statistics().then(function(result) {



            vm.real_time.data[0].push(result.data.shm.month_rx);
            vm.real_time.data[1].push(result.data.shm.month_tx);
            vm.real_time.data[2].push(result.data.shm.DisplayTotal);
            for (var i = 0; i < vm.real_time.data.length; i ++) {
                if (vm.real_time.data[i].length > 30) {
                    vm.real_time.data[i].shift();
                }
            }



            vm.real_time_difference.data[0].push(
                (vm.real_time.data[0][vm.real_time.data[0].length - 1] - vm.real_time.data[0][vm.real_time.data[0].length - 2]) / 2
            );
            vm.real_time_difference.data[1].push(
                (vm.real_time.data[1][vm.real_time.data[1].length - 1] - vm.real_time.data[1][vm.real_time.data[1].length - 2]) / 2
            );
            vm.real_time_difference.data[2].push(
                (vm.real_time.data[2][vm.real_time.data[2].length - 1] - vm.real_time.data[2][vm.real_time.data[2].length - 2]) / 2
            );

            for (var i = 0; i < vm.real_time_difference.data.length; i ++) {
                if (vm.real_time_difference.data[i].length > 30) {
                    vm.real_time_difference.data[i].shift();
                }
            }



        });
    }

    var stopTime = $interval(updateTime, 2000);

    $scope.$on("$destroy", function (event) {
        $interval.cancel(stopTime);
    });

我來改寫一下 CGI 把兩隻併成一隻

  • usage_display.cgi?act=real_time
diff --git a/proscend/prosrc/webcgi/usage_display.c b/proscend/prosrc/webcgi/usage_display.c
index da3cf23..dfbb3e3 100644
--- a/proscend/prosrc/webcgi/usage_display.c
+++ b/proscend/prosrc/webcgi/usage_display.c
@@ -120,6 +120,37 @@ static void _monthly()



+static void _real_time()
+{
+    SHM_NWACNTING_T *_apn0 = ICOS_shm_status_getPtr(SHM_NW_STATISTICS0);
+    if (_apn0 == NULL)
+    {
+        jweb.http.status(500);
+        jweb.out.json.fail("ICOS_shm_status_getPtr fail");
+    }
+
+    SHM_NWACNTING_T *_apn1 = ICOS_shm_status_getPtr(SHM_NW_STATISTICS1);
+    if (_apn1 == NULL)
+    {
+        jweb.http.status(500);
+        jweb.out.json.fail("ICOS_shm_status_getPtr fail");
+    }
+
+    json_object *real_time = json_object_new_object();
+
+    json_object_object_add(real_time, "apn0_month_tx",      json_object_new_int64(_apn0->month_tx));
+    json_object_object_add(real_time, "apn0_month_rx",      json_object_new_int64(_apn0->month_rx));
+    json_object_object_add(real_time, "apn0_DisplayTotal",  json_object_new_int64(_apn0->DisplayTotal));
+
+    json_object_object_add(real_time, "apn1_month_tx",      json_object_new_int64(_apn1->month_tx));
+    json_object_object_add(real_time, "apn1_month_rx",      json_object_new_int64(_apn1->month_rx));
+    json_object_object_add(real_time, "apn1_DisplayTotal",  json_object_new_int64(_apn1->DisplayTotal));
+
+    jweb.out.json.data("real_time", real_time);
+}
+
+
+
 static void _help()
 {
     jweb.out.json.ok();
@@ -147,6 +178,10 @@ int main(void)
     {
         _monthly();
     }
+    else if (STRCMP(jweb.in.act, "real_time"))
+    {
+        _real_time();
+    }
     else if (STRCMP(jweb.in.act, "help"))
     {
         _help();

經由 chrome 開發人員工具 的測試結果... PASS

image

1120

usage display web page 改得差不多了

利用 wget http://http.speed.hinet.net/test_010m.zip 產生一些流量試試

image

先上 code 吧

commit cc5557d772f582a9d79af23ce903e4e2778f969a
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Wed Sep 5 11:28:10 2018 +0800

    add 'LTE / Usage Display' for dual APN

 proscend/prosrc/webcgi/usage_display.c            |  35 +++
 proscend/prosrc/www/app/feature/usageDisplay.html |  87 ++++--
 proscend/prosrc/www/app/feature/usageDisplay.js   | 319 ++++++++++++++++------
 proscend/prosrc/www/app/locale-en.json            |   2 +
 proscend/prosrc/www/app/locale-fr.json            |   2 +
 proscend/prosrc/www/app/locale-zh-tw.json         |   2 +
 proscend/prosrc/www/app/services/icos.service.js  |   3 +
 proscend/prosrc/www/src/menu.html.src             |   2 +-
 8 files changed, 348 insertions(+), 104 deletions(-)

1135

從 develop branch pull 最新的 code

好好測一下這幾天改的

1310

先跟 M300 對測一下 BGP

不如花點時間把 M360 上面 BGp 的修改搬到 M300 去

從 M300 develop branch 拉一份最新的 code

build 個 nandfalsh 的 generic 版本

等待 M300 build 的同時 先回顧一下我在 M360 所作的修改

1330

mfgtool 燒錄 M300

1340

先改 ip alias

diff --git a/proscend/prosrc/www/app/feature/ip_alias.js b/proscend/prosrc/www/app/feature/ip_alias.js
index 960ef6b..e470a56 100644
--- a/proscend/prosrc/www/app/feature/ip_alias.js
+++ b/proscend/prosrc/www/app/feature/ip_alias.js
@@ -112,13 +112,14 @@ function ipAliasController($route, icos, whoAmI, config) {
     vm.help.interface_options = [
         {val: 'eth1', label: 'eth1(WAN Ethernet)'},
         {val: 'eth2', label: 'eth2(LTE)'},
-        {val: 'lan', label: 'lan'}
+        {val: 'lan', label: 'lan'}, ^M
+        {val: 'lo', label: 'lo(Loopback)'}, ^M
     ];



     vm.regex_ipv4 = /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$/;
-    vm.regex_netmask = /^((128|192|224|240|248|252|254)\.0\.0\.0)|(255\.(((0|128|192|224|240|248|252|254)\.0\.0)|(255\.(((0|128|192|224|240|248|252|254)\.0)|255\.(0|128|192|224|240|248|252|254)))))$/;
+    vm.regex_netmask = /^((128|192|224|240|248|252|254)\.0\.0\.0)|(255\.(((0|128|192|224|240|248|252|254)\.0\.0)|(255\.(((0|128|192|224|240|248|252|254)\.0)|255\.(0|128|192|224|240|248|252|254|255)))))$/;^M

透過 web ui 加入 lo 的 alias - 3.3.3.1

image

ifconfig 確認無誤

root@Cellular Router:/www/app/feature# ifconfig
...
lo:ip_alias_0 Link encap:Local Loopback
          inet addr:3.3.3.1  Mask:255.255.255.255
          UP LOOPBACK RUNNING  MTU:65536  Metric:1

上 code

commit 12c0443de46214a0091445a3e028105c840b893c
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Wed Sep 5 13:44:36 2018 +0800

    add 'lo(Loopback)' interface option at 'Service / IP Alias' web page

 proscend/prosrc/www/app/feature/ip_alias.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

繼續從 M360 搬 BGP 的修改到 M300

1430

M300 與 M360 BGP with loopback interface 透過 web ui 作設定

功能測試 ok

上 code 吧

commit 09ce82ccd15b7092a1f1e7dbadefc7528de55d9d
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Wed Sep 5 14:33:18 2018 +0800

    add 2 more fields at 'IP Routing / BGP Neighbors' for user to specify the source address to this neighbor
    - Update Source Mode - Whether to specify the source address to this neighbor
    - Update Source Address - The source address to this neighbor

 proscend/prosrc/icos/icoslib/bgp/bgp.c    | 39 +++++++++++++++++++++++++++++++
 proscend/prosrc/icos/include/module_bgp.h | 16 +++++++++++++
 proscend/prosrc/www/app/feature/bgp.html  | 31 ++++++++++++++++++++++++
 proscend/prosrc/www/app/feature/bgp.js    | 12 ++++++----
 proscend/prosrc/www/app/locale-en.json    |  2 ++
 proscend/prosrc/www/app/locale-fr.json    |  2 ++
 proscend/prosrc/www/app/locale-zh-tw.json |  2 ++
 7 files changed, 100 insertions(+), 4 deletions(-)

1435

再確認 0000223 - [IP Alias] add interface lan.1 and apply, cause M360P crash 的狀況

持續地 ping 該 alias 出來的 lan.1:ip_alias_x

同時也透過該 interface 來 access web ui

停留在 status 畫面

持續觀察中

繼續 review 0000222 - [https] login using https fail 這 issue

把剛剛的 web access 從 HTTP 改成 HTTPS

一樣停留在 status 畫面

這樣定時都會有 CGI 的 access

1440

再來是

Job End
Web UI: Dual APN Data Usage 9/7

直接用 HTTPS 來觀察 usage display

再利用 wget http://http.speed.hinet.net/test_010m.zip 產生一些流量

image

放著讓 M360 跑一下

1455

剛剛找 ariel 聊一下 usage display 目前的版面

一個 APN 三條線

兩個 APN 六條線

六條線通通擠在一個畫面實在很難看懂

更不要說如果值一樣的話

就只看的到第一條線

決定把 APN1 和 APN2 分開顯示

我想就先顯示 APN1 再顯示 APN2 好了

APN1 和 APN2 用途不同

沒必要一左一右

這樣會有比較的意味

而且版面會顯得很擠

1510

先趁這機會盤一下 usage display 這個 page 需要什麼 CGI

這 page 一開會顯示的 tab 分頁是 real time

image

共計 access 了下述的 CGI

  • icos_shm.cgi?act=shm&name=lte
  • icos_shm.cgi?act=shm&name=modem0
  • icos_shm.cgi?act=shm&name=modem0
  • icos_shm.cgi?act=shm&name=lte_cur_statistics
  • lte.cgi?act=config
  • usage_display?act=realtime

icos_shm.cgi?act=shm&name=lte_cur_statistics 可以刪掉不用了

icos_shm.cgi?act=shm&name=lte 也用不著了

連帶下面的 javascript code 也可以刪掉

    vm.lte = lte;
    if (vm.lte.cur_sim == 0) {
        vm.current_sim = modem0;
        vm.backup_sim = modem1;
        vm.current_sim_name = "SIM1";
        vm.backup_sim_name = "SIM2";
    } else {
        vm.current_sim = modem1;
        vm.backup_sim = modem0;
        vm.current_sim_name = "SIM2";
        vm.backup_sim_name = "SIM1";      
    }

icos_shm.cgi?act=shm&name=modem0 和 icos_shm.cgi?act=shm&name=modem0 兩次的 CGI access 就只為了 apn name

lte.cgi?act=config 這 CGI 只為了得到 lte_net 的值

把這三隻併成一隻 - usage_display?act=info

diff --git a/proscend/prosrc/webcgi/usage_display.c b/proscend/prosrc/webcgi/usage_display.c
index 2f3d62b..2177bc9 100644
--- a/proscend/prosrc/webcgi/usage_display.c
+++ b/proscend/prosrc/webcgi/usage_display.c
@@ -151,6 +151,40 @@ static void _real_time()



+static void _info()
+{
+    MODEM_SIM_STATUS *_shm_modem0 = ICOS_shm_status_getPtr(SHM_MODEM0);
+    if (_shm_modem0 == NULL)
+    {
+        jweb.http.status(500);
+        jweb.out.json.fail("ICOS_shm_status_getPtr fail");
+    }
+
+    MODEM_SIM_STATUS *_shm_modem1 = ICOS_shm_status_getPtr(SHM_MODEM1);
+    if (_shm_modem1 == NULL)
+    {
+        jweb.http.status(500);
+        jweb.out.json.fail("ICOS_shm_status_getPtr fail");
+    }
+
+    lte_config _lte_config;
+    if (ICOS_SUCCESS != ICOS_GetSetting(MODULE_LTE, 0, 0, &_lte_config, sizeof(_lte_config)))
+    {
+        jweb.http.status(500);
+        jweb.out.json.fail("ICOS_GetSetting fail");
+    }
+
+    json_object *info = json_object_new_object();
+
+    json_object_object_add(info, "apn1", json_object_new_string(_shm_modem0->apn));
+    json_object_object_add(info, "apn2", json_object_new_string(_shm_modem1->apn));
+    json_object_object_add(info, "lte_net", json_object_new_int(_lte_config.lte_net));
+
+    jweb.out.json.data("info", info);
+}
+
+
+
 static void _help()
 {
     jweb.out.json.ok();
@@ -182,6 +216,10 @@ int main(void)
     {
         _real_time();
     }
+    else if (STRCMP(jweb.in.act, "info"))
+    {
+        _info();
+    }
     else if (STRCMP(jweb.in.act, "help"))
     {
         _help();

經過 chrome 驗證可以正確工作

image

上 code

commit d36682c961d9b2dfaa41555ec46b46e279fcd74d
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Wed Sep 5 15:32:39 2018 +0800

    add new usage_display.cgi?act=info http api

 proscend/prosrc/webcgi/usage_display.c | 38 ++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

先重新 compile 再透過 uboot 燒錄 m360

發現這新的 CGI 漏了兩個 usage display 也需要的資訊

  • modem_operator_name
  • modem_sim_imsi

在 M360 上這兩個資訊跟 icos_shm.cgi?act=shm&name=modem0 或跟 icos_shm.cgi?act=shm&name=modem0 要都一樣

1555

commit 8e39ac45147e1ecdcb6b42800914537034b94dcf
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Wed Sep 5 15:54:15 2018 +0800

    remove unused CGI

 proscend/prosrc/webcgi/usage_display.c            |  3 +
 proscend/prosrc/www/app/feature/usageDisplay.html | 10 ++--
 proscend/prosrc/www/app/feature/usageDisplay.js   | 69 +++--------------------
 proscend/prosrc/www/app/services/icos.service.js  |  3 +
 4 files changed, 18 insertions(+), 67 deletions(-)

這是經由 chrome 所觀察到的結果

image

清爽多了

1600

可以來調整 usage display 的版面了

先來盤一下 real time 的部分

有 javascipt 的部分

    vm.real_time = {};

    vm.real_time.data = [ 
        [vm._real_time.apn0_month_rx], [vm._real_time.apn0_month_tx], [vm._real_time.apn0_DisplayTotal], 
        [vm._real_time.apn1_month_rx], [vm._real_time.apn1_month_tx], [vm._real_time.apn1_DisplayTotal],
    ];

    vm.real_time.labels = [
        60, 58, 56, 54, 52, 50, 48, 46, 44, 42,
        40, 38, 36, 34, 32, 30, 28, 26, 24, 22,
        20, 18, 16, 14, 12, 10,  8,  6,  4,  2
    ];

    vm.real_time.options = {
        legend: { display: true },
        animation: false,
        responsive: true,
        title:{
            display:true,
            text:'Real Time Usage'
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Window Size (60 Seconds)'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'MB'
                }
            }]
        }
    }

    vm.real_time.colors = ['#0000ff', '#00ff00', '#800080', '#ffff00', '#ffa500', '#ff0000'];

    vm.real_time.datasetOverride = [
        {
            fill: false,
            label: "APN1 Rx",
        },
        {
            fill: false,
            label: "APN1 Tx",
        },
        {
            fill: false,
            label: "APN1 Total",
        },
        {
            fill: false,
            label: "APN2 Rx",
        },
        {
            fill: false,
            label: "APN2 Tx",
        },
        {
            fill: false,
            label: "APN2 Total",
        },
    ]

    function updateTime() {
        icos.usage_display.real_time().then(function(result) {

            vm.real_time.data[0].push(result.data.real_time.apn0_month_rx);
            vm.real_time.data[1].push(result.data.real_time.apn0_month_tx);
            vm.real_time.data[2].push(result.data.real_time.apn0_DisplayTotal);
            vm.real_time.data[3].push(result.data.real_time.apn1_month_rx);
            vm.real_time.data[4].push(result.data.real_time.apn1_month_tx);
            vm.real_time.data[5].push(result.data.real_time.apn1_DisplayTotal);
            for (var i = 0; i < vm.real_time.data.length; i ++) {
                if (vm.real_time.data[i].length > 30) {
                    vm.real_time.data[i].shift();
                }
            }

            vm.real_time_difference.data[0].push(
                (vm.real_time.data[0][vm.real_time.data[0].length - 1] - vm.real_time.data[0][vm.real_time.data[0].length - 2]) / 2
            );
            vm.real_time_difference.data[1].push(
                (vm.real_time.data[1][vm.real_time.data[1].length - 1] - vm.real_time.data[1][vm.real_time.data[1].length - 2]) / 2
            );
            vm.real_time_difference.data[2].push(
                (vm.real_time.data[2][vm.real_time.data[2].length - 1] - vm.real_time.data[2][vm.real_time.data[2].length - 2]) / 2
            );
            vm.real_time_difference.data[3].push(
                (vm.real_time.data[3][vm.real_time.data[3].length - 1] - vm.real_time.data[3][vm.real_time.data[3].length - 2]) / 2
            );
            vm.real_time_difference.data[4].push(
                (vm.real_time.data[4][vm.real_time.data[4].length - 1] - vm.real_time.data[4][vm.real_time.data[4].length - 2]) / 2
            );
            vm.real_time_difference.data[5].push(
                (vm.real_time.data[5][vm.real_time.data[5].length - 1] - vm.real_time.data[5][vm.real_time.data[5].length - 2]) / 2
            );

            for (var i = 0; i < vm.real_time_difference.data.length; i ++) {
                if (vm.real_time_difference.data[i].length > 30) {
                    vm.real_time_difference.data[i].shift();
                }
            }

        });
    }

    var stopTime = $interval(updateTime, 2000);

    $scope.$on("$destroy", function (event) {
        $interval.cancel(stopTime);
    });



    /*
    ** real_time_difference
    */

    vm.real_time_difference = {};

    vm.real_time_difference.data = [ [0], [0], [0], [0], [0], [0]];

    vm.real_time_difference.labels = [
        60, 58, 56, 54, 52, 50, 48, 46, 44, 42,
        40, 38, 36, 34, 32, 30, 28, 26, 24, 22,
        20, 18, 16, 14, 12, 10,  8,  6,  4,  2
    ];

    vm.real_time_difference.options = {
        legend: { display: true },
        animation: false,
        responsive: true,
        title:{
            display:true,
            text:'Real Time Usage Rate'
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Window Size (60 Seconds)'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'MB/sec'
                }
            }]
        }
    }

    vm.real_time_difference.colors = ['#0000ff', '#00ff00', '#800080', '#ffff00', '#ffa500', '#ff0000'];

    vm.real_time_difference.datasetOverride = [
        {
            fill: false,
            label: "APN1 Rx",
        },
        {
            fill: false,
            label: "APN1 Tx",
        },
        {
            fill: false,
            label: "APN1 Total",
        },
        {
            fill: false,
            label: "APN2 Rx",
        },
        {
            fill: false,
            label: "APN2 Tx",
        },
        {
            fill: false,
            label: "APN2 Total",
        },
    ]

還有網頁的部分

  <div id="real_time" class="tab-pane fade in active">
    <canvas 
      id="line" 
      class="chart chart-line" 
      chart-data="vm.real_time_difference.data" 
      chart-labels="vm.real_time_difference.labels" 
      chart-options="vm.real_time_difference.options" 
      chart-colors="vm.real_time_difference.colors" 
      chart-dataset-override="vm.real_time_difference.datasetOverride"
    > 
    </canvas> 
    <br />
    <canvas 
      id="line" 
      class="chart chart-line" 
      chart-data="vm.real_time.data" 
      chart-labels="vm.real_time.labels" 
      chart-options="vm.real_time.options" 
      chart-colors="vm.real_time.colors" 
      chart-dataset-override="vm.real_time.datasetOverride"
    > 
    </canvas> 
  </div>

對應的外觀如

image

目前 vm.real_time_difference.colors 與 vm.real_time.colors 完全一致

vm.real_time_difference.datasetOverride 也與 vm.real_time.datasetOverride

這可以重構一下

再繼續盤

vm.real_time_difference.options 與 vm.real_time.options 的差別如下

    vm.real_time_difference.options = {
        ...
        title:{
            display:true,
            text:'Real Time Usage Rate'
        },
        ...
    }
    vm.real_time.options = {
        ...
        title:{
            display:true,
            text:'Real Time Usage'
        },
        ...
    }

就差一個 title.text

可以只先定義 vm.real_time.options

然後使用 angular.copy() 複製一份到 vm.real_time_difference.options

然後再修改 vm.real_time_difference.options.title.text

    vm.real_time_difference.options = angular.copy(vm.real_time.options);
    vm.real_time_difference.options.title.text = 'Real Time Usage Rate';

這樣的重構可以再精簡一些 code

vm.real_time.labels 與 vm.real_time_difference.labels 完全相同

vm.real_time.data 與 vm.real_time_difference.data 完全不同

先不調整 usage display 的版面

先來重構一下

    vm.real_time = {};
    vm.real_time_difference = {};

    vm.real_time.data = [ 
        [vm._real_time.apn0_month_rx], [vm._real_time.apn0_month_tx], [vm._real_time.apn0_DisplayTotal], 
        [vm._real_time.apn1_month_rx], [vm._real_time.apn1_month_tx], [vm._real_time.apn1_DisplayTotal],
    ];
    vm.real_time_difference.data = [ [0], [0], [0], [0], [0], [0]];

    vm.real_time.labels = [
        60, 58, 56, 54, 52, 50, 48, 46, 44, 42,
        40, 38, 36, 34, 32, 30, 28, 26, 24, 22,
        20, 18, 16, 14, 12, 10,  8,  6,  4,  2
    ];
    vm.real_time_difference.labels = angular.copy(vm.real_time.labels);

    vm.real_time.options = {
        legend: { display: true },
        animation: false,
        responsive: true,
        title:{
            display:true,
            text:'Real Time Usage'
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Window Size (60 Seconds)'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'MB'
                }
            }]
        }
    }
    vm.real_time_difference.options = angular.copy(vm.real_time.options);
    vm.real_time_difference.options.title.text = 'Real Time Usage Rate';

    vm.real_time.colors = ['#0000ff', '#00ff00', '#800080', '#ffff00', '#ffa500', '#ff0000'];
    vm.real_time_difference.colors = angular.copy(vm.real_time.colors);

    vm.real_time.datasetOverride = [
        {
            fill: false,
            label: "APN1 Rx",
        },
        {
            fill: false,
            label: "APN1 Tx",
        },
        {
            fill: false,
            label: "APN1 Total",
        },
        {
            fill: false,
            label: "APN2 Rx",
        },
        {
            fill: false,
            label: "APN2 Tx",
        },
        {
            fill: false,
            label: "APN2 Total",
        },
    ]
    vm.real_time_difference.datasetOverride = angular.copy(vm.real_time.datasetOverride);


    
    function updateTime() {
        icos.usage_display.real_time().then(function(result) {

            vm.real_time.data[0].push(result.data.real_time.apn0_month_rx);
            vm.real_time.data[1].push(result.data.real_time.apn0_month_tx);
            vm.real_time.data[2].push(result.data.real_time.apn0_DisplayTotal);
            vm.real_time.data[3].push(result.data.real_time.apn1_month_rx);
            vm.real_time.data[4].push(result.data.real_time.apn1_month_tx);
            vm.real_time.data[5].push(result.data.real_time.apn1_DisplayTotal);
            for (var i = 0; i < vm.real_time.data.length; i ++) {
                if (vm.real_time.data[i].length > 30) {
                    vm.real_time.data[i].shift();
                }
            }

            vm.real_time_difference.data[0].push(
                (vm.real_time.data[0][vm.real_time.data[0].length - 1] - vm.real_time.data[0][vm.real_time.data[0].length - 2]) / 2
            );
            vm.real_time_difference.data[1].push(
                (vm.real_time.data[1][vm.real_time.data[1].length - 1] - vm.real_time.data[1][vm.real_time.data[1].length - 2]) / 2
            );
            vm.real_time_difference.data[2].push(
                (vm.real_time.data[2][vm.real_time.data[2].length - 1] - vm.real_time.data[2][vm.real_time.data[2].length - 2]) / 2
            );
            vm.real_time_difference.data[3].push(
                (vm.real_time.data[3][vm.real_time.data[3].length - 1] - vm.real_time.data[3][vm.real_time.data[3].length - 2]) / 2
            );
            vm.real_time_difference.data[4].push(
                (vm.real_time.data[4][vm.real_time.data[4].length - 1] - vm.real_time.data[4][vm.real_time.data[4].length - 2]) / 2
            );
            vm.real_time_difference.data[5].push(
                (vm.real_time.data[5][vm.real_time.data[5].length - 1] - vm.real_time.data[5][vm.real_time.data[5].length - 2]) / 2
            );

            for (var i = 0; i < vm.real_time_difference.data.length; i ++) {
                if (vm.real_time_difference.data[i].length > 30) {
                    vm.real_time_difference.data[i].shift();
                }
            }

        });
    }

    var stopTime = $interval(updateTime, 2000);

    $scope.$on("$destroy", function (event) {
        $interval.cancel(stopTime);
    });

測試... PASS

先試著把 apn1 和 apn2 拆開顯示

這需要動到 javascript 與 html

先把目前的步驟作個 commit

commit a18d9c7ad39b22284f7b2b7e0b6169e9d5b725d9
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Wed Sep 5 16:52:56 2018 +0800

    refactoring:
    - combine the common part of 'vm.real_time' and 'vm.real_time_difference'

 proscend/prosrc/www/app/feature/usageDisplay.js | 80 +++----------------------
 1 file changed, 9 insertions(+), 71 deletions(-)

1750

real time 分頁已經把 apn1 和 apn2 拆開了

上 code

commit e0ebeea1b6e62a88c8bd7269ea1937281b7fff18
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Wed Sep 5 17:48:32 2018 +0800

    display APN1 and APN2 individually at tab 'Real Time'

 proscend/prosrc/www/app/feature/usageDisplay.html |  42 ++++++--
 proscend/prosrc/www/app/feature/usageDisplay.js   | 122 +++++++++++++---------
 2 files changed, 111 insertions(+), 53 deletions(-)

效果如下

image

有點長

不過清楚非常多

1805

下班前把 M360 借給 morris check 訊號為何比 M300 強

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️