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

.env.production file eliminated ! (-> .env)

Browse Source 
.env.production worked in local
added myconfig
messagepopup working (but not ready yet)
added Graphql (only module)
This commit is contained in:
Paolo Arena
2018-12-26 21:02:16 +01:00
parent e41eeb43ca
commit 7a217c3ca9
42 changed files with 430 additions and 657 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,84 +0,0 @@
<template>
<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" >
<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"
v-for="post in filteredPosts"
>
<img class="item-primary" :src="randomAvatarUrl()">
<div class="item-content has-secondary">
<div>{{post.title}}</div>
<div>{{randomDate()}}</div>
</div>
<span class="label bg-red text-white item-secondary no-margin">
<i class="left-detail"></i> New
</span>
</div>
</div>
</q-popover>
</button>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import * as types from '../../store/mutation-types'
export default {
mounted () {
if (this.getPosts.length < 1) {
this.requestPosts()
}
},
computed: {
...mapGetters("glob", ['getPosts']),
filteredPosts () {
return this.getPosts.slice(0, 5)
}
},
methods: {
...mapActions("glob", {
'setPosts': types.SET_POSTS,
}),
randomDate () {
return new Date((new Date()) - Math.floor(Math.random() * 10000000000))
},
randomAvatarUrl () {
return `https://api.adorable.io/avatars/face/${this.randomEye()}/${this.randomNose()}/${this.randomMouth()}/${this.randomHexColor()}`
},
randomHexColor () {
return Math.random().toString(16).slice(2, 8)
},
randomEye () {
return this.randomArrayElement(['eyes1', 'eyes10', 'eyes2', 'eyes3', 'eyes4', 'eyes5', 'eyes6', 'eyes7', 'eyes9'])
},
randomNose () {
return this.randomArrayElement(['nose2', 'nose3', 'nose4', 'nose5', 'nose6', 'nose7', 'nose8', 'nose9'])
},
randomMouth () {
return this.randomArrayElement(['mouth1', 'mouth10', 'mouth11', 'mouth3', 'mouth5', 'mouth6', 'mouth7', 'mouth9'])
},
randomArrayElement (array) {
return array[Math.floor((Math.random() * array.length))]
},
requestPosts () {
}
}
}
</script>
<style scoped>
.list{
max-width: 400px;
}
.item > img.item-primary:not(.thumbnail) {
border-radius: 10px !important;
}
.item > img.item-primary {
width: 48px;
height: 46px;
}
.item > .item-secondary {
width: 57px;
font-size: 13px;
}
</style>

17
src/layouts/toolbar/messagePopover/messagePopover.scss Normal file
View File

@@ -0,0 +1,17 @@
.list {
max-width: 400px;
}
.item > img.item-primary:not(.thumbnail) {
border-radius: 10px !important;
}
.item > img.item-primary {
width: 48px;
height: 46px;
}
.item > .item-secondary {
width: 57px;
font-size: 13px;
}

70
src/layouts/toolbar/messagePopover/messagePopover.ts Normal file
View File

@@ -0,0 +1,70 @@
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import { GlobalStore } from '@store'
import { IPost } from '../../../model/index'
import './messagePopover.scss'
@Component({
})
export default class MessagePopover extends Vue {
posts: IPost[] = []
created() {
if (GlobalStore.state.posts.length < 1) {
this.requestPosts()
}
}
get filteredPosts() {
if (this.posts.length >= 1)
return this.posts.slice(0, 5)
else
return []
}
public randomDate(): Date {
let myval = Math.floor(Math.random() * 10000000000)
return new Date(new Date().valueOf() - myval)
}
public randomAvatarUrl() {
return `https://api.adorable.io/avatars/face/${this.randomEye()}/${this.randomNose()}/${this.randomMouth()}/${this.randomHexColor()}`
}
public randomHexColor() {
return Math.random().toString(16).slice(2, 8)
}
public randomEye() {
return this.randomArrayElement(['eyes1', 'eyes10', 'eyes2', 'eyes3', 'eyes4', 'eyes5', 'eyes6', 'eyes7', 'eyes9'])
}
public randomNose() {
return this.randomArrayElement(['nose2', 'nose3', 'nose4', 'nose5', 'nose6', 'nose7', 'nose8', 'nose9'])
}
public randomMouth() {
return this.randomArrayElement(['mouth1', 'mouth10', 'mouth11', 'mouth3', 'mouth5', 'mouth6', 'mouth7', 'mouth9'])
}
public randomArrayElement(array) {
return array[Math.floor((Math.random() * array.length))]
}
public requestPosts_old() {
/*this.$http.jsonplaceholder
.get('posts')
.then(response => { this.setPosts(response.data) })
*/
}
public requestPosts() {
// console.log('requestPosts...')
let prova = [{ title: 'primo' }, { title: 'Secondo' }]
this.posts.push(...prova)
}
}

26
src/layouts/toolbar/messagePopover/messagePopover.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<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">
<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"
v-for="post in filteredPosts"
>
<img class="item-primary" :src="randomAvatarUrl()">
<div class="item-content has-secondary">
<div>{{post.title}}</div>
<div>{{randomDate()}}</div>
</div>
<span class="label bg-red text-white item-secondary no-margin">
<i class="left-detail"></i> New
</span>
</div>
</div>
</q-popover>
</button>
</template>
<script lang="ts" src="./messagePopover.ts">
</script>