• 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>