From 9e311430628f0f831e34aba707b3737978d8bbbe Mon Sep 17 00:00:00 2001
From: Sjoerd van der Hoorn <sjoerdvanderhoorn@hotmail.com>
Date: Wed, 19 May 2021 21:08:40 +0200
Subject: [PATCH] Readme and recipe saving updates

---
 README.md            | 22 ++++++----------------
 components/recipe.js | 25 +++++++++++--------------
 index.html           |  2 +-
 3 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index 798e08d..99b41e5 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,17 @@
-# Genea
+# Recepturer
 
-Genea allows visually building and editing a family tree online. It consumes and saves genealogy data in the GEDCOM format without any server side components.
+Manage all your recipes in one app, store the data anywhere you like. The service remains free and without ads forever, and your data stays yours.
 
-* [Genea.app](https://www.genea.app/)
+Include the quantities needed for each ingredient as you author your recipe, and Recepturer automatically aggregates everything you need. Adding a recipe to your meal plan transfers over the required ingredients to a shopping list. Easily change quantities or check off items you already have in stock. Add extra items such as your weekly batch of chocolate chip cookies and arrange the product over different categories such as vegetables, dairy, condiments, grains, and fruits and order them according to the layout of your favorite local supermarket. Everything is self guided. There is no need to worry about maintaining database records or data entry you don't need.
+
+* [Recepturer.com](https://www.recepturer.com/)
 
 # Installation
 
 Unpack files into directory and serve over HTTPS.
 
-# Family tree drawing
-
-Genea uses the [Graphviz library compiled into WebAssembly](https://github.com/hpcc-systems/hpcc-js-wasm/) to draw the family tree. It uses a default structure that includes grandparents, parents, partners, siblings and children. An abstraction layer built on top of this allows for easily assigning the right data to the right node.
-
-# GEDCOM format
-
-* [GEDCOM 5.5.5 Specifications (PDF)](https://www.gedcom.org/specs/GEDCOM555.zip)
-* [Grammar](https://www.genealogieonline.nl/GEDCOM-tags/gedcom-5.5-grammar.php)
-* [Sample Files](https://www.gedcom.org/samples.html)
-
-> Implementation of the GEDCOM format in Genea intentionally differentiates itself slightly from the true standard, as it allows a `FAM` record to contain either two `FAM.HUSB` or `FAM.WIFE` records to indicate a same sex marriage. Other types of relationships between people are not supported due to the lack of GEDCOM to specify a gender neutral `FAM.PART(NER)` record.
-
 # Dependencies
 
 * [Vue.js](https://vuejs.org/v2/guide/)
-* [Graphviz library compiled into WebAssembly](https://github.com/hpcc-systems/hpcc-js-wasm/)
 * [Materialize](https://materializecss.com/)
+* [Material Icons](https://fonts.google.com/icons?selected=Material+Icons)
diff --git a/components/recipe.js b/components/recipe.js
index d58029c..10f43b0 100644
--- a/components/recipe.js
+++ b/components/recipe.js
@@ -57,28 +57,25 @@ Vue.component('recipe', {
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col s12 offset-m1">
-                    <h4>Debug</h4>
-                    <div>Caret: {{position}}</div>
-                    <pre style="background-color: lightgray;">{{outputText}}</pre>
-                </div>
-            </div>
         </div>
     `,
     props: ["recipe"],
     data: function() {
         return {
-            outputText: this.strip(this.recipe ? this.recipe.directions : ""),
+            formattedText: null,
             position: null
         }
     },
+    mounted() {
+        console.log("MOUNTED", this.$props, this.formattedText)
+        this.formattedText = this.format(this.$props.recipe ? this.$props.recipe.directions : "");
+    },
+    updated() {
+        console.log("UPDATED", this.$props, this.formattedText)
+    },
     computed: {
-        formattedText: function() {
-            return this.format(this.$props.recipe ? this.$props.recipe.directions : "");
-        },
         ingredients: function() {
-            var ingredients = rcp.parse(this.outputText);
+            var ingredients = rcp.parse(this.recipe.directions);
             ingredients = rcp.aggregate(ingredients);
             return ingredients;
         }
@@ -95,8 +92,8 @@ Vue.component('recipe', {
                 Cursor.setCaret(e.target, this.position);
                 e.target.focus();
             }
-            // Store output
-            this.outputText = this.strip(e.target.innerHTML);
+            // Store processed data
+            this.recipe.directions = this.strip(e.target.innerHTML);
         },
         format: function(html) {
             return rcp.format(html);
diff --git a/index.html b/index.html
index d8f6ef6..ea3f8b0 100644
--- a/index.html
+++ b/index.html
@@ -101,7 +101,7 @@
         var recepturer = new Vue({
             el: "#recepturer",
             data: {
-                page: "recipe",
+                page: null,
                 recipe: {
                     id: "",
                     title: "",