[fix] note渲染与更新

README.md

@@ -2,11 +2,11 @@
 
 Django + MySQL + Pug + JS
 
-- Python 3.7
-- Django 3.0
+- Python 3.7+
+- Django 3
 - Mysql 8
 
-简单录了一个 DEMO 视频，上传到了[B站](https://www.bilibili.com/video/av90579311/)。
+简单录了一个 DEMO 视频，上传到了[B站](https://www.bilibili.com/video/av90579311/)，欢迎康康。
 
 如果觉得还不错的话，不如给个 star✨呗(￣▽￣)~*
 
@@ -46,6 +46,8 @@ git clone https://github.com/Benature/WordReview.git
 
 安装指引请看[这里](doc/install.md)
 
+文档尚不完善，如有问题欢迎[提 issue](https://github.com/Benature/WordReview/issues) 或者私戳我 (●ﾟωﾟ●)
+
 ## 使用
 
 ```shell

apps/review/templates/review.pug

@@ -41,6 +41,8 @@ div.container.flex-column
           div.align-self-center#tmpl-content.d-none.hide
       div.align-self-center.btn-jump#jump-forward »
       div.side-card.justify-content-center
+        div(style="color:grey;text-align:center").hide.d-none 
+          | Note
         textarea#tmpl-note.form-control.hide.d-none
     div.progress-div
       div.progress(style="width:250px; background-color: dodgerblue")

doc/install.md

@@ -1,3 +1,5 @@
+>文档尚不完善，如有问题欢迎[提 issue](https://github.com/Benature/WordReview/issues) 或者私戳我 (●ﾟωﾟ●)
+
 # 1. Python 环境
 
 1. Install `Miniconda` (recommanded) or `Anaconda` at first.
@@ -6,7 +8,7 @@
 >名字随便定，这里以`tgword`为例
 
 ```shell
-conda create -n tgword
+conda create -n tgword python=3
 ```
 
 1. activate the environment
@@ -23,13 +25,21 @@ source activate tgword
 pip install -r requirements.txt
 ```
 
-<b><details><summary>你可能会遇到的问题</summary></b>
+<b><details><summary>你可能会遇到的问题（点开）</summary></b>
 
+- pip 命令不见了
 ```shell
 pip: command not found
 ```
 
 那么请看[这里](https://benature.github.io/python-code/pip-cmd-not-found/)
+
+- 其他你 handle 不了的报错
+  那就退而求其次跑下面这个吧
+
+```shell
+pip install django pypugjs pymysql django-compressor django-sass-processor libsass mysqlclient
+```
 </details>
 
 
@@ -139,11 +149,17 @@ python manage.py migrate
 python manage.py runserver
 ```
 
-3. debug🤦‍♂️  
-然后大概率会报错，因为有个包有问题（实名甩锅），从报错也能看出来
+3. debug 🤦‍♂️  
+然后大概率会报错👇，因为有个包有问题（实名甩锅）
+
+```error
+mysqlclient 1.3.13 or newer is required;
+```
+
+根据自己情况修改`/path/to/xxxconda`部分，修改文件
 
 ```shell
-vim /opt/miniconda3/lib/python3.7/site-packages/django/db/backends/mysql/base.py
+vim /path/to/xxxconda/lib/python3.7/site-packages/django/db/backends/mysql/base.py
 ```
 
 找到下面两行，注释之

static/css/review.css

@@ -87,7 +87,7 @@
 #tmpl-note{
     width: 90%;
     height: 76%;
-    margin: 45px 0px 0px 20px;
+    margin: 22px 0px 0px 20px;
     padding: 10px 10px;
     /* border: 0; */
 }

static/js/review.js

@@ -51,9 +51,9 @@ $(function () {
         // note
         note = data.note;
         if (data.note.length == 0) {
-            $('#tmpl-note').text(word);
+            $('#tmpl-note').val(word);
         } else {
-            $('#tmpl-note').text(note);
+            $('#tmpl-note').val(note);
         }
 
         // 中文释义处理
@@ -182,11 +182,10 @@ $(function () {
         w.panHistory += remember ? '1' : '0';
         w.panTotalNum++;
         w.panRate = w.panForgetNum / w.panTotalNum;
+        w.note = $('#tmpl-note').val();
 
         // echarts 画图
-        console.log(wordCount)
         currentHistoryX.push(wordCount);
-        console.log(currentHistoryX)
         if (wordCount == 1) {
             currentHistoryY[0] = remember ? 1 : -1;
         } else {
@@ -270,15 +269,15 @@ $(function () {
         } else if ($(this).text() == '不认识') {
             remember = false;
         }
-        let note_now = $('#tmpl-note').text();
+        let note_now = $('#tmpl-note').val();
         $.ajax({
             url: '/review/review_a_word',
             type: 'POST',
             data: {
                 remember: remember,
                 word: word,
                 book: book,
-                note: note == note_now ? false : note_now,
+                note: (note == note_now || note_now == word) ? false : note_now,
             }
         }).done(function (response) {
             if (response.status === 200) {
@@ -324,12 +323,12 @@ $(function () {
                 display = true;
             }
         }
+        renderWord(wordArray[wordIndex]);
         if (display) {
             $('.hide').removeClass('d-none');
         } else {
             $('.hide').addClass('d-none');
         }
-        renderWord(wordArray[wordIndex]);
     })
     $('#btn-quick-jump').on('click', function (e) {
         let i = parseInt($('#jump-index').val());