SpiderBasic

Code: Select all

EnableExplicit

; Application constants
Enumeration
  #MainPage
  #JsonDialog
  #ToolBar
  #FirstNameInput
  #LastNameInput
  #AgeInput
  #EmailInput
  #SubmitButton
  #DialogTitle
  #CloseDialogButton
  #CopyJsonButton
  #URLInputDialog
  #URLInput
  #OpenURLDialogButton
  #URLSubmitButton
  #URLCancelButton
EndEnumeration

; Regular expression IDs for validation
Enumeration
  #RegexEmail
  #RegexNumeric
  #RegexName
EndEnumeration

; Maximum field lengths
#MaxFirstNameLength = 30
#MaxLastNameLength = 30

; Global variables
Global FirstName$, LastName$, Age$, Email$, JSONString$
Global URLGenerated = 0  ; Track if URL has been generated and is ready to submit

;{ UI Creation

Procedure CreateJsonDialog()
  ; Create the dialog container for displaying JSON
  If ContainerMobile(#JsonDialog, #PB_Mobile_Dialog, "padding:16px; border-radius:12px;")
    
    ; Dialog header with icon and title
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px 8px 0 0;")
      IconMobile(#PB_Any, "fa-bolt", #PB_Mobile_Left) 
      TextMobile(#DialogTitle, "Generated JSON", #PB_Mobile_Center)
      CloseMobileContainer()
    EndIf
    
    ; JSON content area with monospace font
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:16px; background-color: #f5f5f5;")
      HtmlMobile("<pre id='jsonDisplay' style='font-family: monospace; font-size: 14px; color: #333; background: white; padding: 12px; border-radius: 8px; overflow-x: auto; word-wrap: break-word; margin: 0; border: 1px solid #ddd;'>JSON will appear here</pre>")
      CloseMobileContainer()
    EndIf
    
    ; Action buttons row
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:12px; gap: 12px;")
      ButtonMobile(#CopyJsonButton, "Copy", #PB_Mobile_Left)
      ButtonMobile(#CloseDialogButton, "Close", #PB_Mobile_Right)
      CloseMobileContainer()
    EndIf
    
    CloseMobileContainer()
  EndIf
EndProcedure

Procedure CreateURLInputDialog()
  ; Create the dialog for URL input
  If ContainerMobile(#URLInputDialog, #PB_Mobile_Dialog, "padding:16px; border-radius:12px;")
    
    ; Dialog header with icon and title
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:12px; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); border-radius: 8px 8px 0 0;")
      IconMobile(#PB_Any, "md-link", #PB_Mobile_Left)
      TextMobile(#PB_Any, "Submit to URL", #PB_Mobile_Center)
      CloseMobileContainer()
    EndIf
    
    ; URL input field
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px; background: white; border-radius: 12px; margin-bottom: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);")
      IconMobile(#PB_Any, "md-link", #PB_Mobile_Left)
      InputMobile(#URLInput, "", "Enter URL (e.g., https://api.example.com) ", #PB_Mobile_Center)
      CloseMobileContainer()
    EndIf
    
    ; Output area to show the URL that will be submitted
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px; background-color: #f5f5f5;")
      HtmlMobile("<pre id='urlOutput' style='font-family: monospace; font-size: 12px; color: #333; background: white; padding: 8px; border-radius: 8px; overflow-x: auto; word-wrap: break-word; margin: 0; border: 1px solid #ddd;'>URL will be displayed here</pre>")
      CloseMobileContainer()
    EndIf
    
    ; Info text
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px;")
      HtmlMobile("<div style='font-size: 12px; color: #666;'>The form data will be submitted as URL parameters to this endpoint.</div>")
      CloseMobileContainer()
    EndIf
    
    ; Action buttons row
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:12px; gap: 12px;")
      ButtonMobile(#URLCancelButton, "Cancel", #PB_Mobile_Left)
      ButtonMobile(#URLSubmitButton, "Submit", #PB_Mobile_Right)
      CloseMobileContainer()
    EndIf
    
    CloseMobileContainer()
  EndIf
EndProcedure

Procedure CreateMainPage()
  ; Create the main page container
  If ContainerMobile(#MainPage, #PB_Mobile_Page, "padding:16px; background: linear-gradient(180deg, #e6dcfc 0%, #e4e8ec 100%);")
    
    ; Create toolbar with app title
    ToolBarMobile(#ToolBar)
    IconMobile(#PB_Any, "md-account-edit", #PB_Mobile_Left)
    TextMobile(#PB_Any, "User Form", #PB_Mobile_Center)
    IconMobile(#PB_Any, "md-information", #PB_Mobile_Right)
    CloseMobileContainer()
    
    ; Form header section
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:20px 16px 10px;")
      IconMobile(#PB_Any, "md-form", #PB_Mobile_Left)
      TextMobile(#PB_Any, "Enter Your Information", #PB_Mobile_Center)
      CloseMobileContainer()
    EndIf
    
    ; First Name input field
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px; background: white; border-radius: 12px; margin-bottom: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);")
      IconMobile(#PB_Any, "md-face", #PB_Mobile_Left)
      InputMobile(#FirstNameInput, "", "First Name", #PB_Mobile_Center)
      CloseMobileContainer()
    EndIf
    
    ; Last Name input field
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px; background: white; border-radius: 12px; margin-bottom: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);")
      IconMobile(#PB_Any, "ion-ios-pulse", #PB_Mobile_Left)
      InputMobile(#LastNameInput, "", "Last Name", #PB_Mobile_Center)
      CloseMobileContainer()
    EndIf
    
    ; Age input field
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px; background: white; border-radius: 12px; margin-bottom: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);")
      IconMobile(#PB_Any, "md-cake", #PB_Mobile_Left)
      InputMobile(#AgeInput, "", "Age", #PB_Mobile_Center | #PB_Mobile_Numeric)
      CloseMobileContainer()
    EndIf
    
    ; Email input field
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px; background: white; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);")
      IconMobile(#PB_Any, "md-email", #PB_Mobile_Left)
      InputMobile(#EmailInput, "", "Email Address", #PB_Mobile_Center)
      CloseMobileContainer()
    EndIf
    
    ; Submit buttons row
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px; gap: 8px;")
      ButtonMobile(#SubmitButton, "Generate JSON", #PB_Mobile_Left)
      ButtonMobile(#OpenURLDialogButton, "Submit to URL", #PB_Mobile_Right)
      CloseMobileContainer()
    EndIf
    
    ; Info section JSON
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:16px; background: white; border-radius: 12px; margin-top: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);")
      IconMobile(#PB_Any, "fa-fighter-jet", #PB_Mobile_Left)
      HtmlMobile("<div style='font-size: 14px; color: #666;'>Fill in all fields and tap 'Generate JSON' to create a JSON object from your input data.</div>")
      CloseMobileContainer()
    EndIf
    
     ; Info section Submit
    If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:16px; background: white; border-radius: 12px; margin-top: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);")
      IconMobile(#PB_Any, "fa-fighter-jet", #PB_Mobile_Left)
      HtmlMobile("<div style='font-size: 14px; color: #666;'>Fill in all fields and tap 'Submit to URL' to create a URL with parameters. Then you can Submit the data if you want.</div>")
      CloseMobileContainer()
    EndIf
    
    CloseMobileContainer()
  EndIf
EndProcedure

;}

;{ Event Handlers

Procedure.s ValidateFormInputs(FirstName$, LastName$, Age$, Email$)
  ; Validates form inputs and returns error message if invalid, empty string if valid
  
  ; Check first name is not empty
  If Len(FirstName$) = 0
    ProcedureReturn "Please enter a first name."
  EndIf
  
  ; Check first name length
  If Len(FirstName$) > #MaxFirstNameLength
    ProcedureReturn "First name cannot exceed " + Str(#MaxFirstNameLength) + " characters."
  EndIf
  
  ; Check first name contains valid characters (must start with letter)
  If Not MatchRegularExpression(#RegexName, FirstName$)
    ProcedureReturn "First name must start with a letter and contain only letters, spaces, hyphens, and apostrophes."
  EndIf
  
  ; Check last name is not empty
  If Len(LastName$) = 0
    ProcedureReturn "Please enter a last name."
  EndIf
  
  ; Check last name length
  If Len(LastName$) > #MaxLastNameLength
    ProcedureReturn "Last name cannot exceed " + Str(#MaxLastNameLength) + " characters."
  EndIf
  
  ; Check last name contains valid characters (must start with letter)
  If Not MatchRegularExpression(#RegexName, LastName$)
    ProcedureReturn "Last name must start with a letter and contain only letters, spaces, hyphens, and apostrophes."
  EndIf
  
  ; Check age is a valid number
  If Len(Age$) = 0
    ProcedureReturn "Please enter an age."
  EndIf
  
  ; Use regular expression to check if age is numeric (positive integer only)
  If Not MatchRegularExpression(#RegexNumeric, Age$)
    ProcedureReturn "Age must be a valid number (no decimals or negative values)."
  EndIf
  
  ; Check age is within reasonable range
  If Val(Age$) < 1 Or Val(Age$) > 110
    ProcedureReturn "Please enter a valid age (1-110)."
  EndIf
  
  ; Check email format using regular expression
  If Len(Email$) = 0
    ProcedureReturn "Please enter an email address."
  EndIf
  
  ; Validate email format with regex
  If Not MatchRegularExpression(#RegexEmail, Email$)
    ProcedureReturn "Please enter a valid email address (e.g., user@domain.com)."
  EndIf
  
  ; All validations passed
  ProcedureReturn ""
EndProcedure

;}

Procedure MobileEvents()
  Select EventMobile()
    Case #SubmitButton
      ; Get values from input fields
      FirstName$ = GetMobileText(#FirstNameInput)
      LastName$ = GetMobileText(#LastNameInput)
      Age$ = GetMobileText(#AgeInput)
      Email$ = GetMobileText(#EmailInput)
      
      ; Validate inputs using the validation procedure
      Define ErrorMessage$
      ErrorMessage$ = ValidateFormInputs(FirstName$, LastName$, Age$, Email$)
      
      If ErrorMessage$ <> ""
        AlertMobile(ErrorMessage$)
        ProcedureReturn
      EndIf
      
      ; Build JSON using SpiderBasic JSON functions
      Define Person, FormattedJSON$
      
      ; Create JSON with ID 0
      If CreateJSON(0)
        ; Get the JSON value and set it as an object
        Person = SetJSONObject(JSONValue(0))
        
        ; Add members to the object using the correct syntax
        SetJSONString(AddJSONMember(Person, "firstName"), FirstName$)
        SetJSONString(AddJSONMember(Person, "lastName"), LastName$)
        SetJSONInteger(AddJSONMember(Person, "age"), Val(Age$))
        SetJSONString(AddJSONMember(Person, "email"), Email$)
        SetJSONString(AddJSONMember(Person, "createdAt"), FormatDate("%yyyy-%mm-%dd %hh:%ii:%ss", Date()))
        
        ; Compose the JSON string with pretty print formatting
        JSONString$ = ComposeJSON(0)
        
        ; Debug output to verify
        Debug "JSONString$: " + JSONString$
        
        ; Parse and format the JSON for pretty display
        ParseJSON(0, JSONString$)
        FormattedJSON$ = ComposeJSON(0, #PB_JSON_PrettyPrint)
        
        ; Debug output to verify formatted JSON
        Debug "FormattedJSON$: " + FormattedJSON$
      EndIf
      
      ; Close the current dialog
      CloseMobileContainer()
      
      ; Create a new dialog with the JSON already embedded in the HTML
      If ContainerMobile(#JsonDialog, #PB_Mobile_Dialog, "padding:16px; border-radius:12px;")
        
        ; Dialog header with icon and title
        If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px 8px 0 0;")
          IconMobile(#PB_Any, "md-json", #PB_Mobile_Left)
          TextMobile(#DialogTitle, "Generated JSON", #PB_Mobile_Center)
          CloseMobileContainer()
        EndIf
        
        ; JSON content area - embed the JSON directly in the HTML
        If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:16px; background-color: #f5f5f5;")
          HtmlMobile("<pre id='jsonDisplay' style='font-family: monospace; font-size: 14px; color: #333; background: white; padding: 12px; border-radius: 8px; overflow-x: auto; word-wrap: break-word; margin: 0; border: 1px solid #ddd;'>" + FormattedJSON$ + "</pre>")
          CloseMobileContainer()
        EndIf
        
        ; Action buttons row
        If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:12px; gap: 12px;")
          ButtonMobile(#CopyJsonButton, "Copy", #PB_Mobile_Left)
          ButtonMobile(#CloseDialogButton, "Close", #PB_Mobile_Right)
          CloseMobileContainer()
        EndIf
        
        CloseMobileContainer()
      EndIf
      
      ; Show the dialog
      ShowMobile(#JsonDialog, #True)
      
    Case #CloseDialogButton
      ; Hide the dialog
      ShowMobile(#JsonDialog, #False)
      
    Case #CopyJsonButton
      ; Copy JSON to clipboard by reading from the HTML element
      ; Use querySelector to get the pre element in the current dialog
      !var jsonElements = document.querySelectorAll('#jsonDisplay');
      !var latestElement = jsonElements[jsonElements.length - 1];  // Get the most recent one
      !if (latestElement && latestElement.textContent) {
      !  var jsonText = latestElement.textContent.trim();
      !  if (jsonText && jsonText !== 'JSON will appear here') {
      !    navigator.clipboard.writeText(jsonText).then(function() {
      !      alert('JSON copied to clipboard!');
      !    }).catch(function(err) {
      !      console.error('Failed to copy: ', err);
      !    });
      !  }
      !}
      
    Case #OpenURLDialogButton
      ; First get the current values from input fields
      FirstName$ = GetMobileText(#FirstNameInput)
      LastName$ = GetMobileText(#LastNameInput)
      Age$ = GetMobileText(#AgeInput)
      Email$ = GetMobileText(#EmailInput)
      
      ; Then validate the form data before opening URL dialog
      Define ErrorMessage$
      ErrorMessage$ = ValidateFormInputs(FirstName$, LastName$, Age$, Email$)
      
      If ErrorMessage$ <> ""
        AlertMobile(ErrorMessage$)
        ProcedureReturn
      EndIf
      
      ; Open the URL input dialog
      ShowMobile(#URLInputDialog, #True)
      
    Case #URLCancelButton
      ; Hide the URL input dialog and reset the generated URL state
      URLGenerated = 0
      ShowMobile(#URLInputDialog, #False)
      
    Case #URLSubmitButton
      ; Check if URL has already been generated (second click = navigate)
      If URLGenerated = 1
        ; Navigate to the URL using JavaScript
        !window.location.href = v_fullurl$;
        
        ; Reset the state
        URLGenerated = 0
        
        ; Hide the dialog
        ShowMobile(#URLInputDialog, #False)
        ProcedureReturn
      EndIf
      
      ; First click: Generate the URL
      ; Get the URL from the input field
      Define TargetURL$
      TargetURL$ = GetMobileText(#URLInput)
      
      ; Validate URL is not empty
      If TargetURL$ = ""
        AlertMobile("Please enter a URL.")
        ProcedureReturn
      EndIf
      
      ; Validate URL format (basic check)
      If Not MatchRegularExpression(#RegexEmail, TargetURL$)
        ; Use a simple check for http:// or https://
        If Left(TargetURL$, 7) <> "http://" And Left(TargetURL$, 8) <> "https://"
          AlertMobile("Please enter a valid URL starting with http:// or https://")
          ProcedureReturn
        EndIf
      EndIf
      
      ; Build URL with parameters using SpiderBasic's URLEncoder
      Define URLParams$
      URLParams$ = "firstName=" + URLEncoder(FirstName$) + "&"
      URLParams$ + "lastName=" + URLEncoder(LastName$) + "&"
      URLParams$ + "age=" + URLEncoder(Age$) + "&"
      URLParams$ + "email=" + URLEncoder(Email$)
      
      ; Construct the full URL
      Define FullURL$
      If FindString(TargetURL$, "?") > 0
        ; URL already has query string
        FullURL$ = TargetURL$ + "&" + URLParams$
      Else
        ; No query string, add one
        FullURL$ = TargetURL$ + "?" + URLParams$
      EndIf
      
      ; Display the URL in the output area using JavaScript
      Define UpdateURLScript$
      UpdateURLScript$ = "var urlOutput = document.getElementById('urlOutput'); if (urlOutput) { urlOutput.textContent = '" + ReplaceString(FullURL$, "'", "\'") + "'; }"
      !eval(v_updateurlscript$)
      
      ; Set the state to indicate URL is generated and ready to submit
      URLGenerated = 1
      
      ; Show confirmation alert
      AlertMobile("URL generated! Tap Submit AGAIN to navigate, or Cancel to go back.")
      
  EndSelect
EndProcedure

;{ Initialize Application

Procedure InitializeApp()
  ; Create the email validation regular expression
  ; Using [.] to match literal dot instead of \. escape
  If Not CreateRegularExpression(#RegexEmail, "^.+@.+[.].+$")
    Debug "Failed to create email regex: " + RegularExpressionError()
  Else
    Debug "Email regex created successfully"
  EndIf
  
  ; Create the numeric validation regular expression
  ; Pattern matches positive integers only (no decimals, no negative numbers)
  If Not CreateRegularExpression(#RegexNumeric, "^[0-9]+$")
    Debug "Failed to create numeric regex: " + RegularExpressionError()
  Else
    Debug "Numeric regex created successfully"
  EndIf
  
  ; Create the name validation regular expression
  ; Pattern: must start with a letter, can contain letters, spaces, hyphens, apostrophes
  If Not CreateRegularExpression(#RegexName, "^[a-zA-Z][a-zA-Z\s\-']+$")
    Debug "Failed to create name regex: " + RegularExpressionError()
  Else
    Debug "Name regex created successfully"
  EndIf
  
  ; Debug: Test the email regex
  Debug "Testing email 'tom@jones.com': " + MatchRegularExpression(#RegexEmail, "tom@jones.com")
  Debug "Testing email 'invalid': " + MatchRegularExpression(#RegexEmail, "invalid")
  Debug "Testing email 'test@test.com': " + MatchRegularExpression(#RegexEmail, "test@test.com")
  
  ; Create the dialogs first (hidden by default)
  CreateJsonDialog()
  CreateURLInputDialog()
  
  ; Create the main page
  CreateMainPage()
  
  ; Bind mobile events
  BindEvent(#PB_Event_Mobile, @MobileEvents())
EndProcedure

;}

; Start the application
InitializeApp()