From 15d3d3248f092bdca4035ccddd9985e2831358d2 Mon Sep 17 00:00:00 2001
From: uu59 <k@uu59.org>
Date: Mon, 9 Jun 2014 16:34:00 +0900
Subject: [PATCH] Separate vue components

---
 app/assets/javascripts/fluent_log.js  | 30 +++++++++++++++++++++++++++
 app/assets/javascripts/tutorial.js    | 15 ++------------
 app/views/tutorials/chapter1.html.erb |  4 ++++
 3 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/javascripts/fluent_log.js

diff --git a/app/assets/javascripts/fluent_log.js b/app/assets/javascripts/fluent_log.js
new file mode 100644
index 0000000..2ea2c78
--- /dev/null
+++ b/app/assets/javascripts/fluent_log.js
@@ -0,0 +1,30 @@
+(function(){
+  "use strict";
+
+  $(function(){
+    if($('#fluent-log').length === 0) return;
+
+    new Vue({
+      el: "#fluent-log",
+      data: {
+        "logs": [],
+      },
+
+      created: function(){
+        this.fetchLogs();
+      },
+
+      methods: {
+        fetchLogs: function() {
+          var self = this;
+          new Promise(function(resolve, reject) {
+            $.getJSON("/tutorials/log_tail", resolve).fail(reject);
+          }).then(function(logs){
+            self.logs = logs;
+          });
+        },
+      }
+    });
+  });
+})();
+
diff --git a/app/assets/javascripts/tutorial.js b/app/assets/javascripts/tutorial.js
index a19c068..1c63584 100644
--- a/app/assets/javascripts/tutorial.js
+++ b/app/assets/javascripts/tutorial.js
@@ -2,12 +2,13 @@
   "use strict";
 
   $(function(){
+    // At tutorial chapter1, sending request to fluentd
+
     if($('#chapter1').length === 0) return;
 
     new Vue({
       el: "#chapter1",
       data: {
-        "logs": [],
         "payloads": [
           {
             "path": "/debug.foo",
@@ -37,19 +38,7 @@
         ]
       },
 
-      created: function(){
-        this.fetchLogs();
-      },
-
       methods: {
-        fetchLogs: function() {
-          var self = this;
-          new Promise(function(resolve, reject) {
-            $.getJSON("/tutorials/log_tail", resolve).fail(reject);
-          }).then(function(logs){
-            self.logs = logs;
-          });
-        },
         sendRequest: function(payload){
           new Promise(function(resolve, reject) {
             $.ajax({
diff --git a/app/views/tutorials/chapter1.html.erb b/app/views/tutorials/chapter1.html.erb
index 504a21d..afdb6e0 100644
--- a/app/views/tutorials/chapter1.html.erb
+++ b/app/views/tutorials/chapter1.html.erb
@@ -20,7 +20,11 @@
       </code>
     </p>
   </form>
+</div>
+<!-- /vue.js -->
 
+<!-- vue.js -->
+<div id="fluent-log">
   <pre>
 <button class="btn btn-primary" v-on="click: fetchLogs"><%= t ".reload_log" %></button>