Mon Jan 02 2017
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
<template>
  <main>
    <div class="ui basic segment" :class="{'loading':isFetching}">
      <h2 class="ui header">Browse Flips</h2>  
      
      <div class="ui transparent massive fluid left icon input">
        <input type="text" placeholder="Search by name..." @keyup='handleKeyUp'>
        <i class="search icon"></i>
      </div>

      <div class="ui massive info message" v-if="!isFetching && !flips.length">
        There are no flips scheduled.
      </div>

    <div style="margin-top: 2em">
      <div class="ui grid">
        <div class="four wide column" v-for="flip in flips">
          <a href="#" :data-rawdate='flip.rawdate' :data-name='flip.name' v-if="flip.visible ">
            <div class="flip-name">{{ flip.name }}</div>
            <div class="flip-date">
              <div class="flip-month">Dec</div>
              <div class="flip-day">16</div>
              <div class="flip-year">2017</div>
            </div>
          </a>
        </div>        
      </div> <!-- /grid -->
    </div>
  </div>
      

    
  </main>
</template>


<script>

  'use strict';

  export default {
    name: 'ListFlips',

    data() {
      return {
        isFetching: false,
        flips: [],
        flipscopy: []
      }  
    },

    updated() {
      
    },    

    mounted() {
      this.isFetching = true
      $.get(`${window.server}/get-flips-schedule`, r => {        
        this.flips = JSON.parse(r).map(f => {
          f.visible = true
          return f          
        })
        
        //this.flipscopy = JSON.parse(r)
        this.isFetching = false
      })
    },

    methods: {
      handleKeyUp(e) {
        
        //if (!e.target.value) this.flips = this.flipscopy
        const regexp = new RegExp(e.target.value, 'i')

        this.flips.forEach(f => {
           if (!f.name.match(regexp)) {
             f.visible = false
           }
        })


      }
    }


  }






</script>