إخفاء زر تسليم الواجب عند انتهاء الفترة المحددة

عليك إضافة وظيفة callback التي تتم عند انتهاء العداد وهي onExpiry في مكتبة jQuery Countdown التي تستخدمها.

لكن أولاً، قم بإضافة معرف فريد لكل زر تسليم في ملف show.blade.php:

<td>
    <div class="counter wow animate__animated animate__fadeInDown">
        <div class="defaultCountdown" data-date="{{ $homework->deadline }}">
        </div>
    </div>
</td>
<td>
    <div class="delivery">
        <a href="{{ route('download-file', $homework->id) }}"
            class="btn btn-sm btn-secondary" id="delivery-button-{{ $homework->id }}">
            <i class="fa fa-upload"></i> تسليم
        </a>
    </div>
</td>

ثم، قم بإضافة الوظيفة onExpiry إلى العداد:

<script>
   $(function () {
      $('.defaultCountdown').each(function (i) {
        const time = new Date($(this).data('date'));                
        $(this).countdown({
          until: time,
          format: 'odHMS',
          onExpiry: function() {
            const id = $(this).parent().parent().find('.delivery a').attr('id');
            $('#' + id).hide();
          }
        });
      })
    });
</script>

لاخفاء زر التسليم نستخدم دالة الاستدعاء onExpiry التى توفرها keith-wood countdown.

اولا نضع للعنصر الذى يحوى سمة delivery نضع له id مميز حتى نستطيع من خلاله اخفاء الزر  ونضع على عنصر ال defaultCountdown ال id المرتبط بزر الرفع هكذا .

<td>
    <div class="counter wow animate__animated animate__fadeInDown">
        <div class="defaultCountdown" data-delivery-id="delivery-{{$homework->id}}" data-date="{{ $homework->deadline }}">
        </div>
    </div>
</td>
<td>
    <div class="delivery" id="delivery-{{$homework->id}}">
        <a href="{{ route('download-file', $homework->id) }}"
            class="btn btn-sm btn-secondary">
            <i class="fa fa-upload"></i> تسليم
        </a>
    </div>
</td>

والان فى كود الجافا سكريبت نستخدم التالى .

<script>
    $(function() {
        $('.defaultCountdown').each(function(i) {
            const time = new Date($(this).data('date'));
            const id = $(this).data('deliveryId')
            $(this).countdown({
                until: time,
                format: 'odHMS',
                onExpiry:function(e){
                  $(`#${id}`).hide()
                }
            });
        })
    });
</script>

والآن مع انتهاء اى عداد سيتم اخفاء الزر المرتبط به .

بتاريخ 43 دقائق مضت قال محمد_عاطف:

لاخفاء زر التسليم نستخدم دالة الاستدعاء onExpiry التى توفرها keith-wood countdown.

اولا نضع للعنصر الذى يحوى سمة delivery نضع له id مميز حتى نستطيع من خلاله اخفاء الزر  ونضع على عنصر ال defaultCountdown ال id المرتبط بزر الرفع هكذا .

<td>
    <div class="counter wow animate__animated animate__fadeInDown">
        <div class="defaultCountdown" data-delivery-id="delivery-{{$homework->id}}" data-date="{{ $homework->deadline }}">
        </div>
    </div>
</td>
<td>
    <div class="delivery" id="delivery-{{$homework->id}}">
        <a href="{{ route('download-file', $homework->id) }}"
            class="btn btn-sm btn-secondary">
            <i class="fa fa-upload"></i> تسليم
        </a>
    </div>
</td>

والان فى كود الجافا سكريبت نستخدم التالى .

<script>
    $(function() {
        $('.defaultCountdown').each(function(i) {
            const time = new Date($(this).data('date'));
            const id = $(this).data('deliveryId')
            $(this).countdown({
                until: time,
                format: 'odHMS',
                onExpiry:function(e){
                  $(`#${id}`).hide()
                }
            });
        })
    });
</script>

والآن مع انتهاء اى عداد سيتم اخفاء الزر المرتبط به .

حسنا لماذا لايتم تنفيذ هذه الدالة onExpiry

بتاريخ 6 دقائق مضت قال Abdullah Baaqail:

حسنا لماذا لايتم تنفيذ هذه الدالة onExpiry

 

اعتقد أن هناك لبس لديك . إن الدالة onExpiry سيتم تنفيذها بعد بدء العداد وانتهاء الوقت . ولكنها لن تنفذ اذا لم يبدأ العداد أى ان اذا كان الوقت قد انتهى بالفعل قبل تحميل الصفحة ستجد ان العداد لم يعمل وستجده صفر فى جميع الخانات ولن تنفذ الدالة . 

فهل المشكلة لديك فى تلك النقطه ؟ انه فى بداية الصفحة لا يتم اخفاء زر التحميل ؟

لتجربة الدالة قم بوضع المتغير deadline في قاعدة البيانات بدقيقة زائدة عن الوقت الحالى حتى يتم عد دقيقة فقط وستجد ان الدلة تم تنفيذها واختفى زر التسليم . واخبرنى بالنتيجة بعد ذلك 

بتاريخ 15 دقائق مضت قال محمد_عاطف:

اعتقد أن هناك لبس لديك . إن الدالة onExpiry سيتم تنفيذها بعد بدء العداد وانتهاء الوقت . ولكنها لن تنفذ اذا لم يبدأ العداد أى ان اذا كان الوقت قد انتهى بالفعل قبل تحميل الصفحة ستجد ان العداد لم يعمل وستجده صفر فى جميع الخانات ولن تنفذ الدالة . 

فهل المشكلة لديك فى تلك النقطه ؟ انه فى بداية الصفحة لا يتم اخفاء زر التحميل ؟

لتجربة الدالة قم بوضع المتغير deadline في قاعدة البيانات بدقيقة زائدة عن الوقت الحالى حتى يتم عد دقيقة فقط وستجد ان الدلة تم تنفيذها واختفى زر التسليم . واخبرنى بالنتيجة بعد ذلك 

نعم الوقت انتهى قبل تحميل الصفحة.

عملت واجب جديد وأعطيته توقيت لمدة دقيقة وهذه النتيجة

وهذا بعد الانتهاء

بتاريخ 21 دقائق مضت قال Abdullah Baaqail:

نعم الوقت انتهى قبل تحميل الصفحة.

 

كما توقعت فإن الدالة onExpiry تعمل جيدا المشكلة عند تحميل الصفحة . 

لذلك لنقم بمقارنة التاريخ فى كود ملف ال blade هكذا.

<td>
        <div class="counter wow animate__animated animate__fadeInDown">
            <div class="defaultCountdown" data-delivery-id="delivery-{{ $homework->id }}"
                data-date="{{ $homework->deadline }}">
            </div>
        </div>
    </td>
    <td>
        @if ($homework->deadline > Carbon\Carbon::now())
            <div class="delivery" id="delivery-{{ $homework->id }}">
                <a href="{{ route('download-file', $homework->id) }}" class="btn btn-sm btn-secondary">
                    <i class="fa fa-upload"></i> تسليم
                </a>
            </div>
        @endif
    </td>

والآن سيتم إخفاء الزر عند بداية تحميل الصفحة اذا كان الوقت قد إنقضى

بتاريخ 1 ساعة قال محمد_عاطف:

كما توقعت فإن الدالة onExpiry تعمل جيدا المشكلة عند تحميل الصفحة . 

لذلك لنقم بمقارنة التاريخ فى كود ملف ال blade هكذا.

<td>
        <div class="counter wow animate__animated animate__fadeInDown">
            <div class="defaultCountdown" data-delivery-id="delivery-{{ $homework->id }}"
                data-date="{{ $homework->deadline }}">
            </div>
        </div>
    </td>
    <td>
        @if ($homework->deadline > Carbon\Carbon::now())
            <div class="delivery" id="delivery-{{ $homework->id }}">
                <a href="{{ route('download-file', $homework->id) }}" class="btn btn-sm btn-secondary">
                    <i class="fa fa-upload"></i> تسليم
                </a>
            </div>
        @endif
    </td>

والآن سيتم إخفاء الزر عند بداية تحميل الصفحة اذا كان الوقت قد إنقضى

الدالة Carbon كأنها تتجاهل الساعات والدقائق

بتاريخ 45 دقائق مضت قال Abdullah Baaqail:

الدالة Carbon كأنها تتجاهل الساعات والدقائق

 

يمكنك استبدال هذا السطر 

@if ($homework->deadline > Carbon\Carbon::now())

بالسطر التالى .

@if ($homework->deadline->gt(Carbon\Carbon::now()))

بتاريخ 10 دقائق مضت قال محمد_عاطف:

يمكنك استبدال هذا السطر 

@if ($homework->deadline > Carbon\Carbon::now())

بالسطر التالى .

@if ($homework->deadline->gt(Carbon\Carbon::now()))

 

هذه المشكله حليتها

@php
    $today = Carbon\Carbon::now();
    $last = Carbon\Carbon::parse($homework->deadline);
@endphp
@if ($today->lte($last))

ولكن

في الجافا سكريبت يقارن بالايام وليس بالساعه

لو تلاحظ انه بالرغم انه متبقي كم ساعة من الموعد إلا أن العداد تصفر والزر سيختفي عندما تنتهي هذه الساعات