Pnei Kedem Book Club

Online book club

by shootermv

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/vue"></script>

<div id="app" class="container-fluid">
  <h1>{{ title }}</h1>

  <div class="row" v-if="showForm">
    <book-form v-on:book-added="onBookAdded"></book-form>
  </div>
  
  
   
  <div class="row"  v-if="!showForm">
    <div>
      <button v-on:click="showForm=true">New</button>
    </div>
  <div v-if="loading" class="loader">
  <img src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="loader">
  </div>

 
  <div v-if="books.length==0 && !loading" class="text-center">No Books Yet</div>
    <book-item :book="b" v-for="b in books">
    </book-item>
  </div>  

</div>

CSS

.loader{width:120px;padding-top:120px; margin:0 auto;}

JavaScript

/* book-form component */

Vue.component('book-form', {
  data(){
    return {
        title: ''
    }
  },
  methods: {
  	submitForm: function (e) {
      e.preventDefault();
      this.$emit('book-added',{title:this.title})
    }
  },
  template: `
  <div class="container text-center">
      <form>
       
        <div class="form-group">
         <label for="title" class="col-sm-2 control-label">title</label>
          <div class="col-xs-10">
         <input  class="form-control" v-model="title" id="title" placeholder="title">
       </div>
       </div>
       <button class="btn btn-primary" v-on:click="submitForm">Add</button>
      </form>
  </div>
  `
});

/* book-item component */

Vue.component('book-item', {
  props: ['book'],
  template: `
  <div class="col-xs-4 text-center">
      <a href="#" class="thumbnail">
        <img v-bind:src="book.img" style="height:226px" >
        <span>{{ book.title }}</span>
      </a>
  </div>
  `
});

/* main component*/

new Vue({
  el: '#app',
  data: {
    title: 'Pnei Kedem Book Club',
    books: [],
    loading:false,
    showForm:false
  },
  methods:{
  	onBookAdded(newBook){
       this.books.push(newBook);
       this.showForm = false;
    }
  },
  mounted() {
    this.loading = true;  fetch("https://api.mlab.com/api/1/databases/trempi/collections/books?apiKey=biHOKMqy0Y_nmy85WFmVyFabzLeYSP78").then(response =>response.json())
    .then(response => {
        this.loading = false;
        this.books = response;
     })
   }
})