إضافة عداد تنازلي لموعد انتهاء وقت التسليم

Abdullah Baaqail · 11 مايو

لدي عداد تنازلي لموعد انتهاء وقت التسليم كود javascript يحسب تاريخ محدد مسبقا

اشتغل Laravel وأريد جلب التاريخ من حقل الداتابيس homework->deadline$

ملف ال show.blade.php

<tbody>
    @foreach ($homeworks as $homework)
        <tr>
            <td>{{ $homework->id }}</td>
            <td>{{ $homework->title }}</td>
            <td>
                <div class="counter wow animate__animated animate__fadeInDown">
                    <div id="defaultCountdown">
                    </div>
                </div>
            </td>
        </tr>
    @endforeach
</tbody>

كود ال javascript

<script src="assest/JavaScript/jquery-3.1.1.min.js"></script>
<script src="assest/bootstrap/js/bootstrap.min.js"></script>

<script src="assest/jquery.countdown/js/jquery.plugin.min.js"></script>
<script src="assest/jquery.countdown/js/jquery.countdown.min.js"></script>
<script src="assest/jquery.countdown/js/jquery.countdown-ar.js"></script>
<script>
    $(function() {
        var austDay = new Date();
        austDay = new Date(austDay.getFullYear() + 1, austDay.getMonth() - 12, 13);
        $('#defaultCountdown').countdown({
            until: austDay,
            format: 'odHMS'
        });
        $('#year').text(austDay.getFullYear());
    });
</script>

ملف ال HomeworkController.php

public function show($id)
{
    $material = Material::find($id);
    $homeworks = Homework::all();
    return view('homeworks.show', compact('material', 'homeworks'));
}

create date

<div class="form-group">
    <label for="deadline">آخر موعد للتسليم*</label>
    <input type="datetime-local" id="deadline" name="deadline"
        value="{{ old('deadline') }}"
        class="form-control @error('deadline') is-invalid @enderror">
    @error('deadline')
        <span class="invalid-feedback">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

jquery.countdown.min.js jquery.countdown-ar.js jquery.plugin.min.js

تم التعديل في 11 مايو بواسطة Abdullah Baaqail

عبد الوهاب بومعراف · 11 مايو

للوصول لتلك النتيجة يجب عليك تعديل كود JavaScript ليقوم بتحديث العداد تلقائيا لكل واجب منزلي وفقا للتاريخ المخزن في الحقل deadline تحتاج إلى إضافة عنصر معرّف فريد لكل عداد تنازلي داخل الحلقة لكل واجب، انتقل إلى ملف show.blade.php وهناك ستستخدم ذلك المعرّف لربط كل عداد تنازلي بتاريخ الانتهاء الخاص به.

هذا هو الكود الخاص به:

<tbody>
@foreach ($homeworks as $homework)
    <tr>
        <td>{{ $homework->id }}</td>
        <td>{{ $homework->title }}</td>
        <td>
            <div class="counter wow animate__animated animate__fadeInDown">
                <div id="countdown{{ $homework->id }}"></div>
            </div>
        </td>
    </tr>
@endforeach
</tbody>

وذلك غير كاف بعد، لأنه يتوجب عليك تعديل شيفرة الجافا سكريبت ليأخذ التاريخ من كل عنصر div يتم إنشاؤه ويحوله إلى تاريخ يمكن استخدامه بواسطة المكتبة jquery.countdown وبعد التعديل يصبح:

<script src="assest/JavaScript/jquery-3.1.1.min.js"></script>
<script src="assest/bootstrap/js/bootstrap.min.js"></script>
<script src="assest/jquery.countdown/js/jquery.plugin.min.js"></script>
<script src="assest/jquery.countdown/js/jquery.countdown.min.js"></script>
<script src="assest/jquery.countdown/js/jquery.countdown-ar.js"></script>

<script>
$(function() {
    @foreach ($homeworks as $homework)
    var deadline = new Date('{{ $homework->deadline }}');
    $('#countdown{{ $homework->id }}').countdown({
        until: deadline,
        format: 'odHMS'
    });
    @endforeach
});
</script>

قد تواجهك مشكلة أخرى، لهذا تأكد من أن تنسيق تاريخ ووقت deadline في قاعدة البيانات متوافق مع JavaScript. يجب أن يكون تنسيق الوقت ISO 8601 ليتم تفسيره بشكل صحيح بواسطة الدالة new Date().

محمد عاطف17 · 11 مايو

اذا كنت تريد انشاء واحد او اكثر من عداد واحد فيجب استبدال ال id بال class حتى نستطيع التعامل مع جميع العدادات.

ووضع وقت العداد الذى يتم اعادته من قاعدة البيانات فى العنصر عن طريق خاصية ال data .

الان هذا كود show.blade.php

<tbody>
    @foreach ($homeworks as $homework)
        <tr>
            <td>{{ $homework->id }}</td>
            <td>{{ $homework->title }}</td>
            <td>
                <div class="counter wow animate__animated animate__fadeInDown">
                    <div class="defaultCountdown" data-date="{{$homework->deadline}}">
                    </div>
                </div>
            </td>
        </tr>
    @endforeach
</tbody>

فى الكود السابق قمنا خاصية data-date للعنصر وهى الآن تحتوى على ال deadline الذى يأتى من قاعدة البيانات .

والآن هذا هو كود الجافاسكريبت .

<script src="assest/JavaScript/jquery-3.1.1.min.js"></script>
<script src="assest/bootstrap/js/bootstrap.min.js"></script>

<script src="assest/jquery.countdown/js/jquery.plugin.min.js"></script>
<script src="assest/jquery.countdown/js/jquery.countdown.min.js"></script>
<script src="assest/jquery.countdown/js/jquery.countdown-ar.js"></script>
<script>
   $(function () {
      $('.defaultCountdown').each(function (i) {
        const time = new Date($(this).data('date'));                
        $(this).countdown({
          until: time,
          format: 'odHMS'
        });
      })
    });
</script>

هنا قمنا بعمل حلقة تكرار على العناصر التى تحتوى على السمة defaultCountdown ثم انشاء التاريخ عن طريق استرجاع القيمة من خاصية ال data-date و من ثم إنشاء العداد .

والآن سيتم انشاء اى عدد من العدادات على حسب ما يتم استرجاعه من قاعدة البيانات

إضافة عداد تنازلي لموعد انتهاء وقت التسليم

السؤال

Abdullah Baaqail

2 أجوبة على هذا السؤال

Recommended Posts

عبد الوهاب بومعراف

محمد عاطف17

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية