From 44d1990a9947bc4fe9b8bb3902d9aec0441c9f77 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Wed, 3 Jul 2019 13:55:24 +0300 Subject: Implement web UI --- public/index.html | 29 +++++++++++++++++++++++++ public/script.js | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ public/style.css | 35 +++++++++++++++++++++++++++++++ 3 files changed, 127 insertions(+) create mode 100644 public/index.html create mode 100644 public/script.js create mode 100644 public/style.css (limited to 'public') 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 @@ + + + + Convert 5eTools JSON output to DnDAppFile XML + + + + + +

Convert 5eTools JSON output to DnDAppFile XML

+
+
+

JSON input

+ + + +
+
+

XML output

+ + +
+
+ + + + + \ 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 -- cgit v1.3