iT邦幫忙

2021 iThome 鐵人賽

DAY 29
3
自我挑戰組

【Side Project】 系列 第 29

【Side Project】 (老闆)訂單清單-未完成餐點提示

原本程式的部分打算到上一篇就結束了,
不過有小夥伴問到如何在更改狀態的同時<span>中的數字也跟著改變。
所以我們這篇來說如何動態更改<span>中的數字。
首先,我們先來整理有哪些時候會產生(更改)未完成餐點的數字

  1. 建立訂單的時候 undo_order()
  2. 修改餐點狀態的時候 $('#undo_list').on("change", 'input[name="item_checkbox"]')

動態修改未完成餐點數量

  1. 打開 Proprietor.cshtml
  2. <span>一個id
<span class="badge bg-danger rounded-pill text-white " id="${uid}_span">${count}</span>

這樣方便之後搜尋使用
3. undo_order()中加入以下程式碼

//取得未完成數量
var undo_count = bodys.filter(item => !item.itemDone).length
        //更變數字
        $(`#${uid}_span`).text(undo_count)
        //如果數字為0變成綠色 其餘都是紅色
        if (undo_count == 0) {
            $(`#${uid}_span`).removeClass("bg-danger")
            $(`#${uid}_span`).addClass("bg-success")

        } else {
            $(`#${uid}_span`).removeClass("bg-success")
            $(`#${uid}_span`).addClass("bg-danger")
        }

undo_order()完整程式碼:

function undo_order(head, bodys) {
        var formNum = head.formnum
        var count = bodys.length
        var uid = head.uid
        var html_text = `
<li id="${uid}_li" class="list-group-item  justify-content-between align-items-center list-group-item-success">
    <table id="${uid}_table" class="table table-borderless list-group-item-success">
        <thead>
            <tr>
                <th>
                    訂單編號 ${formNum}
                    <span class="badge bg-danger rounded-pill text-white " id="${uid}_span">${count}</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="list-group item_list">

                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <button id="${uid}_btn" name="done_btn" type="button" class="btn btn-success">
                        完成
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
</li>
`
        $('#undo_list').append(html_text)
        var undo_count = bodys.filter(item => !item.itemDone).length
        $(`#${uid}_span`).text(undo_count)
        if (undo_count == 0) {
            $(`#${uid}_span`).removeClass("bg-danger")
            $(`#${uid}_span`).addClass("bg-success")

        } else {
            $(`#${uid}_span`).removeClass("bg-success")
            $(`#${uid}_span`).addClass("bg-danger")
        }
        bodys.forEach((item) => {
            var item_html = undo_order_item(head.uid,item.uid,item.item, item.count)
            var selector = `#${uid}_table>tbody>tr>td>div`

            $(selector).append(item_html)
            cb_id = `cb_${head.uid}_${item.uid}`
            $(`#${cb_id}`).prop('checked', item.itemDone)
        }
        )

    }
  1. 修改 餐點旁checkbox中onchange事件
    加入以下程式碼:
//變色
        var undo_count = selectOrder.bodys.filter(item => !item.itemDone).length
        $(`#${h_uid}_span`).text(undo_count)
        if (undo_count == 0) {
            $(`#${h_uid}_span`).removeClass("bg-danger")
            $(`#${h_uid}_span`).addClass("bg-success")

        } else {
            $(`#${h_uid}_span`).removeClass("bg-success")
            $(`#${h_uid}_span`).addClass("bg-danger")
        }

完整checkbox事件

$('#undo_list').on("change", 'input[name="item_checkbox"]', function () {
        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')
        //變色
        var undo_count = selectOrder.bodys.filter(item => !item.itemDone).length
        $(`#${h_uid}_span`).text(undo_count)
        if (undo_count == 0) {
            $(`#${h_uid}_span`).removeClass("bg-danger")
            $(`#${h_uid}_span`).addClass("bg-success")

        } else {
            $(`#${h_uid}_span`).removeClass("bg-success")
            $(`#${h_uid}_span`).addClass("bg-danger")
        }
        
        localStorage.setItem("undo_data", JSON.stringify(undo_data))

    });
  1. 成果
    https://i.imgur.com/Wk8E9rv.gif

結語

還差一些驗證的問題外,程式的部分差不多到這邊就結束了。
剩下的就是一些美工、架站的問題了。
在之後還有時間的話,會再把後續的處理再補上。


上一篇
【Side Project】 (老闆)訂單清單-與資料庫交換資料
下一篇
【Side Project】 賽後檢討
系列文
【Side Project】 30

1 則留言

0
wesleybabytw
iT邦新手 5 級 ‧ 2021-11-08 11:33:30

執行後數字未異動亦無法變色...

kyminjob iT邦新手 5 級 ‧ 2021-11-09 17:04:32 檢舉

可能要查一下元素的id是否有匹配上

一樣是修正第二十一篇就正常了

我要留言

立即登入留言