js/user-settings.js: implement comment settings

diff --git a/src/newslash_web/public/js/user-settings.js b/src/newslash_web/public/js/user-settings.js
index fc387f8..31ec401 100644 (file)
--- a/src/newslash_web/public/js/user-settings.js
+++ b/src/newslash_web/public/js/user-settings.js
@@ -3,28 +3,33 @@ const editor = {};
 var vm;
 
 editor.run = function run (params) {
+  const userConfig = params.userConfig || {};
+  const user = params.user || {};
   const data = {
-    commentThreshold: 0,
-    foldThreshold: 1,
-    disableJS: 0,
-    enableHotkey: 1,
-    readAndFold: 0,
-    hideSignature: 0,
-    hideScore: 0,
-    showDomain: "auto",
-    isChanged: 0,
-
-    message: '',
+    userConfig: userConfig,
+    showConfig: 0,
+    user: user,
+    message: "",
     urls: {
-      getPrefs:  "/api/v1/user?type=config",
-      postPrefs: "/api/v1/user",
+      configSave: "/api/v1/user",
     },
   };
 
   const computed = {};
   const methods = {
-    editItem: function editItem(item) {
-      Vue.set(item, 'editing', true);
+    saveConfig: function saveConfig () {
+      const data = {
+        type: "config",
+        config: vm.$data.userConfig,
+      };
+      this.$http.post(vm.urls.configSave, data).then(
+        (response) => { // success
+          vm.message = "保存しました";
+        },
+        (response) => { // fail
+          vm.message = "エラー";
+        }
+      );
     },
   };
 
@@ -32,14 +37,6 @@ editor.run = function run (params) {
                 data: data,
                 computed: computed,
                 methods: methods,
-                created: function () {
-                  this.$http.get(this.urls.getPrefs).then(
-                    (resp) => { // success
-                    },
-                    (resp) => { // fail
-                      this.message = resp.body.message || "failed to get user settings";
-                    }
-                  );
-                },
+                created: function () {},
                });
 };

diff --git a/src/newslash_web/templates/user/settings.html.tt2 b/src/newslash_web/templates/user/settings.html.tt2
index 21551de..67988b5 100644 (file)
--- a/src/newslash_web/templates/user/settings.html.tt2
+++ b/src/newslash_web/templates/user/settings.html.tt2
@@ -2,8 +2,6 @@
 
 <div class="app-frame" id="user-settings">
   <h3>設定</h3>
-  <div v-text="message">
-  </div>
   <div class="panel panel-default">
     <div class="panel-heading">コメント表示</div>
     <div class="panel-body">
@@ -11,7 +9,7 @@
 
         <div class="form-inline">
           <span>デフォルトのコメント設定：</span>
-          <select id="comment-filter" name="comment-filter" class="form-control" v-model="commentThreshold">
+          <select id="comment-filter" name="comment-filter" class="form-control" v-model="userConfig.show_threshold">
             <option value="-1">全コメントを表示</option>
             <option value="5">スコア5以上のコメントのみ表示</option>
             <option value="4">スコア4以上のコメントのみ表示</option>
@@ -20,7 +18,7 @@
             <option value="1">スコア1以上のコメントのみ表示</option>
             <option value="0">スコア0以上のコメントのみ表示</option>
           </select>
-          <select id="body-filter" name="body-filter" class="form-control" v-model="foldThreshold">
+          <select id="body-filter" name="body-filter" class="form-control" v-model="userConfig.fold_threshold">
             <option value="-1">すべての本文を表示</option>
             <option value="5">スコア5未満のコメントは抜粋表示</option>
             <option value="4">スコア4未満のコメントは抜粋表示</option>
@@ -31,7 +29,7 @@
           </select>
         </div>
 
-        <div class="checkbox">
+        <div class="checkbox" style="display: none;">
           <label>
             <input type="checkbox" id="disable-js" name="disable-js" value="1" v-model="disableJS" />
             JavaScriptを使った動的なコメント表示を利用しない
@@ -40,28 +38,28 @@
 
         <div class="checkbox">
           <label>
-            <input type="checkbox" id="enable-hotkey" name="enable-hotkey" value="1" v-model="enableHotkey" />
+            <input type="checkbox" id="enable-hotkey" name="enable-hotkey" value="1" v-model="userConfig.enable_hotkey" />
             ショートカットキーの割り当てを有効にする
           </label>
         </div>
 
         <div class="checkbox">
           <label>
-            <input type="checkbox" id="auto-fold" name="auto-fold" value="1" v-model="autoFold" />
+            <input type="checkbox" id="auto-fold" name="auto-fold" value="1" v-model="userConfig.auto_fold" />
             既読コメントを折りたたむ
           </label>
         </div>
 
         <div class="checkbox">
           <label>
-            <input type="checkbox" id="hide-signature" name="hide-signature" value="1" v-model="hideSignature" />
+            <input type="checkbox" id="hide-signature" name="hide-signature" value="1" v-model="userConfig.hide_signature" />
             署名を非表示
           </label>
         </div>
 
         <div class="checkbox">
           <label>
-            <input type="checkbox" id="hide-score" name="hide-score" value="1" v-model="hideScore" />
+            <input type="checkbox" id="hide-score" name="hide-score" value="1" v-model="userConfig.hide_score" />
             スコアを非表示
           </label>
         </div>
@@ -69,17 +67,17 @@
         <div class="form-inline">
           <div class="form-group">
             <span>リンク先のドメイン表示：</span>
-            <select id="show-domain" class="form-control" name="show-dmain" v-model="showDomain" >
+            <select id="show-domain" class="form-control" name="show-dmain" v-model="userConfig.show_domain" >
               <option value="hide">表示しない</option>
               <option value="auto">安全と思われる場合は表示しない</option>
-              <option value="show" selected="selected">表示する</option>
+              <option value="show">表示する</option>
             </select>
           </div>
         </div>
         
         <div class="form-inline">
-          <button type="submit" class="btn btn-default">保存</button>
-          <button type="reset" class="btn" :enable="isChanged">リセット</button>
+          <button type="button" class="btn btn-default" v-on:click="saveConfig()">保存</button>
+          <span v-text="message"></span>
         </div>
       </form>
     </div>
@@ -88,7 +86,11 @@
 
 <script src="/js/user-settings.js" ></script>
 <script>
-  editor.run({ el: '#user-settings' });
+  editor.run({
+  el: '#user-settings',
+  userConfig: userConfig,
+  user: user,
+  });
 </script>
 
 [% END %]