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

548 lines
32 KiB
Vue
Raw Normal View History

<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>