tabbit

Thu Jan 05 2017
Copied to clipboard! Copy reply
<!--
This is the tempalate for creating and editing a page.
When editing, theres should be /create/page/id/<pagee>
where <page> is the page name.
 -->

<template>
  <main>    
    <h2 class="ui header" v-if='!editMode'>Create a Landing Page</h2>
    <h2 class="ui header" v-else>Update {{ name }}</h2>

    <div class="ui massive red message" v-if='editMode && !pageFound && !isFetching'>
      <i class="warning circle icon"></i>
      This page no longer exists.
    </div>

    <form class="ui form" 
    :class="{'loading': isSubmitting}"
    @submit.prevent=""
    v-if='(editMode && pageFound) || !editMode'
    >
      <div class="ui large header"></div>      

      <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" v-model="name" value="" @keyup='handleName' :disabled="editMode">
        </div>

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

        <div class="required field">
          <label>Phone</label>
          <i>Phone no. on top</i>
          <input type="text" name="phone" v-model="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' v-model='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" v-model='market' 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='crescendos' v-model='crescendo'>
            <option value="">select a crescendo</option>   
            <option :value=c v-for='c in crescendos'>{{ c }}</option>
          </select>
        </div>    

      </div>

      <!-- <div class="three fields">
               
      </div> -->
      
      <div class="ui basic segment">
        <div class="field">
          <div class="ui slider checkbox">
            <input type="checkbox" name="constant" class="hidden" v-model='constant'>
            <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' v-model='mastheadType'>
                <option value="">select visual type</option>
                <option :value=type v-for='type in mastheadTypes'>{{ type }}</option>
              </select>
            </div> 
          </div>            
        </div>

        <div class="ui segment" data-mastheads>
          <div class="mastheads-container">
            <div class="masthead-wrap"
              v-for='img in mastheads'
              @click='handleImageClick'
              v-if="img.visible"
              :class='{"selected" : img.selected}'
              :data-fullname="img.fullname">
                <div>{{ img.name }}</div>
                <img :src=img.uri />
            </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" v-model='tophtml' rows="2"></textarea>          
            </div>
            <div class="field">
              <label>Bottom HTML</label>
              <i>HTML displayed below price</i>
              <textarea name='bottomhtml' v-model='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" v-model='js'></textarea>          
          </div>        
        </div>

        <div class="title"><i class="dropdown icon"></i>CSS</div>
        <div class="content">
          <div class="field">
            <textarea name="css" v-model='css'></textarea>
          </div>        
        </div>

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


      <div class="ui small header" v-if='formResult.result !== null'>
        <div
        class="ui message"
        :class="{'negative' : formResult.result == 0, 'positive' : formResult.result == 1}"
        v-if="formResult.result !== null"
        >
          <div class="header">
            <i class="warning circle icon" v-if='formResult.result == 0'></i>
            <i class="checkmark large icon" v-if='formResult.result == 1'></i>
            <span v-html="formResult.message"></span>
          </div>
        </div>
      </div>

      <div class="ui small header">        
        <div v-if='!editMode'>
          <button class="ui right right floated big  teal button" data-env='prod' @click='handleSubmit'>Create in prod</button>
          <button class="ui right right floated big button" data-env='stg' @click='handleSubmit'>Create in stg</button>
        </div>
        <div v-else>
          <button class="ui right right floated big  teal button" data-env='prod' @click='handleSubmit'>Update in prod</button>
          <button class="ui right right floated big button" data-env='stg' @click='handleSubmit'>Update in stg</button>
        </div>
        <button
          class="ui right right floated big red button"
          disabled="" @click='handleDelete'
          v-if='editMode'>
          Delete
        </button>
      </div>
      
    </form>
    
  </main>
  

</template>


<script>
  export default {
    name: 'CreatePage',
    data() {
      return {
        // --page info (shown on site)-- //
        name: '',
        promoset: '',
        phone: '1-800-ROSETTA',
        expiration: '',
        market: 'us',
        crescendo: '',
        mastheadType: '',
        constant: '',        
        js: '',
        css: '',
        tophtml: '',
        bottomhtml: '',
        // --other component things-- //
        isSubmitting: false,
        selectedMasthead: null,
        promosets: [],
        pages: [],
        mastheads: [],
        mastheadTypes: [],
        crescendos: [],
        pageExists: false,
        editMode: false,
        pageFound: null,
        isFetching: false,
        formResult: {
          result: null,
          message: null
        }
      }
    },

    created() {

      /*
       * If we are editing (create/flip/id/some-date in the url)
       * fetch all the info to polulate the state with
       */
      
      if (this.$route.params.page) {
        this.editMode = true
        this.isFetching = true
      }

      /* Get values for our dropdowns */

      $.getJSON(`${window.server}/promosets`, r => this.promosets = Object.keys(r))

      $.getJSON(`${window.server}/crescendos`, r =>  this.crescendos = r)

      $.getJSON(`${window.server}/masthead-types`, r =>  this.mastheadTypes = r)

      // This was here for in real time 'page exists' as user typed name
      //$.getJSON(`${window.server}/pages`, r => this.pages = r)

      $.getJSON(`${window.server}/mastheads/`, r=> {
        this.mastheads = r
          .filter(img => img.match(/sbsr-desktop/i))          
          .map(i => ({
            uri: `${window.server}/mastheads/${i}`,
            name: i.split('.')[0].split('-')[2],
            fullname: i,
            selected: self.selectedMasthead == i ? true : false,
            visible: true
          }))  
      })

    },


    mounted() {
      window.sessionStorage.clear()
      var self = this

      /* Initialize  dropdowns */
      const $ddPromosets = $(this.$el).find('[data-dropdown-promosets]')
      $ddPromosets.dropdown()

      const $ddCrescendos = $(this.$el).find('select[name=crescendos]')
      $ddCrescendos.dropdown()      

      const $ddMarket = $(this.$el).find('select[name=market]')
      $ddMarket.dropdown()

      const $ddMastheadTypes = $(this.$el).find('select[name=mastheadtype]')
      $ddMastheadTypes.dropdown()

      if (this.editMode) {
        $.getJSON(`${window.server}/pages/`, r => {
          var page = r.filter(p => p.name == this.$route.params.page)
          if (page.length) {
            page = page[0]
            this.pageFound = true
            this.name = page.name
            this.phone = page.phone
            this.expiration = page.expiration
            this.promoset = page.promoset
            this.crescendo = page.crescendo
            this.mastheadType = page.mastheadtype
            this.selectedMasthead = page.mastheadimage
            this.constant = page.metadata.constant
            this.market = page.metadata.market
            this.tophtml = page.tophtml
            this.bottomhtml = page.bottomhtml
            this.css = page.css
            this.js = page.js
            
            /* Some UI stuff needs manual handling */
            
            // If we're editing, we want to make selected masthead visible.
            // Find masthead with same name as this.selectedMasthead and
            // set its selected value to true. Then sort it to position 0
            // So user sees as first image on the masthead list          
            this.mastheads = this.mastheads.map(m => {
              m.selected = m.fullname === this.selectedMasthead ? true : false
              return m
            })
            .sort(a => !a.selected)

            
            // Presetting dropdown values
            // $ddPromosets.dropdown('set value', this.promoset)
            // $ddCrescendos.dropdown('set value', this.crescendo)            
            // $ddMarket.dropdown('set value', this.market)
            // $ddMastheadTypes.dropdown('set value', this.mastheadType)
          }

          this.isFetching = false
        })
      }
       


      // Initialize some semantic-ui  DOM elements      
      $(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'
        }
      })

    },

    updated() {

    },


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

      handleImageClick(e) {
        var $parent = $(e.target).parents('.masthead-wrap')        
        $(this.$el).find('.mastheads-container .selected').removeClass('selected')
        $parent.addClass('selected')        
        this.selectedMasthead = $parent.data('fullname')        
        $('.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(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) {        
        const
          self            = this
          , name          = this.name.trim()
          , promoset      = this.promoset
          , phone         = this.phone
          , expiration    = this.expiration
          , market        = this.market
          , mastheadimg   = this.selectedMasthead
          , mastheadtype  = this.mastheadType
          , constant      = $('input[name=constant]').parent().hasClass('checked')
          , crescendo     = this.crescendo
          , tophtml       = this.tophtml
          , bottomhtml    = this.bottomhtml
          , css           = this.css
          , js            = this.js
          , env           = $(e.target).data('env')
          ;

        if (!mastheadimg)
          $('.ui.bottom').show()        
        
        if (
          !this.name
          || !this.promoset
          || !this.expiration
          || !this.mastheadType
          || !this.selectedMasthead
          || !this.market
        )  return

        self.isSubmitting = true

        const formdata = new FormData()
        formdata.append('name', name.toLowerCase())
        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('mastheadimage', mastheadimg)
        formdata.append('mastheadtype', mastheadtype)
        formdata.append('tophtml', tophtml)
        formdata.append('bottomhtml', bottomhtml)
        formdata.append('css', css)
        formdata.append('js', js)
        formdata.append('inprod', env == 'prod' ? true : false)
        
        const method = this.editMode ? 'PUT' : 'POST'
        const url = `${window.server}/page/${this.editMode ? name : ''}`
        const request = new XMLHttpRequest()
        
        request.open(method, url, true)
        request.send(formdata)

        request.onload = function() {
          if (request.status >= 200 && request.status < 400) {
            const response = JSON.parse(request.responseText)            
            self.formResult = {
              result: response.result,
              message: response.payload
            }            
          } else {
            self.formResult = { result: 0, message: 'Error on the server.' }  
          }
          self.isSubmitting = false
        }

        request.onerror = function() {
          self.formResult = { result: 0, message: 'Could not reach server.' }
          self.isSubmitting = false
        }        
      },


      handleDelete(e) {
        return
      }

    }    
  }
</script>