Wed Dec 21 2016
Copied to clipboard! Copy reply
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
<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>