diff --git a/components/recipe.js b/components/recipe.js index 53c2d51..f93b1c8 100644 --- a/components/recipe.js +++ b/components/recipe.js @@ -8,21 +8,29 @@ Vue.component('recipe', {
- Title - Description - Picture - Add to menu +
+
+

Title

+ +

Description

+ +
+
+ addAdd to this week's menu + removeDelete +
+
-

Bereidingswijze

+

Directions

-

Ingredienten

+

Ingredients

@@ -50,90 +58,20 @@ Vue.component('recipe', { `, - 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; } }, @@ -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, "$&"); - html = html.replace(this.temperatureRegex, "$&"); - html = html.replace(this.timeRegex, "$&"); - // Add formatting for lists and newlines - html = html.replace(/\n\*\s(.*)/gi, "
  1. $1
"); - html = html.replace(/<\/li><\/ol>
  1. /gi, "
  2. "); - html = html.replace(/\n/gi, "
    "); - //console.log(html) - return html; + return rcp.format(html); }, strip: function(html) { - html = html.replace(/<(div|br)(.*?)>/gi, "
  3. "); - html = html.replace(/
  4. /gi, "\n* "); - html = html.replace(/<(.*?)>/gi, ""); - //html = html.replace(/ /gi, " "); - //html = html.replace(/" "+/g, " "); - return html; + return rcp.strip(html); } } }); diff --git a/components/recipes.js b/components/recipes.js new file mode 100644 index 0000000..8e98c61 --- /dev/null +++ b/components/recipes.js @@ -0,0 +1,27 @@ +Vue.component('recipes', { + template: ` +
    +
    +
    +

    Recipes

    +
    +
    +
    +
    + +
    +
    +
    + `, + props: ["recipes"], + data: function() { + return {} + }, + methods: { + + } +}); \ No newline at end of file diff --git a/css/style.css b/css/style.css index 1c2cb1c..49a10ad 100644 --- a/css/style.css +++ b/css/style.css @@ -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 { @@ -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); } \ No newline at end of file diff --git a/index.html b/index.html index bedac73..3cf3efa 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ + @@ -32,11 +33,11 @@
  5. View
    6. -
  6. - blenderRecipes +
  7. + blenderRecipes
  8. - menuMenu + menuMenu
  9. @@ -57,25 +58,19 @@ -
    - +
    +
    -
    +
    + +
    + +
    -
    +
    @@ -83,12 +78,35 @@