feat(bulkAdding): finished bulk processing

eslint.config.mjs

@@ -17,8 +17,8 @@ export default [
             "@typescript-eslint": tsPlugin
         },
         rules: {
-            ...tsPlugin.configs.recommended.rules,
-            "no-console": "error"
+            ...tsPlugin.configs.recommended.rules
+            //"no-console": "error"
         }
     },
     {

src/components/food/BulkFoodItem.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="zefir-main-card">
+        <div class="right-side">
+            <Select v-model="foodItem.option" :options="unstringify(foodItem.servings)" class="zefir-select"></Select>
+        </div>
+        <div class="content-center"><StyledNumberInput :style="{ maxWidth: '4rem' }" v-model="foodItem.multiplier"></StyledNumberInput></div>
+        <div class="content-center">{{ props.name }}</div>
+        <button class="x-button" @click="emit('submit')">X</button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Select, { SelectOption } from "@/components/global/Select.vue";
+import StyledNumberInput from "@/components/global/StyledNumberInput.vue";
+import { onMounted } from "vue";
+import { ShelfFoodItem } from "@/lib/models/TimeShelfs/TimeShelf";
+
+const emit = defineEmits(["submit"]);
+const props = defineProps<{
+    name?: string;
+    foodItem: ShelfFoodItem;
+}>();
+
+function unstringify(data: string | null): SelectOption[] {
+    if (data) {
+        return JSON.parse(data);
+    }
+    return [
+        { name: "Standard", value: 100 },
+        { name: "Gram", value: 1 }
+    ];
+}
+
+onMounted(() => {});
+</script>
+
+<style scoped>
+.content-center {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+.zefir-select {
+    height: 100%;
+}
+.right-side {
+    height: 100%;
+    /* background-color: aqua; */
+}
+.x-button {
+    height: 3rem;
+    width: 3rem;
+    border-radius: 5px;
+    border: 0px;
+    cursor: pointer;
+    background-color: #3b3941;
+}
+.x-button:hover {
+    background-color: brown;
+}
+.zefir-main-card {
+    min-height: 3rem;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 5px;
+    padding: 0px;
+    overflow: hidden;
+    background: #7950f226;
+    color: #b197fc;
+}
+</style>

src/components/food/FoodItem.vue

@@ -64,7 +64,7 @@ onMounted(() => {});
 }
 .right-side {
     height: 100%;
-    background-color: aqua;
+    /* background-color: aqua; */
 }
 .x-button {
     height: 3rem;

src/components/food/FoodTypeCard.vue

@@ -1,22 +1,30 @@
 <script setup lang="ts">
-defineProps<{ name: string | undefined; visible?: boolean }>();
+defineProps<{ name: string | undefined; visible?: boolean; disabled?: boolean }>();
 defineEmits(["click"]);
 </script>
 <template>
-    <div class="z-card-container" v-if="visible" @click="$emit('click')" :name="name" >
+    <div :class="disabled ? 'z-card-container-disabled' : 'z-card-container'" v-if="visible" :disabled="disabled" @click="if (!disabled) $emit('click');" :name="name">
         <div class="z-inside-container">
-            <p>{{name}}</p>
+            <p>{{ name }}</p>
         </div>
-
     </div>
 </template>
 <style scoped>
 .z-inside-container {
     max-width: 6rem;
     max-height: 6rem;
-    
+
     overflow: hidden;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    font-family:
+        -apple-system,
+        BlinkMacSystemFont,
+        Segoe UI,
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif,
+        Apple Color Emoji,
+        Segoe UI Emoji;
     font-size: 10px;
 }
 
@@ -28,8 +36,8 @@ defineEmits(["click"]);
     min-width: 8rem;
     min-height: 8rem;
     background: rgb(41, 41, 41);
-    border-style:groove;
-    border-color: rgb(0, 0, 0, 0.3);;
+    border-style: groove;
+    border-color: rgb(0, 0, 0, 0.3);
     border-radius: 5px;
     border-width: 1px;
     padding: 0.5rem;
@@ -41,5 +49,25 @@ defineEmits(["click"]);
 .z-card-container:hover {
     cursor: pointer;
     background-color: rgba(132, 94, 247, 0.2);
-} 
+}
+
+.z-card-container-disabled {
+    cursor: not-allowed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-width: 8rem;
+    min-height: 8rem;
+    background: rgb(27, 27, 27);
+    border-style: groove;
+    border-color: rgba(0, 0, 0, 0.548);
+    border-radius: 5px;
+    border-width: 1px;
+    padding: 0.5rem;
+    /* color: #d0bfff; */
+    /* color: #b197fc; */
+    color: #ebebeb99;
+    margin: 1px;
+}
 </style>

src/components/food/TimeShelfCard.vue

@@ -0,0 +1,45 @@
+<template>
+    <Card class="z-time-shelf-card" :class="{ highlight: props.highlighted }">
+        <template #content>
+            <div>
+                {{ props.name }}
+            </div>
+            <div class="absolute-text" v-if="props.text">
+                {{ props.text }}
+            </div>
+            <div class="z-item-container">
+                <slot name="content"></slot>
+            </div>
+        </template>
+    </Card>
+</template>
+
+<script setup lang="ts">
+import Card from "primevue/card";
+
+const props = defineProps<{
+    name: string;
+    highlighted?: boolean;
+    text?: string;
+}>();
+</script>
+
+<style scoped>
+.z-item-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1px;
+}
+.z-time-shelf-card {
+    cursor: pointer;
+}
+.highlight {
+    background-color: rgba(137, 43, 226, 0.05);
+    border-width: 1px;
+    border-color: rgba(22, 0, 31, 0.233);
+    border-style: solid;
+}
+.absolute-text {
+}
+</style>

src/components/food/TimeShelfItem.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="time-shelf-item">{{ props.name }}</div>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+    name: string;
+}>();
+</script>
+<style scoped>
+.time-shelf-item {
+    width: 60px;
+    height: 30px;
+    border-width: 1px;
+    background-color: rgb(87, 30, 95);
+    border-radius: 3px;
+    border-style: solid;
+    border-color: black;
+
+    overflow: hidden;
+    font-family:
+        -apple-system,
+        BlinkMacSystemFont,
+        Segoe UI,
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif,
+        Apple Color Emoji,
+        Segoe UI Emoji;
+    font-size: 10px;
+    text-align: center;
+}
+</style>

src/components/global/Select.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="custom-select">
-        <small class="small-label">{{ props.label }}</small>
-        <select class="my-input select" :style="{ width: props.width }" v-model="model">
+        <small v-if="props.label" class="small-label">{{ props.label }}</small>
+        <select class="my-input select" :style="{ width: props.width, height: props.height }" v-model="model">
             <option v-for="option in props.options" :value="option">{{ option.name }}</option>
         </select>
     </div>
@@ -10,12 +10,13 @@
 <script setup lang="ts">
 export interface SelectOption {
     name: string;
-    value: unknown;
+    value: number;
 }
 
 const props = defineProps<{
     label?: string;
     width?: string;
+    height?: string;
     options: SelectOption[];
 }>();
 const model = defineModel();
@@ -85,7 +86,7 @@ select {
 }
 
 .my-input {
-    height: 1.875rem;
+    height: 100%;
     width: 100%;
 }
 </style>

src/components/global/StyledTextInput.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import InputText from "primevue/inputtext";
+
+const props = defineProps<{ label?: String; disabled?: boolean }>();
+const model = defineModel({ required: false, default: "" });
+</script>
+<template>
+    <div class="styled-number-input-container">
+        <small class="small-label">{{ props.label }}</small>
+        <InputText class="my-input" :disabled="props.disabled" v-model="model" />
+    </div>
+</template>
+
+<style scoped>
+.small-label {
+    line-height: 1.2;
+    font-size: x-small;
+    color: #828282;
+    margin: 0;
+    padding-bottom: 2px;
+}
+
+.styled-number-input-container {
+    overflow: hidden;
+    width: auto;
+    display: flex;
+    text-align: left;
+    flex-direction: column;
+    gap: 0;
+}
+
+.my-input {
+    width: 100%;
+}
+</style>

src/lib/models/Food.ts

@@ -0,0 +1,16 @@
+//import { TablesInsert } from "../supabase/supabase/supabaseSchemas/supaDatabase";
+//import { Tables } from "../supabase/supabase/supabaseSchemas/supaDatabaseExtensions";
+
+//export type FoodInsertItemCombined = TablesInsert<"food"> & Tables<"food_types">;
+export type FoodInsertItemCombined = {
+    id: number;
+    name: string;
+    description: string;
+    calories: number;
+    protein: number;
+    fat: number;
+    carbohydrates: number;
+    multiplier: number;
+    created_at: Date;
+    updated_at: Date;
+};

src/lib/models/TimeShelfs/TimeShelf.ts

@@ -0,0 +1,15 @@
+import { FoodInsertItemCombined } from "../Food";
+import { SelectOption } from "@/components/global/Select.vue";
+
+export interface TimeShelf {
+    id: string;
+    startTime: string;
+    endTime: string;
+    name: string;
+}
+
+export type ShelfFoodItem = FoodInsertItemCombined & {
+    shelfId: string;
+    option: SelectOption;
+    multiplier: number;
+};

src/lib/supabase/services/supabaseFoodService.ts

@@ -1,7 +1,7 @@
 import { supabase } from "../supabase/supabase";
 import { Tables, TablesInsert } from "../supabase/supabaseSchemas/supaDatabase";
 
-export async function getFoodsWithData(startDate: Date, endDate: Date) {
+export async function getFoodsWithData(startDate: Date, endDate: Date): Promise<{ food_amount: number; time_of_intake: string | null; food_types: Tables<"food_types"> | null }[]> {
     const { error, data } = await supabase
         .from("food")
         .select("food_amount, time_of_intake, food_types(*)")
@@ -33,3 +33,11 @@ export async function addFood(foods: TablesInsert<"food">[]) {
         throw new Error();
     }
 }
+
+export const addFoodCombo = async (combo: TablesInsert<"food_combos">) => {
+    const { error } = await supabase.from("food_combos").insert([combo]);
+    if (error) {
+        console.log(error);
+        throw new Error();
+    }
+};