JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lovefield/2.1.12/lovefield.js"></script>
<ul id="task_list">
</ul>
JavaScript
const DB_NAME = 'inventory';
const DB_VERSION = 1;
const TABLE_NAME_ITEM = 'item';
const TABLE_NAME_TASK = 'task';
var db = null;
var stockSchema = {
db: {}
};
// table schema
stockSchema.db.getSchemaBuilder = function() {
var ds = lf.schema.create(DB_NAME, DB_VERSION);
ds.createTable(TABLE_NAME_ITEM).
addColumn('id', lf.Type.INTEGER).
addColumn('task_id', lf.Type.INTEGER).
addColumn('auditor_id', lf.Type.INTEGER).
addColumn('tag_id', lf.Type.INTEGER).
addColumn('asset_name', lf.Type.STRING).
addColumn('asset_type_name', lf.Type.STRING).
addColumn('description', lf.Type.STRING).
addPrimaryKey(['id']).
addIndex('idxTagId', ['tag_id'], false, lf.Order.ASC);
ds.createTable(TABLE_NAME_TASK).
addColumn('id', lf.Type.INTEGER).
addColumn('initiator_id', lf.Type.INTEGER).
addColumn('schedule_id', lf.Type.INTEGER).
addColumn('status', lf.Type.INTEGER).
addColumn('description', lf.Type.STRING).
addPrimaryKey(['id']);
return ds;
}
function main() {
return stockSchema.db.getSchemaBuilder().connect({
storeType: lf.schema.DataStoreType.INDEXED_DB
}).then(function(database) {
// recreate db for testing
indexedDB.deleteDatabase(DB_NAME);
db = database;
var item = db.getSchema().table(TABLE_NAME_ITEM);
var data = [{
'id': 1,
'task_id': 1,
'auditor_id': 123,
'tag_id': 1,
'asset_name': 'Item A',
'asset_type_name': 'Type A',
'description': 'example A'
}, {
'id': 2,
'task_id': 1,
'auditor_id': 123,
'tag_id': 2,
'asset_name': 'Item B',
'asset_type_name': 'Type B',
'description': 'example B'
}
/*,{
'id': 3,
'task_id': 2,
'auditor_id': 123,
'tag_id': 3,
'asset_name': 'Item C',
'asset_type_name': 'Type C',
'description': 'example C'
}*/
];
var row = data.map(d => item.createRow(d));
...