> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/ajax/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/ajax/4.-zuo-ye.md).

# 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>" %}