From f0535abd88e4aa87b52e9781e716410e2d3d5180 Mon Sep 17 00:00:00 2001 From: Benjamin Date: Wed, 26 Feb 2020 23:45:16 -0500 Subject: [PATCH] rich text --- app.py | 58 +++++++++++++------------- static/css/quill.css | 39 +++++++++++++++++ static/js/load.js | 4 +- static/js/quill.js | 39 +++++++++++++++++ static/js/save.js | 9 +++- templates/brewculator/brewculator.html | 9 ++++ templates/brewculator/home.html | 24 +++++++++-- 7 files changed, 149 insertions(+), 33 deletions(-) create mode 100644 static/css/quill.css create mode 100644 static/js/quill.js diff --git a/app.py b/app.py index d793036..24fdab1 100644 --- a/app.py +++ b/app.py @@ -157,7 +157,7 @@ def logout(): return redirect(url_for('index')) - +### NOT BEING USED ### # Upload file endpoint @app.route('/media_upload', methods=['POST']) def media_upload(): @@ -196,7 +196,7 @@ def media_upload(): return redirect(url_for('brewculator')) - +### NOT BEING USED ### # Delete file endpoint @app.route('/media_delete', methods=['POST']) def media_delete(): @@ -467,34 +467,36 @@ def brewculator(): # Get user user = models.User.query.filter_by(username = current_user.username)[0] - recipe_root = 'recipe_description_images/'+user.username+'/recipes/' - # load S3 images for current user - # Let's use Amazon S3: cleint and resource have different actions and abilities - s3_client = boto3.client('s3') - s3_resource = boto3.resource('s3') + ### NOT BEING USED ### -- this is the code to link to AWS + # recipe_root = 'recipe_description_images/'+user.username+'/recipes/' + + # # load S3 images for current user + # # Let's use Amazon S3: cleint and resource have different actions and abilities + # s3_client = boto3.client('s3') + # s3_resource = boto3.resource('s3') - s3_resource = boto3.resource('s3') - bucket = s3_resource.Bucket('thegratefulbrauer') - objs = list(bucket.objects.filter(Prefix=recipe_root)) - - # This will be the default value unless other objects are found - summaries = [{'key': 'None','last_modified':'None'}] - - if(len(objs)>1): - objects = s3_client.list_objects_v2(Bucket='thegratefulbrauer', StartAfter=recipe_root) - summaries = [] - for s in objects['Contents']: - if (s['Key'].find('.jpg') != -1 or s['Key'].find('.jpeg') != -1 or s['Key'].find('.JPG') != -1 or s['Key'].find('.PNG') != -1 or s['Key'].find('.png') != -1) and s['Key'].find(recipe_root) != -1: - summaries.append( - {'key':s['Key'].replace(recipe_root,''), - 'last_modified': s['LastModified'] - } - ) + # s3_resource = boto3.resource('s3') + # bucket = s3_resource.Bucket('thegratefulbrauer') + # objs = list(bucket.objects.filter(Prefix=recipe_root)) - else: - my_bucket = s3_resource.Bucket('thegratefulbrauer') - my_bucket.put_object(Bucket='thegratefulbrauer', Body='', Key=recipe_root) + # # This will be the default value unless other objects are found + # summaries = [{'key': 'None','last_modified':'None'}] + + # if(len(objs)>1): + # objects = s3_client.list_objects_v2(Bucket='thegratefulbrauer', StartAfter=recipe_root) + # summaries = [] + # for s in objects['Contents']: + # if (s['Key'].find('.jpg') != -1 or s['Key'].find('.jpeg') != -1 or s['Key'].find('.JPG') != -1 or s['Key'].find('.PNG') != -1 or s['Key'].find('.png') != -1) and s['Key'].find(recipe_root) != -1: + # summaries.append( + # {'key':s['Key'].replace(recipe_root,''), + # 'last_modified': s['LastModified'] + # } + # ) + + # else: + # my_bucket = s3_resource.Bucket('thegratefulbrauer') + # my_bucket.put_object(Bucket='thegratefulbrauer', Body='', Key=recipe_root) @@ -578,7 +580,7 @@ def brewculator(): hcolumns = [[j for j in i] for i in hcolumns] # Python3 has zips as generators so I have to convert return render_template('/brewculator/brewculator.html', - User = user.username, Files=summaries, + User = user.username, # Files=summaries, --> from AWS Data = json.dumps(data), Recipes=Recipes, Styles = Styles, diff --git a/static/css/quill.css b/static/css/quill.css new file mode 100644 index 0000000..4add442 --- /dev/null +++ b/static/css/quill.css @@ -0,0 +1,39 @@ +#form-container { + width: 500px; + } + + .row { + margin-top: 15px; + } + .row.form-group { + padding-left: 15px; + padding-right: 15px; + } + .btn { + margin-left: 15px; + } + + .change-link { + background-color: #000; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + bottom: 0; + color: #fff; + opacity: 0.8; + padding: 4px; + position: absolute; + text-align: center; + width: 150px; + } + .change-link:hover { + color: #fff; + text-decoration: none; + } + + img { + width: 150px; + } + + #editor-container { + height: 130px; + } \ No newline at end of file diff --git a/static/js/load.js b/static/js/load.js index eb0b7a3..0f82c8b 100644 --- a/static/js/load.js +++ b/static/js/load.js @@ -20,7 +20,9 @@ $('#load').bind('click', function() { // Recipe $('select[name="style"]').val(loaded_data['data']['Recipe']['gb_recipe_master']['style']) - $('textarea[name="notes"]').val(loaded_data['data']['Recipe']['gb_recipe_master']['notes']) + var loaded_string = JSON.parse(loaded_data['data']['Recipe']['gb_recipe_master']['notes']) + quill.setContents(loaded_string) + // old -- > $('textarea[name="notes"]').val(loaded_data['data']['Recipe']['gb_recipe_master']['notes']) // System $('input[name="batch_size"]').val(loaded_data['data']['Recipe']['gb_recipe_system']['batch_size']) diff --git a/static/js/quill.js b/static/js/quill.js new file mode 100644 index 0000000..c720357 --- /dev/null +++ b/static/js/quill.js @@ -0,0 +1,39 @@ +var quill = new Quill('#editor-container', { + modules: { + toolbar: [ + ['bold', 'italic'], + ['link', 'blockquote', 'code-block', 'image'], + [{ list: 'ordered' }, { list: 'bullet' }] + ] + }, + placeholder: 'Compose an epic...', + theme: 'snow' + }); + +var form = document.querySelector('form'); + +form.onsubmit = function() { + // Populate hidden form on submit + var about = document.querySelector('input[name=about]'); + about.value = JSON.stringify(quill.getContents()); + + // To set the contents + // quill.setContents([{"insert":"Testing new content!\n"}]) + + // What we want to save + // var saved_string = JSON.stringify(quill.getContents()['ops']) + + // To load + // var loaded_string = JSON.parse(saved_string) + // quill.setContents(loaded_string) + + console.log("Submitted", $(form).serialize()); + + console.log("\n\n\n"); + + console.log("Submitted", $(form).serializeArray()); + + // No back end to actually submit to! + alert('Open the console to see the submit data!') + return false; +}; diff --git a/static/js/save.js b/static/js/save.js index e40dc23..5378f5e 100644 --- a/static/js/save.js +++ b/static/js/save.js @@ -1,13 +1,20 @@ $(function() { $('#save').bind('click', function() { + // Quill form preprocessing to be saved + // var form = document.querySelector('form'); // might not be needed + var about = document.querySelector('input[name=about]'); + about.value = JSON.stringify(quill.getContents()); + var saved_string = JSON.stringify(quill.getContents()['ops']); + $.getJSON($SCRIPT_ROOT + '/save', { // Recipe recipe: $('input[name="recipe"]').val(), style: $('select[name="style"]').val(), - notes: $('textarea[name="notes"]').val(), + notes: saved_string, // from Quill above + // old -- > notes: $('textarea[name="notes"]').val(), // System Table diff --git a/templates/brewculator/brewculator.html b/templates/brewculator/brewculator.html index f107d68..bd0b69a 100644 --- a/templates/brewculator/brewculator.html +++ b/templates/brewculator/brewculator.html @@ -19,6 +19,10 @@ + + + + @@ -168,6 +172,11 @@

Welcome {{ User }}!

+ + + + + {% endblock %} diff --git a/templates/brewculator/home.html b/templates/brewculator/home.html index ea8c021..7fbf227 100644 --- a/templates/brewculator/home.html +++ b/templates/brewculator/home.html @@ -29,14 +29,32 @@ - -
+ + + + +
+
+
+
+ + +
+

Take some notes here. :)

+
+
+
+ +
+
+
+