From 046f790d23651c5afd7e9568b1fe4e0e53d3b1ff Mon Sep 17 00:00:00 2001
From: Mirjan Hoffmann <mirjan.hoffmann@tib.eu>
Date: Thu, 23 Nov 2023 06:50:43 +0100
Subject: [PATCH] added json output

Ref https://gitlab.com/oersi/metadata-form/-/issues/6
---
 metadata-generator.html | 37 +++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/metadata-generator.html b/metadata-generator.html
index 7f57b8d..9a331a3 100644
--- a/metadata-generator.html
+++ b/metadata-generator.html
@@ -248,13 +248,28 @@
         </div>
       </div>
 
-      <button type="button" onclick="generate()" class="btn btn-primary"><i class="fa fa-arrow-down"></i> <span data-i18n="LABEL_GENERATE">Generieren</span>
-      </button>
-      <button type="button" disabled onclick="copy_generated_output()" class="btn btn-primary" id="button_copy_generated_output"><i class="fa fa-copy"></i> <span data-i18n="LABEL_COPY">Kopieren</span>
-      </button>
       <div class="form-group">
-        <label for="comment" data-i18n="LABEL_YAML_METADATA">YAML Metadaten</label>
-        <textarea class="form-control" rows="15" id="comment"></textarea>
+        <button type="button" onclick="generate()" class="btn btn-primary"><i class="fa fa-arrow-down"></i> <span data-i18n="LABEL_GENERATE">Generieren</span></button>
+      </div>
+      <div class="form-group">
+        <ul class="nav nav-tabs" id="outputTab" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="yaml-tab" data-toggle="tab" data-target="#yaml" type="button" role="tab" aria-controls="yaml" aria-selected="true">YAML</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="json-tab" data-toggle="tab" data-target="#json" type="button" role="tab" aria-controls="json" aria-selected="false">JSON</button>
+          </li>
+        </ul>
+        <div class="tab-content" id="outputTabContent">
+          <div class="tab-pane fade show active" id="yaml" role="tabpanel" aria-labelledby="yaml-tab">
+            <button type="button" disabled onclick="copy_generated_output('yaml_output')" class="btn btn-primary my-2" id="button_copy_generated_output_yaml"><i class="fa fa-copy"></i> YAML <span data-i18n="LABEL_COPY">Kopieren</span></button>
+            <textarea class="form-control" rows="15" id="yaml_output"></textarea>
+          </div>
+          <div class="tab-pane fade" id="json" role="tabpanel" aria-labelledby="json-tab">
+            <button type="button" disabled onclick="copy_generated_output('json_output')" class="btn btn-primary my-2" id="button_copy_generated_output_json"><i class="fa fa-copy"></i> JSON <span data-i18n="LABEL_COPY">Kopieren</span></button>
+            <textarea class="form-control" rows="15" id="json_output"></textarea>
+          </div>
+        </div>
       </div>
     </form>
   </div>
@@ -664,11 +679,11 @@
     return creators;
   }
 
-  function copy_generated_output() {
+  function copy_generated_output(text_element_id) {
     if (!navigator.clipboard) {
       return;
     }
-    navigator.clipboard.writeText(document.getElementById("comment").value).then(function() {
+    navigator.clipboard.writeText(document.getElementById(text_element_id).value).then(function() {
       $("#copied_to_clipboard_toast").toast("show");
     }, function(err) {
       console.error('Async: Could not copy text: ', err);
@@ -720,9 +735,11 @@
                         + ('0' + datePublished.getDate()).slice(-2);
       meta.datePublished = dateString;
     }
-    document.getElementById("comment").value = jsyaml.dump(meta);
+    document.getElementById("yaml_output").value = jsyaml.dump(meta);
+    document.getElementById("json_output").value = JSON.stringify(meta, null, 2);
     if (navigator.clipboard) {
-      document.getElementById("button_copy_generated_output").disabled = false
+      document.getElementById("button_copy_generated_output_yaml").disabled = false
+      document.getElementById("button_copy_generated_output_json").disabled = false
     }
   }