HomePage Description Project

This commit is contained in:
Paolo Arena
2019-03-08 02:04:56 +01:00
parent 41edd96c8c
commit cb7868c6db
10 changed files with 298 additions and 171 deletions

View File

@@ -14,3 +14,4 @@ TEST_PASSWORD='mypassword@1A'
PUBLICKEY_PUSH='BGxRrFWnPoa_ImUaWXmeEOFVI9VNKVKaAPsvsM1XY6wn24yxp9MyOQ4crNYCJKxSXV65Y1GblW5_VLoamedcZ1I'
IN_CONSTRUCTION='0'
DEBUG='1'
TELEGRAM_SUPPORT='https://t.me/freeplanet_supporto'

2
.gitignore vendored
View File

@@ -2,8 +2,8 @@
.DS_Store
.thumbs.db
.env
.env.development
.env.production
.env.development
.env.production.bak
.env.prod.bak
.env.test

View File

@@ -238,9 +238,9 @@
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' },
{ label: 'Italiano', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' },
{ label: 'Español', icon: 'fa-flag-es', value: 'esEs', image: '../statics/images/es.png', short: 'ES' }
]

View File

@@ -254,13 +254,12 @@ export default class SingleTodo extends Vue {
}
faiFocus(elem, isparent: boolean = false) {
let mythis = this
setTimeout(() => {
let theField = null
if (isparent)
theField = <HTMLInputElement>mythis.$parent.$parent.$parent.$parent.$refs[elem]
theField = <HTMLInputElement>this.$parent.$parent.$parent.$parent.$refs[elem]
else
theField = <HTMLInputElement>mythis.$refs[elem]
theField = <HTMLInputElement>this.$refs[elem]
if (theField !== undefined)
theField.focus()

View File

@@ -156,39 +156,6 @@ export default class Todo extends Vue {
return 'elem [' + elem._id + '] ' + elem.descr + ' Pr(' + this.getPriorityByInd(elem.priority) + ') [ID_PREV=' + elem.id_prev + '] modif=' + elem.modified + ' '
}
// getPriorityToSet(ind1, ind2) {
// let elem1 = this.getelem(ind1)
// let elem2 = this.getelem(ind2)
//
// if ((elem1 !== null) && (elem2 !== null)) {
// if (elem1.priority === elem2.priority) {
// return elem1.priority
// } else {
// // if different priority then take the first
// return elem1.priority
// }
// } else {
// return (elem1 != null) ? elem1.priority : ((elem2 != null) ? elem2.priority : null)
// }
// }
//
getCompleted(ind1, ind2) {
// let elem1 = this.getelem(ind1)
// let elem2 = this.getelem(ind2)
//
// if ((elem1 !== null) && (elem2 !== null)) {
// if (elem1.completed === elem2.completed) {
// return elem1.completed
// } else {
// return elem1.completed
// }
// } else {
// return (elem1 != null) ? elem1.completed : ((elem2 != null) ? elem2.completed : null)
// }
}
getTitlePriority(priority) {
let cl = ''
@@ -218,27 +185,6 @@ export default class Todo extends Vue {
await Todos.actions.swapElems(itemdragend)
// If the newIndex is between another priority, then change priority
// if (!changecompleted) {
// // if I changed the completed, I don't have to put in other list priority
// let newpriority = this.getPriorityToSet(indini, indfine)
// if (newpriority != null && newpriority >= 0) {
// myobj.modified = (myobj.priority !== newpriority) ? true : myobj.modified
// myobj.priority = newpriority
// console.log('NewPriority: ', newpriority)
// }
// }
// let completed = this.getCompleted(indini, indfine)
// let changecompleted = false
// if (completed != null) {
// myobj.modified = (myobj.completed !== completed) ? true : myobj.modified
// myobj.completed = completed
// changecompleted = true
// console.log('Newcompleted: ', completed, 'modif', myobj.modified)
// }
}
private getElementIndex(el: any) {
@@ -250,20 +196,6 @@ export default class Todo extends Vue {
}
private getElementParentId(el: any) {
const elem = [].slice.call(el.parentElement.children)
console.log('elem', elem)
const id = elem.attributes['id'].substring(3)
return id
}
private getElementId(el: any) {
console.log(' el ', el)
const id = el.attributes['id'].value.substring(3)
return id
}
created() {
const $service = this.$dragula.$service
$service.options('first',
@@ -288,8 +220,6 @@ export default class Todo extends Vue {
$service.eventBus.$on('dragend', (args) => {
let itemdragend: IDrag = {
// newIndex: this.getElementIndex(args.el),
// oldIndex: this.getElementOldIndex(args.el)
category: this.categoryAtt,
newIndex: this.getElementIndex(args.el),
oldIndex: this.getElementOldIndex(args.el)
@@ -298,32 +228,29 @@ export default class Todo extends Vue {
this.onEnd(itemdragend)
})
let mythis = this
$service.eventBus.$on('drag', function (el, source) {
$service.eventBus.$on('drag', (el, source) => {
// mythis.inddragging = mythis.getElementIndex(el)
console.log('+++ DRAG ind=', mythis.inddragging)
mythis.scrollable = false
console.log('+++ DRAG ind=', this.inddragging)
this.scrollable = false
})
$service.eventBus.$on('drop', function (el, source) {
$service.eventBus.$on('drop', (el, source) => {
console.log('+++ DROP')
mythis.scrollable = true
this.scrollable = true
})
this.load()
}
mounted() {
mounted () {
// console.log('*** MOUNTED ***')
this.categoryAtt = this.$route.params.category
let mythis = this
if (window) {
window.addEventListener('touchmove', function (e) {
window.addEventListener('touchmove', (e) => {
// console.log('touchmove')
if (!mythis.scrollable) {
if (!this.scrollable) {
e.preventDefault()
}
}, { passive: false })
@@ -367,7 +294,7 @@ export default class Todo extends Vue {
}, 60000)
}
beforedestroy() {
beforeDestroy() {
clearInterval(this.polling)
}
@@ -431,10 +358,6 @@ export default class Todo extends Vue {
this.todotop = ''
else
this.todobottom = ''
})
}
@@ -508,18 +431,17 @@ export default class Todo extends Vue {
getArrTodos() {
let mystr = ''
let mythis = this
mythis.tmpstrTodos = ''
this.tmpstrTodos = ''
return globalroutines(null, 'readall', 'todos', null)
.then(function (alldata) {
.then((alldata) => {
const myrecs = [...alldata]
myrecs.forEach(rec => {
mystr = mystr + rec.descr + rec.completed + '] ['
})
mythis.tmpstrTodos = 'TODOS: ' + mystr
this.tmpstrTodos = 'TODOS: ' + mystr
})
}

View File

@@ -115,9 +115,8 @@ export default class Drawer extends Vue {
.then(() => {
this.$router.replace('/logout')
const mythis = this
setTimeout(function () {
mythis.$router.replace('/')
setTimeout(() => {
this.$router.replace('/')
}, 1000)
this.$q.notify(this.$t('logout.uscito'))

View File

@@ -1,3 +1,16 @@
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #a7a7a7;
line-height: 1.5;
font-size: 16px;
}
p {
margin: 0 0 16px;
}
.mycard {
visibility: hidden;
}
@@ -18,7 +31,7 @@
}
.landing > section.padding {
padding: 180px 16px
padding: 90px 16px
}
.landing > section > div {
@@ -61,28 +74,33 @@
width: 150px;
height: 150px;
margin-top: 21px;
-webkit-animation: logo-rotate 240s linear infinite;
animation: logo-rotate 240s linear infinite
//-webkit-animation: logo-rotate 240s linear infinite;
//animation: logo-rotate 240s linear infinite
}
.landing__features .q-icon {
font-size: 64px
}
h4{
line-height: 1.5;
}
.landing__features h4, .landing__features h6 {
margin: 26px 0
}
.landing__features p {
opacity: .6;
font-size: 16px
opacity: .7;
font-size: 16px;
line-height: 1.5;
}
.landing__footer {
background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
background: linear-gradient(180deg, rgba(0, 0, 0, .1) 65%, #000);
padding-top: 72px !important;
//padding-bottom: 72px !important
padding-bottom: 72px !important
}
.landing__footer .doc-link {
@@ -100,6 +118,15 @@
background-image: url(https://cdn.quasar-framework.org/img/landing_first_section.png) !important
}
.feat-descr {
font-size: 1.25rem;
}
.q-col-gutter-xl {
padding: 50px 50px;
//margin-left: -48px
}
@media (max-width: 718px) {
.landing__hero {
text-align: center
@@ -113,24 +140,32 @@
margin-bottom: 24px
}
.landing > section.padding {
padding-top: 50px;
padding: 40px 16px
//padding-bottom: 90px
}
.landing .feature-item {
text-align: center
text-align: center;
margin-top: 20px;
}
.landing__hero-content {
//padding-bottom: 180px
padding-bottom: 180px
}
.landing__hero-btns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.q-col-gutter-xl {
padding: 15px 15px;
}
}
body.mobile .landing {
background: unset
//background: unset
}
body.mobile .landing:before {
@@ -142,10 +177,12 @@ body.mobile .landing:before {
right: 0;
bottom: 0;
z-index: -1;
background: #000 url(../../statics/images/cover.jpg) 50%;
//background: #000 url(../../statics/images/cover.jpg) 50%;
background-size: cover
}
/*
@-webkit-keyframes logo-rotate {
to {
-webkit-transform: rotate(-1turn);
@@ -159,9 +196,7 @@ body.mobile .landing:before {
transform: rotate(-1turn)
}
}
*/
.home {
//background-color: rgb(250, 250, 250);
@@ -187,7 +222,6 @@ body.mobile .landing:before {
text-shadow: 4px 4px 8px #000000;
}
.text-h1 {
font-size: 6rem;
font-weight: 300;
@@ -195,6 +229,13 @@ body.mobile .landing:before {
letter-spacing: -.01562em;
}
.text-h2 {
font-size: 3.75rem;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -.00833em;
}
.text-weight-bold {
font-weight: 700;
}
@@ -208,12 +249,52 @@ body.mobile .landing:before {
font-size: 1.5rem;
}
}
.text-subtitle2 {
.text-subtitle2 {
font-size: 1rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: .00937em;
}
.text-subtitle3 {
font-size: 0.75rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: .00937em;
}
.homep-cover-img-1 {
background: #000 url(../../statics/images/cover.jpg) no-repeat 50% fixed;
transition: background-image 1s ease-in-out;
}
.homep-cover-img-2 {
background: #000 url(../../statics/images/all_together.jpg) no-repeat 50% fixed;
transition: background-image 1s ease-in-out;
}
.homep-cover-img.hide-filter:before {
opacity: 0
}
.landing__footer-icons {
font-size: 28px
}
.landing__footer-icons a {
margin: 0 8px 8px;
text-decoration: none;
outline: 0;
color: #fff;
transition: color .28s
}
.landing__footer-icons a:hover {
color: #e0e0e0
}
.doc-img{
max-width: 100%;
}

View File

@@ -14,8 +14,9 @@ export default class Home extends Vue {
displaycard: string = 'block'
svgclass: string = 'svgclass'
$t: any
firstClassSection: string = 'landing fade homep-cover-img animate-fade homep-cover-img-1'
public $q
polling
constructor() {
super()
@@ -23,17 +24,36 @@ export default class Home extends Vue {
this.initprompt()
}
created() {
// console.log('Home created...')
mounted() {
let primo = true
let mytime = 10000
this.polling = setInterval(() => {
this.firstClassSection = 'landing fade homep-cover-img ' + (primo ? 'homep-cover-img-2' : 'homep-cover-img-1')
primo = !primo
console.log('this.firstClassSection', this.firstClassSection)
}, mytime)
}
beforeDestroy() {
console.log('beforeDestroy')
clearInterval(this.polling)
}
created() {
GlobalStore.actions.prova()
}
get isLogged(){
get isLogged() {
return UserStore.state.isLogged
}
get TelegramSupport() {
return process.env.TELEGRAM_SUPPORT
}
meta() {
return {
@@ -60,6 +80,10 @@ export default class Home extends Vue {
return GlobalStore.state.conta
}
getenv(myvar) {
return process.env[myvar]
}
set conta(valore) {
GlobalStore.actions.setConta(valore)
let my = this.$q.i18n.lang
@@ -177,7 +201,7 @@ export default class Home extends Vue {
tag: 'confirm-notification',
renotify: true, // if it's already sent, will Vibrate anyway
actions: [
{ action: 'confirm', title: mythis.$t('dialog.ok'), icon: '/statics/icons/android-chrome-192x192.png', }
{ action: 'confirm', title: mythis.$t('dialog.ok'), icon: '/statics/icons/android-chrome-192x192.png' }
// { action: 'cancel', title: 'Cancel', icon: '/statics/icons/android-chrome-192x192.png', }
]
}
@@ -194,13 +218,12 @@ export default class Home extends Vue {
askfornotification() {
this.showNotif(this.$t('notification.waitingconfirm'), 'positive', 'notifications')
let mythis = this
Notification.requestPermission(function (result) {
Notification.requestPermission((result) => {
console.log('User Choice', result)
if (result === 'granted') {
mythis.showNotif(mythis.$t('notification.confirmed'), 'positive', 'notifications')
this.showNotif(this.$t('notification.confirmed'), 'positive', 'notifications')
} else {
mythis.showNotif(mythis.$t('notification.denied'), 'negative', 'notifications')
this.showNotif(this.$t('notification.denied'), 'negative', 'notifications')
// displayConfirmNotification();
}
@@ -248,4 +271,21 @@ export default class Home extends Vue {
}
}
/*
backgroundSequence() {
window.clearTimeout()
let k = 0
for (let i = 0; i < bgImageArray.length; i++) {
const mythis = this
setTimeout(function() {
document.documentElement.style.background = 'url(' + mythis.base + mythis.bgImageArray[k] + ') no-repeat center center fixed'
document.documentElement.style.backgroundSize = 'cover'
if ((k + 1) === mythis.bgImageArray.length) { setTimeout(function() { mythis.backgroundSequence() }, (mythis.secs * 1000))} else { k++ }
}, (mythis.secs * 1000) * i)
}
}
backgroundSequence()
*/
}

View File

@@ -1,6 +1,6 @@
<template>
<q-page class="text-white">
<div class="landing">
<div :class="firstClassSection">
<section>
<div class="landing__hero">
<div class="landing__header"></div>
@@ -15,9 +15,15 @@
</div>
<div class="text-subtitle1 shadow big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
</div>
<div class="text-subtitle2 shadow text-italic q-pl-sm ">{{$t('msg.sottoTitoloApp3')}}
<div class="text-subtitle2 shadow text-italic q-pl-sm">
{{$t('msg.sottoTitoloApp3')}}
</div>
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
{{$t('msg.sottoTitoloApp4')}}
</div>
<!--
<q-btn>
@@ -39,7 +45,8 @@
</div>
<div v-else>
<div v-if="!isLogged" style="margin: 5px; padding: 5px;" class="home">
<q-btn rounded size="lg" color="primary" @click="PagLogin" class="btn-start">
<q-btn rounded size="lg" color="primary" @click="PagLogin"
class="btn-start">
{{$t('login.enter')}}
</q-btn>
<q-btn rounded size="lg" color="positive" @click="PagReg" class="btn-start">
@@ -48,59 +55,134 @@
</div>
</div>
<div>
<q-field
v-if="getPermission() === 'granted'"
icon="notifications"
class="shadow"
:label="$t('notification.titlegranted')"
:helper="$t('notification.statusnot')">
</q-field>
<q-field
v-if="NotServiceWorker()"
class="shadow"
icon="notifications"
label="Service Worker not present"
>
</q-field>
<div v-if="isLogged">
<div>
<!--<q-field-->
<!--v-if="getPermission() === 'granted'"-->
<!--icon="notifications"-->
<!--class="shadow"-->
<!--:label="$t('notification.titlegranted')"-->
<!--:helper="$t('notification.statusnot')">-->
<!--</q-field>-->
<q-field
v-if="NotServiceWorker()"
class="shadow"
icon="notifications"
label="Service Worker not present"
>
</q-field>
</div>
<div>
<q-btn v-if="getPermission() !== 'granted'"
class="enable-notifications shadow"
color="primary" rounded
size="md"
icon="notifications" @click="askfornotification"
:label="$t('notification.ask')"/>
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
</div>
</div>
<div>
<q-btn v-if="getPermission() !== 'granted'" class="enable-notifications shadow"
color="primary" rounded
size="lg"
icon="notifications" @click="askfornotification"
:label="$t('notification.ask')"/>
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
<div class="q-pt-md q-pl-sm">
<div class="text-body2">Ver. {{getenv('APP_VERSION')}}</div>
</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&#45;&#45;rectangle bg-white text-primary q-focusable q-hoverable q-btn&#45;&#45;push">-->
<!--<div class="q-focus-helper"></div>-->
<!--<div class="q-btn__content text-center col items-center q-anchor&#45;&#45;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&#45;&#45;rectangle bg-white text-primary q-focusable q-hoverable q-btn&#45;&#45;push">-->
<!--<div class="q-focus-helper"></div>-->
<!--<div class="q-btn__content text-center col items-center q-anchor&#45;&#45;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>
</section>
<section class="padding bg-white text-grey-10 text-center">
<div class="landing__features row items-start q-col-gutter-xl">
<div class="col-12 text-center">
<div class="feature-item q-mx-md"><img src="statics/images/group-together.jpg"
class="doc-img"></div>
</div>
<div class="col-12 text-center"><h4>{{$t('homepage.descrapp_title1')}}</h4>
<p v-html="$t('homepage.descrapp_pag1')"></p>
<p v-html="$t('homepage.descrapp_pag2')"></p>
</div>
</div>
</section>
<section class="padding bg-primary landing__swirl-bg">
<div class="landing__features row justify-between items-start q-col-gutter-xl">
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-users"> </i><h4>
{{$t('homepage.freesocial.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.freesocial.descr')"></p></div>
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-users"> </i><h4>
{{$t('homepage.freetalent.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.freetalent.descr')"></p></div>
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-users"> </i><h4>
{{$t('homepage.freegas.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.freegas.descr')"></p></div>
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-users"> </i><h4>
{{$t('homepage.free.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.free.descr')"></p></div>
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-browser"> </i>
<div class="q-gutter-sm"><i aria-hidden="true"
class="q-icon fas fa-browser"> </i><i
aria-hidden="true" class="q-icon fab fa-chrome"> </i><i
aria-hidden="true" class="q-icon fab fa-firefox"> </i><i
aria-hidden="true" class="q-icon fab fa-safari"> </i><i
aria-hidden="true" class="q-icon fab fa-edge"> </i></div>
<h4>{{$t('homepage.multiplatform.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.multiplatform.descr')"></p></div>
</div>
</div>
</section>
<section class="landing__footer">
<div class="text-center">
<div class="landing__footer-icons row flex-center">
<a :href="TelegramSupport" target="_blank"><i aria-hidden="true"
class="q-icon fab fa-telegram dark"></i></a>
<!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
<!--<a href="https://twitter.com/" target="_blank"><i aria-hidden="true" class="q-icon fab fa-twitter"> </i></a>-->
<!--<a href="https://discord.gg/5TDhbDg" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fab fa-discord"> </i></a><a-->
<!--href="https://forum.quasar-framework.org/" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fas fa-comments"> </i></a><a-->
<!--href="https://www.patreon.com/quasarframework" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fab fa-patreon"> </i></a>-->
</div>
<div class="q-mt-md">Released under the
<!--<a href="https://github.com/quasarframework/quasar/blob/dev/LICENSE" target="_blank"-->
<!--rel="noopener noreferrer" class="doc-link">-->
MIT LICENSE
<!--<i aria-hidden="true"-->
<!--class="q-icon material-icons">launch</i></a>-->
<!--| <a href="https://www.iubenda.com/privacy-policy/40685560" target="_blank"-->
<!--rel="noopener noreferrer" class="doc-link">Privacy Policy<i aria-hidden="true"-->
<!--class="q-icon material-icons">launch</i></a>-->
</div>
</div>
</section>
</div>
</q-page>

View File

@@ -43,7 +43,10 @@ export const RouteConfig: VueRouteConfig[] = [
{
path: '/admin/cfgserv',
name: 'cfgserv',
component: () => import('@/components/admin/cfgServer/cfgServer.vue')
component: () => import('@/components/admin/cfgServer/cfgServer.vue'),
meta: {
middleware: [auth]
}
},
{
path: '/admin/testp1/:category',