tabbit

Mon Jan 09 2017
Copied to clipboard! Copy reply
<template>
  <main>

    <h2 class="ui header">Create &amp; schedule a flip</h2>


    <div class="ui massive red message" v-if='editMode && !found && !isFetching'>
      <i class="warning circle icon"></i>
      Could not find this flip.
    </div>

    <form class="ui form"  @submit.prevent='handleSubmit' v-if='(editMode && found) || !editMode'>

      <!--  BASIC INFO -->
      <div class="ui attached message">
        <h3 class="ui  header">Basic info</h3>
      </div>

      <div class="ui attached segment">
        <div class="three fields">

          <!-- name -->
          <div class="required field">
            <label>Flip Name</label>
            <i>Just a name so you can edit this later if needed</i>
            <input type="text" v-model='name' placeholder="black friday">
          </div>

          <!-- promosoet -->
          <div class="required field">
            <label>Sitewide promoset</label>
            <i>Will apply to catalog pages</i>
            <select class="ui search selection dropdown"
            data-promoset
            v-model='promoset'>
              <option value="">select a promo</option>
              <option :value=promo v-for='promo in promosets'>{{ promo }}</option>
            </select>
          </div>

          <!--  date -->
          <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="date" placeholder="select date &amp; time">
              </div>
            </div>
          </div>

        </div>
      </div>


      <!-- CONSTANT 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="ui grid">
          <div class="four wide column" v-for="(page,key) in constants">
            <div class="field">
              <label>{{ page.label }}</label>
              <select class="ui search selection dropdown" :name='page.label' v-model='page.value' data-constant>
                <option :value="null">select a page</option>
                <option :value=p v-for='p in nonConstants'>{{ p }}</option>
              </select>
            </div>
          </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> -->

      <!-- RTOs -->
      <div class="ui attached message" style="">
        <h3>Desktop and Mobile RTO (catalog)</h3>
      </div>

      <div class="ui attached segment" style="">

        <!-- mobile rto -->
        <div class="two fields" style="align-items: center">
          <!--  toggle on|off -->
          <div class="four wide field">
            <div class="ui toggle checkbox" :class='{"checked" : config.mobile.rto.on}'>
              <input type="checkbox"
              name="mobile-rto"
              class="hidden"
              v-model='config.mobile.rto.on'
              @change='handleRtoToggle'>
              <label>Show m. RTO?</label>
            </div>
          </div>

          <!-- url -->
          <div class="fourteen wide field" v-bind:style="{opacity: config.mobile.rto.on ? 1: 0}">
            <input
            type="text"
            name="mobile-rto-url"
            placeholder="Mobile RTO url"
            v-model="config.mobile.rto.url" />
          </div>
        </div>

        <!-- desktop rto -->
        <div class="two fields" style="align-items: center">
          <!-- toggle on|off -->
          <div class="four wide field">
            <div class="ui toggle checkbox">
              <input type="checkbox"
              name="desktop-rto"
              class="hidden"
              v-model='config.desktop.rto.on'
              @change='handleRtoToggle'>
              <label>Show desktop RTO?</label>
            </div>
          </div>

          <!-- url -->
          <div class="fourteen wide field" v-bind:style="{opacity: config.desktop.rto.on ? 1: 0}">
            <input
            type="text"
            name="desktop-rto-url"
            placeholder="Desktop RTO url"
            v-model="config.desktop.rto.url" />
          </div>
        </div>
      </div>


      <div class="ui attached message" style="">
        <div class="required field">
          <label>Router</label>
          <input type="text" name="router" placeholder="router link" v-model="router">
        </div>
      </div>



      <div class="ui yellow large message" v-if="exists">
        <i class="warning circle icon"></i>
        A flip scheduled on this date already exists. <b>You will be overwriting the old one.</b>
      </div>

      <div class="ui small header">
        <div class="ui grid">
          <div class="thirteen wide column">
            <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"></i>
                  <span v-html="formResult.message"></span>
                </div>
              </div>
          </div>
          <div class="three wide column">
            <button class="ui fluid big teal button" :class="{'loading': isSubmitting}">{{btnText}}</button>
          </div>

        </div>
      </div>

    </form>

  </main>
</template>


<script>

  'use strict';

  export default {
    name: 'CreateFlip',

    data() {
      return {

        // Flip name
        name: "",

        // Flip's sitewide promoset
        promoset: "",

        // Flip raw date to pass to server
        rawdate: "",

        // Constant landing pages: sitewide, sale, etc
        constants: [],

        // Pages that aren't constants (come and go by campaign)
        nonConstants: [],

        // Configs for M. and Desktop
        config: {
          desktop: {
            rto: {
              on: false,
              url: ''
            }
          },
          mobile: {
            rto: {
              on: false,
              url: ''
            }
          }
        },

        // Value for router
        router: '',

        // Promosets
        promosets: [],

        // True if theres a flip on chosen date.
        exists: false,

        // Is the form being submitted?
        isSubmitting: false,

        // True when form is validated
        canSubmit: false,

        isFetching: false,

        // True if we are editing (id/<date> in url)
        editMode: false,

        // Will be false if in edit mode but flip not found
        found: null,

        // Store results from submission to show user
        formResult: {
          result: null,
          message: null
        }
      }
    },

    updated() {
      $(this.$el).find('select.dropdown').dropdown()
      //$(this.$el).find('.ui.calendar').calendar('set date', this.rawdate)
    },

    computed: {
      btnText() {
        return this.editMode ? 'Update' : 'Submit'
      }
    },

    created() {

      // Fetch info for our dropdowns
      $.getJSON(`${window.server}/pages`, r => {
        this.nonConstants = r.filter(p => !p.metadata.constant).map(p => p.name)
        this.constants = r.filter(p => p.metadata.constant).map(p => ({label:p.name, value:null}))
      })

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



    mounted() {

      const self = this

      // Define required form fields - visual purposes only
      $(this.$el).find('form').form({
        fields: {
         'name': 'empty',
         'promoset-dropdown': 'empty',
         'date': 'empty',
         "router": 'empty'
        }
      })

      // Initiate calendar picker

      $(this.$el).find('.ui.calendar').calendar({
        onChange(date, text) {
          console.log('ok?')
          //self.rawdate = date
        },
        onHide() {
          console.log('ok')
          self.checkIfExists()
        }
      }).calendar('set startDate', new Date())

      // Start semantic-ui's elements
      $(this.$el).find('.ui.toggle.checkbox').checkbox()


      /*
       * Initiate dropdowns. For some reason the pages one doesn't
       * work on mounted(), so I put them both here.
       */

      if (this.$route.params.id) {
        this.editMode = true
        this.isFetching = true
        const id = this.$route.params.id

        $.getJSON(`${window.server}/flips`, r => {
          this.isFetching = false
          r = r.filter(f => f.rawdate == id)[0]
          if (undefined === r) {
            this.found = false
            return
          }
          this.found = true
          this.name = r.name
          this.rawdate = r.rawdate
          this.promoset = r.promoset
          this.config = r.config
          this.router = r.router
          $(this.$el).find('select[data-promoset]').dropdown('set value', this.promoset)
          $.each($(this.$el).find('select[data-constant]'), (i, e) => {
            $(e).dropdown('set value', r.constants[e.name])
          })

        })

      }
    },


    methods: {

      /*
       * When a date is changed, we check to see if there's
       * already a flip on that datetime, and let user know.
       */

      checkIfExists() {
        $.getJSON(`${window.server}/flips`, r => {
          if (r.map(f => f.date).includes(this.rawdate)) {
            this.exists = true
          }
        })
      },


      /*
       * 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
        })
      },


      /*
       * 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.
       *
       *  @param {bool} overwrite
       *    If true, request url will have ?overwrite=true, causing
       *    the server to overwrite a campaign if it exists
       *
       */

      handleSubmit(e) {

        if (this.isSubmitting) return

        this.isSubmitting = true

        const
          self              = this
          , constants       = {}
          , name            = this.name.trim()
          , promoset        = this.promoset.trim()
          , date            = this.rawdate
          , router          = this.router.trim()
          , config          = this.config
          , assets          = [...document.querySelector('input[type=file]').files]
          ;

        // Create constant pages map. ie, {sale: 'blackridayaii'}
        $.each($(this.$el).find('select[data-constant]'), (i, select) => {
          constants[select.name] = select.value
        })

        // Validate required fields
        if (!name || !promoset || !date || !router) {
          return this.isSubmitting = false
        }

        // Pack above data to send to server
        const formdata = new FormData()
        formdata.append('name', name)
        formdata.append('promoset', promoset)
        formdata.append('date', this.rawdate)
        formdata.append('constants', JSON.stringify(constants))
        formdata.append('config',  JSON.stringify(config))
        formdata.append('router',  router)
        assets.forEach(ass => formdata.append('assets[]', ass, ass.name))

        const requestUrl = `${window.server}/flip`
        const method = this.editMode ? 'PUT' : 'POST'
        const url = `${window.server}/flip/${this.editMode ?  this.$route.params.id : ''}`
        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
            }

            /*
             * Since the date in the url is sent to the server, and the server
             * identifies old flip to remove based on that date, we must update
             * the url immediately. This is because if the user updates the flip
             * date in the ui calendar, the server needs to know what the
             * previous one was - and it does so by looking at the url param
             */

            var base = window.document.location.href.split('/')
            base.pop()
            base.push(date)
            base = base.join('/')
            try {
              history.pushState("", "", base);
            } catch(e) {
              window.location.hef = base
            }
          } 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
        }
      }
    }
  }



</script>