관리-도구

편집 파일: sms_settings.vue

<template>
  <div class="main-content">
    <breadcumb :page="$t('sms_settings')" :folder="$t('Settings')"/>
    <div v-if="isLoading" class="loading_page spinner spinner-primary mr-3"></div>

<validation-observer ref="default_form_sms" v-if="!isLoading">
      <b-form @submit.prevent="Submit_Default_SMS">
        <b-row class="mt-5">
          <b-col lg="12" md="12" sm="12">
            <b-card no-body header="default sms gateway">
              <b-card-body>
                <b-row>
                    
                  <b-col lg="4" md="4" sm="12">
                    <b-form-group :label="$t('Default_SMS_Gateway')">
                      <v-select
                        v-model="default_sms_gateway"
                        :reduce="label => label.value"
                        :placeholder="$t('Choose_SMS_Gateway')"
                        :options="sms_gateway.map(sms_gateway => ({label: sms_gateway.title, value: sms_gateway.id}))"
                      />
                    </b-form-group>
                  </b-col>

<b-col md="12">
                    <b-form-group>
                      <b-button variant="primary" type="submit"><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button>
                    </b-form-group>
                  </b-col>
                </b-row>
              </b-card-body>
            </b-card>
          </b-col>
        </b-row>
      </b-form>
    </validation-observer>

<validation-observer ref="termi_form_sms" v-if="!isLoading">
      <b-form @submit.prevent="Submit_Termi_SMS">
        <b-row class="mt-5">
          <b-col lg="12" md="12" sm="12">
            <b-card no-body header="Termii">
              <b-card-body>
                <b-row>
                  
                   
                  <b-col lg="6" md="6" sm="12">
                    <validation-provider
                      name="TERMI_KEY"
                      :rules="{ required: true}"
                      v-slot="validationContext"
                    >
                      <b-form-group label="Termii KEY *">
                        <b-form-input
                          :state="getValidationState(validationContext)"
                          aria-describedby="TERMI_KEY-feedback"
                          label="TERMI_KEY"
                          v-model="termi.TERMI_KEY"
                        ></b-form-input>
                        <b-form-invalid-feedback
                          id="TERMI_KEY-feedback"
                        >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
                      </b-form-group>
                    </validation-provider>
                  </b-col>

<b-col lg="6" md="6" sm="12">
                    <validation-provider
                      name="TERMI_SECRET"
                      :rules="{ required: true}"
                      v-slot="validationContext"
                    >
                      <b-form-group label="Termii SECRET *">
                        <b-form-input
                          :state="getValidationState(validationContext)"
                          aria-describedby="TERMI_SECRET-feedback"
                          label="TERMI_SECRET"
                          v-model="termi.TERMI_SECRET"
                        ></b-form-input>
                        <b-form-invalid-feedback
                          id="TERMI_SECRET-feedback"
                        >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
                      </b-form-group>
                    </validation-provider>
                  </b-col>

<b-col lg="6" md="6" sm="12">
                    <validation-provider
                      name="TERMI_SENDER"
                      :rules="{ required: true}"
                      v-slot="validationContext"
                    >
                      <b-form-group label="Termii Sender *">
                        <b-form-input
                          :state="getValidationState(validationContext)"
                          aria-describedby="TERMI_SENDER-feedback"
                          label="TERMI_SENDER"
                          v-model="termi.TERMI_SENDER"
                        ></b-form-input>
                        <b-form-invalid-feedback
                          id="TERMI_SENDER-feedback"
                        >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
                      </b-form-group>
                    </validation-provider>
                  </b-col>

<b-col md="12">
                    <b-form-group>
                      <b-button variant="primary" type="submit"><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button>
                    </b-form-group>
                  </b-col>
                </b-row>
              </b-card-body>
            </b-card>
          </b-col>
        </b-row>
      </b-form>
    </validation-observer>

<validation-observer ref="twilio_form_sms" v-if="!isLoading">
      <b-form @submit.prevent="Submit_Twilio_SMS">
        <b-row class="mt-5">
          <b-col lg="12" md="12" sm="12">
            <b-card no-body header="TWILIO_SMS">
              <b-card-body>
                <b-row>
                  
                   
                  <b-col lg="6" md="6" sm="12">
                    <validation-provider
                      name="TWILIO_SID"
                      :rules="{ required: true}"
                      v-slot="validationContext"
                    >
                      <b-form-group label="TWILIO SID *">
                        <b-form-input
                          :state="getValidationState(validationContext)"
                          aria-describedby="TWILIO_SID-feedback"
                          label="TWILIO_SID"
                          v-model="twilio.TWILIO_SID"
                        ></b-form-input>
                        <b-form-invalid-feedback
                          id="TWILIO_SID-feedback"
                        >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
                      </b-form-group>
                    </validation-provider>
                  </b-col>

<b-col lg="6" md="6" sm="12">
                      <b-form-group label="TWILIO TOKEN *">
                        <b-form-input
                          label="TWILIO_TOKEN"
                          v-model="twilio.TWILIO_TOKEN"
                          :placeholder="$t('LeaveBlank')"
                        ></b-form-input>
                      </b-form-group>
                  </b-col>

<b-col lg="6" md="6" sm="12">
                    <validation-provider
                      name="TWILIO_FROM"
                      :rules="{ required: true}"
                      v-slot="validationContext"
                    >
                      <b-form-group label="TWILIO FROM *">
                        <b-form-input
                          :state="getValidationState(validationContext)"
                          aria-describedby="TWILIO_FROM-feedback"
                          label="TWILIO_FROM"
                          v-model="twilio.TWILIO_FROM"
                        ></b-form-input>
                        <b-form-invalid-feedback
                          id="TWILIO_FROM-feedback"
                        >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
                      </b-form-group>
                    </validation-provider>
                  </b-col>

<b-col md="12">
                    <b-form-group>
                      <b-button variant="primary" type="submit"><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button>
                    </b-form-group>
                  </b-col>
                </b-row>
              </b-card-body>
            </b-card>
          </b-col>
        </b-row>
      </b-form>
    </validation-observer>

<validation-observer ref="infobip_form_sms" v-if="!isLoading">
      <b-form @submit.prevent="Submit_infobip_SMS">
        <b-row class="mt-5">
          <b-col lg="12" md="12" sm="12">
            <b-card no-body header="InfoBip">
              <b-card-body>
                <b-row>
                  
                   
                  <b-col lg="6" md="6" sm="12">
                      <b-form-group label="BASE URL">
                        <b-form-input
                          label="BASE_URL"
                          v-model="infobip.base_url"
                        ></b-form-input>
                      </b-form-group>
                  </b-col>

<b-col lg="6" md="6" sm="12">
                      <b-form-group  label="API KEY">
                        <b-form-input
                          label="API_KEY"
                          v-model="infobip.api_key"
                        ></b-form-input>
                      </b-form-group>
                  </b-col>

<b-col lg="6" md="6" sm="12">
                      <b-form-group label="SMS sender number Or Name">
                        <b-form-input
                          label="SMS_From"
                          v-model="infobip.sender_from"
                        ></b-form-input>
                      </b-form-group>
                  </b-col>

<b-col md="12">
                    <b-form-group>
                      <b-button variant="primary" type="submit"><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button>
                    </b-form-group>
                  </b-col>
                </b-row>
              
              <p class="mt-5">
                <strong>BASE_URL : </strong> The Infobip data center used for API traffic.<br>

<strong>API_KEY :</strong> Authentication method. See API documentation <br>

<strong>SMS sender number Or Name :</strong> displayed on recipient's device as message sender. <br>
                
                <strong>WhatsApp sender number :</strong> Registered WhatsApp sender number. Must be in international format.<br>

<strong> ## Links</strong><br>

<strong>[API Reference](https://www.infobip.com/docs/api)</strong><br>

<strong>[PHP Client for Infobip API](https://github.com/infobip/infobip-api-php-client)</strong><br>
            </p>
            </b-card-body>
            </b-card>
          </b-col>
        </b-row>
      </b-form>

</validation-observer>

</div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import NProgress from "nprogress";

export default {
  metaInfo: {
    title: "SMS Settings"
  },
  data() {
    return {
      
      isLoading: true,
      sms_gateway: [],
      default_sms_gateway:'',

twilio:{
        TWILIO_SID:'',
        TWILIO_TOKEN:'',
        TWILIO_FROM:'',
      },

termi:{
        TERMI_KEY:'',
        TERMI_SECRET:'',
        TERMI_SENDER:'',
      },

infobip:{
        base_url:'',
        api_key:'',
        sender_from:'',
      },
     
    };
  },

methods: {
    ...mapActions(["refreshUserPermissions"]),

//------------- Submit_Default_SMS
    Submit_Default_SMS() {
      this.$refs.default_form_sms.validate().then(success => {
        if (!success) {
          this.makeToast(
            "danger",
            this.$t("Please_fill_the_form_correctly"),
            this.$t("Failed")
          );
        } else {
            this.update_Default_SMS();
        }
      });
    },

//------------- Submit Validation SMS
    Submit_Twilio_SMS() {
      this.$refs.twilio_form_sms.validate().then(success => {
        if (!success) {
          this.makeToast(
            "danger",
            this.$t("Please_fill_the_form_correctly"),
            this.$t("Failed")
          );
        } else {
            this.update_twilio_config();
        }
      });
    },

//------------- Submit Validation SMS
    Submit_Termi_SMS() {
      this.$refs.termi_form_sms.validate().then(success => {
        if (!success) {
          this.makeToast(
            "danger",
            this.$t("Please_fill_the_form_correctly"),
            this.$t("Failed")
          );
        } else {
            this.update_termi_config();
        }
      });
    },

//------------- Submit Validation SMS
    Submit_infobip_SMS() {
      this.$refs.infobip_form_sms.validate().then(success => {
        if (!success) {
          this.makeToast(
            "danger",
            this.$t("Please_fill_the_form_correctly"),
            this.$t("Failed")
          );
        } else {
            this.update_infobip_config();
        }
      });
    },

//------ Toast
    makeToast(variant, msg, title) {
      this.$root.$bvToast.toast(msg, {
        title: title,
        variant: variant,
        solid: true
      });
    },

getValidationState({ dirty, validated, valid = null }) {
      return dirty || validated ? valid : null;
    },

//---------------------------------- update_twilio_config ----------------\\
    update_Default_SMS() {
      NProgress.start();
      NProgress.set(0.1);
      axios
        .put("update_Default_SMS",{
          default_sms_gateway: this.default_sms_gateway,
        })
        .then(response => {
          this.makeToast(
            "success",
            this.$t("Successfully_Updated"),
            this.$t("Success")
          );
          NProgress.done();
        })
        .catch(error => {
          NProgress.done();
          this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed"));
        });
    },

//---------------------------------- update_twilio_config ----------------\\
    update_twilio_config() {
      NProgress.start();
      NProgress.set(0.1);
      axios
        .post("update_twilio_config",{
          TWILIO_SID: this.twilio.TWILIO_SID,
          TWILIO_TOKEN: this.twilio.TWILIO_TOKEN,
          TWILIO_FROM: this.twilio.TWILIO_FROM,
        })
        .then(response => {
          Fire.$emit("Event_sms");
          this.makeToast(
            "success",
            this.$t("Successfully_Updated"),
            this.$t("Success")
          );
          NProgress.done();
        })
        .catch(error => {
          NProgress.done();
          this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed"));
        });
    },

//---------------------------------- update_termi_config ----------------\\
    update_termi_config() {
      NProgress.start();
      NProgress.set(0.1);
      axios
        .post("update_termi_config",{
          TERMI_KEY: this.termi.TERMI_KEY,
          TERMI_SECRET: this.termi.TERMI_SECRET,
          TERMI_SENDER: this.termi.TERMI_SENDER,
        })
        .then(response => {
          Fire.$emit("Event_sms");
          this.makeToast(
            "success",
            this.$t("Successfully_Updated"),
            this.$t("Success")
          );
          NProgress.done();
        })
        .catch(error => {
          NProgress.done();
          this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed"));
        });
    },

//---------------------------------- update_termi_config ----------------\\
    update_infobip_config() {
      NProgress.start();
      NProgress.set(0.1);
      axios
        .post("update_infobip_config",{
          base_url: this.infobip.base_url,
          api_key: this.infobip.api_key,
          sender_from: this.infobip.sender_from,
        })
        .then(response => {
          Fire.$emit("Event_sms");
          this.makeToast(
            "success",
            this.$t("Successfully_Updated"),
            this.$t("Success")
          );
          NProgress.done();
        })
        .catch(error => {
          NProgress.done();
          this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed"));
        });
    },

//---------------------------------- get_sms_config ----------------\\
    get_sms_config() {
      axios
        .get("get_sms_config")
        .then(response => {
          this.twilio = response.data.twilio;
          this.termi = response.data.termi;
          this.infobip = response.data.infobip;
          this.sms_gateway = response.data.sms_gateway;
          this.default_sms_gateway = response.data.default_sms_gateway;
          this.isLoading = false;
        })
        .catch(error => {
          setTimeout(() => {
            this.isLoading = false;
          }, 500);
        });
    },

}, //end Methods

//----------------------------- Created function-------------------

created: function() {
    this.get_sms_config();

Fire.$on("Event_sms", () => {
      this.get_sms_config();
    });
  }
};
</script>

Edulab LMS

Course Details

Home
Course Details

(0) Rating

Full Stack Web Development with JavaScript

Learn how to develop full-stack web applications from scratch.

Robert Smith

Beginner

Data Science

Course Overview

Learn how to develop full-stack web applications from scratch. Explore frontend technologies like HTML, CSS, and JavaScript along with backend frameworks like Node.js, Django, and databases like MongoDB and MySQL. Perfect for those aiming to become versatile developers.

Learning Outcomes

Course Requirements

Course FAQS

Course Curriculum

Full Stack JavaScript Complete Course

1 Lesson

Course Instructor

Robert Smith

Senior Web Developer

instructor@gmail.com

Hi, I’m Robert, a passionate UI/UX designer with a keen eye for creating intuitive, user-centric designs. I specialize in crafting seamless digital experiences that not only look great, but are also functional and accessible. With a strong background in design principles and a love of innovation, I strive to deliver interfaces that solve problems while providing delightful user interactions. Whether it’s designing mobile apps, websites, or complex software, my goal is always to improve usability and ensure a seamless journey for the end user.

Course Reviews

0

Out of 0 Rating

		0 Rating
		0 Rating
		0 Rating
		0 Rating
		0 Rating

Course thumbnail

This Course Includes:
Duration	2h 30m
Course Level	Beginner
Lessons	1
Tags	Back-End Development
Language	English
Price	$24

Related Course

Explore Related Courses