Resolve "Door2Door/ Flyer: Feedback of which streets are started"

see #10

Let's go through the changes indicated by the diff for EventAreaOverview.vue:

1. Imports

 import {
   ionCheckmarkCircle,
   ionCheckmarkCircleOutline,
-  ionChevronForward
+  ionChevronForward,
+  ionPlayCircle
 } from '@quasar/extras/ionicons-v5'

• Added ionPlayCircle: This import statement adds ionPlayCircle from @quasar/extras/ionicons-v5, indicating a new icon resource imported into the component.

2. Function Addition

+/**
+ * Check if the street has been started by checking if any of the addresses
+ * have been completed.
+ *
+ * @param street The street to check
+ */
+function streetStarted(street: StreetDetails) {
+  return street.addresses.some(({ osm_id }) =>
+    completedTargetIds.value.includes(osm_id.toString())
+  )
+}

• streetStarted function: This new function checks if any address in a given street has been completed by comparing its osm_id with entries in completedTargetIds.value.

3. Code Comment Update

   // FIXME(peter) Logicalwise the osm_id and completedTargetIds should have
-  //  the same time, it seems that the BE is communicating the wrong type
+  //  the same type, it seems that the BE is communicating the wrong type
   //  for one of them.

• Comment change: The comment now correctly mentions the type issue from the backend regarding osm_id and completedTargetIds.

4. Template Changes

                 <QIcon
                   v-if="streetCompleted(street)"
-                  class="col finished-icon item-icon"
+                  class="col finished-icon item-icon progress-icon"
                   :name="ionCheckmarkCircle"
                 />
+                <QIcon
+                  v-else-if="streetStarted(street)"
+                  class="col started-icon item-icon progress-icon"
+                  :name="ionPlayCircle"
+                />

• Conditional rendering: An additional <QIcon> component is added with v-else-if conditionally rendering ionPlayCircle icon when streetStarted(street) is true. It uses specific classes (started-icon, item-icon, progress-icon) for styling.

5. Styling Changes

 .progress-icon {
   margin-right: 1rem;
 }

 .finished-icon {
   color: #4caf50;
 }

+.started-icon {
+  color: #ff9800;
+}

• CSS Classes: New styles (progress-icon, started-icon) are added. progress-icon sets a margin, while started-icon specifies a color (#ff9800) for the started street indicator.

Summary

These changes enhance EventAreaOverview.vue by:

• Importing a new icon (ionPlayCircle).
• Adding logic to check if a street is started (streetStarted function).
• Adjusting comments for clarity on backend communication.
• Updating the template to display different icons based on street status.
• Adding and adjusting CSS classes for visual styling of icons.

These modifications likely improve the user interface to better indicate the status of streets within the event area overview.