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

- Converting all to Typescript

Browse Source 
- Installing 1.0.0.beta Quasar Upgrade
   - (Part 1 - Upgrade Components)
This commit is contained in:
Paolo Arena
2019-03-11 19:16:39 +01:00
parent 58967a1650
commit bb3be0ec16
85 changed files with 3961 additions and 32086 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
.babelrc
View File

@@ -1,39 +0,0 @@
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs",
"targets": {
"node": "current"
}
}
]
]
}
},
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"loose": false,
"useBuiltIns": "usage"
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false,
"regenerator": false,
"helpers": true,
"useESModules": false
}
]
],
"comments": false
}

5
babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@quasar/babel-preset-app'
]
}

25168
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@@ -25,6 +25,7 @@
"generate-sw": "workbox generateSW workbox-config.js"
},
"dependencies": {
"@quasar/extras": "^1.1.0",
"@types/vuelidate": "^0.7.0",
"acorn": "^6.0.0",
"axios": "^0.18.0",
@@ -43,8 +44,8 @@
"normalize.css": "^8.0.0",
"npm": "^6.4.1",
"nprogress": "^0.2.0",
"quasar": "^1.0.0-beta.9",
"quasar-extras": "^2.0.8",
"quasar-framework": "0.17.17",
"register-service-worker": "^1.0.0",
"vee-validate": "^2.1.2",
"vue": "^2.5.17",
@@ -75,10 +76,12 @@
"@babel/template": "7.0.0-beta.54",
"@babel/traverse": "7.0.0-beta.54",
"@babel/types": "7.0.0-beta.54",
"@quasar/app": "^1.0.0-beta.10",
"@quasar/quasar-app-extension-typescript": "^1.0.0-alpha.11",
"@types/dotenv": "^4.0.3",
"@types/jest": "^23.1.4",
"@types/js-cookie": "^2.1.0",
"@types/node": "^10.12.2",
"@types/node": "11.9.5",
"@types/nprogress": "^0.0.29",
"@types/webpack-env": "^1.13.6",
"@vue/babel-preset-app": "3.1.1",
@@ -97,8 +100,8 @@
"jest": "^23.6.0",
"json-loader": "^0.5.4",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"quasar-cli": "^0.17.23",
"sass-loader": "^7.1.0",
"strip-ansi": "=3.0.1",
"ts-jest": "^23.0.0",
@@ -126,4 +129,4 @@
"last 2 versions",
"not ie <= 10"
]
}
}

60
quasar.conf.js
View File

@@ -54,26 +54,35 @@ const extendHTMLToWebpack = (config) => {
module.exports = function (ctx) {
return {
// Quasar looks for *.js files by default
sourceFiles: {
router: 'src/router/index.ts',
store: 'src/store/index.ts'
},
// Quasar looks for *.js files by default
sourceFiles: {
router: 'src/router/index.ts',
store: 'src/store/index.ts'
},
sourceFiles: {
router: 'src/router/index.ts',
store: 'src/store/index.ts'
},
// app plugins (/src/plugins)
plugins: ['i18n', 'axios', 'vee-validate', 'myconfig', 'local-storage', 'error-handler', 'globalroutines', 'vue-idb', 'dragula', 'guard'],
boot: ['vue-i18n', 'axios', 'vee-validate', 'myconfig', 'local-storage', 'error-handler', 'globalroutines', 'vue-idb', 'dragula', 'guard'],
css: [
'app.styl'
],
extras: [
//ctx.theme.mat ? : null,
'roboto-font',
'material-icons', // optional, you are not bound to it
'ionicons',
// 'mdi',
'fontawesome'
'ionicons-v4',
// 'mdi-v3',
'fontawesome-v5'
],
supportIE: false,
aliases: {
quasar: path.resolve(__dirname, '../node_modules/quasar-framework/'),
quasar: path.resolve(__dirname, '../node_modules/@quasar/'),
src: path.resolve(__dirname, '../src'),
statics: path.resolve(__dirname, '../src/statics'),
components: path.resolve(__dirname, '../src/components')
@@ -118,57 +127,52 @@ module.exports = function (ctx) {
framework: {
components: [
'QLayout',
'QLayoutHeader',
'QLayoutDrawer',
'QDrawer',
'QItemSection',
'QHeader',
'QFooter',
'QPageContainer',
'QPage',
'QPopupProxy',
'QToolbar',
'QToolbarTitle',
'QBtn',
'QBtnDropdown',
'QIcon',
'QList',
'QListHeader',
'QItemLabel',
'QItem',
'QItemMain',
'QItemTile',
'QItemSide',
'QCard',
'QCardTitle',
'QCardMain',
'QCardMedia',
'QCardSeparator',
'QCardSection',
'QCardActions',
'QField',
'QInput',
'QSelect',
'QPopover',
'QMenu',
'QToggle',
'QFab',
'QInfiniteScroll',
'QAjaxBar',
'QChip',
'QCollapsible',
'QExpansionItem',
'QCheckbox',
'QAlert',
'QBanner',
'QInnerLoading',
'QSpinnerGears',
'QDatetime',
'QDate',
'QTime',
'QSlideTransition',
'QTable',
'QTableColumns',
'QTh',
'QTr',
'QSearch',
'QTd',
'QContextMenu',
'QProgress',
'QLinearProgress',
'QSlider',
'QPopupEdit',
'QCarousel',
],
directives: [
'Ripple',
'CloseOverlay',
],
// Quasar plugins
plugins: [
@@ -176,10 +180,10 @@ module.exports = function (ctx) {
'Dialog',
'Notify',
'Cookies',
'ActionSheet', 'Loading'
'Loading'
],
iconSet: 'fontawesome',
i18n: 'it', // Quasar language
iconSet: 'fontawesome-v5',
lang: 'it', // Quasar language
},
animations: [],
ssr: {

15
src/App.ts
View File

@@ -1,17 +1,13 @@
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { UserStore } from '@store'
import { EventBus, RootState, storeBuilder, DebugMode } from '@store'
import router from './router'
import $ from 'jquery'
import Header from './components/Header.vue'
import { Header } from './components/Header'
import globalroutines from './globalroutines/index'
import { GlobalStore } from './store/Modules'
@Component({
components: {
appHeader: Header
@@ -19,25 +15,24 @@ import { GlobalStore } from './store/Modules'
router
})
export default class App extends Vue {
public backgroundColor = 'whitesmoke'
public $q
public listaRoutingNoLogin = ['/vreg?', '/offline']
meta () {
public meta() {
return {
keywords: { name: 'keywords', content: 'WebSite' },
// meta tags
meta: {
mykey: { name: 'mykey', content: 'Key 1' },
keywords: { name: 'keywords', content: 'MyKeywords' }
keywords: { name: 'keywords', content: 'MyKeywords' },
mykey: { name: 'mykey', content: 'Key 1' }
}
}
}
created() {
public created() {
if (process.env.DEV) {
console.info('SESSIONE IN SVILUPPO ! (DEV)')
console.info(process.env)

62
src/boot/local-storage.js
View File

@@ -1,62 +0,0 @@
import { LocalStorage } from 'quasar'
// import { onFail } from '../../_LOCALE/src/session/logout'
// import appSetup from './app-setup'
import config from '../config'
var authorized = false
export default () => {
if (config.localStorage.enableListener) {
window.addEventListener('storage', (e) => {
if (!authorized) {
console.warn('Unauthorized local storage change')
switch (config.localStorage.unauthChange) {
case 'block':
if (e.key === 'null' || e.key === null) {
reload()
} else {
_LocalStorage.setNative(e.key, e.oldValue)
}
break
case 'clear':
reload()
break
default:
reload()
break
}
}
}, false)
}
return Promise.resolve(true)
}
const reload = () => {
// onFail().then(success => appSetup())
}
export const _LocalStorage = {
setNative (key, value) {
authorized = true
localStorage.setItem(key, value)
authorized = false
},
set (key, value) {
authorized = true
LocalStorage.set(key, value)
authorized = false
},
remove (key) {
authorized = true
LocalStorage.remove(key)
authorized = false
},
clear () {
authorized = true
LocalStorage.clear()
authorized = false
},
get (key) {
return LocalStorage.get.item(key)
}
}

17
src/cfg.js
View File

@@ -1,17 +0,0 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export const cfg = new Vue({
state:{
lang: 'en'
},
data: {
cost: {
MYAPPMOD_ATTUALE: 'freeplanet',
//MYAPPMOD_ATTUALE: 'karpos',
AA: ''
}
}
});

714
src/components/Header.vue
View File

@@ -1,714 +0,0 @@
<template>
<div>
<!--
<router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
<button>
<i>arrow_back</i>
</button>
</router-link>
-->
<q-layout-header>
<q-toolbar
color="primary"
:glossy="$q.theme === 'mat'"
:inverted="$q.theme === 'ios'"
class="toolbar"
>
<q-btn
flat
dense
round
@click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
>
<q-icon name="menu"/>
</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
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-btn-dropdown
:label="langshort"
>
<q-list link>
<q-item v-for="langrec in selectOpLang" :key="langrec.value" v-close-overlay
@click.native="lang = langrec.value">
<q-item-side>
<img :src="langrec.image" class="flagimg">
</q-item-side>
<q-item-main>
<q-item-tile sublabel>{{langrec.label}}</q-item-tile>
</q-item-main>
</q-item>
</q-list>
</q-btn-dropdown>
<!--
<message-popover></message-popover>
-->
<!--
<div class="right-itens">
<label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
</div>-->
</q-toolbar>
</q-layout-header>
<q-layout-drawer side="left"
v-model="leftDrawerOpen"
:content-class="['bg-grey-1', 'q-pa-sm']"
:content-style="{padding: '0px'}"
>
<drawer></drawer>
</q-layout-drawer>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import drawer from '../layouts/drawer/drawer.vue'
import messagePopover from '../layouts/toolbar/messagePopover/messagePopover.vue'
import { GlobalStore, UserStore } from '@modules'
import { tools } from '../store/Modules/tools'
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 = ''
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) {
this.strConn = value
// this.$q.notify({
// color : 'primary',
// icon: 'wifi',
// message: "CAMBIATOO! " + value
// })
}
@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) {
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}`
})
}
this.changeIconConn()
}
}
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'
}
public selectOpLang = [
{ label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
{ label: 'Español', icon: 'fa-flag-es', value: 'esEs', image: '../statics/images/es.png', short: 'ES' },
{ label: 'Italiano', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' }
// { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
]
// -------------------------------------------------------------------------
// 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
}
set leftDrawerOpen(value) {
GlobalStore.state.leftDrawerOpen = value
localStorage.setItem(tools.localStorage.leftDrawerOpen, value.toString())
}
getAppVersion() {
// return "AA"
let strv = ''
if (process.env.DEV) {
strv = 'DEV '
} else if (process.env.TEST) {
strv = 'TEST '
}
return "[" + strv + process.env.APP_VERSION + "]"
}
get lang() {
return this.$q.i18n.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)
this.langshort = this.selectOpLang[indrec].short
return
}
}
}
set lang(lang) {
console.log('set lang(' + this.$i18n.locale)
this.$i18n.locale = this.snakeToCamel(lang)
// this.$q.notify('IMPOSTA LANG= ' + this.$i18n.locale)
// console.log('IMPOSTA LANG= ' + this.$i18n.locale)
UserStore.mutations.setlang(this.$i18n.locale)
let mylangtopass = lang
this.setshortlang(mylangtopass)
if (mylangtopass === 'enUs')
mylangtopass = 'en-us'
if (mylangtopass === 'esEs')
mylangtopass = 'es'
// dynamic import, so loading on demand only
import(`quasar-framework/i18n/${mylangtopass}`).then(lang => {
this.$q.i18n.set(lang.default)
import(`src/statics/i18n`).then(function () {
})
})
}
getLangAtt() {
return this.$q.i18n.lang
}
setLangAtt(mylang) {
console.log('MYLL=', mylang)
this.$q.i18n.lang = mylang
}
beforeMount() {
// Estrai la Lang dal Localstorage
let my = this.getLangAtt()
// this.$q.notify('prima: ' + String(my))
let mylang = tools.getItemLS(tools.localStorage.lang)
if (mylang === '') {
if (navigator) {
mylang = navigator.language
console.log(`LANG2 NAVIGATOR ${mylang}`)
} else {
mylang = this.$q.i18n.lang
}
console.log('IMPOSTA LANGMY', mylang)
}
if (mylang !== '') {
if (mylang.toLowerCase() === 'enus')
mylang = 'enUs'
if ((mylang.toLowerCase() === 'eses') || (mylang.toLowerCase() === 'es-es'))
mylang = 'esEs'
if ((mylang.toLowerCase() === 'enus') || (mylang.toLowerCase() === 'en-us'))
mylang = 'enUs'
}
if (!mylang)
mylang = process.env.LANG_DEFAULT
this.setLangAtt(mylang)
this.setshortlang(mylang)
// this.$q.notify('Dopo: ' + String(this.getLangAtt()))
}
mounted() {
// Test this by running the code snippet below and then
// use the "TableOnlyView" 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('EVENT ONLINE!')
// handle online status
GlobalStore.mutations.setStateConnection('online')
mythis.changeIconConn()
} else {
// console.log('EVENT 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()
})
}
}
</script>
<style lang="scss">
.layout-padding {
padding: 1em 4em;
}
.item-content {
font-size: 0.8rem;
font-weight: 350;
}
@media screen and (max-width: 600px) {
.layout-padding {
padding: 1.5em .5em;
}
}
.fixed-left:hover {
cursor: ew-resize;
}
/*
@-webkit-keyframes moveFromLeftFade {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
}
}
@keyframes moveFromLeftFade {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveFromTopFade {
from {
opacity: 0.3;
-webkit-transform: translateY(0%);
}
}
@keyframes moveFromTopFade {
from {
opacity: 0.3;
-webkit-transform: translateY(0%);
transform: translateY(-50%);
}
}
@-webkit-keyframes moveToRight {
from {
}
to {
-webkit-transform: translateX(100%);
}
}
@keyframes cartOut {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(1200px, 0px);
animation-timing-function: ease-out;
}
}
@-webkit-keyframes moveToLeft {
from {
}
to {
opacity: .5;
-webkit-transform: translateX(-100%);
}
}
@keyframes moveToLeft {
from {
}
to {
opacity: .5;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveToBottom {
from {
}
to {
opacity: .5;
-webkit-transform: translateY(-100%);
}
}
@keyframes moveToBottom {
from {
}
to {
opacity: .5;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes moveFromRight {
from {
opacity: .7;
-webkit-transform: translateX(100%);
}
}
@keyframes moveFromRight {
from {
opacity: .7;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
*/
.drawer-closer .item-content {
margin-left: 20px !important;
}
.drawer-content .list-label {
line-height: 25px;
}
.drawer-content .item {
height: 25px;
}
.router-link-active .item-primary {
color: #027be3;
}
.q-picker-textfield .q-picker-textfield-label {
color: inherit !important;
}
.label-success .q-picker-textfield-label {
color: #4caf50 !important;
}
.label-error .q-picker-textfield-label {
color: #f44336 !important;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.label-success .q-picker-textfield:after, .label-error .q-picker-textfield:after {
content: "" !important;
}
#android-preview iframe {
margin-top: 64px;
width: 357px;
height: 590px;
background: #fff;
}
#ios-preview iframe {
margin-top: 64px;
width: 320px;
height: 590px;
background: #fff;
}
canvas {
width: 270px !important;
}
@media only screen and (min-width: 601px) {
.adv-form-one .timeline-badge {
right: auto !important;
left: auto !important;
}
.adv-form-one .timeline-content {
margin-left: 3.9rem;
}
.adv-form-one .timeline-item {
width: 100% !important;
}
.adv-form-one .timeline-title {
text-align: inherit !important;
margin-left: 3.9rem;
}
.timeline:before {
left: 1.6rem;
}
}
.adv-form-one .timeline-content .group .primary {
display: none !important;
}
.underline {
text-decoration: underline;
}
.toolbar {
min-height: 30px;
}
.right-itens a, .right-itens button {
margin-right: 10px;
}
.sel_lang {
padding: 5px;
color: white;
}
.fa-facebook:before {
content: url('../statics/icons/flag_it.svg');
}
.fa-flag-it:before {
content: url('../statics/icons/flag_it.svg');
}
.clIconOnline {
color: white;
}
.clIconOffline {
color: red;
}
.flagimg {
width: 30px;
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>

287
src/components/Header/Header.scss Normal file
View File

@@ -0,0 +1,287 @@
.layout-padding {
padding: 1em 4em;
}
.item-content {
font-size: 0.8rem;
font-weight: 350;
}
@media screen and (max-width: 600px) {
.layout-padding {
padding: 1.5em .5em;
}
}
.fixed-left:hover {
cursor: ew-resize;
}
/*
@-webkit-keyframes moveFromLeftFade {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
}
}
@keyframes moveFromLeftFade {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveFromTopFade {
from {
opacity: 0.3;
-webkit-transform: translateY(0%);
}
}
@keyframes moveFromTopFade {
from {
opacity: 0.3;
-webkit-transform: translateY(0%);
transform: translateY(-50%);
}
}
@-webkit-keyframes moveToRight {
from {
}
to {
-webkit-transform: translateX(100%);
}
}
@keyframes cartOut {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(1200px, 0px);
animation-timing-function: ease-out;
}
}
@-webkit-keyframes moveToLeft {
from {
}
to {
opacity: .5;
-webkit-transform: translateX(-100%);
}
}
@keyframes moveToLeft {
from {
}
to {
opacity: .5;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveToBottom {
from {
}
to {
opacity: .5;
-webkit-transform: translateY(-100%);
}
}
@keyframes moveToBottom {
from {
}
to {
opacity: .5;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes moveFromRight {
from {
opacity: .7;
-webkit-transform: translateX(100%);
}
}
@keyframes moveFromRight {
from {
opacity: .7;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
*/
.drawer-closer .item-content {
margin-left: 20px !important;
}
.drawer-content .list-label {
line-height: 25px;
}
.drawer-content .item {
height: 25px;
}
.router-link-active .item-primary {
color: #027be3;
}
.q-picker-textfield .q-picker-textfield-label {
color: inherit !important;
}
.label-success .q-picker-textfield-label {
color: #4caf50 !important;
}
.label-error .q-picker-textfield-label {
color: #f44336 !important;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.label-success .q-picker-textfield:after, .label-error .q-picker-textfield:after {
content: "" !important;
}
#android-preview iframe {
margin-top: 64px;
width: 357px;
height: 590px;
background: #fff;
}
#ios-preview iframe {
margin-top: 64px;
width: 320px;
height: 590px;
background: #fff;
}
canvas {
width: 270px !important;
}
@media only screen and (min-width: 601px) {
.adv-form-one .timeline-badge {
right: auto !important;
left: auto !important;
}
.adv-form-one .timeline-content {
margin-left: 3.9rem;
}
.adv-form-one .timeline-item {
width: 100% !important;
}
.adv-form-one .timeline-title {
text-align: inherit !important;
margin-left: 3.9rem;
}
.timeline:before {
left: 1.6rem;
}
}
.adv-form-one .timeline-content .group .primary {
display: none !important;
}
.underline {
text-decoration: underline;
}
.toolbar {
min-height: 30px;
}
.right-itens a, .right-itens button {
margin-right: 10px;
}
.sel_lang {
padding: 5px;
color: white;
}
.fa-facebook:before {
content: url('../../statics/icons/flag_it.svg');
}
.fa-flag-it:before {
content: url('../../statics/icons/flag_it.svg');
}
.clIconOnline {
color: white;
}
.clIconOffline {
color: red;
}
.flagimg {
width: 30px;
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;
}

309
src/components/Header/Header.ts Normal file
View File

@@ -0,0 +1,309 @@
import Vue from 'vue'
import Component from 'vue-class-component'
import drawer from '../../layouts/drawer/drawer.vue'
import messagePopover from '../../layouts/toolbar/messagePopover/messagePopover.vue'
import { GlobalStore, UserStore } from '@modules'
// import { StateConnection } from '../../model'
import { Watch } from 'vue-property-decorator'
import { tools } from '../../store/Modules/tools'
import Quasar from 'quasar'
@Component({
components: {
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 = ''
public langshort: string = ''
public clCloudUpload: string = ''
public clCloudDownload: string = ''
public clCloudUp_Indexeddb: string = ''
public clCloudDown_Indexeddb: string = 'clIndexeddbsend'
public selectOpLang = [
{ label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
{ label: 'Español', icon: 'fa-flag-es', value: 'es', image: '../statics/images/es.png', short: 'ES' },
{ label: 'Italiano', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' }
// { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
]
get conn_changed() {
return GlobalStore.state.stateConnection
}
get isAdmin() {
return UserStore.state.isAdmin
}
get conndata_changed() {
return GlobalStore.state.connData
}
get isNewVersionAvailable() {
return GlobalStore.getters.isNewVersionAvailable
}
// -------------------------------------------------------------------------
// 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
}
set leftDrawerOpen(value) {
GlobalStore.state.leftDrawerOpen = value
localStorage.setItem(tools.localStorage.leftDrawerOpen, value.toString())
}
get lang() {
return this.$q.lang.isoName
}
set lang(lang) {
console.log('set lang(' + this.$i18n.locale)
this.$i18n.locale = this.snakeToCamel(lang)
// this.$q.notify('IMPOSTA LANG= ' + this.$i18n.locale)
// console.log('IMPOSTA LANG= ' + this.$i18n.locale)
UserStore.mutations.setlang(this.$i18n.locale)
let mylangtopass = lang
this.setshortlang(mylangtopass)
if (mylangtopass === 'enUs') {
mylangtopass = 'en-us'
}
if (mylangtopass === 'es') {
mylangtopass = 'es'
}
this.setLangAtt(mylangtopass)
}
@Watch('GlobalStore.state.stateConnection', { immediate: true, deep: true })
public changeconn(value: string, oldValue: string) {
this.strConn = value
// this.$q.notify({
// color : 'primary',
// icon: 'wifi',
// message: "CAMBIATOO! " + value
// })
}
@Watch('conndata_changed', { immediate: true, deep: true })
public 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 })
public 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}`
})
}
this.changeIconConn()
}
}
public RefreshApp() {
// Unregister Service Worker
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for (const registration of registrations) {
registration.unregister()
}
})
window.location.reload(true)
}
public changeIconConn() {
this.iconConn = GlobalStore.state.stateConnection === 'online' ? 'wifi' : 'wifi_off'
this.clIconConn = GlobalStore.state.stateConnection === 'online' ? 'clIconOnline' : 'clIconOffline'
}
public getAppVersion() {
// return "AA"
let strv = ''
if (process.env.DEV) {
strv = 'DEV '
} else if (process.env.TEST) {
strv = 'TEST '
}
return '[' + strv + process.env.APP_VERSION + ']'
}
public setshortlang(lang) {
for (const indrec in this.selectOpLang) {
if (this.selectOpLang[indrec].value === lang) {
// console.log('this.selectOpLang[indrec].short', this.selectOpLang[indrec].short, this.selectOpLang[indrec].value)
this.langshort = this.selectOpLang[indrec].short
return
}
}
}
public getLangAtt() {
return this.$q.lang.isoName
}
public setLangAtt(mylang) {
console.log('MYLL=', mylang)
console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName)
// dynamic import, so loading on demand only
import(`quasar/lang/${mylang}`).then((lang) => {
Quasar.lang.set(lang.default)
import(`../../statics/i18n`).then(() => {
console.log('MY LANG DOPO=', this.$q.lang.isoName)
})
})
// this.$q.lang.set(mylang)
}
public beforeMount() {
// Estrai la Lang dal Localstorage
console.log('this.$q.i18n=', this.$q.i18n, 'this.$q.getLocale()=', this.$q.lang.isoName)
const my = this.getLangAtt()
this.$q.notify('prima: ' + String(my))
let mylang = tools.getItemLS(tools.localStorage.lang)
if (mylang === '') {
if (navigator) {
mylang = navigator.language
console.log(`LANG2 NAVIGATOR ${mylang}`)
} else {
mylang = this.$q.lang.isoName
}
console.log('IMPOSTA LANGMY', mylang)
}
if (mylang !== '') {
if (mylang.toLowerCase() === 'enus') {
mylang = 'enUs'
}
if ((mylang.toLowerCase() === 'es') || (mylang.toLowerCase() === 'es-es')) {
mylang = 'es'
}
if ((mylang.toLowerCase() === 'enus') || (mylang.toLowerCase() === 'en-us')) {
mylang = 'enUs'
}
}
if (!mylang) {
mylang = process.env.LANG_DEFAULT
}
this.setLangAtt(mylang)
this.setshortlang(mylang)
// this.$q.notify('Dopo: ' + String(this.getLangAtt()))
}
public mounted() {
// Test this by running the code snippet below and then
// use the "TableOnlyView" checkbox in DevTools Network panel
const 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('EVENT ONLINE!')
// handle online status
GlobalStore.mutations.setStateConnection('online')
mythis.changeIconConn()
} else {
// console.log('EVENT 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()
})
}
}

124
src/components/Header/Header.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<div>
<!--
<router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
<button>
<i>arrow_back</i>
</button>
</router-link>
-->
<q-header elevated>
<q-toolbar
color="primary"
:glossy="$q.theme === 'mat'"
:inverted="$q.theme === 'ios'"
class="toolbar"
>
<q-btn
flat
dense
round
@click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
>
<q-icon name="menu"/>
</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
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-btn-dropdown
stretch
flat
:label="langshort"
>
<q-list bordered>
<q-item clickable v-ripple v-for="langrec in selectOpLang" :key="langrec.value"
@click.native="lang = langrec.value">
<q-item-section avatar>
<img :src="langrec.image" class="flagimg">
</q-item-section>
<q-item-section>
{{langrec.label}}
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<!--
<message-popover></message-popover>
-->
<!--
<div class="right-itens">
<label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
</div>-->
</q-toolbar>
</q-header>
<q-drawer side="left"
v-model="leftDrawerOpen"
:content-class="['bg-grey-1', 'q-pa-sm']"
:content-style="{padding: '0px'}"
>
<drawer></drawer>
</q-drawer>
</div>
</template>
<script lang="ts" src="./Header.ts">
</script>
<style lang="scss" scoped>
@import './Header.scss';
</style>

1
src/components/Header/index.ts Normal file
View File

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

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

@@ -121,7 +121,7 @@ $heightdescr: 20px;
//visibility: hidden;
}
//.q-popover.animate-scale {
//.q-menu.animate-scale {
// animation: none;
//}

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

@@ -1,22 +1,19 @@
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { tools } from '../../../store/Modules/tools'
import { UserStore } from '@modules'
import { tools } from '../../../store/Modules/tools'
import { ITodo } from '../../../model/index'
import { SubMenus } from '../SubMenus'
import $ from 'jquery'
// import { debounce } from '../../../classes/debounce'
import { date } from 'quasar'
import { askConfirm } from '../../../classes/routinestd'
@Component({
name: 'SingleTodo',
components: { SubMenus }
components: { SubMenus },
name: 'SingleTodo'
})
export default class SingleTodo extends Vue {
public selectPriority: [] = []
@@ -43,20 +40,19 @@ export default class SingleTodo extends Vue {
public clButtPopover: string = 'pos-item-popover'
public numpos: number = 0
$q: any
@Prop({ required: true }) itemtodo: ITodo
public $q: any
@Prop({ required: true }) public itemtodo: ITodo
// @Watch('itemtodo.completed') valueChanged() {
// this.watchupdate('completed')
// }
@Watch('itemtodo.enableExpiring') valueChanged4() {
@Watch('itemtodo.enableExpiring') public valueChanged4() {
this.watchupdate('enableExpiring')
}
@Watch('itemtodo.expiring_at') valueChanged2() {
@Watch('itemtodo.expiring_at') public valueChanged2() {
this.watchupdate('expiring_at')
}
@@ -64,39 +60,40 @@ export default class SingleTodo extends Vue {
// this.watchupdate('priority')
// }
@Watch('itemtodo.descr') valueChanged5() {
@Watch('itemtodo.descr') public valueChanged5() {
this.precDescr = this.itemtodo.descr
}
@Watch('itemtodo.progress') valueChanged6() {
@Watch('itemtodo.progress') public valueChanged6() {
this.updateClasses()
}
dateToYYYYMMDD(date) {
/*
public dateToYYYYMMDD(date) {
// may have timezone caveats https://stackoverflow.com/a/29774197/1850609
return date && date.toISOString().split('T')[0]
}
*/
// Computed:
get isSel() {
return this.sel
}
isTodo() {
public isTodo() {
return this.isTodoByElem(this.itemtodo)
}
isTodoByElem(elem) {
public isTodoByElem(elem) {
return elem.descr.slice(-1) !== ':'
}
watchupdate(field = '') {
public watchupdate(field = '') {
this.$emit('eventupdate', {myitem: this.itemtodo, field } )
this.updateicon()
}
updateClasses() {
public updateClasses() {
// this.classCompleted = 'completed-item'
this.classCompleted = 'completed-item-popover'
this.classDescr = 'flex-item div_descr show donotdrag'
@@ -146,8 +143,6 @@ export default class SingleTodo extends Vue {
this.clButtPopover += ' pos-item-popover_cursor'
}
// if (this.inEdit) {
// this.classDescr += ' hide'
// this.classDescrEdit += ' show'
@@ -162,8 +157,9 @@ export default class SingleTodo extends Vue {
// console.log('classDescr', this.classDescr)
// console.log('UserStore.state.lang', UserStore.state.lang)
if (this.isTodo())
if (this.isTodo()) {
this.menuPopupTodo = tools.menuPopupTodo[UserStore.state.lang]
}
else {
this.menuPopupTodo = []
this.menuPopupTodo.push(tools.menuPopupTodo[UserStore.state.lang][tools.INDEX_MENU_DELETE])
@@ -171,7 +167,11 @@ export default class SingleTodo extends Vue {
}
created() {
public getstrDate(mytimestamp) {
return date.formatDate(mytimestamp, 'DD-MM-YY')
}
public created() {
this.precDescr = this.itemtodo.descr
this.updateicon()
@@ -179,14 +179,13 @@ export default class SingleTodo extends Vue {
this.selectPriority = tools.selectPriority[UserStore.state.lang]
}
getClassRow() {
public getClassRow() {
return 'row flex-container2 ' + this.classRow
}
clickRiga(clickmenu: boolean = false) {
public clickRiga(clickmenu: boolean = false) {
// console.log('CLICK RIGA ************')
if (!this.sel) {
@@ -202,7 +201,7 @@ export default class SingleTodo extends Vue {
}
}
selectRiga() {
public selectRiga() {
// console.log('selectRiga', this.itemtodo.descr)
this.sel = true
this.classRow = 'rowselected'
@@ -210,7 +209,7 @@ export default class SingleTodo extends Vue {
// console.log('FINE selectRiga', this.itemtodo.descr)
}
deselectRiga() {
public deselectRiga() {
// console.log('DeselectRiga', this.itemtodo.descr)
this.sel = false
this.classRow = ''
@@ -218,12 +217,12 @@ export default class SingleTodo extends Vue {
this.updateClasses()
}
deselectAndExitEdit() {
public deselectAndExitEdit() {
this.deselectRiga()
this.exitEdit()
}
mouseUp() {
public mouseUp() {
if (!this.inEdit) {
if (this.sel) {
this.selectRiga()
@@ -233,44 +232,50 @@ export default class SingleTodo extends Vue {
}
}
clickRow() {
public clickRow() {
this.clickRiga()
}
editTodo() {
public editTodo() {
if (!this.itemtodo.completed) {
// console.log('INIZIO - editTodo')
this.$emit('click')
this.precDescr = this.itemtodo.descr
this.inEdit = true
if (!this.sel)
if (!this.sel) {
this.selectRiga()
else
}
else {
this.updateClasses()
}
this.faiFocus('inputdescr')
}
// console.log('FINE - editTodo')
}
faiFocus(elem, isparent: boolean = false) {
public faiFocus(elem, isparent: boolean = false) {
setTimeout(() => {
let theField = null
if (isparent)
theField = <HTMLInputElement>this.$parent.$parent.$parent.$parent.$refs[elem]
else
theField = <HTMLInputElement>this.$refs[elem]
if (isparent) {
theField = this.$parent.$parent.$parent.$parent.$refs[elem] as HTMLInputElement
}
else {
theField = this.$refs[elem] as HTMLInputElement
}
if (theField !== undefined)
if (theField !== undefined) {
theField.focus()
}
// console.log('focus()')
}, 100)
}
exitEdit(singola: boolean = false) {
public exitEdit(singola: boolean = false) {
if (this.inEdit) {
if (this.precDescr !== this.itemtodo.descr)
if (this.precDescr !== this.itemtodo.descr) {
this.updateTodo()
}
// console.log('exitEdit')
this.inEdit = false
this.updateClasses
@@ -278,8 +283,7 @@ export default class SingleTodo extends Vue {
}
}
keyDownRow(e) {
public keyDownRow(e) {
console.log('keyDownRow')
// Delete Key or Backspage
if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
@@ -294,7 +298,7 @@ export default class SingleTodo extends Vue {
}
keyDownArea(e) {
public keyDownArea(e) {
console.log('keyDownArea')
/*
if ((e.key === 'ArrowUp') && !e.shiftKey) {
@@ -342,9 +346,10 @@ export default class SingleTodo extends Vue {
}
updateTodo() {
if (this.itemtodo.descr === this.precDescr)
public updateTodo() {
if (this.itemtodo.descr === this.precDescr) {
return
}
this.itemtodo.descr = this.precDescr
console.log('updateTodo', this.precDescr, this.itemtodo.descr)
@@ -357,7 +362,7 @@ export default class SingleTodo extends Vue {
this.updateClasses()
}
setCompleted() {
public setCompleted() {
// console.log('setCompleted')
this.itemtodo.completed = !this.itemtodo.completed
@@ -368,41 +373,44 @@ export default class SingleTodo extends Vue {
this.deselectAndExitEdit()
}
updatedata(field: string) {
public updatedata(field: string) {
// const myitem = tools.jsonCopy(this.itemtodo)
console.log('calling this.$emit(eventupdate)', this.itemtodo)
this.$emit('eventupdate', { myitem: this.itemtodo, field } )
}
updateicon() {
public updateicon() {
// console.log('updateicon')
if (this.itemtodo.completed)
if (this.itemtodo.completed) {
this.iconCompleted = 'check_circle'
else
}
else {
this.iconCompleted = 'check_circle_outline'
}
if (this.itemtodo.priority === tools.Todos.PRIORITY_HIGH)
this.iconPriority = 'expand_less' // expand_less
else if (this.itemtodo.priority === tools.Todos.PRIORITY_NORMAL)
if (this.itemtodo.priority === tools.Todos.PRIORITY_HIGH) {
this.iconPriority = 'expand_less'
} // expand_less
else if (this.itemtodo.priority === tools.Todos.PRIORITY_NORMAL) {
this.iconPriority = 'remove'
else if (this.itemtodo.priority === tools.Todos.PRIORITY_LOW)
this.iconPriority = 'expand_more' // expand_more
}
else if (this.itemtodo.priority === tools.Todos.PRIORITY_LOW) {
this.iconPriority = 'expand_more'
} // expand_more
this.updateClasses()
}
removeitem(id) {
public removeitem(id) {
this.$emit('deleteItem', id)
}
enableExpiring() {
public enableExpiring() {
this.itemtodo.enableExpiring = !this.itemtodo.enableExpiring
}
async clickMenu(action) {
public async clickMenu(action) {
console.log('click menu: ', action)
if (action === tools.MenuAction.DELETE) {
return await this.askConfirmDelete()
@@ -418,7 +426,7 @@ export default class SingleTodo extends Vue {
}
setPriority(newpriority) {
public setPriority(newpriority) {
if (this.itemtodo.priority !== newpriority) {
this.itemtodo.priority = newpriority
@@ -431,21 +439,20 @@ export default class SingleTodo extends Vue {
// this.$q.notify('setPriority: ' + elem)
}
async askConfirmDelete() {
public async askConfirmDelete() {
const deletestr = this.$t('dialog.delete')
const cancelstr = this.$t('dialog.cancel')
let msg = this.$t('dialog.msg.deleteTask', {'mytodo' : this.itemtodo.descr })
const msg = this.$t('dialog.msg.deleteTask', {mytodo : this.itemtodo.descr })
await askConfirm(this.$q, this.$t('dialog.msg.titledeleteTask'), msg, deletestr, cancelstr)
.then(ris => {
.then((ris) => {
console.log('ris', ris)
if (ris) {
this.removeitem(this.itemtodo._id)
}
}).catch(err => {
}).catch((err) => {
})
}
}

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

@@ -38,12 +38,13 @@
<!--</div>-->
<div v-if="isTodo() && (percentageProgress > 0) " class="flex-item progress-item shadow-1">
<q-progress
<q-linear-progress
stripe
:percentage="percentageProgress"
class="progrbar-item"
:color="colProgress"
>
</q-progress>
</q-linear-progress>
<div :class="percProgress">
{{percentageProgress}}%
<q-popup-edit v-model="itemtodo.progress" title="Progress" buttons class="editProgress">
@@ -55,23 +56,26 @@
<div v-if="itemtodo.enableExpiring" :class="classExpiring">
<q-datetime
type="date"
v-model="itemtodo.expiring_at"
class="myexpired"
format="DD/MM/YY"
@change="val => { model = val }">
</q-datetime>
{{getstrDate(itemtodo.expiring_at)}}
<q-popup-edit v-model="itemtodo.expiring_at" title="Edit" buttons class="">
<q-input
filled
v-model="itemtodo.expiring_at"
type="date"
class="myexpired"
format="DD/MM/YY"
@change="val => { model = val }">
</q-input>
</q-popup-edit>
</div>
<div v-if="isTodo()" class="flex-item pos-item " @mousedown="clickRiga">
<q-btn push
:class="clButtPopover"
icon="menu">
<q-popover id="popmenu" v-if="true" self="top right">
<q-menu id="popmenu" v-if="true" self="top right">
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu"
@setPriority="setPriority"></SubMenus>
</q-popover>
</q-menu>
</q-btn>
</div>

108
src/components/todos/SubMenus/SubMenus.vue
View File

@@ -2,69 +2,97 @@
<div>
<q-list link separator no-border class="todo-menu">
<div v-for="field in menuPopupTodo" :key="field.value">
<q-item v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
<q-item clickable v-ripple v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
@click.native="clickMenu(field.value)">
<q-item-side :icon="field.icon"/>
<q-item-section avatar>
<q-icon :name="field.icon"/>
</q-item-section>
<q-item-main v-if="field.value !== 120">
<q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
</q-item-main>
<q-item-section v-if="field.value !== 120" label class="item-menu">{{field.label}}</q-item-section>
<q-item-side v-if="field.value === 101">
<q-item-section side top v-if="field.value === 101">
<q-checkbox v-model="itemtodo.enableExpiring"/>
</q-item-side>
<q-item-side v-if="field.value === 110">
</q-item-section>
<q-item-section v-if="field.value === 110">
<q-checkbox v-model="itemtodo.completed"/>
</q-item-side>
</q-item-section>
<q-item-main v-if="field.value === 120">
<!--<q-item tag="label" v-ripple>-->
<!--<q-item-section side top>-->
<!--<q-checkbox v-model="check1" />-->
<!--</q-item-section>-->
<!--<q-item-section>-->
<!--<q-item-label>Notifications</q-item-label>-->
<!--<q-item-label caption>-->
<!--Notify me about updates to apps or games that I downloaded-->
<!--</q-item-label>-->
<!--</q-item-section>-->
<!--</q-item>-->
<!--<q-item tag="label" v-ripple>-->
<!--<q-item-section side top>-->
<!--<q-checkbox v-model="check2" />-->
<!--</q-item-section>-->
<!--<q-item-section>-->
<!--<q-item-label>Sound</q-item-label>-->
<!--<q-item-label caption>-->
<!--Auto-update apps at anytime. Data charges may apply-->
<!--</q-item-label>-->
<!--</q-item-section>-->
<!--</q-item>-->
<q-item-section v-if="field.value === 120">
<q-slider :class="$parent.menuProgress" v-model="itemtodo.progress" :min="0" :max="100"
:step="5"/>
</q-item-main>
<q-item-side v-if="field.value === 120" >
</q-item-section>
<q-item-section v-if="field.value === 120">
<div>
<q-input v-model="itemtodo.progress"
class="menuInputProgress"
type="number"
suffix="%"
@change="val => { model = val }"
@keydown="KeychangeProgress"
/>
<q-input v-model="itemtodo.progress"
class="menuInputProgress"
type="number"
suffix="%"
@change="val => { model = val }"
@keydown="KeychangeProgress"
/>
</div>
</q-item-side>
<!--<q-item-side right v-if="field.value === 120">-->
<!--<div :class="$parent.percProgress">-->
<!--{{$parent.percentageProgress}}%-->
<!--</div>-->
<!--</q-item-side>-->
</q-item-section>
</q-item>
<q-item v-if="(field.value === 100)" :icon="field.icon" v-close-overlay
<q-item v-if="(field.value === 100)" :icon="field.icon"
@click.native="clickMenu(field.value)">
<q-item-side :icon="field.icon"/>
<q-item-main label class="item-menu">{{field.label}}</q-item-main>
<q-item-section avatar>
<q-icon :name="field.icon" inverted color="primary"/>
</q-item-section>
<q-item-section class="item-menu">
{{field.label}}
</q-item-section>
</q-item>
<q-item v-if="(field.value === 130)" :icon="field.icon"
<q-item clickable v-if="(field.value === 130)" :icon="field.icon"
@click.native="clickMenu(field.value)">
<q-item-side :icon="$parent.iconPriority"/>
<q-item-section avatar>
<q-icon :name="$parent.iconPriority" inverted color="primary"/>
</q-item-section>
<q-item-main>
<q-item-section>
<q-btn-dropdown ref="dropdown_priority" flat :label="field.label"
>
<q-list link>
<q-item v-close-overlay v-for="field in selectPriority" :key="field.value"
<q-list bordered>
<q-item clickable v-ripple v-for="field in selectPriority" :key="field.value"
@click.native="setPriority(field.value)">
<q-item-side :icon="field.icon" inverted color="primary"/>
<q-item-main>
<q-item-tile label>{{field.label}}</q-item-tile>
</q-item-main>
<q-item-section avatar>
<q-icon :name="field.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>
{{field.label}}
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</q-item-main>
</q-item-section>
</q-item>
</div>

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

@@ -7,14 +7,14 @@
<div class="flex-item">
<q-btn push
icon="settings">
<q-popover id="popconfig" self="top right">
<q-menu id="popconfig" self="top right">
<q-list link separator no-border class="todo-menu">
<div v-for="field in menuPopupConfigTodo" :key="field.value">
<q-item :icon="field.icon"
@click.native="">
<q-item-side :icon="field.icon"/>
<q-item-section :icon="field.icon"/>
<q-item-main v-if="showTask(field.value)">
<q-item-label v-if="showTask(field.value)">
<q-select
radio
@@ -22,14 +22,14 @@
:float-label="field.label"
v-model="showtype"
:options="listOptionShowTask"/>
</q-item-main>
<q-item-main v-else>
<q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
</q-item-main>
</q-item-label>
<q-item-label v-else>
<q-item-section label class="item-menu">{{field.label}}</q-item-section>
</q-item-label>
</q-item>
</div>
</q-list>
</q-popover>
</q-menu>
</q-btn>
</div>
</div>

43
src/config.ts
View File

@@ -1,20 +1,19 @@
interface IUriConfig {
auth?: string
content?: string
site?: string
services?: string
auth?: string
content?: string
site?: string
services?: string
}
const uri: IUriConfig = {}
const addProp = (obj: {}, propName: string, value: string) => {
Object.defineProperty(obj, propName, {
enumerable: false,
get: () => {
return '//' + window.location.host + value
}
})
Object.defineProperty(obj, propName, {
enumerable: false,
get: () => {
return '//' + window.location.host + value
}
})
}
addProp(uri, 'auth', '/auth/')
@@ -23,17 +22,17 @@ addProp(uri, 'site', process.env.MONGODB_HOST)
addProp(uri, 'services', '/api/')
const config = {
uri: uri,
claimsNamespace: '//toucan/claims',
auth: {
accessTokenKey: 'AUTH-LOCAL',
externalProviderKey: 'AUTH-EXTERNAL'
},
uopt: 'UOPT',
xsrf: {
cookieName: 'XSRF-TOKEN',
headerName: 'X-XSRF-TOKEN'
}
claimsNamespace: '//toucan/claims',
uri,
auth: {
accessTokenKey: 'AUTH-LOCAL',
externalProviderKey: 'AUTH-EXTERNAL'
},
uopt: 'UOPT',
xsrf: {
cookieName: 'XSRF-TOKEN',
headerName: 'X-XSRF-TOKEN'
}
}
export default config

19
src/css/quasar.variables.styl Normal file
View File

@@ -0,0 +1,19 @@
// Quasar Stylus Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Stylus variables found in Quasar's source Stylus files.
// Check documentation for full list of Quasar variables
// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
$primary = #027BE3
$secondary = #26A69A
$accent = #9C27B0
$positive = #21BA45
$negative = #C10015
$info = #31CCEC
$warning = #F2C037

25
src/css/themes/common.variables.styl
View File

@@ -1,25 +0,0 @@
// App Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Stylus variables found in Quasar's source Stylus files. Setting
// variables before Quasar's Stylus will use these variables rather than
// Quasar's default Stylus variable values. Stylus variables specific
// to the themes belong in either the variables.ios.styl or variables.mat.styl files.
// Check documentation for full list of Quasar variables
// App Shared Color Variables
// --------------------------------------------------
// It's highly recommended to change the default colors
// to match your app's branding.
$primary = #027be3
$secondary = #26A69A
$tertiary = #555
$neutral = #E0E1E2
$positive = #21BA45
$negative = #DB2828
$info = #31CCEC
$warning = #F2C037

7
src/css/themes/variables.ios.styl
View File

@@ -1,7 +0,0 @@
// App Shared Variables
// --------------------------------------------------
// Shared Stylus variables go in the common.variables.styl file
@import 'common.variables'
// iOS only Quasar variables overwrites
// -----------------------------------------

7
src/css/themes/variables.mat.styl
View File

@@ -1,7 +0,0 @@
// App Shared Variables
// --------------------------------------------------
// Shared Stylus variables go in the common.variables.styl file
@import 'common.variables'
// Material only Quasar variables overwrites
// -----------------------------------------

19
src/error-handler/graphql.js
View File

@@ -1,19 +0,0 @@
import { i18n } from '../plugins/i18n'
import { Notify } from 'quasar'
export default (error) => {
let message = this.$i18n.t('errors.graphql.undefined')
if (error[0].validation) {
let errors = Object.keys(error[0].validation)
message = error[0].validation[errors[0]][0]
}
Notify.create({
message,
position: 'center'
})
if (message === this.$i18n.t('errors.graphql.undefined')) {
console.log(error.response)
}
}

21
src/error-handler/index.js
View File

@@ -1,21 +0,0 @@
// import Backend from './backend'
// import Firebase from './firebase'
import Graphql from './graphql'
export default (context, error) => {
/*
if (error.constructor.name === 'FirebaseError') {
Firebase(error)
return
}
if (error.response && error.response.data && error.response.data.backend) {
Backend(error)
return
}*/
if (error[0] && error[0].locations && error[0].validation) {
Graphql(error)
return
}
console.log('Error handler', error)
}

24
src/globalroutines/index.js
View File

@@ -1,24 +0,0 @@
import indexdb from './indexdb'
import { GlobalStore } from "../store/Modules";
export default async (context, cmd, table, data = null, id = '') => {
const descr = data !== null ? data.descr : ''
// console.log('globalroutines', cmd, table, descr, id)
return await indexdb(context, cmd, table, data, id)
.then(ris => {
setTimeout(function () {
GlobalStore.state.connData.uploading_indexeddb = 0
GlobalStore.state.connData.downloading_indexeddb = 0
}, 1000)
return ris
}
).catch(err => {
setTimeout(function () {
GlobalStore.state.connData.uploading_indexeddb = (GlobalStore.state.connData.uploading_indexeddb === 1) ? -1 : GlobalStore.state.connData.uploading_indexeddb
GlobalStore.state.connData.downloading_indexeddb = (GlobalStore.state.connData.downloading_indexeddb === 1) ? -1 : GlobalStore.state.connData.downloading_indexeddb
}, 1000)
console.log('ERROR INDEXEDDB: ', err)
})
}

115
src/globalroutines/indexdb.js
View File

@@ -1,115 +0,0 @@
import store, { GlobalStore } from '../store'
import _ from 'lodash'
import { UserStore, Todos } from '@store'
import { i18n } from '../plugins/i18n'
import { idbKeyval as storage } from '../js/storage.js';
import { costanti } from '../store/Modules/costanti';
function saveConfigIndexDb(context) {
let data = []
data['_id'] = costanti.CONFIG_ID_CFG
data['lang'] = UserStore.state.lang
data['token'] = UserStore.state.x_auth_token
data['userId'] = UserStore.state.userId
writeConfigIndexDb('config', data)
}
function writeConfigIndexDb(context, data) {
// console.log('writeConfigIndexDb', data)
storage.setdata('config', data)
.then(ris => {
return true
})
}
async function readfromIndexDbToStateTodos(context, table) {
console.log('*** readfromIndexDbToStateTodos ***')
return await storage.getalldata(table)
.then(reccat => {
// console.log('&&&&&&& readfromIndexDbToStateTodos OK: Num RECORD: ', records.length)
if (table === 'categories') {
console.log('reccat', reccat)
Todos.state.categories = []
for (let indcat in reccat) {
Todos.state.categories.push(reccat[indcat].valore)
}
console.log('ARRAY Categories', Todos.state.categories)
return storage.getalldata('todos')
.then(records => {
console.log('todos records', records)
// console.log('&&&&&&& readfromIndexDbToStateTodos OK: Num RECORD: ', records.length)
for (let myrec in records) {
const cat = myrec.category
let indcat = state.categories.indexOf(cat)
if (Todos.state.todos[indcat] === undefined)
Todos.state.todos[indcat] = {}
// add to the right array
Todos.state.todos[indcat].push(myrec)
}
console.log('************ ARRAYS SALVATI IN MEMORIA Todos.state.todos ', Todos.state.todos)
})
}
}).catch((error) => {
console.log('err: ', error)
})
}
function consolelogpao(str, str2 = '', str3 = '') {
console.log(str, str2, str3)
// Todos.mutations.setTestpao(str + str2 + str3)
}
function testfunc2() {
consolelogpao('testfunc2')
}
export default async (context, cmd, table, datakey = null, id = '') => {
// console.log('TABLE', table, 'cmd', cmd)
if (cmd === 'loadapp') {
// ****** LOAD APP AL CARICAMENTO ! *******
return saveConfigIndexDb(context, datakey)
} else if (cmd === 'write') {
if (GlobalStore)
GlobalStore.state.connData.uploading_indexeddb = 1
return await storage.setdata(table, datakey)
} else if (cmd === 'updatefromIndexedDbToStateTodo') {
return await readfromIndexDbToStateTodos(context, table)
} else if (cmd === 'readall') {
if (GlobalStore)
GlobalStore.state.connData.downloading_indexeddb = 1
return await storage.getalldata(table)
} else if (cmd === 'count') {
return await storage.count(table)
} else if (cmd === 'read') {
if (GlobalStore)
GlobalStore.state.connData.downloading_indexeddb = 1
return await storage.getdata(table, id)
} else if (cmd === 'delete') {
if (GlobalStore)
GlobalStore.state.connData.uploading_indexeddb = 1
return await storage.deletedata(table, id)
} else if (cmd === 'clearalldata') {
if (GlobalStore)
GlobalStore.state.connData.uploading_indexeddb = 1
return await storage.clearalldata(table)
} else if (cmd === 'log') {
consolelogpao(table)
}
}

23
src/globalroutines/util.js
View File

@@ -1,23 +0,0 @@
import { UserStore } from "../store/Modules";
import messages from "../statics/i18n";
function translate(params) {
let msg = params.split('.')
let lang = UserStore.state.lang
let stringa = messages[lang]
let ris = stringa
if (ris !== undefined) {
msg.forEach(param => {
ris = ris[param]
})
} else {
console.log('ERRORE IN TRANSLATE! ', params, ' NON ESISTE!')
return params
}
return ris
}
export default translate

69
src/layouts/drawer/menuOne.vue
View File

@@ -10,7 +10,7 @@
<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
<template v-for="child in parent.routes">
<div v-if="child.routes2">
<q-collapsible menu :label="$t(child.name)" icon="format_list_bulleted" class="titleSubMenu">
<q-expansion-item menu :label="$t(child.name)" icon="format_list_bulleted" class="titleSubMenu">
<div v-for="child2 in child.routes2">
<q-item link :to="child2.route" exact
class="item item-link drawer-closer cursor-pointer">
@@ -18,7 +18,7 @@
<div class="item-content">{{$t(child2.name)}}</div>
</q-item>
</div>
</q-collapsible>
</q-expansion-item>
</div>
<div v-else>
<q-slide-transition :duration=200>
@@ -36,39 +36,42 @@
</div>
</template>
<script>
export default {
props: ['links'],
watch: {
'$route.path'() {
Object.keys(this.links).forEach(parentName => {
this.setParentVisibilityBasedOnRoute(this.links[parentName])
})
}
},
computed: {
currentRoutePath() {
return this.$route.path
}
},
methods: {
created() {
console.log("MENUONE CREATED!");
},
setParentVisibilityBasedOnRoute(parent) {
parent.routes.forEach(item => {
if (this.$route.path === item.route) {
parent.show = true
return
}
})
},
replaceUnderlineToSpace(text) {
while (text.indexOf('_') !== -1) {
text = text.replace('_', ' ')
<script lang="ts">
import Vue from 'vue'
import { Prop, Watch } from "vue-property-decorator"
export default class menuOne extends Vue {
@Prop({ required: true }) links
@Watch('$route.path')
modifroute() {
Object.keys(this.links).forEach(parentName => {
this.setParentVisibilityBasedOnRoute(this.links[parentName])
})
}
get currentRoutePath() {
return this.$route.path
}
created() {
console.log("MENUONE CREATED!")
}
setParentVisibilityBasedOnRoute(parent) {
parent.routes.forEach(item => {
if (this.$route.path === item.route) {
parent.show = true
return
}
return text
})
}
replaceUnderlineToSpace(text) {
while (text.indexOf('_') !== -1) {
text = text.replace('_', ' ')
}
return text
}
}
</script>

4
src/layouts/toolbar/messagePopover/messagePopover.vue
View File

@@ -2,7 +2,7 @@
<button class="relative-position animate-bounce">
<i class="fa fa-2x fa-envelope-o"></i>
<span class="floating label bg-dark">5</span>
<q-popover self="top right">
<q-menu self="top right">
<div class="list striped">
<p class="caption no-margin text-center text-white bg-teal">Messages from people</p>
<div class="item item-link two-lines item-delimiter no-margin"
@@ -18,7 +18,7 @@
</span>
</div>
</div>
</q-popover>
</q-menu>
</button>
</template>

12
src/middleware/auth.js
View File

@@ -1,12 +0,0 @@
import { tools } from "../store/Modules/tools";
import { RouteNames } from '../router/route-names'
export default function auth({ next, router }) {
const tok = tools.getItemLS(tools.localStorage.token)
if (!tok) {
return router.push({ name: RouteNames.login });
}
return next();
}

10
src/model/GlobalStore.ts
View File

@@ -1,3 +1,6 @@
import { costanti } from "@src/store/Modules/costanti"
import { UserStore } from "@store"
export interface IPost {
title: string
}
@@ -15,6 +18,13 @@ export interface ICfgServer {
valore: string
}
export interface ICfgData {
_id?: string
lang?: string
token?: string
userId?: string
}
export interface ITestp1 {
contatore: number
mioarray: ICfgServer[]

2
src/model/UserStore.ts
View File

@@ -11,7 +11,7 @@ export const DefaultUser = <IUserState>{
export interface IUserState {
userId?: string
email?: string
username: string
username?: string
idapp?: any
password?: string
lang?: string

5
src/plugins/axios.js
View File

@@ -1,5 +0,0 @@
import axios from 'axios'
export default ({ Vue }) => {
Vue.prototype.$axios = axios
}

5
src/plugins/dialog.js
View File

@@ -1,5 +0,0 @@
import Dialog from 'quasar'
export default ({ Vue }) => {
Vue.use(Dialog)
}

10
src/plugins/dragula.js
View File

@@ -1,10 +0,0 @@
import Vue from 'vue'
import { Vue2Dragula } from 'vue2-dragula'
export default ({ Vue }) => {
Vue.use(Vue2Dragula, {
logging: {
service: false // to only log methods in service (DragulaService)
}
})
}

7
src/plugins/error-handler.js
View File

@@ -1,7 +0,0 @@
// import something here
import errorHandler from '../error-handler'
// leave the export, even if you don't use it
export default ({ app, router, Vue }) => {
// something to do
Vue.prototype.$errorHandler = errorHandler
}

8
src/plugins/globalroutines.js
View File

@@ -1,8 +0,0 @@
import globalroutines from '../globalroutines'
export default ({ app, router, store, Vue }) => {
// something to do
Vue.prototype.$globalroutines = globalroutines
}

89
src/plugins/guard.js
View File

@@ -1,89 +0,0 @@
// import something here
// leave the export, even if you don't use it
export default ({ app, router, store, Vue }) => {
// something to do
// ******************************************
// *** Per non permettere di accedere alle pagine in cui è necessario essere Loggati ! ***
// ******************************************
// Creates a `nextMiddleware()` function which not only
// runs the default `next()` callback but also triggers
// the subsequent Middleware function.
function nextFactory(context, middleware, index) {
const subsequentMiddleware = middleware[index]
// If no subsequent Middleware exists,
// the default `next()` callback is returned.
if (!subsequentMiddleware) return context.next
return (...parameters) => {
// Run the default Vue Router `next()` callback first.
context.next(...parameters)
// Then run the subsequent Middleware with a new
// `nextMiddleware()` callback.
const nextMiddleware = nextFactory(context, middleware, index + 1)
subsequentMiddleware({ ...context, next: nextMiddleware })
};
}
router.beforeEach((to, from, next) => {
if (to.meta.middleware) {
const middleware = Array.isArray(to.meta.middleware)
? to.meta.middleware
: [to.meta.middleware];
const context = {
from,
next,
router,
to,
};
const nextMiddleware = nextFactory(context, middleware, 1)
return middleware[0]({ ...context, next: nextMiddleware })
}
return next()
})
/*router.beforeEach((to, from, next) => {
var accessToken = store.state.session.userSession.accessToken
// ESTANDO LOGEADO
if (accessToken) {
// SE PERMITE IR DE AREA PUBLICA A PRIVADA
if (!from.matched.some(record => record.meta.requiresAuth) && to.matched.some(record => record.meta.requiresAuth)) {
next()
}
// SE PERMITE IR DE UNA AREA PRIVADA A OTRA PRIVADA
if (from.matched.some(record => record.meta.requiresAuth) && to.matched.some(record => record.meta.requiresAuth)) {
next()
}
// NO SE PERMITE IR A UN AREA PUBLICA DESDE UN AREA PRIVADA
if (from.matched.some(record => record.meta.requiresAuth) && !to.matched.some(record => record.meta.requiresAuth)) {
next(false)
}
// SE REDIRIJE AL PANEL
if (!from.matched.some(record => record.meta.requiresAuth) && !to.matched.some(record => record.meta.requiresAuth)) {
next('/Panel')
}
// NO ESTA LOGEADO
} else {
// SE PERMITE IR DE UNA AREA PUBLICA A OTRA PUBLICA
if (!from.matched.some(record => record.meta.requiresAuth) && !to.matched.some(record => record.meta.requiresAuth)) {
next()
}
// SE PERMITE IR DE UNA AREA PRIVADA A UNA PUBLICA (LOGOUT)
if (from.matched.some(record => record.meta.requiresAuth) && !to.matched.some(record => record.meta.requiresAuth)) {
next()
}
// NO SE PERMITE IR DE UNA AREA PUBLICA A UNA PRIVADA
if (!from.matched.some(record => record.meta.requiresAuth) && to.matched.some(record => record.meta.requiresAuth)) {
// REDIRIGIR A LOGIN
next('/')
}
}
})*/
}

39
src/plugins/i18n.js
View File

@@ -1,39 +0,0 @@
// src/plugins/i18n.js
import VueI18n from 'vue-i18n';
import messages from 'src/statics/i18n';
import { tools } from "../store/Modules/tools";
export default ({ app, store, Vue }) => {
Vue.use(VueI18n);
// Vue.config.lang = process.env.LANG_DEFAULT;
let mylang = tools.getItemLS(tools.localStorage.lang)
if ((navigator) && (mylang === '')) {
mylang = navigator.language
console.log(`LANG NAVIGATOR ${mylang}`)
}
if (mylang === '')
mylang = process.env.LANG_DEFAULT;
if (mylang.toLowerCase() === 'es-es')
mylang = 'esEs'
console.log('MYLANG2=', mylang)
console.log('process.env.LANG_DEFAULT=', process.env.LANG_DEFAULT)
Vue.config.lang = mylang
// console.log("PLUGINS INIT....");
//console.log("LANG_DEFAULT: ")
//console.log(process.env.LANG_DEFAULT)
// Set i18n instance on app
app.i18n = new VueI18n({
locale: mylang,
fallbackLocale: mylang,
messages
})
}

7
src/plugins/local-storage.js
View File

@@ -1,7 +0,0 @@
// import something here
import { _LocalStorage } from '../boot/local-storage'
// leave the export, even if you don't use it
export default ({ app, router, Vue }) => {
// something to do
Vue.prototype.$_localStorage = _LocalStorage
}

9
src/plugins/myconfig.js
View File

@@ -1,9 +0,0 @@
// import something here
import myconfig from '../myconfig'
// leave the export, even if you don't use it
export default ({ Vue }) => {
//Vue.use(myconfig);
// something to do
Vue.prototype.$myconfig = myconfig
}

5
src/plugins/vee-validate.js
View File

@@ -1,5 +0,0 @@
import VeeValidate from "vee-validate";
export default ({ Vue }) => {
Vue.use(VeeValidate, { inject: false })
}

20
src/plugins/vue-idb.js
View File

@@ -1,20 +0,0 @@
import Vue from 'vue'
import VueIdb from 'vue-idb'
export default ({ Vue }) => {
Vue.use(VueIdb)
}
/*
export default new VueIdb({
version: 1,
database: 'test',
schemas: [
{ categories: '++_id, sub_categ_id, descr_it' }
]
})
*/

5
src/plugins/vuelidate.js
View File

@@ -1,5 +0,0 @@
import Vuelidate from 'vuelidate'
export default ({ Vue }) => {
Vue.use(Vuelidate)
}

28
src/root/home/animate.js
View File

@@ -1,28 +0,0 @@
TweenMax.set('.vlogo', {
opacity: 1
})
TweenMax.set('#words', {
visibility: 'visible'
})
//repeating for all the birds, uses classes
exports.anima = () => {
alert("prova")
const tl = new TimelineMax({
repeat: 2,
yoyo: true
})
tl.add('start')
tl.to('.sun ', 1, {
rotation: -45,
y: -20,
transformOrigin: '50% 90%'
}, 'start')
tl.timeScale(2)
return tl
}

2
src/root/home/home.ts
View File

@@ -101,7 +101,7 @@ export default class Home extends Vue {
set conta(valore) {
GlobalStore.actions.setConta(valore)
let my = this.$q.i18n.lang
let my = this.$q.lang.isoName
this.showNotif(String(my))
}

7
src/root/home/home.vue
View File

@@ -35,11 +35,11 @@
-->
<div v-if="isInCostruction" style="margin: 5px;">
<q-alert
<q-banner
type="info"
class="q-mb-sm">
{{$t('msg.underconstruction')}}
</q-alert>
</q-banner>
<br>
</div>
<div v-else>
@@ -126,7 +126,6 @@
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-carrot"> </i><i aria-hidden="true"
class="q-icon fas fa-apple-alt"> </i><h4>
{{$t('homepage.freegas.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.freegas.descr')"></p></div>
@@ -181,7 +180,7 @@
<i aria-hidden="true" class="q-icon fab fa-facebook-f"> </i></a>
<a :href="TelegramSupport" target="_blank">
<i aria-hidden="true" class="q-icon fab fa-telegram dark"></i></a>
<i aria-hidden="true" class="q-icon fab fa-telegram"></i></a>
<!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->

98
src/root/home/old-home.vue
View File

@@ -1,98 +0,0 @@
<template>
<q-page class="landing text-white">
<section>
<div class="landing__hero">
<div style="height: 28vh;"></div>
<div class="landing__hero-content row justify-center q-gutter-xl">
<div class="row"><img src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg"
class="landing__logo"></div>
<div class="flex justify-end">
<div class="q-gutter-sm">
<div class="text-h1">
<div class="text-weight-bold">Quasar</div>
<div>Framework</div>
</div>
<div class="text-subtitle1 text-italic q-pl-sm">High performance, <strong>Material
Design
2</strong>, full front end stack with <strong>Vuejs</strong></div>
<div class="q-pt-md q-pl-sm">
<div class="landing__hero-btns q-gutter-md row items-center"><a tabindex="0"
type="button"
href="/introduction-to-quasar"
class="q-btn inline relative-position q-btn-item non-selectable q-btn--rectangle bg-white text-primary q-focusable q-hoverable q-btn--push">
<div class="q-focus-helper"></div>
<div class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
<div>About</div>
</div>
</a><a tabindex="0" type="button" href="/start"
class="q-btn inline relative-position q-btn-item non-selectable q-btn--rectangle bg-white text-primary q-focusable q-hoverable q-btn--push">
<div class="q-focus-helper"></div>
<div class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
<div>Get started</div>
</div>
</a>
<div class="text-body2">v1.0.0-beta.4</div>
</div>
</div>
</div>
</div>
</div>
<div class="landing__arrow absolute-bottom text-center"><i aria-hidden="true"
class="q-icon text-h2 text-white material-icons">expand_more</i>
</div>
</div>
<!--<div>-->
<!--<logo></logo>-->
<!--</div>-->
<!--<div>-->
<!--&lt;!&ndash; the row with a type of gutter &ndash;&gt;-->
<!--<q-alert-->
<!--avatar="statics/boy-avatar.png"-->
<!--color="primary"-->
<!--message="Jack"-->
<!--detail="Per un mondo più Consapevole"-->
<!--/>-->
<!--</div>-->
<!--<div>-->
<!--<q-btn v-if="getPermission() !== 'granted'" class="enable-notifications" color="primary" rounded-->
<!--size="lg"-->
<!--icon="notifications" @click="askfornotification" :label="$t('notification.ask')"/>-->
<!--&lt;!&ndash;<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>&ndash;&gt;-->
<!--&lt;!&ndash;<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>&ndash;&gt;-->
<!--</div>-->
<!--<div>-->
<!--<q-chip square color="secondary">-->
<!--{{$t('notification.status')}}-->
<!--</q-chip>-->
<!--</div>-->
<!--<div>-->
<!--<q-field-->
<!--v-if="getPermission() === 'granted'"-->
<!--icon="notifications"-->
<!--:label="$t('notification.titlegranted')"-->
<!--helper="Stato Notifiche">-->
<!--</q-field>-->
<!--<q-field-->
<!--v-if="NotServiceWorker()"-->
<!--icon="notifications"-->
<!--label="Service Worker not present"-->
<!--&gt;-->
<!--</q-field>-->
<!--</div>-->
</section>
</q-page>
</template>
<script lang="ts" src="./home.ts">
</script>
<style lang="scss" scoped>
@import './home.scss';
</style>

19
src/store/Modules/UserStore.ts
View File

@@ -225,7 +225,7 @@ namespace Actions {
async function resetpwd(context, paramquery: IUserState) {
let usertosend = {
const usertosend = {
keyappid: process.env.PAO_APP_ID,
idapp: process.env.APP_ID,
email: paramquery.email,
@@ -573,14 +573,13 @@ namespace Actions {
export const actions = {
resetpwd: b.dispatch(resetpwd),
requestpwd: b.dispatch(requestpwd),
vreg: b.dispatch(vreg),
signup: b.dispatch(signup),
signin: b.dispatch(signin),
autologin_FromLocalStorage: b.dispatch(autologin_FromLocalStorage),
logout: b.dispatch(logout),
autologin_FromLocalStorage: b.dispatch(autologin_FromLocalStorage)
requestpwd: b.dispatch(requestpwd),
resetpwd: b.dispatch(resetpwd),
signin: b.dispatch(signin),
signup: b.dispatch(signup),
vreg: b.dispatch(vreg)
}
}
@@ -589,9 +588,9 @@ const UserModule = {
get state() {
return stateGetter()
},
actions: Actions.actions,
getters: Getters.getters,
mutations: Mutations.mutations,
actions: Actions.actions
mutations: Mutations.mutations
}
export default UserModule

8
src/store/Modules/tools.ts
View File

@@ -77,7 +77,7 @@ export const tools = {
value: 0,
icon: 'expand_more'
}],
'esEs': [
'es': [
{
id: 1,
label: 'Alta',
@@ -178,7 +178,7 @@ export const tools = {
checked: false
}
],
'esEs': [
'es': [
{
id: 10,
label: '',
@@ -263,7 +263,7 @@ export const tools = {
icon: 'rowing',
},
],
'esEs': [
'es': [
{
id: 10,
label: 'Mostrar Tareas',
@@ -305,7 +305,7 @@ export const tools = {
checked: true
}
],
'esEs': [
'es': [
{
id: 10,
label: 'Mostrar los ultimos N completados',

7
src/views/Auth.vue
View File

@@ -2,8 +2,9 @@
<div id="firebaseui-auth-container"></div>
</template>
<script>
export default {
<script lang="ts" >
import Vue from 'vue'
export default Vue.extend({
name: 'auth',
mounted () {
var uiConfig = {
@@ -16,7 +17,7 @@
//var ui = new firebaseui.auth.AuthUI(firebase.auth())
//ui.start('#firebaseui-auth-container', uiConfig)
}
}
})
</script>
<style lang="css">

7
src/views/AuthSuccess.vue
View File

@@ -13,8 +13,9 @@
</div>
</template>
<script>
export default {
<script lang="ts" >
import Vue from 'vue'
export default Vue.extend({
data () {
return {
photo: '',
@@ -27,5 +28,5 @@
created () {
},
}
})
</script>

7
src/views/Error404.vue
View File

@@ -24,8 +24,9 @@
</div>
</template>
<script type="text/javascript">
export default {
<script lang="ts" type="text/javascript">
import Vue from 'vue'
export default Vue.extend({
data () {
return {
canGoBack: window.history.length > 1
@@ -36,7 +37,7 @@ export default {
window.history.go(-1)
}
}
}
})
</script>
<style lang="stylus">

96
src/views/dashboard/one/cardChart.vue
View File

@@ -1,96 +0,0 @@
<template>
<div class="card bg-white">
<div class="card-title bg-teal text-white">
{{cardTitle}}
<div class=" float-right">
<q-fab icon="keyboard_arrow_left" direction="left" classNames="primary">
</q-fab>
<button class="primary circular raised gt-sm inline" @click="toImage()">
<i>portrait</i>
</button>
</div>
</div>
<div class="card-content">
<canvas ref="chart"></canvas>
</div>
</div>
</template>
<script type="text/javascript">
/* eslint-disable */
import Chart from 'chart.js'
export default {
data () {
return {
type: 'horizontalBar',
chart: '',
}
},
props: {
data: {
type: Object,
required: true
},
cardTitle: {
default () { return 'Graph'}
}
},
watch: {
data () {
this.startChart()
},
type () {
this.chart.destroy()
this.startChart()
}
},
computed: {
dataForChart () {
return {
labels: Object.keys(this.data),
datasets: [{
data: Object.values(this.data),
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
]
}]
}
}
},
methods: {
startChart () {
let axesStartFromZero = [{
ticks: {
beginAtZero:true
}
}]
this.chart = new Chart(this.$refs.chart,
{
type: this.type,
data: this.dataForChart,
options: {
legend: {
display: false
},
scales: {
yAxes: axesStartFromZero,
xAxes: axesStartFromZero
}
}
})
},
toImage () {
window.open(this.chart.toBase64Image());
}
}
}
</script>
<style scoped>
</style>

75
src/views/dashboard/one/cardTodo.vue
View File

@@ -1,75 +0,0 @@
<template>
<div class="card bg-white">
<div class="card-title bg-teal text-white">
{{cardTitle}}
<div class=" float-right">
</div>
</div>
<div class="card-content">
<div class="flex">
<div class="list item-inset-delimiter auto">
<q-infinite-scroll :handler="loadMore" :offset="7">
<!-- Content, in this case some <p> tags -->
<div class="item" v-for="(todo, index) in showingData">
<div class="item-primary">{{index + 1}}</div>
<div class="item-content has-secondary">
<span v-show="todo.completed" class="completed-line">{{todo.title}}</span>
<input v-show="!todo.completed" v-model.lazy="todo.title" class="fit" @change="changeTitle(todo)">
</div>
<q-toggle class="item-secondary"
icon="done"
@input="completeTodo(todo)"
v-model="todo.completed"
></q-toggle>
</div>
</q-infinite-scroll>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
/* eslint-disable */
import Chart from 'chart.js'
export default {
mounted () {
},
data () {
return {
todos: [],
actualMaxPosition: 10
}
},
props: ['cardTitle', 'api'],
watch: {
},
computed: {
showingData () {
return this.todos.slice(0, this.actualMaxPosition)
}
},
methods: {
loadMore (index, done) {
setTimeout(() => {
this.actualMaxPosition += 9
done()
}, 1000)
},
completeTodo (todo) {
},
changeTitle (todo) {
}
}
}
</script>
<style scoped>
input {
padding: 7px 0;
font-size: 16px;
}
.completed-line {
text-decoration: line-through;
}
</style>

49
src/views/dashboard/one/cardTotal.vue
View File

@@ -1,49 +0,0 @@
<template>
<div class="card text-white" :class="backgroundColor">
<div class="card-content ">
<div class="row">
<div class="width-1of3">
<i>{{iconName}}</i>
</div>
<div class="width-2of3">
<p class="text-italic ">{{title}}</p>
<h5 ref="number">
</h5>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import CountUp from 'countup.js'
export default {
props: ['title', 'total', 'backgroundColor', 'iconName'],
mounted () {
this.countUp.start()
},
computed: {
countUp () {
return new CountUp(this.$refs.number, 0, this.total, 0, 2.5, this.options)
}
},
watch: {
total () {
this.countUp.start()
}
},
data () {
return {
options: {
separator: '.'
}
}
}
}
</script>
<style scoped>
i {
font-size: 54px;
}
</style>

91
src/views/dashboard/one/dashboard.vue
View File

@@ -1,91 +0,0 @@
<template>
<div class="layout-padding ">
<div class="flex wrap gutter">
<div class="width-1of3 sm-auto">
<cardTotal
title="Total Posts"
background-color="bg-teal-9"
icon-name="local_post_office"
:total="totalPosts">
</cardTotal>
</div>
<div class="width-1of3 sm-auto">
<cardTotal
title="Total comments"
background-color="bg-teal-7"
icon-name="comment"
:total="totalComments">
</cardTotal>
</div>
<div class="width-1of3 sm-auto">
<cardTotal
title="Static total"
background-color="bg-teal-5"
icon-name="repeat_one"
:total="50004">
</cardTotal>
</div>
</div>
<div class="flex wrap gutter">
<div class="width-1of2 lg-width-1of3 sm-auto">
<card-chart
card-title="Total Graph"
:data="dataForGraph"
></card-chart>
</div>
<div class="auto">
<knob-statistics
card-title="General statistics">
</knob-statistics>
</div>
</div>
<div class="flex wrap gutter">
<div class="width-4of5 sm-width-1of1">
<card-todo
card-title="Generic todos"
api="todos">
</card-todo>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import cardChart from './cardChart.vue'
import cardTotal from './cardTotal.vue'
import cardTodo from './cardTodo.vue'
import knobStatistics from './knobStatistics.vue'
import { mapActions } from 'vuex'
import * as types from '../../../store/mutation-types'
export default {
mounted () {
// Axios.all not working
},
data () {
return {
totalPosts: 0,
totalComments: 0,
totalTodos: 0
}
},
computed: {
dataForGraph () {
return {
posts: this.totalPosts,
todos: this.totalTodos,
comments: this.totalComments
}
}
},
methods: {
...mapActions("glob", {'setPosts': types.SET_POSTS})
},
components: {
cardTotal,
cardChart,
cardTodo,
knobStatistics
}
}
</script>
<style></style>

41
src/views/dashboard/one/knobStatistics.vue
View File

@@ -1,41 +0,0 @@
<template>
<div>
</div>
</template>
<script type="text/javascript">
/* eslint-disable */
//import { Toast } from 'quasar'
export default {
data () {
return {
minExpenses: 0,
minIncome: 0,
maxIncome: 5000,
currentIncome: 998,
currentExpenses: 125,
doubleRangeMinMax: {
min: 0,
max: 5000
}
}
},
watch: {
currentIncome () {
if (this.currentIncome < this.currentExpenses){
this.currentExpenses = this.currentIncome
//Toast.create.negative({html: `You're in financial trouble.`})
}
}
},
computed: {
maxExpenses () {
return this.currentIncome
}
},
props: ['cardTitle'],
}
</script>
<style scoped>
</style>

66
src/views/dashboard/one/tagKnob.vue
View File

@@ -1,66 +0,0 @@
<template>
<div class="text-center">
<span class="tag label text-white rotate rotate-270 shadow-2" :class="tagClasses">
<q-knob
class="rotate-90"
v-model="value"
:size="size"
style="font-size: 1.9rem"
color="#fff"
:track-color="trackColor"
:min="min"
:max="max"
readonly
:placeholder="fullPlaceHolder"
></q-knob>
</span>
<span class="title block" :style="{color: titleColor}">{{title}}</span>
</div>
</template>
<script type="text/javascript">
export default {
props: {
value: {
required: true
},
size: {
required: true
},
min: {
type: Number,
required: true
},
max: {
type: Number,
required: true
},
title: {},
titleColor: {},
tagClasses: {},
trackColor: {},
placeholderBefore: {}
},
computed: {
fullPlaceHolder () {
return this.placeholderBefore ? `${this.placeholderBefore}${this.value}` : this.value
}
},
data () {
return {}
}
}
</script>
<style scoped>
.label.tag{
margin-left: 0;
padding-left: 1rem;
padding-right: 0.8rem;
}
.title {
margin-top: 24px;
margin-bottom: 20px;
}
</style>

107
src/views/form/_examples/advancedFormOne/advancedFormOne.vue
View File

@@ -1,107 +0,0 @@
<template>
<div>
<div class="layout-padding ">
<div class="card">
<div class="card-title bg-teal text-white">
Choose photos to reveal of the user
</div>
<div class="card-content bg-white adv-form-one">
<q-stepper ref="stepper" @step="stepNumber => { currentStep = stepNumber }">
<q-step title="Find a user by username">
<div class="flex wrap gutter">
<div class="width-2of5 sm-width-1of1">
<e-input
label="User Name"
v-model="userName"
:validation="$v.userName"
:validation-messages="validationMessages.userName"
:value="userName"
></e-input>
<button class="teal raised outline" @click="findUser()">Search</button>
</div>
<div class="width-1of2 gt-width-3of5">
<card-user-data :user-data="userData" v-model="selectedAlbum"></card-user-data>
</div>
</div>
<div class="flex">
<button class="orange" v-if="selectedAlbum" @click="$refs.stepper.nextStep()">Continue</button>
</div>
</q-step>
<q-step title="Choose photos">
<card-data-table :selected-album="selectedAlbum" v-on:selectedRows="populatePhotos"></card-data-table>
<div class="flex wrap gutter">
<div class="width-1of4 sm-width-3of3">
<button class="orange fit" @click="$refs.stepper.previousStep()">Back</button>
</div>
<div class="width-1of4 sm-width-3of3" v-show="selectedPhotos.length > 0">
<button class="green fit" @click="finish()">Preview</button>
</div>
</div>
</q-step>
</q-stepper>
</div>
</div>
</div>
<q-modal ref="previewModal" class="minimized">
<q-gallery-slider :src="photosForGalery" ></q-gallery-slider>
</q-modal>
</div>
</template>
<script type="text/javascript">
import { required } from 'vuelidate/lib/validators'
import eInput from '../../embeeded/eInput.vue'
import cardUserData from './cardUserData.vue'
//import cardDataTable from './cardDataTable.vue'
export default {
name: 'AdvancedFormOne',
data () {
return {
userName: 'Bret',
userData: {},
currentStep: '1',
selectedAlbum: '',
selectedPhotos: [],
validationMessages: {
userName: {
required: 'Username is required.'
}
}
}
},
validations: {
userName: {
required
}
},
computed: {
photosForGalery () {
let galery = []
this.selectedPhotos.forEach(photo => { galery.push(photo.data.thumbnailUrl) })
return galery
}
},
components: {
eInput,
cardUserData,
//cardDataTable
},
methods: {
finish () {
this.$refs.previewModal.open()
},
findUser () {
this.$http.jsonplaceholder
.get(`users?username=${this.userName}`)
.then(response => { this.userData = response.data[0] })
this.$v.$touch()
},
populatePhotos (photos) {
photos.forEach(item => { this.selectedPhotos.push(item) })
}
}
}
</script>
<style scoped>
</style>

70
src/views/form/_examples/advancedFormOne/cardUserData.vue
View File

@@ -1,70 +0,0 @@
<template>
<div class="card" v-if="userData.name">
<div class="card-content">
<h6>{{userData.name}}</h6>
{{userData.email}}
<p class="caption">Choose one of the user Albums</p>
<div class="list">
<label class="item two-lines" v-for="album in filteredAlbums">
<div class="item-primary">
<q-radio @input="change(album)" v-model="selectedAlbum" :val="album.id"></q-radio>
</div>
<div class="item-content post-data">
<div class="ellipsis">{{album.title}}</div>
</div>
</label>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
props: {
userData: {
type: Object,
required: true
}
},
data () {
return {
userAlbums: [],
selectedAlbum: ''
}
},
computed: {
filteredAlbums () {
return this.userAlbums.slice(0, 3)
}
},
methods: {
change (album) {
this.$emit('input', album)
}
},
watch: {
userData () {
this.$http.jsonplaceholder
.get(`albums?userId=${this.userData.id}`)
.then(response => { this.userAlbums = response.data })
}
}
}
</script>
<style scoped>
@media screen and (min-width: 600px) {
.post-data{
max-width: 110px;
}
}
@media screen and (min-width: 920px) {
.post-data{
max-width: 340px;
}
}
@media screen and (min-width: 1280px) {
.post-data{
max-width: 540px;
}
}
</style>

112
src/views/form/embeeded/eDateTime.vue
View File

@@ -1,112 +0,0 @@
<template>
<div>
<div class="floating-label" :class="labelColor">
<q-datetime type="datetime"
class="full-width"
:class="borderColor"
:label="label"
:value="value"
:format="format"
@input="change($event)"
></q-datetime>
<transition-group name="slide-fade">
<span class="label text-red"
v-for="(key, index) in messageKeys"
v-show="!validation[key] && validation.$dirty"
:key="index">
{{validationMessages[key]}}
</span>
</transition-group>
<transition name="fade" mode="out-in">
<i v-show="validAndDirty" class="text-green" >check</i>
</transition>
<transition name="fade" mode="out-in">
<i v-show="invalidAndDirty" class="text-red">clear</i>
</transition>
</div>
</div>
</template>
<script type="text/javascript">
export default {
props: {
format: {
type: String
},
validation: {
type: Object,
required: true
},
value: {
required: true
},
validationMessages: {},
label: {}
},
computed: {
messageKeys () {
return Object.keys(this.validationMessages)
},
validAndDirty () {
return !this.validation.$invalid && this.validation.$dirty
},
invalidAndDirty () {
return this.validation.$invalid && this.validation.$dirty
},
labelColor () {
return this.validAndDirty ? 'label-success' : '' ||
this.invalidAndDirty ? 'label-error animate-pop' : ''
},
borderColor () {
return this.validAndDirty ? 'has-success' : '' ||
this.invalidAndDirty ? 'has-error' : ''
},
shakeDiv () {
return this.invalidAndDirty ? 'animate-pop' : ''
}
},
methods: {
change (value) {
console.log(value)
this.validation.$touch()
this.$emit('input', value)
}
}
}
</script>
<style scoped>
.has-success {
border-bottom: 2px solid #4caf50 !important;
}
i {
position: absolute;
top: 20px;
right: 7px;
font-size: 22px;
}
.floating-label {
min-height: 81px;
}
.floating-label span .label{
padding: 0 0.3rem 0 0;
font-size: 13px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to, .fade-leave-active {
opacity: 0;
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all 0.7s ease;
}
.slide-fade-enter{
transform: translateY(-10px);
opacity: 0;
}
.slide-fade-leave-active{
transform: translateY(-7px);
opacity: 0;
}
</style>

108
src/views/form/embeeded/eInput.vue
View File

@@ -1,108 +0,0 @@
<template>
<div>
<div class="floating-label" :class="shakeDiv">
<input required class="full-width" :class="borderColor"
:value="value"
@input="change($event.target.value)">
<label :class="labelColor">{{label}}</label>
<transition-group name="slide-fade">
<span class="label text-red"
v-for="(key, index) in messageKeys"
v-show="!validation[key] && validation.$dirty"
:key="index">
{{validationMessages[key]}}
</span>
</transition-group>
<transition name="fade" mode="out-in">
<i v-show="validAndDirty" class="text-green" >check</i>
</transition>
<transition name="fade" mode="out-in">
<i v-show="invalidAndDirty" class="text-red">clear</i>
</transition>
</div>
</div>
</template>
<script type="text/javascript">
export default {
props: {
validation: {
type: Object,
required: true
},
value: {
required: true
},
validationMessages: {},
label: {}
},
computed: {
messageKeys () {
return Object.keys(this.validationMessages)
},
validAndDirty () {
return !this.validation.$invalid && this.validation.$dirty
},
invalidAndDirty () {
return this.validation.$invalid && this.validation.$dirty
},
labelColor () {
return this.validAndDirty ? 'text-green' : '' ||
this.invalidAndDirty ? 'text-red ' : ''
},
borderColor () {
return this.validAndDirty ? 'has-success' : '' ||
this.invalidAndDirty ? 'has-error' : ''
},
shakeDiv () {
return this.invalidAndDirty ? 'animate-pop' : ''
}
},
data () {
return {}
},
methods: {
change (value) {
this.validation.$touch()
this.$emit('input', value)
}
}
}
</script>
<style scoped>
.has-success {
border-bottom: 2px solid #4caf50 !important;
}
i {
position: absolute;
top: 20px;
right: 7px;
font-size: 22px;
}
.floating-label {
min-height: 81px;
}
.floating-label span .label{
padding: 0 0.3rem 0 0;
font-size: 13px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to, .fade-leave-active {
opacity: 0;
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all 0.7s ease;
}
.slide-fade-enter{
transform: translateY(-10px);
opacity: 0;
}
.slide-fade-leave-active{
transform: translateY(-7px);
opacity: 0;
}
</style>

115
src/views/form/embeeded/eSelect.vue
View File

@@ -1,115 +0,0 @@
<template>
<div>
<div class="floating-label" :class="labelColor">
<q-select :type="type"
class="full-width"
:class="borderColor"
:options="options"
:label="label"
:value="value"
@input="change($event)"
></q-select>
<transition-group name="slide-fade">
<span class="label text-red"
v-for="(key, index) in messageKeys"
v-show="!validation[key] && validation.$dirty"
:key="index">
{{validationMessages[key]}}
</span>
</transition-group>
<transition name="fade" mode="out-in">
<i v-show="validAndDirty" class="text-green" >check</i>
</transition>
<transition name="fade" mode="out-in">
<i v-show="invalidAndDirty" class="text-red">clear</i>
</transition>
</div>
</div>
</template>
<script type="text/javascript">
export default {
props: {
validation: {
type: Object,
required: true
},
value: {
required: true
},
type: {
required: true
},
validationMessages: {},
label: {},
options: {}
},
computed: {
messageKeys () {
return Object.keys(this.validationMessages)
},
validAndDirty () {
return !this.validation.$invalid && this.validation.$dirty
},
invalidAndDirty () {
return this.validation.$invalid && this.validation.$dirty
},
labelColor () {
return this.validAndDirty ? 'label-success' : '' ||
this.invalidAndDirty ? 'label-error animate-pop' : ''
},
borderColor () {
return this.validAndDirty ? 'has-success' : '' ||
this.invalidAndDirty ? 'has-error' : ''
}
},
data () {
return {}
},
methods: {
change (value) {
this.validation.$touch()
this.$emit('input', value)
}
}
}
</script>
<style scoped>
.has-success {
border-bottom: 2px solid #4caf50 !important;
}
.label-success .q-picker-textfield-label {
color: #4caf50;
}
i {
position: absolute;
top: 20px;
right: 7px;
font-size: 22px;
}
.floating-label {
min-height: 81px;
}
.floating-label span .label{
padding: 0 0.3rem 0 0;
font-size: 13px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to, .fade-leave-active {
opacity: 0;
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all 0.7s ease;
}
.slide-fade-enter{
transform: translateY(-10px);
opacity: 0;
}
.slide-fade-leave-active{
transform: translateY(-7px);
opacity: 0;
}
</style>

119
src/views/form/embeeded/embeeded.vue
View File

@@ -1,119 +0,0 @@
<template>
<div>
<div class="layout-padding ">
<div class="flex wrap gutter">
<div class="gt-md-width-1of3 width-1of1">
<div class="card">
<div class="card-title bg-teal text-white">
Input
</div>
<div class="card-content bg-white">
<e-input
label="Name"
v-model="name"
:validation="$v.name"
:validation-messages="validationMessages.name"
:value="name"
></e-input>
</div>
</div>
</div>
<div class="gt-md-width-1of3 width-1of1">
<div class="card">
<div class="card-title bg-teal text-white">
Select
</div>
<div class="card-content bg-white">
<e-select
type="list"
label="Authentication"
v-model="authentication"
:validation="$v.authentication"
:validation-messages="validationMessages.authentication"
:value="authentication"
:options="options"
></e-select>
</div>
</div>
</div>
<div class="gt-md-width-1of3 width-1of1">
<div class="card">
<div class="card-title bg-teal text-white">
DateTime
</div>
<div class="card-content bg-white">
<e-date-time
format="YYYY/MM/DD"
label="Date of birth"
v-model="dateOfBirth"
:validation="$v.dateOfBirth"
:validation-messages="validationMessages.dateOfBirth"
:value="dateOfBirth"
></e-date-time>
</div>
</div>
</div>
</div>
<div class="flex wrap justify-center">
<div class="width-1of3">
<button class="teal raised outline fit" @click="$v.$touch()">Try Submit</button>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import { required, minLength, alpha } from 'vuelidate/lib/validators'
import eInput from './eInput.vue'
import eSelect from './eSelect.vue'
import eDateTime from './eDateTime.vue'
export default {
name: 'EmbeededValidationsElements',
mounted () {
},
data () {
return {
name: '',
authentication: '',
dateOfBirth: '',
validationMessages: {
name: {
required: 'Name is required.',
minLength: 'Minimum 5 characters.',
alpha: 'Only letters.'
},
authentication: {
required: 'Authentication is required.'
},
dateOfBirth: {
required: 'Date of birth is required.'
}
},
options: [
{ label: 'Google', value: 'google' },
{ label: 'Facebook', value: 'facebook' },
{ label: '', value: '' }
]
}
},
validations: {
name: {
required,
minLength: minLength(5),
alpha
},
authentication: {
required
},
dateOfBirth: {
required
}
},
components: {
eInput,
eSelect,
eDateTime
}
}
</script>
<style scoped></style>

98
src/views/form/simpleForm/modalAdress.vue
View File

@@ -1,98 +0,0 @@
<template>
<q-modal ref="modal" @open="startMap()">
<div class="card fit">
<div class="card-title bg-teal text-white">
Adress of {{user.name}}
</div>
<div class="card-content bg-white">
<div id="map"></div>
<div class="wrap gutter">
<div class="width-1of1">
<div class="floating-label">
<input required class="full-width" v-model="user.address.street">
<label>Street</label>
</div>
</div>
<div class="width-1of1">
<div class="floating-label">
<input required class="full-width" v-model="user.address.suite">
<label>Suite</label>
</div>
</div>
<div class="width-1of1">
<div class="floating-label">
<input required class="full-width" v-model="user.address.city">
<label>City</label>
</div>
</div>
<div class="width-1of1">
<div class="floating-label">
<input required class="full-width" v-model="user.address.zipcode">
<label>Zipcode</label>
</div>
</div>
</div>
</div>
</div>
<div class="card-actions justify-center flex">
<div class="width-1of3 sm-width-3of3">
<button class="primary outline raised fit" @click="save()">Save</button>
</div>
<div class="width-1of3 sm-width-3of3">
<button class="teal outline raised fit" @click="$refs.modal.close()">Close</button>
</div>
</div>
</q-modal>
</template>
<script type="text/javascript">
/* eslint-disable */
//import { Toast } from 'quasar'
//import GMaps from 'gmaps'
export default {
data () {
return {
map: ''
}
},
props: ['user'],
methods: {
save () {
this.$http.jsonplaceholder
.patch(`users/${this.user.id}`, {address: this.user.address})
.then(response => {
})
},
startMap () {
let vm = this
/*
this.map = new GMaps({
el: '#map',
lat: parseFloat(this.user.address.geo.lat),
lng: parseFloat(this.user.address.geo.lng),
zoom: 3,
dblclick (e) {
vm.map.removeMarkers()
vm.addMarker(e.latLng.lat(), e.latLng.lng())
}
})
this.addMarker(this.user.address.geo.lat, this.user.address.geo.lng)
*/
},
addMarker (lat, lng) {
this.map.addMarker({
lat: parseFloat(lat),
lng: parseFloat(lng)
})
}
}
}
</script>
<style scoped>
#map {
width: 300px !important;
height: 300px !important;
}
</style>

92
src/views/form/simpleForm/simpleForm.vue
View File

@@ -1,92 +0,0 @@
<template>
<div>
<div class="layout-padding ">
<div class="card">
<div class="card-title bg-teal text-white">
Search Users
</div>
<div class="card-content bg-white">
<div class="flex">
<div class="width-2of3 gt-bg-width-1of3 sm-auto">
<q-autocomplete v-model="terms" :delay="0" @search="search" :max-results="4" @selected="selected">
<q-search v-model="terms" placeholder="Search by name"></q-search>
</q-autocomplete>
</div>
</div>
<q-transition name="slide">
<user-form :user="selectedUser" v-show="selectedUser.name"></user-form>
</q-transition>
</div>
<q-transition name="slide">
<div class="card-actions justify-center flex" v-show="selectedUser.name">
<div class="width-1of3 sm-width-3of3">
<button class="primary raised outline fit" @click="save()">Save</button>
</div>
<div class="width-1of3 sm-width-3of3">
<button class="teal raised outline fit" @click="$refs.modal.$children[0].open()">Check Adress</button>
</div>
</div>
</q-transition>
</div>
</div>
<modal-adress :user="selectedUser" ref="modal"></modal-adress>
</div>
</template>
<script type="text/javascript">
import userForm from './userForm.vue'
import modalAdress from './modalAdress.vue'
export default {
name: 'Form',
mounted () {
this.getUsers()
},
data () {
return {
terms: '',
users: [],
selectedUser: { address: {} }
}
},
computed: {
usersParsed () {
return this.users.map(user => {
return {
allData: user,
label: user.name,
secondLabel: user.email,
value: user.name
}
})
}
},
components: {
userForm,
modalAdress
},
methods: {
search (terms, done) {
setTimeout(() => {
done(Utils.filter(terms, {field: 'value', list: this.usersParsed}))
}, 500)
},
getUsers () {
this.$http.jsonplaceholder
.get('users')
.then(response => { this.users = response.data })
},
selected (user) {
this.selectedUser = user.allData
},
save () {
this.$http.jsonplaceholder
.put(`users/${this.selectedUser.id}`, this.selectedUser)
.then(response => { })
}
}
}
</script>
<style scoped>
#map {
height: 180px;
}
</style>

46
src/views/form/simpleForm/userForm.vue
View File

@@ -1,46 +0,0 @@
<template>
<div>
<div class="flex wrap gutter">
<div class="width-1of3 sm-width-1of1">
<div class="floating-label">
<input required class="full-width" v-model="user.username">
<label>Username</label>
</div>
</div>
<div class="width-1of3 sm-width-1of1">
<div class="floating-label">
<input required class="full-width" v-model="user.phone">
<label>Phone</label>
</div>
</div>
</div>
<div class="flex wrap gutter">
<div class="width-1of3 sm-width-1of1">
<div class="floating-label">
<input required class="full-width" v-model="user.website">
<label>Website</label>
</div>
</div>
<div class="width-1of3 sm-width-1of1">
<div class="floating-label">
<input required class="full-width" v-model="user.email">
<label>Email</label>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {}
},
props: ['user']
}
</script>
<style scoped>
.flex {
margin-top: 1%;
}
</style>

90
src/views/login/logoData.js
View File

@@ -1,90 +0,0 @@
/* eslint-disable */
export default {
Digitalizer: `<g>
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M259.476,280.364V247.5c0-12.958-10.542-23.5-23.5-23.5s-23.5,10.542-23.5,23.5v29.672 c0,35.757-13.173,70.087-37.094,96.665l-32.981,36.646c-2.771,3.079-2.521,7.821,0.558,10.593c3.078,2.771,7.82,2.521,10.592-0.558 l32.981-36.646c26.403-29.338,40.944-67.231,40.944-106.7V247.5c0-4.687,3.813-8.5,8.5-8.5s8.5,3.813,8.5,8.5v32.864 c0,44.003-16.301,86.167-45.901,118.727l-32.149,35.364c-2.786,3.064-2.56,7.809,0.505,10.595c1.437,1.307,3.242,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l32.148-35.364C241.789,373.854,259.476,328.106,259.476,280.364z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M291.476,247.5c0-30.603-24.897-55.5-55.5-55.5s-55.5,24.897-55.5,55.5v29.672c0,27.839-10.256,54.566-28.879,75.258 l-23.447,26.053c-2.771,3.079-2.521,7.821,0.558,10.593c3.079,2.771,7.82,2.519,10.592-0.558l23.447-26.053 c21.106-23.451,32.73-53.742,32.73-85.293V247.5c0-22.332,18.168-40.5,40.5-40.5c22.332,0,40.5,18.168,40.5,40.5v32.864 c0,51.979-19.256,101.789-54.223,140.252l-27.125,29.839c-2.787,3.064-2.561,7.809,0.504,10.595c1.437,1.307,3.242,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l27.126-29.839c37.481-41.23,58.123-94.622,58.123-150.342V247.5z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M323.476,247.5c0-48.248-39.252-87.5-87.5-87.5s-87.5,39.252-87.5,87.5v29.672c0,19.92-7.339,39.045-20.665,53.851 l-21.112,23.458c-2.771,3.079-2.521,7.821,0.558,10.593c3.078,2.771,7.821,2.519,10.592-0.558l21.112-23.458 c15.809-17.565,24.515-40.254,24.515-63.886V247.5c0-39.977,32.523-72.5,72.5-72.5s72.5,32.523,72.5,72.5v32.864 c0,59.958-22.212,117.412-62.545,161.777l-7.507,8.258c-2.786,3.065-2.56,7.809,0.505,10.595c1.437,1.306,3.243,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l7.506-8.258c42.848-47.133,66.446-108.169,66.446-171.867V247.5z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M116.476,247.5c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5c0-25.255,9.169-49.651,25.819-68.695 c16.495-18.867,39.134-31.205,63.746-34.741c4.1-0.589,6.946-4.391,6.357-8.49c-0.589-4.1-4.394-6.942-8.49-6.357 c-28.16,4.046-54.052,18.15-72.906,39.716C126.962,190.71,116.476,218.613,116.476,247.5z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M131.476,277.172c0-4.143-3.358-7.5-7.5-7.5s-7.5,3.357-7.5,7.5c0,12.002-4.421,23.523-12.449,32.443l-18.779,20.867 c-2.771,3.078-2.521,7.82,0.558,10.592c1.434,1.29,3.227,1.925,5.015,1.925c2.052,0,4.097-0.838,5.577-2.483l18.779-20.866 C125.687,307.971,131.476,292.886,131.476,277.172z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M340.755,344.123c-4.009-1.044-8.105,1.351-9.155,5.357c-2.769,10.579-6.213,21.096-10.24,31.258 c-1.526,3.851,0.359,8.21,4.21,9.735c0.907,0.359,1.841,0.529,2.761,0.529c2.985,0,5.808-1.795,6.975-4.739 c4.249-10.725,7.884-21.822,10.806-32.986C347.16,349.271,344.761,345.172,340.755,344.123z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M315.791,158.632c-3.081-2.771-7.823-2.517-10.592,0.563s-2.517,7.822,0.563,10.591 c22.061,19.832,34.713,48.157,34.713,77.714v32.864c0,12.473-0.86,25.042-2.557,37.359c-0.565,4.104,2.303,7.888,6.406,8.453 c0.347,0.048,0.692,0.071,1.033,0.071c3.688,0,6.903-2.722,7.42-6.478c1.79-12.993,2.698-26.251,2.698-39.406V247.5 C355.476,213.695,341.011,181.304,315.791,158.632z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M280.729,153.076c1.041,0.496,2.138,0.73,3.219,0.73c2.803,0,5.492-1.579,6.777-4.278c1.781-3.739,0.192-8.215-3.547-9.995 c-10.806-5.145-22.291-8.616-34.136-10.317c-4.106-0.585-7.901,2.258-8.49,6.357s2.257,7.901,6.357,8.49 C261.257,145.55,271.289,148.582,280.729,153.076z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M235.976,96c-2.806,0-5.644,0.078-8.437,0.232c-4.136,0.228-7.304,3.766-7.076,7.901c0.229,4.136,3.763,7.321,7.902,7.075 c2.519-0.139,5.079-0.209,7.61-0.209c75.266,0,136.5,61.233,136.5,136.5v32.864c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5V247.5 C387.476,163.963,319.513,96,235.976,96z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M153.972,136.693c1.477,0,2.97-0.436,4.275-1.343c12.478-8.677,26.182-15.155,40.733-19.258 c3.987-1.124,6.308-5.268,5.184-9.254s-5.269-6.304-9.254-5.184c-16.16,4.556-31.376,11.749-45.226,21.379 c-3.401,2.365-4.241,7.039-1.876,10.439C149.265,135.57,151.599,136.693,153.972,136.693z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M99.476,277.172V247.5c0-34.89,13.213-68.118,37.205-93.565c2.841-3.014,2.702-7.76-0.312-10.602 s-7.761-2.701-10.602,0.312C99.14,171.886,84.476,208.77,84.476,247.5v29.672c0,4.083-1.504,8.002-4.234,11.035l-9.248,10.275 c-2.771,3.079-2.521,7.821,0.558,10.592c1.433,1.291,3.227,1.926,5.015,1.926c2.052,0,4.096-0.837,5.577-2.482l9.248-10.275 C96.605,292.449,99.476,284.966,99.476,277.172z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M409.951,189.104c-8.226-24.446-21.299-46.531-38.856-65.642c-2.803-3.05-7.547-3.252-10.597-0.449 c-3.05,2.803-3.251,7.547-0.449,10.598c16.127,17.554,28.134,37.834,35.686,60.276c1.054,3.133,3.976,5.11,7.107,5.11 c0.793,0,1.6-0.127,2.393-0.394C409.16,197.282,411.272,193.029,409.951,189.104z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M295.247,73.822c-3.917-1.341-8.183,0.748-9.524,4.668c-1.341,3.919,0.749,8.183,4.668,9.523 c16.538,5.659,32.065,13.857,46.15,24.369c1.347,1.005,2.92,1.489,4.48,1.489c2.286,0,4.544-1.041,6.017-3.015 c2.478-3.319,1.794-8.019-1.525-10.496C330.176,88.916,313.264,79.986,295.247,73.822z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M119.442,125.908C150.991,95.659,192.377,79,235.976,79c8.096,0,16.237,0.583,24.196,1.731 c4.103,0.598,7.903-2.252,8.495-6.352c0.592-4.1-2.251-7.902-6.351-8.494C253.648,64.635,244.786,64,235.976,64 c-47.487,0-92.56,18.141-126.915,51.081c-34.248,32.838-54.277,76.905-56.397,124.084c-0.186,4.138,3.018,7.644,7.155,7.829 c0.115,0.006,0.229,0.008,0.343,0.008c3.987,0,7.306-3.14,7.487-7.163C69.594,196.527,87.988,156.066,119.442,125.908z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M235.976,32c-16.772,0-33.485,1.944-49.674,5.778c-4.031,0.954-6.524,4.996-5.57,9.026c0.955,4.03,4.997,6.524,9.027,5.569 C204.817,48.809,220.366,47,235.976,47c54.996,0,106.332,21.911,144.55,61.695c1.473,1.533,3.439,2.305,5.41,2.305 c1.869,0,3.741-0.694,5.195-2.091c2.987-2.87,3.083-7.618,0.213-10.604c-19.913-20.729-43.304-37.036-69.522-48.465 C294.666,38.002,265.783,32,235.976,32z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M67.507,125.404c1.372,1.074,3.001,1.595,4.619,1.595c2.227,0,4.431-0.987,5.91-2.876 c21.375-27.302,49.515-48.717,81.377-61.932c3.826-1.587,5.642-5.975,4.055-9.801s-5.977-5.644-9.801-4.055 c-34.241,14.201-64.478,37.21-87.441,66.539C63.672,118.137,64.246,122.851,67.507,125.404z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M131.983,38.725c1.094,0,2.205-0.24,3.255-0.748C166.816,22.73,200.709,15,235.976,15c18.378,0,36.682,2.162,54.401,6.426 c4.025,0.966,8.077-1.51,9.046-5.537c0.969-4.027-1.51-8.078-5.538-9.047C275.019,2.302,255.535,0,235.976,0 c-37.544,0-73.631,8.232-107.259,24.469c-3.73,1.801-5.294,6.285-3.493,10.015C126.517,37.163,129.195,38.725,131.983,38.725z" />
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M321.724,31.383c7.732,3.079,15.385,6.619,22.746,10.52c1.119,0.594,2.321,0.875,3.505,0.875 c2.688,0,5.287-1.449,6.633-3.99c1.939-3.66,0.545-8.199-3.115-10.139c-7.837-4.153-15.986-7.922-24.22-11.201 c-3.849-1.533-8.21,0.345-9.743,4.192C315.998,25.488,317.876,29.851,321.724,31.383z" />
</svg>`,
Keytronic:
`<g>
<g>
<path fill="none" stroke-width="6" d="M478.665,72c0-39.704-32.296-72-72-72c-19.704,0-38.496,8.184-52,22.288C341.161,8.184,322.369,0,302.665,0 c-39.704,0-72,32.296-72,72c0,24.752,12.456,47.36,33.376,60.688L275.353,144L134.665,284.688l-26.344-26.344 c-3.128-3.128-8.184-3.128-11.312,0l-32,32c-3.128,3.128-3.128,8.184,0,11.312L91.353,328l-12.688,12.688l-26.344-26.344 c-3.128-3.128-8.184-3.128-11.312,0l-33,33c-3.128,3.128-3.128,8.184,0,11.312L34.353,385L4.345,415.008 c-3.128,3.128-3.128,8.184,0,11.312l52,52c1.56,1.56,3.608,2.344,5.656,2.344s4.096-0.784,5.656-2.344l51.008-51.008 l26.344,26.344c3.128,3.128,8.184,3.128,11.312,0l40-40c3.128-3.128,3.128-8.184,0-11.312L169.977,376l168.688-168.688 l7.312,7.312C359.305,235.544,381.913,248,406.665,248c39.704,0,72-32.296,72-72c0-19.704-8.184-38.496-22.288-52 C470.481,110.496,478.665,91.704,478.665,72z M462.665,176c0,30.872-25.128,56-56,56c-19.488,0-37.272-9.944-47.584-26.6 c-0.328-0.52-0.712-1.008-1.152-1.448l-13.608-13.608c-3.128-3.128-8.184-3.128-11.312,0l-180,180 c-3.128,3.128-3.128,8.184,0,11.312L179.353,408l-28.688,28.688l-26.344-26.344c-3.128-3.128-8.184-3.128-11.312,0l-51.008,51.008 l-40.688-40.688l30.008-30.008c3.128-3.128,3.128-8.184,0-11.312L24.977,353l21.688-21.688l26.344,26.344 c3.128,3.128,8.184,3.128,11.312,0l24-24c3.128-3.128,3.128-8.184,0-11.312L81.977,296l20.688-20.688l26.344,26.344 c3.128,3.128,8.184,3.128,11.312,0l152-152c3.128-3.128,3.128-8.184,0-11.312l-17.608-17.608c-0.44-0.44-0.92-0.824-1.448-1.152 c-16.656-10.312-26.6-28.096-26.6-47.584c0-30.872,25.128-56,56-56c17.96,0,34.968,8.768,45.504,23.456c3,4.184,10,4.184,13,0 C371.697,24.768,388.705,16,406.665,16c30.872,0,56,25.128,56,56c0,17.96-8.768,34.968-23.456,45.504 c-2.096,1.504-3.336,3.92-3.336,6.496s1.24,5,3.336,6.496C453.897,141.032,462.665,158.04,462.665,176z" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<rect fill="none" stroke-width="6" x="173.811" y="228.009" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -91.1265 252.0189)" width="169.678" height="16" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<rect fill="none" stroke-width="6" x="163.35" y="311.983" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -175.1045 217.2252)" width="22.624" height="16" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke-width="6" d="M406.665,40c-17.648,0-32,14.352-32,32s14.352,32,32,32s32-14.352,32-32S424.313,40,406.665,40z M406.665,88 c-8.824,0-16-7.176-16-16s7.176-16,16-16c8.824,0,16,7.176,16,16S415.489,88,406.665,88z" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<rect fill="none" stroke-width="6" x="310.663" y="92.674" transform="matrix(0.7071 -0.7071 0.7071 0.7071 19.8046 255.7854)" width="16" height="22.624" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<rect fill="none" stroke-width="6" x="342.661" y="124.674" transform="matrix(0.7071 -0.7071 0.7071 0.7071 6.5493 287.7842)" width="16" height="22.624" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<rect fill="none" stroke-width="6" x="374.659" y="156.674" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.706 319.7831)" width="16" height="22.624" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke-width="6" d="M470.665,344h-14.032c-0.44-1.112-0.896-2.216-1.392-3.328l9.928-9.928c3.128-3.128,3.128-8.184,0-11.312l-33.936-33.936 c-3.128-3.128-8.184-3.128-11.312,0l-9.928,9.928c-1.112-0.496-2.216-0.952-3.328-1.392V280c0-4.424-3.576-8-8-8h-48 c-4.424,0-8,3.576-8,8v14.032c-1.112,0.44-2.216,0.896-3.328,1.392l-9.928-9.928c-3.128-3.128-8.184-3.128-11.312,0 l-33.936,33.936c-3.128,3.128-3.128,8.184,0,11.312l9.928,9.928c-0.496,1.112-0.952,2.216-1.392,3.328h-14.032 c-4.424,0-8,3.576-8,8v48c0,4.424,3.576,8,8,8h14.032c0.44,1.112,0.896,2.216,1.392,3.328l-9.928,9.928 c-3.128,3.128-3.128,8.184,0,11.312l33.936,33.936c3.128,3.128,8.184,3.128,11.312,0l9.928-9.928 c1.112,0.496,2.216,0.952,3.328,1.392V472c0,4.424,3.576,8,8,8h48c4.424,0,8-3.576,8-8v-14.032 c1.112-0.44,2.216-0.896,3.328-1.392l9.928,9.928c3.128,3.128,8.184,3.128,11.312,0l33.936-33.936 c3.128-3.128,3.128-8.184,0-11.312l-9.928-9.928c0.496-1.112,0.952-2.216,1.392-3.328h14.032c4.424,0,8-3.576,8-8v-48 C478.665,347.576,475.089,344,470.665,344z M462.665,392h-11.672c-3.496,0-6.576,2.264-7.632,5.592 c-1.216,3.864-2.856,7.8-4.88,11.672c-1.616,3.104-1.032,6.888,1.44,9.36l8.288,8.288l-22.624,22.624l-8.288-8.288 c-2.472-2.472-6.256-3.056-9.36-1.44c-3.872,2.024-7.808,3.664-11.672,4.88c-3.336,1.064-5.6,4.144-5.6,7.64V464h-32v-11.672 c0-3.496-2.264-6.576-5.592-7.632c-3.864-1.216-7.8-2.856-11.672-4.88c-3.104-1.616-6.88-1.032-9.36,1.44l-8.288,8.288 l-22.624-22.624l8.288-8.288c2.472-2.472,3.056-6.256,1.44-9.36c-2.024-3.872-3.664-7.808-4.88-11.672 c-1.064-3.336-4.144-5.6-7.64-5.6h-11.672v-32h11.672c3.496,0,6.576-2.264,7.632-5.592c1.216-3.864,2.856-7.8,4.88-11.672 c1.616-3.104,1.032-6.888-1.44-9.36l-8.288-8.288l22.624-22.624l8.288,8.288c2.48,2.48,6.256,3.048,9.36,1.44 c3.872-2.024,7.808-3.664,11.672-4.88c3.336-1.064,5.6-4.144,5.6-7.64V288h32v11.672c0,3.496,2.264,6.576,5.592,7.632 c3.864,1.216,7.8,2.856,11.672,4.88c3.104,1.608,6.888,1.04,9.36-1.44l8.288-8.288l22.624,22.624l-8.288,8.288 c-2.472,2.472-3.056,6.256-1.44,9.36c2.024,3.872,3.664,7.808,4.88,11.672c1.064,3.336,4.144,5.6,7.64,5.6h11.672V392z" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke-width="6" d="M374.665,328c-26.472,0-48,21.528-48,48s21.528,48,48,48s48-21.528,48-48S401.137,328,374.665,328z M374.665,408 c-17.648,0-32-14.352-32-32s14.352-32,32-32s32,14.352,32,32S392.313,408,374.665,408z" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke-width="6" d="M54.665,168h-16c0,13.232-10.768,24-24,24v16c13.232,0,24,10.768,24,24h16c0-13.232,10.768-24,24-24v-16 C65.433,192,54.665,181.232,54.665,168z M46.665,208.248c-2.336-3.144-5.104-5.912-8.248-8.248 c3.144-2.336,5.912-5.104,8.248-8.248c2.336,3.144,5.104,5.912,8.248,8.248C51.769,202.336,49.001,205.104,46.665,208.248z" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke-width="6" d="M150.665,120h-16c0,13.232-10.768,24-24,24v16c13.232,0,24,10.768,24,24h16c0-13.232,10.768-24,24-24v-16 C161.433,144,150.665,133.232,150.665,120z M142.665,160.248c-2.336-3.144-5.104-5.912-8.248-8.248 c3.144-2.336,5.912-5.104,8.248-8.248c2.336,3.144,5.104,5.912,8.248,8.248C147.769,154.336,145.001,157.104,142.665,160.248z" stroke="#FFFFFF"/>
</g>
</g>
<g>
<g>
<path fill="none" stroke-width="6" d="M70.665,48h-16c0,13.232-10.768,24-24,24v16c13.232,0,24,10.768,24,24h16c0-13.232,10.768-24,24-24V72 C81.433,72,70.665,61.232,70.665,48z M62.665,88.248c-2.336-3.144-5.104-5.912-8.248-8.248c3.144-2.336,5.912-5.104,8.248-8.248 c2.336,3.144,5.104,5.912,8.248,8.248C67.769,82.336,65.001,85.104,62.665,88.248z" stroke="#FFFFFF"/>
</g>
</g>
`,
Molectron: `
<path stroke="#FFFFFF" fill="none" stroke-width="6" d="m398.559,166.02c-8.85-3.404-18.292-6.493-28.22-9.265 2.563-9.984 4.609-19.706 6.087-29.073 7.689-48.757-0.808-82.959-23.925-96.306-6.72-3.88-14.443-5.848-22.954-5.848-26.882,0-60.85,19.965-95.118,53.681-7.486-7.352-15.006-14.105-22.502-20.167-38.379-31.038-72.25-40.781-95.365-27.434-14.856,8.577-23.891,26.093-26.126,50.652-0.376,4.125 2.664,7.773 6.789,8.148 4.138,0.382 7.772-2.664 8.148-6.789 1.238-13.594 5.484-31.398 18.688-39.021 17.11-9.881 45.699-0.365 78.434,26.106 7.143,5.776 14.314,12.217 21.461,19.233-14.373,15.293-28.676,32.894-42.41,52.347-24.16,2.199-47.172,5.888-68.291,10.948-3.698-14.376-6.238-28.093-7.491-40.827-0.405-4.122-4.059-7.134-8.198-6.729-4.122,0.405-7.135,4.076-6.729,8.198 1.326,13.474 4.008,27.966 7.917,43.133-9.596,2.706-18.73,5.712-27.311,9.012-46.072,17.72-71.443,42.18-71.443,68.873s25.371,51.153 71.441,68.872c8.85,3.404 18.292,6.493 28.22,9.265-2.563,9.984-4.609,19.706-6.087,29.073-7.689,48.757 0.808,82.959 23.925,96.306 6.72,3.88 14.443,5.848 22.954,5.848 26.573,0 60.071-19.516 93.938-52.531 7.255,7.086 14.54,13.609 21.803,19.482 27.161,21.966 52.059,33.266 72.489,33.265 8.438-0.001 16.119-1.93 22.876-5.831 23.117-13.347 31.614-47.549 23.925-96.306-1.477-9.366-3.523-19.087-6.086-29.07 15.439-4.252 29.64-9.26 42.218-14.96 3.773-1.71 5.445-6.154 3.735-9.927-1.71-3.773-6.155-5.446-9.927-3.735-11.912,5.398-25.377,10.15-40.042,14.192-6.063-20.261-14.137-41.412-23.976-62.808 10.281-22.122 18.685-44.004 24.943-64.936 55.665,15.586 88.651,40.202 88.651,63.801 0,15.247-13.296,27.827-24.45,35.694-3.385,2.388-4.193,7.067-1.806,10.452 2.388,3.386 7.067,4.193 10.452,1.806 20.153-14.215 30.804-30.797 30.804-47.952 0-26.693-25.371-51.153-71.441-68.872zm-69.013-125.491c5.844,7.10543e-15 11.044,1.291 15.454,3.838 17.112,9.88 23.166,39.396 16.607,80.979-1.405,8.907-3.35,18.159-5.789,27.669-21.207-5.028-44.299-8.68-68.532-10.835-13.596-19.242-27.866-36.839-42.375-52.253 2.655-2.618 5.312-5.158 7.964-7.602 29.252-26.953 56.48-41.796 76.671-41.796zm-95.096,60.152c11.317,12.062 22.5,25.517 33.323,40.102-10.769-0.587-21.712-0.891-32.773-0.891-11.431,0-22.738,0.321-33.855,0.947 10.808-14.56 22.006-28.07 33.305-40.158zm-.053,269.657c-11.718-12.42-23.296-26.341-34.486-41.466 11.514,0.674 23.234,1.02 35.089,1.02 11.419,0 22.732-0.333 33.871-0.969-11.18,15.064-22.777,29.01-34.474,41.415zm.603-55.446c-16.115,0-31.578-0.624-46.314-1.784-8.277-12.076-16.284-24.78-23.907-37.984-7.503-12.995-14.405-26.107-20.657-39.155 6.49-13.661 13.707-27.412 21.596-41.077 7.64-13.232 15.75-26.063 24.177-38.307 14.374-1.099 29.429-1.693 45.105-1.693 15.273,0 29.956,0.564 43.994,1.609 8.434,12.267 16.59,25.185 24.349,38.623 7.85,13.597 15.034,27.279 21.5,40.873-6.219,12.942-13.091,25.957-20.56,38.894-7.625,13.207-15.72,26.015-24.13,38.239-14.716,1.158-29.83,1.762-45.153,1.762zm-65.615-3.655c-18.453-2.132-35.582-5.129-51.205-8.81 4.744-15.789 10.758-32.16 17.929-48.79 4.898,9.688 10.128,19.373 15.679,28.987 5.668,9.818 11.549,19.371 17.597,28.613zm1.19-152.829c-6.111,9.318-12.078,18.991-17.847,28.984-5.933,10.276-11.499,20.61-16.677,30.928-7.543-17.318-13.858-34.376-18.788-50.749 16.203-3.859 34.042-6.983 53.312-9.163zm-155.575,76.484c0-23.472 32.634-47.951 87.757-63.55 6.235,20.802 14.601,42.62 24.805,64.647-9.813,21.362-17.865,42.477-23.913,62.705-55.663-15.587-88.649-40.203-88.649-63.802zm125.454,194.363c-5.844,0-11.044-1.291-15.454-3.838-17.112-9.88-23.166-39.396-16.607-80.979 1.405-8.907 3.35-18.159 5.789-27.669 20.518,4.865 42.8,8.441 66.173,10.619 13.951,19.807 28.618,37.883 43.53,53.648-2.254,2.201-4.509,4.348-6.76,6.423-29.252,26.954-56.48,41.796-76.671,41.796zm220.214-84.584c6.559,41.583 0.505,71.099-16.607,80.979-17.113,9.879-45.699,0.364-78.434-26.106-6.893-5.574-13.814-11.767-20.712-18.499 14.761-15.578 29.462-33.603 43.563-53.579 23.432-2.151 45.822-5.697 66.389-10.509 2.445,9.526 4.394,18.793 5.801,27.714zm-9.83-42.153c-16.064,3.733-33.311,6.67-51.339,8.745 6.085-9.283 12.027-18.918 17.773-28.871 5.517-9.556 10.713-19.161 15.579-28.757 7.195,16.66 13.228,33.063 17.987,48.883zm-17.918-84.145c-5.152-10.259-10.688-20.532-16.587-30.749-5.818-10.078-11.859-19.878-18.077-29.348 19.355,2.146 37.276,5.243 53.564,9.081-4.955,16.493-11.302,33.623-18.9,51.016z"/>
<path stroke="#FFFFFF" fill="none" stroke-width="6" d="m235,197.392c-20.678,0-37.5,16.822-37.5,37.5s16.822,37.5 37.5,37.5 37.5-16.822 37.5-37.5-16.822-37.5-37.5-37.5zm0,60c-12.406,0-22.5-10.094-22.5-22.5s10.094-22.5 22.5-22.5 22.5,10.094 22.5,22.5-10.094,22.5-22.5,22.5z"/>
`
}

88
src/views/login/requestresetpwd.vue
View File

@@ -2,9 +2,9 @@
<div class="mypanel">
<div v-if="!emailinviata">
<q-alert color="primary q-title" style="text-align: center;">
<q-banner color="primary q-title" style="text-align: center;">
{{ $t('reset.title_reset_pwd')}}
</q-alert>
</q-banner>
<br>
<q-field
@@ -30,9 +30,9 @@
</div>
<div v-else>
<q-alert color="primary q-title" style="text-align: center;">
<q-banner color="primary q-title" style="text-align: center;">
{{ $t('reset.email_sent')}}
</q-alert>
</q-banner>
<br>
<div>
@@ -45,72 +45,68 @@
</div>
</template>
<script>
<script lang="ts" >
import {mapActions} from 'vuex'
import * as types from '../../store/mutation-types'
import { rescodes } from '../../../store/Modules/tools'
import {serv_constants} from '../../store/Modules/serv_constants'
export default {
data() {
return {
risultato: '',
riscode: 0,
emailsent: false,
form: {
email: '',
tokenforgot: 0,
},
}
},
import Vue from 'vue'
import { email, required } from "vuelidate/lib/validators"
import { UserStore } from "../../store/Modules";
import { IUserState } from "../../model";
export default class RequestResetPwd extends Vue{
emailsent = false
form: IUserState = {
email: '',
tokenforgot: ''
}
created() {
this.load();
},
computed: {
emailinviata: function () {
// this.load();
}
get emailinviata() {
return this.emailsent
},
},
validations: {
form: {
email: {
required, email,
},
}
},
methods: {
...mapActions("user", {
requestresetpwd: types.USER_REQUESTRESETPWD,
}),
},
}
// validations: {
// form: {
// email: {
// required, email,
// },
// }
// },
showNotif(msg: any) {
this.$q.notify(msg)
}
submit() {
this.$v.form.$touch();
this.$v.form.$touch()
if (this.$v.form.$error) {
this.showNotif(this.$t('reg.err.errore_generico'));
this.showNotif(this.$t('reg.err.errore_generico'))
return
}
this.$q.loading.show({message: this.$t('reset.incorso')});
this.$q.loading.show({message: this.$t('reset.incorso')})
this.tokenforgot = '';
this.form.tokenforgot = ''
console.log(this.form);
this.requestresetpwd(this.form)
UserStore.actions.requestpwd(this.form)
.then((ris) => {
if (ris.code === serv_constants.RIS_CODE_OK)
this.emailsent = true;
this.$q.loading.hide();
this.emailsent = true
this.$q.loading.hide()
}).catch(err => {
console.log("ERROR = " + err.error);
this.$q.loading.hide();
console.log("ERROR = " + err.error)
this.$q.loading.hide()
});
}
}
})
</script>

4
src/views/login/signin/signin.vue
View File

@@ -43,13 +43,13 @@
<br>
<q-card-main class="flex flex-center">
<q-card class="flex flex-center">
<!--<q-btn v-if="$myconfig.socialLogin.facebook" :loading="loading" class="q-mb-md q-mr-md" rounded icon="fab fa-facebook-f" size="sm" color="blue-10" text-color="white" @click="facebook" :label="$t('components.authentication.login.facebook')"/>-->
<!--
<q-btn v-if="$myconfig.socialLogin.facebook" class="q-mb-md q-mr-md" rounded icon="fab fa-facebook-f" size="sm" color="blue-10" text-color="white" @click="facebook" :label="$t('components.authentication.login.facebook')"/>
<q-btn v-if="$myconfig.socialLogin.google" class="q-mb-md q-mr-md" rounded icon="fab fa-google" size="sm" color="deep-orange-14" text-color="white" @click="google" :label="$t('components.authentication.login.google')"/>
-->
</q-card-main>
</q-card>
<div align="center">
<q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error || iswaitingforRes">{{$t('login.enter')}}

18
src/views/login/signup/signup-validate.ts
View File

@@ -1,9 +1,9 @@
import { ISignupOptions } from 'model'
import { required, minLength, email, sameAs } from 'vuelidate/lib/validators'
import { email, minLength, required, sameAs } from 'vuelidate/lib/validators'
// import { ValidationRuleset } from 'vuelidate'
import { complexity, registereduser, registeredemail } from '../../../validation'
import { complexity, registeredemail, registereduser } from '../../../validation'
export type TSignup = { signup: ISignupOptions, validationGroup: string[] }
export interface TSignup { signup: ISignupOptions, validationGroup: string[] }
export const validations = {
signup: {
@@ -12,17 +12,17 @@ export const validations = {
sameAsPassword: sameAs('password')
},
password: {
required,
complexity
complexity,
required
},
username: {
required,
registereduser
registereduser,
required
},
email: {
required,
email,
registeredemail
registeredemail,
required
},
terms: {
required

106
src/views/login/updatepassword.vue
View File

@@ -2,9 +2,9 @@
<div class="mypanel">
<div v-if="!emailinviata">
<q-alert color="primary q-title" style="text-align: center;">
<q-banner color="primary q-title" style="text-align: center;">
{{ $t('reset.title_update_pwd')}}
</q-alert>
</q-banner>
<br>
<q-field
@@ -41,9 +41,9 @@
</div>
<div v-else>
<q-alert color="primary q-title" style="text-align: center;">
<q-banner color="primary q-title" style="text-align: center;">
{{ $t('reset.email_sent')}}
</q-alert>
</q-banner>
<br>
<div>
@@ -56,76 +56,74 @@
</div>
</template>
<script>
<script lang="ts">
import {mapActions} from 'vuex'
import { mapActions } from 'vuex'
import * as types from '../../store/mutation-types'
//import {tools} from '../../store/Modules/user'
import {serv_constants} from '../../store/Modules/serv_constants';
import { serv_constants } from '../../store/Modules/serv_constants'
export default {
data() {
return {
risultato: '',
riscode: 0,
emailsent: false,
form: {
password: '',
repeatPassword: '',
tokenforgot: 0,
},
}
},
import Vue from 'vue'
import { required } from "vuelidate/lib/validators"
import { UserStore } from "../../store/Modules";
import { IUserState } from "../../model";
export default class UpdatePassword extends Vue {
emailsent = false
form: IUserState = {
password: '',
repeatPassword: '',
tokenforgot: '',
}
created() {
this.load();
},
computed: {
emailinviata: function () {
// this.load()
}
get emailinviata() {
return this.emailsent
},
},
validations: {
form: {
password: {
required,
},
repeatPassword: {
required,
sameAsPassword: sameAs('password')
},
}
},
methods: {
...mapActions("user", {
updatepwd: types.USER_UPDATEPWD,
}),
},
}
// validations: {
// form: {
// password: {
// required,
// },
// repeatPassword: {
// required,
// sameAsPassword: sameAs('password')
// },
// }
// },
showNotif(msg: any) {
this.$q.notify(msg)
}
submit() {
this.$v.form.$touch();
this.$v.form.$touch()
if (this.$v.form.$error) {
this.showNotif(this.$t('reg.err.errore_generico'));
this.showNotif(this.$t('reg.err.errore_generico'))
return
}
this.$q.loading.show({message: this.$t('reset.incorso')});
this.$q.loading.show({ message: this.$t('reset.incorso') })
this.tokenforgot = '';
this.form.tokenforgot = ''
console.log(this.form);
this.updatepwd(this.form)
console.log(this.form)
UserStore.actions.resetpwd(this.form)
.then((ris) => {
this.emailsent = ris.updatepwd;
this.$q.loading.hide();
this.emailsent = ris.updatepwd
this.$q.loading.hide()
}).catch(error => {
console.log("ERROR = " + error);
this.$q.loading.hide();
});
console.log("ERROR = " + error)
this.$q.loading.hide()
})
}
}
})
</script>

12
src/views/login/vreg/vreg.vue
View File

@@ -1,9 +1,9 @@
<template>
<q-page padding class="vreg">
<div class="mypanel">
<q-alert color="primary q-title" style="text-align: center;">
<q-banner color="primary q-title" style="text-align: center;">
{{ $t('reg.title_verif_reg')}}
</q-alert>
</q-banner>
<br>
<transition
@@ -12,18 +12,18 @@
appear
>
<span>
<q-alert
<q-banner
v-if="giaverificato"
type="warning"
>
{{ myrisultato}}
</q-alert>
<q-alert
</q-banner>
<q-banner
v-if="verificatook"
type="positive"
>
{{ myrisultato}}
</q-alert>
</q-banner>
</span>
</transition>

53
src/views/pricing/cardPlanOne.vue
View File

@@ -1,53 +0,0 @@
<template>
<div class="card text-center">
<div class="card-title no-padding ">
<span class="label pointing-down text-white fit no-margin" :class="titleClasses">
<h5 class="">{{title}}</h5>
</span>
</div>
<div class="card-content bg-white" >
<h3>$ {{price}}</h3>
<h6 class="text-italic">{{priceSubtitle}}</h6>
</div>
<div class="card-actions">
<slot name="body"></slot>
</div>
<div class="card-content bg-white">
<button :class="buttonClasses" class="outline fit" @click="planSelected()">Choose</button>
</div>
</div>
</template>
<script type="text/javascript">
export default {
props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
data () {
return {}
},
methods: {
planSelected () {
this.$emit('card-selected', this.cardId)
}
}
}
</script>
<style scoped>
.label{
min-height: 50px;
}
h5{
font-weight: 300;
flex: 1 1 auto;
}
h3, h6{
font-weight: 300;
}
.label.pointing-up:before, .label.pointing-right:before, .label.pointing-down:before, .label.pointing-left:before {
width: 1.4rem;
height: 1.4rem;
}
.card {
width: 332px;
}
</style>

111
src/views/pricing/cardPlanTwo.vue
View File

@@ -1,111 +0,0 @@
<template>
<div class="card ">
<div class="card-content bg-white text-center" >
<h5>{{title}}</h5>
<h2 class="inline-block">$ {{price}}</h2> <span>{{priceSubtitle}}</span>
<div class="flex wrap gutter ">
<div class="auto">
<div class="label bg-faded text-white ">
Vitamin A
<span class="right-detail ">
<q-rating :class="buttonClasses" style="font-size: 1.5rem"
:value="randomValueOne" :max="7" icon="thumb_up" readonly></q-rating>
</span>
</div>
</div>
<div class="auto">
<div class="label bg-faded text-white">
Vitamin K
<span class="right-detail">
<q-rating :class="buttonClasses" style="font-size: 1.5rem"
:value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
</span>
</div>
</div>
<div class="auto">
<div class="label bg-faded text-white">
Vitamin B
<span class="right-detail">
<q-rating :class="buttonClasses" style="font-size: 1.5rem"
:value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
</span>
</div>
</div>
</div>
</div>
<div class="card-actions">
<div class="list fit">
<q-collapsible group="somegroup" icon="format_list_bulleted" label="Check inside for itens" >
<slot name="body" ></slot>
</q-collapsible>
</div>
</div>
<div class="card-content bg-white">
<q-progress-button
:class="buttonClasses"
class="fit"
:percentage="progressBtn"
@click.native="workButton()"
>
Choose
</q-progress-button>
</div>
</div>
</template>
<script type="text/javascript">
export default {
props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
data () {
return {
progressBtn: 0
}
},
computed: {
randomValueOne () {
return Math.floor((Math.random() * 5) + 1)
},
randomValueTwo () {
return Math.floor((Math.random() * 5) + 1)
},
randomValueThree () {
return Math.floor((Math.random() * 5) + 1)
}
},
methods: {
planSelected () {
this.$emit('card-selected', this.cardId)
},
workButton () {
this.stopWorkButton()
this.progressBtn = 15
this.workingButton = setInterval(() => {
this.progressBtn += parseInt(Math.random() * 12, 10)
if (this.progressBtn >= 100) {
this.stopWorkButton()
}
}, 500)
},
stopWorkButton (index) {
if (this.workingButton) {
clearInterval(this.workingButton)
this.workingButton = null
this.planSelected()
}
if (typeof index !== 'undefined') {
this.progressBtn = index
}
}
}
}
</script>
<style scoped>
h5{
font-weight: 300;
text-decoration: underline;
margin-bottom: 5%;
}
.card {
min-width: 350px;
max-width: 700px;
}
</style>

25
src/views/pricing/plansBenefits/benefitFour.vue
View File

@@ -1,25 +0,0 @@
<template>
<div class="list striped">
<div class="item">
<div class="item-content">8 Oranges</div>
</div>
<div class="item">
<div class="item-content">6 Limons</div>
</div>
<div class="item">
<div class="item-content">3 Grapes</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {}
}
}
</script>
<style>
</style>

39
src/views/pricing/plansBenefits/benefitOne.vue
View File

@@ -1,39 +0,0 @@
<template>
<div class="list ">
<q-collapsible icon="shopping_basket" label="Citrus">
<div class="item">
<div class="item-content">50 Oranges</div>
</div>
<div class="item" >
<div class="item-content">45 Limes</div>
</div>
</q-collapsible>
<q-collapsible icon="favorite" label="Berries">
<div class="item">
<div class="item-content">43 Blackberries</div>
</div>
<div class="item">
<div class="item-content">22 Grapes</div>
</div>
</q-collapsible>
<q-collapsible icon="opacity" label="Melons">
<div class="item" >
<div class="item-content">5 Watermelon</div>
</div>
<div class="item" >
<div class="item-content">10 Casaba</div>
</div>
</q-collapsible>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {}
}
}
</script>
<style>
</style>

28
src/views/pricing/plansBenefits/benefitThree.vue
View File

@@ -1,28 +0,0 @@
<template>
<div class="list">
<div class="list-label inset">Citrus</div>
<div class="item">
<div class="item-content inset">16 Oranges</div>
</div>
<div class="item">
<div class="item-content inset">12 Limes</div>
</div>
<hr class="inset">
<div class="list-label inset">Berries</div>
<div class="item">
<div class="item-content inset">14 Blackberries</div>
</div>
<div class="item">
<div class="item-content inset">6 Grapes</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {}
}
}
</script>
<style>
</style>

28
src/views/pricing/plansBenefits/benefitTwo.vue
View File

@@ -1,28 +0,0 @@
<template>
<div class="list">
<div class="list-label inset">Citrus</div>
<div class="item">
<div class="item-content inset">24 Oranges</div>
</div>
<div class="item">
<div class="item-content inset">20 Limes</div>
</div>
<hr class="inset">
<div class="list-label inset">Berries</div>
<div class="item">
<div class="item-content inset">20 Blackberries</div>
</div>
<div class="item">
<div class="item-content inset">10 Grapes</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {}
}
}
</script>
<style>
</style>

121
src/views/pricing/pricing.vue
View File

@@ -1,121 +0,0 @@
<template>
<div>
<div class="layout-padding">
<div class="label bg-secondary text-white">
Plan model type <span class="right-detail"><em>{{cardType}}</em></span>
</div>
<div class="group inline-block">
<label >
<q-radio v-model="cardType" val="Vertical One"></q-radio> Vertical One
</label>
<label>
<q-radio v-model="cardType" val="Horizontal One" class="teal"></q-radio> Horizontal One
</label>
</div>
<div class="row wrap gutter justify-center">
<div class="auto " v-for="planData in plansData">
<component :is="componentInstanceBySelectedPlanType"
:title="planData.title"
:title-classes="planData.titleClasses"
:price="planData.price"
:price-subtitle="planData.priceSubtitle"
:button-classes="planData.buttonClasses"
:card-id="planData.cardId"
v-on:card-selected="cardSelected"
>
<div slot="body" class="fit">
<component :is="planData.planBenefitComponent"></component>
</div>
</component>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
/* eslint-disable */
import cardPlanOne from './cardPlanOne.vue'
import cardPlanTwo from './cardPlanTwo.vue'
import benefitOne from './plansBenefits/benefitOne.vue'
import benefitTwo from './plansBenefits/benefitTwo.vue'
import benefitThree from './plansBenefits/benefitThree.vue'
import benefitFour from './plansBenefits/benefitFour.vue'
//import { Toast } from 'quasar'
export default {
name: 'Pricing',
data () {
return {
cardType: 'Vertical One',
plansData: [
{
title: 'Basket Fruit One',
titleClasses: 'bg-primary',
price: '59',
priceSubtitle: 'per month',
buttonClasses: 'primary',
cardId: '1',
planBenefitComponent: 'benefit-one'
},
{
title: 'Basket Fruit Two',
titleClasses: 'bg-teal',
price: '39',
priceSubtitle: 'per month',
buttonClasses: 'teal',
cardId: '2',
planBenefitComponent: 'benefit-two'
},
{
title: 'Basket Fruit Three',
titleClasses: 'bg-red',
price: '29',
priceSubtitle: 'per month',
buttonClasses: 'red',
cardId: '3',
planBenefitComponent: 'benefit-three'
},
{
title: 'Basket Fruit Four',
titleClasses: 'bg-purple',
price: '19',
priceSubtitle: 'per month',
buttonClasses: 'purple',
cardId: '4',
planBenefitComponent: 'benefit-four'
}
]
}
},
components: {
cardPlanOne,
benefitOne,
benefitTwo,
benefitThree,
benefitFour,
cardPlanTwo
},
computed: {
componentInstanceBySelectedPlanType () {
return this.cardType === 'Vertical One' ? 'card-plan-one' : 'card-plan-two'
}
},
methods: {
cardSelected (cardId) {
//Toast.create.positive({html: `Congratulations! You have choose the plan ${cardId}`})
},
chooseMostUsedPlan(cardId) {
return cardId == 1 ? 'animate-bounce shadow-3' : ''
}
}
}
</script>
<style scoped>
.inline-block {
margin-bottom: 7%;
}
.label{
padding: 1.2rem 0.7rem;
min-width: 260px;
}
</style>

2
src/views/test/pao.vue
View File

@@ -13,7 +13,7 @@
</q-toolbar>
</div>
</template>
<script type="text/javascript">
<script lang="ts" type="text/javascript">
</script>
<style scoped>
</style>

13
tslint.json
View File

@@ -1,5 +1,18 @@
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {
"no-console": false,
// "no-restricted-syntax": [
// "error",
// {
// "selector": "CallExpression[callee.object.name='console'][callee.property.name!=/^(log|warn|error|info|trace)$/]",
// "message": "Unexpected property on console object was called"
// }
// ],
"class-name": true,
"comment-format": [
true,

6121
yarn.lock
View File

File diff suppressed because it is too large Load Diff