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

Размещен в sapui5 01.03.2020 18:21
Теги: , , , , , ,

Рано или поздно перед любым программистом становится задача вывода даты и времени в каком-либо формате.
Форматирование чисел и даты стандартными средствами 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

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

/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";
/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 библиотеки.

Оставить комментарий:

  1. Nick

    опубликован 14.08.2020 в 09:49

    Добрый день!

    Интересует ли Вас выведение низко- и средне- частотных запросов Вашего сайта nickcode.ru в поиске Гугла и Яндекса? В чем отличние моей услуги от сео оптимизации?
    Главное отличие в том, что я не не занимаюсь оптимизацией страниц Вашего сайта под большое количество различных ключевых слов, а создаю под каждое ключевое слово собственные страницы в соц.сети и в блог-системе.
    А как Вы наверняка знаете социальные сети и блог- платформы отлично ранжируются и имеют высокий PR и ТИЦ. И следовательно страницы созданные под ключевые слова, хорошо выходят в ТОП и передают вес сайту.
    В рамках услуги Вы получаете 150 страниц из соц.сети VK, 150 страниц-тегов из блог-системы. Дополнительно я создаю 700 страниц, которые ссылаются на страницы с ключевыми запросами тем самым повышая их вес.

    Услуга оплачивается единоразово! Оплата после исполнения заказа! Услуга выполняется под ключ, от Вас достаточно только пожелания по ключевым словам. Страницы будут качественно оформлены с фотографиями ваших товаров или услуг, названием компании, тематическими текстами, контактной информацией и ссылками.
    Перед постингом вся информация согласовывается с Вами.

    Стоимость услуги 3500.

    Если Вас у возникли вопросы по этой услуге — напишите мне, я покажу примеры по размещенным проектам и примеры вывода в поиске в Гугле и Яндексе данных страниц.