Expanded lunch

src/components/cards/LunchCard.vue

@@ -5,34 +5,101 @@
           No Lunch Data
          <what-is-this>Stevenson.Space relies on quality data dispayed by Stevenson's lunch website. We will promptly restore lunch functionality once data is provided there.</what-is-this>
     </div>
-    <div v-else v-for="(items, name) in lunch" :key="name" class="lunch">
-      <div class="name">{{ name }}</div>
-      <div v-for="item in items" :key="item" class="item">
-        {{ item }}
+    <div v-else>
+      <div v-if="isMorning" class="breakfast">
+        <div class="name">Ala Carte Breakfast</div>
+        <div v-for="item in alBreakfast" :key="item" class="item">
+          {{ item }}
+        </div>
       </div>
+      <div v-for="(items, name) in lunch" :key="name" class="lunch">
+        <div class="name">{{ name }}</div>
+        <div v-for="item in items" :key="item" class="item">
+          {{ item }}
+        </div>
+      </div>
+      <div v-for="(items, name) in miscLunch" :key="name" class="exLunch">
+        <div class="name">{{ name }}</div>
+        <div v-for="item in items" :key="item" class="item">
+          {{ item }}
+        </div>
+      </div>
+    </div>
+    <p>{{ testDate }}</p>
+    <div class="arrow-container">
+      <font-awesome-icon
+        v-show="(expandNums < 3)"
+        :icon="icons.faChevronDown"
+        class="expand arrow"
+        @mousedown="expand"
+      />
+      <font-awesome-icon
+        v-show="(expandNums > 0)"
+        :icon="icons.faChevronUp"
+        class="collapse arrow"
+        @mousedown="condense"
+      />
     </div>
   </card>
 </template>
 
 <script>
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import getLunch from '@/utils/lunch';
 import Card from '@/components/Card.vue';
 import WhatIsThis from '@/components/WhatIsThis.vue';
 import { mapState } from 'pinia';
 import useScheduleStore from '@/stores/schedules';
+import miscData from '@/data/miscLunch.json';
+import { dateToSeconds } from '@/utils/util';
 
 export default {
   components: { Card, WhatIsThis },
   data() {
     return {
       noLunchData: false,
+      icons: {
+        faChevronDown,
+        faChevronUp,
+      },
+      expandNums: 0,
+      alBreakfast: ['Bacon', 'Sausage', 'Potatoes', 'Eggs'],
     };
   },
   computed: {
     ...mapState(useScheduleStore, ['bell', 'date']),
     lunch() {
       return getLunch(this.date);
     },
+    testDate() {
+      return dateToSeconds(this.date);
+    },
+    isMorning() {
+      if (dateToSeconds(this.date) < 30600) { // 30600: Seconds to 8:30 AM
+        return true;
+      }
+      return false;
+    },
+    miscLunch() {
+      const x = miscData.menuGroups;
+      let arrangedData = {};
+      for (let i = 0; i < this.expandNums; i++) {
+        arrangedData = { ...arrangedData, ...x[i] };
+      }
+      return arrangedData;
+    },
+  },
+  methods: {
+    expand() {
+      if (this.expandNums < 4) {
+        this.expandNums += 1;
+      }
+    },
+    condense() {
+      if (this.expandNums > 0) {
+        this.expandNums -= 1;
+      }
+    },
   },
 };
 </script>
@@ -49,19 +116,36 @@ export default {
   text-align: center
   margin-bottom: 4px
 
+.breakfast
+  border-top: var(--color) 1.5px solid
+  padding: 10px 0
 .lunch
   border-top: var(--color) 1.5px solid
   padding: 10px 0
 
-  .name
-    color: var(--color)
-    font-weight: bold
-    font-size: .85em
-    text-align: center
+.exLunch
+  border-top: var(--color) 1.5px solid
+  padding: 10px 0
+
+.name
+  color: var(--color)
+  font-weight: bold
+  font-size: .85em
+  text-align: center
+
+.item
+  text-align: center
+  margin: auto
+  margin-top: 5px
 
-  .item
-    text-align: center
-    margin: auto
-    margin-top: 5px
+.arrow-container
+  display: flex
+  justify-content: center
+
+  .arrow
+    margin: -3px 10px 5px 10px
+    font-size: 1.75em
+    cursor: pointer
+    color: var(--color)
 
 </style>

src/data/miscLunch.json

@@ -0,0 +1,69 @@
+{
+    "menuGroups": [
+        {
+            "Grill": [
+                "Hamburger",
+                "Cheeseburger",
+                "Chicken Tenders",
+                "Black Bean Burger",
+                "Turkey Burger",
+                "Fries"
+            ],
+            "Pizza": [
+                "Cheese",
+                "Pepperoni",
+                "Sausage",
+                "Specialty Pizza",
+                "Cheese Bread Sticks"
+            ]
+        },
+        {
+            "PWC Jazzmans": [
+                "Acai Bowls",
+                "Salads",
+                "Grains",
+                "Wraps",
+                "Sandwitches",
+                "Fruit Cup",
+                "Yogurt",
+                "Antipasto Box",
+                "Protein Box",
+                "Bubble Tea"
+            ],
+            "Coffee and Tea": [
+                "Coffee",
+                "Latte",
+                "Mocha",
+                "Americano",
+                "Cappuccino",
+                "Hot Chocolate",
+                "Hot Tea"
+            ]
+        },
+        {
+            "Sides": [
+                "Grapes and Cheese",
+                "Fruit",
+                "Hummus",
+                "Veggie Cup",
+                "Pudding",
+                "Jell-O",
+                "Yogurt",
+                "PB&J",
+                "Hard Boiled Egg"
+            ],
+            "Beverages": [
+                "Assorted Sodas",
+                "Water",
+                "Pure Leaf Tea",
+                "Gatorade",
+                "Life Water",
+                "Naked Juice",
+                "Tropicana Juice",
+                "Izzi Juice Can",
+                "Sparkling Water",
+                "Smoothies"
+            ]
+        }
+    ]
+}