- Service Worker

- Indexdb
This commit is contained in:
Paolo Arena
2019-02-02 20:13:06 +01:00
parent 484439efe0
commit 3c6b2c7bef
41 changed files with 762 additions and 755 deletions

View File

@@ -80,7 +80,7 @@ export default class Category extends Vue {
}
async loadCat() {
await this.$db.categories.toArray().then(ris => this.categories_loc = ris)
// await this.$db.categories.toArray().then(ris => this.categories_loc = ris)
this.updatetable()
}

View File

@@ -100,7 +100,7 @@ export default class Tabledata extends Vue {
objcat.descr_it = this.category
// Add to Indexdb
await this.$db.categories.add(objcat
await this.$db.categories.put(objcat
).then(ris => {
myid = ris
})

View File

@@ -57,15 +57,7 @@ $heightitem: 19px;
font-size: 0.75rem;
}
.todo-menu {
min-width: 202px;
}
.item-menu{
font-size: 1rem;
}
.titleLista-item {
max-width: 92px;
@@ -144,9 +136,6 @@ $heightitem: 19px;
color: #888;
}
.menuProgress {
}
.colProgress {
}

View File

@@ -0,0 +1,16 @@
.todo-menu {
min-width: 202px;
}
.item-menu{
font-size: 1rem;
}
.item-menu:hover {
cursor: pointer;
}
.menuProgress {
}

View File

@@ -30,7 +30,7 @@
<q-item v-if="(field.value === 100)" :icon="field.icon" v-close-overlay
@click.native="clickMenu(field.value)">
<q-item-side :icon="field.icon"/>
<q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
<q-item-main label class="item-menu">{{field.label}}</q-item-main>
</q-item>
<q-item v-if="(field.value === 130)" :icon="field.icon"
@click.native="clickMenu(field.value)">
@@ -60,3 +60,7 @@
<script lang="ts" src="./SubMenus.ts">
</script>
<style lang="scss" scoped>
@import './SubMenus.scss';
</style>

View File

@@ -13,6 +13,10 @@ import _ from 'lodash'
import draggable from 'vuedraggable'
import VueIdb from 'vue-idb'
import globalroutines from '../../../globalroutines/index'
import $ from 'jquery'
@Component({
@@ -93,8 +97,8 @@ export default class Todo extends Vue {
// console.log('updateLinkedList', this.todos_arr)
let idprev = -1
let idnext = -1
let idprev = ''
let idnext = ''
let pos = 1
if (arr.length > 0) {
idprev = arr[0].id_prev
@@ -221,6 +225,7 @@ export default class Todo extends Vue {
let update = false
await this.todos_arr.forEach((elem: ITodo) => {
if (elem.modified) {
console.log('calling MODIFY 3')
this.modify(elem, false)
update = true
}
@@ -275,6 +280,7 @@ export default class Todo extends Vue {
console.log('User:' + UserStore.state.userId)
const objtodo: ITodo = {
_id: new Date().toISOString(), // Create NEW
userId: UserStore.state.userId,
descr: '',
priority: rescodes.Todos.PRIORITY_NORMAL,
@@ -285,8 +291,8 @@ export default class Todo extends Vue {
category: '',
expiring_at: mydateexp,
enableExpiring: false,
id_prev: 0,
id_next: 0,
id_prev: '',
id_next: '',
pos: 0,
modified: true,
progress: 0
@@ -304,7 +310,7 @@ export default class Todo extends Vue {
return ''
}
insertTodo() {
async insertTodo() {
if (this.todo.trim() === '')
return
@@ -314,7 +320,7 @@ export default class Todo extends Vue {
objtodo.descr = this.todo
objtodo.category = this.getCategory()
const lastelem = this.getLastList()
const lastelem: ITodo = this.getLastList()
objtodo.id_prev = (lastelem !== null) ? lastelem._id : rescodes.LIST_START
objtodo.id_next = rescodes.LIST_END
objtodo.pos = (lastelem !== null) ? lastelem.pos + 1 : 1
@@ -325,24 +331,31 @@ export default class Todo extends Vue {
return
}
this.$db.todos.add(objtodo) // Add to Indexdb
await globalroutines(this, 'write', 'todos', objtodo)
.then((id) => {
console.log('*** IDNEW = ', id)
console.log('*** IDNEW (2) = ', id)
// update also the last elem
if (lastelem !== null) {
lastelem.id_next = id
lastelem.modified = true
console.log('calling MODIFY 4', lastelem)
this.modify(lastelem, false)
.then(ris => {
console.log('END calling MODIFY 4')
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo)
this.updatetable(false)
})
} else {
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo)
this.updatetable(false)
}
this.saveItemToSyncAndDb(objtodo)
// this.modify(objtodo, true)
this.updatetable(false)
}).catch(err => {
console.log('Errore: ' + err.message)
})
console.log('Errore: ' + err.message)
})
console.log('ESCO.........')
@@ -350,40 +363,69 @@ export default class Todo extends Vue {
this.todo = ''
}
saveItemToSyncAndDb(item: ITodo) {
cmdToSyncAndDb(cmd, table, method, itemOrId, msg: String) {
// Send to Server to Sync
console.log('cmdToSyncAndDb', cmd, table, method, itemOrId, msg)
const mythis = this
console.log('saveItemToSyncAndDb')
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.ready
.then(function (sw) {
// _id: new Date().toISOString(),
console.log('---------------------- navigator.serviceWorker.ready')
// check if exist _id, delete it
mythis.$db.sync_todos
.where('id').equals(item._id)
.delete()
// mythis.sendMessageToSW(item, method)
mythis.$db.sync_todos.add(item)
.then(function () {
return sw.sync.register('sync-new-todos')
globalroutines(mythis, 'write', table, itemOrId)
.then(function (id) {
console.log('id', id)
const sep = '|'
let multiparams = cmd + sep + table + sep + method + sep + UserStore.state.idToken + sep + UserStore.state.lang
return sw.sync.register(multiparams)
})
.then(function () {
let snackbarContainer = document.querySelector('#confirmation-toast')
let data = { message: 'Your Post was saved for syncing!' }
let data = { message: msg }
// snackbarContainer.MaterialSnackbar.showSnackbar(data)
})
.catch(function (err) {
console.log(err)
console.error('Errore in globalroutines', table, err)
})
})
} else {
Todos.actions.dbSaveTodo(item)
if (cmd === rescodes.DB.CMD_SYNC_TODOS)
Todos.actions.dbSaveTodo(itemOrId)
else if (cmd === rescodes.DB.CMD_DELETE_TODOS)
Todos.actions.dbDeleteTodo(itemOrId)
}
}
saveItemToSyncAndDb(table: String, method, item: ITodo) {
return this.cmdToSyncAndDb(rescodes.DB.CMD_SYNC_TODOS, table, method, item, 'Your Post was saved for syncing!')
}
deleteItemToSyncAndDb(table: String, id: String) {
return this.cmdToSyncAndDb(rescodes.DB.CMD_DELETE_TODOS, table, 'DELETE', id, 'Your Post was canceled for syncing!')
}
/*
sendMessageToSW(recdata, method) {
navigator.serviceWorker.controller.postMessage({
type: 'sync',
recdata,
method,
cmd: 'sync-new-todos',
token: UserStore.state.idToken,
lang: UserStore.state.lang
})
}
*/
getElemById(id, lista = this.todos_arr) {
let myobj: ITodo
for (myobj of lista) {
@@ -407,27 +449,28 @@ export default class Todo extends Vue {
if (myobjprev !== null) {
myobjprev.id_next = myobjtrov.id_next
myobjprev.modified = true
console.log('calling MODIFY 2')
this.modify(myobjprev, false)
}
if (myobjnext !== null) {
myobjnext.id_prev = myobjtrov.id_prev
myobjnext.modified = true
console.log('calling MODIFY 1')
this.modify(myobjnext, false)
}
console.log('ENTRATO')
this.deleteItemToSyncAndDb(rescodes.DB.TABLE_DELETE_TODOS, id)
const mythis = this
// Delete item
await this.$db.todos
.where('id').equals(id)
.delete()
.then(() => {
console.log('UpdateTable')
await globalroutines(this, 'delete', 'todos', id)
.then((ris) => {
console.log('UpdateTable', ris)
mythis.updatetable()
}).catch((error) => {
console.log('err: ', error)
})
console.log('err: ', error)
})
}
console.log('FINE deleteitem')
@@ -498,7 +541,7 @@ export default class Todo extends Vue {
}
async filtertodos(refresh: boolean = false) {
// console.log('filtertodos')
console.log('filtertodos')
return await Todos.actions.getTodosByCategory(this.getCategory())
.then(arrtemp => {
@@ -583,45 +626,51 @@ export default class Todo extends Vue {
if (recOut[field] !== recIn[field]) {
recOut.modified = true
recOut[field] = recIn[field]
return true
return recOut[field]
}
return false
}
async modify(myobj: ITodo, update: boolean) {
await this.$db.transaction('rw', [this.$db.todos], async () => {
const miorec = await this.$db.todos.get(myobj._id)
await globalroutines(this, 'read', 'todos', myobj._id)
.then(miorec => {
console.log('ArrTodos: ', myobj.descr, '[', myobj._id, ']')
this.modifyField(miorec, myobj, 'descr')
if (this.modifyField(miorec, myobj, 'completed'))
miorec.completed_at = new Date()
if (miorec === undefined) {
console.log('Record not Found !!!!!! id=', myobj._id)
return
}
this.modifyField(miorec, myobj, 'category')
this.modifyField(miorec, myobj, 'expiring_at')
this.modifyField(miorec, myobj, 'priority')
this.modifyField(miorec, myobj, 'id_prev')
this.modifyField(miorec, myobj, 'id_next')
this.modifyField(miorec, myobj, 'pos')
this.modifyField(miorec, myobj, 'enableExpiring')
this.modifyField(miorec, myobj, 'progress')
this.modifyField(miorec, myobj, 'descr')
if (this.modifyField(miorec, myobj, 'completed'))
miorec.completed_at = new Date()
this.modifyField(miorec, myobj, 'category')
this.modifyField(miorec, myobj, 'expiring_at')
this.modifyField(miorec, myobj, 'priority')
this.modifyField(miorec, myobj, 'id_prev')
this.modifyField(miorec, myobj, 'id_next')
this.modifyField(miorec, myobj, 'pos')
this.modifyField(miorec, myobj, 'enableExpiring')
this.modifyField(miorec, myobj, 'progress')
if (miorec.modified) {
miorec.modify_at = new Date()
if (miorec.modified) {
miorec.modify_at = new Date()
// this.logelem('modify', miorec)
// this.logelem('modify', miorec)
await this.$db.todos.put(miorec)
globalroutines(this, 'write', 'todos', miorec)
.then(ris => {
this.saveItemToSyncAndDb(miorec)
if (update)
await this.updatetable(false)
}
})
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'PATCH', miorec)
if (update)
this.updatetable(false)
})
}
})
}
}