tabbit

Thu Dec 15 2016
Copied to clipboard! Copy reply
<template>
  <main>
    <h2 class="ui  header">Create &amp; schedule a flip</h2>
    <form class="ui large form" @submit.prevent='handleSubmit'>
      
      <!--  BASIC INFO -->
      <div class="ui attached message">
        <h3 class="ui  header">Basic info</h3>
      </div>
      <div class="ui attached segment">
        <div class="three fields">
        <div class="required field">
          <label>Flip Name</label>
          <i>Just a name so you can edit this later if needed</i>
          <input type="text" name="flip-name" placeholder="Cybermonday 2017">
        </div>

        <div class=" required field">
          <label>Sitewide promoset</label>
          <i>Will apply to catalog pages</i>
            <select class="ui search selection dropdown" data-dropdown-promos>
              <option value="">select a promo</option>          
            </select>
        </div>

        <div class="required field">
          <label>Flip Date</label>         
          <i>Date &amp; time for this flip</i>
          <div class="ui calendar">
            <div class="ui left icon input">
              <i class="calendar icon"></i>
              <input type="text" name="flip-date" placeholder="4th of July 2017">
            </div>
          </div>

        </div>
        </div>
      </div>    


      <!-- LANDING PAGES -->
      <div class="ui attached message">
        <h3 class="ui  header">Landing Pages</h3>
        
      </div>
      
      <div class="ui attached  segment" :class="{'loading': !constants}">
      

        <p>
          Below are our <b>"constant"</b> landing pages. Specify which page they will "mirror" next   flip.
        </p>

        <div class="four fields">
          
          <div class="field" v-for='(page, index) in constants'>
            <label>{{ page }}</label>          
            <select class="ui search selection dropdown" data-dropdown-pages data-page='sitewide'>
              <option value="">select a page</option>          
            </select>
          </div>

          

          
        <div class="four fields">
          <!-- <div class="field">
            <label>curso</label>          
            <select class="ui search selection dropdown" data-dropdown-pages data-page='curso'>
              <option value="">select a page</option>          
            </select>
          </div>

          <div class="field">
            <label>aprende</label>          
            <select class="ui search selection dropdown" data-dropdown-pages data-page='aprende'>
              <option value="">select a page</option>          
            </select>
          </div>     -->  
        </div>
      
      </div>
      
      
      <!-- ASSETS -->
      <div class="ui attached message">
        <h3 class="ui  header">Sitewide Images &amp; Criteo</h3>
      </div>

      <div class="ui attached  segment ">
        <p>Select assets to upload. You can select more than one.</p>
        <div class="field">
          <input type="file" multiple>
        </div>
      </div>
      
      <div class="ui  bottom attached tiny info  message" style="display:none">
        <i class="warning icon"></i><b>Typically used assets are</b>:
        <div>
            <div class="ui horizontal list">
              <div class="item">mdot-rto.jpg</div>
              <div class="item">us-buynow.jpg</div>
              <div class="item">us-freedemo.jpg</div>
              <div class="item">us-freedemo-mobile.jpg</div>
            </div>
            <div class="ui horizontal list">
              <div class="item">us-hslpbanner.jpg</div>
              <div class="item">es-buynow.jpg</div>
              <div class="item">es-homepage-bg.png</div>
              <div class="item">es-catalog.jpg</div>
            </div>        
          </div>
      </div>

      <!-- MDOT RTO -->
      <div class="ui segment">
        <div class="two fields" style="align-items: center">
          <div class="four wide field">
            <div class="ui toggle checkbox">
              <input type="checkbox" name="mobile-rto" tabindex="0" class="hidden" @change='handleRtoToggle'>              
              <label>Show m. RTO?</label>
            </div>
          </div>
          <div class="fourteen wide field" style="opacity: 0">  
            <input type="text" name="mobile-rto-url" placeholder="RTO url">
          </div>
        </div>
        <div class="two fields" style="align-items: center">
          <div class="four wide field">
            <div class="ui toggle checkbox">
              <input type="checkbox" name="homepage-rto" tabindex="0" class="hidden" @:change='handleRtoToggle'>              
              <label>Show home page RTO?</label>
            </div>
          </div>
          <div class="fourteen wide field" style="opacity: 0">  
            <input type="text" name="homepage-rto-url" placeholder="RTO url">
          </div>
        </div>

      
        
      </div>

      <input type="submit" class="ui fluid primary big button" value="create &amp; schedule" />   
      
    </form>
  </main>

</template>


<script>
  


  export default {
    name: 'CreateFlip',

    components: {  },

    data() {
      return {
        constants: 0,
        temppages: 0
      }
    },

    mounted() {
      this.$http.get(`${window.server}/get-page-names`).then(res => {
        var pages = JSON.parse(res.body)

        // Constant pages
        this.constants = Object.keys(pages).map(page =>  {
          if (pages[page].metadata.constant) return page
        }).filter(page => page !== undefined)


        // Temp pages ( campaign based )
        this.temppages = Object.keys(pages).map(page =>  {
          if (!pages[page].metadata.constant) return page
        }).filter(page => page !== undefined)

        console.log(this.temppages)
      }, err => {

      })

      

      /* Initialize pages search fields */
      // TODO http://semantic-ui.com/introduction/new.html#translates-any-api
      // TODO filter out constant pages so you cant map sitewide to sitewide, etc
      // window.$('[data-dropdown-pages]').dropdown({
      //   //match: 'text',
      //   //showOnFocus: false,
      //   apiSettings: {
      //      url: `${window.server}/get-page-names?ui=true&filter=constant`,
      //      saveRemoteData: true
      //    }
      // })

      // window.$('[data-dropdown-promos]').dropdown({
      //   apiSettings: {
      //      url: `${window.server}/get-promo-names?ui=true`,
      //      saveRemoteData: true
      //    }
      // })

      /* Initialize calendar field */
      //$('.ui.calendar').calendar()


      //$('.ui.toggle.checkbox').checkbox()


    },

    methods: {

      /*
       * When we toggle an RTO checkbox, we show/hide
       * the url input to its right
       */
      
      handleRtoToggle(e) {
        const isChecked = $(e.target).parent().hasClass('checked')        
        $(e.target).parents('.wide.field').siblings('.wide.field').animate({
          opacity: isChecked
        })       
      },


      handleSubmit() {
        const
          name          = document.querySelector('input[name=flip-name]').value
          , promoset    = document.querySelector('input[name=flip-name]').value
          , date        = document.querySelector('input[name=flip-date]').value
          , sitewide    = document.querySelector('select[data-page=sitewide]').value
          , rmsitewide  = document.querySelector('select[data-page=rmsitewide]').value
          , sale        = document.querySelector('select[data-page=sale]').value
          , social      = document.querySelector('select[data-page=social]').value
          , curso       = document.querySelector('select[data-page=curso]').value
          , aprende     = document.querySelector('select[data-page=aprende]').value
          , assets      = [...document.querySelector('input[type=file]').files]
          , mRto        = $('input[name=mobile-rto]').parent().hasClass('checked')
          , mRtoUrl     = $('input[name=mobile-rto-url').val()
          , hRto        = $('input[name=homepage-rto]').parent().hasClass('checked')
          , hRtoUrl     = $('input[name=homepage-rto-url').val()
          ;


        const formdata = new FormData()
        formdata.append('name', name)
        formdata.append('promoset', promoset)
        formdata.append('date', date)
        formdata.append('sitewide', sitewide)
        formdata.append('rmsitewide', rmsitewide)
        formdata.append('sale', sale)
        formdata.append('social', social)
        formdata.append('curso', curso)
        formdata.append('aprende', aprende)
        formdata.append('mobile-rto', mRto)
        formdata.append('mobile-rto-url', mRtoUrl)
        formdata.append('homepage-rto', hRto)
        formdata.append('homepage-rto-url', hRtoUrl)
        assets.forEach(ass => formdata.append('assets[]', ass, ass.name))

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

        req.done(r => {
          
        })

      }
    },
   


    vuex: {
      actions: {
        // Key 'toggle' here just has to match
        // the @click fn name in the template above.
        // No need for methods { } functions
        //toggle: toggleAddModal
      }
    }
  }









  
$(() => {
  
  window.setTimeout(function() {
    console.log(typeof jQuery.dropdown)
  }, 3000)
})
 

</script>