From 3d6a61c113a554feec33bf6579bcd622e45cf9e1 Mon Sep 17 00:00:00 2001
From: Umky <zy.toy@qq.com>
Date: Sun, 12 Jun 2022 21:45:43 +0800
Subject: [PATCH] =?UTF-8?q?[IMPORVE]=20userpage=5Fget.html:=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=BA=86=E7=94=A8=E6=88=B7=E6=93=8D=E4=BD=9C=E7=94=9F?=
 =?UTF-8?q?=E8=AF=8D=E6=97=B6=E7=9A=84=E5=93=8D=E5=BA=94=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/templates/userpage_get.html | 56 ++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html
index 19542c1..0dde12f 100644
--- a/app/templates/userpage_get.html
+++ b/app/templates/userpage_get.html
@@ -69,10 +69,9 @@
                     (
                     <a title="{{ word }}">{{ freq }}</a>
                     )
-
-                    <a class="btn btn-success" href={{ username }}/{{ word }}/familiar role="button">熟悉</a>
-                    <a class="btn btn-warning" href={{ username }}/{{ word }}/unfamiliar role="button">不熟悉</a>
-                    <a class="btn btn-danger" href={{ username }}/{{ word }}/del role="button">删除</a>
+                    <a class="btn btn-success" onclick="updateWordFrequency(this,'{{username}}','{{word}}',-1)" role="button">熟悉</a>
+                    <a class="btn btn-warning" onclick="updateWordFrequency(this,'{{username}}','{{word}}',1)" role="button">不熟悉</a>
+                    <a class="btn btn-danger" onclick="deleteWord(this,'{{username}}','{{word}}')" role="button">删除</a>    
                 </p>
             {% else %}
                 <p class="new-word">
@@ -81,9 +80,9 @@
                     (
                     <a title="{{ word }}">{{ freq }}</a>
                     )
-                    <a class="btn btn-success" href={{ username }}/{{ word }}/familiar role="button">熟悉</a>
-                    <a class="btn btn-warning" href={{ username }}/{{ word }}/unfamiliar role="button">不熟悉</a>
-                    <a class="btn btn-danger" href={{ username }}/{{ word }}/del role="button">删除</a>
+                    <a class="btn btn-success" onclick="updateWordFrequency(this,'{{username}}','{{word}}',-1)" role="button">熟悉</a>
+                    <a class="btn btn-warning" onclick="updateWordFrequency(this,'{{username}}','{{word}}',1)" role="button">不熟悉</a>
+                    <a class="btn btn-danger" onclick="deleteWord(this,'{{username}}','{{word}}')" role="button">删除</a>
                 </p>
             {% endif %}
         {% else %}
@@ -98,6 +97,49 @@
         <script src="{{ js }}"></script>
     {% endfor %}
 {% endif %}
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script>
+        function updateWordFrequency(caller,username,word,difference) {
+            let type = difference<0?'familiar':'unfamiliar'
+
+            //后端更新数据
+            $.ajax({
+                method: 'get',
+                url: '/' + username + '/' + word + '/' + type,
+                async: true,
+                error: function(response) {
+                    alert('操作失败，稍后再试')
+                    location.reload()
+                    caller.scrollIntoView()
+                }
+            })
+
+            //前端更新页面
+            let par = $(caller).parent()
+            let freqEle = par.children().eq(1)
+            let newFreq = parseInt(freqEle.text()) + difference
+
+            if(newFreq <= 0) {
+                par.attr('hidden',true)
+            }
+            freqEle.text(newFreq)
+        }
+
+        function deleteWord(caller,username,word) {
+            $.ajax({
+                method: 'get',
+                url: '/' + username + '/' + word + '/del',
+                async: true,
+                error: function(response) {
+                    alert('操作失败，稍后再试')
+                    location.reload()
+                    caller.scrollIntoView()
+                }
+            })
+            $(caller).parent().attr('hidden',true)
+        }
+    </script>
 </body>
 <style>
     mark {