Recipe edit (WIP): forms to edit groups, steps and ingredients

backend/templates/recipe_edit.html

@@ -13,35 +13,27 @@
     <input
         id="input-title"
         type="text"
-        name="title"
         value="{{ recipe.title }}"
-        autocomplete="title"
         autofocus="true" />
 
-    <label for="input-description">Description</label>
-    <input
-        id="input-description"
-        type="text"
-        name="description"
-        value="{{ recipe.description }}"
-        autocomplete="title" />
+    <label for="text-area-description">Description</label>
+    <textarea
+        id="text-area-description">{{ recipe.description }}</textarea>
 
-    <label for="input-description">Estimated time</label>
+    <label for="input-estimated-time">Estimated time</label>
     <input
         id="input-estimated-time"
         type="number"
-        name="estimated-time"
         value="
             {% match recipe.estimated_time %}
             {% when Some with (t) %}
                 {{ t }}
             {% when None %}
                 0
-            {% endmatch %}"
-        autocomplete="title" />
+            {% endmatch %}"/>
 
     <label for="select-difficulty">Difficulty</label>
-    <select id="select-difficulty" name="difficulty">
+    <select id="select-difficulty">
         <option value="0" {%+ call is_difficulty(common::ron_api::Difficulty::Unknown) %}> - </option>
         <option value="1" {%+ call is_difficulty(common::ron_api::Difficulty::Easy) %}>Easy</option>
         <option value="2" {%+ call is_difficulty(common::ron_api::Difficulty::Medium) %}>Medium</option>
@@ -49,16 +41,19 @@
     </select>
 
     <label for="select-language">Language</label>
-    <select id="select-language" name="language">
+    <select id="select-language">
     {% for lang in languages %}
-        <option value="{{ lang.1 }}">{{ lang.0 }}</option>
+        <option value="{{ lang.1 }}"
+        {%+ if recipe.lang == lang.1 %}
+            selected
+        {% endif %}
+        >{{ lang.0 }}</option>
     {% endfor %}
     </select>
 
     <input
         id="input-is-published"
         type="checkbox"
-        name="is-published"
         {%+ if recipe.is_published %}
             checked
         {% endif %}
@@ -66,6 +61,42 @@
     <label for="input-is-published">Is published</label>
 
     <div id="groups-container">
+
+    </div>
+    <input id="button-add-group" type="button" value="Add a group"/>
+
+    <div id="hidden-templates">
+        <div class="group">
+            <label for="input-group-name">Name</label>
+            <input class="input-group-name" type="text" />
+
+            <label for="input-group-comment">Comment</label>
+            <input class="input-group-comment" type="text" />
+
+            <div class="steps"></div>
+
+            <input class="button-add-step" type="button" value="Add a step"/>
+        </div>
+
+        <div class="step">
+            <label for="text-area-step-action">Action</label>
+            <textarea class="text-area-step-action"></textarea>
+
+            <div class="ingredients"></div>
+
+            <input class="button-add-ingedient" type="button" value="Add an ingredient"/>
+        </div>
+
+        <div class="ingredient">
+            <label for="input-ingredient-quantity">Quantity</label>
+            <input class="input-ingredient-quantity" type="number" />
+
+            <label for="input-ingredient-unit">Unity</label>
+            <input class="input-ingredient-unit" type="text" />
+
+            <label for="input-ingredient-name">Name</label>
+            <input class="input-ingredient-name" type="text" />
+        </div>
     </div>
 </div>