import products dinamically

2024-02-06 20:13:06 +01:00
parent dbcd2aee63
commit 3c0f040d92
53 changed files with 1847 additions and 325 deletions
--- a/src/components/CLineChart/CLineChart.ts
+++ b/src/components/CLineChart/CLineChart.ts
@@ -7,16 +7,12 @@ import { useGlobalStore } from '@store/globalStore'
 import { useI18n } from '@/boot/i18n'
 import { useQuasar } from 'quasar'

-import { Chart, ChartData, ChartOptions, registerables } from 'chart.js'
+import { Chart, ChartItem, ChartConfiguration } from 'chart.js/auto'

-import { BarChart, useBarChart } from 'vue-chart-3'
-
-
-Chart.register(...registerables)

 export default defineComponent({
-  name: 'CBarChart',
-  components: { BarChart },
+  name: 'CLineChart',
+  components: {},
  props: {
    mydata: { required: false, default: [] },
    title: { required: false, default: false },
@@ -25,6 +21,7 @@ export default defineComponent({
    bordercolor: { required: false, default: 'red' },
    mycolors: { required: false, default: null },
    offset: { required: false, default: 0 },
+    showMedia: { required: false, default: false }
  },
  setup(props, { emit }) {

@@ -35,48 +32,44 @@ export default defineComponent({

    const myarrlabel = ref(<any>[])
    const myarrdata = ref(<any>[])
+    const myarrdataLine = ref(<any>[])
    const myarrbg = ref(<any>[])
    const myarrsum = ref(<any>[])

-    // @ts-ignore
-    const chartData = computed<ChartData<'bar'>>(() => ({
-      labels: myarrlabel.value,
+
+    const chartDataLine = ref({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
-        /*{
-          label: 'Totali',
-          data: myarrsum.value,
-          backgroundColor: tools.colourNameToHex('green'),
-        },*/
        {
-          label: props.title,
-          data: myarrdata.value,
-          borderColor: tools.colourNameToHex('red'),
-          backgroundColor: myarrbg.value,
-          fill: true,
-        },
-      ],
-    }))
-
-    const options = computed<ChartOptions<'bar'>>(() => ({
-      bar: {
-      },
-      interaction: {
-        intersect: false
-      },
-      scales: {
-        y: {
-          beginAtZero: true
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 39, 10, 40, 39, 80, 40]
        }
-      }
-    }))
-
-    const { barChartProps, barChartRef } = useBarChart({
-      chartData,
-      options,
+      ]
    })

+    const chartOptionsLine = ref({
+      responsive: true,
+      maintainAspectRatio: false
+    })
+
+    function calcolaMedia(myarray: any, periodi: number) {
+      if (myarray.length === 0 || myarray.length < periodi) {
+        return 0; // Se l'array è vuoto o più corto del numero di periodi, la media è 0.
+      }
+
+      const somma = myarray.slice(-periodi).reduce((accumulator: number, currentValue: number) => accumulator + currentValue, 0);
+      return somma / periodi;
+    }
+
+    function getRecordByDate(mydata: any, currentDate: Date) {
+      const targetDate = currentDate.toISOString().split('T')[0];
+      return mydata.find((record: any) => record._id === targetDate);
+    }
+
    function mounted() {
      myarrdata.value = []
+      myarrdataLine.value = []
      myarrbg.value = []
      myarrlabel.value = []
      myarrsum.value = []
@@ -91,27 +84,119 @@ export default defineComponent({

      let num = 1

-      for (rec of props.mydata) {
-        if (props.sum) {
-          somma += rec.count
-        } else {
-          somma = rec.count
+      let mostraggtutti = true
+
+      if (mostraggtutti) {
+        let num = 1;
+        let strstartDate: any = props.mydata[0]
+
+        let startDate = new Date(strstartDate._id); // Data di inizio da props
+        let endDate = new Date(); // Data di fine da props
+        let currentDate = new Date(startDate);
+
+        // console.log('startDate', startDate, 'endDate', endDate)
+
+        while (currentDate <= endDate) {
+          let dataPresente = getRecordByDate(props.mydata, currentDate)
+
+          let count = dataPresente ? dataPresente.count : 0;
+
+          let day = currentDate.toISOString().split('T')[0].split('-');
+          let mydate = day[2] + '/' + day[1];
+
+          myarrlabel.value.push(mydate);
+          myarrdata.value.push(count);
+
+          let media = calcolaMedia(myarrdata.value, 30);
+          myarrdataLine.value.push(media ? media : undefined);
+
+          if (currentDate === endDate) {
+            myarrbg.value.push(tools.colourNameToHex('green'));
+          } else {
+            myarrbg.value.push(tools.colourNameToHex(props.color));
+          }
+
+          myarrsum.value.push(somma);
+
+          num++;
+          currentDate.setDate(currentDate.getDate() + 1); // Passa al giorno successivo
        }

-        let day = rec._id.split('-')
-        ind = day[2] + '/' + day[1]
-        //myarrlabel.value.push(rec._id)
-        myarrlabel.value.push(ind)
-        myarrdata.value.push(rec.count)
-        if (num === props.mydata.length) {
-          myarrbg.value.push(tools.colourNameToHex('green'))
-        } else {
-          myarrbg.value.push(tools.colourNameToHex(props.color))
+      } else {
+
+        for (rec of props.mydata) {
+          if (props.sum) {
+            somma += rec.count
+          } else {
+            somma = rec.count
+          }
+
+          let day = rec._id.split('-')
+          ind = day[2] + '/' + day[1]
+
+          //myarrlabel.value.push(rec._id)
+          myarrlabel.value.push(ind)
+          myarrdata.value.push(rec.count)
+          let media = calcolaMedia(myarrdata.value, 14)
+          myarrdataLine.value.push(media ? media : undefined)
+          if (num === props.mydata.length) {
+            myarrbg.value.push(tools.colourNameToHex('green'))
+          } else {
+            myarrbg.value.push(tools.colourNameToHex(props.color))
+          }
+          myarrsum.value.push(somma)
+          num++
+          // ind++
        }
-        myarrsum.value.push(somma)
-        num++
-        // ind++
      }
+
+      const chartData: any = {
+        labels: myarrlabel.value,
+        datasets: [
+          {
+            type: 'bar',
+            label: props.title,
+            data: myarrdata.value,
+            borderColor: tools.colourNameToHex('red'),
+            backgroundColor: myarrbg.value,
+            fill: true,
+          },
+        ],
+      }
+
+      const media = {
+        type: 'line',
+        label: 'Media',
+        data: myarrdataLine.value,
+        borderColor: 'rgb(255, 99, 132)',
+        backgroundColor: 'rgb(255, 99, 132)',
+        fill: true,
+      }
+
+      if (props.showMedia)
+        chartData.datasets.push(media)
+
+      const configBar: ChartConfiguration = {
+        type: 'bar',
+        data: chartData,
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          },
+          interaction: {
+            intersect: false
+          },
+        },
+      };
+
+      const canvasTag = <ChartItem>document.getElementById('myChart')
+
+      const myChart = new Chart(
+        canvasTag,
+        configBar)
+
    }

    function getoffset() {
@@ -124,11 +209,6 @@ export default defineComponent({
      tools,
      getoffset,
      q,
-      options,
-      barChartProps,
-      barChartRef,
-      myarrdata,
-      myarrlabel,
    }
  },
 })
--- a/src/components/CLineChart/CLineChart.vue
+++ b/src/components/CLineChart/CLineChart.vue
@@ -1,13 +1,6 @@
 <template>
  <div>
-    <BarChart v-bind="barChartProps" />
-    <!--<DoughnutChart ref="doughnutRef" :chartData="objdata" :options="options" />-->
-
-
-    <!--<line-chart :width="tools.getwidthscale($q, 350, 400)+`px`" :title="title" :data="getmydata()" :offset="getoffset()"
-                :round="0" :colors="mycolors"></line-chart>
-                -->
-
+    <canvas id="myChart" width="400" height="400"></canvas>
  </div>
 </template>

--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.vue
@@ -147,8 +147,9 @@
                        color="green"
                        >online</q-badge
                      >
+                      
                      <q-badge
-                        v-if="!tools.isVerifiedByUser(row)"
+                        v-if="tools.notisVerifiedByUser(row)"
                        align="bottom"
                        floating
                        color="red"
--- a/src/components/COSM/COSM.scss
+++ b/src/components/COSM/COSM.scss
@@ -0,0 +1,3 @@
+.map-container {
+  height: 400px;
+}
--- a/src/components/COSM/COSM.ts
+++ b/src/components/COSM/COSM.ts
@@ -0,0 +1,66 @@
+import { tools } from '@store/Modules/tools'
+import { useQuasar } from 'quasar'
+import { PropType, defineComponent, onMounted } from 'vue'
+
+import 'leaflet/dist/leaflet.css'
+import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
+import { ICoordinates } from '@src/model'
+
+export default defineComponent({
+  name: 'COpenStreetMap',
+  components: {
+    LMap,
+    LTileLayer,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    coordinates: {
+      type: Object as PropType<ICoordinates | null>,
+      required: false,
+      default: null,
+    },
+    coord_big: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    urlmap: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgmap: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    zoom: {
+      type: Number,
+      required: false,
+      default: 2,
+    },
+  },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+
+    function mywidth() {
+      return tools.getwidth($q) - 20
+    }
+
+    function myheight() {
+      return 450
+    }
+
+    onMounted(() => {
+
+    });
+
+    return {
+      mywidth,
+      myheight,
+    }
+  }
+})
--- a/src/components/COSM/COSM.vue
+++ b/src/components/COSM/COSM.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <div style="height:600px; width:100%">
+    <l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">
+      <l-tile-layer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        layer-type="base"
+        name="OpenStreetMap"
+      ></l-tile-layer>
+    </l-map>
+  </div>
+  </div>
+</template>
+<script lang="ts" src="./COSM.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './COSM.scss';
+</style>
--- a/src/components/COSM/index.ts
+++ b/src/components/COSM/index.ts
@@ -0,0 +1 @@
+export {default as COSM} from './COSM.vue'
--- a/src/components/CProductCard/CProductCard.vue
+++ b/src/components/CProductCard/CProductCard.vue
@@ -121,7 +121,8 @@
          </q-item>
          <q-item
            v-if="
-              cosa === shared_consts.PROD.TUTTI || cosa === shared_consts.PROD.BOTTEGA ||
+              (cosa === shared_consts.PROD.TUTTI && !isOrdGas()) ||
+              cosa === shared_consts.PROD.BOTTEGA ||
              (cosa === shared_consts.PROD.GAS &&
                products.getQtyAvailable(myproduct) > 0)
            "
@@ -251,6 +252,19 @@
          </div>
        </div>
      </q-card-section>
+      <q-card-section v-if="complete && myproduct.productInfo.link_scheda">
+        <div class="text-blue text-title row">
+          <q-icon size="sm" name="fas fa-list-ul" class="q-mr-sm" />
+          {{ t('products.link_scheda') }}
+        </div>
+        <div class="row items-center">
+          <div class="text-title text-grey-9">
+            <a :href="myproduct.productInfo.link_scheda" target="_blank"
+              >Apri Scheda</a
+            >
+          </div>
+        </div>
+      </q-card-section>
      <q-card-section
        v-if="complete && myproduct.productInfo.valori_nutrizionali"
      >
@@ -347,8 +361,8 @@
      <q-card-section v-if="isOrdGas()">
        <q-item
          v-if="
-            myproduct.bookableAvailableQty > 0 ||
-            myproduct.maxbookableGASQty > 0
+            (myproduct.bookableAvailableQty > 0 && myproduct.bookableAvailableQty < shared_consts.MAX_QTA_PREORD) ||
+            (myproduct.maxbookableGASQty > 0 && myproduct.maxbookableGASQty < shared_consts.MAX_QTA_PREORD) || editOn
          "
          :clickable="tools.isManager()"
          @click="
@@ -371,6 +385,19 @@
              <span v-if="!editOn" class="prod_preorder">
                {{ myproduct.bookableAvailableQty }}
              </span>
+              <CMyValueDb
+                v-if="editOn"
+                :editOn="editOn"
+                :title="t('products.bookableAvailableQty')"
+                table="products"
+                :id="myproduct._id"
+                :rec="myproduct"
+                mykey="bookableAvailableQty"
+                debounce="1000"
+                :save="updateproductmodif()"
+                :type="costanti.FieldType.number"
+              >
+              </CMyValueDb>
              <CMyValueDb
                v-if="editOn"
                :editOn="editOn"
@@ -448,7 +475,13 @@
            </q-item-section>
          </q-item-section>
        </q-item>
-        <q-item v-if="myproduct.gasordine && myproduct.gasordine.active && myproduct.idGasordine">
+        <q-item
+          v-if="
+            myproduct.gasordine &&
+            myproduct.gasordine.active &&
+            myproduct.idGasordine
+          "
+        >
          <q-item-section avatar>
            <q-icon color="blue" name="fas fa-shipping-fast" />
          </q-item-section>
@@ -577,7 +610,13 @@
            </q-item-section>
          </q-item-section>
        </q-item>
-        <q-item v-if="myproduct.gasordine && myproduct.gasordine.active && (myproduct.gasordine.dataora_chiusura_ordini || editOn)">
+        <q-item
+          v-if="
+            myproduct.gasordine &&
+            myproduct.gasordine.active &&
+            (myproduct.gasordine.dataora_chiusura_ordini || editOn)
+          "
+        >
          <q-item-section avatar>
            <q-icon color="blue" name="fas fa-hourglass-half" />
          </q-item-section>
@@ -604,7 +643,13 @@
            </q-item-label>
          </q-item-section>
        </q-item>
-        <q-item v-if="myproduct.gasordine && myproduct.gasordine.active && (labelDataArrivoMerce || editOn)">
+        <q-item
+          v-if="
+            myproduct.gasordine &&
+            myproduct.gasordine.active &&
+            (labelDataArrivoMerce || editOn)
+          "
+        >
          <q-item-section avatar>
            <q-icon color="red" name="fas fa-shipping-fast" />
          </q-item-section>
@@ -627,7 +672,13 @@
            </q-item-label>
          </q-item-section>
        </q-item>
-        <q-item v-if="myproduct.gasordine && myproduct.gasordine.active && (labelDataRitiro || editOn)">
+        <q-item
+          v-if="
+            myproduct.gasordine &&
+            myproduct.gasordine.active &&
+            (labelDataRitiro || editOn)
+          "
+        >
          <q-item-section avatar>
            <q-icon color="green" name="fas fa-people-carry" />
          </q-item-section>
--- a/src/components/CSingleCart/CSingleCart.vue
+++ b/src/components/CSingleCart/CSingleCart.vue
@@ -1,10 +1,10 @@
 <template>
-  <div v-if="order && order.product" class="q-pa-xs q-gutter-xs">
+  <div v-if="order && order.product && order.product.productInfo" class="q-pa-xs q-gutter-xs">
    <div v-if="order.product">
      <q-item>
        <q-item-section top thumbnail class="q-ml-none">
          <img
-            v-if="order.product && order.product.productInfo.img"
+            v-if="order.product && order.product.productInfo && order.product.productInfo.img"
            :src="`` + order.product.productInfo.img"
            :alt="order.product.productInfo.name"
            :class="myimgclass()"
--- a/src/components/CStatusReg/CStatusReg.vue
+++ b/src/components/CStatusReg/CStatusReg.vue
@@ -372,13 +372,10 @@
                color="blue"
                bordercolor="blue"
                :sum="true"
+                :showMedia="true"
              >
              </CLineChart>

-              <!--<CLineChart :mydata="datastat.reg_weekly" :title="$t('stat.reg_weekly')" color="blue" bordercolor="green" :sum="true">
-
-              </CLineChart>-->
-
              <!--<CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_total')"
                          :offset="datastat.numreg_untilday" :sum="true"
                          :mycolors="['#0b0', '#666']">