EnglishPal/app/static/js/word_operation.js

function familiar(theWord) {
    let username = $("#username").text();
    let word = $("#word_" + theWord).text();
    let freq = $("#freq_" + theWord).text();
    $.ajax({
        type:"GET",
        url:"/" + username + "/" + word + "/familiar",
        success:function(response){
            let new_freq = freq - 1;
            if(new_freq <1) {
                $("#p_" + theWord).remove();
            } else {
                $("#freq_" + theWord).text(new_freq);
            }
            
            // 逐个寻找对应的词汇，词频减一，然后重新排序并渲染
            for (let index = 0; index < wordFrequency.length; index++) {
                const element = wordFrequency[index];
                if (element.word == word) {
                    wordFrequency[index].freq--;
                    if (wordFrequency[index].freq == 0) {
                        removeWord(word);
                    }
                }
            }
            sortWordFrequency();
            renderWords();
        }
    });
}

function unfamiliar(theWord) {
    let username = $("#username").text();
    let word = $("#word_" + theWord).text();
    let freq = $("#freq_" + theWord).text();
    $.ajax({
        type:"GET",
        url:"/" + username + "/" + word + "/unfamiliar",
        success:function(response){
            let new_freq = parseInt(freq) + 1;
            $("#freq_" + theWord).text(new_freq);
            
            // 逐个寻找对应的词汇，词频加一，然后重新排序并渲染
            for (let index = 0; index < wordFrequency.length; index++) {
                const element = wordFrequency[index];
                if (element.word == word) {
                    wordFrequency[index].freq++;
                }
            }
            sortWordFrequency();
            renderWords();
        }
    });
}

function delete_word(theWord) {
    let username = $("#username").text();
    let word = $("#word_" + theWord).text();
    $.ajax({
        type:"GET",
        url:"/" + username + "/" + word + "/del",
        success:function(response){
            $("#p_" + theWord).remove();

            // 删除对应词汇
            removeWord(word);
            sortWordFrequency();
            renderWords();
        }
    });
}


/* 
         * wordFrequency的元素类型为
         * interface Word {
         *   word: string,
         *   freq: number
         * }
         * */
let wordFrequency = [];

/**
 * 初始化词频列表
 */
function init() {
    // 获取所有的词频元素并逐个处理
    const word_elements = document.getElementsByClassName("new-word");
    for (const cur_element of word_elements) {
        const word = cur_element
            .querySelector("a.btn.btn-light[role=button]")  // 获取当前词频元素的词汇元素
            .innerText  // 获取词汇值;
        
        const freq = Number.parseInt(cur_element.querySelector(`#freq_${word}`).innerText);   // 获取词汇的数量

        wordFrequency.push({
            word,
            freq
        });
    }
    renderWords();
}

/**
 * 按照词频排序
 * 词频相同时按照字典顺序排序
 */
function sortWordFrequency() {
    wordFrequency.sort((a, b) => { 
        if (a.freq == b.freq) {
            return a.word == b.word ? 0 : (a.word > b.word ? 1 : -1); 
        }
        return b.freq - a.freq;
    });
}

/**
 * 使用模板将传入的单词转换为相应的HTML字符串
 * @param { interface Word {
 *   word: string,
 *   freq: number,
 * } } word
*/
function wordTemplate(word) {
    // 这个模板应当与 templates/userpage_get.html 中的 <p id='p_${word.word}' class="new-word" > ... </p> 保持一致
    return `<p id='p_${word.word}' class="new-word" >
        <a id="word_${word.word}"  class="btn btn-light" href='http://youdao.com/w/eng/${word.word}/#keyfrom=dict2.index'
           role="button">${word.word}</a>
        ( <a id="freq_${word.word}" title="${word.word}">${word.freq}</a> )
        <a class="btn btn-success" onclick="familiar('${word.word}')" role="button">熟悉</a>
        <a class="btn btn-warning" onclick="unfamiliar('${word.word}')" role="button">不熟悉</a>
        <a class="btn btn-danger" onclick="delete_word('${word.word}')" role="button">删除</a>
    </p>`;
}

/**
 * 将wordFrequency中的单词渲染为一个列表
 * 这个列表将会被放置在一个class为word container的HTML元素中
*/
function renderWords() {
    let container = document.querySelector(".word.container");
    if (!container) {
        // container不存在
        container = document.createElement("div");
        container.className = "word container";
        document.body.appendChild(container);
    }

    container.innerHTML = "";
    for (word of wordFrequency) {
        container.innerHTML += wordTemplate(word);
    }
    // console.log(container.innerHTML);
}

function removeWord(word) {
    wordFrequency = wordFrequency.filter((a) => a.word != word);
}