Creating Estimate Page

package.json

@@ -28,12 +28,12 @@
   "dependencies": {
     "@babel/plugin-transform-runtime": "^7.4.0",
     "@babel/runtime": "^7.0.0",
-    "@quasar/extras": "^1.1.2",
+    "@quasar/extras": "^1.2.0",
     "@types/vuelidate": "^0.7.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "acorn": "^6.0.0",
     "autoprefixer": "^9.5.0",
-    "axios": "^0.18.0",
+    "axios": "^0.19.0",
     "babel-eslint": "^10.0.1",
     "bcrypt-nodejs": "0.0.3",
     "bcryptjs": "^2.4.3",
@@ -44,13 +44,13 @@
     "graphql": "^0.13.2",
     "graphql-tag": "^2.8.0",
     "gsap": "^2.0.2",
-    "jquery": "^3.3.1",
+    "jquery": "^3.4.1",
     "js-cookie": "^2.2.0",
     "localforage": "^1.7.3",
     "normalize.css": "^8.0.0",
-    "npm": "^6.9.0",
+    "npm": "^6.10.1",
     "nprogress": "^0.2.0",
-    "quasar": "^1.0.0-beta.21",
+    "quasar": "^1.0.4",
     "quasar-extras": "^2.0.8",
     "register-service-worker": "^1.0.0",
     "vee-validate": "^2.1.2",
@@ -85,7 +85,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.4.2",
-    "@quasar/app": "^1.0.0-beta.22",
+    "@quasar/app": "^1.0.4",
     "@quasar/quasar-app-extension-typescript": "^1.0.0-alpha.11",
     "@types/dotenv": "^4.0.3",
     "@types/jest": "^23.1.4",
@@ -98,8 +98,8 @@
     "@vue/cli-plugin-e2e-cypress": "^3.0.1",
     "@vue/cli-plugin-pwa": "^3.0.1",
     "@vue/cli-plugin-typescript": "^3.0.1",
-    "@vue/cli-plugin-unit-jest": "^3.5.3",
-    "@vue/cli-service": "^3.0.1",
+    "@vue/cli-plugin-unit-jest": "^3.9.0",
+    "@vue/cli-service": "^3.9.2",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.5.0",

quasar.conf.js

@@ -134,11 +134,17 @@ module.exports = function (ctx) {
         'QToolbarTitle',
         'QBtn',
         'QBtnDropdown',
+        'QColor',
         'QIcon',
         'QList',
         'QItemLabel',
         'QItem',
         'QCard',
+        'QMarkupTable',
+        'QSpace',
+        'QDialog',
+        'QBadge',
+        'QForm',
         'QCardSection',
         'QCardActions',
         'QField',
@@ -173,6 +179,12 @@ module.exports = function (ctx) {
         'QImg',
         'QSplitter',
         'QRating',
+        'QParallax',
+        'QTab',
+        'QTabs',
+        'QTabPanels',
+        'QTabPanel',
+        'QTree',
         'QSeparator'
       ],
       directives: [

src/App.scss

@@ -40,8 +40,7 @@
   }
 }
 
-
-.my-notif-class{
+.my-notif-class {
   font-weight: bold;
 }
 
@@ -54,14 +53,15 @@
 .lowperc {
   color: red;
 }
+
 .medperc {
   color: blue;
 }
+
 .highperc {
   color: green;
 }
 
-
 .hide-if-small {
   @media (max-width: 600px) {
     display: none;
@@ -73,3 +73,25 @@
     max-width: 22px;
   }
 }
+
+.tothebottomfixed {
+  left: 0;
+  right: 0;
+  position: fixed;
+  z-index: 9999;
+  box-sizing: border-box;
+  overflow: hidden;
+  margin: 0 auto;
+  bottom: 10px;
+}
+
+.tothetop {
+  left: 0;
+  right: 0;
+  position: fixed;
+  z-index: 9999;
+  box-sizing: border-box;
+  overflow: hidden;
+  margin: 0 auto;
+  top: 20px;
+}

src/model/Estimate.ts

@@ -0,0 +1,17 @@
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+export interface IEstimate {
+  id: number
+  title: string
+  advanced?: boolean
+  description?: string
+  viewlist?: number[]
+  listsel?: number
+  qtaName?: string
+  icon?: string
+  numpag?: number
+  qta?: number
+  price: number
+  checksel?: boolean
+}

src/model/index.ts

@@ -10,3 +10,4 @@ export * from './Todos'
 export * from './Projects'
 
 export * from './Calendar'
+export * from './Estimate'

src/router/route-config.ts

@@ -88,6 +88,11 @@ export const cfgrouter = {
       name: 'Categories',
       component: () => import('@/views/admin/testp1/testp1.vue')
     },
+    {
+      path: '/estimate',
+      name: 'Estimate',
+      component: () => import('@/views/pages/estimate/estimate.vue')
+    },
     {
       path: '/offline',
       name: 'Offline',

src/store/Modules/tools.ts

@@ -10,7 +10,6 @@ import translate from '@src/globalroutines/util'
 import { RouteNames } from '@src/router/route-names'
 
 import { lists } from './lists'
-import { shen } from '@src/database/shen'
 
 export interface INotify {
   color?: string | 'primary'
@@ -38,6 +37,8 @@ export const tools = {
   WHAT_TODO: 1,
   WHAT_PROJECT: 2,
 
+  languageid: 5,
+
   arrLangUsed: ['enUs', 'it', 'es'],
 
   SERVKEY_VERS: 'vers',

src/views/pages/estimate/estimate.scss

@@ -0,0 +1,26 @@
+.est{
+  margin: 5px;
+  padding: 5px;
+
+  &__price {
+    color: blue;
+  }
+
+  &__totale_text {
+    padding: 2px;
+    font-size: 1.15rem;
+    color: blue;
+  }
+
+  &__totale_numpag {
+    padding: 2px;
+    font-size: 1.15rem;
+    color: red;
+  }
+
+  &__totale_price {
+    padding: 2px;
+    font-size: 1.15rem;
+    color: green;
+  }
+}

src/views/pages/estimate/estimate.ts

@@ -0,0 +1,183 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+import { IEstimate } from '@src/model'
+import { tools } from '@src/store/Modules/tools'
+
+@Component({})
+export default class Estimate extends Vue {
+  public arrEstimate: IEstimate[] = []
+
+  public arrEstimateit: IEstimate[] = [
+    {
+      id: 1,
+      title: 'Pagina Web Base', description: 'Incluso nel prezzo:<br />' +
+      '- 5 pagine principali: Home principale con testo + slideshow di immagini, Chi siamo, Dove Siamo, Contatti<br />' +
+      '- Possibilità di modificare in maniera autonoma i testi delle pagine (Sito Dinamico)<br />' +
+      '- Galleria d\'immagini Slideshow ' +
+      '- Certificato SSL / HTTPS di sicurezza incluso<br />' +
+      '- GDPR privacy e cookie<br />' +
+      '- Posizionamento motori di ricerca<br />',
+      price: 250,
+      advanced: false,
+      qta: 1,
+      icon: 'web',
+      numpag: 5,
+      viewlist: null,
+      checksel: true
+    },
+    {
+      id: 9,
+      title: 'Hosting Base Dominio WWW (Servizio Esterno)',
+      description: 'Servizio di Hosting linux base + Database Mysql + Servizio Mail + Dominio',
+      advanced: false,
+      icon: 'home',
+      price: 80,
+      qta: 1,
+      numpag: 0,
+      viewlist: null,
+      checksel: false
+    },
+    {
+      id: 2,
+      title: '+ 5 Pagine Aggiuntive',
+      description: 'Inserisci il numero di pagine che si vuole creare',
+      advanced: false,
+      price: 50,
+      qta: 1,
+      numpag: 5,
+      icon: 'description',
+      viewlist: null,
+      checksel: false
+    },
+    {
+      id: 3,
+      title: '+ 10 Pagine Aggiuntive',
+      description: 'pagine aggiuntive da creare',
+      price: 85,
+      qta: 1,
+      numpag: 10,
+      icon: 'description',
+      viewlist: null,
+      checksel: false
+    },
+    {
+      id: 4,
+      title: '+ 20 Pagine Aggiuntive',
+      description: 'pagine aggiuntive da creare',
+      advanced: false,
+      price: 140,
+      qta: 1,
+      numpag: 20,
+      icon: 'description',
+      viewlist: null,
+      checksel: false
+    },
+    {
+      id: tools.languageid,
+      title: '+ 1 Lingua Aggiuntiva (con testi già tradotti)',
+      description: 'Inserimento di 1 lingua straniera nel sito. Comprende le pagine selezionate',
+      advanced: false,
+      icon: 'language',
+      price: 10,
+      qta: 1,
+      numpag: 0,
+      viewlist: null,
+      checksel: false
+    },
+    {
+      id: 8,
+      title: 'Gestione Newsletter integrata con MailChimp',
+      advanced: true,
+      description: 'All\'interno del sito l\'utente potrà lasciare la propria email e nome, e verrà inviata a MailChimp (Account Gratuito)',
+      icon: 'contact_mail',
+      price: 50,
+      qta: 1,
+      numpag: 0,
+      viewlist: null,
+      checksel: false
+    },
+    {
+      id: 6,
+      title: 'Calendario Eventi',
+      advanced: true,
+      description: 'Visualizzazione Mensile e Settimanale di un calendario Eventi Personalizzato',
+      icon: 'event',
+      price: 100,
+      qta: 1,
+      numpag: 0,
+      viewlist: null,
+      checksel: false
+    },
+    {
+      id: 7,
+      title: 'Galleria Immagini Personalizzata',
+      advanced: true,
+      description: 'Possibilità di aggiungere/eliminare foto autonomamente dalla galleria Immagini (Richiede Hosting Base)',
+      icon: 'perm_media',
+      price: 100,
+      qta: 1,
+      numpag: 0,
+      viewlist: null,
+      checksel: false
+    }
+    // {
+    //   id: 7,
+    //   title: 'Servizio di Assistenza e modifica pagine (dal 2° anno)',
+    //   description: '',
+    //   icon: 'perm_media',
+    //   price: 100,
+    //   qta: 1,
+    //   numpag: 0,
+    //   viewlist: null,
+    //   checksel: false
+    // },
+  ]
+
+  public mounted() {
+    this.arrEstimate = this.arrEstimateit
+  }
+
+  public getPrice(rec: IEstimate) {
+    if (rec.id === tools.languageid) {
+      return rec.price * this.getNumpagTotal()
+    } else {
+      return rec.price
+    }
+  }
+
+  public getNumpagTotal() {
+    let numpag = 0
+    let rec: IEstimate = null
+
+    for (rec of this.arrEstimateit) {
+      if (rec.checksel) {
+        numpag += rec.numpag
+      }
+    }
+
+    return numpag
+  }
+
+  public getTotal() {
+    let tot = 0
+    let rec: IEstimate = null
+
+    const numpagtot = this.getNumpagTotal()
+
+    for (rec of this.arrEstimateit) {
+      if (rec.checksel)
+          tot += this.getPrice(rec) * rec.qta
+    }
+
+    return tot
+  }
+
+  public getColor(rec) {
+    if (rec.advanced) {
+      return 'red'
+    } else {
+      return 'blue'
+    }
+  }
+
+}

src/views/pages/estimate/estimate.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <q-list bordered padding>
+            <q-item-label header class="text-subtitle1 text-red">Presupuesto</q-item-label>
+
+            <div style="text-align: right;">
+                <span class="est__totale_text">Pagine:</span>
+                <span class="est__totale_numpag">{{getNumpagTotal()}}</span>
+                <span style="margin-left: 20px;"></span>
+                <span class="est__totale_text">Totale:</span>
+                <span class="est__totale_price">{{getTotal()}} €</span>
+            </div>
+
+            <q-item tag="label" v-for="rec in arrEstimateit" :key="rec.title">
+                <q-item-section avatar top>
+                    <q-avatar :icon="rec.icon" :color="getColor(rec)" text-color="white"/>
+                </q-item-section>
+
+                <q-item-section>
+                    <q-item-label>{{rec.title}}</q-item-label>
+                    <q-item-label caption v-html="rec.description"></q-item-label>
+                    <q-item-label>
+                        <span class="est__price">{{getPrice(rec)}} €</span>
+                    </q-item-label>
+                </q-item-section>
+                <q-item-section side top>
+                    <q-checkbox v-model="rec.checksel"/>
+                </q-item-section>
+            </q-item>
+
+        </q-list>
+
+        <div class="q-ml-md">
+            <span class="est__totale_text">Pagine:</span>
+            <span class="est__totale_numpag">{{getNumpagTotal()}}</span>
+            <span style="padding-left: 20px;"></span>
+            <span class="est__totale_text">Totale:</span>
+            <span class="est__totale_price">{{getTotal()}} €</span>
+        </div>
+
+    </div>
+</template>
+<script lang="ts" src="./estimate.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './estimate';
+</style>

src/views/pages/estimate/index.ts

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