surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Manage multiple login, in different browsers... Multi Token...

Browse Source 
- visualization of the Connection State (Online, Offline) using fetch.
This commit is contained in:
Paolo Arena
2019-02-09 18:04:49 +01:00
parent b65d0a2386
commit 4d5cea1c17
20 changed files with 393 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/Header.vue
View File

@@ -32,6 +32,17 @@
<div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
</q-toolbar-title>
<q-btn
flat
dense
round
@click=""
aria-label="Connection"
>
<q-icon :name="iconConn" :class="clIconConn"></q-icon>
<q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
</q-btn>
<q-select class="sel_lang" v-model="lang" stack-label="" :options="selectOpLang"/>
<!--
@@ -68,17 +79,72 @@
import { GlobalStore } from '@modules'
import { rescodes } from '../store/Modules/rescodes'
import QIcon from "quasar-framework/src/components/icon/QIcon";
import { StateConnection } from "../model";
import { Watch } from "vue-property-decorator";
import QField from "quasar-framework/src/components/field/QField";
@Component({
components: {
QField,
QIcon,
drawer,
messagePopover,
}
})
export default class Header extends Vue {
public $t
public $v
public $q
public isUserNotAuth: boolean = false
public iconConn: string = 'wifi'
public clIconConn: string = 'clIconOnline'
public strConn: string = ''
get conn_changed() {
return GlobalStore.state.stateConnection
}
@Watch('GlobalStore.state.stateConnection', { immediate: true, deep: true })
changeconn(value: string, oldValue: string) {
this.strConn = value
this.$q.notify({
color : 'primary',
icon: 'wifi',
message: "CAMBIATOO! " + value
})
}
@Watch('conn_changed', { immediate: true, deep: true })
changeconn_changed(value: string, oldValue: string) {
if (value != oldValue) {
console.log('SSSSSSSS: ', value, oldValue)
const color = (value === 'online') ? 'positive' : 'warning'
if (oldValue !== undefined) {
this.$q.notify({
color,
icon: 'wifi',
message: this.$t('connection') + ` ${value}`
})
}
// console.log('Todos.state.todos_changed CHANGED!', value, oldValue)
this.changeIconConn()
}
}
changeIconConn() {
this.iconConn = GlobalStore.state.stateConnection === 'online' ? "wifi" : "wifi_off"
this.clIconConn = GlobalStore.state.stateConnection === 'online' ? 'clIconOnline' : 'clIconOffline'
}
public selectOpLang = [
{ label: 'English (UK)', icon: 'fa-flag-us', value: 'en-uk' },
@@ -115,6 +181,38 @@
})
}
create () {
// Test this by running the code snippet below and then
// use the "Offline" checkbox in DevTools Network panel
let mythis = this
console.log('Event LOAD')
if (window) {
window.addEventListener('load', function () {
console.log('2) ENTERING Event LOAD')
function updateOnlineStatus(event) {
if (navigator.onLine) {
console.log('ONLINE!')
// handle online status
GlobalStore.mutations.setStateConnection('online')
mythis.changeIconConn()
} else {
console.log('OFFLINE!')
// handle offline status
GlobalStore.mutations.setStateConnection('offline')
mythis.changeIconConn()
}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
}
}
public snakeToCamel(str) {
return str.replace(/(-\w)/g, m => {
return m[1].toUpperCase()
@@ -359,5 +457,13 @@
content: url('../statics/icons/flag_it.svg');
}
.clIconOnline {
color: white;
}
.clIconOffline {
color: red;
}
</style>

48
src/components/todos/todo/todo.ts
View File

@@ -80,7 +80,7 @@ export default class Todo extends Vue {
@Watch('todos_changed', { immediate: true, deep: true })
changetodos_changed(value: string, oldValue: string) {
this.$q.notify('Changed...')
// this.$q.notify('Changed...')
// console.log('Todos.state.todos_changed CHANGED!', value, oldValue)
this.updatetable(true)
@@ -287,7 +287,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')
// console.log('calling MODIFY 3')
this.modify(elem, false)
update = true
elem.modified = false
@@ -367,7 +367,7 @@ export default class Todo extends Vue {
let mydatenow = new Date().getDate()
let mydateexp = new Date().getDate() + 10
console.log('User:' + UserStore.state.userId)
// console.log('User:' + UserStore.state.userId)
const objtodo: ITodo = {
// _id: new Date().toISOString(), // Create NEW
@@ -432,30 +432,18 @@ export default class Todo extends Vue {
return
}
await globalroutines(this, 'write', 'todos', objtodo)
.then((id) => {
console.log('*** IDNEW (3) = ', id)
const id = await globalroutines(this, 'write', 'todos', objtodo)
// update also the last elem
if (lastelem !== null) {
lastelem.id_next = id
// lastelem.modified = true
// console.log('calling MODIFY 4', lastelem)
}
// update also the last elem
if (lastelem !== null) {
lastelem.id_next = id
// lastelem.modified = true
console.log('calling MODIFY 4', lastelem)
}
const rismod = await this.modify(lastelem, false)
this.modify(lastelem, false)
.then(ris => {
console.log('END calling MODIFY 4')
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo, true)
this.updatetable(false)
})
}).catch(err => {
console.log('Errore: ' + err.message)
})
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo, true)
this.updatetable(false)
// console.log('ESCO.........')
@@ -587,14 +575,14 @@ export default class Todo extends Vue {
if (myobjprev !== null) {
myobjprev.id_next = myobjtrov.id_next
myobjprev.modified = true
console.log('calling MODIFY 2')
// 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')
// console.log('calling MODIFY 1')
this.modify(myobjnext, false)
}
@@ -610,7 +598,7 @@ export default class Todo extends Vue {
})
}
console.log('FINE deleteitem')
// console.log('FINE deleteitem')
}
getElem(myarray: ITodo[], id) {
@@ -729,7 +717,7 @@ export default class Todo extends Vue {
}
updateitem(myobj) {
console.log('updateitem')
// console.log('updateitem')
this.modify(myobj, true)
}
@@ -778,7 +766,7 @@ export default class Todo extends Vue {
modifyField(recOut, recIn, field) {
if (recOut[field] !== recIn[field]) {
console.log('*************** CAMPO ', field, 'MODIFICATO!', recOut[field], recIn[field])
// console.log('*************** CAMPO ', field, 'MODIFICATO!', recOut[field], recIn[field])
recOut.modified = true
recOut[field] = recIn[field]
return true