Web: impelemt /my/settins

diff --git a/src/newslash_web/lib/Newslash/Web.pm b/src/newslash_web/lib/Newslash/Web.pm
index b2b3533..a725641 100644 (file)
--- a/src/newslash_web/lib/Newslash/Web.pm
+++ b/src/newslash_web/lib/Newslash/Web.pm
@@ -68,7 +68,7 @@ sub startup {
       ->to('story#story');
 
     # journal page
-    $r->get('/journal/new')->to('journal#create');
+    $r->get('/journal/new')->to('journal#create', seclev => 1);
     $r->get('/journal/:id/')->to('journal#journal');
 
     # submission page
@@ -78,6 +78,7 @@ sub startup {
 
     # user page
     $r->get('/:user_name/journal' => [user_name => qr/~.*/])->to('journal#user_journals');
+    $r->get('/my/settings' => [user_name => qr/~.*/])->to('user#settings', seclev => 1);
 
     # Admin
     # TODO: needs access control!
@@ -97,6 +98,8 @@ sub startup {
     $api->post('/journal')->to('API::Journal#post');
     $api->post('/comment')->to('API::Comment#post');
     $api->get('/comment')->to('API::Comment#get');
+    $api->post('/user')->to('API::User#post');
+    $api->get('/user')->to('API::User#get');
 }
 
 1;

diff --git a/src/newslash_web/public/js/user-settings.js b/src/newslash_web/public/js/user-settings.js
new file mode 100644 (file)
index 0000000..fc387f8
--- /dev/null
+++ b/src/newslash_web/public/js/user-settings.js
@@ -0,0 +1,45 @@
+/* user-settings.js */
+const editor = {};
+var vm;
+
+editor.run = function run (params) {
+  const data = {
+    commentThreshold: 0,
+    foldThreshold: 1,
+    disableJS: 0,
+    enableHotkey: 1,
+    readAndFold: 0,
+    hideSignature: 0,
+    hideScore: 0,
+    showDomain: "auto",
+    isChanged: 0,
+
+    message: '',
+    urls: {
+      getPrefs:  "/api/v1/user?type=config",
+      postPrefs: "/api/v1/user",
+    },
+  };
+
+  const computed = {};
+  const methods = {
+    editItem: function editItem(item) {
+      Vue.set(item, 'editing', true);
+    },
+  };
+
+  vm = new Vue({el: params.el,
+                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";
+                    }
+                  );
+                },
+               });
+};

diff --git a/src/newslash_web/templates/user/settings.html.tt2 b/src/newslash_web/templates/user/settings.html.tt2
new file mode 100644 (file)
index 0000000..21551de
--- /dev/null
+++ b/src/newslash_web/templates/user/settings.html.tt2
@@ -0,0 +1,94 @@
+[% WRAPPER common/layout vue=1 %]
+
+<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">
+      <form id="comments">
+
+        <div class="form-inline">
+          <span>デフォルトのコメント設定：</span>
+          <select id="comment-filter" name="comment-filter" class="form-control" v-model="commentThreshold">
+            <option value="-1">全コメントを表示</option>
+            <option value="5">スコア5以上のコメントのみ表示</option>
+            <option value="4">スコア4以上のコメントのみ表示</option>
+            <option value="3">スコア3以上のコメントのみ表示</option>
+            <option value="2">スコア2以上のコメントのみ表示</option>
+            <option value="1">スコア1以上のコメントのみ表示</option>
+            <option value="0">スコア0以上のコメントのみ表示</option>
+          </select>
+          <select id="body-filter" name="body-filter" class="form-control" v-model="foldThreshold">
+            <option value="-1">すべての本文を表示</option>
+            <option value="5">スコア5未満のコメントは抜粋表示</option>
+            <option value="4">スコア4未満のコメントは抜粋表示</option>
+            <option value="3">スコア3未満のコメントは抜粋表示</option>
+            <option value="2">スコア2未満のコメントは抜粋表示</option>
+            <option value="1">スコア1未満のコメントは抜粋表示</option>
+            <option value="0">スコア0未満のコメントは抜粋表示</option>
+          </select>
+        </div>
+
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" id="disable-js" name="disable-js" value="1" v-model="disableJS" />
+            JavaScriptを使った動的なコメント表示を利用しない
+          </label>
+        </div>
+
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" id="enable-hotkey" name="enable-hotkey" value="1" v-model="enableHotkey" />
+            ショートカットキーの割り当てを有効にする
+          </label>
+        </div>
+
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" id="auto-fold" name="auto-fold" value="1" v-model="autoFold" />
+            既読コメントを折りたたむ
+          </label>
+        </div>
+
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" id="hide-signature" name="hide-signature" value="1" v-model="hideSignature" />
+            署名を非表示
+          </label>
+        </div>
+
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" id="hide-score" name="hide-score" value="1" v-model="hideScore" />
+            スコアを非表示
+          </label>
+        </div>
+
+        <div class="form-inline">
+          <div class="form-group">
+            <span>リンク先のドメイン表示：</span>
+            <select id="show-domain" class="form-control" name="show-dmain" v-model="showDomain" >
+              <option value="hide">表示しない</option>
+              <option value="auto">安全と思われる場合は表示しない</option>
+              <option value="show" selected="selected">表示する</option>
+            </select>
+          </div>
+        </div>
+        
+        <div class="form-inline">
+          <button type="submit" class="btn btn-default">保存</button>
+          <button type="reset" class="btn" :enable="isChanged">リセット</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<script src="/js/user-settings.js" ></script>
+<script>
+  editor.run({ el: '#user-settings' });
+</script>
+
+[% END %]