LIL-93 Счетчик отложенных курсов

apps/course/templates/course/_items.html

@@ -7,7 +7,7 @@
     <div class="courses__label courses__label_fav"></div>
     {% endif %} {% if course.is_deferred_start %}
     <div class="courses__soon">
-      <div class="courses__left">До запуска курса осталось:</div>
+      <div class="courses__left">Курс начнется:</div>
       <div class="courses__time">{{ course.deferred_start_at_humanize }}</div>
     </div>
     <div class="courses__label courses__label_clock"></div>

project/templates/lilcity/index.html

@@ -47,7 +47,8 @@
 
   </script>
   <script>
-    LIL_SERVER_TIME = "{% now 'U' %}"
+    LIL_SERVER_TIME = {% now 'U' %};
+    LIL_SERVER_TIME_DIFF = Math.floor((new Date().getTime()) / 1000) - LIL_SERVER_TIME;
   </script>
 </head>
 

project/templates/lilcity/main.html

@@ -460,8 +460,8 @@
             <img class="courses__pic" src="{% static 'img/pic-1.jpg' %}" />
             <div class="courses__view">Подробнее</div>
             <div class="courses__soon">
-              <div class="courses__left">До запуска курса осталось:</div>
-              <div class="courses__time">16 часов 13 минут</div>
+              <div class="courses__left">Курс начнется:</div>
+              <div class="courses__time">через 16 часов 13 минут</div>
             </div>
             <div class="courses__label courses__label_clock"></div>
           </a>

web/package-lock.json

@@ -7073,6 +7073,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.20.1.tgz",
+      "integrity": "sha512-Yh9y73JRljxW5QxN08Fner68eFLxM5ynNOAw2LbIB1YAGeQzZT8QFSUvkAz609Zf+IHhhaUxqZK8dG3W/+HEvg=="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",

web/package.json

@@ -46,6 +46,7 @@
   "dependencies": {
     "history": "^4.7.2",
     "jquery": "^3.3.1",
+    "moment": "^2.20.1",
     "owl.carousel": "^2.2.0",
     "validator": "^9.2.0"
   }

web/src/js/modules/courses.js

@@ -1,10 +1,22 @@
 import $ from 'jquery';
+import moment from 'moment';
 import createHistory from 'history/createBrowserHistory';
 
+moment.locale('ru');
+
 // Создаем объект history API
 const history = createHistory();
 
 $(document).ready(function () {
+    // Обработчик отложенных курсов
+    setInterval(() => {
+        $('div[data-future-course]').each((_, element) => {
+            const courseTime = parseInt($(element).attr('data-future-course-time')) + LIL_SERVER_TIME_DIFF;
+            const relativeTimeString = moment(courseTime, 'X').fromNow();
+            $(element).find('div.courses__time').text(relativeTimeString);
+        });
+    }, 1000);
+
     // Обработчик кнопки "Подгрузить еще"
     $('.courses').on('click', 'button.load__btn', function () {
         load_courses($(this).attr('data-next-page-url'), false);

web/src/templates/layouts/_mixins.pug

@@ -11,7 +11,7 @@ mixin course(fav, color, clock)
 				.courses__label.courses__label_fav
 			if clock
 				.courses__soon
-					.courses__left До запуска курса осталось:
+					.courses__left Курс начнется:
 					.courses__time 16 часов 13 минут
 				.courses__label.courses__label_clock
 		.courses__details