Skip to content

Commit 0dd76b1

Browse files
author
Ankit Rana
committed
handle the request scope of read/write
1 parent 50d6037 commit 0dd76b1

File tree

7 files changed

+150
-54
lines changed

7 files changed

+150
-54
lines changed

‎build/indexedDB.js

+24-14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/indexedDB.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+98-25
Original file line numberDiff line numberDiff line change
@@ -7,40 +7,103 @@
77
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
88
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-light_blue.min.css" />
99
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
10-
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
10+
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
1111
crossorigin="anonymous"></script>
12-
<style>
13-
body {
14-
background: #ccc;
15-
color: #fff;
16-
}
17-
</style>
18-
<script src="./build/indexedDB.js"></script>
12+
<style>
13+
body {
14+
background: #ccc;
15+
color: #fff;
16+
}
17+
18+
#main-container {
19+
display: none;
20+
}
21+
22+
.spinner {
23+
width: 40px;
24+
height: 40px;
25+
position: absolute;
26+
top: 0;
27+
bottom: 0;
28+
left: 0;
29+
right: 0;
30+
margin: auto;
31+
}
32+
33+
.double-bounce1,
34+
.double-bounce2 {
35+
width: 100%;
36+
height: 100%;
37+
border-radius: 50%;
38+
background-color: #333;
39+
opacity: 0.6;
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
44+
animation: sk-bounce 2.0s infinite ease-in-out;
45+
}
46+
47+
.double-bounce2 {
48+
-webkit-animation-delay: -1.0s;
49+
animation-delay: -1.0s;
50+
}
51+
52+
@-webkit-keyframes sk-bounce {
53+
0%,
54+
100% {
55+
-webkit-transform: scale(0.0)
56+
}
57+
50% {
58+
-webkit-transform: scale(1.0)
59+
}
60+
}
61+
62+
@keyframes sk-bounce {
63+
0%,
64+
100% {
65+
transform: scale(0.0);
66+
-webkit-transform: scale(0.0);
67+
}
68+
50% {
69+
transform: scale(1.0);
70+
-webkit-transform: scale(1.0);
71+
}
72+
}
73+
</style>
74+
<script src="./build/indexedDB.js"></script>
1975
</head>
2076

2177
<body>
22-
<div class="mdl-grid" style="margin: 0 auto;">
23-
<div class="mdl-cell mdl-cell--12-col">
24-
<h3 style="text-align: center">TODO Task</h3>
25-
</div>
78+
<div class="spinner" id="spinner">
79+
<div class="double-bounce1"></div>
80+
<div class="double-bounce2"></div>
2681
</div>
27-
<div class="mdl-grid" style="margin: 0 auto;">
28-
<div class="mdl-cell mdl-cell--12-col">
29-
<div class="mdl-card mdl-shadow--2dp" style="min-height: auto;margin: 0 auto;width:410px">
30-
<div class="mdl-card__supporting-text">
31-
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
32-
<input class="mdl-textfield__input" type="text" id="val">
33-
<label class="mdl-textfield__label" for="val">Add Task ...</label>
82+
<div id="main-container">
83+
<div class="mdl-grid" style="margin: 0 auto;">
84+
<div class="mdl-cell mdl-cell--12-col">
85+
<h3 style="text-align: center">TODO Task</h3>
86+
</div>
87+
</div>
88+
<div class="mdl-grid" style="margin: 0 auto;">
89+
<div class="mdl-cell mdl-cell--12-col">
90+
<div class="mdl-card mdl-shadow--2dp" style="min-height: auto;margin: 0 auto;width:410px">
91+
<div class="mdl-card__supporting-text">
92+
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
93+
<input class="mdl-textfield__input" type="text" id="val">
94+
<label class="mdl-textfield__label" for="val">Add Task ...</label>
95+
</div>
96+
<button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" style="vertical-align: super;color:#fff">Add</button>
3497
</div>
35-
<button id ="add"class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" style="vertical-align: super;color:#fff">Add</button>
3698
</div>
3799
</div>
38100
</div>
39-
</div>
40-
<div class="mdl-grid" style="margin: 0 auto;">
41-
<div class="mdl-cell mdl-cell--12-col" id ="task-container">
101+
<div class="mdl-grid" style="margin: 0 auto;">
102+
<div class="mdl-cell mdl-cell--12-col" id="task-container">
103+
</div>
42104
</div>
43105
</div>
106+
44107
<script type="text/template" id="task-template">
45108
<div class="mdl-card mdl-shadow--2dp" style="min-height: auto;margin: 0 auto;width:410px;margin-bottom: 0.5%">
46109
<div class="mdl-card__supporting-text">
@@ -57,12 +120,22 @@ <h3 style="text-align: center">TODO Task</h3>
57120
repository: (function () {
58121
IndexedDB.DbContextBuilder.Debug(false);
59122
var sampleContextBuilder = new IndexedDB.DbContextBuilder(dbConnection);
123+
sampleContextBuilder.Ready = function () {
124+
$("#spinner").fadeOut("slow", function () {
125+
$("#main-container").fadeIn("slow");
126+
});
127+
};
60128
var repositories = sampleContextBuilder
61129
.CreateDB("Sample")
62130
.ConfigureModel({
63131
name: "Sample",
64132
keyPath: "id",
65-
autoIncrement: false
133+
autoIncrement: false,
134+
seed: [
135+
{ id: 1, value: "Task1" },
136+
{ id: 2, value: "Task2" },
137+
{ id: 3, value: "Task3" }
138+
]
66139
}).Build();
67140
return repositories.Sample;
68141
})()
@@ -100,7 +173,7 @@ <h3 style="text-align: center">TODO Task</h3>
100173
render: function (data) {
101174
$(view.$container).html('');
102175
for (var d of data) {
103-
var str = view.$taskTemplate.replace(/{{Checkbox}}/g, d.value).replace(/{{ID}}/g, d.id);
176+
var str = view.$taskTemplate.replace(/{{Checkbox}}/g, d.value).replace(/{{ID}}/g, d.id);
104177
$(view.$container).append(str);
105178
}
106179
componentHandler.upgradeDom();

‎src/Contract/IDbContext.ts

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ namespace IndexedDB {
1111
autoIncrement: any,
1212
indexes?: IIndexConfig[],
1313
upgradeMapping?: (model: any) => void;
14+
seed? : [{}];
1415
}
1516
export interface IIndexConfig {
1617
name: string;

‎src/DbContext.ts

+5
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,11 @@ namespace IndexedDB {
8585
os.createIndex(model.indexes[i].name, model.indexes[i].keyPath, model.indexes[i].options);
8686
}
8787
}
88+
if ((typeof model.seed !== 'undefined') && (model.seed.length > 0)) {
89+
for (var data of model.seed) {
90+
os.add(data);
91+
}
92+
}
8893
} else {
8994

9095
}

‎src/DbContextBuilder.ts

+7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ namespace IndexedDB {
66
_isCreated: boolean = false;
77
_repositories: any;
88
constructor(private _dbNative: IDBFactory) {
9+
if (this._dbNative === undefined || this._dbNative === null)
10+
throw new Error('IndexedDB is not supported');
911
}
1012

1113
public CreateDB(dbName: string): DbContextBuilder {
@@ -44,6 +46,9 @@ namespace IndexedDB {
4446
}
4547
this._repositories = object;
4648
this._isCreated = true;
49+
container.Begin().then(function () {
50+
that.Ready();
51+
})
4752
return object;
4853
}
4954

@@ -56,5 +61,7 @@ namespace IndexedDB {
5661
public static Debug(flag: boolean) {
5762
Util.enableDebug = flag;
5863
}
64+
65+
public Ready : () => void;
5966
}
6067
}

‎src/Repositories/BaseRepository.ts

+14-14
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ namespace IndexedDB {
2121
promise.reject();
2222
Util.Log("Fail");
2323
}
24-
transaction.oncomplete = (event: any) => {
24+
request.onsuccess = (event: any) => {
2525
promise.resolve();
2626
Util.Log("success");
2727
}
@@ -36,12 +36,12 @@ namespace IndexedDB {
3636
var promise = Util.CreatePromise();
3737
var transaction = db.transaction([self._StoreName], "readwrite");
3838
var objectStore = transaction.objectStore(self._StoreName);
39-
objectStore.put(TObject);
40-
transaction.onerror = (event: any) => {
39+
var request = objectStore.put(TObject);
40+
request.onerror = (event: any) => {
4141
promise.reject();
4242
Util.Log("Fail");
4343
}
44-
transaction.oncomplete = (event: any) => {
44+
request.onsuccess = (event: any) => {
4545
promise.resolve();
4646
Util.Log("success");
4747
}
@@ -56,12 +56,12 @@ namespace IndexedDB {
5656
var promise = Util.CreatePromise();
5757
var transaction = db.transaction([self._StoreName], "readwrite");
5858
var objectStore = transaction.objectStore(self._StoreName);
59-
objectStore.delete(Key);
60-
transaction.onerror = (event: any) => {
59+
var request = objectStore.delete(Key);
60+
request.onerror = (event: any) => {
6161
promise.reject();
6262
Util.Log("Fail");
6363
}
64-
transaction.oncomplete = (event: any) => {
64+
request.onsuccess = (event: any) => {
6565
promise.resolve();
6666
Util.Log("success");
6767
}
@@ -96,19 +96,19 @@ namespace IndexedDB {
9696
var promise = Util.CreatePromise();
9797
var transaction = db.transaction(self._StoreName, IDBTransaction.READ_ONLY);
9898
var objectStore = transaction.objectStore(self._StoreName);
99-
objectStore.openCursor().onsuccess = function (evt: any) {
99+
var request = objectStore.openCursor();
100+
request.onsuccess = function (evt: any) {
100101
var cursor = evt.target.result;
101102
if (cursor) {
102103
dbCollection.push(cursor.value);
103104
cursor.continue()
105+
} else {
106+
Util.Log("success");
107+
Util.Log(dbCollection);
108+
promise.resolve(dbCollection);
104109
}
105110
};
106-
transaction.oncomplete = (event: any) => {
107-
Util.Log("success");
108-
Util.Log(dbCollection);
109-
promise.resolve(dbCollection);
110-
}
111-
transaction.onerror = function () {
111+
request.onerror = function () {
112112
promise.reject();
113113
Util.Log("Fail");
114114
};

0 commit comments

Comments
 (0)