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

Show Button, when Upgrade Version is available ! (check from the server, the version number

Browse Source 
- for debug: added led button to see when is calling the server and the IndexedDb.
This commit is contained in:
Paolo Arena
2019-02-22 10:23:00 +01:00
parent 1623a5c35d
commit 0e98ac1eaa
41 changed files with 1411 additions and 992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/components/Header.vue
View File

@@ -27,11 +27,38 @@
</q-btn>
<div v-if="$q.platform.is.desktop">
<!--I'm only rendered on desktop!-->
</div>
<div v-if="$q.platform.is.mobile">
<!--I'm only rendered on mobile!-->
</div>
<div v-if="$q.platform.is.electron">
<!--I'm only rendered on Electron!-->
</div>
<q-btn id="newvers" v-if="isNewVersionAvailable" color="secondary" rounded icon="refresh"
class="btnNewVersShow" @click="RefreshApp" :label="$t('notification.newVersionAvailable')"/>
<q-toolbar-title>
{{$t('msg.myAppName')}}
<div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
</q-toolbar-title>
<div v-if="isAdmin">
<q-btn flat dense round aria-label="">
<q-icon :class="clCloudUpload" name="cloud_upload"></q-icon>
</q-btn>
<q-btn flat dense round aria-label="">
<q-icon :class="clCloudUp_Indexeddb" name="arrow_upward"></q-icon>
</q-btn>
</div>
<q-btn
flat
dense
@@ -43,6 +70,7 @@
<q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
</q-btn>
<q-btn-dropdown
:label="langshort"
>
@@ -117,11 +145,23 @@
public clIconConn: string = 'clIconOnline'
public strConn: string = ''
public langshort: string = ''
public clCloudUpload: string = ''
public clCloudDownload: string = ''
public clCloudUp_Indexeddb: string = ''
public clCloudDown_Indexeddb: string = 'clIndexeddbsend'
get conn_changed() {
return GlobalStore.state.stateConnection
}
get isAdmin() {
return UserStore.state.isAdmin
}
get conndata_changed() {
return GlobalStore.state.connData
}
@Watch('GlobalStore.state.stateConnection', { immediate: true, deep: true })
changeconn(value: string, oldValue: string) {
@@ -135,6 +175,27 @@
}
@Watch('conndata_changed', { immediate: true, deep: true })
changeconnData(value: any, oldValue: any) {
// console.log('CHANGED GlobalStore.state.connData', value)
this.clCloudUpload = (value.uploading_server === 1) ? "clCloudUpload send" : "clCloudUpload"
this.clCloudUpload = (value.downloading_server === 1) ? "clCloudUpload receive" : "clCloudUpload"
this.clCloudUp_Indexeddb = (value.uploading_indexeddb === 1) ? "clIndexeddb send" : "clIndexeddb"
this.clCloudUp_Indexeddb = (value.downloading_indexeddb === 1) ? "clIndexeddb receive" : "clIndexeddb"
this.clCloudUpload = (value.uploading_server === -1) ? "clCloudUpload error" : this.clCloudUpload
this.clCloudUpload = (value.downloading_server === -1) ? "clCloudUpload error" : this.clCloudDownload
this.clCloudUp_Indexeddb = (value.uploading_indexeddb === -1) ? "clIndexeddb error" : this.clCloudUp_Indexeddb
this.clCloudUp_Indexeddb = (value.downloading_indexeddb === -1) ? "clIndexeddb error" : this.clCloudDown_Indexeddb
// console.log('clCloudUpload', this.clCloudUpload)
// console.log('clCloudDownload', this.clCloudDownload)
// console.log('clCloudUp_Indexeddb', this.clCloudUp_Indexeddb)
// console.log('value.downloading_indexeddb', value.downloading_indexeddb)
// console.log('value.uploading_server', value.uploading_server)
}
@Watch('conn_changed', { immediate: true, deep: true })
changeconn_changed(value: string, oldValue: string) {
@@ -157,6 +218,20 @@
}
}
get isNewVersionAvailable() {
console.log('______________ isNewVersionAvailable')
return GlobalStore.getters.isNewVersionAvailable
}
RefreshApp() {
// Unregister Service Worker
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for(let registration of registrations) {
registration.unregister()
} })
window.location.reload(true)
}
changeIconConn() {
this.iconConn = GlobalStore.state.stateConnection === 'online' ? "wifi" : "wifi_off"
this.clIconConn = GlobalStore.state.stateConnection === 'online' ? 'clIconOnline' : 'clIconOffline'
@@ -169,6 +244,35 @@
{ label: 'Spanish', icon: 'fa-flag-es', value: 'esEs', image: '../statics/images/es.png', short: 'ES' }
]
// -------------------------------------------------------------------------
// QUASAR Example using event to open drawer from another component or page
// -------------------------------------------------------------------------
// (1) This code is inside layout file that have a drawer
// if this.leftDrawerOpen is true, drawer is displayed
// (2) Listen for an event in created
/* created(){
this.$root.$on("openLeftDrawer", this.openLeftDrawercb);
},
methods: {
openURL,
// (3) Define the callback in methods
openLeftDrawercb() {
this.leftDrawerOpen = !this.leftDrawerOpen;
}
}
// (4) In another component or page, emit the event!
// Call the method when clicking button etc.
methods: {
openLeftDrawer() {
this.$root.$emit("openLeftDrawer");
}
}
// -------------------------------------------------------------------------
*/
get leftDrawerOpen() {
return GlobalStore.state.leftDrawerOpen
}
@@ -180,7 +284,13 @@
getAppVersion() {
// return "AA"
return "[" + process.env.APP_VERSION + "]"
let strv = ''
if (process.env.DEV) {
strv = 'DEV '
} else if (process.env.TEST) {
strv = 'TEST '
}
return "[" + strv + process.env.APP_VERSION + "]"
}
get lang() {
@@ -188,7 +298,7 @@
}
setshortlang (lang) {
setshortlang(lang) {
for (let indrec in this.selectOpLang) {
if (this.selectOpLang[indrec].value === lang) {
// console.log('this.selectOpLang[indrec].short', this.selectOpLang[indrec].short, this.selectOpLang[indrec].value)
@@ -241,8 +351,7 @@
// this.$q.notify('prima: ' + String(my))
let mylang = rescodes.getItemLS(rescodes.localStorage.lang)
if (mylang === '')
{
if (mylang === '') {
if (navigator) {
mylang = navigator.language
console.log(`LANG2 NAVIGATOR ${mylang}`)
@@ -275,7 +384,7 @@
// Test this by running the code snippet below and then
// use the "Offline" checkbox in DevTools Network panel
// use the "TableOnlyView" checkbox in DevTools Network panel
let mythis = this
// console.log('Event LOAD')
@@ -560,5 +669,47 @@
height: 24px;
}
.clCloudUpload {
transition: all 1s ease-out;
color: initial;
&.send {
transition: all 1s ease-in;
background-color: lightgreen;
}
&.receive {
transition: all 1s ease-in;
background-color: yellow;
}
&.error {
transition: all 1s ease-in;
background-color: red;
}
}
.clIndexeddb {
transition: all 1s ease-out;
color: initial;
&.receive {
transition: all 1s ease-in;
background-color: yellow;
}
&.send {
transition: all 1s ease-in;
background-color: lightgreen;
}
&.error {
transition: all 1s ease-in;
background-color: red;
}
}
.btnNewVersHide {
display: none;
}
.btnNewVersShow {
display: inline-block;
}
</style>

1
src/components/admin/TableOnlyView/index.ts Normal file
View File

@@ -0,0 +1 @@
export {default as tableOnlyView} from './tableOnlyView.vue'

0
src/components/admin/TableOnlyView/tableOnlyView.scss Normal file
View File

63
src/components/admin/TableOnlyView/tableOnlyView.ts Normal file
View File

@@ -0,0 +1,63 @@
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { GlobalStore, UserStore } from '@store'
@Component({})
export default class TableOnlyView extends Vue {
public loading: boolean = false
public serverPagination: {
page: number ,
rowsNumber: number // specifying this determines pagination is server-side
} = {page: 1, rowsNumber: 10}
public serverData: any [] = []
public columns: any[] = [
{
name: 'chiave',
required: true,
label: 'Chiave',
align: 'left',
field: 'chiave',
sortable: true
},
{ name: 'valore', label: 'Valore', field: 'valore', sortable: false }
]
public filter: string = ''
public selected: any[] = []
request(props) {
this.loading = true
setTimeout(() => {
this.serverPagination = props.pagination
let
table = this.$refs.table,
rows = GlobalStore.state.cfgServer.slice(),
{ page, rowsPerPage, sortBy, descending } = props.pagination
// if (props.filter) {
// rows = table.filterMethod(rows, props.filter)
// }
// if (sortBy) {
// rows = table.sortMethod(rows, sortBy, descending)
// }
this.serverPagination.rowsNumber = rows.length
if (rowsPerPage) {
rows = rows.slice((page - 1) * rowsPerPage, page * rowsPerPage)
}
this.serverData = rows
this.loading = false
}, 1500)
}
mounted() {
this.request({
pagination: this.serverPagination,
filter: this.filter
})
}
}

29
src/components/admin/TableOnlyView/tableOnlyView.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<q-page padding class="docs-table">
<p class="caption">TableOnlyView</p>
<q-table
ref="table"
color="primary"
title="Parametri di Configurazione Server"
:data="serverData"
:columns="columns"
:filter="filter"
selection="multiple"
:selected.sync="selected"
row-key="chiave"
:pagination.sync="serverPagination"
@request="request"
:loading="loading"
>
<template slot="top-right" slot-scope="props">
<q-search hide-underline v-model="filter" />
</template>
</q-table>
</q-page>
</template>
<script lang="ts" src="./tableOnlyView.ts">
</script>
<style lang="scss" scoped>
@import './tableOnlyView.scss';
</style>

0
src/components/admin/cfgServer/cfgServer.scss Normal file
View File

68
src/components/admin/cfgServer/cfgServer.ts Normal file
View File

@@ -0,0 +1,68 @@
import Vue from 'vue'
import { Component, Watch } from 'vue-property-decorator'
import { GlobalStore, UserStore } from '@store'
@Component({})
export default class CfgServer extends Vue {
public loading: boolean = false
public paginationControl: {
page: number,
rowsPerPage: number // specifying this determines pagination is server-side
} = { page: 1, rowsPerPage: 20 }
public pagination: {
page: number
} = {page: 1 }
public serverData: any [] = GlobalStore.state.cfgServer.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
public columns: any[] = [
{
name: 'chiave',
required: true,
label: 'Chiave',
align: 'left',
field: 'chiave',
sortable: true
},
{ name: 'valore', label: 'Valore', field: 'valore', sortable: false }
]
public visibleColumns: ['chiave', 'valore']
public separator: 'horizontal'
public filter: string = ''
public selected: any[] = []
public dark: boolean = true
public keysel: string = ''
get tableClass () {
if (this.dark) {
return 'bg-black'
}
}
selItem(item) {
console.log('item', item)
this.keysel = item.chiave
console.log('this.keysel', this.keysel)
}
SaveValue(newVal, valinitial) {
console.log('SaveValue', newVal, 'selected', this.selected)
const mydata = {
chiave: this.keysel,
valore: newVal
}
// Save on Server
GlobalStore.actions.saveCfgServerKey(mydata)
}
created() {
this.serverData = GlobalStore.state.cfgServer.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
// this.serverData = GlobalStore.state.cfgServer.slice()
}
}

32
src/components/admin/cfgServer/cfgServer.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<q-table
:data="serverData"
:columns="columns"
:filter="filter"
title="Configurazione Server"
row-key="chiave"
>
<q-tr slot="body" slot-scope="props" :props="props">
<q-td key="chiave" :props="props">
{{ props.row.chiave }}
<q-popup-edit v-model="props.row.chiave" disable>
<q-field count>
<q-input v-model="props.row.chiave" />
</q-field>
</q-popup-edit>
</q-td>
<q-td key="valore" :props="props">
{{ props.row.valore }}
<q-popup-edit v-model="props.row.valore" title="Aggiorna Valore" buttons @save="SaveValue" @show="selItem(props.row)">
<q-input v-model="props.row.valore"/>
</q-popup-edit>
</q-td>
</q-tr>
</q-table>
</template>
<script lang="ts" src="./cfgServer.ts">
</script>
<style lang="scss" scoped>
@import './cfgServer.scss';
</style>

1
src/components/admin/cfgServer/index.ts Normal file
View File

@@ -0,0 +1 @@
export {default as cfgServer} from './cfgServer.vue'

2
src/components/offline/offline.vue
View File

@@ -1,6 +1,6 @@
<template>
<div id="offline">
Offline Page !
TableOnlyView Page !
</div>
</template>
<script lang="ts" src="./offline.ts">

2
src/components/todos/SingleTodo/SingleTodo.scss
View File

@@ -218,7 +218,7 @@ $heightdescr: 20px;
}
.data-item {
max-width: 85px;
max-width: 84px;
//min-width: 100px;
//display: flex;
//visibility: initial;

13
src/components/todos/SingleTodo/SingleTodo.ts
View File

@@ -78,6 +78,11 @@ export default class SingleTodo extends Vue {
return date && date.toISOString().split('T')[0]
}
// Computed:
get isSel() {
return this.sel
}
isTodo() {
return this.isTodoByElem(this.itemtodo)
}
@@ -176,8 +181,9 @@ export default class SingleTodo extends Vue {
return 'row flex-container2 ' + this.classRow
}
clickRiga() {
clickRiga(clickmenu: boolean = false) {
// console.log('CLICK RIGA ************')
if (!this.sel) {
if (!this.inEdit) {
this.$emit('deselectAllRows', this.itemtodo, true)
@@ -361,8 +367,9 @@ export default class SingleTodo extends Vue {
}
updatedata() {
console.log('calling this.$emit(eventupdate)')
this.$emit('eventupdate', this.itemtodo)
const myitem = rescodes.jsonCopy(this.itemtodo)
console.log('calling this.$emit(eventupdate)', myitem)
this.$emit('eventupdate', myitem)
}
updateicon() {

8
src/components/todos/SingleTodo/SingleTodo.vue
View File

@@ -1,13 +1,13 @@
<template>
<div :class="getClassRow()" @click="clickRow">
<div v-if="isTodo()" class="flex-item counter-item dragula-container">{{itemtodo.pos}}</div>
<!--<div v-if="isTodo()" class="flex-item counter-item dragula-container">{{itemtodo.pos}}</div>-->
<!--<div v-if="isFirst">-->
<!--<q-context-menu ref="contextMenu">-->
<!--<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>-->
<!--</q-context-menu>-->
<!--</div>-->
<div v-if="isTodo()" class="flex-item completed-item">
<div v-if="isTodo()" class="flex-item completed-item donotdrag">
<q-btn push flat
:class="classCompleted"
:icon="iconCompleted"
@@ -64,11 +64,11 @@
</q-datetime>
</div>
<div v-if="isTodo()" class="flex-item pos-item " @mouseup.left="mouseUp" @mousedown="clickRiga">
<div v-if="isTodo()" class="flex-item pos-item " @mousedown="clickRiga">
<q-btn push
:class="clButtPopover"
icon="menu">
<q-popover v-if="sel" self="top right">
<q-popover id="popmenu" v-if="true" self="top right">
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu"
@setPriority="setPriority"></SubMenus>
</q-popover>

7
src/components/todos/SubMenus/SubMenus.ts
View File

@@ -5,6 +5,11 @@ import { ITodo } from '../../../model/index'
import { rescodes } from '@src/store/Modules/rescodes'
import { UserStore } from '@store'
// Doesn't exist in quasar this ? error TS2305
// import { format } from 'quasar'
// const { between } = format
// import { filter } from 'quasar'
@Component({
name: 'SubMenus'
@@ -26,6 +31,8 @@ export default class SubMenus extends Vue {
}
KeychangeProgress (e) {
// between(50, 10, 20)
if (this.itemtodo.progress > 100) {
this.itemtodo.progress = 100
}

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

@@ -22,6 +22,8 @@ import globalroutines from '../../../globalroutines/index'
import $ from 'jquery'
import Api from '@api'
import { Getter, State } from 'vuex-class'
import { GetterTree } from 'vuex'
@Component({
@@ -53,6 +55,12 @@ export default class Todo extends Vue {
public service: any
public actualMaxPosition: number = 15
public scrollable = true
public compKey1: number = 0
public compKey2: number = 0
public compKey3: number = 0
// public priorcomplet: number[] = []
public arrFiltered: any [] = []
fieldtochange: String [] = ['descr', 'completed', 'category', 'expiring_at', 'priority', 'id_prev', 'id_next', 'pos', 'enableExpiring', 'progress']
@@ -67,6 +75,8 @@ export default class Todo extends Vue {
console.log('drag = ' + this.drag)
}
// @Getter
@Watch('$route', { immediate: true, deep: true })
onUrlChange(newVal: any) {
@@ -103,7 +113,8 @@ export default class Todo extends Vue {
// Computed:
get showingDataTodo() {
return this.todos_arr.slice(0, this.actualMaxPosition)
// return this.todos_arr.slice(0, this.actualMaxPosition)
return this.arrFiltered
}
@@ -157,7 +168,7 @@ export default class Todo extends Vue {
const myrecs = [...alldata]
myrecs.forEach(rec => {
mystr = mystr + rec.descr + '] ['
mystr = mystr + rec.descr + rec.completed + '] ['
})
mythis.tmpstrTodos = 'TODOS: ' + mystr
@@ -465,7 +476,7 @@ export default class Todo extends Vue {
let mythis = this
if (window) {
window.addEventListener('touchmove', function (e) {
console.log('touchmove')
// console.log('touchmove')
if (!mythis.scrollable) {
e.preventDefault()
}
@@ -515,7 +526,7 @@ export default class Todo extends Vue {
checkUpdate_everytime() {
this.polling = setInterval(() => {
this.checkUpdate()
}, 10000)
}, 60000)
}
initcat() {
@@ -840,6 +851,8 @@ export default class Todo extends Vue {
this.todos_arr = [...arrtemp] // make copy
this.arrFiltered = this.todos_arr.filter((item, index) => index < this.actualMaxPosition)
console.log('AGGIORNA todos_arr [', this.todos_arr.length, ']')
})
@@ -925,10 +938,17 @@ export default class Todo extends Vue {
}
updateitem(myobj) {
console.log('calling MODIFY 4 updateitem')
this.modify(myobj, true)
console.log('calling MODIFY 4 updateitem', myobj)
// Update the others components...
this.compKey1++
this.compKey2++
this.compKey3++
console.log('this.compKey3', this.compKey3)
return this.modify(myobj, true)
}
// inactiveAllButtons() {
// let divs = this.$children.filter(function (child) {
// return child.$attrs['component-type'] === 'my-custom-button'
@@ -988,18 +1008,19 @@ export default class Todo extends Vue {
return new Promise(function (resolve, reject) {
resolve()
})
return await globalroutines(this, 'read', 'todos', null, myobj._id)
const myobjsaved = rescodes.jsonCopy(myobj)
return await globalroutines(this, 'read', 'todos', null, myobjsaved._id)
.then(miorec => {
if (miorec === undefined) {
console.log('~~~~~~~~~~~~~~~~~~~~ !!!!!!!!!!!!!!!!!! Record not Found !!!!!! id=', myobj._id)
console.log('~~~~~~~~~~~~~~~~~~~~ !!!!!!!!!!!!!!!!!! Record not Found !!!!!! id=', myobjsaved._id)
return
}
if (this.modifyField(miorec, myobj, 'completed'))
if (this.modifyField(miorec, myobjsaved, 'completed'))
miorec.completed_at = new Date().getDate()
this.fieldtochange.forEach(field => {
this.modifyField(miorec, myobj, field)
this.modifyField(miorec, myobjsaved, field)
})
@@ -1022,7 +1043,7 @@ export default class Todo extends Vue {
.then(ris => {
// 3) Modify on the Server (call)
return this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS_PATCH, 'PATCH', miorec, update)
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS_PATCH, 'PATCH', miorec, update)
})
}

15
src/components/todos/todo/todo.vue
View File

@@ -20,16 +20,16 @@
<!--draggable="true" @dragstart="dragStart(index, $event)" @dragover.prevent @dragenter="dragEnter(index)"-->
<!--@dragleave="dragLeave(index)" @dragend="dragEnd" @drop="dragFinish(index, $event)" >-->
<q-infinite-scroll :handler="loadMoreTodo" :offset="7">
<div class="container" v-dragula="todos_arr" drake="first">
<div class="container" v-dragula="todos_arr" drake="first" :key="compKey3">
<div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in showingDataTodo"
:key="mytodo._id" class="myitemdrag">
<div v-if="(prior !== mytodo.priority) && !mytodo.completed"
:class="getTitlePriority(mytodo.priority)">
:class="getTitlePriority(mytodo.priority)" :key="compKey1">
<label>{{getPriorityByInd(mytodo.priority)}}</label>
</div>
<div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted">
<div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted" :key="compKey2">
<label>{{$t('todo.completed')}}</label>
<div style="display: none">{{ priorcomplet = true }}</div>
</div>
@@ -54,12 +54,13 @@
v-on:keyup.enter="insertTodo(false)"/>
<!--{{ tmpstrTodos }}-->
<!--<br>-->
<!--<div class="flex-item btn-item">-->
<!--&lt;!&ndash;<div class="flex-item btn-item">&ndash;&gt;-->
<!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>-->
<!--</div>-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
<!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
@@ -67,8 +68,8 @@
<!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>-->
<!--<div class="flex-item btn-item">-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>&ndash;&gt;-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>&ndash;&gt;-->
<!--<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>-->
<!--</div>-->