tabbit

Wed Dec 21 2016
Copied to clipboard! Copy reply
<template>
  <main>
    <h2 class="ui header">Create a Landing Page</h2>
    <div class="ui large header"></div>
    
    <form class="ui  form" :class="{'loading': isSubmitting}" @submit.prevent='handleSubmit'>

      <div class="three fields">
        <div class="required field">
          <label>Name </label>
          <i>
            rosettastone.com/lp/sbsr/
            <span style="color: cadetblue;letter-spacing:1px"><b>{{name}}</b></span>
          </i>
          <input type="text" name="name" value="" @keyup='handleName'>
        </div>

        <div class="required field">
          <label>Promoset</label>
          <i>Promos this page will use</i>
          <select class="ui search selection dropdown" value="" name='promoset' data-dropdown-promosets>
            <option value="">select a promo</option>          
          </select>
        </div>     

        <div class="required field">
          <label>Phone</label>
          <i>Phone no. on top</i>
          <input type="text" value="1-800-ROSETTA" name="phone">
        </div>
      </div>


      <div class="three fields">
        <div class="required field">
          <label>Expiration</label>
          <i>Expiration date</i>
          <input type="text" placeholder='09/10/2017 11:59pm' name='expiration'>
        </div>
         

        <!-- <div class="required field">
          <label>RTO</label>
          <i>RTO to apply:</i>
          <input type="text" value="1-800-ROSETTA">
        </div> -->

        <div class="required field">
          <label>Market</label>
          <i>Market page belongs to</i>
          <select class="ui selection dropdown" name='market'>
            <option value="us">us</option>          
            <option value="es">es</option>          
          </select>
        </div>


        <div class="field">
          <label>Crescendo</label>
          <i>Crescendo to apply, if any</i>
          <select class="ui search selection dropdown" name='crescendo' data-dropdown-crescendos>
            <option value="">select a crescendo</option>          
          </select>
        </div>    

      </div>




      <!-- <div class="three fields">
        <div class="required field">
          <label>Masthead type</label>
          <i>Where the price is displayed</i>
          <select class="ui search selection dropdown" name='crescendo' data-dropdown-mastheadtypes>
            <option value="">select visual type</option>          
          </select>
        </div>        
      </div> -->


      
        <div class="ui basic segment">
        <div class="field required">
          <div class="ui slider checkbox">
            <input type="checkbox" name="constant" class="hidden">
            <label>
              This is a constant page&nbsp;
              <i class="help circle icon color grey" data-popup data-content="Constnat pages are pages that are always receiving 
              traffic, and flip with each campaign. (ie, sitewide, rmsitewide, sale, social, etc)" data-variation="inverted"></i>
            </label>
          </div>
        </div>
      </div>

        

        <div class="ui segments">
          <div class="ui secondary segment">
            <div class="ui left icon fluid input">
              <input type="text" @keyup="handleMastheadKeyup" placeholder="Search mastheads...">
              <i class="search icon"></i>
            </div>
          </div>
          <div class="ui segment" style="max-height: 350px; overflow-x: hidden" data-mastheads>
            <div class="ui three columns grid" v-for='array in mastheads'>
            <div class="column" v-for='masthead in array' data-masthead :data-name=masthead.name>
              <img width="100%" :src=masthead.uri @click='handleImageClick' v-if="masthead.visible" />
            </div>              
          </div>
          </div>
        </div>
                  

      

    
      

      <h4 class="ui section horizontal divider header">
        <i class="setting icon color grey"></i>
        Additional Optional Fields
      </h4>


      <div class="ui styled fluid accordion">

        <div class="title"><i class="dropdown icon"></i>Masthead texts</div>
        <div class="content">
          <div class="two fields">
            <div class="field">
              <label>Top HTML</label>
              <i>HTML shown above price</i>
              <textarea rows="2"></textarea>          
            </div>
            <div class="field">
              <label>Bottom HTML</label>
              <i>HTML displayed below price</i>
              <textarea rows="2"></textarea>          
            </div>
          </div>
        </div>

        <div class="title"><i class="dropdown icon"></i>Javascript</div>
        <div class="content">        
          <div class="field">            
            <textarea></textarea>          
          </div>        
        </div>

        <div class="title"><i class="dropdown icon"></i>CSS</div>
        <div class="content">
          <div class="field">
            <textarea></textarea>
          </div>        
        </div>

      </div> <!-- /accordion -->

      

    <div class="ui header">        
      <input type="submit" class="ui fluid primary big button" value="Create Page" />
    </div> 
      

    </form>

    <!-- success modal -->
    <div class="ui basic modal" data-success-modal>      
      <div class="ui icon header">
        <i class="checkmark icon"></i>
        SUCCESS!
      </div>
      <div class="content">
        <h2 style="text-align:center">
         <p>
           Page ------ created.<br>
           Create another page?
         </p>
        </h2>
      </div>
      <div class="actions">
        <div class="ui positive fluid button">Yes</div>
        <div class="ui positive fluid button">No</div>
      </div>
    </div>


  </main>
  

</template>


<script>
  export default {
    name: 'Home',
    data() {
      return {
        isSubmitting: false,
        promosets: [],
        name: '',
        mastheads: [],
        selectedMasthead: null,
        modals: {
          show: false,
          which: null,
          message: 'A strange error happened. Call a dev.'
        }
      }
    },

    updated() {
      
    },

    mounted() {
      var self = this

      /* initiate dropdowns */
      $(this.$el).find('[data-dropdown-promosets]').dropdown({
        apiSettings: {
          url: `${window.server}/get-promosets`,
          saveRemoteData: false,
          onResponse(promos) {            
            return {
              success: true,
              results: Object.keys(promos).map(promo => ({name: promo, value: promo}))          
            }
          }
        }
      })

      $(this.$el).find('[data-dropdown-crescendos]').dropdown({
        apiSettings: {
          url: `${window.server}/get-crescendos`,
          saveRemoteData: false,
          onResponse(crescendos) {            
            return {
              success: true,
              results: Object.values(crescendos).map(c => ({name: c, value: c}))          
            }
          }
        }
      })

      $(this.$el).find('[data-dropdown-mastheadtypes]').dropdown({
        apiSettings: {
          url: `${window.server}/get-masthead-types`,
          saveRemoteData: false,
          onResponse(types) {            
            return {
              success: true,
              results: Object.values(types).map(t => ({name: t, value: t}))          
            }
          }
        }
      })

      // Initialize some $ DOM elements
      $(this.$el).find('[data-mastheadimages]').dropdown()
      $(this.$el).find('[name=market]').dropdown()
      $(this.$el).find('.ui.accordion').accordion()
      $(this.$el).find('.ui.checkbox').checkbox()
      $(this.$el).find('[data-popup]').popup()
      // Define required form fields - visual purposes only
      $('form').form({
        fields: {
         'name': 'empty',
         'promoset': 'empty',
         'phone': 'empty',
         'expiration': 'empty',
         'market': 'empty'
        }
      })


      /* Fetch masthead imgs and store them in state data */
      const req = $.ajax({  
        method: 'get',
        url: window.server + '/get-mastheads/',  
      })

      req.done(r => {        
        r = r.map(i => ({
          uri: i,
          name: i.split('/').reverse()[0].split('.')[0].split('_').splice(1).join('_'),
          visible: true
        }))
        var copy = r.slice()
        while (copy.length) {
           this.mastheads.push(copy.splice(0,3))
        }
        
      })

    },


    methods: {
      handleName(e) {
        this.name = e.target.value
      },

      handleImageClick(e) {
        console.log('ay')
        $(this.$el).find('[data-mastheads] .selected').removeClass('selected')
        $(e.target).addClass('selected')
      },

      /*
       * Filter masthead images as user types.
       * Inefficient because done in a hurry
       */
      
      handleMastheadKeyup(e) {
        var value = e.target.value
        this.mastheads = this.mastheads.map(array => {
          return array.map(img => {
            img.visible = img.name.match(value) ? true : false
            return img
          })
        })     
      },


      /*
       * Submit our form. No need to bind every single input to a state data.
       * So we use jquery to grab the values of the form.
       *
       */
      
      handleSubmit(e) {

        this.isSubmitting = true
        //this.modals.show = false

        /*const
          name          = this.name.trim()
          , promoset    = $('select[name=promoset]').val()
          , phone       = $('input[name=phone]').val().trim()
          , expiration  = $('input[name=expiration]').val().trim()
          , market      = $('select[name=market]').val()
          , masthead    = $('[data-masthead] .selected').parent().data('name')
          , constant    = $('input[name=constant]').parent().hasClass('checked')
          , crescendo   = $('select[name=crescendo]').val()
          , tophtml     = ''
          , bottomhtml  = ''
          , css         = ''
          , js          = ''
          ;*/

        const data = {
          name: this.name.trim(),
          promoset: $('select[name=promoset]').val(),
          phone: $('input[name=phone]').val().trim(),
          expiration: $('input[name=expiration]').val().trim(),
          market: $('select[name=market]').val(),
          masthead: $('[data-masthead] .selected').parent().data('name'),
          constant: $('input[name=constant]').parent().hasClass('checked'),
          crescendo: $('select[name=crescendo]').val(),
          tophtml: '',
          bottomhtml: '',
          css: '',
          js: ''
        }

          
        // Validate required fields
        // if (!name || !promoset || !expiration || !phone || !market || !masthead) {
        //   this.isSubmitting = false
        //   return
        // }


        // const formdata = new FormData()
        // formdata.append('name', name)
        // formdata.append('promoset', promoset)
        // formdata.append('phone', phone)
        // formdata.append('expiration', expiration)
        // formdata.append('market', market)
        // formdata.append('constant', constant)
        // formdata.append('crescendo', crescendo)
        // formdata.append('masthead', masthead)
        // formdata.append('mastheadType', 'invisible')
        // formdata.append('tophtml', tophtml)
        // formdata.append('bottomhtml', bottomhtml)
        // formdata.append('css', css)
        // formdata.append('js', js)

        var requestUrl = window.server + '/create-page/'
        
        const req = $.ajax({  
          method: 'post',
          url: requestUrl,
          //contentType: false,
          //processData: false,
          data
        })

        req.done(r => {          
          if (r.result == 0) {            
            this.modals.show = true
            this.modals.message = 'an error occurred'            
          } else {
            this.modals.show = true
            this.modals.which = 'success'
            this.modals.message = "Page has been created. Create another?"
          }
          
        })

        req.fail(r => {
          this.modals.show = true
          this.modals.which = 'error'
          this.modals.message = 'Could not connect to Pi server.'          
        })

        this.isSubmitting = false
      }


    }
    
  }
</script>