add food substitutions

vue/src/components/Badges/OnHand.vue

@@ -1,13 +1,6 @@
 <template>
     <span>
-        <b-button
-            class="btn text-decoration-none fas px-1 py-0 border-0"
-            variant="link"
-            v-b-popover.hover.html
-            :title="[onhand ? $t('FoodOnHand', { food: item.name }) : $t('FoodNotOnHand', { food: item.name })]"
-            :class="[onhand ? 'text-success fa-clipboard-check' : 'text-muted fa-clipboard']"
-            @click="toggleOnHand"
-        />
+        <b-button v-if="!item.ignore_shopping" class="btn text-decoration-none fas px-1 py-0 border-0" variant="link" v-b-popover.hover.html :title="Title" :class="IconClass" @click="toggleOnHand" />
     </span>
 </template>
 
@@ -25,6 +18,26 @@ export default {
             onhand: false,
         }
     },
+    computed: {
+        Title: function () {
+            if (this.onhand) {
+                return this.$t("FoodOnHand", { food: this.item.name })
+            } else if (this.item.substitute_onhand) {
+                return this.$t("SubstituteOnHand")
+            } else {
+                return this.$t("FoodNotOnHand", { food: this.item.name })
+            }
+        },
+        IconClass: function () {
+            if (this.onhand) {
+                return "text-success fa-clipboard-check"
+            } else if (this.item.substitute_onhand) {
+                return "text-warning fa-clipboard-check"
+            } else {
+                return "text-muted fa-clipboard"
+            }
+        },
+    },
     mounted() {
         this.onhand = this.item.food_onhand
     },