Advertisement
bheng8200

create.vue

May 17th, 2022
1,198
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <v-container fluid class="my-1">
  3.         <Navbar />
  4.         <Breadcrumbs />
  5.  
  6.         <v-snackbar transition="true" timeout="3000" v-model="alert" absolute top :color="`${alertColor}`" text outlined right>
  7.             <strong>
  8.                 {{ alertMessage }}
  9.             </strong>
  10.         </v-snackbar>
  11.  
  12.         <v-row>
  13.             <v-col cols="12">
  14.                 <v-card elevation="2">
  15.                     <PanelHeader
  16.                         type="create"
  17.                         icon="qr_code"
  18.                         title="Campaigns"
  19.                         :subTitle="`Fill in details to create a ${type.toLowerCase()} campaign`"
  20.                     />
  21.  
  22.                     <!-- removeRule -->
  23.                     <v-dialog v-model="showDeleteRuleModal" width="500px" class="d-flex justify-center">
  24.                         <v-card style="padding: 30px">
  25.                             <v-card-title class="red--text text--lighten-1 d-flex justify-center"> Delete </v-card-title>
  26.                             <v-card-text class="text-center"
  27.                                 >Are you sure you want to delete <strong> {{ currentRuleName }} </strong> ?</v-card-text
  28.                             >
  29.                             <v-card-actions class="d-flex justify-center">
  30.                                 <v-btn small outlined color="darken-3 white--text" @click="showDeleteRuleModal = false" class="mx-2">No</v-btn>
  31.                                 <v-btn small outlined @click="removeRule(currentIndex)" class="mx-2 red--text">Yes</v-btn>
  32.                             </v-card-actions>
  33.                         </v-card>
  34.                     </v-dialog>
  35.                     <!-- removeRule -->
  36.  
  37.                     <v-stepper v-model="e1" justify="center" elevation="0">
  38.                         <v-stepper-header>
  39.                             <v-stepper-step :complete="e1 > 1" step="1"> Campaign </v-stepper-step>
  40.                             <v-divider></v-divider>
  41.                             <v-stepper-step :complete="e1 > 2" step="2"> Setup </v-stepper-step>
  42.                             <v-divider></v-divider>
  43.                             <v-stepper-step step="3"> Finish </v-stepper-step>
  44.                         </v-stepper-header>
  45.  
  46.                         <v-stepper-items>
  47.                             <v-stepper-content step="1">
  48.                                 <v-card class="mb-12 py-5" elevation="0">
  49.                                     <v-form ref="form" lazy-validation v-model="valid" id="form">
  50.                                         <v-row class="mb-6">
  51.                                             <v-col md="6">
  52.                                                 <v-card outlined tile class="selection product" @click="selectCampaign('Product')">
  53.                                                     <v-row>
  54.                                                         <v-col md="1">
  55.                                                             <v-btn class="ml-2 mt-3" fab icon x-large height="60px" right width="60px">
  56.                                                                 <v-icon>qr_code_scanner</v-icon>
  57.                                                             </v-btn>
  58.                                                         </v-col>
  59.  
  60.                                                         <v-col md="10">
  61.                                                             <v-card-title outlined tile>Product</v-card-title>
  62.                                                             <v-card-subtitle outlined tile>
  63.                                                                 Create campaigns for products with existing QR Codes.
  64.                                                             </v-card-subtitle>
  65.                                                         </v-col>
  66.                                                     </v-row>
  67.                                                 </v-card>
  68.                                             </v-col>
  69.  
  70.                                             <v-col md="6">
  71.                                                 <v-card outlined tile class="selection marketing" @click="selectCampaign('Marketing')">
  72.                                                     <v-row>
  73.                                                         <v-col md="1">
  74.                                                             <v-btn class="ml-2 mt-3" fab icon x-large height="60px" right width="60px">
  75.                                                                 <v-icon>qr_code_2</v-icon>
  76.                                                             </v-btn>
  77.                                                         </v-col>
  78.  
  79.                                                         <v-col md="10">
  80.                                                             <v-card-title outlined tile>Marketing</v-card-title>
  81.                                                             <v-card-subtitle outlined tile>
  82.                                                                 Create campaigns and download QR Codes for marketing materials.
  83.                                                             </v-card-subtitle>
  84.                                                         </v-col>
  85.                                                     </v-row>
  86.                                                 </v-card>
  87.                                             </v-col>
  88.                                         </v-row>
  89.  
  90.                                         <v-btn color="primary" :disabled="!typeSelected" @click="validate()"> Continue </v-btn>
  91.                                         <router-link :to="`/campaigns`">
  92.                                             <v-btn text> Cancel </v-btn>
  93.                                         </router-link>
  94.                                     </v-form>
  95.                                 </v-card>
  96.                             </v-stepper-content>
  97.  
  98.                             <v-stepper-content step="2">
  99.                                 <v-card class="mb-12 py-5" elevation="0">
  100.                                     <v-form ref="form" lazy-validation v-model="valid" id="form2">
  101.                                         <v-row>
  102.                                             <!-- LEFT -->
  103.                                             <v-col md="3">
  104.                                                 <!-- ROW 1 -->
  105.  
  106.                                                 <v-row>
  107.                                                     <v-col md="12">
  108.                                                         <v-text-field
  109.                                                             class="type-input"
  110.                                                             dense
  111.                                                             outlined
  112.                                                             v-model="type"
  113.                                                             label="Type"
  114.                                                             disabled
  115.                                                         ></v-text-field>
  116.                                                     </v-col>
  117.                                                 </v-row>
  118.  
  119.                                                 <!-- ROW 2 -->
  120.  
  121.                                                 <v-row>
  122.                                                     <v-col md="12">
  123.                                                         <v-text-field
  124.                                                             dense
  125.                                                             outlined
  126.                                                             v-model="name"
  127.                                                             :rules="form.rules.name"
  128.                                                             label="Name"
  129.                                                             required
  130.                                                         ></v-text-field>
  131.                                                     </v-col>
  132.  
  133.                                                     <v-col md="12">
  134.                                                         <v-textarea rows="1" dense outlined v-model="description" label="Description"></v-textarea>
  135.                                                     </v-col>
  136.                                                 </v-row>
  137.                                             </v-col>
  138.  
  139.                                             <!-- col#2 -->
  140.  
  141.                                             <v-col md="3" v-if="type == 'Marketing'">
  142.                                                 <v-row>
  143.                                                     <v-col md="12">
  144.                                                         <v-select
  145.                                                             v-if="type == 'Marketing'"
  146.                                                             dense
  147.                                                             outlined
  148.                                                             item-text="name"
  149.                                                             item-value="id"
  150.                                                             :items="usages"
  151.                                                             v-model="useType"
  152.                                                             :rules="form.rules.useType"
  153.                                                             label="Use Type"
  154.                                                             deletable-chips
  155.                                                         ></v-select>
  156.                                                     </v-col>
  157.  
  158.                                                     <v-col md="12">
  159.                                                         <v-select
  160.                                                             v-if="type == 'Marketing'"
  161.                                                             dense
  162.                                                             outlined
  163.                                                             item-text="name"
  164.                                                             item-value="id"
  165.                                                             :items="frequencies"
  166.                                                             v-model="frequency"
  167.                                                             :rules="form.rules.frequency"
  168.                                                             label="Frequency"
  169.                                                             hint="How often the QR code will be available"
  170.                                                         ></v-select>
  171.                                                     </v-col>
  172.  
  173.                                                     <v-col md="12">
  174.                                                         <v-text-field
  175.                                                             dense
  176.                                                             outlined
  177.                                                             v-model="volume"
  178.                                                             :rules="form.rules.volume"
  179.                                                             label="Volume"
  180.                                                             hint="Total volume of consumers that could interact with QR Code"
  181.                                                         ></v-text-field>
  182.                                                     </v-col>
  183.                                                 </v-row>
  184.                                             </v-col>
  185.  
  186.                                             <!-- col#3 -->
  187.  
  188.                                             <v-col md="3">
  189.                                                 <v-row>
  190.                                                     <v-col md="12">
  191.                                                         <v-select
  192.                                                             dense
  193.                                                             outlined
  194.                                                             :items="timezones"
  195.                                                             v-model="timezone"
  196.                                                             :rules="form.rules.timezone"
  197.                                                             label="Timezone"
  198.                                                         ></v-select>
  199.                                                     </v-col>
  200.  
  201.                                                     <v-col md="6">
  202.                                                         <v-menu
  203.                                                             v-model="startDateMenu"
  204.                                                             :close-on-content-click="false"
  205.                                                             :nudge-right="40"
  206.                                                             transition="scale-transition"
  207.                                                             offset-y
  208.                                                             min-width="auto"
  209.                                                         >
  210.                                                             <template v-slot:activator="{ on, attrs }">
  211.                                                                 <v-text-field
  212.                                                                     dense
  213.                                                                     outlined
  214.                                                                     v-model="startDate"
  215.                                                                     :rules="form.rules.startDate"
  216.                                                                     label="Start Date"
  217.                                                                     append-icon="mdi-calendar"
  218.                                                                     readonly
  219.                                                                     v-bind="attrs"
  220.                                                                     v-on="on"
  221.                                                                 ></v-text-field>
  222.                                                             </template>
  223.                                                             <v-date-picker v-model="startDate"></v-date-picker>
  224.                                                         </v-menu>
  225.                                                     </v-col>
  226.  
  227.                                                     <v-col md="6">
  228.                                                         <v-menu
  229.                                                             ref="menu"
  230.                                                             v-model="startTimeMenu"
  231.                                                             :close-on-content-click="false"
  232.                                                             :nudge-right="40"
  233.                                                             transition="scale-transition"
  234.                                                             offset-y
  235.                                                             max-width="290px"
  236.                                                             min-width="290px"
  237.                                                         >
  238.                                                             <template v-slot:activator="{ on, attrs }">
  239.                                                                 <v-text-field
  240.                                                                     dense
  241.                                                                     v-model="startTime"
  242.                                                                     label="Start Time"
  243.                                                                     append-icon="mdi-clock-time-four-outline"
  244.                                                                     readonly
  245.                                                                     v-bind="attrs"
  246.                                                                     v-on="on"
  247.                                                                     outlined
  248.                                                                 ></v-text-field>
  249.                                                             </template>
  250.                                                             <v-time-picker
  251.                                                                 use-seconds
  252.                                                                 v-if="startTimeMenu"
  253.                                                                 v-model="startTime"
  254.                                                                 full-width
  255.                                                                 @click:minute="$refs.menu.save(startTime)"
  256.                                                             ></v-time-picker>
  257.                                                         </v-menu>
  258.                                                     </v-col>
  259.  
  260.                                                     <v-col md="6">
  261.                                                         <v-menu
  262.                                                             v-model="endDateMenu"
  263.                                                             :close-on-content-click="false"
  264.                                                             :nudge-right="40"
  265.                                                             transition="scale-transition"
  266.                                                             offset-y
  267.                                                             min-width="auto"
  268.                                                         >
  269.                                                             <template v-slot:activator="{ on, attrs }">
  270.                                                                 <v-text-field
  271.                                                                     dense
  272.                                                                     outlined
  273.                                                                     v-model="endDate"
  274.                                                                     :rules="form.rules.endDate"
  275.                                                                     :min="startDate"
  276.                                                                     label="End Date"
  277.                                                                     append-icon="mdi-calendar"
  278.                                                                     readonly
  279.                                                                     v-bind="attrs"
  280.                                                                     v-on="on"
  281.                                                                 ></v-text-field>
  282.                                                             </template>
  283.                                                             <v-date-picker v-model="endDate"></v-date-picker>
  284.                                                         </v-menu>
  285.                                                     </v-col>
  286.  
  287.                                                     <v-col md="6">
  288.                                                         <v-menu
  289.                                                             ref="menu"
  290.                                                             v-model="endTimeMenu"
  291.                                                             :close-on-content-click="false"
  292.                                                             :nudge-right="40"
  293.                                                             transition="scale-transition"
  294.                                                             offset-y
  295.                                                             max-width="290px"
  296.                                                             min-width="290px"
  297.                                                         >
  298.                                                             <template v-slot:activator="{ on, attrs }">
  299.                                                                 <v-text-field
  300.                                                                     dense
  301.                                                                     v-model="endTime"
  302.                                                                     label="End Time"
  303.                                                                     append-icon="mdi-clock-time-four-outline"
  304.                                                                     readonly
  305.                                                                     v-bind="attrs"
  306.                                                                     v-on="on"
  307.                                                                     outlined
  308.                                                                 ></v-text-field>
  309.                                                             </template>
  310.                                                             <v-time-picker
  311.                                                                 v-if="endTimeMenu"
  312.                                                                 v-model="endTime"
  313.                                                                 :min="startTime"
  314.                                                                 use-seconds
  315.                                                                 full-width
  316.                                                             ></v-time-picker>
  317.                                                         </v-menu>
  318.                                                     </v-col>
  319.                                                 </v-row>
  320.                                             </v-col>
  321.  
  322.                                             <!-- RIGHT -->
  323.                                             <v-col md="2">
  324.                                                 <img width="100%" :src="qrCode" />
  325.                                             </v-col>
  326.                                         </v-row>
  327.                                     </v-form>
  328.                                 </v-card>
  329.                                 <v-card class="mb-12 py-5" elevation="0">
  330.                                     <v-form ref="form2" lazy-validation v-model="valid2" id="form2">
  331.                                         <!-- ----------------
  332.                                         /// showAddRuleModal
  333.                                         ---------------- -->
  334.  
  335.                                         <v-dialog v-model="showAddRule" width="1200px" class="d-flex justify-left">
  336.                                             <v-card style="padding: 30px">
  337.                                                 <v-form ref="form3" lazy-validation v-model="valid3" id="form3">
  338.                                                     <h3>Create Rule</h3>
  339.                                                     <small class="text--disabled">Fill in details to create a rule</small>
  340.  
  341.                                                     <v-row class="mt-15">
  342.                                                         <v-col md="12">
  343.                                                             <v-text-field
  344.                                                                 dense
  345.                                                                 outlined
  346.                                                                 v-model="ruleName"
  347.                                                                 :rules="form.rules.name"
  348.                                                                 label="Rule Name"
  349.                                                                 required
  350.                                                             ></v-text-field>
  351.                                                         </v-col>
  352.  
  353.                                                         <v-card-text class="font-weight-bold">
  354.                                                             Destination
  355.  
  356.                                                             <v-tooltip right>
  357.                                                                 <template v-slot:activator="{ on, attrs }">
  358.                                                                     <v-btn icon v-bind="attrs" v-on="on">
  359.                                                                         <v-icon color="grey lighten-1">info</v-icon>
  360.                                                                     </v-btn>
  361.                                                                 </template>
  362.                                                                 <span
  363.                                                                     >The scan destination is the end point for a consumer experience. Can be single
  364.                                                                     URL or use URL Groups.
  365.                                                                 </span>
  366.                                                             </v-tooltip>
  367.                                                         </v-card-text>
  368.  
  369.                                                         <v-col md="4">
  370.                                                             <v-select
  371.                                                                 dense
  372.                                                                 outlined
  373.                                                                 :items="urlTypes"
  374.                                                                 label="Single or Multi URL"
  375.                                                                 v-model="urlType"
  376.                                                                 :rules="form.rules.urlType"
  377.                                                                 v-on:change="changeType(urlType)"
  378.                                                             ></v-select>
  379.                                                         </v-col>
  380.                                                         <v-col md="8" v-if="urlType == 'Single'">
  381.                                                             <v-text-field
  382.                                                                 dense
  383.                                                                 outlined
  384.                                                                 v-model="url"
  385.                                                                 :rules="form.rules.url"
  386.                                                                 label="URL"
  387.                                                                 required
  388.                                                             ></v-text-field>
  389.                                                         </v-col>
  390.  
  391.                                                         <v-col md="8" v-if="urlType == 'Multi'">
  392.                                                             <v-combobox
  393.                                                                 v-model="urlGroup.name"
  394.                                                                 :items="urlGroups"
  395.                                                                 item-text="name"
  396.                                                                 item-value="id"
  397.                                                                 label="URL Group"
  398.                                                                 outlined
  399.                                                                 dense
  400.                                                                 v-on:change="changeURLGroup(urlGroup.name)"
  401.                                                             ></v-combobox>
  402.                                                         </v-col>
  403.                                                     </v-row>
  404.  
  405.                                                     <v-row>
  406.                                                         <v-col md="4">
  407.                                                             <v-card-text class="font-weight-bold">
  408.                                                                 Conditions
  409.  
  410.                                                                 <v-tooltip right>
  411.                                                                     <template v-slot:activator="{ on, attrs }">
  412.                                                                         <v-btn icon v-bind="attrs" v-on="on">
  413.                                                                             <v-icon color="grey lighten-1">info</v-icon>
  414.                                                                         </v-btn>
  415.                                                                     </template>
  416.                                                                     <span
  417.                                                                         >The scan destination is the end point for a consumer experience. Can be
  418.                                                                         single URL or use URL Groups.
  419.                                                                     </span>
  420.                                                                 </v-tooltip>
  421.  
  422.                                                                 <v-btn outlined class="blue--text" @click="addRuleDetail()">
  423.                                                                     <v-icon dark> add </v-icon>
  424.                                                                     Condition
  425.                                                                 </v-btn>
  426.                                                             </v-card-text>
  427.                                                         </v-col>
  428.                                                         <v-col md="8">
  429.                                                             <v-combobox
  430.                                                                 v-model="selectedCategories"
  431.                                                                 :items="attributeCategories"
  432.                                                                 item-text="name"
  433.                                                                 item-value="id"
  434.                                                                 label="Category"
  435.                                                                 multiple
  436.                                                                 chips
  437.                                                                 clear-icon="mdi-close-circle"
  438.                                                                 deletable-chips
  439.                                                                 v-on:blur="changeCategory(selectedCategories)"
  440.                                                             ></v-combobox>
  441.                                                         </v-col>
  442.                                                     </v-row>
  443.  
  444.                                                     <v-row v-for="(rule, index) in ruleDetails" :key="index">
  445.                                                         <v-col md="4">
  446.                                                             <v-select
  447.                                                                 dense
  448.                                                                 outlined
  449.                                                                 item-text="name"
  450.                                                                 item-value="id"
  451.                                                                 label="Attribute"
  452.                                                                 :items="attributes"
  453.                                                                 v-model="rule.attribute_id"
  454.                                                                 v-on:change="changeAttribute(index, rule.attribute_id)"
  455.                                                             ></v-select>
  456.                                                         </v-col>
  457.  
  458.                                                         <v-col md="3">
  459.                                                             <v-select
  460.                                                                 outlined
  461.                                                                 dense
  462.                                                                 item-text="name"
  463.                                                                 item-value="id"
  464.                                                                 label="Operator"
  465.                                                                 v-model="rule.operator_id"
  466.                                                                 :items="operators[index]"
  467.                                                                 v-on:change="changeOperator(index, rule.attribute_id, rule.operator_id)"
  468.                                                             ></v-select>
  469.                                                         </v-col>
  470.  
  471.                                                         <v-col md="4">
  472.                                                             <!-- ---------
  473.                                                             /// Add Value
  474.                                                             --------- -->
  475.  
  476.                                                             <v-row v-if="locationAttributeIds.includes(rule.attribute_id)">
  477.                                                                 <v-col md="3">
  478.                                                                     <v-combobox
  479.                                                                         v-model="radius"
  480.                                                                         :items="radiuses"
  481.                                                                         label="Radius"
  482.                                                                         dense
  483.                                                                         outlined
  484.                                                                     ></v-combobox>
  485.                                                                 </v-col>
  486.                                                                 <v-col md="9">
  487.                                                                     <v-combobox
  488.                                                                         :items="cities"
  489.                                                                         item-text="name"
  490.                                                                         item-value="name"
  491.                                                                         v-model="rule.value"
  492.                                                                         :label="`City (${cities.length})`"
  493.                                                                         dense
  494.                                                                         outlined
  495.                                                                         append-outer-icon="delete"
  496.                                                                         @click:append-outer="removeRuleDetail(index)"
  497.                                                                         v-on:change="getCities(rule.value)"
  498.                                                                     ></v-combobox>
  499.                                                                 </v-col>
  500.                                                             </v-row>
  501.  
  502.                                                             <v-row>
  503.                                                                 <v-col md="3" v-if="weatherAttributeIds.includes(rule.attribute_id)">
  504.                                                                     <v-combobox v-model="day" :items="days" label="Day" dense outlined></v-combobox>
  505.                                                                 </v-col>
  506.                                                                 <v-col md="9">
  507.                                                                     <v-menu
  508.                                                                         v-if="
  509.                                                                             inputTypes[index] == 'Date Range' &&
  510.                                                                             !locationAttributeIds.includes(rule.attribute_id)
  511.                                                                         "
  512.                                                                         :close-on-content-click="false"
  513.                                                                         :nudge-right="40"
  514.                                                                         transition="scale-transition"
  515.                                                                         offset-y
  516.                                                                         min-width="auto"
  517.                                                                     >
  518.                                                                         <template v-slot:activator="{ on, attrs }">
  519.                                                                             <v-text-field
  520.                                                                                 dense
  521.                                                                                 outlined
  522.                                                                                 v-model="rule.value"
  523.                                                                                 label="Values"
  524.                                                                                 append-icon="mdi-calendar"
  525.                                                                                 readonly
  526.                                                                                 v-bind="attrs"
  527.                                                                                 v-on="on"
  528.                                                                             ></v-text-field>
  529.                                                                         </template>
  530.                                                                         <v-date-picker range v-model="rule.value"></v-date-picker>
  531.                                                                     </v-menu>
  532.  
  533.                                                                     <v-menu
  534.                                                                         v-if="
  535.                                                                             inputTypes[index] == 'Date Picker' &&
  536.                                                                             !locationAttributeIds.includes(rule.attribute_id)
  537.                                                                         "
  538.                                                                         :close-on-content-click="false"
  539.                                                                         :nudge-right="40"
  540.                                                                         transition="scale-transition"
  541.                                                                         offset-y
  542.                                                                         min-width="auto"
  543.                                                                     >
  544.                                                                         <template v-slot:activator="{ on, attrs }">
  545.                                                                             <v-text-field
  546.                                                                                 dense
  547.                                                                                 outlined
  548.                                                                                 v-model="rule.value"
  549.                                                                                 label="Values"
  550.                                                                                 append-icon="mdi-calendar"
  551.                                                                                 readonly
  552.                                                                                 v-bind="attrs"
  553.                                                                                 v-on="on"
  554.                                                                             ></v-text-field>
  555.                                                                         </template>
  556.                                                                         <v-date-picker v-model="rule.value"></v-date-picker>
  557.                                                                     </v-menu>
  558.  
  559.                                                                     <v-select
  560.                                                                         v-if="
  561.                                                                             inputTypes[index] == 'Single Select' &&
  562.                                                                             !locationAttributeIds.includes(rule.attribute_id)
  563.                                                                         "
  564.                                                                         outlined
  565.                                                                         dense
  566.                                                                         item-text="name"
  567.                                                                         item-value="value"
  568.                                                                         label="Values"
  569.                                                                         v-model="rule.value"
  570.                                                                         :items="values[index]"
  571.                                                                         @click:append-outer="removeRuleDetail(index)"
  572.                                                                         append-outer-icon="delete"
  573.                                                                     ></v-select>
  574.  
  575.                                                                     <v-combobox
  576.                                                                         v-if="
  577.                                                                             inputTypes[index] == 'Multi Select' &&
  578.                                                                             !locationAttributeIds.includes(rule.attribute_id)
  579.                                                                         "
  580.                                                                         multiple
  581.                                                                         outlined
  582.                                                                         dense
  583.                                                                         item-text="name"
  584.                                                                         item-value="value"
  585.                                                                         label="Values"
  586.                                                                         v-model="rule.value"
  587.                                                                         :items="values[index]"
  588.                                                                         @click:append-outer="removeRuleDetail(index)"
  589.                                                                         append-outer-icon="delete"
  590.                                                                     ></v-combobox>
  591.  
  592.                                                                     <v-text-field
  593.                                                                         v-if="
  594.                                                                             inputTypes[index] == 'Text' &&
  595.                                                                             !locationAttributeIds.includes(rule.attribute_id)
  596.                                                                         "
  597.                                                                         dense
  598.                                                                         outlined
  599.                                                                         required
  600.                                                                         clearable
  601.                                                                         v-model="rule.value"
  602.                                                                         :rules="form.rules.value"
  603.                                                                         label="Values"
  604.                                                                         clear-icon="mdi-close-circle"
  605.                                                                         append-outer-icon="delete"
  606.                                                                         @click:append-outer="removeRuleDetail(index)"
  607.                                                                     ></v-text-field>
  608.  
  609.                                                                     <v-text-field
  610.                                                                         v-if="
  611.                                                                             inputTypes[index] == 'Init' &&
  612.                                                                             !locationAttributeIds.includes(rule.attribute_id)
  613.                                                                         "
  614.                                                                         disabled
  615.                                                                         dense
  616.                                                                         outlined
  617.                                                                         required
  618.                                                                         clearable
  619.                                                                         v-model="rule.value"
  620.                                                                         :rules="form.rules.value"
  621.                                                                         label="Values"
  622.                                                                         clear-icon="mdi-close-circle"
  623.                                                                         append-outer-icon="delete"
  624.                                                                         @click:append-outer="removeRuleDetail(index)"
  625.                                                                     ></v-text-field>
  626.                                                                 </v-col>
  627.                                                             </v-row>
  628.                                                         </v-col>
  629.                                                     </v-row>
  630.  
  631.                                                     <v-card-actions style="padding: 0px" class="mt-10">
  632.                                                         <v-btn @click="storeRule()" class="success white--text">Save</v-btn>
  633.  
  634.                                                         <v-btn text color="darken-3 white--text" @click="showAddRule = false">Cancel</v-btn>
  635.                                                     </v-card-actions>
  636.                                                 </v-form>
  637.                                             </v-card>
  638.                                         </v-dialog>
  639.                                         <!-- /showAddRuleModal -->
  640.  
  641.                                         <!-- showEditRuleModal -->
  642.                                         <v-dialog v-model="showEditRule" width="1200px" class="d-flex justify-left">
  643.                                             <v-card style="padding: 30px">
  644.                                                 <v-form ref="form3" lazy-validation v-model="valid3" id="form3">
  645.                                                     <h3>Edit Rule</h3>
  646.                                                     <small class="text--disabled">Fill in details to edit this rule</small>
  647.  
  648.                                                     <v-row class="mt-15">
  649.                                                         <v-col md="12">
  650.                                                             <v-text-field
  651.                                                                 dense
  652.                                                                 outlined
  653.                                                                 v-model="selectedRuleName"
  654.                                                                 :rules="form.rules.name"
  655.                                                                 label="Rule Name"
  656.                                                                 required
  657.                                                             ></v-text-field>
  658.                                                         </v-col>
  659.  
  660.                                                         <v-card-text class="font-weight-bold">
  661.                                                             Destination
  662.  
  663.                                                             <v-tooltip right>
  664.                                                                 <template v-slot:activator="{ on, attrs }">
  665.                                                                     <v-btn icon v-bind="attrs" v-on="on">
  666.                                                                         <v-icon color="grey lighten-1">info</v-icon>
  667.                                                                     </v-btn>
  668.                                                                 </template>
  669.                                                                 <span
  670.                                                                     >The scan destination is the end point for a consumer experience. Can be single
  671.                                                                     URL or use URL Groups.
  672.                                                                 </span>
  673.                                                             </v-tooltip>
  674.                                                         </v-card-text>
  675.  
  676.                                                         <v-col md="4">
  677.                                                             <v-select
  678.                                                                 dense
  679.                                                                 outlined
  680.                                                                 :items="urlTypes"
  681.                                                                 label="Single or Multi URL"
  682.                                                                 v-model="selectedRuleUrlType"
  683.                                                                 :rules="form.rules.urlType"
  684.                                                                 v-on:change="changeType(selectedRuleUrlType)"
  685.                                                             ></v-select>
  686.                                                         </v-col>
  687.                                                         <v-col md="8" v-if="selectedRuleUrlType == 'Single'">
  688.                                                             <v-text-field
  689.                                                                 dense
  690.                                                                 outlined
  691.                                                                 v-model="selectedRuleUrl"
  692.                                                                 :rules="form.rules.url"
  693.                                                                 label="URL"
  694.                                                                 required
  695.                                                             ></v-text-field>
  696.                                                         </v-col>
  697.  
  698.                                                         <v-col md="8" v-if="selectedRuleUrlType == 'Multi'">
  699.                                                             <v-combobox
  700.                                                                 v-model="selectedRuleUrlGroupName"
  701.                                                                 :items="urlGroups"
  702.                                                                 item-text="name"
  703.                                                                 item-value="id"
  704.                                                                 label="URL Group"
  705.                                                                 outlined
  706.                                                                 dense
  707.                                                                 v-on:change="changeURLGroup(selectedRuleUrlGroupName)"
  708.                                                             ></v-combobox>
  709.                                                         </v-col>
  710.                                                     </v-row>
  711.  
  712.                                                     <v-row>
  713.                                                         <v-col md="4">
  714.                                                             <v-card-text class="font-weight-bold">
  715.                                                                 Conditions
  716.  
  717.                                                                 <v-tooltip right>
  718.                                                                     <template v-slot:activator="{ on, attrs }">
  719.                                                                         <v-btn icon v-bind="attrs" v-on="on">
  720.                                                                             <v-icon color="grey lighten-1">info</v-icon>
  721.                                                                         </v-btn>
  722.                                                                     </template>
  723.                                                                     <span
  724.                                                                         >The scan destination is the end point for a consumer experience. Can be
  725.                                                                         single URL or use URL Groups.
  726.                                                                     </span>
  727.                                                                 </v-tooltip>
  728.  
  729.                                                                 <v-btn outlined class="blue--text" @click="addRuleDetail()">
  730.                                                                     <v-icon dark> add </v-icon>
  731.                                                                     Condition
  732.                                                                 </v-btn>
  733.                                                             </v-card-text>
  734.                                                         </v-col>
  735.  
  736.                                                         <v-col md="8">
  737.                                                             <v-combobox
  738.                                                                 v-model="selectedCategories"
  739.                                                                 :items="attributeCategories"
  740.                                                                 item-text="name"
  741.                                                                 item-value="id"
  742.                                                                 label="Category"
  743.                                                                 multiple
  744.                                                                 chips
  745.                                                                 v-on:blur="changeCategory(selectedCategories)"
  746.                                                             ></v-combobox>
  747.                                                         </v-col>
  748.                                                     </v-row>
  749.  
  750.                                                     <v-row v-for="(rule, index) in selectedRuleConditions" :key="`selectedRuleConditions-${index}`">
  751.                                                         <v-col md="4">
  752.                                                             <v-select
  753.                                                                 dense
  754.                                                                 outlined
  755.                                                                 item-text="name"
  756.                                                                 item-value="id"
  757.                                                                 label="Attribute"
  758.                                                                 :items="attributes"
  759.                                                                 v-model="rule.attribute_id"
  760.                                                                 v-on:change="changeAttribute(index, rule.attribute_id)"
  761.                                                             ></v-select>
  762.                                                         </v-col>
  763.  
  764.                                                         <v-col md="3">
  765.                                                             <v-select
  766.                                                                 outlined
  767.                                                                 dense
  768.                                                                 item-text="name"
  769.                                                                 item-value="id"
  770.                                                                 label="Operator"
  771.                                                                 v-model="rule.operator_id"
  772.                                                                 :items="operators[index]"
  773.                                                                 v-on:change="changeOperator(index, rule.attribute_id, rule.operator_id)"
  774.                                                             ></v-select>
  775.                                                         </v-col>
  776.  
  777.                                                         <v-col md="4">
  778.                                                             <v-menu
  779.                                                                 v-if="inputTypes[index] == 'Date Range'"
  780.                                                                 :close-on-content-click="false"
  781.                                                                 :nudge-right="40"
  782.                                                                 transition="scale-transition"
  783.                                                                 offset-y
  784.                                                                 min-width="auto"
  785.                                                             >
  786.                                                                 <template v-slot:activator="{ on, attrs }">
  787.                                                                     <v-text-field
  788.                                                                         dense
  789.                                                                         outlined
  790.                                                                         v-model="rule.value"
  791.                                                                         label="Values"
  792.                                                                         append-icon="mdi-calendar"
  793.                                                                         readonly
  794.                                                                         v-bind="attrs"
  795.                                                                         v-on="on"
  796.                                                                     ></v-text-field>
  797.                                                                 </template>
  798.                                                                 <v-date-picker range v-model="rule.value"></v-date-picker>
  799.                                                             </v-menu>
  800.  
  801.                                                             <v-menu
  802.                                                                 v-if="inputTypes[index] == 'Date Picker'"
  803.                                                                 :close-on-content-click="false"
  804.                                                                 :nudge-right="40"
  805.                                                                 transition="scale-transition"
  806.                                                                 offset-y
  807.                                                                 min-width="auto"
  808.                                                             >
  809.                                                                 <template v-slot:activator="{ on, attrs }">
  810.                                                                     <v-text-field
  811.                                                                         dense
  812.                                                                         outlined
  813.                                                                         v-model="rule.value"
  814.                                                                         label="Values"
  815.                                                                         append-icon="mdi-calendar"
  816.                                                                         readonly
  817.                                                                         v-bind="attrs"
  818.                                                                         v-on="on"
  819.                                                                     ></v-text-field>
  820.                                                                 </template>
  821.                                                                 <v-date-picker v-model="rule.value"></v-date-picker>
  822.                                                             </v-menu>
  823.  
  824.                                                             <v-select
  825.                                                                 v-if="inputTypes[index] == 'Single Select'"
  826.                                                                 outlined
  827.                                                                 dense
  828.                                                                 item-text="name"
  829.                                                                 item-value="value"
  830.                                                                 label="Values"
  831.                                                                 v-model="rule.value"
  832.                                                                 :items="values[index]"
  833.                                                                 @click:append-outer="removeRuleDetail(index)"
  834.                                                                 append-outer-icon="delete"
  835.                                                             ></v-select>
  836.  
  837.                                                             <v-combobox
  838.                                                                 v-if="inputTypes[index] == 'Multi Select'"
  839.                                                                 hint="Maximum of 5 tags"
  840.                                                                 multiple
  841.                                                                 persistent-hint
  842.                                                                 outlined
  843.                                                                 dense
  844.                                                                 item-text="name"
  845.                                                                 item-value="value"
  846.                                                                 label="Values"
  847.                                                                 v-model="rule.value"
  848.                                                                 :items="values[index]"
  849.                                                                 @click:append-outer="removeRuleDetail(index)"
  850.                                                                 append-outer-icon="delete"
  851.                                                             ></v-combobox>
  852.  
  853.                                                             <v-text-field
  854.                                                                 v-if="inputTypes[index] == 'Text'"
  855.                                                                 dense
  856.                                                                 outlined
  857.                                                                 required
  858.                                                                 clearable
  859.                                                                 v-model="rule.value"
  860.                                                                 :rules="form.rules.value"
  861.                                                                 label="Values"
  862.                                                                 clear-icon="mdi-close-circle"
  863.                                                                 append-outer-icon="delete"
  864.                                                                 @click:append-outer="removeRuleDetail(index)"
  865.                                                             ></v-text-field>
  866.  
  867.                                                             <v-text-field
  868.                                                                 v-if="inputTypes[index] == 'Init'"
  869.                                                                 disabled
  870.                                                                 dense
  871.                                                                 outlined
  872.                                                                 required
  873.                                                                 clearable
  874.                                                                 v-model="rule.value"
  875.                                                                 :rules="form.rules.value"
  876.                                                                 label="Values"
  877.                                                                 clear-icon="mdi-close-circle"
  878.                                                                 append-outer-icon="delete"
  879.                                                                 @click:append-outer="removeRuleDetail(index)"
  880.                                                             ></v-text-field>
  881.                                                         </v-col>
  882.                                                     </v-row>
  883.  
  884.                                                     <v-row v-for="(rule, index) in newConditions" :key="`newConditions-${index}`">
  885.                                                         <v-col md="4">
  886.                                                             <v-select
  887.                                                                 dense
  888.                                                                 outlined
  889.                                                                 item-text="name"
  890.                                                                 item-value="id"
  891.                                                                 label="Attribute"
  892.                                                                 :items="attributes"
  893.                                                                 v-model="rule.attribute_id"
  894.                                                                 v-on:change="changeAttribute(index, rule.attribute_id)"
  895.                                                             ></v-select>
  896.                                                         </v-col>
  897.  
  898.                                                         <v-col md="3">
  899.                                                             <v-select
  900.                                                                 outlined
  901.                                                                 dense
  902.                                                                 item-text="name"
  903.                                                                 item-value="id"
  904.                                                                 label="Operator"
  905.                                                                 v-model="rule.operator_id"
  906.                                                                 :items="operators[index]"
  907.                                                                 v-on:change="changeOperator(index, rule.attribute_id, rule.operator_id)"
  908.                                                             ></v-select>
  909.                                                         </v-col>
  910.  
  911.                                                         <v-col md="4">
  912.                                                             <v-menu
  913.                                                                 v-if="inputTypes[index] == 'Date Range'"
  914.                                                                 :close-on-content-click="false"
  915.                                                                 :nudge-right="40"
  916.                                                                 transition="scale-transition"
  917.                                                                 offset-y
  918.                                                                 min-width="auto"
  919.                                                             >
  920.                                                                 <template v-slot:activator="{ on, attrs }">
  921.                                                                     <v-text-field
  922.                                                                         dense
  923.                                                                         outlined
  924.                                                                         v-model="rule.value"
  925.                                                                         label="Values"
  926.                                                                         append-icon="mdi-calendar"
  927.                                                                         readonly
  928.                                                                         v-bind="attrs"
  929.                                                                         v-on="on"
  930.                                                                     ></v-text-field>
  931.                                                                 </template>
  932.                                                                 <v-date-picker range v-model="rule.value"></v-date-picker>
  933.                                                             </v-menu>
  934.  
  935.                                                             <v-menu
  936.                                                                 v-if="inputTypes[index] == 'Date Picker'"
  937.                                                                 :close-on-content-click="false"
  938.                                                                 :nudge-right="40"
  939.                                                                 transition="scale-transition"
  940.                                                                 offset-y
  941.                                                                 min-width="auto"
  942.                                                             >
  943.                                                                 <template v-slot:activator="{ on, attrs }">
  944.                                                                     <v-text-field
  945.                                                                         dense
  946.                                                                         outlined
  947.                                                                         v-model="rule.value"
  948.                                                                         label="Values"
  949.                                                                         append-icon="mdi-calendar"
  950.                                                                         readonly
  951.                                                                         v-bind="attrs"
  952.                                                                         v-on="on"
  953.                                                                     ></v-text-field>
  954.                                                                 </template>
  955.                                                                 <v-date-picker v-model="rule.value"></v-date-picker>
  956.                                                             </v-menu>
  957.  
  958.                                                             <v-select
  959.                                                                 v-if="inputTypes[index] == 'Single Select'"
  960.                                                                 outlined
  961.                                                                 dense
  962.                                                                 item-text="name"
  963.                                                                 item-value="value"
  964.                                                                 label="Values"
  965.                                                                 v-model="rule.value"
  966.                                                                 :items="values[index]"
  967.                                                                 @click:append-outer="removeRuleDetail(index)"
  968.                                                                 append-outer-icon="delete"
  969.                                                             ></v-select>
  970.  
  971.                                                             <v-combobox
  972.                                                                 v-if="inputTypes[index] == 'Multi Select'"
  973.                                                                 hint="Maximum of 5 tags"
  974.                                                                 multiple
  975.                                                                 persistent-hint
  976.                                                                 outlined
  977.                                                                 dense
  978.                                                                 item-text="name"
  979.                                                                 item-value="value"
  980.                                                                 label="Values"
  981.                                                                 v-model="rule.value"
  982.                                                                 :items="values[index]"
  983.                                                                 @click:append-outer="removeRuleDetail(index)"
  984.                                                                 append-outer-icon="delete"
  985.                                                             ></v-combobox>
  986.  
  987.                                                             <v-text-field
  988.                                                                 v-if="inputTypes[index] == 'Text'"
  989.                                                                 dense
  990.                                                                 outlined
  991.                                                                 required
  992.                                                                 clearable
  993.                                                                 v-model="rule.value"
  994.                                                                 :rules="form.rules.value"
  995.                                                                 label="Values"
  996.                                                                 clear-icon="mdi-close-circle"
  997.                                                                 append-outer-icon="delete"
  998.                                                                 @click:append-outer="removeRuleDetail(index)"
  999.                                                             ></v-text-field>
  1000.  
  1001.                                                             <v-text-field
  1002.                                                                 v-if="inputTypes[index] == 'Init'"
  1003.                                                                 disabled
  1004.                                                                 dense
  1005.                                                                 outlined
  1006.                                                                 required
  1007.                                                                 clearable
  1008.                                                                 v-model="rule.value"
  1009.                                                                 :rules="form.rules.value"
  1010.                                                                 label="Values"
  1011.                                                                 clear-icon="mdi-close-circle"
  1012.                                                                 append-outer-icon="delete"
  1013.                                                                 @click:append-outer="removeRuleDetail(index)"
  1014.                                                             ></v-text-field>
  1015.                                                         </v-col>
  1016.                                                     </v-row>
  1017.  
  1018.                                                     <v-card-actions style="padding: 0px" class="mt-10">
  1019.                                                         <v-btn @click="updateRule(selectedRule)" class="success white--text">Done</v-btn>
  1020.  
  1021.                                                         <v-btn text color="darken-3 white--text" @click="showEditRule = false">Cancel</v-btn>
  1022.                                                     </v-card-actions>
  1023.                                                 </v-form>
  1024.                                             </v-card>
  1025.                                         </v-dialog>
  1026.                                         <!-- /showEditRuleModal -->
  1027.  
  1028.                                         <pre id="debug" v-if="debug == true">{{ rules }}</pre>
  1029.  
  1030.                                         <v-row>
  1031.                                             <v-col cols="12">
  1032.                                                 <v-card-text class="font-weight-bold">Rules </v-card-text>
  1033.  
  1034.                                                 <!-- RULE TABLE -->
  1035.                                                 <v-data-table
  1036.                                                     :headers="headers"
  1037.                                                     :items="rules"
  1038.                                                     :single-expand="singleExpand"
  1039.                                                     :expanded.sync="expanded"
  1040.                                                     item-key="name"
  1041.                                                     show-expand
  1042.                                                     class="elevation-0"
  1043.                                                 >
  1044.                                                     <template v-slot:top>
  1045.                                                         <v-toolbar flat>
  1046.                                                             <v-spacer></v-spacer>
  1047.  
  1048.                                                             <v-btn outlined class="green--text" @click="showAddRuleModal()">
  1049.                                                                 <v-icon dark> add </v-icon>
  1050.                                                                 Rule
  1051.                                                             </v-btn>
  1052.                                                         </v-toolbar>
  1053.                                                     </template>
  1054.                                                     <template v-slot:expanded-item="{ headers, item }">
  1055.                                                         <td :colspan="headers.length">
  1056.                                                             <v-row class="py-5">
  1057.                                                                 <v-col cols="12">
  1058.                                                                     <v-simple-table class="condition-table">
  1059.                                                                         <template v-slot:default>
  1060.                                                                             <thead>
  1061.                                                                                 <tr>
  1062.                                                                                     <th class="text-left">Name</th>
  1063.                                                                                     <th class="text-left">Operator</th>
  1064.                                                                                     <th class="text-left">Value</th>
  1065.                                                                                 </tr>
  1066.                                                                             </thead>
  1067.                                                                             <tbody>
  1068.                                                                                 <tr v-for="item in item.details" :key="item.id">
  1069.                                                                                     <td>
  1070.                                                                                         <v-chip class="ma-2" color="blue" label outlined>
  1071.                                                                                             {{ displayAttributeNameBasedOnId(item.attribute_id) }}
  1072.                                                                                         </v-chip>
  1073.                                                                                     </td>
  1074.                                                                                     <td>
  1075.                                                                                         <v-chip class="ma-2" color="blue" label outlined>
  1076.                                                                                             {{ displayOperatorNameBasedOnId(item.operator_id) }}
  1077.                                                                                         </v-chip>
  1078.                                                                                     </td>
  1079.                                                                                     <td>
  1080.                                                                                         <v-chip class="ma-2" color="blue" label outlined>
  1081.                                                                                             {{ item.value }}
  1082.                                                                                         </v-chip>
  1083.                                                                                     </td>
  1084.                                                                                 </tr>
  1085.                                                                             </tbody>
  1086.                                                                         </template>
  1087.                                                                     </v-simple-table>
  1088.                                                                 </v-col>
  1089.                                                             </v-row>
  1090.                                                         </td>
  1091.                                                     </template>
  1092.  
  1093.                                                     <template v-slot:item.rules="{ item }">
  1094.                                                         <v-chip class="ma-2" color="amber darken-1" text-color="white">
  1095.                                                             {{ item.details.length }}
  1096.                                                         </v-chip>
  1097.                                                     </template>
  1098.  
  1099.                                                     <template v-slot:item.url="{ index, item }">
  1100.                                                         {{ displayUrlInfo(index) }}
  1101.                                                     </template>
  1102.  
  1103.                                                     <template v-slot:item.id="{ index, item }">
  1104.                                                         <v-btn small outlined class="orange--text mr-2" @click="showEditRuleModal(index)">
  1105.                                                             Edit
  1106.                                                         </v-btn>
  1107.  
  1108.                                                         <v-btn small outlined class="red--text" @click="displayDeleteRuleModal(index)">
  1109.                                                             Delete
  1110.                                                         </v-btn>
  1111.                                                     </template>
  1112.                                                 </v-data-table>
  1113.                                             </v-col>
  1114.                                         </v-row>
  1115.                                     </v-form>
  1116.                                 </v-card>
  1117.  
  1118.                                 <v-btn color="primary" @click="submitRule()" :disabled="!submit"> Save </v-btn>
  1119.  
  1120.                                 <v-btn
  1121.                                     text
  1122.                                     @click="
  1123.                                         e1 = 1
  1124.                                         backBtnClicked()
  1125.                                     "
  1126.                                 >
  1127.                                     Back
  1128.                                 </v-btn>
  1129.                             </v-stepper-content>
  1130.  
  1131.                             <v-stepper-content step="3"> </v-stepper-content>
  1132.                         </v-stepper-items>
  1133.                     </v-stepper>
  1134.                 </v-card>
  1135.             </v-col>
  1136.         </v-row>
  1137.     </v-container>
  1138. </template>
  1139.  
  1140. <script>
  1141. import Navbar from '../../../components/Navbar'
  1142. import Breadcrumbs from '../../../components/Breadcrumbs'
  1143. import PanelHeader from '../../../components/PanelHeader'
  1144. import moment, { now } from 'moment-timezone'
  1145.  
  1146. import axios from 'axios'
  1147.  
  1148. export default {
  1149.     components: {
  1150.         Navbar,
  1151.         Breadcrumbs,
  1152.         PanelHeader
  1153.     },
  1154.     beforeMount() {},
  1155.     computed: {
  1156.         timeZone: function () {
  1157.             console.log('timeZone')
  1158.         },
  1159.         startDateAndStartTime() {
  1160.             return this.startDate + 'T' + this.startTime
  1161.         },
  1162.         endDateAndEndTime() {
  1163.             return this.endDate + 'T' + this.endTime
  1164.         }
  1165.     },
  1166.     mounted() {
  1167.         this.checkLocalStorage()
  1168.         this.initializeValues()
  1169.         this.getFrequencies()
  1170.         this.getUseTypes()
  1171.     },
  1172.     data() {
  1173.         return {
  1174.             debug: false,
  1175.             alert: localStorage.getItem('alert'),
  1176.             alertColor: localStorage.getItem('alertColor'),
  1177.             alertMessage: localStorage.getItem('alertMessage'),
  1178.             form: {
  1179.                 errors: {},
  1180.                 rules: {
  1181.                     type: [(v) => !!v || 'Type is required'],
  1182.                     name: [(v) => !!v || 'Name is required'],
  1183.                     startDate: [(v) => !!v || 'Start Date is required'],
  1184.                     endDate: [(v) => !!v || 'End Date is required'],
  1185.                     timezone: [(v) => !!v || 'Timezone is required'],
  1186.                     startTime: [(v) => !!v || 'Start Time is required'],
  1187.                     endTime: [(v) => !!v || 'End Time is required'],
  1188.                     urlType: [(v) => !!v || 'URL Type is required'],
  1189.                     url: [(v) => !!v || 'URL is required', (v) => this.isURL(v) || 'URL is not valid'],
  1190.                     rules: {
  1191.                         value: [(v) => !!v || 'Value is required']
  1192.                     }
  1193.                 }
  1194.             },
  1195.             headers: [
  1196.                 { text: 'Priority', value: 'priority', width: '10%' },
  1197.                 {
  1198.                     text: 'Name',
  1199.                     align: 'start',
  1200.                     sortable: false,
  1201.                     value: 'name',
  1202.                     width: '15%'
  1203.                 },
  1204.                 { text: 'URL', value: 'url', width: '40%' },
  1205.                 { text: 'Condition', value: 'rules', width: '10%' },
  1206.                 { text: 'Actions', value: 'id', width: '20%' },
  1207.                 { text: '', value: 'data-table-expand', width: '5%' }
  1208.             ],
  1209.             rules: [],
  1210.             name: '',
  1211.             description: '',
  1212.             type: '',
  1213.             template: '',
  1214.             timezone: 'America/New_York',
  1215.             startDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().substr(0, 10),
  1216.             endDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().substr(0, 10),
  1217.             startTime: '09:00:00',
  1218.             endTime: '17:00:00',
  1219.             e1: 1,
  1220.             valid: false,
  1221.             valid2: false,
  1222.             valid3: false,
  1223.             submit: false,
  1224.             typeSelected: false,
  1225.             hover: false,
  1226.             volume: 0,
  1227.             frequencies: [],
  1228.             attributeCategories: [],
  1229.             frequency: '',
  1230.             usages: [],
  1231.             useType: '',
  1232.             qrCode: '',
  1233.             timezones: moment.tz.names(),
  1234.             startDateMenu: false,
  1235.             endDateMenu: false,
  1236.             startTimeMenu: false,
  1237.             endTimeMenu: false,
  1238.             singleExpand: true,
  1239.             expanded: [],
  1240.             search: '',
  1241.             status: '',
  1242.             currentRuleName: '',
  1243.             currentIndex: 0,
  1244.             statuses: ['Active', 'Disabled'],
  1245.             showAddRule: false,
  1246.             showEditRule: false,
  1247.             showDeleteRuleModal: false,
  1248.             urlType: 'Single',
  1249.             url: 'https://',
  1250.             urlTypes: ['Single', 'Multi'],
  1251.             urlGroups: [],
  1252.             urlGroup: {},
  1253.             ruleDetails: [],
  1254.             ruleName: '',
  1255.             attributes: [],
  1256.             operators: [],
  1257.             inputTypes: [],
  1258.             values: [],
  1259.             selectedRule: 0,
  1260.             selectedRuleName: '',
  1261.             selectedRuleUrlType: '',
  1262.             selectedRuleUrl: '',
  1263.             selectedRuleUrlGroup: {},
  1264.             selectedRuleUrlGroupName: '',
  1265.             selectedRuleUrlGroupId: '',
  1266.             selectedRuleConditions: [],
  1267.             mode: 'create',
  1268.             newConditions: [],
  1269.             selectedCategories: [],
  1270.             radius: 5,
  1271.             radiuses: [5, 10, 15, 25, 50, 100],
  1272.             city: '',
  1273.             cities: [],
  1274.             weatherAttributeIds: [14, 15, 16, 17, 18, 20, 31, 33],
  1275.             locationAttributeIds: [34, 35],
  1276.             day: '',
  1277.             days: ['NOW', 1, 3, 5]
  1278.         }
  1279.     },
  1280.     methods: {
  1281.         initializeValues() {
  1282.             if (window.location.host == 'localhost:8080') {
  1283.                 this.name = 'Demo -' + Date.now()
  1284.                 this.description = 'Demo  description' + Date.now()
  1285.                 this.ruleName = 'One'
  1286.                 this.url = 'https://www.one.com'
  1287.                 this.useType = 2
  1288.                 this.frequency = 5
  1289.                 this.volume = 999
  1290.             }
  1291.         },
  1292.         backBtnClicked() {
  1293.             console.log('backBtnClicked')
  1294.             this.type = ''
  1295.             this.name = ''
  1296.             this.description = ''
  1297.             this.typeSelected = false
  1298.             this.rules = []
  1299.             this.selectedRuleConditions = []
  1300.         },
  1301.         checkLocalStorage() {
  1302.             localStorage.removeItem('alert')
  1303.             localStorage.removeItem('alertColor')
  1304.             localStorage.removeItem('alertMessage')
  1305.         },
  1306.         validate() {
  1307.             this.e1 = 2
  1308.         },
  1309.         displayAttributeNameBasedOnId(id) {
  1310.             // console.log('displayAttributeNameBasedOnId', id)
  1311.  
  1312.             let attribute = this.attributes.filter((item) => {
  1313.                 return item.id == id
  1314.             })
  1315.  
  1316.             return attribute[0].name
  1317.         },
  1318.         displayOperatorNameBasedOnId(id) {
  1319.             // console.log('displayOperatorNameBasedOnId', id)
  1320.  
  1321.             let operator = this.operators[0].filter((item) => {
  1322.                 return item.id == id
  1323.             })
  1324.  
  1325.             return operator[0].name
  1326.         },
  1327.         showAddRuleModal() {
  1328.             this.showAddRule = true
  1329.             this.mode = 'create'
  1330.  
  1331.             this.getAttributeCategories()
  1332.  
  1333.             //reset form values
  1334.             this.ruleName = ' '
  1335.             this.url = 'https://www.'
  1336.             this.urlType = 'Single'
  1337.  
  1338.             if (window.location.host == 'localhost:8080') {
  1339.                 this.ruleName = 'Rule ' + String(Date.now()).substr(-5)
  1340.                 this.url = 'https://www.' + 'Demo-url-' + Date.now() + '.com'
  1341.             }
  1342.         },
  1343.         addRuleDetail() {
  1344.             let condition = {
  1345.                 attribute_id: '',
  1346.                 operator_id: '',
  1347.                 value: ''
  1348.             }
  1349.  
  1350.             if (this.mode == 'create') {
  1351.                 this.ruleDetails.push(condition)
  1352.             }
  1353.  
  1354.             if (this.mode == 'edit') {
  1355.                 this.newConditions.push(condition)
  1356.             }
  1357.  
  1358.             this.inputTypes.push('Init')
  1359.         },
  1360.         removeRuleDetail(index) {
  1361.             if (this.ruleDetails.length > 0) {
  1362.                 this.ruleDetails.splice(index, 1)
  1363.             }
  1364.  
  1365.             if (this.selectedRuleConditions.length > 0) {
  1366.                 this.selectedRuleConditions.splice(index, 1)
  1367.             }
  1368.  
  1369.             if (this.newConditions.length > 0) {
  1370.                 this.newConditions.splice(index, 1)
  1371.             }
  1372.         },
  1373.         showEditRuleModal(index) {
  1374.             this.mode = 'edit'
  1375.             this.showEditRule = true
  1376.             this.selectedRule = index
  1377.             this.selectedRuleName = this.rules[index].name
  1378.  
  1379.             this.getAttributeCategories()
  1380.  
  1381.             if (this.rules[index].url != null) {
  1382.                 this.selectedRuleUrlType = 'Single'
  1383.                 this.selectedRuleUrl = this.rules[index].url
  1384.             }
  1385.  
  1386.             if (this.rules[index].group_id != null) {
  1387.                 this.selectedRuleUrlType = 'Multi'
  1388.                 this.selectedRuleUrlGroupName = this.rules[index].group_name
  1389.                 this.selectedRuleUrlGroupId = this.rules[index].group_id
  1390.             }
  1391.  
  1392.             this.selectedRuleConditions = this.rules[index].details
  1393.         },
  1394.         removeRule(index) {
  1395.             console.log('removeRule clicked', index)
  1396.  
  1397.             this.alert = true
  1398.             this.alertColor = 'success'
  1399.             this.alertMessage = this.rules[index].name + ' - deleted !'
  1400.  
  1401.             this.rules.splice(index, 1)
  1402.  
  1403.             if (this.rules.length == 0) {
  1404.                 this.submit = false
  1405.             }
  1406.  
  1407.             this.showDeleteRuleModal = false
  1408.  
  1409.             //reset the priority
  1410.             this.resetPriority()
  1411.         },
  1412.         storeRule() {
  1413.             this.$refs.form.validate()
  1414.             if (this.$refs.form.validate()) {
  1415.                 let conditions = []
  1416.                 for (var i = 0; i < this.ruleDetails.length; i++) {
  1417.                     if (this.ruleDetails[i].attribute_id != '' && this.ruleDetails[i].attribute_id != null) {
  1418.                         let condition = {
  1419.                             attribute_id: this.ruleDetails[i].attribute_id,
  1420.                             operator_id: this.ruleDetails[i].operator_id,
  1421.                             value: this.ruleDetails[i].value
  1422.                         }
  1423.  
  1424.                         if (this.ruleDetails[i].attribute_id == 34) {
  1425.                             condition.value = this.ruleDetails[i].value.data.latitude + ' ' + this.ruleDetails[i].value.data.longitude
  1426.                             condition.value_param = this.radius
  1427.                             condition.value_alias = this.ruleDetails[i].value.data.name
  1428.                         }
  1429.  
  1430.                         conditions.push(condition)
  1431.                     }
  1432.                 }
  1433.  
  1434.                 // console.log('conditions', conditions)
  1435.  
  1436.                 let currentPriority = this.rules.length + 1
  1437.  
  1438.                 var rule = {}
  1439.                 rule.name = this.ruleName
  1440.                 rule.priority = currentPriority
  1441.  
  1442.                 // console.log('this.userGroup', this.userGroup)
  1443.  
  1444.                 if (this.urlType == 'Multi') {
  1445.                     rule.group_id = this.userGroup.id
  1446.                     rule.group_name = this.userGroup.name
  1447.                 } else {
  1448.                     rule.url = this.url
  1449.                 }
  1450.  
  1451.                 rule.details = conditions
  1452.  
  1453.                 this.rules.push(rule)
  1454.  
  1455.                 if (this.rules.length > 0) {
  1456.                     this.submit = true
  1457.                 }
  1458.  
  1459.                 console.log('rules', this.rules)
  1460.  
  1461.                 this.showAddRule = false
  1462.  
  1463.                 this.alert = true
  1464.                 this.alertColor = 'green'
  1465.                 this.alertMessage = this.ruleName + ' - created !'
  1466.  
  1467.                 this.$refs.form3.reset()
  1468.             }
  1469.         },
  1470.         updateRule(index) {
  1471.             this.$refs.form.validate()
  1472.             if (this.$refs.form.validate()) {
  1473.                 this.showEditRule = false
  1474.  
  1475.                 let conditions = []
  1476.                 for (var i = 0; i < this.selectedRuleConditions.length; i++) {
  1477.                     let selectedCondition = this.selectedRuleConditions[i]
  1478.  
  1479.                     if (selectedCondition.attribute_id != '' && selectedCondition.attribute_id != null) {
  1480.                         let condition = {
  1481.                             attribute_id: selectedCondition.attribute_id,
  1482.                             operator_id: selectedCondition.operator_id,
  1483.                             value: selectedCondition.value
  1484.                         }
  1485.  
  1486.                         conditions.push(condition)
  1487.                     }
  1488.                 }
  1489.  
  1490.                 for (var i = 0; i < this.newConditions.length; i++) {
  1491.                     let selectedCondition = this.newConditions[i]
  1492.  
  1493.                     if (selectedCondition.attribute_id != '' && selectedCondition.attribute_id != null) {
  1494.                         let condition = {
  1495.                             attribute_id: selectedCondition.attribute_id,
  1496.                             operator_id: selectedCondition.operator_id,
  1497.                             value: selectedCondition.value
  1498.                         }
  1499.  
  1500.                         conditions.push(condition)
  1501.                     }
  1502.                 }
  1503.  
  1504.                 var rule = {}
  1505.                 rule.name = this.selectedRuleName
  1506.                 rule.priority = this.rules[index].priority
  1507.  
  1508.                 if (this.selectedRuleUrlType == 'Multi') {
  1509.                     rule.group_id = this.selectedRuleUrlGroup.id
  1510.                     rule.group_name = this.selectedRuleUrlGroup.name
  1511.                 } else {
  1512.                     rule.url = this.selectedRuleUrl
  1513.                 }
  1514.  
  1515.                 rule.details = conditions
  1516.  
  1517.                 //remove
  1518.                 this.rules.splice(index, 1)
  1519.  
  1520.                 //add new one
  1521.                 this.rules.push(rule)
  1522.  
  1523.                 if (this.rules.length > 0) {
  1524.                     this.submit = true
  1525.                 }
  1526.  
  1527.                 this.resetPriority()
  1528.                 this.showAddRule = false
  1529.  
  1530.                 this.alert = true
  1531.                 this.alertColor = 'green'
  1532.                 this.alertMessage = this.selectedRuleName + ' - created !'
  1533.  
  1534.                 this.$refs.form3.reset()
  1535.             }
  1536.         },
  1537.         submitRule() {
  1538.             if (this.rules.length == 0) {
  1539.                 this.alert = true
  1540.                 this.alertColor = 'red'
  1541.                 this.alertMessage = 'No rule detected'
  1542.                 return
  1543.             }
  1544.  
  1545.             let data = {
  1546.                 name: this.name,
  1547.                 description: this.description,
  1548.                 start_date: this.startDateAndStartTime,
  1549.                 end_date: this.endDateAndEndTime,
  1550.                 time_zone: this.timezone,
  1551.                 priority: '1',
  1552.                 type_id: this.type == 'Product' ? 2 : 1,
  1553.                 rules: this.rules
  1554.             }
  1555.  
  1556.             if (this.type == 'Marketing') {
  1557.                 data.frequency_id = this.frequency
  1558.                 data.usage_id = this.useType
  1559.                 data.volume = this.volume
  1560.             }
  1561.  
  1562.             console.log('data', data)
  1563.  
  1564.             let body = {
  1565.                 $root: 'vc_campaign',
  1566.                 op: 'create',
  1567.                 brand: localStorage.getItem('brandCode'),
  1568.                 campaign: data,
  1569.                 _SESSION: localStorage.getItem('session')
  1570.             }
  1571.  
  1572.             axios.defaults.headers['Content-Type'] = 'application/json'
  1573.             axios.post(window.MTS_URL, body).then((response) => {
  1574.                 if (response.data.status == 0) {
  1575.                     this.campaign = response.data.campaign
  1576.  
  1577.                     // console.log(this.campaign)
  1578.  
  1579.                     localStorage.setItem('alert', true)
  1580.                     localStorage.setItem('alertColor', 'green')
  1581.                     localStorage.setItem('alertMessage', this.name + ' - created !')
  1582.  
  1583.                     this.$router.push({
  1584.                         path: `/campaigns/` + this.campaign.id
  1585.                     })
  1586.                 } else {
  1587.                     console.log('%c ______________________________', 'background: linear-gradient(45deg, red, yellow, blue, green, purple)')
  1588.                     console.error(response.error)
  1589.                     // console.error(response.data.failures[0].detail)
  1590.  
  1591.                     this.alert = true
  1592.                     this.alertColor = 'red'
  1593.                     this.alertMessage = response.error.detail
  1594.                 }
  1595.             })
  1596.         },
  1597.         displayDeleteRuleModal(index) {
  1598.             console.log('showDeleteRuleModal', index)
  1599.             this.showDeleteRuleModal = true
  1600.  
  1601.             this.currentIndex = index
  1602.             this.currentRuleName = this.rules[index].name
  1603.         },
  1604.         changeCategory(category) {
  1605.             if (category.length > 0) {
  1606.                 this.attributes = []
  1607.                 for (var i = 0; i < category.length; i++) {
  1608.                     console.log(category[i])
  1609.  
  1610.                     let vc_attribute_class = {
  1611.                         $root: 'vc_rule_attribute',
  1612.                         op: 'read',
  1613.                         brand: localStorage.getItem('brandCode'),
  1614.                         selection: {
  1615.                             filters: [`class_id:${category[i].id}`, `campaign_type_id:${this.campaignTypeId}`]
  1616.                         },
  1617.                         _SESSION: localStorage.getItem('session')
  1618.                     }
  1619.  
  1620.                     axios.defaults.headers['Content-Type'] = 'application/json'
  1621.                     axios.post(window.MTS_URL, vc_attribute_class).then((response) => {
  1622.                         for (var i = 0; i < response.data.rule_attributes.length; i++) {
  1623.                             this.attributes.push(response.data.rule_attributes[i])
  1624.                         }
  1625.                     })
  1626.                 }
  1627.             }
  1628.         },
  1629.         changeAttribute(index, attributeId) {
  1630.             // console.log('changeAttribute run:', index, attributeId)
  1631.  
  1632.             let attribute = {
  1633.                 $root: 'vc_rule_attribute',
  1634.                 op: 'read',
  1635.                 brand: localStorage.getItem('brandCode'),
  1636.                 selection: {
  1637.                     filters: [`id:${attributeId}`]
  1638.                 },
  1639.                 _SESSION: localStorage.getItem('session')
  1640.             }
  1641.  
  1642.             axios.defaults.headers['Content-Type'] = 'application/json'
  1643.             axios.post(window.MTS_URL, attribute).then((response) => {
  1644.                 this.attribute = response.data.rule_attributes[0]
  1645.  
  1646.                 axios.defaults.headers['Content-Type'] = 'application/json'
  1647.                 let data = {
  1648.                     $root: 'vc_operator',
  1649.                     op: 'read',
  1650.                     brand: localStorage.getItem('brandCode'),
  1651.                     selection: {
  1652.                         filters: [`data_type_id:${this.attribute.data_type_id}`]
  1653.                     },
  1654.                     _SESSION: localStorage.getItem('session')
  1655.                 }
  1656.                 axios.post(window.MTS_URL, data).then((response) => {
  1657.                     // console.log('index', index)
  1658.                     // console.log('response.data', response.data)
  1659.  
  1660.                     this.operators.splice(index, 0, response.data.operators)
  1661.                 })
  1662.             })
  1663.  
  1664.             // vc_attribute_value
  1665.             axios.defaults.headers['Content-Type'] = 'application/json'
  1666.             let data = {
  1667.                 $root: 'vc_attribute_value',
  1668.                 op: 'read',
  1669.                 attribute_id: attributeId,
  1670.                 brand: localStorage.getItem('brandCode'),
  1671.                 _SESSION: localStorage.getItem('session')
  1672.             }
  1673.             axios.post(window.MTS_URL, data).then((response) => {
  1674.                 this.values.splice(index, 0, response.data.values)
  1675.             })
  1676.         },
  1677.         changeOperator(index, attributeId, operatorId) {
  1678.             // console.log('changeOperator run:', index, attributeId, operatorId)
  1679.  
  1680.             // vc_attribute_value
  1681.             axios.defaults.headers['Content-Type'] = 'application/json'
  1682.             let data = {
  1683.                 $root: 'vc_input_type',
  1684.                 op: 'read',
  1685.                 attribute_id: attributeId,
  1686.                 operator_id: operatorId,
  1687.                 brand: localStorage.getItem('brandCode'),
  1688.                 _SESSION: localStorage.getItem('session')
  1689.             }
  1690.             axios.post(window.MTS_URL, data).then((response) => {
  1691.                 this.inputTypes.splice(index, 0, response.data.types[0].name)
  1692.  
  1693.                 console.log('%c  ------------------ ', 'background: linear-gradient(45deg, red, yellow, blue, green, purple)')
  1694.                 console.log('inputType = ', response.data.types[0].name)
  1695.             })
  1696.         },
  1697.         getAttributeCategories() {
  1698.             let getAttributeCategories = {
  1699.                 $root: 'vc_attribute_class',
  1700.                 op: 'read',
  1701.                 selection: {
  1702.                     filters: [`campaign_type_id:${this.campaignTypeId}`]
  1703.                 },
  1704.                 brand: localStorage.getItem('brandCode'),
  1705.                 _SESSION: localStorage.getItem('session')
  1706.             }
  1707.  
  1708.             axios.defaults.headers['Content-Type'] = 'application/json'
  1709.             axios.post(window.MTS_URL, getAttributeCategories).then((response) => {
  1710.                 this.attributeCategories = response.data.classes
  1711.                 this.selectedCategories = response.data.classes
  1712.  
  1713.                 var category = response.data.classes
  1714.  
  1715.                 if (category.length > 0) {
  1716.                     this.attributes = []
  1717.                     for (var i = 0; i < category.length; i++) {
  1718.                         // console.log(category[i])
  1719.  
  1720.                         let vc_attribute_class = {
  1721.                             $root: 'vc_rule_attribute',
  1722.                             op: 'read',
  1723.                             brand: localStorage.getItem('brandCode'),
  1724.                             selection: {
  1725.                                 filters: [`class_id:${category[i].id}`, `campaign_type_id:${this.campaignTypeId}`]
  1726.                             },
  1727.                             _SESSION: localStorage.getItem('session')
  1728.                         }
  1729.  
  1730.                         // vc_attribute_class.selection.filters = [class_id: + category[i].id,campaign_type_id:${this.campaignTypeId}"]
  1731.  
  1732.                         axios.defaults.headers['Content-Type'] = 'application/json'
  1733.                         axios.post(window.MTS_URL, vc_attribute_class).then((response) => {
  1734.                             for (var i = 0; i < response.data.rule_attributes.length; i++) {
  1735.                                 this.attributes.push(response.data.rule_attributes[i])
  1736.                             }
  1737.                         })
  1738.                     }
  1739.                 }
  1740.             })
  1741.         },
  1742.         getUseTypes() {
  1743.             let attributes = {
  1744.                 $root: 'vc_campaign_usage',
  1745.                 op: 'read',
  1746.                 brand: localStorage.getItem('brandCode'),
  1747.                 _SESSION: localStorage.getItem('session')
  1748.             }
  1749.  
  1750.             axios.defaults.headers['Content-Type'] = 'application/json'
  1751.             axios.post(window.MTS_URL, attributes).then((response) => {
  1752.                 this.usages = response.data.usages
  1753.             })
  1754.         },
  1755.         getFrequencies() {
  1756.             let attributes = {
  1757.                 $root: 'vc_campaign_frequency',
  1758.                 op: 'read',
  1759.                 brand: localStorage.getItem('brandCode'),
  1760.                 _SESSION: localStorage.getItem('session')
  1761.             }
  1762.  
  1763.             axios.defaults.headers['Content-Type'] = 'application/json'
  1764.             axios.post(window.MTS_URL, attributes).then((response) => {
  1765.                 this.frequencies = response.data.frequencies
  1766.             })
  1767.         },
  1768.         getCities(city) {
  1769.             console.log('%c >>>>>>', 'background: linear-gradient(45deg, red, yellow, blue, green, purple)')
  1770.             console.log('city', city)
  1771.             console.log('%c >>>>>>', 'background: linear-gradient(45deg, red, yellow, blue, green, purple)')
  1772.  
  1773.             let cities = {
  1774.                 $root: 'vc_attribute_value',
  1775.                 op: 'read',
  1776.                 brand: localStorage.getItem('brandCode'),
  1777.                 _SESSION: localStorage.getItem('session'),
  1778.                 attribute_id: 34,
  1779.                 selection: {
  1780.                     filters: [`name:${city}`]
  1781.                 }
  1782.             }
  1783.  
  1784.             axios.defaults.headers['Content-Type'] = 'application/json'
  1785.             axios.post(window.MTS_URL, cities).then((response) => {
  1786.                 this.cities = response.data.values
  1787.  
  1788.                 console.log('%c 🔥🧨 ', 'background: red; color: white;')
  1789.             })
  1790.         },
  1791.         displayUrlInfo(index) {
  1792.             console.log('displayUrlInfo')
  1793.             if (this.rules[index].group_name != null) {
  1794.                 return this.rules[index].group_name
  1795.             }
  1796.  
  1797.             if (this.rules[index].url != null) {
  1798.                 return this.rules[index].url
  1799.             }
  1800.         },
  1801.         resetPriority() {
  1802.             for (var i = 0; i < this.rules.length; i++) {
  1803.                 this.rules[i].priority = i + 1
  1804.             }
  1805.         },
  1806.         isURL(str) {
  1807.             let url
  1808.  
  1809.             try {
  1810.                 url = new URL(str)
  1811.             } catch (_) {
  1812.                 return false
  1813.             }
  1814.  
  1815.             return url.protocol === 'http:' || url.protocol === 'https:'
  1816.         },
  1817.  
  1818.         selectCampaign(type) {
  1819.             // console.log('Campaign Type changed')
  1820.             // console.log('Campaign Type changed to ' + type)
  1821.             this.typeSelected = true
  1822.             this.type = type
  1823.  
  1824.             if (type == 'Marketing') {
  1825.                 this.campaignTypeId = 1
  1826.             } else {
  1827.                 this.campaignTypeId = 2
  1828.             }
  1829.             this.e1 = 2
  1830.         },
  1831.         changeType(urlType) {
  1832.             console.log('urlType changed')
  1833.             console.log('urlType changed to ' + urlType)
  1834.  
  1835.             this.selectedRuleUrlType = urlType
  1836.  
  1837.             if (urlType == 'Multi') {
  1838.                 let vc_url_group = {
  1839.                     $root: 'vc_url_group',
  1840.                     op: 'read',
  1841.                     brand: localStorage.getItem('brandCode'),
  1842.                     selection: {
  1843.                         page: 1,
  1844.                         per_page: 500,
  1845.                         sort: 'id'
  1846.                     },
  1847.                     _SESSION: localStorage.getItem('session')
  1848.                 }
  1849.  
  1850.                 axios.defaults.headers['Content-Type'] = 'application/json'
  1851.                 axios
  1852.                     .post(window.MTS_URL, vc_url_group)
  1853.                     .then((response) => {
  1854.                         if (response.data.status == 0) {
  1855.                             this.urlGroups = response.data.groups
  1856.  
  1857.                             console.log('this.urlGroups', this.urlGroups)
  1858.                             console.log('urlGroup ' + this.urlGroup)
  1859.                         } else {
  1860.                             alert(response.data.statustext)
  1861.                             reject(response.data.statustext)
  1862.                         }
  1863.                     })
  1864.                     .catch((err) => {
  1865.                         console.log('Something went wrong: ', err)
  1866.                     })
  1867.             }
  1868.         },
  1869.         changeURLGroup(selectedUrlRuleGroup) {
  1870.             //create
  1871.             this.userGroup = selectedUrlRuleGroup
  1872.  
  1873.             //update
  1874.             this.selectedRuleUrlGroup = selectedUrlRuleGroup
  1875.         }
  1876.     }
  1877. }
  1878. </script>
  1879.  
  1880. <style scoped>
  1881. #debug {
  1882.     top: -200px;
  1883.     right: 5px;
  1884.     background-color: silver;
  1885.     padding: 30px;
  1886.     border: black solid 2px;
  1887. }
  1888.  
  1889. .selection:not(.on-hover) {
  1890.     opacity: 0.9;
  1891. }
  1892.  
  1893. .selection:hover {
  1894.     opacity: 1;
  1895.     border: 3px solid #f6c042;
  1896.     background-color: #f6c04220;
  1897. }
  1898.  
  1899. .selection.marketing:hover {
  1900.     opacity: 1;
  1901.     border: 3px solid #26a69a;
  1902.     background-color: #26a69a20;
  1903. }
  1904.  
  1905. .selection.product:hover {
  1906.     opacity: 1;
  1907.     border: 3px solid #e91e63;
  1908.     background-color: #e91e6320;
  1909. }
  1910.  
  1911. .v-application--is-ltr .v-expansion-panel-header {
  1912.     text-align: left;
  1913.     overflow-wrap: anywhere;
  1914. }
  1915.  
  1916. >>> .v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  1917.     box-shadow: none !important;
  1918. }
  1919.  
  1920. >>> v-snack {
  1921.     z-index: 1000;
  1922. }
  1923.  
  1924. .condition-table {
  1925.     background-color: #e1f5fe70;
  1926. }
  1927. </style>
  1928.  
Advertisement
RAW Paste Data Copied
Advertisement