Merge branch 'add-datepublished-to-metadata-form' into 'master'

Add datePublished to metadata form

See merge request oersi/metadata-form!4

i18n/de.json

@@ -44,5 +44,6 @@
   "LABEL_URL": "URL der Ressource",
   "LABEL_URL_PLACEHOLDER": "Direktlink zur Resource (Voreinstellung GitHub/GitLab Pages URL)",
   "LABEL_YAML_METADATA": "YAML Metadaten",
-  "LABEL_NO_INSTITUTION_FOUND": "Keine passende Institution gefunden"
+  "LABEL_NO_INSTITUTION_FOUND": "Keine passende Institution gefunden",
+  "LABEL_DATE_PUBLISHED": "Veröffentlichungsdatum"
 }

i18n/en.json

@@ -44,5 +44,6 @@
   "LABEL_URL": "Resource URL",
   "LABEL_URL_PLACEHOLDER": "Direct link to the resource (default GitHub/GitLab Pages URL)",
   "LABEL_YAML_METADATA": "YAML Metadata",
-  "LABEL_NO_INSTITUTION_FOUND": "No matching institution found"
+  "LABEL_NO_INSTITUTION_FOUND": "No matching institution found",
+  "LABEL_DATE_PUBLISHED": "Date published"
 }

metadata-generator.html

@@ -17,6 +17,12 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"/>
 
+  <!-- datepicker -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.de.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.en-US.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css"/>
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
 
   <!-- Latest compiled and minified JavaScript -->
@@ -223,7 +229,7 @@
       <div class="form-group row">
         <label for="inputStatus" class="col-sm-2 col-form-label" data-i18n="LABEL_STATUS">Status</label>
         <div class="col-sm-10">
-          <select class="custom-select" id="inputStatus" required>
+          <select class="custom-select" id="inputStatus" onchange="createOrUpdateDatePicker()" required>
             <option value="Draft" data-i18n="LABEL_STATUS_DRAFT" selected>Entwurf</option>
             <option value="Incomplete" data-i18n="LABEL_STATUS_INCOMPLETE">Unvollständig</option>
             <option value="Published" data-i18n="LABEL_STATUS_PUBLISHED">Veröffentlicht</option>
@@ -232,6 +238,15 @@
           <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
         </div>
       </div>
+      <div class="form-group row" id="datePublishedFormGroup">
+        <label for="datePublished" class="col-sm-2 col-form-label" data-i18n="LABEL_DATE_PUBLISHED">Veröffentlichungsdatum</label>
+        <div class="col-sm-10 input-group date" id="datepicker1" data-target-input="nearest">
+          <input type="text" id="datepickerInput" class="form-control datepicker-input" data-target="#datepicker1"/>
+          <div class="input-group-append" data-target="#datepicker1" data-toggle="datepicker">
+              <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+          </div>
+        </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>
@@ -554,6 +569,7 @@
 
     creatorList.insertBefore(item, creatorList.lastElementChild);
     createOrUpdateSelect2();
+    createOrUpdateDatePicker();
     updateContent();
   }
 
@@ -620,6 +636,7 @@
     const selectedResourceTypes = $('#inputResourceType').val();
     const selectedEducationalLevel = $('#inputEducationalLevel').val();
     const identifier = document.getElementById("inputUrl").value;
+    const datePublished = $("#datepicker1").datepicker("getDate");
     let meta = {
       creativeWorkStatus: document.getElementById("inputStatus").value,
       name: document.getElementById("inputTitle").value,
@@ -650,6 +667,12 @@
     if (selectedEducationalLevel.length > 0) {
       meta.educationalLevel = selectedEducationalLevel
     }
+    if (meta.creativeWorkStatus == "Published" && datePublished) {
+      let dateString = datePublished.getFullYear() + "-"
+                        + ('0' + (datePublished.getMonth()+1)).slice(-2) + "-"
+                        + ('0' + datePublished.getDate()).slice(-2);
+      meta.datePublished = dateString;
+    }
     document.getElementById("comment").value = jsyaml.dump(meta);
     if (navigator.clipboard) {
       document.getElementById("button_copy_generated_output").disabled = false
@@ -683,6 +706,7 @@
       const educationalLevelIds = data.educationalLevel ? data.educationalLevel.map(idMap) : [];
 
       document.getElementById("inputStatus").value = data.creativeWorkStatus ? data.creativeWorkStatus : "Draft";
+      $("#datepicker1").datepicker("update", new Date(data.datePublished));
       document.getElementById("inputUrl").value = data.id ? data.id : "";
       document.getElementById("inputTitle").value = data.name;
       setCreators(data.creator ? data.creator : []);
@@ -789,6 +813,7 @@
     i18next.changeLanguage(languageCode);
     document.getElementById("selectedLanguageLabel").textContent = languageCode.toUpperCase();
     createOrUpdateSelect2();
+    createOrUpdateDatePicker();
   }
 
   function createOrUpdateSelect2() {
@@ -837,6 +862,31 @@
     });
   }
 
+  function createOrUpdateDatePicker() {
+    // Keep previously set date when changing the language
+    let date = $('#datepicker1').datepicker("getDate");
+
+    if (document.getElementById("inputStatus").value != "Published") {
+      document.getElementById("datepickerInput").required = false;
+    } else {
+      // Make required if input status is set to published
+      document.getElementById("datepickerInput").required = true;
+      // When set to published, set datePublished to today
+      if (!date) {
+        $('#datepicker1').datepicker("update", new Date());
+      }
+    }
+    $('#datepicker1').datepicker("destroy");
+    let language = document.getElementById("selectedLanguageLabel").textContent.toLowerCase();
+    if (language == "en") language += "-US";
+    $('#datepicker1').datepicker({
+      language: language
+    });
+    if (date) {
+      $('#datepicker1').datepicker("update", new Date(date));
+    }
+  }
+
   function updateContent() {
     let elements = document.querySelectorAll('[data-i18n]');
     for (let i = 0; i < elements.length; i++) {