Task: Build HTML with response

This task replaces the "show-tasks" function with a version that builds the HTML to show the data from the server.

1. Replace the "show_tasks" function with the following code:

async function show_tasks(){

    hide_menu()
    tag("canvas").innerHTML=`
    <div class="page">
        <h2>Daily Tasks</h2>
        <div id="tasks_panel">
        <i class="fas fa-spinner fa-pulse"></i>
        </div>
    </div>
    `
    //retrieve the store data using the local server_request function to request the Google App Script function "get_stores" retrieve the employee data.
    let response=await server_request({
        mode:"get_tasks"
    })

    // Simplified for this example. We should have a better way to choose the store
    const store_id=get_user_data().store[0]

    if(response.status==="success"){
        // html is an array that we'll use to build the HTML to render
        const html=['<table><tr><td>Each of these tasks must be completed each day the store is open.</td></tr>']

        //process through the employee records that were returned and add them to the table.
        let current_group=""
        for(const record of response.records){
            if (current_group !== record.fields.group){
                current_group = record.fields.group
                html.push('</table><br>')
                html.push('<table cellpadding="5"><tr><td colspan="2" style="background-color:white"><span style="color:#800000;font-weight:bold">')
                html.push(current_group)
                html.push('</span></td></tr>')
            }
                console.log(record)
                html.push("<tr><td><b>")
                html.push(record.fields.task)
                html.push(": </b>")
                html.push(record.fields.details)
                html.push(`</td><td id="${record.id}">`)
                html.push(`<button type="button" data-store="${store_id}" id="button-${record.id}" onclick="record_task(this)">Done</button>`)

                html.push("</td></tr>")
        }
        html.push("</table>")

        tag("tasks_panel").innerHTML=html.join("")

    }else{
        tag("tasks_panel").innerHTML="Unable to get store list: " + response.message + "."
    }
}

2. Save the file and choose "Daily Tasks" from the application menu. Notice that the data from Airtable is now rendered in a user-readable format.

build-html

Task: Build HTML with response

Next