Page 1 of 1

PWA - Live Preview

PostPosted: Thu Jun 06, 2024 12:35 pm
by Otto
Hello friends,

After many of you have been wondering how a Harbour application works on a mobile device,
I am uploading a PWA for testing on the modharbour.club server.

Here is a guide on how to install the PWA on a mobile device.
Open this link with Google Chrome:

https://www.modharbour.club//v2order/index.html

Once the page has loaded, add it to the home screen.

In the Google Chrome menu bar (button to the right of the address bar)

Click on the three dots

Add to Home Screen

I would appreciate your feedback.

Best regards,
Otto

Image

Re: PWA - Live Preview

PostPosted: Thu Jun 06, 2024 1:51 pm
by csincuir
Excellent work Otto!
I tried it with my cell phone and it works like a phone app.
As a test, I put a letter in quantity, and I save the record with quantity zero 0, just so you keep it in mind.

Best regards.

Carlos

Re: PWA - Live Preview

PostPosted: Thu Jun 06, 2024 9:31 pm
by Otto
Hello Carlos,
I added export to EXCEL. Interesting seeing this on a smartphone.
Best regards,
Otto

Code: Select all  Expand view
function main()

local cHtml := ''
local cUrl      := mh_GetUri()

logline(" <H>", dtoc(date() ) + "-" + time() )
   
    //  Autentication ----------
   
    if Empty( GetSession() )
    AP_HeadersOutSet( "Location", cUrl )
   
    TEMPLATE PARAMS cUrl
    <script>
        location.replace("<?prg return cUrl ?>")
       
    </script>
    ENDTEXT
   
    retu nil   
   
    endif
   
   
    //  ------------------------   
   
    //  Open dbf
   
    cAlias := OpenData()
   
    if empty( cAlias )
    ? 'Error Opendata'
    retu
    endif  
   
   
    //  Show data
   
   
    TEXT TO cHtml
   
    <head>
        <title>App Order</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">     
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
       
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
       
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
       
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
       
       
        <link rel="stylesheet" href="./assets/bootstrap.css">
       
       
       
    </head> 
   
    <body>
        <div class="container mt-4">
            <h3>List</h3>
            <hr>
           
            <table id="tableId" class="table table-bordered">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>IP</th>
                        <th>Car</th>
                        <th>Qty</th>
                    </tr>
                </thead>
                <tbody>
                    ENDTEXT
                   
                    while (cAlias)->( !Eof() )
                   
                    logline("table row ",str(recno()) + "-"  + (cAlias)->user )
                   
                    cHtml += '<tr>'
                        cHtml += '<td>' + (cAlias)->user + '</td>'
                        cHtml += '<td>' + Dtoc( (cAlias)->date ) + '</td>'
                        cHtml += '<td>' + (cAlias)->time + '</td>'
                        cHtml += '<td>' + (cAlias)->ip + '</td>'
                        cHtml += '<td>' + (cAlias)->car + '</td>'
                        cHtml += '<td>' + str( (cAlias)->qty ) + '</td>'
                        cHtml += '</tr>'                                           
                       
                        (cAlias)->( DbSkip() )
                        end
                       
                        cHtml += '</tbody></table>'
                       
                        cHtml += '<br>'
                        ?? cHtml       
                       
                        TEMPLATE PARAMS cUrl
                        <div class="d-flex gap-2">
                            <a href="<?prg return cUrl ?>menu.prg" class="btn btn-primary">Menu</a>
                            <a href="<?prg return cUrl ?>exit.prg" class="btn btn-secondary">Exit</a>
                            <button class="btn btn-pill btn-warning" onclick="exportToExcel('tableId', 'data.xlsx')">Export to Excel</button>
                           
                        </div>
                       
                    </div>
                   
                    <script>
                        function exportToExcel(tableID, filename = '') {
                            var wb = XLSX.utils.table_to_book(document.getElementById(tableID), {sheet: "Sheet1"});
                            XLSX.writeFile(wb, filename || 'ExportedData.xlsx');
                        }
                    </script>
                   
                   
                   
                </body>
                ENDTEXT
               
                retu nil
               
                {% MemoRead( hb_GetEnv( "PRGPATH" ) + "/public.prg" ) %}
               
                //-------------------------------------------------------------------------------------//
               
                {% MemoRead( hb_GetEnv( "PRGPATH" ) + "/sessions.prg" ) %}
               
                //-------------------------------------------------------------------------------------//
               
                {% MemoRead( hb_GetEnv( "PRGPATH" ) + "/LOGLINE" ) %}
               
                //-------------------------------------------------------------------------------------//