Resolve "Mark finished houses"

see #72

Explanation of the Changes

src/map/AddressMarker.vue

1. Added done prop to Props interface:

   +  done: boolean

   • Introduced a new boolean property done to indicate the completion status of an address marker.

2. Default value for done prop:

   +  done: () => false

   • Set the default value of done to false.

3. Template update for done prop:

   +          done: props.done

   • Updated the class binding to include the done property, so the marker's appearance changes based on its completion status.

4. CSS styles for the done class:

   +  &.done {
   +    background: #4caf50;
   +    color: white;
   +  }

   • Added styles for the done class to display a green background and white text when the marker is marked as done.

src/pages/event-map/detail/area/metrics/EventAreaMetricsMap.vue

1. Imported useEventDetailStore:

   +import { useEventDetailStore } from '../../EventDetailStoreMixin'

   • Imported the useEventDetailStore composable to access the completion status data.

2. Retrieved completedTargetIds:

   +const { completedTargetIds } = useEventDetailStore()

   • Extracted completedTargetIds from useEventDetailStore, which contains the IDs of completed targets.

3. Passed done prop to AddressMarker:

   +    :done="completedTargetIds.includes(address.osm_id.toString())"

   • Set the done prop on the AddressMarker component based on whether the address.osm_id is in completedTargetIds.

src/pages/event-map/detail/area/street/EventAreaStreetMap.vue

1. Imported useEventDetailStore:

   +import { useEventDetailStore } from '../../EventDetailStoreMixin'

   • Imported the useEventDetailStore composable to access the completion status data.

2. Retrieved completedTargetIds:

   +const { completedTargetIds } = useEventDetailStore()

   • Extracted completedTargetIds from useEventDetailStore, which contains the IDs of completed targets.

3. Passed done prop to AddressMarker:

   +    :done="completedTargetIds.includes(address.osm_id.toString())"

   • Set the done prop on the AddressMarker component based on whether the address.osm_id is in completedTargetIds.

Summary

The changes introduce a new done prop to the AddressMarker component, indicating whether an address marker is marked as completed. This prop is utilized in both EventAreaMetricsMap.vue and EventAreaStreetMap.vue to style markers based on their completion status, using data from the useEventDetailStore composable. The done class is styled with a green background and white text to visually distinguish completed markers.