godprotocol/html/load.js

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

const script = (manager)=> {
    return `
const account_selection_el = document.getElementById('account_selection'), address_el = document.getElementById('address'),
 sequence_el = document.getElementById('sequence'),
id_el = document.getElementById('ID'),
 should_compile = document.getElementById('should_compile'), load = document.getElementById('load'), retrieve_code = document.getElementById('retrieve_code')

 sequence_el.addEventListener('keyup', e=>{
  retrieve_code.textContent = 'Retrieve'
  })
 should_compile.addEventListener('click', e=>{
  let message_box = document.getElementById('message-box')

  document.getElementById('sequence_label').textContent = e.target.checked ? 'Code' : 'Sequence'
 retrieve_code.style.visibility = e.target.checked ? 'visible' : 'hidden'
 })

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

    let account = account_selection_el.selectedIndex
    console.log(account)

    if (!account){
      message_box.innerHTML = 'Provide an account, or <a href="https://${manager.options.server_domain}/create_account">create one here</a>'

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

    let account_uid = account_selection_el.children[account].id
  
  e.target.value = 'Retrieving...'
    let code = await ftch("/parse", {
      address: address_el.value,
      from: '.codes',
      account: account_uid, 
      account_name: account_selection_el.children[account].value
    })
      console.log(code, 'uhhh')
    if (code.result){
      sequence_el.value = code.result;
      e.target.textContent = 'Retrieve'
    }else e.target.textContent = code.message
})

 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)
    })
  }
})

load.addEventListener('click', e=>{
    e.preventDefault();

    let id = id_el.value.trim(), address = address_el.value.trim(), sequence = sequence_el.value.trim(), account = account_selection_el.selectedIndex, compiler = should_compile.checked;

    if (!account){
      message_box.innerHTML = 'Provide an account, or <a href="https://${manager.options.server_domain}/create_account">create one here</a>'

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

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

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

    let data = {
      _id: id, address, sequence, compiler, account: account_uid, account_name: account_selection_el.children[account].value
    }

    ftch('/load', data)
    .then(res=>{
      message_box.textContent = res.done ? 'Sequence loaded successfully! - ' + res.datapath : res.message
      return;
      }).catch(err=>console.log(err))
    
 }) `
}

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

        <!-- ID (Optional) -->
        <div class="mb-3">
          <label for="ID" class="form-label">ID (optional)</label>
          <input type="text" class="form-control" id="ID" placeholder="ID">
        </div>

        <!-- Sequence -->
        <div class="mb-3">
          <label for="sequence" class="form-label">Code</label>
          <a href="#" id="retrieve_code" class="ms-2 fst-italic fw-bold">Retrieve</a>
          <textarea class="form-control mt-2" id="sequence" rows="4" placeholder="Sequence"></textarea>
        </div>

        <!-- Compile Option -->
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" id="should_compile" checked>
          <label class="form-check-label" for="should_compile">Should compile</label>
        </div>

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

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

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

    return tml
}

export default load