Added support for toggling alerts on family plans

Author: shawnwildermuth

2wr-app/package-lock.json

@@ -41,7 +41,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.32.4",
+    "sass": "~1.32.4",
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-vuetify": "^2.0.9",
     "vue-template-compiler": "^2.6.11",

2wr-app/package.json

@@ -3,7 +3,6 @@
   position: absolute;
   background-color: #fff;
   margin-top: -9px;
-  font-size: 12px;
   padding: 1px;
 }
 

2wr-app/src/assets/app.scss

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-card v-if="!isEditing">
-      <div class="pseudo-text-block-label">{{ label }}</div>
+      <div class="pseudo-text-block-label text-caption">{{ label }}</div>
       <v-flex class="d-flex justify-space-between px-2 py-2">
         <v-card-title v-if="isTitle">{{ theText }}</v-card-title>
         <v-card-text v-if="!isTitle">{{ theText }}</v-card-text>

2wr-app/src/components/common/EditableTextBlock.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <v-card v-if="address">
-      <div class="pseudo-text-block-label">{{ title }}</div>
+      <div class="pseudo-text-block-label  text-caption">{{ title }}</div>
       <v-card-text>
         <v-row class="pl-3 justify-end">
           <v-icon class="pr-2" @click="dialogOpen = true">mdi-pencil</v-icon>
         </v-row>
-        <v-row class="pl-4">
+        <v-row class="pl-4 black--text">
           <div v-if="!formattedAddress"
             ><em>No Address: Click pencil to specify address.</em></div
           >

2wr-app/src/components/prepare/family-plans/address-view.vue

@@ -42,12 +42,13 @@
                 :to="`/prepare/familyplan/${item.id}`"
               >
                 <v-card-title class="d-flex justify-space-between px-2 py-2">
-                  <div>
-                    {{ item.title }}
-                  </div>
-                  <div>
-                    <v-icon class="mr-2">mdi-chevron-right</v-icon>
-                  </div>
+                    <div>
+                    <v-icon v-if="item.allowAlerts">mdi-alarm-light</v-icon>
+                    <v-icon v-if="!item.allowAlerts">mdi-alarm-light-off</v-icon>
+
+                      {{ item.title }}
+                    </div>
+                  <v-icon class="mr-2">mdi-chevron-right</v-icon>
                 </v-card-title>
               </v-card>
             </div>
@@ -66,7 +67,7 @@ import {
   computed,
   defineComponent,
   onMounted,
-  ref,
+  ref
 } from "@vue/composition-api";
 import store from "@/store";
 
@@ -86,8 +87,8 @@ export default defineComponent({
     return {
       currentTab,
       familyPlans,
-      sharedPlans,
+      sharedPlans
     };
-  },
+  }
 });
-</script>
+</script>

2wr-app/src/components/prepare/family-plans/family-plans-list.vue

@@ -1,6 +1,17 @@
 <template>
   <v-container class="py-0" v-if="plan">
     <InfoBar title="Family Plan"></InfoBar>
+    <v-flex>
+      <v-row justify="end" class="py-6" @click="toggleAlerts">
+        <div class="text-button px-6">{{ plan.allowAlerts ? 'Alerts Enabled' : 'Alerts Disabled'}}</div>
+        <v-icon
+          plain
+          large
+          class="mr-6"
+          >{{ plan.allowAlerts ? 'mdi-alarm-light' : 'mdi-alarm-light-off'}}</v-icon
+        >
+      </v-row>
+    </v-flex>
     <EditableTextBlock
       label="Plan Name"
       v-model="plan.title"
@@ -117,7 +128,6 @@ export default defineComponent({
       if (props.planId === "new") {
         plan.value = reactive(new FamilyPlan());
       } else {
-        console.log(props.planId);
         let found = store.getters["familyPlansStore/findFamilyPlan"](
           props.planId
         );
@@ -150,14 +160,25 @@ export default defineComponent({
 
     function ensureNamed(intent, subcomponent) {
       if (store.state.error) store.commit("clearError");
-      if (!plan.value || !plan.value.id || !plan.value.title) {
+      if (!isPlanSaved()) {
         store.commit("setError", `Must name a plan before setting ${intent}`);
       } else {
         router.push(`/prepare/familyplan/${plan.value.id}/${subcomponent}/`);
       }
     }
 
+    function isPlanSaved() {
+      return plan.value && plan.value.id;
+    }
+
+    async function toggleAlerts() {
+      plan.value.allowAlerts = plan.value.allowAlerts ? false : true;
+      if (isPlanSaved()) {
+        await updatePlan();
+      }
+    }
     return {
+      toggleAlerts,
       ensureNamed,
       plan,
       updatePlan,
@@ -167,3 +188,9 @@ export default defineComponent({
   }
 });
 </script>
+
+<style scoped>
+.v-icon {
+  transition: none !important;
+}
+</style>

2wr-app/src/components/prepare/family-plans/family-plans-view.vue

@@ -10,4 +10,6 @@ export default class FamilyPlan {
   routes = [];
   children = [];
   pets = [];
+  allowAlerts = false;
+
 }