Ads

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Address Delivery Sticker</title>
    <style>
        /* For screen */
        canvas {
            border: 1px solid black;
        }

        /* For printing */
        @media print {
            @page {
                size: landscape;
                margin: 0;
            }

            canvas {
                width: 250mm;
                /* physical printed width */
                height: 180mm;
                /* printed height */
                display: block;
                margin: auto;
            }
        }
    </style>
</head>

<body>
    <form id="form_">
        TO: <input type="text" name="to"> <br>
        Store Code: <input type="text" name="store_code"> <br>
        Store Name: <input type="text" name="store_name"> <br>
        File Name: <select name="file_name">
            <option value="DMO">DMO</option>
            <option value="DMC">DMC</option>
            <option value="DDR">DDR</option>
            <option value="SCB_SRD">SCB/SRD</option>
            <option value="BY_HAND_QUALITY_ISSUE_DMQ">BY HAND - QUALITY ISSUE (DMQ)</option>
            <option value="DMW">DMW</option>
            <option value="DMN">DMN</option>
            <option value="DMP">DMP</option>
            <option value="RETURNABLE_SKUs">RETURNABLE SKUs</option>
        </select> <br>
        <!-- DMO, DMC, DDR, SCB/SRD, BY HAND - QUALITY ISSUE (DMQ), DMW, DMN, DMP, RETURNABLE SKUs -->
        DM File Date: <input type="date" name="dm_file_date"> <br>
        Total Cartons: <input type="number" name="total_cartons"> <br>
        Remarks: <textarea name="remarks"></textarea> <br>
        <input type="submit" value="Generate">
        <div id="printArea" style="display:none"></div>
    </form>
    <canvas id="canvas_" style="border:1px solid #000000;"></canvas>
    <script>
        const form_ = document.getElementById("form_")
        const canvas_ = document.getElementById("canvas_")
        const printArea_ = document.getElementById("printArea")
        const ctx = canvas_.getContext("2d");
        //premake_delivery_sticker(ctx);
        ctx.fillText("Address Delivery Sticker", 10, 10);


        //generate sticker on submit
        form_.addEventListener('submit', (e) => {
            e.preventDefault();
            // console.log("Submitted")
            // console.log(form_.to.value)
            //print canvas
            const dataURL = canvas_.toDataURL("image/png");
            printArea_.innerHTML = `<img src="${dataURL}">`;
            printArea_.style.display = "block";
            form_.style.display = "none";
            window.print();
            // Hide again after printing
            printArea_.style.display = "none";
            form_.style.display = "block";
        })
    </script>
</body>

</html>