Pre-Sale countdown added.

resources/assets/js/components/AkauntingCountdown.vue

@@ -0,0 +1,201 @@
+<template>
+    <div class="countdown">
+        <section class="flex text-6xl justify-center content-center">
+            <div class="days mr-2 relative">
+                {{ displayDays}}
+                <div class="label text-sm absolut bottom-0"> {{ textDays }} </div>
+            </div>
+
+            <span class="leading-snug">:</span>
+
+            <div class="hours mx-2 relative">
+                {{ displayHours }}
+                <div class="label text-sm absolut bottom-0">{{ textHours }} </div>
+            </div>
+
+            <span class="leading-snug">:</span>
+
+            <div class="minutes mx-2 relative">
+                {{ displayMinutes }}
+                <div class="label text-sm absolut bottom-0"> {{ textMinutes }} </div>
+            </div>
+
+            <span class="leading-snug">:</span>
+
+            <div class="seconds ml-2 relative">
+                {{ displaySeconds }}
+                <div class="label text-sm absolut bottom-0"> {{ textSeconds }} </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'akaunting-countdown',
+
+    props: {
+        textDays: {
+            type: String,
+            default: 'days',
+            description: "Modal header title"
+        },
+
+        textHours: {
+            type: String,
+            default: 'hours',
+            description: "Modal header title"
+        },
+
+        textMinutes: {
+            type: String,
+            default: 'minutes',
+            description: "Modal header title"
+        },
+
+        textSeconds: {
+            type: String,
+            default: 'seconds',
+            description: "Modal header title"
+        },
+
+        year: {
+            type: Number,
+            default: 0,
+            description: "Modal header title"
+        },
+        month: {
+            type: Number,
+            default: 0,
+            description: "Modal header title"
+        },
+        date: {
+            type: Number,
+            default: 0,
+            description: "Input readonly status"
+        },
+        hour: {
+            type: Number,
+            default: 0,
+            description: "Input disabled status"
+        },
+        minute: {
+            type: Number,
+            default: 0,
+            description: "Input value defalut"
+        },
+        second: {
+            type: Number,
+            default: 0,
+            description: "Input model defalut"
+        },
+        millisecond: {
+            type: Number,
+            default: 0,
+            description: "Prepend icon (left)"
+        }
+    },
+
+    data:() => ({
+        displayDays: 0,
+        displayHours: 0,
+        displayMinutes: 0,
+        displaySeconds: 0,
+        loaded: false,
+        expired: false
+    }),
+
+    computed: {
+        _seconds: () => 1000,
+
+        _minutes() {
+            return this._seconds * 60;
+        },
+
+        _hours() {
+            return this._minutes * 60;
+        },
+
+        _days() {
+            return this._hours * 24;
+        },
+
+        end() {
+            return new Date(
+                this.year,
+                this.month,
+                this.date,
+                this.hour,
+                this.minute,
+                this.second,
+                this.millisecond
+            );
+        }
+    },
+
+    mounted() {
+        this.showRemainig();
+    },
+
+    methods: {
+        formatNum: num =>(num < 10 ? '0' + num : num),
+
+        showRemainig() {
+            const timer = setInterval(() => {
+                const now = new Date();
+
+                const distance = this.end.getTime() - now.getTime();
+
+                if (distance < 0) {
+                    clearInterval(timer);
+
+                    this.expired = true;
+
+                    return;
+                }
+
+                const days = Math.floor(distance / this._days);
+                const hours = Math.floor((distance % this._days) / this._hours);
+                const minutes = Math.floor((distance % this._hours) / this._minutes);
+                const seconds = Math.floor((distance % this._minutes) / this._seconds);
+
+                this.displayMinutes = this.formatNum(minutes);
+                this.displaySeconds = this.formatNum(seconds);
+                this.displayHours = this.formatNum(hours);
+                this.displayDays = this.formatNum(days);
+
+                this.loaded = true;
+            }, 1000);
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+.countdown {
+    text-align: justify;
+}
+.relative {
+    position: relative;
+}
+.flex {
+    display: flex;
+}
+.justify-center {
+    justify-content: center;
+}
+.content-center {
+    align-content: center;
+}
+.seconds {
+    max-width: 60px;
+}
+.leading-snug {
+    line-height: 1.375;
+}
+.days, .hours, .minutes, .seconds {
+    text-align: center;
+}
+</style>

resources/assets/js/mixins/global.js

@@ -12,6 +12,7 @@ import AkauntingSelectRemote from './../components/AkauntingSelectRemote';
 import AkauntingDate from './../components/AkauntingDate';
 import AkauntingRecurring from './../components/AkauntingRecurring';
 import AkauntingHtmlEditor from './../components/AkauntingHtmlEditor';
+import AkauntingCountdown from './../components/AkauntingCountdown';
 
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
@@ -33,6 +34,7 @@ export default {
         AkauntingDate,
         AkauntingRecurring,
         AkauntingHtmlEditor,
+        AkauntingCountdown,
         [Select.name]: Select,
         [Option.name]: Option,
         [Steps.name]: Steps,

resources/views/modules/item/pre_sale.blade.php

@@ -61,8 +61,16 @@
 
             <div class="card">
                 <div class="card-body">
-                    <div id="countdown-pre-sale"></div>
+                    <akaunting-countdown id="countdown-pre-sale"
+                        :year="{{ (int) $module->pre_sale_date->year }}"
+                        :month="{{ (int) $module->pre_sale_date->month - 1 }}"
+                        :date="{{ (int) $module->pre_sale_date->day }}"
+                    ></akaunting-countdown>
+                </div>
+            </div>
 
+            <div class="card">
+                <div class="card-body">
                     <div class="text-center">
                         <strong>
                             <div class="text-xl">