Vue.js Dynamic Work Loop Simulation

This challenge focuses on implementing a dynamic work loop within a Vue.js application using TypeScript. You will create a component that simulates a task that takes a variable amount of time to complete, allowing users to control the simulation's speed and see its progress in real-time. This is a common pattern for managing asynchronous operations or background processes in a user-friendly way.

Problem Description

You need to build a Vue.js component in TypeScript that simulates a work loop. This loop will process a series of "tasks" (represented by simple numbers for this challenge). The user should be able to:

1. Start the work loop: Initiate the processing of tasks.
2. Stop the work loop: Halt the processing at any time.
3. Control the speed: Adjust the delay between processing each task, effectively controlling how fast the loop runs.
4. Visualize progress: Display the current task being processed and the total number of tasks completed.

Key Requirements:

• The component should maintain a list of tasks to be processed.
• A mechanism should exist to iterate through these tasks, processing one at a time with a configurable delay.
• The user interface should provide buttons to start and stop the loop, and a slider or input field to adjust the delay.
• The UI must dynamically update to show the "Current Task" being processed and "Tasks Completed."
• The work loop should gracefully handle being stopped and resumed.
• The delay should be represented in milliseconds.

Expected Behavior:

When the "Start" button is clicked, the component begins iterating through its task list. Each task is "processed" (in this case, simply displaying it as the current task) after a delay determined by the user's speed setting. The "Tasks Completed" count increments with each processed task. Clicking "Stop" pauses the loop, and clicking "Start" again resumes from where it left off.

Edge Cases:

• Starting the loop when there are no tasks.
• Stopping the loop when it's already stopped.
• Adjusting the speed while the loop is running.
• What happens if the delay is set to 0 or a very small number? (The simulation should still work, though potentially very fast).

Examples

Example 1:

• Initial State:
  • Tasks: [1, 2, 3, 4, 5]
  • Delay: 500 ms
  • Current Task: None
  • Tasks Completed: 0
• User Action: Clicks "Start"
• After 500ms:
  • Current Task: 1
  • Tasks Completed: 1
• After another 500ms:
  • Current Task: 2
  • Tasks Completed: 2
• ... and so on.

Example 2:

• State:
  • Tasks: [1, 2, 3, 4, 5]
  • Delay: 500 ms
  • Current Task: 3
  • Tasks Completed: 3
• User Action: Clicks "Stop"
• Result:
  • The loop halts.
  • Current Task: 3 (remains from the last processed task)
  • Tasks Completed: 3
• User Action: Clicks "Start" again.
• After 500ms:
  • Current Task: 4
  • Tasks Completed: 4

Example 3: Empty Task List

• Initial State:
  • Tasks: []
  • Delay: 500 ms
  • Current Task: None
  • Tasks Completed: 0
• User Action: Clicks "Start"
• Result:
  • Nothing happens. The loop doesn't start as there are no tasks.
  • Current Task: None
  • Tasks Completed: 0

Constraints

• The tasks array will contain up to 100 numbers.
• The delay value will be an integer between 0 and 2000 milliseconds (inclusive).
• The component should be implemented using Vue 3 Composition API with TypeScript.
• Avoid using external libraries specifically designed for managing work loops; focus on core JavaScript setTimeout and Vue reactivity.
• The UI should be responsive and update smoothly.

Notes

• You'll likely need to manage the state of the loop (running or stopped) and the index of the current task using Vue's reactivity system (ref or reactive).
• setTimeout and clearTimeout will be crucial for controlling the delay and pausing/resuming the loop.
• Consider how to handle the timeoutId returned by setTimeout so you can clear it when stopping the loop.
• The "tasks" themselves can be simple numbers. The focus is on the loop mechanism and state management.
• Think about how to make the "Start" button behave correctly – it should resume the loop, not restart from the beginning if stopped midway.