diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 29 | ||||
| -rw-r--r-- | public/script.js | 63 | ||||
| -rw-r--r-- | public/style.css | 35 |
3 files changed, 127 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..bf0f921 --- /dev/null +++ b/public/index.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>Convert 5eTools JSON output to DnDAppFile XML</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600&display=swap" rel="stylesheet"> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <h1>Convert 5eTools JSON output to DnDAppFile XML</h1> + <div class="container"> + <div class="column"> + <h3>JSON input</h3> + <textarea id="jsonInput"></textarea> + <input type="file" id="jsonUploadInput" name="inputJson" /> + <button disabled role="button" id="convertButton">Convert</button> + </div> + <div class="column"> + <h3>XML output</h3> + <textarea id="xmlOutput"></textarea> + <button disabled role="button" id="xmlDownloadButton">Download XML as file</button> + </div> + </div> + <script src="https://unpkg.com/axios/dist/axios.min.js"></script> + <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" + integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> + <script src="script.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..f9263fa --- /dev/null +++ b/public/script.js @@ -0,0 +1,63 @@ +// https://stackoverflow.com/a/18197511/9381890 +function download(filename, text) { + var pom = document.createElement('a'); + pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); + pom.setAttribute('download', filename); + + if (document.createEvent) { + var event = document.createEvent('MouseEvents'); + event.initEvent('click', true, true); + pom.dispatchEvent(event); + } + else { + pom.click(); + } +} + +$('#convertButton').click(async function() { + const jsonInput = $('#jsonInput').val(); + + if (jsonInput.length === 0) return; + + try { + const resp = await axios.post('/convert', { json: jsonInput }); + const data = resp.data; + const xmlOutput = data.xml; + $('#xmlOutput').val(xmlOutput); + $('#xmlOutput').change(); + } catch (err) { + $('#xmlOutput').val(String(err)); + $('#xmlDownloadButton').attr('disabled', true); + } + +}); + +$('#jsonInput').change(function() { + const uploadDisabled = $('#jsonInput').val().length === 0; + $('#convertButton').attr('disabled', uploadDisabled); +}) + +$('#xmlOutput').change(function() { + const downloadDisabled = $('#xmlOutput').val().length === 0; + $('#xmlDownloadButton').attr('disabled', downloadDisabled); +}) + +$('#xmlDownloadButton').click(function() { + const content = $('#xmlOutput').val(); + download('output.xml', content); +}); + +$('#jsonUploadInput').change(function(e) { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.readAsText(file, 'UTF-8'); + reader.onload = function (evt) { + $('#jsonInput').val(evt.target.result); + $('#jsonInput').change(); + } + reader.onerror = function (evt) { + $('#jsonInput').html('Error reading file.'); + } + } +});
\ No newline at end of file diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..9704900 --- /dev/null +++ b/public/style.css @@ -0,0 +1,35 @@ +html { + font-size: 16px; + font-family: 'Montserrat', sans-serif; + color: #222222; +} + +body { + max-width: 1000px; + margin: auto; + padding: 1rem; +} + +.container { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + margin: 0 -1rem; +} + +.column { + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + margin: 0 1rem; + flex: 1; +} + +input[type="file"], button { + margin: 0 0 0.5rem; +} + +textarea { + width: 100%; + min-height: 10rem; +}
\ No newline at end of file |