上一篇中我們已經可以將左邊的未完成清單移動到右邊的已完成清單，
也可以將已完成清單返回到未完成清單。
這一篇中我們要來接著完成資料的狀態

已完成餐點(狀態變更)

當老闆完成餐點的時候會點選checkbox表示已經完成了，
所以我們要在chekbox中加入事件，將完成的資訊給記錄下來。

1. 打開 Proprietor.cshtml
2. 修改 undo_order_item()

function undo_order_item(h_id, b_id, item, count) {
    cb_id =`cb_${h_id}_${b_id}`
    item_html =`
<label for='${cb_id}' id='for${cb_id}' class="list-group-item list-group-item-primary">
 
<input id='${cb_id}' class="form-check-input me-1" type="checkbox" name="item_checkbox" value="">
${item} * ${count}
</label>
`
    return item_html
}

將表頭的id 跟餐點的id傳入寫在checkbox的id中，
另外給checkboxname。
3. 給chekbox新增change事件

$('#undo_list').on("change", 'input[name="item_checkbox"]', function () {
        //取得表頭 & 表身 id
        var h_uid = $(this).attr("id").split("_")[1]
        var b_uid = $(this).attr("id").split("_")[2]
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        //修改狀態
        var selectOrder = undo_data.find(order => order.head.uid == h_uid)
        var selectItem = selectOrder.bodys.find(item => item.uid == b_uid)
        selectItem.itemDone = $(this).prop('checked')
        localStorage.setItem("undo_data", JSON.stringify(undo_data))
        
    })

修改訂單狀態

在上一篇中我們已經完成訂單的畫面更動，
只需要分別在按下完成與返回按鍵的時候修改狀態即可

//按下完成時
item.head.orderDone = true
//按下返回時
item.head.orderDone = false

完整 完成click事件:

$('#undo_list').on("click", 'button[name="done_btn"]', function () {
        var uid = $(this).attr("id").replace("_btn", "")
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var done_data = JSON.parse(localStorage.getItem("done_data"))
        undo_data.forEach((item,index) => {
            if (item.head.uid == uid) {
                item.head.orderDone = true
                done_order(item.head, item.bodys)
                if (done_data[0] == null) {
                    done_data[0] = item
                } else {
                    done_data[done_data.length] = item
                }
                $(`#${uid}_li`).remove()
                undo_data.splice(index, 1)
                localStorage.setItem("done_data", JSON.stringify(done_data))
                localStorage.setItem("undo_data", JSON.stringify(undo_data))
            }
        })

    });

完整 返回click事件:

('#done_list').on("click", 'button[name="itemback_btn"]', function () {
        var uid = $(this).attr("id").replace("btn", "")
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var done_data = JSON.parse(localStorage.getItem("done_data"))
        done_data.forEach((item, index) => {
            if (item.head.uid == uid) {
                item.head.orderDone = false
                undo_order(item.head, item.bodys)
                undo_data[undo_data.length] = item
                $(`#${uid}_div`).remove()
                done_data.splice(index, 1)
                localStorage.setItem("done_data", JSON.stringify(done_data))
                localStorage.setItem("undo_data", JSON.stringify(undo_data))
            }
        })

    });

結語

這兩篇中，我們主要是將前端發生事件時將資訊記錄下來。
下一篇我們會開始運用儲存下來的資訊回饋到畫面上，
和把記錄下來的資訊與資料庫同步。