در شرکت شبکه‌ی الکترونیکی پرداخت کارت که به اختصار شاپرک نامیده می‌شود همه کارها به صورت خودکار و با برنامه‌ریزی دقیق کنترل می‌شوند، کارمندان شاپرک نیاز به یک سیستم قدرتمند برای مدیریت وظایف روزمره خود دارند.
این وظایف می‌توانند شامل هر چیزی مثل آبیاری گیاهان، تنظیم دمای شرکت، گرفتن نسخه پشتیبان از داده‌ها و حتی درست کردن قهوه در زمانی دقیق و مشخص باشند. زمان برای کارمندان این شرکت بسیار مهم است و دقیق‌ترین برنامه‌ریزی لازم است تا کارها در شرکت به خوبی پیش برود. شما، به عنوان برنامه‌نویسان این شرکت، مأموریت دارید تا یک سیستم زمان‌بندی وظایف برای همه‌ی کارمندان ایجاد کنید. این سیستم باید قابلیت مدیریت وظایف را از طریق یک رابط کاربری ساده برای کاربران فراهم کند. سیستم باید قابل اطمینان باشد و بتواند وظایف را حتی پس از بارگذاری مجدد صفحه برنامه‌ریزی و اجرا کند.
ظاهر کلی برنامه به شکل زیر است:
پروژه اولیه
پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.
initial-project.zip
├── assets
│ ├── bg.png
│ └── icon.png
├── index.html
├── styles.css
└── script.js
جزئیات
توابع مورد نیاز
| تابع | تعریف |
|---|---|
addTask |
زمانی که کاربر نام وظیفه، تاریخ و ساعت انجام، وابستگی آن به وظیفه‌های دیگر (در صورت وجود) و مدت زمان اجرای آن به ثانیه را وارد کرد، با کلیک بر روی دکمه Add Task یک وظیفه جدید با وضعیت Scheduled اضافه می‌کند. کاربر نمی‌تواند وظیفه‌ای را در زمان گذشته اضافه کند و در این صورت پیغام Task start time cannot be in the past. را دریافت می‌کند. |
appendTaskToList |
این تابع یک task را به عنوان ورودی دریافت کرده و آن را به جدول وظایف اضافه می‌کند. |
saveTaskToLocalStorage |
این تابع یک task را به عنوان ورودی دریافت کرده و آن را به لیست تسک‌ها در Local Storage اضافه می‌کند. |
loadTasksFromLocalStorage |
این تابع هنگام بارگذاری صفحه فراخوانی می‌شود و وظایف داخل Local Storage را بازیابی کرده و به جدول اضافه می‌کند. |
updateTaskInDOMAndStorage |
زمانی که وظیفه اضافه شود، وضعیت آن Scheduled می‌باشد. زمان اجرای توابع که فرا رسید، وضعیت آن Running می‌شود و پس از پایان وظیفه، وضعیت آن به Done تغییر می‌کند. این تابع یک task را به عنوان ورودی دریافت می‌کند و وظیفه به‌روزرسانی وضعیت وظایف را در لیست و Local Storage برعهده دارد. |
showNotification |
این تابع زمانی که یک وظیفه شروع به اجرا می‌کند و در وضعیت Running قرار می‌گیرد فراخوانی می‌شود و یک message را به عنوان ورودی دریافت می‌کندو یک pop-up با متن Task '${task.name}' has started. و آیکون icon.png به مدت ۳ ثانیه به کاربر نمایش داده می‌شود. هم‌چنین یک Notification با همین متن و آیکون برای او ارسال می‌شود تا اگر کاربر در صفحه نباشد باز هم پیغام را دریافت کند. |
removeTask |
این تابع یک task و سطر مربوط به آن در جدول را به عنوان ورودی دریافت کرده و آن وظیفه را از جدول و Local Storage حذف می‌کند. |
توجه
برای شروع اجرای هر وظیفه، لازم است ابتدا وابستگی آن انجام شده باشد و در وضعیت Done قرار گرفته باشد. بنابراین اگر زمان شروع یک وظیفه فرا رسید، ولی هنوز وابستگی آن انجام نشده بود، وظیفه هنوز اجازه اجرا ندارد و باید تا زمان تکمیل وابستگی خود صبر کند.
راهنمایی
برای دکمه حذف می‌توانید از قطعه کد زیر استفاده کنید و سپس آن را به آخرین سلول سطر مورد نظر در جدول اضافه کنید:
const deleteButton = document.createElement('button');
deleteButton.style = 'font-size:16px;background-color:#a83236;background-image:none;color:#fff;cursor:pointer';
deleteButton.textContent = 'Delete';
خواسته مسئله
در فایل script.js توابع مورد نیاز تعریف شده که شما تنها قادر به پیاده‌سازی توضیحات مسئله در آن هستید.
نکات
- برای تعیین زمان انجام وظایف، نیاز به تاریخ و ساعت دقیق دارید. برای اینکار، از یک فیلد ورودی با تایپ
datetime-localاستفاده شده است. - هر سطر جدول (
tr) باید دارای آیدی برابر با نام وظیفه باشد. - استایل‌های مورد نیاز برای نوتیفیکیشن در انتهای فایل
styles.cssموجود است. - در صورت نیاز می‌توانید توابع بیشتری به فایل جاوااسکریپت اضافه کنید.
نحوه‌ی ارسال پاسخ
پس از اعمال تغییرات در script.js، فایل‌های پروژه را به صورت یک فایل ZIP با ساختار زیر ارسال نمایید.
[your-zip-file-name].zip
├── assets
│ ├── bg.png
│ └── icon.png
├── index.html
├── styles.css
└── script.js
ارسال پاسخ برای این سؤال