From c5cfeb97c25b5126dd7e49000cc908c41dc9e143 Mon Sep 17 00:00:00 2001
From: Charles Neill <1749665+cneill@users.noreply.github.com>
Date: Sun, 17 Sep 2023 00:49:10 -0500
Subject: [PATCH] sorting fields; fixing http

---
 cmd/jsonstruct/http.go                        |  4 +-
 cmd/jsonstruct/http/static/index.css          | 56 +++++++++++++------
 cmd/jsonstruct/http/static/index.js           | 21 ++++++-
 .../http/templates/templates.gohtml           | 51 +++++++++++------
 formatter.go                                  |  8 ++-
 5 files changed, 103 insertions(+), 37 deletions(-)

diff --git a/cmd/jsonstruct/http.go b/cmd/jsonstruct/http.go
index 3838558..dd47088 100644
--- a/cmd/jsonstruct/http.go
+++ b/cmd/jsonstruct/http.go
@@ -79,8 +79,8 @@ func GenerateHandler(w http.ResponseWriter, req *http.Request) {
 	}
 
 	formatter, err := jsonstruct.NewFormatter(&jsonstruct.FormatterOptions{
-		// SortFields:    ctx.Bool("sort-fields"),
-		// ValueComments: ctx.Bool("value-comments"),
+		SortFields:    req.PostForm.Get("sort_fields") == "on",
+		ValueComments: req.PostForm.Get("value_comments") == "on",
 		// InlineStructs: ctx.Bool("inline-structs"),
 	})
 	if err != nil {
diff --git a/cmd/jsonstruct/http/static/index.css b/cmd/jsonstruct/http/static/index.css
index f7cb9a8..39cfa25 100644
--- a/cmd/jsonstruct/http/static/index.css
+++ b/cmd/jsonstruct/http/static/index.css
@@ -1,31 +1,60 @@
 .body {
     background-color: #000000;
     color: #ffffff;
+    padding: 0;
+    margin: 0;
+}
+
+.form {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.container {
+    display: grid;
+    grid-template-rows: 80% 20%;
+    grid-template-columns: 50% 50%;
+    height: 100vh;
+    width: 100vw;
+    padding: 0;
+    margin: 0;
+}
+
+.input-container {
+    grid-row: 1/2;
+    grid-column: 1/2;
+}
+
+.output-container {
+    grid-row: 1/2;
+    grid-column: 2/3;
+}
+
+.options-container {
+    padding-top: 10px;
+    grid-row: 2/3;
+    grid-column: 1/3;
 }
 
 .input, .output {
+    height: 100%;
     width: 100%;
-    min-height: 100px;
-    max-height: 500px;
     background-color: #000000;
     color: #ffffff;
-    font-size: 1.5em;
+    /*font-size: 1.5em;*/
     font-family: Lucida Console, monospace;
     border-color: #333333;
 }
 
 .button {
     font-size: 20pt;
-    width: 100%;
+    /*width: 100%;*/
     border-width: 3px;
     border-style: solid;
     border-radius: 3px;
     font-weight: bold;
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    padding: 10px;
     cursor: pointer;
 }
 
@@ -41,11 +70,6 @@
     color: #ffffff;
 }
 
-.output.htmx-added {
-  opacity: 0;
-}
-
-.output {
-  opacity: 1;
-  transition: opacity 200ms ease-out;
+.htmx-indicator {
+    display: none;
 }
diff --git a/cmd/jsonstruct/http/static/index.js b/cmd/jsonstruct/http/static/index.js
index 55e9979..62a4871 100644
--- a/cmd/jsonstruct/http/static/index.js
+++ b/cmd/jsonstruct/http/static/index.js
@@ -2,7 +2,6 @@ function clipboardCopy() {
     var output = document.querySelector("#output");
     output.select();
     output.setSelectionRange(0, 9999999);
-    console.log(output.value);
     navigator.clipboard.writeText(output.value);
 }
 
@@ -14,3 +13,23 @@ window.onload = function() {
         clipboardCopy();
     });
 }
+
+document.body.addEventListener("htmx:beforeSwap", e => {
+    if (e.detail.xhr.status >= 400) {
+        e.detail.shouldSwap = false;
+        e.detail.isError = true;
+    }
+});
+
+document.body.addEventListener("htmx:beforeRequest", e => {
+    let inputElem = e.detail.elt.querySelector(".input");
+    let inputText = inputElem.value;
+
+    try {
+        JSON.parse(inputText);
+    } catch (err) {
+        if (inputText != "") {
+            e.preventDefault();
+        }
+    }
+});
diff --git a/cmd/jsonstruct/http/templates/templates.gohtml b/cmd/jsonstruct/http/templates/templates.gohtml
index 789d1ff..7c419d3 100644
--- a/cmd/jsonstruct/http/templates/templates.gohtml
+++ b/cmd/jsonstruct/http/templates/templates.gohtml
@@ -5,29 +5,48 @@
     <meta charset="UTF-8">
     <title>Roam Quote Prettifier</title>
     <link rel="stylesheet" href="/static/index.css" type="text/css"></link>
-
-    <script src="/static/htmx.min.js"></script>
-    <script src="/static/index.js"></script>
 </head>
 <body class="body">
-    <form hx-indicator="#indicator">
-        <textarea class="input" id="input" name="input" placeholder="Enter your JSON"
-            hx-post="/generate"
-            hx-swap="outerHTML settle:400ms"
-            hx-target="#output"
-            hx-trigger="keyup changed dely:500ms"></textarea>
-        <br />
+    <form class="form" hx-post="/generate"
+        hx-swap="innerHTML"
+        hx-target="#output-container"
+        hx-trigger="keyup changed delay:50ms from:.input"
+        focus-scroll:true>
+        <div class="container">
+            <div class="input-container">
+                <textarea class="input" id="input" name="input" placeholder="Enter your JSON"></textarea>
+            </div>
+            <div class="output-container" id="output-container">
+                <img class="htmx-indicator" id="indicator" src="/static/loading.webp" />
+                <textarea class="output" id="output" readonly></textarea>
+            </div>
+            <div class="options-container"
+                hx-post="/generate"
+                hx-swap="innerHTML"
+                hx-target="#output-container"
+                hx-trigger="change">
+                <fieldset name="options">
+                    <legend>Options</legend>
+                    <label for="value_comments">Include value comments</label>
+                    <input type="checkbox" name="value_comments">
+                    <label for="sort_fields">Sort fields</label>
+                    <input type="checkbox" name="sort_fields">
+                </fieldset>
+                <br />
+                <button type="button" id="copy" class="button button--green">
+                    Copy to clipboard
+                </button>
+            </div>
+        </div>
     </form>
-    <br />
-    <textarea class="output" id="output"></textarea>
-    <button id="copy" class="button button--green">
-        Copy to clipboard
-    </button>
-    <img id="indicator" src="/static/loading.webp" class="htmx-indicator">
+
+    <script src="/static/htmx.min.js"></script>
+    <script src="/static/index.js"></script>
 </body>
 </html>
 {{- end }}
 
 {{- define "generate" }}
+<img class="htmx-indicator" id="indicator" src="/static/loading.webp" />
 <textarea id="output" class="output" readonly>{{ .Generated }}</textarea>
 {{- end }}
diff --git a/formatter.go b/formatter.go
index 88470f4..9e895be 100644
--- a/formatter.go
+++ b/formatter.go
@@ -48,10 +48,14 @@ func (f *Formatter) FormatStructs(inputs ...*JSONStruct) (string, error) {
 	preamble := "package temp\n"
 	structStr := preamble
 
-	for i, input := range inputs {
+	for inputNum, input := range inputs {
+		if f.SortFields {
+			input.fields.SortAlphabetically()
+		}
+
 		formatted, err := f.formatStructNesting(0, input)
 		if err != nil {
-			return "", fmt.Errorf("failed to format struct %d: %w", i, err)
+			return "", fmt.Errorf("failed to format struct %d: %w", inputNum, err)
 		}
 
 		structStr += formatted