<div class="navIcon"><i class="fas fa-bars fa-lg"></i></div>

<div class="sidenav">
  <logo class="logo">
    <a href="#">
      <i class="fas fa-fw fa-balance-scale fa-lg"></i>
      <span>TimeApp</span>
    </a>
  </logo>

  <div class="role">
    <img src="http://placeimg.com/80/80/any" alt="">
    <div class="name">坂本 一生</div>
    <div class="name">（デザインチーム）</div>
  </div>

  <a href="#about">
    <i class="fas fa-fw fa-home"></i>ホーム
  </a>
  <a href="#services">
    <i class="fas fa-fw fa-clock"></i>タイムログ
  </a>
  <a href="#clients">
    <i class="fas fa-fw fa-users"></i>メンバー
  </a>
  <a href="#contact">
    <i class="fas fa-fw fa-cogs"></i>設定
  </a>
</div>

<div class="main">
  <div class="topnav">

    <div class="search-container">
      <form action="javascript:void(0);">
        <input type="text" placeholder="検索..." name="search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>

    <div class="nav_group">
      <a href="#"><i class="fas fa-fw fa-user"></i> ユーザー</a>
      <a class="notifi active" href="#"><i class="fas fa-fw fa-bell"></i> 通知</a>
      <a href="#"><i class="fas fa-fw fa-sign-in-alt"></i> ログアウト</a>
    </div>

  </div>
  <div id="title">
    <h1><i class="fas fa-fw fa-clock fa-lg"></i> {{ message }}
    </h1>
  </div>
  <div class="container">
    <div id="logtitle">
      <h2>
        <i class="fas fa-fw fa-clock fa-lg"></i> {{ message }}
      </h2>
    </div>

    <table class="table table-hover">
      <thead>
        <tr id="tableName">
          <th v-for="item in items">
            {{ item.item }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr id="log1">
          <td v-for="name in names01">
            {{ name.name }}
          </td>
        </tr>

        <tr id="log2">
          <td v-for="name in names02">
            {{ name.name }}
          </td>
        </tr>

        <tr id="log3">
          <td v-for="name in names03">
            {{ name.name }}
          </td>
        </tr>

      </tbody>
    </table>
  </div>

  <div class="container">

    <div id="todoApp">

      <h2 class="todo_title" v-bind:style="fontStyle">
        <i class="far fa-edit fa-fw fa-lg"></i> {{ title }}</h2>

      <input type="text" v-model="todo" v-on:keyup.enter="addTodo">

      <div class="todo-default">
        <i class="far fa-edit"></i>　イベント資料のチーム共有
      </div>

      <div>
        <div v-for="t in todos" :key="t.id" v-bind:class="['todo-default', t.doing ? 'todo-doing' : '']" v-on:click="begin(t)">
          <i class="far fa-edit"></i>　{{t.name}}
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <form action="javascript:void(0);">
      <h2><i class="far fa-sticky-note fa-fw fa-lg"></i> ノート作成</h2>

      <h3>記入</h3>
      <div id="write">
        <textarea v-model="writeNote" name="" cols="5" rows="5" placeholder="入力..."></textarea>
        <h3>表示</h3>
        <textarea name="" cols="10" rows="10" placeholder="表示...">{{ writeNote }}</textarea>

      </div>

      <div class="buttonArea">
        <button type="submit" class="btn">ノート作成 <i class="far fa-sticky-note fa-lg"></i></button>
      </div>
    </form>
  </div>

  <div class="container">
    <div class="tgt" id="target"></div>
  </div>

  <div class="container">
    <div class="tgt" id="target2"></div>
  </div>

</div>
<!-- ./maini -->

<footer>
  <small>
     Copyright © 2016-2018 Asagiri Design. All Rights Reserved
  </small>
</footer>

//  Vue
var app = new Vue({
  el: "#title",
  data: {
    message: "Timelog Note"
  }
});

var app = new Vue({
  el: "#logtitle",
  data: {
    message: "記録一覧"
  }
});

var app = new Vue({
  el: "#tableName",
  data: {
    items: [
      {
        item: "記録日"
      },
      {
        item: "記録ログ"
      },
      {
        item: "ノート見出し"
      }
    ]
  }
});

var app = new Vue({
  el: "#log1",
  data: {
    names01: [
      {
        name: "2017/06/13"
      },
      {
        name: "09:00-13:00"
      },
      {
        name:
          "本日の記事録メモ。出席：山田さん、高橋さん、吉岡さん。５月に行われたデザインコンペの結果の共有。提携企業様への共有進捗の確認。担当の確認。来月予算の見積もり。F社社様への新規企画アイデア出し。"
      }
    ]
  }
});

var app = new Vue({
  el: "#log2",
  data: {
    names02: [
      {
        name: "2017/06/18"
      },
      {
        name: "12:00-14:00"
      },
      {
        name: "定例会議。　出席：高橋さん、清水さん"
      }
    ]
  }
});

var app = new Vue({
  el: "#log3",
  data: {
    names03: [
      {
        name: "2017/06/25"
      },
      {
        name: "19:00-21:00"
      },
      {
        name:
          "Skypeミーティング。　出席：吉岡さん、高橋さん、清水さん。進捗共有レギュレーションのうつ合わせ"
      }
    ]
  }
});

// ToDo Component
var app = new Vue({
  el: "#todoApp",
  data: {
    title: "追加タスク",
    fontStyle: {
      fontSize: "1.6rem"
    },
    todo: "",
    todos: []
  },
  methods: {
    addTodo: function() {
      this.todos.push({
        id: this.todos.length,
        name: this.todo,
        doing: false
      });
      this.todo = "";
    },
    begin: function(todo) {
      todo.doing = !todo.doing;
    }
  }
});

// write note
var app = new Vue({
  el: "#write",
  data: {
    writeNote: ""
  }
});

// Text Length Count
$(function() {
  var $setElm = $("td");
  var cutFigure = "50"; // カットする文字数
  var afterTxt = "..."; // 文字カット後に表示するテキスト

  $setElm.each(function() {
    var textLength = $(this).text().length;
    var textTrim = $(this)
      .text()
      .substr(0, cutFigure);

    if (cutFigure < textLength) {
      $(this)
        .html(textTrim + afterTxt)
        .css({ visibility: "visible" });
    } else if (cutFigure >= textLength) {
      $(this).css({ visibility: "visible" });
    }
  });
});

// Toggle
$(".navIcon").on("click", function() {
  $(".sidenav").toggleClass("pull");
  $(".main").toggleClass("pull");
  $(this).toggleClass("pull");
});

(function() {
  "use strict";

  function drawChart() {
    var target = document.getElementById("target");
    var data;
    var options = {
      title: "先月比、チーム内ノート共有率",
      width: "800",
      height: "400",
      colors: ["lightskyblue", "lightgreen"],
      animation: {
        startup: true,
        duration: 800,
        easing: "inAndOut"
      }
      //       isStacked:　＝ 積み上げ表示
      // isStacked: true,
      //       percent = 100%表記
      // isStacked: "percent"
    };
    // var chart = new google.visualization.BarChart(target);
    var chart = new google.visualization.ColumnChart(target);
    data = new google.visualization.arrayToDataTable([
      ["Team", "５月", "６月"],
      ["Team A", 12, 38],
      ["Team B", 42, 18],
      ["Team C", 11, 58],
      ["Team D", 25, 18]
    ]);
    chart.draw(data, options);
  }

  google.charts.load("current", { packages: ["corechart"] });
  google.charts.setOnLoadCallback(drawChart);
})();

// Chart2
(function() {
  "use strict";

  function drawChart() {
    var target = document.getElementById("target2");
    var data;
    var options = {
      title: "参照資料　イメージ",
      width: "８00",
      height: "400",
      animation: {
        startup: true,
        duration: 800,
        easing: "inAndOut"
      },
      hAxis: { title: "Year" },
      vAxis: { title: "Sales" },
      curveType: "function",
      pointSize: 6
      // pointShape: 'square'
    };
    var chart = new google.visualization.LineChart(target);
    // var chart = new google.visualization.ColumnChart(target);
    data = new google.visualization.arrayToDataTable([
      // ["Year", "Bob", "Jane", { role: "certainty" }, "Carry"],
      // ["2017/05", 12, 38, null, 80],
      // ["2017/06", 42, 18, null, 10],
      // ["2017/07", 11, 58, 'Camp A', 130],
      // ["2017/08", 111, 158, null, 70]

      [
        "Year",
        "@アイテムA",
        { role: "annotation" },
        { role: "certainty" },
        "@アイテムB",
        { role: "certainty" }
      ],
      ["2014", 52, "キャンペーン A", true, 89, true],
      ["2015", 38, null, true, 78, true],
      ["2016", 122, "キャンペーン B", true, 88, true],
      ["2017", 62, null, true, 91, true],
      ["2018", 142, "想定売上げ", false, 101, false]
    ]);
    chart.draw(data, options);
  }

  google.charts.load("current", { packages: ["corechart"] });
  google.charts.setOnLoadCallback(drawChart);
})();