[나만의 단어장] 12. 숙제 - 예문 저장 & 삭제 기능 만들기

1. “status_give = old” 일 때만 예문 작성 칸 띄우기
2. input 박스에 입력된 예문이 해당 단어를 포함하고 있는지 확인
3. 있으면 DB의 examples 컬렉션에 예문 저장.
4. 예문들 중에서 해당 단어에 관한 것만 찾아와서 보여주는 함수를 만들어
5. 페이지 로딩 시, 새 예문 저장 시, 기존 예문 삭제 시 함수 실행.
6. 예문 삭제 시 여러 예문 중 어떤 것인지 구분을 하기 위해 각 줄에 id 부여
7. 단어 삭제 시 해당 예문들도 같이 지워줌.

  {% if status=="old" %} <!-- status가 old이면 -->
      <div id="examples" class="container"> // <!-- 예문 div 표현 -->
          <h3 style="text-align: center;margin-bottom:1rem">Write your own sentences!</h3>
          <ul id="example-list">
              <li id="ex-0">This sentence contains the word 'word'.&nbsp;&nbsp;&nbsp;<a
                      href="javascript:delete_ex(0)">delete</a></li>
              <li id="ex-1">I don't like using the MS Word program.&nbsp;&nbsp;&nbsp;<a
                      href="javascript:delete_ex(1)">delete</a></li>
          </ul>
          <div class="d-flex justify-content-between" style="margin-left:20px;">
              <input id="new-example" class="form-control form-control-sm" style="margin-right: 0.5rem">
              <button class="btn btn-outline-secondary btn-sm" onclick="add_ex()">add</button> <!-- add 버튼 클릭하면 add_ex() 함수 호출 -->
          </div>
      </div>
  {% endif %}

@app.route('/api/get_examples', methods=['GET'])
def get_exs():
#예문 가져오기
    word_receive = request.args.get("word_give") 
    result = list(db.examples.find({"word": word_receive}, {'_id': 0}))
    print(word_receive, len(result))

    return jsonify({'result': 'success', 'examples': result})

@app.route('/api/save_ex', methods=['POST'])
def save_ex():
#예문 저장하기
    word_receive = request.form['word_give'] #word_receive 라는 이름으로 word_give를 받음
    example_receive = request.form['example_give'] #example_receive 라는 이름으로 example_give를 받음
    doc = {"word": word_receive, "example": example_receive} #도큐먼트에 저장
    db.examples.insert_one(doc) #도큐먼트를 db의 examples 컬렉션에 저장
    return jsonify({'result': 'success', 'msg': f'example "{example_receive}" saved'})

@app.route('/api/delete_ex', methods=['POST'])
def delete_ex():
#예문 삭제하기
    word_receive = request.form['word_give'] #word_recive 라는 이름으로 word_give를 받음
    number_receive = int(request.form["number_give"]) #number_receive 라는 이름으로 number_give를 정수형으로 받음
    example = list(db.examples.find({"word": word_receive}))[number_receive]["example"] 
		#example은 db의 examples 컬렉션에서 word에 해당하는 예문 리스트 중 number_receive 번째 example 문장.
    print(word_receive, example)
    db.examples.delete_one({"word": word_receive, "example": example}) 
    return jsonify({'result': 'success', 'msg': f'example #{number_receive} of "{word_receive}" deleted'})

  function get_examples() {
      $("#example-list").empty()
      $.ajax({
          type: "GET",
          url: `/api/get_examples?word_give=${word}`,
          data: {},
          success: function (response) {
              let examples = response["examples"];
              for (let i = 0; i < examples.length; i++) {
                  let example = examples[i]["example"];
                  console.log(example)
                  let html_temp = `<li id="ex-${i}">${example}&nbsp;&nbsp;&nbsp;<a
                  href="javascript:delete_ex(${i})">delete</a></li>`
                  $("#example-list").append(html_temp)
              }
          }
      });
  }

  function add_ex() { //단어를 저장하는 add_ex 함수
      let new_ex = $('#new-example').val(); //new_ex라고 new-example input 박스 선언
      if (!new_ex.toLowerCase().includes(word.toLowerCase())) { //만약 소문자로 이루어진 new_ex값이 소문자로만 이루어진 word 단어를 포함하지 않으면 
          alert(`the word '${word}' is not included.`); // 예문에 단어를 포함시켜달라는 alret 띄우기
          return; //리턴하여 멈추기
      }
      console.log(new_ex) 
      $.ajax({
          type: "POST",
          url: `/api/save_ex`,
          data: {
              word_give: word, 
              example_give: new_ex
          }, // 단어와 예문 주기
          success: function (response) { //성공하면
              get_examples(); //get_examples 함수를 호출해서 예문을 가져오고
              $('#new-example').val(""); //new-example input 박스는 비워줌.
          }
      });

  }

  function delete_ex(i) {
      console.log("deleting", i)
      $.ajax({
          type: "POST",
          url: `/api/delete_ex`,
          data: {
              word_give: word,
              number_give: i
          },
          success: function (response) {
              get_examples()
          }
      });
  }

//status가 old일 경우에만 예문들을 가져와서 보여줌 
$(document).ready(function () { 
    {% if status=="old" %}
        get_examples()
    {% endif %}