Skip to content

Commit

Permalink
Loading recipes from list
Browse files Browse the repository at this point in the history
  • Loading branch information
@sjoerdvanderhoorn
sjoerdvanderhoorn committed May 14, 2021
1 parent 22b0abe commit a445110
Show file tree
Hide file tree
Showing 5 changed files with 186 additions and 139 deletions.
122 changes: 22 additions & 100 deletions components/recipe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,29 @@ Vue.component('recipe', {
</div>
<div class="row" style="margin-bottom: 0;">
<div class="col s12 offset-m1">
Title
Description
Picture
Add to menu
<div class="row">
<div class="col s8">
<h4>Title</h4>
<input id="title" type="text" v-model="recipe.title" placeholder="The greatest dish on earth...!" class="validate">
<h4>Description</h4>
<textarea id="description" v-model="recipe.description" placeholder="Simply the best..." class="materialize-textarea"></textarea>
</div>
<div class="col s4">
<a class="waves-effect waves-light btn"><i class="material-icons left">add</i>Add to this week's menu</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">remove</i>Delete</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 offset-m1">
<div class="row">
<div class="col s8">
<h4>Bereidingswijze</h4>
<h4>Directions</h4>
<div contenteditable="true" @input="edit" v-html="formattedText"></div>
</div>
<div class="col s4">
<h4>Ingredienten</h4>
<h4>Ingredients</h4>
<table class="striped">
<tbody>
<tr v-for="ingredient in ingredients">
Expand Down Expand Up @@ -50,90 +58,20 @@ Vue.component('recipe', {
</div>
</div>
`,
props: ["text"],
props: ["recipe"],
data: function() {
return {
outputText: this.strip(this.text),
position: null,
settings: {
unitofmeasure: [
{ name: "g", unit: "gram", conversion: 1 },
{ name: "gram", unit: "gram", conversion: 1 },
{ name: "kg", unit: "gram", conversion: 1000 },
{ name: "kilo", unit: "gram", conversion: 1000 },
{ name: "kilogram", unit: "gram", conversion: 1000 },
{ name: "pond", unit: "gram", conversion: 500 },
{ name: "ml", unit: "milliliter", conversion: 1 },
{ name: "milliliter", unit: "milliliter", conversion: 1 },
{ name: "dl", unit: "milliliter", conversion: 10 },
{ name: "deciliter", unit: "milliliter", conversion: 10 },
{ name: "cl", unit: "milliliter", conversion: 100 },
{ name: "centiliter", unit: "milliliter", conversion: 100 },
{ name: "l", unit: "milliliter", conversion: 1000 },
{ name: "liter", unit: "milliliter", conversion: 1000 },
{ name: "kop", unit: "kop", conversion: 1 },
{ name: "kopje", unit: "kop", conversion: 1 },
{ name: "kopjes", unit: "kop", conversion: 1 },
{ name: "el", unit: "el", conversion: 1 },
{ name: "eetlepel", unit: "el", conversion: 1 },
{ name: "eetlepels", unit: "el", conversion: 1 },
{ name: "tl", unit: "tl", conversion: 1 },
{ name: "theelepel", unit: "tl", conversion: 1 },
{ name: "theelepels", unit: "tl", conversion: 1 },
{ name: "stuk", unit: "stuk", conversion: 1 },
{ name: "stuks", unit: "stuk", conversion: 1 },
{ name: "hele", unit: "hele", conversion: 1 },
{ name: "halve", unit: "hele", conversion: 0.5 },
{ name: "paar", unit: "paar", conversion: 1 },
{ name: "teen", unit: "teen", conversion: 1 },
{ name: "tenen", unit: "teen", conversion: 1 },
{ name: "teentje", unit: "teen", conversion: 1 },
{ name: "teentjes", unit: "teen", conversion: 1 },
{ name: "stengel", unit: "stengel", conversion: 1 },
{ name: "stengels", unit: "stengel", conversion: 1 }
],
temperature: ["c", "f", "graden", "celsius", "fahrenheit", "fahrenheit"],
time: ["m", "min", "minuut", "minuten", "u", "uur", "uren", "s", "seconde", "seconden", "secondes"]
}
outputText: this.strip(this.recipe ? this.recipe.directions : ""),
position: null
}
},
created: function() {
// Declare private variables
this.ingredientRegex = /\b([\d\,\.]+)\s(gram|paar|stuks|kilo|liter|tenen|teentjes|stengel|stengels|el|eetlepel|l|k|g)\s([\w\-\'\’\`]+)/gi;
this.ingredientRegex = new RegExp(`\\b([\\d\\,\\.]+)\\s(${this.settings.unitofmeasure.map(unit => unit.name).join("|")})\\s([\\w\\-\\'\\’\\\`]+)`, "gi");
this.temperatureRegex = new RegExp(`\\b(([\\d])+)\\s(${this.settings.temperature.join("|")})\\b`, "gi");
this.timeRegex = new RegExp(`\\b(([\\d\\,\\.\\-])+)\\s(${this.settings.time.join("|")})\\b`, "gi");
},
mounted: function() {

},
computed: {
formattedText: function() {
return this.format(this.$props.text);
return this.format(this.$props.recipe ? this.$props.recipe.directions : "");
},
ingredients: function() {
var ingredients = this.outputText.match(this.ingredientRegex);
ingredients = (ingredients || []).map(ingredient => {
// Parse quantity, unit, and product from ingredient
var match = ingredient.match(new RegExp(this.ingredientRegex, "i"));
return {
quantity: parseFloat(match[1].replace(",", ".")) * this.settings.unitofmeasure.find(unit => unit.name == match[2]).conversion,
unit: this.settings.unitofmeasure.find(unit => unit.name == match[2]).unit,
product: match[3]
};
}).reduce((all, ingredient) => {
// Combine ingredients that have the same unit and product
var existing = all.find(item => item.unit == ingredient.unit && item.product == ingredient.product);
if (existing) {
existing.quantity += ingredient.quantity;
} else {
all.push(ingredient);
}
return all;
}, []).sort((a, b) => {
// Order ingredients by product name and then quantity
return a.product.localeCompare(b.product) || a.quantity - b.quantity;
});
var ingredients = rcp.parse(this.outputText);
ingredients = rcp.aggregate(ingredients);
return ingredients;
}
},
Expand All @@ -153,26 +91,10 @@ Vue.component('recipe', {
this.outputText = this.strip(e.target.innerHTML);
},
format: function(html) {
// Remove current formatting
html = this.strip(html);
// Mark using regular expressions
html = html.replace(this.ingredientRegex, "<span class='recipe ingredient'>$&</span>");
html = html.replace(this.temperatureRegex, "<span class='recipe temperature'>$&</span>");
html = html.replace(this.timeRegex, "<span class='recipe time'>$&</span>");
// Add formatting for lists and newlines
html = html.replace(/\n\*\s(.*)/gi, "<ol><li>$1</li></ol>");
html = html.replace(/<\/li><\/ol><ol><li>/gi, "</li><li>");
html = html.replace(/\n/gi, "<br/>");
//console.log(html)
return html;
return rcp.format(html);
},
strip: function(html) {
html = html.replace(/<(div|br)(.*?)>/gi, "<li>");
html = html.replace(/<li>/gi, "\n* ");
html = html.replace(/<(.*?)>/gi, "");
//html = html.replace(/&nbsp;/gi, " ");
//html = html.replace(/" "+/g, " ");
return html;
return rcp.strip(html);
}
}
});
Expand Down
27 changes: 27 additions & 0 deletions components/recipes.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
Vue.component('recipes', {
template: `
<div class="container">
<div class="row" style="margin-bottom: 0;">
<div class="col s12 offset-m1">
<h1 class="header">Recipes</h1>
</div>
</div>
<div class="row">
<div class="col s12 offset-m1">
<ul>
<li v-for="recipe in recipes">
<a :href="'#/recipe/' + recipe.id">{{recipe.title}}</a>
</li>
</ul>
</div>
</div>
</div>
`,
props: ["recipes"],
data: function() {
return {}
},
methods: {

}
});
8 changes: 4 additions & 4 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ div[contenteditable="true"] li {
}

div[contenteditable="true"] {
background-color: rgba(228, 228, 228, 0.5);
padding: 5px;
margin: 5px;
border-bottom: 1px solid black;
}

div[contenteditable="true"] .recipe {
Expand All @@ -19,13 +19,13 @@ div[contenteditable="true"] .recipe {
}

div[contenteditable="true"] .recipe.ingredient {
background-color: rgba(200, 200, 216, 0.3);
background-color: rgba(228, 228, 228, 0.5);
}

div[contenteditable="true"] .recipe.time {
background-color: rgba(94, 124, 96, 0.3);
background-color: rgba(228, 228, 228, 0.5);
}

div[contenteditable="true"] .recipe.temperature {
background-color: rgba(173, 128, 128, 0.3);
background-color: rgba(228, 228, 228, 0.5);
}
62 changes: 42 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<!-- Recepturer -->
<link rel="stylesheet" href="css/style.css" />
<script type="application/javascript" src="js/recepturer.js"></script>
<script type="application/javascript" src="components/recipes.js"></script>
<script type="application/javascript" src="components/recipe.js"></script>
<script type="application/javascript" src="components/shopping.js"></script>
<script type="application/javascript" src="components/debug.js"></script>
Expand All @@ -32,11 +33,11 @@
<li>
<a class="subheader">View</a>
</li>
<li class="bold sidenav-close" :class="{active: page=='recipe'}">
<a :href="'#/recipe/'" class="waves-effect waves-teal"><i class="material-icons">blender</i>Recipes</a>
<li class="bold sidenav-close" :class="{active: page=='recipes' || page=='recipe'}">
<a :href="'#/recipes/'" class="waves-effect waves-teal"><i class="material-icons">blender</i>Recipes</a>
</li>
<li class="bold sidenav-close" :class="{active: page=='menu'}">
<a :href="'#/recipe/'" class="waves-effect waves-teal"><i class="material-icons">menu</i>Menu</a>
<a :href="'#/menu/'" class="waves-effect waves-teal"><i class="material-icons">menu</i>Menu</a>
</li>

<li>
Expand All @@ -57,38 +58,55 @@
</ul>
</header>

<main v-show="page=='recipe'">
<recipe text="
* Wel de 150 gram noedels ca. 5 min. in koud water en nog eens 70 gram noedels in warm water, en laat de rest van de 10 kilo noedels ongebruikt. Breng een pan met water aan de kook en kook de noedels 1 min. Giet af en spoel met koud stromend water. Knip of snijd de slierten 2 à 3 keer en leg in een grote kom.
* Snijd ondertussen de 4 stuks trostomaten in parten, halveer de 2 stuks sjalotten en snijd in de lengte in repen. Snijd de 4 stengels bleekselderij in schuine repen van een ½ cm dik. Snijd de blaadjes van de selderij grof. Schep alles bij de noedels. Haal de 20 g korianderblaadjes los van de steeltjes, snijd grof en houd apart. Snijd de stelen van de koriander fijn.
* Ga nu even lekker iets anders doen
* Verwijder de steelaanzet van de 4 stuks rode-pepers en snijd het vruchtvlees grof. Halveer de 3 stuks limoenen en pers de vruchten uit. Doe de stelen van de koriander, de pepers en 2 tenen knoflook in de vijzel en stamp tot een pasta. Voeg de 1 el kokosbloesemsuiker toe en stamp fijn. Voeg de vissaus en 6 el limoensap (per 4 personen) toe en meng tot een dressing. Zet apart tot gebruik.
* Breng een pan met water aan de kook en kook de 225 gram garnalen 2 min. op laag vuur. Neem met een schuimspaan eruit en laat uitlekken. Giet het kokende water uit de pan tot je een laag water van 2 cm overhoudt. Verwijder het vel van de 2 stuks varkensbraadworsten. Snijd het worstvlees in kleine stukken. Kook het vlees 3-4 min. Breek het worstvlees met een houten lepel of pureestamper tot het verkruimeld is. Rooster de 50 g ongezouten-pinda’s.
* Je bent bijna klaar, tada...
* Haal het vlees met een schuimspaan uit het water, laat uitlekken en schep samen met de garnalen in de kom met de noedels en groenten. Meng de dressing en de helft van de koriander erdoor. Schep de salade op een serveerbord en garneer met de pinda’s en de rest van de koriander.
* Dat was het
* Nog maar een klein stukje
* Ha, bijna klaar" />
<main v-if="page=='recipes'">
<recipes :recipes="recipes" />
</main>

<main v-show="page=='shopping'">
<main v-if="page=='recipe'">
<recipe :recipe="recipe" />
</main>

<main v-if="page=='shopping'">
<shopping />
</main>

<main v-show="page=='debug'">
<main v-if="page=='debug'">
<debug :recipes="recipes" />
</main>

</div>


<script type="application/javascript">
var rcp = new Recepturer();

// DOM bindings
var recepturer = new Vue({
el: "#recepturer",
data: {
page: "recipe",
recipes: []
recipe: {
id: "",
title: "",
description: "",
directions: ""
},
recipes: [{
id: "appeltaart",
title: "Appeltaart",
description: "Lekker lekker",
directions: "* Schil 500 gram appels zonder schil\n* Doe er 50 gram deeg bij\n* Zet het geheel 30 minuten in de oven op 200 graden\n* Doe er nog 12 gram appels bij"
}, {
id: "appeltaart-2",
title: "Appeltaart 2",
description: "Lekker lekker",
directions: "* Schil 500 gram appels zonder schil\n* Doe er 50 gram deeg bij\n* Zet het geheel 30 minuten in de oven op 200 graden\n* Doe er nog 12 gram appels bij"
}, {
id: "appeltaart-17",
title: "Appeltaart 17",
description: "Lekker lekker",
directions: "* Schil 500 gram appels zonder schil\n* Doe er 50 gram deeg bij\n* Zet het geheel 30 minuten in de oven op 200 graden\n* Doe er nog 12 gram appels bij"
}]
},
mounted: function() {},
watch: {},
Expand All @@ -102,11 +120,15 @@
function router() {
var url = document.location.hash.split("/");
switch (url[1]) {
case "recipes":
recepturer.page = url[1];
document.title = `Recepturer - Shopping`;
break;
case "recipe":
recepturer.page = url[1];
recepturer.recipe = url[2];
recepturer.recipe = recepturer.recipes.find(recipe => recipe.id == url[2]);
if (recepturer.recipe) {
document.title = `Recepturer - ${recepturer.recipe}`;
document.title = `Recepturer - ${recepturer.recipe.title}`;
} else {
document.title = `Recepturer - Recipes`;
}
Expand Down
Loading

0 comments on commit a445110

Please sign in to comment.