Sorting fixed

- added tables Skills, Sectors,

.env.development

@@ -1,4 +1,4 @@
-APP_VERSION="0.1.3"
+APP_VERSION="0.1.4"
 SERVICE_WORKER_FILE="service-worker.js"
 APP_ID="1"
 DIRECTORY_LOCAL="newfreeplanet"

.env.prod.bak

@@ -1,4 +1,4 @@
-APP_VERSION="0.1.3"
+APP_VERSION="0.1.4"
 SERVICE_WORKER_FILE="service-worker.js"
 APP_ID="1"
 DIRECTORY_LOCAL=newfreeplanet

.env.production

@@ -1,4 +1,4 @@
-APP_VERSION="0.1.3"
+APP_VERSION="0.1.4"
 SERVICE_WORKER_FILE="service-worker.js"
 APP_ID="1"
 DIRECTORY_LOCAL=newfreeplanet

.env.test

@@ -1,4 +1,4 @@
-APP_VERSION="0.1.3"
+APP_VERSION="0.1.4"
 SERVICE_WORKER_FILE="service-worker.js"
 APP_ID="1"
 DIRECTORY_LOCAL=newfreeplanet

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@quasar/extras": "^1.11.0",
     "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.6",
+    "@vue-leaflet/vue-leaflet": "^0.6.1",
     "@vue/compat": "^3.2.12",
     "@vue/compiler-sfc": "^3.2.12",
     "@vue/eslint-config-standard": "^6.1.0",

src/components/CGridTableRec/CGridTableRec.ts

@@ -80,7 +80,7 @@ export default defineComponent({
       required: false,
       default: {},
     },
-    pagination: {
+    prop_pagination: {
       type: Object as PropType<IPagination>,
       required: false,
       default: () => {
@@ -100,7 +100,7 @@ export default defineComponent({
     const globalStore = useGlobalStore()
     const isfinishLoading = computed(() => globalStore.finishLoading)
 
-    const mypagination = toRef(props, 'pagination')
+    const pagination = ref(<IPagination> { sortBy: 'desc', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 })
 
     const addRow = ref('Aggiungi')
 
@@ -163,24 +163,26 @@ export default defineComponent({
 
     // emulate ajax call
     // SELECT * FROM ... WHERE...LIMIT...
-    async function fetchFromServer(startRow: any, endRow: any, myfilter: any, myfilterand: any, sortBy: any, descending: any) {
+    async function fetchFromServer(startRow: any, endRow: any, param_myfilter: any, param_myfilterand: any, sortBy: any, descending: any) {
 
-      let myobj = null
+      let myobj: any = {}
       if (sortBy) {
         myobj = {}
-        if (descending) { // @ts-ignore
+        if (descending) {
           myobj[sortBy] = -1
-        } else { // @ts-ignore
+        } else {
           myobj[sortBy] = 1
         }
       }
 
+      // console.log('sortBy', sortBy)
+
       let params: IParamsQuery = {
         table: mytable.value,
         startRow,
         endRow,
-        filter: myfilter,
+        filter: param_myfilter,
-        filterand: myfilterand,
+        filterand: param_myfilterand,
         sortBy: myobj,
         descending,
         userId: userStore.my._id,
@@ -212,8 +214,8 @@ export default defineComponent({
       emit('savefilter', myfilterand)
     }
 
-    function onRequest() {
+    function onRequest(props: any) {
-      const { page, rowsPerPage, rowsNumber, sortBy, descending } = mypagination.value
+      const { page, rowsPerPage, rowsNumber, sortBy, descending } = props.pagination
       const myfilternow = myfilter.value
       const myfilterandnow = myfilterand.value
 
@@ -244,7 +246,7 @@ export default defineComponent({
       // fetch data from "server"
       return fetchFromServer(startRow, endRow, myfilternow, myfilterandnow, sortBy, descending).then((ris: any) => {
 
-        mypagination.value.rowsNumber = getRowsNumberCount(myfilter)
+        pagination.value.rowsNumber = getRowsNumberCount(myfilter)
 
         // clear out existing data and add new
         if (returnedData.value === []) {
@@ -259,10 +261,10 @@ export default defineComponent({
         // console.log('serverData', serverData)
 
         // don't forfunction to update local pagination object
-        mypagination.value.page = page
+        pagination.value.page = page
-        mypagination.value.rowsPerPage = rowsPerPage
+        pagination.value.rowsPerPage = rowsPerPage
-        mypagination.value.sortBy = sortBy
+        pagination.value.sortBy = sortBy
-        mypagination.value.descending = descending
+        pagination.value.descending = descending
 
         // console.log('pagination', pagination)
 
@@ -274,7 +276,9 @@ export default defineComponent({
 
 
     function refresh_table() {
-      onRequest()
+      onRequest({
+        pagination: pagination.value
+      })
       rowclicksel.value = null
     }
 
@@ -348,7 +352,7 @@ export default defineComponent({
     }
 
     function SaveValdb(newVal: any, valinitial: any) {
-      console.log('SaveValdb', newVal)
+      // console.log('SaveValdb', newVal)
       // console.log('SaveValue', newVal, 'rowsel', rowsel)
 
       colsel.value = colclicksel.value
@@ -359,7 +363,7 @@ export default defineComponent({
 
 
     function showandsel(row: any, col: any, newval: any, valinitial: any) {
-      console.log('showandsel', row, col, newval)
+      // console.log('showandsel', row, col, newval)
       rowsel = row
       colsel.value = col
       idsel = row._id
@@ -369,7 +373,7 @@ export default defineComponent({
     }
 
     function annulla(val: any) {
-      console.log('annulla')
+      // console.log('annulla')
       globalStore.DeleteRec({ table: mytable.value, id: newRecord.value._id })
         .then((ris) => {
           return true
@@ -436,7 +440,7 @@ export default defineComponent({
     }
 
     function getrows() {
-      return mypagination.value.rowsNumber
+      return pagination.value.rowsNumber
     }
 
     async function createNewRecordDialog() {
@@ -482,7 +486,7 @@ export default defineComponent({
       const data = await globalStore.saveTable(mydata)
 
       serverData.value.push(data)
-      mypagination.value.rowsNumber++
+      pagination.value.rowsNumber++
 
       loading.value = false
     }
@@ -506,6 +510,7 @@ export default defineComponent({
       mytitle.value = props.prop_mytitle
       mycolumns.value = props.prop_mycolumns
       colkey.value = props.prop_colkey
+      pagination.value = props.prop_pagination
 
     }
 
@@ -526,9 +531,9 @@ export default defineComponent({
           tablesel.value = mytable.value
       }
 
-      // console.log('2) tablesel', tablesel.value)
+      console.log('2) tablesel', tablesel.value)
 
-      changeTable(false)
+      changeTable(tablesel.value)
 
     }
 
@@ -643,7 +648,7 @@ export default defineComponent({
         }
       }
 
-      // console.log('tablesel', tablesel, 'mytab', mytab)
+      console.log('tablesel', tablesel.value, 'mytab', mytab)
 
       if (mytab) {
         mytitle.value = mytab.label
@@ -828,7 +833,7 @@ export default defineComponent({
       colExtra,
       colclicksel,
       selected,
-      mypagination,
+      pagination,
       loading,
       onRequest,
       serverData,

src/components/CGridTableRec/CGridTableRec.vue

@@ -15,7 +15,7 @@
       :rows="serverData"
       :columns="mycolumns"
       :filter="myfilter"
-      v-model:pagination="mypagination"
+      v-model:pagination="pagination"
       :row-key="colkey"
       :loading="loading"
       @request="onRequest"
@@ -30,20 +30,19 @@
 
 
       <template v-slot:header="props">
-
         <q-tr :props="props">
           <q-th>
 
           </q-th>
           <q-th
-            v-for="col in props.cols" :key="col.name">
+            v-for="col in props.cols" :key="col.name"
-            <div
+            :props="props"
-              v-if="colVisib.includes(col.field + col.subfield)"
+            class="text-italic text-weight-bold"
-              :props="props"
+          >
-              class="text-italic text-weight-bold"
+            <span v-if="col && colVisib.includes(col.field + col.subfield)">
-            >
               {{ col.label }}
-            </div>
+            </span>
+
           </q-th>
         </q-tr>
       </template>

src/components/CMySelect/CMySelect.ts

@@ -21,7 +21,7 @@ export default defineComponent({
       required: false,
       default: ''
     },
-    optlab:[String, Function],
+    optlab: [String, Function],
     optval: {
       type: String,
       required: true,
@@ -67,20 +67,22 @@ export default defineComponent({
     }
 
     function mounted() {
-      const rec: any = props.options.find((myrec: any) => myrec[`${props.optval}`] === props.value)
+      if (props.options) {
-      // console.log('rec', rec)
+        const rec: any = props.options.find((myrec: any) => myrec[`${props.optval}`] === props.value)
-      if (!props.useinput) {
+        // console.log('rec', rec)
-        if (props.value) {
+        if (!props.useinput) {
-          myvalue.value = props.value.toString()
+          if (props.value) {
-        }
+            myvalue.value = props.value.toString()
-      } else {
+          }
-        if (rec) {
+        } else {
-          if (props.funcgetvaluebyid)
+          if (rec) {
-            myvalue.value = props.funcgetvaluebyid(rec[`${props.optval}`])
+            if (props.funcgetvaluebyid)
-          else
+              myvalue.value = props.funcgetvaluebyid(rec[`${props.optval}`])
-            myvalue.value = rec[`${props.optlab}`]
+            else
+              myvalue.value = rec[`${props.optlab}`]
 
-          // console.log('myvalue', myvalue, 'optval', optval, 'rec', rec[`${optval}`])
+            // console.log('myvalue', myvalue, 'optval', optval, 'rec', rec[`${optval}`])
+          }
         }
       }
     }

src/db/static_data.ts

@@ -292,6 +292,17 @@ const baseroutes: IListRoutes[] = [
     inmenu: true,
     infooter: true,
   },
+  {
+    active: true,
+    order: 100,
+    path: '/presentazione',
+    materialIcon: 'fas fa-info',
+    name: 'pages.presentazione',
+    component: () => import('@src/root/presentazione/presentazione.vue'),
+    reqauth: false,
+    inmenu: true,
+    infooter: true,
+  },
   {
     active: true,
     order: 120,

src/layouts/menuone/menuOne.scss

@@ -1,3 +1,6 @@
+.prova{
+  color: red;
+}
 .q-list-header {
   min-height: 12px;
   padding: 5px 8px;
@@ -20,18 +23,6 @@
   margin: 1px;
 }
 
-/*
-.menu-enter-active, .scale-enter {
-    -webkit-animation: moveFromTopFade .5s ease both;
-    animation: moveFromTopFade .5s ease both;
-}
-
-.menu-leave-to, .scale-leave-active {
-    -webkit-animation: moveToBottom .5s ease both;
-    animation: moveToBottom .5s ease both;
-}
-*/
-
 .router-link-active {
   color: #027be3;
   background-color: #dadada !important;
@@ -76,7 +67,7 @@
 }
 
 .isManager {
-  color: green;
+  color: green !important;
 }
 
 .isTutor {
@@ -127,3 +118,17 @@
   font-size: 2.5rem !important;
   border-radius: 8px;
 }
+
+
+/*
+.menu-enter-active, .scale-enter {
+    -webkit-animation: moveFromTopFade .5s ease both;
+    animation: moveFromTopFade .5s ease both;
+}
+
+.menu-leave-to, .scale-leave-active {
+    -webkit-animation: moveToBottom .5s ease both;
+    animation: moveToBottom .5s ease both;
+}
+*/
+

src/layouts/menuone/menuOne.vue

@@ -65,7 +65,7 @@
                             expand-icon-class="my-menu-separat"
                             :header-class="getmymenuclass(child2)"
                             active-class="my-menu-active">
-                            AA5:
+
                               <div v-for="(child3, index) in child2.routes2" :key="index">
                                 <div v-if="child3.active">
                                   <q-expansion-item
@@ -136,6 +136,6 @@
 <script lang="ts" src="./menuOne.ts">
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import './menuOne.scss';
 </style>

src/model/GlobalStore.ts

@@ -238,6 +238,9 @@ export interface IGlobalState {
   TIMER_STATE: number
   URL_RITORNA: string
   URL_RESTORE: string
+  levels: ILevel[],
+  skills: ISkill[],
+  sectors: ISector[],
 }
 
 export interface IMenuList {
@@ -528,3 +531,22 @@ export interface IPagination {
   page: number,
   rowsPerPage: number // specifying this determines pagination is server-side
 }
+
+export interface ISkill {
+  descr: string
+  idSector: string
+  icon?: string
+  img?: string
+}
+
+export interface ISector {
+  descr: string
+  icon?: string
+  img?: string
+}
+
+export interface ILevel {
+  _id: string
+  descr: string
+  years_of_exp: number
+}

src/root/home/home.scss

@@ -1,438 +0,0 @@
-
-.testo-banda {
-  //background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
-  //background: linear-gradient(180deg, #3144f0, transparent);
-  //background: rgba(0, 0, 0, .6)
-}
-
-$grayshadow: #555;
-
-$textcol: blue;
-$textcol_scuro: darkblue;
-
-p {
-  margin: 0 0 1.25rem;
-  //text-shadow: .125rem .125rem .25rem $grayshadow;
-}
-
-h4 {
-  font-size: 1.25rem;
-}
-
-.mycard {
-  visibility: hidden;
-}
-
-.landing {
-}
-
-.landing_background {
-  background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
-  background-size: cover
-}
-
-.landing > section {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  //padding: 0 16px
-}
-
-.intro {
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  /* flex-flow: row nowrap; */
-
-  padding: 1.25rem 0 1.25rem 0;
-  margin: .125rem;
-
-  * {
-    width: 100%;
-    flex: 1;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  &__associazione {
-    min-width: 350px;
-  }
-
-  &__comeassociarsi{
-    min-width: 350px;
-  }
-}
-
-.subtitle {
-  font-weight: 600;
-  text-align: center;
-  letter-spacing: 0.125rem;
-  text-transform: uppercase;
-  font-size: 1rem;
-}
-
-.landing > section.padding {
-  padding: 5.62rem 1rem;
-}
-
-.landing > section.padding_testo {
-  padding-top: 1.25rem;
-  padding-bottom: 1rem;
-}
-
-.landing > section.padding_gallery {
-  padding-top: 3.125rem;
-  padding-bottom: 5.625rem;
-}
-
-.landing > section > div {
-  position: relative;
-  max-width: 1240px;
-  width: 100%
-}
-
-.landing__toolbar {
-  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
-  background: linear-gradient(180deg, #000, transparent);
-  padding: 0 !important
-}
-
-.landing__toolbar .q-btn {
-  border-radius: 0 0 .315rem .315rem;
-  -ms-flex-item-align: stretch;
-  align-self: stretch
-}
-
-.landing__hero {
-  min-height: 50vh
-}
-
-.landing__header {
-  height: 18vh
-}
-
-.landing__arrow {
-  bottom: 1.5rem;
-  opacity: .4
-}
-
-.landing__front {
-  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
-  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
-}
-
-.landing__logo {
-  width: 9.40rem;
-  height: 9.40rem;
-  margin-top: 1.315rem;
-  //-webkit-animation: logo-rotate 240s linear infinite;
-  //animation: logo-rotate 240s linear infinite
-}
-
-.landing__features .q-icon {
-  font-size: 4rem
-}
-
-h4 {
-  line-height: 1.5;
-  text-shadow: .25rem .25rem .5rem $grayshadow;
-}
-
-.landing__features h4, .landing__features h6 {
-  margin: 1rem 0
-}
-
-.landing__features p {
-  opacity: .7;
-  font-size: 1rem;
-  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, .8) 95%, #FFF);
-  padding-top: 4.5rem !important;
-  padding-bottom: 4.5rem !important;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  color: #9f9f9f;
-}
-
-.icon_contact:hover {
-  color: blue;
-  border-color: white;
-  border-width: .0625rem;
-}
-
-.landing__footer .doc-link {
-  color: $textcol;
-}
-
-.landing__footer .doc-link:hover {
-  opacity: .8
-}
-
-.landing__swirl-bg {
-  background-repeat: no-repeat !important;
-  background-position: top;
-  background-size: contain !important;
-  background-image: url(../../../public/images/landing_first_section.png) !important
-}
-
-.feat-descr {
-  font-size: 1.15rem;
-}
-
-.feat-descr:hover {
-  transition: opacity 0.5s ease-in-out;
-  opacity: 0.9;
-}
-
-.q-col-gutter-sm {
-  padding: 3.125rem 3.125rem;
-  //margin-left: -48px
-}
-
-body.mobile .landing {
-  //background: unset
-}
-
-body.mobile .landing:before {
-  content: "";
-  position: fixed;
-  top: 0;
-  height: 100vh;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  //background: #000 url(../../public/images/cover.jpg) 50%;
-
-  background-size: cover
-}
-
-/*
-@-webkit-keyframes logo-rotate {
-  to {
-    -webkit-transform: rotate(-1turn);
-    transform: rotate(-1turn)
-  }
-}
-
-@keyframes logo-rotate {
-  to {
-    -webkit-transform: rotate(-1turn);
-    transform: rotate(-1turn)
-  }
-}
-*/
-
-.home {
-  //background-color: rgb(250, 250, 250);
-  padding: 3.125rem;
-  display: flex;
-  //flex-wrap: nowrap;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.btn-start {
-  margin: 3.125rem;
-}
-
-.shadow {
-  //color: white;
-  text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
-}
-
-.shadow-max {
-  //color: white;
-  text-shadow: .25rem .25rem .5rem $grayshadow;
-}
-
-.text-h1 {
-  font-size: 6rem;
-  font-weight: 300;
-  line-height: 6rem;
-  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;
-}
-
-.text-vers{
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1.75rem;
-  letter-spacing: .00937em;
-  text-shadow: .25rem .25rem .5rem $grayshadow;
-}
-
-.homep-cover-img-1 {
-  background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
-  //transition: background-image 1s ease-in-out;
-}
-
-.homep-cover-img-2 {
-  background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
-  //transition: background-image 1s ease-in-out;
-}
-
-.homep-cover-img-3 {
-  background: #000 url(../../../public/images/foto3.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: 1.75rem
-}
-
-.landing__footer-icons a {
-  margin: 0 .5rem .5rem;
-  text-decoration: none;
-  outline: 0;
-  color: $textcol;
-  transition: color .28s
-}
-
-.landing__footer-icons a:hover {
-  color: $textcol_scuro;
-}
-
-.doc-img {
-  max-width: 100%;
-}
-
-.mylist {
-  background: #3fdaff;
-  padding-left: 1.25rem;
-}
-
-.clgutter {
-  margin-top: 1.25rem;
-  padding: .62rem;
-}
-
-.carousel_img_3 {
-  //background-image: url(../../public/images/cibo_sano.jpg);
-  background-size: cover !important;
-  background-position: 50% center !important;
-  background-repeat: no-repeat !important;
-}
-
-
-@media (max-width: 718px) {
-  // PER VERSIONE MOBILE
-
-  .landing__hero {
-    text-align: center
-  }
-  .landing__header {
-    height: 7vh
-  }
-  .clgutter {
-    margin-top: 0;
-    padding: 0;
-  }
-  .landing__hero .text-h1 {
-    font-size: 3rem;
-    line-height: 3.05rem;
-    margin-bottom: 1.5rem
-  }
-
-  .landing > section.padding {
-    padding: 2.5rem 1rem;
-  }
-
-  .landing > section.padding_testo {
-    padding-top: 1.25rem;
-    padding-bottom: 1rem;
-  }
-
-  .landing > section.padding_gallery {
-    padding-top: 3.125rem;
-    padding-bottom: 5.625rem;
-  }
-
-  .landing__features h4, .landing__features h6 {
-    margin: 1.25rem 0
-  }
-
-  h4 {
-    line-height: 1.4;
-    text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
-  }
-
-  .landing .feature-item {
-    text-align: center;
-    margin-top: 1.25rem;
-  }
-  .landing__hero-content {
-    padding-bottom: 11.25rem;
-  }
-  .landing__hero-btns {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center
-  }
-
-  .q-col-gutter-sm {
-    padding: .625rem .315rem;
-  }
-
-  .text-subtitle1 {
-    font-size: 1.25rem;
-  }
-  .text-vers{
-    font-size: 0.6rem;
-  }
-
-  .carousel_img_3 {
-    //background-image: url(../../public/images/cibo_sano.jpg);
-    background-size: 620px 620px !important;
-    background-position: 50% top !important;
-    background-repeat: no-repeat !important;
-  }
-
-}
-
-.custom-caption {
-  text-align: center;
-  padding: .75rem;
-  color: $textcol;
-  background-color: rgba(0, 0, 0, .3);
-}
-
-.mycontacts {
-  color: gray;
-  letter-spacing: 0.078rem;
-}
-
-.mycontacts_title {
-  text-shadow: 0.125rem 0.125rem 0.125rem #555;
-  font-weight: bold;
-  color: #999;
-  letter-spacing: 0.125rem;
-}
-
-.mycontacts_text {
-  color: #999;
-  letter-spacing: 0.093rem;
-}
-

src/root/home/home.ts

@@ -1,158 +1,58 @@
-import { useUserStore } from '@store/UserStore'
+
-import { useI18n } from '@src/boot/i18n'
+import { LMap, LIcon, LTileLayer, LMarker, LControlLayers, LTooltip, LPopup, LPolyline, LPolygon, LRectangle,  } from '@vue-leaflet/vue-leaflet'
+
+import 'leaflet/dist/leaflet.css'
+
 import {
-  defineComponent, ref, onBeforeUnmount, onMounted,
+  defineComponent, ref, computed,
 } from 'vue'
-import { useRouter } from 'vue-router'
-import { Logo, Footer } from '@/components'
 import { tools } from '@src/store/Modules/tools'
 
+
 export default defineComponent({
   name: 'Home',
-  components: { Logo, Footer },
+  components: {
+    LMap,
+    LIcon,
+    LTileLayer,
+    LMarker,
+    LControlLayers,
+    LTooltip,
+    LPopup,
+    LPolyline,
+    LPolygon,
+    LRectangle,
+  },
 
   setup() {
-    const { t } = useI18n();
-    const $router = useRouter()
-    const visibile = ref(false)
-    const cardvisible = ref('hidden')
-    const displaycard = ref('block')
-    const firstClassSection = ref('fade homep-cover-img animate-fade homep-cover-img-1')
-    const polling: any = ref()
-    const slide = ref('first')
-    const animare = ref(0)
 
-    function initprompt() {
+    const zoom = ref(2)
-      window.addEventListener('beforeinstallprompt', (event) => {
+    const iconWidth = ref(25)
-        // console.log('********************************   beforeinstallprompt fired')
+    const iconHeight = ref(40)
-        event.preventDefault()
+
-        // console.log('§§§§§§§§§§§§§§§§§§§§  IMPOSTA DEFERRED PROMPT  !!!!!!!!!!!!!!!!!  ')
+    const iconUrl = computed(() => `https://placekitten.com/${iconWidth.value}/${iconHeight.value}`)
-        // #Todo++ IMPOSTA DEFERRED PROMPT
+    const iconSize = computed(() => [iconWidth.value, iconHeight.value])
-        return false
+
-      })
+    function log(a: any) {
+      console.log(a)
     }
 
-    function created() {
+    function changeIcon() {
-      initprompt()
+      iconWidth.value += 2
-
+      if (iconWidth.value > iconHeight.value) {
-      animare.value = process.env.DEV ? 0 : 8000
+        iconWidth.value = Math.floor(iconHeight.value / 2)
-    }
-
-    onMounted(() => {
-      let primo = true
-      const mytime = 10000
-      polling.value = setInterval(() => {
-        firstClassSection.value = `landing_background fade homep-cover-img ${primo ? 'homep-cover-img-2' : 'homep-cover-img-1'}`
-        primo = !primo
-
-        // console.log('this.firstClassSection', this.firstClassSection)
-      }, mytime)
-    })
-
-    function appname() {
-      return t('msg.myAppName')
-    }
-
-    onBeforeUnmount(() => {
-      console.log('beforeDestroy')
-      clearInterval(polling.value)
-    })
-
-    function isLogged() {
-      const userStore = useUserStore()
-      return userStore.isLogged
-    }
-
-    function TelegramSupport() {
-      return process.env.TELEGRAM_SUPPORT
-    }
-
-    function FBPage() {
-      return process.env.URL_FACEBOOK
-    }
-
-    function meta() {
-      return {
-        keywords: { name: 'keywords', content: 'Quasar website' },
-        // meta tags
-        meta: {
-          mykey: { name: 'mykey', content: 'Key 1' },
-          description: { name: 'description', content: 'Page 1' },
-          keywords: { name: 'keywords', content: 'Quasar website' },
-          equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' },
-        },
       }
     }
 
-    function mystilecard() {
-      return {
-        visibility: cardvisible.value,
-        display: displaycard.value,
-      }
-    }
-
-    function getenv(myvar: any) {
-      try {
-        return process.env[myvar]
-      } catch (e) {
-        return ''
-      }
-    }
-
-    function isInCostruction() {
-      return process.env.IN_CONSTRUCTION === '1'
-    }
-
-    function getPermission() {
-      return Notification.permission
-    }
-
-    function NotServiceWorker() {
-      return (!('serviceWorker' in navigator))
-    }
-
-    function PagLogin() {
-      $router.replace('/signin')
-    }
-
-    function PagReg() {
-      $router.replace('/signup')
-    }
-
-    function openCreatePostModal() {
-      console.log('APERTO ! openCreatePostModal')
-
-      visibile.value = !visibile.value
-
-      if (visibile.value) {
-        displaycard.value = 'block'
-        cardvisible.value = 'visible'
-      } else {
-        displaycard.value = 'block'
-        cardvisible.value = 'hidden'
-      }
-    }
-
-    created()
-
     return {
-      t,
-      appname,
-      isLogged,
-      TelegramSupport,
-      FBPage,
-      meta,
-      mystilecard,
-      getenv,
-      isInCostruction,
-      getPermission,
-      NotServiceWorker,
-      PagLogin,
-      PagReg,
-      openCreatePostModal,
-      slide,
       tools,
-      animare,
+      zoom,
+      iconWidth,
+      iconHeight,
+      iconUrl,
+      iconSize,
+      changeIcon,
+      log,
     }
   },
 })

src/root/home/home.vue

@@ -1,425 +1,80 @@
 <template>
-  <q-page class="text-white">
+  <q-page class="">
-    <div class="landing">
+    <h1>Inizio:</h1>
-      <section>
+
-        <div class="landing__hero">
+    <template>
-          <q-carousel
+      <div style="height: 75vh; width: 50vw;">
-            animated
+        <l-map
-            :autoplay="animare"
+          v-model="zoom"
-            swipeable
+          v-model:zoom="zoom"
-            infinite
+          :center="[47.41322, -1.219482]"
-            navigation
+          @move="log('move')"
-            transition-next="slide-left"
+        >
-            transition-prev="slide-right"
+          <l-tile-layer
-            v-model="slide"
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            height="100%"
+          ></l-tile-layer>
-            width="100%"
+          <l-control-layers />
+          <l-marker :lat-lng="[0, 0]" draggable @moveend="log('moveend')">
+            <l-tooltip>
+              lol
+            </l-tooltip>
+          </l-marker>
+
+          <l-marker :lat-lng="[47.41322, -1.219482]">
+            <l-icon :icon-url="iconUrl" :icon-size="iconSize" />
+          </l-marker>
+
+          <l-marker :lat-lng="[50, 50]" draggable @moveend="log('moveend')">
+            <l-popup>
+              lol
+            </l-popup>
+          </l-marker>
+
+          <l-polyline
+            :lat-lngs="[
+          [47.334852, -1.509485],
+          [47.342596, -1.328731],
+          [47.241487, -1.190568],
+          [47.234787, -1.358337],
+        ]"
+            color="green"
+          ></l-polyline>
+          <l-polygon
+            :lat-lngs="[
+          [46.334852, -1.509485],
+          [46.342596, -1.328731],
+          [46.241487, -1.190568],
+          [46.234787, -1.358337],
+        ]"
+            color="#41b782"
+            :fill="true"
+            :fillOpacity="0.5"
+            fillColor="#41b782"
+          />
+          <l-rectangle
+            :lat-lngs="[
+          [46.334852, -1.509485],
+          [46.342596, -1.328731],
+          [46.241487, -1.190568],
+          [46.234787, -1.358337],
+        ]"
+            :fill="true"
+            color="#35495d"
+          />
+          <l-rectangle
+            :bounds="[
+          [46.334852, -1.190568],
+          [46.241487, -1.090357],
+        ]"
           >
-            <q-carousel-slide name="first" img-src="images/cover.jpg">
+            <l-popup>
-              <div class="landing__header"></div>
+              lol
-              <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
+            </l-popup>
-                <div class="row">
+          </l-rectangle>
-                  <logo></logo>
+        </l-map>
-                </div>
+        <button @click="changeIcon">New kitten icon</button>
-                <div class="flex justify-end">
+      </div>
-                  <div class="q-gutter-xs testo-banda clgutter">
+    </template>
-                    <div class="text-h1 shadow-max">{{ t('msg.myAppName') }}</div>
-                    <div class="text-subtitle1 shadow text-italic q-pl-sm">
-                      {{ t('msg.sottoTitoloApp') }}
-                    </div>
-                    <div class="text-subtitle1 shadow-max 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>
-
-                    <div class="text-subtitle3 shadow text-italic q-pl-sm ">
-                      {{ t('msg.sottoTitoloApp4') }}
-                    </div>
-
-                    <div v-if="isInCostruction" style="margin: 5px;">
-                      <q-banner
-                        rounded
-                        class="bg-primary text-white"
-                        style="text-align: center;">
-
-                        <span class="mybanner">{{ t('msg.underconstruction') }}</span>
-                      </q-banner>
-                      <br>
-                    </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">
-                          {{ $t('login.enter') }}
-                        </q-btn>
-                        <q-btn
-                          rounded size="lg" color="positive" @click="PagReg"
-                          class="btn-start">
-                          {{ $t('reg.submit') }}
-                        </q-btn>
-                      </div>
-                    </div>
-
-                    <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="tools.askfornotification($q)"
-                          :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>
-                </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>
-            </q-carousel-slide>
-            <q-carousel-slide name="second" img-src="images/hand_people.jpg">
-              <div class="landing__header"></div>
-              <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
-                <div class="row">
-                  <logo></logo>
-                </div>
-                <div class="flex justify-end">
-                  <div class="q-gutter-xs testo-banda clgutter">
-                    <div class="text-h1 shadow-max">{{ t('msg.myAppName') }}</div>
-                    <div class="text-subtitle1 shadow text-italic q-pl-sm">
-                      {{ t('msg.sottoTitoloApp') }}
-                    </div>
-                    <div class="text-subtitle1 shadow-max 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>
-
-                    <div class="text-subtitle3 shadow text-italic q-pl-sm ">
-                      {{ t('msg.sottoTitoloApp4') }}
-                    </div>
-
-                    <div v-if="isInCostruction" style="margin: 5px;">
-                      <q-banner
-                        rounded
-                        class="bg-primary text-white"
-                        style="text-align: center;">
-
-                        <span class="mybanner">{{ t('msg.underconstruction') }}</span>
-                      </q-banner>
-                      <br>
-                    </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">
-                          {{ $t('login.enter') }}
-                        </q-btn>
-                        <q-btn
-                          rounded size="lg" color="positive" @click="PagReg"
-                          class="btn-start">
-                          {{ $t('reg.submit') }}
-                        </q-btn>
-                      </div>
-                    </div>
-
-                    <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="tools.askfornotification($q)"
-                          :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>
-                </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 class="absolute-bottom custom-caption">-->
-              <!--<div class="text-h2">Second stop</div>-->
-              <!--<div class="text-subtitle1">Famous City</div>-->
-              <!--</div>-->
-            </q-carousel-slide>
-            <q-carousel-slide name="third" img-src="images/cibo_sano.jpg" class="carousel_img_3">
-              <div class="landing__header"></div>
-              <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
-                <div class="row">
-                  <logo></logo>
-                </div>
-                <div class="flex justify-end">
-                  <div class="q-gutter-xs testo-banda clgutter">
-                    <div class="text-h1 shadow-max">{{ t('msg.myAppName') }}</div>
-                    <div class="text-subtitle1 shadow text-italic q-pl-sm">
-                      {{ t('msg.sottoTitoloApp') }}
-                    </div>
-                    <div class="text-subtitle1 shadow-max 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>
-
-                    <div class="text-subtitle3 shadow text-italic q-pl-sm ">
-                      {{ t('msg.sottoTitoloApp4') }}
-                    </div>
-
-                    <div v-if="isInCostruction" style="margin: 5px;">
-                      <q-banner
-                        rounded
-                        class="bg-primary text-white"
-                        style="text-align: center;">
-
-                        <span class="mybanner">{{ t('msg.underconstruction') }}</span>
-                      </q-banner>
-                      <br>
-                    </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">
-                          {{ $t('login.enter') }}
-                        </q-btn>
-                        <q-btn
-                          rounded size="lg" color="positive" @click="PagReg"
-                          class="btn-start">
-                          {{ t('reg.submit') }}
-                        </q-btn>
-                      </div>
-                    </div>
-
-                    <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="tools.askfornotification($q)"
-                          :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>
-                </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 class="absolute-bottom custom-caption">-->
-              <!--<div class="text-h2">Third stop</div>-->
-              <!--<div class="text-subtitle1">Famous Bridge</div>-->
-              <!--</div>-->
-            </q-carousel-slide>
-          </q-carousel>
-        </div>
-      </section>
-
-      <section class="padding bg-white text-grey-10 text-center">
-        <div class="landing__features row items-start q-col-gutter-sm">
-          <div class="col-12 text-center">
-            <div class="feature-item q-mx-md">
-              <img
-                src="images/group-together.jpg"
-                alt="together"
-              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-sm">
-          <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-user-clock"> </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-apple-alt"> </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-home"> </i><h4>
-              {{ t('homepage.freeliving.title') }}</h4>
-              <p class="feat-descr" v-html="t('homepage.freeliving.descr')"></p></div>
-          </div>
-        </div>
-      </section>
-      <section class="padding bg-indigo-8">
-        <div class="landing__features row justify-between items-start q-col-gutter-sm">
-          <div class="col-12 col-sm-5">
-            <div class="feature-item"><i
-              aria-hidden="true"
-              class="q-icon fas fa-people-carry"> </i><h4>
-              {{ t('homepage.freecollabora.title') }}</h4>
-              <p class="feat-descr" v-html="t('homepage.freecollabora.descr')"></p></div>
-          </div>
-          <div class="col-12 col-sm-5">
-            <div class="feature-item"><i
-              aria-hidden="true"
-              class="q-icon fas fa-hands-helping"> </i><h4>
-              {{ t('homepage.freesostieni.title') }}</h4>
-              <p class="feat-descr" v-html="t('homepage.freesostieni.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 class="col-12 col-sm-5">
-            <div class="feature-item"><i
-              aria-hidden="true"
-              class="q-icon fas fa-universal-access"> </i><h4>
-              {{ t('homepage.free.title') }}</h4>
-              <p class="feat-descr" v-html="t('homepage.free.descr')"></p></div>
-          </div>
-        </div>
-      </section>
-      <section class="landing__footer">
-        <div class="text-center">
-          <div class="landing__footer-icons row flex-center">
-            <a :href="FBPage()" target="_blank">
-              <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact"> </i></a>
-
-            <a :href="TelegramSupport()" target="_blank">
-              <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact"></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-xs text-weight-thin" style="text-shadow: 4px 4px 8px #555;">
-            {{ t('msg.myAppName') }} - {{ t('homepage.contacts') }}
-            <!--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>
-      <q-page-scroller position="bottom-right" :scroll-offset="850" :offset="[18, 18]" style="opacity: 0.3">
-        <q-btn fab icon="keyboard_arrow_up" color="accent"/>
-      </q-page-scroller>
-
-      <Footer></Footer>
-    </div>
-
   </q-page>
 
 </template>

src/root/presentazione/presentazione.scss

@@ -0,0 +1,438 @@
+
+.testo-banda {
+  //background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
+  //background: linear-gradient(180deg, #3144f0, transparent);
+  //background: rgba(0, 0, 0, .6)
+}
+
+$grayshadow: #555;
+
+$textcol: blue;
+$textcol_scuro: darkblue;
+
+p {
+  margin: 0 0 1.25rem;
+  //text-shadow: .125rem .125rem .25rem $grayshadow;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+.mycard {
+  visibility: hidden;
+}
+
+.landing {
+}
+
+.landing_background {
+  background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
+  background-size: cover
+}
+
+.landing > section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  //padding: 0 16px
+}
+
+.intro {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  /* flex-flow: row nowrap; */
+
+  padding: 1.25rem 0 1.25rem 0;
+  margin: .125rem;
+
+  * {
+    width: 100%;
+    flex: 1;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__associazione {
+    min-width: 350px;
+  }
+
+  &__comeassociarsi{
+    min-width: 350px;
+  }
+}
+
+.subtitle {
+  font-weight: 600;
+  text-align: center;
+  letter-spacing: 0.125rem;
+  text-transform: uppercase;
+  font-size: 1rem;
+}
+
+.landing > section.padding {
+  padding: 5.62rem 1rem;
+}
+
+.landing > section.padding_testo {
+  padding-top: 1.25rem;
+  padding-bottom: 1rem;
+}
+
+.landing > section.padding_gallery {
+  padding-top: 3.125rem;
+  padding-bottom: 5.625rem;
+}
+
+.landing > section > div {
+  position: relative;
+  max-width: 1240px;
+  width: 100%
+}
+
+.landing__toolbar {
+  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
+  background: linear-gradient(180deg, #000, transparent);
+  padding: 0 !important
+}
+
+.landing__toolbar .q-btn {
+  border-radius: 0 0 .315rem .315rem;
+  -ms-flex-item-align: stretch;
+  align-self: stretch
+}
+
+.landing__hero {
+  min-height: 50vh
+}
+
+.landing__header {
+  height: 18vh
+}
+
+.landing__arrow {
+  bottom: 1.5rem;
+  opacity: .4
+}
+
+.landing__front {
+  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
+}
+
+.landing__logo {
+  width: 9.40rem;
+  height: 9.40rem;
+  margin-top: 1.315rem;
+  //-webkit-animation: logo-rotate 240s linear infinite;
+  //animation: logo-rotate 240s linear infinite
+}
+
+.landing__features .q-icon {
+  font-size: 4rem
+}
+
+h4 {
+  line-height: 1.5;
+  text-shadow: .25rem .25rem .5rem $grayshadow;
+}
+
+.landing__features h4, .landing__features h6 {
+  margin: 1rem 0
+}
+
+.landing__features p {
+  opacity: .7;
+  font-size: 1rem;
+  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, .8) 95%, #FFF);
+  padding-top: 4.5rem !important;
+  padding-bottom: 4.5rem !important;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  color: #9f9f9f;
+}
+
+.icon_contact:hover {
+  color: blue;
+  border-color: white;
+  border-width: .0625rem;
+}
+
+.landing__footer .doc-link {
+  color: $textcol;
+}
+
+.landing__footer .doc-link:hover {
+  opacity: .8
+}
+
+.landing__swirl-bg {
+  background-repeat: no-repeat !important;
+  background-position: top;
+  background-size: contain !important;
+  background-image: url(../../../public/images/landing_first_section.png) !important
+}
+
+.feat-descr {
+  font-size: 1.15rem;
+}
+
+.feat-descr:hover {
+  transition: opacity 0.5s ease-in-out;
+  opacity: 0.9;
+}
+
+.q-col-gutter-sm {
+  padding: 3.125rem 3.125rem;
+  //margin-left: -48px
+}
+
+body.mobile .landing {
+  //background: unset
+}
+
+body.mobile .landing:before {
+  content: "";
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  //background: #000 url(../../public/images/cover.jpg) 50%;
+
+  background-size: cover
+}
+
+/*
+@-webkit-keyframes logo-rotate {
+  to {
+    -webkit-transform: rotate(-1turn);
+    transform: rotate(-1turn)
+  }
+}
+
+@keyframes logo-rotate {
+  to {
+    -webkit-transform: rotate(-1turn);
+    transform: rotate(-1turn)
+  }
+}
+*/
+
+.home {
+  //background-color: rgb(250, 250, 250);
+  padding: 3.125rem;
+  display: flex;
+  //flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.btn-start {
+  margin: 3.125rem;
+}
+
+.shadow {
+  //color: white;
+  text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
+}
+
+.shadow-max {
+  //color: white;
+  text-shadow: .25rem .25rem .5rem $grayshadow;
+}
+
+.text-h1 {
+  font-size: 6rem;
+  font-weight: 300;
+  line-height: 6rem;
+  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;
+}
+
+.text-vers{
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .25rem .25rem .5rem $grayshadow;
+}
+
+.homep-cover-img-1 {
+  background: #000 url(../../../public/images/foto1.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img-2 {
+  background: #000 url(../../../public/images/foto2.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img-3 {
+  background: #000 url(../../../public/images/foto3.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: 1.75rem
+}
+
+.landing__footer-icons a {
+  margin: 0 .5rem .5rem;
+  text-decoration: none;
+  outline: 0;
+  color: $textcol;
+  transition: color .28s
+}
+
+.landing__footer-icons a:hover {
+  color: $textcol_scuro;
+}
+
+.doc-img {
+  max-width: 100%;
+}
+
+.mylist {
+  background: #3fdaff;
+  padding-left: 1.25rem;
+}
+
+.clgutter {
+  margin-top: 1.25rem;
+  padding: .62rem;
+}
+
+.carousel_img_3 {
+  //background-image: url(../../public/images/cibo_sano.jpg);
+  background-size: cover !important;
+  background-position: 50% center !important;
+  background-repeat: no-repeat !important;
+}
+
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+
+  .landing__hero {
+    text-align: center
+  }
+  .landing__header {
+    height: 7vh
+  }
+  .clgutter {
+    margin-top: 0;
+    padding: 0;
+  }
+  .landing__hero .text-h1 {
+    font-size: 3rem;
+    line-height: 3.05rem;
+    margin-bottom: 1.5rem
+  }
+
+  .landing > section.padding {
+    padding: 2.5rem 1rem;
+  }
+
+  .landing > section.padding_testo {
+    padding-top: 1.25rem;
+    padding-bottom: 1rem;
+  }
+
+  .landing > section.padding_gallery {
+    padding-top: 3.125rem;
+    padding-bottom: 5.625rem;
+  }
+
+  .landing__features h4, .landing__features h6 {
+    margin: 1.25rem 0
+  }
+
+  h4 {
+    line-height: 1.4;
+    text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
+  }
+
+  .landing .feature-item {
+    text-align: center;
+    margin-top: 1.25rem;
+  }
+  .landing__hero-content {
+    padding-bottom: 11.25rem;
+  }
+  .landing__hero-btns {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center
+  }
+
+  .q-col-gutter-sm {
+    padding: .625rem .315rem;
+  }
+
+  .text-subtitle1 {
+    font-size: 1.25rem;
+  }
+  .text-vers{
+    font-size: 0.6rem;
+  }
+
+  .carousel_img_3 {
+    //background-image: url(../../public/images/cibo_sano.jpg);
+    background-size: 620px 620px !important;
+    background-position: 50% top !important;
+    background-repeat: no-repeat !important;
+  }
+
+}
+
+.custom-caption {
+  text-align: center;
+  padding: .75rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, .3);
+}
+
+.mycontacts {
+  color: gray;
+  letter-spacing: 0.078rem;
+}
+
+.mycontacts_title {
+  text-shadow: 0.125rem 0.125rem 0.125rem #555;
+  font-weight: bold;
+  color: #999;
+  letter-spacing: 0.125rem;
+}
+
+.mycontacts_text {
+  color: #999;
+  letter-spacing: 0.093rem;
+}
+

src/root/presentazione/presentazione.ts

@@ -0,0 +1,158 @@
+import { useUserStore } from '@store/UserStore'
+import { useI18n } from '@src/boot/i18n'
+import {
+  defineComponent, ref, onBeforeUnmount, onMounted,
+} from 'vue'
+import { useRouter } from 'vue-router'
+import { Logo, Footer } from '@/components'
+import { tools } from '@src/store/Modules/tools'
+
+export default defineComponent({
+  name: 'Presentazione',
+  components: { Logo, Footer },
+
+  setup() {
+    const { t } = useI18n();
+    const $router = useRouter()
+    const visibile = ref(false)
+    const cardvisible = ref('hidden')
+    const displaycard = ref('block')
+    const firstClassSection = ref('fade homep-cover-img animate-fade homep-cover-img-1')
+    const polling: any = ref()
+    const slide = ref('first')
+    const animare = ref(0)
+
+    function initprompt() {
+      window.addEventListener('beforeinstallprompt', (event) => {
+        // console.log('********************************   beforeinstallprompt fired')
+        event.preventDefault()
+        // console.log('§§§§§§§§§§§§§§§§§§§§  IMPOSTA DEFERRED PROMPT  !!!!!!!!!!!!!!!!!  ')
+        // #Todo++ IMPOSTA DEFERRED PROMPT
+        return false
+      })
+    }
+
+    function created() {
+      initprompt()
+
+      animare.value = process.env.DEV ? 0 : 8000
+    }
+
+    onMounted(() => {
+      let primo = true
+      const mytime = 10000
+      polling.value = setInterval(() => {
+        firstClassSection.value = `landing_background fade homep-cover-img ${primo ? 'homep-cover-img-2' : 'homep-cover-img-1'}`
+        primo = !primo
+
+        // console.log('this.firstClassSection', this.firstClassSection)
+      }, mytime)
+    })
+
+    function appname() {
+      return t('msg.myAppName')
+    }
+
+    onBeforeUnmount(() => {
+      console.log('beforeDestroy')
+      clearInterval(polling.value)
+    })
+
+    function isLogged() {
+      const userStore = useUserStore()
+      return userStore.isLogged
+    }
+
+    function TelegramSupport() {
+      return process.env.TELEGRAM_SUPPORT
+    }
+
+    function FBPage() {
+      return process.env.URL_FACEBOOK
+    }
+
+    function meta() {
+      return {
+        keywords: { name: 'keywords', content: 'Quasar website' },
+        // meta tags
+        meta: {
+          mykey: { name: 'mykey', content: 'Key 1' },
+          description: { name: 'description', content: 'Page 1' },
+          keywords: { name: 'keywords', content: 'Quasar website' },
+          equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' },
+        },
+      }
+    }
+
+    function mystilecard() {
+      return {
+        visibility: cardvisible.value,
+        display: displaycard.value,
+      }
+    }
+
+    function getenv(myvar: any) {
+      try {
+        return process.env[myvar]
+      } catch (e) {
+        return ''
+      }
+    }
+
+    function isInCostruction() {
+      return process.env.IN_CONSTRUCTION === '1'
+    }
+
+    function getPermission() {
+      return Notification.permission
+    }
+
+    function NotServiceWorker() {
+      return (!('serviceWorker' in navigator))
+    }
+
+    function PagLogin() {
+      $router.replace('/signin')
+    }
+
+    function PagReg() {
+      $router.replace('/signup')
+    }
+
+    function openCreatePostModal() {
+      console.log('APERTO ! openCreatePostModal')
+
+      visibile.value = !visibile.value
+
+      if (visibile.value) {
+        displaycard.value = 'block'
+        cardvisible.value = 'visible'
+      } else {
+        displaycard.value = 'block'
+        cardvisible.value = 'hidden'
+      }
+    }
+
+    created()
+
+    return {
+      t,
+      appname,
+      isLogged,
+      TelegramSupport,
+      FBPage,
+      meta,
+      mystilecard,
+      getenv,
+      isInCostruction,
+      getPermission,
+      NotServiceWorker,
+      PagLogin,
+      PagReg,
+      openCreatePostModal,
+      slide,
+      tools,
+      animare,
+    }
+  },
+})

src/root/presentazione/presentazione.vue

@@ -0,0 +1,430 @@
+<template>
+  <q-page class="text-white">
+    <div class="landing">
+      <section>
+        <div class="landing__hero">
+          <q-carousel
+            animated
+            :autoplay="animare"
+            swipeable
+            infinite
+            navigation
+            transition-next="slide-left"
+            transition-prev="slide-right"
+            v-model="slide"
+            height="100%"
+            width="100%"
+          >
+            <q-carousel-slide name="first" img-src="images/cover.jpg">
+              <div class="landing__header"></div>
+              <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
+                <div class="row">
+                  <logo></logo>
+                </div>
+                <div class="flex justify-end">
+                  <div class="q-gutter-xs testo-banda clgutter">
+                    <div class="text-h1 shadow-max">{{ t('msg.myAppName') }}</div>
+                    <div class="text-subtitle1 shadow text-italic q-pl-sm">
+                      {{ t('msg.sottoTitoloApp') }}
+                    </div>
+                    <div class="text-subtitle1 shadow-max 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>
+
+                    <div class="text-subtitle3 shadow text-italic q-pl-sm ">
+                      {{ t('msg.sottoTitoloApp4') }}
+                    </div>
+
+                    <div v-if="isInCostruction" style="margin: 5px;">
+                      <q-banner
+                        rounded
+                        class="bg-primary text-white"
+                        style="text-align: center;">
+
+                        <span class="mybanner">{{ t('msg.underconstruction') }}</span>
+                      </q-banner>
+                      <br>
+                    </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">
+                          {{ $t('login.enter') }}
+                        </q-btn>
+                        <q-btn
+                          rounded size="lg" color="positive" @click="PagReg"
+                          class="btn-start">
+                          {{ $t('reg.submit') }}
+                        </q-btn>
+                      </div>
+                    </div>
+
+                    <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="tools.askfornotification($q)"
+                          :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>
+                </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>
+            </q-carousel-slide>
+            <q-carousel-slide name="second" img-src="images/hand_people.jpg">
+              <div class="landing__header"></div>
+              <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
+                <div class="row">
+                  <logo></logo>
+                </div>
+                <div class="flex justify-end">
+                  <div class="q-gutter-xs testo-banda clgutter">
+                    <div class="text-h1 shadow-max">{{ t('msg.myAppName') }}</div>
+                    <div class="text-subtitle1 shadow text-italic q-pl-sm">
+                      {{ t('msg.sottoTitoloApp') }}
+                    </div>
+                    <div class="text-subtitle1 shadow-max 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>
+
+                    <div class="text-subtitle3 shadow text-italic q-pl-sm ">
+                      {{ t('msg.sottoTitoloApp4') }}
+                    </div>
+
+                    <div v-if="isInCostruction" style="margin: 5px;">
+                      <q-banner
+                        rounded
+                        class="bg-primary text-white"
+                        style="text-align: center;">
+
+                        <span class="mybanner">{{ t('msg.underconstruction') }}</span>
+                      </q-banner>
+                      <br>
+                    </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">
+                          {{ $t('login.enter') }}
+                        </q-btn>
+                        <q-btn
+                          rounded size="lg" color="positive" @click="PagReg"
+                          class="btn-start">
+                          {{ $t('reg.submit') }}
+                        </q-btn>
+                      </div>
+                    </div>
+
+                    <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="tools.askfornotification($q)"
+                          :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>
+                </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 class="absolute-bottom custom-caption">-->
+              <!--<div class="text-h2">Second stop</div>-->
+              <!--<div class="text-subtitle1">Famous City</div>-->
+              <!--</div>-->
+            </q-carousel-slide>
+            <q-carousel-slide name="third" img-src="images/cibo_sano.jpg" class="carousel_img_3">
+              <div class="landing__header"></div>
+              <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
+                <div class="row">
+                  <logo></logo>
+                </div>
+                <div class="flex justify-end">
+                  <div class="q-gutter-xs testo-banda clgutter">
+                    <div class="text-h1 shadow-max">{{ t('msg.myAppName') }}</div>
+                    <div class="text-subtitle1 shadow text-italic q-pl-sm">
+                      {{ t('msg.sottoTitoloApp') }}
+                    </div>
+                    <div class="text-subtitle1 shadow-max 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>
+
+                    <div class="text-subtitle3 shadow text-italic q-pl-sm ">
+                      {{ t('msg.sottoTitoloApp4') }}
+                    </div>
+
+                    <div v-if="isInCostruction" style="margin: 5px;">
+                      <q-banner
+                        rounded
+                        class="bg-primary text-white"
+                        style="text-align: center;">
+
+                        <span class="mybanner">{{ t('msg.underconstruction') }}</span>
+                      </q-banner>
+                      <br>
+                    </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">
+                          {{ $t('login.enter') }}
+                        </q-btn>
+                        <q-btn
+                          rounded size="lg" color="positive" @click="PagReg"
+                          class="btn-start">
+                          {{ t('reg.submit') }}
+                        </q-btn>
+                      </div>
+                    </div>
+
+                    <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="tools.askfornotification($q)"
+                          :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>
+                </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 class="absolute-bottom custom-caption">-->
+              <!--<div class="text-h2">Third stop</div>-->
+              <!--<div class="text-subtitle1">Famous Bridge</div>-->
+              <!--</div>-->
+            </q-carousel-slide>
+          </q-carousel>
+        </div>
+      </section>
+
+      <section class="padding bg-white text-grey-10 text-center">
+        <div class="landing__features row items-start q-col-gutter-sm">
+          <div class="col-12 text-center">
+            <div class="feature-item q-mx-md">
+              <img
+                src="images/group-together.jpg"
+                alt="together"
+              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-sm">
+          <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-user-clock"> </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-apple-alt"> </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-home"> </i><h4>
+              {{ t('homepage.freeliving.title') }}</h4>
+              <p class="feat-descr" v-html="t('homepage.freeliving.descr')"></p></div>
+          </div>
+        </div>
+      </section>
+      <section class="padding bg-indigo-8">
+        <div class="landing__features row justify-between items-start q-col-gutter-sm">
+          <div class="col-12 col-sm-5">
+            <div class="feature-item"><i
+              aria-hidden="true"
+              class="q-icon fas fa-people-carry"> </i><h4>
+              {{ t('homepage.freecollabora.title') }}</h4>
+              <p class="feat-descr" v-html="t('homepage.freecollabora.descr')"></p></div>
+          </div>
+          <div class="col-12 col-sm-5">
+            <div class="feature-item"><i
+              aria-hidden="true"
+              class="q-icon fas fa-hands-helping"> </i><h4>
+              {{ t('homepage.freesostieni.title') }}</h4>
+              <p class="feat-descr" v-html="t('homepage.freesostieni.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 class="col-12 col-sm-5">
+            <div class="feature-item"><i
+              aria-hidden="true"
+              class="q-icon fas fa-universal-access"> </i><h4>
+              {{ t('homepage.free.title') }}</h4>
+              <p class="feat-descr" v-html="t('homepage.free.descr')"></p></div>
+          </div>
+        </div>
+      </section>
+      <section class="landing__footer">
+        <div class="text-center">
+          <div class="landing__footer-icons row flex-center">
+            <a :href="FBPage()" target="_blank">
+              <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact"> </i></a>
+
+            <a :href="TelegramSupport()" target="_blank">
+              <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact"></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-xs text-weight-thin" style="text-shadow: 4px 4px 8px #555;">
+            {{ t('msg.myAppName') }} - {{ t('homepage.contacts') }}
+            <!--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>
+      <q-page-scroller position="bottom-right" :scroll-offset="850" :offset="[18, 18]" style="opacity: 0.3">
+        <q-btn fab icon="keyboard_arrow_up" color="accent"/>
+      </q-page-scroller>
+
+      <Footer></Footer>
+    </div>
+
+  </q-page>
+
+</template>
+<script lang="ts" src="./presentazione.ts">
+</script>
+<style lang="scss" scoped>
+@import './presentazione.scss';
+</style>

src/store/Modules/fieldsTable.ts

@@ -266,6 +266,36 @@ export const colTableStorehouse = [
   AddCol(DuplicateRec),
 ]
 
+export const colSectors = [
+  AddCol({ name: 'descr', label_trans: 'store.description' }),
+  AddCol({ name: 'img', label_trans: 'store.img' }),
+  AddCol({ name: 'icon', label_trans: 'store.icon' }),
+  AddCol(DeleteRec),
+  AddCol(DuplicateRec),
+]
+
+export const colLevels = [
+  AddCol({ name: '_id', label_trans: 'index' }),
+  AddCol({ name: 'descr', label_trans: 'store.description' }),
+  AddCol({ name: 'years_of_exp', label_trans: 'years_of_exp', fieldtype: costanti.FieldType.number }),
+  AddCol(DeleteRec),
+  AddCol(DuplicateRec),
+]
+
+export const colSkills = [
+  AddCol({ name: 'descr', label_trans: 'store.description' }),
+  AddCol({ name: 'img', label_trans: 'store.img' }),
+  AddCol({ name: 'icon', label_trans: 'store.icon' }),
+  AddCol({
+    name: 'idSector',
+    label_trans: 'sectors.name',
+    fieldtype: costanti.FieldType.select,
+    jointable: 'sectors',
+  }),
+  AddCol(DeleteRec),
+  AddCol(DuplicateRec),
+]
+
 export const colTableSites = [
   AddCol({ name: 'active', label_trans: 'sites.active', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'idapp', label_trans: 'sites.idapp', fieldtype: costanti.FieldType.string }),
@@ -1323,6 +1353,27 @@ export const fieldsTable = {
       colkey: 'key',
       collabel: 'key',
     },
+    {
+      value: 'skills',
+      label: 'Competenze',
+      columns: colSkills,
+      colkey: '_id',
+      collabel: 'descr',
+    },
+    {
+      value: 'sectors',
+      label: 'Settori',
+      columns: colSectors,
+      colkey: '_id',
+      collabel: 'descr',
+    },
+    {
+      value: 'levels',
+      label: 'Livello',
+      columns: colLevels,
+      colkey: '_id',
+      collabel: 'descr',
+    },
   ],
 }
 

src/store/globalStore.ts

@@ -116,6 +116,9 @@ export const useGlobalStore = defineStore('GlobalStore', {
     TIMER_STATE: 0,
     URL_RITORNA: '',
     URL_RESTORE: '',
+    levels: [],
+    skills: [],
+    sectors: [],
   }),
 
   getters: {
@@ -217,6 +220,12 @@ export const useGlobalStore = defineStore('GlobalStore', {
         return messageStore.last_msgs
       else if (table === 'settings')
         return state.settings
+      else if (table === 'levels')
+        return state.levels
+      else if (table === 'skills')
+        return state.skills
+      else if (table === 'sectors')
+        return state.sectors
       else return ris
 
       return ris
@@ -1099,6 +1108,9 @@ export const useGlobalStore = defineStore('GlobalStore', {
             this.resps = (res.data.resps) ? [...res.data.resps] : []
             this.workers = (res.data.workers) ? [...res.data.workers] : []
             this.departments = (res.data.departments) ? [...res.data.departments] : []
+            this.levels = (res.data.levels) ? [...res.data.levels] : []
+            this.skills = (res.data.skills) ? [...res.data.skills] : []
+            this.sectors = (res.data.sectors) ? [...res.data.sectors] : []
 
             // console.log('res.data.cart', res.data.cart)
 

src/webpack-require.d.ts

@@ -0,0 +1,3 @@
+// This is required to use Webpack loaders, cf https://stackoverflow.com/a/36151803/257169
+
+declare function require(string): any;

yarn.lock

@@ -2240,6 +2240,11 @@
     "@typescript-eslint/types" "4.31.1"
     eslint-visitor-keys "^2.0.0"
 
+"@vue-leaflet/vue-leaflet@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.6.1.tgz#d731a5d2256d049e345f58330616180191d88b12"
+  integrity sha512-/sm0bdrdftXh5nSGEPsoKrJI1D/GtKiEsBo9X/TA2yu4lYTDcaem6U4t1Ea5CoLleiZRCNUrZr9PG/xHdUPXYA==
+
 "@vue/compat@^3.2.12":
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/@vue/compat/-/compat-3.2.12.tgz#e07b78e6a3ad589567dd199e402b6e4acfda433a"