godprotocol/html/parse.js

A distributed computing environment for Web 4.0 — integrating AI, decentralisation, and virtual computation.

import {message_box} from './util.js'

const script = (manager)=> {
    return `
  const account_selection_el = document.getElementById('account_selection'), address_el = document.getElementById('address'),
  from_el = document.getElementById('from'),
  query_el = document.getElementById('query'), parse = document.getElementById('parse');

   let message_box = document.getElementById('message-box')

 document.addEventListener('DOMContentLoaded', e=>{
  let accs = sessionStorage.getItem('accounts')
  if (!accs) return;

  let tml = '<option default>--Select Account--</option>'
  if (accs){
    accs = JSON.parse(accs)
    accs.map(acc=>{
      let el = document.createElement('option')
      el.id = acc.uid
      el.value = acc.uid
      el.textContent = acc.name

      account_selection_el.appendChild(el)
    })
  }
})

function render_object(obj, parentElement) {
    let list = document.createElement("ul");
    list.className = "list-group mb-3";

    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        let item = document.createElement("li");
        item.className = "list-group-item";

        if (typeof obj[key] === "object" && obj[key] !== null) {
          item.innerHTML = "<strong>" + key + ":</strong>";
          render_object(obj[key], item);
        } else {
          item.innerHTML = 
            "<strong>" + key + ":</strong> " + obj[key];
        }

        list.appendChild(item);
      }
    }

    parentElement.appendChild(list);
  }


  parse.addEventListener('click', async e=>{
    e.preventDefault()

    let account = account_selection_el.selectedIndex, query = query_el.value.trim(),
  address = address_el.value.trim();
  from = from_el.value.trim();

    message_box.textContent = ''

    let account_uid = account_selection_el.children[account].id
    if (!address){
      message_box.textContent = 'Please completely fill all form fields.'

      setTimeout(() => {
        message_box.textContent = ''
      }, 2500);
      return;
    }

    if (query) {
      try{
        query = JSON.parse(query)
      } catch(e){
       message_box.textContent = e.message

      setTimeout(() => {
        message_box.textContent = ''
      }, 2500);
      return;
      }
    }
    

    let data = {
      address, query, from, account: account_uid, account_name: account_selection_el.children[account].value
    }
      console.log(data)

    ftch('/parse', data)
    .then(res=>{
      let container = document.getElementById("parser-result");
  render_object(res, container);
      }).catch(err=>console.log(err))

    })
 `
}

const parse = (manager)=>{
    let tml = `
  <!-- Container for the Parse form -->
<div class="container my-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <form id="run-form" class="card p-4 shadow-sm">
        <h4 class="mb-4 text-center">Parse</h4>

        <!-- Account Selection -->
        <div class="mb-3">
          <label for="account_selection" class="form-label">Account</label>
          <select id="account_selection" class="form-select" required>
            <option selected disabled>-- Select Account --</option>
            <!-- Options will be injected via JS -->
          </select>
        </div>

        <!-- Address -->
        <div class="mb-3">
          <label for="address" class="form-label">Address</label>
          <input type="text" class="form-control" id="address" placeholder="Address" required>
        </div>

        <!-- From (Optional) -->
        <div class="mb-3">
          <label for="from" class="form-label">From (optional)</label>
          <input type="text" value='.storage' class="form-control" id="from" placeholder=".storage | .codes | thread">
        </div>

        <!-- Query -->
        <div class="mb-3">
          <label for="query" class="form-label">Query</label>
          <textarea class="form-control mt-2" id="query" rows="4" placeholder="Query"></textarea>
        </div>

        <!-- Submit Button -->
        <div class="d-grid">
          <button type="submit" class="btn btn-secondary" id="parse">Send</button>
        </div>
      </form>

      <!-- Message box -->
      <div id="message-box" class="mt-3"></div>

      <div class="container py-4">
        <div class="row justify-content-center">
          <div class="col-lg-8 col-md-10">

            <div class="card shadow-sm">
              <div class="card-body">
                <h3 class="card-title text-center mb-3">Parser Result Viewer</h3>
                <div id="parser-result"></div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>`

    tml = `${tml} <script>${script(manager)}</script>`
    

    return tml
}

export default parse