# 6 作業

在 `index.js` 檔案中，第一行先放入以下：

```javascript
var user_id = 1; // 自己的座號
```

初始載入時，顯示 loading icon：

```javascript
let ul_el = document.querySelector("ul.task_list");
ul_el.innerHTML = '<li style="text-align: center;"><i class="fas fa-spinner fa-spin fa-3x"></i></li>';
```

## GET: 取得待辦事項列表

<mark style="color:blue;">`GET`</mark> `https://notes.webmix.cc/ajax/teach/api/list.php`

取得待辦事清的清單列表。

#### Path Parameters

| Name                                       | Type   | Description |
| ------------------------------------------ | ------ | ----------- |
| user\_id<mark style="color:red;">\*</mark> | string | 自己的座號，例：1   |

{% tabs %}
{% tab title="200 取得待辦事項的資料。" %}

```javascript
[
  {
    "item_id": "abc",
    "name":"dddda",
    "star":0,
    "sort":1
  },
  {
    "item_id": "abc123",
    "name":"dddd",
    "star":0,
    "sort":1
  }
]
```

{% endtab %}

{% tab title="403 禁止取得待辦事項的list。" %}

```javascript
{
  msg: "denied"
}
```

{% endtab %}
{% endtabs %}

## POST: 新增待辦事項

<mark style="color:green;">`POST`</mark> `https://notes.webmix.cc/ajax/teach/api/add.php`

輸入欲新增的待辦事項。

#### Request Body

| Name                                       | Type   | Description |
| ------------------------------------------ | ------ | ----------- |
| user\_id<mark style="color:red;">\*</mark> | string | 自己的座號，例：1   |
| name<mark style="color:red;">\*</mark>     | string | 待辦事項的文字     |

{% tabs %}
{% tab title="200 回傳新增的待辦事項資料。item\_id:伺服器回傳的待辦事項id。" %}

```javascript
{
  "item_id": "abc123",
  "name":"dddd",
  "star":0,
  "sort":1
}
```

{% endtab %}

{% tab title="403 不正確的方式取得，禁止讀取資料。" %}

```javascript
{
  msg: "denied"
}
```

{% endtab %}
{% endtabs %}

新增資料與顯示資料結果：

{% embed url="<https://youtu.be/SBui7xJSkco>" %}

## DELETE: 移除單筆待辦事項

<mark style="color:red;">`DELETE`</mark> `https://notes.webmix.cc/ajax/teach/api/delete_item.php`

移除單筆待辦事項

#### Request Body

| Name                                       | Type   | Description |
| ------------------------------------------ | ------ | ----------- |
| user\_id<mark style="color:red;">\*</mark> | string | 自己的座號，例：1。  |
| item\_id<mark style="color:red;">\*</mark> | string | 待辦事項的id。    |

{% tabs %}
{% tab title="200 回傳成功訊息(包含資料)，或待辦事項找不到或未定義" %}

```javascript
/* 刪除待辦事項成功 */
{
  "msg":"delete success",
  "data":[
    {
      "item_id":529,
      "name":"as",
      "star":0,"sort":1
    },
    {
      "item_id":376,
      "name":"d1",
      "star":0,"sort":1
    }
  ]
}

/* 待辦事項找不到 */
{
  msg: "item id not found",
}

/* 待辦事項未定義 */
{
  msg: "item id not defined"
}
```

{% endtab %}

{% tab title="403 未使用DELETE或其它原因。" %}

```javascript
{
  msg: "denied"
}
```

{% endtab %}
{% endtabs %}

## DELETE: 清空所有待辦事項

<mark style="color:red;">`DELETE`</mark> `https://notes.webmix.cc/ajax/teach/api/delete_all.php`

清空所有待辦事項。

#### Request Body

| Name                                       | Type   | Description |
| ------------------------------------------ | ------ | ----------- |
| user\_id<mark style="color:red;">\*</mark> | string | 自己的座號，例：1。  |

{% tabs %}
{% tab title="200 清空成功。" %}

```javascript
{
  "msg": "delete all success",
  "data": []
}
```

{% endtab %}
{% endtabs %}

## 星號更新的注意事項

加上以下的 css：

```css
div.star_block{
  display: inline-block;
  position: relative;
}
div.temp_loading{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, .1);
  text-align: center;
  z-index: 2;
  color: white;
}
div.temp_loading > span{
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
```

串接 API 之前，執行：

```javascript
span_el.closest("div.star_block").insertAdjacentHTML("beforeend", '<div class="temp_loading"><span><i class="fas fa-spinner fa-spin"></i></span></div>');
```

串接 API 之後，執行：

```javascript
span_el.closest("div.star_block").querySelector("div.temp_loading").remove();
```

## PATCH: 更新待辦事項的星號

<mark style="color:purple;">`PATCH`</mark> `https://notes.webmix.cc/ajax/teach/api/patch_star.php`

更新待辦事項的星號。

#### Request Body

| Name                                       | Type   | Description |
| ------------------------------------------ | ------ | ----------- |
| user\_id<mark style="color:red;">\*</mark> | string | 自己的座號，例：1。  |
| item\_id<mark style="color:red;">\*</mark> | string | 待辦事項的id。    |
| star<mark style="color:red;">\*</mark>     | string | 星號數字。       |

{% tabs %}
{% tab title="200 回傳的可能訊息：" %}

```javascript
// 更新成功
{
  "msg": "star update success",
  "item_id": "893",
  "star": 2
}

// 未使用正確的 PATCH
{
  "msg": "denied"
}

// user_id 未傳送
{
  "msg": "user_id not defined"
}

// 未傳送 star 或 傳送小於 0
{
  "msg": "star not defined"
}

// item_id 未傳送
{
  "msg": "item_id not defined"
}

// item_id 找不到
{
  "msg": "item_id not found"
}
```

{% endtab %}
{% endtabs %}

## 撰寫排序的注意事項

* 需將排序的 API 部份，寫在另一個函式。
* 在 css 檔的 `article.task_container` 樣式，加上一行：**`position: relative;`** 。

串接 API 之前，執行：

```javascript
let article_el = document.querySelector("article.task_container");
article_el.insertAdjacentHTML("beforeend", '<div class="temp_loading"><span><i class="fas fa-spinner fa-spin fa-5x"></i></span></div>');
```

串接 API 之後，執行：

```javascript
article_el.querySelector("div.temp_loading").remove();
```

## PATCH: 更新待辦事項的排序

<mark style="color:purple;">`PATCH`</mark> `https://notes.webmix.cc/ajax/teach/api/patch_sort.php`

#### Request Body

| Name                                        | Type   | Description |
| ------------------------------------------- | ------ | ----------- |
| user\_id<mark style="color:red;">\*</mark>  | string | 自己的座號，例：1。  |
| item\_id<mark style="color:red;">\*</mark>  | string | 待辦事項id。     |
| direction<mark style="color:red;">\*</mark> | string | up 或 down。  |

{% tabs %}
{% tab title="200 回傳已經排序好的所有資料。" %}

```javascript
{
  "msg":"update sort success",
  "data":[
    {
      "item_id": 878,
      "name": "測試的待辦事項",
      "star": 3,
      "sort": 1
    },
    {
      "item_id": 722,
      "name": "a3",
      "star": 0,
      "sort": 2
    },
    {
      "item_id": 537,
      "name": "a1",
      "star": 0,
      "sort": 3
    }
  ]
}
```

{% endtab %}
{% endtabs %}

## PUT: 更新單筆待辦事項當中，所用者所打的字。

<mark style="color:orange;">`PUT`</mark> `https://notes.webmix.cc/ajax/teach/api/update_item.php`

更新的資料：使用者所打的字。

#### Request Body

| Name                                       | Type   | Description |
| ------------------------------------------ | ------ | ----------- |
| user\_id<mark style="color:red;">\*</mark> | string | 自己的座號，例：1。  |
| item\_id<mark style="color:red;">\*</mark> | string | 待辦事項id。     |
| name<mark style="color:red;">\*</mark>     | string | 待辦事項文字。     |

{% tabs %}
{% tab title="200 回傳的資料" %}

```javascript
{
  "msg": "item update success",
  "item_id": "899",
  "name": "測試的文字"
}
```

{% endtab %}
{% endtabs %}

## 完成示意

{% embed url="<https://youtu.be/BRFzUVFOPjA>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/ajax/4.-zuo-ye.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.