SapUI5: Использование Moment.js

Опубликовано автором

Рано или поздно перед любым программистом становится задача вывода даты и времени в каком-либо формате.
Форматирование чисел и даты стандартными средствами sapUI5 мы уже разбирали тут https://nickcode.ru/sapui5/urok-9-sapui5-formatirovanie-formatter-sortirovka-i-filtratsiya.html.

Однако, стандартный функционал не всегда позволяет решить все задачи. Например, нам надо вывести сколько секунд, минут, часов назад было совершено какое-либо событие, например, заведена заявка.

Одной из лучших библиотек для решения подобного рода задач считаю Moment.js.

В данной заметке посмотрим как добавить стороннюю JS библиотеку (Moment.js) в приложение SapUI5.

Пример, который мы будем рассматривать ниже, можно импортировать в свой WebIDE отсюда https://github.com/kannade/sapui5_momentjs.

Добавим библиотеку в sapUI5 приложение

Скачаем саму библиотеку с официального сайта https://momentjs.com/.

Я скачал https://momentjs.com/downloads/moment-with-locales.js и добавил файл в папку models:

model folder

Подключить библиотеку файл можно несколькими путями.

    • Один из вариантов — добавить библиотеку в блок sap.ui.define:
/sapui5_momentjs/blob/master/webapp/model/formatter.js
sap.ui.define([
	//	"momentjs/nickcode/model/moment-with-locales",	"sap/ui/Device"
], function (
	//momentjs,	Device) {
	"use strict";
    • Но мы сделаем более красиво и добавим библиотеку в manifest.json:
/sapui5_momentjs/blob/master/webapp/manifest.json
"resources": {
	"css": [{
		"uri": "css/style.css"
	}],
	"js": [{		"uri": "model/moment-with-locales.js"	}]},

Выведем время в приложении.

Создадим самую простую JSON модель, в которой будет содержаться только одно свойство time:

/sapui5_momentjs/blob/master/webapp/Component.js
// set the device model
this.setModel(models.createDeviceModel(), "device");
this.setModel(models.createNickcodeModel(), "nickcode");

в свойство time запишем текущую дату и время:

/sapui5_momentjs/blob/master/webapp/model/models.js
createNickcodeModel: function () {
	var mdl = {
		"time": new Date()	};
 
	var oModel = new JSONModel();
	oModel.setData(mdl);
 
	return oModel;
}

Выведем время (свойство time) в представлении:

/sapui5_momentjs/blob/master/webapp/view/Main.view.xml
<text text="{path: 'nickcode>/time', formatter: 'momentjs.nickcode.model.formatter.requestTime'}" class="requestTime">
</text>

Для поля назначим форматер (метод форматера requestTime).

При этом не забудем определить форматер в контролере:

/sapui5_momentjs/blob/master/webapp/controller/Main.controller.js
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"momentjs/nickcode/model/formatter"], function (Controller, formatter) {
	"use strict";
 
	return Controller.extend("momentjs.nickcode.controller.Main", {
 
	formatter: formatter,

Перейдем в форматер, где мы будем использовать библиотеку moment.js.

Выведем на экране сколько прошло с момента загрузки приложения (разница между текущем временем и временем в свойстве time модели).
Затем создадим счетчик (setTimeout), который будет каждые 60 секунд обновлять значение времени:

/sapui5_momentjs/blob/master/webapp/model/formatter.js
/* global moment:true */
/*eslint consistent-this: ["error", "oElem"]*/
 sap.ui.define([
	//"momentjs/nickcode/model/moment-with-locales",
	"sap/ui/Device"
], function (
	//momentjs,
	Device) {	"use strict";
 
var Formatter = {
	requestTime: function (sValue) {
		if (!sValue) {
			return "";
		}
 
		moment.locale("ru"); //Локализация - Россия
 
		var nowDate = moment(); //Сегодня
		var date = moment(sValue); //Дата, которая пришла в форматер
		var yesterday = moment(sValue).subtract(1, "days"); //вычитаем день из пришедшей даты
 
		var oElem = this; //Запомним контекст, чтобы вызвать его в setInterval
 
		if (nowDate.format("DD.MM.YY") === date.format("DD.MM.YY")) { //Если текущий день
			var diffMs = nowDate.diff(date);
 
			if ((diffMs) <= (1000 * 60 * 60) && !Device.system.phone) {
 
				//Будем обновлять состояние каждые 60 секунд
				setInterval(function () {
					try {
						var time = moment(oElem.getModel("nickcode").getData().time); //время из модели
						diffMs = nowDate.diff(time); //посчитаем разницу между временем из модели и текущим временем
						if (diffMs < 3600000) {
							var diffTime = time.fromNow();
								oElem.setText(diffTime); //запишем время
							}
					} catch (err) {
							//console.log("error");
					}
				}, 60000);
 
					return date.fromNow();
			} else {
				return date.format("HH:mm");
			}
		} else if (nowDate.format("DD.MM.YY") === yesterday.format("DD.MM.YY")) { //Вчера
			return "Вчера";
		} else { //В остальных случаях
			return date.format("DD MMM");
		}
	}
};
 
return Formatter;
}, true);

Выглядеть это будет следующим образом:

Если загрузить страницу:

Подождем минуту, значение автоматически обновится:

Подождем две минуты:

Если не выключать компьютер на ночь 🙂 :

Вот таким вот простым методом в sapUI5 можно импортировать различные сторонние js библиотеки.