Formatting, expansion specs

Author: CodeCasterNL

src/components/MobileBatteryCard.vue

@@ -16,7 +16,7 @@ const b = props.battery
   <div class="mobile-card surface">
     <div class="mobile-card-header">
       <router-link :to="`/batterij/${b.manufacturerSlug}/${b.modelSlug}`" class="mobile-title">
-        <template v-if="showManufacturer">{{ b.manufacturer }} </template>{{ b.model }}
+        <template v-if="showManufacturer">{{ b.manufacturer }}</template> {{ b.model }}
       </router-link>
       <label class="compare-check">
         <input type="checkbox" :checked="isSelected(b.id)" @change="toggle(b.id)" />

src/models/BatteryModel.ts

@@ -155,6 +155,14 @@ export class BatteryModel {
     return (maxKwh && this.data.expansion) ? `${maxKwh.toLocaleString('nl-NL')} kWh` : '-'
   }
 
+  get expansionDimensions(): string {
+    const p = this.data.expansion?.expansionPhysical
+    if (!p?.widthMm && !p?.heightMm && !p?.depthMm) return '-'
+    return `${mmToCm(p.widthMm)} \u00d7 ${mmToCm(p.heightMm)} \u00d7 ${mmToCm(p.depthMm)} cm`
+  }
+
+  get expansionWeightKg(): string { return unitDash(this.data.expansion?.expansionPhysical?.weightKg, 'kg') }
+
   /* Connectivity */
   get supportedP1Meters(): P1MeterRef[] { return this.data.supportedP1Meters ?? [] }
   get p1Meter(): string {

src/views/BatteryDetailView.vue

@@ -120,6 +120,14 @@ if (typeof document !== 'undefined') {
             <dt>Max. totaalcapaciteit</dt>
             <dd>{{ battery.expansionMaxCapacity }}</dd>
           </div>
+          <div class="spec-item">
+            <dt>Afmetingen (B x H x D)</dt>
+            <dd>{{ battery.expansionDimensions }}</dd>
+          </div>
+          <div class="spec-item">
+            <dt>Gewicht</dt>
+            <dd>{{ battery.expansionWeightKg }}</dd>
+          </div>
         </dl>
       </section>