From 19dcad36b4e7e915834d7b5867ec74f2270c3dcb Mon Sep 17 00:00:00 2001
From: xiongjiaming <3190186054@qq.com>
Date: Mon, 20 May 2024 00:00:54 +0800
Subject: [PATCH] Fix bug 540

---
 app/templates/userpage_get.html      | 136 ++++++++++++++++++++++-----
 app/test/test_bug540_xiongjiaming.py |  47 +++++++++
 2 files changed, 160 insertions(+), 23 deletions(-)
 create mode 100644 app/test/test_bug540_xiongjiaming.py
diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html
index 68997ef..39a1c9d 100644
--- a/app/templates/userpage_get.html
+++ b/app/templates/userpage_get.html
@@ -5,6 +5,8 @@
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes"/>
     <meta name="format-detection" content="telephone=no"/>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
 
     {{ yml['header'] | safe }}
     {% if yml['css']['item'] %}
@@ -21,17 +23,45 @@
     <title>EnglishPal Study Room for {{ username }}</title>
 
     <style>
-        .shaking {
-            animation: shakes 1600ms ease-in-out;
-        }
+      .shaking {
+          animation: shakes 1600ms ease-in-out;
+      }
 
-        @keyframes shakes {
-            10%, 90% { transform: translate3d(-1px, 0, 0); }
-            20%, 50% { transform: translate3d(+2px, 0, 0); }
-            30%, 70% { transform: translate3d(-4px, 0, 0); }
-            40%, 60% { transform: translate3d(+4px, 0, 0); }
-            50% { transform: translate3d(-4px, 0, 0); }
-        }
+      @keyframes shakes {
+          10%, 90% { transform: translate3d(-1px, 0, 0); }
+          20%, 50% { transform: translate3d(+2px, 0, 0); }
+          30%, 70% { transform: translate3d(-4px, 0, 0); }
+          40%, 60% { transform: translate3d(+4px, 0, 0); }
+          50% { transform: translate3d(-4px, 0, 0); }
+      }
+
+      .lead{
+          font-size: 22px;
+          font-family: Helvetica, sans-serif;
+          white-space: pre-wrap;
+      }
+
+      .arrow {
+	  padding: 0;
+	  font-size: 20px;
+	  line-height: 21px;
+	  display: inline-block;
+      }
+
+      .arrow:hover {
+	  cursor: pointer;
+      }
+
+      #saved_articles_dropdown {
+        white-space: normal; /* 允许自动换行 */
+    }
+
+      #saved_articles_dropdown option {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%; /* 确保工具提示完全显示 */
+}
     </style>
 </head>
 <body>
@@ -45,22 +75,28 @@
         <a class="btn btn-secondary" href="/reset" role="button" onclick="stopRead()">重设密码</a>
 
     </p>
-{#    {% for message in flashed_messages %}#} {# 根据user_service.userpage,取消了参数flashed_messages，因此注释了这段代码 #}
-{#        <div class="alert alert-warning" role="alert">Congratulations! {{ message }}</div>#}
-{#    {% endfor %}#}
+    {% for message in get_flashed_messages() %}
+    <div class="alert alert-warning alert-dismissible fade show" role="alert">
+	{{ message }}
+	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+    {% endfor %}
 
-        <button class="btn btn-success" id="load_next_article" onclick="load_next_article()"> 下一篇 Next Article </button>
-        <button class="btn btn-success" id="load_pre_article" onclick="load_pre_article()" > 上一篇 Previous Article </button>
+        <button class="arrow" id="load_next_article" onclick="load_next_article();Reader.stopRead()" title="下一篇 Next Article">⇨</button>
+        <button class="arrow" id="load_pre_article" onclick="load_pre_article();Reader.stopRead()" style="display: none" title="上一篇 Previous Article">⇦</button>
 
     <p><b>阅读文章并回答问题</b></p>
     <div id="text-content">
         <div id="found">
-            <div class="alert alert-success" role="alert">According to your word list, your level is <span class="badge bg-success" id="user-level">{{ today_article["user_level"] }}</span>  and we have chosen an article with a difficulty level of <span class="badge bg-success" id="text_level">{{ today_article["text_level"] }}</span> for you.</div>
+            <div class="alert alert-success" role="alert">According to your word list, your level is <span class="text-decoration-underline" id="user_level">{{ today_article["user_level"] }}</span>  and we have chosen an article with a difficulty level of <span class="text-decoration-underline" id="text_level">{{ today_article["text_level"] }}</span> for you.</div>
                 <p class="text-muted" id="date">Article added on: {{ today_article["date"] }}</p><br/>
-            <div class="p-3 mb-2 bg-light text-dark"><br/>
-            <p class="display-5" id="article_title">{{ today_article["article_title"] }}</p><br/>
-            <p class="lead"><font id="article" size=2>{{ today_article["article_body"] }}</font></p><br/>
-            <p><small class="text-muted" id="source">{{ today_article['source'] }}</small></p><br/>
+            <div class="p-3 mb-2 bg-light text-dark" style="margin: 0 0.5%;"><br/>
+            <p class="display-6" id="article_title">{{ today_article["article_title"] }}</p><br/>
+            <p class="lead"><font id="article">{{ today_article["article_body"] }}</font></p><br/>
+            <div>
+                <p><small class="text-muted" id="source">{{ today_article['source'] }}</small></p><br/>
+            </div>
+            
             <p><b id="question">{{ today_article['question'] }}</b></p><br/>
                 <script type="text/javascript">
                     function toggle_visibility(id) { {# https://css-tricks.com/snippets/javascript/showhide-element/#}
@@ -86,6 +122,18 @@
     <input type="checkbox" onclick="toggleHighlighting()" checked/>生词高亮
     <input type="checkbox" onclick="onReadClick()" checked/>大声朗读
     <input type="checkbox" onclick="onChooseClick()" checked/>划词入库
+
+    <button onclick="saveArticle()" class="btn btn-primary">标记文章</button>
+    <select id="saved_articles_dropdown" style="height: 50px">
+    <!-- 这里将显示已经保存的文章 -->
+         <option></option>
+    </select>
+
+</div>
+
+</div>
+
+
     <div class="range">
         <div class="field">
             <div class="sliderValue">
@@ -97,8 +145,8 @@
     <p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>
     <form method="post" action="/{{ username }}/userpage">
         <textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/>
-        <input type="submit" value="把生词加入我的生词库"/>
-        <input type="reset" value="清除"/>
+        <button class="btn btn-primary btn-lg" type="submit" onclick="Reader.stopRead()">把生词加入我的生词库</button>
+        <button class="btn btn-primary btn-lg" type="reset">清除</button>
     </form>
     {% if session.get['thisWord'] %}
         <script type="text/javascript">
@@ -147,6 +195,15 @@
     {% endfor %}
 {% endif %}
 <script type="text/javascript">
+    window.onload = function () { // 页面加载时执行
+        // 刷新页面或进入页面时判断，若不是首篇文章，则上一篇按钮可见
+        if(sessionStorage.getItem('pre_page_button')!="display" && sessionStorage.getItem('pre_page_button')){
+            $('#load_pre_article').show();
+        }
+     };
+
+
+
     function load_next_article(){
         $.ajax({
             url: '/get_next_article/{{username}}',
@@ -175,7 +232,7 @@
         });
     }
     function update(today_article){
-        $('#user-level').html(today_article['user_level']);
+        $('#user_level').html(today_article['user_level']);
         $('#text_level').html(today_article["text_level"]);
         $('#date').html('Article added on: '+today_article["date"]);
         $('#article_title').html(today_article["article_title"]);
@@ -183,13 +240,19 @@
         $('#source').html(today_article['source']);
         $('#question').html(today_article["question"]);
         $('#answer').html(today_article["answer"]);
+        document.querySelector('#text_level').classList.add('mark'); // highlight text difficult level for 2 seconds
+        setTimeout(() => {document.querySelector('#text_level').classList.remove('mark');}, 2000);
+        document.querySelector('#user_level').classList.add('mark'); // do the same thing for user difficulty level
+        setTimeout(() => {document.querySelector('#user_level').classList.remove('mark');}, 2000);
     }
 <!-- 检查是否存在上一篇或下一篇，不存在则对应按钮隐藏-->
     function check_pre(visited_articles){
         if((visited_articles=='')||(visited_articles['index']<=0)){
             $('#load_pre_article').hide();
+            sessionStorage.setItem('pre_page_button', 'display')
         }else{
             $('#load_pre_article').show();
+            sessionStorage.setItem('pre_page_button', 'show')
         }
     }
     function check_next(result_of_generate_article){
@@ -206,6 +269,33 @@
             $('#read_all').show();
         }
     }
+
+   function saveArticle() {
+    const articleTitle = document.getElementById('article_title').innerText; // 获取文章标题
+    const article = document.getElementById('article').innerText; // 获取文章内容
+    const savedArticlesDropdown = document.getElementById('saved_articles_dropdown'); // 获取下拉菜单
+    var option = document.createElement('option'); // 创建一个新的下拉菜单选项
+    option.text = articleTitle; // 将文章标题作为选项文本
+    option.value = article; // 将文章内容作为选项值
+    option.title = article; // 将文章内容作为工具提示内容
+    savedArticlesDropdown.appendChild(option); // 将选项添加到下拉菜单中
+    localStorage.setItem(articleTitle, article) //将标记文章存储到localstorage中
+    alert("文章已标记")
+}
+   window.onload = function() {
+    const savedArticlesDropdown = document.getElementById('saved_articles_dropdown');
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i); // 获取localStorage中的键
+        const value = localStorage.getItem(key); // 获取localStorage中的值
+        // 创建一个新的下拉菜单选项
+        var option = document.createElement('option');
+        option.text = key; // 将文章标题作为选项文本
+        option.value = value; // 将文章内容作为选项值
+        option.title = value; // 将文章内容作为工具提示内容
+        savedArticlesDropdown.appendChild(option); // 将选项添加到下拉菜单中
+    }
+}
+
 </script>
 </body>
 <style>
diff --git a/app/test/test_bug540_xiongjiaming.py b/app/test/test_bug540_xiongjiaming.py
new file mode 100644
index 0000000..3c8e80c
--- /dev/null
+++ b/app/test/test_bug540_xiongjiaming.py
@@ -0,0 +1,47 @@
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+import logging
+
+from helper import signup
+
+def login(driver, home, uname, password):
+    driver.get(home)
+    WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.LINK_TEXT, '登录'))).click()
+    driver.find_element(By.ID, 'username').send_keys(uname)
+    driver.find_element(By.ID, 'password').send_keys(password)
+    driver.find_element(By.XPATH, '//button[text()="登录"]').click()
+    WebDriverWait(driver, 10).until(EC.title_is(f"EnglishPal Study Room for {uname}"))
+
+def logout(driver):
+    WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.LINK_TEXT, '退出'))).click()
+
+# 标记文章
+def collect_article(driver):
+    driver.find_element(By.XPATH, '//button[text()="标记文章"]').click()
+
+def test_collect_article(driver, URL):
+    try:
+        username, password = signup(URL, driver)
+        title = driver.find_element(By.ID, 'article_title').text
+        article = driver.find_element(By.ID, 'article').text
+
+        collect_article(driver)
+        collected_title = driver.execute_script('return localStorage.getItem("articleTitle");')
+        assert title == collected_title, "Unable to add the article to your collection."
+
+        # 退出登录
+        logout(driver)
+
+        # 再次登录并检查收藏状态
+        login(driver, URL, username, password)
+        rechecked_title = driver.execute_script('return localStorage.getItem("articleTitle");')
+        assert title == rechecked_title, "Collected article not found after re-login."
+
+    except Exception as e:
+        # 输出异常信息
+        logging.error(e)
+        # 关闭浏览器
+        driver.quit()
+    finally:
+        driver.quit()
\ No newline at end of file
