frontend: fix errors (wip)

12 files changed, 97 insertions, 64 deletions

diff --git a/frontend/src/app.js b/frontend/src/app.js
index fbf4c75..d95205e 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -2,6 +2,7 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 
 import storage from "storage";
+import aclog from "aclog";
 
 import App from "./app.vue";
 import AboutIndexPage from "./components/about/index.vue";
@@ -126,6 +127,15 @@ router.map({
       ":reactions": { name: "user-favorites", component: Vue.extend() }
     }
   },
+  "/:screen_name/favorited_by/:source_screen_name": {
+    name: "user-favorited-by-top",
+    component: TweetsPage,
+    api: "tweets/user_favorited_by",
+    filtering: "reactions",
+    subRoutes: {
+      ":reactions": { name: "user-favorited-by", component: Vue.extend() }
+    }
+  },
   "/:screen_name/stats": {
     name: "user-stats",
     component: UsersStatsPage,
@@ -140,5 +150,5 @@ router.redirect({
   "/i/best": "/i/public/best",
 });
 
-storage.init();
-router.start(App, "body");
+var start = () => router.start(App, "body");
+aclog.sessions.verify().then(start).catch(start);
diff --git a/frontend/src/components/apidocs/endpoint.vue b/frontend/src/components/apidocs/endpoint.vue
index 16a1d95..e1ef116 100644
--- a/frontend/src/components/apidocs/endpoint.vue
+++ b/frontend/src/components/apidocs/endpoint.vue
@@ -1,5 +1,8 @@
 <template>
-  <template v-if="endpoint">
+  <div class="loading-box" v-if="$loadingRouteData">
+    <img class="loading-image" src="/assets/loading.gif" />
+  </div>
+  <template v-else>
     <h1>{{endpoint.method}} {{endpoint.path}}</h1>
     <p>{{endpoint.description}}</p>
     <h2>Resource URL</h2>
@@ -26,7 +29,6 @@
       <pre><code><div v-if="example.loading"><img alt="loading..." src="/assets/loading.gif" /></div>{{example.result}}</code></pre>
     </template>
   </template>
-  <div v-else><img alt="loading..." src="/assets/loading.gif" /></div>
 </template>
 
 <script>
diff --git a/frontend/src/components/apidocs/sidebar.vue b/frontend/src/components/apidocs/sidebar.vue
index f353955..053706f 100644
--- a/frontend/src/components/apidocs/sidebar.vue
+++ b/frontend/src/components/apidocs/sidebar.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="sidebar">
     <div class="sidebar-list">
-      <div class="list-group list-group-scroll">
+      <div class="loading-box" v-if="loading">
+        <img class="loading-image" src="/assets/loading.gif" />
+      </div>
+      <div class="list-group list-group-scroll" v-else>
         <template v-for="(name, namespace) in apidocs">
           <span class="list-group-head">{{name | capitalize}}</span>
           <a class="list-group-item" v-for="endpoint in namespace" v-link="endpoint_link(endpoint)">{{endpoint_string(endpoint)}}</a>
@@ -17,7 +20,8 @@ import aclog from "aclog";
 export default {
   data() {
     return {
-      apidocs: {}
+      apidocs: {},
+      loading: false,
     };
   },
   methods: {
@@ -28,8 +32,12 @@ export default {
       return endpoint.method + " " + endpoint.path;
     },
   },
-  ready() {
-    aclog.apidocs.load().then(docs => this.apidocs = docs.namespaces);
+  created() {
+    this.loading = true;
+    aclog.apidocs.load().then(docs => {
+      this.loading = false;
+      this.apidocs = docs.namespaces
+    });
   }
 };
 </script>
diff --git a/frontend/src/components/navbar.vue b/frontend/src/components/navbar.vue
index 4373c60..5c536b2 100644
--- a/frontend/src/components/navbar.vue
+++ b/frontend/src/components/navbar.vue
@@ -93,7 +93,9 @@ export default {
     },
     submit: function(e) {
       e.preventDefault();
-      this.$route.router.go("/" + this.enteredUserName);
+      if (this.enteredUserName !== "") {
+        this.$route.router.go("/" + this.enteredUserName);
+      }
     },
     logout(e) {
       e.preventDefault();
diff --git a/frontend/src/components/settings/index.vue b/frontend/src/components/settings/index.vue
index 27ec7cc..88dda4a 100644
--- a/frontend/src/components/settings/index.vue
+++ b/frontend/src/components/settings/index.vue
@@ -7,9 +7,10 @@
         </div>
       </div>
       <div class="col-sm-9 col-md-7 col-lg-6">
-        <form v-on:submit="submit">
+        <div class="loading-box" v-if="!settings"><img class="loading-image" src="/assets/loading.gif" /></div>
+        <form v-on:submit="submit" v-else>
           <div class="checkbox">
-            <input checked="checked" name="notification_enabled" type="checkbox" />
+            <input v-model="settings.notification_enabled" type="checkbox" />
             <label for="notification_enabled">リプライ通知を有効にする</label>
           </div>
           <div class="form-group">
@@ -35,6 +36,7 @@ export default {
     submit(e) {
       e.preventDefault();
       Aclog.settings.update(this.settings).then(res => {
+        console.log(res);
         this.settings = res;
       });
     },
@@ -43,6 +45,7 @@ export default {
     data(tr) {
       if (Storage.isLoggedIn()) {
         Aclog.settings.get().then(res => {
+        console.log(res);
           tr.next({ settings: res });
         });
       } else {
diff --git a/frontend/src/components/sidebar.vue b/frontend/src/components/sidebar.vue
index b1e2311..9454c53 100644
--- a/frontend/src/components/sidebar.vue
+++ b/frontend/src/components/sidebar.vue
@@ -5,7 +5,10 @@
       <p>@{{user.screen_name}}</p>
       <p><a class="aclogicon aclogicon-twitter" href="https://twitter.com/{{user.screen_name}}"></a></p>
       <div class="user-stats">
-        <template v-if="stats">
+        <div class="loading-box" v-if="loading">
+          <img class="loading-image" src="/assets/loading.gif" />
+        </div>
+        <template v-else>
           <ul class="records" v-if="stats.registered">
             <li><span>Received</span><span class="data">{{stats.reactions_count}}</span></li>
             <li><span>Average</span><span class="data">{{average}}</span></li>
@@ -13,9 +16,6 @@
           </ul>
           <div class="alert alert-aclog" v-else>@{{user.screen_name}} は aclog に登録していません</div>
         </template>
-        <div class="loading-box" v-if="loading">
-          <img class="loading-image" src="/assets/loading.gif" />
-        </div>
       </div>
     </div>
     <h1 v-else>All</h1>
@@ -100,10 +100,17 @@ export default {
       e.preventDefault();
       this.$route.router.go({ name: "public-filter", query: { q: this.query } });
     },
+    updateUser(u) {
+      this.loading = true;
+      aclog.users.stats_compact(newval.screen_name).then(res => {
+        this.stats = res;
+        this.loading = false;
+      });
+    }
   },
   watch: {
     user(newval, oldval) {
-      if (newval) {
+      if (newval && (!oldval || newval.id != oldval.id)) {
         this.loading = true;
         aclog.users.stats_compact(newval.screen_name).then(res => {
           this.stats = res;
@@ -112,10 +119,8 @@ export default {
       }
     }
   },
-  route: {
-    data(tr) {
-      if (tr.to.query.q) { return { q: tr.to.query.q }; }
-    }
+  created() {
+    if (this.$route.query.q) { this.query = this.$route.query.q; }
   }
 };
 </script>
diff --git a/frontend/src/components/tweets/default.vue b/frontend/src/components/tweets/default.vue
index 0ef175f..f71efd0 100644
--- a/frontend/src/components/tweets/default.vue
+++ b/frontend/src/components/tweets/default.vue
@@ -8,7 +8,7 @@
         <h1 v-if="$route.title">{{$route.title}}</h1>
         <div class="statuses" v-el:tweets>
           <tweet v-for="tweet in statuses" v-bind:tweet="tweet"></tweet>
-          <div class="loading-box" data-v-if="loading">
+          <div class="loading-box" v-if="loading">
             <img class="loading-image" src="/assets/loading.gif" />
           </div>
         </div>
@@ -53,7 +53,7 @@ export default {
         statuses: [],
         loading: false,
         next: null,
-        prev: null
+        prev: null,
       };
     },
   },
diff --git a/frontend/src/components/users/stats.vue b/frontend/src/components/users/stats.vue
index f781288..124a550 100644
--- a/frontend/src/components/users/stats.vue
+++ b/frontend/src/components/users/stats.vue
@@ -26,12 +26,12 @@
                   </div>
                 </div>
               </div>
-              <div class="statuses" v-el:tweets v-if="one.showTweets">
+              <div class="statuses" v-if="one.showTweets">
                 <tweet v-for="tweet in one.tweets" v-bind:tweet="tweet"></tweet>
-                <div class="loading-box" data-v-if="one.loadingTweets">
+                <div class="loading-box" v-if="one.loadingTweets">
                   <img class="loading-image" src="/assets/loading.gif" />
                 </div>
-                <div class="refresh-box"><a v-link="currentPermalink(one)">&#187;</a></div>
+                <div class="refresh-box" v-else><a v-link="currentPermalink(one)">&#187;</a></div>
               </div>
             </template>
           </div>
@@ -53,12 +53,16 @@ export default {
       {
         title: "Favorited by..",
         loading: true,
-        tweets: []
+        tweets: [],
+        showTweets: false,
+        loadingTweets: false
       },
       {
         title: "Favoriting..",
         loading: true,
-        tweets: []
+        tweets: [],
+        showTweets: false,
+        loadingTweets: false
       }
       ],
       user: null,
@@ -72,9 +76,37 @@ export default {
       var sn = one.lastUser.screen_name;
       return one._permalink.replace(/:screen_name/, sn);
     },
-    loadData: function() {
-      var sn = this.$route.params.screen_name;
+    openTweets: function(user, one, e) {
+      if (!one.showTweets || user === one.lastUser) {
+        one.showTweets = !one.showTweets;
+      }
+      if (one.showTweets) {
+        one.lastUser = user;
+        one.loadingTweets = true;
+        var params = {};
+        Object.keys(one._tweets).forEach(key => {
+          if (one._tweets[key] === ":screen_name") {
+            params[key] = user.screen_name
+          } else {
+            params[key] = one._tweets[key]
+          }
+        });
+        aclog.tweets.__tweets("tweets/user_favorited_by", Object.assign({ count: 3 }, params)).then(res => {
+          one.loadingTweets = false;
+          one.tweets = res.statuses;
+        });
+      }
+    },
+    failProfileImage: function(e) {
+      e.preventDefault();
+      e.target.src = "/assets/profile_image_missing.png";
+    },
+  },
+  route: {
+    data(tr) {
+      var sn = tr.to.params.screen_name;
       aclog.users.favorited_by(sn).then(res => {
+        this.user = res.user;
         this.data.$set(0, Object.assign(this.data[0], {
           loading: false,
           users: res.users,
@@ -86,9 +118,9 @@ export default {
           _permalink: "/" + sn + "/favorited_by/:screen_name",
           _tweets: { screen_name: sn, source_screen_name: ":screen_name" },
         }));
-        this.user = res.user;
       });
       aclog.users.favorited_users(sn).then(res => {
+        this.user = res.user;
         this.data.$set(1, Object.assign(this.data[1], {
           loading: false,
           users: res.users,
@@ -100,35 +132,8 @@ export default {
           _permalink: "/:screen_name/favorited_by/" + sn,
           _tweets: { screen_name: ":screen_name", source_screen_name: sn },
         }));
-        this.user = res.user;
       });
-    },
-    openTweets: function(user, one, e) {
-      if (!one.showTweets || user === one.lastUser) {
-        one.showTweets = !one.showTweets;
-      }
-      if (one.showTweets) {
-        one.lastUser = user;
-        var params = {};
-        Object.keys(one._tweets).forEach(key => {
-          if (one._tweets[key] === ":screen_name") {
-            params[key] = user.screen_name
-          } else {
-            params[key] = one._tweets[key]
-          }
-        });
-        aclog.tweets.__tweets("tweets/user_favorited_by", Object.assign({ count: 3 }, params)).then(res => {
-          one.tweets = res.statuses;
-        });
-      }
-    },
-    failProfileImage: function(e) {
-      e.preventDefault();
-      e.target.src = "/assets/profile_image_missing.png";
-    },
-  },
-  ready: function() {
-    this.loadData();
+    }
   }
 };
 </script>
diff --git a/frontend/src/lib/aclog.js b/frontend/src/lib/aclog.js
index 742ac06..2c9e6d1 100644
--- a/frontend/src/lib/aclog.js
+++ b/frontend/src/lib/aclog.js
@@ -76,6 +76,6 @@ export default {
   },
   settings: {
     get: () => get("settings/get"),
-    update: (settings) => post("settings/update"),
+    update: (settings) => post("settings/update", settings),
   }
 };
diff --git a/frontend/src/lib/storage.js b/frontend/src/lib/storage.js
index face217..d7db89b 100644
--- a/frontend/src/lib/storage.js
+++ b/frontend/src/lib/storage.js
@@ -7,9 +7,6 @@ var storage = {
     authenticity_token: null,
   },
   isLoggedIn() { return !!this.store.currentUser; },
-  init() {
-    aclog.sessions.verify();
-  },
   update(json) {
     this.store.currentUser = json.current_user;
     this.store.authenticity_token = json.authenticity_token;
diff --git a/frontend/src/settings.js b/frontend/src/settings.js
index 06a63c0..d7f7fa5 100644
--- a/frontend/src/settings.js
+++ b/frontend/src/settings.js
@@ -1,5 +1,5 @@
 export default {
-  backendPrefix: "http://chikuwa.rhe.jp:3000",
-  apiPrefix: "http://chikuwa.rhe.jp:3000",
+  backendPrefix: "",
+  apiPrefix: "http://chikuwa.rhe.jp:8000",
   debug: true,
 };
diff --git a/frontend/src/stylesheets/base.scss b/frontend/src/stylesheets/base.scss
index 6c58c56..cb412c8 100644
--- a/frontend/src/stylesheets/base.scss
+++ b/frontend/src/stylesheets/base.scss
@@ -42,6 +42,7 @@ h3 {
 
 code, pre {
     background: #eeebe8;
+    word-break: break-all;
 }
 
 pre {