rich text

bbearce · Feb 27, 2020 · f0535ab · f0535ab
1 parent a0e1b73
commit f0535ab
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 33 deletions.
diff --git 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
@@ -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;
+  }
diff --git 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
@@ -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
@@ -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
@@ -19,6 +19,10 @@
     <!-- Favicon -->
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">    
 
+    <!-- Quill CSS -->
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+    <link href="../static/css/quill.css" rel="stylesheet">
+
 </head>
 
 <body>
@@ -168,6 +172,11 @@ <h4>Welcome {{ User }}!</h4>
 <!-- Delete Script -->
 <script src="../static/js/delete.js"></script>
 
+<!-- Quill source: https://quilljs.com/docs/download/ -->
+<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
+
+<!-- Quill Script -->
+<script src="../static/js/quill.js"></script>
 
 {% endblock %}
 </body>

diff --git a/templates/brewculator/home.html b/templates/brewculator/home.html
@@ -29,14 +29,32 @@
     </div>
 
 
-
-    <div class='home-app-div'>
+    <!-- Old Notes -->
+<!--     <div class='home-app-div'>
         <button id=convert_md_to_html onclick="convert_md_to_html()">Toggle MD and HTML</button>
         <button id=upload_dialog onclick="toggle_image_upload()">Manage Img/Video Uploads</button>
         <textarea id='notes' name='notes' type="text" style="display: block;">Enter New Recipe Notes</textarea>
         <div id='output-html' style='display: none;'></div>
-    </div>
+    </div> -->
+
 
+    <!-- New Notes -->
+    <div class='home-app-div'>
+        <div id="form-container" class="container">
+            <form>
+            <div class="row form-group">
+                <label for="about">About me</label>
+                <input name="about" type="hidden">
+                <div id="editor-container">
+                <p>Take some notes here. :)</p>
+                </div>
+            </div>
+            <div class="row">
+                <button class="btn btn-primary" type="submit">Save Profile</button>
+            </div>
+            </form>
+        </div>
+    </div>
 
     <!-- Tool Bar -->
     <div class="fl-fl">