Add commit preview page.

3 files changed, 73 insertions, 68 deletions

diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html
index ab587715..f2f57cec 100644
--- a/gn2/wqflask/templates/gn_editor.html
+++ b/gn2/wqflask/templates/gn_editor.html
@@ -17,8 +17,8 @@
         </div>
         <div >
           <ul class="nav navbar-nav navbar-right">
-            <li><a href="#">Commit</a></li>
-            <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Settings </a></li>
+	    <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Commit </a></li>
+            <li><a href="#" hx-get="/editor/settings" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Settings </a></li>
             <li><a href="#">Help</a></li>
           </ul>
         </div>
diff --git a/gn2/wqflask/templates/gn_editor_settings.html b/gn2/wqflask/templates/gn_editor_settings.html
index 466e18c3..769fe23d 100644
--- a/gn2/wqflask/templates/gn_editor_settings.html
+++ b/gn2/wqflask/templates/gn_editor_settings.html
@@ -1,100 +1,99 @@
 <section>
   <h4><i>Select a theme</i></h4>
   <form>
-  <div class="form-check">
+    <div class="form-check">
       <input class="form-check-input" type="radio" name="theme" id="twilightTheme" value="twilight" checked >
       <label class="form-check-label" for="twilight">twilight</label>
-  </div>
- 
+    </div>
+
     <div class="form-check">
       <input class="form-check-input" type="radio" name="theme" id="draculaTheme" value="dracula">
       <label class="form-check-label" for="draculaTheme">dracula</label>
-	</div>
-        <div class="form-check">
+    </div>
+    <div class="form-check">
       <input class="form-check-input" type="radio" name="theme" id="normalTheme" value="textmate" checked >
       <label class="form-check-label" for="normalTheme">Text</label>
-	</div>
+    </div>
     <div class="form-check">
       <input class="form-check-input" type="radio" name="theme" id="monokaiTheme" value="monokai" >
       <label class="form-check-label" for="monokaiTheme">Monokai</label>
     </div>
-        <div class="form-check">
+    <div class="form-check">
       <input class="form-check-input" type="radio" name="theme" id="customTheme" value="xcode">
       <label class="form-check-label" for="customTheme">xcode</label>
     </div>
 
-<br>
-<div class="form-group" style="padding-top:10px">
-  <h4> <i>Select Font Size</i></h4>
-  <input type="range" class="form-control-range" id="fontSizeRange" name="fontSizeRange" min="10" max="36" step="1" value="16">
-  <em><span id="fontSizeValue">16</span> px</em>
-</div>
+    <br>
+    <div class="form-group" style="padding-top:10px">
+      <h4> <i>Select Font Size</i></h4>
+      <input type="range" class="form-control-range" id="fontSizeRange" name="fontSizeRange" min="10" max="36" step="1" value="16">
+      <em><span id="fontSizeValue">16</span> px</em>
+    </div>
 
-<br>
-<div>
-   <h4><i>Select Wrap Option:</i></h4>
+    <br>
+    <div>
+      <h4><i>Select Wrap Option:</i></h4>
       <div class="form-check">
-      <input class="form-check-input" type="radio" name="wrap" id="normalTheme" value="true"  checked>
-      <label class="form-check-label" for="normalTheme">True</label>
-    </div>
-    <div class="form-check">
-      <input class="form-check-input" type="radio" name="wrap" id="monokaiTheme" value="false">
-      <label class="form-check-label" for="monokaiTheme">False</label>
-    </div>
-</div>
-<div>
-   <h4><i>Cursor Styles:</i></h4>
+        <input class="form-check-input" type="radio" name="wrap" id="normalTheme" value="true"  checked>
+        <label class="form-check-label" for="normalTheme">True</label>
+      </div>
       <div class="form-check">
-      <input class="form-check-input" type="radio" name="cursor" id="aceCursor" value="ace" checked >
-      <label class="form-check-label" for="aceCursor">ace</label>
-    </div>
-    <div class="form-check">
-      <input class="form-check-input" type="radio" name="cursor" id="slimCursor" value="slim">
-      <label class="form-check-label" for="slimCursor">slim</label>
-    </div>
-    <div class="form-check">
-      <input class="form-check-input" type="radio" name="cursor" id="smoothCursor" value="smooth">
-      <label class="form-check-label" for="smoothCursor">smooth</label>
+        <input class="form-check-input" type="radio" name="wrap" id="monokaiTheme" value="false">
+        <label class="form-check-label" for="monokaiTheme">False</label>
+      </div>
     </div>
+    <div>
+      <h4><i>Cursor Styles:</i></h4>
+      <div class="form-check">
+        <input class="form-check-input" type="radio" name="cursor" id="aceCursor" value="ace" checked >
+        <label class="form-check-label" for="aceCursor">ace</label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input" type="radio" name="cursor" id="slimCursor" value="slim">
+        <label class="form-check-label" for="slimCursor">slim</label>
+      </div>
       <div class="form-check">
-      <input class="form-check-input" type="radio" name="cursor" id="wideCursor" value="wide">
-      <label class="form-check-label" for="wideCursor">wide</label>
+        <input class="form-check-input" type="radio" name="cursor" id="smoothCursor" value="smooth">
+        <label class="form-check-label" for="smoothCursor">smooth</label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input" type="radio" name="cursor" id="wideCursor" value="wide">
+        <label class="form-check-label" for="wideCursor">wide</label>
+      </div>
     </div>
-</div>
   </form>
   <br>
-<div class="row">
-  <div class="col-sm-offset-1">
-    <button class="btn btn-primary" id="settingBtn">
-  Save Settings
-</button>
+  <div class="row">
+    <div class="col-sm-offset-1">
+      <button class="btn btn-primary" id="settingBtn">
+        Save Settings
+      </button>
+    </div>
   </div>
-</div>  
 </section>
 
 {% block js %}
 <script>
-  
+
   $('#fontSizeRange').on('input', function () {
-  var fontSize = $(this).val();
-  $('#fontSizeValue').text(fontSize);
-});  
+      var fontSize = $(this).val();
+      $('#fontSizeValue').text(fontSize);
+  });
 
   document.querySelector("#settingBtn").addEventListener("click", function () {
- var formData = {
-    theme: `ace/theme/${$('input[name="theme"]:checked').val()}`,
-    fontSize: parseInt($("#fontSizeRange").val()),
-     wrap:$('input[name="wrap"]:checked').val()== "false" ? false : true,
-     cursorStyle: $('input[name="cursor"]:checked').val()
-     
- }
-   htmx.find("#output").dispatchEvent(
-    new CustomEvent("updateEditor", {
-      bubbles: true,
-	detail: {action: 'didInitialize', payload: formData},
-    }),
-  );
-});
+      var formData = {
+          theme: `ace/theme/${$('input[name="theme"]:checked').val()}`,
+          fontSize: parseInt($("#fontSizeRange").val()),
+          wrap:$('input[name="wrap"]:checked').val()== "false" ? false : true,
+          cursorStyle: $('input[name="cursor"]:checked').val()
+
+      }
+      htmx.find("#output").dispatchEvent(
+          new CustomEvent("updateEditor", {
+              bubbles: true,
+              detail: {action: 'didInitialize', payload: formData},
+          }),
+      );
+  });
 </script>
 {% endblock %}
-
diff --git a/gn2/wqflask/views.py b/gn2/wqflask/views.py
index e08ccd8e..5d2bdfb2 100644
--- a/gn2/wqflask/views.py
+++ b/gn2/wqflask/views.py
@@ -315,11 +315,17 @@ def edit_gn_file():
     return render_template("gn_editor.html")
 
 
-@app.route("/editor/commit", methods=["GET"])
-def commit_page():
+@app.route("/editor/settings", methods=["GET"])
+def editor_settings():
     return render_template("gn_editor_settings.html")
 
 
+@app.route("/editor/commit", methods=["GET", "POST"])
+def commit_editor():
+    if request.method == "GET":
+        return render_template("gn_editor_commit.html")
+
+
 @app.route("/gnqna/hist/", methods=["GET"])
 @require_oauth2
 def get_hist_titles():