- created logo FreePlanet in SVG animation !

.env.development

@@ -6,7 +6,7 @@ LANG_DEFAULT='it'
 MONGODB_HOST='http://localhost:3000'
 PAO_APP_ID='KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF'
 MASTER_KEY='KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T'
-LOGO_REG='quasar-logo-full.svg'
+LOGO_REG='freeplanet-logo-full.svg'
 TEST_EMAIL='paolo.arena77@gmail.com'
 TEST_USERNAME='paoloar77'
 TEST_PASSWORD='mypassword@1A'

package-lock.json

@@ -10611,6 +10611,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true
     },
+    "gsap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-2.0.2.tgz",
+      "integrity": "sha512-WyT0uuDNb+5xMccx4SsVcI1CwvIL0BPgP8TyJJmMWT/btGXUNtKesnkXFMMshYs37renFhDo1P5NEoizeonviQ=="
+    },
     "gzip-size": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "google-translate-api": "^2.3.0",
     "graphql": "^0.13.2",
     "graphql-tag": "^2.8.0",
+    "gsap": "^2.0.2",
     "js-cookie": "^2.2.0",
     "localforage": "^1.7.3",
     "normalize.css": "^8.0.0",

src/components/categories/index.ts

@@ -1,2 +1,3 @@
 export * from './SingleCat'
 export * from './category'
+export * from './tabledata'

src/components/categories/tabledata/index.ts

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

src/components/categories/tabledata/tabledata.ts

@@ -0,0 +1,198 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import { ICategory } from '@src/model'
+
+require('./tabledata.scss')
+
+
+@Component({
+})
+export default class Tabledata extends Vue {
+  $q: any
+
+  filter: boolean = false
+  title: string = ''
+  category: string = ''
+  categories_loc: any[] = [{}]
+  categories_arr: any[] = [{}]
+  selected: any [] = []
+  selectedSecond: any [] = []
+
+  data: any [] = [{
+    id: 0,
+    descr_it: 'Frozen Yogurt',
+    descr_en: '',
+    descr_es: ''
+  },
+    {
+      id: 1,
+      descr_it: 'Secondo',
+      descr_en: '',
+      descr_es: ''
+    }]
+
+  columns: any [] = [
+    {
+      name: 'descr_it',
+      required: true,
+      label: 'IT',
+      align: 'left',
+      field: 'descr_it',
+      sortable: true,
+      classes: 'my-class',
+    },
+    {
+      name: 'descr_en',
+      label: 'EN',
+      align: 'left',
+      field: 'descr_en',
+      sortable: true,
+      classes: 'my-class',
+    },
+    {
+      name: 'descr_es',
+      label: 'ES',
+      align: 'left',
+      field: 'descr_es',
+      sortable: true,
+      classes: 'my-class',
+    }
+  ]
+
+  @Watch('categories_loc') valueChanged() {
+    this.updatetable()
+  }
+
+
+  created() {
+    this.loadCat()
+  }
+
+  async loadCat() {
+    await this.$db.categories.toArray().then(ris => this.categories_loc = ris)
+
+    this.updatetable()
+  }
+
+  initcat() {
+
+    const objcat: ICategory = {
+      descr_it: '',
+      descr_en: '',
+      descr_es: ''
+    }
+    return objcat
+
+  }
+
+  async insertCategory() {
+
+    const objcat = this.initcat()
+
+    let myid = 0
+    objcat.descr_it = this.category
+
+    // Add to Indexdb
+    await this.$db.categories.add(objcat
+    ).then(ris => {
+      myid = ris
+    })
+
+    objcat.id = myid
+
+    // Add into the memory
+    this.categories_loc.push(objcat)
+
+    // empty the field
+    this.category = ''
+  }
+
+  async deleteCategory(myarrobj) {
+
+    await myarrobj.forEach(myobj => {
+
+      if (myobj.id !== undefined) {
+        console.log('KEY = ', myobj.id)
+
+        // Delete item
+        let deleteCount = this.$db.categories
+          .where('id').equals(myobj.id)
+          .delete()
+
+        console.log('deleteCount = ', deleteCount)
+        if (deleteCount > 0) {
+          // Remove into the memory
+          this.categories_loc.slice(this.categories_loc.indexOf(myobj), 1)
+
+          this.updatetable()
+
+          return deleteCount
+        }
+      }
+    })
+
+  }
+
+  updatetable() {
+
+    this.filterCategories()
+    this.categories_arr = [...this.categories_loc]
+
+  }
+
+  async filterCategories() {
+
+    if (this.filter) {
+      // #Todo If need to filter the output database ...
+      this.$db.categories
+        .where('descr_it').notEqual('nonlovedi')
+        .toArray()
+        .then((response) => {
+          Promise.all(response.map(key => key))
+            .then((myarr) => {
+              this.categories_loc = [...myarr]
+              return this.categories_loc
+            })
+        })
+    } else {
+      return this.categories_loc
+    }
+  }
+
+  deleteRow() {
+    console.log('SEL = ', this.selectedSecond)
+
+    const seldel = [...this.selectedSecond]
+    if (this.deleteCategory(this.selectedSecond)) {
+      this.$q.notify({
+        color: 'primary',
+        icon: 'delete',
+        message: `Deleted ` + (seldel.length.toString()) + ' item'
+      })
+
+
+    }
+
+  }
+
+  /*
+  await db.transaction('rw', [db.friends], async () => {
+  const friend = await db.friends.get(1);
+  ++friend.age;
+  await db.friends.put(friend);
+  });
+   */
+
+  async modify() {
+    // esempio da sistemare
+    await this.$db.transaction('rw', [this.$db.categories], async () => {
+      const friend = await this.$db.get(1)
+      ++friend.age
+      await this.$db.put(friend)
+    })
+
+  }
+
+
+}

src/components/categories/tabledata/tabledata.vue

@@ -0,0 +1,61 @@
+<template>
+    <q-page>
+        <div class="panel">
+            <p class="caption">Table Data:</p>
+
+            <q-input v-model="category" inverted float-label="Inserisci la Categoria"
+                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+                     v-on:keyup.enter="insertCategory"/>
+
+            <q-table
+                    title="Categories"
+                    :data="categories_arr"
+                    :columns="columns"
+                    row-key="id"
+                    selection="multiple"
+                    color="secondary"
+                    :selected.sync="selectedSecond">
+
+
+                <!--
+
+                <q-tr slot="body" slot-scope="props" :props="props">
+                    <q-td key="desc" :props="props">
+                      {{ props.row.name }}
+                      <q-popup-edit v-model="props.row.name">
+                        <q-field count>
+                          <q-input v-model="props.row.name" />
+                        </q-field>
+                      </q-popup-edit>
+                    </q-td>
+                    <q-td key="calories" :props="props">
+                      {{ props.row.calories }}
+                      <q-popup-edit v-model="props.row.calories" title="Update calories" buttons>
+                        <q-input type="number" v-model="props.row.calories" />
+                      </q-popup-edit>
+                    </q-td>
+                    <q-td key="fat" :props="props">{{ props.row.fat }}</q-td>
+                    <q-td key="carbs" :props="props">{{ props.row.carbs }}</q-td>
+                    <q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
+                    <q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
+                    <q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
+                    <q-td key="iron" :props="props">{{ props.row.iron }}</q-td>
+                  </q-tr>
+                    -->
+
+                <!-- gets displayed only when there's at least one row selected -->
+                <template slot="top-selection" slot-scope="props">
+                    <!--<q-btn color="secondary" flat label="Action 1" class="q-mr-sm"/>
+                    <q-btn color="secondary" flat label="Action 2"/>-->
+                    <div class="col"/>
+                    <q-btn color="negative" flat round delete icon="delete" @click="deleteRow"/>
+                </template>
+            </q-table>
+
+        </div>
+    </q-page>
+
+
+</template>
+<script lang="ts" src="./tabledata.ts">
+</script>

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './categories'
+export * from './logo'
 

src/components/logo/index.ts

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

src/components/logo/logo.scss

@@ -0,0 +1,48 @@
+.svgclass{
+  color: white;
+  transform: translateY(0px);
+
+}
+
+.svgclass_animate {
+  transform: translateY(-70px);
+  color: red;
+}
+
+#sun {
+  animation: around 5s infinite;
+
+}
+
+@keyframes gravity{
+  0%{
+    transform: rotateY(0deg);
+  }
+  100%{
+    transform: rotateY(360deg);
+  }
+}
+
+
+@keyframes around {
+  0% {
+    cx: 20;
+    cy: 22;
+  }
+  20% {
+    cx: 25;
+    cy: 24;
+  }
+  50% {
+    cx: 40;
+    cy: 26;
+  }
+  80% {
+    cx: 55;
+    cy: 24;
+  }
+  100% {
+    cx: 60;
+    cy: 22;
+  }
+}

src/components/logo/logo.ts

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+
+require('./logo.scss')
+
+import { TimelineLite, Back } from 'gsap'
+
+@Component({
+
+})
+export default class Logo extends Vue {
+  svgclass: string = 'svgclass'
+  created() {
+    this.animate()
+  }
+
+  animate () {
+    const timeline = new TimelineLite()
+
+    timeline.to('#sun', 5, {
+      cy: 20,
+      cx: 60,
+      ease: Back.easeInOut // Specify an ease
+    })
+
+  }
+
+  public logoimg() {
+    return process.env.LOGO_REG
+  }
+
+}

src/components/logo/logo.vue

@@ -0,0 +1,7 @@
+<template>
+    <div id="logo">
+        <img id="logoimg" alt="FreePlanet" :src="`assets/${logoimg()}`">
+    </div>
+</template>
+<script lang="ts" src="./logo.ts">
+</script>

src/layouts/drawer/menuOne.vue

@@ -3,13 +3,15 @@
     <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)}} <div class="menu_freccina"><i aria-hidden="true" class="v-icon material-icons theme--light">keyboard_arrow_down</i></div>
                 </div>
+                -->
+                <div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
                 <template v-for="child in parent.routes">
                     <q-slide-transition :duration=200>
-                        <div v-show="parent.show">
+                        <div v-show="true">
                             <q-item link :to="child.route" exact
                                     class="item item-link drawer-closer cursor-pointer">
                                 <i :class="child.faIcon" class="item-primary"></i>
@@ -18,7 +20,6 @@
                         </div>
                     </q-slide-transition>
                 </template>
-            </q-list>
         </template>
     </div>
 </template>
@@ -61,6 +62,11 @@
 </script>
 <style scoped>
 
+    .q-list-header {
+        min-height: 12px;
+        padding: 5px 8px;
+    }
+
     .menu-hr{
         border-color: #dedede;
         height: 0.5px;

src/root/home/animate.js

@@ -0,0 +1,28 @@
+
+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
+}

src/root/home/home.ts

@@ -2,16 +2,19 @@ import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
 import { GlobalStore } from '@store'
 
+import { Logo } from '@components'
+
 require('./home.scss')
 
 @Component({
-
+  components: { Logo }
 })
 export default class Home extends Vue {
   text: string = ''
   visibile: boolean = false
   cardvisible: string = 'hidden'
   displaycard: string = 'block'
+  svgclass: string = 'svgclass'
   $t: any
 
   public $q

src/root/home/home.vue

@@ -1,36 +1,6 @@
 <template >
     <q-page class="flex flex-center">
-        <img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
-
-        <q-btn round color="blue" icon="add" id="shareimagebutton" @click="openCreatePostModal">
-            <q-spinner-facebook slot="loading"/>
-        </q-btn>
-
-        <q-field
-                icon="wifi"
-                helper="Some helper"
-        >
-            <q-input
-                    v-model="conta"
-            />
-            <br>{{$t('comp.Conta')}} = {{ conta }}
-        </q-field>
-
-        <!--<q-btn
-                @click="showNotification"
-                color="primary"
-                label="Mostra notifica"
-        />-->
-
-        <q-card id="mycard" class="mycard" :style="mystilecard">
-            <q-card-title>
-                Card Title
-            </q-card-title>
-            <q-card-separator/>
-            <q-card-main>
-                Card Content
-            </q-card-main>
-        </q-card>
+        <logo></logo>
 
     </q-page>
 

src/views/login/signin/signin.ts

@@ -10,6 +10,8 @@ import { validations, TSignin } from './signin-validate'
 
 import { validationMixin } from 'vuelidate'
 
+import { Logo } from '@components'
+
 import './signin.scss'
 import router from '@router'
 
@@ -18,7 +20,8 @@ import router from '@router'
 
 @Component({
   mixins: [validationMixin],
-  validations: validations
+  validations: validations,
+  components: { Logo }
 })
 
 export default class Signin extends Vue {
@@ -43,10 +46,6 @@ export default class Signin extends Vue {
     return process.env
   }
 
-  public logoimg() {
-    return process.env.LOGO_REG
-  }
-
   showNotif(msg: any) {
     this.$q.notify(msg)
   }

src/views/login/signin/signin.vue

@@ -3,8 +3,7 @@
         <q-page padding class="signin">
             <div class="text-center">
                 <p>
-                    <!--<img src="../../../assets/quasar-logo-full.svg">-->
-                    <img :src="`../../../assets/${logoimg()}`">
+                    <logo></logo>
                 </p>
             </div>
 

src/views/login/signup/signup.ts

@@ -8,13 +8,16 @@ import { validations, TSignup } from './signup-validate'
 
 import { validationMixin } from 'vuelidate'
 
+import { Logo } from '@components'
+
 import './signup.scss'
 
 // import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
 
 @Component({
   mixins: [validationMixin],
-  validations: validations
+  validations: validations,
+  components: { Logo }
 })
 
 export default class Signup extends Vue {
@@ -41,10 +44,6 @@ export default class Signup extends Vue {
   mounted() {
   }
 
-  public logoimg() {
-    return process.env.LOGO_REG
-  }
-
   get allowSubmit() {
 
     let error = this.$v.$error || this.$v.$invalid

src/views/login/signup/signup.vue

@@ -2,8 +2,7 @@
     <q-page padding class="signup">
         <div class="text-center">
             <p>
-                <!--<img src="../../../assets/quasar-logo-full.svg">-->
-                <img :src="`../../../assets/${logoimg()}`">
+                <logo></logo>
             </p>
         </div>
 

src/views/login/test.vue

@@ -3,7 +3,6 @@
         <q-page padding class="signup">
             <div class="text-center">
                 <p>
-                    <!--<img src="../../../assets/quasar-logo-full.svg">-->
                     <img :src="`../../../assets/`+`${env('LOGO_REG')}`">
                 </p>
             </div>