Merge pull request #5 from arienshibani/feat/rebranding-hallo-fresh

Feat/rebranding hallo fresh
arienshibani · Nov 16, 2023 · 2dee7f4 · 2dee7f4 · vercel · Nov 16, 2023
2 parents b292306 + 363846a
commit 2dee7f4
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,4 @@
+
 # Mealkits are overpriced 💸
  What if you could just buy the ingredients yourself, for half the cost. And still enjoy the luxury of not having to plan your weekly dinner plan? 
 

diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<title>HELLO FRAÎCHE</title>
+		<title>HalloFresh</title>
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,25 +1,37 @@
 <script>
-    import "../app.css";
-    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  import "../app.css";
+  import {
+    Navbar,
+    NavBrand,
+    NavLi,
+    NavUl,
+    NavHamburger,
+  } from "flowbite-svelte";
 </script>
-
-<Navbar let:hidden let:toggle class="">
-    <NavBrand href="/">
-      <img
-        src="https://www.seekpng.com/png/full/167-1677409_crme-frache-sour-cream-transparent-background.png"
-        class="mr-3 h-6 sm:h-9"
-        alt="Drawn by jcomp on Freepik.com"
-      />
-      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
-        Hello Fraiche
-      </span>
-    </NavBrand>
-    <NavHamburger on:click={toggle} />
-    <NavUl {hidden}>
-      <NavLi href="/plans">Ukemenyer</NavLi>
-      <NavLi href="/info">Slik fungerer det</NavLi>
-      <NavLi href="/recipes">Oppskrifter</NavLi>
-    </NavUl>
-  </Navbar>
 
-  <slot />
+<Navbar let:hidden let:toggle style="background: rgb(255 255 255 / 70%); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(13px);" class="px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b">
+
+  <NavBrand href="/">
+    <img
+      src="https://www.seekpng.com/png/full/167-1677409_crme-frache-sour-cream-transparent-background.png"
+      class="mr-3 h-6 sm:h-9"
+      alt="a bowl of sour creme"
+    />
+    <span
+      class="self-center whitespace-nowrap text-xl font-semibold dark:text-white text-black"
+    >
+      HALLO<br />FRESH!
+    </span>
+  </NavBrand>
+  <NavHamburger on:click={toggle} />
+  <NavUl {hidden}>
+    <NavLi href="/plans">Ukemenyer</NavLi>
+    <NavLi href="/info">Slik fungerer det</NavLi>
+    <NavLi href="/recipes">Oppskrifter</NavLi>
+  </NavUl>
+</Navbar>
+<br>
+<br>
+<br>
+
+<slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -7,7 +7,7 @@
 <section class="bg-white dark:bg-gray-900">
     <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
 
-        <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">HELLOFRAICHE</h1>
+        <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">GO'MIDDAG!</h1>
         <p class="mb-8 text-lg font-normal text-gray-800 lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">Bestill ukemenyen direkte fra butikken, ingen mellomledd </p>
 
 

diff --git a/src/routes/info/+page.svelte b/src/routes/info/+page.svelte
@@ -14,7 +14,7 @@
 <div class="gridsetup grid p-12 grid-cols-2 gap-4 items-center max-w-4xl mt-0 m-auto">
   <img class="max-w-4 max-h-[300px] rounded-sm" src="https://images.squarespace-cdn.com/content/53b839afe4b07ea978436183/1608506201082-GU22QYZJC5TWXRSY24RX/traditional-food-around-the-world-Travlinmad.jpg?content-type=image%2Fjpeg" alt="food that contains creme fraiche">
     <p class="pl-8 relative text-xl">
-      Velg en ukemeny som passer deg og antallet personer du vil lage mat til, og Hello Fraiche genererer handlelisten for deg automatisk.
+      Velg en ukemeny som passer deg og antallet personer du vil lage mat til, og Hallo Fresh genererer handlelisten for deg automatisk.
     </p>
 
 </div>
@@ -25,7 +25,7 @@
 
   <!-- This tag gets hidden on mobile phones in order to not mess up the grid layout -->
   <p class="pr-8 relative text-xl hideOnSmallScreens">
-    Hello Fraiche sender deg til en ferdig utfylt handlevogn hos din nærmeste dagligvare som støtter leveranser over nett, uten å ta noe som helst gebyr.
+    Handle inn på egenhånd, eller få det på døren. Hva enn du velger, så er det billigere en hvilken som helst matkasse! 
   </p>
 
     <template>

diff --git a/src/routes/plans/+page.svelte b/src/routes/plans/+page.svelte
@@ -1,9 +1,24 @@
 <script>
-    import { Card } from 'flowbite-svelte';
+  import { Card } from 'flowbite-svelte';
 
-    // Retreived from +server.js load function
-    export let data;
-    $: ({mealPlans} = data)
+  /**
+   * The meal plans data.
+   * @typedef {Object} MealPlan
+   * @property {string} name - The name of the meal plan.
+   * @property {string} description - The description of the meal plan.
+   * @property {number} price - The price of the meal plan.
+   */
+
+  /**
+   * The data object passed to the component.
+   * @typedef {Object} Data
+   * @property {MealPlan[]} mealPlans - The list of meal plans.
+   */
+
+  /** @type {Data} */
+  export let data;
+
+  $: ({mealPlans} = data)
 </script>
 
 <h1 class="text-5xl text-center pt-16 pb-10">Ukemenyer</h1>
@@ -35,7 +50,7 @@
         <div class="flex flex-col items-center pb-4">
           <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{mealPlan.name}</h5>
           <div class="flex mt-4 space-x-3 lg:mt-6">
-           <a href="plans/{mealPlan.mealPlanId}">     
+           <a href="plans/{mealPlan.name}">     
               <button class="items-center self-center border border-black border-r-4 border-b-4  rounded-sm h-10 w-fit pr-4 pl-4 m-5" >
                 Se Ukemeny
              </button>

diff --git a/src/routes/plans/[mealPlanId]/+page.server.js b/src/routes/plans/[mealPlanId]/+page.server.js
@@ -1,16 +1,24 @@
-// @ts-nocheck
+
 import { mealplans } from "$db/mealplans";
 import { serializeNonPOJOs } from "$lib/util/serializeNonPOJOs";
 import getDatabase from "$db/mongo";
-// @ts-ignore
 
 export const load = async function({params}) {
     try {
         const db = await getDatabase();
 
         // Do database stuff
+
+
+
         const URLparameters = params.mealPlanId
-        const mealPlanData = await db.collection('mealplans').findOne({"mealPlanId": URLparameters});
+        let mealPlanData = await db.collection('mealplans').findOne({"name": URLparameters});
+        if(mealPlanData === null) {
+          let mealPlanData = await db.collection('mealplans').findOne({"mealPlanId": URLparameters});
+        }
+
+
+
         const allMealPlansData = await db.collection('mealplans').find({}, {projection: {mealPlanId: 1, name: 1}}).toArray()
 
         // Find the index of the current mealplan in the Array of all meal plans.

diff --git a/src/routes/plans/[mealPlanId]/+page.svelte b/src/routes/plans/[mealPlanId]/+page.svelte
@@ -50,32 +50,27 @@ const handlePreviousMealPlan = () => {
 </script>
 
 
-<h1 class="text-5xl text-center pt-16 pb-5">Ukemeny</h1>
 
-<div class="flex justify-center pb-10">
-    <h2 class="text-xl text-center p-5 max-w-md"> Bla igjennom ukemenyer og juster for antall personer for å få prisoverslag </h2>
-</div>
+
 
 
 <div class="grid mainContent gap-x-40 p-10">
          <Card class="h-max justify-self-end border-none shadow-none">
+            <h1 class="text-slate-900 text-4xl text-center pt-16 pb-5">{mealPlan.name}</h1>
+
             <div class="flex justify-evenly">
-                <button on:click={handlePreviousMealPlan} class="items-center self-center  rounded-sm h-10 w-fit pr-2 pl-2" >
-                     <ArrowLeftCircle  class="inline"/>
-                </button>
-                <h2 class="text-2xl text-center text-gray-900">{mealPlan.name}</h2>
-                <button on:click={handleNextMealPlan} class="items-center self-center  rounded-sm h-10 w-fit pr-2 pl-2" >
-                    <ArrowRightCircle  class="inline"/>
-                </button>
+
+                <h2 class="text-2xl text-center text-gray-900"></h2>
+
             </div>
 
             <Listgroup
                 items={mealPlan.recipes}
                 let:item
                 class="border-0 dark:!bg-transparent pt-5">
-                <div class="flex items-center space-x-4">
+                <div class="flex items-center space-x-4 mt-2.5">
                     <div class="flex-1 min-w-0">
-                        <a href="/recipes/{item.recipeId}">
+                        <a href="/recipes/{item.title}">
                             <p class="text-sm font-medium text-gray-900 truncate dark:text-white">{item.title}</p>
                         </a>
 
@@ -87,9 +82,9 @@ const handlePreviousMealPlan = () => {
             </Listgroup>
 
 
-            <p class="text-center text-gray-900 mt-8">Antall Personer</p>
+            <p class="text-center text-gray-900 mt-8 mb-4">Antall Personer</p>
 
-            <div class="flex justify-evenly">
+            <div class="flex justify-evenly m-1">
                 <button on:click={handleMinus}>  
                     <MinusCircle/>
                 </button> 
@@ -99,7 +94,7 @@ const handlePreviousMealPlan = () => {
                 </button> 
             </div>
 
-            <h1 class="text-xl text-center pt-16 text-gray-950">Bestill denne menyen</h1>
+            <h1 class="text-xl text-center pt-16 text-gray-950">Få varene levert på døra?</h1>
 
 
 
@@ -111,24 +106,36 @@ const handlePreviousMealPlan = () => {
             </a>
 
             <div class="flex justify-center">
-                <h2 class="text-xs text-center pt-2 pb-5 max-w-content">  Handlelisten vil være forhånds utfylt for 2 personer. Prisen over er et estimat, og kan vike ifra faktis pris</h2>
+                <h2 class="text-xs text-center pt-4 pb-5 max-w-content">  Handlelisten vil være forhånds utfylt for 2 personer. Prisen over er et estimat, og kan vike ifra faktis pris</h2>
             </div>
 
         </Card>
 
-        <Card class="lastColumn h-max shadow-none rounded-sm">
-            <h5 class="text-md font-bold text-center leading-none text-gray-900 dark:text-white pb-5">
-                Handleliste 🛒
+        <Card class="lastColumn h-max shadow-none rounded-sm mt-12 mb-14">
+            <h5 class="text-md tracking-widest  text-center leading-none text-gray-900 dark:text-white pb-5">
+                HANDLELISTE 
             </h5>            
             <Listgroup items={mealPlan.ingredients} let:item class="border-0 dark:!bg-transparent">
                 {item.name} 
                 <div class="">
                     <Checkbox class="m-2 checked:bg-slate-900 outline-black"/> {item.amount * count}{item.measurement} 
                 </div>
             </Listgroup>
-            <br>    
+            <br>
+            <br>
+            {#if mealPlan.bulkIngredients.length !== 0}
+            <h5 class="text-md  tracking-widest text-center leading-none text-gray-900 dark:text-white pb-5">
+                FRA EGET KJØLESKAP
+            </h5>
+            <Listgroup items={mealPlan.bulkIngredients} let:item class="border-0 dark:!bg-transparent">
+                {item.name} 
+            </Listgroup>
+            {/if}
         </Card>
 
+
+
+
 </div>
 
 

diff --git a/src/routes/recipes/+page.svelte b/src/routes/recipes/+page.svelte
@@ -36,7 +36,7 @@
           <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{recipe.title}</h5>
           <span class="text-sm text-gray-500 dark:text-gray-400">{recipe.subtitle}</span>
           <div class="flex mt-4 space-x-3 lg:mt-6">
-           <a href="recipes/{recipe.recipeId}">     
+           <a href="recipes/{recipe.title}">     
               <button class="items-center self-center border border-black border-r-4 border-b-4  rounded-sm h-10 w-fit pr-4 pl-4 m-5" >
                 Se Oppskrift
              </button>

diff --git a/src/routes/recipes/[recipeId]/+page.server.js b/src/routes/recipes/[recipeId]/+page.server.js
@@ -4,18 +4,25 @@ import getDatabase from "$db/mongo";
 
 
 export const load = async function({params}) {
-    try {
+  try {
         const db = await getDatabase();
         const URLparameter = params.recipeId
+
+
         // Use the `db` object to perform database operations
         // Query the recipe DB
-        const recipeData = await db.collection('recipes').findOne({ "recipeId": URLparameter});
+        const recipeData = await db.collection('recipes').findOne({ "title": URLparameter});
+
+
+        console.log(recipeData)
 
         // Query meal plans DB
-        const query = { "mealPlanId": recipeData.mealPlanId }
-        const projection = { "projection": { recipes: 1} } // Exclude everything but the recipes
+        const query = { "title": recipeData.name }
+        const projection = { "projection": { recipes: 1, name: 1} } // Exclude everything but the recipes
         const mealPlanData = await db.collection('mealplans').findOne(query, projection)
 
+
+
         return {
             recipe: serializeNonPOJOs(recipeData),
             mealPlan: serializeNonPOJOs(mealPlanData)

diff --git a/src/routes/recipes/[recipeId]/+page.svelte b/src/routes/recipes/[recipeId]/+page.svelte
@@ -8,7 +8,7 @@
     $: ({ recipe, mealPlan } = data);
     export let data;
 
-    console.log(data)
+    console.log(mealPlan)
 
     // Do not allow the counter to go above 10
     const handlePlus = ()  => {
@@ -32,7 +32,6 @@
     }
 
 
-
     const handleNextRecipe = () => {
  
         if(currentIndex === 3){
@@ -61,20 +60,10 @@
 </script>
 
 
-
-
-<h1 class="text-5xl text-center pb-5 pt-10">{recipe.title}</h1>
+<h1 class="text-4xl text-center pb-5 pt-10">{recipe.title}</h1>
 <h1 class="text-2xl text-center  hideOnSmallScreens smallerTextOnSmallScreens">{recipe.subtitle}</h1>
 
-<div class="flex justify-center mt-10">
-    <button on:click={handlePreviousRecipe} class="items-center self-center  rounded-sm h-10 w-fit pr-16" >
-        <p>Forgje</p><ArrowLeftCircle class="inline"/> 
-    </button>
-
-    <button on:click={handleNextRecipe} class="items-center self-center  rounded-sm h-10 w-fit pl-16" >
-        <p>Neste</p>  <ArrowRightCircle class="inline"/> 
-    </button>
-</div>
+
 
 <div class="flex justify-center flex-wrap mt-16 pb-40">
     <div class="">
@@ -101,7 +90,7 @@
     </div>
 
     <div class="flex-grow-1">
-        <h1 class="text-2xl font-bold pb-5 topPaddingOnSmallScreens" >Slik gjør du</h1>
+        <h1 class="text-2xl font-bold pb-5 topPaddingOnSmallScreens" >Fremgangsmåte</h1>
         {#each recipe.steps as cookingInstruction, index}
             <p class="text-xl p-4 max-w-lg">
                 <span class="font-bold">{index + 1 + "."}</span>
@@ -111,12 +100,7 @@
     </div>
 </div>
 
-<div class="flex justify-center mt-10">
-    <button on:click={goToMealPlan} class="items-center rounded-sm w-fit pb-10" >
-        <p class="pb-5">Se denne rettens ukemeny</p><ArrowRightCircle class="inline"/> 
-    </button>
 
-</div>
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@

		# Mealkits are overpriced 💸
		What if you could just buy the ingredients yourself, for half the cost. And still enjoy the luxury of not having to plan your weekly dinner plan?

Expand Down