#4 -- Add event listeners on value change

src/main/java/ru/ulstu/fc/rule/controller/FuzzyRuleController.java

@@ -65,6 +65,7 @@ public class FuzzyRuleController {
     @ResponseBody
     @GetMapping("/getVariables/{projectId}")
     public List<Variable> getVariables(@PathVariable("projectId") Integer projectId) {
+        //TODO: return DTO without terms
         return variableService.getAllByProject(projectId);
     }
 

src/main/resources/public/js/fuzzyRule.js

@@ -0,0 +1,126 @@
+/* exported MessageTypesEnum */
+var MessageTypesEnum = {
+    INFO: "info",
+    SUCCESS: "success",
+    WARNING: "warning",
+    DANGER: "danger"
+};
+Object.freeze(MessageTypesEnum);
+
+function isEmpty(value) {
+    if (typeof  value === "function") {
+        return false;
+    }
+    return (value == null || value.length === 0);
+}
+
+/* exported showFeedbackMessage */
+function showFeedbackMessage(message, type) {
+    alert(type + ' ' + message);
+}
+/* exported errorHandler */
+function errorHandler(response, callBack, errorCallBack) {
+    if (!isEmpty(response.error)) {
+        // TODO: add l10n
+        // showFeedbackMessage(response.error.code + ": " + response.error.message, MessageTypesEnum.DANGER);
+        if (!isEmpty(errorCallBack)) {
+            errorCallBack(response.data);
+        }
+        throw response.error.code + ": " + response.error.message +
+        " / Details: " + response.error.data;
+    }
+    if (!isEmpty(callBack)) {
+        callBack(response);
+    }
+}
+
+/* exported getFromRest */
+function getFromRest(url, callBack) {
+    $.ajax({
+        url: url,
+        cache: false,
+        success: function (response) {
+            errorHandler(response, callBack);
+        }
+    });
+}
+
+/* exported createRule */
+ function createRule(ruleContentElement) {
+    var ruleString = "if ";
+    var inp = $('.selectpicker.inputVar').map(function() {return $(this).val();}).get();
+    var inpVal = $('.selectpicker.inputVal').map(function() {return $(this).val();}).get();
+    for (var i = 0; i < inp.length; i++) {
+        if (i > 0) {
+            ruleString += ' and ';
+        }
+        ruleString += inp[i] + " is " + inpVal[i];
+    }
+    $(ruleContentElement).val(ruleString);
+}
+
+/* exported fillSelect */
+function fillSelect(selectElement, values) {
+    $(selectElement).html("");
+    $.each(values, function (key, value) {
+        $(selectElement).append($("<option />").val(value.id).text(value.name));
+    });
+}
+
+function fillFuzzyTerms(variableElement, fuzzyTermsElement) {
+    getFromRest("/rule/getFuzzyTerms/"+$(variableElement).val(), function (fuzzyTerms) {
+       var fuzzyTermsData = [];
+       $.each(fuzzyTerms, function (key, value) {
+           fuzzyTermsData.push({
+               id: value.id,
+               name: value.description
+           });
+       });
+       fillSelect(fuzzyTermsElement, fuzzyTermsData);
+       $(fuzzyTermsElement).selectpicker("refresh");
+       $(fuzzyTermsElement).trigger("change");
+   });
+}
+
+function fillVariables(projectId, variableElement) {
+    getFromRest("/rule/getVariables/"+projectId, function (variables) {
+       var variablesData = [];
+       $.each(variables, function (key, value) {
+           variablesData.push({
+               id: value.id,
+               name: value.name
+           });
+       });
+       fillSelect(variablesElement, variablesData);
+       $(variablesElement).selectpicker("refresh");
+       $(variablesElement).trigger("change");
+   });
+}
+
+function variableValueChanged(variablesElement, fuzzyTermsElement) {
+    fillFuzzyTerms(variableElement, fuzzyTermsElement);
+}
+
+function addVariableSelect(projectId) {
+    variablesElement = $("<select class='selectpicker inputVar m-2' data-live-search='true data-width='70%'></select>");
+    $(variablesElement).append($("<option />").text('Значения загружаются...'));
+    fillVariables(projectId, variablesElement);
+    return variablesElement;
+}
+
+function addFuzzyTermsSelect(variableElement) {
+    fuzzyTermsElement = $("<select class='selectpicker inputVal m-2' data-live-search='true data-width='70%'></select>");
+    if ($(variableElement).val()) {
+        fillFuzzyTerms(variableElement, fuzzyTermsElement);
+    }
+    return fuzzyTermsElement;
+}
+
+function addAntecedent(parentElement, projectId) {
+    variableElement = addVariableSelect(projectId);
+    fuzzyTermsElement = addFuzzyTermsSelect(variableElement)
+    $(variablesElement).on( "change", function() {variableValueChanged(this, fuzzyTermsElement)});
+    $(parentElement).append(variableElement);
+    $(parentElement).append("<label class='col col-md-1'>есть</label>");
+    $(parentElement).append(fuzzyTermsElement);
+}

src/main/resources/templates/rule/edit.html

@@ -5,11 +5,12 @@
 <head>
     <title>Редактирование правила</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <script></script>
 </head>
 <div class="container" layout:fragment="content">
     <h3>Редактирование правила:</h3>
     <form th:action="@{/rule/save}" th:object="${fuzzyRuleForm}" method="post">
-        <input type="hidden" th:field="*{projectId}">
+        <input type="hidden" id="projectId" th:field="*{projectId}">
         <input type="hidden" th:field="*{id}">
         <div class="form-group">
             <label for="ruleContent">Правило</label>
@@ -24,6 +25,10 @@
                 Не может быть пустым
             </p>
         </div>
+        <div class="form-group" id="rules">
+            <label class="col col-md-1">Если</label>
+        </div>
+        <hr/>
         <div class="form-group">
             <label class="col col-md-1">Если</label>
             <select id="select-variable" class="selectpicker inputVar m-2" data-live-search="true" data-width="70%"
@@ -61,24 +66,11 @@
             Удалить
         </button>
         <a th:href="@{'/project/edit/' + ${projectId}}" class="btn btn-outline-dark">Отмена</a>
+        <script type="text/javascript" src="/js/fuzzyRule.js"></script>
         <script>
-            function createRule() {
-                var ruleString = "if ";
-                var inp = $('.selectpicker.inputVar').map(function() {
-                            return $(this).val();
-                          }).get();
-                var inpVal = $('.selectpicker.inputVal').map(function() {
-                            return $(this).val();
-                          }).get();
-                for (var i = 0; i < inp.length; i++) {
-                    if (i > 0) {
-                        ruleString += ' and ';
-                    }
-                    ruleString += inp[i] + " is " + inpVal[i];
-                }
-                $('#ruleContent').val(ruleString);
-            }
-            createRule();
+            /*<![CDATA[*/
+                addAntecedent($('#rules'), [[${projectId}]]);
+            /*]]>*/
         </script>
     </form>
 </div>