myprojplanet_vite/src/rootgen/admin/newsletter/newsletter.vue

<template>
  <CMyPage
    title="Newsletter"
    keywords=""
    description=""
    imgbackground="images/calendario_eventi.jpg"
    sizes="max-height: 120px"
  >
    <q-card>
      <div v-show="false">
        <q-tabs
          v-model="tab"
          dense
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab name="settings" label="Impostazioni"></q-tab>
          <q-tab name="main_settings" label="Impostaz. Primarie"></q-tab>
          <q-tab name="templemail" label="Template Email"></q-tab>
          <q-tab name="newnewsletter" label="Invia"></q-tab>
          <q-tab name="check" label="Controlla"></q-tab>
          <q-tab name="newslist" label="Già Inviate"></q-tab>
          <q-tab
            name="mailinglist"
            label="Lista Contatti (MailingList)"
          ></q-tab>
          <q-tab name="events" label="Altre"></q-tab>
        </q-tabs>
      </div>
      <q-tab-panels v-model="tab" animated @transition="changetabnews">
        <q-tab-panel name="settings">
          <div
            class="q-ma-xs q-pa-xs text-center rounded-borders q-list--bordered"
          >
            <CTitleBanner title="Impostazioni:"></CTitleBanner>

            <div class="row">
              <CMyFieldDb
                title="Altezza Logo"
                mykey="HEIGHT_LOGO"
                :serv="true"
                :type="costanti.FieldType.number"
              >
              </CMyFieldDb>
              <CMyFieldDb
                title="Titolo Discipline"
                mykey="DISC_TITLE"
                :serv="true"
                :type="costanti.FieldType.string"
              >
              </CMyFieldDb>
            </div>
            <CMyFieldDb
              title="Testo Promozione"
              mykey="TEXT_PROMO"
              :serv="true"
              :type="costanti.FieldType.html"
            >
            </CMyFieldDb>

            <div class="row">
              <CMyFieldDb
                title="Numero di Eventi da mostrare"
                mykey="SHOW_LAST_N_EV"
                :serv="true"
                :type="costanti.FieldType.number"
              >
              </CMyFieldDb>
              <CMyFieldDb
                title="Testo dopo gli Eventi"
                mykey="TEXT_AFTER_EV"
                :serv="true"
                :type="costanti.FieldType.html"
              >
              </CMyFieldDb>
            </div>
            <div class="row">
              <CMyFieldDb
                title="Pagina Twitter"
                mykey="URL_TWITTER"
                :type="costanti.FieldType.string"
              >
              </CMyFieldDb>
              <CMyFieldDb
                title="Pagina Facebook"
                mykey="URL_FACEBOOK"
                :type="costanti.FieldType.string"
              >
              </CMyFieldDb>
              <CMyFieldDb
                title="Pagina YouTube"
                mykey="URL_YOUTUBE"
                :type="costanti.FieldType.string"
              >
              </CMyFieldDb>
              <CMyFieldDb
                title="Pagina Instagram"
                mykey="URL_INSTAGRAM"
                :type="costanti.FieldType.string"
              >
              </CMyFieldDb>
            </div>
            <CMyFieldDb
              title="Firma"
              mykey="TEXT_SIGN"
              :serv="true"
              :type="costanti.FieldType.html"
            >
            </CMyFieldDb>
            <CMyFieldDb
              title="Testo Disclaimer"
              mykey="TEXT_DISCLAIMER"
              :serv="true"
              :type="costanti.FieldType.html"
            >
            </CMyFieldDb>
            <CMyFieldDb
              title="Testo a piè pagina"
              mykey="TEXT_DISC_BOTTOM"
              :serv="true"
              :type="costanti.FieldType.html"
            >
            </CMyFieldDb>
          </div>
        </q-tab-panel>
        <q-tab-panel name="main_settings">
          <div
            class="q-ma-xs q-pa-xs text-center rounded-borders q-list--bordered"
          >
            <CTitleBanner title="Impostazioni Server:"></CTitleBanner>

            <CMyFieldDb
              title="Email da cui Inviare la Newsletter"
              mykey="EMAIL_FROM"
              :serv="true"
              :type="costanti.FieldType.string"
            >
            </CMyFieldDb>
            <CMyFieldDb
              title="Email di Reply"
              mykey="EMAIL_REPLY"
              :serv="true"
              :type="costanti.FieldType.string"
            >
            </CMyFieldDb>
            <CMyFieldDb
              title="Password email"
              mykey="PWD_FROM"
              :serv="true"
              :type="costanti.FieldType.password"
            >
            </CMyFieldDb>
            <CMyFieldDb
              title="Servizio SMTP Email ('gmail' per inviare email da Gmail)"
              mykey="EMAIL_SERVICE_SEND"
              :serv="true"
              :type="costanti.FieldType.string"
            >
            </CMyFieldDb>
            <CMyFieldDb
              title="Porta SMTP"
              mykey="EMAIL_PORT"
              :serv="true"
              :type="costanti.FieldType.number"
            >
            </CMyFieldDb>
            <CMyFieldDb
              title="Millisecondi di pausa tra una email e l'altra"
              mykey="MSEC_PAUSE_SEND"
              :serv="true"
              :type="costanti.FieldType.number"
            >
            </CMyFieldDb>
          </div>
        </q-tab-panel>
        <q-tab-panel name="events">
          <CTitleBanner title="Altre Impostazioni:"></CTitleBanner>

          <CMyFieldDb
            title="Messaggio dopo che l'utente ha Prenotato un Evento"
            mykey="MSG_REPLY_AFTER_BOOKING"
            :serv="true"
            :type="costanti.FieldType.string"
          >
          </CMyFieldDb>
        </q-tab-panel>
        <q-tab-panel name="templemail">
          <CTitleBanner title="Modelli Email:"></CTitleBanner>
          <CGridTableRec
            prop_mytitle=""
            prop_mytable="templemail"
            :prop_mycolumns="getcoltemplemail()"
            :prop_colkey="fieldsTable.getKeyByTable('templemail')"
            nodataLabel="Nessuna Email Template attualmente creata"
            noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
          >
          </CGridTableRec>
        </q-tab-panel>
        <q-tab-panel name="newnewsletter">
          <div
            class="q-ma-md q-pa-sm text-center rounded-borders q-list--bordered"
          >
            <CTitleBanner title="Test Invio Newsletter:"></CTitleBanner>
            <div class="q-pa-xs q-ma-md q-gutter-md">
              <q-btn
                v-if="tools.isDebug()"
                :loading="myloadingprew"
                rounded
                outline
                @click="sendNewsletterTest(true)"
                color="primary"
                icon="fas fa-desktop"
              >
                <span class="q-px-sm">Anteprima</span>
                <template v-slot:loading>
                  <q-spinner-hourglass class="on-left" />
                  Carica Anteprima...
                </template>
              </q-btn>
              <div class="text-center">
                <CMyFieldDb
                  title="Email di Test"
                  mykey="EMAIL_TEST"
                  :serv="true"
                  :type="costanti.FieldType.string"
                >
                </CMyFieldDb>
                <q-btn
                  :loading="myloading"
                  rounded
                  outline
                  @click="sendNewsletterTest(false)"
                  color="primary"
                  icon="email"
                >
                  <span class="q-px-sm">Invia Email di Test</span>
                  <template v-slot:loading>
                    <q-spinner-hourglass class="on-left" />
                    Invia Email a '{{ emailtest() }}' in corso ...
                  </template>
                </q-btn>
              </div>
            </div>
            <div
              class="
                q-ma-xs q-pa-sm
                text-center
                rounded-borders
                q-list--bordered
              "
            >
              <CTitleBanner title="Invia Newsletter:"></CTitleBanner>

              <div class="q-pa-xs q-ma-md q-gutter-md">
                <CMyFieldDb
                  title="Template Email da Inviare"
                  mykey="TEMPLEMAIL_ID"
                  :serv="true"
                  :type="costanti.FieldType.select"
                  jointable="templemail"
                >
                </CMyFieldDb>

                <q-btn
                  :loading="myloading2"
                  rounded
                  outline
                  @click="createNewsletter(3, myloading2)"
                  color="primary"
                  icon="fas fa-file-alt"
                >
                  <span class="q-px-sm"
                    >Crea Nuovo Invio Newsletter Schedulato tra 3 minuti</span
                  >
                  <template v-slot:loading>
                    <q-spinner-hourglass class="on-left" />
                    Creazione Newsletter...
                  </template>
                </q-btn>
                <br />
                <q-btn
                  :loading="myloading3"
                  rounded
                  outline
                  @click="createNewsletter(10, myloading3)"
                  color="primary"
                  icon="fas fa-clock"
                >
                  <span class="q-px-sm"
                    >Crea Nuovo Invio Newsletter Schedulato tra 10 minuti</span
                  >
                  <template v-slot:loading>
                    <q-spinner-hourglass class="on-left" />
                    Creazione Newsletter
                  </template>
                </q-btn>
                <br />
                <q-btn
                  :loading="myloading4"
                  rounded
                  outline
                  @click="createNewsletter(60 * 60 * 24, myloading4)"
                  color="primary"
                  icon="fas fa-calendar-day"
                >
                  <span class="q-px-sm"
                    >Crea Nuovo Invio Newsletter Schedulato tra 1 giorno</span
                  >
                  <template v-slot:loading>
                    <q-spinner-hourglass class="on-left" />
                    Creazione Newsletter...
                  </template>
                </q-btn>
              </div>
            </div>
            <div class="q-ma-md rounded-borders q-list--bordered">
              <div class="text-center">
                <CTitleBanner
                  title="Prossima Newsletter da Inviare:"
                ></CTitleBanner>
              </div>

              <div
                v-if="newsstate.nextnewstosent"
                class="
                  q-ma-md q-pa-sm
                  text-center
                  rounded-borders
                  q-list--bordered
                "
              >
                <q-card class="bg-grey-3 relative-position card-example">
                  <q-card-section>
                    <q-chip
                      dense
                      class="shadow-5 q-mb-md"
                      color="orange"
                      text-color="white"
                      icon="schedule"
                    >
                      Modello Email da Inviare:
                      <span class="mlvalue">{{
                        newsstate.nextnewstosent.templemail_str
                      }}</span>
                    </q-chip>
                    <br />
                    <q-chip
                      dense
                      class="shadow-5 q-mb-md"
                      color="blue"
                      text-color="white"
                      icon="schedule"
                    >
                      Data Schedulato:
                      <span class="mlvalue">{{
                        tools.getstrDateTimeAll(
                          newsstate.nextnewstosent.datetoSent
                        )
                      }}</span>
                    </q-chip>
                    <br />
                    <q-chip
                      dense
                      class="shadow-5 q-mb-md"
                      color="blue"
                      text-color="white"
                      icon="schedule"
                    >
                      Inizio Invio:
                      <span class="mlvalue">{{
                        tools.getstrDateTimeAll(
                          newsstate.nextnewstosent.datestartJob
                        )
                      }}</span>
                    </q-chip>

                    <q-chip
                      dense
                      class="shadow-5 q-mb-md"
                      color="blue"
                      text-color="white"
                      icon="schedule"
                    >
                      Fine Invio:
                      <span class="mlvalue">{{
                        tools.getstrDateTimeAll(
                          newsstate.nextnewstosent.datefinishJob
                        )
                      }}</span>
                    </q-chip>
                    <br />
                    <div
                      v-if="
                        newsstate.nextnewstosent.starting_job &&
                        !newsstate.nextnewstosent.finish_job
                      "
                    >
                      <q-chip
                        dense
                        class="shadow-5 q-mb-md"
                        color="orange"
                        text-color="white"
                        icon="email"
                      >
                        <span class="mlvalue"
                          >Invio Newsletter in Corso...</span
                        >
                      </q-chip>
                      <br />
                    </div>
                    <div>
                      <q-chip
                        dense
                        class="shadow-5 q-mb-md"
                        color="blue"
                        text-color="white"
                        icon="schedule"
                      >
                        Ultima Email inviata:
                        <span class="mlvalue">{{
                          tools.getstrTimeAll(
                            newsstate.nextnewstosent.lastemailsent_Job
                          )
                        }}</span>
                      </q-chip>
                      <q-chip
                        dense
                        class="shadow-5 q-mb-md"
                        color="blue"
                        text-color="white"
                        icon="email"
                      >
                        Inviate:
                        <span class="mlvalue"
                          >{{ newsstate.nextnewstosent.numemail_sent }} /
                          {{ newsstate.nextnewstosent.numemail_tot }}</span
                        >
                      </q-chip>
                      <q-circular-progress
                        show-value
                        font-size="12px"
                        :value="percsent(true)"
                        size="60px"
                        :thickness="0.22"
                        color="green"
                        track-color="grey-3"
                        class="q-ma-md"
                      >
                        <span class="mlvalue"> {{ percsent(true) }} % </span>
                      </q-circular-progress>
                      <div class="text-center">
                        <q-slider
                          v-model="newsstate.nextnewstosent.numemail_sent"
                          :min="0"
                          readonly
                          :max="newsstate.nextnewstosent.numemail_tot"
                          :step="1"
                          label
                          label-always
                          color="light-green"
                        ></q-slider>
                      </div>
                    </div>
                    <div v-if="newsstate.nextnewstosent.finish_job">
                      <br />
                      <q-chip
                        dense
                        class="shadow-5 q-mb-md"
                        color="green"
                        text-color="white"
                        icon="email"
                      >
                        <span class="mlvalue">Invio Newsletter Completato</span>
                      </q-chip>
                    </div>
                  </q-card-section>
                  <q-inner-loading id="spinner3" :showing="myloadingload">
                    <q-spinner-tail color="primary" size="4em">
                    </q-spinner-tail>
                  </q-inner-loading>
                </q-card>
              </div>
              <div v-else>
                <div>Nessuna Newsletter attualmente è stata Schedulata</div>
              </div>
            </div>
          </div>
        </q-tab-panel>
        <q-tab-panel name="check">
          <div class="q-ma-md rounded-borders q-list--bordered">
            <div class="text-center">
              <CTitleBanner title="Ultima Newsletter Inviata:"></CTitleBanner>
            </div>

            <div
              v-if="newsstate.lastnewstosent"
              class="
                q-ma-md q-pa-sm
                text-center
                rounded-borders
                q-list--bordered
              "
            >
              <q-card class="bg-grey-3 relative-position card-example">
                <q-card-section>
                  <q-chip
                    dense
                    class="shadow-5 q-mb-md"
                    color="orange"
                    text-color="white"
                    icon="schedule"
                  >
                    Modello Email:
                    <span class="mlvalue">{{
                      newsstate.lastnewstosent.templemail_str
                    }}</span>
                  </q-chip>
                  <div class="text-center"></div>

                  <q-chip
                    dense
                    class="shadow-5 q-mb-md"
                    color="blue"
                    text-color="white"
                    icon="schedule"
                  >
                    Data Schedulato:
                    <span class="mlvalue">{{
                      tools.getstrDateTimeAll(
                        newsstate.lastnewstosent.datetoSent
                      )
                    }}</span>
                  </q-chip>
                  <br />
                  <q-chip
                    dense
                    class="shadow-5 q-mb-md"
                    color="blue"
                    text-color="white"
                    icon="schedule"
                  >
                    Inizio Invio:
                    <span class="mlvalue">{{
                      tools.getstrDateTimeAll(
                        newsstate.lastnewstosent.datestartJob
                      )
                    }}</span>
                  </q-chip>

                  <q-chip
                    dense
                    class="shadow-5 q-mb-md"
                    color="blue"
                    text-color="white"
                    icon="schedule"
                  >
                    Fine Invio:
                    <span class="mlvalue">{{
                      tools.getstrDateTimeAll(
                        newsstate.lastnewstosent.datefinishJob
                      )
                    }}</span>
                  </q-chip>
                  <br />
                  <div
                    v-if="
                      newsstate.lastnewstosent.activate &&
                      newsstate.lastnewstosent.starting_job &&
                      !newsstate.lastnewstosent.finish_job
                    "
                  >
                    <q-chip
                      dense
                      class="shadow-5 q-mb-md"
                      color="orange"
                      text-color="white"
                      icon="email"
                    >
                      <span class="mlvalue">Invio Newsletter in Corso...</span>
                    </q-chip>
                    <br />
                  </div>
                  <div v-if="!newsstate.lastnewstosent.activate">
                    <q-chip
                      dense
                      class="shadow-5 q-mb-md"
                      color="red"
                      text-color="white"
                      icon="email"
                    >
                      <span class="mlvalue"
                        >L'invio della Newsletter è stato fermato
                        dall'Utente.</span
                      >
                    </q-chip>
                    <br />
                  </div>

                  <div>
                    <q-chip
                      dense
                      class="shadow-5 q-mb-md"
                      color="blue"
                      text-color="white"
                      icon="schedule"
                    >
                      Ultima Email inviata:
                      <span class="mlvalue">{{
                        tools.getstrTimeAll(
                          newsstate.lastnewstosent.lastemailsent_Job
                        )
                      }}</span>
                    </q-chip>
                    <q-chip
                      dense
                      class="shadow-5 q-mb-md"
                      color="blue"
                      text-color="white"
                      icon="email"
                    >
                      Inviate:
                      <span class="mlvalue"
                        >{{ newsstate.lastnewstosent.numemail_sent }} /
                        {{ newsstate.lastnewstosent.numemail_tot }}</span
                      >
                    </q-chip>
                    <q-circular-progress
                      show-value
                      font-size="12px"
                      :value="percsent(false)"
                      size="60px"
                      :thickness="0.5"
                      color="green"
                      track-color="grey-3"
                      class="q-ma-md"
                    >
                      <span class="mlvalue"> {{ percsent(false) }} % </span>
                    </q-circular-progress>
                    <div class="text-center">
                      <q-slider
                        v-model="newsstate.lastnewstosent.numemail_sent"
                        :min="0"
                        readonly
                        :max="newsstate.lastnewstosent.numemail_tot"
                        :step="1"
                        label
                        label-always
                        color="light-green"
                      ></q-slider>
                    </div>
                  </div>
                  <div v-if="newsstate.lastnewstosent.finish_job">
                    <br />
                    <q-chip
                      dense
                      class="shadow-5 q-mb-md"
                      color="green"
                      text-color="white"
                      icon="email"
                    >
                      <span class="mlvalue">Invio Newsletter Completato</span>
                    </q-chip>
                  </div>

                  <div v-if="!newsstate.lastnewstosent.finish_job">
                    <q-btn
                      v-if="newsstate.lastnewstosent.activate"
                      :loading="myloadingState"
                      rounded
                      outline
                      @click="DisableNewsletter()"
                      color="negative"
                      icon=""
                    >
                      Ferma l'Invio della Newsletter
                      <template v-slot:loading>
                        <q-spinner-hourglass class="on-left" />
                        Disattivazione Invio Newsletter ...
                      </template>
                    </q-btn>
                    <q-btn
                      v-if="!newsstate.lastnewstosent.activate"
                      :loading="myloadingState"
                      rounded
                      outline
                      @click="EnableNewsletter()"
                      color="positive"
                      icon=""
                    >
                      Riattiva l'Invio della Newsletter
                      <template v-slot:loading>
                        <q-spinner-hourglass class="on-left" />
                        Riattivazione Invio Newsletter ...
                      </template>
                    </q-btn>
                  </div>
                </q-card-section>
                <q-inner-loading id="spinner2" :showing="myloading">
                  <q-spinner-tail color="primary" size="4em"> </q-spinner-tail>
                </q-inner-loading>
              </q-card>
            </div>
          </div>
        </q-tab-panel>

        <q-tab-panel name="newslist">
          <CTitleBanner
            bgcolor="bg-accent"
            title="Lista Newsletter Inviate:"
          ></CTitleBanner>

          <CGridTableRec
            prop_mytitle="Newsletter"
            prop_mytable="newstosent"
            :prop_mycolumns="getcolnewstosent()"
            :prop_colkey="fieldsTable.getKeyByTable('newstosent')"
            nodataLabel="Nessuna Newsletter attualmente creata"
            noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
          >
          </CGridTableRec>
        </q-tab-panel>
        <q-tab-panel name="mailinglist">
          <div class="q-ma-md rounded-borders q-list--bordered">
            <CTitleBanner
              title="Lista Contatti:"
              bgcolor="bg-positive"
            ></CTitleBanner>

            <div
              class="
                q-ma-md q-pa-sm
                text-center
                rounded-borders
                q-list--bordered
              "
            >
              <q-chip
                dense
                class="shadow-5 q-mb-md"
                color="blue"
                text-color="white"
                icon="email"
              >
                Email Totali:
                <span class="mlvalue">{{ newsstate.totemail }}</span>
              </q-chip>
              <q-chip
                dense
                class="shadow-5 q-mb-md"
                color="green"
                text-color="white"
                icon="event_available"
              >
                Email Sottoscritte:
                <span class="mlvalue">{{ newsstate.totsubscribed }}</span>
              </q-chip>
              <q-circular-progress
                show-value
                font-size="12px"
                :value="percsubscribed * 100"
                size="60px"
                :thickness="0.22"
                color="green"
                track-color="grey-3"
                class="q-ma-md"
              >
                <span class="mlvalue"> {{ progresslabsubscribed() }} </span>
              </q-circular-progress>

              <q-chip
                dense
                class="shadow-5 q-mb-md"
                color="orange"
                text-color="white"
                icon=""
              >
                Email Desottoscritte:
                <span class="mlvalue">{{ newsstate.totunsubscribed }}</span>
              </q-chip>
            </div>

            <CGridTableRec
              prop_mytitle="Lista Contatti"
              :prop_mytable="toolsext.TABMAILINGLIST"
              :prop_mycolumns="getcolmailinglist()"
              :prop_colkey="fieldsTable.getKeyByTable('mailinglist')"
              nodataLabel="Nessuna Lista Contatti attualmente creata"
              noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
            >
            </CGridTableRec>

            <CTitleBanner title="Importa lista di Email:"></CTitleBanner>
            <div
              class="
                q-ma-md q-pa-sm
                text-center
                rounded-borders
                q-list--bordered
              "
            >
              <q-input
                v-model="mailinglist_imported"
                autofocus
                filled
                bordered
                color="blue-12"
                @keyup.enter.stop
                type="textarea"
              >
              </q-input>
              <div class="q-ma-md q-pa-sm text-center">
                <q-btn
                  :loading="myloadingImport"
                  rounded
                  outline
                  :disable="mailinglist_imported === ''"
                  @click="importMailinglist()"
                  color="primary"
                  icon="email"
                >
                  Importa
                  <template v-slot:loading>
                    <q-spinner-hourglass class="on-left" />
                    Importazione Email in corso ...
                  </template>
                </q-btn>
              </div>

              <transition
                enter-active-class="animated fadeIn"
                leave-active-class="animated fadeOut"
                appear
              >
                <div>
                  <CTitleBanner
                    v-if="errimport"
                    bgcolor="bg-warning"
                    :title="myrisimport"
                  ></CTitleBanner>
                  <CTitleBanner
                    v-if="okimport"
                    :title="myrisimport"
                  ></CTitleBanner>
                </div>
              </transition>
            </div>
          </div>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </CMyPage>
</template>
<script lang="ts" src="./newsletter.ts">
</script>
<style lang="scss" scoped>
@import './newsletter.scss';
</style>