import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Signup from '@/components/Signup.vue'
import Task from '@/components/Task.vue'

Vue.use(VueRouter)

let router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Task',
      component: Task
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
  ]
})

export default router

export var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "toodo-abcdef.firebaseapp.com",
    databaseURL: "https://toodo-abcdef.firebaseio.com",
    projectId: "toodo-abcdef",
    storageBucket: "toodo-abcdef.appspot.com",
    messagingSenderId: "01234567879",
    appId: "1:123456789:web:abcdef123456789",
    measurementId: "G-AAAAAAAAAA"
  }

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import firebase from 'firebase'                      // コレも追加
import {firebaseConfig} from '@/../config/local.js'  // コレ

Vue.config.productionTip = false
firebase.initializeApp(firebaseConfig)               // コレ
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '@/views/About.vue'
import Signup from '@/components/Signup.vue'
import Task from '@/components/Task.vue'
import firebase from 'firebase'

Vue.use(VueRouter)

let router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Task',
      component: Task,
      meta: { requiresAuth: true }
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
  ]
})

router.beforeEach((to, from, next) => {
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  let currentUser = firebase.auth().currentUser
  if (requiresAuth) {
    if (!currentUser) {
      next({
        path: '/signup',
        query: {redirect: to.fullPath}
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

<template>
  <div id="task">
    タスクページ
    <p>current user: ｛｛username｝｝</p>
    <p>current uid: ｛｛uid｝｝</p>

    <!-- todo 一覧表示 -->
    <ul>
      <li v-for="(todo, key) in todos" :key="todo.id">
        <span>｛｛todo.name｝｝
        <a href="#" v-if="todo.isComplete==true" v-on:click="updateIsCompleteTodo(todo, key)">✔</a>
        <a href="#" v-if="todo.isComplete==false" v-on:click="updateIsCompleteTodo(todo, key)">❏</a>
        </span>
      </li>
    </ul>

  </div>

</template>

import firebase from 'firebase'

export default {
    name: "Task",
    data () {
        return {
            username: firebase.auth().currentUser.displayName,
            database: null,
            todosRef: null,
            todos: [],
            uid: firebase.auth().currentUser.uid,
        };
    },
    created: function(){
      this.database = firebase.database();
      this.uid = firebase.auth().currentUser.uid;
      this.todosRef = this.database.ref("todos/" + this.uid);  // '/todos/<uid>/*' 以下を参照する。

      // データに変更があるときに実行される
      var _this = this;
      this.todosRef.on("value", (snapshot) => {
        _this.todos = snapshot.val(); // 再取得して todosに格納する。
      })
    }
}
</script>

    <!-- New task -->
    <div>
      <input v-model="newTodoName" placeholder="New Item..."/>
      <button type="submit" v-on:click="createTodo()">ADD</button>
    </div>

export default {
  name: "Task",
  // 省略
  methods: {
    createTodo: function() {
      if (this.newTodoName == ""){
        return;
      }
      this.todosRef.push({
        name: this.newTodoName,
        isComplete: false
      });
      this.newTodoName = "";
    },
  },
};

export default {
  // 省略
  methods: {
    createTodo: function() {
    // 省略
    // 完了・未完了の値の更新
    updateIsCompleteTodo: function(todo, key) {
      if (todo.isComplete == true) {
        todo.isComplete = false;
      } else {
        todo.isComplete = true;
      }
      var updates = {};
      updates[key] = todo;
      this.todosRef.update(updates);
    },

  },
};

{
  "rules": {
    ".read": "now < 1602478800000",  // 2020-10-12
    ".write": "now < 1602478800000",  // 2020-10-12
  }
}

{
  "rules": {
    "todos": {
      "$user_id" : {
        ".read": "$user_id === auth.uid",
        ".write": "$user_id === auth.uid"          
      }
    }
  }
}

<template>
  <div id="task">

    <!-- Simple header with fixed tabs. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">TooDo</span>

          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
            <nav class="mdl-navigation mdl-layout--large-screen-only">
            ｛｛username｝｝
          </nav>
        </div>

        <!-- New task -->
        <div class="task-create">
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" v-model="newTodoName" placeholder="New Item...">
          </div>

          <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" type="submit" v-on:click="createTodo()">
            <i class="material-icons">add</i>
          </button>
        </div>

        <!-- Tabs -->
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
          <a href="#fixed-tab-1" class="mdl-layout__tab" v-bind:class="{'is-active': selectedAll}" v-on:click="selectDisplay('all')">All</a>
          <a href="#fixed-tab-2" class="mdl-layout__tab" v-bind:class="{'is-active': selectedActive}" v-on:click="selectDisplay('active')">Active</a>
          <a href="#fixed-tab-3" class="mdl-layout__tab" v-bind:class="{'is-active': selectedComplete}" v-on:click="selectDisplay('complete')">Complete</a>
        </div>
      </header>

      <main class="mdl-layout__content">

        <!-- todo 一覧表示 -->
        <ul class="mdl-list">
          <li class="mdl-list__item" v-for="(todo, key) in filterdTodos" :key="todo.id">
            <span class="mdl-list__item-primary-content">｛｛todo.name｝｝</span>
            <span class="mdl-list__item-secondary-action">
              <a href="#" class="mdl-navigation__link large checked" v-if="todo.isComplete==true" v-on:click="updateIsCompleteTodo(todo, key)">✔</a>
              <a href="#" class="mdl-navigation__link large" v-if="todo.isComplete==false" v-on:click="updateIsCompleteTodo(todo, key)">❏</a>
            </span>
          </li>
        </ul>

      </main>
    </div>

  </div>
</template>

<style>
.large {
  font-size: 2em;
}

.checked {
  color: rgb(255,64,129);
}

.is-active {
  color: #ffffff;
  background: rgb(255,64,129);
}


</style>

<script>
import firebase from "firebase";

export default {
  name: "Task",
  data() {
    return {
      username: firebase.auth().currentUser.displayName,
      database: null,
      todosRef: null,
      todos: [],
      showTodoType: "all",
      selectedAll : true,
      selectedActive: false,
      selectedComplete: false,
    };
  },
  created: function () {
    this.database = firebase.database();
    this.uid = firebase.auth().currentUser.uid;
    this.todosRef = this.database.ref("todos/" + this.uid); // '/todos/<uid>/*' 以下を参照する。

    // データに変更があるときに実行される
    var _this = this;
    this.todosRef.on("value", (snapshot) => {
      _this.todos = snapshot.val(); // 再取得して todosに格納する。
    });
  },

  computed: {
    // フィルター実装。showTodoType が変更されると実行される
    filterdTodos: function() {

      if (this.showTodoType == "complete") {
        var complete_list = {};
        for (var key_c in this.todos){
          var todo_c = this.todos[key_c];
          if (todo_c.isComplete == true) {
            complete_list[key_c] = todo_c;
          }
        }
        return complete_list;
      } else if (this.showTodoType == "active") {
        var active_list = {};
        for (var key_a in this.todos){
          var todo_a = this.todos[key_a];
          if (todo_a.isComplete == false) {
            active_list[key_a] = todo_a;
          }
        }
        return active_list;
      }
      return this.todos;
    },
  },

  methods: {
    createTodo: function() {
      if (this.newTodoName == ""){
        return;
      }
      this.todosRef.push({
        name: this.newTodoName,
        isComplete: false
      });
      this.newTodoName = "";
    },
    // 完了・未完了の値の更新
    updateIsCompleteTodo: function(todo, key) {
      if (todo.isComplete == true) {
        todo.isComplete = false;
      } else {
        todo.isComplete = true;
      }
      var updates = {};
      updates[key] = todo;
      this.todosRef.update(updates);
    },

    selectDisplay: function(kind) {
      if (kind == 'all'){
        this.showTodoType = 'all';
        this.selectedAll = true;
        this.selectedActive = false;
        this.selectedComplete = false;
      } else if (kind == 'active'){
        this.showTodoType = 'active';
        this.selectedAll = false;
        this.selectedActive = true;
        this.selectedComplete = false;
      } else if (kind == 'complete') {
        this.showTodoType = 'complete';
        this.selectedAll = false;
        this.selectedActive = false;
        this.selectedComplete = true;
      }
    },

  },
};
</script>