Ngiler SH3LL 360
Home
Information
Create File
Create Folder
:
/
home
/
tbf
/
quiz_tbf_accelerator
/
resources
/
js
/
components
/
Admin
/
Information Server
MySQL :
OFF
Perl :
OFF
CURL :
ON
WGET :
OFF
PKEXEC :
OFF
Directive
Local Value
IP Address
89.40.16.97
System
Linux server.atelieruldeit.ro 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 x86_64
User
tbf
PHP Version
7.3.33
Software
Apache
Doc root
Writable
close
Edit File :
Settings.vue
| Size :
12.79
KB
Copy
<template> <div class="content admin"> <div class="container-fluid"> <div class="row w-100 align-items-center mb-3"> <h2 class="page-title dashboard col-md-6 col-sm-3">Settings</h2> <div class="col-md-6 d-flex justify-content-end"><button class=" btn btn-success" @click="saveSettings">Save</button></div> <div class="clearfix"></div> </div> <div class="row"> <div class="col-6"> <div class="card"> <div class="card-header header-dashboard d-flex align-items-center pl-4 pr-4 justify-content-center"> <h4 class="card-title"></h4> </div> <div class="card-body pl-4 pr-4"> <form> <div class="form-group row"> <div class="col-sm-12"> <input type="text" v-model="settings.crm_host" class="form-control" placeholder="CRM host"> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="text" v-model="settings.crm_api_key" class="form-control" placeholder="CRM api key"> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <label> <input type="checkbox" v-model="settings.has_crm"> Has Crm </label> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <label> <input type="checkbox" v-model="settings.reset_button"> Reset Button </label> </div> </div> </form> </div> </div> </div> <div class="col-6"> <div class="card"> <div class="card-header header-dashboard d-flex align-items-center pl-4 pr-4 justify-content-center"> <h4 class="card-title"></h4> </div> <div class="card-body pl-4 pr-4"> <form> <div class="form-group row"> <div class="col-sm-12"> <input type="text" v-model="settings.pixel_api_key" class="form-control" placeholder="Pixel api key"> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="text" v-model="settings.google_analytics_api_key" class="form-control" placeholder="Google Analytics api key"> </div> </div> </form> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="card"> <div class="card-header"> <h5> Mailchimp </h5> </div> <div class="card-body d-flex flex-column pl-4 pr-2"> <div class="row w-100"> <div class="form-group col-sm-7"> <input type="text" v-model="settings.mailchimp_api_key" class="form-control" placeholder="Mailchimp api key"> </div> <div class="form-group col-sm-5"> <button class="btn btn-primary" @click="fetchListings()">Fetch listings</button> </div> </div> <div class="row w-100"> <div class="form-group col-sm-12" v-if="mailchimp_listings.length>0"> <select class="form-control" v-model="settings.mailchimp_listing_id"> <option v-for="(listing, key) in mailchimp_listings" :value="listing.id" :key="'listing'+key"> {{listing.name}} </option> </select> <!-- <input type="text" v-model="settings.mailchimp_listing_id" class="form-control" placeholder="Mailchimp listing id"> --> </div> </div> <div class="row w-100"> <div class="form-group col-sm-12"> <label> <input type="checkbox" v-model="settings.has_mailchimp"> Has Mailchimp </label> </div> </div> </div> </div> </div> <div class="col-6"> <div class="card"> <div class="card-header"> <h5>Fav ico</h5> </div> <div class="card-body d-flex justify-content-center pl-4 pr-4"> <input type="file" ref="addFavIco" style="display: none" @change="changeFavIco"> <img class="fav-icon-img" @click="$refs.addFavIco.click()" :src="fav_ico != '' ? fav_ico : '/build/images/placeholder.jpg'"> </div> </div> </div> <div class="col-6" v-if="crm_lists.length > 0"> <div class="card"> <div class="card-header"> <h5>Crm lists</h5> </div> <div class="card-body d-flex justify-content-center pl-4 pr-4"> <div class="row w-100"> <multiselect :options="crm_lists" v-model="selectedCrmLists" track-by="id" :multiple="true" label="name"></multiselect> </div> </div> </div> </div> </div> </div> </div> </template> <style src="vue-multiselect/dist/vue-multiselect.min.css"></style> <script> export default { data() { return { error: undefined, settings: { crm_host: '', crm_api_key: '', has_crm: '', reset_button: '', pixel_api_key: '', google_analytics_api_key: '' }, mailchimp_listings: [], selectedCrmLists: [], crm_lists: [], fav_ico: '' } }, created() { }, mounted(){ this.getSettings(); this.loadImage('/images/fav.ico') }, methods:{ getSettings(){ axios.get('/auth/user').then(({data:{crm_lists,data}})=>{ if(crm_lists != null){ this.crm_lists = crm_lists; if(data.crm_list_ids != null){ this.selectedCrmLists = this.crm_lists.filter((list)=>{ if(data.crm_list_ids.includes(',')){ if(data.crm_list_ids.split(',').includes(list.id)){ return list; } }else{ if(data.crm_list_ids == list.id){ return list; } } }) } }else{ this.crm_lists = []; } this.settings.crm_host = data.crm_host != null ? data.crm_host : ''; this.settings.crm_api_key = data.crm_api_key != null ? data.crm_api_key : ''; this.settings.has_crm = data.has_crm != null ? data.has_crm : ''; this.settings.reset_button = data.reset_button != null ? data.reset_button : '' this.settings.pixel_api_key = data.pixel_api_key != null ? data.pixel_api_key : '' this.settings.mailchimp_api_key = data.mailchimp_api_key != null ? data.mailchimp_api_key : '' this.settings.has_mailchimp = data.has_mailchimp != null ? data.has_mailchimp : '' this.settings.mailchimp_listing_id = data.mailchimp_listing_id != null ? data.mailchimp_listing_id : '' this.settings.google_analytics_api_key = data.google_analytics_api_key != null ? data.google_analytics_api_key : '' if(this.settings.mailchimp_api_key){ this.fetchListings(); } this.$root.$emit('doneLoading'); }) }, saveSettings(){ const formData = new FormData(); formData.append('crm_host', this.settings.crm_host); formData.append('image', this.settings.fav_ico); formData.append('crm_api_key', this.settings.crm_api_key); formData.append('has_crm', this.settings.has_crm); formData.append('mailchimp_api_key', this.settings.mailchimp_api_key); formData.append('has_mailchimp', this.settings.has_mailchimp); formData.append('mailchimp_listing_id', this.settings.mailchimp_listing_id); formData.append('reset_button', this.settings.reset_button); formData.append('pixel_api_key', this.settings.pixel_api_key); formData.append('google_analytics_api_key', this.settings.google_analytics_api_key); formData.append('crm_list_ids', this.selectedCrmLists.map((data)=> {return data.id}).join()); axios({ method: 'post', url: '/settings', data: formData, config: { headers: { 'Content-Type': 'multipart/form-data' } } }).then( (response) => { this.$notify({ group: 'main', title: 'Salvat cu succes', type: "success", }); this.getSettings() }) }, loadImage(variable){ var image = new Image(); var url_image = variable; image.onload = () => {this.checkIfImageExists()}; image.src = url_image; }, checkIfImageExists(){ this.fav_ico = '/images/fav.ico'; }, changeFavIco() { let file = this.$refs.addFavIco.files[0] let reader = new FileReader(); reader.onload = (e) => { this.fav_ico = e.target.result; } this.settings.fav_ico = file; reader.readAsDataURL(file); }, fetchListings(){ if(this.settings.mailchimp_api_key != ''){ axios({ method: 'post', url: '/fetchMailchimpListings', data: {'mailchimp_api_key': this.settings.mailchimp_api_key}, }).then(({data:{lists:{lists}}}) => { this.mailchimp_listings = lists; }) this.error = undefined }else{ this.error = 'Mailchimp api key empty' } } } } </script>
Back