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

- starting add Categories

Browse Source 
- improved layout drawer
This commit is contained in:
Paolo Arena
2019-01-05 20:11:41 +01:00
parent f01a3445f7
commit fd2321cd20
21 changed files with 706 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/quasar-logo-full.svg
View File

@@ -74,7 +74,7 @@
id="g4561-6-7-0">
<g
transform="translate(16.233481,0)"
style="font-style:normal;font-weight:normal;font-size:50.25774765px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#263238;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
style="font-style:normal;font-weight:normal;font-size:50.25774765px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#2632AA;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="flowRoot4513-6-6-08">
<path
d="m -402.73125,631.46823 q -0.6125,0.0438 -1.3125,0.0875 -0.65625,0 -1.4,0 l -9.31875,0 q -12.81875,0 -12.81875,-8.44375 l 0,-13.475 q 0,-8.26875 12.6,-8.26875 l 9.75625,0 q 12.6,0 12.6,8.26875 l 0,13.475 q 0,5.03125 -4.4625,7.04375 l 3.10625,2.14375 q 1.35625,0.83125 1.35625,1.70625 0,0.875 -0.7,1.3125 -0.65625,0.48125 -1.88125,0.48125 -0.30625,0 -0.7875,-0.13125 -0.4375,-0.0875 -1.05,-0.48125 l -5.6875,-3.71875 z m 5.38125,-21.74375 q 0,-4.76875 -7.9625,-4.76875 l -9.58125,0 q -7.9625,0 -7.9625,4.76875 l 0,13.3875 q 0,4.94375 8.3125,4.94375 l 8.88125,0 q 8.3125,0 8.3125,-4.94375 l 0,-13.3875 z"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

66
src/components/Header.vue
View File

@@ -1,5 +1,6 @@
<template>
<div>
<q-layout-header>
<q-toolbar
color="primary"
@@ -40,10 +41,9 @@
</q-layout-header>
<q-layout-drawer side="left"
v-model="leftDrawerOpen"
:content-class="['bg-grey-3', 'q-pa-sm']"
:content-class="['bg-grey-1', 'q-pa-sm']"
:content-style="{padding: '0px'}"
>
<drawer></drawer>
@@ -60,6 +60,7 @@
import messagePopover from '../layouts/toolbar/messagePopover/messagePopover.vue'
import { GlobalStore } from '@modules'
import { rescodes } from '../store/Modules/rescodes'
@Component({
components: {
@@ -78,12 +79,14 @@
{ label: 'Spanish', icon: 'fa-flag-es', value: 'es' },
{ label: 'Italian', icon: 'fa-facebook', value: 'it' }
]
get leftDrawerOpen () {
get leftDrawerOpen() {
return GlobalStore.state.leftDrawerOpen
}
set leftDrawerOpen (value) {
set leftDrawerOpen(value) {
GlobalStore.state.leftDrawerOpen = value
localStorage.setItem('leftDrawerOpen', value.toString())
localStorage.setItem(rescodes.localStorage.leftDrawerOpen, value.toString())
}
get lang() {
@@ -111,17 +114,23 @@
</script>
<style>
<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;
}
}
/*
@-webkit-keyframes moveFromLeftFade {
from {
opacity: 0.3;
@@ -137,6 +146,21 @@
}
}
@-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 {
}
@@ -175,6 +199,25 @@
}
}
@-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;
@@ -189,17 +232,18 @@
transform: translateX(100%);
}
}
*/
.drawer-closer .item-content {
margin-left: 50px !important;
margin-left: 20px !important;
}
.drawer-content .list-label {
line-height: 45px;
line-height: 25px;
}
.drawer-content .item {
height: 45px;
height: 25px;
}
.router-link-active .item-primary {
@@ -280,7 +324,7 @@
}
.toolbar {
min-height: 40px;
min-height: 30px;
}
.right-itens a, .right-itens button {
@@ -299,4 +343,6 @@
.fa-flag-it:before {
content: url('../statics/icons/flag_it.svg');
}
</style>

3
src/components/categories/category/category.scss Normal file
View File

@@ -0,0 +1,3 @@
.mycard {
visibility: hidden;
}

62
src/components/categories/category/category.ts Normal file
View File

@@ -0,0 +1,62 @@
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { GlobalStore } from '@store'
import VueIdb from 'vue-idb'
Vue.use(VueIdb)
require('./category.scss')
@Component({})
export default class Category extends Vue {
idb = null
category: string = ''
$t: any
created() {
this.createdb()
this.caricaCat()
}
createdb() {
// Inserisci la Categoria nel DB
this.idb = new VueIdb({
version: 1,
database: 'test',
schemas: [
{ categories: '++id, sub_categ_id, descr_it' }
]
})
}
caricaCat() {
let mythis = this
this.idb.open().then(function () {
return mythis.idb.categories
.toArray()
}).then(function () {
console.log('FINE LOAD')
})
}
insertCategory(): any {
let mythis = this
this.idb.open().then(function () {
console.log('Inserisci Cat: ', mythis.category)
return mythis.idb.categories.add({ descr_it: mythis.category })
}).then(function () {
console.log('FINE')
})
}
}

16
src/components/categories/category/category.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<q-page>
<div class="panel">
<p class="caption">Category:</p>
<q-input v-model="category" inverted float-label="Inserisci la Categoria"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertCategory"/>
</div>
</q-page>
</template>
<script lang="ts" src="./category.ts">
</script>

3
src/css/app.styl
View File

@@ -1 +1,4 @@
// app global css
/*------------------------------------------------------------------
[Table of contents]
# overwrite some style of stylus

2
src/i18n.js
View File

@@ -14,6 +14,7 @@ const messages = {
SignIn: 'Login',
vreg: 'Verifica Reg',
Test: 'Test',
Category: 'Categorie',
},
components: {
authentication:{
@@ -98,6 +99,7 @@ const messages = {
SignIn: 'SignIn',
vreg: 'Verify Reg',
Test: 'Test',
Category: 'Category',
},
components: {
authentication:{

4
src/index.template.html
View File

@@ -8,7 +8,7 @@
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
<link rel="icon" href="statics/quasar-logo.png" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
@@ -16,6 +16,8 @@
<script defer src="statics/js/material.min.js"></script>
<script src="statics/js/promise.js"></script>
<script src="statics/js/fetch.js"></script>
<script src="statics/js/idb.js"></script>
<link type="text/css" rel="stylesheet" href="statics/firebaseui.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

44
src/layouts/drawer/drawer.vue
View File

@@ -19,6 +19,10 @@
<menu-one :links="links"></menu-one>
<!--<footer>
<small>- Small</small>
</footer>-->
<div class="fixed-bottom text-center light text-italic">
Powered by Perseo
</div>
@@ -31,8 +35,8 @@
import Vue from 'vue'
import { Component, Watch, Prop } from 'vue-property-decorator'
import {Store} from 'vuex'
import { UserStore } from '@modules';
import { Store } from 'vuex'
import { UserStore } from '@modules'
import { GlobalStore } from '@modules'
@@ -43,9 +47,9 @@
})
export default class Drawer extends Vue {
public $q
$t: any;
$t: any
created () {
created() {
console.log('Drawer created...')
}
@@ -54,34 +58,36 @@
links = {
Dashboard: {
routes: [
{route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home'},
{route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'pages.SignUp'},
{route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.SignIn'},
{ route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
{ route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
{ route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
{ route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
/* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
],
],
show: true
},
Forms: {
routes: [
{route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test'},
],
{ route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test' },
],
show: false
},
}
get MenuCollapse () {
get MenuCollapse() {
return GlobalStore.state.menuCollapse
// return true
}
get Username () {
get Username() {
return UserStore.state.username
}
get Verificato () {
get Verificato() {
return UserStore.state.verifiedEmail
}
get Email () {
get Email() {
return UserStore.state.email
}
@@ -91,8 +97,8 @@
}
}
</script>
<style scoped>
.background-red{
<style scoped lang="scss">
.background-red {
background-color: red;
padding: 2px;
}
@@ -132,4 +138,10 @@
#menu-collapse {
margin-top: 5%;
}
footer {
small {
color: red;
}
}
</style>

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

@@ -1,23 +1,24 @@
<template>
<div class="list no-border platform-delimiter light-paragraph">
<q-icon name="action"/>
<template v-for="(parent, index) in links">
<q-list>
<div class="list-label cursor-pointer" @click="parent.show = !parent.show">
{{replaceUnderlineToSpace(index)}}
{{replaceUnderlineToSpace(index)}} <div class="menu_freccina"><i aria-hidden="true" class="v-icon material-icons theme--light">keyboard_arrow_down</i></div>
</div>
<template v-for="child in parent.routes">
<transition name="menu">
<q-slide-transition duration="200">
<div v-show="parent.show">
<q-item link :to="child.route" exact class="item item-link drawer-closer cursor-pointer">
<i :class="child.faIcon" class="item-primary"></i>
<div class="item-content">{{$t(child.name)}}</div>
</q-item>
<q-item link :to="child.route" exact
class="item item-link drawer-closer cursor-pointer">
<i :class="child.faIcon" class="item-primary"></i>
<div class="item-content">{{$t(child.name)}}</div>
</q-item>
</div>
</transition>
</q-slide-transition>
</template>
</q-list>
<hr>
</template>
</div>
</template>
@@ -60,6 +61,11 @@
</script>
<style scoped>
.menu-hr{
border-color: #dedede;
height: 0.5px;
}
.router-link-active {
color: #027be3;
background-color: #dadada !important;
@@ -68,19 +74,21 @@
.list-label:first-child {
line-height: 20px;
padding:5px;
margin:1px;
padding: 5px;
margin: 1px;
}
/*
.menu-enter-active, .scale-enter {
-webkit-animation: moveFromLeftFade .2s ease both;
animation: moveFromLeftFade .2s ease both;
-webkit-animation: moveFromTopFade .5s ease both;
animation: moveFromTopFade .5s ease both;
}
.menu-leave-to, .scale-leave-active {
-webkit-animation: moveToLeft .2s ease both;
animation: moveToLeft .2s ease both;
-webkit-animation: moveToBottom .5s ease both;
animation: moveToBottom .5s ease both;
}
*/
.router-link-active {
color: #027be3;
@@ -91,4 +99,14 @@
.router-link-active .item-primary {
color: #027be3;
}
.menu_freccina {
position: absolute;
right: 10px;
display: inline-block;
padding: 0 0px 0px 0px;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
</style>

5
src/plugins/indexdb.js Normal file
View File

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

5
src/router/route-config.ts
View File

@@ -28,6 +28,11 @@ export const RouteConfig: VueRouteConfig[] = [
path: '/vreg',
component: () => import('@/views/login/vreg/vreg.vue'),
meta: { name: 'Verify Reg' }
},
{
path: '/category',
component: () => import('@/components/categories/category/category.vue'),
meta: { name: 'Categories' }
}
/*
{

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

@@ -168,7 +168,7 @@ namespace Actions {
})
.then((body) => {
Mutations.mutations.UpdatePwd({ idToken: x_auth_token })
localStorage.setItem('token', x_auth_token)
localStorage.setItem(rescodes.localStorage.token, x_auth_token)
return { code: body.code, msg: body.msg }
}).catch((err) => {
@@ -247,7 +247,7 @@ namespace Actions {
// mutations.setServerCode(myres);
if (body.code === serv_constants.RIS_CODE_EMAIL_VERIFIED) {
console.log('VERIFICATO !!')
localStorage.setItem('verificato', '1')
localStorage.setItem(rescodes.localStorage.verifiedEmail, '1')
} else {
console.log('Risultato di vreg: ', body.code)
}
@@ -325,11 +325,11 @@ namespace Actions {
const now = new Date()
// const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
const expirationDate = new Date(now.getTime() * 1000)
localStorage.setItem('username', username)
localStorage.setItem('token', x_auth_token)
localStorage.setItem('userId', iduser)
localStorage.setItem('expirationDate', expirationDate.toString())
localStorage.setItem('verificato', '0')
localStorage.setItem(rescodes.localStorage.username, username)
localStorage.setItem(rescodes.localStorage.token, x_auth_token)
localStorage.setItem(rescodes.localStorage.userId, iduser)
localStorage.setItem(rescodes.localStorage.expirationDate, expirationDate.toString())
localStorage.setItem(rescodes.localStorage.verifiedEmail, '0')
// dispatch('storeUser', authData);
// dispatch('setLogoutTimer', myres.data.expiresIn);
@@ -424,13 +424,12 @@ namespace Actions {
const now = new Date()
// const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
const expirationDate = new Date(now.getTime() * 1000)
localStorage.setItem('username', username)
localStorage.setItem('token', x_auth_token)
localStorage.setItem('userId', iduser)
localStorage.setItem('expirationDate', expirationDate.toString())
localStorage.setItem('isLoggedin', String(true))
localStorage.setItem('verificato', Number(verifiedEmail).toString())
localStorage.setItem(rescodes.localStorage.username, username)
localStorage.setItem(rescodes.localStorage.token, x_auth_token)
localStorage.setItem(rescodes.localStorage.userId, iduser)
localStorage.setItem(rescodes.localStorage.expirationDate, expirationDate.toString())
localStorage.setItem(rescodes.localStorage.isLogged, String(true))
localStorage.setItem(rescodes.localStorage.verifiedEmail, Number(verifiedEmail).toString())
// dispatch('storeUser', authData);
// dispatch('setLogoutTimer', myres.data.expiresIn);
@@ -479,19 +478,19 @@ namespace Actions {
Mutations.mutations.clearAuthData()
})
localStorage.removeItem('expirationDate')
localStorage.removeItem('token')
localStorage.removeItem('userId')
localStorage.removeItem('username')
localStorage.removeItem('isLoggedin')
localStorage.removeItem('verifiedEmail')
localStorage.removeItem(rescodes.localStorage.expirationDate)
localStorage.removeItem(rescodes.localStorage.token)
localStorage.removeItem(rescodes.localStorage.userId)
localStorage.removeItem(rescodes.localStorage.username)
localStorage.removeItem(rescodes.localStorage.isLogged)
// localStorage.removeItem(rescodes.localStorage.leftDrawerOpen)
localStorage.removeItem(rescodes.localStorage.verifiedEmail)
router.push('/signin')
}
function setGlobal() {
GlobalStore.mutations.setleftDrawerOpen(localStorage.getItem('leftDrawerOpen') === 'true')
GlobalStore.mutations.setleftDrawerOpen(localStorage.getItem(rescodes.localStorage.leftDrawerOpen) === 'true')
}
async function autologin (context) {
@@ -504,19 +503,19 @@ namespace Actions {
UserStore.mutations.setlang(lang)
}
const token = localStorage.getItem('token')
const token = localStorage.getItem(rescodes.localStorage.token)
if (!token) {
return false
}
const expirationDateStr = localStorage.getItem('expirationDate')
const expirationDateStr = localStorage.getItem(rescodes.localStorage.expirationDate)
let expirationDate = new Date(String(expirationDateStr))
const now = new Date()
if (now >= expirationDate) {
return false
}
const userId = Number(localStorage.getItem('userId'))
const username = String(localStorage.getItem('username'))
const verifiedEmail = localStorage.getItem('verificato') === '1'
const userId = Number(localStorage.getItem(rescodes.localStorage.userId))
const username = String(localStorage.getItem(rescodes.localStorage.username))
const verifiedEmail = localStorage.getItem(rescodes.localStorage.verifiedEmail) === '1'
setGlobal()

12
src/store/Modules/rescodes.ts
View File

@@ -3,5 +3,15 @@ export const rescodes = {
OK: 20,
ERR_GENERICO: -1,
DUPLICATE_EMAIL_ID: 11000,
DUPLICATE_USERNAME_ID: 11100
DUPLICATE_USERNAME_ID: 11100,
localStorage: {
verifiedEmail: 'vf',
isLogged: 'ilog',
expirationDate: 'expdate',
leftDrawerOpen: 'ldo',
userId: 'uid',
token: 'tk',
username: 'uname'
}
}

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

@@ -85,7 +85,7 @@
}
}
</script>
<style>
<style scoped>
#map {
height: 180px;
}

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

@@ -72,7 +72,8 @@
riscode: 0,
emailsent: false,
form: {
email: '',
password: '',
repeatPassword: '',
tokenforgot: 0,
},
}
@@ -87,8 +88,12 @@
},
validations: {
form: {
email: {
required, email,
password: {
required,
},
repeatPassword: {
required,
sameAsPassword: sameAs('password')
},
}
},