Handle no bonus correctly

src/components/MapWebcams.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <MapWebcam v-for="webcam in webcams" :key="webcam.id" :webcam="webcam" :size="size" />
+    <MapWebcam v-for="webcam in webcams" :key="webcam.webcamId" :webcam="webcam" :size="size" />
   </div>
 </template>
 

src/views/Map.vue

@@ -30,7 +30,7 @@
 
       <MapWebcams v-if="mapOptions.webcams" />
     </MglMap>
-    <div v-if="browserNotSupported" class="browser-not-supported">Your browser does not support WebGL, which is required to render this map.</div>
+    <div v-if="browserNotSupported" class="browser-not-supported">Your browser does not support WebGL, which is required to render this map. <strong>iOS 17 users: There is a bug in iOS 17 that can sometimes cause this error. Restarting Safari (closing/killing it completely) resolves the issue temporarily.</strong></div>
     <div v-if="zoomWarning" class="zoom-warning">Zoom in to see all filtered/spotted summits</div>
     <SwisstopoInfo />
     <b-loading :is-full-page="false" :active="filtering || !showMap || !mapStyle" />

src/views/Summit.vue

@@ -20,7 +20,14 @@
       <p class="subtitle is-size-7-mobile">
         <span class="summit-info"><strong>{{ summit.code }}</strong></span>
         <span class="summit-info"><AltitudeLabel :altitude="summit.altitude" /></span>
-        <span class="summit-info"><SummitPointsLabel class="points" :points="summit.points" :bonus="summit.bonusPoints" /> {{ summit.points > 1 ? 'points' : 'point' }}</span>
+        <span v-if="bonusSeason" class="summit-info">
+          <b-tooltip class="season-tooltip" type="is-light" :position="$mq.mobile ? 'is-bottom' : 'is-right'" :label="bonusSeason">
+            <SummitPointsLabel class="points" :points="summit.points" :bonus="summit.bonusPoints" />
+          </b-tooltip> {{ summit.points > 1 ? 'points' : 'point' }}
+        </span>
+        <span v-else class="summit-info">
+          <SummitPointsLabel class="points" :points="summit.points" :bonus="summit.bonusPoints" /> {{ summit.points > 1 ? 'points' : 'point' }}
+        </span>
         <span v-if="activations !== null" class="summit-info"><font-awesome-icon :icon="['far', 'chevron-circle-up']" class="faicon" /> {{ activations.length }} {{ activations.length === 1 ? 'activation' : 'activations' }}<span v-if="myActivations && myActivations.length > 0"> ({{ myActivations.length }} by me)</span></span>
         <span v-if="myChases !== null && myChases.length > 0" class="summit-info"><font-awesome-icon :icon="['far', 'chevron-circle-down']" class="faicon" /> {{ myChases.length }} {{ myChases.length === 1 ? 'chase' : 'chases' }} by me</span>
         <span v-if="isComplete" class="summit-info"><font-awesome-icon :icon="['far', 'check-double']" class="faicon" /> Complete</span>
@@ -384,6 +391,15 @@ export default {
           })
         }))
 
+      loads.push(axios.get('https://api-db2.sota.org.uk/summits/history/' + this.summitCode)
+        .then(response => {
+          if (response.data.BonusPoints > 0) {
+            this.bonusSeason = '+ ' + response.data.BonusSeason
+          } else {
+            this.bonusSeason = null
+          }
+        }))
+
       if (this.myUserId) {
         loads.push(axios.get('https://api2.sota.org.uk/api/qsos/user-chases-by-summit/' + this.summitCode + '/' + this.myUserId)
           .then(response => {
@@ -460,7 +476,8 @@ export default {
       isAddAlertActive: false,
       isAddSpotActive: false,
       enlargeMap: false,
-      alwaysLoadWikipedia: true
+      alwaysLoadWikipedia: true,
+      bonusSeason: null
     }
   }
 }
@@ -597,4 +614,7 @@ export default {
   color: #b5b5b5;
   cursor: not-allowed;
 }
+.season-tooltip {
+  cursor: default;
+}
 </style>