restdb.io vue.js todo mvc

Fork from Evan You's original vue.js todo mvc

by Ico Dimchev

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/index.css">
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.1.4/async.min.js"></script>
<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo">
  </header>
  <section class="main" v-show="todos.length" v-cloak>
    <input class="toggle-all" type="checkbox" v-model="allDone">
    <ul class="todo-list">
      <li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{ completed: todo.completed, editing: todo == editedTodo }">
        <div class="view">
          <input class="toggle" type="checkbox" v-model="todo.completed" @click="setState(todo)">
          <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
          <button class="destroy" @click="removeTodo(todo)"></button>
        </div>
        <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
      </li>
    </ul>
  </section>
  <footer class="footer" v-show="todos.length" v-cloak>
    <span class="todo-count">
      <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
    </span>
    <ul class="filters">
      <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
      <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
      <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
    </ul>
    <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
      Clear completed
    </button>
  </footer>
</section>
<footer class="info">
  <p>Double-click to edit a todo</p>
 ...

CSS

[v-cloak] {
  display: none;
}

JavaScript

// Fork to work with restdb.io NoSql backend
// Full spec-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~246 effective lines of JavaScript.

// restdb.io database persistence
var API_KEY = '5853bcf361a87fc5352a4168';
$.ajaxPrefilter(function(options) {
  if (!options.beforeSend) {
    options.beforeSend = function(xhr) {
      xhr.setRequestHeader('x-apikey', API_KEY);
    }
  }
});
var todoStorage = {
  fetch: function(callback) {
    $.getJSON('https://vuejsdemo-e4c1.restdb.io/rest/todo', function(data) {
      var todos = data;
      todos.forEach(function(todo, index) {
        todo.id = index
      })
      todoStorage.uid = todos.length
      callback(todos);
    });
  },
  save: function(todo) {
    console.log("saving", todo);
    $.ajax({
      type: "POST",
      url: 'https://vuejsdemo-e4c1.restdb.io/rest/todo',
      contentType: "application/json",
      data: JSON.stringify(todo)
    }).done(function(result) {
      console.log("Saved", result);
      todo._id = result._id;
    });
  },
  update: function(todo) {
    console.log("updating", todo);
    $.ajax({
      type: "PUT",
      url: 'https://vuejsdemo-e4c1.restdb.io/rest/todo/' + todo._id,
      contentType: "application/json",
      data: JSON.stringify(todo)
    }).done(function(result) {
      console.log("Updated", result);
    });
  },
  updateAll: function(todos) {
    console.log("updating", todos);
    var saveOne = function(todo, callback) {
      $.ajax({
        type: "PUT",
        url: 'https://vuejsdemo-e4c1.restdb.io/rest/todo/' + todo._id,
        contentType: "application/json",
        data: JSON.stringify(todo)
      }).done(function(result) {
        console.log("Updated", result);
        callback(null, result);
      });
    }

    var funcs = [];
    todos.forEach(function(todo) {
      funcs.push(async.apply(saveOne, todo));
    });
    async.parallel(funcs, function(error, result) {
      console.log("updateAll", error, result)
    });
 ...