Integrated the new json_editor with the SpecificationTemplate change_…

…form and template_editor
NOAA-OWP · Aug 7, 2023 · b9b9b97 · b9b9b97
1 parent 7b728bd
commit b9b9b97
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 120 deletions.
diff --git a/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/json_editor.js b/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/json_editor.js
@@ -1,5 +1,8 @@
 const $ = window.django.jQuery;
 
+/**
+ * A dedicated CodeMirror editor built for Django Admin Views
+ */
 export class JSONConfigurationEditor {
     /**
      * The element that stores the actual data that will be submitted to the server
@@ -146,10 +149,16 @@ function formatErrorMessages(message) {
 }
 
 if (!Object.keys(window).includes('DMOD')) {
+    /**
+     * A namespace for DMOD items
+     */
     window.DMOD = {};
 }
 
 if (!Object.keys(window.DMOD).includes('admin')) {
+    /**
+     * A namespace for DMOD admin items
+     */
     window.DMOD.admin = {};
 }
 

diff --git a/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/template_editor.js b/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/template_editor.js
@@ -1,126 +1,12 @@
+import {JSONConfigurationEditor} from "./json_editor.js";
 const $ = window.django.jQuery;
-let configurationEditor = null;
-
-function shakeError() {
-    $("#json-errors").removeClass("cause-shake");
-    setTimeout(
-        function() {
-            $("#json-errors").addClass("cause-shake");
-        }, 10
-    );
-}
-
-function formErrorMessages(message) {
-    let messageLines = message.split("\n");
-    let outputMessageLines = [];
-
-    for (let line of messageLines) {
-        if (line.search(/[a-zA-Z]/g) < 0) {
-            break;
-        }
-
-        outputMessageLines.push(line);
-    }
-    return outputMessageLines;
-}
-
-function showErrorMessage(message) {
-    const lintState = configurationEditor.state.lint;
-    let errorMessages = [];
-    if (message == null) {
-        for (let marker of lintState.marked) {
-            if (marker.className.includes("error")) {
-                for (let errorMessage of formErrorMessages(marker.__annotation.message)) {
-                    errorMessages.push(errorMessage);
-                }
-            }
-        }
-    }
-    else {
-        errorMessages = formErrorMessages(message);
-    }
-
-    errorMessages = errorMessages.join(" ");
-
-    const errorBox = $("#json-errors");
-
-    errorBox.text(errorMessages);
-
-    if (errorMessages) {
-        errorBox.show();
-        shakeError();
-        errorBox.addClass("editor-error");
-        return true;
-    }
-    else {
-        errorBox.hide();
-        errorBox.removeClass("editor-error");
-        return false
-    }
-}
-
-function editorHasError() {
-    setTimeout(function() {
-        showErrorMessage();
-    }, 800);
-}
-
-function submitChanges(event) {
-    const foundError = showErrorMessage();
-
-    if (foundError) {
-        event.preventDefault();
-    }
-}
 
 $(document).ready(
     function() {
-        const field = $("#id_template_configuration");
-        field.hide();
-        let contents = field.val();
-
-        try {
-            const deserializedContent = JSON.parse(contents);
-            contents = JSON.stringify(deserializedContent, null, 4);
-        } catch (e) {
-            console.error("The data for the template configuration was invalid and could not be reformatted");
-        }
-
-        const editorArea = $("#template_editor")[0];
-        editorArea.value = contents;
-        configurationEditor = CodeMirror.fromTextArea(
-            editorArea,
-            {
-                mode: 'application/json',
-                json: true,
-                indentUnit: 4,
-                lineNumbers: true,
-                allowDropFileTypes: ['application/json'],
-                viewportMargin: Infinity,
-                matchBrackets: true,
-                autoCloseBrackets: true,
-                foldGutter: true,
-                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
-                lint: true
-            }
+        const editor = new JSONConfigurationEditor(
+            "#id_template_configuration",
+            "#template_editor"
         );
-
-        configurationEditor.on(
-            "change",
-            editorHasError
-        );
-
-        configurationEditor.on(
-            "change",
-            (_) => {
-                configurationEditor.save();
-                field.val(configurationEditor.getValue());
-            }
-        );
-
-        $('label[for="id_template_configuration"]').css("float", "none");
-
-        $('input[type="submit"]').on("click", submitChanges);
-        showErrorMessage();
+        editor.initialize();
     }
 );
diff --git a/...aluationservice/templates/admin/evaluation_service/specificationtemplate/change_form.html b/...aluationservice/templates/admin/evaluation_service/specificationtemplate/change_form.html
@@ -86,7 +86,8 @@
         margin: 5px;
     }
 </style>
-    <script src="{% static "js/admin/template_editor.js" %}"></script>
+    <script type="module" src="{%  static "js/admin/json_editor.js" %}"></script>
+    <script type="module" src="{% static "js/admin/template_editor.js" %}"></script>
 {% block object-tools %}
 {% if change %}{% if not is_popup %}
   <ul class="object-tools">