баннер с обратным отсчетом

api/v1/serializers/content.py

@@ -36,6 +36,9 @@ class BannerSerializer(serializers.ModelSerializer):
             'url',
             'image',
             'use',
+            'color',
+            'stretch_image',
+            'future_date',
             'created_at',
             'update_at',
         )

web/src/components/blocks/Countdown.vue

@@ -6,7 +6,7 @@
         <div>{{ days[1] }}</div>
       </div>
       <div class="banner__countdown-descr">
-        Дней
+        {{ rupluralize(+days, ['День', 'Дня', 'Дней'], false) }}
       </div>
     </div>
     <div class="banner__countdown-delim"></div>
@@ -17,7 +17,7 @@
         <div>{{ hours[1] }}</div>
       </div>
       <div class="banner__countdown-descr">
-        Часов
+        {{ rupluralize(+hours, ['Час', 'Часа', 'Часов'], false) }}
       </div>
     </div>
     <div class="banner__countdown-delim">:</div>
@@ -28,7 +28,7 @@
         <div>{{ minutes[1] }}</div>
       </div>
       <div class="banner__countdown-descr">
-        Минут
+        {{ rupluralize(+minutes, ['Минута', 'Минуты', 'Минут'], false) }}
       </div>
     </div>
     <div class="banner__countdown-delim">:</div>
@@ -39,7 +39,7 @@
         <div>{{ seconds[1] }}</div>
       </div>
       <div class="banner__countdown-descr">
-        Секунд
+        {{ rupluralize(+seconds, ['Секунда', 'Секунды', 'Секунд'], false) }}
       </div>
     </div>
   </div>
@@ -47,6 +47,7 @@
 
 <script>
     import moment from 'moment';
+    import {rupluralize} from '../../js/utils'
 
     export default {
         name: "Countdown",
@@ -58,6 +59,7 @@
             minutes: '00',
             seconds: '00',
             i: 0,
+            rupluralize: rupluralize,
         }),
 
         beforeDestroy(){

web/src/js/utils.js

@@ -1,7 +1,10 @@
-export const rupluralize = (value, args) => {
+export const rupluralize = (value, args, addValue=true) => {
     let digit = Math.trunc(value) + '';
     digit = digit[digit.length - 1];
-    return value + ' ' + args[digit == '1' ? 0 : ('234'.search(digit) > -1 ? 1 : 2)];
+    return (addValue ? value + ' ' : '') +
+      args[(+value > 10 && +value < 20)
+        ? 2
+        : (digit == '1' ? 0 : ('234'.search(digit) > -1 ? 1 : 2))];
 }
 
 export const loadScript = (url, onload) => {