I am working on a page where an xlsx file is uploaded, parsed into an array of objects (each row is an object) and then populated into a Data Table. I want to be able to edit the data in the table before i click another button and send it to the database. Cannot get the editing to work though. I have tried loads of different ways that I found online of initializing the editor but none work for me.
If I get rid of the editor code, a normal Data Table works fine, but as of now I get the error:
Cannot read property Editor of undefuned
Here is the code and how I populate the Data Table
$(function() {
let session = '<?=json_encode($_SESSION)?>';
//console.log(session);
var editor = new $.fn.dataTabe.Editor({
table: '#datatable'
});
var table = $('#datatable').DataTable();
table
.order( [ 3, 'asc' ] ).page.len( 10 )
.draw();
});
let fileIn;
let resultArray;
let finalArray = new Array;
document.getElementById('getFile').addEventListener('click', () => {
fileIn = document.getElementById('my_file_input').files[0];
console.log(fileIn);
parseExcel(fileIn);
setTimeout(() => {
resultArray.forEach((arr) => {
let company = (arr.company) ? arr.company : null;
let category = (arr.category) ? arr.category : null;
let pcs_no = (arr.pcs_no) ? arr.pcs_no : null;
let product_name = (arr.product_name) ? arr.product_name : null;
let min_range_rate = (arr.min_range_rate) ? arr.min_range_rate : null;
let max_range_rate = (arr.max_range_rate) ? arr.max_range_rate : null;
let max_total_rate_per_ha = (arr.max_total_rate_per_ha) ? arr.max_total_rate_per_ha : null;
let measure_unit = (arr.measure_unit) ? arr.measure_unit : null;
let range_notes = (arr.range_notes) ? arr.range_notes : null;
let comment = (arr.comment) ? arr.comment : null;
let crops;
let pack_size;
let chemical;
if(arr.crops) {
if(arr.crops.includes(',')) {
crops = arr.crops.split(',');
} else {
crops = arr.crops;
}
} else {
crops = null;
}
if(arr.pack_size) {
if(arr.pack_size.includes(',')) {
pack_size = arr.pack_size.split(',');
} else {
pack_size = arr.pack_size;
}
} else {
pack_size = null;
}
if(arr.chemical) {
if(arr.chemical.includes(',')) {
chemical = arr.chemical.split(',');
} else {
chemical = arr.chemical;
}
} else {
chemical = null;
}
let data = {
company,
category,
pcs_no,
product_name,
min_range_rate,
max_range_rate,
max_total_rate_per_ha,
measure_unit,
range_notes,
comment,
crops,
pack_size,
chemical
}
finalArray.push(data);
});
finalArray.forEach((arr) => {
table.row.add([
arr.company,
arr.category,
arr.category,
arr.pcs_no,
arr.product_name,
arr.pack_size,
arr.chemical,
arr.min_range_rate,
arr.max_range_rate,
arr.max_total_rate_per_ha,
arr.measure_unit,
arr.range_notes,
arr.crops,
(arr.comment) ? arr.comment.trim() : null
]).draw(false)
});
console.log(finalArray);
}, 3000);
});
I am working on the education system. Trying to make the display of pages of issues and topics. Therefore, forward / back buttons, I add. Next button works, but I have problems with the back button. First issue, then comes the topic pages.
Structure like this
var lessons = [
{
successPercent : false,
subject : {
id : 1,
title : "Subject 1",
pages : [
{
id : 1,
title : "Page 1"
},
{
id : 2,
title : "Page 2"
}
]
}
},
{
successPercent : false,
subject : {
id : 2,
title : "Subject 2",
pages : [{
id : 3,
title : "Page 3"
}]
}
}];
Scenario For Next
Lesson 1 > Page 1 > Page 2 > Lesson 2 > Page 3
Scenario For Prev
Lesson 1 < Page 1 < Page 2 < Lesson 2 < Page 3
Find Key of collection
_findKey(list, id, isSubject = true) {
if(isSubject){
return _.findKey(list, ["subject.id", id]);
} else {
return _.findKey(list, ["id", id]);
}
}
Get Previous Data
_getPrevData(list, key){
var keys = Object.keys(list)
, i = keys.indexOf(String(key));
return i !== -1 && list[i - 1] && list[keys[i - 1]];
}
Get Next Data
_getNextData(list, key){
var keys = _.keys(list)
, i = keys.indexOf(String(key));
return i !== -1 && list[i + 1] && list[keys[i + 1]];
}
Next Button Function
_setNext(){
var key = parseInt(
this._findKey(this.state.list, this.state.subject.id)
) || 0;
var data = this._getNextData(this.state.list, key);
/**
* If exists page
*/
if(this.state.list[key].subject.pages.length > 0){
/**
* If didn't show any pages, start with first page
*/
var currentPageId = (this.state.page ? this.state.page.id : 0);
/*
* If this page is first page, get first item of page data
* Else get next item of page data
*/
if(currentPageId == 0){
this.setState({ page : this.state.list[key].subject.pages[0] });
} else {
var pageKey = this._findKey(this.state.list[key].subject.pages, parseInt(currentPageId), false);
var pageData = this._getNextData(this.state.list[key].subject.pages, pageKey);
/**
* If exists page, show this page
* If not exists page, show next subject
*/
if(pageData){
this.setState({ page : pageData });
} else {
if(data){
this.setState({ page : false, subject : data.subject });
this._changeNextButton(key + 1);
}
}
}
/**
* if not exists page, show subject
*/
} else {
if(data){
this.setState({ page : false, subject : data.subject });
this._changeNextButton(key + 1);
}
}
}
Previous Button Function
_setPrev(){
var key = parseInt(
this._findKey(this.state.list, this.state.subject.id)
) || 0;
var data = this._getPrevData(this.state.list, key);
/**
* If exists page
*/
if (this.state.list[key].subject.pages.length > 0) {
var currentPageId = (this.state.page ? this.state.page.id : 0);
if (currentPageId == 0) {
this.setState({ page: this.state.list[key].subject.pages[ this.state.list[key].subject.pages.length - 1 ] });
} else {
var pageKey = this._findKey(this.state.list[key].subject.pages, parseInt(currentPageId), false);
var pageData = this._getPrevData(this.state.list[key].subject.pages, pageKey);
if (pageData) {
this.setState({page: pageData});
} else {
if (data) {
this.setState({page : false, subject: data.subject});
this._changeNextButton(key - 1);
}
}
}
/**
* if not exists page, show subject
*/
} else {
if (data) {
this.setState({page : false, subject: data.subject});
this._changeNextButton(key - 1);
}
}
}
I have to check the link of browser and if it fetches objects' parameter show me what parameter fetches this var. How to do this? Here is the code:
(function () {
var windowLink = "",
str = window.location.pathname.split("/"),
lastelement = str[str.length - 1],
pages = {
page_1 : "index.html", //Put the list of your pages here
page_2 : "index2.html",
page_3 : "index3.html",
page_4 : "index4.html",
page_5 : "index5.html"
};
for(lastelement in pages) {
windowLink = pages[lastelement];
console.log(windowLink)
}
})();
You almost had it, you were just overwriting your lastelement variable.
(function () {
var windowLink = "",
str = window.location.pathname.split("/"),
lastelement = str[str.length - 1],
pages = {
page_1 : "index.html", //Put the list of your pages here
page_2 : "index2.html",
page_3 : "index3.html",
page_4 : "index4.html",
page_5 : "index5.html",
page_6 : "js"
};
console.log("Looking for " + lastelement);
for(element in pages) {
windowLink = pages[element];
if (windowLink === lastelement) {
console.log("Found at " + element);
break;
}
}
})();
My app has a sort- and filterable list and a few inputs and checkboxes so far.
The problem appears if the list has more than 500 items, then every every element with user input (checkboxes, input fields, menus) start to have a lag around half a second increasing with the number of items in the list. The sorting and filtering of the list is done fast enough but the lag on the input elements is too long.
The question is: how can the list and the input elements be decoupled?
Here is the list code:
var list = {}
list.controller = function(args) {
var model = args.model;
var vm = args.vm;
var vmc = args.vmc;
var appCtrl = args.appCtrl;
this.items = vm.filteredList;
this.onContextMenu = vmc.onContextMenu;
this.isSelected = function(guid) {
return utils.getState(vm.listState, guid, "isSelected");
}
this.setSelected = function(guid) {
utils.setState(vm.listState, guid, "isSelected", true);
}
this.toggleSelected = function(guid) {
utils.toggleState(vm.listState, guid, "isSelected");
}
this.selectAll = function() {
utils.setStateBatch(vm.listState, "GUID", "isSelected", true, this.items());
}.bind(this);
this.deselectAll = function() {
utils.setStateBatch(vm.listState, "GUID", "isSelected", false, this.items());
}.bind(this);
this.invertSelection = function() {
utils.toggleStateBatch(vm.listState, "GUID", "isSelected", this.items());
}.bind(this);
this.id = "201505062224";
this.contextMenuId = "201505062225";
this.initRow = function(item, idx) {
if (item.online) {
return {
id : item.guid,
filePath : (item.FilePath + item.FileName).replace(/\\/g, "\\\\"),
class : idx % 2 !== 0 ? "online odd" : "online even",
}
} else {
return {
class : idx % 2 !== 0 ? "odd" : "even"
}
}
};
// sort helper function
this.sorts = function(list) {
return {
onclick : function(e) {
var prop = e.target.getAttribute("data-sort-by")
//console.log("100")
if (prop) {
var first = list[0]
if(prop === "selection") {
list.sort(function(a, b) {
return this.isSelected(b.GUID) - this.isSelected(a.GUID)
}.bind(this));
} else {
list.sort(function(a, b) {
return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
})
}
if (first === list[0])
list.reverse()
}
}.bind(this)
}
};
// text inside the table can be selected with the mouse and will be stored for
// later retrieval
this.getSelected = function() {
//console.log(utils.getSelText());
vmc.lastSelectedText(utils.getSelText());
};
};
list.view = function(ctrl) {
var contextMenuSelection = m("div", {
id : ctrl.contextMenuId,
class : "hide"
}, [
m(".menu-item.allow-hover", {
onclick : ctrl.selectAll
}, "Select all"),
m(".menu-item.allow-hover", {
onclick : ctrl.deselectAll
}, "Deselect all"),
m(".menu-item.allow-hover", {
onclick : ctrl.invertSelection
}, "Invert selection") ]);
var table = m("table", ctrl.sorts(ctrl.items()), [
m("tr", [
m("th[data-sort-by=selection]", {
oncontextmenu : ctrl.onContextMenu(ctrl.contextMenuId, "context-menu context-menu-bkg", "hide" )
}, "S"),
m("th[data-sort-by=FileName]", "Name"),
m("th[data-sort-by=FileSize]", "Size"),
m("th[data-sort-by=FilePath]", "Path"),
m("th[data-sort-by=MediumName]", "Media") ]),
ctrl.items().map(function(item, idx) {
return m("tr", ctrl.initRow(item, idx), {
key : item.GUID
},
[ m("td", [m("input[type=checkbox]", {
id : item.GUID,
checked : ctrl.isSelected(item.GUID),
onclick : function(e) {ctrl.toggleSelected(this.id);}
}) ]),
m("td", {
onmouseup: function(e) {ctrl.getSelected();}
}, item.FileName),
m("td", utils.numberWithDots(item.FileSize)),
m("td", item.FilePath),
m("td", item.MediumName) ])
}) ])
return m("div", [contextMenuSelection, table])
}
And this is how the list and all other components are initialized from the apps main view:
// the main view which assembles all components
var mainCompView = function(ctrl, args) {
// TODO do we really need him there?
// add the main controller for this page to the arguments for all
// added components
var myArgs = args;
myArgs.appCtrl = ctrl;
// create all needed components
var filterComp = m.component(filter, myArgs);
var part_filter = m(".row", [ m(".col-md-2", [ filterComp ]) ]);
var listComp = m.component(list, myArgs);
var part_list = m(".col-md-10", [ listComp ]);
var optionsComp = m.component(options, myArgs);
var part_options = m(".col-md-10", [ optionsComp ]);
var menuComp = m.component(menu, myArgs);
var part_menu = m(".menu-0", [ menuComp ]);
var outputComp = m.component(output, myArgs);
var part_output = m(".col-md-10", [ outputComp ]);
var part1 = m("[id='1']", {
class : 'optionsContainer'
}, "", [ part_options ]);
var part2 = m("[id='2']", {
class : 'menuContainer'
}, "", [ part_menu ]);
var part3 = m("[id='3']", {
class : 'commandContainer'
}, "", [ part_filter ]);
var part4 = m("[id='4']", {
class : 'outputContainer'
}, "", [ part_output ]);
var part5 = m("[id='5']", {
class : 'listContainer'
}, "", [ part_list ]);
return [ part1, part2, part3, part4, part5 ];
}
// run
m.mount(document.body, m.component({
controller : MainCompCtrl,
view : mainCompView
}, {
model : modelMain,
vm : modelMain.getVM(),
vmc : viewModelCommon
}));
I started to workaround the problem by adding m.redraw.strategy("none") and m.startComputation/endComputation to click events and this solves the problem but is this the right solution? As an example, if I use a Mithril component from a 3rd party together with my list component, how should I do this for the foreign component without changing its code?
On the other side, could my list component use something like the 'retain' flag? So the list doesn't redraw by default unless it's told to do? But also the problem with a 3rd party component would persist.
I know there are other strategies to solve this problem like pagination for the list but I would like to know what are best practices from the Mithril side.
Thanks in advance,
Stefan
Thanks to the comment from Barney I found a solution: Occlusion culling. The original example can be found here http://jsfiddle.net/7JNUy/1/ .
I adapted the code for my needs, especially there was the need to throttle the scroll events fired so the number of redraws are good enough for smooth scrolling. Look at the function obj.onScroll.
var list = {}
list.controller = function(args) {
var obj = {};
var model = args.model;
var vm = args.vm;
var vmc = args.vmc;
var appCtrl = args.appCtrl;
obj.vm = vm;
obj.items = vm.filteredList;
obj.onContextMenu = vmc.onContextMenu;
obj.isSelected = function(guid) {
return utils.getState(vm.listState, guid, "isSelected");
}
obj.setSelected = function(guid) {
utils.setState(vm.listState, guid, "isSelected", true);
}
obj.toggleSelected = function(guid) {
utils.toggleState(vm.listState, guid, "isSelected");
m.redraw.strategy("none");
}
obj.selectAll = function() {
utils.setStateBatch(vm.listState, "GUID", "isSelected", true, obj.items());
};
obj.deselectAll = function() {
utils.setStateBatch(vm.listState, "GUID", "isSelected", false, obj.items());
};
obj.invertSelection = function() {
utils.toggleStateBatch(vm.listState, "GUID", "isSelected", obj.items());
};
obj.id = "201505062224";
obj.contextMenuId = "201505062225";
obj.initRow = function(item, idx) {
if (item.online) {
return {
id : item.GUID,
filePath : (item.FilePath + item.FileName).replace(/\\/g, "\\\\"),
class : idx % 2 !== 0 ? "online odd" : "online even",
onclick: console.log(item.GUID)
}
} else {
return {
id : item.GUID,
// class : idx % 2 !== 0 ? "odd" : "even",
onclick: function(e) { obj.selectRow(e, this, item.GUID);
m.redraw.strategy("none");
e.stopPropagation();
}
}
}
};
// sort helper function
obj.sorts = function(list) {
return {
onclick : function(e) {
var prop = e.target.getAttribute("data-sort-by")
// console.log("100")
if (prop) {
var first = list[0]
if(prop === "selection") {
list.sort(function(a, b) {
return obj.isSelected(b.GUID) - obj.isSelected(a.GUID)
});
} else {
list.sort(function(a, b) {
return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
})
}
if (first === list[0])
list.reverse()
} else {
e.stopPropagation();
m.redraw.strategy("none");
}
}
}
};
// text inside the table can be selected with the mouse and will be stored
// for
// later retrieval
obj.getSelected = function(e) {
// console.log("getSelected");
var sel = utils.getSelText();
if(sel.length != 0) {
vmc.lastSelectedText(utils.getSelText());
e.stopPropagation();
// console.log("1000");
}
m.redraw.strategy("none");
// console.log("1001");
};
var selectedRow, selectedId;
var eventHandlerAdded = false;
// Row callback; reset the previously selected row and select the new one
obj.selectRow = function (e, row, id) {
console.log("selectRow " + id);
unSelectRow();
selectedRow = row;
selectedId = id;
selectedRow.style.background = "#FDFF47";
if(!eventHandlerAdded) {
console.log("eventListener added");
document.addEventListener("click", keyHandler, false);
document.addEventListener("keypress", keyHandler, false);
eventHandlerAdded = true;
}
};
var unSelectRow = function () {
if (selectedRow !== undefined) {
selectedRow.removeAttribute("style");
selectedRow = undefined;
selectedId = undefined;
}
};
var keyHandler = function(e) {
var num = parseInt(utils.getKeyChar(e), 10);
if(constants.RATING_NUMS.indexOf(num) != -1) {
console.log("number typed: " + num);
// TODO replace with the real table name and the real column name
// $___{<request>res:/tables/catalogItem</request>}
model.newValue("item_update_values", selectedId, {"Rating": num});
m.redraw.strategy("diff");
m.redraw();
} else if((e.keyCode && (e.keyCode === constants.ESCAPE_KEY))
|| e.type === "click") {
console.log("eventListener removed");
document.removeEventListener("click", keyHandler, false);
document.removeEventListener("keypress", keyHandler, false);
eventHandlerAdded = false;
unSelectRow();
}
};
// window seizes for adjusting lists, tables etc
vm.state = {
pageY : 0,
pageHeight : 400
};
vm.scrollWatchUpdateStateId = null;
obj.onScroll = function() {
return function(e) {
console.log("scroll event found");
vm.state.pageY = e.target.scrollTop;
m.redraw.strategy("none");
if (!vm.scrollWatchUpdateStateId) {
vm.scrollWatchUpdateStateId = setTimeout(function() {
// update pages
m.redraw();
vm.scrollWatchUpdateStateId = null;
}, 50);
}
}
};
// clean up on unload
obj.onunload = function() {
delete vm.state;
delete vm.scrollWatchUpdateStateId;
};
return obj;
};
list.view = function(ctrl) {
var pageY = ctrl.vm.state.pageY;
var pageHeight = ctrl.vm.state.pageHeight;
var begin = pageY / 41 | 0
// Add 2 so that the top and bottom of the page are filled with
// next/prev item, not just whitespace if item not in full view
var end = begin + (pageHeight / 41 | 0 + 2)
var offset = pageY % 41
var heightCalc = ctrl.items().length * 41;
var contextMenuSelection = m("div", {
id : ctrl.contextMenuId,
class : "hide"
}, [
m(".menu-item.allow-hover", {
onclick : ctrl.selectAll
}, "Select all"),
m(".menu-item.allow-hover", {
onclick : ctrl.deselectAll
}, "Deselect all"),
m(".menu-item.allow-hover", {
onclick : ctrl.invertSelection
}, "Invert selection") ]);
var header = m("table.listHeader", ctrl.sorts(ctrl.items()), m("tr", [
m("th.select_col[data-sort-by=selection]", {
oncontextmenu : ctrl.onContextMenu(ctrl.contextMenuId, "context-menu context-menu-bkg", "hide" )
}, "S"),
m("th.name_col[data-sort-by=FileName]", "Name"),
${ <request>
# add other column headers as configured
<identifier>active:jsPreprocess</identifier>
<argument name="id">list:table01:header</argument>
</request>
} ]), contextMenuSelection);
var table = m("table", ctrl.items().slice(begin, end).map(function(item, idx) {
return m("tr", ctrl.initRow(item, idx), {
key : item.GUID
},
[ m("td.select_col", [m("input[type=checkbox]", {
id : item.GUID,
checked : ctrl.isSelected(item.GUID),
onclick : function(e) {ctrl.toggleSelected(this.id);}
}) ]),
m("td.nameT_col", {
onmouseup: function(e) {ctrl.getSelected(e);}
}, item.FileName),
${ <request>
# add other columns as configured
<identifier>active:jsPreprocess</identifier>
<argument name="id">list:table01:row</argument>
</request>
} ])
}) );
var table_container = m("div[id=l04]",
{style: {position: "relative", top: pageY + "px"}}, table);
var scrollable = m("div[id=l03]",
{style: {height: heightCalc + "px", position: "relative",
top: -offset + "px"}}, table_container);
var scrollable_container = m("div.scrollableContainer[id=l02]",
{onscroll: ctrl.onScroll()}, scrollable );
var list = m("div[id=l01]", [header, scrollable_container]);
return list;
}
Thanks for the comments!
There are some good examples of when to change redraw strategy in the docs: http://mithril.js.org/mithril.redraw.html#changing-redraw-strategy
But in general, changing redraw strategy is rarely used if the application state is stored somewhere so Mithril can access and calculate the diff without touching DOM. It seems like your data is elsewhere, so could it be that your sorts method is getting expensive to run after a certain size?
You could sort the list only after events that modifies it. Otherwise it will be sorted on every redraw Mithril does, which can be quite often.
m.start/endComputation is useful for 3rd party code, especially if it operates on DOM. If the library stores some state, you should use that for the application state as well, so there aren't any redundant and possibly mismatching data.
I am trying to aggregate the names of all the users in on a blog who have replied to each other. I have records as follows:
{
"_id" : ObjectId("4ee9ada4edfb941f3400ba63"),
"thread" : "Millenium - Niels Arden Oplev",
"author" : "kilny17",
"parent_count" : 0,
"parents" : [ ],
"child_count" : 2,
"date" : ISODate("2010-04-20T21:14:00Z"),
"message" : "I don't think so...",
"children" : [
{
"date" : ISODate("2010-04-20T21:21:00Z"),
"author" : "Kissoon"
},
{
"date" : ISODate("2010-04-20T21:49:00Z"),
"author" : "Twain"
}
]
}
I am trying to return, for each author, a MapReduced object such as:
{ "_id" : "kilny17",
"value" : {
"author" : "kilny17",
"connections" : {
"Kissoon" : 1,
"Twain" : 1 }
}
}
This code works for each record that has a children element with just 1 child, but not for more:
function mapf()
{
var count = this['child_count'];
if (count > 0){
var m_author = this.author;
this['children'].forEach( function(c){
var connect = {'name':c['author'], 'appears':1};
emit(m_author, {'author':m_author, 'connections':connect});
});
};
}
function reducef(key, values)
{
var connects = new Object();
var r = {'author':key, 'connections':connects, 'weight':0};
values.forEach(function(v)
{
c_name = v['connections'].name;
if (c_name == null)
c_name = 'Null_name';
if (r['connections'][c_name] != null)
r['connections'][c_name] += v['connections']['appears'];
else
r['connections'][c_name] = v['connections']['appears'];
});
return r;
}
For any record (such as the example given) with more than 1 child, the author names are not found and I get a reduced record like so (N.B. There was another post by kilny with child DarkKnight3657):
{ "_id" : "kilny17", "value" : { "author" : "kilny17", "connections" : { "DarkKnight3657" : 1, "Null_name" : null } } }
Anyone have any ideas as to why the author name is not being read from the Object?
Thanks
I think the problem is that you are not defining connections as an array in the mapper- you are defining it as an element. Off the top of my head, it seems like it should read:
var connect = [{'name':c['author'], 'appears':1}];
emit(m_author, {'author':m_author, 'connections':connect});
As Chris has suggested, the solution I used was to change the object into an array:
function mapf()
{
if (this['child_count'] > 0){
var m_author = this.author;
if ( m_author == '')
m_author = 'Unknown_author';
var connect = [];
var weight = 0;
for ( c in this['children'] ){
c_name = this['children'][c]['author'];
found = false;
for (i in connect){
if (connect[i]['name'] == c_name){
connect[i]['appears'] += 1;
found = true;
}
}
if (found == false){
var con = {'name':c_name,'appears':1};
connect.push(con);
}
weight += 1;
};
emit(m_author, {'author':m_author, 'connections':connect, 'weight':weight});
};
}
function reducef(key, values)
{
var r = {'author':key, 'connections':[], 'weight':0};
values.forEach(function(v)
{
for ( c in v['connections'] ){
c_name = v['connections'][c]['name'];
found = false;
for (i in r['connections']){
if (r['connections'][i]['name'] == c_name){
r['connections'][i]['appears'] += 1;
found = true;
}
}
if (found == false){
var con = {'name':c_name,'appears':1};
r['connections'].push(con);
}
};
r.weight += v.weight;
});
return r;
}
This then resulted in records of the type desired:
{
"_id" : "Skaundee",
"value" : {
"author" : "Skaundee",
"connections" : [
{
"name" : "Carnage",
"appears" : 1
},
{
"name" : "Tree",
"appears" : 1
}
],
"weight" : 2
}
}