Веб-интерфейс Traccar: где логика последнего обновления для расчета относительного времени? - PullRequest
Новая
       23

Веб-интерфейс Traccar: где логика последнего обновления для расчета относительного времени?

0 голосов
/ 17 января 2019

Я создал веб-страницу с помощью API Traccar, используя базовый HTML, JS / jQuery и CSS: https://i.stack.imgur.com/XWSDp.jpg. На этой веб-странице я отображаю некоторую информацию об устройстве отслеживания, аналогичную информации, которую вы видите в веб-интерфейсе Traccar: https://i.stack.imgur.com/b4Yss.jpg

Я получаю последнее время обновления устройства в формате ISO: 2019-01-11T15: 55: 47.377 + 0000 от API Traccar.

Мне нужно отобразить относительное время между последним обновлением устройства и временем, когда я открываю веб-страницу, как это делает веб-интерфейс (даже с учетом моего часового пояса) и показывает последнее обновление 28 дней назад, или 1 час, или 10. минут назад.

Traccar делится исходным кодом для веб-интерфейса https://github.com/traccar/traccar-web, но я не нашел, где именно он указывает эту логику для последнего обновления. Какой это файл? или какие библиотеки я должен использовать, чтобы получить те же результаты? Я еще не знаком с веб-приложениями ExtJS, поэтому, если кто-то знаком с такими веб-приложениями, пожалуйста, сообщите!

Буду признателен за любую помощь!

Обновление: Я получил указание от автора программного обеспечения Traccar, он направил меня в файл AttributeFormatter.js в папке приложения: https://github.com/traccar/traccar-web/tree/master/web/app Поэтому я использую функцию lastUpdateFormatter, но его вывод еще не верен:

Последнее обновление: NaN минут

1 Ответ

0 голосов
/ 18 января 2019

Вы можете использовать momentjs для выполнения требования. 

console.log(`Current time -----`, moment().fromNow())

console.log(`From device's last update time ----`, moment('2019-01-11T15:55:47.377+0000').fromNow())
<script src="https://momentjs.com/downloads/moment.js"></script>

Вы также можете использовать в ExtJS. Вы можете проверить здесь с работающей Сенча скрипкой .

Фрагмент кода 

Ext.application({
    name: 'Fiddle',

    launch: function () {


        function randomDate(start, end) {
            return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
        }

        // Define store
        Ext.define('DataStore', {
            extend: 'Ext.data.Store',
            alias: 'store.datastore',
            pageSize: 50,

            fields: [
                'title', 'forumtitle', 'forumid', 'username', {
                    name: 'replycount',
                    type: 'int'
                }, {
                    name: 'lastpost',
                    convert: function (v, r) {
                        let date = randomDate(new Date(2018, 0, 1), new Date());
                        return moment(date).fromNow();
                    }
                },
                'lastposter', 'excerpt', 'threadid'
            ],

            remoteSort: true,
            proxy: {
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                type: 'jsonp',
                url: '//www.sencha.com/forum/topics-browse-remote.php',
                reader: {
                    rootProperty: 'topics',
                    totalProperty: 'totalCount'
                },
                // sends single sort as multi parameter
                simpleSortMode: true
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'ExtJs Forum',
            store: {
                type: 'datastore'
            },
            autoLoad: true,
            columns: [{
                text: 'Forum Title',
                dataIndex: 'forumtitle',
                flex: 1
            }, {
                text: 'Last update',
                dataIndex: 'lastpost',
                flex: 1
            }, {
                text: 'Title',
                dataIndex: 'title',
                flex: 1
            }],
            bbar: {
                xtype: 'pagingtoolbar',
                displayInfo: true
            },
            height: 450,
            renderTo: Ext.getBody()
        });
    }
});
...