20200706_jeffrey - silenceuncrio/diary GitHub Wiki

0910

這個禮拜的 review list

M300 - task

release v2.08 at 2020-07-10
[0%] P4 - BGP status (web ui)
[0%] P4 - give a init value for google map

M300 - issue

[100%] 0001093: there is no log for L2TP server/L2TP client/PPTP server

M300 - bug

[30%] firmware upgrade 卡在 40%
- pc 網卡直連 M300 lan 端
- 檔案上傳慢到(1分鐘100KB)前端的 javascript 慢慢跑到 40% 在等著上傳檔案完成 - 一小時也等不到

M330 - task

release v1.03 at 2020-07-15
[0%] P3 - sync multi language from m330 to all mobile project

M330 - issue

[100%] P1 - 0001094: there is no log for L2TP server/L2TP client/PPTP server
[100%] P1 - 0001097: l2tp client can't access internet via l2tp connection, but pptp client can access internet via pptp connection

M330 - bug

[0%] firmware upgrade 上傳成 M300 的 firmware 第一次失敗後到至後續上傳正確的也會失敗
- lighttpd 回 request entity too large

M350-C - task

release v0.05 at 2020-07-17
[0%] P2 - Dynamic Web UI by HW_MCSV
[0%] P2 - Dynamic Firmware Upgrade by HW_MCSV
[0%] P2 - Web UI: WAN as LAN

M350-C - issue

none

M350-C - bug

[20%] web ui openvpn wizard 會讓 lighttpd process 被 kill 掉
- M330 不會
- M330 的 lighttpd 為 1.4.30
- M350 的 lighttpd 為 1.4.40
[80%] 修改 menu.html.src 透過 web upgrade 後會 cache 舊的 menu
- 可以套用至全平台

M350-C - misc

[30%] 跨 repository 間 code 的 sync - 培養功力
- 起手式
```
git format-patch -k --stdout ${A_COMMIT_HASH}..${B_COMMIT_HASH} > xxx.patch
git am -k -3 < xxx.patch
```
- git am 失敗的時候該怎麼辦? git apply --reject

M360P - task

[0%] P2 - web ui: Carrier Aggregation info porting

M360P - issue

[60%] 1103: ui menu not base on compile flag
[60%] 936: some routes learned via bgp, then they disappear then appear again after a few seconds, and again and again...
[60%] 787: when local ethernet link is 100 half, firmware upgrade via web ui fail

M360P - bug

[30%] - 0000908: sometimes first time modify LTE NET mode or APN on dual APN will apply fail - root cause 是 lighttpd 重啟了
- M360P 的 lighttpd 為 1.4.30

ISMS Server - task

[50%] node config
[50%] RWD and color, layout, navigation
[90%] dashboard
[85%] topology
[70%] map

MISC

[0%] 與成功有約 10 分鐘心得報告

0920

M330 - issue - [0%] P1 - 0001094: there is no log for L2TP server/L2TP client/PPTP server

commit 39fba300f9e16185d3fef70bef82466fbc0d110d
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Mon Jul 6 09:52:30 2020 +0800

    add log for PPTP server
    - Connection established
    - Connection disconnect

 proscend/prosrc/icos/icoslib/pptpd/pptpd.c | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

1025

ISMS Server - task - [70%] map

為了後續對於 map 應用的擴展

參考 Using Google Maps in React without custom libraries

試著擺脫 library 的限制

以下的 code 證實不用 library 就可以很簡單的使用 google library

App.js

import React, { Component } from 'react';
import Map from './map';

class Main extends Component {
  render() {
    return (
      <Map
        id="myMap"
        options={{
          center: { lat: 41.0082, lng: 28.9784 },
          zoom: 8
        }}
        onMapLoad={map => {
          // eslint-disable-next-line
          var marker = new window.google.maps.Marker({
            position: { lat: 41.0082, lng: 28.9784 },
            map: map,
            title: 'Hello Istanbul!'
          });
        }}
      />
    );
  }
}

export default Main;

map.js

import React, { Component } from 'react';

class Map extends Component {
  constructor(props) {
    super(props);
    this.onScriptLoad = this.onScriptLoad.bind(this)
  }

  onScriptLoad() {
    const map = new window.google.maps.Map(
      document.getElementById(this.props.id),
      this.props.options);
    this.props.onMapLoad(map)
  }

  componentDidMount() {
    if (!window.google) {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = `https://maps.google.com/maps/api/js?key=AIzaSyAM0qzn6FVfsv0hvMOEn6ciTMK8at2n9fw`;
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
      // Below is important. 
      //We cannot access google.maps until it's finished loading
      s.addEventListener('load', e => {
        this.onScriptLoad()
      })
    } else {
      this.onScriptLoad()
    }
  }

  render() {
    return (
      <div style={{ width: 500, height: 500 }} id={this.props.id} />
    );
  }
}

export default Map

注意到 var marker 前要加上 // eslint-disable-next-line

          // eslint-disable-next-line
          var marker = new window.google.maps.Marker({

否則會有 warning 說 unused variable

Line 17:15:  'marker' is assigned a value but never used  no-unused-vars

App.js 也可以改成下述寫法就不用管 warning 了

import React, { Component } from 'react';
import Map from './map';

class Main extends Component {
  render() {
    return (
      <Map
        id="myMap"
        options={{
          center: { lat: 41.0082, lng: 28.9784 },
          zoom: 8
        }}
        onMapLoad={map => {
          const marker = new window.google.maps.Marker({
            position: { lat: 41.0082, lng: 28.9784 },
            title: 'Hello Istanbul!'
          });
          // To add the marker to the map, call setMap();
          marker.setMap(map);
        }}
      />
    );
  }
}

export default Main;

看來可以直接花時間在 google map api 上了

1625

差點倒在下面這個範例

Tutorials - Marker Clustering

可行的範例如下

App.js

import React, { Component } from 'react';
import Map from './map';

class Main extends Component {

  locations = [
    {lat: -31.563910, lng: 147.154312},
    {lat: -33.718234, lng: 150.363181},
    {lat: -33.727111, lng: 150.371124},
    {lat: -33.848588, lng: 151.209834},
    {lat: -33.851702, lng: 151.216968},
    {lat: -34.671264, lng: 150.863657},
    {lat: -35.304724, lng: 148.662905},
    {lat: -36.817685, lng: 175.699196},
    {lat: -36.828611, lng: 175.790222},
    {lat: -37.750000, lng: 145.116667},
    {lat: -37.759859, lng: 145.128708},
    {lat: -37.765015, lng: 145.133858},
    {lat: -37.770104, lng: 145.143299},
    {lat: -37.773700, lng: 145.145187},
    {lat: -37.774785, lng: 145.137978},
    {lat: -37.819616, lng: 144.968119},
    {lat: -38.330766, lng: 144.695692},
    {lat: -39.927193, lng: 175.053218},
    {lat: -41.330162, lng: 174.865694},
    {lat: -42.734358, lng: 147.439506},
    {lat: -42.734358, lng: 147.501315},
    {lat: -42.735258, lng: 147.438000},
    {lat: -43.999792, lng: 170.463352}
  ];

  render() {
    return (
      <Map
        id="myMap"
        options={{
          center: {lat: -28.024, lng: 140.887},
          zoom: 4,
        }}
        onMapLoad={map => {

          var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

          var markers = this.locations.map(function(location, i) {
            return new window.google.maps.Marker({
              position: location,
              label: labels[i % labels.length]
            });
          });

          var markerCluster = new window.MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

        }}
      />
    );
  }
}

export default Main;

map.js

import React, { Component } from 'react';

class Map extends Component {

  onMarkerclustererplusLoad = () => {
    const map = new window.google.maps.Map(
      document.getElementById(this.props.id),
      this.props.options);
    this.props.onMapLoad(map)
  }

  onScriptLoad = () => {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = `https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js`;
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
    s.addEventListener('load', e => {
      this.onMarkerclustererplusLoad()
    })
  }

  componentDidMount() {
    if (!window.google) {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = `https://maps.google.com/maps/api/js?key=AIzaSyAM0qzn6FVfsv0hvMOEn6ciTMK8at2n9fw`;
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
      // Below is important. 
      //We cannot access google.maps until it's finished loading
      s.addEventListener('load', e => {
        this.onScriptLoad()
      })
    } else {
      this.onScriptLoad()
    }
  }

  render() {
    return (
      <div style={{ width: '100%', height: '400px' }} id={this.props.id} />
    );
  }
}

export default Map

關鍵就是改寫 onScriptLoad()

再包一層 onMarkerclustererplusLoad() 確保以下兩個 script 都 load

https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js
- the MarkerClustererPlus library
https://maps.google.com/maps/api/js?key=AIzaSyAM0qzn6FVfsv0hvMOEn6ciTMK8at2n9fw
- Google Maps JavaScript API library