meal plan stuff

vue/src/components/Modals/ColorInput.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <b-form-group v-bind:label="field_label" class="mb-3">
+            <b-form-input v-model="new_value" type="color" ></b-form-input>
+            <em v-if="help" class="small text-muted">{{ help }}</em>
+            <small v-if="subtitle" class="text-muted">{{ subtitle }}</small>
+        </b-form-group>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ColorInput",
+    props: {
+        field: { type: String, default: "You Forgot To Set Field Name" },
+        label: { type: String, default: "Text Field" },
+        value: { type: String, default: "" },
+        help: { type: String, default: undefined },
+        subtitle: { type: String, default: undefined },
+        optional: {type: Boolean, default: false},
+    },
+    computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        }
+    },
+    data() {
+        return {
+            new_value: undefined,
+        }
+    },
+    mounted() {
+        this.new_value = this.value
+    },
+    watch: {
+        new_value: function () {
+            this.$root.$emit("change", this.field, this.new_value)
+        },
+    },
+    methods: {},
+}
+</script>

vue/src/components/Modals/GenericModalForm.vue

@@ -19,6 +19,7 @@
                     <file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" :optional="f.optional"/>
                     <small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
                     <date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
+                    <color-input v-if="visibleCondition(f, 'color')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
                     <number-input v-if="visibleCondition(f, 'number')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
                 </div>
                 <template v-slot:modal-footer>