Corrects deviations from spec in glance badges (#656)

Display lock icon if there are locks, whatever their state,
according to the spec in #556. Fixes #651.

Add missing alarms (not in the title like #556 but in
the glance area.

Don't consider non-finite values when computing measurement averages. Fixes #650.

Change styles of setpoint badge. Fixes #649.

Signed-off-by: Yannick Schaus <github@schaus.net>

bundles/org.openhab.ui/web/src/components/cards/glance/location/measurement-badge.vue

@@ -4,7 +4,7 @@
     <f7-icon v-else-if="config.icon.indexOf('f7:') === 0" :f7="config.icon.replace('f7:', '')" :color="invertColor ? 'black' : 'white'" class="f7-icon-badge" size="20" />
     <!-- <oh-icon v-if="config.icon.indexOf('oh:') === 0 && config.stateOff" v-show="!reduce" icon="config.icon.replace('oh:', '')"  :state="config.stateOff" class="oh-icon-badge" width="20" height="20" /> -->
     <span class="glance-label" v-show="reduce">{{reduce}} {{config.unit}}</span>
-    <span class="glance-label" v-show="reduceAux"><small>({{reduceAux}} {{config.unit}})</small></span>
+    <span class="glance-label" v-show="reduceAux" style="opacity: 0.7">({{reduceAux}} {{config.unit}})</span>
   </span>
 </template>
 
@@ -20,6 +20,8 @@
   .glance-label
     line-height 20px
     vertical-align top
+  .glance-label-aux
+    vertical-align super
 </style>
 
 <script>
@@ -71,10 +73,10 @@ export default {
       }
     },
     map () {
-      return this.query.map((item) => this.store[item.name].state)
+      return this.query.map((item) => this.store[item.name].state).filter((state) => Number.isFinite(Number.parseFloat(state.split(' ')[0])))
     },
     mapAux () {
-      return this.queryAux.map((item) => this.store[item.name].state)
+      return this.queryAux.map((item) => this.store[item.name].state).filter((state) => Number.isFinite(Number.parseFloat(state.split(' ')[0])))
     },
     reduce () {
       const ret = this.map.reduce((avg, state, arr, { length }) => {

bundles/org.openhab.ui/web/src/components/cards/glance/location/status-badge.vue

@@ -1,13 +1,22 @@
 <template>
-  <span class="padding-right location-status-badge" v-show="reduce" :class="{ invert: invertColor }">
-    <oh-icon v-if="config.icon.indexOf('oh:') === 0" :icon="config.icon.replace('oh:', '')" :state="config.state" class="oh-icon-badge" width="20" height="20" />
+  <f7-chip v-if="type === 'alarms' && reduce > 0" class="alarm-badge" color="red" icon-f7="exclamationmark_triangle_fill">{{reduce}}</f7-chip>
+  <span v-else class="padding-right location-status-badge" v-show="reduce || (type === 'lock' && map.length > 0)" :class="{ invert: invertColor }">
+    <oh-icon v-if="config.icon.indexOf('oh:') === 0 && reduce > 0" :key="type" :icon="config.icon.replace('oh:', '')" :state="config.state" class="oh-icon-badge" width="20" height="20" />
     <f7-icon v-else-if="config.icon.indexOf('f7:') === 0" :f7="config.icon.replace('f7:', '')" :color="invertColor ? 'black' : 'white'" class="f7-icon-badge" size="20" />
-    <!-- <oh-icon v-if="config.icon.indexOf('oh:') === 0 && config.stateOff" v-show="!reduce" icon="config.icon.replace('oh:', '')"  :state="config.stateOff" class="oh-icon-badge" width="20" height="20" /> -->
+    <oh-icon v-if="config.icon.indexOf('oh:') === 0 && config.stateOff && reduce < 1" :key="type + 'off'" :icon="config.icon.replace('oh:', '')"  :state="config.stateOff" class="oh-icon-badge" width="20" height="20" />
     <span class="glance-label" v-show="reduce > 1">{{reduce}}</span>
   </span>
 </template>
 
 <style lang="stylus">
+.alarm-badge
+  vertical-align top !important
+  margin-right 7px
+  margin-top 0
+.ios .alarm-badge
+  margin-top -2px
+.md .alarm-badge
+  margin-top -7px
 .location-status-badge
   .oh-icon-badge
     filter brightness(100)
@@ -29,6 +38,7 @@ export default {
   data () {
     return {
       badgeConfigs: {
+        alarms: { icon: 'f7:exclamationmark_triangle_fill' },
         lights: { icon: 'oh:lightbulb' },
         windows: { icon: 'oh:window', state: 'open' },
         doors: { icon: 'oh:door', state: 'open' },
@@ -143,6 +153,8 @@ export default {
           ]
           if (points.length) return points
           return equipment.filter((e) => e.points.length === 0).map((e) => e.item)
+        case 'alarms':
+          return findPoints(this.element.properties, 'Point_Alarm', true)
         default:
           return []
       }

bundles/org.openhab.ui/web/src/components/cards/location-card.vue

@@ -6,7 +6,7 @@
         <generic-widget-component :context="childContext(slotComponent)" v-for="(slotComponent, idx) in context.component.slots.glance" :key="'glance-' + idx" @command="onCommand" />
       </div>
       <div class="location-stats margin-top" :class="config.invertText ? 'invert-text' : ''" v-if="!config.disableBadges">
-        <span v-for="badgeType in ['lights', 'windows', 'doors', 'garagedoors', 'blinds', 'presence', 'lock', 'climate', 'screens', 'projectors', 'speakers']" :key="badgeType">
+        <span v-for="badgeType in ['alarms', 'lights', 'windows', 'doors', 'garagedoors', 'blinds', 'presence', 'lock', 'climate', 'screens', 'projectors', 'speakers']" :key="badgeType">
           <status-badge v-if="!config.badges || !config.badges.length || config.badges.indexOf(badgeType) >= 0"
             :store="context.store" :element="element" :type="badgeType" :invert-color="config.invertText" />
         </span>