通过WebSocket更新智能表

时间：2017-02-23 05:57:53

标签： javascript angularjs websocket smart-table

容器中有2个选项卡。 每个标签都有一个智能表。

  1. 用户点击标签页。

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href") // activated tab
    var relatedTarget = $(e.relatedTarget).attr("href")
    if (target == "#tab1") {
        Scopes.get('tab1').get_records();
    } else if (target == "#tab2") {
        Scopes.get('tab2').get_records();
    }
})

  2. 致电服务器获取所有记录并在桌面上显示。（仅限第一次）

    $scope.got_tab1_records = false;
$scope.get_records = function () {
    if($scope.got_tab1_records) return;
    var today = new Date().toJSON().slice(0,10);
    var url = Flask.url_for('recorder.record_list', {info_type: 1, from_date: today, to_date: today});
    $http.get(url).success(
        function(data){
            $scope.tab1_records = data;
            $scope.safe_tab1_records = [].concat($scope.tab1_records);
            $scope.got_tab1_records = true;
        }
    ).error(function(response){
        alert(response);
    }).finally(function (){
    });
}

  3. 如果有新记录，请从WebSocket获取记录。

    var url = "ws://" + window.location.href.replace(/https?:\/\//,'').replace(/\/.*/,'') + "/ws";
var ws = new WebSocket(url);
ws.onerror = function (e) {
    alert(e);
    console.log("WebSocket Error" + e);
    console.log(e);
}
ws.onclose = function () {
    document.getElementById("logo").style.color = "gray";
}
ws.onmessage = function (e) {
    var obj = JSON.parse(e.data);
    $scope.append_record(obj.state, obj.record);
}
$scope.append_record = function(info_type, record){
    if (info_type == 1) {
        Scopes.get('tab1').unshift_record(record);
    } else if (info_type == 2) {
        Scopes.get('tab2').safe_tab1_records.unshift(JSON.parse(record));
    }
};

  4. 取消加速st-safe-src上的记录并刷新表格。

    $scope.unshift_record = function (record) {
    $scope.safe_tab1_records.unshift(JSON.parse(record));
};

    5. 我的问题是第4步没有刷新表格。 仅当我单击另一个选项卡时，才单击原始选项卡。 但是，单击tab1中的按钮，它将取消记录并显示在表格的第一行。

        $scope.addRandomItem = function addRandomItem() {
        $scope.safe_tab1_records.unshift({_datetime:'2017-02-23', _device:'1'});
    };

    另外，我有一个问题。 为什么st-pagesizelist =“10,50,100,1000”不起作用？

    我有plunker来显示此问题。但我不知道如何模拟WebSocket。

    HTML：

    <div id="right_container" style="position: absolute; width: 38%; height: calc(100% - 107px); right: 0px;">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1">tab1</a></li>
        <li class=""><a data-toggle="tab" href="#tab2">tab2</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-pane fade in active" ng-controller="tab1" style="position: absolute; width: 100%; height: calc(100% - 42px); top: 42px;">
            <button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
                <i class="glyphicon glyphicon-plus">
                </i> Add random item
            </button>
            <table st-table="tab1_records" st-safe-src="safe_tab1_records" class="table table-striped">
                <thead>
                <tr style="background-color: #2A66AB; color: white;">
                    <th>time</th>
                    <th>device</th>
                </tr>
                <tr style="background-color: white;">
                    <th><input st-search="time" class="form-control" placeholder="time search ..." type="text" /></th>
                    <th><input st-search="device" class="form-control" placeholder="device search ..." type="text" /></th>
                </tr>
                </thead>
                <tbody style="background-color: white;">
                <tr ng-repeat="record in tab1_records">
                    <td>{$record._datetime$}</td>
                    <td>{$record._device$}</td>
                </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4" class="text-center">
                            <div st-pagination="" st-items-by-page="10" st-displayed-pages="7" st-pagesizelist="10,50,100,1000"></div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div id="tab2" class="tab-pane fade" ng-controller="tab2" style="position: absolute; width: 100%; height: calc(100% - 42px); top: 42px;">
            <table st-table="tab2_records" st-safe-src="safe_tab2_records" class="table table-striped">
                <thead>
                <tr style="background-color: #2A66AB; color: white;">
                    <th>time</th>
                    <th>device</th>
                </tr>
                <tr style="background-color: white;">
                    <th><input st-search="time" class="form-control" placeholder="time search ..." type="text" /></th>
                    <th><input st-search="device" class="form-control" placeholder="device search ..." type="text" /></th>
                </tr>
                </thead>
                <tbody style="background-color: white;">
                <tr ng-repeat="record in tab2_records">
                    <td>{$record._datetime$}</td>
                    <td>{$record._device$}</td>
                </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4" class="text-center">
                            <div st-pagination="" st-items-by-page="10" st-displayed-pages="7" st-pagesizelist="10,50,100,1000"></div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

    使用Javascript：

    <script src="/statics/scripts/angular.min.js"></script>
<script src="/statics/scripts/Smart-Table-2.1.8/smart-table.min.js"></script>
<script>
var app = angular.module('map', ['smart-table']);
app = angular.module('map').config(function ($httpProvider, $interpolateProvider) {
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
});
app.run(function ($rootScope) {
    $rootScope.$on('scope.stored', function (event, data) {
        console.log("scope.stored", data);
    });
});
app.controller('tab1', ['$scope', '$http', 'Scopes', function ($scope, $http, Scopes) {
    Scopes.store('tab1', $scope);
    $scope.got_tab1_records = false;
    $scope.get_records = function () {
        if($scope.got_tab1_records) return;
        var today = new Date().toJSON().slice(0,10);
        var url = Flask.url_for('recorder.record_list', {info_type: 1, from_date: today, to_date: today});
        $http.get(url).success(
            function(data){
                $scope.tab1_records = data;
                $scope.safe_tab1_records = [].concat($scope.tab1_records);
                $scope.got_tab1_records = true;
            }
        ).error(function(response){
            alert(response);
        }).finally(function (){
        });
    }
    $scope.addRandomItem = function addRandomItem() {
        $scope.safe_tab1_records.unshift({_datetime:'2017-02-23', _device:'1'});
    };
    $scope.unshift_record = function (record) {
        $scope.safe_tab1_records.unshift({_datetime:'2017-02-23', _device:'2'});
    };
    $scope.get_records();
}]);
app.controller('tab2', ['$scope', '$http', 'Scopes', function ($scope, $http, Scopes) {
    Scopes.store('tab2', $scope);
    $scope.got_tab2_records = false;
    $scope.get_records = function () {
        if($scope.got_tab2_records) return;
        var today = new Date().toJSON().slice(0,10);
        var url = Flask.url_for('recorder.record_list', {info_type: 2, from_date: today, to_date: today});
        $http.get(url).success(
            function(data){
                $scope.tab2_records = data;
                $scope.safe_tab2_records = [].concat($scope.tab2_records);
                $scope.got_tab2_records = true;
            }
        ).error(function(response){
            alert(response);
        }).finally(function (){
        });
    };
    $scope.unshift_record = function (record) {
        $scope.safe_tab1_records.unshift(JSON.parse(record));
    };
}]);
app.controller('preview', ['$scope', '$http', 'Scopes', function ($scope, $http, Scopes) {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr("href") // activated tab
        var relatedTarget = $(e.relatedTarget).attr("href")
        if (target == "#tab1") {
            Scopes.get('tab1').get_records();
        } else if (target == "#tab2") {
            Scopes.get('tab2').get_records();
        }
    })
    $scope.append_record = function(info_type, record){
        if (info_type == 1) {
            Scopes.get('tab1').unshift_record(record);
        } else if (info_type == 2) {
            Scopes.get('tab2').safe_tab1_records.unshift(JSON.parse(record));
        }
    };
    var url = "ws://" + window.location.href.replace(/https?:\/\//,'').replace(/\/.*/,'') + "/ws";
    var ws = new WebSocket(url);
    ws.onerror = function (e) {
        alert(e);
        console.log("WebSocket Error" + e);
        console.log(e);
    }
    ws.onclose = function () {
        document.getElementById("logo").style.color = "gray";
    }
    ws.onmessage = function (e) {
        var obj = JSON.parse(e.data);
        $scope.append_record(obj.state, obj.record);
    }
}]);

app.factory('Scopes', function ($rootScope) {
    var mem = {};
    return {
        store: function (key, value) {
            $rootScope.$emit('scope.stored', key);
            mem[key] = value;
        },
        get: function (key) {
            return mem[key];
        }
    };
});
</script>

0 个答案:

没有答案
相关问题
最新问题