Simplified input fields

Ref https://gitlab.com/oersi/metadata-form/-/issues/3

i18n/de.json

@@ -41,6 +41,7 @@
   "LABEL_STATUS_PUBLISHED": "Veröffentlicht",
   "LABEL_SUBJECT": "Fach",
   "LABEL_TITLE": "Titel",
-  "LABEL_URL": "URL",
+  "LABEL_URL": "URL der Ressource",
+  "LABEL_URL_PLACEHOLDER": "Direktlink zur Resource (Voreinstellung GitHub/GitLab Pages URL)",
   "LABEL_YAML_METADATA": "YAML Metadaten"
 }

i18n/en.json

@@ -41,6 +41,7 @@
   "LABEL_STATUS_PUBLISHED": "Published",
   "LABEL_SUBJECT": "Subject",
   "LABEL_TITLE": "Title",
-  "LABEL_URL": "URL",
+  "LABEL_URL": "Resource URL",
+  "LABEL_URL_PLACEHOLDER": "Direct link to the resource (default GitHub/GitLab Pages URL)",
   "LABEL_YAML_METADATA": "YAML Metadata"
 }

metadata-generator.html

@@ -205,10 +205,8 @@
       <div class="form-group row">
         <label for="inputUrl" class="col-sm-2 col-form-label" data-i18n="LABEL_URL">URL</label>
         <div class="col-sm-10">
-          <input type="url" class="form-control" id="inputUrl" placeholder="URL"
+          <input type="url" class="form-control" id="inputUrl" placeholder="URL" data-i18n-placeholder="LABEL_URL_PLACEHOLDER" value="">
-                 data-i18n-placeholder="LABEL_URL" value="" required>
           <div class="valid-feedback"></div>
-          <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
         </div>
       </div>
       <div class="form-group row">
@@ -612,13 +610,16 @@
     const selectedSubjects = $('#inputSubjectOf').val();
     const selectedResourceTypes = $('#inputResourceType').val();
     const selectedEducationalLevel = $('#inputEducationalLevel').val();
+    const identifier = document.getElementById("inputUrl").value;
     let meta = {
       creativeWorkStatus: document.getElementById("inputStatus").value,
-      id: document.getElementById("inputUrl").value,
       name: document.getElementById("inputTitle").value,
       description: document.getElementById("inputDescription").value,
       license: {id: document.getElementById("licenseUrl").value}
     }
+    if (identifier) {
+      meta.id = identifier;
+    }
     if (creators.length > 0) {
       meta.creator = creators
     }
@@ -629,16 +630,16 @@
       meta.inLanguage = selectedLanguages;
     }
     if (selectedSubjects.length > 0) {
-      meta.about = selectedSubjects.map((s) => ({id: s}))
+      meta.about = selectedSubjects
     }
     if (document.getElementById("inputImage").value) {
       meta.image = document.getElementById("inputImage").value
     }
     if (selectedResourceTypes.length > 0) {
-      meta.learningResourceType = selectedResourceTypes.map((t) => ({id: t}))
+      meta.learningResourceType = selectedResourceTypes
     }
     if (selectedEducationalLevel.length > 0) {
-      meta.educationalLevel = selectedEducationalLevel.map((t) => ({id: t}))
+      meta.educationalLevel = selectedEducationalLevel
     }
     document.getElementById("comment").value = jsyaml.dump(meta);
     if (navigator.clipboard) {
@@ -666,21 +667,26 @@
   }
   function importData() {
     try {
+      const idMap = (o) => (typeof o === 'string' || o instanceof String) ? o : o.id;
       const data = jsyaml.load(document.getElementById("importData").value);
-      const aboutIds = data.about ? data.about.map((o) => o.id) : [];
+      const aboutIds = data.about ? data.about.map(idMap) : [];
-      const learningResourceTypeIds = data.learningResourceType ? data.learningResourceType.map((o) => o.id) : [];
+      const learningResourceTypeIds = data.learningResourceType ? data.learningResourceType.map(idMap) : [];
+      const educationalLevelIds = data.educationalLevel ? data.educationalLevel.map(idMap) : [];
 
       document.getElementById("inputStatus").value = data.creativeWorkStatus ? data.creativeWorkStatus : "Draft";
-      document.getElementById("inputUrl").value = data.id;
+      document.getElementById("inputUrl").value = data.id ? data.id : "";
       document.getElementById("inputTitle").value = data.name;
       setCreators(data.creator ? data.creator : []);
       document.getElementById("inputTags").value = data.keywords ? data.keywords.join(", ") : "";
       document.getElementById("inputDescription").value = data.description ? data.description : "";
       $('#inputLanguage').val(data.inLanguage ? data.inLanguage : []).selectpicker('refresh');
       $('#inputSubjectOf').val(aboutIds).selectpicker('refresh');
-      setLicense((data.license && data.license.id) ? data.license.id : "")
+      setLicense((data.license && data.license.id) ? idMap(data.license) : "")
       document.getElementById("inputImage").value = data.image ? data.image : "";
       $('#inputResourceType').val(learningResourceTypeIds).selectpicker('refresh');
+      if (educationalLevelIds.length > 0) {
+        $('#inputEducationalLevel').val(educationalLevelIds).selectpicker('refresh');
+      }
     } catch (e) {
       console.warn(e);
       alert(i18next.t("LABEL_IMPORT_ERROR_MSG"));