Fix bug 540

app/templates/userpage_get.html

@@ -59,17 +59,17 @@
     <p><b>English Pal for <font id="username" color="red">{{ username }}</font></b>
 
         {% if username ==  admin_name %}
-        <a class="btn btn-secondary" href="/admin" role="button" onclick="stopRead()">管理</a>
+            <a class="btn btn-secondary" href="/admin" role="button" onclick="stopRead()">管理</a>
         {% endif %}
         <a id="quit" class="btn btn-secondary" href="/logout" role="button" onclick="stopRead()">退出</a>
         <a class="btn btn-secondary" href="/reset" role="button" onclick="stopRead()">重设密码</a>
 
     </p>
     {% for message in get_flashed_messages() %}
-    <div class="alert alert-warning alert-dismissible fade show" role="alert">
+        <div class="alert alert-warning alert-dismissible fade show" role="alert">
-	{{ message }}
+            {{ message }}
-	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-    </div>
+        </div>
     {% endfor %}
 
         <button class="arrow" id="load_next_article" onclick="load_next_article();Reader.stopRead()" title="下一篇 Next Article">⇨</button>
@@ -91,18 +91,20 @@
                 <script type="text/javascript">
                     function toggle_visibility(id) { {# https://css-tricks.com/snippets/javascript/showhide-element/#}
                         const e = document.getElementById(id);
-                        if(e.style.display === 'block')
+                        if (e.style.display === 'block')
                             e.style.display = 'none';
                         else
                             e.style.display = 'block';
                     }
                 </script>
                 <button onclick="toggle_visibility('answer');">ANSWER</button>
-                <div id="answer" style="display:none;">{{ today_article['answer'] }}</div><br/>
+                <div id="answer" style="display:none;">{{ today_article['answer'] }}</div>
+                <br/>
             </div>
         </div>
         <div class="alert alert-success" role="alert" id="not_found" style="display:none;">
-            <p class="text-muted"><span class="badge bg-success">Notes:</span><br>No article is currently available for you. You can try again a few times or mark new words in the passage to improve your level.</p>
+            <p class="text-muted"><span class="badge bg-success">Notes:</span><br>No article is currently available for
+                you. You can try again a few times or mark new words in the passage to improve your level.</p>
         </div>
         <div class="alert alert-success" role="alert" id="read_all" style="display:none;">
             <p class="text-muted"><span class="badge bg-success">Notes:</span><br>You've read all the articles.</p>
@@ -112,6 +114,11 @@
     <input type="checkbox" id="highlightCheckbox" onclick="toggleHighlighting()" />生词高亮
     <input type="checkbox" id="readCheckbox" onclick="onReadClick()" />大声朗读
     <input type="checkbox" id="chooseCheckbox" onclick="onChooseClick()" />划词入库
+    <button onclick="saveArticle()" class="btn btn-primary">标记文章</button>
+    <select id="saved_articles_dropdown" style="height: 50px">
+    <!-- 这里将显示已经保存的文章 -->
+         <option></option>
+    </select>
     <div class="range">
         <div class="field">
             <div class="sliderValue">
@@ -152,9 +159,10 @@
                 {% set freq = x[1] %}
                 {% if session.get('thisWord') == x[0] and session.get('time') == 1 %}
                 {% endif %}
-                <p id='p_{{ word }}' class="new-word" >
+                <p id='p_{{ word }}' class="new-word">
-                    <a id="word_{{ word }}"  class="btn btn-light" href='http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index'
+                    <a id="word_{{ word }}" class="btn btn-light"
-                    role="button">{{ word }}</a>
+                       href='http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index'
+                       role="button">{{ word }}</a>
                     ( <a id="freq_{{ word }}" title="{{ word }}">{{ freq }}</a> )
                     <a class="btn btn-success" onclick="familiar('{{ word }}')" role="button">熟悉</a>
                     <a class="btn btn-warning" onclick="unfamiliar('{{ word }}')" role="button">不熟悉</a>
@@ -226,33 +234,37 @@
         $.ajax({
             url: '/get_next_article/{{username}}',
             dataType: 'json',
-            success: function(data) {
+            success: function (data) {
                 // 更新页面内容
-                if(data['today_article']){
+                if (data['today_article']) {
                     update(data['today_article']);
                     check_pre(data['visited_articles']);
                     check_next(data['result_of_generate_article']);
                 }
+            }, complete: function (xhr, status) {
+                $("#load_next_article").prop("disabled", false)
             }
         });
     }
-    function load_pre_article(){
+
+    function load_pre_article() {
         $.ajax({
             url: '/get_pre_article/{{username}}',
             dataType: 'json',
-            success: function(data) {
+            success: function (data) {
                 // 更新页面内容
-                if(data['today_article']){
+                if (data['today_article']) {
                     update(data['today_article']);
                     check_pre(data['visited_articles']);
                 }
             }
         });
     }
+
     function update(today_article){
         $('#user_level').html(today_article['user_level']);
         $('#text_level').html(today_article["text_level"]);
-        $('#date').html('Article added on: '+today_article["date"]);
+        $('#date').html('Article added on: ' + today_article["date"]);
         $('#article_title').html(today_article["article_title"]);
         $('#article').html(today_article["article_body"]);
         $('#source').html(today_article['source']);
@@ -263,9 +275,10 @@
         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)){
+    function check_pre(visited_articles) {
+        if ((visited_articles == '') || (visited_articles['index'] <= 0)) {
             $('#load_pre_article').hide();
             sessionStorage.setItem('pre_page_button', 'display')
         }else{
@@ -273,20 +286,101 @@
             sessionStorage.setItem('pre_page_button', 'show')
         }
     }
-    function check_next(result_of_generate_article){
+
-        if(result_of_generate_article == "found"){
+    function check_next(result_of_generate_article) {
-            $('#found').show();$('#not_found').hide();
+        if (result_of_generate_article == "found") {
+            $('#found').show();
+            $('#not_found').hide();
             $('#read_all').hide();
-        }else if(result_of_generate_article == "not found"){
+        } else if (result_of_generate_article == "not found") {
             $('#found').hide();
             $('#not_found').show();
             $('#read_all').hide();
-        }else{
+        } else {
             $('#found').hide();
             $('#not_found').hide();
             $('#read_all').show();
         }
     }
+    function saveArticle() {
+    const article = {
+        user_level: document.getElementById('user_level').innerText,
+        text_level: document.getElementById('text_level').innerText,
+        date: document.getElementById('date').innerText.replace('Article added on: ', ''),
+        article_title: document.getElementById('article_title').innerText,
+        article_body: document.getElementById('article').innerText,
+        source: document.getElementById('source').innerText,
+        question: document.getElementById('question').innerText,
+        answer: document.getElementById('answer').innerText
+    };
+
+    const articleJSON = JSON.stringify(article);
+    const articleTitle = article.article_title;
+    const savedArticlesDropdown = document.getElementById('saved_articles_dropdown');
+
+    var option = document.createElement('option');
+    option.text = articleTitle;
+    option.value = articleJSON; // 存储序列化的JSON字符串
+    option.title = article.article_title;
+    savedArticlesDropdown.appendChild(option);
+    localStorage.setItem(articleTitle, articleJSON); // 以文章标题为键，序列化的JSON字符串为值存储
+    alert("文章已标记");
+}
+  function loadSelectedArticle() {
+    const selectedOption = document.getElementById('saved_articles_dropdown');
+    const selectedTitle = selectedOption.options[selectedOption.selectedIndex].text;
+    const articleJSON = localStorage.getItem(selectedTitle);
+
+    if (articleJSON) {
+        const today_article = JSON.parse(articleJSON); // 解析JSON字符串为对象
+        update(today_article); // 使用解析出的对象更新页面
+    }
+}
+
+   window.onload = function() {
+     const savedArticlesDropdown = document.getElementById('saved_articles_dropdown');
+     savedArticlesDropdown.addEventListener('change', loadSelectedArticle);
+
+    // 先清空dropdown，以防有多余的选项或重新加载页面时出现重复
+    savedArticlesDropdown.innerHTML = '';
+
+    // 获取localStorage中最后一个（最新）的键值对
+    let latestKey, latestValue;
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        const value = localStorage.getItem(key);
+        if (!latestKey) { // 第一次迭代时设置最新文章
+            latestKey = key;
+            latestValue = value;
+        }
+    }
+
+    // 首先添加最新保存的文章到下拉菜单
+
+            if (latestKey && latestValue) {
+            var latestOption = document.createElement('option');
+            latestOption.text = latestKey;
+            latestOption.value = latestValue;
+            latestOption.title = latestValue;
+            savedArticlesDropdown.appendChild(latestOption);
+        }
+
+        // 接着遍历其余文章并添加到下拉菜单
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            const value = localStorage.getItem(key);
+            // 确保不重复添加最新文章
+            if (key !== latestKey && key !== 'selectedWords') {
+                var option = document.createElement('option');
+                option.text = key;
+                option.value = value;
+                option.title = value;
+                savedArticlesDropdown.appendChild(option);
+            }
+        }
+
+    savedArticlesDropdown.selectedIndex = -1;
+}
 </script>
 </body>
 <style>

app/test/test_bug540_xiongjiaming.py

@@ -0,0 +1,45 @@
+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)
+    finally:
+        driver.quit()

app/test/test_next_article.py

@@ -0,0 +1,85 @@
+''' Contributed by Lin Junhong et al. 2023-06.'''
+
+from selenium import webdriver
+from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
+
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+from selenium.common.exceptions import UnexpectedAlertPresentException, NoAlertPresentException
+import random, time
+import string
+
+# 初始化webdriver
+# driver = webdriver.Remote('http://localhost:4444/wd/hub', DesiredCapabilities.CHROME)
+# driver.implicitly_wait(10)
+driver = webdriver.Chrome("C:\\Users\\12993\AppData\Local\Programs\Python\Python38\\chromedriver.exe")
+
+
+def test_next_article():
+    try:
+        driver.get("http://118.25.96.118:90")
+        assert 'English Pal -' in driver.page_source
+        # login
+        elem = driver.find_element_by_link_text('登录')
+        elem.click()
+
+        uname = 'abcdefg'
+        password = 'abcdefg'
+        elem = driver.find_element_by_id('username')
+        elem.send_keys(uname)
+
+        elem = driver.find_element_by_id('password')
+        elem.send_keys(password)
+        elem = driver.find_element_by_xpath('/html/body/div/button')  # 找到登录按钮
+        elem.click()
+
+        time.sleep(0.5)
+        assert 'EnglishPal Study Room for ' + uname in driver.title
+        for i in range(50):
+            time.sleep(0.1)
+            # 找到固定按钮
+            elem = driver.find_element_by_xpath('//*[@id="load_next_article"]')
+            elem.click()
+    except Exception as e:
+        print(e)
+
+
+def test_local_next_article():
+    try:
+        driver.get("http://127.0.0.1:5000")
+        assert 'English Pal -' in driver.page_source
+        # login
+        elem = driver.find_element_by_link_text('注册')
+        elem.click()
+
+        uname = 'abcdefg'
+        password = 'abcdefg'
+        elem = driver.find_element_by_id('username')
+        elem.send_keys(uname)
+
+        elem = driver.find_element_by_id('password')
+        elem.send_keys(password)
+
+        elem = driver.find_element_by_id('password2')
+        elem.send_keys(password)
+
+        time.sleep(0.5)
+
+        elem = driver.find_element_by_class_name('btn')  # 找到提交按钮
+        elem.click()
+        time.sleep(0.5)
+        try:
+            WebDriverWait(driver, 1).until(EC.alert_is_present())
+            driver.switch_to.alert.accept()
+        except (UnexpectedAlertPresentException, NoAlertPresentException):
+            pass
+
+        time.sleep(0.5)
+        assert 'EnglishPal Study Room for ' + uname in driver.title
+        for i in range(50):
+            time.sleep(0.1)
+            # 找到固定按钮
+            elem = driver.find_element_by_xpath('//*[@id="load_next_article"]')
+            elem.click()
+    except Exception as e:
+        print(e)