tabbit

Thu Dec 22 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" :class="{'error' : pageExists}">
          <label>Name <span v-if="pageExists">- Already exists!</span></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> -->

      
        <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="two fields">
              <div class="field">
                <div class="ui left icon fluid input">
                  <input type="text" @keyup="handleMastheadKeyup" placeholder="Search mastheads...">
                  <i class="search icon"></i>
                </div>
              </div>
              <div class="required field">                   
                <select class="ui search selection dropdown" name='mastheadtype' data-dropdown-mastheadtypes>
                  <option value="">select visual type</option>          
                </select>
              </div> 
            </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
              :data-realname=masthead.realname>
              <div class="img-wrap" @click='handleImageClick' v-if="masthead.visible">
                <div>{{ masthead.name }}</div>
                <img width="100%" :src=masthead.uri  />
              </div>
            </div>              
          </div>
          </div>
          <div class="ui bottom attached red message" style="display:none">
            <i class="warning circle big icon"></i>
            You must select a masthead!
          </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 name="tophtml" rows="2"></textarea>          
            </div>
            <div class="field">
              <label>Bottom HTML</label>
              <i>HTML displayed below price</i>
              <textarea name='bottomhtml' rows="2"></textarea>          
            </div>
          </div>
        </div>

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

        <div class="title"><i class="dropdown icon"></i>CSS</div>
        <div class="content">
          <div class="field">
            <textarea name="css"></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.'
        },
        pages: [],
        pageExists: false
      }
    },

    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}))          
            }
          }
        }
      })

      // Get list of pages so we can tell user if page name exists
      $.get(`${window.server}/get-pages`, p => {
        this.pages = Object.keys(JSON.parse(p))
      })     


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

      req.done(r => {
        // Filter for only the dekstop images.
        // then create an array of objects with img name, etc
        
        r = r
          .filter(img => !img.match(/-mobile/i))
          .map(img => img.split('-')[1])
          .filter((img, i, a) => a.indexOf(img) === i)

          console.log(r)
          // .map(i => ({
          //   uri: `${window.server}/mastheads/${i}`,
          //   name: i.split('.')[0].split('-').slice(0,-2).join('-'),
          //   realname: i,
          //   visible: true
          // }))

        console.log(r)
        // Format it so vue can loop rows of 3        
        var copy = r.slice()
        while (copy.length) {
          this.mastheads.push(copy.splice(0,3))
        }
        
      })


      // 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',
         'mastheadtype': 'empty'
        }
      })


    },


    methods: {
      handleName(e) {
        this.name = e.target.value        
        this.pageExists = this.pages.includes(this.name) ? true : false        
      },

      handleImageClick(e) {
        var $parent = $(e.target).parents('.img-wrap')
        $(this.$el).find('[data-mastheads] .selected').removeClass('selected')
        $parent.addClass('selected')
        this.selectedMasthead = $parent.parent().data('realname')
        $('.ui.bottom').hide()
      },


      /*
       * 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) {
        self = this
        this.isSubmitting = true       

        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      = this.selectedMasthead
          , mastheadtype  = $('[data-dropdown-mastheadtypes]').val()
          , constant      = $('input[name=constant]').parent().hasClass('checked')
          , crescendo     = $('select[name=crescendo]').val()
          , tophtml       = $('input[name=top]').val().trim()
          , bottomhtml    = $('input[name=bottomhtml]').val().trim()
          , css           = $('input[name=css]').val().trim()
          , js            = $('input[name=js]').val().trim()
          ;

        console.log(masthead)
        if ( !masthead )   {
          $('.ui.bottom').show()
        } 
        // 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', mastheadtype)
        formdata.append('tophtml', tophtml)
        formdata.append('bottomhtml', bottomhtml)
        formdata.append('css', css)
        formdata.append('js', js)

        var requestUrl = window.server + '/create-page/'
        
        const request = new XMLHttpRequest()
        request.open('POST', requestUrl, true)
        request.send(formdata)
        request.onload = function(r) {
          if (r.result == 0) {            
            self.modals.show = true
            self.modals.message = 'an error occurred'            
          } else {
            self.modals.show = true
            self.modals.which = 'success'
            self.modals.message = "Page has been created. Create another?"
          }
        }

        // 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>