Added styling and add/rm

flask/app/static/styles.css

@@ -146,6 +146,15 @@ ul#steps.form-control {
     width: 100%;
 }
 
+ul#flavours.form-control {
+    display: block;
+    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: block;

flask/app/templates/base.html

@@ -224,6 +224,97 @@ function clone_field_list(selector) {
 }
 
 
+</script>
+{% endif %}
+
+{% if type == 'ingredient' %}
+<script>
+    console.log('ingredient')
+
+    var flavourcount = parseInt('{% if ingredients %}{%for ingredient in ingredients%}{{ingredient.flavours.count()}}{% endfor %}{% else %}0{% endif %}')
+    console.log(flavourcount);
+
+    for (i=0; i<=flavourcount; i++) {
+        
+
+        var name = '#flavours-'+i+'-name'
+        var characteristics = '#flavours-'+i+'-characteristics'
+
+        var selector_ingreds = '#flavours-'+i+'-name'
+        var selector_table = 'table#flavours-'+i
+        var selector_label = '#flavours-'+i+' > tbody > tr > th > label'
+        var prevalence = 'input#flavours-'+i+'-flavours-prevalence'
+        var label_select = 'label[for="flavours-'+i+'"]'
+
+        $('#flavours-'+i+'-flavours > tbody > tr:nth-child(2)').addClass('hide');
+        $('#flavours-'+i+'-flavours > tbody > tr:nth-child(3)').addClass('hide');
+        $('#flavours-'+i+'-flavours > tbody > tr:nth-child(1)').addClass('hide');
+
+        $(characteristics).addClass('steptext');
+        
+        $(characteristics).attr('placeholder', 'Flavour Description')
+        $(name).addClass('ingredtext');
+        $(name).attr('placeholder', 'Flavour Name');
+        $(selector_table).addClass('fullwidth');
+        $(selector_label).addClass('hide');
+        $(label_select).html('Flavour ' + (i+1));
+        
+        $(prevalence).attr('placeholder', 'Prevalence out of 10')
+
+    }
+
+$('ul#flavours').after('<div id="add_another_button">Add</div><div class="remove_this">Remove</div>')
+
+
+
+$('div#add_another_button').click(function () {
+    console.log('clicked');
+    last_li = $(this).prev('li')
+    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#flavours 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', function(i,txt) {return txt.replace(/\d+/, elem_num); });
+        var name = $(this).attr('name', function(i,txt) {return txt.replace(/\d+/, elem_num); });
+        $(this).val('')
+        $(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);
+        $(this).html('Flavour ' + (elem_num + 1))
+    });
+    
+    $(selector).after(new_element)
+    
+
+}
+
+
 </script>
 {% endif %}
 {% endblock %}