#include "FiveWin.ch"
static csend2js := "send from Harbour"
static oWebView
function Main()
local hPost := {}
oWebView := TWebView():New( 1, )
oWebView:bOnBind = { | cJson, cCalls | hb_jsondecode( cJson, @hPost ), fromjavascirpt(hPost) , ;
oWebView:Return( cCalls, 0, "{ 'result': '" + csend2js + "' }" ) }
oWebView:Bind( "SendToFWH" )
oWebView:Navigate( Html() )
oWebView:SetTitle( "This is Fivewin 2024" )
Sleep( 200 )
fromjavascirpt(hPost)
oWebView:Run()
oWebView:Destroy()
return nil
//----------------------------------------------------------------------------//
function fromjavascirpt(hPost)
local hTemp, aTemp
local hTemp2
if len(hPost)= 0
oWebView:SetSize( 1260, 800 )
else
aTemp := hPost[3]
hTemp := aTemp['param1']
csend2js := "gelesen in FWH " + time()
if hTemp['btn'] = 'read-btn'
? hTemp['demotext']
endif
if hTemp['btn'] = 'add-btn'
csend2js := "time from FWH" + time() + ":"
endif
endif
return nil
//----------------------------------------------------------------------------//
function Html()
local cHtml, cJson, hPost
TEXT INTO cHtml
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display JSON Data</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.json-table {
width: 100%;
border-collapse: collapse;
}
.json-table th, .json-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.json-table thead {
background-color: black;
color: white;
position: sticky;
top: 0;
z-index: 100;
}
.json-key {
width: 30%;
font-weight: bold;
}
.json-value {
width: 70%;
font-size: 1.8em; /* Größere Schriftgröße für Werte */
color: blue; /* Farbe für Werte */
}
.container {
max-height: 80vh; /* 80% der Höhe des Ansichtsfensters */
overflow-y: auto;
}
.json-table tr:hover {
background-color: orange; /* Farbe beim Hover */
}
</style>
</head>
<body>
<div class="container mt-4">
<div id="json-container"></div>
</div>
<script>
$(document).ready(function() {
const jsonData = {
"numRows": 1182,
"numPages": 591,
"totalQuantity": 306361,
"data": [
{
"uprid": "543",
"productId": 543,
"stockId": -1,
"referenceId": 0,
"isBundle": 0,
"bundledProducts": [],
"status": 1,
"quantity": "400",
"maximumQuantity": null,
"ean": "",
"sku": "",
"model": "BCWU03W",
"hsCode": null,
"name": "#Hoodie",
"price": "13.4280",
"taxClassId": "3",
"taxRate": "21.0000",
"isPhysical": "1",
"isDigital": "0",
"isQuotation": "1",
"url": "promotiekledingsweaterssweaters-met-kaphoodie",
"urlAbs": "https:www.maveco-webshop.bepromotiekledingsweaterssweaters-met-kaphoodie",
"attributesString": "",
"backOrder": 0,
"onHome": 0,
"layover": 1,
"configurationAllowCheckout": 1,
"configurationStockCheck": 0,
"name": "#Hoodie",
"price": "13.4280",
"taxClassId": "3",
"taxRate": "21.0000",
"isPhysical": "1",
"isDigital": "0",
"isQuotation": "1",
"url": "promotiekledingsweaterssweaters-met-kaphoodie",
"urlAbs": "https:www.maveco-webshop.bepromotiekledingsweaterssweaters-met-kaphoodie",
"attributesString": "",
"backOrder": 0,
"onHome": 0,
"layover": 1,
"configurationAllowCheckout": 1,
"configurationStockCheck": 0,
"attributes": [],
"description": "Uniseks <br> French Terry <br> Lange mouwen <br> Hooded <br> Regular fit <br> Voorgekrompen ringgesponnen katoen <br> Zijnaden <br> Gemakkelijke branding: geen B&C label <br> Binnenkant Single Jersey halfmoon in rug <br> Ongeborstelde stof <br> Sterke stof <br> Zacht handgevoel <br> Glad en gelijkmatig oppervlak <br> In zijnaad: Zacht satijnlabel",
"addonInstagramEnabled": "0",
"addonInstagram": "0",
"addonOcsEnabled": "0",
"dateAdded": "0000-00-00 00:00:00",
"lastModified": "2020-09-11 16:41:37",
"descriptions": {
"description": "Uniseks <br> French Terry <br> Lange mouwen <br> Hooded <br> Regular fit <br> Voorgekrompen ringgesponnen katoen <br> Zijnaden <br> Gemakkelijke branding: geen B&C label <br> Binnenkant Single Jersey halfmoon in rug <br> Ongeborstelde stof <br> Sterke stof <br> Zacht handgevoel <br> Glad en gelijkmatig oppervlak <br> In zijnaad: Zacht satijnlabel",
"extra": "",
"intro": " 280 gm" },
},
]
};
const container = $('#json-container');
jsonData.data.forEach(item => {
const table = $('<table class="json-table"></table>');
const thead = $('<thead><tr><th>Key</th><th>Value</th></tr></thead>');
table.append(thead);
for (const key in item) {
if (item.hasOwnProperty(key)) {
const row = $(`<tr><td class="json-key">${key}</td><td class="json-value">${item[key]}</td></tr>`);
row.click(function() {
alert(`Key: ${key}, Value: ${item[key]}`);
});
table.append(row);
}
}
container.append(table);
});
});
</script>
</body>
</html>
ENDTEXT
//memowrit("c:\fwh2023\samples\log.html", cHtml)
cHtml := STRTRAN(cHtml, CRLF, '')
cHtml := URLEncode( ALLTRIM( cHtml ) )
return cHtml
//----------------------------------------------------------------------------//
FUNCTION URLEncode(cString)
LOCAL cEncodedString := ""
LOCAL nLen := LEN(cString)
LOCAL nAscii, nPos
FOR nPos = 1 TO nLen
nAscii := ASC(SUBSTR(cString, nPos, 1))
DO CASE
CASE nAscii >= 48 .AND. nAscii <= 57 // 0-9
cEncodedString += CHR(nAscii)
CASE nAscii >= 65 .AND. nAscii <= 90 // A-Z
cEncodedString += CHR(nAscii)
CASE nAscii >= 97 .AND. nAscii <= 122 // a-z
cEncodedString += CHR(nAscii)
CASE nAscii == 45 .OR. nAscii == 46 .OR. nAscii == 95 .OR. nAscii == 126 // - . _ ~
cEncodedString += CHR(nAscii)
CASE nAscii == 10
cEncodedString += "%0A"
OTHERWISE
cEncodedString += "%" + NumToHex(nAscii, 2)
ENDCASE
NEXT
cEncodedString := "data:text/html, " + cEncodedString
RETURN cEncodedString
//----------------------------------------------------------------------------//