Skip to content

Commit b95d188

Browse files
Christoffer-CortesChristoffer-Cortes
committed
Add two way binding and content modify check
1 parent b0ce41d commit b95d188

File tree

2 files changed

+64
-62
lines changed

2 files changed

+64
-62
lines changed

‎src/main/resources/static/js/testrules.js

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -69,20 +69,20 @@ jQuery(document).ready(
6969
}
7070

7171
// Model for knockout(KO) binding
72-
function AppViewModel(rulesList) {
73-
var self = this;
74-
self.rulesBindingList = ko.observableArray(rulesList);
75-
self.eventsBindingList = ko.observableArray([]);
76-
self.parsedToString = function(item) {
77-
return JSON.stringify(item, null, 2);
78-
};
72+
function AppViewModel() {
73+
var self = this;
74+
self.rulesBindingList = ko.observableArray([]);
75+
self.eventsBindingList = ko.observableArray([]);
76+
self.parsedToString = function(item) {
77+
return JSON.stringify(item, null, 2);
78+
};
7979
// Removing the rule
80-
self.removeRule = function(data, event) {
80+
self.removeRule = function(data, event) {
8181
var context = ko.contextFor(event.target);
8282
self.rulesBindingList.splice(context.$index(), 1);
8383
if (self.rulesBindingList().length == 0) {
8484
window.logMessages("Deleted all rule types, but we need atleast one Rule type, Here add default rule type");
85-
self.rulesBindingList.push(ruleTemplate);
85+
self.addRule(ruleTemplate);
8686
}
8787
};
8888

@@ -91,33 +91,28 @@ jQuery(document).ready(
9191
var context = ko.contextFor(event.target);
9292
self.eventsBindingList.splice(context.$index(), 1);
9393
if (self.eventsBindingList().length == 0) {
94-
self.eventsBindingList.push({});
9594
window.logMessages("Deleted all events, but we need atleast one event.");
95+
self.addEvent({});
9696
}
9797
};
9898

99+
self.validateJSON = function(observableArray) {
100+
var array = [];
101+
ko.utils.arrayForEach(observableArray, function (element) {
102+
try {
103+
array.push(JSON.parse(element.data()));
104+
} catch (e) {
105+
window.logMessages("Invalid json rule format :\n" + element.data());
106+
return false;
107+
}
108+
});
109+
return array;
110+
};
111+
99112
//This submit function for finding the aggregated object from the rules and events, This function internally call the ajax call
100113
self.submit = function() {
101-
var events = $("#eventsListID").val();
102-
var formRules = [];
103-
$('.formRules').each(function() {
104-
try {
105-
formRules.push(JSON.parse($(this).val()));
106-
} catch (e) {
107-
window.logMessages("Invalid json rule format :\n" + $(this).val());
108-
return false;
109-
}
110-
});
111-
112-
var formEvents = [];
113-
$('.formEvents').each(function() {
114-
try {
115-
formEvents.push(JSON.parse($(this).val()));
116-
} catch (e) {
117-
window.logMessages("Invalid json event format :\n" + $(this).val());
118-
return false;
119-
}
120-
});
114+
var rules = self.validateJSON(self.rulesBindingList());
115+
var events = self.validateJSON(self.eventsBindingList());
121116

122117
var callback = {
123118
beforeSend : function() {
@@ -153,28 +148,37 @@ jQuery(document).ready(
153148

154149
var ajaxHttpSender = new AjaxHttpSender();
155150
ajaxHttpSender.sendAjax(frontendServiceUrl + "/rules/rule-check/aggregation", "POST", JSON.stringify(JSON.parse('{"listRulesJson":'
156-
+ JSON.stringify(formRules) + ',"listEventsJson":' + JSON.stringify(formEvents) + '}')), callback);
151+
+ JSON.stringify(rules) + ',"listEventsJson":' + JSON.stringify(events) + '}')), callback);
157152
};
158153

159154
// This function for adding rule
160-
self.addRule = function() {
161-
self.rulesBindingList.push(JSON.parse(JSON.stringify(ruleTemplate)));
155+
self.addRule = function(data) {
156+
self.rulesBindingList.push({'data': ko.observable(self.parsedToString(data))});
162157
};
163158
// This function for adding rule
164-
self.addEvent = function() {
165-
self.eventsBindingList.push({});
159+
self.addEvent = function(data) {
160+
self.eventsBindingList.push({'data': ko.observable(self.parsedToString(data))});
166161
};
167162
return self;
168163
}
169164

170-
var vm = new AppViewModel([]);
165+
var vm = new AppViewModel();
171166
ko.applyBindings(vm, $("#submitButton")[0]);
172-
vm.rulesBindingList.push(ruleTemplate);
173-
vm.eventsBindingList.push({});
174-
175167
ko.applyBindings(vm, $("#testRulesDOMObject")[0]);
176168
ko.applyBindings(vm, $("#testEventsDOMObject")[0]);
169+
vm.addRule(ruleTemplate);
170+
vm.addEvent({});
177171

172+
function isContentModified(observableArray, check) {
173+
isModified = false;
174+
ko.utils.arrayForEach(observableArray, function (element) {
175+
if(element.data() != vm.parsedToString(check)) {
176+
isModified = true;
177+
}
178+
});
179+
return isModified;
180+
}
181+
178182
function validateRulesJsonAndCreateSubscriptions(subscriptionFile) {
179183
var reader = new FileReader();
180184
reader.onload = function() {
@@ -191,17 +195,14 @@ jQuery(document).ready(
191195
theme : 'Notify'
192196
});
193197

194-
var rulesList = JSON.parse(fileContent);
195-
ko.cleanNode($("#testRulesDOMObject")[0]);
196-
ko.cleanNode($("#submitButton")[0]);
197-
$("#testRulesDOMObject").css('min-height', $(".navbar-sidenav").height() - 180);
198-
vm.rulesBindingList.removeAll();
199-
$('.rulesListDisplay > div:gt(0)').remove();
200-
vm.rulesBindingList = ko.observableArray(rulesList);
201-
ko.applyBindings(vm, $("#testRulesDOMObject")[0]);
202-
ko.applyBindings(vm, $("#submitButton")[0]);
203-
closeTooltip();
204-
loadTooltip();
198+
var list = JSON.parse(fileContent);
199+
var isModified = isContentModified(vm.rulesBindingList(), ruleTemplate);
200+
if(isModified == false) {
201+
vm.rulesBindingList([]);
202+
}
203+
list.forEach(function(element) {
204+
vm.addRule(element);
205+
});
205206
};
206207
reader.readAsText(subscriptionFile);
207208
}
@@ -221,14 +222,15 @@ jQuery(document).ready(
221222
sticky : false,
222223
theme : 'Notify'
223224
});
224-
var eventsList = JSON.parse(fileContent);
225-
ko.cleanNode($("#testEventsDOMObject")[0]);
226-
vm.eventsBindingList.removeAll();
227-
$('.eventsListDisplay > div:gt(0)').remove();
228-
vm.eventsBindingList = ko.observableArray(eventsList);
229-
ko.applyBindings(vm, $("#testEventsDOMObject")[0]);
230-
closeTooltip();
231-
loadTooltip();
225+
226+
var list = JSON.parse(fileContent);
227+
var isModified = isContentModified(vm.eventsBindingList(), {});
228+
if(isModified == false) {
229+
vm.eventsBindingList([]);
230+
}
231+
list.forEach(function(element) {
232+
vm.addEvent(element);
233+
});
232234
};
233235
reader.readAsText(subscriptionFile);
234236
}

‎src/main/resources/templates/testRules.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h1 id="test_rules_header">Test Rules</h1>
3030
Get Template
3131
<i class="fa fa-fw fa-download"></i>
3232
</button>
33-
<button class="btn btn-primary add_rule rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.addRule.bind()">
33+
<button class="btn btn-primary add_rule rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.addRule.bind($data, ruleTemplate)">
3434
Add Rule
3535
<i class="fa fa-fw fa-plus"></i>
3636
</button>
@@ -46,7 +46,7 @@ <h3>Rules</h3>
4646
<div class="elementDiv" data-bind="attr: { id: 'Rule' + $index() }">
4747
<div class="d-flex flex-nowrap">
4848
<div class="col-11">
49-
<textarea class="form-control formRules" rows="10" data-bind="text : $root.parsedToString($data)"></textarea>
49+
<textarea class="form-control formRules" rows="10" data-bind="textInput: data"></textarea>
5050
</div>
5151
<div>
5252
<h6>
@@ -71,7 +71,7 @@ <h6>
7171
Get Template
7272
<i class="fa fa-fw fa-download"></i>
7373
</button>
74-
<button class="btn btn-primary add_event rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.addEvent.bind()">
74+
<button class="btn btn-primary add_event rule-button mr-1 mt-1 d-inline-block" data-bind="click : $root.addEvent.bind($data, {})">
7575
Add Event
7676
<i class="fa fa-fw fa-plus"></i>
7777
</button>
@@ -87,7 +87,7 @@ <h3>Events</h3>
8787
<div class="elementDiv" data-bind="attr: { id: 'Events' + $index() }">
8888
<div class="d-flex flex-nowrap">
8989
<div class="col-11">
90-
<textarea class="form-control formEvents" rows="10" data-bind="text : $root.parsedToString($data)"></textarea>
90+
<textarea class="form-control formEvents" rows="10" data-bind="textInput: data"></textarea>
9191
</div>
9292
<div>
9393
<h6>

0 commit comments

Comments
 (0)