@@ -29,30 +29,142 @@ export default {
2929 name: ' PoiMarker'
3030 props: {
3131 poi: { type: Object , required: true },
32- map: { type: Object , required: true }, // Pass map instance
32+ map: { type: Object , required: true },
3333 },
3434 data () {
35- return { /* keep existing data */
35+ return {
36+ recentImagePath: imagePath (' maps' ' recent.svg'
37+ triangleSimagePath: imagePath (' maps' ' triangle-s.svg'
38+ triangleEPath: imagePath (' maps' ' triangle-e.svg'
39+ mailImagePath: imagePath (' maps' ' mail.svg'
40+ linkImagePath: imagePath (' maps' ' link.svg'
41+ ohOpen: false ,
42+ }
3643 },
37- computed: { /* keep existing computeds */
44+ computed: {
45+ tooltipContent () {
46+ return this .poi .namedetails ? .name || this .poi .display_name
47+ },
48+ // OPENING HOURS
49+ myOpeningHours () {
50+ return this .poi .extratags ? .opening_hours
51+ ? new OpeningHours (this .poi .extratags .opening_hours , this .poi )
52+ : null
53+ },
54+ ohChangeDt () {
55+ return this .myOpeningHours ? .getNextChange ()
56+ },
57+ formattedOhChangeDt () {
58+ return moment (this .ohChangeDt ).format (' HH:mm'
59+ },
60+ ohDtDiff () {
61+ const currentDt = new Date ()
62+ return (this .ohChangeDt .getTime () - currentDt) / 60000
63+ },
64+ ohIsCurrentlyOpen () {
65+ return this .myOpeningHours .getState ()
66+ },
67+ ohIntervals () {
68+ const todayStart = new Date ()
69+ todayStart .setHours (0 )
70+ todayStart .setMinutes (0 )
71+ todayStart .setSeconds (0 )
72+ const sevDaysEnd = new Date (todayStart)
73+ const sevDaysMs = 7 * 24 * 60 * 60 * 1000
74+ sevDaysEnd .setTime (sevDaysEnd .getTime () + sevDaysMs)
75+ const intervals = this .myOpeningHours .getOpenIntervals (todayStart, sevDaysEnd)
76+ // intervals should be 7, if 8, then first entry is interval after 00:00:00 from last day
77+ if (intervals .length === 8 ) {
78+ // set end time of last element to end time of first element and remove it
79+ intervals[7 ][1 ] = intervals[0 ][1 ]
80+ intervals .splice (0 , 1 )
81+ }
82+ const resultIntervals = intervals .map ((interval ) => {
83+ return {
84+ startTime: moment (interval[0 ]).format (' HH:mm'
85+ endTime: moment (interval[1 ]).format (' HH:mm'
86+ day: moment (interval[1 ]).format (' dddd'
87+ selected: false ,
88+ }
89+ })
90+ resultIntervals[0 ].selected = true
91+ return resultIntervals
92+ },
93+ // ADDRESS
94+ city () {
95+ const poi = this .poi
96+ return (poi .address .city || poi .address .town || poi .address .village )
97+ ? poi .address .city
98+ ? poi .address .city
99+ : poi .address .town
100+ ? poi .address .town
101+ : poi .address .village
102+ ? poi .address .village
103+ : ' '
104+ : ' '
105+ },
106+ road () {
107+ let road = this .poi .address ? .road || ' '
108+ if (road && this .poi .address ? .house_number ) {
109+ road += ' ' + this .poi .address .house_number
110+ }
111+ return road
112+ },
113+ header () {
114+ return this .poi .namedetails ? .name || this .road || this .city
115+ },
116+ desc () {
117+ const poi = this .poi
118+ let desc = ' '
119+ let needSeparator = false
120+ // add road to desc if it is not heading and exists (isn't heading, if 'name' is set)
121+ if (poi .namedetails ? .name && this .road ) {
122+ desc = this .road
123+ needSeparator = true
124+ }
125+ if (poi .address .postcode ) {
126+ if (needSeparator) {
127+ desc += ' , '
128+ needSeparator = false
129+ }
130+ desc += poi .address .postcode
131+ }
132+ if (this .city ) {
133+ if (needSeparator) {
134+ desc += ' , '
135+ needSeparator = false
136+ } else if (desc .length > 0 ) {
137+ desc += ' '
138+ }
139+ desc += this .city
140+ }
141+ // assume that state is only important for us addresses
142+ if (poi .address ? .state && poi .address ? .country_code === ' us'
143+ if (desc .length > 0 ) {
144+ desc += ' '
145+ }
146+ desc += ' (' + poi .address .state + ' )'
147+ }
148+ return desc
149+ },
150+ },
38151 created () {
39152 this .marker = null ; // Non-reactive
40153 },
41154 mounted () {
42- // 1. Create the marker
43155 this .marker = L .marker ([this .poi .lat , this .poi .lon ]).addTo (this .map );
44156
45- // 2. Bind the tooltip
46157 this .marker .bindTooltip (this .tooltipContent );
47158
48- // 3. Bind THIS Vue component's HTML element as the popup content!
49159 this .marker .bindPopup (this .$el );
50160 },
51161 beforeUnmount () {
52162 if (this .marker && this .map ) {
53163 this .map .removeLayer (this .marker );
54164 }
55165 },
56- methods: { /* keep existing methods */
166+ methods: {
167+
168+ }
57169}
58170< / script>
0 commit comments