freeplanet/src/components/CStatus/CStatus.vue

<template>
  <div>
    <CTitleBanner class="text-center" title="Guida passo passo" bgcolor="bg-primary" clcolor="text-white"
                  mystyle="" myclass="myshad" :canopen="true">

      <div class="q-pa-xs">

        <q-stepper
          v-model="step"
          vertical
          header-nav
          done-color="green"
          active-color="blue"
          inactive-color="grey"
          animated
        >
          <q-step
            :name="1"
            :title="emailtext"
            icon="mail"
            :done="isEmailVerified"
            :error="!isEmailVerified"
            :error-icon="geterricon(true)"
          >
            <CVerifyEmail>

            </CVerifyEmail>

            <q-stepper-navigation v-if="isEmailVerified">
              <q-btn @click="step = 2" color="primary" :label="$t('dialog.avanti')"></q-btn>
            </q-stepper-navigation>

          </q-step>
          <q-step
            :name="2"
            :title="telegramtext"
            icon="fab fa-telegram"
            :done="TelegVerificato"
            :error="!TelegVerificato"
            :error-icon="geterricon(true)"
          >
            <q-chip v-if="TelegVerificato" color="positive" text-color="white" icon="fab fa-telegram">
              {{ telegramtext }}
            </q-chip>
            <q-chip v-else color="negative" text-color="white" icon="email">
              {{ telegramtext }}
            </q-chip>

            <CVerifyTelegram v-if="TelegCode || !TelegVerificato">

            </CVerifyTelegram>


            <q-stepper-navigation>
              <q-btn v-if="TelegVerificato" @click="step = 3" color="primary" :label="$t('dialog.avanti')"></q-btn>
              <q-btn flat @click="step = 1" color="primary" :label="$t('dialog.indietro')" class="q-ml-sm"></q-btn>
            </q-stepper-navigation>
          </q-step>
          <q-step
            v-for="(mystep, index) in arrsteps"
            :key="mystep.title"
            :name="NUMSTEP_START + index"
            :title="gettextstep(mystep)"
            :icon="geticonstep(mystep.title)"
            :done-color="geticoncolor(mystep.title)"
            :done="mystep.funccheck(index)"
            :error="getiferror(mystep.funccheck_error(index), mystep.funccheck(index))"
            :error-icon="geterricon(mystep.funccheck(index))"
          >
            <div v-if="mystep.title === 'steps.paymenttype'">
              <div v-if="mystep.descr">
                <div v-html="$t(mystep.descr)"></div>
              </div>
              <div>

                <CMyFieldDb :title="$t('reg.paymenttype')"
                            table="users"
                            mykey="profile"
                            mysubkey="paymenttypes"
                            :type="tools.FieldType.multiselect"
                            jointable="paymenttypes">
                </CMyFieldDb>

                <CMyFieldDb v-if="isselectPaypal" :title="$t('reg.email_paypal')"
                            table="users"
                            mykey="profile"
                            mysubkey="email_paypal"
                            :type="tools.FieldType.string">
                </CMyFieldDb>


              </div>
            </div>
            <div v-else-if="mystep.title === 'steps.dream'">
              <div v-if="mystep.descr">
                <div v-html="$t(mystep.descr)"></div>
              </div>
              <CMyFieldDb :title="$t('reg.my_dream')"
                          table="users"
                          mykey="profile"
                          mysubkey="my_dream"
                          :type="tools.FieldType.string"
              >
              </CMyFieldDb>
            </div>
            <div v-else-if="mystep.title === 'steps.chat_biblio'" >
              <div v-if="mystep.descr">
                <div v-html="$t(mystep.descr)"></div>
              </div>
              <br><strong>Entra in Chat BiblioBacheca, cliccando qui:</strong>

              <div class="landing__footer-icons row flex-center margin_buttons">
                <a v-if="!!TelegramBiblio" :href="TelegramBiblio" target="_blank">
                  <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>
              </div>

            </div>
            <div v-else-if="mystep.title === 'steps.zoom'">
              <div v-if="mystep.descr">
                <div v-html="$t(mystep.descr)"></div>
              </div>
              <CTitleBanner class="q-pa-xs" title="Che cos'è Zoom e come funziona?" bgcolor="bg-primary"
                            clcolor="text-white"
                            myclass="myshad" canopen="true" :visible="false">
                <div>

                  <h3>ISTRUZIONI ZOOM</h3>

                  <ul style="text-align: left; font-size:0.75rem;">
                    <li>1. Scarica l'app (<a href="https://play.google.com/store/apps/details?id=us.zoom.videomeetings"
                                             target="_blank">store</a> o <a href="https://zoom.us/support/download"
                                                                            target="_blank">da PC</a>)
                    </li>
                    <li>1B. Fai il test per vedere se funziona: <a href="https://zoom.us/test" target="_blank">Esegui
                      TEST</a></li>
                    <li>2. Clicca "Join meeting"</li>
                    <li>3. Inserisci il codice ID</li>
                    <li>4. Sotto inserisci il tuo nominativo per essere riconosciuto</li>
                    <li>5. Clicca "join meeting"</li>
                    <li>6. Clicca "call in device" altrimenti non potrai sentire 🔊</li>
                    <li>7. SILENZIARE I MICROFONI clicca sullo schermo e si aprirà una banda in basso</li>
                    <li>8. Clicca 🔇 per SILENZIARE</li>
                  </ul>

                  <div class="text-h6"><strong>In più avrai:</strong></div>
                  <ul style="text-align: left; font-size:0.75rem;">
                    <li>Tasto per togliere il video (📹) ❌</li>
                    <li>Tasto 'Share': per condividere contenuti condivisi</li>
                    <li>Tasto 'Partecipants' in cui sulla sinistra, in basso, troverai la CHAT.</li>
                    <li>Tasto 'More': troverai Raise Hands per fare le domande.</li>
                  </ul>

                </div>
              </CTitleBanner>


            </div>
            <div v-else-if="mystep.title === 'steps.sharemovement'">
              <div v-if="mystep.descr">
                <div v-html="$t(mystep.descr)"></div>
              </div>
              {{ $t('reg.reflink') + ' ' + getRefLink }}
            </div>
            <div v-else>
              <div v-if="mystep.page">
                <CMyInnerPage :path=mystep.page>
                  <div v-if="mystep.descr">
                    <div v-html="$t(mystep.descr)"></div>
                  </div>
                </CMyInnerPage>
              </div>
            </div>

            <q-stepper-navigation>
              <q-btn v-if="NUMSTEP_START + index < getlaststep" @click="step = NUMSTEP_START + index + 1"
                     color="primary" :label="$t('dialog.avanti')" class="q-ml-sm"></q-btn>
              <q-btn flat @click="step = NUMSTEP_START + index - 1" color="primary" :label="$t('dialog.indietro')"
                     class="q-ml-sm"></q-btn>
            </q-stepper-navigation>
          </q-step>

          <!--<q-step-->
          <!--:name="getlaststep"-->
          <!--:title="$t('dialog.finish')"-->
          <!--icon="check-circle"-->
          <!--:done="step > getlaststep"-->
          <!--&gt;-->

          <!--<q-stepper-navigation>-->
          <!--<q-btn flat @click="step = getlaststep - 1" color="primary" :label="$t('dialog.indietro')" class="q-ml-sm"></q-btn>-->
          <!--</q-stepper-navigation>-->
          <!--</q-step>-->
        </q-stepper>
      </div>

    </CTitleBanner>


  </div>
</template>

<script lang="ts" src="./CStatus.ts">
</script>

<style lang="scss">
  @import './CStatus.scss';
</style>