godprotocol/html/run.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'),
 config_el = document.getElementById('config'),
 callback_el = document.getElementById('callback'),
id_el = document.getElementById('ID'),
 is_config = document.getElementById('is_config'), run = document.getElementById('run')

//  let configs = {}
//  is_config.addEventListener('click', e=>{
//   if (e.target.checked){
//     let addr = address_el.value.trim()

//   }
//  })

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

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

    let id = id_el.value.trim(), address = address_el.value.trim(), config = config_el.value.trim(), account = account_selection_el.selectedIndex, callback = callback_el.value.trim();

    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 && !config){
      message_box.textContent = 'Please completely fill all form fields.'

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

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

        setTimeout(() => {
          message_box.textContent = ''
        }, 2500);
        return;
      }
    }
    
    let data = {
      _id: id, address, config, account: account_uid, account_name: account_selection_el.children[account].value, callback
    }
      console.log(data)

    ftch("/run", data).then(res=>{
      message_box.textContent = res.thread_id ? 'Sequence is in execution! @ '.concat(res.thread_id).concat('   :: Callback at: ').concat(res.callback)  : res.message
      
      return;
    })
    .catch(err=>console.log(err))

 }) `
}

const run = (manager)=>{
  let tml = `
  <!-- Container for the Run 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">Run</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">
        </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>

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

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

        <!-- Submit Button -->
        <div class="d-grid">
          <button type="submit" class="btn btn-warning" id="run">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 run