accordion and webview2

Post Reply
User avatar
Otto
Posts: 6403
Joined: Fri Oct 07, 2005 7:07 pm
Has thanked: 24 times
Been thanked: 2 times
Contact:

accordion and webview2

Post by Otto »

Hello friends,

I have done some tests with accordion and webview2.

I need some help.
With which function do we encode the URI from Fivewin into HTML?
Calling the html works.
oWebView:Navigate( "C:\fwh2023\samples\Untitled-1.html" )

Also if I insert an URI encoded cHTML source.
oWebView:Navigate( Html() )

I need the FIVEWIN function to encodeURI.


Also, the line: oWebView:SetSize( 1960, 800 )
is not respected.

Best regards,
Otto
Image

Code: Select all | Expand

#include "FiveWin.ch"

//----------------------------------------------------------------------------//

static csend2js := "send from Harbour"
static oWebView

function Main()

 
local hPost

    // oWebView := TWebView():New()
    //enable and open the developer tools (F12)
    oWebView := TWebView():New( 1, )    
    //  oWebView:Center()
    
    oWebView:SetSize( 1960, 800 )
    
    oWebView:bOnBind = { | cJson, cCalls | hb_jsondecode( cJson, @hPost ), fromjavascirpt(hPost) ,   ;
                                                oWebView:Return( cCalls, 0, "{ 'result': '" + csend2js + "'  }" ) }
  
    oWebView:Bind( "SendToFWH" )
  
  //oWebView:Navigate( "C:\fwh2023\samples\Untitled-1.html" )
  
  
   oWebView:Navigate( Html() )
  
  
  oWebView:SetTitle( "This is Fivewin 2024" )
  
  Sleep( 200 )
   
  oWebView:Run()
 
  oWebView:Destroy()
  
return nil
//----------------------------------------------------------------------------//
  
  function fromjavascirpt(hPost)
  local hTemp, aTemp
  aTemp := hPost[3]
  hTemp :=  aTemp['param1']
  
 // ? hTemp['text'] 
  csend2js := "gelesen in FWH " + time()
  
  if hTemp['btn'] = 'read-btn'
    msginfo(  hTemp['text'], "FWH" )
  endif
  
   if hTemp['btn'] = 'add-btn'
     csend2js := "Add button clicked - time from FWH" + time() + ":"
  endif
  
  
   oWebView:Center()
  
  
  
  return nil
  //----------------------------------------------------------------------------//
  
  function Html()
  local cHtml
  
  
  TEXT INTO cHtml
  data:text/html,  
  
  %0A%3Chead%3E%0A%20%20%3Cmeta%20charset%3D%22UTF-8%22%3E%0A%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%20%20%3Ctitle%3ETischplan%3C%2Ftitle%3E%0A%20%20%3C!--%20Bootstrap%20CSS%20--%3E%0A%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.3.0%2Fdist%2Fcss%2Fbootstrap.min.css%22%3E%0A%20%20%3C!--%20jQuery%20--%3E%0A%20%20%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.5.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%20%20%3C!--%20jQuery%20UI%20--%3E%0A%20%20%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjqueryui%2F1.12.1%2Fjquery-ui.min.js%22%3E%3C%2Fscript%3E%0A%20%20%3C!--%20Bootstrap%20JS%20--%3E%0A%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.3.0%2Fdist%2Fjs%2Fbootstrap.bundle.min.js%22%3E%3C%2Fscript%3E%0A%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Ffont-awesome%2F6.0.0-beta3%2Fcss%2Fall.min.css%22%20%2F%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20.navbar%20%7B%0A%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20justify-content%3A%20space-between%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20.navbar-nav%20%7B%0A%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20flex-direction%3A%20row%3B%0A%20%20%20%20%7D%0A%20%20%3C%2Fstyle%3E%20%20%20%20%0A%20%20%3Cnav%20class%3D%22navbar%22%3E%0A%20%20%20%20%3Cul%20class%3D%22navbar-nav%22%3E%0A%20%20%20%20%20%20%3Cform%20class%3D%22d-flex%22%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20class%3D%22form-control%20me-2%22%20type%3D%22search%22%20placeholder%3D%22Search%22%20aria-label%3D%22Search%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-outline-success%22%20type%3D%22submit%22%3ESearch%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fform%3E%0A%20%20%20%20%20%20%3Cli%20class%3D%22nav-item%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20id%3D%22add-btn%22%20class%3D%22btn%20btn-outline-success%22%20%3EAdd%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%3Cli%20class%3D%22nav-item%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20id%3D%22read-btn%22%20class%3D%22btn%20btn-outline-success%22%3ERead%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%3Cli%20class%3D%22nav-item%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20id%3D%22edit-btn%22%20class%3D%22btn%20btn-outline-success%22%20%3EEdit%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%3Cli%20class%3D%22nav-item%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20id%3D%22delete-btn%22%20class%3D%22btn%20btn-outline-success%22%3EDelete%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%20%20%3C%2Fnav%3E%0A%20%20%3Cdiv%20class%3D%22container%20mt-5%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22accordion%22%20id%3D%22accordionExample%22%3E%0A%20%20%20%20%20%20%3C!--%20Accordion%20item%201%20--%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22accordion-item%22%3E%0A%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22accordion-header%22%20id%3D%22headingOne%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22accordion-button%22%20type%3D%22button%22%20data-bs-toggle%3D%22collapse%22%20data-bs-target%3D%22%23collapseOne%22%20aria-expanded%3D%22true%22%20aria-controls%3D%22collapseOne%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20Accordion%20Item%20%231%20%3Ci%20class%3D%22fas%20fa-angle-down%22%3E%3C%2Fi%3E%0A%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22collapseOne%22%20class%3D%22accordion-collapse%20collapse%20show%22%20aria-labelledby%3D%22headingOne%22%20data-bs-parent%3D%22accordionExample%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22accordion-body%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstrong%3EThis%20is%20the%20first%20item's%20accordion%20body.%3C%2Fstrong%3E%20It%20is%20shown%20by%20default%2C%20until%20the%20collapse%20plugin%20adds%20the%20appropriate%20classes%20that%20we%20use%20to%20style%20each%20element.%20These%20classes%20control%20the%20overall%20appearance%2C%20as%20well%20as%20the%20showing%20and%20hiding%20via%20CSS%20transitions.%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3C!--%20Accordion%20item%202%20--%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22accordion-item%22%3E%0A%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22accordion-header%22%20id%3D%22headingTwo%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22accordion-button%22%20type%3D%22button%22%20data-bs-toggle%3D%22collapse%22%20data-bs-target%3D%22%23collapseTwo%22%20aria-expanded%3D%22false%22%20aria-controls%3D%22collapseTwo%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20Accordion%20Item%20%232%20%3Ci%20class%3D%22fas%20fa-angle-down%22%3E%3C%2Fi%3E%0A%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22collapseTwo%22%20class%3D%22accordion-collapse%20collapse%22%20aria-labelledby%3D%22headingTwo%22%20data-bs-parent%3D%22accordionExample%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22accordion-body%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstrong%3EThis%20is%20the%20second%20item's%20accordion%20body.%3C%2Fstrong%3E%20It%20is%20hidden%20by%20default%20until%20its%20collapse%20is%20toggled.%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%

  ENDTEXT      
  return cHtml
  //----------------------------------------------------------------------------//      
  
  

 
********************************************************************
mod harbour - Vamos a la conquista de la Web
modharbour.org
https://www.facebook.com/groups/modharbour.club
********************************************************************
User avatar
Otto
Posts: 6403
Joined: Fri Oct 07, 2005 7:07 pm
Has thanked: 24 times
Been thanked: 2 times
Contact:

Re: accordion and webview2

Post by Otto »

Hello friends,
I made this URLEncode() function. Now this is working.

I think for the finished program, one should insert URL-encoded code as much as possible. Certainly, there is a more effective ready-made function.

Now, there's the problem with the start size.
Best regards,
Otto

Code: Select all | Expand


 
   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

 //----------------------------------------------------------------------------//      

 


Hiere is the whole code:

Code: Select all | Expand



#include "FiveWin.ch"

//----------------------------------------------------------------------------//

static csend2js := "send from Harbour"
static oWebView

function Main()

 
local hPost

    // oWebView := TWebView():New()
    //enable and open the developer tools (F12)
    oWebView := TWebView():New( 1, )    
    //  oWebView:Center()
    
    oWebView:SetSize( 1960, 800 )
    
    oWebView:bOnBind = { | cJson, cCalls | hb_jsondecode( cJson, @hPost ), fromjavascirpt(hPost) ,   ;
                                                oWebView:Return( cCalls, 0, "{ 'result': '" + csend2js + "'  }" ) }
  
    oWebView:Bind( "SendToFWH" )
  
  //oWebView:Navigate( "C:\fwh2023\samples\Untitled-1.html" )
  
  
   oWebView:Navigate( Html() )
  
  
  oWebView:SetTitle( "This is Fivewin 2024" )
  
  Sleep( 200 )
   
  oWebView:Run()
 
  oWebView:Destroy()
  
return nil
//----------------------------------------------------------------------------//
  
  function fromjavascirpt(hPost)
  local hTemp, aTemp
  aTemp := hPost[3]
  hTemp :=  aTemp['param1']
  
 // ? hTemp['text'] 
  csend2js := "gelesen in FWH " + time()
  
  if hTemp['btn'] = 'read-btn'
    msginfo(  hTemp['text'], "FWH" )
  endif
  
   if hTemp['btn'] = 'add-btn'
     csend2js := "Add button clicked - time from FWH" + time() + ":"
  endif
  
  
   oWebView:Center()
  
  
  
  return nil
  //----------------------------------------------------------------------------//
  
  function Html()
  local cHtml
  
  
  TEXT INTO cHtml
   
  <head>
   
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tischplan</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Bootstrap JS -->
<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" />
</head>

  <body> 
    <style>
      .navbar {
        display: flex;
        justify-content: space-between;
      }
      
      .navbar-nav {
        display: flex;
        flex-direction: row;
      }
    </style>     
    
    <nav class="navbar">
      <ul class="navbar-nav">
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
        
        <li class="nav-item">
          <button id="add-btn" class="btn btn-outline-success" >Add</button>
        </li>
        
        <li class="nav-item">
          <button id="read-btn" class="btn btn-outline-success">Read</button>
        </li>
        
        <li class="nav-item">
          <button id="edit-btn" class="btn btn-outline-success" >Edit</button>
        </li>
        
        <li class="nav-item">
          <button id="delete-btn" class="btn btn-outline-success">Delete</button>
        </li>
        
      </ul>
    </nav>
  
    
<div class="container mt-5">
    <div class="accordion" id="accordionExample">
        <!-- Accordion item 1 -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1 <i class="fas fa-angle-down"></i>
            </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
            </div>
            </div>
        </div>
        <!-- Accordion item 2 -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2 <i class="fas fa-angle-down"></i>
            </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the second item's accordion body.</strong> It is hidden by default until its collapse is toggled.
            </div>
            </div>
        </div>
        <!-- Accordion item 3 -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Accordion Item #3 <i class="fas fa-angle-down"></i>
            </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the third item's accordion body.</strong> It is hidden by default until its collapse is toggled.
            </div>
            </div>
        </div>
    </div>
</div>
    <script>
      
      function test(evt) {  
        var content = document.getElementById('txtContent').value;
      
        const data = {
          text: content,
          btn: 'read-btn'
        };
        
        var someData = { 'param1': data };  
        var s = SendToFWH( evt.target.id, evt.type, someData )
        .then(s => {  
          alert(s.result);  
        })  
      }  
      document.getElementById('read-btn').addEventListener('click', test);  
      
      
      document.getElementById('add-btn').addEventListener('click', addbtn);  
      function addbtn(evt) {
        const data = {
          text: 'Add button clicked',
          btn: 'add-btn'
        };
        var someData = { 'param1': data };  
        var s = SendToFWH( evt.target.id, evt.type, someData )
        .then(s => {  
         document.getElementById('txtContent').value = s.result;  
        })  
      } 
      
      document.getElementById('edit-btn').addEventListener('click', editbtn);  
      function editbtn(evt) {
        
        const data = {
          text: 'editbtn button clicked',
           btn: ''
        };
        var someData = { 'param1': data };  
        var s = SendToFWH( evt.target.id, evt.type, someData )
        .then(s => {  
          alert(s.result);  
        })  
        
      } 
      
      document.getElementById('delete-btn').addEventListener('click', deletebtn);  
      function deletebtn() {
        alert('delete button clicked');
      } 
      
    </script>
    
    
  </body>
  
  
  
  
  
  ENDTEXT  
    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

 //----------------------------------------------------------------------------//      


********************************************************************
mod harbour - Vamos a la conquista de la Web
modharbour.org
https://www.facebook.com/groups/modharbour.club
********************************************************************
User avatar
Otto
Posts: 6403
Joined: Fri Oct 07, 2005 7:07 pm
Has thanked: 24 times
Been thanked: 2 times
Contact:

Re: accordion and webview2

Post by Otto »

Image




Code: Select all | Expand


#include "FiveWin.ch"

//----------------------------------------------------------------------------//

static csend2js := "send from Harbour"
static oWebView

function Main()

 
local hPost

    // oWebView := TWebView():New()
    //enable and open the developer tools (F12)
    oWebView := TWebView():New( 1, )    
    //  oWebView:Center()
    
 //     oWebView:SetSize( 1960, 800 )
    
    oWebView:bOnBind = { | cJson, cCalls | hb_jsondecode( cJson, @hPost ), fromjavascirpt(hPost) ,   ;
                                                oWebView:Return( cCalls, 0, "{ 'result': '" + csend2js + "'  }" ) }
  
    oWebView:Bind( "SendToFWH" )
  
  //oWebView:Navigate( "C:\fwh2023\samples\Untitled-1.html" )
  
  
   oWebView:Navigate( Html() )
  
  
  oWebView:SetTitle( "This is Fivewin 2024" )
  
  Sleep( 200 )
   
  oWebView:Run()
 
  oWebView:Destroy()
  
return nil
//----------------------------------------------------------------------------//
  
  function fromjavascirpt(hPost)
  local hTemp, aTemp
  aTemp := hPost[3]
  hTemp :=  aTemp['param1']
  
 // ? hTemp['text'] 
 
  csend2js := "gelesen in FWH " + time()
  
  if hTemp['btn'] = 'read-btn'
    msginfo(  hTemp['text'], "FWH" )
  endif
  
   if hTemp['btn'] = 'add-btn'
     csend2js := "Add button clicked - time from FWH" + time() + ":"
  endif
  
  
 //  oWebView:Center()    this is working
  
  
  
  return nil
  //----------------------------------------------------------------------------//
  
  function Html()
  local cHtml
  
  
  TEXT INTO cHtml
   
  <head>
   
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tischplan</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Bootstrap JS -->
<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" />
</head>

  <body> 
    <style>
      .navbar {
        display: flex;
        justify-content: space-between;
      }
      
      .navbar-nav {
        display: flex;
        flex-direction: row;
      }
    </style>     
    
    <nav class="navbar">
      <ul class="navbar-nav">
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
        
        <li class="nav-item">
          <button id="add-btn" class="btn btn-outline-success" >Add time()</button>
        </li>
        
        <li class="nav-item">
          <button id="read-btn" class="btn btn-outline-success">Read</button>
        </li>
        
        <li class="nav-item">
          <button id="edit-btn" class="btn btn-outline-success" >Edit</button>
        </li>
        
        <li class="nav-item">
          <button id="delete-btn" class="btn btn-outline-success">Delete</button>
        </li>
        
      </ul>
    </nav>
  
    
<div class="container mt-5">
    <div class="accordion" id="accordionExample">
        <!-- Accordion item 1 -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1 <i class="fas fa-angle-down"></i>
            </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
               <H1><p id="txtContent"> </p></H1>
           
            </div>
            </div>
        </div>
        <!-- Accordion item 2 -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2 <i class="fas fa-angle-down"></i>
            </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the second item's accordion body.</strong> It is hidden by default until its collapse is toggled.
            </div>
            </div>
        </div>
        <!-- Accordion item 3 -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Accordion Item #3 <i class="fas fa-angle-down"></i>
            </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the third item's accordion body.</strong> It is hidden by default until its collapse is toggled.
            </div>
            </div>
        </div>
    </div>
</div>
    <script>
      
      function test(evt) {  
        var content = document.getElementById('txtContent').value;
      
        const data = {
          text: content,
          btn: 'read-btn'
        };
        
        var someData = { 'param1': data };  
        var s = SendToFWH( evt.target.id, evt.type, someData )
        .then(s => {  
          alert(s.result);  
        })  
      }  
      document.getElementById('read-btn').addEventListener('click', test);  
      
      
      document.getElementById('add-btn').addEventListener('click', addbtn);  
      function addbtn(evt) {
        const data = {
          text: 'Add button clicked',
          btn: 'add-btn'
        };
        var someData = { 'param1': data };  
        var s = SendToFWH( evt.target.id, evt.type, someData )
        .then(s => {  
         document.getElementById('txtContent').innerHTML = s.result;  
        })  
      } 
      
      document.getElementById('edit-btn').addEventListener('click', editbtn);  
      function editbtn(evt) {
        
        const data = {
          text: 'editbtn button clicked',
           btn: ''
        };
        var someData = { 'param1': data };  
        var s = SendToFWH( evt.target.id, evt.type, someData )
        .then(s => {  
          alert(s.result);  
        })  
        
      } 
      
      document.getElementById('delete-btn').addEventListener('click', deletebtn);  
      function deletebtn() {
        alert('delete button clicked');
      } 
      
    </script>
    
    
  </body>
  
  
  
  
  
  ENDTEXT  
    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

 //----------------------------------------------------------------------------//      



********************************************************************
mod harbour - Vamos a la conquista de la Web
modharbour.org
https://www.facebook.com/groups/modharbour.club
********************************************************************
Post Reply