add download button, disable copy method on timeout

Author: fractalwrench

spring/src/main/kotlin/com/fractalwrench/json2kotlin/ConversionController.kt

@@ -32,6 +32,7 @@ class ConversionController {
         val os = conversionService.convert(conversionForm.json)
         model.addAttribute(formKey, conversionForm)
         model.addAttribute("kotlin", String(os.toByteArray()))
+        model.addAttribute("filename", "Foo.kt") // FIXME!
         return displayConversionForm(model)
     }
 

spring/src/main/resources/static/main.js

@@ -0,0 +1,43 @@
+function validateForm() {
+    var json = document.forms["jsonForm"]["json"].value;
+    try {
+        JSON.parse(json);
+    } catch (e) {
+        alert("Input was not interpreted as valid JSON.");
+        return false;
+    }
+}
+
+function copyToClipboard() {
+    var kotlinSource = document.getElementById("kotlinText");
+    kotlinSource.select();
+    document.execCommand("Copy");
+    disableCopyBtn();
+}
+
+function disableCopyBtn() {
+    var btn = document.getElementById("copyBtn");
+    btn.disabled = true;
+    btn.value = "Copied";
+    setTimeout(enableCopyBtn, 1000);
+}
+
+function enableCopyBtn() {
+    var btn = document.getElementById("copyBtn");
+    btn.disabled = false;
+    btn.value = "Copy to Clipboard";
+}
+
+See: https://stackoverflow.com/a/18197341/5144991
+function downloadAsFile() {
+    var filename = document.getElementById("filename").value;
+    var text = document.getElementById("kotlinText").value;
+
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+    element.setAttribute('download', filename);
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+}

spring/src/main/resources/templates/conversion.html

@@ -35,15 +35,16 @@ <h1>Convert JSON to Kotlin Data Class</h1>
     </div>
     <div class="j2kcontainer" th:if="${kotlin != null}">
         <h2 id="results">Generated Kotlin</h2>
+
+        <input type="hidden" id="filename" th:value="${filename}"/>
         <textarea id="kotlinText" th:text="${kotlin}"></textarea>
 
-        <form id="downloadForm" action="#" method="post" onsubmit="return validateForm()">
-            <p>
-                <input type="button" value="Copy to Clipboard"
-                      onclick="copyToClipboard()" />
-                <input type="button" value="Download"/>
-            </p>
-        </form>
+        <p>
+            <input id="copyBtn" type="button" value="Copy to Clipboard"
+                  onclick="copyToClipboard()" />
+            <input type="button" value="Download" onclick="downloadAsFile()"/>
+        </p>
+
     </div>
     <div class="j2kcontainer">
         <!-- TODO -->
@@ -71,23 +72,7 @@ <h2 id="results">Generated Kotlin</h2>
 <link rel="stylesheet" type="text/css" href="/main.css"/>
 <link rel="stylesheet" type="text/css" href="/fonticons.css"/>
 
-<script type="text/javascript">
-    function validateForm() {
-        var json = document.forms["jsonForm"]["json"].value;
-        try {
-            JSON.parse(json);
-        } catch (e) {
-            alert("Input was not interpreted as valid JSON.");
-            return false;
-        }
-    }
-
-    function copyToClipboard() {
-        var kotlinSource = document.getElementById("kotlinText");
-        kotlinSource.select();
-        document.execCommand("Copy");
-    }
-</script>
+<script src="/main.js"></script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/>