We Keep Coding

Fetch live-updating data from an IDB (Dexie) using Vue.js

I am trying to display a live logs table using Vue(quasar)+Dexie.
I managed to display the data using the basic example from the dexie doc page:
export default {
name: "Logs",
setup() {
const columns = [
{
name: "ts",
label: "TimeStamp",
field: "ts",
align: "left",
format: (val, row) => date.formatDate(val, "HH:mm:ss:SSS"),
},
{
name: "action",
label: "Action",
field: "action",
align: "left",
format: (val, row) => val,
},
{
name: "status",
label: "Status",
field: "status",
align: "left",
format: (val, row) => val,
},
{
name: "data",
label: "Data",
field: "data",
align: "left",
format: (val, row) => {
return val;
},
},
];
const pagination = ref({
sortBy: "ts",
descending: true,
page: 1,
rowsPerPage: 10,
});
return {
columns,
pagination,
dialog: [],
logs: useObservable(
liveQuery(() => useDatabase.logs.reverse().limit(10).toArray())
),
};
},
};
I get a new Log entry every 1 second.
I am almost sure that the whole bulk of data is re-fetched and not appended. Am I right?
Is there a better practice for loading live updating data from a table than this? (if it's really as i described)
Instead of re-loading all the data from IDB, to just fetch the newly added entries and append them.
I have the same exact situation when displaying a live updating chart (using ApexCharts).
but in this case, I fetch 256 samples per second. I want the components to render the data "automatically" using Vues superpowers while pointing to a ref.
Usually when working with frontend frameworks, and specifically Vue, I create some kind of a variable let logs = ref({...}) and whenever there new data, it gets rendered only when and where it's needed. It doesn't re-render the whole bulk all over again.
I hope my problem is clear, and if not, the examples or my way of thought is understood. I might be thinking this wrong, but i'd be happy to learn from others experience.

Massive data combobox with Kendo UI virtualization not working

I'm trying to create a combobox with pagination (virtualization) using Kendo UI and Angular JS:
The idea is to bring 10000 items in pages of 10. Using this and this Kendo Demos I get this far:
HTML:
<select kendo-combo-box k-options="config"></select>
Angular Controller:
$scope.config = {
template: "<span>#= key # - #= value #</span>",
dataTextField: "key",
dataValueField: "value",
virtual: {
itemHeight: 26,
valueMapper: function (options) {
console.log("valueMapper was executed.");
},
},
height: 156,
dataSource: {
//type: "odata", // comment explained below
pageSize: 24,
serverPaging: true,
//serverFiltering: true,
schema: {
total: "total",
data: "data"
},
transport: {
read: function (options) {
console.log("dataSource transport read was called.");
// ajax call with result object => response.
options.success(response);
}
},
}
};
JSON response object (in transport read function):
{
"total": "10000",
"data": [
{ "key": "1", "value": "a" },
{ "key": "2", "value": "b" },
...
{ "key": "9", "value": "j" }
]
}
PS: "data" has 10 elements.
This is not working. The combo is created with 10 items and nothing more.
If I uncomment the lines:
type: "odata",
serverFiltering: true,
The combobox is build with 10000 items with "loading..." as description. But no matter how much time I wait, this "loading..." texts are never updated to my information, and more, the line:
console.log("dataSource transport read was called.");
keep getting hit in infinity loop.
Before finishes I notice other strange behavior. The function in valueMapper is never executed (the message "valueMapper was executed." is never printed.).
And if I set virtual: false no pagination is used.
How can I make this work?

jquery DataTables Editor: "select" field displays option value instead of label

I am using jquery's DataTables which is really working great. Then only problem I got is, that I am facing (in non-edit-view) the value of the select-field (which is an id). The user of course doesn't want to see the id of course.
Therefore I am looking for a possibility to configure that column in a way to show always the value of label property.
Here a some snippets:
$(document).ready(function() {
var table = $('#overviewTable').DataTable({
dom: "Tfrtip",
ajax: "/Conroller/GetTableData",
columns: [
{ data: "Id", className: "readOnly", visible: false },
{
data: "LoanTransactionId",
className: "readOnly readData clickable",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
}
},
{ data: "Id", className: "readOnly" },
{ data: "property_1", className: "readOnly" },
{ data: "Priority" },
{ data: null, className: "action readOnly", defaultContent: 'Info' }
],
order: [1, 'asc'],
tableTools: {
sRowSelect: "os",
sRowSelector: 'td:first-child',
aButtons: []
}
});
// data reload every 30 seconds
setInterval(function() {
table.ajax.reload();
}, 30000);
editor = new $.fn.dataTable.Editor({
ajax: "PostTable",
table: "#overviewTable",
fields: [
{
label: "Id",
name: "Id"
},
{
label: "Column 1",
name: "property_1"
},
{
label: "Priority",
name: "Priority",
type: "select",
options: [
{ label: "low", value: 0 },
{ label: "mid", id: 1 },
{ text: "high", id: 2 }
]
}
]
});
// Inline Edit - only those who are not readOnly
$('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
editor.inline(this, {
submitOnBlur: true
});
});
How it looks in the display mode
How it looks in the edit mode

See the documentation on columns.render
You want to modify your column options for priority
Preferred Option: Your data source has a field with the priority as a string
This is the best option, as you don't want to have two places with this business logic. Keep it out of the client code.
Also, you will want to modify the editor as well so that the options used have been retrieved dynamically from the server to keep this business logic out of the client too. This is left as an exercise for the reader.
Since you don't provide details on what your data structure looks lik, I'm assuming it is an object, and it has an attribute priorityAsString so use the string option type for render.
columns: [
...
{
data: "Priority" ,
render: "priorityAsString",
},
Option 2) You write a function to map priority to string
Do this if you can't get the data from the server. But remember you will need to update many places when the priority list changes.
columns: [
...
{
data: "Priority" ,
render: renderPriorityAsString,
},
...
function renderPriorityAsString(priority) {
const priorityToString = {
0: 'low',
1: 'med',
2: 'high',
};
return priorityToString[priority] || `${priority} does not have a lookup value`;
}

"render": function ( data, type, full ) { return label;}

Creating table with Mustache JS

I've just started to learn about Mustache, but I don't understand how can I do this:
I have this JSON object :
var columnsDefinition = {
"columns": [
{
"header": 'First name',
"values": ['John', 'Jack', 'Abe', 'Adelle', 'Jim', 'Andrew', 'Matthew'],
"type": 'text'
},
{
"header": 'Last name',
"values": ['Carpenter', 'Reaper', 'Lincoln', 'Aidan', 'Raynor', 'Doe'],
"type": 'text'
},
{
"header": 'Profession',
"values": ['butcher', 'doctor', 'farmer', '', 'pilot', 'singer', ''],
"type": 'select'
},
{
"header": 'Employed',
"values": [true, false, true, true, false],
"type": 'checkbox'
}
],
"search": true
};
I want to create this :
This is what I've tried, but I don't know how to put values on each column, not on each row.
this.testDiv = $("#testDiv");
this.header = "{{#columns}}<th>{{header}}</th>{{/columns}}";
this.body = "{{#columns}}<tr>{{#values}}<td>{{.}}</td><{{/values}}/tr>{{/columns}}";
this.html = Mustache.to_html(this.header, this.columnsDefinition);
this.html2 = Mustache.to_html(this.body, this.columnsDefinition);
$("#testDiv table thead tr").append(this.html);
$("#testDiv table tbody").append(this.html2);
How can I create the table above? Thank you.

I don't believe this can be done out of the box.
If you can't modify the JSON object that you currently have, you're better off generating another JSON object that will pivot the data and feed that one to Mustache.

How to fill an Ext.form.CheckboxGroup with checkboxes generated based on a JSON object returned from a server

I'm trying to dynamically fill an Ext.form.CheckboxGroup with Ext.form.Checkboxs derived from a JSON object pulled from a jsp page. My JSON object looks like this:
{
"sensors": [
{ "id": 200, "name": "name - B - A" },
{ "id": 201, "name": "name - B - B" },
{ "id": 202, "name": "name - C - A" },
{ "id": 203, "name": "name - C - B" }
]
}
I can load these objects into an Ext.data.JsonStore with code like this:
new Ext.data.JsonStore({
id: 'sensorStore',
autoLoad: true,
method: 'GET',
baseParams: {
jobType: 'sensor'
},
url: 'getstatus.jsp',
root: 'sensors',
sortInfo: { field: 'id', direction: 'ASC' },
fields: [ 'id', 'name' ]
}),
My understanding is that this will give me access to a set of Ext.data.Record objects, but I can't figure out how to go about iterating through those Records to create any Ext.form.Checkboxs, or if there's some other way of achieving the same result.
I'm not trying to set the values of the checkboxes, though I will need to be able to reference them when I submit the form.

Assuming the store is loaded (since you have autoLoad:true), you need to
iterate through the records to create an array of checkbox configs
create the checkboxgroup object (using the array created in #1 above as items config)
add this checkboxgroup to your form (or whatever container) and call this container's doLayout() if it is already rendered
Snippet to iterate and create checkbox configs-
var checkboxconfigs = []; //array of about to be checkboxes.
mystore.getRange().each(function(record){
checkboxconfigs.push({ //pushing into array
id:record.data.id,
boxLabel:record.data.name,
//any other checkbox properties, layout related or whatever
});
});
Snippet to create checkboxgroup-
var myCheckboxgroup = new Ext.form.CheckboxGroup({
id:'myGroup',
fieldLabel: 'Checkboxes in two columns',
columns:2,
items:checkboxconfigs //created in previous snippet.
//any other checkbox group configuration
});
Add to your container and redraw it-
mycontainer.add(myCheckboxgroup).doLayout();
EDIT - Your JsonStore config does not match to the data returned. (id needs to be an int)
new Ext.data.JsonStore({
id: 'sensorStore',
autoLoad: true,
method: 'GET',
baseParams: {
jobType: 'sensor'
},
url: 'getstatus.jsp',
root: 'sensors',
sortInfo: { field: 'id', direction: 'ASC' },
fields: [ {name:'id', type:int}, 'name' ]
}),