Add/Remove buttons for adding or removing steps

flask/app/main/views.py

@@ -429,8 +429,9 @@ def editrecipe(id):
         form.steps[i].step_text.data = recipe.steps[i].step_text
 
 
+    typeof = 'recipe'
 
-    return render_template('edit_recipe.html', form=form)
+    return render_template('edit_recipe.html', form=form, typeof=typeof, recipes=[recipe])
 
 @main.route('/method/<int:id>/edit', methods=['GET', 'POST'])
 @login_required
@@ -458,7 +459,7 @@ def editmethod(id):
     form.method_text.data = method.method_text
     form.cuisines.data = returnListed(method.cuisines)
 
-    return render_template('edit_recipe.html', form=form)
+    return render_template('edit_recipe.html', form=form, type='method')
 
 @main.route('/cuisine/<int:id>/edit', methods=['GET', 'POST'])
 @login_required
@@ -484,7 +485,7 @@ def editcuisine(id):
     form.name.data = cuisine.name    
     form.description.data = cuisine.description
     form.methods.data = returnListed(cuisine.methods)
-    return render_template('edit_recipe.html', form=form)
+    return render_template('edit_recipe.html', form=form, type='cuisine')
 
 
 @main.route('/follow/<username>')

flask/app/static/styles.css

@@ -141,13 +141,64 @@ ul#steps.form-control {
     list-style: none;
     float: left;
     height: auto;
+    border: 0px;
+    box-shadow: inset 0 0px 0px rgba(0,0,0,.075);
+    width: 100%;
+}
+
+
+#steps > li > label {
+    display: none;
+}
+
+.hide,
+#steps-0 > tbody > tr > th > label {
+    display: none;
 }
 
+.fullwidth,
+table#steps-0 {
+    width: 100%;
+}
+
+.steptext,
+textarea#steps-0-step_text {
+    display: block;
+    width: 100%;
+    min-height: 200px;
+    height: 34px;
+    padding: 6px 12px;
+    margin-top: 20px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
+    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+
 #add_another_button {
+    background: #2ecc71;
+    color: #fff;
+    margin: 5px;
+    padding: 5px;
+    width: 30%;
+    display: inline block;
+}
+
+.remove_this {
     background: #e74c3c;
     color: #fff;
     margin: 5px;
     padding: 5px;
+    width: 30%;
+    display: inline block;
 }
 
 span a {

flask/app/templates/base.html

@@ -139,26 +139,7 @@
             });
 
 
-$('textarea#steps-0-step_text').after('<div id="add_another_button">Add</div>')
-$('#add_another_button').click(function () {
-    clone_field_list('li:last');
-});
-
-function clone_field_list(selector) {
-    var new_element = $(selector).clone(true);
-    var elem_id = new_element.find(':input')[0].id;
-    var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
-    new_element.find(':input').each(function() {
-        var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
-        $(this).attr({'name': id, 'id': id}).val('').removeAttr('checked');
-    });
-    new_element.find('label').each(function() {
-        var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
-        $(this).attr('for', new_for);
-    });
-    
-    $(selector).after(new_element);
-}
+
 
 </script>
 

flask/app/templates/edit_recipe.html

@@ -9,10 +9,83 @@
 </div>
 <div>
     {{ wtf.quick_form(form) }}
+
+
 </div>
 {% endblock %}
 
 {% block scripts %}
 {{ super() }}
 {{ pagedown.include_pagedown() }}
+{% if typeof == 'recipe' %}
+<script>
+	console.log('recipe')
+
+	var recipecount = parseInt('{%for recipe in recipes%}{{recipe.steps.count()}}{% endfor %}')
+	console.log(recipecount);
+
+	for (i=0; i<=recipecount; i++) {
+		var selector = '#steps-'+i+'-step_text'
+		var selector_table = 'table#steps-'+i
+		var selector_label = '#steps-'+i+' > tbody > tr > th > label'
+		var show_button = 'textarea#steps-'+i+'-step_text'
+
+		$(selector).addClass('steptext');
+		$(selector_table).addClass('fullwidth');
+		$(selector_label).addClass('hide');
+
+	}
+
+$('ul#steps').after('<div id="add_another_button">Add</div><div class="remove_this">Remove</div>')
+
+
+
+$('div#add_another_button').click(function () {
+	console.log('clicked');
+    clone_field_list('li:last');
+
+    var lis = document.querySelectorAll('.steptext').length;
+    console.log(lis)
+    if (lis > 0) {
+    	$('div.remove_this').fadeIn()
+    }
+
+});
+
+$("div.remove_this").click(function(e) {
+    $('ul#steps li:last').remove();
+    e.preventDefault();
+	var lis = document.querySelectorAll('.steptext').length;
+
+	if (lis === 1) {
+		$(this).fadeOut();
+	} 
+
+});
+
+function clone_field_list(selector) {
+    var new_element = $(selector).clone(true);
+    var elem_id = new_element.find(':input')[0].id;
+    var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
+    new_element.find(':input').each(function() {
+        var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
+        $(this).addClass('steptext');
+        $(this).html('');
+    });
+    new_element.find('label').each(function() {
+        var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
+        $(this).attr('for', new_for);
+    });
+    
+    $(selector).after(new_element)
+    
+
+}
+
+
+</script>
+{% endif %}
 {% endblock %}
+
+
+